Mario-style platformer · ling-3.1-flash

Phaser 3.80.1. Now build the game. Classic Mario style: blue sky, clouds, hills, brick blocks, question blocks, pipes, green goomba-like enemies, coins, goal flagpole.

Level design: tile-based ground with gaps, floating platforms, coins, enemies patrolling, goal flag at end.

Key mechanics:
- Left/Right or A/D run, Space jump (also maybe Up/W). Prevent double jump via grounded check.
- Stomp enemy: bounce up (vy = -jumpVel * 0.7), defeat enemy (flatten animation / remove).
- Side contact → loss state (game over overlay).
- Fall into gap → loss.
- Coins: overlap → remove, increment count once.
- Goal flag → win state; maybe stop player controls.
- Camera follow with bounds (level width, height fixed).
- Restart button + R key: reset coins, enemies, player, camera, counters.

Generate graphics with Graphics textures via `this.textures.createCanvas` or generate from graphics: use `this.add.graphics` to draw then `texture.manager`... Best: create offscreen canvas, draw with its 2D context, then `this.textures.addCanvas('key', canvas)`. Or use `generateTexture` from a Graphics object: `graphics.generateTexture(key, width, height)`. Phaser 3 Graphics has `generateTexture(key, x, y, width, height)` — actually signature: `generateTexture(key, x, y, width, height)` in newer versions; older: `generateTexture(key, width, height)`. In 3.80, `generateTexture (key, x, y, width, height)` where x,y optional? Let me just use canvas-based generation to be safe — plain 2D canvas, no external assets. That's fully sandboxed-safe.

Plan textures:
- `ground` (grass top, dirt)
- `brick`
- `question` block (animated? static fine, maybe 2 frames)
- `solid` block (metal/used block)
- `pipe` top and body — pipe as one sprite with width; draw pipe as sprite 64x64 with cap.
- `coin` (spinning animation frames)
- `goomba` walk frames (2 frames), `goomba_flat`
- `flag` pole + flag, maybe draw pole via graphics in scene or texture.
- `cloud`, `hill`, `bush` decorations.
- Player: draw a little plumber-like character (red hat, blue overalls) with 2 run frames + jump frame.

Simplest robust approach: a helper `makeTexture(scene, key, w, h, drawFn)` creating canvas, drawing, adding texture, optionally frames.

Animations: create with frames from a spritesheet-like generated canvas with multiple frames. Use `this.textures.addCanvas` then `this.anims.create` with frame names from `texture.add`? For multiple frames, can create one canvas per frame and add to texture with `texture.add(frameKey, sourceIndex)`. `Texture.add` exists: `texture.add(key, sourceIndex)` — actually `Texture.add (key, sourceIndex, x, y, width, height)`. Hmm, addCanvas adds a source and returns texture; texture.add adds frames from additional sources. Let me recall: `this.textures.addCanvas(key, canvas)` returns Texture; then `texture.add('frame2', 1)` adds a frame using source index 1. Yes, `Texture.add` signature: `add(key, sourceIndex, x, y, width, height)`.

Alternative simpler: use `this.textures.generate(key, { data: ... })`? No.

Simplest: generate each animation frame as its own texture key, then `anims.create({ key, frames: [{key:'coin0'},...], frameRate, repeat:-1 })`. That works fine.

Physics: Arcade physics, gravity ~1800, moveSpeed 260, jumpVel -780. Player body setCollideWorldBounds true but with gaps in ground world bounds... world bounds: if collideWorldBounds true, falling into gap at bottom would collide with bottom of world. So set collideWorldBounds false horizontally? Actually need horizontal bounds. Better: set world bounds (0,0,levelW,H), camera bounds same; player collideWorldBounds true but then bottom collision prevents falling. Set `player.body.setCollideWorldBounds(true)` with custom check — easier: handle death when y > levelHeight + margin, and clamp x manually. Use `collideWorldBounds = false` and manually clamp player x within [8, levelW-8] when grounded... Simpler: set world bounds with `physics.world.setBounds(0,0,levelW,levelH)` and `player.setCollideWorldBounds(true)` then in update check if `player.y > levelH` — but it would never exceed if bottom collides. Phaser world bounds include bottom. Option: `world.setBounds(0, 0, levelW, levelH)` and player collides; then gap death: check if player's y > some kill line above the bottom? The bottom of world is at levelH; screen height maybe 540. Ground level y ~ 460. Kill line at y > 600 (below screen). With collideWorldBounds, player stops at levelH=... set world height large, e.g., levelH = 1200, so gaps let player fall 600px to kill line. Camera bounds keep view at top area (camera won't follow below since we clamp). That works: world height 1200, kill line 800 (below visible 540+). Camera Y fixed at 0 basically.

Actually simpler: don't set bounds collision; in update: `player.x = Phaser.Math.Clamp(player.x, 0, levelW - w)` and kill when y > 800. Gravity handles fall. Good.

Ground collision: static group with tile sprites. Player `collide` with platforms group. Enemy patrol: setVelocityX ±speed, flip on wall collision or at platform edges (edge detection optional; use wall collide + optional edge turn). Give enemies collide with platforms too so they patrol ground segments; add edge detection: check tile below ahead — simpler: patrol between minX/maxX assigned per enemy. I'll assign patrol bounds per enemy based on spawn (e.g., ±100px or until wall). Wall collision flip is robust. Edge detection: use `body.blocked.down` checks with a probe... keep wall-based plus manual min/max to be safe on platforms.

Stomp detection: player.vy > 0 and player.bottom - enemy.top < some threshold (e.g., player.y + h - enemy.y < enemy.height*0.6) → stomp: enemy flattened, player.vy = -520 bounce. Else side contact → die (unless invulnerable briefly? just die → game over overlay).

Also allow jump from enemy bounce.

Coins: overlap, `coin.disableBody(true,true)`, count++, play no audio (no assets, no audio needed).

Flag: pole at end; overlap → win: freeze player, show overlay, flag slide down maybe. Keep simple: show "YOU WIN!" overlay with restart.

HUD: coin count, score maybe. Display controls text. Restart button (HTML button) + R key.

Death: lose state overlay with restart. Also on death, brief animation (player pops and falls) then overlay after 1s.

Level layout (tile 40px): Let me design with a data array of strings for clarity.

Tile size 40. Level width ~ 200 tiles = 8000px. Rows: 13 rows * 40 = 520 height visible; world 1200.

Legend:
- `#` ground block
- `B` brick
- `?` question (coin block — maybe gives coin when hit from below; extra credit, but adds complexity; include: hitting from below gives coin +1 and turns to used block. Nice Mario touch. Implement via collision check of player head... use `collide` with callback checking relative velocity/position: if player.bottom < block.top + 12 and vy<0 → bump. With Arcade, use processCallback on collision: check player body top vs tile top.)
- `S` solid/used block
- `P` pipe (2 tiles wide, 2-3 tall) — represent with `p` pipe top-left, etc. Simpler: pipes placed manually as group of sprites.
- `C` coin (floating)
- `E` enemy spawn
- `F` flag
- `^` platform (floating solid)

Design level rows, 14 rows tall? Let's do ROWS=12, TILE=40 → 480 height, plus underground space below to 900. Screen: 960x540. Ground top at y = 480? Hmm, if rows=12, bottom row at y=440-480. Screen 540 shows 60px below ground — fine, gaps show sky there.

Let me write the map as strings. Width maybe 150 columns = 6000px. That's a lot to hand-write; I'll craft ~120 columns.

Simpler: build level programmatically with segments: ground with gaps at certain x ranges, plus explicit platforms/bricks/coins/enemies lists. More controllable than ASCII art. I'll do programmatic construction:

- Ground: fill columns 0..levelW/40 except gaps: gaps at [18-20], [36-38], [58-61], [76-78], [96-99].
- Platforms: floating blocks at various spots.
- Pipes: columns at x=30 (h=2), x=50(h=3), x=70(h=2), x=88(h=3) as obstacles.
- Bricks/question rows at y= 3 tiles above ground near start (classic).
- Enemies: spawn list on ground segments.
- Coins: arcs above gaps and rows.
- Flag at x = levelW - 200.

Player start x=60,y ground top.

Camera: `cameras.main.setBounds(0,0,levelW, 540)`; follow player with lerp, deadzone.

Question block hit: to keep simpler, make `?` blocks that when bumped from below spawn a coin pop (coin rises, count+1) and become used `S`. Implement via collision callback: when player collides with block and player.body.velocity.y < 0 and player top above block top → bump.

Let me write code.

Textures via canvas:

```js
function makeTex(scene, key, w, h, fn){
  const c = document.createElement('canvas'); c.width=w; c.height=h;
  const g = c.getContext('2d'); fn(g,w,h);
  scene.textures.addCanvas(key, c);
}
```

Note: textures created in `create()` (scene has textures available). Must be before sprite creation.

Player frames: player_run0, player_run1, player_jump, player_dead. Draw 28x40.

Character drawing (facing right):
- red cap: rounded rect top
- face skin
- blue overalls body
- brown shoes
Frame differences: leg positions.

Goomba: brown oval body, feet, angry eyes; 2 frames (feet alternate), flat frame.

Coin: gold circle with inner ellipse, 2 frames (wide/thin for spin).

Ground tile 40x40: dirt brown with green grass top 10px.

Brick 40x40: orange-brown with mortar lines.

Question 40x40: orange with "?" and rivets. Used: brown with rivets.

Pipe: draw 80 wide (2 tiles) x height variable; make pipe top (80x32) and pipe body (80x40) textures, stack.

Flag: pole texture (6x160 gray) and flag triangle green; flag sprite attached; pole static.

Cloud: white blobs. Hill: green triangle-ish. Bush.

Clouds/hills as decoration in background (depth).

HUD via DOM overlay (HTML/CSS) — simpler and crisp: coin count, "Controls: ← → / A D move, Space jump, R restart". Win/lose overlays as DOM. Restart button DOM. That's fine and doesn't count as external assets.

Game states: 'playing', 'dead', 'win'. On death: state='dying', tween player up then fall, then overlay.

Enemies list for restart: store spawn defs; on restart, destroy enemy group and rebuild; coins similarly rebuild from defs. Track coin positions list.

Restart: reset player pos/velocity, camera scrollX=0, coinCount=0, rebuild enemies & coins & question blocks, state playing, hide overlays.

Also flag: rebuild flag animation state.

Edge cases: stomp requires falling (vy>0). Bounce: set y = enemy.top - player.height to avoid overlap, vy=-560.

Enemy-enemy collision: skip.

Kill line: y > 720 (screen 540, below visible). With world height set maybe 900 for safety; camera bounds height 540.

Camera follow: `cameras.main.startFollow(player, true, 0.1, 0.1, ...)`? Use lerp with deadzone: `startFollow(player, true, 0.08, 0.1)` and clamp via bounds automatically. Also vertical: keep camera fixed y=0 (bounds height = 540 so it can't scroll down). setBounds(0,0,levelW,540).

Player width 28, height 40. Run accel: use setVelocityX directly for responsiveness: vx = dir*260. Jump: if grounded (body.blocked.down or touching.down) → vy=-820. Also jump buffering not necessary. Prevent double jump: only when `body.blocked.down` or `body.touching.down`. Also allow jump shortly after leaving ground? Keep strict: grounded check only — "prevent repeated mid-air jumping" satisfied.

Gravity 2000. Jump -860 gives height ~ v²/2g = 860²/4000 ≈ 185px ≈ 4.6 tiles. Good for 3-tile-high obstacles and 4-tile gaps horizontal: time up+down ~ 2*860/2000=0.86s * 260px/s ≈ 224px ≈ 5.6 tiles. Gaps max 4 tiles. OK.

Gaps: make 2-3 tiles wide mostly, one 4-wide.

Let me now also handle question block collision from below. Use `this.physics.add.collider(player, blocks, hitBlock, null, this)` where blocks = group of question/solid/brick. In hitBlock(player, block): if player.body.velocity.y < 0 && player.body.top < block.y + 16 → bump: if block.texture.key==='question' → become 'used', spawn coin popup above, count++. Small upward bump animation via tween of y offset.

Bricks: just solid (maybe bump anim). Fine.

Also player standing on question blocks — they're static solid.

Coins in world: physics-enabled sprites with allowGravity false, immovable; overlap check.

Coin pop animation: sprite that rises and fades (tween), no physics needed.

Enemy patrolling: `body.setVelocityX(speed*dir)`; collide with ground group → on wall blocked flip. Also flip at minX/maxX: store e.minX,e.maxX; in update if x<minX or >maxX flip. Give each enemy patrol range ~ ±120 around spawn, clamped to ground segment. I'll compute ranges manually per enemy in spawn list (startX, range).

Enemy update also: if dead (flat), remove after 0.5s.

Flag: pole at flagX; win when player.x + w > flagX (overlap with pole sprite). Then state='win', player auto-walks? Just freeze and show overlay after brief flag tween (flag slides down pole). Show overlay immediately with small delay via timed event 800ms.

Also add a "score" maybe not needed; coins count displayed: `COINS: n`.

Also level must be "completable" — ensure flag reachable, final ground segment to flag.

Let me write the level concretely. TILE=40. Ground top GY = 480 (row index 12 of 13 rows... let's define groundTopY = 440 with rows below filled to 480+). Actually simpler: ground surface y=440. Ground blocks drawn from y=440 down to y=520 (2 rows) — visual only; physics uses static sprites.

Let me set: TILE=40, groundTopY=440, screen 960x540.

Columns: level width 140 tiles = 5600px.

Gaps (columns, exclusive ranges): [16,18), [30,32), [44,47) (3 wide), [60,62), [74,76), [90,93) (3 wide), [108,110).

Pipes: at col 24 (2 wide, height 2 tiles: top y=440-80), col 52 (h=3), col 68 (h=2), col 84 (h=3), col 100 (h=2).

Wait pipes must not be inside gaps — col 24 between gap 16-18 and 30-32: ok.

Platforms (floating blocks rows at y=440-160=280 (4 tiles up) and y=440-240=200):
- Bricks at cols 8-11, y=280 with `?` at col 9? Classic: row of brick-?-brick-?-brick above start. Start at col 2. Put at cols 8..12 y=280: brick, ?, brick, ?, brick.
- Stairs before flag: cols 120-124 ascending then descending? Classic end staircase: cols 118-121 heights 1..4, then flag at 126.
- Floating platform cols 36-38 y=300 with coins above.
- Platform cols 50-53 y=280? pipe at 52 — move to cols 48-51 y=280? pipe at 52 h=3 occupies 52-53. ok.
- Platform cols 64-66 y=240.
- Coins arc over each gap.
- Coin rows on platforms.

Enemies (goombas) at ground: col 12, col 21, col 27, col 35, col 41, col 50, col 57, col 66, col 72, col 79, col 88, col 98, col 104, col 113. Each patrol ±1-2 tiles but clamp within segment.

Also enemies on some platforms? Keep ground only for simplicity.

Flag at col 128 (x=128*40=5120). End ground continues to col 140.

Staircase: cols 120 h1, 121 h2, 122 h3, 123 h4 (solid blocks) — player climbs then jumps to flag. Flag base at col 127.

Now write the code carefully.

Structure:

```html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Super Plumber Bros</title>
<style>...</style>
</head>
<body>
<div id="game"></div>
<div id="hud">...</div>
<div id="overlay">...</div>
<script src="phaser.min.js"></script>
<script>
// game code
</script>
</body>
</html>
```

Phaser config: type: Phaser.AUTO, width 960, height 540, physics: arcade {gravity:{y:2000}, debug:false}, scene: {preload, create, update}.

Since no assets, preload empty.

Texture creation in create via helper.

Detailed drawing functions:

Ground tile (40x40):
```js
(g,w,h)=>{
  g.fillStyle='#c84c0c'; // dirt
  g.fillRect(0,0,w,h);
  g.fillStyle='#a03808';
  // speckles
  ...
  g.fillStyle='#4caf2e'; // grass
  g.fillRect(0,0,w,12);
  g.fillStyle='#3d8f24';
  g.fillRect(0,12,w,4);
}
```

Brick:
```js
g.fillStyle='#c84c0c'; fillRect;
g.strokeStyle='#7a2c04'; lineWidth=3;
// mortar lines: horizontal mid, vertical offset rows
```

Question block: orange #f8a000 with border, rivets, '?' in white/brown.

Used block: #9c5a24 with rivets.

Solid block (stair): gray-ish rock #c84c0c? Mario uses different; use metal block #a0a0a0? Use "rock" texture similar to ground without grass.

Pipe top (80x40): green gradient, darker outline, highlight.
Pipe body (80x40): green with vertical highlights.

Player (28x40) frames:

```js
function drawPlayer(g, f){ // f: 0 run1, 1 run2, 2 jump, 3 dead
  // shoes
  // overalls
  // shirt arms red
  // face
  // cap
}
```

Let me draw simply:
- cap: red rounded rect (x2,y0,w-4,10), brim front (right side).
- head: skin rect (x4,y10,w-8,10), eye dark pixel, mustache brown.
- body: red shirt (x2,y20,w-4,8), blue overalls (x4,y26,w-8,10) with straps.
- legs/feet: brown shoes; frame0: both down; frame1: one lifted; jump: legs tucked.

Goomba (32x32):
- body: brown rounded dome, feet dark, white eyes with pupils, angry brows.
- frames alternate feet offset.
- flat: 32x12 squashed.

Coin (24x24): gold circle, darker outline, inner shine; frame1 narrow (width 8) for spin.

Cloud (96x48): white ellipses.
Hill (120x80): green triangle with darker outline + dots.
Bush (96x40): green circles.
Flag: pole (8x200) gray with green ball top; flag (40x28) green triangle with white emblem.

Now scene code:

```js
const TILE=40, GY=440, VIEW_W=960, VIEW_H=540;
const LEVEL_TILES=140, LEVEL_W=LEVEL_TILES*TILE;
const GRAV=2000, RUN=260, JUMP=860;
```

Gaps array, pipes, platforms, stairs, coins, enemies, bricks.

Build functions in create:

```js
this.ground = this.physics.add.staticGroup();
```

For each column not in gap: add ground tile at (col*TILE, GY) — one tile at surface (texture ground has grass top), plus fill below: add plain 'dirt' tile at GY+40 (and maybe GY+80 for looks, but only 540-440=100 visible below surface; two rows enough: GY and GY+40; third row GY+80 partially visible 20px... 440+80=520 <540, so add third row too for safety).

Pipes: for each pipe {col, h}: top at y=GY-h*TILE, body below. Pipe width 80 (2 cols). Mark those columns as occupied so ground still there (pipe sits on ground). Physics: static sprites in `solids` group.

Bricks/platforms/stairs: static sprites in `solids` (and question blocks in `blocks` group for bump handling; but they also need to collide — put question in same group with callback distinguishing by texture key).

Coins: `this.coins = this.physics.add.staticGroup()`? Overlap works with static. Use `this.physics.add.staticGroup(); coin = coins.create(x,y,'coin'); coin.setCircle? ` keep rectangle body; fine. Animate each coin: `coin.anims.play('spin')` — anims on static sprite works.

Enemies: `this.enemies = this.physics.add.group()`; create with velocity; collide with solids/ground: `this.physics.add.collider(this.enemies, this.solids)`; world bounds clamp manually: flip when x<minX||x>maxX.

Player: `this.physics.add.sprite(80, GY-40, 'player'); body.setSize(24,38)` maybe; setCollideWorldBounds false; manual clamp.

Colliders:
- player vs solids (collide, hitBlock callback for question bump)
- player vs ground (same group? combine ground+solids into one static group `world`) — yes use one static group for everything solid. Question blocks: put in `world` too, handle bump in callback by texture key.
- player vs enemies (collide, enemyHit)
- player vs coins (overlap, collectCoin)
- player vs flagpole (overlap, winFlag)

enemyHit(player, enemy): if state!=='playing' return; if enemy.dead return;
const stomp = player.body.velocity.y > 0 && (player.body.bottom - enemy.body.top) < 20;
Actually with high speeds, use: player.bottom - enemy.top <= enemy.body.height*0.5 + 8 and vy>0. Simpler robust: `player.body.velocity.y > 0 && player.body.bottom - enemy.body.top < 24`.

On stomp: enemy.dead=true; enemy.setTexture('goomba_flat'); enemy.body.enable=false; tween shrink? just flat + remove after 400ms. player.setVelocityY(-560); count score.

Else: killPlayer().

killPlayer: state='dying'; player.setTexture('player_dead'); body.enable=false? Do pop-up: vy=-700 with gravity, then fall below; after 900ms show lose overlay. Use scene.timeline or simple: `this.tweens.add`? I'll do: state='dying'; player.body.setEnable(false); player.setVelocity(0,-700); then in update if state==='dying': apply gravity manually to player y, when y>VIEW_H+100 → showLose(). Simpler: keep physics enabled but no collision: set `player.body.checkCollision.none = true`? Then gravity applies, falls through. Then check y>700 → showLose. 

winFlag: state='win'; player.body.setVelocity(0,0); player.body.enable=false? Keep simple: freeze: `player.body.setEnable(false)`; flag tween down; after 600ms show win overlay.

Restart: function resetGame(): 
- coins: destroy all coins in group, recreate from coinDefs; coinCount=0; update HUD.
- enemies: destroy, recreate from enemyDefs.
- question blocks: restore texture 'question' for those bumped: track list of block sprites with `isQuestion` flag; reset texture.
- flag: reset y.
- player: set position start, enable body, texture run, velocity 0.
- camera: scrollTo 0,0; cameras.main.setScroll(0,0).
- state='playing'; hide overlay.

Restart triggered by button click and 'R' key. Note: key listener active also during overlays.

HUD update: `coinText.textContent = coinCount`.

Controls display: DOM div bottom: "← → / A D — Move    Space — Jump    R — Restart".

Also add on-screen note of coins.

Camera: `this.cameras.main.setBounds(0,0,LEVEL_W,VIEW_H); this.cameras.main.startFollow(this.player, true, 0.1, 0.1);` With follow, vertical follows but bounds clamp at VIEW_H so y stays 0. Actually follow target moves up when jumping; camera y would try to follow but clamp keeps 0. Good. Set `this.cameras.main.setDeadzone(100, 0)`? With lerp 0.1 it's smooth. Hmm, startFollow with lerp: `startFollow(target, roundPixels, lerpX, lerpY)`. ok.

Also background: sky color via `this.cameras.main.setBackgroundColor('#5c94fc')` (classic Mario blue). Decorations: clouds/hills/bushes at various x, depth fixed (not parallax — fine).

Input: `this.cursors = this.input.keyboard.createCursorKeys();` plus A/D keys: `this.input.keyboard.addKeys({left:'A', right:'D', jump:'SPACE'})` — createCursorKeys already has space? It has `space`? CursorKeys includes up/down/left/right/space/shift. Yes, `cursors.space`. Also add A/D via addKeys. R key via addKey('R').

Jump handling: on keydown space (edge-triggered) check grounded. Use `this.input.keyboard.on('keydown-SPACE', ...)` plus also allow 'UP' and 'W'. Edge trigger prevents holding to re-jump; also grounded check prevents mid-air.

Let me also add jump only if state==='playing'.

Enemy edge detection: also flip if no ground ahead? With minX/maxX patrol bounds, not needed. Set enemy maxX = spawnX + range, minX = spawnX - range, where range chosen per enemy (e.g., 80-160) ensuring within segment. I'll set range=100 default and clamp to segment bounds manually in defs. To be safe, also flip on `body.blocked.left/right` from collider with world.

Also enemies fall into gaps if walk off? With minX/maxX clamping they turn before. Good.

Coin positions: arcs over gaps: for gap at cols [a,b): coins at cols a..b-1, y=GY-120 arc: y = GY-100 - sin curve. Plus rows on platforms: cols with y=platformY-40. Plus a few floating rows elsewhere.

Let me define coin defs:
- over each gap: 3 coins arc (or 2 for 2-wide gaps).
- above brick row at cols 8-12: coins at y=240? The brick row at y=280 (block occupies 280-320). Coins above at y=220, cols 8-12.
- platform cols 36-38 at y=300: coins y=240.
- platform cols 48-51 y=280: coins y=220.
- platform cols 64-66 y=240: coins y=180.
- platform cols 70-72? skip.
- row at cols 100-103 y=320 (above ground before pipe?) pipe at 100 — adjust: coins cols 96-99 y=340? gap at 90-93. Put coins after gap cols 94-97 y=360.
- stairs top coin.

Fine — details flexible. Ensure coins count reasonable (~30).

Question blocks: cols 9 and 11 in brick row (bricks at 8,10,12). Hitting gives coin.

Now enemy defs: ensure segments:
Segments (ground columns): 0-15, 18-29, 32-43, 47-59, 62-73, 76-89, 93-107, 110-139 (gaps: 16-17, 30-31, 44-46, 60-61, 74-75, 90-92, 108-109).

Enemies:
- col 12 (seg 0-15) patrol 12±2 tiles but avoid start: minX col 8? player starts col 2. Enemy at col 12 range ±60px (1.5 tiles).
- col 21 (seg 18-29): range 100.
- col 26: range 80.
- col 35 (seg 32-43): range 120.
- col 40: range 80.
- col 50 (seg 47-59): range 100 — but platform above at 48-51 y=280, fine.
- col 56: range 80.
- col 65 (seg 62-73): range 100.
- col 70: range 80.
- col 79 (seg 76-89): range 120.
- col 86: range 80.
- col 95 (seg 93-107): range 100.
- col 102: range 80.
- col 113 (seg 110-139): range 120.
- col 116: range 80.

Speed 60-80 px/s.

Pipes at cols: 24 (seg 18-29) h=2; 52 (seg 47-59) h=3; 68 (seg 62-73) h=2; 84 (seg 76-89) h=3; 100 (seg 93-107) h=2. Pipe occupies 2 columns (col, col+1). Enemies patrol range must not cross pipes — with minX/maxX computed as spawn±range, could push into pipe but wall collision flips them anyway (collider with world). Wall flip handles it. Good — implement flip on blocked.left/right.

Enemy update:
```js
this.enemies.getChildren().forEach(e=>{
  if(e.dead) return;
  if(e.body.blocked.left || e.x < e.minX){ e.setVelocityX(e.speed); e.flipX=false... }
  else if(e.body.blocked.right || e.x > e.maxX){ e.setVelocityX(-e.speed); }
  // flip texture based on direction
  e.setFlipX(e.body.velocity.x < 0);
});
```

Draw goomba facing left by default; flip when moving right. Whatever.

Bump callback for question blocks:

```js
hitBlock(player, block){
  if(block.texture.key === 'question'){
    if(player.body.velocity.y < 0 && player.body.top < block.y + 20){
      block.setTexture('used');
      this.coinCount++; updateHUD;
      spawnCoinPop(block.x, block.y-24);
      bumpTween(block);
    }
  } else if (brick) { bumpTween small }
}
```

Note: collide callback fires on any contact; condition checks head hit. Player body top vs block bottom: head hit when player moving up and player.body.top <= block.body.bottom + something. Use: `player.body.velocity.y < 0 && player.body.bottom < block.body.y + block.body.height*0.5`? Hmm. Standard approach: if player's bottom is above block's vertical center → head bump. `player.body.bottom - block.body.top < block.body.height/2` means player mostly below... Let me think: head hit → player's top near block's bottom, i.e., player.body.top > block.body.bottom - 12 and player above: player.body.top < block.body.bottom. Condition: `player.body.velocity.y < 0 && (block.body.bottom - player.body.top) < 14`. That means player top is within 14px of block bottom → head contact. Good.

Bump tween: `this.tweens.add({targets:block, y: block.y-8, duration:80, yoyo:true})` — but static body position won't follow tween! Static bodies: tweening sprite y desyncs body. For static group, better tween via `block.setOffset`? Simplest: skip visual bump tween for blocks, or temporarily convert: too complex. Alternative: use a separate bounce by animating texture offset... Skip bump animation; just texture swap + coin pop. Acceptable.

Actually I can do bump properly: instead of staticGroup for question blocks, use regular immovable physics sprites (`this.physics.add.staticGroup` vs `this.physics.add.group` with immovable). Regular sprites can be tweened and body follows? Tweening sprite position updates body automatically (Arcade body syncs to sprite each frame). Yes! Arcade physics body position follows sprite position. So use `this.physics.add.group()` with `immovable:true, allowGravity:false` for all solid blocks? Static groups also sync bodies on setPosition... but tween on static sprite: static body position updates when sprite moves? Static bodies have separate `updateFromGameObject` — static body syncs on `body.updateFromGameObject()` which is called each frame for static bodies? In Phaser 3, static bodies sync position in `StaticPhysicsBody.update` — actually static bodies are synced via `body.updateFromGameObject()` called in `StaticBody.update` each frame? I believe Arcade static bodies do sync each frame (they call updateFromGameObject in preUpdate). Hmm, not guaranteed across versions.

Safer: use dynamic group with immovable for blocks. But then blocks need `setImmovable(true)` and `setVelocity(0)`. Collisions with player work. Enemies too. OK — I'll create `this.world` as `this.physics.add.staticGroup()` for ground (never moves) and `this.blocks` as `this.physics.add.group({immovable:true, allowGravity:false})` for bricks/questions/stairs/pipes? Pipes never move either; put pipes in static group. Blocks (brick/question) in dynamic-immovable group so bump tween works.

Colliders: player vs world (collide), player vs blocks (collide, hitBlock), enemies vs world, enemies vs blocks.

Ground fill: to reduce sprite count, could use one big ground sprite per segment with grass top. Segments: 8 segments → 8 sprites + below-fill maybe skip (screen shows below ground only 100px; draw a dirt extension rect via a long sprite 'groundDeep' per segment? Use one sprite per segment for surface (with grass) and one for depth (h=100, dirt only). That's 16 sprites total instead of ~350. Much better. But collision body = whole sprite — fine.

Segment sprite: width = segTiles*40, height 40, texture needs variable width — canvas texture can be any width; generate per-segment? Textures are per-key; generate a 40x40 tile and scale sprite: `sprite.setScale(segTiles,1)` — scaling static sprite scales body too (static body uses scaled size — yes, Arcade static body accounts for scale). Scaling 40px texture to 560px wide stretches grass pattern — acceptable but blurry. Alternatively generate texture per segment width dynamically with unique key. Easy: `makeTex(scene, 'groundSeg'+i, w, 40, drawGround)` — tiles the grass pattern across width. I'll do that: generate per-segment textures. 8 segments → 8 keys, fine. Same for depth: 'dirtDeep' 40x100 scaled... generate per segment too with speckle pattern. Or just one 'dirt' texture 40x40 repeated via multiple sprites... simpler: per-segment deep texture of height 120.

Hmm wait — visible area below surface: 540-440 = 100px. Deep texture height 120 to cover. Camera never scrolls down (bounds height 540). Good.

Pipes: per-pipe textures with exact height? Generate 'pipeTop' 80x40 and 'pipeBody' 40x40 (scaled per height: setScale(2, h-1)?) Pipe width 80 = 2 tiles; body sprite 80x40 scaled (1, h-1). Scale stretches vertical lines — fine.

Stairs: use 'block' texture (rock) 40x40 individual sprites in static group.

Flag: pole sprite at flagX: texture 'pole' 8x200, positioned x, y=GY-200. Ball on top. Flag sprite 'flag' 44x32 attached at pole top left; on win, tween flag down to y=GY-60.

Also add a small castle at end? Nice touch: draw simple castle texture after flag at col 132-136. Optional — add simple castle for completeness. I'll add a small castle graphic (static decoration, non-colliding) — or make it solid? Just decoration behind. Keep decoration only.

Clouds: place ~10 clouds at various x,y. Hills at ground level. Bushes.

Now HUD/overlay DOM:

```html
<div id="hud">
  <div id="coins">🪙? no emoji maybe use drawn coin icon via CSS circle. Use text "COINS × 0"</div>
  <div id="state"></div>
</div>
<div id="controls">LEFT/RIGHT or A/D — Move · SPACE — Jump · R — Restart</div>
<button id="restart">↻ Restart</button>
<div id="overlay" class="hidden"><div id="panel"><h1 id="title"></h1><p id="msg"></p><button id="again">Restart</button></div></div>
```

Styling: pixel font (monospace), Mario colors, text-shadow.

Overlay hidden by default; show on win/lose.

Edge: after win, player might overlap enemies — state checks prevent death.

Also "falling into a gap causes loss" — kill line y > 700.

Let me also ensure player can't run off left edge: clamp x >= 0.

Write update:

```js
update(time, delta){
  if(this.state==='playing'){
    let dir=0;
    if(this.cursors.left.isDown || this.keys.left.isDown) dir=-1;
    else if(this.cursors.right.isDown || this.keys.right.isDown) dir=1;
    this.player.setVelocityX(dir*RUN);
    if(dir!==0){ this.player.anims.play('run', true); this.player.setFlipX(dir<0); }
    else this.player.anims.stop(); // set frame standing
    // jump handled by keydown events
  }
  // enemy patrol
  ...
  // coin spin handled by anim
  // death by gap
  if(this.player.y > 700 && this.state!=='gameover') this.loseByGap();
  if(this.state==='dying'){ /* physics fall */ if(this.player.y>700) showLose(); }
}
```

Dying: I said keep body enabled but disable collisions: `this.player.body.checkCollision.none = true`? There's `body.checkCollision.up/down/left/right` and `body.enable`. Set `player.body.checkCollision.none = true` — hmm property is `checkCollision = {up,down,left,right,none}`? Arcade Body has `checkCollision` object with `none` flag? It has `body.checkCollision.none`? There is `Body.checkCollision` with properties up/down/left/right and `Body.checkCollision.none`? I recall `body.checkCollision.none` doesn't exist; there's `body.enable=false`. Alternative: on death, set velocity up and let it collide — it might land on ground and sit there. Better: set `player.body.setEnable(false)` and manually integrate: in update during 'dying': `player.y += player.body.velocity.y * delta/1000; player.body.velocity.y += GRAV*delta/1000;` — manual gravity. Then when y>700 → showLose. Clean.

Jump input:

```js
this.input.keyboard.on('keydown', (e)=>{
  if(e.code==='Space'||e.code==='ArrowUp'||e.code==='KeyW'){ this.tryJump(); e.preventDefault(); }
  if(e.code==='KeyR') this.resetGame();
});
```

tryJump: if state playing and (player.body.blocked.down || player.body.touching.down): setVelocityY(-JUMP); play jump sound? no audio. 

Also prevent page scroll on space/arrows: e.preventDefault().

Enemy stomp bounce: setVelocityY(-JUMP*0.65) ≈ -560.

Also add small score popup? skip.

Coin collection: `this.physics.add.overlap(player, this.coins, collectCoin, null, this)`:

```js
collectCoin(player, coin){
  if(!coin.active) return;
  coin.disableBody(true, true);
  this.coinCount++; this.hudCoins.textContent = this.coinCount;
  // sparkle tween? skip
}
```

disableBody on static group coin: staticGroup children — disableBody(true,true) works (disables and hides). On reset, we rebuild coins anyway.

Question block coin: same count.

Now reset: rebuild groups. Implementation:

```js
buildCoins(){ this.coins.getChildren().forEach(c=>c.destroy()); this.coins.clear(true,true)? 
```
Simpler: `this.coins.clear(true, true)` destroys children. Then create from defs.

Same enemies. Blocks: keep block sprites, reset texture to 'question' where `block.isQuestion`.

Reset flag: `this.flag.setY(this.flagHomeY)`.

Camera: `this.cameras.main.setScroll(0,0)` — with follow active, it will re-follow next frame; player at start so scrollX→0. Also `this.cameras.main.startFollow` remains. Fine.

Player: `this.player.setPosition(START_X, START_Y); this.player.body.setEnable(true); this.player.setVelocity(0,0); this.player.setTexture('player'); this.player.body.checkCollision... reset not needed since we didn't disable. setFlipX(false); anims stop.`

State = 'playing'; hide overlay.

Also reset `this.coinCount=0`.

One more: enemies dead flag removed since rebuilt.

Now, question block texture swap: block textures 'question' and 'used' same size 40x40.

Bricks: 'brick'. Bump: only question gives coin; brick just tiny bounce? skip bounce.

Let me also add `this.physics.add.collider(this.enemies, this.blocks)`.

Flag overlap: `this.physics.add.overlap(player, this.flagPole, reachFlag, null, this)` — flagPole static sprite with body (or use a zone). Use static group with pole sprite; body covers pole. Player touches pole → win.

Win sequence: state='win'; player.body.setEnable(false)? Then player frozen mid-air possibly. Better: keep physics on but zero velocity and make invulnerable: simplest: `this.player.body.setVelocity(0,0); this.player.body.setEnable(false);` freeze. Flag tweens down. After 700ms show overlay "COURSE CLEAR!".

Also walk-off: classic Mario walks right after flag — skip.

Time to write the actual code. Also decorative: add "x" count of coins total? Show "COINS: n". Maybe also show "WORLD 1-1".

Let me write drawing helpers carefully.

```js
function makeTexture(scene, key, w, h, draw){
  const c = document.createElement('canvas');
  c.width = w; c.height = h;
  const ctx = c.getContext('2d');
  draw(ctx, w, h);
  if(!scene.textures.exists(key)) scene.textures.addCanvas(key, c);
}
```

Ground segment texture (width variable):

```js
function drawGround(ctx,w,h){
  ctx.fillStyle='#d18a4a'? 
```

Mario ground: orange-brown with black outline speckles, green grass top.

```js
ctx.fillStyle='#e79b4a'; fillRect all? 
```
Classic SMB ground: light orange with dark speckles. Let's do:
- base '#e09b4f'
- darker border lines: '#8a4b12' grid lines every 20px? 
- grass: '#3fae2a' top 12px with darker '#2c7d1c' bottom edge, plus little triangles.

Dirt deep: base '#e09b4f' with speckles, no grass.

Brick: base '#c1540c'? SMB brick orange-red: '#d2691e' with black mortar lines.

Question: base '#f8b800', border '#7a4a00', rivets, '?' white with shadow.

Used: base '#b06a28' with rivets.

Rock (stairs): base '#c8763a' with bevel.

Pipe: greens: '#3fae2a' base, '#1e6b12' dark, '#7de05a' highlight.

Player frames — write drawPlayer(ctx, frame):

```js
function drawPlayer(ctx, frame){
  const w=28,h=40;
  // helper rect
  // legs
  ctx.fillStyle='#5a2d0c'; // shoes
  if(frame===1){ // run frame 2: legs apart
    ctx.fillRect(2,34,10,6); ctx.fillRect(16,32,10,6);
  } else if(frame===2){ // jump: legs tucked
    ctx.fillRect(2,32,10,6); ctx.fillRect(16,34,10,6);
  } else { // run1/stand: both down
    ctx.fillRect(3,34,9,6); ctx.fillRect(16,34,9,6);
  }
  // overalls
  ctx.fillStyle='#2456d8';
  ctx.fillRect(5,22,18,13);
  // shirt arms
  ctx.fillStyle='#e0301e';
  ctx.fillRect(2,20,24,7);
  // straps
  ctx.fillStyle='#2456d8';
  ctx.fillRect(7,20,4,6); ctx.fillRect(17,20,4,6);
  // buttons
  ctx.fillStyle='#ffd23e';
  ctx.fillRect(8,26,3,3); ctx.fillRect(17,26,3,3);
  // head
  ctx.fillStyle='#ffcf9e';
  ctx.fillRect(6,8,17,9);
  // cap
  ctx.fillStyle='#e0301e';
  ctx.fillRect(4,2,19,7);
  ctx.fillRect(15,7,12,3); // brim to the right
  // eye
  ctx.fillStyle='#222';
  ctx.fillRect(17,10,3,4);
  // mustache
  ctx.fillStyle='#5a2d0c';
  ctx.fillRect(14,15,9,3);
  // nose
  ctx.fillStyle='#ffcf9e'? skip
}
```

Frame 0 vs stand: same; fine — run anim frames [0,1] plus maybe [0]. OK.

Goomba (32x32):

```js
function drawGoomba(ctx, frame, flat){
  if(flat){ ctx.fillStyle='#a0522d'; ellipse squashed; eyes lines; return; }
  // feet
  ctx.fillStyle='#3a1c08';
  if(frame===0){ ctx.fillRect(2,26,12,5); ctx.fillRect(18,26,12,5);}
  else { ctx.fillRect(0,26,12,5); ctx.fillRect(20,26,12,5);}
  // body
  ctx.fillStyle='#a0522d';
  rounded dome: ellipse at (16,16) rx15 ry14
  // face
  eyes white with pupils, angry brows
}
```

Use ctx.ellipse.

Coin (24x24): frame0 full, frame1 thin:

```js
function drawCoin(ctx, frame){
  ctx.save(); translate(12,12);
  const rx = frame===0?10:4;
  ctx.fillStyle='#f8c800'; ellipse(0,0,rx,11);
  ctx.strokeStyle='#a86e00'; lineWidth 2; stroke;
  ctx.fillStyle='#ffe98a'; ellipse(-2,-3, rx*0.4, 5);
}
```

Cloud (110x50): three white ellipses with light blue outline.

Hill (140x90): green triangle with rounded top, darker dots.

Bush (100x44): green circles cluster.

Pole (10x200): gray-green vertical with segments.

Flag (48x36): green triangle pointing right? Flag hangs from pole pointing left in SMB. Draw triangle with white circle.

Castle (160x140): simple: brown/tan bricks, battlements, door, window.

Now the level build code:

```js
const GAPS=[[16,18],[30,32],[44,47],[60,62],[74,76],[90,93],[108,110]];
function inGap(col){ return GAPS.some(([a,b])=>col>=a&&col<b); }
```

Segments: compute contiguous runs 0..139 not in gap.

```js
const segs=[]; let start=0;
for(let c=0;c<=LEVEL_TILES;c++){
  if(c===LEVEL_TILES || inGap(c)){
    if(c>start) segs.push([start,c]);
    start=c+1;
  }
}
```

Wait inGap(c) for c in gap → segment ends at c. start=c+1. Good.

Ground sprites per segment:

```js
segs.forEach(([a,b],i)=>{
  const w=(b-a)*TILE;
  makeTexture(this,'gsurf'+i,w,40,(ctx,w,h)=>drawGroundSurf(ctx,w,h));
  const s=this.world.create(a*TILE, GY, 'gsurf'+i);
  s.refreshBody(); // static group create auto? staticGroup.create returns sprite with static body; setSize? texture size used.
  makeTexture(this,'gdeep'+i,w,120, drawGroundDeep);
  const d=this.add.image(a*TILE, GY+40+60, 'gdeep'+i).setOrigin(0,0); // decoration, no physics
});
```

Hmm deep image origin (0,0) at y=GY+40. Height 120 → covers to 600. But camera bounds height 540, so only 100 visible. fine.

staticGroup.create with texture: body size = frame size. Good.

Pipes:

```js
const PIPES=[{c:24,h:2},{c:52,h:3},{c:68,h:2},{c:84,h:3},{c:100,h:2}];
PIPES.forEach(p=>{
  const x=p.c*TILE, topY=GY-p.h*TILE;
  const top=this.world.create(x, topY, 'pipeTop'); // 80x40
  top.setOrigin(0,0); // careful: static body with origin — body offset accounts origin? Static body position = sprite position minus origin*size? Arcade body syncs to sprite: body.x = sprite.x - sprite.originX*width... Actually Arcade body position is based on sprite position and origin? Body.x = sprite.x - sprite.offsetX... Hmm. For sprites, body position = position - origin*size + offset. I think Arcade physics accounts for origin (body.updateFromGameObject sets x = gameObject.x - gameObject.originX * width... let me recall: `Body.x = gameObject.x - (gameObject.originX * gameObject.width)`? No... 
```

Actually in Phaser 3 Arcade, `body.x` is the top-left of the physics body, and it syncs with sprite position accounting for origin: `body.x = sprite.x - sprite.displayWidth * sprite.originX`? Hmm, no — Arcade body sync: `this.x = gameObject.x; this.y = gameObject.y;` then position is treated as top-left unless... Let me recall Body.updateFromGameObject:

```js
updateFromGameObject() {
  this.x = this.gameObject.x;
  this.y = this.gameObject.y;
  ...
}
```

And Body.x is top-left? But sprites with origin 0.5: the body is centered on sprite position? In Phaser 3, Arcade body position corresponds to top-left of the body, and when syncing, it uses `gameObject.x - originX*width`? I believe `Body.updateFromGameObject` does:

```js
this.x = this.gameObject.x - (this.gameObject.originX * this.gameObject.width) + this.offset.x? 
```

Hmm. In Phaser 3.x, `Body.updateFromGameObject`:
```js
updateFromGameObject ()
{
    this.x = this.gameObject.x - this.offset.x;
    this.y = this.gameObject.y - this.offset.y;
    ...
}
```
No that's not right either. Let me think about known behavior: sprite at (100,100) with default origin (0.5,0.5), body syncs so body center is at (100,100) — i.e., body.x = 100 - width/2. Yes, Arcade accounts for origin: in `updateFromGameObject`, `this.x = this.gameObject.x - (this.gameObject.originX * this.gameObject.width)`? Hmm, actually I recall it uses `getTopLeft`:

```js
updateFromGameObject () {
    this.x = this.gameObject.x;
    this.y = this.gameObject.y;
    this.width = this.gameObject.width; ...
}
```

No. Let me just check: In Phaser 3, `Sprite` with origin 0.5 at x=100 — physics body.x = 100 - width/2? Testing knowledge: `body.setOffset` exists to adjust. And `body.updateFromGameObject` in source (v3.80):

```js
updateFromGameObject ()
{
    const go = this.gameObject;
    this.x = go.x - (go.width * go.originX) ... 
```

Hmm I genuinely don't remember exactly. I recall: `this.x = go.getLeft()`? Something like:

```js
updateFromGameObject () {
    this.x = this.gameObject.x;
    this.y = this.gameObject.y;
    ...
    this.updateCenter();
}
```

and body position is center-based internally? Arcade Body has x,y as top-left and center computed. The sync: `this.x = this.gameObject.x - this.gameObject.originX * this.gameObject.width`? 

To avoid uncertainty: keep origin at default (0.5) and position sprites by center: x = a*TILE + w/2, y = GY + 20. That works regardless of how origin is handled, since body syncs to sprite consistently. For all physics sprites, use center positioning. For decoration images, set origin(0,0) freely (no physics).

So: ground surface sprite center: (a*TILE + w/2, GY+20). Pipe top center: (x+40, topY+20). Pipe body: (x+40, topY+40 + (p.h-1)*20). Blocks: center (col*TILE+20, rowY+20). Coins center. Player: center.

OK.

Brick row: cols 8..12 at y=280: pattern brick, question, brick, question, brick. Question blocks marked isQuestion.

Also second row higher? Add floating '?' at col 10 y=200? Maybe skip.

Platforms (floating block rows):
- cols 36-38 at y=300 (3 blocks 'block' rock or brick). Use brick texture.
- cols 48-51 at y=280 (4 bricks).
- cols 64-66 at y=240.
- cols 78-80 at y=300? pipe at 84 h3... fine, add.
- cols 96-98 at y=280.
- cols 112-114 at y=300.

Stairs near end: cols 120(1),121(2),122(3),123(4) rock blocks stacked. Then gap? no, ground continues. Flag at col 128. Castle at cols 132-137 decoration.

Wait — need player to jump from stair top (col 123, top y=GY-160=280) toward flag at 128 (x=5120): distance from col 123 end (124*40=4960) to pole 5120 = 160px, drop from 280 to 440 — easy.

Coins defs:

```js
const COINS=[];
// over gaps
GAPS.forEach(([a,b])=>{ for(let c=a;c<b;c++){ COINS.push({x:c*TILE+20, y:GY-110 - Math.sin((c-a+0.5)/(b-a)*Math.PI)*30}); }});
```
For 2-wide gap: 2 coins. 3-wide: 3.

```js
// brick row above
for(let c=8;c<=12;c++) COINS.push({x:c*TILE+20,y:220});
// platforms
[[36,38,300],[48,51,280],[64,66,240],[78,80,300],[96,98,280],[112,114,300]].forEach(([a,b,y])=>{ for(let c=a;c<=b;c++) COINS.push({x:c*TILE+20,y:y-50}); });
// ground-level scattered
[14,22,34,58,72,82,94,106,118].forEach(c=>COINS.push({x:c*TILE+20,y:GY-70}));
```

Ensure coins not inside pipes: col 24-25 pipe... scattered list avoids those. Coins at y=GY-70=370, pipe at col 24 top at GY-80=360 — coin at col 24 would overlap pipe; not in list. OK.

Enemies defs:

```js
const ENEMIES=[
 {c:12,range:70,spd:60},{c:21,range:110,spd:70},{c:26,range:80,spd:60},
 {c:35,range:120,spd:70},{c:40,range:80,spd:60},
 {c:50,range:100,spd:70},{c:56,range:80,spd:60},
 {c:65,range:100,spd:70},{c:70,range:80,spd:60},
 {c:79,range:120,spd:70},{c:87,range:80,spd:60},
 {c:95,range:100,spd:70},{c:102,range:80,spd:60},
 {c:113,range:120,spd:70},{c:117,range:80,spd:60}
];
```

minX = c*TILE - range, maxX = c*TILE + range. Wall collision with pipes/edges flips too.

Hmm enemy at col 50 with range 100 → minX=1900 (col 47.5), maxX=2100 (col 52.5) — pipe at col 52 (x=2080-2160). maxX 2100 inside pipe → wall flip at pipe edge. OK.

Enemy at col 26 range 80: 26*40=1040, min 960 (col 24) — pipe at col 24 (960-1040). Enemy spawns at 1040 which is pipe right edge! Move to col 27: 1080, range 80 → min 1000 (inside pipe) → wall flip. OK use col 27.

Enemy col 21 range 110: 840±110 → 730..950; pipe at 960. ok.

Enemy col 12 range 70: 480±70 → 410..550. Player start col 2 (x=80). Fine.

Now decorations: clouds at various x (every ~500px, y 60-140), hills at ground behind (y=GY), bushes.

```js
for(let i=0;i<14;i++){ const x=i*430+ (i%3)*60; this.add.image(x, 70+(i%4)*35, 'cloud').setOrigin(0.5,0.5); }
hills at x=300,1100,2300,3100,3900,4700: this.add.image(x, GY, 'hill').setOrigin(0.5,1);
bushes at x=600,1500,...: origin(0.5,1) at GY.
```

Castle at end: image at (133*TILE, GY) origin(0.5,1).

Flag: pole at x=128*TILE+16 (center of pole sprite 10 wide → x=5130?). Let's define FLAG_X = 128*TILE + 20 = 5140. Pole sprite center (FLAG_X, GY-100) with texture 10x200 → top at GY-200=240. Ball on top at (FLAG_X, 240). Flag sprite: origin (0,1)? Flag hangs left of pole: texture 48x36 drawn with pole attachment at right edge. Place flag at (FLAG_X-4, 250) origin (1,0) so its right edge at pole. On win, tween y to GY-40.

Flagpole physics: static sprite in world group? If pole in world, player collides with pole — blocking. Better: overlap zone: `this.physics.add.staticGroup()` separate 'flagGroup' with overlap only. Or use a Zone: `this.add.zone(FLAG_X, GY-100, 20, 200)` with physics enabled via `this.physics.add.existing(zone)`. Simpler: static sprite with invisible texture? Use zone:

```js
const pole = this.add.zone(FLAG_X, GY-100, 24, 200);
this.physics.add.existing(pole, true); // static
this.physics.add.overlap(this.player, pole, reachFlag, null, this);
```

Zone as static body works.

reachFlag: if state!=='playing' return; state='win'; ...

Now anims:

```js
this.anims.create({key:'run', frames:[{key:'player0'},{key:'player1'}], frameRate:8, repeat:-1});
this.anims.create({key:'coinSpin', frames:[{key:'coin0'},{key:'coin1'}], frameRate:6, repeat:-1});
this.anims.create({key:'goombaWalk', frames:[{key:'goomba0'},{key:'goomba1'}], frameRate:6, repeat:-1});
```

Player jump frame: set texture 'player2' when rising/falling, run when grounded & moving, 'player0' when idle.

In update: if !grounded → setTexture('player2') (but anim playing overrides... stop anim first). Manage:

```js
if(dir!==0 && grounded){ player.anims.play('run',true); }
else { player.anims.stop(); player.setTexture('player' + (grounded? '0':'2')); }
```

anims.stop(null, true) resets frame. Use `this.player.anims.stop()` then setTexture.

Flip: goomba drawn facing left; when moving right flipX=true. Player drawn facing right; moving left flipX=true.

Now overlays:

```js
function showOverlay(title, msg, cls){ ... }
```

Lose: "GAME OVER", "You lost a life!" + Restart button.
Win: "COURSE CLEAR!", "You reached the flag!" + Restart.

Also update a small "status" text.

Restart button in HUD always visible.

Edge: R key during 'dying' — allow restart anytime. resetGame sets state='playing'.

resetGame must also re-enable player body: after dying we set body enable false → setEnable(true). After win same.

Also during 'dying', player manual fall; reset before that matters.

Coin pop effect: create sprite 'coinPop' at block pos, tween y-40 & alpha, destroy. Use plain sprite with physics disabled (just visual). `this.add.sprite(x,y,'coin0')` then tween. But count should increase once — yes in hitBlock.

Also add floating "+1" text? skip.

Sound: none (no assets allowed).

Now, potential issue: `this.world.create()` for staticGroup requires texture exists — create textures at start of create().

Also `makeTexture` for per-segment keys each reset? Ground never rebuilt — only coins/enemies rebuilt. Good.

Static group `this.world = this.physics.add.staticGroup();`

Blocks group: `this.blocks = this.physics.add.group({ allowGravity:false, immovable:true });` — when creating with group.create, set per-sprite? group config applies. Blocks: `const b=this.blocks.create(x,y,key); b.setImmovable(true); b.body.setAllowGravity(false);` Actually group config `{immovable:true, allowGravity:false}` sets defaults for children? Group config supports `immovable` and `allowGravity`? `this.physics.add.group({ immovable: true, allowGravity: false })` — yes, these are applied via `setImmovable` and `setAllowGravity` on children? The group config keys are passed to `set`... I believe physics group config accepts `allowGravity`, `immovable`, `gravity`, etc. To be safe, set explicitly per sprite.

Enemy group: `this.physics.add.group({ allowGravity:true, immovable:false })` default fine; set `body.setCollideWorldBounds(false)`.

Enemy-body vs world static collider handles ground. Enemy gravity applies.

Player: `this.physics.add.sprite(...)`; `body.setSize(22,38)` with offset to center: `body.setOffset(3,2)` (sprite 28x40). Keep simple: default size 28x40 fine.

Camera: 

```js
this.cameras.main.setBounds(0,0,LEVEL_W,VIEW_H);
this.cameras.main.setBackgroundColor('#5c94fc');
this.cameras.main.startFollow(this.player, true, 0.12, 0.12);
```

Hmm vertical follow: player jumps → camera tries to move up, clamped at 0. Ground at 440, player at 400 → camera y target = player.y - 270 = 130 → clamped to 0? setBounds height 540 means max scroll y = 0 (540-540). So camera y always 0. 

But wait: follow with deadzone default 0 — camera centers on player x immediately with lerp. Fine.

Sky: also draw background gradient? Solid color fine, plus clouds.

Kill line: y > VIEW_H + 160 = 700.

Now write everything. Also handle window resize? Fixed 960x540, CSS scale to fit: `#game canvas { max-width:100%; }` Phaser scales via CSS? Canvas fixed size; add CSS `canvas{image-rendering:auto}` and center. Keep simple: body flex center, background dark.

Prevent arrow/space scrolling: keydown preventDefault for game keys.

Also add touch controls? Not required. Skip.

Let me now write the full file.

Also verify Phaser API details for 3.80:
- `this.textures.addCanvas(key, canvas)` ✓.
- `this.physics.add.staticGroup()` ✓; `.create(x,y,key)` ✓.
- `group.clear(true,true)` — destroys children ✓ (removeFromScene, destroyChild).
- `this.anims.create` ✓.
- `sprite.anims.play(key, true)` ✓.
- `this.tweens.add` ✓.
- `this.input.keyboard.on('keydown', cb)` ✓. Also `keydown-SPACE` events. Using general keydown with e.code.
- `this.cameras.main.startFollow(target, roundPixels, lerpX, lerpY)` — signature: `startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)` ✓. Hmm in 3.80 signature: `startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)` where lerp is 0..1. ✓.
- `zone` with `physics.add.existing(zone, true)` ✓ static.

One concern: `staticGroup.create` sets body size from texture frame — for scaled textures we don't scale, we generate exact sizes. ✓.

Enemy stomp check details: player falling vy>0 and player bottom near enemy top. With delta 16ms and vy up to ~1000, movement per frame ~16px — threshold 24 ok.

Also player might hit enemy from below while jumping up through? Enemy on ground, player jumps into it from side/below → side contact → death. That's classic Mario behavior (dying from below contact). OK.

Invulnerability after stomp-bounce? Not needed.

What about two enemies overlapping player simultaneously — first stomp kills one, other side contact kills. Fine.

Let me also make enemies turn around at ledges? They have minX/maxX so they never walk off. ✓.

Write HUD with total coins? Show "× N". Also maybe show enemies defeated count? Not required.

Now write code. I'll be careful with the draw functions.

Also add subtle animated "?" shimmer? skip.

Let me write the HTML file now.

```js
const config = {
  type: Phaser.AUTO,
  width: 960, height: 540,
  parent: 'game',
  backgroundColor: '#5c94fc',
  physics: { default:'arcade', arcade:{ gravity:{y:GRAV}, debug:false } },
  scene: { preload, create, update }
};
new Phaser.Game(config);
```

Full code:

```js
'use strict';
const TILE=40, GY=440, VIEW_W=960, VIEW_H=540;
const LEVEL_TILES=140, LEVEL_W=LEVEL_TILES*TILE;
const GRAV=2000, RUN_SPEED=260, JUMP_VEL=860;
const START_X=90, START_Y=GY-40;
const KILL_Y=700;
const FLAG_COL=128, FLAG_X=FLAG_COL*TILE+20;
```

Texture helpers + draw functions as above.

Level data as above.

Scene functions.

Let me write out drawGroundSurf:

```js
function drawGroundSurf(ctx,w,h){
  ctx.fillStyle='#e09b4f'; ctx.fillRect(0,0,w,h);
  // speckles
  ctx.fillStyle='#b5722f';
  for(let x=8;x<w;x+=24){ for(let y=22;y<h;y+=18){ ctx.fillRect(x,y,4,4); } }
  // grass
  ctx.fillStyle='#3fae2a'; ctx.fillRect(0,0,w,14);
  ctx.fillStyle='#2c7d1c'; ctx.fillRect(0,14,w,4);
  // grass tufts
  ctx.fillStyle='#57c53a';
  for(let x=4;x<w;x+=16){ ctx.fillRect(x,2,6,4); }
  // outline
  ctx.strokeStyle='#5a2d0c'; ctx.lineWidth=2; ctx.strokeRect(1,1,w-2,h-2);
}
```

drawGroundDeep similar without grass, height 120.

Brick:

```js
function drawBrick(ctx,w,h){
  ctx.fillStyle='#c1540c'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#e07a30';
  // bricks
  ctx.fillRect(2,2,w-4,14); ctx.fillRect(2,22,w-4,14);
  ctx.fillStyle='#7a2c04';
  ctx.fillRect(0,16,w,4); ctx.fillRect(0,36,w,4);
  ctx.fillRect(w/2-2,2,4,14); ctx.fillRect(w/4-2,22,4,14); ctx.fillRect(3*w/4-2,22,4,14);
  ctx.strokeStyle='#5a1c02'; ctx.lineWidth=2; ctx.strokeRect(1,1,w-2,h-2);
}
```

Question:

```js
function drawQuestion(ctx,w,h){
  ctx.fillStyle='#f8b800'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#ffd94d'; ctx.fillRect(3,3,w-6,h-6);
  ctx.fillStyle='#f8b800'; ctx.fillRect(5,5,w-10,h-10);
  // rivets
  ctx.fillStyle='#7a4a00';
  [[4,4],[w-8,4],[4,h-8],[w-8,h-8]].forEach(p=>ctx.fillRect(p[0],p[1],4,4));
  // ?
  ctx.fillStyle='#7a4a00';
  ctx.font='bold 26px monospace'; ctx.textAlign='center'; ctx.textBaseline='middle';
  ctx.fillText('?', w/2+2, h/2+3);
  ctx.fillStyle='#fff';
  ctx.fillText('?', w/2, h/2+1);
}
```

Used:

```js
function drawUsed(ctx,w,h){
  ctx.fillStyle='#9c5a24'; fillRect; darker border, rivets.
}
```

Rock:

```js
function drawRock(ctx,w,h){
  ctx.fillStyle='#c8763a'; fillRect;
  ctx.fillStyle='#a85a28'; inner pattern;
  ctx.strokeStyle='#5a2d0c'; strokeRect;
  // highlight
  ctx.fillStyle='#e09b60'; fillRect(3,3,w-6,5);
}
```

PipeTop (80x40):

```js
function drawPipeTop(ctx,w,h){
  pipeBodyBase(ctx,w,h);
  ctx.fillStyle='#3fae2a'; ctx.fillRect(0,0,w,h);
  // wider cap look: since texture is exactly pipe width, draw cap border
  ctx.fillStyle='#7de05a'; ctx.fillRect(6,4,10,h-8); // highlight
  ctx.fillStyle='#1e6b12'; ctx.fillRect(w-10,4,8,h-8); // shadow right
  ctx.strokeStyle='#0d3d08'; ctx.lineWidth=3; ctx.strokeRect(1,1,w-2,h-2);
}
function drawPipeBody(ctx,w,h){
  ctx.fillStyle='#3fae2a'; fillRect;
  ctx.fillStyle='#7de05a'; ctx.fillRect(8,0,10,h);
  ctx.fillStyle='#1e6b12'; ctx.fillRect(w-12,0,10,h);
  ctx.strokeStyle='#0d3d08'; lineWidth=2; strokeRect(1,-2? ...
}
```

Keep simple.

Cloud:

```js
function drawCloud(ctx,w,h){
  ctx.fillStyle='rgba(255,255,255,0.95)';
  ellipse(30,34,22,16); ellipse(55,26,26,20); ellipse(80,34,22,16);
  ctx.fillRect(20,30,70,14)? 
}
```

Use ellipses + base rect.

Hill:

```js
function drawHill(ctx,w,h){
  ctx.fillStyle='#2c9e1e';
  ctx.beginPath(); ctx.moveTo(0,h); ctx.quadraticCurveTo(w/2,-h*0.2, w, h); ctx.closePath(); ctx.fill();
  dots darker.
}
```

Bush: green circles.

Pole:

```js
function drawPole(ctx,w,h){
  ctx.fillStyle='#2e7d32'? classic pole is green-ish gray. Use '#3a9e3a'? SMB pole: light green. 
  ctx.fillStyle='#4caf50'; fillRect(2,0,w-4,h);
  ctx.fillStyle='#1b5e20'; fillRect(w-6,0,3,h);
}
```

Flag (48x36), drawn with attachment at right edge:

```js
ctx.fillStyle='#2e9e2e';
triangle from (48,2) to (48,34) to (6,18).
white circle emblem at (30,18) r7 with red 'P'? just circle.
```

Castle (200x150):

```js
function drawCastle(ctx,w,h){
  // base
  ctx.fillStyle='#c1540c'; fillRect(0,60,w,90);
  // battlements
  for x step 40: fillRect(x,40,24,24);
  // tower
  ctx.fillStyle='#c1540c'; fillRect(w/2-30,0,60,60);
  battlements on tower
  // door
  ctx.fillStyle='#3a1c08'; arch at bottom center
  // windows
  // brick lines
  mortar lines horizontal.
}
```

Goomba:

```js
function drawGoomba(ctx, frame){
  // feet
  ctx.fillStyle='#3a1c08';
  if(frame===0){ ctx.fillRect(3,26,11,5); ctx.fillRect(18,26,11,5); }
  else { ctx.fillRect(1,26,11,5); ctx.fillRect(20,26,11,5); }
  // body
  ctx.fillStyle='#a0522d';
  ctx.beginPath(); ctx.ellipse(16,15,15,15,0,0,Math.PI*2); ctx.fill();
  // lighter belly? 
  // eyes
  ctx.fillStyle='#fff';
  ctx.beginPath(); ctx.ellipse(10,12,4.5,6,0,0,7); ctx.fill();
  ctx.beginPath(); ctx.ellipse(22,12,4.5,6,0,0,7); ctx.fill();
  ctx.fillStyle='#000';
  ctx.beginPath(); ctx.ellipse(11,13,2,3,0,0,7); ctx.fill();
  ctx.beginPath(); ctx.ellipse(21,13,2,3,0,0,7); ctx.fill();
  // angry brows
  ctx.strokeStyle='#3a1c08'; ctx.lineWidth=3;
  ctx.beginPath(); ctx.moveTo(5,5); ctx.lineTo(13,9); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(27,5); ctx.lineTo(19,9); ctx.stroke();
  // mouth/fangs
  ctx.fillStyle='#fff'; ctx.fillRect(12,20,3,3); ctx.fillRect(17,20,3,3);
}
function drawGoombaFlat(ctx){
  ctx.fillStyle='#a0522d';
  ctx.beginPath(); ctx.ellipse(16,26,16,6,0,0,Math.PI*2); ctx.fill();
  eyes as X or lines
}
```

Player draw as planned.

Now scene create:

```js
function create(){
  buildTextures.call(this);
  // state
  this.state='playing';
  this.coinCount=0;
  // groups
  this.world=this.physics.add.staticGroup();
  this.blocks=this.physics.add.group({allowGravity:false, immovable:true});
  this.coins=this.physics.add.staticGroup();
  this.enemies=this.physics.add.group();
  // level
  buildLevel.call(this);
  // player
  this.player=this.physics.add.sprite(START_X,START_Y,'player0');
  this.player.body.setSize(24,38); this.player.body.setOffset(2,2);
  // colliders...
  // camera...
  // input...
  // HUD refs
}
```

Note: blocks group config — `this.physics.add.group({ allowGravity: false, immovable: true })`: group config is passed to children via `set`? The PhysicsGroup config supports `allowGravity`, `immovable` etc.? Checking memory: `physics.add.group(children, config)` where config can include `allowGravity`, `gravity`, `immovable`, `maxVelocity`, etc. Yes — Arcade Physics Group config includes these and applies to bodies. I'll still set explicitly per block to be safe.

Enemy creation:

```js
spawnEnemies(){
  this.enemies.clear(true,true);
  ENEMIES.forEach(def=>{
    const e=this.enemies.create(def.c*TILE+20, GY-32, 'goomba0');
    e.setSize(28,28); e.setOffset(2,4);
    e.body.setAllowGravity(true);
    e.body.setCollideWorldBounds(false);
    e.minX=def.c*TILE-def.range; e.maxX=def.c*TILE+def.range;
    e.speed=def.spd; e.dir = Math.random()<0.5?-1:1;
    e.setVelocityX(e.speed*e.dir);
    e.play('goombaWalk');
    e.dead=false;
  });
}
```

Hmm `e.play` — sprite.play(key) works for anims. ✓

Colliders:

```js
this.physics.add.collider(this.player, this.world);
this.physics.add.collider(this.player, this.blocks, hitBlock, null, this);
this.physics.add.collider(this.enemies, this.world);
this.physics.add.collider(this.enemies, this.blocks);
this.physics.add.collider(this.player, this.enemies, enemyHit, null, this);
this.physics.add.overlap(this.player, this.coins, collectCoin, null, this);
this.physics.add.overlap(this.player, this.flagZone, reachFlag, null, this);
```

hitBlock as scene method using arrow or function with this bound via collider callback context (4th arg processCallback, 5th callback context). `collider(obj1, obj2, collideCallback, processCallback, callbackContext)`. ✓

update():

```js
function update(time, delta){
  // enemies patrol
  if(this.state==='playing' || this.state==='win'){
    this.enemies.getChildren().forEach(e=>{
      if(e.dead) return;
      if(e.body.blocked.left || e.x < e.minX){ e.setVelocityX(e.speed); }
      else if(e.body.blocked.right || e.x > e.maxX){ e.setVelocityX(-e.speed); }
      e.setFlipX(e.body.velocity.x>0);
    });
  }
  if(this.state==='playing'){
    const left=this.cursors.left.isDown||this.keys.A.isDown;
    const right=this.cursors.right.isDown||this.keys.D.isDown;
    let dir=0;
    if(left) dir=-1; else if(right) dir=1;
    this.player.setVelocityX(dir*RUN_SPEED);
    const grounded=this.player.body.blocked.down||this.player.body.touching.down;
    if(dir!==0){
      this.player.setFlipX(dir<0);
      if(grounded) this.player.anims.play('run', true);
      else { this.player.anims.stop(); this.player.setTexture('player2'); }
    } else {
      this.player.anims.stop();
      this.player.setTexture(grounded?'player0':'player2');
    }
    // clamp horizontal
    if(this.player.x<12) { this.player.setX(12); }
    if(this.player.x>LEVEL_W-12) { this.player.setX(LEVEL_W-12); }
    // gap death
    if(this.player.y>KILL_Y){ startDying.call(this, true); }
  } else if(this.state==='dying'){
    // manual fall
    this.player.body.velocity.y += GRAV*delta/1000;
    this.player.y += this.player.body.velocity.y*delta/1000;
    if(this.player.y>KILL_Y+100){ this.state='gameover'; showOverlay(...); }
  }
}
```

Wait — during 'dying' after gap fall, player already below KILL_Y; just show overlay after short delay. Simplify startDying:

```js
startDying(gap){
  if(this.state!=='playing') return;
  this.state='dying';
  this.player.anims.stop();
  this.player.setTexture('player3'); // dead pose
  this.player.body.setEnable(false);
  if(!gap){ this.player.vy=-700; } else { this.player.vy=0; } // store
  this.deadTimer=0;
}
```

Store velocity in plain vars: `this.deadVY = gap?0:-700;`

In update dying: integrate; when y>KILL_Y+120 or deadTimer>1100ms → state='gameover', showOverlay('GAME OVER',...).

Use time-based: `this.deadElapsed += delta; if(this.deadElapsed>1000) showLose();`

enemyHit:

```js
function enemyHit(player, e){
  if(this.state!=='playing'||e.dead) return;
  const falling=player.body.velocity.y>0;
  const above=(player.body.bottom - e.body.top) < 22;
  if(falling && above){
    e.dead=true;
    e.setTexture('goombaFlat');
    e.body.setEnable(false);
    e.setSize(32,12); e.setOffset(0,20);
    player.setVelocityY(-JUMP_VEL*0.65);
    this.tweens.add({targets:e, alpha:0, delay:350, duration:250, onComplete:()=>e.destroy()});
    this.stomped++;
  } else {
    startDying.call(this,false);
  }
}
```

Wait — body disabled then e.setSize changes body? If body disabled, setSize still works on body object. Fine. Actually simpler: keep body enabled but set `e.body.checkCollision.none = true`? Not a property... Body has `enable` only plus checkCollision flags {up,down,left,right} — setting all false works: `e.body.checkCollision.up=down=left=right=false`. I'll just disable body entirely.

But dead enemy still in group; update skips e.dead. Destroy via tween. ✓

collectCoin:

```js
function collectCoin(player, coin){
  if(!coin.active) return;
  coin.disableBody(true,true);
  addCoin.call(this);
}
function addCoin(){ this.coinCount++; this.hudCoins.textContent=String(this.coinCount); }
```

hitBlock:

```js
function hitBlock(player, block){
  if(this.state!=='playing') return;
  const headHit = player.body.velocity.y<0 && (block.body.bottom - player.body.top) < 16;
  if(!headHit) return;
  if(block.isQuestion && block.texture.key==='question'){
    block.isQuestion=false;
    block.setTexture('used');
    addCoin.call(this);
    coinPop.call(this, block.x, block.y-30);
    this.tweens.add({targets:block, y: block.y-10, duration:70, yoyo:true});
  } else if(block.texture.key==='brick'){
    this.tweens.add({targets:block, y: block.y-8, duration:60, yoyo:true});
  }
}
```

Note: block.body.bottom — for dynamic body, bottom = y+height. ✓ Tween on block y: dynamic body syncs from sprite each frame (dynamic bodies update from gameObject in preUpdate ✓).

coinPop:

```js
function coinPop(x,y){
  const c=this.add.sprite(x,y,'coin0');
  this.tweens.add({targets:c, y:y-46, alpha:0.2, duration:380, ease:'Quad.easeOut', onComplete:()=>c.destroy()});
}
```

reachFlag:

```js
function reachFlag(){
  if(this.state!=='playing') return;
  this.state='win';
  this.player.body.setEnable(false);
  this.player.anims.stop(); this.player.setTexture('player0');
  this.tweens.add({targets:this.flagSprite, y:this.flagHomeY+120, duration:600, ease:'Quad.easeIn'});
  this.time.delayedCall(700, ()=>{ if(this.state==='win') showOverlay.call(this,'COURSE CLEAR!','You reached the flagpole!'); });
}
```

resetGame:

```js
function resetGame(){
  this.state='playing';
  this.coinCount=0; this.hudCoins.textContent='0';
  // player
  this.player.body.setEnable(true);
  this.player.setPosition(START_X, START_Y);
  this.player.setVelocity(0,0);
  this.player.setFlipX(false);
  this.player.anims.stop();
  this.player.setTexture('player0');
  this.player.body.checkCollision... not needed
  // coins
  this.coins.clear(true,true);
  spawnCoins.call(this);
  // enemies
  spawnEnemies.call(this);
  // question blocks restore
  this.blocks.getChildren().forEach(b=>{ if(b.wasQuestion){ b.isQuestion=true; b.setTexture('question'); } });
  // flag
  this.flagSprite.setY(this.flagHomeY);
  // camera
  this.cameras.main.setScroll(0,0);
  hideOverlay();
}
```

spawnCoins:

```js
function spawnCoins(){
  COIN_DEFS.forEach(d=>{
    const c=this.coins.create(d.x,d.y,'coin0');
    c.setCircle? no—default rect 24x24 fine.
    c.play('coinSpin');
  });
}
```

Static group coin with anim — anims work on static sprites ✓.

Build level:

```js
function buildLevel(){
  // ground segments
  compute segs; for each: surface sprite into world, deep image decoration.
  // pipes
  // stairs
  // brick row + questions
  // platforms
  // decorations (clouds, hills, bushes, castle)
  // flag pole visuals + zone
  // coins & enemies
}
```

Bricks & questions into this.blocks with isQuestion/wasQuestion flags.

Platforms: brick texture blocks.

Stairs: rock blocks into this.world (static, never bump) — or blocks group; either. Use world for static.

Pipes into world.

Flag zone:

```js
this.flagZone=this.add.zone(FLAG_X, GY-100, 26, 200);
this.physics.add.existing(this.flagZone, true);
```

Zone body is static rectangle centered on zone position ✓.

Flag visuals: pole sprite (decoration, origin 0.5): `this.add.image(FLAG_X, GY-100, 'pole')` — pole texture 10x200. Ball: `this.add.image(FLAG_X, GY-200-6, 'ball')` small 14x14 gold. Flag sprite: `this.flagSprite=this.add.image(FLAG_X-2, GY-196, 'flag')` with origin (1,0) → right edge at pole, top near top. flagHomeY = GY-196.

Flag texture 48x36.

Castle: `this.add.image(133*TILE+40, GY, 'castle').setOrigin(0.5,1)` — 200 wide → cols 130.5-135.5. Flag at col 128. OK, castle after flag. Player passes flag → win before reaching castle. Fine.

Decorations behind everything: add images before sprites so they render behind (z-order by creation order). Create decorations first, then world sprites. Order within scene: images added earlier are behind. So: sky decorations first.

HUD DOM: coins display, controls, restart button, overlay.

Also display "LIVES"? Not required.

CSS: 

```css
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1a1a2e;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Courier New',monospace;}
#wrap{position:relative;width:960px;max-width:100vw;}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated;}
#hud{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;color:#fff;text-shadow:2px 2px 0 #000;}
#controls{position:absolute;bottom:8px;width:100%;text-align:center;color:#fff;...}
#restartBtn{position:absolute;top:8px;right:12px;pointer-events:auto;...}
```

HUD layout: left: "COINS × 0"; center: "WORLD 1-1"; right: restart button.

Overlay:

```css
#overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:10;}
#overlay.hidden{display:none;}
.panel{background:#fff;border:4px solid #000;box-shadow:6px 6px 0 #000;padding:28px 40px;text-align:center;}
```

Buttons styled pixel.

JS DOM refs: get elements by id.

Key handling: also 'Enter' to restart when overlay shown? R suffices.

One more requirement: "Display the controls" ✓.

Now — potential Phaser gotcha: `this.coins` staticGroup `.clear(true,true)` — Group.clear(destroyChild, removeFromScene) ✓.

Another: staticGroup.create returns StaticPhysicsSprite? `physics.add.staticGroup().create(x,y,key)` returns sprite with static body ✓.

Zone + overlap: zones with physics existing static — overlap works ✓.

`this.player.body.setEnable(false)` then later `setEnable(true)` ✓.

During 'win', player body disabled — camera follow continues (follow target position unchanged) ✓.

During 'dying', camera still follows player falling — camera bounds clamp y at 0, x follows a bit; on reset camera setScroll(0,0) and follow re-syncs. ✓

Edge: player stomps enemy while enemy at minX/maxX boundary — fine.

Enemy spawn y: GY-32 → body 28 tall with offset 4 → bottom at GY ✓ falls slightly to ground.

Enemy flip: goomba drawn facing... symmetric-ish; flip based on velocity for feet animation direction — fine either way.

Now question block bump condition: `(block.body.bottom - player.body.top) < 16` — player head within 16px below block bottom while moving up. But collision resolution may push player down before callback? Collide callback fires during collision processing with resolved positions... The callback fires after bodies separate? In Phaser, collide callback is invoked during `processCallback` after separation? The callback runs after the collision is processed (positions separated). Player head would be at block bottom exactly → diff ≈ 0 <16 ✓. Side contact while moving up: diff would be large (player top well below block bottom) ✓. Good.

But careful: player standing on ground next to block, jumping straight up into block side — velocity.y<0 and diff<16 only if head near block bottom, which means head hit. OK.

Also blocks collide with player from below pushing player down — normal.

Now, one subtlety: `this.blocks` group with `immovable:true` — dynamic bodies with immovable don't move from collisions ✓.

Player max fall speed etc default fine.

Also add `this.physics.world.setBounds`? Not needed since manual clamps; but camera bounds set. Also disable world bounds collision: default `setBounds` not set → no world collision at all ✓ (Arcade world bounds only applies if enabled... actually `Body.setCollideWorldBounds` defaults false ✓).

Write the final code now. Also include a title header "SUPER PLATFORM BROS" maybe in HUD center.

Also small detail: `image-rendering: pixelated` on canvas — textures drawn at scale 1; canvas 960x540 displayed possibly scaled down; pixelated ok.

Let me also double check `startFollow` lerp params: In Phaser 3.80, `Camera.startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)`. Hmm, actually I recall the signature changed: `startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)` — yes. lerp 0.12 fine. Hmm wait, in newer versions lerpX/lerpY are fractions (0-1)? Yes, "The lerp values... between 0 and 1". Actually I recall docs: "lerpX — The horizontal lerp value... 0 = snap, 1 = never catch up"? It's a factor where smaller = snappier. 0.12 good.

Hmm, actually I want to double-check: Phaser docs say `startFollow(target, [roundPixels], [lerpX], [lerpY], [offsetX], [offsetY])`, lerp default 1. And "The lerp is a value between 0 and 1, where 0 means snap to target instantly". Hmm, I think it's actually implemented as `camera.scrollX += (target - scrollX) * lerp`? No... CameraFollow uses `_lerp` and in `update`: `this.scrollX = ...`? There's `CameraFollow.update`: 

```js
if (this.lerpX === 1) { ... snap? }
```

Actually implementation: `const lerpX = this.lerpX; ... this.camera.scrollX = lerpX * targetX + (1-lerpX)*scrollX`? Something like that. Default lerp=1 means instant. Values like 0.1 give smooth trailing. ✓

Also add deadzone so player slightly off-center? Not necessary.

Time to write. I'll write the complete file in one go, then test in browser.

Also: prevent default on Space/Arrows to avoid page scroll — page won't scroll anyway (body centered), but do it.

For keydown listener, use `this.input.keyboard.on('keydown', handler)`. Note: keyboard events need `input.keyboard` — enabled by default ✓.

Also handle 'keyup'? Not needed.

Let me also add jump on 'W'/'ArrowUp' ✓.

Write file now.

One more check — `this.anims.create` with frames referencing texture keys directly: `frames: [{key:'player0'}, {key:'player1'}]` ✓ (TextureFrame objects via key).

Coin anim frames coin0/coin1 ✓.

Also for static coin sprite, `c.play('coinSpin')` — Sprite.play ✓.

Alright, also the "used" block texture and question — same 40x40.

Enemy stomp: also small camera shake? skip.

Let me write it.

Also, total coins count display maybe "COINS × N". And maybe show remaining? Just count.

Also add score? skip.

Now writing the file. I'll aim for clean, complete code.

Additional check on `drawPlayer` frames: player0 stand, player1 run, player2 jump, player3 dead (X eyes / lying?). Dead pose: same body but eyes X and cap tilted — just draw with eyes as X and arms up. Simple variant.

Let me write drawPlayer(ctx, frame) where frame in {0,1,2,3}.

Dead pose: flip? Just draw standing with spiral eyes and tongue? Keep simple: draw with closed eyes (lines) and arms up.

Now the code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Platform Bros — Phaser</title>
<style> ... </style>
</head>
<body>
<div id="wrap">
  <div id="game"></div>
  <div id="hud">
    <div id="hudLeft">COINS × <span id="coinCount">0</span></div>
    <div id="hudMid">WORLD 1-1</div>
    <button id="restartBtn" type="button">⟳ RESTART</button>
  </div>
  <div id="controls">◀ ▶ / A D — RUN &nbsp;·&nbsp; SPACE / W / ▲ — JUMP &nbsp;·&nbsp; R — RESTART</div>
  <div id="overlay" class="hidden">
    <div class="panel">
      <h1 id="ovTitle">GAME OVER</h1>
      <p id="ovMsg"></p>
      <button id="ovBtn" type="button">PLAY AGAIN</button>
    </div>
  </div>
</div>
<script src="phaser.min.js"></script>
<script> ... </script>
</body>
</html>
```

HUD is absolutely positioned over canvas — pointer-events none except button.

Note: `#wrap` position relative; `#game` canvas appended by Phaser with parent 'game'.

Overlay covers canvas only (inside wrap) ✓.

Now the JS. Let me be careful about `this` binding for scene methods — define scene as object with methods; Phaser calls with scene as this ✓. Helper functions declared outside called with `.call(this)` or arrow closures inside create. I'll define everything inside create as closures to capture `this` — simpler and safe. But update is a scene method — define as method and use closure-captured vars via `this`. Fine: define functions as scene methods and use `.call(this)` where needed, or just make them methods (they're called with scene context by Phaser for update; for my own calls I control context). I'll write methods and always invoke as `this.method(...)` or pass `this` as collider context.

Collider callbacks: `this.physics.add.collider(this.player, this.enemies, this.enemyHit, null, this)` — context this ✓.

Let me now write out the whole script mentally then produce it.

```js
const TILE = 40;
const GY = 440;            // ground surface y
const VIEW_W = 960, VIEW_H = 540;
const LEVEL_TILES = 140;
const LEVEL_W = LEVEL_TILES * TILE;
const GRAV = 2000, RUN_SPEED = 260, JUMP_VEL = 860;
const START_X = 90, START_Y = GY - 40;
const KILL_Y = 720;
const FLAG_COL = 128;
const FLAG_X = FLAG_COL * TILE + 20;

const GAPS = [[16,18],[30,32],[44,47],[60,62],[74,76],[90,93],[108,110]];
const PIPES = [{c:24,h:2},{c:52,h:3},{c:68,h:2},{c:84,h:3},{c:100,h:2}];
const PLATFORMS = [[36,38,300],[48,51,280],[64,66,240],[78,80,300],[96,98,280],[112,114,300]];
const BRICK_ROW = {y:280, cols:[8,9,10,11,12], questions:[9,11]};
const STAIRS = {start:120, heights:[1,2,3,4]};
const ENEMY_DEFS = [...];
const COIN_DEFS = buildCoinDefs();
```

buildCoinDefs function defined before use.

Everything good. Let me also double check platform at [48,51,280] vs pipe at col 52 h=3 (top y=GY-120=320): platform y 280-320 at cols 48-51, pipe top at 320 col 52-53 — no overlap ✓.

Platform [64,66,240] with pipe at 68 h2 (top 360) ✓.

Platform [78,80,300], pipe at 84 h3 ✓.

Platform [96,98,280], pipe at 100 h2 (top 360) — platform bottom 320 vs pipe top 360, adjacent columns ✓.

Enemy at col 95 range 100: x 3800±100 → 3700..3900; platform above at cols 96-98 (3840-3960) y280 — enemy walks under platform, fine.

Coins above platforms at y-50: platform y=300 → coins at 250; player jumping from platform (standing y=300-40=260 head 260) can reach coins at 250 ✓ (head overlaps coin). Coin body 24x24 at center 250 → 238-262; player head at 260 → overlap ✓.

Coins over gaps at GY-110=330 arc ±30: reachable by jump ✓ (jump height 185 from 440 → min y 255).

Brick row y=280: player standing on ground (head at 400) jumps to hit block bottom (320): needs head reach 320 → jump 80px ✓ easily.

Coins at y=220 above brick row: from brick top (280) head at 240... coin center 220 → 208-232; head 240 doesn't reach; jump from brick: min y = 280-40-185 = 55 → reaches ✓.

Stairs: col 120 h1 (block at y 400-440), 121 h2 (y 360-440), 122 h3, 123 h4 (top y=280). Jump from ground to h1 (40px) ✓, between steps 40px ✓. From top (280) to flag pole at col 128: horizontal gap 4 tiles (cols 124-127 = 160px) with drop — easy ✓.

Wait, stairs blocks at cols 120-123 — ground continues beneath (no gap) ✓.

Flag zone: x 5120-5146, y 240-440 ✓.

Castle at cols ~130-135 ✓ after flag.

Enemy defs check col 117 range 80: 4680±80 → 4600..4760 (cols 115-119) — stairs at col 120 (4800) ✓ no overlap.

Enemy col 113 range 120: 4520±120 → 4400..4640 (cols 110-116) ✓ segment 110+.

Enemy col 102 range 80: 4080±80 → 4000..4160 (cols 100-104) — pipe at col 100 (4000-4080)! Enemy spawns at 4080 (pipe right edge) → wall flip ✓. minX 4000 inside pipe → flips at pipe wall ✓.

Enemy col 95 range 100 → 3700..3900 (cols 92.5-97.5) — gap at cols 90-92 (3600-3720): minX 3700 slightly inside gap edge; wall? No wall at gap — enemy could walk to 3700 which is col 92.5, i.e., x=3700 is within gap (gap spans 3600-3720). Enemy at minX 3700 stands at gap edge — its body center 3700, body width 28 → left edge 3686, over gap. It won't fall (minX turns it around) ✓. But visually near edge — fine.

Enemy col 79 range 120: 3160±120 → 3040..3280 (cols 76-82) ✓ segment 76-89.

Enemy col 65 range 100: 2600±100 → 2500..2700 (cols 62.5-67.5); pipe at 68 (2720-2800) ✓.

Enemy col 56 range 80: 2240±80 → 2160..2320 (cols 54-58) ✓ segment 47-59; pipe at 52 (2080-2160): minX 2160 = pipe right edge → flip ✓.

Enemy col 50 range 100 → 1900..2100 (cols 47.5-52.5): pipe at 52 → maxX 2100 inside pipe → flip at wall ✓.

Enemy col 40 range 80: 1600±80 → 1520..1680 (cols 38-42) ✓ segment 32-43.

Enemy col 35 range 120: 1400±120 → 1280..1520 (cols 32-38) ✓.

Enemy col 21 range 110: 840±110 → 730..950 (cols 18.25-23.75); pipe at 24 (960) ✓.

Enemy col 12 range 70: 480±70 → 410..550 ✓.

Enemy col 27 range 80: 1080±80 → 1000..1160 (cols 25-29); pipe at 24 ends 1040 → minX 1000 inside pipe → flip ✓.

Enemy col 70 range 80: 2800±80 → 2720..2880; pipe at 68 (2720-2800) → minX at pipe edge → flip ✓.

Enemy col 87 range 80: 3480±80 → 3400..3560 (cols 85-89); pipe at 84 (3360-3440) → minX 3400 inside pipe → flip ✓.

Great, wall flips handle pipes.

Now enemy speed: faster enemies harder; 60-75 fine.

Coin defs — build:

```js
function buildCoinDefs(){
  const defs=[];
  GAPS.forEach(([a,b])=>{
    for(let c=a;c<b;c++){
      const t=(c-a+0.5)/(b-a);
      defs.push({x:c*TILE+20, y:GY-100-Math.sin(t*Math.PI)*40});
    }
  });
  for(let c=BRICK_ROW.cols[0]; c<=BRICK_ROW.cols[BRICK_ROW.cols.length-1]; c++)
    defs.push({x:c*TILE+20, y:220});
  PLATFORMS.forEach(([a,b,y])=>{ for(let c=a;c<=b;c++) defs.push({x:c*TILE+20, y:y-50}); });
  [14,22,34,58,72,82,94,106,118].forEach(c=>defs.push({x:c*TILE+20, y:GY-70}));
  return defs;
}
```

Check coin at col 14 y=370: near gap 16-17, fine. Col 22 y370 ✓. Col 34 ✓. Col 58 ✓ (segment 47-59). Col 72 ✓. Col 82 ✓. Col 94 ✓ (segment 93+). Col 106 ✓. Col 118 ✓ (before stairs 120).

None inside pipes (pipes at 24-25, 52-53, 68-69, 84-85, 100-101) ✓.

Total coins: gaps: 2+2+3+2+2+3+2=16; brick row 5; platforms: 3+4+3+3+3+3=19; scattered 9 → 49 coins. 

Now writing draw functions concretely. Let me finalize player drawing (28x40):

```js
function drawPlayerFrame(ctx, frame){
  // frame: 0 stand, 1 run, 2 jump, 3 dead
  // legs / shoes
  ctx.fillStyle='#4a2408';
  if(frame===1){ ctx.fillRect(1,33,10,6); ctx.fillRect(17,31,10,6); }
  else if(frame===2){ ctx.fillRect(2,31,10,6); ctx.fillRect(16,30,10,6); }
  else if(frame===3){ ctx.fillRect(2,34,10,6); ctx.fillRect(16,34,10,6); }
  else { ctx.fillRect(3,34,9,6); ctx.fillRect(16,34,9,6); }
  // overalls
  ctx.fillStyle='#2456d8';
  ctx.fillRect(5,21,18,13);
  // shirt / arms
  ctx.fillStyle='#e0301e';
  if(frame===3){ // arms up
    ctx.fillRect(0,16,5,8); ctx.fillRect(23,16,5,8);
  } else if(frame===2){
    ctx.fillRect(1,18,5,8); ctx.fillRect(22,18,5,8);
  } else {
    ctx.fillRect(2,20,4,8); ctx.fillRect(22,20,4,8);
  }
  ctx.fillRect(4,19,20,6); // torso shirt
  // straps
  ctx.fillStyle='#2456d8';
  ctx.fillRect(7,19,4,6); ctx.fillRect(17,19,4,6);
  // buttons
  ctx.fillStyle='#ffd23e';
  ctx.fillRect(8,24,3,3); ctx.fillRect(17,24,3,3);
  // head
  ctx.fillStyle='#ffcf9e';
  ctx.fillRect(6,7,17,10);
  // ear? nose
  ctx.fillStyle='#ffb877'; ctx.fillRect(21,11,4,4); // nose
  // eye
  if(frame===3){
    ctx.strokeStyle='#222'; ctx.lineWidth=2;
    ctx.beginPath(); ctx.moveTo(16,9); ctx.lineTo(20,13); ctx.moveTo(20,9); ctx.lineTo(16,13); ctx.stroke();
  } else {
    ctx.fillStyle='#222'; ctx.fillRect(17,9,3,5);
  }
  // mustache
  ctx.fillStyle='#4a2408'; ctx.fillRect(14,14,9,3);
  // cap
  ctx.fillStyle='#e0301e';
  ctx.fillRect(4,1,19,7);
  ctx.fillRect(15,6,12,3); // brim
  ctx.fillStyle='#fff'; ctx.fillRect(10,2,6,4); // logo patch
}
```

Hmm cap brim: facing right → brim extends right ✓.

Goomba 32x32 as planned. Flat 32x32 texture with squashed body at bottom.

Coin 24x24 two frames.

Now write the final HTML. Also remember: NO external resources — phaser.min.js local script tag is allowed/required.

Potential issue: `image-rendering: pixelated` may blur weirdly; use `image-rendering: auto`. Skip pixelated.

Also the wrap max-width: if viewport < 960, canvas scales via CSS width 100%. Phaser canvas internal stays 960x540 ✓. HUD/controls scale? They're absolutely positioned with px — fine.

Let me write the file.

For the overlay buttons wiring:

```js
document.getElementById('restartBtn').addEventListener('click', ()=>this.resetGame());
document.getElementById('ovBtn').addEventListener('click', ()=>this.resetGame());
```

In create, `this` is scene; arrow functions capture ✓.

showOverlay/hideOverlay manipulate DOM.

Also on lose by side contact: startDying(false) → pop up then fall. On gap: startDying(true) → just fall (already falling). Both → gameover overlay.

Also add tiny "stomp" counter? skip.

Edge: What if player reaches flag while dying? state check prevents ✓.

What if player jumps over flag pole? Zone height 200 (y 240-440); player jumping over top (above 240)? From stairs top y=280-40=240 head... player standing on stair top: y (center) = 280-20=260, body 240-296... wait player sprite 40 tall, center 260 → top 240. Zone top at 240 → overlap ✓. If player jumps from stairs, could clear pole top (240)? Jump from 280 reaches y min 280-185=95 → could fly over pole (top 240) and land beyond, missing flag! Then must turn back — zone still there; player can jump back into it. To be safe, extend zone upward: y center GY-160, height 320 → covers y 80-440... zone: `this.add.zone(FLAG_X, GY-140, 26, 300)` → y from 290-150=140? center GY-140=300, height 300 → 150-450. Covers most jumps. Even higher: center GY-200=240, h=400 → 40-440. Use that. Player jumping over at y<40 impossible (jump max ~95 from stairs, from ground 440-185=255). ✓ zone 40-440 covers.

Also make sure zone doesn't block: overlap only, no collider ✓.

Alright — also "camera following as the player moves" ✓ via startFollow.

Restart resets camera: setScroll(0,0) — but follow lerp will keep it near player x=90 → scrollX ≈ 0 (player centered at 90 → scrollX = 90-480 = -390 → clamped 0) ✓.

Now write it all.

Also: `this.cursors = this.input.keyboard.createCursorKeys();` includes `.space`? CursorKeys creates up/down/left/right + space + shift... Actually createCursorKeys returns {up,down,left,right, space, shift, ctrl?} — in Phaser 3.80, CursorKeys includes `space`? Let me recall: `createCursorKeys()` returns object with up, down, left, right, space, shift, ctrl, alt? Hmm. Historically: cursors = createCursorKeys() → {up, down, left, right, space, shift}. Yes, space and shift included in newer versions. I'll rely on my own keydown listener for jump anyway, so no need.

Keys A/D: `this.keys = this.input.keyboard.addKeys('A,D');` → this.keys.A, this.keys.D ✓.

Jump via keydown listener with e.code checks ✓.

Also prevent repeat: keydown auto-repeat — holding space fires repeated keydown; jump only when grounded, so holding space = jump on land. Acceptable (classic). Fine.

Write the code now. Also add `this.stomped` count maybe shown in win message: "Coins: X · Enemies stomped: Y". Nice touch.

Final check on textures list:
- per-segment: gsurf{i}, gdeep{i} (decor only)
- brick, question, used, rock
- pipeTop, pipeBody
- player0..3
- goomba0, goomba1, goombaFlat
- coin0, coin1
- cloud, hill, bush, castle
- pole, ball, flag

Cloud positions: ensure not blocking view — decorations only.

Let me write everything now, carefully.

For `drawCloud`:

```js
function drawCloud(ctx,w,h){
  ctx.fillStyle='#ffffff';
  ctx.beginPath();
  ctx.ellipse(w*0.25,h*0.65,w*0.22,h*0.32,0,0,Math.PI*2);
  ctx.ellipse(w*0.5,h*0.45,w*0.28,h*0.4,0,0,Math.PI*2);
  ctx.ellipse(w*0.75,h*0.65,w*0.22,h*0.32,0,0,Math.PI*2);
  ctx.fill();
  ctx.fillRect(w*0.15,h*0.6,w*0.7,h*0.3);
}
```

Hill:

```js
function drawHill(ctx,w,h){
  ctx.fillStyle='#2e9e2e';
  ctx.beginPath();
  ctx.moveTo(0,h);
  ctx.quadraticCurveTo(w*0.5,-h*0.25,w,h);
  ctx.closePath(); ctx.fill();
  ctx.fillStyle='#1e6b1e';
  ctx.beginPath(); ctx.arc(w*0.42,h*0.45,4,0,7); ctx.arc(w*0.58,h*0.55,4,0,7); ctx.arc(w*0.5,h*0.35,4,0,7); ctx.fill();
}
```

Bush:

```js
function drawBush(ctx,w,h){
  ctx.fillStyle='#3fae2a';
  ctx.beginPath();
  ctx.ellipse(w*0.2,h*0.7,w*0.2,h*0.35,0,0,7);
  ctx.ellipse(w*0.5,h*0.55,w*0.25,h*0.45,0,0,7);
  ctx.ellipse(w*0.8,h*0.7,w*0.2,h*0.35,0,0,7);
  ctx.fill();
}
```

Castle (220x160):

```js
function drawCastle(ctx,w,h){
  ctx.fillStyle='#b5651d';
  ctx.fillRect(0,h*0.45,w,h*0.55);
  // battlements main
  for(let x=0;x<w;x+=44) ctx.fillRect(x,h*0.45-18,26,18);
  // tower
  ctx.fillRect(w*0.36,0,w*0.28,h*0.55);
  for(let x=w*0.36-10;x<w*0.64;x+=34) ctx.fillRect(x,-0? ...
```

Hmm keep simpler:

```js
function drawCastle(ctx,w,h){
  const B='#c1632a', D='#7a3a12', S='#3a1c08';
  // main body
  ctx.fillStyle=B; ctx.fillRect(0,h*0.4,w,h*0.6);
  // battlements
  ctx.fillStyle=B;
  for(let x=6;x<w;x+=42) ctx.fillRect(x,h*0.4-16,24,16);
  // tower
  ctx.fillRect(w*0.38,0,w*0.24,h*0.42);
  for(let x=w*0.36;x<w*0.64;x+=30) ctx.fillRect(x,-2? no...
```

Battlements on tower: `for(let x=w*0.36; x<w*0.64; x+=30) ctx.fillRect(x, 0? ...` tower top at y=0 — battlements would go negative. Make tower start at y=20 with battlements 0-20:

```js
ctx.fillRect(w*0.38,20,w*0.24,h*0.42-20);
for(let x=w*0.36;x<=w*0.60;x+=28) ctx.fillRect(x,4,16,16);
```

Door: arch: `ctx.fillStyle=S; ctx.fillRect(w*0.44,h*0.62,w*0.12,h*0.38);` plus arc top.

Windows: small dark rects.

Mortar lines: horizontal lines every 20px color D, alpha.

Flag emoji-ish: small flag on tower top: triangle.

Good enough — it's decorative background.

Pole (10x200):

```js
function drawPole(ctx,w,h){
  ctx.fillStyle='#2f8f2f'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#7de05a'; ctx.fillRect(2,0,3,h);
  ctx.fillStyle='#14541a'; ctx.fillRect(w-4,0,3,h);
}
```

Ball (14x14): gold circle.

Flag (48x36):

```js
function drawFlag(ctx,w,h){
  ctx.fillStyle='#2e9e2e';
  ctx.beginPath(); ctx.moveTo(w,2); ctx.lineTo(w,h-2); ctx.lineTo(4,h/2); ctx.closePath(); ctx.fill();
  ctx.strokeStyle='#14541a'; ctx.lineWidth=2; ctx.stroke();
  ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(w-16,h/2,7,0,Math.PI*2); ctx.fill();
}
```

Flag origin (1,0): right edge top at pole. Position (FLAG_X-3, GY-198).

flagHomeY = GY-198 = 242. Win tween: y → GY-58=382.

Now assemble. Also decorations: place hills/bushes/clouds.

```js
for(let i=0;i<16;i++){
  const x=i*380+((i*137)%140);
  const y=55+((i*89)%90);
  this.add.image(x,y,'cloud').setAlpha(0.95);
}
[250,900,1750,2600,3450,4300,5000].forEach(x=>this.add.image(x,GY,'hill').setOrigin(0.5,1));
[500,1300,2200,3050,3950,4800].forEach(x=>this.add.image(x,GY,'bush').setOrigin(0.5,1));
```

Hills behind ground sprites — added before world sprites ✓ (ground sprites created after in buildLevel; order: decorations first).

But wait: hills at GY with origin bottom — they'd be behind ground surface sprite (surface is 40 tall covering 440-480; hill drawn from y up). Hill bottom at 440 exactly at surface top ✓.

Now buildLevel order:
1. decorations (clouds, hills, bushes, castle)
2. ground segments (world)
3. pipes (world)
4. stairs (world)
5. brick row + platforms (blocks)
6. flag visuals + zone
7. coins, enemies (spawn functions)

Player created after, then colliders, camera, input, HUD refs, anims.

Anims must be created before any sprite plays them — create anims early (right after textures).

Let me write the final code.

```js
function create(){
  this.createTextures();
  this.createAnims();

  this.state='playing';
  this.coinCount=0;
  this.stomped=0;

  this.world=this.physics.add.staticGroup();
  this.blocks=this.physics.add.group();
  this.coins=this.physics.add.staticGroup();
  this.enemies=this.physics.add.group();

  this.buildLevel();

  this.player=this.physics.add.sprite(START_X,START_Y,'player0');
  this.player.body.setSize(24,38);
  this.player.body.setOffset(2,2);

  this.physics.add.collider(this.player,this.world);
  this.physics.add.collider(this.player,this.blocks,this.hitBlock,null,this);
  this.physics.add.collider(this.enemies,this.world);
  this.physics.add.collider(this.enemies,this.blocks);
  this.physics.add.collider(this.player,this.enemies,this.enemyHit,null,this);
  this.physics.add.overlap(this.player,this.coins,this.collectCoin,null,this);
  this.physics.add.overlap(this.player,this.flagZone,this.reachFlag,null,this);

  const cam=this.cameras.main;
  cam.setBounds(0,0,LEVEL_W,VIEW_H);
  cam.setBackgroundColor('#5c94fc');
  cam.startFollow(this.player,true,0.12,0.12);

  this.cursors=this.input.keyboard.createCursorKeys();
  this.keys=this.input.keyboard.addKeys('A,D');
  this.input.keyboard.on('keydown',(e)=>{
    if(['Space','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code)) e.preventDefault();
    if(e.code==='Space'||e.code==='ArrowUp'||e.code==='KeyW') this.tryJump();
    if(e.code==='KeyR') this.resetGame();
  });

  this.hudCoins=document.getElementById('coinCount');
  this.overlay=document.getElementById('overlay');
  this.ovTitle=document.getElementById('ovTitle');
  this.ovMsg=document.getElementById('ovMsg');
  document.getElementById('restartBtn').addEventListener('click',()=>this.resetGame());
  document.getElementById('ovBtn').addEventListener('click',()=>this.resetGame());

  this.spawnCoins();
  this.spawnEnemies();
}
```

Wait — blocks group: `this.physics.add.group()` default allows gravity; set per-block: `b.body.setAllowGravity(false); b.setImmovable(true);` in a helper `addBlock(col,y,key)`.

buildLevel:

```js
createTextures(){ ... all makeTexture calls ... }

buildLevel(){
  // decorations
  ...
  // ground segments
  const segs=[]; let start=0;
  for(let c=0;c<=LEVEL_TILES;c++){
    if(c===LEVEL_TILES||inGap(c)){
      if(c>start) segs.push([start,c]);
      start=c+1;
    }
  }
  segs.forEach(([a,b],i)=>{
    const w=(b-a)*TILE;
    makeTexture(this,'gsurf'+i,w,TILE,drawGroundSurf);
    const s=this.world.create(a*TILE+w/2, GY+TILE/2, 'gsurf'+i);
    makeTexture(this,'gdeep'+i,w,140,drawGroundDeep);
    this.add.image(a*TILE, GY+TILE, 'gdeep'+i).setOrigin(0,0);
  });
  // pipes
  PIPES.forEach(p=>{
    const x=p.c*TILE, topY=GY-p.h*TILE;
    this.world.create(x+40, topY+20, 'pipeTop');
    this.world.create(x+40, topY+40+(p.h-1)*TILE/2, 'pipeBody');
  });
  // stairs
  STAIRS.heights.forEach((h,i)=>{
    const col=STAIRS.start+i;
    for(let r=0;r<h;r++){
      this.world.create(col*TILE+20, GY-20-r*TILE, 'rock');
    }
  });
  // brick row with questions
  BRICK_ROW.cols.forEach(col=>{
    const key=BRICK_ROW.questions.includes(col)?'question':'brick';
    this.addBlock(col, BRICK_ROW.y, key, BRICK_ROW.questions.includes(col));
  });
  // platforms
  PLATFORMS.forEach(([a,b,y])=>{ for(let c=a;c<=b;c++) this.addBlock(c,y,'brick',false); });
  // flag
  this.add.image(FLAG_X, GY-100, 'pole');
  this.add.image(FLAG_X, GY-200-7, 'ball');
  this.flagHomeY=GY-198;
  this.flagSprite=this.add.image(FLAG_X-3, this.flagHomeY, 'flag').setOrigin(1,0);
  this.flagZone=this.add.zone(FLAG_X, GY-200, 26, 400);
  this.physics.add.existing(this.flagZone, true);
  // castle
  this.add.image(133*TILE+30, GY, 'castle').setOrigin(0.5,1);
}
```

addBlock:

```js
addBlock(col,y,key,isQuestion){
  const b=this.blocks.create(col*TILE+20, y+20, key);
  b.body.setAllowGravity(false);
  b.setImmovable(true);
  b.isQuestion=isQuestion;
  b.wasQuestion=isQuestion;
  return b;
}
```

Note blocks.create default origin 0.5 ✓ body syncs ✓.

Hmm — one issue: `this.blocks` group children with `immovable` set via `setImmovable(true)` ✓.

Enemy spawn y: GY-32 (sprite 32 tall) → bottom at GY ✓.

spawnEnemies with `e.setSize(28,28); e.setOffset(2,4);` — setOffset shifts body relative to sprite ✓.

spawnCoins: `const c=this.coins.create(d.x,d.y,'coin0'); c.play('coinSpin');`

Static sprite play anim — static sprites support animations ✓.

update():

```js
update(time,delta){
  if(this.state==='playing'||this.state==='win'){
    this.enemies.getChildren().forEach(e=>{
      if(e.dead) return;
      if(e.body.blocked.left||e.x<=e.minX) e.setVelocityX(e.speed);
      else if(e.body.blocked.right||e.x>=e.maxX) e.setVelocityX(-e.speed);
      e.setFlipX(e.body.velocity.x>0);
    });
  }
  if(this.state==='playing'){
    const left=this.cursors.left.isDown||this.keys.A.isDown;
    const right=this.cursors.right.isDown||this.keys.D.isDown;
    let dir=0;
    if(left)dir=-1; else if(right)dir=1;
    this.player.setVelocityX(dir*RUN_SPEED);
    const grounded=this.player.body.blocked.down||this.player.body.touching.down;
    if(dir!==0){
      this.player.setFlipX(dir<0);
      if(grounded) this.player.anims.play('run',true);
      else { this.player.anims.stop(); this.player.setTexture('player2'); }
    } else {
      this.player.anims.stop();
      this.player.setTexture(grounded?'player0':'player2');
    }
    if(this.player.x<14) this.player.setX(14);
    if(this.player.x>LEVEL_W-14) this.player.setX(LEVEL_W-14);
    if(this.player.y>KILL_Y) this.startDying(true);
  } else if(this.state==='dying'){
    this.deadElapsed+=delta;
    this.deadVY+=GRAV*delta/1000;
    this.player.y+=this.deadVY*delta/1000;
    if(this.deadElapsed>950){
      this.state='gameover';
      this.showOverlay('GAME OVER','You lost! Coins collected: '+this.coinCount);
    }
  }
}
```

Hmm — during 'win', player body disabled, but enemies keep patrolling ✓.

Wait, during 'win' I disabled player body — but update still references player.body.velocity? No, only in playing branch ✓.

tryJump:

```js
tryJump(){
  if(this.state!=='playing') return;
  const b=this.player.body;
  if(b.blocked.down||b.touching.down){
    b.setVelocityY(-JUMP_VEL);
  }
}
```

startDying(gap):

```js
startDying(gap){
  if(this.state!=='playing') return;
  this.state='dying';
  this.deadElapsed=0;
  this.deadVY=gap?0:-750;
  this.player.anims.stop();
  this.player.setTexture('player3');
  this.player.body.setEnable(false);
}
```

If gap death: player already falling below KILL_Y; deadVY 0 → falls slowly? Set deadVY = current velocity? body disabled; read before disabling: `this.deadVY = gap ? Math.max(0,this.player.body.velocity.y) : -750;` ✓.

enemyHit:

```js
enemyHit(player,e){
  if(this.state!=='playing'||e.dead) return;
  const falling=player.body.velocity.y>0;
  const close=(player.body.bottom-e.body.top)<24;
  if(falling&&close){
    e.dead=true;
    e.body.setEnable(false);
    e.setTexture('goombaFlat');
    e.setSize(32,12); e.setOffset(0,20);
    player.setVelocityY(-JUMP_VEL*0.62);
    this.stomped++;
    this.tweens.add({targets:e,alpha:0,delay:400,duration:250,onComplete:()=>e.destroy()});
  } else {
    this.startDying(false);
  }
}
```

setSize after body disabled — fine.

collectCoin:

```js
collectCoin(player,coin){
  if(this.state!=='playing'||!coin.active) return;
  coin.disableBody(true,true);
  this.coinCount++;
  this.hudCoins.textContent=String(this.coinCount);
}
```

hitBlock:

```js
hitBlock(player,block){
  if(this.state!=='playing') return;
  if(player.body.velocity.y>=0) return;
  if((block.body.bottom-player.body.top)>=18) return;
  if(block.isQuestion){
    block.isQuestion=false;
    block.setTexture('used');
    this.coinCount++;
    this.hudCoins.textContent=String(this.coinCount);
    const c=this.add.sprite(block.x,block.y-28,'coin0');
    this.tweens.add({targets:c,y:block.y-70,alpha:0,duration:380,ease:'Quad.easeOut',onComplete:()=>c.destroy()});
  }
  this.tweens.add({targets:block,y:block.y-10,duration:70,yoyo:true});
}
```

Hmm tween yoyo returns to original y ✓ (dynamic body syncs ✓).

reachFlag:

```js
reachFlag(){
  if(this.state!=='playing') return;
  this.state='win';
  this.player.body.setEnable(false);
  this.player.setVelocity(0,0);
  this.player.anims.stop();
  this.player.setTexture('player0');
  this.tweens.add({targets:this.flagSprite,y:GY-58,duration:600,ease:'Quad.easeIn'});
  this.time.delayedCall(750,()=>{
    if(this.state!=='win') return;
    this.showOverlay('COURSE CLEAR!','You reached the flag! Coins: '+this.coinCount+' · Enemies stomped: '+this.stomped);
  });
}
```

showOverlay/hideOverlay:

```js
showOverlay(title,msg){
  this.ovTitle.textContent=title;
  this.ovMsg.textContent=msg;
  this.overlay.classList.remove('hidden');
}
hideOverlay(){ this.overlay.classList.add('hidden'); }
```

resetGame:

```js
resetGame(){
  this.state='playing';
  this.coinCount=0; this.stomped=0;
  this.hudCoins.textContent='0';
  this.player.body.setEnable(true);
  this.player.setPosition(START_X,START_Y);
  this.player.setVelocity(0,0);
  this.player.setFlipX(false);
  this.player.anims.stop();
  this.player.setTexture('player0');
  this.coins.clear(true,true);
  this.spawnCoins();
  this.enemies.clear(true,true);
  this.spawnEnemies();
  this.blocks.getChildren().forEach(b=>{
    if(b.wasQuestion){ b.isQuestion=true; b.setTexture('question'); }
  });
  this.flagSprite.setY(this.flagHomeY);
  this.cameras.main.setScroll(0,0);
  this.hideOverlay();
}
```

Note: dead enemies tweened to destroy — clear(true,true) destroys them ✓ (tween on destroyed target may error? Tween on destroyed gameObject — Phaser handles gracefully? A tween targeting a destroyed object: onComplete callback `e.destroy()` on already-destroyed object — destroy() on destroyed object is safe (idempotent? GameObject.destroy() twice — second call may throw? In Phaser 3, calling destroy twice is generally safe-ish but `e.destroy()` after already destroyed... Actually GameObject.destroy checks `if (!this.flags.destroyed)`? Hmm, not sure. To be safe: in tween onComplete check `if(e.active!==undefined && !e.destroyed)`... There's no `destroyed` flag property public... There IS: `gameObject.destroyed`? No. There's `this.active=false` after destroy. Check `if(e.active)` before destroy? After clear(), children destroyed → active=false. So `onComplete: ()=>{ if(e.active) e.destroy(); }` — but wait, after destroy active is false anyway. Hmm, but tween update on destroyed object: tween still runs, targets dead object — setting alpha on destroyed object... Could throw? Destroyed GameObjects: their properties still exist; setting alpha is harmless. onComplete checks e.active — false → skip destroy. But `e.active` after destroy is false ✓. Actually also `tweens` on destroyed objects: TweenManager doesn't auto-remove. Setting properties on destroyed sprite is harmless (no rendering). OK, use the guard.

Alternatively on reset, kill tweens: `this.tweens.killTweensOf(e)` — simpler: in spawnEnemies, before clear: `this.enemies.getChildren().forEach(e=>this.tweens.killTweensOf(e));` ✓ do that.

createTextures: all makeTexture calls including player frames, goomba frames, coin frames.

```js
createTextures(){
  makeTexture(this,'brick',TILE,TILE,drawBrick);
  makeTexture(this,'question',TILE,TILE,drawQuestion);
  makeTexture(this,'used',TILE,TILE,drawUsed);
  makeTexture(this,'rock',TILE,TILE,drawRock);
  makeTexture(this,'pipeTop',80,40,drawPipeTop);
  makeTexture(this,'pipeBody',80,40,drawPipeBody);
  makeTexture(this,'player0',28,40,(c,w,h)=>drawPlayerFrame(c,0));
  ... player1, player2, player3
  makeTexture(this,'goomba0',32,32,(c)=>drawGoomba(c,0));
  makeTexture(this,'goomba1',32,32,(c)=>drawGoomba(c,1));
  makeTexture(this,'goombaFlat',32,32,drawGoombaFlat);
  makeTexture(this,'coin0',24,24,(c)=>drawCoin(c,0));
  makeTexture(this,'coin1',24,24,(c)=>drawCoin(c,1));
  makeTexture(this,'cloud',110,50,drawCloud);
  makeTexture(this,'hill',140,90,drawHill);
  makeTexture(this,'bush',100,44,drawBush);
  makeTexture(this,'castle',220,160,drawCastle);
  makeTexture(this,'pole',10,200,drawPole);
  makeTexture(this,'ball',14,14,drawBall);
  makeTexture(this,'flag',48,36,drawFlag);
}
```

createAnims:

```js
createAnims(){
  this.anims.create({key:'run',frames:[{key:'player0'},{key:'player1'}],frameRate:9,repeat:-1});
  this.anims.create({key:'coinSpin',frames:[{key:'coin0'},{key:'coin1'}],frameRate:7,repeat:-1});
  this.anims.create({key:'goombaWalk',frames:[{key:'goomba0'},{key:'goomba1'}],frameRate:7,repeat:-1});
}
```

makeTexture:

```js
function makeTexture(scene,key,w,h,draw){
  const c=document.createElement('canvas');
  c.width=w; c.height=h;
  draw(c.getContext('2d'),w,h);
  scene.textures.addCanvas(key,c);
}
```

Called during create — textures manager available ✓.

Now CSS. Also add a scanline/vignette? Keep clean.

Also note: `#controls` at bottom overlaps game area — fine, semi-transparent.

Let me now also double-check `inGap`:

```js
function inGap(col){ return GAPS.some(g=>col>=g[0]&&col<g[1]); }
```

Edge: col 139 last; loop c<=LEVEL_TILES handles end.

One more consideration: ground segment sprites are static bodies 40 tall at y 440-480. Player standing on top at y=440 ✓. Deep image decoration 140 tall from 480 → to 620, below kill line, invisible (camera height 540 shows to 540; deep covers 480-540 visible ✓).

Gap depth: player falls through gap, below 480 nothing — falls to KILL_Y=720 → death ✓.

Enemy on segment near gap edge: minX/maxX prevent leaving ✓.

I think the design is solid. Let me also consider: player runs at 260px/s; level 5600px → ~22s to cross. Good.

Jump velocity 860, gravity 2000: max height = 860²/(2*2000) = 184.9px ≈ 4.6 tiles ✓ can clear pipe h=3 (120px) easily, h=4? none. Stairs 4 high climbed stepwise ✓.

Horizontal jump distance: airtime = 2*860/2000 = 0.86s → 224px ≈ 5.6 tiles. Max gap 3 tiles ✓ comfortable.

Now, question block at col 9 and 11, y=280 (row). Player head at 400 standing; block bottom at 320; jump 185 → head reaches 215 → hits ✓.

Bricks at y=280 also collidable from sides — player jumping near may bonk; fine.

One concern: brick row at cols 8-12 y=280 — enemy at col 12 patrols 410-550 x, y ground — no conflict (different y) ✓.

Also player spawn col 2 (x=90) — brick row above at col 8+; fine.

Alright, also add slight run acceleration? Direct velocity is fine and responsive.

Let me also handle the case where player holds right and presses restart via R — works.

Also `e.preventDefault()` for KeyR? Not needed.

Potential problem: `this.input.keyboard.on('keydown', ...)` — Phaser KeyboardPlugin emits 'keydown' with (event, keyCode) where event is KeyboardEvent ✓ e.code available ✓.

Now write the file. Also include title in HUD center: "SUPER PLATFORM BROS".

Let me write out the complete file text now, being careful with syntax.

Also — `drawUsed`:

```js
function drawUsed(ctx,w,h){
  ctx.fillStyle='#9c5a24'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#7a3a12'; ctx.fillRect(3,3,w-6,h-6);
  ctx.fillStyle='#9c5a24'; ctx.fillRect(5,5,w-10,h-10);
  ctx.fillStyle='#5a2d0c';
  [[3,3],[w-7,3],[3,h-7],[w-7,h-7]].forEach(p=>ctx.fillRect(p[0],p[1],4,4));
}
```

`drawRock`:

```js
function drawRock(ctx,w,h){
  ctx.fillStyle='#c8763a'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#e09b60'; ctx.fillRect(3,3,w-6,5);
  ctx.fillStyle='#a85a28'; ctx.fillRect(3,h-8,w-6,5);
  ctx.strokeStyle='#5a2d0c'; ctx.lineWidth=2; ctx.strokeRect(1,1,w-2,h-2);
}
```

`drawPipeTop`:

```js
function drawPipeTop(ctx,w,h){
  ctx.fillStyle='#3fae2a'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#7de05a'; ctx.fillRect(8,5,12,h-10);
  ctx.fillStyle='#2b8a1e'; ctx.fillRect(w-16,5,6,h-10);
  ctx.fillStyle='#14541a'; ctx.fillRect(w-6,0,6,h);
  ctx.strokeStyle='#0d3d08'; ctx.lineWidth=3; ctx.strokeRect(1.5,1.5,w-3,h-3);
}
function drawPipeBody(ctx,w,h){
  ctx.fillStyle='#3fae2a'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#7de05a'; ctx.fillRect(10,0,12,h);
  ctx.fillStyle='#14541a'; ctx.fillRect(w-8,0,8,h);
  ctx.strokeStyle='#0d3d08'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(1,0); ctx.lineTo(1,h); ctx.moveTo(w-1,0); ctx.lineTo(w-1,h); ctx.stroke();
}
```

Pipe top wider than body visually? Both 80 wide here — pipe top should stick out slightly. Make pipeTop 88 wide and body 80? Then top sprite center offset differs. Pipe: top texture 88x40, body 80x40. Center top at x+44, body at x+40. Collision: top slightly wider — fine.

Actually simpler keep both 80. Visual fine.

`drawBall`:

```js
function drawBall(ctx,w,h){
  ctx.fillStyle='#ffd23e';
  ctx.beginPath(); ctx.arc(w/2,h/2,w/2-1,0,Math.PI*2); ctx.fill();
  ctx.strokeStyle='#a86e00'; ctx.lineWidth=2; ctx.stroke();
}
```

`drawCoin`:

```js
function drawCoin(ctx,frame){
  const rx=frame===0?10:4;
  ctx.save(); ctx.translate(12,12);
  ctx.fillStyle='#f8c800';
  ctx.beginPath(); ctx.ellipse(0,0,rx,11,0,0,Math.PI*2); ctx.fill();
  ctx.strokeStyle='#a86e00'; ctx.lineWidth=2; ctx.stroke();
  ctx.fillStyle='#ffe98a';
  ctx.beginPath(); ctx.ellipse(-rx*0.25,-3,rx*0.35,4.5,0,0,Math.PI*2); ctx.fill();
  ctx.restore();
}
```

`drawGoomba`:

```js
function drawGoomba(ctx,frame){
  ctx.fillStyle='#3a1c08';
  if(frame===0){ ctx.fillRect(3,26,11,5); ctx.fillRect(18,26,11,5); }
  else { ctx.fillRect(1,26,11,5); ctx.fillRect(20,26,11,5); }
  ctx.fillStyle='#a0522d';
  ctx.beginPath(); ctx.ellipse(16,15,15,15,0,0,Math.PI*2); ctx.fill();
  ctx.fillStyle='#c47a4a';
  ctx.beginPath(); ctx.ellipse(16,21,9,5,0,0,Math.PI*2); ctx.fill();
  // eyes
  ctx.fillStyle='#fff';
  ctx.beginPath(); ctx.ellipse(10,11,4.5,6,0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(22,11,4.5,6,0,0,Math.PI*2); ctx.fill();
  ctx.fillStyle='#111';
  ctx.beginPath(); ctx.ellipse(11,12,2,3,0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(21,12,2,3,0,0,Math.PI*2); ctx.fill();
  // brows
  ctx.strokeStyle='#3a1c08'; ctx.lineWidth=3;
  ctx.beginPath(); ctx.moveTo(4,4); ctx.lineTo(13,9); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(28,4); ctx.lineTo(19,9); ctx.stroke();
  // fangs
  ctx.fillStyle='#fff';
  ctx.fillRect(11,19,3,4); ctx.fillRect(18,19,3,4);
}
function drawGoombaFlat(ctx){
  ctx.fillStyle='#a0522d';
  ctx.beginPath(); ctx.ellipse(16,27,16,5,0,0,Math.PI*2); ctx.fill();
  ctx.strokeStyle='#3a1c08'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(8,24); ctx.lineTo(13,29); ctx.moveTo(13,24); ctx.lineTo(8,29); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(19,24); ctx.lineTo(24,29); ctx.moveTo(24,24); ctx.lineTo(19,29); ctx.stroke();
}
```

`drawGroundDeep`:

```js
function drawGroundDeep(ctx,w,h){
  ctx.fillStyle='#e09b4f'; ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#b5722f';
  for(let x=8;x<w;x+=24) for(let y=10;y<h;y+=20) ctx.fillRect(x,y,4,4);
  ctx.fillStyle='#c98a45';
  for(let x=20;x<w;x+=48) for(let y=24;y<h;y+=40) ctx.fillRect(x,y,8,3);
}
```

OK. Writing final file now. I'll write it with the write tool, then test with browser tool.

For the CSS, make it polished:

```css
html,body{margin:0;padding:0;background:#141428;min-height:100vh;}
body{display:flex;align-items:center;justify-content:center;font-family:'Courier New',Courier,monospace;}
#wrap{position:relative;width:960px;max-width:100vw;box-shadow:0 0 0 4px #000,0 12px 40px rgba(0,0,0,.6);border-radius:4px;overflow:hidden;}
#game{line-height:0;}
canvas{width:100%;height:auto;display:block;}
#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;pointer-events:none;color:#fff;font-weight:bold;font-size:20px;text-shadow:2px 2px 0 #000;}
#restartBtn{pointer-events:auto;font-family:inherit;font-weight:bold;font-size:15px;padding:7px 14px;background:#e0301e;color:#fff;border:3px solid #fff;box-shadow:3px 3px 0 #000;cursor:pointer;border-radius:6px;}
#restartBtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000;}
#controls{position:absolute;left:0;right:0;bottom:0;text-align:center;padding:7px 0;background:rgba(0,0,0,.35);color:#fff;font-size:14px;font-weight:bold;letter-spacing:1px;text-shadow:1px 1px 0 #000;pointer-events:none;}
#overlay{position:absolute;inset:0;background:rgba(10,10,30,.6);display:flex;align-items:center;justify-content:center;z-index:20;}
#overlay.hidden{display:none;}
.panel{background:#fff8e7;border:4px solid #000;box-shadow:8px 8px 0 #000;border-radius:8px;padding:30px 46px;text-align:center;max-width:80%;}
.panel h1{font-size:34px;margin:0 0 10px;color:#e0301e;text-shadow:2px 2px 0 #000;letter-spacing:2px;}
.panel p{margin:0 0 20px;font-size:16px;color:#333;}
.panel button{font-family:inherit;font-weight:bold;font-size:17px;padding:10px 26px;background:#3fae2a;color:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000;cursor:pointer;border-radius:6px;}
.panel button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000;}
```

HUD coin display with a coin dot: use span with inline-block gold circle. Add `<span class="coinDot"></span>` styled.

Now write it all. Then browser test: screenshot initial, check console, simulate keys: press Right/D for a while, jump, check camera scroll via... I can inspect DOM/console with browser tool actions: key presses (action 'key' with text?), click. The browser tool supports key action with text presumably. And 'inspect' returns DOM/console. I'll do a sequence: reload, screenshot, key d (hold? single presses), check console errors.

I can also evaluate JS? No eval tool — only inspect DOM/console. I can read canvas state via screenshot. Camera scroll not directly visible in DOM... The canvas is drawn; screenshot shows view. Moving right should show different scenery — screenshot comparison. Also inspect may show console logs — I'll add temporary debug logs? Better: add a small permanent debug readout? Not needed; I can verify camera by screenshots at different positions.

Actually I can verify more rigorously: expose `window.__game = this` in create for debugging (harmless), then... but I can't run arbitrary JS in browser tool. Only inspect DOM/console. Hmm, "inspect DOM/console" — maybe it returns console messages. I could log camera scrollX to console on interval when a debug flag set. Let me add a tiny debug hook: pressing F2 logs state? Overkill. I'll add `window.__platform = this;` and console.log in resetGame etc. Then use browser 'inspect' to see console output. If inspect shows console logs, great.

Let me include a few console.log statements for verification (they're harmless): on create "level built", on reset "game reset", on win/lose. And in update maybe not (spam). For camera check, log once per second camera scrollX? Could log on keydown R and every 60 frames... I'll add a periodic log every 120 frames of player.x and camera scrollX — small console spam but useful for verification. Actually keep it minimal: log every 90 frames: `frame%90===0 → console.log('[dbg]', Math.round(player.x), Math.round(cam.scrollX), coinCount)`. That gives verification data. I could remove after testing, but harmless to keep? Slight console spam in final artifact. I'll keep it behind `?debug`... simpler: keep it, it's one line per 1.5s. Hmm, final artifact cleanliness — I'll remove after testing. Actually keeping a tiny debug line is fine but let me remove to be clean. I'll decide after testing.

Let me write the file now.

Also remember requirement: "Use the provided phaser.min.js (global Phaser) through a plain local script tag" ✓.

Write now.

Now test in the browser. First reload and screenshot to see the initial state.

Error: `this.createTextures is not a function`. The scene object with methods — Phaser 3 copies scene methods? When you pass a plain object as scene, Phaser wraps it. Methods on the object literal should work... The issue: Phaser's Scene bootstrap — when scene is a plain object, Phaser uses `ClassFactory` and injects systems. Actually the issue might be that Phaser calls `create` with the scene instance where `this` is a Systems-based Scene, and the object's methods are mixed in. Hmm, in Phaser 3, passing an object literal as scene: the properties are copied onto the scene instance via `BuildScene`... Methods should be available.

Wait — the error might be that `create` is called, and inside `this.createTextures` — the scene object methods are copied... Let me check: Phaser SceneManager creates a `Scene` instance and if config is object, it uses `Object.assign`? Actually Phaser uses `Class` system: scene object literal gets turned into a class via `SceneManager` — it creates `new Scene(...)` then `Class` mixin... In Phaser 3, when you provide a plain object, the Scene plugin does:

```js
var scene = new Scene(...)  // no
```

Actually `SceneManager.create` → `buildScene` → if `sceneConfig` is object, it does `this.scene = new Scene(...)`? Let me recall: In Phaser 3, scene can be object literal — the properties are copied onto the scene instance via `BuildScene`... In Phaser 3, when you provide a plain object, the Scene plugin does: `Object.assign(this, sceneConfig)`? Hmm, but the error says createTextures is not a function. Maybe methods are copied but `this.create` is invoked... wait, create itself ran (since error came from create calling this.createTextures). So `create` exists but `createTextures` doesn't. Odd.

Ah — I know: Phaser's scene injection uses a list of reserved/injectable methods, and it copies own properties of the config object onto the scene. But maybe it only copies functions that are not... hmm. Actually the issue could be that Phaser uses `SceneManager` which does:

```js
const scene = new Phaser.Scene(...)
```

No. Let me think about `BuildScene`: In `SceneManager.create`, it does:

```js
buildScene(sceneConfig) {
  ...
  if (IsPlainObject(sceneConfig)) {
    ...
    const scene = new Scene(...)  // ?
```

Hmm, actually I recall: `SceneManager` creates `new Scene(sys, ...)`? The `Scene` class... In Phaser 3, `SceneManager.create(config)`:

```js
const scene = new (class extends Scene {})...
```

Hmm, I don't remember. The actual mechanism: `Phaser.Scenes.SceneManager` → `create` → `buildScene` → uses `Class` from classmanager: 

```js
var sceneClass = Class({ Extends: Phaser.Scene, ... })
```

Hmm no. The real mechanism in Phaser 3: scene configs are processed by `SceneManager.create` which does:

```js
buildScene (sceneConfig)
{
    ...
    if (IsPlainObject(sceneConfig))
    {
        //  A plain object
        ...
        this.systems = new Systems(this, sceneConfig);
        ...
    }
}
```

And `Systems` constructor does `Class.mixin`? Hmm... Actually I recall: `Systems` calls `this.scene = ...` and then `BuildScene`... 

The key insight: in Phaser 3, methods defined in the scene object ARE available (this is standard Phaser usage — people define `create() {}` etc. in object literals and call helper methods like `this.myHelper()`). Wait, do they? Common examples define all functions in the object literal and call them via `this.` — yes, that works normally. E.g., Phaser docs examples use object literals with methods calling each other.

So why "this.createTextures is not a function"? Hmm... Maybe the issue: Phaser wraps the scene config and copies properties, but there's a name conflict? `createTextures`... no.

Wait — maybe the issue is different: the error might occur because `create` is called with a different `this`? No, create ran.

Hmm, actually maybe the issue is that Phaser's scene system copies the config's own enumerable properties onto the scene instance. Object literal methods ARE own enumerable properties. So they should be copied.

Unless... the copy happens but `create` is invoked BEFORE the copy? No, error is inside create.

Let me look more carefully — maybe the error is thrown during `create` but `this` inside `create` is the scene instance where only *some* methods got copied? That seems odd.

Alternative theory: Phaser 3.80 uses `SceneManager` with `Class` injection: it creates a class from the config where methods become part of the class. That should include all methods.

Hmm wait, actually — I bet the issue is that Phaser's scene injection uses a list of reserved/injectable methods, and it copies functions... Let me just test quickly with a minimal reproduction, or simpler: convert to a class-based scene (`class GameScene extends Phaser.Scene`). That's the most robust approach. Let me check if `Phaser.Scene` is available in the global build — yes.

Actually hold on. Let me reconsider: maybe the error is because `createTextures` conflicts with something? No...

Let me quickly test with a small repro to understand, or just switch to class syntax which definitely works. I'll switch to `class GameScene extends Phaser.Scene`. That's the safest.

Actually wait — I want to understand because object literal scenes are extremely common in Phaser 3. Hmm, one possibility: the runner inlined `phaser.min.js` — the console shows "Phaser v3.80.1 (WebGL)". The error "this.createTextures is not a function"... 

Oh! I see it. I wrote `const scene = { preload() {}, create() {...}, ... }` and `scene` is also... no conflict.

Hmm, another thought: Phaser's `Systems` uses `Class.mixin`? In Phaser 3, `SceneManager.create` does:

```js
buildScene(sceneConfig) {
  ...
  const scene = new Scene(...)? 
```

Actually here's the real code (Phaser 3.80, SceneManager.js):

```js
create (key, ...args) {
    ...
    const sceneConfig = ...;
    ...
    this.buildScene(sceneConfig, args)
}

buildScene(sceneConfig, args) {
    let scene = sceneConfig;
    if (IsPlainObject(sceneConfig)) {
        ...
        scene = new Scene(...)  // no...
```

I really don't remember. But empirically, object literal scenes with helper methods work in Phaser 3 — I've seen many examples. E.g., official examples:

```js
const config = {
  type: Phaser.AUTO,
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};
```

where functions are declared separately and reference each other via closure — not via `this.helper()`. Hmm! That's the pattern: functions declared as standalone, sharing closures. But calling `this.myMethod()` from a method in an object literal... 

Actually, I recall that Phaser DOES support this. The `Systems` class does:

```js
// in Systems constructor:
Class.mixin(this, ...)
```

Hmm. Let me just check the phaser.min.js source for how scene config is handled. Search for "mixin" or check SceneManager. Let me grep.

Actually, faster: just switch to `class GameScene extends Phaser.Scene` — guaranteed to work with method calls. Let me do that. But I'm curious; quick grep won't hurt.

Minified, hard to inspect. Rather than debug, switch to a class-based scene which is guaranteed to support `this.method()` calls. Let me convert the scene object to `class GameScene extends Phaser.Scene`.

"Unexpected token ','" — my edit left a dangling fragment. The original object was:

```js
const scene = {
  preload() {},

  create(){
```

I replaced `const scene = {\n  preload() {},` with `class GameScene extends Phaser.Scene {\n  constructor(){ super('game'); }` — so now it reads:

```js
class GameScene extends Phaser.Scene {
  constructor(){ super('game'); }

  create(){
```

That should be fine... but the end: original ended with:

```js
  }
};

const config = {...};
```

I replaced `};\n\nconst config` with `}\n\nconst config` — wait, my oldText was `};\n\nconst config = {` and newText `}\n\nconst config = {`. Hmm, that removes the semicolon after `}`. That's fine syntactically.

Wait, "Unexpected token ','" — where's a comma issue? Maybe the edit matched something else. Let me check the file around the scene definition and the end.

The class structure looks right. Line 291 starts the class. Let me check around line 291 for the issue — "Unexpected token ','". Maybe there's a leftover `preload() {},` fragment or the constructor line. Let me view lines 288-300.

The class looks fine. So where's "Unexpected token ','"? Maybe in the minified phaser? No — the error appeared after my edit. Wait, maybe the error is from the inline script parse. Let me check the whole script syntax with node.

I need to find the syntax error. Let me locate it precisely.

The regex matched the first `<script>` ... but the first script tag is `<script src="phaser.min.js"></script>` — my regex `/<script>([\s\S]*)<\/script>/` matched `<script>` (the second one, inline) but greedy `[\s\S]*` — actually it starts at `<script>` exactly (not `<script src=...`), so it starts at the inline script. Line 21 of the inline script is ENEMY_DEFS. Hmm wait, but the prefix-parsing approach is flawed: parsing prefixes of code naturally throws "Unexpected token" for incomplete constructs at every line... Actually no — incomplete code throws "Unexpected end of input" typically, but a prefix ending mid-expression like `const ENEMY_DEFS = [` throws "Unexpected end of input" too. Hmm, but "Unexpected token ','" at line 21...

Wait, the issue: my prefix approach reports the first line where the error message contains "Unexpected token" — but incomplete code can throw various errors. Let me instead find the real error location properly. Actually, a simpler hypothesis: the earlier check `new Function(m[1])` threw "Unexpected token ','" — that's a real parse error in the full script. Let me use node to parse the full script and get the error location. `new Function` doesn't give line numbers. Let me write the script to a temp file and use `node --check`.

Line 295 of the extracted JS = line 295 of the inline script. The inline script starts at some HTML line. The extracted JS line 295 corresponds to HTML line 295 + offset. Let me find where the script tag starts. Actually the error is at JS line 295: `},`. Let me map: the inline `<script>` begins after `<script src="phaser.min.js"></script>`. Let me just look at the HTML around the equivalent location — the class ends around line 617 in HTML. JS line 295... let me compute: find the line number of `<script>` (inline, no src).

JS line 295 = HTML line 50+295 = 345. Let me look at HTML line ~340-350. The issue: `},` right before `/* ---------- construction ---------- */` — that's the end of `create()`. The problem: after my edit, `create(){` is a method now, so it should end with `}` not `},`. The old object literal had `create(){ ... },` with a trailing comma — that comma is now invalid inside a class body!

Fix: remove the comma after create's closing brace. Let me view HTML around line 345.

Another trailing comma — the class has many methods that ended with `},` in the object literal. All method definitions in the class need trailing commas removed. Let me find all `},` lines that close class methods. Rather than fixing one by one, let me use a script: within the class body (lines from `class GameScene` to the closing `}` before `const config`), replace `\n  },\n` with `\n  }\n`. But careful: object literals inside methods are indented deeper (4+ spaces), so `  },` at exactly 2-space indent corresponds to class method ends. Let me verify: method bodies close with `  }` at 2-space indent. Object literals inside are at 4+ spaces. So replacing lines that are exactly `  },` with `  }` within the class range is safe.

One method is single-line: `hideOverlay(){ ... },`. Fix that one too.

Game created successfully — level width 5600, 49 coins. Now test running and jumping. Let me take a screenshot first, then simulate key presses. The browser tool supports 'key' action with text. Let me press D/Right to run, then Space to jump.

First screenshot to see the starting area.

The screenshot tool says "images: model does not support images" — I can't see screenshots. I'll rely on console logs and DOM. Let me add a debug readout to verify game state via console logs. Actually, I can use the console.log in resetGame already. Let me test running: press D key for a while, then check console. But update() doesn't log. Let me use the browser 'key' action to press keys, then 'inspect' to see console.

Actually, a better approach for verification: use the key action to hold movement. The browser tool 'key' action with text simulates a keypress. Holding may not work with single key actions. Let me try pressing 'd' multiple times or use 'key' with text "d". 

Alternatively, I can write a quick verification harness: temporarily add a debug log in update every 60 frames. But that changes the artifact... I could add a temporary hook and remove it after. Simpler: use browser key events.

Let me try: action 'key' with text 'd' — presses D. Then screenshot/inspect. To verify camera following, I need player position and camera scrollX in console. Let me add a periodic debug log guarded by a URL query or just always log every 2 seconds — that's acceptable to keep minimal, but cleaner to remove after testing. Given time constraints, I'll add a temporary console.log in update, test, then remove.

Actually — I can verify via the existing resetGame log plus a few strategic additions. Let me add a temporary debug line to update() that logs every 120 frames, test, then remove it before finalizing.

Now let me press D to run right. The key action: {"action":"key","text":"d"}. Then wait — each browser call is a separate action; the game keeps running between calls presumably. Let me press d a few times, then check console for debug logs.

The key press registered but I need to hold it. The 'key' action may be a tap. Let me check if there's a way to hold — maybe 'drag' or repeated key presses. Let me press 'd' multiple times in sequence and check the debug log. Actually, the debug log only appears every 120 frames (~2 sec at 60fps). Let me press d several times then inspect.

The key action seems to be a quick tap — the console doesn't show new logs yet (the log buffer may only show new entries since last call, but it's showing the same startup logs). The debug log fires every 120 frames. Key taps may not hold long enough for movement. 

The console output appears to be cumulative (same logs each time). No [dbg] lines yet — meaning either the key isn't being held, or not enough time passed between calls.

Hmm, the issue: each browser tool call may only hold the key for milliseconds. 120 frames = 2 seconds. So no debug log yet.

Better approach: instead of relying on held keys, let me write a small automated test that runs inside the page. I can't eval JS with the browser tool... but I CAN add a temporary auto-test in the game script itself that runs a scripted sequence (simulate holding keys via keyboard plugin) and logs results. That's a clean way to verify: use `this.input.keyboard` simulation? Phaser can't easily simulate keydown events... Actually I can dispatch KeyboardEvent on window: `window.dispatchEvent(new KeyboardEvent('keydown', {code:'KeyD'}))` — Phaser listens on window keydown? Phaser's keyboard plugin listens to the window/document. Dispatching synthetic KeyboardEvent should work.

Let me add a temporary self-test that:
1. At t=1s: hold KeyD (dispatch keydown), run for 2s, log player x and camera scrollX.
2. Then dispatch Space keydown (jump), log vy/grounded over time.
3. Then release, then press R (reset), log player pos, camera, coin count.

But timing via game loop is fiddly. Simpler: a sequence with delayedCall:

```js
// temp self-test
const kb = this.input.keyboard;
const press = (code, down) => window.dispatchEvent(new KeyboardEvent(down?'keydown':'keyup', {code}));
```

Wait — Phaser's KeyboardPlugin listens on `window` for keydown/keyup? It listens on the window by default (KeyboardManager). Synthetic events dispatched on window should trigger it. The `key` property state updates via `onKey` handlers. Yes, this works.

Test plan (in create, after setup):
```js
// SELFTEST
const press = (code, type) => window.dispatchEvent(new KeyboardEvent(type, {code}));
this.time.delayedCall(500, () => press('KeyD','keydown'));       // start running right
this.time.delayedCall(2500, () => {
  console.log('[test] after run: player.x=', Math.round(this.player.x), 'cam=', Math.round(this.cameras.main.scrollX));
  press('Space','keydown');                                       // jump
});
this.time.delayedCall(2700, () => console.log('[test] jump: vy=', Math.round(this.player.body.velocity.y), 'grounded=', this.player.body.blocked.down));
this.time.delayedCall(4200, () => {
  console.log('[test] landed: grounded=', this.player.body.blocked.down, 'y=', Math.round(this.player.y));
  press('KeyD','keyup');
  press('KeyR','keydown');                                        // restart
});
this.time.delayedCall(4500, () => {
  console.log('[test] after reset: player', Math.round(this.player.x), Math.round(this.player.y),
    'coins', this.coinCount, 'visible coins', this.coins.countActive(true), 'cam', Math.round(this.cameras.main.scrollX));
});
```

Wait — but pressing KeyD keydown then Space: my keydown handler calls tryJump only if grounded — at 2500ms player is running on ground, so jump works. Then at 2700ms (200ms later) player is mid-air (jump airtime ~860ms). vy should be negative-ish or positive. At 4200ms (1.7s later) player landed.

Also test stomp? Enemy at col 12 (x=480) — running from x=90 at 260px/s for 2s → x≈610, passes enemy at 480. Hmm, might stomp or die. That complicates the test. The enemy patrols 410-550. Player running right at 2s reaches ~610 — likely collides with enemy around x=450-480 at ~1.4s. Could be side contact → death → game over → reset at 4200ms still works.

To keep the test deterministic, run only 1s (260px → x≈350, before enemy at 410 minX). Then jump. Let me adjust: hold D from 500ms to 1500ms (1s → +260px → x≈350). Jump at 1500ms. Check mid-air at 1700ms. Landed at 2500ms. Then test coin collection? Coins at col 8-12 row y=220 are above; ground coins at col 14 (x=580, y=370) — reachable by walking into it. Run to x=580 takes (580-90)/260 ≈ 1.9s. Hmm, enemy at col 12 patrols 410-550 — collision risk between x 410-550. Player would hit enemy around x=410 at t≈1.2s+0.5s... 

Alternative: jump over the enemy! At 1.2s player at ~x=400, jump clears enemy (needs to be airborne while passing 410-550: 140px at 260px/s ≈ 0.54s; jump airtime 0.86s — tight but doable if timed). Too fiddly.

Simpler: verify core mechanics only (run, jump, camera, reset) in the first segment, which is enemy-free up to x≈400. Then separately verify stomp logic by... I could trust the code, or do a targeted test: teleport player near an enemy and drop onto it. I can access the scene via window.__platform (I stored the game). But I can't run JS in the browser tool... 

OK here's the thing — I can add a temporary self-test inside the game script that does everything, including teleporting. Let me write a comprehensive temporary self-test:

```js
// TEMP SELF-TEST (remove before final)
const press = (code, type) => window.dispatchEvent(new KeyboardEvent(type, {code}));
setTimeout(() => press('KeyD','keydown'), 400);
setTimeout(() => {
  console.log('[t1] ran right: player.x', Math.round(this.player.x), '(expect >90), cam.scrollX', Math.round(this.cameras.main.scrollX));
  press('Space','keydown');
  console.log('[t2] jump pressed: vy', Math.round(this.player.body.velocity.y), 'grounded', this.player.body.blocked.down);
}, 1400);
setTimeout(() => {
  console.log('[t3] mid-air: vy', Math.round(this.player.body.velocity.y), 'grounded', this.player.body.blocked.down);
}, 1700);
setTimeout(() => {
  console.log('[t4] landed: grounded', this.player.body.blocked.down, 'player.y', Math.round(this.player.y));
  press('KeyD','keyup');
  // stomp test: place player above enemy
  const e = this.enemies.getChildren()[0];
  this.player.setPosition(e.x, e.y - 60);
  this.player.body.setVelocityY(400);
}, 2600);
setTimeout(() => {
  console.log('[t5] stomp: enemy dead', this.enemies.getChildren()[0].dead, 'player.vy', Math.round(this.player.body.velocity.y), 'stomped', this.stomped);
  press('KeyR','keydown');
}, 3200);
setTimeout(() => {
  console.log('[t6] after reset: player', Math.round(this.player.x), Math.round(this.player.y), 'coins', this.coinCount, 'visible coins', this.coins.countActive(true), 'enemy0 dead', this.enemies.getChildren()[0].dead, 'cam', Math.round(this.cameras.main.scrollX));
}, 3500);
```

Concerns:
- At 1400ms, player has run 1s → x≈350. Enemy 0 patrols 410-550 — no contact yet. Good.
- Jump at 1400ms: grounded → vy=-860. ✓
- At 1700ms: 300ms into jump, vy = -860+2000*0.3 = -260 (still rising), grounded false. ✓
- At 2600ms: 1.2s after jump — landed (airtime 0.86s). grounded true, y≈400 (player center y = GY-40+20? player y is center: START_Y=GY-40=400, standing y=400). ✓
- Stomp test: teleport to (e.x, e.y-60), vy=400 falling. e.y = GY-32=408 (center). Player at y=348, falling at 400px/s... player bottom = y+20=368, enemy top = e.y-14=394. Gap 26px, closing at 400px/s → ~65ms to contact. At contact, falling=true, player.bottom - enemy.top < 24 → stomp. enemy.dead=true, player.vy=-860*0.62=-533. ✓ But wait — enemy patrols; by 2600ms enemy moved. We read e.x at that moment, fine. Also player teleport — camera follows.
  - Edge: enemy might be mid-flip with velocity; fine.
  - Also possible: player teleported into enemy's side if enemy moved during the 65ms... enemy moves at 60-70px/s → ~5px in 65ms. Player lands on top region; the check is fromAbove: player.bottom - enemy.top < 24. At first overlap frame, player.bottom ≈ enemy.top + up to ~13px (400px/s * 16ms = 6.4px per frame) → within 24. ✓
- At 3200ms: stomp verified, then R resets.
- At 3500ms: reset verified: player at (90,400), coins 0, visible coins 49, enemy0 dead false, cam 0.

Also verify side-contact death: teleport player to enemy side with vy=0... Let me add:
After stomp test, reset first, then side-contact test:
```js
setTimeout(() => {
  press('KeyR','keydown');
}, 3300);
setTimeout(() => {
  const e = this.enemies.getChildren()[0];
  this.player.setPosition(e.x - 40, e.y - 10);
  // walk into enemy
  press('KeyD','keydown');
}, 3600);
setTimeout(() => {
  console.log('[t7] side contact: state', this.state, '(expect dying/gameover)');
  press('KeyD','keyup');
  press('KeyR','keydown');
}, 4400);
setTimeout(() => {
  console.log('[t8] final reset: player', Math.round(this.player.x), Math.round(this.player.y), 'state', this.state);
}, 4700);
```

Hmm wait, side contact: player at (e.x-40, e.y-10) — player center 40px left of enemy center; player half-width 12-14, enemy half 14 → gap ~12px. Walking right at 260px/s → contact in ~50ms. Enemy walking left toward player → faster contact. Side contact → startDying → state 'dying'. But timing: at 4400ms (800ms later) state would be 'gameover' (dying lasts 950ms). Expect 'gameover' or 'dying'. ✓

But careful: during side-contact test, player might jump? No, only D held.

Also the gap-death test: teleport player over a gap at col 16-17 (x 640-760): setPosition(700, 300) with body enabled... then falls into gap → y>720 → startDying(true) → gameover. Add:

```js
setTimeout(() => {
  press('KeyR','keydown');
}, 4800);
setTimeout(() => {
  this.player.setPosition(700, 300);  // over first gap
}, 5100);
setTimeout(() => {
  console.log('[t9] gap fall: state', this.state, '(expect gameover), player.y', Math.round(this.player.y));
  press('KeyR','keydown');
}, 6500);
setTimeout(() => {
  console.log('[t10] final: state', this.state, 'player', Math.round(this.player.x), Math.round(this.player.y), 'cam', Math.round(this.cameras.main.scrollX), 'coins', this.coinCount);
}, 6800);
```

Wait — teleporting player to (700,300): player falls from 300, gap at cols 16-17 = x 640-760. Player at x=700 is over the gap ✓. Falls, passes 720 → startDying(true) → 950ms later gameover. At 6500ms (1.4s later) state='gameover' ✓.

Also coin collection test: after final reset, teleport player onto a ground coin at col 14 (x=580, y=370 center): setPosition(580, 370) → overlap → coin count 1. Add:

```js
setTimeout(() => {
  this.player.setPosition(580, 370);
}, 7100);
setTimeout(() => {
  console.log('[t11] coin collect: coins', this.coinCount, '(expect 1), visible coins', this.coins.countActive(true), '(expect 48)');
}, 7400);
```

Hmm wait, but player at (580,370) — falls to ground (y=400) but coin at y=370 with 24x24 body (358-382); player falling from 370 center, body 350-390 → overlaps coin immediately ✓. Also enemy at col 12 patrols 410-550 — player at 580 is outside. ✓

Also question block test: teleport under question block at col 9 (x=380, block y=280-320, bottom 320). Player jump from ground: head at 380... player center 400, top 380. Block bottom 320. Need head to reach 320 → jump 60px+. Trigger tryJump via Space keydown:

```js
setTimeout(() => {
  this.player.setPosition(380, 400);
  press('Space','keydown');
}, 7700);
setTimeout(() => {
  console.log('[t12] ? block: coins', this.coinCount, '(expect 2)');
}, 8300);
```

Wait after t11 coin count is 1; hitting ? block adds 1 → 2 ✓. Player at x=380 = col 9.5 center — question block at col 9 spans x 360-400 ✓. Player jumps, head hits block bottom (320): head top = player.y - 20 (body offset 2, size 38 → top ≈ y-19). Needs player.y ≤ 339 → rise of 61px from 400 ✓ easily.

But hold on — after t11, player is at (580,370) standing on ground. Teleport to (380,400) — fine.

Also win test: teleport to flag at FLAG_X=5140, y=400:

```js
setTimeout(() => {
  press('KeyR','keydown');
}, 8600);
setTimeout(() => {
  this.player.setPosition(FLAG_X, 400);
}, 8900);
setTimeout(() => {
  console.log('[t13] win: state', this.state, '(expect win), overlay visible', !document.getElementById('overlay').classList.contains('hidden'));
}, 9800);
```

At 8900ms teleport to flag zone (x 5140, y 400 — zone covers y 240-440 ✓) → reachFlag → state 'win', overlay after 750ms → at 9800ms overlay visible ✓.

Total test ~10s. Then remove the self-test code and debug log, reload, final check.

One concern: synthetic KeyboardEvent — Phaser's keyboard manager listens on window? In Phaser 3, KeyboardManager uses `window.addEventListener('keydown', ...)`? It uses the "target" which defaults to window. Yes: `KeyboardPlugin` listens on `window` (this.target = window by default... actually `this.manager` listens on `window`). Synthetic events on window should be captured. The keycode: KeyboardEvent with {code:'KeyD'} — Phaser checks event.code? Phaser's keydown handler uses `event.keyCode` (legacy) — hmm! Phaser 3.80 KeyboardManager.onKeyDown uses `event.keyCode`? Let me think... Phaser uses `event.code` in newer versions? In Phaser 3, `KeyboardManager.onKeyDown(event)`:

```js
onKeyDown (event) {
    ...
    const keyCode = event.keyCode;  // ?
```

Hmm, I recall Phaser uses `event.code` with `Keys` via `event.code`... Actually Phaser 3's KeyboardPlugin creates Key objects with `keyCode` (the legacy `e.keyCode` numbers). In `KeyboardManager.onKeyDown`:

```js
onKeyDown (event) {
    if (event.defaultPrevented) return;
    ...
    this.keys.forEach(...)  // matches by keyCode
}
```

I believe Phaser matches `event.keyCode`. Synthetic KeyboardEvent with only `code` set has `keyCode = 0` → won't match! I should include `keyCode` in the init dict: `new KeyboardEvent('keydown', {code:'KeyD', keyCode:68})`. keyCode is read-only but init dict accepts it in Chrome? KeyboardEventInit supports `keyCode` and `charCode` as legacy init members in Chrome (non-standard but supported). Yes, Chrome supports keyCode in KeyboardEventInit.

KeyD keyCode = 68, Space = 32, KeyR = 82.

My own handler uses e.code — fine either way. Phaser's cursors use keyCode: ArrowRight=39, KeyD=68.

So press helper: `new KeyboardEvent(type, {code, keyCode})`.

Let me add the self-test block at the end of create(). I'll wrap it in `if(location.hash === '#selftest')`? Simpler: just include it temporarily and remove after. Let me add it now.

Also note: resetGame logs '[game] reset' — useful.

Let me write the self-test insertion.

The self-test runs over ~10 seconds. I need to wait for the logs. Let me inspect again after a delay — the console output should accumulate. Let me call inspect to see the full console.