/* ── Space Shooter (docs/49_GAMES.md) ────────────────────────────────
   Loaded from src/pages/games/space-shooter.astro. The canvas reads the
   --sp-* colours and re-reads them when the theme changes. */
.gspace {
  --sp-bg: var(--ice-palette-night-950);
  --sp-star: var(--ice-palette-slate-300);
  --sp-ship: var(--ice-palette-navy-100);
  --sp-trim: var(--ice-palette-terracotta-400);
  --sp-shot: var(--ice-palette-warm-100);
  --sp-foe1: var(--ice-palette-forest-300);
  --sp-foe2: var(--ice-palette-terracotta-300);
  --sp-foe3: var(--ice-palette-crimson-300);
  --sp-bomb: var(--ice-palette-crimson-200);
  --sp-text: var(--ice-palette-warm-50);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(8rem, 12rem);
  justify-content: center;
  gap: 1rem;
}
[data-theme='dark'] .gspace { --sp-bg: var(--ice-palette-graphite-950); }
.gspace__wrap { position: relative; width: 100%; max-width: min(100%, calc(72svh * 2 / 3)); margin-inline: auto; }
.gspace__field { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.gspace__field:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 2px; }
.gspace__side { display: grid; align-content: start; gap: .6rem; }
@media (max-width: 560px) {
  .gspace { grid-template-columns: minmax(0, 1fr); }
  .gspace__side { grid-template-columns: repeat(4, minmax(0, 1fr)); order: -1; gap: .4rem; }
  .gspace__side .game-stat { min-width: 0; padding: .3rem .45rem; }
  .gspace__side .game-btn { grid-column: span 2; }
}
.gspace__wrap .game-overlay { border-radius: 8px; }