:root{--ink:#f4fbf7;--muted:#b5cfcb;--night:#091820;--glass:#0b2029c9;--line:#ffffff26;--coral:#f2634e;--yellow:#ffd447;--cyan:#39d7d1;--teal:#168d8b}
*{box-sizing:border-box}
html,body,#game{width:100%;height:100%;margin:0;overflow:hidden;background:var(--night);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;touch-action:none}
button{font:inherit;color:inherit}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;background:#9fd4e5}
#hud{position:absolute;inset:0;pointer-events:none;padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));text-shadow:0 2px 5px #061015}
.glass{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(5px);box-shadow:0 5px 18px #0004}
#mission{position:absolute;left:9px;top:9px;width:min(318px,calc(100vw - 166px));padding:7px 10px;border-radius:11px}
#beat{display:block;color:var(--yellow);font-size:9px;font-weight:950;letter-spacing:.14em}
#objective{display:block;font-size:clamp(13px,1.6vw,16px);line-height:1.14;margin:1px 0 3px}
#mission small{display:flex;gap:9px;color:var(--muted);font-size:9px}
#clock{color:var(--cyan)}
#route{position:absolute;left:9px;right:128px;top:73px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
#route i{height:3px;border-radius:99px;background:#ffffff42;box-shadow:0 1px 0 #0004}
#route i.current{background:var(--coral);box-shadow:0 0 10px #f2634e}
#route i.done{background:var(--yellow);box-shadow:0 0 10px #ffd44799}
#minimap{position:absolute;right:9px;top:60px;width:108px;height:108px;border-radius:14px;border:1px solid var(--line);background:#102630cc;box-shadow:0 5px 18px #0006}
#mode-card{position:absolute;right:64px;top:9px;min-width:78px;padding:6px 9px;border-radius:11px;text-align:right}
#mode-card span{display:block;color:var(--muted);font-size:8px;letter-spacing:.13em}
#mode-card b{color:var(--cyan);font-size:13px}
#pause-button{position:absolute;right:9px;top:9px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--glass);font-size:17px;font-weight:900;pointer-events:auto;cursor:pointer}
#combat-card{position:absolute;right:9px;top:176px;width:108px;padding:5px 7px;border-radius:10px;text-align:right}
#combat-card span,#combat-card small{display:block;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.1em}
#combat-card b{display:block;color:var(--cyan);font-size:12px;margin:1px 0}
#armor{color:#8ff!important}
#inventory{margin-top:3px;color:var(--yellow)!important;letter-spacing:.01em!important;line-height:1.35}
#heat-card{position:absolute;right:9px;top:249px;width:108px;padding:4px 7px;border-radius:9px;text-align:right}
#heat-card span{display:block;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.12em}
#heat-card b{color:var(--yellow);font-size:11px;letter-spacing:.14em}
#crosshair{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s;filter:drop-shadow(0 1px 3px #000)}
#crosshair.active{opacity:.9}
#crosshair:before{content:"";position:absolute;inset:8px;border:2px solid #d9ffff;border-radius:50%}
#crosshair i{position:absolute;background:#39d7d1}
#crosshair i:first-child{left:11px;top:0;width:2px;height:6px;box-shadow:0 18px #39d7d1}
#crosshair i:last-child{left:0;top:11px;width:6px;height:2px;box-shadow:18px 0 #39d7d1}
#prompt{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);width:min(330px,76vw);padding:6px 11px;text-align:center;border-radius:99px;background:#091a22c9;border:1px solid var(--line);font-size:10px;font-weight:900;opacity:0;transition:opacity .15s;white-space:nowrap}
#prompt.visible{opacity:1}
#toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);max-width:min(700px,84vw);padding:8px 15px;border:1px solid #ffffff32;border-radius:13px;background:#091a22d9;box-shadow:0 9px 28px #0006;font-weight:1000;font-size:clamp(18px,3.2vw,34px);letter-spacing:.05em;color:var(--yellow);opacity:0;text-align:center;text-shadow:0 3px 0 #061015,0 0 12px #061015;transition:opacity .15s}
#toast.visible{opacity:1}
#hold{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);width:min(230px,48vw);height:5px;border-radius:99px;overflow:hidden;background:#06141abb;opacity:0}
#hold.visible{opacity:1}
#hold i{display:block;width:0;height:100%;background:var(--yellow)}
#controls{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);display:flex;justify-content:center;flex-wrap:wrap;gap:2px 11px;width:max-content;max-width:calc(100vw - 18px);padding:4px 10px;border-radius:12px;font-size:7px;line-height:1.2;color:var(--muted);white-space:nowrap;opacity:.8}
#controls b{color:var(--ink)}
#stick{display:none;position:absolute;left:22px;bottom:25px;width:108px;height:108px;border:2px solid #ffffff3a;border-radius:50%;background:#0a1b2255}
#stick i{position:absolute;left:35px;top:35px;width:36px;height:36px;border-radius:50%;background:#168d8bcc;border:2px solid #ffffff77}
#action-button{display:none;position:absolute;right:22px;bottom:27px;width:88px;height:88px;border:3px solid #ffe58c;border-radius:50%;background:#e45645e9;font-size:12px;font-weight:1000;letter-spacing:.05em;box-shadow:0 8px 30px #0008,0 0 0 7px #ffd44720;pointer-events:auto}
#jump-button,#fire-button{display:none;position:absolute;width:68px;height:68px;border-radius:50%;font-size:10px;font-weight:1000;letter-spacing:.04em;pointer-events:auto;box-shadow:0 8px 28px #0008}
#jump-button{right:118px;bottom:27px;border:2px solid #ffffff99;background:#168d8bdb}
#fire-button{right:22px;bottom:127px;border:2px solid #7ffcff;background:#0b4b54eb;color:#dfffff}
#use-button{display:none;position:absolute;right:104px;bottom:116px;width:60px;height:60px;border-radius:50%;border:2px solid #ffd447;background:#7c5d1ee8;color:#fff2b5;font-size:9px;font-weight:1000;pointer-events:auto;box-shadow:0 8px 28px #0008}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:22px;pointer-events:auto}
.overlay.visible{display:flex}
#start-overlay{justify-content:flex-start;background:linear-gradient(90deg,#06141bf2 0,#06141bce 42%,#06141b66 68%,#06141b14 100%),linear-gradient(0deg,#0818207a,#08182010 55%,#08182055)}
#pause-overlay,#end-overlay,#error-overlay{background:linear-gradient(#06141bd8,#081820ee)}
.card{width:min(620px,92vw);padding:clamp(22px,3.6vw,36px);border-radius:22px;border:1px solid #ffffff2b;background:radial-gradient(circle at 86% 6%,#1b5a61b8 0,transparent 42%),linear-gradient(150deg,#15323dcf,#0b2028e8);box-shadow:0 26px 82px #0009}
#start-overlay .card{margin-left:clamp(0px,4vw,64px);max-height:calc(100vh - 44px);overflow:auto}
.card.compact{max-width:500px;text-align:center}
.eyebrow{color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.16em}
h1{margin:8px 0 11px;font-size:clamp(42px,7vw,72px);line-height:.88;letter-spacing:-.055em}
h1 em{font-style:normal;color:var(--yellow)}
h2{font-size:clamp(32px,6vw,54px);margin:7px 0}
.lede{color:#d5e6e2;font-size:clamp(14px,1.7vw,17px);line-height:1.42;max-width:570px}
.beats{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:17px 0}
.beats span{padding:7px 3px;border:1px solid #ffffff22;border-radius:8px;color:var(--yellow);font-size:9px;font-weight:900;background:#07191f99;text-align:center}
#play-button,#restart-button{border:0;border-radius:99px;padding:13px 21px;background:var(--coral);font-weight:1000;cursor:pointer;box-shadow:0 8px 28px #0007}
.hint{color:var(--muted);font-size:10px;line-height:1.35}
.result{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0}
.result b,.result span{padding:8px;background:#07181e99}
.result b{color:var(--yellow);font-size:20px}
.result span{color:var(--muted);font-size:9px;letter-spacing:.12em}
#error-copy{color:#ffb3aa;white-space:pre-wrap}
@media(hover:none),(pointer:coarse){#stick,#action-button,#jump-button,#fire-button,#use-button{display:block}#controls{display:none}#prompt{bottom:212px}#hold{bottom:202px}#crosshair{top:45%}}
@media(max-width:780px){#minimap{display:none}#combat-card{right:9px;top:59px;width:102px}#heat-card{right:9px;top:127px;width:102px}#combat-card #targets{display:none}#route{right:9px}}
@media(max-width:560px){#mission{width:calc(100vw - 70px)}#mode-card{display:none}#route{top:82px}.beats{grid-template-columns:repeat(3,1fr)}#start-overlay{justify-content:center;background:linear-gradient(#06141bc9,#081820ed)}#start-overlay .card{margin-left:0}.card{padding:21px}#prompt{font-size:9px;max-width:68vw;overflow:hidden;text-overflow:ellipsis}h1{font-size:44px}.lede{font-size:13px}#combat-card #inventory,#combat-card #armor{display:block;font-size:7px}}