.stage { max-width: 600px; }
.lv { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.lv button { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer; font: inherit; font-size: .85rem; }
.lv button.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.msg { text-align: center; color: var(--gold-l); margin: 10px 0; min-height: 1.6em; }
.board { direction: ltr; display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, calc(100svh - 250px), 520px); min-width: 280px; margin-inline: auto; aspect-ratio: 1; border: 3px solid #3a2f1e; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.sq { border: 0; padding: 0; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; position: relative; }
.sq.lt { background: #e8dcc0; cursor: default; } .sq.dk { background: #6b4f30; }
.sq.last { background: #85663e; }
.sq.sel { box-shadow: inset 0 0 0 4px var(--green); }
.sq.can { box-shadow: inset 0 0 0 2px rgba(243,226,179,.55); }
.sq.dot::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(127,209,168,.6); }
.pc { width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 0 0 4px rgba(255,255,255,.15); }
.pc.p1 { background: radial-gradient(circle at 35% 30%, #f3e2b3, #c9a86a 55%, #8a6d3b); }
.pc.p2 { background: radial-gradient(circle at 35% 30%, #c9f0dc, #4f9c78 55%, #2a4a3b); }
.pc.k::after { content: "♛\FE0E"; font-size: clamp(.9rem, 4vw, 1.6rem); color: rgba(23,18,10,.75); }