/* Checkers — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }

.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
.ck-board {
  display:grid; grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 1fr);
  width:100%; max-width:420px; aspect-ratio:1;
  border:5px solid var(--stroke); border-radius:14px; overflow:hidden; box-shadow:0 6px 0 var(--stroke);
  /* Dark backing so any sub-pixel sliver at the rounded corners reads as border,
     not a light tile poking past it (the "tiles overlap the border" report). */
  background:var(--stroke);
  touch-action:none;
}
.sq { position:relative; display:flex; align-items:center; justify-content:center; }
.sq.light { background:#F3E1BC; }
.sq.dark  { background:#C79A63; cursor:pointer; }
/* round the four corner tiles to the board border's INNER radius (14 − 5 = 9px)
   so they follow the border curve exactly instead of poking past it */
.ck-board .sq:first-child   { border-top-left-radius:9px; }
.ck-board .sq:nth-child(8)  { border-top-right-radius:9px; }
.ck-board .sq:nth-child(57) { border-bottom-left-radius:9px; }
.ck-board .sq:last-child    { border-bottom-right-radius:9px; }
.sq.target::after {
  content:''; width:28%; height:28%; border-radius:50%; background:rgba(94,232,130,0.85); border:2px solid var(--stroke);
}
.sq.sel { box-shadow:inset 0 0 0 4px var(--yellow); }
.pc {
  width:74%; height:74%; border-radius:50%; border:3px solid var(--stroke); position:relative;
  box-shadow:inset 0 4px 0 rgba(255,255,255,0.4), inset 0 -5px 0 rgba(0,0,0,0.22), 0 2px 3px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.12s var(--bounce);
}
.pc.p1 { background:radial-gradient(circle at 50% 35%, #ff9ccd, #FF5DAA); }
.pc.p2 { background:radial-gradient(circle at 50% 35%, #7ad8ff, #3DC2FF); }
.pc.king::after { content:'♚'; font-size:120%; color:rgba(0,0,0,0.55); }
.pc.movin { animation:msPop 0.25s var(--bounce); }
@keyframes msPop { 0%{transform:scale(0.7);} 100%{transform:scale(1);} }

.status-line { text-align:center; font-weight:700; font-size:17px; margin-top:12px; min-height:24px; }
.turn-chip { background:var(--yellow); }