### 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. Let me plan this carefully to make it genuinely excellent — not just functional, but polished, memorable, and crafted.

**Core requirements checklist:**
1. 10×20 playfield on canvas ✓
2. Seven tetromino shapes (I, O, T, S, Z, J, L), each 4 squares, distinct colors ✓
3. Controls: ←/→ move, ↑ rotate, ↓ soft drop, Space hard drop ✓
4. Rotation with wall-kick / collision respect (no clipping) ✓
5. Line clears, rows fall, multi-line bonus scoring ✓
6. Score / lines / level display, speed increases with level ✓
7. Next piece preview ✓
8. Game over at stack top, visible state, restart key ✓
9. Clean, readable dark visual style ✓
10. No external libraries, no internet resources, no images — all inline ✓

**Design direction — my taste:**

I want this to feel like a crafted arcade artifact, not a tutorial demo. Dark, but not muddy gray-on-gray. I'll go with a deep near-black background with subtle warmth, a single accent color that isn't the default blue/purple — I'll pick a warm amber/ember tone as the UI accent, and give each tetromino its own saturated-but-harmonious color. The pieces themselves are the color story; the chrome stays quiet and monochrome with amber accents.

Typography: I can't load external fonts (no internet resources), so I'll build identity through a monospace stack styled well — monospace fits the arcade/grid vibe honestly. I'll use `"SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace` fallback chain and letter-spacing/uppercase labels to give it rhythm. Numbers with tabular feel. That's honest craft within constraints.

Layout: centered composition. Left: the playfield canvas with a subtle frame. Right: a narrow side column with NEXT preview (small canvas), SCORE / LINES / LEVEL stats stacked vertically, and a controls legend. Everything on a fine baseline grid feel. I'll add a thin header with the game title — I'll name it something with character: "GRIDFALL" — rendered in spaced-out letters with an amber tick mark. A hairline divider. No gradients, no glow. Maybe a very subtle scanline-free flat look; the craft comes from hairline borders (1px, low-alpha), precise spacing, and the glow of the pieces themselves against near-black.

Actually — one signature moment idea: **line clear animation**. When lines clear, instead of instantly deleting, I'll flash the row white-amber briefly and dissolve the cells outward or shrink them over ~200ms with a slight pause of gameplay. That makes clears feel earned. Also a small floating "+N" score pop near the cleared rows, and the side panel score ticks up (animated count-up). That's the memorable moment. Also a subtle "lock" flash when a piece lands.

Another signature touch: the ghost piece (subtle outline showing where the piece will land) — this is a standard quality-of-life feature and shows craft. I'll render ghost as dimmed outline. Plus particles on hard drop impact? Maybe tiny dust particles when a piece slams down with hard drop — small squares (but not "plain small squares as particles" — that's about 3D particles; still, I'll make particles slightly varied: tiny rects with varying sizes/velocities fading out — that's fine for 2D juice, and I'll make them feel like debris with gravity). Keep it subtle.

Also screen shake on hard drop (tiny, 2-3px, decaying) — juice without being noisy. And on line clear, a brief vertical shake. These are small but make it feel alive.

**Game architecture:**

- `COLS = 10`, `ROWS = 20`, cell size 30px → canvas 300×600. I'll render at devicePixelRatio scale for crispness. Actually I'll pick cell = 30 logical px, canvas 300×600, scaled by DPR.
- Board: 2D array `ROWS × COLS`, 0 = empty, else color index / piece id (store piece type char, look up color).
- Pieces defined as arrays of rotation states? Cleaner: define each tetromino by its 4×4 (or 3×3) matrix per rotation, or by cell offsets per rotation. I'll use the standard approach: each piece has `shapes` array of rotation states, each a list of [x,y] offsets, computed by rotating a base matrix. Simplest robust: define base matrices and rotate function that produces new matrix; precompute all rotations with SRS-like wall kicks? Full SRS kick tables are complex; a simpler approach that "respects walls and stacked blocks": try rotation at current position; if collides, try kicks: offset x by ±1, then ±2 (for I piece), and y offsets ±1 (floor kick). That's a common simplified kick set and satisfies "no clipping". I'll implement: candidate offsets `[ [0,0], [-1,0], [1,0], [-2,0], [2,0], [0,-1], [-1,-1], [1,-1] ]` tried in order — decent behavior. For I piece maybe extra offsets but the set covers it. Also apply a vertical correction so I-piece rotation around 3-wide matrices stays centered.

Rotation math: I'll define pieces as matrices (arrays of arrays) and rotate via transpose+reverse. For O piece, rotation is identity (2x2 matrix) — fine. For I, use 4×4 matrix. Standard matrices:

```
I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]]
O: [[1,1],[1,1]]
T: [[0,1,0],[1,1,1],[0,0,0]]
S: [[0,1,1],[1,1,0],[0,0,0]]
Z: [[1,1,0],[0,1,1],[0,0,0]]
J: [[1,0,0],[1,1,1],[0,0,0]]
L: [[0,0,1],[1,1,1],[0,0,0]]
```

Rotate CW: `m[y][x] -> new[x][n-1-y]` i.e. `new[x][size-1-y] = m[y][x]`.

Spawn position: x = centered: for matrix size n, startX = Math.floor((COLS - n)/2) → (10-4)/2=3 for I, (10-3)/2=3.5→3 for 3-wide... Math.floor gives 3 for 3-wide (offset 3), piece occupies cols 3-5 slightly left of center; common choice is 3 for T/S/Z/J/L and 3 for I. Fine. startY: place so visible top row works — spawn at y = -1 or 0? With matrix containing empty top rows (e.g., I's filled row is index 1), spawning at y=0 works: matrix row 0 empty. For T, filled rows 0-1 → visible immediately. I'll spawn y=0 and allow negative y rendering? Simpler: spawn y = 0, and game over check: if spawn collides immediately → game over. Also game over if a locked piece leaves blocks above row 0? Standard: game over when new piece can't spawn. Also if stack reaches top: when clearing, if any cell in row < some? The requirement: "Game over when the stack reaches the top" — I'll trigger game over when a locked piece occupies row 0 (top row) OR spawn collision. Actually occupying row 0 means stack reached the top. Hmm, but a piece can be partially above the field if I allow negative y. To keep it simple: no negative y; spawn at y=0; if spawn position collides → game over. And also if a locked piece has any cell in row 0 → game over. That satisfies "stack reaches the top". Actually cells in row 0 is normal even mid-game (a piece's top block sits at row 0 when stack is high)... no — row 0 is the top row of the 20-tall field; if a piece locks with cells in row 0, the stack has reached the top. That's a legit game over condition used in many implementations (top-out). But it can feel abrupt since pieces spawn at row 0-1. Standard Tetris uses spawn at row 0/1 with game over only when spawn is blocked. I'll do: game over when spawning piece collides at spawn position (stack reached top effectively), plus if a piece locks fully above... without negative y, lock in row 0 is possible but then next spawn (needing rows 0-1) will likely collide → game over next piece. Good enough; I'll also add: if a locked piece has cells in row 0 → immediate game over? That could end games prematurely when a tall stack is nearly cleared... no—if stack is at row 0, it IS at the top. I'll go with spawn-collision + also lock-out (cells entirely in hidden zone — not applicable). Keep: game over on spawn collision, and also on lock if any cell of the piece is at row 0 AND ... hmm. Let me just do the classic: game over when a new piece cannot spawn (collides). That's "stack reaches the top" effectively. I'll also render partial overflow above? Not needed.

Actually to be safe and match "stack reaches the top with visible game-over state": spawn collision → game over, with an overlay: dimmed canvas, "GAME OVER" text, final score, "PRESS R TO RESTART" (restart key R; also mention). I'll use R key (and maybe Enter) to restart.

**Scoring:** classic: single=100×level? Requirement just says clearing multiple lines scores more. I'll use: 1=100, 2=300, 4-line... use {1:100, 2:300, 3:500, 4:800} × level. Soft drop: +1 per cell dropped. Hard drop: +2 per cell. Level: every 10 lines → level up. Speed: gravity interval = e.g. `Math.max(120, 800 - (level-1)*70)` ms or a curve: `800 * 0.85^(level-1)` clamped ≥ 90ms. I'll use formula: `dropInterval = Math.max(90, 850 * Math.pow(0.86, level - 1))` roughly. Level cap maybe 15 for speed, keep counting level.

**Loop & timing:** `requestAnimationFrame` loop with delta-time accumulator for gravity. Movement: keydown for left/right with DAS (delayed auto shift): on hold, initial move then repeat after 160ms delay with 40ms repeat — I'll implement simple key repeat via my own timers for smooth control (browser keyrepeat is okay too but custom DAS feels better). Simpler: rely on native keydown repeat? Native repeat has platform variance; custom DAS is craft. I'll implement: track keys held, in update loop handle horizontal movement with dasDelay=170, repeatRate=45. Up arrow rotate: on keydown only (no repeat) — use e.repeat check or track. Down arrow: soft drop — while held, moves piece down at fast rate (e.g., every 40ms) plus resets gravity timer; also award +1 per soft-drop cell. Space: hard drop once per press.

Keys: prevent default for arrows/space to stop page scroll.

Also pause? Not required but P to pause is a nice extra. I'll add P pause with overlay "PAUSED". Small extra, low cost. Keep it.

**Rendering details:**

- Background of board: #0b0e14-ish slightly different from page bg; faint grid lines (very low alpha hairlines) — grid lines help readability, they're functional not decoration.
- Blocks: I'll draw each cell as a filled square with slight inner bevel: base color fill, a lighter top-edge highlight line and darker bottom-edge shade drawn as 2px strips — gives tactile tile look without gradients (solid strips, flat). Plus 1px darker border. This is the classic crisp tile look.
- Ghost piece: outline stroke with piece color at low alpha, or hollow rect with faint fill. I'll do 1px stroke in piece color at 0.35 alpha + very faint fill 0.08.
- Next preview: small canvas 4 cells × 4 cells area, centered piece using its bounding box.
- Locked flash: when piece locks, draw the piece cells in white for ~80ms? Actually the line-clear animation covers it. I'll do a quick white overlay on the just-locked cells for 100ms fading — subtle.

**Line clear animation flow:**
State machine: `state ∈ {playing, clearing, gameover, paused}`. On lock:
- merge piece into board.
- find full rows.
- if rows: state='clearing', store `clearingRows`, `clearTimer`, animate: phase 1 (0–120ms) rows flash white→amber, phase 2 (120–260ms) cells shrink/fade; during this, gravity/inputs paused (allow movement buffering? simpler: pause piece spawning until done — there's no active piece during clearing since piece just locked; hold inputs). After timer, remove rows, shift, apply score with pop text, spawn next piece.
- else spawn next immediately.

Floating score pop: store `pops` array {text, x, y, life} rendered on board canvas above cleared rows, rising & fading. Font monospace bold, amber.

Particles on hard drop: on hard drop, spawn ~10 particles at the piece's bottom cells: small rects (2-4px), velocities upward-ish/outward, gravity, life ~400ms, color = piece color / white mix. Rendered in a particle layer on the same canvas. Also tiny shake: shakeT decaying; translate canvas by small random offset scaled by shake amount (2px on hard drop, 4px on 4-line clear).

**Count-up score display:** displayScore lerps toward actual score each frame (e.g., move by ceil(diff*0.2) at least by 1... snap when close). Lines/level update immediately.

**DPI:** set canvas width/height = logical * dpr, style width/height logical, ctx.scale(dpr,dpr). Do for both boards.

**Layout (HTML/CSS):**

Page: body flex-centered, bg `#0a0c10` (deep charcoal with slight blue-less warmth — maybe `#0c0d0f` neutral). Add an extremely subtle vignette? No gradients — I'll keep flat bg; maybe a faint radial? That's a gradient — skip. Flat is fine; craft via hairlines.

Container: grid: `grid-template-columns: auto 200px; gap: 24px; align-items: start;`

Header above: title "GRIDFALL" — letter-spaced 0.35em, uppercase, small size (13px), with a small amber square glyph before it (drawn via inline-block CSS box — that's a meaningful mark echoing the block motif, and it can be a small 8px amber square rotated? Keep simple: an 8×8 amber square, echoing the cell motif — it's a logo mark, purposeful). Right side of header: maybe "v1.0" or nothing. Under header, hairline divider spanning content width.

Left: board wrapper with 1px border `rgba(255,255,255,0.12)`, padding 8px, bg `#0d0f13` slightly lighter than page? Or board frame darker with inner canvas. I'll do: frame with border + 2px offset corner accents? Corner ticks (small L-shaped marks at corners in amber) — nice authored detail, done with pseudo-elements or 4 absolutely-positioned spans. I'll add corner ticks — subtle signature.

Right column:
- "NEXT" label (10px, letter-spacing, muted), bordered box with preview canvas 96×96 (4.5 cells?). Preview canvas logical 96×96, cell 24 → piece of 4 cells max width 96 fits.
- Stats block: rows label/value: SCORE, LINES, LEVEL, each: label muted small, value larger (20px) amber-white. Score value amber, others white? Keep score amber, rest neutral white. Divider hairlines between.
- Controls legend: list of key hints: "← →  MOVE", "↑ ROTATE", "↓ SOFT DROP", "SPACE HARD DROP", "R RESTART", "P PAUSE". Render as two-column mini table: key in a small "kbd" style box (border hairline, 1px, padding 2px 6px, monospace) and action muted. kbd boxes: bg transparent, border rgba(255,255,255,.18), radius 4px.

Game over overlay: drawn on canvas itself (dim rect + text) — simplest and cohesive; plus maybe HTML overlay? Canvas overlay keeps everything in one visual system. I'll draw on canvas: full dim `rgba(6,8,10,0.82)`, centered "GAME OVER" in letterspaced text (drawn with spacing manually? I can set `ctx.font` and just draw text; letterspacing manual by drawing char by char with spacing — small function `drawSpacedText`). Also final score below, and "PRESS R TO RESTART" blinking (alpha sine blink). Good.

Pause overlay similar.

Also small detail: level-up flash? When level increases, pop "+LEVEL UP" ... maybe a small pop text "LEVEL 5" on board. Nice: pop at center "LEVEL UP → 5" amber. Keep simple: reuse pop system with text `LEVEL ${level}`.

**Colors for pieces (dark-theme tuned, distinct):**
- I: cyan `#3ee8d1`? Let me pick a harmonious set on near-black: 
  - I: `#41d3c7` (teal)
  - O: `#f2c94c` (amber/yellow)
  - T: `#b58aff`? purple — I said I dislike default blue/purple *schemes* for UI, but distinct piece colors are semantic; purple for T is genre-standard and functional. I'll use `#a06ee8`? Let me choose: T: `#c17bff` bright violet. Hmm, keep tasteful: `#b06ef5`.
  - S: `#7ee051` green `#6ee05a`
  - Z: `#f2594b` red `#f25a4e`
  - J: `#4a8df0`? blue — genre standard, fine as piece color: `#4f8ef7`? Slightly desaturated: `#5588ee`. 
  - L: `#f2913d` orange.
These are all distinct hues: teal, yellow, violet, green, red, blue, orange. Good spread.

UI accent: amber `#f2c94c` shared with O piece — coherent.

**Block drawing function:** 

```
function drawCell(ctx, x, y, size, color, alpha=1) {
  // base
  ctx.fillStyle = color; fillRect with 1px inset? 
}
```

Design: cell drawn at (px+1, py+1, size-2, size-2)? Give 1px gap between cells (board grid hairlines show). Tile: fill main color slightly darkened? Approach:
- fillRect with color (full cell minus 1px inset)
- top-left highlight: fillRect 2px strip along top with `lighten(color)` — compute lighten via blending with white: I'll precompute a lighter/darker variant using a helper `shade(color, amt)` operating on hex → rgb → mix. 
- bottom strip darker.
This gives beveled tile, flat (no gradient). Plus optional tiny inner square? Keep clean.

Lighten helper: `mix(color, '#ffffff', 0.35)` for top, `mix(color, '#000000', 0.45)` for bottom-edge shading, and a 1px outer stroke `mix(color,'#000',0.55)`.

Board grid hairlines: draw vertical/horizontal lines `rgba(255,255,255,0.04)`.

Ghost: `strokeStyle = color alpha .3`, strokeRect per cell (inset 2), fill alpha .07.

**Collision function:** `collides(matrix, px, py)`: for each filled cell, check bounds x∈[0,COLS), y<ROWS, and board[y][x] empty; y can be ≥0 only; if y<0? Since no negative y movement (spawn y=0, rotation kick can push y negative via [0,-1] kick!). I must handle y<0: treat y<0 as out-of-bounds collision (don't allow above top) — since field top is the real top (no hidden rows), y<0 should collide. But then floor-kick [0,-1] rarely usable near top — fine, just disallow. Simpler and safe: any cell with y<0 or y>=ROWS or x<0 or x>=COLS or board occupied → collide. Rotation near ceiling might then fail straight rotation, tries other kicks. OK.

Wait — spawn: piece matrices have empty rows at top (I has row0 empty, filled row 1; T row0 has 1 cell). Spawning y=0 fine. T's matrix row 0 = [0,1,0] so occupies row 0 at spawn. Good.

**Hard drop:** move down until collide, then lock immediately; +2 per row moved. Trigger lock.

**Lock:** write cells into board (using piece color id). Then clear-check etc.

**Spawn:** `cur = next; next = bag random`. 7-bag randomizer — proper craft: shuffle bag of 7, refill when empty. Ensures fair distribution. Also first next shown.

On spawn collision → game over state (also draw final board). Also record `gameoverAt` time for blink.

**Input handling details:**

```
keydown:
 if gameover && (key==='r' || 'R') restart.
 'p' toggle pause (only when playing/paused).
 if playing:
  ArrowLeft/Right: set held flags, record das timer, immediate move attempt once.
  ArrowUp: if (!e.repeat) rotate.
  ArrowDown: downHeld=true; (soft drop handled in loop; also immediate step?) I'll handle in loop with fast interval, immediate first step.
  Space: hardDrop (guard e.repeat to avoid autorepeat spam — space repeat should be ignored: if(e.repeat) return).
 e.preventDefault() for handled keys.
keyup: clear held flags.
```

DAS in update: if left/right held: accumulate timer; after das delay, move every repeat interval. If both held, use last pressed direction (track lastDir). Keep simple: store `moveDir` (-1,0,1) from last pressed arrow, `dasTimer`, `repeatTimer`. On keydown of direction: move once, moveDir=dir, dasTimer=0. In loop: if moveDir && held, dasTimer+=dt; while dasTimer>DAS_DELAY: step REPEAT interval... Implement: `dasT += dt; if (dasT >= DAS) { arrT += dt; while (arrT >= ARR) { tryMove(moveDir); arrT -= ARR; } }` — need per-frame accumulation; fine.

Soft drop in loop: if downHeld && playing && cur: `softT += dt; while softT >= SOFT(=35ms): tryMove(0,1) → if moved, score+=1, gravityT=0; softT-=SOFT`. Also gravityT reset while soft dropping to avoid double.

Gravity: `gravT += dt; interval = dropInterval(level); while gravT >= interval { if canMove(0,1) { y++; } else { lockDelay? } gravT -= interval }`. 

Lock delay: nice-to-have — when piece can't move down, wait a small grace (e.g., 300ms) before locking, allowing slides. This adds real gameplay quality. Implement: if blocked downward, `lockT += dt; if lockT > LOCK_DELAY(=350ms) → lock`. Reset lockT on successful move down or successful rotate/move (reset only on down? Standard: reset on move/rotate but cap resets... keep simple: reset lockT whenever piece moves down OR rotates OR moves horizontally successfully, but cap total resets? I'll just reset on any successful action, no cap — fine for casual). Actually infinite spin exploit isn't a concern here.

Hmm, but requirement says speed increases with level — gravity interval governs that; lock delay constant is fine.

**Restart:** reset all state: board, bag, score, lines, level, pops, particles, spawn fresh.

**Sound?** No external resources; WebAudio synth is allowed (no files). Small blips via oscillator: move tick, rotate, drop thud, line clear chime, game over descending. This elevates it a lot and is fully local. Risk: autoplay policy — AudioContext must be created/resumed after user gesture; keys are gestures, so create context lazily on first keydown. I'll add a tiny sound engine: `beep(freq, dur, type, vol)` with gain envelope. Sounds: move: 200Hz square 0.03 vol short 30ms; rotate: 300Hz; soft drop tick maybe none (too spammy) — skip; hard drop: low 100Hz thud (sine, quick decay) + click; line clear: two-note rising arpeggio (600→900) or for tetris 4-line nicer chord; level up: short arp; game over: descending 3 notes. Add mute toggle M key? Nice: M toggles sound, show in legend. Keep sounds subtle (vol ≤ 0.12).

I'll include M in legend. Sound toggles `muted` flag.

**Preview centering:** compute piece matrix bounding box of filled cells, center in preview canvas.

**Pops rendering:** on board ctx: font bold 16px monospace; `globalAlpha = life` fade; y rises. Duration ~700ms, rise 24px. Position centered over cleared rows' middle.

**Shake:** `shake` magnitude decays: each frame `shake *= pow(0.001, dt/1000)`? Simpler: `shake = max(0, shake - dt*0.02)` linear-ish with set amounts. Offset: `(rand-0.5)*shake*2` for x and y. Apply `ctx.translate` at frame start (after clear). Actually apply to board rendering only (translate whole board draw). Also maybe tiny shake on rotate? No, keep to drops/clears.

**Game over visual:** dim overlay; spaced "GAME OVER"; final score line "SCORE 12,400"; blink "PRESS R TO RESTART". Also stop particles/pops updates? Keep them fading is fine. Also maybe stack "collapse"? Keep simple.

**Numbers formatting:** score with thousands separator via `toLocaleString('en-US')` — but user language is English, fine.

**Sizes:** board cell 30 → 300×600 canvas + frame. Preview 4-cell canvas: cell 22 → 88×88? I'll make preview canvas 100×100 with cell 24; max piece 4 wide → 96; centered. Fine: canvas 100×100, cell 24, offset to center bbox.

Right column width ~ 220px. Total ~ 560px wide. Body centered, min-height 100vh flex.

Footer hint line? Legend covers it.

**Accessibility-ish:** aria hidden not needed; canvas has role="img" aria-label maybe. Small touch, cheap: add aria-labels.

**Edge cases:**
- Rotating O: matrix 2×2 rotates to itself; fine, play rotate sound anyway (no-op visually — still fine; or skip sound if unchanged; minor).
- I piece kick with ±2 offsets included.
- Clearing check on rows fully filled.
- Level up: `level = Math.floor(lines/10) + 1` — recompute after clears; if changed, pop "LEVEL n" + sound.
- Score pops when clearing: text like "+300" or with names: Single/Double/Triple/TETRIS? Fun: pop text: "DOUBLE +300", "TRIPLE +500", "TETRIS +800" (4-line), single just "+100". Memorable copy. Amber for ≥2 lines maybe brighter.

- Pausing: freeze loop timers (just skip updates when paused; overlay text "PAUSED — P TO RESUME").

- Prevent arrow key scroll & space scroll: preventDefault on those codes always (when game focused — whole page is the game, so always for the handled keys).

- Also ignore inputs when game over except R.

**Now structure the code cleanly:**

Constants, state object, functions: `newBag`, `spawnPiece`, `collide`, `tryMove`, `rotate`, `hardDrop`, `lockPiece`, `clearLines` (start animation), `finishClear`, `addScore`, `gameOver`, `restart`, `update(dt)`, `render()`, `renderBoard`, `renderPreview`, `drawCell`, `drawGhost`, sound helpers, input handlers, main loop.

Let me also double check the clear animation doesn't break: during 'clearing', cur is null (piece locked). Input movement ignored since cur null. Gravity skip. After CLEAR_TIME elapsed → collapse rows, spawn.

Spawn after clear uses same spawn function.

Piece representation: `cur = { m: matrix, x, y, type }`. Colors indexed by type letter.

Rotation: build rotated matrix; for each kick offset [dx,dy] (dy mostly 0 or -1): if !collide(rot, x+dx, y+dy) → apply, play sound, reset lockT, break.

Kick list: `[ [0,0],[1,0],[-1,0],[2,0],[-2,0],[0,-1],[1,-1],[-1,-1] ]`. Order: prefer no move, then small sideways, then bigger (I), then up-kicks. Good.

**Drawing the beveled cell precisely:**

```
function drawCell(c, x, y, s, color, a=1) {
  const px = x*s, py = y*s;
  c.globalAlpha = a;
  // border/dark base
  c.fillStyle = mix(color, '#000', .6);
  c.fillRect(px+1, py+1, s-2, s-2);
  // main face slightly inset
  c.fillStyle = color;
  c.fillRect(px+2, py+2, s-4, s-4);
  // top highlight
  c.fillStyle = mix(color, '#fff', .4);
  c.fillRect(px+2, py+2, s-4, 3);
  // left highlight subtle
  c.fillRect(px+2, py+2, 3, s-4);? maybe just top
  // bottom shadow
  c.fillStyle = mix(color, '#000', .35);
  c.fillRect(px+2, py+s-5, s-4, 3);
  c.globalAlpha = 1;
}
```

Hmm — top highlight full-width white-ish strip + bottom dark strip = flat bevel, classic. Add left slight highlight `mix(color,'#fff',.2)` width 2? Keep to top/bottom for clean look. Also a 1px gap: cells drawn inset by 1 all around gives grid gaps showing board bg (dark) — reads crisply.

Ghost draw: strokeRect(px+2.5, py+2.5, s-5, s-5) with alpha; plus fill alpha .06.

Board bg: `#0e1117`? Page bg `#0a0b0e`, board `#10131a` slightly lighter so it reads as the stage. Grid hairlines rgba(255,255,255,0.045). Frame: wrapper border 1px rgba(255,255,255,.14), padding 10, bg `#0d0f14`. Corner ticks: 4 spans, 10×10, border-left/top 2px amber, positioned at corners of the frame (outside padding). Subtle.

Scanline shimmer? No. Keep clean.

**HUD stat values:** update via DOM each frame only if changed (cheap check) — displayScore animated. I'll update score text each frame (string compare), lines/level on change.

**Blink for "PRESS R":** alpha = 0.55 + 0.45*sin(t/300). Requires time; use performance.now.

Let me also think about first-load: maybe show "PRESS ANY KEY TO START"? Requirement doesn't ask; starting immediately is fine. But audio context needs gesture — first keydown creates it. Immediate start keeps it snappy. I'll start immediately (no sound until first key anyway, which is fine).

**Now write the code.** I'll be careful about:

- dpr scaling and crisp 1px lines (align to 0.5 offsets for strokes).
- All comments in English (user wrote in English).
- No emoji anywhere. Icons: only my little amber square mark (CSS box) — that's fine, purposeful logo mark, not an icon set need. For legend, no icons needed — kbd text boxes.

Let me draft the whole file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRIDFALL — a falling blocks puzzle</title>
<style>
  :root {
    --bg: #0a0b0e;
    --panel: #0d0f13;
    --frame: #10131a;
    --line: rgba(255,255,255,0.12);
    --line-soft: rgba(255,255,255,0.06);
    --ink: #e8e6df;
    --muted: #8a8f98;
    --accent: #f2c94c;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, "Menlo", monospace;
    display:flex; align-items:center; justify-content:center;
    min-height:100vh;
    user-select:none;
  }
  .app { display:grid; grid-template-columns: auto 224px; gap:28px; align-items:stretch; }
  header { grid-column: 1 / -1; display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; }
  .mark { display:inline-block; width:9px; height:9px; background:var(--accent); margin-right:10px; transform: translateY(1px); }
  h1 { font-size:14px; font-weight:700; letter-spacing:.42em; color:var(--ink); }
  header .tag { font-size:10px; letter-spacing:.2em; color:var(--muted); }
  ...
</style>
```

Header spans both columns. Title left, tag right ("10 × 20 FIELD" maybe — nice authored touch: "10×20 · 7 PIECES").

Board frame:

```
.stage { position:relative; background:var(--panel); border:1px solid var(--line); padding:12px; }
.stage canvas { display:block; background: var(--frame); }
.tick { position:absolute; width:11px; height:11px; }
.tick.tl { top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
... etc (tr, bl, br)
```

Wait — corner ticks overlapping border: place them slightly outside: top:-2, left:-2. They'll render amber L marks at corners. Subtle size 10px. OK.

Side column:

```
aside { display:flex; flex-direction:column; gap:0; }
.label { font-size:10px; letter-spacing:.3em; color:var(--muted); margin-bottom:8px; }
.next-box { border:1px solid var(--line); background:var(--frame); padding:8px; display:flex; align-items:center; justify-content:center; }
.stats { border-top & bottom hairlines; padding }
.stat-row { display:flex; justify-content:space-between; align-items:baseline; padding:10px 2px; border-bottom:1px solid var(--line-soft); }
.stat-row .k { font-size:10px; letter-spacing:.28em; color:var(--muted); }
.stat-row .v { font-size:19px; color:var(--ink); font-weight:600; }
#score-val { color: var(--accent); }
.keys { margin-top: 20px? } 
```

Legend rows: `.key-row { display:flex; justify-content:space-between; align-items:center; padding:6px 2px; }` with `kbd` styling: font-size 10, padding 2px 7px, border 1px var(--line), border-bottom-width 2px (keycap feel), border-radius 4px, color ink, background rgba(255,255,255,0.03). Action text 10px letter-spacing muted, right aligned.

Rows: 
- ← → | MOVE
- ↑ | ROTATE
- ↓ | SOFT DROP
- SPACE | HARD DROP
- P | PAUSE
- M | SOUND
- R | RESTART (R relevant on game over; include with dimmed? just include)

Also level progress? Show "NEXT LEVEL IN n LINES"? Could add small progress bar under LEVEL: a thin track with amber fill = (lines%10)/10. That's functional (progress toward next level), not decorative — I like it. Implement: `.bar { height:3px; background:rgba(255,255,255,.07); } .bar i { display:block; height:100%; background:var(--accent); width:0%; }` inside stat area under LEVEL row? Put it as its own row "NEXT LEVEL" with bar. Or integrate under level value... I'll add a row after stats: label "NEXT LEVEL" + bar to the right filling width. Actually simpler: inside LEVEL stat row, under the value? Keep a dedicated slim row: `LEVEL PROGRESS [bar]`. I'll do: after the three stat rows, a 4th row: label "NEXT" hmm ambiguous with NEXT preview. Label "LEVEL PROG"? Use "TO NEXT LEVEL" with bar. Fine.

Hmm wait — careful about layout height: aside should roughly match stage height (612 + padding). Stats+preview+legend fits nicely.

**JS now.** Full careful implementation:

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

// ---------- constants ----------
const COLS = 10, ROWS = 20, CELL = 30;
const BW = COLS*CELL, BH = ROWS*CELL;         // 300 x 600
const PREVIEW = 100, PCELL = 24;

const COLORS = { I:'#3fd9c5', O:'#f2c94c', T:'#b06ef5', S:'#6ee05a', Z:'#f25a4e', J:'#5588ee', L:'#f2913d' };

const SHAPES = {
  I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
  O: [[1,1],[1,1]],
  T: [[0,1,0],[1,1,1],[0,0,0]],
  S: [[0,1,1],[1,1,0],[0,0,0]],
  Z: [[1,1,0],[0,1,1],[0,0,0]],
  J: [[1,0,0],[1,1,1],[0,0,0]],
  L: [[0,0,1],[1,1,1],[0,0,0]],
};

const KICKS = [[0,0],[1,0],[-1,0],[2,0],[-2,0],[0,-1],[1,-1],[-1,-1]];
const DAS = 170, ARR = 45, SOFT = 35, LOCK_DELAY = 350;
const CLEAR_TIME = 300;
```

Canvas setup with dpr:

```js
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const boardCv = document.getElementById('board');
const bctx = boardCv.getContext('2d');
boardCv.width = BW*dpr; boardCv.height = BH*dpr;
boardCv.style.width = BW+'px'; boardCv.style.height = BH+'px';
bctx.scale(dpr, dpr);
```

Same for preview.

Helpers:

```js
function hexToRgb(h){ ... }
function mix(a, b, t){ // a,b hex strings, t 0..1 toward b
  const [r1,g1,b1]=..., [r2,g2,b2]=...;
  return `rgb(${...})`;
}
```

State:

```js
let board, cur, next, bag, score, lines, level, displayScore,
    state, gravT, lockT, softT, softHeld, moveDir, dasT, arrT,
    clearRows, clearT, pops, parts, shake, overT, muted, lastT;
```

restart():

```js
function restart(){
  board = Array.from({length:ROWS}, () => Array(COLS).fill(null));
  bag = []; score=0; lines=0; level=1; displayScore=0;
  gravT=0; lockT=0; softT=0; dasT=0; arrT=0; moveDir=0;
  clearRows=null; clearT=0; pops=[]; parts=[]; shake=0;
  state='playing';
  next = takePiece(); // hmm order
  spawn();
  updateHud(true);
}
```

Bag:

```js
function refillBag(){ const t=Object.keys(SHAPES); /* shuffle */ 
  for(let i=t.length-1;i>0;i--){ const j=(Math.random()*(i+1))|0; [t[i],t[j]]=[t[j],t[i]]; }
  bag.push(...t);
}
function takePiece(){ if(!bag.length) refillBag(); return bag.pop(); } // wait pop takes from end; fine
```

Hmm bag.pop takes last — fine after shuffle.

spawn():

```js
function spawn(){
  const type = next ?? takePiece();
  next = takePiece();
  const m = SHAPES[type].map(r => r.slice());
  const piece = { type, m, x: (COLS - m.length) >> 1 ... };
```

For n=4: (10-4)/2 = 3 → `(COLS - m[0].length) >> 1` = 3. For n=3: (10-3)>>1 = 3 (since 7>>1=3). For n=2 (O): (10-2)>>1=4. Good.

y=0. If collide(piece, x, y) → gameOver(). Also set cur.

Wait: careful — `next` initially: in restart I set `next = takePiece()` then spawn() consumes it and pulls another. Let me restructure: restart sets `next = null; spawn()`; spawn: if next==null → next=takePiece()... cleaner:

```js
function spawn(){
  if (!next) next = takePiece();
  cur = { type: next, m: SHAPES[next].map(r=>r.slice()), x:0, y:0 };
  next = takePiece();
  cur.x = (COLS - cur.m[0].length) >> 1; // wait m.length rows; width = m[0].length; all matrices square actually (4x4, 2x2, 3x3). so cur.m.length
  cur.x = (COLS - cur.m.length) >> 1;
  cur.y = 0;
  if (collide(cur.m, cur.x, cur.y)) { gameOver(); }
  gravT = 0; lockT = 0;
}
```

collide:

```js
function collide(m, px, py){
  for(let y=0;y<m.length;y++) for(let x=0;x<m.length;x++){
    if(!m[y][x]) continue;
    const gx=px+x, gy=py+y;
    if(gx<0||gx>=COLS||gy<0||gy>=ROWS) return true;
    if(board[gy][gx]) return true;
  }
  return false;
}
```

move:

```js
function tryMove(dx, dy){
  if(!cur) return false;
  if(collide(cur.m, cur.x+dx, cur.y+dy)) return false;
  cur.x+=dx; cur.y+=dy;
  if(dy>0){ gravT=0; lockT=0; } else { lockT = 0; } // hmm reset lock on any successful action
  return true;
}
```

Actually reset lockT on any successful move (sliding along ground resets lock). But resetting lock on every down move is inherent. Fine: `lockT = 0` on success always. But careful: if piece rests on ground and player taps left/right repeatedly, they can stall forever — acceptable casual behavior; actually classic games reset lock delay on move too. Keep.

Also cap? Skip.

rotate:

```js
function rotate(){
  if(!cur || cur.type==='O') { /* O: no-op but sound? skip */ }
  const n = cur.m.length;
  const rm = Array.from({length:n}, () => Array(n).fill(0));
  for(let y=0;y<n;y++)for(let x=0;x<n;x++){ rm[x][n-1-y] = cur.m[y][x]; }
  for(const [dx,dy] of KICKS){
    if(!collide(rm, cur.x+dx, cur.y+dy)){
      cur.m=rm; cur.x+=dx; cur.y+=dy; lockT=0; sfx.rotate(); return true;
    }
  }
  sfx.rotateFail?.(); // maybe just nothing
  return false;
}
```

For O, skip rotate entirely (no sound).

ghostY:

```js
function ghostDrop(){ let gy=cur.y; while(!collide(cur.m,cur.x,gy+1)) gy++; return gy; }
```

hardDrop:

```js
function hardDrop(){
  if(!cur) return;
  let d=0; while(!collide(cur.m,cur.x,cur.y+1)){ cur.y++; d++; }
  score += d*2;
  spawnParticles(); shake = Math.min(3, 1.2 + d*0.05); sfx.drop();
  lockPiece();
}
```

Particles: compute filled cells of cur at final position bottom edge: for each filled cell, spawn 2 particles at cell bottom: position (gx*CELL + CELL/2, (gy+1)*CELL), vel up: vy = -(0.5..1.8) px/frame... I'll store particles in ms-space: {x,y,vx,vy,life,age,size,color}. vx random ±60 px/s, vy -30..-140 px/s, gravity 300 px/s². life 300–550ms. size 1–3. color: mix of piece color & white.

lockPiece:

```js
function lockPiece(){
  for cells: board[gy][gx] = cur.type;
  cur = null;
  // flash: record lastLocked? The clear animation handles visual. For no-clear lock, add a tiny flash: store lockFlash {cells, t} drawn as white overlay fading 120ms. Nice detail.
  const full = [];
  for(let y=0;y<ROWS;y++) if(board[y].every(c=>c)) full.push(y);
  if(full.length){
    state='clearing'; clearRows=full; clearT=0;
    sfx.clear(full.length);
    shake = 2 + full.length;
  } else {
    lockFlash = { cells: [...], t: 0 };
    spawn();
  }
}
```

lockFlash only when no clear (clear animation covers). Store cells as array of [gx,gy]. Draw white overlay alpha (1 - t/120)*0.5.

Scoring on finishClear:

```js
function finishClear(){
  const n = clearRows.length;
  // remove rows
  for(const y of clearRows.sort((a,b)=>a-b)) { board.splice(y,1); board.unshift(Array(COLS).fill(null)); }
```

Careful: splice by index with sorted ascending — after splicing an earlier (smaller) index, later indices shift? If I sort ascending and splice the smallest first, indices below shift up by 1... e.g., rows [5, 7]: splice(5) removes row5; original row7 becomes row6. Then splice(7) would remove wrong row. Solution: iterate descending: splice(7) then splice(5). Sort descending and splice each — indices of smaller rows unaffected by removing larger indices. Yes: `clearRows.slice().sort((a,b)=>b-a).forEach(y => { board.splice(y,1); board.unshift(empty) })`. Removing a row then unshifting keeps total length; subsequent lower-index removals still correct because removing higher index doesn't affect lower indices. ✓.

```js
  const pts = [0,100,300,500,800][n] * level;
  score += pts;
  lines += n;
  const newLevel = Math.floor(lines/10)+1;
  const leveled = newLevel > level;
  level = newLevel;
  // pop
  const names = ['','+SINGLE? ']...
```

Pop text: n===1 ? '+100' : n===2 ? 'DOUBLE +300' : n===3 ? 'TRIPLE +500' : 'TETRIS +800'; include ×level implicit. Position: x = BW/2, y = (avg of rows)*CELL... use min row: `const midY = clearRows[0]*CELL` (rows unsorted — use min). I'll compute min. pop { text, x: BW/2, y: midY, t:0, life:750, bright: n>=2 }. Also if leveled: push pop 'LEVEL '+level at center, delayed slightly (y offset) — push second pop with y = midY - 26 and life 900. And sfx.level().

Then state='playing'; clearRows=null; spawn();

update(dt):

```js
function update(dt){
  // pops, particles, shake always animate (even during clearing/gameover for particles? gameover: freeze everything except overlay blink — cleaner to stop updates on gameover; blink uses absolute time)
  if(state==='playing' && cur){
    // DAS
    if(moveDir && keys[...]) hmm
```

I need to know whether direction key still held: store `heldDir` = which arrows held. Track `leftHeld`, `rightHeld`. moveDir set on keydown; on keyup, if released dir === moveDir: moveDir = otherHeld ? other : 0 (and reset dasT). Implement:

```js
let leftHeld=false, rightHeld=false, downHeld=false;
```

keydown ArrowLeft: leftHeld=true; moveDir=-1; dasT=0; arrT=0; if(cur) tryMove(-1,0) && sfx.move();
keyup ArrowLeft: leftHeld=false; if(moveDir===-1){ moveDir = rightHeld? 1 : 0; dasT=0; arrT=0; if(moveDir&&cur) tryMove(moveDir,0); }

Similarly right.

Also note: if a direction key is pressed while game over / clearing: still record held + moveDir (so DAS continues when piece spawns) but don't move (cur null or state != playing). tryMove guards cur; also guard state==='playing'. tryMove: `if(state!=='playing'||!cur) return false;`

update loop for movement:

```js
if(moveDir !== 0){
  dasT += dt;
  if(dasT >= DAS){ arrT += dt; while(arrT >= ARR){ arrT -= ARR; if(tryMove(moveDir,0)) sfx.move(); else { arrT = 0; break; } } }
}
```

Soft drop:

```js
if(downHeld){
  softT += dt;
  while(softT >= SOFT){
    softT -= SOFT;
    if(tryMove(0,1)){ score++; gravT = 0; } else { softT = 0; break; }
  }
} else softT = SOFT; // so first press steps immediately? If softT preset to SOFT then first frame after keydown steps instantly. Set softT = SOFT on keydown instead: on keydown ArrowDown: downHeld=true; softT=SOFT (immediate first step in next update).
```

Hmm but careful: `while(softT>=SOFT)` with softT=SOFT steps once immediately, good. Reset softT=0 on keyup.

Gravity:

```js
gravT += dt;
const interval = dropInterval();
while(gravT >= interval){
  gravT -= interval;
  if(!tryMove(0,1)){ // blocked
    lockT += interval; // or accumulate real dt below
    if(lockT >= LOCK_DELAY){ lockPiece(); break; }
    break;? 
  }
}
```

Hmm, cleaner approach: gravity tick tries to move down; if blocked, don't move but count lock timer using actual elapsed. Let me restructure: in playing state:

```js
gravT += dt;
if(gravT >= interval){
  gravT = 0; // or -= interval
  if(!tryMove(0,1)) gravT = interval; // stays "due" so it retries? 
}
// lock delay independent:
if(!canFall()){ lockT += dt; if(lockT>=LOCK_DELAY) lockPiece(); }
else lockT = 0;
```

Simpler and robust: compute canFall each frame. If piece can fall: lockT=0; gravity accumulates and moves down at interval. If it can't fall: lockT accumulates; when ≥ LOCK_DELAY → lock. Gravity accumulator paused while grounded (reset to small). Also when grounded and player moves horizontally off a ledge, canFall becomes true again → lockT resets. Good.

```js
const grounded = collide(cur.m, cur.x, cur.y+1);
if(grounded){
  gravT = Math.min(gravT, interval); // keep some
  lockT += dt;
  if(lockT >= LOCK_DELAY){ lockPiece(); return; } 
} else {
  lockT = 0;
  gravT += dt;
  while(gravT >= interval){ gravT -= interval; if(!tryMove(0,1)) { lockT=0; break; } }
}
```

Note tryMove(0,1) resets lockT & gravT on success — that's fine (it's inside loop; gravT reset would break the while... careful: tryMove sets gravT=0 on dy>0, then `gravT -= interval` already done... Let me not double-handle: inside gravity loop, after tryMove(0,1) success, gravT was set to 0 by tryMove — then while condition `gravT >= interval` false, loop exits. That means each gravity step consumes full interval → correct-ish but the `-=` then reset interplay: sequence: gravT += dt; while(gravT>=interval){ gravT-=interval; if(tryMove) → gravT=0; } → net: move happened, timer 0. OK fine.

But wait: tryMove also resets lockT=0 on success — that's fine.

Also soft-drop interplay: soft drop stepping calls tryMove which resets gravT — good, prevents double-step same frame.

**dropInterval:** `function dropInterval(){ return Math.max(80, 850 * Math.pow(0.85, level-1)); }` Level 1: 850, L2: 722, L3: 614, L4: 522, L5: 444, L6: 377, L7: 320, L8: 272, L9: 231, L10: 197, L11: 167, L12: 142, L13: 120, L14: 102, L15: 87 → floor 80 at ~L15. Good curve.

**Clearing state update:**

```js
if(state==='clearing'){
  clearT += dt;
  if(clearT >= CLEAR_TIME + 60?) finishClear();
}
```

CLEAR_TIME 300 total: flash 0–140, dissolve 140–300. I'll use 320ms.

Also during clearing, particles/pops/shake continue.

**Pops/particles update (always when not gameover... run during playing & clearing):**

```js
function updateFx(dt){
  for pops: p.t += dt; remove if t>life.
  for parts: age += dt; vy += 320*dt/1000; x+=vx*dt/1000; y+=vy*dt/1000; remove age>life.
  shake = Math.max(0, shake - dt*0.012);
}
```

shake decay: shake set to ~2–5; decay rate 0.012/ms → 5 → 0 in ~415ms. Good. Use exponential? Linear fine.

Game over: state='gameover'; overT=performance.now(); sfx.gameover(); Also maybe collapse board? Extra: drop all remaining blocks? Nah — dim + text is clear.

gameOver() called from spawn collision or... also if locked piece top-out? spawn covers. Also "stack reaches top": if a piece locks and any of its cells... spawn next will handle. Fine.

**Render:**

```js
function render(){
  // board
  bctx.clearRect? fill bg
  bctx.fillStyle = '#0f1219'? use var --frame '#10131a'
  fillRect(0,0,BW,BH);
  // shake translate
  bctx.save();
  if(shake>0) bctx.translate((Math.random()-.5)*shake*2, (Math.random()-.5)*shake*2);
  // grid hairlines
  bctx.strokeStyle='rgba(255,255,255,0.045)';
  beginPath; for verticals x=0.5.. ; lineWidth 1;
  stroke.
  // settled cells
  for each board cell drawCell(bctx, x, y, CELL, COLORS[type]);
  // ghost
  if(cur && state==='playing') draw ghost at ghostY with color.
  // current piece
  draw cur cells.
  // lock flash
  // clearing rows animation
  if(state==='clearing') drawClearFx();
  // particles
  // pops
  bctx.restore();
  // overlays (not shaken? draw after restore, on top, untranslated): gameover/pause
  if(state==='gameover') drawGameOver();
  if(state==='paused') drawPaused();
}
```

Clear animation rendering: for each clearing row y: 
phase t = clearT; 
stage A (t<140): draw a full-width band over the row: fill `rgba(255,255,255, alpha)` where alpha = 0.25 + 0.75*(t/140)? Actually flash bright then start dissolve. Draw band white-amber: mix. I'll draw: `bctx.fillStyle = rgba(255, 240, 200, a)` with a = t/140 * 0.9. Also draw each cell still visible beneath (cells still in board since we remove at end) ✓.
stage B (140–320): cells dissolve: for each cell in row, draw the cell with alpha fading (1 - p) and scale shrink: draw smaller rect centered. Since board still has cells, I'll skip drawing those cells in the normal pass? Simpler: in normal board pass, skip cells that are in clearing rows when state==='clearing' (they're animated separately). Then in clearFx: stage A: draw full row band white flash; stage B: for each cell draw shrinking square: size = CELL * (1-p*... ) with alpha (1-p). Also maybe sweep direction: dissolve left→right stagger per column: p_col = clamp((t-140)/180 - col*0.03). Nice ripple. Implement per cell: start = 140 + col*12 (12ms*10=120ms stagger), each cell dissolves over 140ms: cellP = clamp((t - 140 - col*12)/140, 0..1). Row band flash only stage A.

Also draw a thin amber line along cleared row during whole animation? The white flash + dissolve is enough.

Game over drawing:

```js
function drawGameOver(){
  bctx.fillStyle='rgba(5,6,9,0.78)'; fillRect all;
  spaced text 'GAME OVER' 26px bold letterspaced 8, color '#f25a4e'? Use accent amber or red? Red matches game over semantics: '#f25a4e' (Z red). Hmm — accent amber is brand; game over in red reads clearer. I'll use red-ish for GAME OVER, amber for restart blink.
  y ~ BH*0.42.
  'SCORE ' + fmt(score) at 0.42+34, color ink.
  blink text 'PRESS R TO RESTART' alpha sine using overT.
}
```

drawSpacedText helper:

```js
function spacedText(ctx, text, x, y, font, color, spacing){
  ctx.font=font; ctx.fillStyle=color; ctx.textAlign='left'? 
  // compute total width: sum of char widths + spacing*(n-1)
  let widths=[...text].map(ch=>ctx.measureText(ch).width);
  const total = widths.reduce((a,b)=>a+b,0) + spacing*(text.length-1);
  let cx = x - total/2;
  [...text].forEach((ch,i)=>{ ctx.fillText(ch, cx, y); cx += widths[i]+spacing; });
  // with textBaseline set
}
```

Set `ctx.textBaseline='alphabetic'` default; use 'middle'? I'll set textBaseline='middle' for overlay text and compute accordingly. Use textAlign default 'left' while drawing char-by-char from computed left. Good.

Pause overlay: dim + 'PAUSED' + 'P TO RESUME'.

Preview render:

```js
function renderPreview(){
  pctx bg fill '#10131a'... actually box already colored via CSS; still fill canvas bg.
  clear; fill bg.
  if(!next) return;
  const m = SHAPES[next];
  // find bbox
  let minX=9,maxX=-1,minY=9,maxY=-1; loop.
  const w=(maxX-minX+1), h=(maxY-minY+1);
  const ox = (PREVIEW - w*PCELL)/2 - minX*PCELL;
  const oy = (PREVIEW - h*PCELL)/2 - minY*PCELL;
  for filled: drawCell(pctx, x*... careful drawCell takes grid coords: I'll refactor drawCell(ctx, gx, gy, cell, color) computing px=gx*cell. For preview pass adjusted coords: drawCellAt(pctx, (x+ox/PCELL)... messy. Better: drawCell(ctx, px, py, size, color) taking pixel coords. Board pass: drawCell(bctx, gx*CELL, gy*CELL, CELL, color). Preview: drawCell(pctx, ox + x*PCELL, oy + y*PCELL, PCELL, color). Clean.
}
```

drawCell pixel-based as planned.

**HUD updates:**

```js
function updateHud(force){
  // animate displayScore toward score
  if(displayScore < score){ displayScore = Math.min(score, displayScore + Math.max(1, Math.ceil((score-displayScore)*0.18))); }
  else if(displayScore > score) displayScore = score; // on restart snap down
  const s = fmt(displayScore);
  if(s !== lastScoreStr){ el.textContent = s; lastScoreStr = s; }
  lines/level: set if changed; bar width = (lines%10)*10% ... when level just leveled, lines%10==0 → bar 0 (correct, fresh progress).
}
```

Bar: `(lines % 10) / 10 * 100`%. On restart force reset.

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

**Sound engine:**

```js
const sfx = (() => {
  let ac=null, muted=false;
  function ensure(){ if(!ac){ ac = new (window.AudioContext||window.webkitAudioContext)(); } if(ac.state==='suspended') ac.resume(); }
  function tone(freq, dur, type='square', vol=0.08, slideTo=null, when=0){
    if(muted) return; ensure(); if(!ac) return;
    const t = ac.currentTime + when;
    const o = ac.createOscillator(), g = ac.createGain();
    o.type=type; o.frequency.setValueAtTime(freq, t);
    if(slideTo) o.frequency.exponentialRampToValueAtTime(slideTo, t+dur);
    g.gain.setValueAtTime(vol, t);
    g.gain.exponentialRampToValueAtTime(0.0001, t+dur);
    o.connect(g); g.connect(ac.destination);
    o.start(t); o.stop(t+dur+0.02);
  }
  return {
    toggleMute(){ muted=!muted; return muted; },
    move(){ tone(180, 0.04, 'square', 0.03); },
    rotate(){ tone(320, 0.05, 'square', 0.05); },
    drop(){ tone(90, 0.09, 'sine', 0.14, 55); tone(400,0.03,'square',0.04); },
    clear(n){ 
      const base=[523,659,784,1046];
      for(let i=0;i<=Math.min(n,4);i++)? 
      // arpeggio: for i in 0..n-1 tone(520+i*160, 0.08, 'square', 0.07, null, i*0.06);
      // plus 4-line extra shimmer
    },
    level(){ tone(660,0.08,'square',0.07,null,0); tone(880,0.1,'square',0.07,null,0.09); },
    over(){ tone(300,0.25,'sawtooth',0.09,150,0); tone(220,0.3,'sawtooth',0.08,110,0.22); tone(140,0.5,'sawtooth',0.08,60,0.44); },
    lock(){ tone(120,0.05,'triangle',0.08); },
  };
})();
```

Hmm — ensure() creating context inside tone before user gesture: first call happens on a keydown (gesture) so fine. But gravity-lock sounds could fire without gesture? First sound triggered is on user action mostly; if the very first thing is a piece landing naturally with lock sound — that could try to create AudioContext without gesture → state 'suspended' and tones scheduled but silent... Chrome allows creation but suspended; resume() without gesture fails silently. No errors thrown, fine. I'll also guard: only create on keydown handler via sfx.unlock() — call ensure in keydown listener once. Simplest: keydown handler calls sfx.ensure(). Add `ensure` exported.

Also `ac.createGain` — using `exponentialRampToValueAtTime` needs positive start value; vol>0 ok.

Line clear arpeggio: notes by n: n=1: [660]; n=2: [523,784]; n=3: [523,659,880]; n=4: [523,659,784,1046] plus maybe doubling. Implementation: `const notes=[[440],[523,659],[523,659,784],[523,659,784,1046]][n-1]` forEach with stagger 0.07s. Vol 0.07 square, dur 0.09. Nice.

Lock sound vs drop: hardDrop has thud; natural lock (gravity/lock delay) → sfx.lock() small tick. Call lock() inside lockPiece (drop already plays its own... lockPiece called by hardDrop too → double sound. Restructure: lockPiece plays sfx.lock() always; hardDrop plays thud additionally before lock — both fire: thud + tick = actually sounds fine layered (impact). Or make hardDrop skip lock tick via flag. Minor; layering is fine, keep both but make lock tick quiet (0.05 vol triangle 140Hz).

**Input handler:**

```js
const HANDLED = new Set(['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' ','Space','KeyP','KeyM','KeyR']);
document.addEventListener('keydown', e => {
  sfx.ensure();
  const c = e.code;
  if(['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space'].includes(c)) e.preventDefault();
  if(c==='KeyM'){ mutedFlag = sfx.toggleMute(); updateMuteLabel(); return; }
  if(c==='KeyR'){ restart(); return; } // R works anytime? Restarting mid-game is fine — yes, convenient. But guard: also fine during game over. Allow always.
  if(c==='KeyP'){ if(state==='playing'){ state='paused'; } else if(state==='paused'){ state='playing'; lastT = performance.now(); } return; }
  if(e.repeat) return; // for space/up
  if(state==='gameover' || state==='paused') return;
  switch(c){
    case 'ArrowLeft': leftHeld=true; moveDir=-1; dasT=0; arrT=0; if(tryMove(-1,0)) sfx.move(); break;
    case 'ArrowRight': ... 
    case 'ArrowUp': rotate(); break;
    case 'ArrowDown': downHeld=true; softT=SOFT; break;
    case 'Space': hardDrop(); break;
  }
});
```

Careful: keyup for movement even during other states: 

```js
document.addEventListener('keyup', e => {
  switch(e.code){
    case 'ArrowLeft': leftHeld=false; if(moveDir===-1){ moveDir = rightHeld?1:0; dasT=0; arrT=0; if(moveDir&&state==='playing') if(tryMove(moveDir,0)) sfx.move(); } break;
    case 'ArrowRight': symmetric;
    case 'ArrowDown': downHeld=false; softT=0; break;
  }
});
```

Hmm, on keyup switching to the other held direction: standard behavior moves once toward it — okay but subtle; maybe just set moveDir without instant move (das restarts). I'll do instant move for responsiveness. Fine.

Edge: pressing both left+right: second keydown overrides moveDir; keyup restores. OK.

Also on keyup during gameover, cur is null → tryMove guards.

Space during clearing: cur is null → hardDrop guards `if(!cur) return`. ✓. ArrowUp during clearing: rotate guards cur null. Add guard in rotate: `if(!cur||state!=='playing') return false`.

Also allow rotate when state==='playing' && cur. ✓.

R during gameover → restart ✓ (also works anytime; note in legend "RESTART").

Wait — issue: pressing 'R' by accident mid-game loses progress; acceptable for this scope, and legend documents it. Keep.

**Pause timing:** main loop uses `lastT` and dt = now-lastT capped (e.g., ≤ 50ms) to avoid jumps after tab-switch. When paused, don't update gameplay; still render (overlay). Keep rendering each frame for blink. When paused→playing, lastT reset in keydown... loop computes dt each frame anyway with cap; pausing just skips update. Also on unpause, large dt accumulated while paused? No: loop always runs and updates lastT every frame regardless of state. So dt stays small. ✓. But when state==='paused', skip update() but keep lastT updated in loop. ✓.

Also gameover: skip gameplay update; still updateFx? Particles frozen is fine; blink uses absolute clock. I'll skip updates entirely on gameover except render.

**Loop:**

```js
function loop(now){
  const dt = Math.min(50, now - lastT); lastT = now;
  if(state==='playing' || state==='clearing'){ update(dt); updateFx(dt); }
  else if(state==='gameover'){ /* nothing */ }
  render(); renderPreview(); updateHud();
  requestAnimationFrame(loop);
}
```

renderPreview only changes on spawn — cheap enough to render always or only when next changes; render always is simplest (100×100). Fine, but I'll render preview only when `next` changes (dirty flag) — nah, always is fine and simpler; it's tiny.

**Board render specifics — hairline grid:** vertical lines at x=1..9, horizontal y=1..19, `strokeStyle='rgba(255,255,255,0.05)'`, `lineWidth=1`, offset 0.5. With dpr scaling, 0.5 offset may still blur at dpr 1... acceptable subtlety at alpha .05. Or draw with fillRect 1px wide: `bctx.fillStyle='rgba(255,255,255,0.05)'; for x: fillRect(x, 0, 1, BH)` — crisp. Use fillRect. Alpha 0.05 white on dark = faint. Also maybe slightly stronger 0.06. OK.

Also a subtle outer inner-border? The frame handles it.

**Board bg fill:** '#10141b'. Let me define palette JS constants matching CSS: JS uses literals.

**Ghost and current piece at spawn y=0 (visible)** — fine.

**drawGhost:** compute gy = ghostDrop(); if gy===cur.y skip? Draw anyway harmless (overlaps piece, invisible under). Draw before current piece.

Ghost cell: 
```js
bctx.globalAlpha=0.5;
bctx.strokeStyle = color? Use mix(color,'#fff',.1) with alpha .35;
bctx.strokeRect(px+2.5, py+2.5, CELL-5, CELL-5);
bctx.globalAlpha=0.08; bctx.fillStyle=color; fillRect(px+2,py+2,CELL-4,CELL-4);
bctx.globalAlpha=1;
```

Wait strokeRect with 2.5 offsets: with ctx scaled by dpr=2, 2.5 logical = 5 device px, crisp-ish. Fine.

**Line-clear skip in main pass:** when state==='clearing', skip cells whose y ∈ clearSet (a Set of row indices). Build clearSet when entering clearing.

**drawClearFx:**

```js
const FLASH=140, TOTAL=320;
for(const y of clearRows){
  if(clearT < FLASH){
    const a = easeOut(clearT/FLASH) * 0.95;
    bctx.fillStyle = `rgba(255,244,214,${a})`;
    bctx.fillRect(0, y*CELL, BW, CELL);
  }
}
// dissolve per cell (stage B) — draw regardless per column timing
if(clearT >= FLASH){
  for(const y of clearRows){
    for(let x=0;x<COLS;x++){
      const st = FLASH + x*14;
      const p = Math.min(1, Math.max(0, (clearT - st)/150));
      if(p>=1) continue;
      const color = COLORS[board[y][x]]; // board still has it until finishClear
      if(!color) continue;
      const size = CELL * (1-p);
      const a = 1-p;
      bctx.globalAlpha=a;
      bctx.fillStyle=color;
      const off=(CELL-size)/2;
      bctx.fillRect(x*CELL+off, y*CELL+off, size, size);
      bctx.globalAlpha=1;
    }
  }
}
```

Wait, stage A also still shows cells (board not skipped?) — In main pass I skip clearing-row cells during 'clearing'. Then stage A must draw the cells too, else rows vanish during flash. So in drawClearFx stage A: draw the actual cells (drawCell) then overlay white band with alpha rising. Then stage B dissolves. Let me restructure drawClearFx to handle both:

```js
for(const y of clearRows){
  if(clearT < FLASH){
    for x: drawCell(cell) (if board[y][x])
    band alpha = 0.9 * (clearT/FLASH) — starts 0 ends near-white: actually start with slight flash immediately: a = 0.35 + 0.65*(t/FLASH)
    fillStyle white-amber 'rgba(255,240,200,α)'
  }
}
if(clearT>=FLASH){ dissolve per above }
```

Band covers row incl. neighbors' gaps — fine, full-width band reads as "line clearing". 

Actually simpler alternative: band flashes; then cells shrink. The skip-in-main-pass handles hiding originals. During stage A draw originals inside fx function. ✓.

finishClear at clearT >= FLASH + 150 + 9*14 ≈ 140+276=416 → set CLEAR_TOTAL = 430ms. finishClear when clearT>=430.

Hmm, per-cell stagger by column x ascending — direction sweep left→right; nice. 

**Particles draw:**

```js
for(const p of parts){
  const a = 1 - p.age/p.life;
  bctx.globalAlpha = Math.max(0, a)*0.9;
  bctx.fillStyle = p.color;
  bctx.fillRect(p.x - p.size/2, p.y - p.size/2, p.size, p.size);
}
bctx.globalAlpha=1;
```

spawnParticles on hardDrop: for each filled cell of cur (final position): 2–3 particles at cell bottom center: x=gx*CELL+CELL/2 + rand(-8,8), y=(gy+1)*CELL - rand(0,6); vx=rand(-70,70), vy=rand(-160,-40); size rand 1.5–3.5; life 350–600; color: Math.random()<0.5 ? pieceColor : '#e8e6df'.

Also maybe on clear: particles bursting from cleared cells? Could add small burst per cleared cell at finishClear — nice touch: at finishClear, for each removed cell spawn 1 particle upward. But cells gone; use positions with stored colors? board is mutated... do it before splice: iterate clearRows cols, spawn particle at (x*CELL+CELL/2, y*CELL+CELL/2) with piece color. Add — cheap and juicy. Actually the dissolve animation already provides the effect; particles at finish would appear after cells gone — a soft "confetti puff" as rows collapse. I'll add modest: 1 particle per cell, small upward drift. OK.

**Pops draw:**

```js
for(const p of pops){
  const q = p.t/p.life;
  const a = q<0.7 ? 1 : 1-(q-0.7)/0.3;
  bctx.globalAlpha=a;
  bctx.font='bold 15px ...' use 'bold 15px "Cascadia Code", Consolas, monospace'
  spacedText small? Plain centered fillText with manual letterspacing: use spacedText(bctx, p.text, p.x, p.y - q*24, spacing=2, color)
}
```

color: p.bright ? accent : '#e8e6df'. Set textAlign baseline: my spacedText sets fillStyle and uses textBaseline='middle'. 

Pop also used for LEVEL up: text 'LEVEL '+level.

**updateHud details:** elements: #score, #lines, #level, #bar (fill), #muteState maybe show "M · SOUND ON/OFF"? Legend row 'M' with action 'SOUND: ON' updating text. Nice: the legend row for M shows current state. id="sound-state" textContent 'SOUND ON'/'SOUND OFF'.

**Now also think: the O piece spawn x=4 with 2×2 matrix at cols 4-5 — centered. ✓**

**Rotation edge:** T at x=3,y=0 rotating with kick [0,-1] would need y=-1 → collide (gy<0) → tries sideways etc. Fine.

**One more consideration:** I-piece initial matrix row 1 filled; at y=0 occupies row 1; rotating CW → column at... rm from I: [[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]]? Let me verify rotate CW of I: m[1][*]=1. new[x][n-1-y]=m[y][x] → filled at new[x][4-1-1=2] for all x → column index 2 filled in every row: yes column 2. Spawns at x=3 → occupies col 5 vertically rows 0-3? Wait matrix rows 0..3 each filled at [x][2]; piece x offset 3 → column 3+2=5. Rows y..y+3 = 0..3. OK.

**Level & speed check on HUD:** show "SPEED" maybe? Requirement says display level — done. Bar shows progress. Good.

**restart via R also needs sfx? no.**

**Board top boundary**: draw a slightly stronger line at top? The frame border suffices.

**Now write final CSS carefully:**

Body flex center. `.app` grid. On small screens maybe scale? Add `@media (max-width: 640px)` fallback: allow horizontal squeeze? Canvas fixed 300px + 224 side = ~560 fits most. Keep simple; maybe `zoom` not needed. Fine.

Also `body { padding: 24px }` to avoid edge-hugging on small viewports.

Font stack note: "Cascadia Code" (Windows), "SF Mono"? SF Mono not directly addressable... "ui-monospace" first? Use: `ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace`. Wait ui-monospace maps SF Mono/Segoe on modern systems — good. But `ui-monospace` in canvas font string won't work reliably; for canvas font strings I'll use `'Consolas, "SF Mono", Menlo, monospace'` — must be a valid CSS font shorthand: `bold 15px Consolas, monospace` — hmm multi-family in canvas font shorthand with spaces needs quotes: `'bold 15px Consolas, "Menlo", monospace'` — canvas accepts that. I'll define `const FONT = 'ui-monospace, Consolas, "SF Mono", Menlo, monospace'`? For canvas `ctx.font = 'bold 15px ' + MONO` where MONO = `'Consolas, Menlo, "Segoe UI Mono", monospace'`? Actually simplest: `const MONO = '"Cascadia Code", Consolas, Menlo, monospace'` — canvas font parsing handles quoted families. Wait order: prefer Cascadia (has nice chars) — fine either way. Use MONO const both places? CSS uses its own stack. OK.

Let me also double-check `drawCell` visual: with CELL=30: fillRect base dark at (+1,+1,28,28) → 1px gap around each cell in board (grid gaps show bg) — cells appear as 28px tiles with 2px spacing? Actually base dark fill at inset 1 means the tile's outer 1px ring is board-bg — giving 2px gap between adjacent tiles (1px from each). Then face at inset 2 (28-4=... base 28 wide, face inset 2 → 24px face) leaves 2px dark rim → bevel border look. Highlight strip top: (px+2, py+2, s-4=24... wait face is 24 wide; highlight width 24? Highlight: fillRect(px+2, py+2, s-4, 3) → 24×3 strip lighter. Bottom shadow fillRect(px+2, py+s-5, s-4, 3) → 24×3 darker at py+25..28 (within base rim). Looks right: face 24px + rim. Cells read clearly at 30px.

Preview PCELL=24: face 24-8=16? Same formula scaled: base inset1 (22), face inset2 (18 wide), strips 3px — proportionally chunkier but fine. Maybe use s-4 strips → 18px face. OK.

**mix() helper:**

```js
function mix(h1, h2, t){
  const a = parseInt(h1.slice(1),16), b = parseInt(h2.slice(1),16);
  const r = Math.round(((a>>16)&255) + ((((b>>16)&255)-((a>>16)&255))*t));
  ... g,b
  return `rgb(${r},${g},${b})`;
}
```

Precompute per color the three variants lazily via cache map keyed color → object {base? we know base} — cache `tileCache[color] = {hi: mix(color,'#fff',0.42), face: color, lo: mix(color,'#000',0.4), edge: mix(color,'#000',0.62)}` computed once. drawCell uses cache.

**Ghost color:** use color directly with low alpha.

**Score formatting** with commas.

**Pop text for single:** '+100'? with level multiplier actual pts = 100*level → show actual: `+${pts}`. Names: ['','+','DOUBLE +','TRIPLE +','TETRIS +']? For n≥2: `${NAME[n]} +${pts}`; n=1: `+${pts}`. LEVEL pop separate.

**Check finishClear ordering:** compute pts BEFORE splicing? level used in pts — compute pts first with current level, then lines+=n, then level recompute. ✓ (pts uses pre-clear level — standard).

**Pop y position:** rows list unsorted (from scan, ascending naturally). minRow = clearRows[0] (scan ascending → first is min). y = minRow*CELL + CELL/2. LEVEL pop at y-30? If both, stagger: push level pop with delay: I'll add `delay` field to pop: t starts negative: p.t = -delay. update t+=dt; skip render if t<0. Level pop delay 250ms, y slightly higher (y - 8?). Good.

**updateHud 'force' param** on restart to snap displayScore=score=0 and rewrite strings. Implement: if force: displayScore=score; always rewrite.

Also bar: `barEl.style.width = ((lines%10)*10)+'%'`.

Hmm — after finishing level where lines%10===0 → width 0 — reads as fresh progress ✓.

**Initial HUD text 0/0/1.**

**Also initial render before first RAF** — loop starts immediately.

**Meta**: title "GRIDFALL". Tag in header: "10×20 · SEVEN PIECES" maybe simpler: "TETROMINO PUZZLE · 10×20". Keep "10 × 20 · SEVEN PIECES".

**HTML skeleton:**

```html
<div class="app">
  <header>
    <div class="title"><span class="mark"></span><h1>GRIDFALL</h1></div>
    <div class="tag">10 × 20 · SEVEN PIECES</div>
  </header>
  <div class="stage">
    <span class="tick tl"></span><span class="tick tr"></span><span class="tick bl"></span><span class="tick br"></span>
    <canvas id="board" width="300" height="600" role="img" aria-label="Playfield"></canvas>
  </div>
  <aside>
    <div class="section">
      <div class="label">NEXT</div>
      <div class="next-box"><canvas id="preview" width="100" height="100"></canvas></div>
    </div>
    <div class="stats">
      <div class="stat-row"><span class="k">SCORE</span><span class="v accent" id="score">0</span></div>
      <div class="stat-row"><span class="k">LINES</span><span class="v" id="lines">0</span></div>
      <div class="stat-row"><span class="k">LEVEL</span><span class="v" id="level">1</span></div>
      <div class="bar-row"><span class="k">TO NEXT</span><span class="bar"><i id="bar"></i></span></div>
    </div>
    <div class="keys">
      <div class="label">CONTROLS</div>
      <div class="key-row"><span class="act">MOVE</span><span class="kk"><kbd>←</kbd><kbd>→</kbd></span></div>
      <div class="key-row"><span class="act">ROTATE</span><kbd>↑</kbd></div>
      ...
    </div>
  </aside>
</div>
```

Arrows as characters ←→↑↓ — these are characters not emoji ✓ (standard arrows). SPACE written as text "SPACE". Kbd styling.

Key rows order: MOVE, ROTATE, SOFT DROP, HARD DROP, PAUSE, SOUND, RESTART. Sound row action text: `SOUND · <span id="sound-state">ON</span>`? Simpler: action text "TOGGLE SOUND" and separate no state. I'll show state: `<span class="act">SOUND: <em id="snd">ON</em></span>` em amber. Update on M.

kbd arrows: use `&larr;` etc or literal ←. Literal fine (UTF-8 meta present).

**Keys layout alignment:** act left, keys right. `.key-row { display:flex; justify-content:space-between; align-items:center; }`.

**Stats borders:** `.stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:16px; }` rows with soft bottom border except last.

**aside gap:** use margins; sections spaced 18px.

**Bar row:** label small, bar flex grows: `.bar-row{display:flex;align-items:center;gap:12px;padding:10px 2px;} .bar{flex:1;height:3px;background:rgba(255,255,255,.08);} .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease;}` transition nice.

Hmm "TO NEXT" ambiguous — "NEXT LEVEL" clearer? But preview labeled NEXT. Use "LEVEL PROGRESS"? Row: label "NEXT LEVEL" + bar. Preview says "NEXT" box. Slight clash; rename preview label to "NEXT PIECE" and bar label "NEXT LEVEL". Fine: preview label "NEXT PIECE"? Or "QUEUED". Keep: preview "NEXT", bar row label "LEVEL PROGRESS". Good.

**Now, one important gameplay check — soft drop + gravity while grounded:** If piece grounded and player presses down: tryMove(0,1) fails → softT reset; fine, no lock acceleration? Classic: pressing down while grounded locks faster. I'll make soft-drop when grounded contribute to lock: if grounded && downHeld: lockT += dt*? Just leave lock delay 350ms — pressing down doesn't speed lock. Minor. Or set: on soft drop fail while grounded, lock immediately? Too aggressive. Keep as is — hard drop exists for instant lock. Fine.

**Rotation when grounded near walls:** kicks handle.

**Testing mentally the loop for stuck states:** piece spawns, gravity moves. lockT accumulates only when grounded. After lockPiece, cur=null; while clearing/next spawn, update loop: gravity block guards `if(!cur) return` early in playing update. Structure update:

```js
function update(dt){
  if(state==='clearing'){
    clearT += dt;
    if(clearT >= CLEAR_TOTAL) finishClear();
    return;
  }
  if(!cur) return;
  // DAS, soft, gravity as above
}
```

Wait finishClear sets state='playing' and spawns. ✓

But DAS/soft accumulators tick only when playing & cur — if direction held during clearing, dasT doesn't accumulate → after clear, das restarts from 0. Slight input buffering loss; acceptable. Better: accumulate dasT regardless when moveDir held even without cur? Move das accumulation before cur guard:

```js
function update(dt){
  if(state==='clearing'){ ... return; }
  // movement timers
  if(moveDir!==0){ dasT+=dt; if(dasT>=DAS){ arrT+=dt; while(arrT>=ARR){arrT-=ARR; if(cur && tryMove(moveDir,0)){sfx.move();} else {arrT=0;break;} } } }
  if(!cur) return;
  // soft drop
  ...
  // gravity/lock
}
```

Hmm while(!cur) arrT accumulates then tryMove fails → arrT reset each attempt... minor. It's fine: when cur null (during that one frame until spawn), attempts skip. Actually spawn happens same lock flow, cur set immediately except during clearing (handled by early return). So cur null only in gameover (update not called) — simplify: cur always non-null in 'playing' update? After lockPiece with no clears, spawn() called synchronously → cur set. After finishClear → spawn. So cur null never observable in playing update. Great — keep guard anyway for safety.

**gravity/lock section:**

```js
const interval = dropInterval();
const grounded = collide(cur.m, cur.x, cur.y+1);
if(downHeld){ softT += dt; while(softT>=SOFT){ softT-=SOFT; if(tryMove(0,1)){ score++; gravT=0; } else break; } }
else {
  gravT += dt;
  while(gravT>=interval){ gravT-=interval; if(!tryMove(0,1)) break; }
}
if(collide(cur.m, cur.x, cur.y+1)){ lockT += dt; if(lockT>=LOCK_DELAY){ lockPiece(); } }
else lockT = 0;
```

tryMove(0,1) resets lockT & gravT on success — inside while loops resets gravT... trace: gravT=850≥850 → gravT=0 → tryMove success sets gravT=0 (already) → loop exits. ✓. soft: softT-=SOFT then tryMove sets gravT=0 ✓.

Wait: tryMove resetting lockT on horizontal move success also fine.

Edge: grounded & downHeld: soft loop fails immediately (tryMove fails), lockT accumulates dt per frame → locks in 350ms even while pressing down. Acceptable.

Edge: tryMove(0,1) inside soft loop resets lockT=0 on success ✓ (resets when sliding down).

**hardDrop when cur near top and d=0:** score+=0, still locks ✓.

**Game over from spawn: also draw the colliding piece? No — just dim + overlay. Fine. Also maybe show reason... skip.

**restart on R while clearing state:** restart resets everything including state ✓.

**One more polish:** when state is 'gameover', render board normally (settled stack visible under dim) ✓ since dim alpha 0.78 lets stack ghost through. Nice.

**Blinking text uses overT absolute ms** — use `now` from render? render has no now param; use performance.now() inside. Fine.

**Also 'PRESS M TO...' mute indicator on canvas? No, HUD legend covers.**

Let me now also handle **`document.hidden` / tab return**: dt capped 50ms — a 3s absence gives 50ms step once — fine, piece doesn't teleport-drop 60 rows. Good.

**Write spacedText with textBaseline='middle':**

```js
function spacedText(ctx, text, x, y, size, color, spacing, weight='bold'){
  ctx.font = `${weight} ${size}px ${MONO}`;
  ctx.fillStyle = color;
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'left';
  const chars=[...text];
  const widths=chars.map(ch=>ctx.measureText(ch).width);
  const total=widths.reduce((a,b)=>a+b,0)+spacing*Math.max(0,chars.length-1);
  let cx=x-total/2;
  chars.forEach((ch,i)=>{ ctx.fillText(ch,cx,y); cx+=widths[i]+spacing; });
  ctx.textBaseline='alphabetic';
}
```

Monospace widths equal anyway but measure is safe.

**drawGameOver:**

```js
function drawGameOver(){
  bctx.fillStyle='rgba(4,5,8,0.8)';
  bctx.fillRect(0,0,BW,BH);
  // thin red rule above/below title? A hairline under: draw 1px line width 180 centered — subtle framing. 
  spacedText(bctx,'GAME OVER',BW/2,BH*0.40,24,'#f25a4e',7);
  bctx.fillStyle='rgba(255,255,255,0.15)'; fillRect(BW/2-90, BH*0.40+22, 180, 1);
  spacedText(bctx,'SCORE '+fmt(score),BW/2,BH*0.40+48,13,'#e8e6df',3,'600'? weight 'normal'? use 'bold' small.
  const blink=0.45+0.45*Math.sin((performance.now()-overT)/280);
  bctx.globalAlpha=blink; spacedText(bctx,'PRESS R TO RESTART',BW/2,BH*0.62,12,'#f2c94c',3); bctx.globalAlpha=1;
}
```

Pause overlay similar: 'PAUSED' white, 'P TO RESUME' muted.

**Particles & pops rendering within shake translate** ✓.

**One perf check:** render loop redraws 200 cells max — trivial.

**Now assemble the final code carefully, watching for bugs:**

- In render board pass, skip clearing rows cells: `if(state==='clearing' && clearSet.has(y)) continue;` build clearSet = new Set(clearRows) when entering clearing in lockPiece.
- After finishClear, clearSet=null.
- drawClearFx reads board[y][x] which still holds values until finishClear ✓ (colors available during dissolve).
- Pop for level: only if leveled.
- sfx.clear called at lock when full rows found; sfx.level at finishClear if leveled? Level sound at pop time (finishClear) ✓.
- lockFlash: store {cells:[{x,y}], t}; update in updateFx: t+=dt; expire >120. Draw after settled cells, before piece: white overlay per cell alpha (1-t/120)*0.55 fillRect cell rect (px+2..) — draw full tile: fillStyle 'rgba(255,255,255,α)' rect(px+1,py+1,CELL-2,CELL-2).

Hmm — lockFlash also plays sfx.lock(). Place sfx.lock() call in lockPiece.

- restart(): also updateHud(true), renderPreview immediate.

- Keys 'Space' e.code is 'Space' ✓. 'KeyR','KeyM','KeyP' ✓.

- preventDefault also for Space to avoid page scroll ✓ (include in list).

- Also prevent default arrows even in gameover (scrolling) ✓ — my preventDefault happens before state checks ✓.

**Bag refill initial:** restart → next=null; spawn → next=takePiece() (refill), cur type=next... wait in spawn: `if(!next) next=takePiece(); cur.type=next; next=takePiece();` ✓.

**Preview shows `next`** ✓.

**Level pop and clear pop positions could overlap score HUD? They're on canvas, fine.**

**Check DAS initial move on keydown then dasT accumulation in update:** keydown moved once; dasT=0; update adds dt each frame; at 170ms begins ARR 45ms repeats ✓.

**Soft drop initial:** keydown sets softT=SOFT; next update: softT+=dt≥SOFT → step immediate ✓. Then continues at 35ms — 28 cells/s ≈ fast soft drop ✓. Score +1 per cell ✓ (only counts on success).

**Hard drop +2/cell ✓.**

**Line clear scoring:** single 100×L etc ✓ multi-line scores more ✓.

**Speed increases per level ✓; level shown ✓; lines ✓; score ✓.**

**Next preview ✓. Game over visible + R restart ✓.**

I think the plan is solid. Let me also decide **cell gap aesthetic**: The 1px inset creates visible grid spacing — good "clean readable" look.

Also add slight **board inner shadow**? skip.

Let me write the file now, in full, carefully. I'll aim for clean, commented code. Comments in English.

Also **document a subtle detail**: display "SPEED" as small multiplier? No — keep to spec.

**Edge: rotate sound for O skipped** — in rotate(): early return if type==='O' (no rotation needed) — also no sound. Fine.

**Write sfx.clear properly:**

```js
clear(n){
  const seq=[[440],[523,659],[523,659,784],[523,659,784,1046]][n-1] || [440];
  seq.forEach((f,i)=> tone(f,0.09,'square',0.07,null,i*0.07));
  if(n>=4) tone(1318,0.18,'triangle',0.06,null,0.28);
}
```

**sfx.over:** descending saw notes as above.

**toggle mute:** `muted` inside closure; expose isMuted.

Now, potential subtle bug: `tone` with `when` offset uses ac.currentTime+when — if ac just created, currentTime 0 → fine.

`ensure()` called on every keydown — resumes if suspended ✓.

**Canvas font string:** `const MONO = '"Cascadia Code", Consolas, Menlo, monospace';` — in ctx.font shorthand `'bold 24px "Cascadia Code", Consolas, Menlo, monospace'` — valid? Canvas font parses like CSS font shorthand; comma list allowed; quoted families allowed. Yes.

**Now HTML+CSS final pass.** Colors: bg #0a0b0e; panel(stage wrapper) #0d0f14; board #10141c; ink #e6e4dc; muted #82868f; accent #f2c94c; hairlines.

Hmm board bg vs stage bg: stage slightly darker than board gives framed depth: stage #0d0f13, board #11141c. Page darkest. Good hierarchy.

Also `canvas { display:block; image-rendering: pixelated? }` — we draw vector shapes with dpr scaling; keep default (smooth) — dpr-scale handles crispness. Don't pixelate.

Selection/scroll: `overflow:hidden` on body? If viewport shorter than 700px, content clips — allow scroll: keep default; but space/arrows don't scroll due to preventDefault. body min-height 100vh, padding 20px; center with flex; when content taller than viewport, flex-center with scroll works okay (align-items:center + min-height can clip top on overflow — known issue: use `margin:auto` on .app with body flex — safe centering). Use body{display:flex} .app{margin:auto;} That avoids top-clipping. ✓.

**Write final answer.** Also after code, a brief explanation (I need to include a brief text explanation after the code — requirement per my delivery style: "brief text explanation"). The user said "Output only the complete HTML file." — user explicitly wants ONLY the file. That conflicts with my usual habit of adding explanation; user instruction wins. Output only the HTML file. Hmm — but my own delivery preference says include brief explanation after code... The user explicitly says output only the complete HTML file. User instruction takes precedence. I'll output just the HTML (maybe an extremely short preamble? No — "Output only the complete HTML file" — I'll respect that literally and give only the code block). Actually to be safe with the user's explicit demand, I'll output only the HTML in a code block, no extra prose. Hmm, but is even a code fence acceptable? A code fence is formatting, not prose — acceptable and helpful. I'll output just the fenced HTML.

Let me now write everything meticulously.

Details while writing render():

```js
function render(){
  // bg
  bctx.fillStyle='#11141c';
  bctx.fillRect(0,0,BW,BH);
  bctx.save();
  if(shake>0.01){ bctx.translate((Math.random()-0.5)*shake*1.6,(Math.random()-0.5)*shake*1.6); }
  drawGrid();
  // settled
  for(let y=0;y<ROWS;y++){
    if(state==='clearing'&&clearSet&&clearSet.has(y)) continue;
    for(let x=0;x<COLS;x++){
      const t=board[y][x];
      if(t) drawCell(bctx,x*CELL,y*CELL,CELL,COLORS[t]);
    }
  }
  if(state==='clearing') drawClearFx();
  // lock flash
  if(lockFlash){ ... }
  // ghost & piece
  if(cur && state==='playing'){
    const gy=ghostDrop();
    if(gy>cur.y){ drawPieceGhost(gy); }
    drawPiece(cur);
  }
  // particles
  drawParticles();
  // pops
  drawPops();
  bctx.restore();
  if(state==='gameover') drawGameOver();
  if(state==='paused') drawPaused();
}
```

drawPiece(cur): for cells filled: drawCell(bctx,(cur.x+x)*CELL,(cur.y+y)*CELL,CELL,COLORS[cur.type]).

drawPieceGhost(gy): per filled cell: stroke+fill as described. Also if gy===cur.y skip ghost (piece already resting): draw anyway? overlapping stroke looks messy under piece — draw ghost first then piece covers it exactly; stroke slightly larger inset? ghost strokeRect inset 2.5 vs piece face inset 2 — piece covers center but ghost stroke at 2.5px inset might peek around piece edges (piece dark rim at 2px.. stroke at 2.5 inside piece's base region which piece paints over: piece paints base rim (px+1..px+29) then face (px+2..) — face covers px+2..px+28; ghost stroke line at px+2.5 width 1 lies within face area → covered by face? Order: ghost drawn first, then piece drawn over → piece face covers ghost stroke region ✓ (stroke centered at 2.5, width ~1 → spans 2–3px, face starts at 2 → covered). So overlap harmless. Just draw ghost always when playing & cur (skip when gy===cur.y? drawing then covering is fine — one draw order handled). To save ops, still draw only if gy>cur.y? If resting, ghost==piece pos; drawing then covering fine. I'll draw only if gy!==cur.y to avoid overdraw — trivial either way; do the check.

Wait one subtlety: ghost above? gy always ≥ cur.y ✓.

drawGrid:

```js
bctx.fillStyle='rgba(255,255,255,0.05)';
for(let x=1;x<COLS;x++) bctx.fillRect(x*CELL,0,1,BH);
for(let y=1;y<ROWS;y++) bctx.fillRect(0,y*CELL,BW,1);
```

With dpr scale, 1 logical px = dpr device px (2 at dpr2) — grid lines 2 device px. Slightly thick but okay; could use 1/dpr... Let me draw grid as fillRect(x*CELL-0.5, 0, 1, BH)? At dpr 2: x*CELL-0.5... simpler: draw line rect of width 1 centered on boundary: fillRect(x*CELL-0.5, 0, 1, BH) → spans boundary ±0.5 ✓ visually centered. Use that.

**drawCell final:**

```js
const tileCache=new Map();
function tile(color){
  let t=tileCache.get(color);
  if(!t){ t={ hi:mix(color,'#ffffff',0.45), face:color, lo:mix(color,'#000000',0.38), edge:mix(color,'#000000',0.6) }; tileCache.set(color,t); }
  return t;
}
function drawCell(ctx,px,py,s,color){
  const t=tile(color);
  ctx.fillStyle=t.edge; ctx.fillRect(px+1,py+1,s-2,s-2);
  ctx.fillStyle=t.face; ctx.fillRect(px+2,py+2,s-4,s-4);
  ctx.fillStyle=t.hi;   ctx.fillRect(px+2,py+2,s-4,Math.max(2,s*0.1));
  ctx.fillStyle=t.lo;   ctx.fillRect(px+2,py+s-2-Math.max(2,s*0.1),s-4,Math.max(2,s*0.1));
}
```

s=30: strips 3px ✓. s=24: strips 2.4→ max(2,2.4)=2.4 hmm non-integer px fine (dpr scaled). Use s*0.1 → 3 and 2.4 ✓.

Wait

=== answer so far ===