.tetris-area { max-width:720px; }
.play-wrap { display:flex; gap:20px; align-items:flex-start; justify-content:center; }
.board { width:min(300px,52vw); aspect-ratio:1/2; border:1px solid var(--rule); background:var(--panel); }
.side { display:flex; flex-direction:column; gap:10px; width:130px; }
.stat { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px dashed var(--rule); padding-bottom:4px; color:var(--muted); font-size:12px; }
.stat b { color:var(--ink); font-size:17px; }
.next-box { border:1px solid var(--rule); background:var(--panel); padding:8px; text-align:center; }
.next-label { font:600 10px ui-monospace,monospace; letter-spacing:.08em; color:var(--muted); }
.next { display:block; margin:4px auto 0; width:100px; height:100px; }
.touch-pad { display:none; }
.keys-hint { text-align:center; color:var(--muted); font-size:13px; margin-top:14px; }
.over-panel { max-width:340px; margin:18px auto 0; padding:24px; text-align:center; }
.over-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.record-msg { color:var(--orange); font-weight:700; margin:0 0 6px; }
.over-panel p { color:var(--muted); font-size:14px; margin:0; }
.over-stats { display:flex; justify-content:center; gap:28px; margin:16px 0; }
.over-stats b { display:block; font-size:26px; }
.over-stats span { color:var(--muted); font-size:12px; }
@media (max-width:780px) {
  .play-wrap { flex-direction:column; align-items:center; }
  .side { width:min(300px,52vw); flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
  .stat { border-bottom:none; }
  .next-box { order:-1; }
  .touch-pad { display:block; max-width:300px; margin:14px auto 0; }
  .touch-row { display:flex; gap:10px; margin-bottom:10px; }
  .touch-btn { flex:1; padding:12px; font-size:16px; }
  .keys-hint { display:none; }
}