/* Neon Arena — checkers view: one 8×8 CSS-grid board with coordinates, glossy
   round pieces (kings wear a gold-rimmed ♛), picker highlights (movable men,
   next-step dots, capture rings, walked path), last-move tint, ghost overlay
   for path animation, forced-capture pill, «finish move» row. Loaded after
   game.css/battleship.css; reuses .fighter/.board-frame/.board-countdown/
   .rematch-splash primitives from the chess game view. */

/* The match is one screenful. `.view-game` (game.css) is the frame — a
   `minmax(0,1fr) 340px` grid whose height is the SCENE's, written by
   `fitMatchColumn()` into `--match-h`. This file used to override it with
   `display:flex` and an inner `.ck-main` at `align-items:start`, which is how
   the column came out 743px tall inside a 660px scene at 1280×800: the
   player's own clock was clipped by the fold and the resign row was gone.
   Nothing here re-declares the frame any more. */
.view-ck { overflow: visible; }

/* === stage ===
   The mock's `m.isGrid` board, which checkers shares with chess: a square
   sized by whichever axis runs out first, radius 14, a gold hairline and the
   `0 26px 70px / 0 0 60px` pair. `--board-cap` is the free height
   `fitMatchColumn()` measured; the 560px is the old cap, kept as the width
   ceiling so the board never outgrows the column on a wide screen. */
.ck-stage {
  position: relative;
  padding: 0;
}
.ck-board-wrap {
  position: relative;
  width: 100%;
  max-width: min(var(--board-cap, 60vh), 560px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* === grid === */
.ck-grid {
  container-type: size;
  container-name: ckboard;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(241, 193, 82, 0.28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62), 0 0 60px rgba(124, 58, 237, 0.2);
  user-select: none;
  -webkit-user-select: none;
}
/* A layer over the board, inside `.ck-board-wrap` — so every label is inside
   the board by construction, which is the assertion the chess board failed
   this morning when its rank «8» sat above `overflow: hidden`. The tint flips
   with the square underneath: a dark violet square takes a light label. */
.ck-coords {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  font-weight: 800;
  line-height: 1;
}
.ck-coord {
  position: absolute;
  font-size: clamp(7px, 1.6%, 11px);
  color: rgba(20, 14, 40, 0.6);
}
.ck-coord.on-dark { color: rgba(236, 231, 250, 0.62); }
/* `left` is the RIGHT edge of the file's square; the label hangs just inside
   it, which is why it is translated back by its own width plus 3px. */
.ck-coord-f { bottom: 3px; transform: translateX(calc(-100% - 3px)); }
.ck-coord-r { left: 4px; margin-top: 3px; }
/* `.ck-grid` in front is not decoration — it is what makes `min-height: 0`
   stick. base.css's touch floor is `button:not([data-tight]) { min-height:
   44px }`, and `:not()` carries its argument's specificity, so (0,1,1) beat the
   bare `.ck-cell` at (0,1,0) and every square on a phone had a 44px floor under
   it. On a tall window nobody could see it: a 358px board is 44.75px a square,
   so the floor never bound. On a short one it is the whole board — measured at
   844x390 the grid is 160x160 and its cells came out 19.75 WIDE by 44 TALL,
   eight rows of them inside 160px, squares painting over their neighbours
   (`elementFromPoint` on 25 cells returned a different cell).
   A board square is sized by the board, never by the thumb; the tap target
   here is the piece, and it is as big as the board can make it. */
.ck-grid .ck-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: none;
  line-height: 1;
  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
/* The mock's own two squares. Russian checkers only ever uses the dark ones,
   so the pale violet never sits behind a piece. */
.ck-cell.light { background: #cfc2ea; }
.ck-cell.dark { background: #4c3a7c; }
.ck-cell:disabled { cursor: default; }

/* === pieces === */
.ck-piece {
  position: relative;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), opacity 200ms ease;
  pointer-events: none;
}
/* inner rim + gloss, shared by both colors */
.ck-piece::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.28);
}
.ck-piece.ck-w {
  background: radial-gradient(circle at 34% 28%, #ffffff, #d7deeb 52%, #9aa6bd 88%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 10px rgba(233, 239, 247, 0.18);
}
.ck-piece.ck-b {
  background: radial-gradient(circle at 34% 28%, #59627a, #262c3d 55%, #10131c 90%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), 0 0 10px rgba(167, 139, 250, 0.16);
}
.ck-piece.ck-b::before { border-color: rgba(167, 139, 250, 0.4); }

/* kings: gold rim + crown glyph */
.ck-piece.king { box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 0 2.5px rgba(241, 193, 82, 0.75), 0 0 14px rgba(241, 193, 82, 0.4); }
.ck-piece.king::after {
  content: "♛";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 3.4cqmin, 24px);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(241, 193, 82, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ck-piece.ck-w.king::after { color: var(--gold2); }

/* captured man fading out mid-animation */
.ck-piece.ck-dying {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 220ms ease, transform 220ms ease;
}
/* promotion pop */
.ck-piece.ck-crowned { animation: ckCrownPop 0.55s var(--spring) both; }
@keyframes ckCrownPop {
  0% { transform: scale(0.55); filter: brightness(2.2); }
  55% { transform: scale(1.22); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* === picker highlights === */
.ck-cell.ck-can-move { cursor: pointer; }
.ck-cell.ck-can-move .ck-piece {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 12px rgba(124, 201, 255, 0.5);
}
.ck-cell.ck-can-move:focus-visible .ck-piece { transform: scale(1.07); }
@media (hover: hover) {
  .ck-cell.ck-can-move:hover .ck-piece { transform: scale(1.07); }
}
.ck-cell.ck-sel .ck-piece {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2.5px rgba(241, 193, 82, 0.85), 0 0 18px rgba(241, 193, 82, 0.55);
  animation: ckSelPulse 1.3s ease-in-out infinite;
}
@keyframes ckSelPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2.5px rgba(241, 193, 82, 0.85), 0 0 12px rgba(241, 193, 82, 0.4); }
  50% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2.5px rgba(241, 193, 82, 1), 0 0 24px rgba(241, 193, 82, 0.7); }
}
/* squares already walked in the current series */
.ck-cell.ck-on-path { box-shadow: inset 0 0 0 2px rgba(241, 193, 82, 0.45); }

/* next-step dots (quiet) */
.ck-cell.ck-hint { cursor: pointer; }
.ck-cell.ck-hint::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9b0, var(--gold) 70%);
  box-shadow: 0 0 10px rgba(241, 193, 82, 0.8);
  animation: ckHintBob 1.1s ease-in-out infinite;
}
/* next-step rings (capture) */
.ck-cell.ck-hint-cap { cursor: pointer; }
.ck-cell.ck-hint-cap::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 3px solid rgba(255, 93, 108, 0.85);
  box-shadow: 0 0 12px rgba(255, 93, 108, 0.55), inset 0 0 10px rgba(255, 93, 108, 0.35);
  animation: ckHintBob 1.1s ease-in-out infinite;
}
@keyframes ckHintBob {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 1; }
}
@media (hover: hover) {
  .ck-cell.ck-hint:hover,
  .ck-cell.ck-hint-cap:hover { background: rgba(241, 193, 82, 0.14); }
}
/* Touch press feedback: same wash, but only while the finger is down — the
   ungated hover used to leave a phantom legal-move highlight on the last
   tapped destination. */
.ck-cell.ck-hint:active,
.ck-cell.ck-hint-cap:active { background: rgba(241, 193, 82, 0.14); }

/* last-move tint */
.ck-cell.ck-last-from { box-shadow: inset 0 0 0 2px rgba(124, 201, 255, 0.5); }
.ck-cell.ck-last-to { box-shadow: inset 0 0 0 2px rgba(241, 193, 82, 0.6); background-image: linear-gradient(rgba(241, 193, 82, 0.12), rgba(241, 193, 82, 0.12)); }
.ck-cell.ck-last-from.ck-sel,
.ck-cell.ck-last-to.ck-sel { box-shadow: inset 0 0 0 2px rgba(241, 193, 82, 0.6); }

/* === ghost overlay (path animation) === */
.ck-ghost-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.ck-piece.ck-ghost {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  margin: auto; /* center inside its px-sized box */
  width: 78%;
  height: 78%;
  transition: transform 170ms ease-in-out;
  will-change: transform;
}

/* === forced-capture pill === */
.ck-forced {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 93, 108, 0.55);
  background: rgba(20, 10, 14, 0.82);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 93, 108, 0.6);
  box-shadow: var(--shadow-glow-danger);
  animation: ckForcedPulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ckForcedPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 93, 108, 0.25); }
  50% { box-shadow: 0 0 24px rgba(255, 93, 108, 0.55); }
}

/* === no-progress draw countdown ===
   Sits at the FOOT of the board so it never collides with .ck-forced at the
   top; both can be on screen at once (a forced capture is exactly what resets
   the counter). Amber while there is still room to manoeuvre, red once the
   draw is four plies away. */
.ck-drawcount {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(241, 193, 82, 0.5);
  background: rgba(20, 16, 6, 0.85);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 14px rgba(241, 193, 82, 0.25);
  pointer-events: none;
}
.ck-drawcount.is-hot {
  border-color: rgba(255, 93, 108, 0.6);
  background: rgba(20, 10, 14, 0.85);
  color: var(--danger);
  box-shadow: 0 0 16px rgba(255, 93, 108, 0.35);
  animation: ckForcedPulse 1.5s ease-in-out infinite;
}

/* === «finish move» row === */
.ck-done-row {
  display: flex;
  justify-content: center;
  margin-top: -4px;
}
.ck-done-btn { min-width: 200px; box-shadow: var(--shadow-glow-ok); }

/* === fighter material pips === */
/* Two text chips, not a strip of cap icons — so no wrapping (game.css bans it:
   the ♛ chip appearing when a king is crowned grew the card a row and shifted
   the board) and no clipping either: the king tally is not legible from a
   275px board, so like arcomage's tower/wall the counters keep their width
   and the ellipsizing name gives way. */
.ck-material { gap: 6px; }
.view-ck .fighter-mid { flex: 0 0 auto; }
.ck-count {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.ck-count-w { color: #dfe6f2; }
.ck-count-b { color: var(--violet); }
.ck-count-k { color: var(--gold); text-shadow: 0 0 8px rgba(241, 193, 82, 0.45); }

/* === moves log === */
.ck-moves { max-height: 300px; }
.ck-move-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.ck-move-row:nth-child(odd) { background: var(--panel-soft); }
.ck-move-ico { font-size: 12px; width: 16px; text-align: center; }
.ck-move-path { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.4px; }
.ck-move-who {
  font-weight: 600;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* === responsive ===
   game.css already collapses `.view-game` to one column at 619 SCENE pixels;
   everything here is type and spacing inside the board column. */
@container scene (max-width: 619px) {
  .ck-done-btn { min-width: 0; width: 100%; }
  .ck-forced { font-size: 11px; padding: 5px 10px; }
  .ck-drawcount { font-size: 11px; padding: 4px 10px; bottom: 6px; }
  /* Width-bound, the chess block's move (game.css `.board-stage` under the
     same query): `--board-cap` is leftover height, and on a toolbar-shortened
     phone it held a 410px column to a ~330px board. The one-column layout lets
     the column grow and the scene scroll the slack; cells are DOM buttons, so
     a scrolled board needs no bounds-cache hygiene. Landscape keeps the cap —
     see the block below. */
  .ck-board-wrap { max-width: none; }
}

/* === phone landscape ===
   The shell drops rail/column/act on match routes sideways (shell.css
   `.is-game`), leaving a wide, ~330px-tall scene where two fighter bars and
   the actions row cost the square board a third of its size. Same trade as
   chess's landscape block: transient chrome goes, all of it back on rotation;
   the base `min(var(--board-cap), 560px)` above is exactly right here. */
@media (orientation: landscape) and (max-height: 500px) {
  .view-ck .g-board-col > .fighter-slot { display: none; }
  .view-ck .g-board-col > .g-actions-row { display: none; }
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .ck-piece.ck-ghost { transition: none; }
  .ck-piece.ck-crowned { animation: none; }
  .ck-cell.ck-sel .ck-piece,
  .ck-cell.ck-hint::after,
  .ck-cell.ck-hint-cap::after,
  .ck-drawcount.is-hot,
  .ck-forced { animation: none; }
}