.stage { max-width: 760px; }
.info { display: flex; justify-content: space-between; color: var(--muted); font-size: .92rem; margin: 0 6px 12px; }
.info b { color: var(--gold-l); font-weight: 500; }
.wrapg { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.grid-w { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: min(100%, calc(100svh - 230px), 500px); min-width: 280px; aspect-ratio: 1; user-select: none; -webkit-user-select: none; touch-action: none; }
.L { display: grid; place-items: center; background: var(--panel2); border-radius: 7px; font-size: clamp(1rem, 4.4vw, 1.5rem); font-weight: 500; cursor: pointer; transition: background .1s; }
.L.got { background: rgba(127,209,168,.28); color: #dff7ea; }
.L.on { background: var(--gold); color: var(--ink); }
.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(90px, auto)); gap: 6px 14px; align-content: start; }
.list li { padding: 4px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: .95rem; text-align: center; }
.list li.done { text-decoration: line-through; color: var(--faint); border-color: var(--line); background: rgba(127,209,168,.08); }
@media (max-width: 640px) { .list { grid-template-columns: repeat(3, 1fr); width: 100%; } }