/*
  Shared Space Rage chrome: scene, HUD, phase readout, speed controls,
  weapon key, and the screen-reader-only time region. Loaded by every
  `space-rage-*` route alongside /clocks/shared/space-rage.js.

  Route-specific colour is set through the CONFIG `sky` pair on the canvas;
  the page background below is the neutral deep-space ground shared by all
  modes. A route may override --night / --hud after this file.
*/
:root { color-scheme:dark; --night:#03050d; --focus:rgba(214,241,255,.82); --hud:#9ef0ff; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  background:
    radial-gradient(circle at 50% 48%,rgba(16,39,61,.34),transparent 16%),
    radial-gradient(ellipse at 72% 16%,#111c3b 0%,#070b1b 32%,var(--night) 72%);
}
.scene { position:fixed; inset:0; outline:none; }
.scene:focus-visible { box-shadow:inset 0 0 0 2px var(--focus); }
canvas { display:block; width:100%; height:100%; }
.hud {
  position:fixed; left:max(12px,env(safe-area-inset-left));
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:2; font:600 13px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--hud); letter-spacing:.06em; text-shadow:0 0 12px rgba(80,200,255,.45);
  pointer-events:none; opacity:.92;
}
.phase {
  display:block; margin-top:4px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.65;
}
@media (max-width:540px) {
  .battle-controls { gap:4px; }
  .cease, .speed-control, .speed-readout { padding:9px 10px; font-size:11px; }
  .cease { max-width:76px; }
  .battle-key { display:none; }
  .hud { bottom:max(68px,calc(env(safe-area-inset-bottom) + 60px)); font-size:11px; max-width:calc(100vw - 24px); }
  .phase { font-size:8px; line-height:1.35; }
}