/* Xếp gạch: bàn 10×20 cao hết cỡ màn hình (máy cảm ứng chừa chỗ cho 4 nút), mỗi loại khối một màu. */
.stat.best small { color: #ffd23f; display: flex; align-items: center; justify-content: center; gap: 3px; }
#board {
  --h: min(640px, calc(100dvh - 200px));
  position: relative; height: var(--h); aspect-ratio: 1 / 2; border-radius: 10px; overflow: hidden;
  background: #070d14; box-shadow: 0 0 0 4px #23405c, 0 12px 30px #0008; touch-action: none;
}
@media (hover: hover) and (pointer: fine) { #board { --h: min(640px, calc(100dvh - 130px)); } }
#cells { height: 100%; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(20, 1fr); }
#cells > div { border: 1px solid #ffffff08; }
#cells > .blk { border: 0; border-radius: 3px; box-shadow: inset 0 0 8px #0005, inset -3px -3px 0 #0003, inset 2px 2px 0 #fff5; }
.cI { background: #22d3ee; }
.cJ { background: #3b82f6; }
.cL { background: #f97316; }
.cO { background: #facc15; }
.cS { background: #22c55e; }
.cT { background: #a855f7; }
.cZ { background: #ef4444; }
.card h2 { letter-spacing: .04em; }
.card h2.bad { color: var(--bad); }
.moves button { width: 56px; height: 56px; padding: 0; font-size: 20px; touch-action: manipulation; }
.moves .rot { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.moves .drop { background: #ea580c; border-color: #ea580c; color: #fff; }
.help { width: 240px; }
.help .note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
/* Chọn độ khó (Thường / Khó / Siêu khó) trên màn bắt đầu / hết ván. */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.levels button { min-height: 44px; padding: 6px 4px; font-size: 13px; }