:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:#fff;background:#b7d8ee;color-scheme:light dark}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;overscroll-behavior:none}
#stage{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:#cce3f0}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.hud{position:absolute;top:max(28px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:1}
.cash{margin-top:36px;display:flex;align-items:center;gap:7px;height:25px;min-width:80px;padding-right:6px;border:1px solid #b8d8ee;background:#28485eaa;border-radius:5px;box-shadow:0 1px 4px #27496455;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #24405a}
.cash output{flex:1;text-align:right}
.bill{display:grid;place-items:center;width:31px;height:22px;color:#dcffbd;background:#35bd17;border:2px solid #eeffd4;border-radius:4px;box-shadow:inset 0 0 0 2px #258d12}
.mark{line-height:.82;text-align:center;transform:rotate(-3deg);filter:drop-shadow(0 2px 1px #1948779c)}
.mark strong{display:block;font-size:16px;letter-spacing:-.8px;font-weight:1000}
.mark small{font-size:8px;color:#ffe06b;font-weight:950;letter-spacing:.15px}
#objective{position:absolute;bottom:max(21px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 122px);width:max-content;text-align:center;background:#193850e8;color:#f5fbff;border:1px solid #afc9df99;padding:8px 12px;border-radius:18px;font-size:12px;font-weight:700;box-shadow:0 2px 12px #16334a28;pointer-events:none}
nav{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid #b3d1e4b0;background:#1f4059e6;border-radius:12px;padding:10px 16px;font-weight:700}
nav button{width:44px;height:44px;padding:0;border-radius:50%;font-size:19px}
button:active{transform:scale(.95);filter:brightness(1.18)}
button:focus-visible{outline:3px solid #ffdc65;outline-offset:3px}
#joystick{position:absolute;pointer-events:none;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:84px;height:84px;border:2px solid #fff9;background:#31587536;border-radius:50%}
#joystick i{position:absolute;left:50%;top:50%;width:32px;height:32px;border-radius:50%;background:#f0fbffd9;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px)))}
dialog,#failure{width:min(340px,calc(100vw - 32px));padding:24px;border:1px solid #b3d1e477;border-radius:20px;background:#153149;color:#fff;box-shadow:0 15px 60px #16334a60}
dialog::backdrop{background:#0d253c70;backdrop-filter:blur(4px)}
dialog h1{margin:0;font-size:24px;letter-spacing:-.02em}
dialog p,#failure p{font-size:14px;line-height:1.5;color:#dbedfa}
dialog button{display:block;width:100%;margin-top:8px}
#resume{background:#e2f3ff;color:#123650}
#failure{position:absolute;inset:0;margin:auto;height:max-content;z-index:2}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){dialog::backdrop{backdrop-filter:none}.cash,button,#objective{background:#173850}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}

[hidden]{display:none!important}
.mission{position:absolute;left:max(20px,env(safe-area-inset-left));top:calc(max(28px,env(safe-area-inset-top)) + 70px);display:grid;gap:3px;max-width:calc(100% - 40px);padding:7px 9px 6px;background:#153149e8;color:#f2f9ff;border:1px solid #c6e5f16b;border-radius:8px;pointer-events:none;font-size:11px;font-variant-numeric:tabular-nums}
.mission strong{font-size:12px}.mission progress{width:100%;height:4px;accent-color:#9ee96f}
.conditions{display:flex;gap:9px;font-weight:700;color:#c9e8ff}.conditions:has(#health[hidden] + #storm[hidden]){display:none}
body[data-storm="true"] #storm{color:#ffdd7a}
body[data-danger]:not([data-danger=""]) #stage::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 50px 4px #517ec3aa;pointer-events:none}
#combo{position:absolute;top:36%;left:50%;transform:translateX(-50%) rotate(-5deg);color:#ffe279;font-size:22px;font-weight:950;white-space:nowrap;text-shadow:0 2px 2px #473417,0 0 9px #442700b0;pointer-events:none}
#results{color:#ffe279;font-weight:800}
#next-level{background:#e2f3ff;color:#123650}
#replay{margin-top:14px;padding-top:12px;border-top:1px solid #b3d1e450;font-size:13px}
#replay label{display:block;margin-bottom:5px}
#level-select{width:100%;font:inherit;padding:8px;color:#f3faff;background:#23445d;border:1px solid #b3d1e477;border-radius:7px}
@media(prefers-reduced-motion:reduce){#combo{transform:translateX(-50%)}}

body[data-danger="hit"] #stage::after{box-shadow:inset 0 0 48px 4px #b44242ad}
#orders{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:calc(max(21px,env(safe-area-inset-bottom)) + 55px);display:flex;gap:6px;pointer-events:none;color:#f2f9ff;font-size:10px;font-variant-numeric:tabular-nums}
#orders div{display:grid;gap:2px;min-width:91px;padding:5px 8px;background:#153149ed;border:1px solid #c6e5f16b;border-radius:7px}
#orders span{color:#ffdc98}#orders [data-ready="true"] span{color:#bef495}
#orders progress{width:100%;height:4px;accent-color:#9ee96f}
#attack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:55px;height:53px;border-radius:14px;color:#e7f7ff}
#attack span{font-size:9px;line-height:1.1}
#attack[data-upgraded="true"]{color:#a6f5ff;border-color:#f6c862;background:#20526b}
nav{align-items:flex-end}
#dash{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:55px;height:49px;border-radius:14px;color:#e4faff;background:linear-gradient(0deg,#2b6885 var(--cooldown,0%),#1f4059e6 0)}
#dash span{font-size:10px;line-height:1.1;font-variant-numeric:tabular-nums}
#dash[data-cooldown="true"]{color:#b3d1df}
#stage[data-fatal] :is(.hud,.mission,#orders,#combo,#objective,nav){display:none}
#stage[data-fatal]::after{position:absolute;inset:0;z-index:1;content:"";pointer-events:none;box-shadow:none;background:radial-gradient(ellipse at 50% 44%,transparent 23%,#02050b55 64%,#02050bd9 100%),linear-gradient(0deg,#03070dd9,transparent 27%)}
#fatal{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:1fr auto;align-items:end;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:linear-gradient(145deg,#4fc6ff15,transparent 40%)}
.fatal-kicker{align-self:start;color:#a2c9e1;font-size:10px;font-weight:850;letter-spacing:.28em}
.fatal-caption{grid-row:2;color:#f3a68e;text-shadow:0 2px 14px #02080e;pointer-events:none;font-size:11px;letter-spacing:.24em;font-weight:850}
#skip-fatal{position:absolute;right:max(15px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));font-size:13px;min-height:44px;color:#e1f3ff;background:#0f2237}
dialog[data-aftermath="true"]{margin:auto auto max(16px,env(safe-area-inset-bottom));background:#0d1b2beF}
dialog[data-aftermath="true"]::backdrop{backdrop-filter:none;background:linear-gradient(0deg,#03070db8,transparent 44%)}
dialog[data-aftermath="true"] h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#death-verdict{display:none;position:absolute;inset:0;z-index:3;place-items:center;pointer-events:none;color:#d04044;background:linear-gradient(0deg,#030203b5,#06020450 34%,#100405e8 45%,#100405e8 55%,#06020450 66%,#0302039c);text-shadow:0 3px 13px #270308,0 0 32px #67070b78;font-family:Georgia,"Times New Roman",serif;font-size:clamp(43px,10vw,126px);font-weight:700;letter-spacing:.16em;text-indent:.16em;white-space:nowrap}
#stage:is([data-fatal="verdict"],[data-fatal="finished"]) #death-verdict{display:grid}
#stage[data-fatal="verdict"] #death-verdict{animation:death-verdict-in 1.2s ease-out both}
#stage[data-fatal="verdict"] .fatal-caption{visibility:hidden}
#stage[data-fatal="verdict"] #skip-fatal{z-index:4}
#stage[data-fatal="verdict"] #fatal{z-index:4;background:none}
@keyframes death-verdict-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#stage[data-fatal="verdict"] #death-verdict{animation:none}}

#cinematic-back{position:absolute;z-index:5;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:1px solid #b3d1e477;border-radius:12px;background:#153149;color:#fff;padding:11px 16px;font-size:14px;font-weight:700;text-decoration:none}