/* ── Chess (docs/49_GAMES.md) ───────────────────────────────────────
 * Linked from src/pages/games/chess.astro. The pieces are our own SVG
 * symbols (#cp-p … #cp-k in the page); fill and outline come from here.
 */
.gchess {
  --c-lt: var(--ice-palette-warm-100);
  --c-dk: var(--ice-palette-navy-700);
  --c-coord-lt: var(--ice-palette-navy-700);
  --c-coord-dk: var(--ice-palette-warm-100);
  --c-w-fill: #fff;
  --c-w-line: var(--ice-palette-ink-900);
  --c-b-fill: var(--ice-palette-ink-900);
  --c-b-line: var(--ice-palette-warm-100);
  --c-mark: var(--ice-palette-terracotta-400);
  --c-last: color-mix(in srgb, var(--ice-palette-terracotta-300) 55%, transparent);
  --c-check: color-mix(in srgb, var(--ice-palette-crimson-400) 75%, transparent);
}
[data-theme='dark'] .gchess {
  --c-lt: var(--ice-palette-graphite-300);
  --c-dk: var(--ice-palette-graphite-750);
  --c-coord-lt: var(--ice-palette-graphite-800);
  --c-coord-dk: var(--ice-palette-graphite-200);
  --c-w-fill: var(--ice-palette-graphite-100);
  --c-w-line: var(--ice-palette-graphite-950);
  --c-b-fill: var(--ice-palette-graphite-950);
  --c-b-line: var(--ice-palette-graphite-200);
}
.gchess__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.gchess__wrap {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(9rem, 13rem);
  gap: 1rem;
  justify-content: center;
  margin-top: .75rem;
}
.gchess__board {
  display: grid;
  border: 6px solid var(--c-dk);
  border-radius: 8px;
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
}
.gchess__row { display: grid; grid-template-columns: repeat(8, 1fr); }
.gchess__sq {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: var(--c-lt);
  cursor: pointer;
  touch-action: manipulation;
}
.gchess__sq.is-dk { background: var(--c-dk); }
.gchess__sq.is-last { box-shadow: inset 0 0 0 100vmax var(--c-last); }
.gchess__sq.is-check { box-shadow: inset 0 0 0 100vmax var(--c-check); }
.gchess__sq:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: -3px; z-index: 1; }
.gchess__sq svg { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.gchess__sq.is-w svg { fill: var(--c-w-fill); stroke: var(--c-w-line); }
.gchess__sq.is-b svg { fill: var(--c-b-fill); stroke: var(--c-b-line); }
.gchess__sq svg { stroke-width: 1.6; stroke-linejoin: round; }
.gchess__defs .cp-line { fill: none; }
.gchess__sq.is-selected { box-shadow: inset 0 0 0 4px var(--c-mark); }
.gchess__sq.is-target::after {
  content: '';
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: var(--c-mark);
  opacity: .85;
}
.gchess__sq.is-capture::after { inset: 4%; background: none; border: 4px solid var(--c-mark); }
.gchess__coord {
  position: absolute;
  font: 700 clamp(8px, 1.6vw, 11px)/1 var(--ice-font-primary, sans-serif);
  pointer-events: none;
}
.gchess__coord--rank { left: 3px; top: 2px; }
.gchess__coord--file { right: 3px; bottom: 2px; }
.gchess__sq.is-lt .gchess__coord { color: var(--c-coord-lt); }
.gchess__sq.is-dk .gchess__coord { color: var(--c-coord-dk); }

.gchess__h { font-size: 1rem; margin: 0 0 .4rem; }
.gchess__moves {
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding-left: 2rem;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
.gchess__moves li span { display: inline-block; min-width: 3.6em; }
.gchess__record { font-size: .9rem; color: var(--ice-color-text-muted, currentColor); }
.gchess.is-thinking .gchess__board { cursor: progress; }

@media (max-width: 760px) {
  .gchess__wrap { grid-template-columns: minmax(0, 1fr); }
  .gchess__moves { max-height: 8rem; columns: 2; }
}