.stage { max-width: 600px; }
.lv { display: flex; gap: 6px; justify-content: center; }
.lv button, .fm { 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, .fm.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.info { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .86rem; margin: 10px 4px; }
.info b { font-family: var(--mono); font-weight: 400; color: var(--gold-l); }
.grid-m { direction: ltr; display: grid; grid-template-columns: repeat(var(--w), 1fr); gap: 3px; width: min(100%, calc((100svh - 250px) * var(--w) / var(--h)), 540px); min-width: 270px; margin-inline: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.c { aspect-ratio: 1; border: 0; border-radius: 5px; padding: 0; cursor: pointer; background: linear-gradient(160deg, #3a3122, #241e15); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.35); color: var(--text); font: 500 clamp(.7rem, 3.2vw, 1.05rem)/1 var(--font); display: grid; place-items: center; }
.c:hover:not(.o) { background: linear-gradient(160deg, #4a3e2a, #2c251a); }
.c.o { background: #12100c; box-shadow: none; cursor: default; }
.c.f { color: var(--red); }
.c.m { color: #f6d7a0; background: #3a1a14; }
.c.hit { background: var(--red); color: #fff; }
.n1 { color: #8ab4ff; } .n2 { color: var(--green); } .n3 { color: var(--red); } .n4 { color: #c39bff; }
.n5 { color: #e3a857; } .n6 { color: #5fd0d0; } .n7 { color: var(--text); } .n8 { color: var(--muted); }