/* ===========================================================
   Checkers — game-specific styles only.
   Chrome, body, buttons, #status, .score-box come from shared.css.
   =========================================================== */

body { gap: 16px; }

/* pieces-remaining + wins indicators */
#stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- the 8x8 board ----------
   Sized with a clamp so it shrinks gracefully down to ~360px. */
#board {
  --board-size: clamp(280px, 92vw, 480px);
  width: var(--board-size);
  height: var(--board-size);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 40px var(--shadow);
  border: 4px solid var(--blue-board-dark);
  background: var(--blue-board-dark);
  touch-action: manipulation;
}

/* light + dark squares; only dark squares are playable */
.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square.light { background: var(--surface-2); }
.square.dark  { background: var(--blue-board-dark); }

/* lock pointer events while the CPU is thinking */
#board.locked .square { cursor: default; }

/* ---------- pieces ----------
   A piece is a round token sized relative to its square. */
.piece {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.35), 0 2px 5px rgba(0,0,0,0.4);
  transition: transform 0.12s ease;
  animation: pop 0.18s ease-out;
}
@keyframes pop { from { transform: scale(0.5); } to { transform: scale(1); } }

/* player = red, cpu = dark token drawn with --text/--accent for contrast */
.piece.you { background: var(--red); }
.piece.cpu { background: var(--text); }

/* king marker — a clear crown that reads on both colours */
.piece.king::after {
  content: "\2654"; /* ♔ white chess king glyph, recoloured below */
  color: gold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* the currently selected piece */
.square.selected .piece {
  transform: scale(1.08);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.35), 0 0 0 3px var(--accent);
}

/* ---------- move targets ----------
   A dot marks a legal destination; bigger ring marks a capture. */
.square.target { cursor: pointer; }
.square.target::after {
  content: "";
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
  pointer-events: none;
  animation: pop 0.18s ease-out;
}
.square.capture::after {
  width: 88%;
  height: 88%;
  background: transparent;
  border: 4px solid var(--accent);
  box-sizing: border-box;
}

/* small screens: shrink the king glyph so it never overflows */
@media (max-width: 400px) {
  .piece { font-size: 1.05rem; }
}