/*
  Shared Space Rage controls: the pause/speed button row, the weapon key,
  and the screen-reader-only region. Used both by the shared engine routes
  (/clocks/shared/space-rage.js) and by the After Dark-style routes that
  own their render loop and mount this chrome through
  /clocks/shared/space-rage-chrome.js.
*/
:root { --focus:rgba(214,241,255,.82); }

.battle-controls {
  position:fixed; right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom)); z-index:4;
  display:flex; align-items:center; gap:6px;
}

.cease, .speed-control, .speed-readout {
  border:1px solid rgba(160,225,255,.35); border-radius:999px;
  background:rgba(3,8,18,.72); color:#c8f3ff; font:600 12px/1 system-ui,sans-serif;
  padding:10px 12px; cursor:pointer; letter-spacing:.04em;
}

.speed-control { min-width:42px; }

.speed-readout { min-width:48px; padding-inline:8px; text-align:center; }

.battle-key {
  position:fixed; left:max(12px,env(safe-area-inset-left)); top:max(14px,env(safe-area-inset-top));
  z-index:3; display:flex; gap:10px; color:rgba(205,236,246,.62);
  font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em; text-transform:uppercase; pointer-events:none;
}

.battle-key span::before { content:''; display:inline-block; width:12px; height:2px; margin:0 5px 2px 0; background:currentColor; box-shadow:0 0 5px currentColor; }

.battle-key .kinetic { color:#52d2ff; }

.battle-key .proton { color:#bef0ff; }

.battle-key .plasma { color:#ff713e; }

.battle-key .cannon { color:#ffe8a4; }

.cease:focus-visible, .speed-control:focus-visible, .speed-readout:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

.cease[aria-pressed="true"] { background:rgba(255,120,90,.9); color:#1a0500; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Gallery embeds and dashboard backgrounds keep the clock and HUD, while
   suppressing controls that cannot be used through a pointer-inert frame. */
body.embed .about-help-auto,
body.dashboard-bg .about-help-auto,
body.embed .battle-controls,
body.dashboard-bg .battle-controls,
body.embed .battle-key,
body.dashboard-bg .battle-key { display:none; }