/* ── Checkers (docs/49_GAMES.md) ────────────────────────────────────
 * Linked from src/pages/games/checkers.astro. Board and pieces are CSS;
 * a king carries a four-point star drawn with clip-path.
 */
.gchk {
  --k-light: var(--ice-palette-warm-100);
  --k-dark: var(--ice-palette-navy-700);
  --k-p1: var(--ice-palette-crimson-700);
  --k-p1-ring: var(--ice-palette-crimson-400);
  --k-p2: var(--ice-palette-warm-50);
  --k-p2-ring: var(--ice-palette-ink-900);
  --k-mark: var(--ice-palette-terracotta-400);
  --k-last: var(--ice-palette-navy-800);
  max-width: 560px;
  margin-inline: auto;
}
[data-theme='dark'] .gchk {
  --k-light: var(--ice-palette-graphite-300);
  --k-dark: var(--ice-palette-graphite-750);
  --k-p1: var(--ice-palette-crimson-600);
  --k-p1-ring: var(--ice-palette-crimson-300);
  --k-p2: var(--ice-palette-graphite-100);
  --k-p2-ring: var(--ice-palette-graphite-900);
  --k-last: var(--ice-palette-graphite-850);
}
.gchk .game-bar { justify-content: center; }

.gchk__board {
  display: grid;
  margin-top: .75rem;
  border: 6px solid var(--k-dark);
  border-radius: 8px;
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
}
.gchk.is-flipped .gchk__board { transform: rotate(180deg); }
.gchk__row { display: grid; grid-template-columns: repeat(8, 1fr); }
.gchk__sq { position: relative; display: block; aspect-ratio: 1; }
.gchk__sq.is-light { background: var(--k-light); }
.gchk__sq.is-dark {
  padding: 0;
  border: 0;
  background: var(--k-dark);
  cursor: pointer;
  touch-action: manipulation;
}
.gchk__sq.is-dark:hover,
.gchk__sq.is-dark:focus,
.gchk__sq.is-dark:active { background: var(--k-dark); }
.gchk__sq.is-dark.is-last { background: var(--k-last); }
.gchk__sq:focus-visible { outline: 3px solid var(--ice-color-surface); outline-offset: -3px; z-index: 1; }

.gchk__pc { position: absolute; inset: 12%; border-radius: 50%; display: none; }
.gchk__sq.has-p1 .gchk__pc,
.gchk__sq.has-p2 .gchk__pc { display: block; }
.gchk__sq.has-p1 .gchk__pc { background: var(--k-p1); box-shadow: inset 0 0 0 3px var(--k-p1-ring), 0 2px 0 rgb(0 0 0 / .35); }
.gchk__sq.has-p2 .gchk__pc { background: var(--k-p2); box-shadow: inset 0 0 0 3px var(--k-p2-ring), 0 2px 0 rgb(0 0 0 / .35); }
.gchk__sq.is-king .gchk__pc::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--k-mark);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.gchk__sq.is-selected .gchk__pc { outline: 3px solid var(--k-mark); outline-offset: 2px; }
.gchk__sq.is-movable:hover .gchk__pc { outline: 2px solid var(--k-mark); outline-offset: 2px; }
.gchk__sq.is-target::before {
  content: '';
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: var(--k-mark);
}
.gchk__record { font-size: .9rem; color: var(--ice-color-text-muted, currentColor); }