.checkers-board{aspect-ratio:1;background-color:var(--surface-2);border:4px solid var(--border-subtle);border-radius:var(--radius-md);grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:min(90vw - 32px,560px);display:grid;overflow:hidden}.checkers-cell{cursor:default;background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:100%;padding:0;transition:background-color .2s,filter .2s;display:flex;position:relative}.checkers-cell.light{background-color:#d18b47}.checkers-cell.dark{background-color:#ffce9e}@media (prefers-color-scheme:dark){.checkers-cell.light{background-color:#633912}.checkers-cell.dark{background-color:#c99c6b}}.checkers-cell:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;z-index:2}.checkers-cell:not(:disabled){cursor:pointer}.checkers-cell.selected{filter:brightness(1.2);outline:3px solid var(--accent-base);outline-offset:-3px;z-index:2}.checkers-cell.valid-destination{cursor:pointer}.checkers-cell.valid-destination:after{content:"";z-index:1;background-color:#0000004d;border-radius:50%;width:25%;height:25%;position:absolute}@media (prefers-color-scheme:dark){.checkers-cell.valid-destination:after{background-color:#00000080}}.checkers-cell.valid-destination.is-jump:after{background-color:var(--accent-base);opacity:.8}.checkers-piece{z-index:2;border-radius:50%;width:80%;height:80%;transition:transform .2s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:0 4px 6px #0000004d,inset 0 -4px 6px #0003}.checkers-cell:not(:disabled):hover .checkers-piece{transform:scale(1.05)}.checkers-piece.black{background:radial-gradient(circle at 30% 30%,#4a4a4a,#1a1a1a);border:2px solid #000}.checkers-piece.white{background:radial-gradient(circle at 30% 30%,#f0f0f0,#b0b0b0);border:2px solid #888}.checkers-piece.king:before{content:"♔";color:gold;text-shadow:0 1px 2px #000c;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.checkers-piece.black.king:before{color:gold}.checkers-piece.white.king:before{color:#b8860b}.checkers-piece{pointer-events:none}