:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0b0e13;
  color: #d5dde8;
}
.shell { max-width: 1080px; margin: 0 auto; padding: 20px 16px 32px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.hud {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  margin: 0 0 12px; font-size: 14px; color: #9fb0c3;
}
.hud-item { margin: 0; }
.hud-item strong { color: #eef3f9; font-variant-numeric: tabular-nums; }
.hud-spawn { display: inline-flex; gap: 8px; align-items: center; }
.hud-spawn input { accent-color: #f2c078; }
.stage { position: relative; }
#game {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #0b0e13; border: 1px solid #1c2531; border-radius: 10px;
  touch-action: manipulation; cursor: pointer;
}
#game:focus-visible { outline: 2px solid #5ce1c6; outline-offset: 3px; }
.fallback { padding: 32px 12px; text-align: center; }
.fallback h2 { margin: 0 0 8px; }
.fallback p { margin: 0; color: #9fb0c3; }
.hint { margin: 12px 0 0; font-size: 13px; color: #7d8fa3; }
.status { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: #9fb0c3; }

/* Shot mode: the harness pins the canvas to the window, so the page chrome
   steps aside and the capture is exactly the frame that was rendered. */
body.shot .shell { padding: 0; max-width: none; }
body.shot .hud, body.shot .hint, body.shot .status, body.shot .sr-only { display: none; }
body.shot #game { border: none; border-radius: 0; }