/* =============================================================
   GAME: Checkers
   ============================================================= */
.board-checkers {
  --cell: min(calc((100vw - 72px) / 8), 56px);
  --ck-glow: #ff4d5e;
  display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  padding: 8px; background: #1c0710; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--ck-glow), 0 0 26px rgba(255, 77, 94, .38);
}
.ck-cell { position: relative; border: 0; padding: 0; display: grid; place-items: center; }
.ck-cell.light { background: #3b2234; }
.ck-cell.dark { background: #12050c; cursor: default; }
.ck-cell.dark:focus { outline: none; }
.ck-cell.dark:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 1; }
.ck-cell.last { background: #3a0f1c; }
.ck-cell.lastcap::before { content: ""; width: 30%; height: 30%; border-radius: 50%; border: 2px dashed rgba(255, 120, 140, .55); }
.ck-cell.trail { background: #4a1426; }
.ck-cell.movable { cursor: pointer; }
.ck-cell.dest { cursor: pointer; }
.ck-cell.dest::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(255, 140, 155, .55); box-shadow: 0 0 10px rgba(255, 77, 94, .7); }
.ck-cell.dest:hover::after { width: 62%; height: 62%; opacity: .55; }

.ck-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* pieces: a thick draughtsman seen from above — glossy top with two engraved rings,
   a ridged edge built from stacked shadows (--h = one ridge), and a soft contact shadow */
.ck-piece {
  --h: calc(var(--cell) * .026);
  position: relative; width: 74%; height: 74%; border-radius: 50%; display: grid; place-items: center;
  transform: translateY(calc(var(--h) * -2));
  background: radial-gradient(circle at 50% 50%, transparent 66%, var(--lip) 70%, transparent 74%),
    radial-gradient(circle at 36% 28%, var(--hi) 0, var(--face) 48%, var(--lo) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--cell) * .018) var(--rim),
    0 var(--h) 0 var(--e1), 0 calc(var(--h) * 2) 0 var(--e2), 0 calc(var(--h) * 3) 0 var(--e1), 0 calc(var(--h) * 4) 0 var(--e3),
    0 calc(var(--h) * 5) calc(var(--h) * 3) rgba(0, 0, 0, .6);
  transition: transform .15s, opacity .2s, filter .15s;
}
.ck-piece::before, .ck-piece::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ck-piece::before { inset: 16%; box-shadow: inset 0 1px 1.5px var(--groove), 0 1px 0 var(--ridge); }
.ck-piece::after { inset: 31%; box-shadow: inset 0 1px 1.5px var(--groove), 0 1px 0 var(--ridge); }
.ck-piece.king::after { display: none; }
.ck-piece.p1 {
  --hi: #6a6278; --face: #2b2535; --lo: #0e0c13; --lip: rgba(0, 0, 0, .35); --rim: rgba(255, 120, 140, .55);
  --e1: #1c1823; --e2: #5c2c3d; --e3: #0b090e; --groove: rgba(0, 0, 0, .75); --ridge: rgba(255, 255, 255, .13);
}
.ck-piece.p2 {
  --hi: #ffffff; --face: #f1eefc; --lo: #bdb6dc; --lip: rgba(80, 70, 140, .12); --rim: rgba(120, 110, 180, .45);
  --e1: #b9b1d8; --e2: #e6e1f7; --e3: #8a82b4; --groove: rgba(70, 60, 130, .4); --ridge: rgba(255, 255, 255, .95);
}
.ck-dot.p1 { background: var(--t-black); box-shadow: 0 0 0 2px #ff6b7a; }
.ck-dot.p2 { background: var(--t-white); }
.ck-crown { position: relative; z-index: 1; width: 70%; height: 70%; overflow: visible; filter: drop-shadow(0 1px .8px rgba(0, 0, 0, .55)); }
.ck-crown .c { fill: url(#ck-gold); stroke: #7a4a00; stroke-width: .9; stroke-linejoin: round; }
.ck-crown .j { fill: #ff4d5e; stroke: #8a0f22; stroke-width: .6; }
.ck-piece.ghost { opacity: .3; transform: scale(.8); }

.ck-cell.movable .ck-piece { filter: drop-shadow(0 0 calc(var(--cell) * .07) rgba(255, 77, 94, .9)); }
.ck-cell.must .ck-piece { animation: ck-must 1s ease-in-out infinite alternate; }
.ck-cell.movable:hover .ck-piece { transform: translateY(calc(var(--h) * -3.5)); }
.ck-cell.selected .ck-piece { transform: translateY(calc(var(--h) * -4)) scale(1.06); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .16) var(--ck-glow)); animation: none; }
.ck-cell.last .ck-piece { outline: 2px solid rgba(255, 210, 63, .75); outline-offset: 2px; }
@keyframes ck-must { to { filter: drop-shadow(0 0 2px var(--t-gold)) drop-shadow(0 0 calc(var(--cell) * .14) rgba(255, 210, 63, .85)); } }
@media (prefers-reduced-motion: reduce) { .ck-cell.must .ck-piece { filter: drop-shadow(0 0 2px var(--t-gold)) drop-shadow(0 0 calc(var(--cell) * .12) rgba(255, 210, 63, .8)); } }