/* AXIOM VXR shell — instrument panel, not a marketing page.
   Self-hosted system monospace only: no CDN font (Tier-1 §2.2). */

:root{
  --bg:#04070c; --ink:#dfe9f5; --dim:#6f8398;
  --ok:#39f5b4; --warn:#e0c37a; --bad:#ff6b7a; --line:#16283c; --accent:#8ee7ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:13px/1.5 ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Menlo,monospace;overflow:hidden}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

#hud{
  position:fixed;top:14px;left:14px;z-index:10;min-width:340px;max-width:min(94vw,460px);
  background:linear-gradient(180deg,rgba(6,11,18,.94),rgba(6,11,18,.82));
  border:1px solid var(--line);border-radius:3px;padding:12px 14px 11px;
  backdrop-filter:blur(6px);box-shadow:0 18px 44px -22px #000;
}
.hud-head{display:flex;align-items:center;gap:8px;padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid var(--line)}
.mark{width:9px;height:9px;background:var(--accent);box-shadow:0 0 12px var(--accent);
  transform:rotate(45deg);flex:none}
.brand{font-weight:700;letter-spacing:.14em;font-size:13px}
.brand .thin{font-weight:400;color:var(--accent);margin-left:.35em}
.tag{margin-left:auto;font-size:9px;letter-spacing:.13em;color:var(--dim);text-align:right}

#hud dl{display:grid;grid-template-columns:64px 1fr;gap:3px 10px;margin:0}
#hud dt{color:var(--dim);text-transform:uppercase;font-size:10px;letter-spacing:.1em;padding-top:2px}
#hud dd{margin:0;overflow-wrap:anywhere;font-size:12px}

.status{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11px;color:var(--dim);line-height:1.45}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)} .dim{color:var(--dim)}

#legend{position:fixed;left:14px;bottom:12px;z-index:10;color:var(--dim);font-size:10.5px;
  letter-spacing:.03em;background:rgba(4,7,12,.6);padding:5px 9px;border:1px solid var(--line);border-radius:3px}
#legend b{color:var(--ink);font-weight:600}

/* three.js injects VRButton with inline styles; restyle without fighting it */
.vrbtn{position:fixed!important;right:14px!important;bottom:14px!important;left:auto!important;
  width:auto!important;padding:11px 20px!important;background:rgba(6,11,18,.92)!important;
  border:1px solid var(--accent)!important;border-radius:3px!important;color:var(--accent)!important;
  font:600 11px/1 ui-monospace,monospace!important;letter-spacing:.16em!important;opacity:1!important}

@media (max-width:640px){
  #hud{min-width:0;left:8px;right:8px;top:8px;max-width:none}
  .tag{display:none}
}

/* ── input surfaces ─────────────────────────────────────────────────────── */

#hud.hidden{display:none}
body.in-xr #hud,body.in-xr #legend,body.in-xr #stick,body.in-xr #help-open{display:none}

/* virtual thumbstick — coarse pointers only */
#stick{position:fixed;left:26px;bottom:26px;z-index:9;width:96px;height:96px;border-radius:50%;
  border:1px solid var(--line);background:rgba(6,11,18,.5);display:none;
  align-items:center;justify-content:center;touch-action:none}
#stick.show{display:flex}
#stick.on{border-color:var(--accent);background:rgba(6,11,18,.72)}
#stick-dot{width:34px;height:34px;border-radius:50%;background:rgba(142,231,255,.28);
  border:1px solid var(--accent);transition:transform 60ms linear}

/* help */
#help-open{position:fixed;right:14px;top:14px;z-index:11;width:32px;height:32px;
  border:1px solid var(--line);border-radius:3px;background:rgba(6,11,18,.9);color:var(--accent);
  font:600 14px ui-monospace,monospace;cursor:pointer}
#help-open:hover{border-color:var(--accent)}
#help{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(2,4,8,.62);backdrop-filter:blur(3px);padding:16px}
#help.on{display:flex}
.help-card{width:min(420px,94vw);background:rgba(6,11,18,.97);border:1px solid var(--line);
  border-radius:4px;padding:14px 16px 12px;box-shadow:0 30px 70px -30px #000}
.help-head{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px;
  font-size:10px;letter-spacing:.16em;color:var(--dim)}
.help-head button{background:none;border:0;color:var(--dim);font:400 20px/1 ui-monospace,monospace;cursor:pointer}
.help-head button:hover{color:var(--ink)}
#help-rows{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0;font-size:12px}
#help-rows dt{color:var(--accent);white-space:nowrap}
#help-rows dd{margin:0;color:var(--dim)}
.help-foot{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11px;color:var(--dim)}
.help-foot b{color:var(--ink);font-weight:600}

@media (max-width:640px){
  #stick{left:16px;bottom:18px;width:84px;height:84px}
  #help-open{top:auto;bottom:18px;right:14px}
}