/*
 * mind.css — the "For your mind" board figure for aiCheckers.
 *
 * The figure is a REAL chequered board carrying the game's REAL piece art
 * (data-piece), the same kit the how-to-play guide uses, so the mind page and
 * the guide show the player the same objects. The only literal colours are the
 * board's own two square colours, mirroring `CheckersRules.geometry`.
 */

:root {
  --ck-light: #E8D5B0;
  --ck-dark: #9C6B3F;
  --ck-ink: #3A2410;
}

/* ---- The board --------------------------------------------------------- */

.ck-board {
  display: grid;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--gc-radius-sm);
  overflow: hidden;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gc-bg) 65%, transparent);
}
.ck-board.n8 { grid-template-columns: repeat(8, 1fr); max-width: 336px; }
.ck-board.n10 { grid-template-columns: repeat(10, 1fr); max-width: 360px; }

.ck-sq {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.ck-sq.lt { background: var(--ck-light); }
.ck-sq.dk { background: var(--ck-dark); }

/* Real piece art sits on the playable (dark) square, sized like the app. */
.ck-sq .gc-pieceimg {
  width: 86%;
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ck-ink) 60%, transparent));
}

/* Board coordinates, as the play view shows them (files a…, ranks 1…). */
.ck-co {
  position: absolute;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  color: var(--ck-ink);
  opacity: 0.68;
}
.ck-co.r { left: 2px; top: 2px; }
.ck-co.f { right: 2px; bottom: 2px; }

/* ---- Play-view marker language (the same one the real board uses) ------- */

/* Yellow ring = the piece you tapped. */
.ck-sel::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 5px;
  border: 3px solid var(--gc-warning);
}
/* Blue ring + fill = the move the coach suggests after you press Hint. */
.ck-hint::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 5px;
  border: 3px solid var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 34%, transparent);
}
/* Green dot = a legal landing square (numbered along a chain). */
.ck-dot {
  position: relative;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gc-success);
  color: var(--gc-bg);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ck-ink) 45%, transparent);
}
/* Red cross ON a piece = this one is jumped and leaves the board. */
.ck-cap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(15px, 4.6vw, 24px);
  font-weight: 900;
  color: var(--gc-error);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ck-ink) 80%, transparent);
}
/* Dashed red square = a move you may not play. */
.ck-no::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 5px;
  border: 3px dashed var(--gc-error);
}
.ck-x {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(14px, 4.2vw, 21px);
  font-weight: 900;
  color: var(--gc-error);
}

/* Calm, looping emphasis. Every rest frame is already the teaching picture,
   so reduced motion loses nothing. */
.gc-chapter.is-active .ck-dot { animation: ckDot 2.6s var(--gc-ease) infinite; }
.gc-chapter.is-active .ck-cap { animation: ckCap 2.8s var(--gc-ease) infinite; }
.gc-chapter.is-active .ck-sel::after { animation: ckSel 2.6s var(--gc-ease) infinite; }

@keyframes ckDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
@keyframes ckCap {
  0%, 100% { opacity: 1; }
  55% { opacity: 0.3; }
}
@keyframes ckSel {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}