/* ── Pong (docs/49_GAMES.md) ────────────────────────────────────────
 * Linked from src/pages/games/pong.astro. pong.js reads the --p-* colours
 * and re-reads them when data-theme or the html class changes.
 */
.gpong {
  --p-bg: var(--ice-palette-navy-900);
  --p-fg: var(--ice-palette-warm-50);
  --p-net: var(--ice-palette-slate-300);
  --p-ball: var(--ice-palette-terracotta-300);
  max-width: 760px;
  margin-inline: auto;
}
[data-theme='dark'] .gpong {
  --p-bg: var(--ice-palette-graphite-950);
  --p-fg: var(--ice-palette-graphite-100);
  --p-net: var(--ice-palette-graphite-700);
}
.gpong .game-bar { justify-content: center; }
.gpong__court { position: relative; margin-top: .75rem; }
.gpong__court canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.gpong__court canvas:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 3px; }
.gpong__overlay { border-radius: 6px; }
.gpong__overlay p { margin: 0; }