.stage { max-width: 560px; }
.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-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(7, 1fr); gap: 6px; padding: 10px; background: linear-gradient(160deg, #2a2216, #17130d); border: 1px solid var(--line2); border-radius: 18px; width: min(100%, calc((100svh - 260px) * 7 / 6), 520px); min-width: 280px; margin-inline: auto; }
.col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer; border-radius: 12px; }
.col:hover { background: rgba(201,168,106,.08); }
.slot { aspect-ratio: 1; border-radius: 50%; background: #0b0a08; box-shadow: inset 0 3px 6px rgba(0,0,0,.7); display: grid; }
.disc { border-radius: 50%; display: block; position: relative; z-index: 2; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.25); }
.disc.p1 { background: radial-gradient(circle at 35% 30%, #f3e2b3, #c9a86a 55%, #8a6d3b); }
.disc.p2 { background: radial-gradient(circle at 35% 30%, #c9f0dc, #7fd1a8 55%, #3e6b55); }
.disc.new { animation: fall calc(.12s * var(--fall)) cubic-bezier(.5,0,1,1); }
@keyframes fall { from { transform: translateY(calc(-110% * var(--fall) - 20%)); } }
.disc.win { animation: pulse .8s ease-in-out infinite; box-shadow: 0 0 0 3px #fff6d5, 0 0 18px #f3e2b3; }
@keyframes pulse { 50% { transform: scale(.85); } }