### PARTIAL OUTPUT (time limit hit; the model was still generating) ###

=== thinking so far ===
The user wants a complete falling-blocks puzzle game in a single self-contained HTML file. No external libraries, no internet resources, no images — everything inline. Let me plan this carefully and make it genuinely good, not just functional.

**Core requirements checklist:**
- 10×20 playfield on canvas ✓
- 7 tetromino shapes, 4 squares each, distinct colors ✓
- Controls: ←/→ move, ↑ rotate, ↓ soft drop, space hard drop ✓
- Rotation with wall-kick / collision respect (no clipping) ✓
- Line clears, rows fall, multi-line bonus scoring ✓
- Score, lines, level display; speed increases with level ✓
- Next-piece preview ✓
- Game over at top, visible game-over state, restart key (R) ✓
- Clean, readable dark visual style ✓

**Design decisions (my taste):**

I want this to feel like a crafted, authored game, not a tutorial copy. Some choices:

1. **Visual identity**: A deep, near-black charcoal background with a restrained palette. I'll avoid the garish default tetris rainbow — instead I'll pick a curated set of slightly desaturated but distinct hues that harmonize on dark: a warm coral/vermilion for I... actually, classic assignments are expected (I=cyan, O=yellow, etc.) but I can tune them. Let me pick a refined palette:
   - I: teal/cyan `#4EC9B0`-ish — let me use a coherent set: 
   - I: `#56B6C1` (cyan-teal)
   - O: `#E5C07B` (amber)
   - T: `#C678DD` (soft violet)
   - S: `#98C379` (green)
   - Z: `#E06C75` (rose)
   - J: `#61AFEF` (blue)
   - L: `#D19A66` (orange)
   
   This is the One Dark palette essentially — harmonious on dark backgrounds, distinct enough. Good.

2. **Block rendering**: Not flat squares — I'll give each cell a subtle bevel: a lighter top-left inner edge, a darker bottom-right, and a small inner highlight. Crisp and readable without gradients as decoration (beveling blocks is functional game rendering, a craft detail, not a gradient banner). I'll keep it subtle.

3. **Typography**: Use a monospace stack for the HUD — gives it a terminal/arcade feel and it's not Inter/Roboto/system-ui as identity. Something like `"Courier New"`? That's a bit weak. I can use `ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace` — monospace fonts are fine and fitting for an arcade game. Letter-spacing on labels, uppercase micro-labels.

4. **Layout**: Centered column: title wordmark ("TETRA" or something — I'll call it "QUADRA" or "TETRA·10"? Let me name it **"TETRA"** — simple. Actually something more authored: **"GRAVITron"**? Hmm. I'll go with **TETRA** with a small tagline). HUD as a stat row (score / lines / level) with tabular numbers. Canvas with a thin border and slight inner glow of a neutral kind... no glow — a clean 1px border with the playfield having a subtle grid. Next preview to the side or above. I'll do a side panel next to the canvas (flex row) containing NEXT box, stats, controls legend. On narrow screens it stacks.

5. **Grid**: Very subtle grid lines (rgba white 0.04) plus faint column guides. Empty cells slightly darker than page background or same.

6. **Ghost piece**: A nice extra — showing where the piece will land (outline). This is standard quality-of-life and shows craft. I'll render the ghost as low-alpha fill or outline. Yes, include it.

7. **Effects**:
   - Line clear flash: rows flash white then collapse — I'll implement a brief clear animation (rows highlighted, then removed after ~180ms). During the animation, the game pauses spawning briefly. Simpler: do the flash then clear. I'll implement a small state machine: `state = 'playing' | 'clearing' | 'over'`.
   - Hard drop: tiny screen shake or a quick particle? Particles on line clear — small squares... I dislike plain small squares as particles. But this is canvas pixel art context; I could do shrinking/rotating rects with the piece colors — for line clears, spawn little shards that fly. Hmm, requirement says no images but canvas-drawn particles are fine. To keep it tasteful, I'll do a quick white flash on cleared rows plus a subtle score "pop" in HUD. Maybe skip particles to keep it clean — a crisp flash + falling is enough. Actually a small touch: cleared rows flash and the blocks above ease down? Easing gravity for the collapse is complex; instant is classic. I'll do flash → clear. Keep it snappy.
   - Level-up: show a brief "LEVEL 2" toast overlay on the canvas? A small inline message area. I'll add a transient canvas overlay text for level-up. Nice touch.

8. **Overlays**: Start state? The requirement doesn't demand a start screen, but a paused/ready state with "Press any key" is good UX. I'll start the game immediately on load but maybe show "PRESS ANY KEY TO START"? Hmm — restarting via R. Let me include three states: `ready` (press any key), `playing`, `clearing`, `over`. Ready screen with title and control legend drawn on canvas overlay (DOM overlay div is easier to style — I'll use a DOM overlay positioned over the canvas). Overlay for game over: "GAME OVER — score — press R to restart". Semi-transparent dark backdrop over canvas, blurred? backdrop-filter blur is fine.

9. **Mechanics details**:
   - Board: 10 × 20, but I need hidden rows for spawn/rotation. I'll make the board array 20 visible rows + 2 hidden rows above (index 0,1 hidden). Actually simpler: board of 22 rows, render rows 2–21. Spawn at row 0 (hidden). Game over when a new piece collides immediately at spawn, OR when blocks exist in hidden rows after lock... Standard: game over if the newly spawned piece can't be placed. Also "stack reaches the top" — if a locked piece occupies any hidden row region... I'll say: if locked blocks are in row < 2 (hidden area), game over. Both conditions.
   - Rotation: I'll implement rotation with a simple wall-kick: try offsets [(0,0), (-1,0), (1,0), (0,-1), (-2,0), (2,0)] (for I piece maybe larger). Use matrix rotation on piece shape matrices. Each piece stored as a matrix (array of arrays with 0/1), rotate via transpose+reverse. For I piece using a 4×4 matrix, standard rotation works. Kick attempts: dx 0, -1, +1, -2, +2, and dy -1 (up nudge). That prevents clipping through walls/stack — rotation only applies if the resulting position is fully valid.
   - Soft drop: while held, gravity ×10 or move down each 40ms; also award 1 point per cell soft-dropped (standard). Hard drop: 2 points per cell.
   - Gravity timing: level 1 start 800ms per row, each level decrease: e.g., `interval = Math.max(60, 800 * Math.pow(0.85, level-1))`. Level = 1 + floor(lines/10).
   - Scoring: 1 line = 100×level, 2 = 300×level, 3 = 500×level, 4 = 800×level. Plus soft/hard drop points.
   - Lock delay? Keep simple: lock on landing when gravity tick can't move down — immediate lock is classic and fine, but a tiny lock delay (e.g., piece can still move for 300ms after landing) improves feel. I'll implement a simple reset-on-move lock delay capped: when the piece can't move down, start lockTimer (500ms); moving/rotating resets it (max resets maybe not capped — fine for casual). Actually to keep code manageable: if piece can't move down on a gravity tick, lock immediately. Hmm, immediate lock makes hard rotations near stack frustrating. I'll add lock delay of 450ms that resets on successful move/rotate (with a cap of resets... I'll allow unlimited resets but delay only resets while the piece hasn't moved down — that can cause infinite stalling only by player's own action, acceptable in casual games). Keep it simple: 500ms lock delay, reset on move/rotate, no cap. Fine.
   - DAS/ARR for held left/right: key repeat via keydown events is okay but browsers have inconsistent repeat. I'll implement my own: track held keys, initial delay 170ms, repeat 40ms. This is a craft detail that makes the game feel responsive. Yes, implement a small input handler with a `held` map and per-frame updates in the game loop.
   - Soft drop as held key too: continuous fast gravity.

10. **Game loop**: `requestAnimationFrame` with delta time. State machine updates. Render every frame (or only when dirty — render every frame is fine, includes ghost calculation).

11. **Next preview**: small canvas (4×4 cells). Draw next piece centered.

12. **Pause**: P key to pause — nice extra. I'll add pause overlay. Requirement doesn't ask but it's standard. Keep it — low cost.

13. **Restart**: R key anytime (or when game over). Restart key visible in overlay text.

14. **Scoring pop animation**: when score increases from line clear, briefly scale the score number (CSS class toggle). Also "+300" floating text? I'll do a small floating combo text on canvas at clear location: "TRIPLE +900" etc. Tasteful, brief. Names: SINGLE/DOUBLE/TRIPLE/QUADRA (avoid TETRIS trademark? "QUAD" — I'll use "SINGLE · DOUBLE · TRIPLE · TETRA"). Actually the game is called TETRA so quad clear = "TETRA!". Cute.

15. **Sound**: No external resources — WebAudio is allowed (inline). A tiny blip on move/rotate/lock/clear via oscillators would elevate feel. But sound can be annoying and adds code. I'll add minimal synthesized sounds with a mute toggle (M key)? Hmm, scope. The requirements are already large. I'll add very minimal audio: lock thud, clear chime, using a shared AudioContext created on first user input. Keep it ~25 lines. Actually, let me weigh: the user asked for a complete game; sound is beyond spec and risks bugs. But it's a signature-feel thing. I'll include a compact sound module with toggle (M). Small risk, big feel payoff. Yes, include but keep tiny: `beep(freq, dur, type, vol)`.

16. **Canvas sizing**: Cell size 30px → 300×600 canvas. For crispness on HiDPI, I could scale by devicePixelRatio. I'll do DPR-aware canvas setup: canvas CSS size 300×600, backing store ×dpr, ctx.scale(dpr,dpr). Good craft.

17. **Layout styling**:
   - Page: dark `#0e0f12` background, subtle vignette? Skip vignette. Maybe a very faint dot/noise pattern via repeating-linear-gradient? I'd rather keep flat and clean. A thin top rule / wordmark.
   - Wrapper: flex, gap, centered. Left: canvas. Right sidebar: NEXT preview canvas, stats (SCORE, LINES, LEVEL with big tabular numbers), divider, controls list (keys as styled `<kbd>` chips). 
   - kbd chips: bordered, monospace, small.
   - Colors: text `#d7dae0`, muted `#7a8290`, accents per-piece.
   - Border on canvas: 1px `#2a2d34`, maybe 3px. Sidebar panels with 1px borders, no rounded-heavy — small radius 8px, restrained.
   - No gradient anywhere. Flat colors, bevel on blocks only (that's per-cell highlight rendering, appropriate).

18. **Responsive**: On small screens, stack sidebar horizontally below/above canvas. Use flex-wrap. Also touch controls? Not required; skip to control scope (maybe mention keyboard needed). I'll add a note for keyboard. Could add basic touch buttons... scope creep; skip.

Now write the code carefully.

**Data structures:**

```js
const COLS=10, ROWS=20, HIDDEN=2, TOTAL=ROWS+HIDDEN;
const SHAPES = {
  I: {matrix:[[1,1,1,1]], ... } 
```
Better: define matrices per piece:

```js
const PIECES = [
  { name:'I', color:'#56B6C1', m:[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] },
  { name:'O', color:'#E5C07B', m:[[1,1],[1,1]] },
  { name:'T', color:'#C678DD', m:[[0,1,0],[1,1,1],[0,0,0]] },
  { name:'S', color:'#98C379', m:[[0,1,1],[1,1,0],[0,0,0]] },
  { name:'Z', color:'#E06C75', m:[[1,1,0],[0,1,1],[0,0,0]] },
  { name:'J', color:'#61AFEF', m:[[1,0,0],[1,1,1],[0,0,0]] },
  { name:'L', color:'#D19A66', m:[[0,0,1],[1,1,1],[0,0,0]] },
];
```

7-bag randomizer for fairness — nicer than pure random. Implement shuffle bag.

Piece object: `{type, m, x, y, color}`. Position x,y as top-left of matrix in board coords (including hidden rows; y can be negative? With hidden rows, spawn y=0 with matrices that have empty top row... I set spawn y=0, x = floor((COLS - width)/2). For I piece matrix 4×4 with row1 filled, spawn y=0 puts it in hidden row 1 — fine. For 3×3 pieces with bottom two rows filled (T,S,Z,J,L have filled rows at index 1 (and T index0? T: [[0,1,0],[1,1,1]] filled rows 0 and 1) — T's filled rows are 0 and 1 → at y=0, occupies hidden rows 0,1, invisible initially! Hmm. That means the piece appears "popped" into view after first gravity tick. Standard behavior: piece spawns partially hidden then drops into view — that's fine and actually standard. But with HIDDEN=2 and spawn y=0, a piece occupying rows 0–1 is fully hidden; player sees nothing for one tick. Alternative: spawn at y=HIDDEN-2? Let me instead make matrices have their blocks in the *bottom* rows and spawn y = HIDDEN - height so the bottom row of the piece sits at the top visible row (row index HIDDEN). Let me define all matrices with filled cells at bottom:

- I: [[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,1,1,1]] — height 4, spawn y = 2-4 = -2. Negative y — my board collision must handle y<0 (cells above top are valid/empty). Render only rows ≥ HIDDEN. Hmm negative y with collision check: treat y<0 cells as empty (allowed). That works: `cell empty if py<0`.

Simpler alternative: keep matrices as given (filled rows at top-ish) and spawn y = 0 with hidden rows 0..1; pieces with blocks in rows 0–1 will be partly hidden — but I defined T with blocks in rows 0-1 which are hidden. Let me just normalize: define each matrix so filled rows are at the bottom, and spawn with y such that the lowest filled row of the piece is at board row HIDDEN-1 (bottom hidden row) — then the piece is just above the visible field and immediately drops into view. Or spawn lowest filled row at HIDDEN (first visible row) so it appears immediately. Classic Tetris spawns visible. I'll spawn so that the piece's bottom row aligns at the first visible row... but then game over check "spawn collision" handles top-out.

Let me define matrices bottom-aligned:

- I: rows: [ [0,0,0,0],[0,0,0,0],[0,0,0,0],[1,1,1,1] ], spawn y = HIDDEN-1? bottom filled row index 3 → board row = y+3. If y=0, board row 3 (visible, since visible rows are 2..21). Hmm HIDDEN=2, so y=0 puts I's blocks at board row 3 = second visible row. Fine.
- T: [[0,0,0],[0,1,1,1]... wait 3×3: [[0,0,0],[0,1,0],[1,1,1]] bottom-aligned. y=0 → blocks at rows 1,2 → row1 hidden? row1 is hidden (rows 0,1 hidden). So T's top nub hidden initially, bottom row visible. Good enough — appears immediately.
- O: [[1,1],[1,1]] y=0 → rows 0,1 fully hidden! Bad. Bottom-align O: it's already full 2×2, bottom row at index1 → y=0 → row 1 hidden, row 0... both hidden. So O invisible for first tick. Fix: spawn y = HIDDEN - (height-1)? For O height 2: y = 2-1 = 1 → rows 1,2: bottom row visible. General: spawn y = HIDDEN - 1 - (bottomFilledIndex)? Let me just compute: for each matrix, find the lowest filled row index `li`. Spawn y = HIDDEN - 1 - li + 1 = HIDDEN - li. Then lowest filled row lands at board row HIDDEN (first visible). For O: li=1, y=1 → rows 1,2 → row 2 visible. For I: li=3, y=2-3=-1 → negative. Negative y complicates collision slightly (cells with py<0 are above the board → treat as free unless x out of range). That's fine — standard. And lock: if piece locks with any cell at py<0 → game over (stack reached top). Also spawn collision → game over.

Let me handle collision:

```js
function collides(m, x, y){
  for each cell (r,c) where m[r][c]:
    const bx = x+c, by = y+r;
    if (bx < 0 || bx >= COLS || by >= TOTAL) return true;
    if (by >= 0 && board[by][bx]) return true;
  return false;
}
```
Cells with by<0 are allowed (above board). Good — enables rotation/spawn above top.

Spawn: `piece = { m, x: Math.floor((COLS - m[0].length)/2), y: HIDDEN - lowestFilledRow, ... }` then if collides at spawn → try y-1, y-2? Standard just checks collision; if collide → game over. I'll check: if collides(m, x, y) → game over. But with by<0 allowed, only actual overlap triggers. Good.

Rotation:

```js
function rotate(m, dir){
  const N = m.length;
  const res = Array.from({length:N},()=>Array(N).fill(0)); // note m may be NxN or rectangular; all my matrices are square (I 4x4, O 2x2, others 3x3). Good, keep all square.
  for r,c: dir>0 ? res[c][N-1-r] = m[r][c] : res[N-1-c][r] = m[r][c];
}
```
Ensure all matrices square: I 4×4 ✓, O 2×2 ✓, T/S/Z/J/L 3×3 ✓.

Wall kick offsets: `[[0,0],[-1,0],[1,0],[0,-1],[-2,0],[2,0],[0,-2]]`? For I piece rotating at wall, need ±2 horizontal and vertical. Try list: [0,0],[-1,0],[1,0],[0,-1],[-2,0],[2,0],[0,1]? [0,1] down-kick rarely needed; floor kicks — keep [0,-1] and maybe [-1,-1],[1,-1]. I'll use kicks = [[0,0],[-1,0],[1,0],[0,-1],[-1,-1],[1,-1],[-2,0],[2,0]]. Sufficient for a casual game, no clipping guaranteed since we validate.

**Line clear flow:**
After lock: find full rows → if any: state='clearing', store rows, flashTimer=180ms; after timer, remove rows (splice from board, unshift empty rows), scoring, combo text, spawn next. If none: spawn next immediately.

Board includes hidden rows; full-row detection across all rows (hidden rows can fill → count toward clears and game over condition). Actually if a hidden row fills completely that means stack reached top basically. Detection over all TOTAL rows.

Game over condition: after lock, if any filled cell in rows < HIDDEN... hmm not exactly — piece locking partially above visible field isn't necessarily over; classic rule: game over when spawn is blocked or blocks lock fully within hidden zone. I'll use: after locking, if any cell of the locked piece is at by < HIDDEN... that ends games too aggressively? Standard guideline: game over if the piece locks entirely above the skyline or spawn blocked. I'll go: game over if spawn collides OR locked piece has any cell with by < HIDDEN... Let me think: with HIDDEN=2, if you stack to the very top, pieces will start locking with cells in hidden rows. Using "any cell above visible" triggers when a piece locks 1 cell above skyline — that's reasonable and matches "stack reaches the top". But rotating a T at the very top could lock a nub into hidden row without being game-over-worthy... To be forgiving: game over if the piece locks with its cells such that *no part is visible* (all cells by < HIDDEN) OR spawn blocked. Hmm, but then stack can creep fully to top row and keep playing with garbage. Compromise: game over if locked piece has any cell at by < HIDDEN-? ... Simplest robust: game over when spawn position collides (i.e., next piece can't spawn). Plus visual: if stack reaches visible top row, spawn will almost certainly collide. But there's a case: stack fills top visible row but piece spawns in hidden rows fine, then can't move down → locks immediately at spawn → next spawn likely collides. It self-resolves. I'll use spawn-collision as the game-over rule, plus also end if a locked piece is entirely in hidden rows. That satisfies "stack reaches the top."

Actually simpler and clear: after lock, check `if (board.slice(0,HIDDEN).some(row => row.every... )` no. Keep: game over if new piece collides at spawn. I'll also draw a "danger" indication? Skip.

**Ghost piece:** copy piece, drop until collide, draw outline at that y with piece color at 30% alpha fill + stroke.

**Rendering:**
- `draw()`: clear, background fill `#121318` slightly different from page `#0e0f12`. Grid lines. Locked cells. Ghost. Active piece. Clearing flash rows (white overlay with alpha pulsing). Then overlays handled in DOM.
- `drawCell(ctx, px, py, size, color, alpha)`: base fill, then lighter top edge: fillRect top strip with rgba(255,255,255,0.18)? Classic bevel: 
  - fill base color
  - top+left 2px lighter: rgba(255,255,255,.25)
  - bottom+right 2px darker: rgba(0,0,0,.35)
  - inner subtle: skip
  Plus 1px gap between cells (draw at px+1,py+1,size-2) — gives clean grid read.

- Flash for clearing rows: fill row rect white with alpha oscillating.

**HUD DOM:**
```html
<div class="stage">
  <div class="board-wrap">
    <canvas id="board"></canvas>
    <div class="overlay" id="overlay"> ... </div>
  </div>
  <aside class="panel">
    <h1>TETRA</h1>
    <div class="next-label">NEXT</div>
    <canvas id="next"></canvas>
    <div class="stats"> score/lines/level blocks </div>
    <div class="keys"> kbd list </div>
  </aside>
</div>
```

Overlay states: ready (title + "PRESS ANY KEY"), paused, game over (score + "PRESS R TO RESTART"). I'll build overlay content via JS with innerHTML per state.

**Input handling:**
- keydown/keyup listeners. preventDefault for arrows/space.
- Map: ArrowLeft/Right → move with DAS; ArrowUp → rotate (on keydown, and prevent repeat — ignore e.repeat); ArrowDown → softDrop flag; Space → hardDrop (on keydown, ignore repeat); P → pause; R → restart; M → mute.
- In ready state, any key starts.
- Own repeat: track `keys = {left: {held, timer}}`. In update(dt): if left held: timer -= dt; on initial press move immediately, then when timer<=0 move and timer=ARR. Implement: on keydown (not repeat) → move once, set das=170. In update: if held and das elapsed... Manage with two values: `das` countdown then `arr` countdown. Simple implementation:

```js
const move = {dir:0, das:0, arr:0};
onKeyDown left: move.dir=-1; movePiece(-1); move.das=DAS; move.arr=0; move.waiting=true;
update: if move.dir: if move.waiting { move.das-=dt; if das<=0 {waiting=false; move.arr=ARR; step()} } else { move.arr-=dt; if <=0 {arr=ARR; step()} }
```
Handle both directions: last pressed wins — store dir per key and use most recent. Keep simple: `heldDir` variable; on keydown set & immediate move; on keyup if other key still held switch. Edge cases minor. I'll track `left`/`right` booleans and `activeDir` (last pressed).

Soft drop: `softDrop` boolean → gravity interval divided by 12, and each soft-drop cell grants +1. Implementation: gravity accumulator; while accumulating with soft drop, count cells moved down due to soft-drop speed and add points. Simpler: when soft drop active, on each successful down-step add 1 point. But gravity tick moves one row per tick regardless; with interval /12 it ticks 12× more often. Points: add 1 per tick while softDrop and piece moved down. Fine.

Hard drop: move down until collision, +2 per cell, lock immediately.

**Lock delay:** when gravity tick finds can't move down: if `lockTimer` not started, start it (450ms). If piece moves/rotates successfully and can move down again... standard: reset lockTimer on successful shift/rotate only if piece can now fall? Simplify: on successful move/rotate, if piece can move down, clear lockTimer. If can't move down, keep timer (don't reset infinitely — or reset with cap). I'll do: successful move/rotate while grounded resets lockTimer (uncapped — casual). During grounded state, update: lockTimer += dt; if >= LOCK_DELAY → lock. Meanwhile gravity ticks do nothing while grounded. Actually simpler unified: in update, try gravity accumulation; if piece grounded (can't move down), accumulate lockTimer instead. Move/rotate success resets lockTimer to 0. Hard drop locks instantly. Good.

Wait — resets: if player rotates repeatedly, lockTimer resets forever, game stalls — but it's the player's own piece; classic games cap resets. I'll cap at like 15 resets? Meh — casual, skip cap. Fine.

**Clearing animation:** rows stored; during 'clearing' state, timer counts down 260ms; render flashes those rows (alpha = timer-based, maybe strobing: alpha = 0.5+0.5*sin(t*...)). On finish: remove rows, apply score, floating text, spawn next. During clearing, input for movement disabled (piece is null anyway — set piece=null during clearing).

**Floating text:** array of {text, x, y, t} drawn on canvas rising and fading over 900ms, bold monospace, in piece color or white. Triggered on clears: "DOUBLE +600" etc, and on level up "LEVEL 3". Also on tetra: "TETRA +800".

**Sound (compact):**

```js
let actx=null, muted=false;
function sfx(freq, dur=0.06, type='square', vol=0.12, slide=0){
  if(muted) return;
  actx = actx || new (window.AudioContext||window.webkitAudioContext)();
  const o=actx.createOscillator(), g=actx.createGain();
  o.type=type; o.frequency.value=freq;
  if(slide) o.frequency.exponentialRampToValueAtTime(slide, actx.currentTime+dur);
  g.gain.value=vol; g.gain.exponentialRampToValueAtTime(0.0001, actx.currentTime+dur);
  o.connect(g).connect(actx.destination);
  o.start(); o.stop(actx.currentTime+dur);
}
```
Sounds: move: sfx(200,'square',0.03) low tick; rotate: 320; lock: 140 with slide down; clear: two notes arpeggio (setTimeout or scheduled); hard drop: noise-ish low; game over: descending. Keep small. Resume context on first gesture (created on keydown anyway).

Mute toggle M — show small indicator in panel. I'll include a "SOUND: ON/OFF" line in keys list that updates.

**Bag randomizer:**
```js
let bag=[];
function nextType(){ if(!bag.length){bag=shuffle([0..6])} return bag.pop(); }
```
Queue: keep `next` single piece (preview shows 1). Could do queue of 1. Fine.

**Level speed:** `gravityMs = Math.max(50, Math.round(750 * Math.pow(0.82, level-1)))`. Level 1:750, 2:615, 3:504, 4:413, 5:339, 6:278, 7:228, 8:187, 9:153, 10:126, 11:104, 12:85, 13:70, 14+:70/50. Reasonable.

Level = Math.floor(lines/10)+1. On level change: floating "LEVEL n", sfx.

**DPR canvas setup:**

```js
function setupCanvas(cv, w, h){
  const dpr = window.devicePixelRatio||1;
  cv.width = w*dpr; cv.height = h*dpr;
  cv.style.width = w+'px'; cv.style.height = h+'px';
  const ctx = cv.getContext('2d');
  ctx.scale(dpr,dpr); // careful: scale persists; do it once
  return ctx;
}
```
But I re-scale each frame? No — set transform each draw: `ctx.setTransform(dpr,0,0,dpr,0,0)` at start of draw. Safer.

CELL = 30 → board 300×600. Preview: 4 cells × 22px = 88, plus padding → canvas 96×96? Compute piece bbox and center it.

Preview drawing: given next piece matrix, trim empty rows/cols to get bbox, center within preview canvas.

**Page CSS:**

```css
:root { colors }
* { box-sizing }
body { background:#0d0f13; color:#d8dbe2; font-family: mono stack; min-height:100vh; display:flex; align-items:center; justify-content:center; }
```
Background: I could add an extremely subtle radial vignette — no, I'll keep flat but add faint horizontal scanline? Keep flat, clean. Maybe subtle CSS grid texture on body via repeating-linear-gradient at 2% opacity — skip, flat is cleaner.

Stage layout: `display:flex; gap:28px; align-items:stretch; padding:24px;` Panel width ~200px. Title "TETRA" letter-spaced, with the four-cell logo drawn? Cute idea: render a tiny T tetromino via CSS grid of 4 divs next to the title — small authored touch. Or inline SVG. I'll do a small 4-square mark using CSS grid (2×3) in the accent color. Simple: a `.mark` div with grid-template and 4 cells. Actually inline 4 spans. Let me do: logo = small canvas? Overkill. CSS grid 3 cols: cells at positions forming T. Fine, tiny detail:

```html
<h1><span class="mark"><i></i><i></i><i></i><i></i></span>TETRA</h1>
```
`.mark{display:grid;grid-template-columns:repeat(3,9px);grid-template-rows:repeat(2,9px);gap:2px}` with i cells colored and placed: T shape = top row all 3, bottom middle. Use grid-area placement on 4 <i>? T needs 4 cells: top:3 cells + bottom middle. 4 <i>: first spans columns 1/4 in row1? grid-column:1/4 for one i (that's one cell spanning 3), then middle bottom. Wait that's the T: row1: one i spanning cols 1-3; row2: one i at col 2. That's only 2 elements. OK: `.mark i:first-child{grid-column:1/4; background:accent}` `.mark i:nth-child(2){grid-column:2; background:accent}`. Two elements. Fine.

Stats: three blocks with label (10px uppercase letterspaced muted) and value (22px tabular). Score pop animation: `.pop { animation: pop .18s }` transform scale — applied by re-adding class.

Keys list: rows like `[←] [→] Move` with kbd chips. kbd: `border:1px solid #2e323b; border-bottom-width:2px; border-radius:4px; padding:1px 6px; font-size:11px; background:#181b21`.

Overlay: absolutely positioned over board, `backdrop-filter: blur(2px)`; background rgba(13,15,19,.72); centered text. Hidden when playing.

Game over: big "GAME OVER" in the rose color, final score, "PRESS R TO RESTART".

Ready: title mark, "PRESS ANY KEY TO START" pulsing (CSS animation opacity).

Paused: "PAUSED — P TO RESUME".

Also top of board maybe show level-up flash — floating text handles it.

**Edge: prevent arrow key scrolling** — e.preventDefault() for handled keys.

**Restart (R):** resets board, score, lines, level, bag, state='playing', spawn. From any state.

**Pause (P):** toggles between playing/paused. Paused overlay. Also auto-pause on blur? Nice: window blur → pause if playing. Add it.

**Timing details in update(dt):**

```js
function update(dt){
  if(state!=='playing') { if(state==='clearing'){ clearTimer-=dt; if(<=0) finishClear(); } handle DAS? no } 
  ...
}
```
During clearing, ignore movement (piece null). DAS timers reset on lock.

Also floating texts update during any state (run in all states? update in playing+clearing).

**Rendering order per frame:**
1. setTransform(dpr)
2. bg fill
3. grid lines (vertical/horizontal, rgba(255,255,255,0.045))
4. locked cells (skip if clearing rows? draw all; flash overlay on top)
5. clearing rows: draw white overlay alpha computed, and maybe fade those rows' cells: draw cells then overlay white with alpha; near end, alpha high. Also make them appear to "burn": alpha = 0.4 + 0.4*sin? I'll do: progress p = 1 - clearTimer/CLEAR_MS; flash alpha = p<0.5 ? 0.85 : (0.85*(1-(p-0.5)*2))? Keep simple: alpha oscillates: 0.3+0.6*Math.abs(Math.sin(p*Math.PI*3)). Fine.
6. ghost (only when piece exists & state playing/paused-under-overlay... in paused we still render behind overlay — fine, or skip rendering board while paused to prevent "planning"? Classic games hide board when paused. Nice touch: when paused, don't draw pieces (draw empty board). I'll do that — draw grid only. Authored detail.)
7. active piece
8. floating texts
9. top hidden rows: not rendered (render offset: visible row r maps to py=(r-HIDDEN)*CELL).

Wait — rows 0,1 hidden; only draw rows HIDDEN..TOTAL-1. But active piece may have cells at by<HIDDEN — don't draw those (clip). When drawing piece, skip cells with by<HIDDEN. Also, maybe draw a subtle "top edge" line where the visible field starts.

Also spawn piece at y such that bottom row at HIDDEN... earlier computed y = HIDDEN - lowestIndex puts lowest filled row at board row HIDDEN (first visible). For I: li=3 → y=-1; its blocks at row 2 (first visible). Good. For T (bottom-aligned matrix [[0,0,0],[0,1,0],[1,1,1]], li=2) → y=0, blocks rows 1,2 → top nub hidden row 1, bottom visible. OK.

Hmm wait, I said T matrix bottom-aligned: rows [empty],[0,1,0],[1,1,1]. li = 2. Good.

Let me finalize matrices (bottom-aligned, square):

```js
I: [[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,1,1,1]]  li=3
O: [[1,1],[1,1]] li=1
T: [[0,0,0],[0,1,0],[1,1,1]] li=2
S: [[0,0,0],[1,1,0],[0,1,1]] li=2
Z: [[0,0,0],[0,1,1],[1,1,0]] li=2
J: [[0,0,0],[1,0,0],[1,1,1]] li=2
L: [[0,0,0],[0,0,1],[1,1,1]] li=2
```

Spawn x: floor((10 - N)/2): I→3, O→4, others→3. Good, centered-ish (T at cols 3-5, nub at col 4 — centered ✓).

Spawn y: HIDDEN - li → I: -1, O: 1, others: 0. O at y=1: rows 1,2 → top row hidden, bottom visible ✓. I at y=-1: rows -1..2, blocks at row 2 ✓.

Collision with by<0 → free. But wait: `by >= TOTAL` check handles bottom. For by<0 we skip board check. But then a piece could rotate to by<0 and lock there — lock writes to board only if by>=0; cells with by<0 discarded → data loss! Must guard: when locking, if any cell by<0 → game over (can't place). That's the top-out rule. Good: on lock, write cells with by>=0; if any cell by<0 → gameOver.

Also spawn collision check: if collides at spawn → game over. With y=-1 for I, cells at by=2 visible — collision only if row 2 blocked there. If game over by spawn-block, show overlay.

**Scoring pop:** on line clear, add score with animation class on score value.

**finishClear:**
```js
rows removed: board = board.filter((row,i)=>!clearRows.includes(i)); while(board.length<TOTAL) board.unshift(empty)
```
Careful: filter keeps order; unshift empty rows on top ✓.

Score: `[0,100,300,500,800][n] * level` (level before potential level-up? Standard uses level at clear time; fine). Lines += n; recompute level; if level increased → floating "LEVEL n" + sfx. Floating text at cleared rows position: y = min row pixel.

**Hard drop:** while !collides(m,x,y+1) y++; cells = distance; score += 2*cells; lock(). Also small landing sfx + maybe a 1-frame drop "thud" — skip shake (or add tiny shake: boardWrap CSS class 'shake' 100ms transform translateY(2px). Cheap and juicy — I'll add a subtle one via canvas translate? DOM class simpler: `.drop { animation: thud .12s }` keyframes translateY(3px). I'll add.)

**Ghost:** compute gy: from piece.y, while !collides(m,x,gy+1) gy++. Draw at gy with globalAlpha 0.22 fill + 1px stroke alpha 0.5. If gy === piece.y skip? Still fine.

Also draw ghost only in playing state.

**Panel next preview:** draw next piece centered: compute bbox of matrix; cell size 20; center in 96×96 (with dpr). Also color it.

Also show a tiny "SOUND M" toggling text and maybe "PAUSE P". In keys list.

**Writing the actual code now.** Let me be careful with details.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TETRA — falling blocks</title>
<style> ... </style>
</head>
<body>
<div class="stage">
  <div class="board-wrap" id="boardWrap">
    <canvas id="board"></canvas>
    <div class="overlay" id="overlay"></div>
  </div>
  <aside class="panel">
    <h1><span class="mark"><i></i><i></i></span>TETRA</h1>
    <p class="sub">A falling-blocks puzzle</p>
    <section class="box">
      <h2>Next</h2>
      <canvas id="next"></canvas>
    </section>
    <section class="stats">
      <div class="stat"><span class="label">Score</span><span class="value" id="score">0</span></div>
      <div class="stat"><span class="label">Lines</span><span class="value" id="lines">0</span></div>
      <div class="stat"><span class="label">Level</span><span class="value" id="level">1</span></div>
    </section>
    <section class="keys">
      <h2>Keys</h2>
      <ul>
        <li><kbd>←</kbd><kbd>→</kbd><span>Move</span></li>
        <li><kbd>↑</kbd><span>Rotate</span></li>
        <li><kbd>↓</kbd><span>Soft drop</span></li>
        <li><kbd>Space</kbd><span>Hard drop</span></li>
        <li><kbd>P</kbd><span>Pause</span></li>
        <li><kbd>M</kbd><span>Sound <em id="soundState">on</em></span></li>
        <li><kbd>R</kbd><span>Restart</span></li>
      </ul>
    </section>
  </aside>
</div>
<script> ... </script>
</body>
</html>
```

CSS details — I want a genuinely clean look:

```css
:root{
  --bg:#0d0f13; --panel:#14161c; --line:#262a33; --text:#dfe3ea; --muted:#8a92a3;
  --accent:#56b6c1;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
}
.stage{display:flex; gap:24px; align-items:stretch}
.board-wrap{position:relative; border:1px solid var(--line); background:#101218; padding:8px; border-radius:10px}
```
Hmm — padding around canvas inside wrap, border-radius 10. Canvas itself has background drawn in canvas. Add subtle outer: `box-shadow:0 0 0 1px #000`? skip shadows except maybe soft ambient: `box-shadow:0 20px 50px rgba(0,0,0,.5)` — a soft drop shadow is fine (not a glow, just depth). Keep subtle.

Panel: width 208px; display:flex; column; gap.

h1: font-size 20px, letter-spacing .35em (trailing space issue — use padding trick, fine), color text; mark inline-flex.

.sub: 11px muted.

.box: border 1px line, radius 8, padding 10, background panel. h2: 10px uppercase letter-spacing .2em muted, margin-bottom 8.

#next canvas display:block.

.stats: display:grid; grid-template-columns:repeat(3,1fr); gap:8px. Each .stat: border-top? Use same box style smaller: border 1px, radius 8, padding 8 10. label 9px uppercase muted ls .15em; value 20px, font-variant-numeric:tabular-nums.

Score value pop: `#score.pop{animation:pop .25s ease}` `@keyframes pop{40%{transform:scale(1.18); color:var(--accent)}}` — transform on inline span needs display:block. Set .value{display:block}.

.keys ul{list-style:none; display:flex; flex-direction:column; gap:7px; font-size:11px; color:var(--muted)} li{display:flex; align-items:center; gap:6px} span{margin-left:auto? } Hmm layout: kbd then label; align label left after kbds, fine. `li span{margin-left:2px}` Actually put kbds first with fixed-ish look, then span. To align labels, give kbds container min-width: `<span class="kk">` wrapping kbds min-width 74px. Let me: `li{display:flex;gap:6px;align-items:center}` `.kk{display:flex;gap:4px;min-width:78px}` span text muted.

kbd: `background:#191c24; border:1px solid #2c313c; border-bottom-width:2px; border-radius:4px; padding:1px 5px; font-size:10px; color:var(--text); font-family:inherit`.

em#soundState: normal style, color accent.

Overlay: `position:absolute; inset:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:rgba(11,13,17,.82); border-radius:6px; backdrop-filter:blur(2px);` `.overlay.hidden{display:none}`.

Overlay content classes: `.ov-title` 22px ls .3em; `.ov-big` 15px accent with pulse animation for "press any key": `@keyframes blink{50%{opacity:.25}}`. `.ov-score` etc.

Shake animation on boardWrap: `@keyframes thud{30%{transform:translateY(3px)}}` `.thud{animation:thud .13s ease-out}` remove class after.

Responsive: `@media (max-width:560px){ .stage{flex-direction:column-reverse; align-items:center} .panel{width:340px; max-width:100%; display:grid; grid-template-columns:1fr 1fr; ...} }` — might get messy; simpler: column layout, panel becomes row-wrapped. I'll do: panel width auto, flex-direction:row wrap? Keep it modest: media query stacks stage vertically and lets panel go grid: `grid-template-columns:1fr 1fr; gap:12px` with h1 spanning 2. Fine, short CSS.

Also `canvas{display:block}`.

**JS — full write-up:**

```js
(()=>{ 'use strict';
// --- constants
const COLS=10, ROWS=20, HIDDEN=2, TOTAL=22, CELL=30;
const BOARD_W=COLS*CELL, BOARD_H=ROWS*CELL;
const DAS=160, ARR=38, LOCK_DELAY=480, CLEAR_MS=280, SOFT_FACTOR=14;

const PIECES=[
 {t:'I',c:'#56b6c1',m:[[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,1,1,1]]},
 {t:'O',c:'#e5c07b',m:[[1,1],[1,1]]},
 {t:'T',c:'#c678dd',m:[[0,0,0],[0,1,0],[1,1,1]]},
 {t:'S',c:'#98c379',m:[[0,0,0],[1,1,0],[0,1,1]]},
 {t:'Z',c:'#e06c75',m:[[0,0,0],[0,1,1],[1,1,0]]},
 {t:'J',c:'#61afef',m:[[0,0,0],[1,0,0],[1,1,1]]},
 {t:'L',c:'#d19a66',m:[[0,0,0],[0,0,1],[1,1,1]]},
];
const KICKS=[[0,0],[-1,0],[1,0],[0,-1],[-1,-1],[1,-1],[-2,0],[2,0]];
const CLEAR_SCORE=[0,100,300,500,800];
const CLEAR_NAME=[,'SINGLE','DOUBLE','TRIPLE','TETRA'];
```

Board: `let board;` = array of TOTAL rows each COLS-length (values null or color string; store color, or store piece index → color lookup. Store color string directly, simpler).

State vars: `state` ('ready','playing','clearing','paused','over'), `piece`, `nextPiece`(type idx), `bag`, `score,lines,level`, `gravT`, `lockT`, `clearRows`, `clearT`, floats[], sound muted.

Helper shuffle:
```js
const shuffle=a=>{for(let i=a.length-1;i>0;i--){const j=Math.random()*(i+1)|0;[a[i],a[j]]=[a[j],a[i]]}return a};
let bag=[];
const nextIndex=()=>{ if(!bag.length) bag=shuffle([0,1,2,3,4,5,6]); return bag.pop(); };
```

lowestRow(m): for r=m.length-1..0 if any cell return r.

makePiece(idx): p = PIECES[idx]; y = HIDDEN - lowestRow(p.m); x = (COLS-p.m.length>>1); return {i:idx, m:p.m, c:p.c, x, y}.

Wait `COLS - m.length >> 1` precedence: subtraction before shift — `(10-4)>>1=3` ✓ but write with parens for clarity.

collides(m,x,y):
```js
for(let r=0;r<m.length;r++)for(let c=0;c<m.length;c++){
  if(!m[r][c])continue;
  const bx=x+c, by=y+r;
  if(bx<0||bx>=COLS||by>=TOTAL)return true;
  if(by>=0&&board[by][bx])return true;
}
return false;
```
(m square so m.length both dims.)

move(dx): if state playing & piece: if !collides(m,x+dx,y){x+=dx; sfx? small tick; if grounded reset lockT? per earlier: reset lockT on successful move/rotate.} return success.

rotate(dir): rm = rotated; for each kick [kx,ky]: if !collides(rm, x+kx, y+ky){apply; return true}. Also small sfx.

grounded(): collides(m,x,y+1).

Gravity & lock in update:
```js
function update(dt){
  updateFloats(dt);
  if(state==='clearing'){ clearT-=dt; if(clearT<=0) finishClear(); return; }
  if(state!=='playing'){ return; }
  // DAS
  handleDAS(dt);
  if(!piece) return;
  if(grounded()){
    gravT=0;
    lockT+=dt;
    if(lockT>=LOCK_DELAY) lockPiece();
    return;
  }
  lockT=0;
  const interval = soft? gravityMs()/SOFT_FACTOR : gravityMs();
  gravT+=dt;
  while(gravT>=interval){
    gravT-=interval;
    if(!collides(m,x,y+1)){ y++; if(soft){score++; updateScoreUI(false);} }
    else break;
  }
}
```
Hmm updateScoreUI(false) without pop. Also soft add shouldn't pop. fine.

handleDAS:
```js
let move={dir:0, das:0, arr:0, charging:true};
function pressDir(d){ move.dir=d; if(piece&&!collides(piece.m,piece.x+d,piece.y)){piece.x+=d; tick();} move.das=DAS; move.charging=true; }
function handleDAS(dt){
  if(!move.dir||!piece)return;
  if(move.charging){ move.das-=dt; if(move.das<=0){move.charging=false; move.arr=ARR; doArr();} }
  else { move.arr-=dt; if(move.arr<=0){move.arr=ARR; doArr();} }
}
function doArr(){ if(piece&&!collides(piece.m,piece.x+move.dir,piece.y)){piece.x+=move.dir; } }
```
tick(): sound for move? A subtle tick each move might be too much; I'll only sound on rotate & lock & clear. Actually small click on move is satisfying at low volume — include, vol 0.05, freq 160, dur .03. Hmm, with DAS repeat at 38ms it's a machine-gun. Keep move silent or very quiet. I'll make it quiet tick. OK.

On keyup for direction: if released dir == move.dir: check if opposite key still held → pressDir(other) else move.dir=0. Track keys held: `held={left:false,right:false}`.

lockPiece():
```js
function lockPiece(){
  let over=false;
  for r,c cells: by=y+r; if(by<0){over=true;continue;} board[by][bx]=piece.c;
  if(over){ gameOver(); return; }
  sfx thud;
  // find full rows
  const rows=[];
  for(let r=0;r<TOTAL;r++) if(board[r].every(v=>v)) rows.push(r);
  if(rows.length){ state='clearing'; clearRows=rows; clearT=CLEAR_MS; }
  else spawn();
  piece=null;
}
```
Wait — if clearing, piece=null and spawn after finishClear. If not clearing, spawn immediately. Set piece=null before spawn (spawn assigns piece). Careful order: set piece=null first then spawn or set clearing.

Also game-over check: also if rows cleared but over... over already returned.

finishClear():
```js
const n=clearRows.length;
board=board.filter((_,r)=>!clearRows.includes(r));
while(board.length<TOTAL) board.unshift(Array(COLS).fill(null));
const gained=CLEAR_SCORE[n]*level;
if(gained){ score+=gained; scorePop(); }
lines+=n;
const newLevel=Math.floor(lines/10)+1;
// float text at position of highest cleared row
const py=(Math.min(...clearRows)-HIDDEN)*CELL;
addFloat(CLEAR_NAME[n]+'  +'+gained, py);
if(newLevel>level){ level=newLevel; addFloat('LEVEL '+level, py-40? ...); sfx level; }
updateUI();
state='playing';
spawn();
```
Float for level overlapping clear float — offset y. I'll pass y offsets.

Actually floats store canvas coords; clearRows are board rows (0..21). min row could be hidden row (r<HIDDEN) → negative py; clamp to small positive. Fine, minor.

spawn():
```js
piece=makePiece(nextIdx); nextIdx=nextIndex(); drawNext();
gravT=0; lockT=0;
if(collides(piece.m,piece.x,piece.y)){ // try nudging up? no: game over
  // place piece for visuals then over
  gameOver();
}
```
Hmm if spawn collides, classic shows the overlapping piece then game over. I'll set state='over' and draw piece anyway (draw allows overlap; visually shows the collision). Fine.

gameOver(): state='over'; showOverlay(game over w/ score); sfx descending; also update best score? Could track localStorage best — nice touch, small: `best` displayed? Requirement doesn't ask; skip to stay tight... Actually a small "BEST" adds replay value and it's 5 lines with localStorage. Hmm — self-imposed scope. I'll skip; keep to spec + polish already added.

hardDrop():
```js
if(state!=='playing'||!piece)return;
let d=0; while(!collides(m,x,y+1)){y++;d++;}
score+=d*2; scorePop? no—pop only on clears; updateUI();
thud animation on wrap; lockPiece();
```

updateUI(pop): score/lines/level text; if pop add class.

**Rendering:**

```js
function draw(){
  ctx.setTransform(dpr,0,0,dpr,0,0);
  ctx.clearRect... fill bg '#101218';
  // grid
  ctx.strokeStyle='rgba(255,255,255,.05)'; ctx.lineWidth=1;
  path vertical lines x=1..9 at .5 offsets, horizontal y=1..19;
  stroke once.
  // top skyline separator subtle: line under row HIDDEN? The canvas shows only visible rows; no separator needed.
  const paused = state==='paused';
  if(!paused){
    // locked
    for(r=HIDDEN..TOTAL-1)for(c) if(board[r][c]) cell(ctx, c*CELL,(r-HIDDEN)*CELL, CELL, color);
    // clearing flash
    if(state==='clearing'){ p=1-clearT/CLEAR_MS; alpha=(0.25+0.65*Math.abs(Math.sin(p*Math.PI*4))); for r of clearRows if r>=HIDDEN: ctx.fillStyle=`rgba(255,255,255,${alpha})`; fillRect row; }
    // ghost + piece
    if(piece&&state==='playing'|| (piece&&state==='over')){... draw piece; ghost only when playing}
  }
  // floats
  for f: draw text rising.
}
```
Ghost when state playing & piece: gy computed; if gy>piece.y draw ghost cells with alpha fill 0.18 + stroke rgba(color,0.4). To stroke with piece color: use helper hexToRgba? Simpler: draw fill with globalAlpha=0.18 color, then strokeStyle same color globalAlpha .5 lineWidth 1 strokeRect inset .5. Yes use globalAlpha.

cell(ctx,x,y,s,color):
```js
ctx.fillStyle=color; ctx.fillRect(x+1,y+1,s-2,s-2);
ctx.fillStyle='rgba(255,255,255,.22)';
ctx.fillRect(x+1,y+1,s-2,3); // top
ctx.fillRect(x+1,y+1,3,s-2); // left
ctx.fillStyle='rgba(0,0,0,.30)';
ctx.fillRect(x+1,y+(s-4),s-2,3); // bottom
ctx.fillRect(x+(s-4),y+1,3,s-2); // right
```
Wait bottom-right overlapping corners: bottom strip covers full width incl right; ok visually. Small inner highlight? Enough. Also a 1px darker outline? The 1px gaps from +1 offset give grid read on the board bg.

Hmm the block edges: at cell size 30, 3px bevels good.

Floats: {text,x,y,vy:-0.045,life:900,t}. Draw: font '700 15px ...mono', textAlign center, alpha = 1 - t/life eased; y -= vy*dt. Color '#fff' or accent. Also slight y offset easing: use y0 - (t/life)*26.

drawNext(): clear 96×96 (setTransform dpr); get nextIdx piece matrix; bbox rows/cols; cell size 20; draw centered at (96-w*20)/2. Use same cell renderer with size 20 — bevels at 20px still fine (3px bevel maybe 2px; make cell() take bevel b = s>=30?3:2).

Preview canvas 4*22=88? Let's do size 88, cell 20, max piece width 4*20=80 ≤88 ✓.

**Overlay content builder:**

```js
function showOverlay(html){ overlay.innerHTML=html; overlay.classList.remove('hidden'); }
function hideOverlay(){ overlay.classList.add('hidden'); }
```
Ready: 
```html
<div class="ov-mark"></div>? skip; 
<div class="ov-title">TETRA</div>
<div class="ov-sub">press any key</div>
```
Blinking via CSS class 'blink'.

Paused: "PAUSED" + "P to resume".

Over:
```html
<div class="ov-title danger">GAME OVER</div>
<div class="ov-lines">SCORE 12 400 · LINES 23</div>
<div class="ov-sub blink">press R to restart</div>
```
Format score with thin space: `score.toLocaleString('en-US')`? Use own formatting with narrow spaces: toLocaleString fine.

**Keyboard handler:**

```js
const KEYMAP = ...
document.addEventListener('keydown', e=>{
  const k=e.code;
  if(['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space'].includes(k)) e.preventDefault();
  initAudio(); // create/resume ctx on gesture
  if(state==='ready'){ start(); return; }
  if(k==='KeyR'){ reset(); return; }
  if(k==='KeyM'){ toggleMute(); return; }
  if(state==='over'){ return; } // only R/M handled
  if(k==='KeyP'){ togglePause(); return; }
  if(state!=='playing') return;
  if(e.repeat) return;
  switch(k){
    case 'ArrowLeft': held.left=true; pressDir(-1); break;
    case 'ArrowRight': held.right=true; pressDir(1); break;
    case 'ArrowUp': rotatePiece(1); break;
    case 'ArrowDown': soft=true; break;   // also immediate? gravity handles quickly; but first soft step should be instant-ish: set gravT=interval? Just set soft=true; also give immediate nudge: try down once with +1 score. I'll do: if move down success score+=1.
    case 'Space': hardDrop(); break;
  }
});
keyup: left/right clear held & recompute move dir; ArrowDown soft=false.
```
pressDir already moves once immediately.

Wait: in ready state "any key" — but ignore M? Any key including arrows starts; also should the same keypress not cause an action — fine.

Also blur auto-pause: `window.addEventListener('blur', ()=>{ if(state==='playing') togglePause(true) })`.

**Audio init:** AudioContext must be created/resumed on user gesture; keydown counts. `initAudio(){ if(!actx){ try{actx=new (AudioContext||webkit)}catch{} } if(actx&&actx.state==='suspended') actx.resume(); }`

sfx uses actx; guard if muted or !actx (ready-state before any key... first key creates it, then start() might play a sound — order: initAudio called first in handler ✓).

Sounds:
- move tick: sfx(180, .025, 'square', .04)
- rotate: sfx(300, .05, 'square', .06, 420) slight up slide
- lock: sfx(120, .09, 'triangle', .18, 60)
- hard drop: sfx(90,.12,'triangle',.22,40)
- clear: arpeggio [440, 554, 659] delayed 0/60/120ms via setTimeout — or schedule with start times. Use o.start(actx.currentTime + i*0.06). Write a note(freq,when,dur,vol) helper. clear: notes 523,659,784 (C E G) + for tetra add 1046. 
- levelup: two notes 660, 880.
- game over: descending 400→150 over .6s, sawtooth low vol.

Simplify: one helper `tone(f, dur, type, vol, delay=0, slideTo=0)` scheduling at currentTime+delay.

**Main loop:**

```js
let last=performance.now();
function frame(now){
  const dt=Math.min(50, now-last); last=now;
  update(dt); draw();
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
```

**reset/start:**

```js
function reset(){
  board=Array.from({length:TOTAL},()=>Array(COLS).fill(null));
  score=0;lines=0;level=1;bag=[];soft=false;floats=[];move={dir:0,...};
  nextIdx=nextIndex();
  spawn();
  state='playing';
  hideOverlay(); updateUI();
}
```
Ready state initial: board empty, draw board with overlay "press any key". Start() = reset() basically. initial: board created, state='ready', showOverlay(ready). start(){ reset(); sfx little }.

Restart from playing also fine (R).

togglePause: if playing→'paused' show overlay; if paused→'playing' hide, reset last timestamp? dt clamp 50 handles jump. But DAS charge continues? fine.

Edge: when paused and R pressed → reset works (handled before pause check ✓ since KeyR checked earlier). M also ✓.

**drawNext** needs nextIdx — spawn consumes nextIdx and draws preview. Order in reset: nextIdx=nextIndex(); spawn() uses nextIdx, then nextIdx=nextIndex(); drawNext(). ✓

**One more render consideration:** when state==='over', keep drawing board + the colliding piece (piece exists? In gameOver from spawn-collision, piece assigned — yes I set piece then call gameOver. From lock-with-cell-above (over=true): cells above discarded; piece set to null already? In lockPiece I set piece=null after. Let me re-check lockPiece: writes cells, if over → gameOver() and return (piece not nulled — piece still references old piece; drawing shows it at top — ok, slight overlap visual, fine). Actually if over, some cells weren't written (by<0) so stack looks one short — acceptable, game over anyway.

In 'over' state draw(): draw locked cells + piece if exists; skip ghost. ✓

**Score formatting:** `fmt=n=>n.toLocaleString('en-US')`.

**Score pop:** 
```js
function bump(){ const el=scoreEl; el.classList.remove('pop'); void el.offsetWidth; el.classList.add('pop'); }
```

**updateUI:** sets textContent for score,lines,level.

**Floats drawing:**
```js
function addFloat(text,y,color){ floats.push({text, y, t:0, life:950}); }
update: f.t+=dt; remove when t>life.
draw: p=f.t/f.life; a=p<0.15?p/0.15:1-(p-0.15)/0.85; yy=f.y - 24*easeOut(p)? simple: f.y0 - 26*p; store y0. font 'bold 14px'; fillStyle white with alpha; textAlign center; x=BOARD_W/2.
```

**Level speed function:** `const gravityMs=()=>Math.max(45, Math.round(750*Math.pow(0.82, level-1)));`

**Check clearing + hidden rows visual:** clearRows may include hidden rows; drawing flash only for r>=HIDDEN ✓.

**Ghost drawn only if gy>piece.y** else piece itself is grounded — skip ghost (it'd overlap). Just draw ghost regardless; overlapping same cells looks like darker piece — skip if equal.

**Board grid alignment:** grid lines drawn at cell boundaries: for i in 1..COLS-1 line x=i*CELL+0.5? With dpr scaling, 0.5 offsets for crispness may blur at dpr>1; acceptable. Use lineWidth 1 and coordinates i*CELL, fine.

Let me also draw a subtle column highlight under active piece? Extra flourish — "drop guide" faint vertical band. Could be nice but adds noise; ghost suffices. Skip.

**Panels widths:** board 300 + padding 8*2 + border = ~320. Panel 210. Total ~560 + gap. Fine.

Now, small screens: media query at 600px: stage column; panel grid 2 cols:
```css
@media (max-width:600px){
  .stage{flex-direction:column; align-items:center}
  .panel{width:320px; max-width:92vw; display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .panel h1, .panel .sub{grid-column:1/-1}
  .keys{grid-column:1/-1}
}
```
Panel needs `display:flex;flex-direction:column;gap:...` default; override to grid in media query. h1 margin adjustments.

Also `.stats` inside panel is a grid of 3 — on narrow keep 3 across? values small; ok.

Now write the final code fully and carefully. Also double-check rotation for O piece (2×2) — rotation is identity, fine.

Check I-piece rotation kicks: I at x=0 rotating from vertical to horizontal needs x-2? Kicks include ±2 ✓. Vertical nudge [0,-1] and diag included.

One more: `pressDir` when near wall — move fails silently; DAS still charges; fine.

Soft-drop immediate on keydown: I'll just set soft=true and let fast gravity handle (interval/14 ≈ 50ms at level 1 — decent). Plus add immediate step: 
```js
case 'ArrowDown': soft=true; softStep(); break;
function softStep(){ if(piece&&!grounded()&&!collides(m,x,y+1)){y++;score+=1;gravT=0;updateUI();} }
```
ok.

Also while soft && grounded, lock delay applies normally.

Score from soft/hard drop updates UI without pop — fine, updateUI called.

**Overlay pointer-events:** none needed since keyboard only; set `pointer-events:none` so it doesn't block (nothing to click anyway).

**Title/wordmark:** I'll name it "TETRA". Sub: "falling-blocks puzzle · 10 × 20".

Let me now also double check `collides` uses piece.m square loop: m.length rows, m[r].length cols — for O 2×2, I 4×4, others 3×3 — all square ✓. I'll use m[r][c] with c < m[r].length to be safe... just use m.length for both.

Rotation function:
```js
function rotated(m,dir){
  const N=m.length, res=Array.from({length:N},()=>Array(N).fill(0));
  for(let r=0;r<N;r++)for(let c=0;c<N;c++){
    if(dir>0) res[c][N-1-r]=m[r][c]; else res[N-1-c][r]=m[r][c];
  }
  return res;
}
```
Check CW (dir>0): cell (r,c) → (c, N-1-r). T bottom-aligned [[0,0,0],[0,1,0],[1,1,1]] CW: (1,1)→(1,1) ✓; (2,0)→(0,2); (2,1)→(1,2); (2,2)→(2,2). Result: row0:[0,0,0]... wait (2,0)=1 → res[0][2]=1; (2,1)=1 → res[1][2]=1; (2,2)=1 → res[2][2]=1; nub (1,1)→res[1][1]=1. So res = [[0,0,1],[0,1,1],[0,0,1]] — T pointing right ✓ correct CW.

CCW: (r,c)→(N-1-c, r): (2,0)→(2,0)? N-1-0=2,r=2 → res[2][2]; hmm (2,0): res[N-1-c][r]=res[2][2]=1. (2,1)→res[1][2]. (2,2)→res[0][2]. nub (1,1)→res[1][1]. Result col2 all + center: [[0,0,1],[0,1,1],[0,0,1]]... that's same as CW? Let me recompute CW result rows: res[0][2]=1? CW: (2,0)→res[c][N-1-r]=res[0][2]=1. So CW: res[0][2], res[1][2], res[2][2], res[1][1] → [[0,0,1],[0,1,1],[0,0,1]] pointing right? Column 2 filled vertical + center nub at (1,1) — that's a T with the bar vertical on right and nub pointing left. Original T: bar horizontal bottom, nub top-middle. CW rotation: bar becomes vertical on right, nub points left ✓ correct. CCW gives bar vertical on left, nub right: CCW calc: (2,0)→res[2][2]? N-1-c where c=0 → 2, r=2 → res[2][2]. (2,1)→res[1][2]. (2,2)→res[0][2]. Hmm all in column 2 again?? That's wrong — CCW should mirror. Let me redo: CCW formula: res[N-1-c][r] = m[r][c]. For (r,c)=(2,0): res[N-1-0][2]=res[2][2]. (2,1): res[1][2]. (2,2): res[0][2]. Nub (1,1): res[1][1]. So bar at column 2 again?! Both can't be right. Check CW formula res[c][N-1-r]: (2,0)→res[0][2]; (2,1)→res[1][2]; (2,2)→res[2][2]. Same column 2! That means my CW and CCW formulas both map row 2 to column 2 — impossible; one must map to column 0. Let me recheck CCW standard: rotation 90° CCW: (r,c) → (N-1-c, r). So target row = N-1-c, target col = r. For (2,0): row=N-1-0=2, col=2 → res[2][2]. For (2,1): row=1, col=2 → res[1][2]. (2,2): row=0,col=2 → res[0][2]. Bar in column 2. And CW: (r,c)→(c, N-1-r): (2,0)→col=N-1-2=0, row=c=0 → res[0][0]! I made an arithmetic slip before. Redo CW: (2,0): res[c][N-1-r] = res[0][0]. (2,1): res[1][0]. (2,2): res[2][0]. Nub (1,1): res[1][1]. CW: bar column 0, nub center → pointing right ✓. CCW: bar column 2, nub center → pointing left ✓. 

**Draw piece cells:** for each cell of piece.m, by=y+r; if by>=HIDDEN draw at ((x+c)*CELL, (by-HIDDEN)*CELL). Also bx bounds assumed valid.

**Ghost:** gy while loop.

**HUD update on soft/hard:** call updateUI().

**Danger check in update loop order:** update(dt) handles clearing state; floats always.

Also don't forget: when state==='clearing', DAS shouldn't move (piece null — handleDAS guards `!piece` return ✓, but move.dir persists; after spawn, held key continues DAS — acceptable, actually good UX).

pressDir sets move state; on lock, keep. ok.

**Keyup handler:**
```js
document.addEventListener('keyup', e=>{
  if(e.code==='ArrowLeft'){held.left=false; if(move.dir===-1) move.dir = held.right?1:0, if switched pressDir? just set dir & re-charge: if(held.right){pressDir(1)} else move.dir=0;}
  ...
  if(e.code==='ArrowDown') soft=false;
});
```
pressDir(1) on release of left while right held — moves once, fine.

Edge: pressDir when state!=='playing' — guard inside pressDir: only move if piece && state playing. But move.dir should still set for DAS continuity? If not playing, ignore entirely: `if(state!=='playing')return;` but then releasing/pressing during clearing loses direction after spawn — minor. Accept: guard movement but still set dir? I'll allow setting move.dir only if playing; simple.

Actually careful: keydown handler already returns early unless state==='playing' for movement keys, so pressDir only called during playing. But keyup can happen anytime — handle gracefully.

**Mute toggle:** updates `#soundState` text.

**Best line about canvas bg:** `#10121a`? Board bg slightly distinct: '#0f1116'. Grid 'rgba(255,255,255,.05)'.

**Now the "clearing" piece=null but ghost/piece draw guards piece existence ✓.**

**updateUI on level change during finishClear ✓.**

Also on hardDrop thud: boardWrap.classList add 'thud', remove on animationend or setTimeout 150. Use `void el.offsetWidth` retrigger.

I think I'm ready to write it all out. Also final visual pass on the panel: order: h1+sub, next box, stats, keys. Maybe put stats before next? Next preview is most important — keep next first.

Let me write the complete file.

Additional check — `piece` variable name vs local in functions; I'll reference a global `piece` object with fields {m,c,x,y}.

Write `move.x` etc carefully — I'll access piece.x directly.

Let me write out the code:

```js
(() => {
'use strict';

/* ---------- constants ---------- */
const COLS = 10, ROWS = 20, HIDDEN = 2, TOTAL = ROWS + HIDDEN, CELL = 30;
const BOARD_W = COLS * CELL, BOARD_H = ROWS * CELL;
const DAS = 160, ARR = 38, LOCK_DELAY = 480, CLEAR_MS = 300, SOFT_FACTOR = 14;
const KICKS = [[0,0],[-1,0],[1,0],[0,-1],[-1,-1],[1,-1],[-2,0],[2,0]];
const CLEAR_SCORE = [0, 100, 300, 500, 800];
const CLEAR_NAME  = [null, 'SINGLE', 'DOUBLE', 'TRIPLE', 'TETRA'];
const PIECES = [
  {c:'#56b6c1', m:[[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,1,1,1]]},
  {c:'#e5c07b', m:[[1,1],[1,1]]},
  {c:'#c678dd', m:[[0,0,0],[0,1,0],[1,1,1]]},
  {c:'#98c379', m:[[0,0,0],[1,1,0],[0,1,1]]},
  {c:'#e06c75', m:[[0,0,0],[0,1,1],[1,1,0]]},
  {c:'#61afef', m:[[0,0,0],[1,0,0],[1,1,1]]},
  {c:'#d19a66', m:[[0,0,0],[0,0,1],[1,1,1]]},
];

/* ---------- dom ---------- */
const cvB = document.getElementById('board');
const cvN = document.getElementById('next');
const wrap = document.getElementById('boardWrap');
const overlay = document.getElementById('overlay');
const elScore = ..., elLines, elLevel, elSound;
const dpr = Math.min(2, window.devicePixelRatio || 1);
const ctx = cvB.getContext('2d');
const nctx = cvN.getContext('2d');
cvB.width = BOARD_W * dpr; cvB.height = BOARD_H * dpr;
cvB.style.width = BOARD_W+'px'; cvB.style.height = BOARD_H+'px';
const PV = 88;
cvN.width = PV*dpr; cvN.height = PV*dpr; cvN.style.width/height ...
```

State vars, functions as planned. Then loop.

drawNext:
```js
function drawNext(){
  nctx.setTransform(dpr,0,0,dpr,0,0);
  nctx.clearRect(0,0,PV,PV);
  const p = PIECES[nextIdx], m = p.m, N = m.length;
  let minR=N,maxR=-1,minC=N,maxC=-1;
  scan filled → bbox;
  const cs = 20;
  const w=(maxC-minC+1)*cs, h=(maxR-minR+1)*cs;
  const ox=(PV-w)/2 - minC*cs, oy=(PV-h)/2 - minR*cs;
  for cells filled: block(nctx, ox+c*cs, oy+r*cs, cs, p.c);
}
```

block(ctx2,x,y,s,color): as designed with bevel b = s>24?3:2:
```js
function block(g,x,y,s,color){
  g.fillStyle=color; g.fillRect(x+1,y+1,s-2,s-2);
  const b = s>24 ? 3 : 2;
  g.fillStyle='rgba(255,255,255,.22)';
  g.fillRect(x+1,y+1,s-2,b); g.fillRect(x+1,y+1,b,s-2);
  g.fillStyle='rgba(0,0,0,.28)';
  g.fillRect(x+1,y+s-1-b,s-2,b); g.fillRect(x+s-1-b,y+1,b,s-2);
}
```

Draw board:
```js
function draw(){
  ctx.setTransform(dpr,0,0,dpr,0,0);
  ctx.fillStyle='#0f1116'; ctx.fillRect(0,0,BOARD_W,BOARD_H);
  // grid
  ctx.strokeStyle='rgba(255,255,255,.05)'; ctx.lineWidth=1;
  ctx.beginPath();
  for(let i=1;i<COLS;i++){ ctx.moveTo(i*CELL,0); ctx.lineTo(i*CELL,BOARD_H); }
  for(let i=1;i<ROWS;i++){ ctx.moveTo(0,i*CELL); ctx.lineTo(BOARD_W,i*CELL); }
  ctx.stroke();
  if(state!=='paused'){
    for(let r=HIDDEN;r<TOTAL;r++)for(let c=0;c<COLS;c++)
      if(board[r][c]) block(ctx,c*CELL,(r-HIDDEN)*CELL,CELL,board[r][c]);
    if(state==='clearing'){
      const p=1-clearT/CLEAR_MS;
      const a=.25+.6*Math.abs(Math.sin(p*Math.PI*4));
      ctx.fillStyle=`rgba(255,255,255,${a.toFixed(3)})`;
      for(const r of clearRows) if(r>=HIDDEN) ctx.fillRect(0,(r-HIDDEN)*CELL,BOARD_W,CELL);
    }
    if(piece && (state==='playing'||state==='over')){
      if(state==='playing'){
        let gy=piece.y;
        while(!collides(piece.m,piece.x,gy+1)) gy++;
        if(gy>piece.y){
          ctx.globalAlpha=.16;
          forEachCell(piece,(bx,by)=>{ if(by>=HIDDEN){ ctx.fillStyle=piece.c; ctx.fillRect(bx*CELL+1,(by-HIDDEN)*CELL+1,CELL-2,CELL-2);} });
          ctx.globalAlpha=1;
        }
      }
      forEachCell(piece,(bx,by)=>{ if(by>=HIDDEN) block(ctx,bx*CELL,(by-HIDDEN)*CELL,CELL,piece.c); });
    }
  }
  // floats
  for(const f of floats){
    const p=f.t/f.life;
    const a=p<.12?p/.12:1-(p-.12)/.88;
    ctx.globalAlpha=Math.max(0,a);
    ctx.fillStyle='#fff';
    ctx.font='700 15px ui-monospace, Menlo, Consolas, monospace';
    ctx.textAlign='center';
    ctx.fillText(f.text, BOARD_W/2, f.y - 26*p);
    ctx.globalAlpha=1;
  }
}
function forEachCell(p,fn){
  for(let r=0;r<p.m.length;r++)for(let c=0;c<p.m.length;c++)
    if(p.m[r][c]) fn(p.x+c, p.y+r);
}
```

Ghost stroke — I chose simple alpha fill, ok.

Audio:
```js
let actx=null, muted=false;
function initAudio(){
  if(!actx){ try{ actx=new (window.AudioContext||window.webkitAudioContext)(); }catch(e){} }
  if(actx&&actx.state==='suspended') actx.resume();
}
function tone(freq,dur,type,vol,delay=0,slide=0){
  if(muted||!actx) return;
  const t0=actx.currentTime+delay;
  const o=actx.createOscillator(), g=actx.createGain();
  o.type=type; o.frequency.setValueAtTime(freq,t0);
  if(slide) o.frequency.exponentialRampToValueAtTime(slide,t0+dur);
  g.gain.setValueAtTime(vol,t0);
  g.gain.exponentialRampToValueAtTime(.0001,t0+dur);
  o.connect(g); g.connect(actx.destination);
  o.start(t0); o.stop(t0+dur+.02);
}
const sMove =()=>tone(190,.03,'square',.05);
const sRotate=()=>tone(300,.06,'square',.06,0,430);
const sLock =()=>tone(130,.1,'triangle',.2,0,65);
const sDrop =()=>tone(95,.13,'triangle',.24,0,45);
const sClear=n=>{[523,659,784,1047].slice(0,Math.max(2,n+1)).forEach((f,i)=>tone(f,.09,'square',.09,i*.055));};
```
Hmm sClear: n lines → play n+1 notes of arpeggio. For n=1: 523,659. n=4: all 4. 
```js
const sLevel=()=>{tone(660,.1,'square',.09); tone(880,.12,'square',.09,.09);};
const sOver =()=>{tone(340,.7,'sawtooth',.12,0,70);};
```

Keydown as planned. Also `if(k==='Space')` etc. Include `e.preventDefault()` also for ArrowUp etc.

Ready-state: any key starts except... M should toggle sound? Eh, any key → start (including M — acceptable; or exclude M). I'll start on any key except M to be kind. Minor.

Pause overlay & blur:
```js
window.addEventListener('blur',()=>{ if(state==='playing'){ state='paused'; showOverlay(pausedHTML);} });
```

togglePause():
```js
if(state==='playing'){state='paused';showOverlay(ovPause);}
else if(state==='paused'){state='playing';hideOverlay();}
```

Overlay HTML strings:
```js
const ovReady=`<div class="ov-title">TETRA</div><div class="ov-hint blink">press any key</div>`;
const ovPause=`<div class="ov-title">PAUSED</div><div class="ov-hint">press P to resume</div>`;
function showOver(){
  overlay.innerHTML=`<div class="ov-title danger">GAME OVER</div>
  <div class="ov-stat">score ${fmt(score)} &nbsp;·&nbsp; lines ${lines} &nbsp;·&nbsp; level ${level}</div>
  <div class="ov-hint blink">press R to restart</div>`;
  overlay.classList.remove('hidden');
}
```

start/reset:
```js
function reset(){
  board=Array.from({length:TOTAL},()=>Array(COLS).fill(null));
  score=0; lines=0; level=1; bag.length=0; soft=false;
  floats.length=0; moveState.dir=0; gravT=0; lockT=0;
  nextIdx=nextIndex();
  piece=null; spawn();
  state='playing';
  hideOverlay(); updateUI();
}
```
moveState declared as object; reassign fields not the object (keep const).

spawn:
```js
function spawn(){
  const idx=nextIdx; nextIdx=nextIndex(); drawNext();
  const P=PIECES[idx], m=P.m;
  let li=0; for(let r=m.length-1;r>=0;r--){ if(m[r].some(v=>v)){li=r;break;} }
  piece={m,c:P.c,x:((COLS-m.length)/2)|0,y:HIDDEN-li};
  gravT=0; lockT=0;
  if(collides(m,piece.x,piece.y)){ state='over'; showOver(); sOver(); }
}
```

lock:
```js
function lockPiece(){
  let above=false;
  forEachCell(piece,(bx,by)=>{ if(by<0){above=true;} else board[by][bx]=piece.c; });
  piece=null;
  if(above){ state='over'; showOver(); sOver(); return; }
  sLock();
  const rows=[];
  for(let r=0;r<TOTAL;r++) if(board[r].every(v=>v)) rows.push(r);
  if(rows.length){ state='clearing'; clearRows=rows; clearT=CLEAR_MS; pendingLines... store n; }
  else spawn();
}
```
Store clearN=rows.length for finishClear (rows array also enough: clearRows.length).

finishClear:
```js
function finishClear(){
  const n=clearRows.length;
  board=board.filter((_,r)=>!clearRows.includes(r));
  while(board.length<TOTAL) board.unshift(Array(COLS).fill(null));
  const pts=CLEAR_SCORE[n]*level;
  score+=pts; lines+=n;
  const y=Math.max(20,(Math.min(...clearRows)-HIDDEN)*CELL+CELL);
  addFloat(CLEAR_NAME[n]+'  +'+fmt(pts), y);
  sClear(n);
  bump();
  const nl=Math.floor(lines/10)+1;
  if(nl>level){ level=nl; addFloat('LEVEL '+level, Math.max(20,y-26)); sLevel(); }
  updateUI();
  clearRows=null;
  state='playing';
  spawn();
}
```

update:
```js
function update(dt){
  for(const f of floats) f.t+=dt;
  for(let i=floats.length-1;i>=0;i--) if(floats[i].t>floats[i].life) floats.splice(i,1);
  if(state==='clearing'){ clearT-=dt; if(clearT<=0) finishClear(); return; }
  if(state!=='playing') return;
  handleDAS(dt);
  if(!piece) return;
  if(collides(piece.m,piece.x,piece.y+1)){
    gravT=0; lockT+=dt;
    if(lockT>=LOCK_DELAY) lockPiece();
    return;
  }
  lockT=0;
  const iv = soft ? Math.max(16,gravityMs()/SOFT_FACTOR) : gravityMs();
  gravT+=dt;
  while(gravT>=iv && piece){
    gravT-=iv;
    if(!collides(piece.m,piece.x,piece.y+1)){
      piece.y++;
      if(soft){ score++; updateUI(); }
    } else break;
  }
}
```

Hmm — while grounded (can't move down), we return early and lockT accrues; but if piece is grounded and player moves it over a hole, next frame collides(down) false → lockT=0 and falls. Good.

But there's a subtlety: when grounded, we `return` before DAS? No — handleDAS is called before grounded check ✓ (movement while grounded works, resets lockT via movePiece? I said successful move/rotate resets lockT: in movePiece and rotatePiece, on success: lockT=0 — but only if after move it's not grounded? If it moves and is still grounded, resetting lockT allows infinite stall via left-right weaving — classic games allow limited. I'll reset only if now ungrounded:
```js
function movePiece(d){
  if(state!=='playing'||!piece) return false;
  if(!collides(piece.m,piece.x+d,piece.y)){
    piece.x+=d; sMove();
    if(!collides(piece.m,piece.x,piece.y+1)) lockT=0;
    return true;
  }
  return false;
}
```
Same in rotate.

rotatePiece:
```js
function rotatePiece(){
  if(state!=='playing'||!piece) return;
  const rm=rotated(piece.m,1);
  for(const [kx,ky] of KICKS){
    if(!collides(rm,piece.x+kx,piece.y+ky)){
      piece.m=rm; piece.x+=kx; piece.y+=ky;
      sRotate();
      if(!collides(piece.m,piece.x,piece.y+1)) lockT=0;
      return;
    }
  }
}
```
Only CW (up arrow) — fine. Could add Z for CCW; skip, spec says up rotates.

hardDrop:
```js
function hardDrop(){
  if(state!=='playing'||!piece) return;
  let d=0;
  while(!collides(piece.m,piece.x,piece.y+1)){ piece.y++; d++; }
  score+=d*2; updateUI();
  sDrop(); thud();
  lockPiece();
}
```
thud(): wrap.classList retrigger.

handleDAS + pressDir:
```js
const held={left:false,right:false};
const moveState={dir:0,das:0,arr:0,charging:false};
function pressDir(d){
  moveState.dir=d; moveState.charging=true; moveState.das=DAS;
  movePiece(d);
}
function handleDAS(dt){
  if(!moveState.dir||!piece) return;
  if(moveState.charging){
    moveState.das-=dt;
    if(moveState.das<=0){ moveState.charging=false; moveState.arr=ARR; movePiece(moveState.dir); }
  } else {
    moveState.arr-=dt;
    if(moveState.arr<=0){ moveState.arr=ARR; movePiece(moveState.dir); }
  }
}
```
Note movePiece plays sMove each ARR — machine-gun ticks at 38ms; make move sound extremely subtle or only on manual presses. I'll play sMove only in pressDir (manual), not in DAS repeats. So movePiece(d, silent) param. pressDir: movePiece(d) with sound; handleDAS silent.

keydown:
```js
document.addEventListener('keydown', e=>{
  const k=e.code;
  if(['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space'].includes(k)) e.preventDefault();
  initAudio();
  if(state==='ready'){
    if(k!=='KeyM') reset();
    return;
  }
  if(k==='KeyR'){ reset(); return; }
  if(k==='KeyM'){ muted=!muted; elSound.textContent=muted?'off':'on'; return; }
  if(state==='over') return;
  if(k==='KeyP'){ togglePause(); return; }
  if(state!=='playing'||e.repeat) return;
  switch(k){
    case 'ArrowLeft': held.left=true; pressDir(-1); break;
    case 'ArrowRight': held.right=true; pressDir(1); break;
    case 'ArrowUp': rotatePiece(); break;
    case 'ArrowDown': soft=true; if(piece&&!collides(piece.m,piece.x,piece.y+1)){piece.y++;score++;updateUI();gravT=0;} break;
    case 'Space': hardDrop(); break;
  }
});
document.addEventListener('keyup', e=>{
  const k=e.code;
  if(k==='ArrowLeft'){ held.left=false; if(moveState.dir===-1){ if(held.right) pressDir(1); else moveState.dir=0; } }
  else if(k==='ArrowRight'){ held.right=false; if(moveState.dir===1){ if(held.left) pressDir(-1); else moveState.dir=0; } }
  else if(k==='ArrowDown') soft=false;
});
```

Space preventDefault avoids page scroll ✓. Also prevent key repeat for Space — e.repeat guard covers.

Pause blocks input since state!=='playing' ✓, but P toggles before the playing check ✓. When paused, ArrowUp etc do nothing ✓. When paused, R restarts ✓ (handled earlier).

updateUI:
```js
function updateUI(){
  elScore.textContent=fmt(score);
  elLines.textContent=lines;
  elLevel.textContent=level;
}
function bump(){ elScore.classList.remove('pop'); void elScore.offsetWidth; elScore.classList.add('pop'); }
```

Init:
```js
board=Array.from(...empty);
state='ready'; updateUI(); showOverlay(ovReady);
requestAnimationFrame loop.
```
Also drawNext at init? nextIdx undefined until reset — in ready state preview empty; drawNext guarded: if nextIdx==null skip. Or initialize nextIdx=nextIndex() at init so preview shows first upcoming piece — nice. Do that: at init nextIdx=nextIndex(); drawNext(). reset() recomputes — that discards previewed piece... minor inconsistency (preview changes on reset). Meh — set reset to keep existing nextIdx: reset uses `if(nextIdx==null) nextIdx=nextIndex();` then spawn consumes. Cleaner: at init, nextIdx=null; reset always: `nextIdx=nextIndex()` — ready-state preview drawn only after reset... At ready we want preview visible? Overlay covers board, panel preview could show upcoming piece — fine either way. I'll init nextIdx=nextIndex() and drawNext(); in reset() DON'T reroll (reuse current preview) — so the piece shown in preview enters play. Consistent & nice.

reset(): `if(nextIdx==null) nextIdx=nextIndex(); spawn();` where spawn uses nextIdx then rerolls. ✓ At page load: nextIdx=nextIndex(); drawNext() — preview shows piece you'll get on start. 

gravityMs: `()=>Math.max(45,Math.round(750*Math.pow(.82,level-1)))`.

thud:
```js
function thud(){ wrap.classList.remove('thud'); void wrap.offsetWidth; wrap.classList.add('thud'); }
```

Floats addFloat(text,y).

Everything seems covered. Also `fmt`.

Overlay CSS classes: .ov-title, .danger (color #e06c75), .ov-stat (12px muted), .ov-hint (accent, ls .25em, 11px), .blink animation.

Panel HTML with proper ids: score/lines/level values, soundState em.

Media query + responsive tweaks.

Also add `<meta name="color-scheme" content="dark">`? fine, optional — include.

Check: "Game over when the stack reaches the top" — covered by spawn-collision + lock-above-top. ✓ Restart key R + shown ✓.

Estimate the flash during clearing also draws over ghost area — fine.

One more detail: when state==='over' and piece exists (spawn collision), drawing piece overlaps stack — visually communicates. Good.

Double-check clear flash timing loop: update returns after finishClear (which spawns) — good.

Check finishClear uses `level` before updating — pts computed with old level ✓ standard.

Also make sure `collides` handles piece.m matrix and doesn't run when board undefined — board initialized before loop starts ✓.

Font stack string in canvas: '700 15px ui-monospace, Menlo, Consolas, monospace' — canvas font parsing with `ui-monospace` might fail in some browsers? Canvas font shorthand with unknown keyword family just falls back... Actually invalid font string → ignored. `ui-monospace` is a valid generic-ish keyword in newer CSS; to be safe use `'700 15px Menlo, Consolas, "Courier New", monospace'`. Fine.

Write the final HTML now, complete and tidy with comments. Length is fine — aim ~450 lines.

CSS final:

```css
:root{
  --bg:#0d0f13; --panel:#14161d; --line:#272b35; --text:#e2e5ec; --muted:#8b93a4;
  --accent:#56b6c1; --danger:#e06c75;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;
  display:flex;align-items:center;justify-content:center;padding:20px;
  -webkit-font-smoothing:antialiased;
}
.stage{display:flex;gap:22px;align-items:stretch}
.board-wrap{
  position:relative;padding:8px;border:1px solid var(--line);
  border-radius:10px;background:#0f1116;box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.board-wrap.thud{animation:thud .14s ease-out}
@keyframes thud{35%{transform:translateY(4px)}}
canvas{display:block}
.overlay{
  position:absolute;inset:8px;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(11,13,17,.85);text-align:center;pointer-events:none;
}
.overlay.hidden{display:none}
.ov-title{font-size:21px;font-weight:700;letter-spacing:.4em;padding-left:.4em}
.ov-title.danger{color:var(--danger)}
.ov-stat{font-size:12px;color:var(--muted)}
.ov-hint{font-size:11px;letter-spacing:.3em;padding-left:.3em;color:var(--accent)}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.panel{width:212px;display:flex;flex-direction:column;gap:14px}
h1{font-size:19px;font-weight:700;letter-spacing:.

=== answer so far ===