/* ═══════════════════════════════════════════════
   DropStack — Game Styles
   ═══════════════════════════════════════════════ */

.score-group{display:flex;flex-direction:column;align-items:center;gap:2px}
.score-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
.score-val{font-size:18px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}

.tetris-layout{display:flex;gap:16px;align-items:flex-start;justify-content:center;width:100%}
.tetris-board-wrap{border:2px solid rgba(45,50,112,0.12);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-subtle);line-height:0}
#tetrisCanvas{display:block}
.tetris-side{display:flex;flex-direction:column;gap:12px}
.next-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:var(--radius-md);background:var(--bg-subtle);border:1.5px solid var(--border)}
.next-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
#nextCanvas{display:block}

.touch-controls{display:flex;gap:8px;padding:6px 0;justify-content:center;width:100%}
.ctrl-btn{flex:1;max-width:90px;height:62px;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--bg);color:var(--navy);font-size:20px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all var(--transition);box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ctrl-btn:active{background:var(--bg-subtle);transform:scale(0.95)}
.ctrl-btn--wide{max-width:200px;height:50px;flex-direction:row;gap:10px}
.ctrl-icon{font-size:20px;line-height:1}
.ctrl-key{font-size:8px;font-weight:600;letter-spacing:1px;color:var(--text-dim);line-height:1}
.ctrl-btn--wide .ctrl-icon{font-size:13px;letter-spacing:3px}
.ctrl-btn--wide .ctrl-key{font-size:8px}

.go-stats{display:flex;gap:24px;justify-content:center;margin-bottom:20px}
.go-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.go-stat-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
.go-stat-val{font-size:24px;font-weight:700;color:var(--navy)}

/* Row clear flash */
@keyframes rowFlash{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

@media(max-width:420px){
  .ctrl-btn{height:56px}
  .ctrl-btn--wide{height:46px}
  .tetris-layout{gap:10px}
  .next-box{padding:8px}
}

/* ── Game-specific overrides ── */
.game-hdr { gap:12px; flex-wrap:wrap; }