/* ── Breakout (docs/49_GAMES.md) ────────────────────────────────────
 * Linked from src/pages/games/breakout.astro. breakout.js reads the --bo-*
 * colours and re-reads them when data-theme or the html class changes.
 */
.gbreak {
  --bo-bg: var(--ice-palette-warm-50);
  --bo-wall: var(--ice-palette-navy-800);
  --bo-ball: var(--ice-palette-ink-900);
  --bo-paddle: var(--ice-palette-terracotta-600);
  --bo-line: var(--ice-palette-warm-50);
  --bo-label: var(--ice-palette-crimson-600);
  --bo-a: var(--ice-palette-crimson-400);
  --bo-b: var(--ice-palette-terracotta-400);
  --bo-c: var(--ice-palette-terracotta-300);
  --bo-d: var(--ice-palette-forest-300);
  --bo-e: var(--ice-palette-navy-100);
  max-width: 640px;
  margin-inline: auto;
}
[data-theme='dark'] .gbreak {
  --bo-bg: var(--ice-palette-graphite-950);
  --bo-wall: var(--ice-palette-graphite-700);
  --bo-ball: var(--ice-palette-graphite-100);
  --bo-paddle: var(--ice-palette-terracotta-400);
  --bo-line: var(--ice-palette-graphite-950);
  --bo-label: var(--ice-palette-crimson-300);
}
.gbreak .game-bar { justify-content: center; }
.gbreak__court { position: relative; margin-top: .75rem; }
.gbreak__court canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 540;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.gbreak__court canvas:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 3px; }
.gbreak__overlay { border-radius: 6px; }
.gbreak__overlay p { margin: 0; }