.checkers-cover { border-color: #633d32; background: #633d32; }
.checkers-cover figcaption { background: #573329; border-color: #986f57; color: #f8e5cd; }
#checkers-board { border-color: #755041; }
#checkers-board [data-shade="light"] { background: #efd7b8; color: #543527; }
#checkers-board [data-shade="dark"] { background: #895b47; color: #fff0d8; }
#checkers-board .last { background: #b07948; color: #28190d; }
#checkers-board .selected { background: #b79054; color: #28190d; }
#checkers-board .can-capture { box-shadow: inset 0 0 0 3px #ffdb8f; }
#checkers-board .selected.can-capture { box-shadow: inset 0 0 0 3px #392318; }
#checkers-board .target::after { background: #ffe8b4; outline: 1px solid #5b3425; }
#checkers-board .taken .board8-figure { opacity: .36; }
#checkers-board .board8-figure { display: grid; place-items: center; }
.checker-piece { display: grid; place-items: center; width: 86%; aspect-ratio: 1; border: 1px solid var(--chip-edge); border-radius: 50%; background: var(--chip-face); color: var(--chip-mark); box-shadow: inset 0 0 0 2px var(--chip-rim), 0 2px 1px #24161160; }
.checker-white { --chip-edge: #805635; --chip-face: #fff1d5; --chip-rim: #c9a16f; --chip-mark: #633f29; }
.checker-black { --chip-edge: #261e2a; --chip-face: #3c303d; --chip-rim: #806472; --chip-mark: #ffe6af; }
.checker-piece svg { display: block; width: 53%; fill: currentColor; }
.piece-chip:has(.checker-piece) { display: grid; place-items: center; }
.piece-chip .checker-piece { width: 72%; }