.stage { max-width: 560px; }
.gr-solved { display: grid; gap: 8px; margin-bottom: 8px; }
.gr-group { background: var(--c); color: #17120a; border-radius: 12px; padding: 10px 14px; text-align: center; animation: grin .4s; }
@keyframes grin { from { opacity: 0; transform: scale(.94); } }
.gr-group b { display: block; font-weight: 600; font-size: .95rem; }
.gr-group span { font-size: .85rem; opacity: .85; }
.gr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gr-w {
  min-height: 64px; border: 0; border-radius: 12px; background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; padding: 6px 4px; transition: background .15s, transform .15s; line-height: 1.3;
}
.gr-w.long { font-size: .8rem; }
.gr-w:hover { background: #26211b; }
.gr-w.on { background: var(--gold); color: var(--ink); box-shadow: none; transform: scale(.97); }
.gr-w.no { animation: grno .45s; }
@keyframes grno { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.gr-w.win { animation: grwin .5s; }
@keyframes grwin { 50% { transform: translateY(-10px); } }
.gr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gr-lives { color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.gr-lives i { display: inline-flex; gap: 5px; }
.gr-lives s { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); text-decoration: none; display: inline-block; transition: .3s; }
.gr-lives s.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); }
@media (max-width: 640px) { .gr-w { min-height: 58px; font-size: .9rem; } .gr-w.long { font-size: .72rem; } .gr-grid { gap: 6px; } }