/* Layout: full-bleed WebGL cockpit view; HUD hugs the frame edges; menus are left-anchored briefing panels over the live 3D scene */
:root{
  --void:#05070b; --ink:#e2f5ff; --dim:#86a0ae; --cyan:#5fe1ff; --amber:#ffb547; --hostile:#ff4d8d; --acid:#b6ff4a;
  --panel:rgba(6,11,18,.82); --line:rgba(95,225,255,.3);
  --display:'Saira Stencil One','Chakra Petch',Impact,sans-serif;
  --ui:'Chakra Petch',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html,body{touch-action:none;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{touch-action:manipulation}
html,body{height:100%;margin:0;background:var(--void);color:var(--ink);overflow:hidden;font-family:var(--ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.lbl{font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--dim);text-transform:uppercase}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
.hud-top{position:absolute;left:18px;right:18px;top:calc(env(safe-area-inset-top,0px) + 14px);display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
.readout{display:flex;flex-direction:column;gap:6px;min-width:0}
.readout.r{align-items:flex-end;text-align:right}
.readout b{font:600 clamp(16px,2.6vw,22px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
#bombs{color:var(--amber);letter-spacing:.2em}
.sector{font:600 12px/1.3 var(--ui);letter-spacing:.26em;color:var(--amber);text-align:center;text-transform:uppercase;padding-top:2px}
.hud-bottom{position:absolute;left:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;max-width:calc(100% - 36px)}
.gauge{display:flex;flex-direction:column;gap:7px}
.bar{width:min(230px,38vw);height:10px;background:rgba(95,225,255,.13);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);position:relative;overflow:hidden}
.bar.small{width:min(110px,22vw);height:6px}
.bar i{position:absolute;inset:0;background:var(--cyan);transform-origin:left center;transition:transform .12s linear,background-color .3s}
.gauge b{font:600 15px/1 var(--mono);color:var(--acid);letter-spacing:.08em}
#bossBar{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 62px);width:min(560px,calc(100% - 36px));display:flex;flex-direction:column;gap:6px;align-items:center}
#bossName{font:700 13px/1 var(--ui);letter-spacing:.32em;color:var(--hostile)}
#bossBar .bar{width:100%;height:8px;background:rgba(255,77,141,.15);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 100%,0 100%)}
#bossBar .bar i{background:var(--hostile)}
.ret{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--acid);opacity:.85;left:0;top:0;will-change:transform}
.ret.far{width:20px;height:20px;margin:-10px 0 0 -10px;border-width:1.5px;opacity:.6}
.ret::before,.ret::after{content:"";position:absolute;background:var(--acid)}
.ret::before{left:50%;top:-7px;width:2px;height:5px;margin-left:-1px}
.ret::after{top:50%;left:-7px;height:2px;width:5px;margin-top:-1px}
#radio{position:absolute;left:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);max-width:min(420px,calc(100% - 36px));background:var(--panel);border-left:3px solid var(--cyan);padding:10px 14px;display:flex;flex-direction:column;gap:5px;animation:slidein .25s ease-out}
#radio .who{font:600 10px/1 var(--mono);letter-spacing:.2em;color:var(--cyan)}
#radio .line{font:500 14px/1.4 var(--ui);color:var(--ink)}
#radio.cmd{border-left-color:var(--amber)} #radio.cmd .who{color:var(--amber)}
@keyframes slidein{from{transform:translateX(-12px);opacity:0}to{transform:none;opacity:1}}
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;padding:0 16px}
#banner .k{font:600 12px/1 var(--mono);letter-spacing:.34em;color:var(--amber)}
#banner .big{font:400 clamp(34px,7vw,74px)/1 var(--display);letter-spacing:.04em;color:var(--ink);text-shadow:0 0 24px rgba(95,225,255,.35);text-wrap:balance}
#banner .sm{font:500 15px/1.4 var(--ui);color:var(--dim);max-width:46ch}
#banner.warn .big{color:var(--hostile);text-shadow:0 0 28px rgba(255,77,141,.55);animation:blink .5s steps(2) infinite}
#banner.warn .k{color:var(--hostile)}
@keyframes blink{50%{opacity:.35}}
#hurt{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(255,40,80,.55));opacity:0;transition:opacity .35s}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;touch-action:pan-y;overscroll-behavior:contain;display:flex;align-items:center;padding-block:28px;padding-inline:clamp(16px,6vw,84px);background:linear-gradient(90deg,rgba(5,7,11,.94) 0%,rgba(5,7,11,.72) 42%,rgba(5,7,11,0) 78%);overflow-y:auto}
.panel{width:100%;max-width:580px;display:flex;flex-direction:column;gap:20px;margin-block:auto}
.eyebrow{font:600 11px/1.4 var(--mono);letter-spacing:.24em;color:var(--amber);text-transform:uppercase}
h1{font:400 clamp(52px,11vw,118px)/.9 var(--display);margin:0;letter-spacing:.01em;color:var(--ink);text-shadow:0 0 40px rgba(95,225,255,.25)}
h2{font:400 clamp(38px,7vw,68px)/.95 var(--display);margin:0;letter-spacing:.02em;text-wrap:balance}
.lede{font:400 17px/1.5 var(--ui);color:#b9cdd8;max-width:48ch;margin:0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{font:600 14px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;padding:14px 24px;background:transparent;color:var(--cyan);border:1.5px solid var(--cyan);cursor:pointer;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.btn:hover{background:var(--cyan);color:var(--void)}
.btn.primary{background:var(--cyan);color:var(--void)}
.btn.primary:hover{background:var(--ink)}
.btn.ghost{border-color:var(--line);color:var(--dim)}
.btn:focus-visible,.sec:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sectors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sec{display:flex;flex-direction:column;gap:6px;padding:10px 10px 12px;background:rgba(95,225,255,.06);border:1px solid var(--line);color:var(--ink);cursor:pointer;text-align:left;font-family:var(--ui);min-width:0}
.sec .n{font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--amber)}
.sec .t{font:600 12px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.sec:hover:not(:disabled){border-color:var(--cyan);background:rgba(95,225,255,.14)}
.sec:disabled{opacity:.38;cursor:not-allowed}
.sec:disabled .n::after{content:" · locked"}
.controls{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:400 13px/1.35 var(--ui);color:#b9cdd8;margin:0}
.controls dt{font:600 11px/1.6 var(--mono);color:var(--ink);letter-spacing:.06em}
.controls dd{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats div{background:rgba(6,11,18,.9);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.stats b{font:600 20px/1 var(--mono);font-variant-numeric:tabular-nums}
.note{font:400 12px/1.5 var(--mono);color:var(--dim);margin:0}
@media (max-width:640px){
  .sectors{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen{background:rgba(5,7,11,.86)}
  .hud-top{grid-template-columns:1fr 1fr}.sector{display:none}
}

/* ---------- Touch ---------- */
#touch{position:fixed;inset:0;pointer-events:none}
#stickZone{position:absolute;left:0;top:0;bottom:0;width:55%;pointer-events:auto;touch-action:none}
#stick{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border:1.5px solid var(--line);border-radius:50%;pointer-events:none}
#stick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(95,225,255,.35)}
.tb{position:absolute;pointer-events:auto;touch-action:none;font:700 12px/1 var(--ui);letter-spacing:.14em;color:var(--ink);background:rgba(6,11,18,.55);border:1.5px solid var(--line);width:76px;height:76px;border-radius:50%}
.tb.on{background:rgba(95,225,255,.35)}
#tFire{right:22px;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);width:92px;height:92px;border-color:var(--cyan)}
#tRoll{right:128px;bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
#tBomb{right:40px;bottom:calc(env(safe-area-inset-bottom,0px) + 140px);width:62px;height:62px;border-color:var(--amber)}
#tPause{right:18px;top:calc(env(safe-area-inset-top,0px) + 58px);width:44px;height:44px}
@media (prefers-reduced-motion:reduce){#banner.warn .big{animation:none}#radio{animation:none}}