.stage { max-width: 600px; }
.lv { display: flex; gap: 6px; justify-content: center; }
.lv button, .tools 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); }
.tools { display: flex; justify-content: center; margin-top: 10px; }
.msg { text-align: center; color: var(--gold-l); margin: 8px 0 4px; min-height: 1.6em; }
.board { direction: ltr; display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, calc(100svh - 300px), 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; } .sq.dk { background: #a8865a; }
.sq.last.lt { background: #f0dc8c; } .sq.last.dk { background: #c9a84f; }
.sq.sel { box-shadow: inset 0 0 0 4px #4a8f6c; }
.sq.chk { background: radial-gradient(circle, #ff6a50 20%, #c0392b 70%) !important; }
.sq.dot::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: rgba(30,40,30,.35); }
.sq.cap::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 4px solid rgba(30,40,30,.35); }
.pc { font-size: clamp(1.6rem, 8vw, 2.9rem); line-height: 1; user-select: none; }
.pc.pw { color: #fffaf0; text-shadow: 0 0 1px #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 3px 4px rgba(0,0,0,.4); }
.pc.pb { color: #1b1712; text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 3px 4px rgba(0,0,0,.4); }
.caps { direction: ltr; min-height: 26px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin: 4px 0; font-size: 1.2rem; }
.caps .pw { color: #fffaf0; } .caps .pb { color: #6b5a40; }