:root{color-scheme:dark;--mint:#bdf9e4;--muted:#9aafb9;--line:#496571;--dark:#0a141d;--gold:#ffd19c}*{box-sizing:border-box}body{margin:0;background:#080f16;color:#edf9f4;font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.site-header{max-width:1408px;padding:0 28px;margin:auto;height:68px;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--muted)}.back-link{color:var(--mint);font-weight:600}.site-divider{opacity:.45}.edition{margin-left:auto;font:12px 'Courier New',monospace;letter-spacing:2px}main{max-width:1360px;margin:0 auto 24px}.stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 124px);overflow:hidden;background:#0e1d28;border:1px solid #2a424f;border-radius:13px;container-type:inline-size;touch-action:none;isolation:isolate}canvas{display:block;width:100%;height:100%;object-fit:contain;outline:none}.stage:fullscreen{max-height:none;width:100vw;height:100dvh;border:0;border-radius:0;background:#0b1620}.screen{position:absolute;inset:0;z-index:5}.menu{background:linear-gradient(90deg,#07131be8 0%,#07131baa 37%,#07131b00 70%);padding:5.2% 6.1%;display:flex;align-items:center}.menu-copy{width:56%}.overline{font:600 clamp(10px,1.1cqw,15px) 'Courier New',monospace;letter-spacing:.18em;color:var(--mint)}h1{font-size:clamp(38px,7.3cqw,104px);font-weight:850;line-height:1.08;letter-spacing:.02em;margin:20px 0 4px}h1 span{color:var(--mint)}.english-title{font:700 clamp(15px,2cqw,29px) 'Courier New',monospace;letter-spacing:.33em;color:#a8c7c9}.menu p{font-size:clamp(12px,1.6cqw,21px);line-height:1.8;color:#b3c6ce;margin:22px 0 28px}.primary{background:var(--mint);color:#11262c;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:50px;padding:15px 25px;font-weight:750;font-size:clamp(14px,1.6cqw,21px);border-radius:5px;box-shadow:0 3px 0 #6cb9a1;min-width:235px;transition:background .15s,transform .15s}.primary:hover{background:#d3ffef;transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:none}.primary span{font:16px monospace;opacity:.6;border-left:1px solid #659c90;padding-left:24px}.menu-buttons{display:flex;gap:28px;margin-top:24px}.text-button{background:none;padding:7px 0;color:#d5e7e9;font-size:clamp(12px,1.4cqw,18px);border-bottom:1px solid #72908d70}.text-button:hover{color:var(--mint);border-color:var(--mint)}.saved-progress{font-size:clamp(10px,1.05cqw,14px);color:#829aa8;margin-top:26px}.menu-corner{position:absolute;right:4%;top:7%;font-size:12px;letter-spacing:2px;color:#9cb4bd}.desktop-hint{display:flex;justify-content:space-between;gap:10px;color:#718891;font-size:12px;padding:19px 3px}kbd{display:inline-block;border:1px solid #2c404d;border-bottom-width:2px;border-radius:4px;padding:2px 6px;margin:0 4px;color:#bad2d4;font:11px monospace}.hud{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:2.2% 2.7%;z-index:2;pointer-events:none}.hud-actions{display:flex;gap:8px;pointer-events:auto}.icon-button{background:#0c1a24cc;border:1px solid #49657188;width:39px;height:36px;border-radius:6px;color:#d5e9e8;font-size:25px;display:flex;align-items:center;justify-content:center}.pause-icon{gap:5px}.pause-icon span{height:14px;width:3px;background:currentColor;border-radius:1px}.agent-label{display:flex;justify-content:space-between;color:#c5e1e0;font:700 11px 'Courier New',monospace;letter-spacing:2px}.vitals{width:165px}.agent-label b{font-size:14px;letter-spacing:0}.health-track{height:8px;background:#303846;border-radius:2px;margin-top:6px;overflow:hidden}.health-track div{height:100%;background:var(--mint);transition:width .1s}.power{font-size:11px;color:var(--gold);display:block;height:16px;margin-top:5px}.mission{position:absolute;left:50%;transform:translateX(-50%);text-align:center;min-width:200px}.mission>span{display:block;color:#d7e6ed;font-size:12px;letter-spacing:2px}.mission b{display:block;font-size:11px;font-weight:400;color:#a6c3cb;margin-top:4px}.progress-track{height:2px;background:#5c73754d;margin-top:8px}.progress-track div{height:100%;background:#abd9c8}.controls{position:absolute;inset:auto 0 0;padding:1.8% 3%;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;user-select:none;-webkit-user-select:none}.move-controls,.action-controls{display:flex;gap:12px;align-items:flex-end}.control{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#0a1b27a8;color:#bddde0;border:1px solid #92b8c775;box-shadow:inset 0 0 18px #badad407;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .1s}.control.move{width:66px;height:66px;border-radius:13px}.control.jump{width:65px;height:65px;border-radius:50%;margin-bottom:3px}.control.fire{width:84px;height:84px;border-radius:50%;color:var(--mint);border-color:#bdf9e4aa;background:#28534465}.control svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.control.fire svg{width:33px;height:33px}.control span{font-size:10px;pointer-events:none}.control.held{background:#acdcca60;border-color:#defff1;box-shadow:0 0 23px #baffd922}.control.fire.held{background:#629c7080}.toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:9px 17px;border:1px solid #7ecfb077;background:#0c202dea;border-radius:5px;font-size:13px;color:#dbffeb;max-width:75%;width:max-content;text-align:center;z-index:4;opacity:0;transition:opacity .15s;pointer-events:none}.toast.visible{opacity:1}.panel-screen{background:#06121acc;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:3% 6%}.panel{width:560px;max-width:100%;max-height:100%;overflow:auto;padding:28px 32px;background:#11242eea;border:1px solid #49616a;border-radius:12px;box-shadow:0 20px 80px #0006}.panel.wide{width:100%;padding:28px 32px}.panel h2{font-size:clamp(22px,3.4cqw,42px);line-height:1.3;margin:10px 0 20px}.panel-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.small-button{background:#29424b;border:1px solid #4d6672;padding:8px 16px;border-radius:5px;font-size:14px}.level-list{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.level-card{position:relative;overflow:hidden;text-align:left;padding:0;background:#152934;border:1px solid #365562;border-radius:8px}.level-card:hover:not(:disabled){border-color:var(--mint)}.level-card:disabled{opacity:.52}.level-art{height:clamp(65px,10cqw,130px);background-size:cover;background-position:center;display:flex;align-items:flex-start;padding:12px}.level-art strong{font:600 25px 'Courier New',monospace;text-shadow:0 1px 10px #000}.level-info{padding:13px}.level-info b{font-size:clamp(12px,1.5cqw,19px);display:block}.level-info span{font-size:11px;color:var(--gold);margin-top:7px;display:block}.panel-footnote{font-size:12px;color:#9db4bd;margin:20px 0 0}.instructions{margin-bottom:24px}.instructions p{display:flex;gap:22px;font-size:14px;line-height:1.6;margin:13px 0}.instructions b{color:var(--mint);min-width:46px}.instructions span{color:#c4d5dc}.compact{min-width:0;font-size:15px;padding:11px 22px;min-height:40px}.result-panel{text-align:center}.result-panel .primary{width:100%;justify-content:center;font-size:16px}.result-panel>p{color:#bed2d7;font-size:14px;line-height:1.7;margin:0}.result-stars{font-size:36px;letter-spacing:12px;color:var(--gold);margin:15px 0}.result-stats{display:flex;justify-content:center;gap:28px;margin:17px 0 24px}.stat strong{display:block;font-size:24px;color:#d4f6e6;font-family:'Courier New',monospace}.stat span{display:block;color:#90a9b1;font-size:12px;margin-top:4px}.result-secondary{display:flex;justify-content:center;gap:24px;margin-top:14px}.result-secondary button{font-size:13px}.rotate-screen{position:absolute;inset:0;z-index:20;background:#0c1c27;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}.rotate-screen svg{width:95px;height:85px;fill:none;stroke:var(--mint);stroke-width:2;margin-bottom:20px}.rotate-screen h2{font-size:24px}.rotate-screen p{font-size:15px;line-height:1.8;color:var(--muted)}.rotate-screen a{font-size:14px;border-bottom:1px solid #567d77;margin-top:25px;padding-bottom:5px;color:var(--mint)}.noscript{position:absolute;inset:0;display:grid;place-items:center;background:#0a1822;z-index:30}@media(max-width:1400px) and (min-width:901px){main{margin-left:24px;margin-right:24px}}@media(max-height:650px) and (orientation:landscape),(max-width:900px){body{overflow:hidden}main{margin:0;width:100vw;height:100dvh}.site-header,.desktop-hint{display:none}.stage{width:100%;height:100dvh;max-height:none;aspect-ratio:auto;border:0;border-radius:0}.hud{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.controls{padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}.menu{padding:3% 6%}.menu h1{font-size:clamp(35px,7cqw,64px);margin:12px 0 3px}.menu p{font-size:13px;margin:13px 0 18px}.english-title{font-size:15px}.primary{min-height:43px;padding:11px 20px;font-size:15px;min-width:210px}.menu-buttons{margin-top:13px;gap:25px}.text-button{font-size:13px}.saved-progress{margin-top:15px;font-size:11px}.menu-corner{top:7%;font-size:10px}.panel-screen{padding:2.5% 7%}.panel{padding:20px 25px}.panel.wide{padding:20px 25px}.panel h2{margin:7px 0 15px;font-size:25px}.level-art{height:70px}.panel-footnote{margin-top:12px;font-size:11px}.result-panel{width:450px}.result-panel h2{font-size:26px;margin-bottom:10px}.result-stars{font-size:27px;margin:10px 0}.result-stats{margin:10px 0 17px}.instructions p{font-size:12px;margin:8px 0}.instructions{margin-bottom:15px}.toast{font-size:12px;top:21%}}@media(max-height:390px) and (orientation:landscape){.control.move{width:58px;height:58px}.control.jump{width:59px;height:59px}.control.fire{width:73px;height:73px}.menu h1{font-size:49px;margin-top:9px}.menu p{margin:10px 0 12px;font-size:12px}.saved-progress{margin-top:10px}.menu-buttons{margin-top:9px}.menu-corner{display:none}.overline{font-size:10px}.icon-button{width:34px;height:31px}.result-panel{padding:14px 23px}.result-panel h2{font-size:24px}.result-stats{margin:8px 0 12px}.result-stars{margin:6px 0;font-size:25px}.result-secondary{margin-top:7px}.panel.wide{padding:15px 25px}}@media(orientation:portrait) and (max-width:900px){.stage{height:100dvh}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Preserve the playfield aspect ratio so characters never stretch on wide phones. */
@media(min-width:901px) and (min-height:651px){main{width:min(calc(100vw - 48px),calc((100dvh - 124px)*16/9));margin:0 auto 24px}.stage{max-height:none}}
@media(orientation:landscape) and (max-height:650px),(orientation:landscape) and (max-width:900px){main{display:flex;align-items:center;justify-content:center}.stage{flex:none;width:min(100vw,calc(100dvh*16/9));height:min(100dvh,calc(100vw*9/16));aspect-ratio:16/9}}

/* This document is a game surface: no callout/selection/drag on touch devices. */
html,body{overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
main,main *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
main img,main svg,canvas{-webkit-user-drag:none}
main{touch-action:manipulation}
body.in-game,body.in-game main,#game,#controls,#controls *,#joystick{touch-action:none}
.stage button,.stage a{touch-action:manipulation}
#controls .control{touch-action:none}
.control>*{pointer-events:none}
/* Large horizontal stick: the entire rectangle is a touch target. */
.joystick{--stick-x:0px;--stick-y:0px;position:relative;pointer-events:auto;flex:none;width:168px;height:116px;cursor:grab;touch-action:none;outline-offset:0}
.joystick.held{cursor:grabbing}
.stick-base{position:absolute;left:50%;top:50%;width:110px;height:110px;transform:translate(-50%,-50%);border:1px solid #a6d5d66e;border-radius:50%;background:radial-gradient(circle,#15394240 0 49%,#15394222 50% 65%,#a6e9d810 66%);box-shadow:inset 0 0 0 8px #96cbd509}
.stick-base svg{width:100%;height:100%;fill:none;stroke:#d0efebad;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.stick-track{opacity:.25;stroke-dasharray:2 6}
.stick-knob{position:absolute;width:56px;height:56px;left:calc(50% - 28px);top:calc(50% - 28px);transform:translate(var(--stick-x),var(--stick-y));border:2px solid #bdf9e4bb;border-radius:50%;background:#234b50a8;box-shadow:0 3px 13px #001a2240,inset 0 0 14px #c4ffe31a;display:grid;place-items:center;pointer-events:none}
.stick-knob>span{width:9px;height:9px;border:1px solid #d2fff0;border-radius:50%;background:#bdf9e43d}
.joystick:not(.held) .stick-knob{transition:transform .1s ease-out}
.joystick.held .stick-base{border-color:#bdf9e4c9;background-color:#16403a30}
.joystick.held .stick-knob{background:#477c71cc;box-shadow:0 0 20px #bdf9e423}
.stick-label{position:absolute;bottom:-1px;left:0;right:0;text-align:center;font-size:11px;color:#d2ece5a6;pointer-events:none}
.joystick>*{pointer-events:none}
.controls{padding-bottom:12px}
.control.jump{width:78px;height:78px}
.control.fire{width:94px;height:94px}
.action-controls{gap:18px}
@media(orientation:landscape) and (max-height:450px){.controls{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}.joystick{width:156px;height:110px}.stick-base{width:104px;height:104px}.control.jump{width:74px;height:74px}.control.fire{width:86px;height:86px}.action-controls{gap:16px}}
@media(orientation:landscape) and (max-height:330px){.joystick{height:100px;width:146px}.stick-base{height:94px;width:94px}.stick-knob{width:50px;height:50px;left:calc(50% - 25px);top:calc(50% - 25px)}.control.jump{width:68px;height:68px}.control.fire{width:80px;height:80px}}

/* Arsenal deck: three deliberate taps above the two primary thumb actions. */
.action-deck{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ability-controls{display:flex;gap:8px;align-items:center}
.control.utility{position:relative;isolation:isolate;overflow:hidden;width:68px;height:60px;padding:3px 4px;border-radius:12px;gap:2px;background:#0a1b27c4;box-shadow:0 2px 12px #06101722}
.control.utility svg{height:23px;width:28px;stroke-width:1.6}
.control.utility>span{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;font-size:11px;white-space:nowrap}
.control.utility b{font-weight:600}
.control.utility small{font-size:10px;color:#87b8a9;font-variant-numeric:tabular-nums;min-width:22px}
.control.utility.held{background:#325d55df}
.control.weapon-switch{width:86px;color:#cfebda;border-color:#a9dec68c}
.weapon-switch .shotgun-symbol,.weapon-switch[data-weapon=shotgun] .rifle-symbol{display:none}
.weapon-switch[data-weapon=shotgun] .shotgun-symbol{display:block}
.control.weapon-switch[data-weapon=shotgun]{color:#ffda9f;border-color:#ffc683b3;background:#3e3428c4}
.control.weapon-switch[data-weapon=shotgun] small{color:#d6b58c}
.control.fire.shotgun{color:#ffda9f;border-color:#ffd099b0;background:#66472470}
.control.fire.shotgun.held{background:#a8784099}
.control.skill{color:#c2f5e3;border-color:#8cd8bc8c}
.control.pulse-skill{color:#b7e8ff;border-color:#8ed9ed8c}
.control.skill::before{content:'';position:absolute;inset:auto 0 0;height:var(--cooldown,0%);background:#06111ce0;border-top:1px solid #7194a766;z-index:-1;pointer-events:none}
.control.skill.cooling{border-color:#566875a6;color:#a3b5c0}
.control.skill.cooling small{color:#becdd4}
.control.skill:not(.cooling){box-shadow:inset 0 0 12px #baffd90b}
.combat-readout{display:flex;align-items:baseline;justify-content:space-between;height:21px;padding-top:5px;font:600 12px 'Courier New',monospace;letter-spacing:.04em;color:#d0e6df}
.combat-readout small{font:9px 'PingFang SC',sans-serif;color:#89a8a7}
#combo{font:600 11px 'PingFang SC',sans-serif;color:#ffd39b}
.combo-track{height:2px;overflow:hidden;margin-top:3px}
.combo-track i{display:block;height:100%;width:0;background:#ffd39b;transition:width .1s linear}
.level-best{display:block;font-size:10px;color:#9dbeb9;margin-top:6px}
.result-stats{gap:23px}.result-stats .stat{min-width:55px}.result-stats .stat strong{font-size:22px}
body:not(.in-game) .stage{touch-action:manipulation}
body:not(.in-game) .panel{touch-action:pan-y;overscroll-behavior:contain}
.joystick:focus-visible{outline:2px solid var(--mint);border-radius:50%}
@media(orientation:landscape) and (max-height:450px){.action-deck{gap:10px}.control.utility{width:63px;height:54px}.control.weapon-switch{width:82px}.control.utility svg{height:22px}.control.utility>span{font-size:10px;gap:4px}.control.utility small{font-size:10px}.help-panel{max-height:100%}.result-stats{gap:20px}.result-stats .stat strong{font-size:20px}}
@media(orientation:landscape) and (max-height:330px){.action-deck{gap:8px}.control.utility{width:57px;height:48px;border-radius:10px}.control.weapon-switch{width:76px}.control.utility svg{height:20px}.ability-controls{gap:6px}.control.utility>span{font-size:10px;gap:3px}.control.utility small{font-size:9px}.controls{padding-right:max(12px,env(safe-area-inset-right))}.vitals{width:140px}.mission{min-width:160px}.mission>span{font-size:11px;letter-spacing:1px}.combat-readout{font-size:11px}.hud{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.hud-actions{gap:5px}.result-stats{gap:16px}}
