/* ===== Checkers (classic, flat) ===== */
.g-checkers .board-wrap { display: grid; gap: 10px; justify-items: center; }
.g-checkers .board-wrap .prow { width: 100%; max-width: 560px; }
.g-checkers .board { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1; width: min(100%, 560px, calc(100svh - 300px)); min-width: 280px; border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.g-checkers .sq { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.g-checkers .sq.l { background: #ebecd0; }
.g-checkers .sq.d { background: #779556; }
.g-checkers .sq .co { position: absolute; font-size: 10px; font-weight: 700; pointer-events: none; }
.g-checkers .sq.l .co { color: #779556; }
.g-checkers .sq.d .co { color: #ebecd0; }
.g-checkers .sq .co.f { right: 3px; bottom: 1px; }
.g-checkers .sq .co.r { left: 3px; top: 1px; }
.g-checkers .sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 51, .38); }
.g-checkers .sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 51, .6); }
.g-checkers .sq.tgt::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(0, 0, 0, .2); pointer-events: none; }
.g-checkers .sq.movable .ck { box-shadow: 0 0 0 3px rgba(255, 255, 51, .8), 0 3px 4px rgba(0, 0, 0, .35); }
.g-checkers .sq[data-a] { cursor: pointer; }
.g-checkers .ck { position: relative; z-index: 2; width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center; pointer-events: none; transition: transform .15s var(--ease-out); }
.g-checkers .ck.w { background: #f7f7f2; box-shadow: inset 0 -4px 0 #d3d3c8, 0 3px 4px rgba(0, 0, 0, .35); }
.g-checkers .ck.b { background: #2b2b2b; box-shadow: inset 0 -4px 0 #111, 0 3px 4px rgba(0, 0, 0, .35); }
.g-checkers .ck::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .1); }
.g-checkers .ck.b::before { border-color: rgba(255, 255, 255, .1); }
.g-checkers .ck.k::after { content: ""; width: 44%; height: 32%; background: #f5b942; clip-path: polygon(0 100%, 0 20%, 22% 60%, 50% 0, 78% 60%, 100% 20%, 100% 100%); }
.g-checkers .sq.sel .ck { transform: scale(1.08); }
.g-checkers .ck.ghost { position: absolute; animation: ghostOut .5s .2s var(--ease-out) forwards; }
@keyframes ghostOut { to { transform: scale(1.3); opacity: 0; } }

/* one screen */
body.in-game .g-checkers .board-wrap { height: 100%; gap: 6px; align-content: start; }
body.in-game .g-checkers .board { width: min(100%, calc(var(--app-h, 100svh) - 210px)); min-width: 0; }

/* wide screens: a big centred board, the player rows exactly as wide as the board */
@media (min-width: 900px) {
  body.in-game .g-checkers { --bs: min(calc(var(--app-h, 100svh) - 236px), 820px); }
  body.in-game .g-checkers .board-wrap { align-content: center; gap: 8px; }
  body.in-game .g-checkers .board, body.in-game .g-checkers .board-wrap .prow { width: var(--bs); max-width: none; }
  body.in-game .g-checkers .board { border-radius: 12px; }
  body.in-game .g-checkers .sq .co { font-size: 12px; }
  body.in-game .g-checkers .status-line { font-size: 15px; }
}