/* ── Projectile (docs/49_GAMES.md) ───────────────────────────────────
   Loaded from src/pages/games/projectile.astro. The canvas reads the
   --pj-* colours through KaamkoGames.cssVar and re-reads them when the
   theme changes. */
.gproj {
  --pj-sky: var(--ice-palette-warm-50);
  --pj-ground: var(--ice-palette-forest-700);
  --pj-grid: var(--ice-palette-line-200);
  --pj-ink: var(--ice-palette-ink-900);
  --pj-wall: var(--ice-palette-terracotta-600);
  --pj-target: var(--ice-palette-crimson-600);
  --pj-shot: var(--ice-palette-navy-700);
  --pj-old: var(--ice-palette-slate-300);
}
[data-theme='dark'] .gproj {
  --pj-sky: var(--ice-palette-graphite-950);
  --pj-ground: var(--ice-palette-graphite-700);
  --pj-grid: var(--ice-palette-graphite-800);
  --pj-ink: var(--ice-palette-graphite-100);
  --pj-wall: var(--ice-palette-terracotta-400);
  --pj-target: var(--ice-palette-crimson-300);
  --pj-shot: var(--ice-palette-navy-100);
  --pj-old: var(--ice-palette-graphite-300);
}
.gproj__field { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border: 1px solid var(--ice-color-border); border-radius: 8px; touch-action: manipulation; }
.gproj__field:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 2px; }
.gproj__aim { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; margin: .9rem 0 .25rem; }
.gproj__slider { display: grid; gap: .3rem; font-weight: 600; }
.gproj__slider span { display: flex; justify-content: space-between; }
.gproj__slider output { font-variant-numeric: tabular-nums; }
.gproj__slider input { width: 100%; min-height: 44px; accent-color: var(--ice-color-action); }
.gproj__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.gproj__next[hidden] { display: none; }
.gproj__math { margin-top: .75rem; padding: .75rem 1rem; border: 1px solid var(--ice-color-border); border-radius: 8px; background: var(--ice-color-surface-muted); font-size: .92rem; }
.gproj__math p { margin: 0; }
.gproj__eq { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.gproj__eq dt { font-weight: 700; }
.gproj__eq dd { margin: 0; font-variant-numeric: tabular-nums; }
.gproj__hint { margin-top: .6rem !important; }
@media (max-width: 560px) { .gproj__eq { grid-template-columns: 1fr; } .gproj__eq dd { margin-bottom: .3rem; } }