We need build single-page web app, all in index.html in current directory. We have phaser.min.js already present. We must use global Phaser. Build playable side-scrolling platformer Mario style: run and jump scrolling platforms, stomp enemies, collect coins, reach flag. ONLY procedural graphics, no external assets. Need create index.html. Need likely test file creation. Let's think design fully.

We need output final index.html. Need include CSS and JS in same file. Use Phaser loaded via local phaser.min.js. Must use no network. We'll build a Phaser 3 scene with procedural textures generated via Phaser.GameObjects.Graphics? Or generate textures in JS with RenderTexture/Graphics. Use make.graphics. Need platforms, player, enemies, coins, flag. Side-scrolling: camera follow player. Input arrows/WASD or touch? Maybe keyboard only for simplicity. Need stomp enemies: jump on top to kill, otherwise die. Collect coins. Reach goal flag for win. Include hud score/lives maybe, game over/wincreens.

We must ensure procedural graphics: generate textures for ground block, brick, coin, enemy, flag, player, etc. We can create textures with Phaser make.graphics and generateTexture. Colors pixel art style. Use tileSprite? But procedural textures in canvas. Generate 32x32 blocks.

Need handle platform layout. We can design level data array. Side-scrolling. Use Phaser arcade physics, create world bounds. Create ground platforms from tile. Maybe use a tilemap? procedural textures can be sprites repeated. But physically use staticGroup with children for each block 32x32. Use scale 2 maybe. For a long level with many blocks, static group count maybe manageable.

Let's set tileSize=32, scale 2? Graphics texture size tileSize; world in tile coords. Need block sprites scaled? Better use tileSize as physics size. Graphics textures drawn at tileSize. Render scale canvas maybe responsive. It should be playable. Use game config width 800 height 480, physics arcade, gravity 900. Use pixel art style but no external assets. Use render config pixelArt true maybe.

Design level string arrays. Let's create a function generateLevel returning map of rows with characters: # ground block, B brick block, C coin, E enemy, ^ spike? F flag. We need many rows * columns. Use small array maybe 25 cols width 200. Each char 32x32; 200 columns = 6400 px. That's manageable.

Procedural generation of graphics:

- sky color background via config.backgroundColor.
- blockGraphics: createTexture('ground', draw brown top, dirt body, grass? For classic Mario style maybe green top? Let's make ground: green top border with brown dirt.
- brick: red brick with mortar.
- coin: yellow circle.
- enemy: goomba-like mushroom: brown body, darker feet, eyes.
- flag: pole and red flag.
- player: small plumber-like red character with blue overalls? Use simple shapes.
- particle.

Create scene: Preload creates textures. Create builds level. Add controls. Camera follow. Use cursors/arrows and maybe WAD or space. Jump with up/space/W. Add physics colliders: player vs platforms; enemies vs platforms; player vs enemy overlap; coins overlap; flag overlap. Stomp: in collider check player.body.touching.down && enemy.body.touching.up. Then bounce player and kill enemy. Else gameover. Camera deadzone. HUD stays fixed.

Implement enemies with simple AI: walks back and forth. We can place them on platforms, set velocity -60; collides with world bounds and reverse direction maybe by checking tile? Simplest: set bounce x 1, collides with world bounds? If enemy collides with world bounds, stays. But we want turn at platform edge. Could use an invisible sensor? Simpler: place enemy on ground sections with bounded movement? Use colliders with platform group to reverse? In Mario, enemies don't turn at walls? They walk and turn when hit wall or at edge. Simplify: when enemy collides with world bounds x, reverse velocity. For edge detection, check in update if no platform below front? Could be extra. We'll implement edge detection through ray check each update: if not blocked below and was grounded, reverse. Use getTilesWithinWorldXY? With sprites, easiest check world.pointToTile or maybe overlapRect at front-bottom. We can use scene.physics.overlapRect. Or create small sensor body attached? Need not overcomplicate. Use a simple patrol using left/right bounds: each enemy has minX, maxX from spawn + distance; in update if x <= minX or x >= maxX reverse. But if platforms gaps, they'd fall. We can place enemies on flat segments with enough bounds. That's fine.

Coins: overlap player, play tween/tweens, increment score, disable body destroy.

Flag: overlap triggers win. Transition to win screen. Use simple overlay.

Player death: if touches enemy from side or falls below world, lose life and respawn at start. Implement lives. On death, reset player position and velocity; maybe camera still at start? Need camera positions follow. If camera hasn't moved? Player at start. Good.

Win: stop physics pause; show text and restart button.

Input: cursors + WASD. Maybe add mobile controls? Not necessary but good to mention keyboard. Since single-page game, include instructions in overlay UI.

Procedural textures details using Phaser.Graphics: generateTexture(key). Need for pixel art crisp, use drawRect with fill. For player, draw a small human shape. Since global Phaser loaded via script, use Phaser.GameObjects.Graphics. In Preload: `const makeBlock = (key, cb) => { const g = this.make.graphics({x:0,y:0,add:false}); cb(g); g.generateTexture(key, tileSize, tileSize); };`. `this.textures` may not support until after boot? generateTexture works.

Alternative use dynamically loaded canvases. Graphics generateTexture ok.

Physics world bounds set width = level width, height=level height + some. world.setBounds.

When building level: parse rows top to bottom. Use rows array with same length. Strings of equal length. We'll produce programmatic helper to generate arrays to avoid manually huge map. Could use algorithm: floor at some y, gaps, raised platforms, coins above, enemies. Simpler but meets platformer. Also user said "scrolling platforms" maybe manual can ensure design.

Let's plan level generator:

Constants: cols = 200, rows = 15, tile=32. GroundRow = 12 (0-index). Create 2D array of ' '. For each col x: determine groundHeight. We can design using segments:

- cols 0-19 solid ground (start).
- col 20-24 gap.
- 25-45 solid.
- 46-50 gap.
- 51-70 solid.
- then platforms.

Maybe easier define arrays of segments with type. But also put raised platforms (bricks) at certain positions. Enemies on flat segments. Coins in arcs.

Given time, perhaps create a deterministic level by loops and rules. Let's create level with functions `setBlock(x,y,ch)`. Fill ground across segments. Generate some floating brick platforms:

Add raised platform of bricks at y=8 from col 30-38.
At y=6 from col 50-58.
At y=9 from col 70-78.
etc.

Coins in rows above platforms and along ground.
Enemies on ground segments without gaps ahead maybe.

For flag at end col ~190. Build stairs before flag maybe.

Simplify: hand-authored level via a function `buildLevelData(cols, rows)`. It will produce rows as char arrays then convert to strings.

Implementation:

```
const rows = Array.from({length: ROWS}, ()=>Array(COLS).fill(' '));
function setTile(x,y,ch){ if(x>=0&&x<COLS&&y>=0&&y<ROWS) rows[y][x]=ch; }
function fillRect(x1,y1,w,h,ch){ for(let y=y1;y<y1+h;y++) for(let x=x1;x<x1+w;x++) setTile(x,y,ch); }
```

Ground pattern:
Loop x from 0 to COLS-5? fill column ground row and below? Actually ground should be solid few rows high at bottom to avoid falling out. Set rows[y] for y=GROUND_ROW..ROWS-1 as '#'. Then carve gaps by setting some columns to ' '. Gaps should be limited and not too large.

Approach: create segments list:

```
const segments = [
  {type:'ground', start:0, end:25},
  {type:'gap', start:25, end:29},
  {type:'ground', start:29, end:50},
  {type:'gap', start:50, end:54},
  {type:'ground', start:54, end:75},
  {type:'gap', start:75, end:79},
  {type:'ground', start:79, end:100},
  {type:'gap', start:100,end:104},
  {type:'ground', start:104,end:130},
  {type:'gap', start:130,end:134},
  {type:'ground', start:134,end:160},
  {type:'gap', start:160,end:165},
  {type:'ground', start:165,end:190},
];
```

For each ground segment fill column y=GROUND_ROW and rows GROUND_ROW+1..ROWS-1 with '#'.

Platforms above gaps/ground: define list:
`{x:30,y:8,w:8}, {x:55,y:7,w:8}, {x:82,y:8,w:6}, {x:110,y:6,w:8}, {x:140,y:7,w:6}, {x:170,y:8,w:8}` fill with 'B'. Use bricks.

Coins: place coins above platforms and some over ground. For each platform, place coins at row y-2 across platform (skip maybe). Also coin arcs at start. Use 'C'.

Enemies: on ground segments (not over gaps) at intervals. Place 'E' at groundRow-1 on column with ground below and not near start, not near flag. For each ground segment length > 15, place enemy at start+8, start+18 maybe. Or iterate through ground segments and if random fixed. We should not use Math.random? We can use deterministic. Let's compute `if ((x - seg.start) % 18 === 10 && seg.end - seg.start > 18)`. Place at groundRow-1. Ensure no coins at same tile (coin can be in air maybe no overlap). Use setTile if coin? We'll place ground enemy before coins; if enemy at same tile as coin? No.

Flag: at col=COLS-8, groundRow-1 to groundRow-8 place 'P' pole, top maybe flag 'F'. Actually flag is goal. Using 'F' for flag cloth at top. Pole '|'. Then ground segment extends to COLS-1.

Player spawn: x=2, y=GROUND_ROW-1.

Add castle maybe procedural at end? Could draw a bigger block structure. Simplify: goal flag. Maybe draw a small castle with blocks at end: Create a structure at col=COLS-12..COLS-4 with bricks. Could be optional.

Need set world bounds based on COLS*tiles, ROWS*tiles.

Texture generation:

tile=32.
Textures:
- sky: config backgroundColor.
- ground: 32x32 block: top 8px bright green (#5c9e28), below dark brown (#7a4e2e), add dark specks maybe simple shapes.
- brick: 32x32: fill #c84c0c, border darker, draw lines for bricks. Could draw white mortar lines.
- coin: 32x32 transparent background maybe, draw yellow ellipse with inner lighter. Use 24x24 centered. generateTexture key 'coin', size 32x32.
- enemy: 32x32 transparent: draw brown mushroom shape: ellipse body bottom, two feet, eyes, antenna? Maybe.
- player: 32x32 transparent: draw red cap, blue body, face, overalls. Use simple shapes.
- flag: maybe 'pole' 8x? and flag. Could create separate textures 'flagPole' and 'flagCloth', or combine 'flag' with cloth next to pole. Easiest create sprite with pole and cloth visual by using 'flagCloth' texture placed at top. Need procedural textures. We'll make `generateTexture('flagPole', 8, 256)` and `generateTexture('flagCloth', 48, 32)` for a red flag. Or use a container/sprite for flag group. Since we only have texture, create pole sprite and cloth sprite.

Physics setup: staticGroup for platforms called `platforms`. We'll add each block (ground or brick). tile=32, position based on col/row center (x*32+16, y*32+16), body size = 32 set `refreshBody`. Use `platforms.create(...)`. Need set `static` group. For ground blocks, texture 'ground'; for brick, 'brick'. If same static group with different textures can use `.create(x, y, 'ground')`. For brick, pass 'brick'.

Note: If we place many blocks (groundRect across level plus brick platforms), static bodies count ~rows*cols maybe 200*15=3000. Arcade physics can handle. But `create` each may be slow but fine.

Alternatively use tilemap. Could use tiles from generated texture and setCollision. But keep simple.

Player: dynamic sprite with texture 'player'. Set bounce 0.1, collider boundaries, set gravity, setSize maybe 20x28 offset 6,2 to fit. Set drag.

Coins: dynamic group? Static? Use staticGroup `coins`; overlap with player. Disabling body on collect. Could use static.

Enemies: dynamicGroup `enemies`, collide with platforms. Set velocity ~60, bounce x maybe not. Use world bounds (setCollideWorldBounds true). Set patrol bounds from spawn min/max based on segment or just reverse on world bounds. If on a thin platform with no left/right walls (world bounds far), they'd continue until world bounds. Use platform collision edges to reverse: Actually when an enemy collides with a brick block from side (not ground), they'd bounce due to `body.bounce.x = 1`? If bounce.x=1, it will reflect. That could turn them at walls. At platform ledges, they fall off; that's okay. We can set friction low and velocity constant.

Stomp detection: overlap callback with enemy. Check `player.body.touching.down && enemy.body.touching.up` or player.body.velocity.y > 0 and overlap, plus player.y + player.height/2 < enemy.y. Kill enemy: tween scale down, disable body; add particles. Add score.

Enemy touch side/bottom: kill player. We'll respawn with delay.

Death: player falls below world bounds y>worldHeight+64 or enemy collision. Reduce lives; if lives>0, respawn player at spawn coordinates, maybe restore some enemies? If no lives, game over. Enemies remain killed. Camera position resets? We can set `this.cameras.main.fade`? Keep it simple. In enemy collision, if not stomp, `playerHit` function: kill player, disable input, set velocity 0; if lives>0, after 800ms respawn and re-enable input; else show game over text.

For respawn: ensure player position is at start and camera scroll x reset to 0? Since camera follows player after spawn x 64, scroll x maybe clamped. Camera lerp? We'll set scrollX 0 after delay. If player falls into pit and dies, player already below world; resetting position resets camera. Good.

Flag: create static sprite at flagTop. Overlap. On touchdown decrement? Actually overlap. In callback, call win().

HUD: text objects fixed to camera: `scoreText`, `livesText`. Add instructions maybe. Use CSS overlay for start / game over / win? Since single HTML, can use DOM overlay? The instruction says CSS in style tag and JS in script tag inline. We can use a DOM overlay for UI (start screen, game over, win). It would be HTML elements. That's fine. But game rendering in canvas. If we use Phaser text only, no DOM UI. But it's okay to have UI in HTML; user just said build single-page web app, all in index.html. We can include a minimal overlay.

For no external resources, no network. Use local phaser.min.js only. Need ensure `phaser.min.js` present; we can verify. Use script src exact filename.

Will the generated textures be anti-aliased? With pixelArt true, crisp. Good.

Need maybe handle resize. Use scale FIT mode. But bounds remain. With camera follow, responsive. Add config scale: mode Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH.

Need make the app robust. Since no build tools, index.html with `<script src="phaser.min.js"></script>` then `<script>` game code.

Let's produce complete index.html. But before final, we should maybe check phaser.min.js exists and possibly version to use correct API. Use bash to list file.

Phaser exists. Now build code. We should perhaps test if index.html is needed in current directory (write). Let's design code carefully.

Need decide on level generation and performance. We can maybe make a moderate level length. But user wants side-scrolling. 200 columns at tile 32 = 6400 px. Fine.

However, building entire ground from 4 rows * 200 = 800 static bodies. Add bricks maybe 50. Coins maybe 50. Enemies maybe 10. Total <1000 static. Fine.

Let's write code with all in one HTML. We should ensure no external references except phaser.min.js.

Important: `add.text` with default font requires default font. Use 'monospace'. Use a CSS class maybe.

Need to generate textures. Use this.make.graphics. Example:

```
 createBlockTexture(scene, key, drawFn, size=32) {
    const g = scene.make.graphics({x:0,y:0,add:false});
    drawFn(g, size);
    g.generateTexture(key, size, size);
 }
```

For coin maybe size 32. For flag pole maybe 8x32? Actually flagpole height: several tiles. We can use scaled 'pole' texture. We'll create 'pole' 8x32 and scale by 8 maybe; or create a tall texture. Simpler: create a sprite for each tile of pole (8x32) repeated. Since no external assets, we can generate 8x32 texture and stack sprites. But using many sprites for flag is okay (few). But for goal, we can simply place one pole sprite tall using scale and a generated 8x8 texture? Actually we can create 'flagPole' texture 4x? and use scale. Better generate `flagPole` 8x32 vertical and scale Y=7. But texture generation at 8x32 works fine. Create `flagCloth` 32x24 maybe. In code, generate at desired dimensions.

For player, enemy, generate 32x32.

Need handle `setSize` before physics? After create.

Let's write helper functions inside the script.

Pseudo index.html:

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Platformer</title>
<style>
  html,body { margin:0; height:100%; overflow:hidden; background:#222; }
  #game-container { width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
  #ui { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; display:none; font-family:sans-serif; color:#fff; text-align:center; }
  .screen { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0,0,0,.8); padding:30px; border-radius:12px; pointer-events:auto; }
  ...
</style>
</head>
<body>
<div id="game-container"></div>
<div id="ui">...
</div>
<script src="phaser.min.js"></script>
<script>
const TILE = 32;
const ROWS = 15;
const COLS = 200;
const GROUND_ROW = 12;
...
class MainScene extends Phaser.Scene {
 constructor(){super('MainScene');}
 preload(){ generateTextures.call(this); }
 create(){ ... }
 update(){ ... }
}
...
function generateTextures(){
 const mk = (key,w,h,draw) => { const g=this.make.graphics({x:0,y:0,add:false}); draw(g,w,h); g.generateTexture(key,w,h); }
 // ground
 mk('ground',TILE,TILE,(g,w,h)=>{ g.fillStyle(0x5c9e28); g.fillRect(0,0,w,8); g.fillStyle(0x7a4e2e); g.fillRect(0,8,w,h-8); g.fillStyle(0x5c4033); g.fillRect(2,12,2,2); ...});
 // brick
 ...
}
</script>
</body>
</html>
```

Need ensure we call `generateTextures` in `preload` after game boot. `this.make.graphics` is available? In preload, yes, scene's `make` exists. `generateTexture` creates texture. Good.

Level build function:

```
function buildLevel(scene){
  const rowsData = Array.from({length:ROWS},()=>Array(COLS).fill(' '));
  function set(x,y,ch){ if(x>=0&&x<COLS&&y>=0&&y<ROWS){ rowsData[y][x]=ch;}}
  // ground segments
  const segments = [...] // ground/gap
  for(s in segments) if type ground fill ground row and below
  // flag area at end
  // platforms
  // coins
  // enemies
  return rowsData;
}
```

Actually define segments before ground. Need handle gaps. Let's define:

```
const segments = [
 [0,25,'ground'], [25,29,'gap'], [29,50,'ground'], [50,54,'gap'],
 [54,75,'ground'], [75,79,'gap'], [79,100,'ground'], [100,104,'gap'],
 [104,130,'ground'], [130,134,'gap'], [134,160,'ground'], [160,165,'gap'],
 [165,190,'ground'], [190,200,'ground']
];
```

For ground segments, fill from `y=GROUND_ROW` to `ROWS-1` (i.e., GROUND_ROW, GROUND_ROW+1, GROUND_ROW+2, GROUND_ROW+3). Since ROWS=15, GROUND_ROW=12, ground rows are 12,13,14 (3 rows). Actually ground surface at y=12 top. Player spawn at y=GROUND_ROW-1=11; enemy at y=GROUND_ROW-1=11. Fine.

Flag at x=COLS-8 maybe, but ground extends to end. Flag pole top at y=GROUND_ROW-6, cloth at y=GROUND_ROW-6. We'll set pole tiles from y=GROUND_ROW-6 to GROUND_ROW-1 as '|' (not collider? Could be collider? Flag pole should not block? It's thin, maybe not collidable. Since we want to touch flag, we can add pole as visual only (not physics). Use `scene.add.sprite`. Cloth as overlap.

Platforms: at y values from 4 to 8. We'll define array:
`const platforms = [ {x:30,y:8,w:8}, {x:55,y:6,w:8}, {x:82,y:8,w:6}, {x:110,y:5,w:8}, {x:140,y:7,w:6}, {x:170,y:8,w:10}];`
Fill with 'B'. Maybe also place bricks in castle at end.

Coins: For each platform, place coins at (x + i, y-2) for i=1..w-2 maybe. And coin arcs over ground: at certain x positions, place vertical stacks.

Enemies: iterate ground segments. For each segment long, place at start+8, start+18 etc, ensure x+space within segment. We need place only if tile above ground is empty (ground exists below). Since gaps carved, ground segments ensure column has ground. Place `E` at y=GROUND_ROW-1. If coin at same spot? unlikely but could. We'll just set.

Flag: At col=COLS-7 maybe. Place '|' vertically from row GROUND_ROW-6 to GROUND_ROW-1. Place 'F' at col same row top. Since these chars in level data, we can parse after building and create visual flag accordingly.

Actually we should not make flag a collidable block; just create separate sprites for flag and pole. The 'F' and '|' can be markers.

In create, parse level data: loop y rows, x cols; char -> create platform/coin/enemy or marker.

Let's structure create:

1. this.physics.world.setBounds(0,0,COLS*TILE, ROWS*TILE);
2. this.platforms = this.physics.add.staticGroup();
3. this.coins = this.physics.add.staticGroup();
4. this.enemies = this.physics.add.group(); // dynamic
5. Parse data.

During parse, when char '#', create ground platform; 'B' brick; 'C' coin; 'E' enemy; '|' store for pole; 'F' store for flag. Player spawn pos from constants.

After parse, create player at spawn. Setup colliders. Setup camera. Add UI text.

Camera: `this.cameras.main.setBounds(0,0,COLS*TILE, ROWS*TILE); this.cameras.main.startFollow(player, true, 0.1, 0.1); this.cameras.main.setZoom?` Keep 1.

For HUD, use `this.add.text(10,10,...).setScrollFactor(0)`.

Controls: create cursors, also `this.input.keyboard.addKeys` for WASD. Jump with up/W/space.

Player update:

```
if (this.player.y > worldHeight + 64) this.playerDeath();
const speed = 200; const jump = -450;
if (left.isDown) { player.setVelocityX(-speed); player.setFlipX(true); }
else if (right.isDown) { player.setVelocityX(speed); player.setFlipX(false); }
else { player.setVelocityX(0); }
if ((jumpBtn.isDown || space.isDown) && player.body.touching.down) player.setVelocityY(jump);
```

Need avoid holding jump. Use `jumpButton` key and `player.body.onFloor()`. For arcade, `this.player.body.touching.down` after collision is true only when colliding. Instead use `this.player.body.blocked.down` or `this.player.body.onFloor()`. In update, `if (Phaser.Input.Keyboard.JustDown(this.keys.jump))` maybe not. Simpler `if (jumpBtn.isDown && this.player.body.blocked.down)` But blocked.down only from tile? It works. Use `this.player.body.onFloor()` after colliding with world. Actually `onFloor()` is on the body, returns true when touching floor. Good.

Stomp: In overlap callback, after collider, check `if (player.body.velocity.y > 0 && player.y < enemy.y + enemy.height/2 - 4)`. We can check if `player.body.touching.down && enemy.body.touching.up`. Because in overlap callback these touching flags are set. Use that.

```
this.physics.add.overlap(this.player, this.enemies, (player, enemy) => {
   if (player.body.touching.down && enemy.body.touching.up) {
      killEnemy(enemy);
      player.setVelocityY(-300);
   } else {
      this.hitEnemy(player, enemy);
   }
}, null, this);
```

This should work.

Enemy patrol: In enemy create set `enemy.setVelocityX(-60); enemy.setBounce(0); enemy.setCollideWorldBounds(true); enemy.body.onWorldBounds = true;` Then add `this.physics.world.on('worldbounds', (body)=> { if(enemies.contains(body.gameObject)) body.gameObject.setVelocityX(-body.velocity.x); });` But world bounds far; still fine if they reach it. We can also use local bounds via `this.time.addEvent`? We'll implement world bounds reverse and a `setCollideWorldBounds(true)`. For edge turning, maybe not needed.

Alternatively use a small overlap sensor ahead? Not necessary.

Flag overlap: create invisible zone maybe around flag cloth. Use `.setSize` on flag sprite and overlap. Or just check distance in update. Simpler in update: `if (player.x > flag.x - 32 && Math.abs(player.y - flag.y) < 64)` then win. Or create physics zone. We'll create an invisible sprite at flag cloth with static body and size, overlap with player.

Win: pause physics, show overlay. Restart on click maybe.

Game over / restart: show overlay. Need restart function. Could use `this.scene.restart()`.

UI: Use HTML overlay with start screen, game over, win. Since pointer-events, on click call game.scene.resume or scene.restart. Need expose functions to global or DOM.

Implementation: Add overlay elements for start, win, gameover. On window load or immediately show start screen with canvas visible? Start screen over game. Click start -> hide start overlay, start game. Actually Phaser auto starts scene. We can use `this.scene.pause()` if start not active. But simpler: overlay start just covers canvas, on click remove overlay. Game starts automatically in background but paused? We can let it run, player won't move until interaction. But game sounds? no. Start overlay with instructions, on click hide and focus. That is okay. On game over / win, show overlay with restart.

Need handle restart: attach function. Since index.html has script, we can use `window.restartGame = () => { game.scene.scenes[0].scene.restart(); hideOverlays(); }`. In scene class, on create set `this.events.on('shutdown',...)` maybe not needed.

Let's now write full code. We'll need avoid syntax errors. Use proper escaping for HTML.

Potential issue: `this.make.graphics({x:0,y:0,add:false})` returns a Graphics object. Then `g.generateTexture(key, w, h)`.

Texture drawing details:

ground: fill with top grass and dirt.
```
g.fillStyle(0x5c9e28);
g.fillRect(0,0,w,8);
g.fillStyle(0x7a4e2e);
g.fillRect(0,8,w,h-8);
g.fillStyle(0x5c4033); // spots
for spots...
g.lineStyle(2,0x33691e,1); g.moveTo(0,8); g.lineTo(w,8);
```

brick:
```
g.fillStyle(0xc84c0c); g.fillRect(0,0,w,h);
g.lineStyle(2,0x8b3c0a,1);
// horizontal line at half
g.moveTo(0,h/2); g.lineTo(w,h/2);
// vertical lines alternating
for odd cols...
```

coin:
```
g.fillStyle(0xffd700); g.fillCircle(w/2,h/2,10); g.fillStyle(0xffec8b); g.fillCircle(w/2,h/2,6);
```
But transparent background. Use alpha.

enemy:
```
// brown head
g.fillStyle(0x8b4513); top ellipse? Use fillEllipse(w/2,h/2+4,w-2,h-6);
// feet
g.fillStyle(0x3e1d0a); g.ellipse feet.
// eyes white, pupils.
```

player:
```
// blue overalls, red shirt/hat, skin face.
// maybe draw rectangle body red, legs blue, hat red cap.
```

flagCloth:
```
g.fillStyle(0xff0000); g.fillRect(0,0,w*0.6,h); g.lineStyle(2,0x880000,1); g.strokeRect(...);
```

Let's not overcomplicate.

We will also create particle effect? Use simple tween scale.

Need ensure enemy body size maybe smaller; setSize(28,28, true). Player size with setSize(22,30). Good.

Camera deadzone maybe `this.cameras.main.setDeadzone(200, 100)`.

Let's also add `this.physics.add.existing`? For static group created via `this.physics.add.staticGroup()` and `.create` adds bodies automatically. For dynamic player `this.physics.add.sprite(...)`. For enemies, `this.physics.add.sprite(x,y,'enemy')` then add to group `this.enemies.add(enemy)`.

World bounds: We also need `this.physics.add.collider(this.enemies, this.platforms);` This handles enemy vs platforms. We must create static group before sprites.

Now write file. After creating, maybe test by launching a simple python http server? But cannot open browser. Could check console for syntax? Maybe use Node? Since Phaser requires DOM. We can at least grep for issues. We can also use `node -c`? The script is not a module. But we can validate with `php -l`? No. Just be careful.

Let's construct code now. We'll use a heredoc write. Ensure no template literal conflicts in JSON? Write tool content takes string; no JSON escaping needed. Use backticks in JS; fine. But we must not include backticks within string? We'll use single/double quotes. But template literals (backticks) may be used; content is a string, but when writing, backticks are fine.

Let's prepare content thoroughly.

Potential issue: In HTML, `<style>` and `<script>` in same file. Use comments? Fine.

Let's define global variables for game instance? `const game = new Phaser.Game(config);` at end.

Need `const container = document.getElementById('game-container');` maybe not needed if parent uses id in config.

Config:

```
const config = {
 type: Phaser.AUTO,
 width: 800, height: 480,
 parent: 'game-container',
 backgroundColor: '#6bc2ff',
 pixelArt: true,
 physics: { default: 'arcade', arcade: { gravity: { y: 900 }, debug: false } },
 scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH },
 scene: MainScene
};
```

Start screen overlay with instructions: "Click to start. Use Arrow keys / WASD to move and jump." Hide on click. Good.

Game Over overlay: "Game Over" restart button calls `window.restartGame()`. Win overlay similar.

In scene create, set `window._currentScene = this;` for restart.

In restartGame function:

```
function restartGame() {
  hideOverlays();
  if (window._currentScene) window._currentScene.scene.restart();
}
```

When game over/win, show overlay `uiGameOver` / `uiWin`. Set `pointer-events:auto`.

Need handle if player dies from falling: `if (this.player.y > worldHeight + 64) this.playerHit();`

Need `this.playerHit()` separate from `killEnemy`. It should check if already dead to prevent double. Use `this.player.isDead` maybe.

In `playerHit`:
```
if (this.isGameOver) return;
this.lives--;
this.refreshHUD();
if (this.lives > 0) {
   this.player.setPosition(this.spawnX, this.spawnY);
   this.player.setVelocity(0,0);
   this.cameras.main.scrollX = 0;
   this.cameras.main.scrollY = 0;
} else {
   this.isGameOver = true;
   // show game over
}
```

But falling into pit and player position below world maybe body still touching bounds? Fine.

Better to show game over overlay by manipulating DOM. The scene can call global `showGameOver(score)`. Define functions in script.

Win:
```
this.isGameOver = true;
this.physics.pause();
showWin(this.score);
```

Score increment: coin = 100, enemy = 200 maybe. Start score=0.

HUD refresh.

We should also maybe generate coin collection animation: `this.tweens.add({ targets: coin, y: coin.y - 16, alpha: 0, duration: 300, onComplete: ()=> coin.destroy() });` We could also add particle using a simple graphics dot.

Now, texture generation. `generateTextures()` uses this.make.graphics. Let's implement.

Important: `generateTexture(key, width, height)` overwrites if key exists? In scene restart, `preload` is run again, but previous textures remain? Actually scene restart recreates texture manager? I think it keeps same game texture manager; but generated textures remain. But if you call generateTexture again with same key, it might issue a warning? It overwrites. That's fine.

Now level build: We'll define `const level = buildLevelData();` inside create.

Let's write `buildLevelData` function. It returns rows as array of strings.

Detailed level data:

```
function makeLevel(){
 const rows = Array.from({length:ROWS}, ()=> Array(COLS).fill(' '));
 const set = (x,y,ch)=> { if(x>=0&&x<COLS&&y>=0&&y<ROWS) rows[y][x]=ch; };
 const fillCol = (x,y1,y2,ch)=> { for(let y=y1;y<=y2;y++) set(x,y,ch); };
 const fillRect = (x1,y1,w,h,ch)=> { for(let y=y1;y<y1+h;y++) for(let x=x1;x<x1+w;x++) set(x,y,ch); }
 // ground segments
 const segments = [...];
 for (const [start,end,type] of segments) {
   if (type === 'ground') {
     for (let x=start;x<end;x++) fillRect(x,GROUND_ROW, ROWS-GROUND_ROW, 1, '#'?);
   }
 }
 // Actually if GROUND_ROW=12, height ROWS-GROUND_ROW=3, fill Rect with 3 rows.
 ...
}
```

But our fillRect function with ch '#'. To fill a vertical block, use x1,y1,w,h. We'll write:

```
for (let y=GROUND_ROW; y<ROWS; y++) {
  for (let x=start; x<end; x++) set(x, y, '#');
}
```

Gaps are simply omitted.

Platforms: list of {x,y,w}. Set 'B'. Ensure within rows. Good.

Coins: arrays. Let's add coin rows along ground in some arcs:

```
for (let x=8; x<20; x+=2) set(x, GROUND_ROW-4, 'C');
for (let i=0;i<5;i++){ set(30+i,6,'C'); }
for (platform ...
```

Actually if we already place coins above platforms, we can automate. Use a list for ground coin arcs:
```
const coinArcs = [[10,3], [35,2], ...] ; each [x, height above ground]. For i in [0..4], set x+i, GROUND_ROW-height, 'C'.
```

But we can simply generate coins above each platform: for platform p, for i in 0..p.w-1 set C at p.y-2 or y-3. That gives coin rows.

Enemies: for each ground segment with length >= 12, place at start+5 and start+15 maybe, if x inside and not over gap. Place E at GROUND_ROW-1.

Flag: at x=COLS-7, vertical '|' from y=GROUND_ROW-6 to GROUND_ROW-1; 'F' at same x, y=GROUND_ROW-6.

Castle at end? Could be nice. At x=COLS-12..COLS-3, y=GROUND_ROW-4..GROUND_ROW-1 fill with 'B' maybe. But flag already at x=COLS-7. Castle blocks maybe at x=COLS-15..COLS-8, y=GROUND_ROW-4..GROUND_ROW-1. But player can jump and hit from below? Brick colliders. Fine.

Let's include castle as a brick structure at the final stretch, before flag. But ensure not blocking ability to reach flag.

Maybe final design:
- Ground segments: start 0-25, etc.
- After last segment, ground 160-200. Castle at x=180-188, y=GROUND_ROW-4 to GROUND_ROW-1 (height 4). Flag at x=188? Need flag not inside castle. Set castle x=182-187, flag at x=190 (on ground). But our end col is 200, flag at 193? We used COLS-7=193, y top. Castle at x=180-187. Fine.

But we need to ensure flag top reachable by jumping from ground. Player can jump onto pole? We use overlap with cloth at top; player touches cloth area. If cloth is high (6 tiles above ground = 192px), player may not reach by jumping? Player jump ~450 gravity 900 -> jump height = v^2/(2g)=450^2/(1800)=112.5 px. So max jump ~112px. Cloth at 6*32=192 too high. Need lower flag; maybe 4 tiles above ground = 128px, still too high. We can make cloth at y=GROUND_ROW-3 (~96px). That reachable. The pole extends to ground and cloth at 3 tiles. Use y=GROUND_ROW-3 to GROUND_ROW-1. Then flag cloth at y=GROUND_ROW-3. Player touches it if jumps. Could also allow hitting side of pole; but overlap. Let's set pole height = 4 tiles, cloth top. That's fine.

Alternatively make platform stairs to flag. But lowering is easier.

We need ensure that the flag marker 'F' is in rows; parse. The pole markers '|' can be at rows GROUND_ROW-3..GROUND_ROW-1. Cloth 'F' at GROUND_ROW-3.

Enemy AI: Since platforms can be above ground, if enemy falls into gap, it dies? It will fall out of world and maybe still be counted. We can add `enemy.checkWorldBounds=true` and `enemy.outOfBoundsKill`? Arcade has `outOfBoundsKill` for sprites? There is `setCollideWorldBounds` but if not, it won't kill. Could check in update if enemy.y > worldHeight then destroy. Good.

Now let's produce code. We'll also include a simple start screen. Let's write the file with write tool.

We should check current directory if index.html exists; it may not. We'll write.

We need verify potential issues. Let's read the file and review. Also maybe run syntax check by extracting JS? Could use node to check the JS snippet. There may be issues:

1. `this.physics.world.on('worldbounds', ...)` uses `this.enemies` which is created later. This could be problematic because at the time of registering event, `this.enemies` is undefined. But the listener uses this.enemies at event time, by which time `this.enemies` is defined. However `this.enemies` defined in create after registering? Actually after `this.enemies = this.physics.add.group()`; event registered before that. But when event fires, `this.enemies` is defined because create has completed. Fine.

2. The flagCloth added but not as a physics body; fine.

3. `flagZone` is a zone with body. In create, after parsing 'F', we set `flagPos`. Then after the loop, add flag sprite and zone. Good.

4. The flag markers '|' are visual only. Good.

5. Enemy body size uses `setSize` after add to scene. Need ensure `setSize` exists; yes for ArcadeSprite.

6. Coin collection uses `this.tweens.add` on static group `coin`; static body still has display. Destroying in tween onComplete. Fine.

7. `this.player.setTint(0x888888)` in playerDeath after pause. Fine.

8. `this.cameras.main.stopFollow();` then startFollow after death. Could cause camera jump not to 0 maybe because scrollX setting then startFollow with lerp. Fine.

9. `worldbounds` event for enemy reversing might not work because `onWorldBounds` requires `body.onWorldBounds = true` by default? In Phaser 3, for `setCollideWorldBounds(true)`, `onWorldBounds` is false by default? I'm not entirely sure. In Arcade, the event `worldbounds` is emitted when a body hits world bounds only if `body.onWorldBounds` is set true. Actually `Body.onWorldBounds` is a boolean; `setCollideWorldBounds` enables world bounds but the `worldbounds` event is only emitted if `body.onWorldBounds` is true (I recall). Therefore our worldbounds event may not fire for enemies. To make enemies patrol, we don't need this event; just let them collide with world bounds (not turning) and bounce? They will be blocked by world bounds and stay. That's acceptable; enemies at ends of level won't fall off. They won't turn at walls though. On platforms, they might walk off edges and fall. That's okay.

10. We didn't disable default context menu? Not necessary.

11. Start screen overlay is `display:flex` by default via CSS `#start-screen { display: flex; }`. But `.overlay` also sets `display:none`; CSS specificity? Both are selectors with same specificity; later in file #start-screen rule will win because it's more specific? ID selector beats class. So start screen display:flex. Good.

12. Game over / win overlays `.overlay` display:none; when we set style.display='flex', they show. Good.

13. In `collectCoin`, we check `if (coin.active === false) return;` But static group children active may still be true even after tween? The coin is not destroyed yet. On subsequent frames, coin may still be active until onComplete. Overlap may call multiple times. We can add an `isCollected` flag. But active check might not be enough because it stays active during tween. Could increment score multiple times for same coin. Need fix: in collectCoin, mark `coin.isCollected`, check.

Similarly hitEnemy stomp may trigger multiple times if multiple overlaps? But once enemy disableBody, it becomes inactive; subsequent overlap not called? Maybe. But for coin, definitely can trigger multiple frames. We should mark coin.isCollected = true and return.

14. Enemy stomp: `enemy.body.touching.up` may not be reliable if enemy not moving? In overlap, body.touching for both are set based on overlap, so yes. But sometimes player touching down and enemy touching up both true? Should be. Better combine with `player.body.velocity.y > 0`. In side hit, player may have downward velocity. We'll add check.

15. Level length: 210 cols * 32 = 6720 px. Good.

16. The level has a castle at the end but also ground. The flag is at column 203? flagX = 203, with pole from y=9..11 and cloth at y=9. Ground at y=12. So flag height 3 tiles = 96px; jump height 112.5 px, so reachable if jump from lower ground. Good.

17. Player jump from ground y=11, to touch flag cloth at y=9. Player center at y=11*32+16=368, flag at y=9*32+16=304. Difference 96 px. player half-height 14 (size 28). Player top reaches ~304+112? Actually player center can reach y=256, top at y=242, which is above flag. So can overlap. Good.

18. We need test with a local server? Not possible to run browser. But we can do a syntax/lint pass. Use `node -c` on a temporary JS file extracted? Could use python to parse? Let's just manually check syntax by extracting script. We can load file with Python, but not evaluate with JS. We can use `node -c` with script contents but it references Phaser (global) and DOM, and uses IIFE. `node -c` only checks syntax, not semantics; references to Phaser will not cause errors. But we have `<script>` tags not JS. Write temporary JS with only the IIFE and comment out global refs? `node -c` will treat `Phaser` as undefined at runtime but syntax check doesn't need variables. It uses `new Phaser.Game` etc. That should be fine syntactically if code is valid. However `document.getElementById` will be undefined only at runtime, syntax not issue. So we can extract the script content and run `node -c`. Let's do.

 Python isn't available, but we can directly syntax-check the JS with node by isolating the script. The error is because the file extraction failed. I'll use a shell-based extraction.

No output means syntax check passed. Good.

Now we need fix coin multiple collection and maybe enemy worldbounds. Also ensure `collectCoin` check. Let's edit.

Search collectCoin function: `if (coin.active === false) return;` We can add `if (coin.getData && coin.getData('collected')) return;` Simpler `if (coin.collected) return; coin.collected = true;`.

Similarly in hitEnemy, if enemy is already squashed, maybe active false. Check.

Also, we should fix enemy `worldbounds` event; if it doesn't turn, fine. But if enemies collide with world bounds at right edge, they won't turn, just stop. At left, maybe. We can add a tiny logic in update to patrol within segment bounds or turn at walls via collision. But not necessary.

Let's update the coin function. Use edit.

Now test syntax again.

Now let's review the generated code more carefully for possible runtime errors.

1. In `buildLevelData`, segments include ground segment [181, COLS, 'ground'] where COLS=210. Flag at `COLS - 7 = 203`. Castle from `COLS-16` to `COLS-8` i.e. 194-202. Ground extends to 210. Castle bricks at y=GROUND_ROW-4 to GROUND_ROW-1 (8..11). Flag cloth visual at flagX-4, flagPos.y + TILE/2. FlagPos from marker 'F' at (flagX, GROUND_ROW-3) -> y center 9*32+16=304. Flag cloth origin top, so y=304, x=203*32+16-4=6496+16-4=6508. It's 44px wide, top at y? origin 0.5 vertically means center, so flag appears around y=304. Good.

2. Player spawn y: (GROUND_ROW - 1)*TILE + TILE/2 = 11*32+16=368. Ground surface top at y=12*32=384. Player bottom at 368+14=382, just above ground. Good. Camera follows. Fine.

3. Enemy spawn at GROUND_ROW-1 = 11, center y=368 same as player. They may spawn partly inside ground? Enemy sprite 32x, offset 3,6, body height 26. If center y=368, bottom y=381, ground top=384. Good, stands on ground.

4. `this.physics.world.on('worldbounds', ...)` may be unnecessary. Could be removed to avoid confusion, but no error. However, the event callback references `this.enemies` not yet assigned at registration time. The listener is attached as a function, not called. It will be called later, and by that time `this.enemies` will be defined unless event can fire during create (unlikely). So fine.

5. `this.player.setCollideWorldBounds(true);` player collides with world bounds; left bound 0. However, camera can show beyond left? world bounds set 0..WIDTH, so yes.

6. `this.player.setSize(20, 28)` and `setOffset(6,4)`. Player body is 26? default size 32; offset 6,4 then size 20,28. Fine.

7. In `update`, enemy iteration and destroy if out of bounds. `this.enemies.children.iterate((enemy) => { if (!enemy) return; if (enemy.y > HEIGHT + 64) enemy.destroy(); });` This iterates every frame. Fine.

Potential problem: The first start screen overlay may block canvas but game runs behind. The instructions say click to start, hide overlay. Keyboard input will be captured by Phaser even if overlay visible. Is that a problem? Not huge. But we could initially pause the scene and resume on start. To do that, we can in scene create call `this.scene.pause()` and in start click `window._currentScene.scene.resume()`. However we need to ensure `_currentScene` is set. We set it at end of create. If we pause, the start overlay click will need to resume. Let's do that to be polished.

But if paused, the update won't run and input no effect. On start, resume. The start overlay click currently just hides overlay. We can add scene resume. However, if user never clicks start, the game is paused; good.

Let's add `this.scene.pause();` in create after set window._currentScene. In start button click, after hide overlays, `if (window._currentScene) window._currentScene.scene.resume();`. Also restart should resume automatically; scene.restart restarts new scene not paused.

But the start button currently doesn't pause/resume. If game runs behind overlay, still fine. But let's add pause for better.

We need also in `showGameOver` and `showWin` the scene is already paused. On restart, scene.restart will reset everything. Good.

Let's edit.

Now the start screen blocks and the game is paused. Good.

Now let's think about performance/responsiveness. The canvas is 800x480 and uses FIT. Good.

Potential issue: The generated textures are stored in the global texture manager. On scene restart, `preload` re-runs and overwrites textures; that's fine.

Potential issue: The flag cloth is added via `this.add.sprite(...).setOrigin(0, 0.5)` but we didn't remove from previous scene? Scene restart clears game objects. Good.

Potential issue: The `flagZone` uses `this.add.zone`, then physics world enable; on restart, old zone destroyed. Good.

Potential issue: `this.platforms` static group with many ground blocks. Each has a body; collision with player. Good.

Potential issue: Static group `.create` with texture and then `.refreshBody()`. Good.

Potential issue: In collectCoin, `coin.collected` property added; fine.

Potential issue: In `hitEnemy`, when stomping enemy, we tween scaleY to 0.1 and `onComplete` disableBody(true,true) but tween may still be referenced? Fine. However the next frame overlap can trigger again while enemy is still active and not squashed if player remains overlapping; it will set score again, setVelocityY etc. Need guard: if enemy.isDead, return. Add `if (enemy.isDead) return;` and set `enemy.isDead = true` at stomp. Also in the side hit case, if already dead, not kill player.

Let's edit.

Now let's consider if there are any other bugs. The enemies group and static enemies.

Also, world bounds for enemy: We set `e.setCollideWorldBounds(true);` The world bounds are left 0 and right WIDTH. Enemies will be blocked. On world bounds, we have a listener to reverse direction (if onWorldBounds fires). But with `setCollideWorldBounds(true)` they just stop, not reverse. If an enemy is walking right, it will stop at right edge? Actually colliding with world bounds doesn't set velocity, body is constrained and velocity.x may remain. But the body's velocity will be reset due to separation; if velocity still set, it may keep pushing into wall. That's fine. If onWorldBounds is true, it hits and event could reverse, but if not, it just stays. We should add `e.body.onWorldBounds = true;` to make use of the listener and turn. Let's do that. Also for player not needed.

Edit in create where enemies added.

This will make enemies reverse at world bounds. But note that `this.physics.world.on('worldbounds', ...)` callback uses `this.enemies.contains(body.gameObject)`. `contains` is a method on Groups in Phaser. Good.

Now, let's also verify syntax.

Syntax good.

Potential issue: The start screen is visible and the game is paused. In that state, Phaser doesn't process input; but the start button overlay uses pointer events. Good. After start, scene resumes. `this.keys` defined in create. Good.

Potential issue: If user clicks canvas before start, keyboard may not work because scene paused. Fine.

Potential issue: The game over / win text says Score. Good.

Potential issue: The flag zone overlap: The zone body might be small; if player jumps near the pole but not exactly at the cloth, the zone is 60x120 centered at pole, covering area around it. Good.

Potential issue: The flag pole visual is added as `this.add.sprite(px, py, 'flagPole')` for each marker. The pole texture is 8x32; at each tile. Good. The flag cloth is at the top. The flag zone is centered at top marker. Good.

Potential issue: In buildLevelData, we place castle bricks at the end. But the ground segment [181, COLS] includes castle columns. The castle bricks occupy y=8..11. The flag pole at x=203, y=9..11. Castle at x=194-202, y=8..11. Player needs to jump over castle maybe? The castle is only 4 tiles high and width 8. Player can jump onto it. It doesn't block flag. Fine.

Potential issue: There are gaps. Player must jump across. The gap lengths are up to 6 tiles (190 pixels). With jump velocity 460 and horizontal speed 200, can clear? Max horizontal distance = 2*v0x*sqrt(2*h/g) approx? Time in air ~2*460/900=1.022s; horizontal distance=200*1.022=204 px. So max gap < 6 tiles? 6 tiles=192 px, possible. 5 tiles=160 easy. Good.

Potential issue: Raised platforms: Some may be high (y=5) 7 tiles above ground; can't reach without platform. Player can jump to y difference 3 tiles (96px) reachable. The platform at y=6 difference 6? Ground y=12; platform y=6 difference 6 tiles (192). Player jump max 112px; cannot reach from ground. Need stairs or lower platforms? We have platforms at y=8 (4 tiles above ground) reachable; y=6 maybe reachable from smaller platform. But our platforms are isolated, no path. That's okay; they are optional coin platforms, not required. Enemies don't need. Player can ignore. But if a required path needed, it's not. Good.

Potential issue: Enemy placement: For each ground segment length > 16, place at start+6 and start+16. Some segments may have both in same ground but with gaps after second, causing them to walk into pit. That's fine.

Potential issue: The score text and lives text are fixed to camera with `.setScrollFactor(0)`. Good. Need set scroll factor for UI only. Done.

Potential issue: `this.player.setCollideWorldBounds(true)` but we set world bounds width=WIDTH. So player cannot go beyond right edge. Camera follows; good.

Potential issue: `this.physics.world.setBounds(0,0,WIDTH,HEIGHT)`. The bottom is at HEIGHT=480. Wait ROWS=15*32=480. The ground is at y rows 12-14. Player can fall below world if falls in pit, y > 480+64; then death. But if `setCollideWorldBounds(true)`, the player body collides with bottom edge at y=480; but if falling, after hitting bottom, `player.y` is at 480 - height/2; still below HEIGHT? Player center y = 480 - 14 = 466, not > 544? Actually body blocked at bottom, player may rest on world bottom. Then in update, `if (this.player.y > HEIGHT + 64)` i.e. > 544. But player is blocked at 466; won't reach >544. So death by falling won't trigger if colliding with world bounds! This is a bug. We need to disable bottom collision or detect when over a pit. We can either set world bounds to include deeper bottom or remove bottom collision. Options: Use `setBounds` with height larger (e.g., HEIGHT + 600). Or set `this.player.body.setCollideWorldBounds(true, false, false, false)`? Phaser Body `setCollideWorldBounds(boolean, left?, right?, up?, down?)`? Need check API. In Phaser 3, Arcade.Body has `setCollideWorldBounds(boolean, left?, right?, up?, down?)` where booleans determine whether to collide on each side. Actually in source, signature `setCollideWorldBounds(value, left = true, right = true, up = true, down = true?)`. But I think for Sprite, `setCollideWorldBounds(value)` only sets on/off. The body method may allow per-side. Let's check: In Phaser 3.60, `Body.setCollideWorldBounds(boolean)` sets `customBounds`? I recall there is `blocked` not per side maybe. Actually yes, there is `blocked.none` etc. But per side can be set via `body.checkCollision.left/right/up/down`. The easier fix: increase world bounds height to HEIGHT + 400 so player falls through, and remove bottom collision or just check `player.y > HEIGHT + 200`.

We currently have `this.player.setCollideWorldBounds(true)`. If we set world bounds height to HEIGHT+600, player won't hit bottom; they'll fall until y > HEIGHT + 600? That's too long. We can either disable `setCollideWorldBounds` entirely for player (they won't collide with sides), but we want them to not leave left/right. Actually left/right world bounds help keep them in world; but camera follows. We can check boundaries manually in update: `if (player.x < 16) player.x=16` etc. Or set collides sides only. But simpler: keep bottom collision disabled by using larger world height and manual side limits? Hmm.

Alternative: Set world bounds to (0,0,WIDTH, HEIGHT+300) and `setCollideWorldBounds(true)`. The player can fall 300px below screen before being blocked, enough to trigger death. But then if player reaches bottom bounds at y=HEIGHT+300-14, death won't trigger if blocked there. We need death at some point. We can in update check `if (player.y > HEIGHT + 64)`. If world bottom is far, player will keep falling below and trigger at y > 544. Good. We also want not collide bottom; with world bottom at HEIGHT+300, the player will fall past 544. Good. Player will eventually hit bottom if not dead, but death triggers first.

So set `this.physics.world.setBounds(0, 0, WIDTH, HEIGHT + 300);` and maybe keep player collide world bounds true. Then sides and top still collided; bottom far. However if player falls far, they might bounce at bottom and not die. But death already triggers at y > 544. Since we teleport after a frame, fine.

But for enemies, they have world bounds set to same; they may fall and hit bottom if not out-of-bounds destroyed. We have out-of-bounds destroy at y > HEIGHT + 64. Good.

So edit `setBounds` height to `HEIGHT + 300`. Also need to adjust camera bounds maybe? Camera bounds currently (0,0,WIDTH,HEIGHT). If player falls below world visible, camera should show? Actually camera setBounds to 0..HEIGHT will not scroll below ground; player falls out of view to bottom. That's fine; player disappears into pit. Could be weird if player falls through but camera stays. Acceptable. The deadzone vertical may keep camera? It follows player but vertical bounds to HEIGHT-480? It will follow down to HEIGHT-480? Hmm. It won't follow beyond world bounds. But death triggers quickly.

Alternatively keep camera bounds as is; player falls out of frame, then death. Fine.

Edit.

Now the player bottom collision won't happen before death. Good.

Potential issue: `this.cameras.main.setBounds(0, 0, WIDTH, HEIGHT);` The camera cannot follow below HEIGHT (world bottom). Player at y > HEIGHT out of view. Fine.

Potential issue: Enemies `setCollideWorldBounds(true)` with world bottom at HEIGHT+300; they won't die but we destroy when y > HEIGHT+64. Good.

Now another issue: The castle at end has bricks at y=GROUND_ROW-4..GROUND_ROW-1 (8..11). Player might try to reach flag at x=203. The castle is x=194-202, height 4 blocks. Player can jump on top; okay.

Now check flag overlap. The flag zone body at flag top. But the flag pole and castle are static. Player can touch zone with body. Good.

Now test syntax.

Now let's think about using only procedural graphics. We don't load any images or audio. Good. The flagPole and cloth are generated.

Now, the prompt: "Use ONLY procedurally generated graphics, no external image or audio assets." We have not used any external. Good.

The prompt: "Use the pre-provided phaser.min.js (global Phaser), build a playable side-scrolling platformer in the classic Mario style: run and jump across scrolling platforms, stomp enemies, collect coins, and reach a goal flag." We have that.

"build a single-page web app and write it ALL into one self-contained file named index.html in the current directory: CSS in a <style> tag, JS in a <script> tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: the artifact runs fully sandboxed with no network. End with index.html present. These library file(s) are ALREADY present in the current directory — load each with a plain <script src=\"NAME\"></script> using its exact filename (never a CDN or URL), then build on top of it: phaser.min.js." Done.

We may want to verify the file looks okay and maybe launch a quick static server to check no console errors? We can't run browser. But we can at least confirm content and no placeholders.

Maybe we should also include a quick sanity check for `node -c` after final. It passed.

Could use a headless browser via Puppeteer? Not installed. No need.

But maybe we can test using `npx http-server` and `node` cannot render. Not needed.

Now, let's consider if there are any leftover bugs: `e.setSize(26, 26);` then `e.setOffset(3, 6);`. This sets body to center. The enemy display and body align. Fine.

But `this.player.setSize(20, 28);` then `setOffset(6, 4);`. Body maybe offset; fine.

Now, a major issue: `this.physics.add.overlap(this.player, this.enemies, this.hitEnemy, null, this);` When the player is in contact with the ground and an enemy, the player's `body.touching.down` will be true because of ground, not necessarily enemy? In Phaser, `body.touching` is set by the collision/ separation with the most recent contact. If both enemy and ground contact occur in same step, the touching flags reflect the last solved overlap. If player stands on ground and touches enemy from side, touching.down might still be true because ground. Then the stomp condition could accidentally trigger, killing enemy in a side hit. This is a known issue when using touching flags with multiple collisions. More robust: check player's vertical velocity `player.body.velocity.y > 0 && player.y + player.height/2 < enemy.y + enemy.height/2 - 4`. Let's use that.

Also for enemy side collision, it may be enough. Let's adjust hitEnemy logic:

```
if (player.body.velocity.y > 0 && player.y < enemy.y - 4) { // stomp
  ...
  player.setVelocityY(-320);
} else { death }
```

But we need avoid killing enemy when hitting from side while player has slight downward velocity. Use threshold `player.y + player.height/2 <= enemy.y + enemy.height/2 - 6` and `player.body.velocity.y > 0` or player is moving down due to gravity. If both true, stomp. Good.

Let's edit hitEnemy.

Good.

Now think about the `enemy.height` for a sprite is display height (32 by default scaled). We didn't set enemy scale; height=32. The check uses that. Good.

But `player.height` default 32. Fine.

However, `this.enemies` group `contains`? The group method is `contains(child)`. Should be fine.

Now, potential issue: If the player is falling and stomps the enemy, `enemy.isDead = true` but the enemy body not disabled until tween completes. During tween, if still overlaps and player still has velocity.y > 0, `hitEnemy` will be called again and `enemy.isDead` true, so it returns. Good.

But the stomp condition `player.body.velocity.y > 0` might not be true if player is on upward bounce after stomp. Since we set velocityY -320, next frames velocity.y negative while leaving. Good.

Potential issue: Enemy collision with player when player is ascending (negative v) results in death. Good.

Potential issue: If player lands on enemy and holds jump, they go high. Fine.

Now, `this.player.setCollideWorldBounds(true)` means if player falls in pit, the bottom world boundary is far below so no collision. They'll keep falling until death. Sides still collide. Good.

Now, after death and respawn, we set position to spawn and reset camera. But `this.player.setPosition` resets to (spawnX,spawnY). However if the player was falling with velocity large, `setVelocity(0,0)` resets. Good.

Now, the camera `stopFollow` then `scrollX=0; scrollY=0; startFollow`. The camera may not have time to update, but after startFollow, it will lerp. Good.

Now, check `this.updateHUD()` is defined and called after score changes. Yes.

One more issue: `this.physics.world.on('worldbounds', ...)` is set before `this.enemies` exists. The event handler uses `this.enemies.contains`. If for some reason worldbounds event fires before `this.enemies` defined (e.g., during create if a body spawns out of bounds), it could error. But all enemies and player are spawned within bounds. The flag zone also within bounds. So no.

Now, maybe the start screen overlay prevents keyboard focus on canvas even after hide because we don't set focus; we set focus on canvas in start button listener. Good.

But if user uses keyboard without clicking start? overlay covers and pointer events only; but we want them to click start. Good.

Now, we might want to disable right-click context menu? Not required.

Now, perhaps the file is fine. Let's read the generated file to ensure no malformed strings.

Review looks good. But there are a few considerations:

1. The overlay `.card` uses `pointer-events:auto` but `.overlay` uses `pointer-events:none`; the card inside has auto, so buttons work. Good. The start screen is display flex but overlay pointer-events none; button auto handles. Good.

2. The game over / win overlays are display none; when shown as flex, pointer-events none means clicking a child card (auto) works. Good.

3. The start screen text says "Use Arrow Keys or W/A/S/D". We use W for jump, A/D left/right; S not used. Fine.

4. The start screen hides on click. Good.

5. `showGameOver` and `showWin` are defined inside the IIFE and called by the scene. Good.

6. `restart` function uses `window._currentScene.scene.restart()`. Since `MainScene` is the current scene, `this.scene.restart()`. Good. After restart, window._currentScene will be set to new scene in create. Good.

7. On scene restart, the DOM event listeners for start/restart are still there; fine.

Now, let's consider if there is any issue with using `this.flagZone` in `reachFlag`. The zone body is set to allow gravity false, moves false. The overlap callback receives (player, zone) and we set `this.isGameOver = true`. No issue.

But `flagZone` is in the scene; on restart it gets destroyed. Fine.

Now, maybe the platform generation is heavy (200 columns * 3 rows = 630 ground blocks, plus bricks maybe 100, plus coins/enemies). Phaser Arcade staticGroup may be okay. But for 800 bodies, fine.

Now, possible issue: `this.coins` is a static group. When collecting a coin, we call `coin.collected = true` then tween it. If player is still overlapping, `collectCoin` guard fine. Once destroyed, static body disabled. Good.

Now, maybe the `collectCoin` is attached to static group; static bodies overlap detection only triggers once per contact. Fine.

Now, another potential issue: `this.player.body.onFloor()` returns true when touching a static body. Good.

Now, we might want to add a small "Instructions" overlay on start? Already there.

Now, check if there is any `console` error likely? No.

Let's consider if the game uses no network. The only external script is local `phaser.min.js`. That's allowed. No other resources.

Now, let's test by serving with a simple static server and using a headless test maybe with `puppeteer` if available. But not necessary. But maybe we can use `npx playwright` not installed. Could use `phantomjs`? Not.

However, to be thorough, we can attempt to start an HTTP server in the background and use `curl` to get the file; but that doesn't test runtime.

We can try to use `jsdom` or `puppeteer` if available. Let's not overcomplicate.

Now, consider potential issue with `this.physics.world.on('worldbounds', ...)` before `this.enemies` is defined. It uses `this.enemies.contains` at runtime. In Phaser, `Group.prototype.contains` exists. Good. But the listener is a closure that references `this.enemies`. Since `this.enemies` is assigned later in same synchronous create function, by the time any event occurs it's defined. However the closure captures `this`, not the variable at registration. So when event fires, `this.enemies` is the assigned group. Good. There's no issue. But if event fires before assignment, there is; but as explained not.

Now, perhaps we should also check `this.enemies.children.iterate` returns null if group is empty? The method exists. Fine.

Now, let's test the level data generation by extracting and running it? Could maybe use node if we add module exports. Not necessary, but we can check the generated map string length. The function returns a string of length COLS for each row. Good.

But one issue: In `buildLevelData`, for each ground segment we fill columns from start to end. For segment [181, COLS] (210). Castle at x=194-202, y=8..11. Good. Flag at x=203, y=9..11 and F at y=9. Good.

Now, maybe the first enemy placement at segment [30,55], start+6=36, start+16=46. At x=46 near gap. Enemy may walk left/right; at world bounds they turn. Good.

Now, the second enemy of segment [90,118], positions 96 and 106. Good.

Now, the gap from 55-60 is 5 tiles (160 px), reachable? Jump height 112 px -> time 1.02s at horizontal speed 200 -> ~204 px. So 160 px easily. Gap 25-30 length 5 (160). Gap 175-181 length 6 (192) - near max. Player can just make it? horizontal distance at speed 200 while in air if jump at edge and hold. Time to fall from jump height? With jump -460 and height 112, peak to ground same time; total air ~1s. distance ~200. For 192, okay. Need be careful. We could shorten that gap to 5 tiles to be safe. Let's change segments to make last gap 5 (175,180), ground [180,210]? But we need COLS =210. Let's adjust:

Change `[175, 181, 'gap']` to `[175, 180, 'gap']`, `[181, COLS, 'ground']` to `[180, COLS, 'ground']`. Wait if ground starts at 180 and gap ends 180, no overlap. The previous ground segment ended 175. So gap 175-180 (5 tiles). Ground 180-210. Good.

But then enemies placement segment [180,210] length 30, positions 186,196. Good. Castle from x=194-202. Good.

Edit.

Now check syntax.

Now, maybe we should also test with a headless browser if possible. Let's check if `chromium` or `google-chrome` available.

No browser. Can't run runtime. But we can still verify by serving and maybe using Node's `vm`? No DOM.

Now, the code is final. However, we should also consider if the `flagZone` is large enough to overlap with player. The zone is at (flagX center, top marker center). Player center width 20. Zone width 60, height 120. Overlap likely. Good.

Now, think about the `worldbounds` event handler: It references `body.velocity.x`. Arcade.Body has `velocity.x`. Good. It calls `body.gameObject.setVelocityX`. Good. However `setVelocityX` on a sprite will set body.velocity.x to given. The body might be touching world bounds; separating the body might reset velocity next step; but we set. Works.

Now, perhaps `this.player.setCollideWorldBounds(true)` will prevent player from leaving top too; but no issue.

Now, maybe there is a subtlety: The `coin` is a static body. Tweening `coin.y` will move its display but its static body remains at old position; however we destroy after tween. The overlap can only fire while body at original position. The tween begins after collected. Good.

Now, maybe the static coin group `create` may assign default body size 32x32. Good.

Now, `this.physics.add.overlap(this.player, this.flagZone, this.reachFlag, null, this);` The zone body is static. Good.

Now, the game has no audio. Good.

Now, the instructions asked to "End with index.html present." We have it.

Now, we might want to make sure there are no unused variables like `game` but fine.

Potential issue: The IIFE variable `game` is const and unused except `new Phaser.Game(config)`. That's fine.

Potential issue: In `collectCoin`, `coin.active` maybe false after destroy; but we don't call after destroy.

Now, perhaps the player can clip into a brick from below because static body top/bottom collisions handled by Arcade.

Now, the static ground blocks are individual 32x sprites; they may create seams. With pixelArt true, no issue.

Now, the start screen is displayed over canvas but maybe the canvas is not visible due to background; it is. Good.

Now, perhaps we should also mention no external resources. Good.

Now, before final, maybe we should run a quick code formatting check. Not needed.

Let's also consider if the player is affected by side world bounds at right edge; `setCollideWorldBounds(true)` prevents leaving the right side, but the goal flag is at x=~6496. Player must reach it and touch zone. Since right world bound is at x=WIDTH=6720, player can reach. Good.

Now, let's think about whether there are too many static bodies causing collision tunneling at high speed. Player speed 200, frame 60 -> 3.3 px per frame, fine.

Now, maybe the `flagZone` height 120 extends downward to y+60 = 364, which is within ground. Overlap with player head maybe. Fine.

Now, let's think about the coin arcs: `coinArcs` at y=GROUND_ROW-4=8. That's a row of 5 coins in midair; reachable. But some may overlap with platforms? At x=100-104 there is a platform at y=8, coins at y=8 would conflict with platform block at x=100-104? Actually platform at x=100-105 y=8; coin row at y=8. In loop, ground coin arcs set 'C' at y=8; then platform loop set 'B' at y=8, overwriting some coins with bricks. Not a big deal; bricks replace coins. Could avoid, but not necessary. Some coins lost. Fine.

Now, enemies on ground: The `set` function overwrites any coin if enemy at same tile? Enemies placed at y=11; coins arcs at y=8, so no conflict. Platforms at y=6-8; no.

Now, the castle bricks at end fill x=194-202, y=8-11. This might overwrite enemy at x=196? Segment ground [180,210] positions 186,196. At x=196, y=11 enemy; castle occupies y=8-11 at x=194-202, so at x=196 y=11 becomes 'B', replacing enemy. That's okay. The castle is a wall.

Now, the flag pole markers at x=203 y=9..11. Castle doesn't reach x=203. Good.

Now, final check: Use `this.physics.world.setBounds(0, 0, WIDTH, HEIGHT + 300);` but camera setBounds to HEIGHT; the player can fall out of camera view. That's fine.

Potential issue: When player dies and respawns, camera stopFollow and startFollow with lerp. `scrollX=0` but because startFollow uses lerp, camera may not immediately jump. But player's x at spawn 80, so camera scrollX target ~? If player x=80, camera centered at 80 in 800 width -> scrollX negative? Actually camera follow with deadzone may stay at scrollX 0 until player moves right. We set scrollX to 0 explicitly. startFollow might set target scrollX. Good.

Now, we should think if `this.cameras.main.scrollX = 0; this.cameras.main.scrollY = 0;` should be called after stopFollow and before startFollow. Yes.

Now, if player dies at a far x, after respawn camera reset to left. Good.

Now, the game over/win overlays `pointer-events` none; but card auto. Good.

One more detail: The game is paused on start. The `start-btn` click resumes scene. However, `scene.pause()` pauses all updates and input processing; after resume, input works. Good.

Now, final answer should mention file created and controls. It should be concise.

Before final, we can verify file size and presence.

Now final response. We should state that index.html is built, all in one file, loads local phaser.min.js, no external assets, procedural graphics. Mention controls. We can be concise.