*{box-sizing:border-box}body{margin:0;background:#091214;color:#dce8e3;font:14px system-ui,-apple-system,"Microsoft Yahei",sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,#335a4920,transparent 50%),repeating-linear-gradient(0deg,transparent 0 63px,#879f9605 64px)}main{min-height:100svh;display:flex;justify-content:center;align-items:center;gap:56px;padding:32px}.brief{width:310px;align-self:stretch;display:flex;flex-direction:column;padding-top:30px}.brand{text-decoration:none;color:#f0f3e9;font-weight:850;letter-spacing:3px;font-size:23px}.brand span{color:#c8ee80}.eyebrow{font:10px monospace;color:#83958e;letter-spacing:2px;margin-top:70px}h1{font-size:43px;letter-spacing:-2px;line-height:1.35;margin:22px 0}h1 span{color:#c7ec89}.brief p{color:#81958b;line-height:2}.spec{display:grid;grid-template-columns:100px 1fr;gap:15px;border-block:1px solid #294038;padding:24px 0;margin-top:25px;font:11px monospace}.spec span{color:#82938b}.instruction{display:grid;grid-template-columns:28px 1fr;gap:18px 8px;font-size:11px;margin-top:30px;color:#92a49a}.instruction b{color:#c8ec8b;font:11px monospace}footer{font:8px monospace;color:#60756b;margin-top:auto;padding-top:50px}footer span{display:block;margin-top:8px}.console{width:450px;flex-shrink:0;border:1px solid #385047;box-shadow:0 24px 100px #0008}header,.bottom{height:44px;background:#101f20;display:flex;align-items:center;gap:14px;padding:0 17px;font:10px monospace;letter-spacing:1px}header>div{flex:1}i{display:inline-block;width:5px;height:5px;background:#c8ed87;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #c9f68d}button{cursor:pointer;font:inherit;color:inherit}header button{border:0;background:transparent;color:#a8bcb1;padding:6px}#pause{font-size:17px}.viewport{position:relative;aspect-ratio:450/780;background:#122e29;overflow:hidden;touch-action:none}canvas{width:100%;height:100%;display:block}.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;padding:21px 20px;background:linear-gradient(#051216dd,transparent);text-shadow:0 2px 4px #000}.hud small{font:10px monospace;color:#b1c7b9}.hud strong{display:block;font:25px monospace;letter-spacing:2px;margin-top:6px}.bars{width:150px}.bars label{display:flex;align-items:center;font:9px monospace;gap:8px;margin-bottom:7px}.bars small{font-size:8px}progress{width:112px;height:5px;border:0;background:#ffffff20}progress::-webkit-progress-bar{background:#ffffff20}progress::-webkit-progress-value{background:#c9ee8e}#shield::-webkit-progress-value{background:#7cdade}.bottom{height:32px;justify-content:space-between;font-size:8px;color:#7f9b8e}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(#06171b55,#06171bdb);text-align:center}.badge{color:#d2edaa;font:9px monospace;letter-spacing:2px;border:1px solid #c9ee8b55;padding:9px 12px}h2{font-size:64px;line-height:1.1;margin:22px 0;color:#f1f2de;letter-spacing:8px}h2 span{display:block;font:14px monospace;letter-spacing:13px;margin-top:14px;padding-left:10px;color:#cbed9b}#message{font-size:12px;line-height:2;color:#b5c4ba}#start{background:#ceeaa1;color:#14231b;border:0;width:230px;padding:17px 22px;text-align:left;font-weight:700;margin:28px 0 17px}#start span{float:right;font-size:20px}#hint{font-size:9px;color:#8ea699}.zones{margin-top:54px;font-size:9px;color:#9db2a4}.zones b{color:#4f6f5c;margin:0 7px}.rail{width:166px}.rail>span{font:9px monospace;letter-spacing:2px;color:#9bb09e}ol{list-style:none;padding:0;margin:30px 0 60px}li{display:flex;gap:18px;align-items:center;margin-bottom:28px;opacity:.38}li.active{opacity:1;color:#d4edaa}li b{font:11px monospace;border:1px solid #5f7556;padding:9px}li div{font-size:12px}li small{display:block;font:8px monospace;letter-spacing:1px;margin-top:6px}.drops{border-top:1px solid #294038;padding-top:22px}.drops small{font-size:9px;color:#8c9e90}.drops p{display:flex;align-items:center;gap:12px;font-size:11px;color:#aab9ac}.drops b{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;font:15px monospace}.gold{color:#f1cd77}.green{color:#9ce6a9}.blue{color:#7ed6ed}.note{font-size:10px;color:#658174;line-height:2.2;margin-top:30px}#toast{position:absolute;top:26%;width:100%;text-align:center;color:#d9f7a8;font:14px monospace;letter-spacing:2px;pointer-events:none;opacity:0;transition:opacity .2s}@media(max-width:1150px){main{gap:28px}.brief{width:240px}h1{font-size:34px}.rail{display:none}}@media(max-width:760px){main{padding:0;display:block}.brief{display:none}.console{width:min(100%,450px);margin:auto;border:0}.viewport{height:calc(100svh - 76px);aspect-ratio:auto;max-height:850px}header{padding-top:env(safe-area-inset-top)}.bottom{height:32px}h2{font-size:58px}}

/* Equal-size Chinese game title, including the second line. */
#title{font-size:46px;line-height:1.24;letter-spacing:5px}#title small{display:block;font:11px monospace;letter-spacing:4px;margin-top:15px;color:#cbed9b}#title span{font-size:11px;letter-spacing:3px}
@media(max-width:360px){#title{font-size:40px;letter-spacing:4px}}

/* Chinese combat status labels and distinct meter colors. */
.bars label{font-family:system-ui,-apple-system,"Microsoft Yahei",sans-serif;font-size:11px;font-weight:600;gap:8px;white-space:nowrap}
.bars label:has(#hp){color:#ff555e}.bars label:has(#shield){color:#29bdff}
#hp{accent-color:#f24452}#shield{accent-color:#18b9ff}
#hp::-webkit-progress-value{background:#f24452;box-shadow:0 0 7px #f2445266}
#shield::-webkit-progress-value{background:#18b9ff;box-shadow:0 0 8px #18b9ff88}
#hp::-moz-progress-bar{background:#f24452}#shield::-moz-progress-bar{background:#18b9ff}