.checkers-area { max-width:520px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.mode-group, .actions { display:flex; gap:8px; }
.mode.active { border-color:var(--blue); color:var(--blue); background:var(--bluewash); }
.status { font-weight:700; margin-bottom:10px; }
.board { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1/1; border:1px solid var(--rule); background:var(--paper); }
.sq { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; }
.sq.dark { background:var(--rule); }
.sq.light { background:var(--paper); }
.sq.last-move { box-shadow:inset 0 0 0 3px var(--blue); }
.piece { width:74%; height:74%; border-radius:50%; cursor:pointer; position:relative; transition:transform .1s; }
.piece.black { background:radial-gradient(circle at 32% 30%, #6b7280, #16191f 60%); }
.piece.white { background:radial-gradient(circle at 32% 30%, #fff, #d1d5db 60%); border:1px solid var(--rule); }
.piece.king::after { content:"♛"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; }
.piece.black.king::after { color:#fff; }
.piece.white.king::after { color:#16191f; }
.piece.selected { box-shadow:0 0 0 3px var(--orange); transform:scale(1.06); }
.sq.move-hint::after { content:""; width:30%; height:30%; border-radius:50%; background:var(--cyan); opacity:.55; }
.sq.capture-hint::after { content:""; width:30%; height:30%; border-radius:50%; background:var(--orange); opacity:.8; }
@media (max-width:780px) { .piece.king::after { font-size:12px; } .controls { flex-direction:column; align-items:stretch; } .mode-group, .actions { justify-content:center; } }