*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#f3f5f2;color:#17281f;font-family:system-ui,sans-serif}
main{max-width:1100px;margin:32px auto;padding:0 20px}
h1{margin-bottom:8px}.intro{color:#4b6355;margin-top:0}
#setup{max-width:680px;margin:32px auto;padding:24px;background:#fff;border:1px solid #d3ded6;border-radius:12px;line-height:1.8}
.settings{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0}
.settings label{display:flex;flex-direction:column;gap:6px}
select,button{font:inherit}select{padding:8px;border:1px solid #779383;border-radius:6px;background:white;color:inherit}
button{cursor:pointer}button:disabled{cursor:default}
.actions button,#start{padding:12px 20px;border:1px solid #237b46;border-radius:6px;background:#fff;color:#174d2d}
.actions .primary,#start{background:#237b46;color:#fff}
.actions button:disabled{opacity:.55}
.game-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}.game-status h2{margin:12px 0}
#score,.board-score{font-weight:600}
#message{min-height:3em;margin:8px 0;line-height:1.5}
.hint{font-size:.9rem;line-height:1.6;color:#4b6355}
.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.board-panel{min-width:0}.board-panel h3{margin:12px 0 4px}.board-score{margin:4px 0 12px}
table{width:100%;table-layout:fixed;border-collapse:collapse;background:#237b46}
td{padding:0;border:1px solid #153e25}
td button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;padding:0;border:0;background:transparent}
.disk{display:block;width:76%;height:76%;border-radius:50%;box-shadow:0 2px 3px #0005}
.black .disk{background:radial-gradient(circle at 35% 30%,#454545,#111 75%)}
.white .disk{background:radial-gradient(circle at 35% 30%,#fff,#d6dbd7 85%)}
.legal:empty::after{content:"";width:15%;height:15%;border-radius:50%;background:#d9f4b4}
td button:disabled{opacity:1}
td button.last{box-shadow:inset 0 0 0 3px #ffe36b}
td button.shared{box-shadow:inset 0 0 0 3px #73d9ff}
td button:focus-visible{outline:3px solid #ffe36b;outline-offset:-4px;z-index:1}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media(max-width:680px){main{margin:20px auto;padding:0 12px}.boards{grid-template-columns:1fr;gap:20px}.board-panel{width:100%;max-width:480px;margin:auto}#setup{padding:18px}.game-status{gap:4px 16px}}
@media(prefers-reduced-motion:no-preference){.disk{animation:appear .18s ease-out}@keyframes appear{from{transform:scale(.85)}to{transform:scale(1)}}}