/* Checkers. Functional layout before the design pass; existing tokens only (spec D7). Original board in
   the rose swatch: light squares --light, dark squares --field; Dark's pieces --deep, Light's white, each
   with an inner ring; kings carry a crown. Every state has a shape as well as a color: a ring for the
   chosen piece, a dot on each legal landing, a dashed frame on the last move's squares, a faded piece for
   one jumped mid-move. All of it is listed for design review (docs/follow-ups.md). */

.g-checkers { padding-block: var(--s3) var(--s7); }
.g-checkers__intro { margin-bottom: var(--s3); }
.g-checkers__intro h1 { font-size: 24px; }
.g-checkers__intro p { margin-top: var(--s1); max-width: 60ch; }
.g-checkers__note { margin-bottom: var(--s3); }

/* ---------- game card ---------- */
.g-checkers__game { max-width: 560px; display: grid; gap: var(--s2); padding: var(--s3); }
@media (min-width: 400px) { .g-checkers__game { padding: var(--s4); } }
.g-checkers__game:focus { outline: none; }
.g-checkers__bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2) var(--s4); }
.g-checkers__bar .stat { min-width: 48px; }
.g-checkers__bar-actions { margin-left: auto; display: flex; gap: var(--s2); }
.g-checkers__bar-actions .btn { touch-action: manipulation; }
.g-checkers__turn { display: flex; align-items: center; gap: var(--s2); min-height: 28px; font-weight: 600; }
.g-checkers__disc { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.g-checkers__disc.is-dark { background: var(--deep); }
.g-checkers__disc.is-light { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--deep); }
.g-checkers__hint { min-height: 2.8em; font-size: 15px; color: var(--ink-2); visibility: hidden; } /* keeps its space */
.g-checkers__hint.is-shown { visibility: visible; }
.g-checkers__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.g-checkers__foot p { font-size: 15px; }
.g-checkers__check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 15px; cursor: pointer; }
.g-checkers__check input { flex: none; width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }

/* the move list (Phase 3): two columns, Dark then Light, numbered by turn */
.g-checkers__moves summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; width: fit-content; }
.g-checkers__move-list {
  max-height: 12em; overflow-y: auto; margin: 0; padding: 0; list-style: none; counter-reset: turn;
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.g-checkers__move-list li { display: grid; grid-template-columns: 2.5em repeat(2, minmax(7em, max-content)); gap: var(--s4); padding-block: 2px; counter-increment: turn; }
.g-checkers__move-list li::before { content: counter(turn) "."; color: var(--ink-2); text-align: right; }
.g-checkers__moves[data-empty] .g-checkers__move-list, .g-checkers__moves:not([data-empty]) .g-checkers__moves-none { display: none; }
.g-checkers__moves-none { font-size: 15px; }

/* ---------- board ---------- */
.g-checkers__stage { position: relative; }
.g-checkers__board {
  display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; aspect-ratio: 1;
  border-radius: 12px; overflow: hidden; user-select: none; -webkit-user-select: none;
}
.g-checkers__row { display: contents; }
.g-checkers__sq { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.g-checkers__sq.is-light { background: var(--light); }
.g-checkers__sq.is-dark { background: var(--field); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.g-checkers__sq:focus { outline: none; }
.g-checkers__sq:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; z-index: 2; }

.g-checkers__piece {
  position: relative; width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center;
  transition: transform 120ms var(--ease), opacity 120ms;
}
.g-checkers__piece::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 2px solid; opacity: .45; }
.g-checkers__piece.is-dark { background: var(--deep); color: var(--light); }
.g-checkers__piece.is-light { background: #FFFFFF; color: var(--deep); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--deep) 35%, transparent); }
.g-checkers__crown { position: relative; width: 52%; height: 52%; fill: currentColor; }

/* states: each with a shape, not color alone */
.g-checkers__sq.is-selected .g-checkers__piece { transform: scale(1.06); box-shadow: 0 0 0 3px var(--field), 0 0 0 6px var(--deep); }
.g-checkers__sq.is-target::after {
  content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: var(--deep); opacity: .6; pointer-events: none;
}
.g-checkers__sq.is-last::before {
  content: ''; position: absolute; inset: 4px; border: 2px dashed var(--deep); border-radius: 4px; opacity: .7; pointer-events: none;
}
.g-checkers__sq.is-taken .g-checkers__piece { opacity: .35; }
.g-checkers__piece.is-moving { z-index: 3; }

/* drag and drop (Phase 3): only the pieces of the side to move take over touch, so a drag never scrolls
   the page and a swipe or pinch starting anywhere else on the board still does */
.g-checkers__board[data-drag="dark"] .g-checkers__piece.is-dark,
.g-checkers__board[data-drag="light"] .g-checkers__piece.is-light { touch-action: none; cursor: grab; }
.g-checkers__piece.is-dragging { z-index: 4; pointer-events: none; transition: none; cursor: grabbing; scale: 1.08; }
.g-checkers__piece.is-returning { z-index: 3; transition: transform 160ms var(--ease); }
.g-checkers__sq.is-movable .g-checkers__piece { box-shadow: 0 0 0 3px var(--light), 0 0 0 5px var(--deep); }
@media (prefers-reduced-motion: reduce) { .g-checkers__piece, .g-checkers__piece.is-returning { transition: none; } }

/* ---------- end panel, over the board ---------- */
.g-checkers__panel { inset: 0; align-content: center; padding: var(--s5); }
.g-checkers__panel[hidden] { display: none; }
.g-checkers__over { justify-items: stretch; text-align: left; }
.g-checkers__over .fig dd { font-size: 24px; }
.g-checkers__over .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s3); }
.g-checkers__over h2:focus { outline: none; }
.g-checkers__over p { font-size: 15px; font-weight: 500; font-stretch: 100%; margin-top: var(--s3); }

/* ---------- dialogs: new game, statistics ---------- */
.g-checkers__setup { display: grid; gap: var(--s4); }
.g-checkers__field { display: grid; gap: var(--s2); justify-items: start; }
.g-checkers__field[hidden] { display: none; }
.g-checkers__setup .seg { flex-wrap: wrap; }
.g-checkers__dlg .fig dd { font-size: 22px; }
.g-checkers__stats-levels { margin-bottom: var(--s4); flex-wrap: wrap; }
.g-checkers__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s3); }
.g-checkers__reset { margin-top: var(--s4); }

/* ---------- play mode (docs/done-specs/20261011-game-play-mode.md): phones; /css/play-mode.css ---------- */
.g-checkers__stage .play-start { border-radius: 12px; }
@media (max-width: 719px), (max-height: 599px) {
  .g-checkers__game.is-play-mode { grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; }
  /* the board as large as the space allows, square */
  .is-play-mode .g-checkers__stage { container-type: size; min-height: 0; display: grid; place-items: center; }
  .is-play-mode .g-checkers__board { width: min(100cqw, 100cqh); }
}
/* a phone held sideways: the board on the left at full height, the bar, turn and hint beside it */
@media (orientation: landscape) and (max-height: 599px) {
  .g-checkers__game.is-play-mode { grid-template-columns: minmax(0, 1fr) minmax(200px, .7fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .is-play-mode .g-checkers__stage { grid-column: 1; grid-row: 1 / 4; }
  .is-play-mode .g-checkers__bar { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  .is-play-mode .g-checkers__turn { grid-column: 2; grid-row: 2; }
  .is-play-mode .g-checkers__hint { grid-column: 2; grid-row: 3; }
}

/* ---------- text below the game ---------- */
.g-checkers__about { max-width: 62ch; margin-top: var(--s6); }
.g-checkers__about h2 { margin: var(--s6) 0 var(--s3); }
.g-checkers__about h2:first-child { margin-top: 0; }
.g-checkers__about ol { padding-left: 1.25em; margin: var(--s3) 0; }
.g-checkers__about li + li { margin-top: 6px; }
.g-checkers__keys { border-collapse: collapse; font-size: 15px; margin-bottom: var(--s3); }
.g-checkers__keys th, .g-checkers__keys td { text-align: left; padding: 6px var(--s4) 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.g-checkers__keys th { font-weight: 600; white-space: nowrap; }