/*
 * guide.css — aiCheckers guide geometry on top of _shared/base.css.
 *
 * The figures are REAL boards carrying the game's REAL piece art: every man and
 * king is an <img data-piece="pieces/checkers/checkers_<colour>_<man|king>.png">
 * that boot.js resolves from the app's asset catalog in-app and from
 * guide/assets on the site (GUIDE_REVIEW_STANDARD §10). No abstract tiles and
 * no chess glyphs stand in for a draughts piece.
 *
 * The only literal colours here are the board's own two square colours, which
 * mirror `CheckersRules.geometry` (lightCellHex / darkCellHex) — they are the
 * game object itself, exactly as the renderer paints it. Everything else comes
 * from the --gc-* theme.
 */

: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; }
}

/* ---- Notation chips ----------------------------------------------------- */

.ck-not {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.ck-not code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--gc-text);
  background: color-mix(in srgb, var(--gc-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-accent) 38%, transparent);
}

/* A tiny legend (dark pieces are yours, light ones the opponent's). */
.ck-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ck-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}
.ck-legend .gc-pieceimg { width: 30px; }

/* ---- The play-screen mock ---------------------------------------------- */

.ck-ui {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 344px;
  margin: 0 auto;
  padding: 10px;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.ck-ui .ck-board { max-width: 100%; }
.ck-ui-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.ck-ui-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--gc-accent) 26%, transparent);
}
.ck-ui-name { font-weight: 700; }
.ck-ui-meta {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.ck-ui-taken { display: flex; gap: 2px; margin-inline-start: auto; }
.ck-ui-taken .gc-pieceimg { width: 15px; filter: none; }
.ck-ui-pill {
  align-self: center;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-accent) 40%, transparent);
}
.ck-ui-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: color-mix(in srgb, var(--gc-text) 7%, transparent);
}
.ck-ui-btns { display: flex; gap: 6px; }
.ck-ui-btn {
  flex: 1 1 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 4px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--gc-text) 11%, transparent);
  border: 1px solid var(--gc-border);
}
.ck-ui-btn.is-primary {
  background: color-mix(in srgb, var(--gc-accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--gc-accent) 46%, transparent);
}

/* The control glossary under the mock. */
.ck-keys { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ck-key {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.ck-key dd { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--gc-text) 88%, transparent); }
.ck-key dt { align-self: start; }
.ck-swatch {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--ck-dark);
}
.ck-swatch.is-sel { border: 3px solid var(--gc-warning); }
.ck-swatch.is-hint {
  border: 3px solid var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 40%, var(--ck-dark));
}
.ck-swatch .ck-dot { width: 13px; font-size: 0; box-shadow: none; animation: none; }

html[dir="rtl"] .ck-key { grid-template-columns: 1fr auto; }
html[dir="rtl"] .ck-key dt { order: 2; }
html[dir="rtl"] .ck-key dd { order: 1; }