:root{color-scheme:dark;--navy:#041426;--cyan:#04b8ff;--teal:#14d2ad;--gold:#ffc844;--muted:#a8bfd4}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--navy);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f6fbff}
body{overscroll-behavior:none}
button,select{font:inherit}
button{border:1px solid #5fa4b449;border-radius:9px;background:#092435e8;color:#dff6ff;font-size:12px;cursor:pointer;touch-action:none;min-height:42px;padding:10px 16px;font-weight:750}
button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button:active,button.active{background:#08778c;color:#fff}
canvas#game{touch-action:none;position:fixed;inset:0;width:100%;height:100%;outline:none}
.hidden{display:none!important}
.hud{touch-action:none;position:fixed;inset:0;pointer-events:none;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.hud button,.touch{pointer-events:auto}
.top{display:flex;align-items:flex-start;gap:18px}
.brand{width:176px;height:auto;filter:drop-shadow(0 2px 3px #000)}
.vitals{margin-left:auto;width:240px;padding:10px 12px;background:#041426cc;border:1px solid #5fa4b449;border-radius:8px}
.meter-label{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:.1em}
.meter{height:7px;background:#2a3b50;margin:7px 0;border-radius:2px;overflow:hidden}
.meter div{height:100%;width:72%;background:linear-gradient(90deg,#04b8ff,#14d2ad);transition:width .12s}
.full .meter div{background:#ffc844}
.full .meter-label{color:#ffc844}
.health-label{font-size:9px;display:flex;gap:8px}
.health-label span:last-child{margin-left:auto;color:#a8bfd4}
.small{padding:7px 10px;font-size:11px}
.mission{margin-top:16px;max-width:min(460px,58vw);text-shadow:0 2px 4px #000}
.mission span{font-size:10px;letter-spacing:.16em;color:#ffc844;font-weight:850}
.mission strong{display:block;font-size:18px;margin:5px 0;line-height:1.2}
.mission small{color:#bddeeb;font-size:12px}
#toast{position:absolute;top:24%;left:50%;transform:translateX(-50%);text-align:center;font-size:13px;color:#ffd675;letter-spacing:.13em;opacity:0;transition:opacity .3s;max-width:70%;padding:10px 16px;background:#041426cc;border-radius:6px}
#toast.visible{opacity:1}
.telemetry{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.08em;color:#b3d5e7;white-space:nowrap;background:#041426b8;padding:10px 14px;border-radius:6px}
.telemetry span{color:var(--teal);margin-right:10px}
.telemetry b{color:white}
.telemetry small{margin-left:12px;color:#748fa7}
.navigation{position:absolute;right:22px;bottom:24px;display:flex;align-items:center;flex-direction:column;gap:5px}
#radar{width:150px;height:150px;background:#041426b8;border:1px solid #41647d70;border-radius:50%}
#bearing{font-size:10px;text-shadow:0 1px 4px #000;color:var(--gold)}
.desktop-help{position:absolute;left:22px;bottom:28px;font-size:10px;line-height:1.8;color:#a8bfd4;text-shadow:0 2px 4px #000}
.touch{display:none;position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(32px,env(safe-area-inset-bottom));width:128px;height:128px;border:2px solid #9ed5e64d;border-radius:50%;background:#04142680;pointer-events:auto;touch-action:none}
#stickNub{position:absolute;left:40px;top:40px;width:44px;height:44px;border-radius:50%;background:#61c2d57a;border:1px solid #9eeeff}
#stick span{position:absolute;bottom:12px;width:100%;text-align:center;font-size:9px;letter-spacing:.08em;color:#b2e1ee}
.touch-actions{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,64px);gap:9px;pointer-events:auto}
.touch-actions button{height:54px;padding:2px;font-size:10px;border-radius:50%;background:#092435c9}
.touch-actions button[data-action=beam]{color:#ffc844}
.touch-mode .touch{display:block}
.touch-mode .desktop-help{display:none}
.touch-mode .navigation{bottom:155px;right:24px}
.touch-mode #radar{width:90px;height:90px}
.touch-mode .telemetry{bottom:20px;font-size:9px}
.overlay{touch-action:pan-y;overscroll-behavior:contain;position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 35%,#061b2d4d,#021020d9)}
.panel{max-height:95dvh;overflow:auto;width:min(760px,94vw);padding:30px 44px;border:1px solid #8ed3ee30;border-radius:18px;background:#041426e8;box-shadow:0 25px 90px #0008;text-align:center}
.menu-brand{width:186px;max-width:40vw;margin-bottom:18px}
.eyebrow{color:var(--teal);font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:800}
h1{font-size:clamp(36px,7vw,82px);font-weight:950;letter-spacing:-.06em;line-height:.95;margin:17px 0}
h1 span{display:block;font-size:clamp(12px,2.3vw,21px);letter-spacing:.12em;color:var(--gold);margin-top:14px}
h2{font-size:clamp(28px,6vw,48px);letter-spacing:-.03em;margin:12px 0}
.lede{font-size:18px;color:#e5f3fc;line-height:1.5;margin:16px 0}
.intro,.compact p{font-size:13px;line-height:1.7;color:#a8bfd4}
.menu-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:22px auto;text-align:left;max-width:470px;font-size:12px;color:#a8bfd4;line-height:1.7}
.menu-controls b{display:block;color:white;font-size:10px;letter-spacing:.12em}
.settings{display:flex;justify-content:center;gap:16px;align-items:center;flex-wrap:wrap;font-size:11px;color:#a8bfd4}
select{padding:7px 10px;border-radius:6px;background:#092435;color:#fff;border:1px solid #41647d;margin-left:4px}
.settings label{display:flex;align-items:center;gap:4px}
.primary{background:#14d2ad;color:#031426;border:0;padding:15px 26px;margin:24px auto 14px;display:block;font-size:13px;letter-spacing:.08em;min-width:230px}
.primary span{margin-left:28px}
.secondary{margin:4px 6px 14px;font-size:11px}
.panel small{display:block;color:#7899b0;font-size:10px;line-height:1.5}
#rotate{display:none;position:fixed;left:15%;right:15%;bottom:200px;text-align:center;pointer-events:none;background:#041426ca;padding:8px;border-radius:8px;font-size:10px;color:#b2e1ee}
#rotate small{font-size:9px}
@media(pointer:coarse){.touch{display:block}
.desktop-help{display:none}
.navigation{bottom:155px;right:24px}
#radar{width:90px;height:90px}
.telemetry{bottom:20px;font-size:9px}
}
@media(max-height:550px){.hud{padding:10px 16px}
.brand{width:128px}
.vitals{width:210px;padding:6px 9px}
.mission{margin-top:6px;max-width:65vw}
.mission strong{font-size:14px}
.mission small{font-size:10px}
.navigation{bottom:150px!important;right:16px}
#radar{width:72px!important;height:72px!important}
#bearing{font-size:9px}
.panel{padding:16px 26px}
.menu-brand{width:120px;margin-bottom:8px}
h1{font-size:42px;margin:10px 0}
.lede{font-size:14px;margin:9px 0}
.intro{margin:6px}
.menu-controls{margin:10px auto}
.primary{margin:12px auto 8px;padding:12px 20px}
.eyebrow{font-size:9px}
.touch-actions{bottom:20px;gap:7px;grid-template-columns:repeat(3,58px)}
.touch-actions button{height:50px}
#stick{width:112px;height:112px;bottom:24px}
#stickNub{left:32px;top:32px}
.telemetry{bottom:12px}
.desktop-help{bottom:12px;max-width:35%}
}
@media(max-width:600px) and (orientation:portrait){.brand{width:100px}
.vitals{width:185px}
.top{gap:7px}
.mission{max-width:90vw}
.mission strong{font-size:16px}
.menu-controls{font-size:11px}
.panel{padding:22px 18px}
.navigation{bottom:190px!important}
#radar{width:72px!important;height:72px!important}
#rotate{display:block;top:215px;bottom:auto}
.touch-actions{right:15px;grid-template-columns:repeat(3,54px);gap:5px}
.touch-actions button{height:52px}
#stick{left:15px;width:106px;height:106px}
#stickNub{left:29px;top:29px}
.telemetry{bottom:8px;padding:6px;font-size:8px}
.telemetry small{display:none}
}




/* v4 polish: retain the existing HUD and spend screen space on the coast. */
.top .small{min-width:44px;min-height:44px}
.mission{position:relative;padding-right:38px;transition:opacity .35s}
#hintBtn{position:absolute;right:0;top:0;border:0;background:#04142644;min-width:44px;min-height:44px;font-size:15px;pointer-events:auto}
.mission small{transition:opacity .35s,max-height .35s;display:block;max-height:80px}
.mission.hints-closed small{opacity:0;max-height:0;overflow:hidden}
.hud.quiet .mission,.hud.quiet .navigation,.hud.quiet .telemetry,.hud.quiet .shard-counter{opacity:.72}
.hud.quiet .navigation:hover,.hud.quiet .navigation:focus-within{opacity:1}
.navigation,.telemetry,.shard-counter{transition:opacity .3s}
.nav-actions{display:flex;gap:5px}.nav-actions button{min-height:44px;padding:6px 9px;font-size:9px}
.shard-counter{position:absolute;left:22px;top:215px;font-size:14px;color:#ffd675;text-shadow:0 2px 4px #000}
.shard-counter small{font-size:8px;letter-spacing:.1em;color:#a8bfd4;margin-left:7px}
.mission-card{position:absolute;left:50%;top:21%;transform:translate(-50%,-8px);width:min(450px,68vw);padding:14px 20px;background:#041426e3;border-left:3px solid #14d2ad;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.mission-card.visible{opacity:1;transform:translate(-50%,0)}
.mission-card span{font-size:10px;color:#ffc844;letter-spacing:.13em;display:block}.mission-card strong{display:block;font-size:22px;margin:4px 0;line-height:1.1}.mission-card small{font-size:11px;color:#a8bfd4;display:block;white-space:pre-line}
.full-banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-size:30px;letter-spacing:.15em;color:#ffe198;opacity:0;text-align:center;text-shadow:0 2px 8px #000;transition:opacity .2s;pointer-events:none;white-space:nowrap}.full-banner small{font-size:10px;display:block;letter-spacing:.2em;margin-top:5px}.full-banner.visible{opacity:1}
.vitals.recharging .meter{animation:signal-pulse 1.6s ease-in-out infinite}@keyframes signal-pulse{50%{opacity:.65}}
.boss-hud{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:min(330px,32vw);background:#041426b8;padding:7px 10px;border-radius:5px;font-size:9px}.boss-hud span{display:flex;justify-content:space-between;gap:8px}.boss-hud b{font-size:8px;color:#ffc844}.boss-hud .meter{margin:5px 0 0;height:5px}.boss-hud .meter div{background:#dc8edf}
#debugHud{position:fixed;left:12px;bottom:92px;z-index:4;pointer-events:none;white-space:pre;background:#031426e6;color:#a6f6dd;border:1px solid #4f988b55;padding:9px;font:10px/1.45 ui-monospace,monospace;max-width:85vw}
.touch-actions button{background:#09243588;min-width:52px;min-height:52px}
.touch-actions button.active{background:#08778ce6;box-shadow:0 0 0 2px #8ae9ed66}
.touch-mode .navigation{bottom:145px;right:20px}.touch-mode #radar{width:68px;height:68px}
.touch-mode .shard-counter{top:185px;font-size:12px}.touch-mode .shard-counter small{display:none}
@media(pointer:coarse){.navigation{bottom:145px;right:20px}#radar{width:68px;height:68px}.shard-counter small{display:none}.shard-counter{top:185px}.top{gap:8px}.brand{width:100px}}
@media(max-height:550px){.top{gap:8px}.brand{width:100px}.vitals{width:196px}.mission{max-width:52vw}.mission strong{font-size:13px}.mission small{font-size:9px}.navigation{bottom:136px!important;right:16px}#radar{width:54px!important;height:54px!important}.touch-actions{grid-template-columns:repeat(3,58px);gap:7px;bottom:18px}.touch-actions button{height:52px}.shard-counter,.touch-mode .shard-counter{top:165px;left:16px;font-size:11px}.shard-counter small{display:none}.mission-card{top:21%;width:min(370px,52vw);padding:10px 14px}.mission-card strong{font-size:17px}.mission-card small{font-size:9px}.full-banner{font-size:23px;top:24%}.boss-hud{top:auto;bottom:45px;width:min(230px,30vw)}#toast{font-size:10px;top:27%;max-width:54%;padding:6px 12px}.telemetry{font-size:9px}}
@media(max-width:600px) and (orientation:portrait){.hud{padding:14px 12px}.brand{width:70px}.vitals{width:156px;min-width:135px;padding:7px}.top{gap:5px}.meter-label{font-size:8px}.health-label{font-size:8px}.top .small{padding:6px;min-width:44px}.mission{max-width:95vw}.navigation{bottom:162px!important;right:14px}#radar{width:58px!important;height:58px!important}.shard-counter,.touch-mode .shard-counter{top:183px;left:15px}.shard-counter small{display:none}.mission-card{top:28%;width:85vw}.mission-card strong{font-size:19px}.full-banner{font-size:23px;top:27%}.boss-hud{top:auto;bottom:138px;width:62vw}#rotate{top:217px;font-size:9px}#toast{top:33%;font-size:10px}}
@media(prefers-reduced-motion:reduce){.vitals.recharging .meter{animation:none}.mission-card,.full-banner,.mission,.navigation,.telemetry{transition:none}}