:root{--ink:oklch(18% .018 145);--paper:oklch(93% .025 92);--hazard:oklch(74% .16 70);--danger:oklch(62% .22 30);--safe:oklch(72% .16 145)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090c0a;font-family:"Arial Narrow","PingFang SC",sans-serif;color:var(--paper);touch-action:none;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{display:grid;place-items:center}
#game-shell{position:relative;width:min(100vw,520px);height:100dvh;max-height:1000px;overflow:hidden;background:#17201b;box-shadow:0 0 80px #000}
canvas{display:block;width:100%;height:100%}
.screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:clamp(28px,8vw,48px);padding-bottom:max(42px,calc(28px + env(safe-area-inset-bottom)));background:linear-gradient(180deg,transparent 18%,rgba(8,12,10,.28) 45%,rgba(8,12,10,.96) 78%);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.screen.active{opacity:1;pointer-events:auto;transform:none}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--hazard);margin-bottom:12px;text-transform:uppercase}
h1,h2{margin:0;font-family:Impact,"Arial Narrow",sans-serif;font-weight:900;line-height:.84;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(72px,22vw,116px);letter-spacing:-.035em;text-shadow:0 5px 0 #070a08,0 12px 30px #000}
h1 span{color:var(--hazard)}
h2{font-size:clamp(50px,14vw,76px);letter-spacing:-.025em}
.screen p{max-width:30ch;margin:20px 0;color:rgba(245,240,220,.76);font-size:15px;line-height:1.7}
button{min-height:48px;border:0;border-radius:4px;padding:0 26px;background:var(--hazard);color:#17120a;font:900 17px/1 "Arial Narrow","PingFang SC",sans-serif;letter-spacing:.06em;box-shadow:0 5px 0 oklch(45% .12 66),0 12px 24px rgba(0,0,0,.35);cursor:pointer;transition:transform .12s ease,filter .12s ease}
button:active{transform:translateY(3px) scale(.97);box-shadow:0 2px 0 oklch(45% .12 66)}
button:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
.screen small{margin-top:18px;color:rgba(245,240,220,.48);font-size:11px;letter-spacing:.08em}
#result-screen{justify-content:flex-end;padding-top:24px;padding-bottom:max(24px,calc(18px + env(safe-area-inset-bottom)))}
#result-screen h2{font-size:clamp(42px,12vw,66px);line-height:.92}
#result-screen p{margin:13px 0;font-size:14px;line-height:1.55}
#result-screen .eyebrow{margin-bottom:8px}
#result-screen .stats{margin:2px 0 16px}
#result-screen .stats span{padding:10px 8px}
#result-screen button{min-height:46px}
.stats{display:flex;width:100%;gap:1px;margin:4px 0 24px;background:rgba(255,255,255,.08)}
.stats span{flex:1;padding:13px 8px;background:rgba(10,14,12,.76);font-size:10px;color:rgba(255,255,255,.5)}
.stats b{display:block;margin-bottom:3px;color:var(--paper);font-size:17px;font-variant-numeric:tabular-nums}
#hud{position:absolute;z-index:5;left:18px;right:18px;top:max(16px,env(safe-area-inset-top));display:none;grid-template-columns:64px 1fr 56px;align-items:center;gap:10px;text-shadow:0 2px 4px #000;pointer-events:none}
#hud.visible{display:grid}
.mission span{display:block;font:900 28px/1 Impact,sans-serif;color:var(--hazard);font-variant-numeric:tabular-nums}.mission small,.ammo small{display:block;font-size:9px;color:rgba(255,255,255,.62)}
.progress{height:4px;background:rgba(255,255,255,.18)}.progress i{display:block;height:100%;width:0;background:var(--hazard);box-shadow:0 0 9px var(--hazard)}
.ammo{text-align:right}.ammo span{display:block;font:900 24px/1 Impact,sans-serif;font-variant-numeric:tabular-nums}
#boss-hud{position:absolute;z-index:6;display:none;left:14%;right:14%;top:max(74px,calc(env(safe-area-inset-top) + 64px));text-align:center;text-shadow:0 2px 4px #000}
#boss-hud.visible{display:block}#boss-hud span{font:900 15px Impact,sans-serif;letter-spacing:.12em}#boss-hud div{height:8px;margin-top:7px;background:#270d0a;box-shadow:0 2px 8px #000}#boss-hud i{display:block;width:100%;height:100%;background:var(--danger)}
#toast{position:absolute;z-index:7;left:50%;top:25%;padding:8px 14px;background:rgba(10,14,12,.86);color:var(--hazard);font:900 18px Impact,sans-serif;letter-spacing:.08em;opacity:0;transform:translate(-50%,10px) scale(.9);transition:opacity .18s ease,transform .18s ease;pointer-events:none;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#sound-button{position:absolute;z-index:11;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:42px;min-height:42px;padding:0;border-radius:50%;background:rgba(8,12,10,.7);color:rgba(255,255,255,.7);box-shadow:none;font-size:12px}
@media(min-width:600px){#game-shell{height:min(94vh,1000px);border-radius:8px}}
@media(max-height:700px){#result-screen{padding:18px 28px max(16px,env(safe-area-inset-bottom))}#result-screen h2{font-size:38px}#result-screen p{margin:8px 0;line-height:1.4}#result-screen .stats{margin-bottom:12px}.stats b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.screen,#toast,button{transition:none}}