.board-stage{max-width:620px;margin:2rem auto;padding:clamp(.8rem,3vw,1.5rem);border:1px solid var(--border,#735151);border-radius:24px;background:#29131ce8;scroll-margin-top:1rem}.board-stage[hidden]{display:none}.board-stage h2{font-size:2rem;margin:.3rem 0}.board-status{font-size:1.15rem;color:#e7cd9e;min-height:2em}.board-help{font-size:.85rem;color:#d2bebd}.board-surface{width:100%;aspect-ratio:1;position:relative;margin:1rem auto;touch-action:manipulation;user-select:none}.square-grid{display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden;border:1px solid #ad8c61;border-radius:12px}.square{position:relative;border:0!important;border-radius:0!important;padding:0!important;min-width:0;aspect-ratio:1;background:#d5c4a5!important;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:clamp(22px,7vw,50px);line-height:1;color:#16101a}.square.dark{background:#76515b!important}.square.selected,.mill-node.selected{box-shadow:inset 0 0 0 3px #edb951!important}.square.legal:after{content:'';position:absolute;width:22%;height:22%;background:#306950aa;border:2px solid #e5efbf;border-radius:50%;pointer-events:none}.square.legal:has(.piece):after{width:85%;height:85%;background:transparent;border:3px solid #e2bc70}.piece{pointer-events:none}.chess-white{color:#fff8e9;text-shadow:1px 0 #30252a,-1px 0 #30252a,0 1px #30252a,0 -1px #30252a}.chess-black{color:#211923;text-shadow:1px 0 #eee1c9,-1px 0 #eee1c9,0 1px #eee1c9,0 -1px #eee1c9}.checker{width:72%;height:72%;border-radius:50%;box-shadow:inset 0 0 0 3px #ac895e,0 3px 3px #0005;display:flex;align-items:center;justify-content:center;font:700 22px Georgia}.white-piece{background:#f0dfba;color:#3c2530}.black-piece{background:#34222e;color:#ead3a4}.board-controls{display:flex;flex-wrap:wrap;gap:.5rem}.board-controls button,.promotion button{padding:.7rem .9rem;border:1px solid #a28665;border-radius:12px;background:#422330;color:#fff1d9;min-height:44px;cursor:pointer}.board-controls button:disabled{opacity:.4}.board-stage details{margin-top:1rem;font-size:.85rem}.board-stage summary{cursor:pointer;padding:.5rem 0}.board-stage details p{line-height:1.65}.mill-board{border-radius:16px;background:radial-gradient(ellipse,#76534344,#23131b);border:1px solid #85644c}.mill-board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mill-node{position:absolute;width:10%;height:10%;padding:0!important;border-radius:50%!important;transform:translate(-50%,-50%);border:2px solid #b99b70!important;background:#3c2932;color:#eedcb9;min-width:0;display:grid;place-items:center;font-size:20px}.mill-node.legal{outline:2px solid #e9c66d;outline-offset:2px}.mill-node.white-piece{background:#f0dfba;color:#32202a}.mill-node.black-piece{background:#271d25;color:#e6d5b2}.promotion{display:flex;gap:.5rem;flex-wrap:wrap;padding:.8rem 0}.promotion[hidden]{display:none}.board-stage button:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Keep the hit target centred while pressed: the site's generic button:active
   scale must not replace the translate used to position Morris nodes. */
.mill-node:active{transform:translate(-50%,-50%)}

.square .piece.chess-white,.square .piece.chess-black{display:block;width:88%;height:88%;font-size:0;line-height:0;text-shadow:none;pointer-events:none}
.chess-white{--piece-fill:#fff5dd;--piece-stroke:#382431}
.chess-black{--piece-fill:#281b27;--piece-stroke:#eed9b4}
.chess-shape{display:block;width:100%;height:100%;pointer-events:none}