/* Tetris — board + side panel, overlay, score */
.tetris-stage-wrap { gap: 0.75rem; align-items: center; }
.tetris-stage { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: center; width: 100%; }
.tetris-board-wrap { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.tetris-canvas { display: block; border-radius: var(--radius-md); border: 1px solid var(--border); touch-action: none; user-select: none; -webkit-user-select: none; }
.tetris-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; padding: 1rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; }
.tetris-overlay[hidden] { display: none; }
.tetris-overlay strong { font-size: clamp(1.2rem, 5cqw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; color: var(--text-primary); }
.tetris-overlay span { font-size: 0.82rem; color: var(--text-secondary); }
.tetris-side { display: flex; flex-direction: column; gap: 0.6rem; width: 96px; flex: 0 0 auto; }
.tetris-panel { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.55rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.tetris-panel b { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.tetris-panel-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tetris-next { display: block; width: 64px; height: 64px; }
.tetris-score { display: inline-flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.tetris-score i { font-style: normal; color: var(--text-muted); }
.tetris-best { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); }
.tetris-best b { font-weight: 600; color: var(--text-primary); }
.tetris-hint { text-align: center; }
@container (max-width: 360px) {
  .tetris-side { width: 72px; }
  .tetris-next { width: 48px; height: 48px; }
}