The user wants me to build a single-page web app in index.html using Phaser (loaded from local phaser.min.js). It should be a side-scrolling platformer in the classic Mario style: run, jump, scrolling platforms, stomp enemies, collect coins, reach a goal flag. Everything should be procedurally generated graphics only, no external assets. Must be self-contained in index.html with CSS in <style> and JS in <script>.

Key requirements:
- Single file index.html
- Include phaser.min.js via <script src="phaser.min.js"></script>
- No external resources, CDNs, or network requests
- Procedurally generated graphics (no image assets)
- Side-scrolling platformer
- Run, jump, scrolling platforms
- Stomp enemies
- Collect coins
- Reach goal flag

I need to design a fun, complete game with Phaser. Let's plan:

Phaser 2 or 3? Since phaser.min.js is provided and not specified, I should likely use Phaser 2 CE (Community Edition) which is common in older bundlings, or Phaser 3. Without knowing which version, I should probably use a version-agnostic approach or check if there's a specific version. Since we can't connect to network, I'll rely on my knowledge. `phaser.min.js` could be either. Usually "phaser.min.js" suggests Phaser 2 (phaser.js) where version 3 is often "phaser.min.js" too but different API. I should maybe make the game using Phaser 2 style if it's the typical "phaser.min.js" filename bundled, or Phaser 3 style.

Actually, many projects still use Phaser 2. But to be safe, I can write code that is simple enough and check the file? Let's inspect phaser.min.js to see its version.

The phaser.min.js is 1.1MB, minified, with UMD wrapper. It's likely Phaser 3 (Phaser 3 uses IIFE and common patterns). Phaser 2 CE is also around 700KB-1MB. The output "i.g=function(){if("object"==typeof globalThis)..." looks like a modern bundler output, possibly Phaser 3 (which uses webpack/babel output). Phaser 2 CE minified usually looks different. This seems like Phaser 3.

Let's verify by checking for Phaser.Game and version string? Since minified, I'll search for version.

Great, Phaser 3.80.1. So I'll use Phaser 3 API.

Goal: Build a complete Mario-style side-scrolling platformer.

Features needed:
- Procedural graphics (use Phaser.Graphics to draw textures)
- Player character with run/jump physics
- Platforms (ground, floating)
- Scrolling camera following player
- Enemies (goombas) that can be stomped
- Coins to collect
- Goal flag at the end
- Score display
- Game over / win states

Architecture in Phaser 3:
- Use Arcade Physics
- Create textures from Graphics objects (generateTexture)
- Use a group or static group for platforms
- Use an enemy group, coins group
- Player sprite with animations drawn manually? Or just use single texture but tint? For Mario style, I should draw a simple character using graphics.

Simplify: Use Phaser's Graphics to draw textures and cache them as textures for sprites.

Level design:
- I'll create a long level procedurally using an array/tilemap logic, or place platforms manually. For a more complete game, I can generate a level with a function that places platforms, gaps, enemies, coins at intervals.

Player controls:
- Arrow keys left/right to run
- Space/up to jump
- Double jump? No, Mario single jump is fine but maybe variable jump height (holding jump goes higher). I'll implement that with velocityY and setting gravity on release? In Phaser 3 arcade, variable jump can be approximated by adjusting velocityY while jump key is held.

Collisions:
- Player collides with platforms (world bounds?)
- Player collides with enemies: if player is falling and top touches enemy, enemy dies (stomped). Otherwise, player takes damage/dies.
- Player collects coins on overlap.
- Player reaches flag on overlap => win.

Graphics to generate:
- Player: small rect with hat and overalls? Use a few rects to look like Mario pixel art? Keep it simple: a red square with brown shoes and skin color face. Since it's generated at runtime, I'll make a 16x16 or 32x32 sprite using graphics.
- Ground/brick tiles: brown/brick color rectangles with some lines.
- Question block? Maybe gold with question mark.
- Goomba: brown mushroom shape (rounded rect or ellipse + feet).
- Coin: yellow circle.
- Flag: green pole with triangle flag.

Let's design a level length, say 4000-5000 pixels wide.

Procedural Level Generation:
- Define a set of platform segments: ground segments with gaps, floating platforms, pipes (going up), etc.
- Use a simple algorithm: place ground tiles every 32px, with gaps.
- Place floating platforms at certain intervals.
- Place enemies and coins on platforms/ground.

I'll make a class-based structure inside the script tag.

Important: no external assets, all procedural.

Code outline:
- HTML boilerplate
- <style> tag for styling canvas (centered, black background)
- <script src="phaser.min.js"></script>
- <script>
  // Game config
  // create() generates textures, sets up physics, builds level
  // update() handles player logic, camera, stomps, etc.

Detailed textures generation:
I'll use `this.make.graphics({ x: 0, y: 0, add: false })` and then `generateTexture`.

Let's define some pixel sizes: 32x32 for tiles, player maybe 24x32.

Ground tile:
- graphics.fillStyle(0x8B4513) // saddlebrown
- fillRect(0,0,32,32)
- add some horizontal lines for bricks? lighter color.

Brick block:
- similar but red/orange? Actually Mario ground is often brown with black bricks. I'll make a brick pattern.

Let's write generateTexture helper functions.

Player:
- 24x32.
- Draw body (red overalls), head (skin), hat (red). Simple pixel art.

Goomba:
- 32x28 or so. Brown ellipse for body, two small feet at bottom.

Coin:
- 16x16. Yellow circle with inner highlight.

Flag pole:
- Banner: red rectangle, maybe a white circle? Pole: gray line.

Question block:
- Yellow/gold block with black question mark? Or just colored block.

Simplification: Since we can't load images, we can make the player a "blob" but that's not Mario-style. Let's do minimal pixel-like drawings with rects.

Implementation plan:

```javascript
class Platformer extends Phaser.Scene {
  constructor() {
    super('Platformer');
  }
  
  preload() {
    // nothing
  }
  
  create() {
    // generate textures
    this.createTextures();
    // world bounds
    this.physics.world.setBounds(0, 0, 5000, 600);
    // groups
    this.platforms = this.physics.add.staticGroup();
    this.enemies = this.physics.add.group({ allowCollide: true });
    this.coins = this.physics.add.group({ allowCollide: true });
    // build level
    this.buildLevel();
    // player
    this.player = this.physics.add.sprite(100, 400, 'player');
    this.player.setBounce(0);
    this.player.setCollideWorldBounds(true); // maybe false for pits? True for now
    this.physics.add.collider(this.player, this.platforms);
    this.physics.add.overlap(this.player, this.coins, this.collectCoin, null, this);
    this.physics.add.collider(this.player, this.enemies, this.handleEnemyCollision, null, this);
    // camera
    this.cameras.main.setBounds(0, 0, 5000, 600);
    this.cameras.main.startFollow(this.player, true, 0.1, 0.1);
    this.cameras.main.setDeadzone(100, 100);
    // flag
    this.flag = this.physics.add.staticSprite(4900, 500, 'flag');
    this.physics.add.overlap(this.player, this.flag, this.reachFlag, null, this);
    
    // inputs
    this.cursors = this.input.keyboard.createCursorKeys();
    this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
    
    // HUD
    this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '24px', fill: '#fff' }).setScrollFactor(0);
    this.score = 0;
    this.gameOver = false;
    this.win = false;
  }
  
  update() {
    if (this.gameOver || this.win) return;
    
    // horizontal movement
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-200);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(200);
    } else {
      this.player.setVelocityX(0);
    }
    
    // jump
    if ((this.cursors.up.isDown || this.cursors.space.isDown) && this.player.body.touching.down) {
      this.player.setVelocityY(-450);
    }
    
    // fall off world
    if (this.player.y > 600) {
      this.gameOver = true;
      this.player.setTint(0xff0000);
      this.add.text(this.cameras.main.midPoint.x - 100, this.cameras.main.midPoint.y, 'GAME OVER', { fontSize: '32px', fill: '#f00' }).setScrollFactor(0);
    }
    
    // enemy logic
    this.enemies.getChildren().forEach(enemy => {
      if (!enemy.active) return;
      // basic patrol: move left, turn at edges or random
      if (enemy.body.touching.down && !enemy.body.blocked.left && !enemy.body.blocked.right) {
         enemy.setVelocityX(enemy.getData('dir') * 100);
      } else if (enemy.body.blocked.left || enemy.body.blocked.right) {
         // check if about to walk off platform? just reverse periodically
      }
      if (enemy.body.blocked.left) {
        enemy.setVelocityX(100);
        enemy.setData('dir', 1);
      } else if (enemy.body.blocked.right) {
        enemy.setVelocityX(-100);
        enemy.setData('dir', -1);
      }
      // simple reversing: if falling and not on ground? 
      // Actually in arcade physics if enemy walks off edge, it will fall. We can just let them patrol using current velocity until blocked.
    });
  }
  
  handleEnemyCollision(player, enemy) {
    if (enemy.body.touching.down && player.body.touching.up) {
      // stomp
      this.tweens.add({
        targets: enemy,
        y: enemy.y - 20,
        duration: 50,
        onComplete: () => enemy.destroy()
      });
      player.setVelocityY(-200);
      this.score += 100;
      this.updateScore();
    } else {
      // die
      this.gameOver = true;
      player.setTint(0xff0000);
      // maybe show game over text
      const text = this.add.text(this.cameras.main.midPoint.x - 80, this.cameras.main.midPoint.y - 30, 'GAME OVER', { fontSize: '32px', fill: '#f00' });
      text.setScrollFactor(0);
      const restartText = this.add.text(this.cameras.main.midPoint.x - 100, this.cameras.main.midPoint.y + 20, 'Click or press R to restart', { fontSize: '18px', fill: '#fff' });
      restartText.setScrollFactor(0);
      this.time.delayedCall(500, () => {
        this.input.keyboard.once('keydown-R', () => this.scene.restart());
        this.input.once('pointerdown', () => this.scene.restart());
      });
    }
  }
  
  collectCoin(player, coin) {
    coin.destroy();
    this.score += 10;
    this.updateScore();
  }
  
  updateScore() {
    this.scoreText.setText('Score: ' + this.score);
  }
  
  reachFlag(player, flag) {
    this.win = true;
    this.player.setVelocity(0,0);
    const text = this.add.text(this.cameras.main.midPoint.x - 100, this.cameras.main.midPoint.y - 30, 'YOU WIN!', { fontSize: '32px', fill: '#0f0' });
    text.setScrollFactor(0);
    const restartText = this.add.text(this.cameras.main.midPoint.x - 150, this.cameras.main.midPoint.y + 20, 'Click or press R to restart', { fontSize: '18px', fill: '#fff' });
    restartText.setScrollFactor(0);
    this.time.delayedCall(500, () => {
      this.input.keyboard.once('keydown-R', () => this.scene.restart());
      this.input.once('pointerdown', () => this.scene.restart());
    });
  }
  
  createTextures() {
    // Player texture: 24x32
    const pGfx = this.make.graphics({ add: false });
    pGfx.fillStyle(0xFF0000); // hat/overalls
    pGfx.fillRect(4, 0, 16, 8); // hat
    pGfx.fillStyle(0xFFCC99); // skin
    pGfx.fillRect(4, 8, 16, 8); // face
    pGfx.fillStyle(0x0000FF); // shirt? Mario has blue overalls
    pGfx.fillRect(4, 16, 16, 12);
    pGfx.fillStyle(0x8B4513); // shoes
    pGfx.fillRect(4, 28, 8, 4);
    pGfx.fillRect(12, 28, 8, 4);
    pGfx.generateTexture('player', 24, 32);
    pGfx.destroy();
    
    // Ground / brick: 32x32
    const brickGfx = this.make.graphics({ add: false });
    brickGfx.fillStyle(0x8B4513);
    brickGfx.fillRect(0,0,32,32);
    brickGfx.fillStyle(0x6B3410);
    brickGfx.fillRect(0,0,32,2);
    brickGfx.fillRect(0,0,2,32);
    brickGfx.fillRect(16,0,2,32);
    brickGfx.fillRect(0,16,32,2);
    brickGfx.generateTexture('brick', 32, 32);
    brickGfx.destroy();
    
    // Question block: 32x32
    const qGfx = this.make.graphics({ add: false });
    qGfx.fillStyle(0xFFD700);
    qGfx.fillRect(0,0,32,32);
    qGfx.fillStyle(0xDAA520);
    qGfx.fillRect(0,0,4,32);
    qGfx.fillRect(28,0,4,32);
    qGfx.fillRect(0,0,32,4);
    qGfx.fillRect(0,28,32,4);
    // draw "?"
    qGfx.fillStyle(0x8B4513);
    qGfx.fillRect(12,8,8,4);
    qGfx.fillRect(12,16,8,2);
    qGfx.fillRect(12,20,8,8);
    qGfx.generateTexture('question', 32, 32);
    qGfx.destroy();
    
    // Goomba: 32x32
    const gGfx = this.make.graphics({ add: false });
    gGfx.fillStyle(0x8B4513);
    gGfx.fillRect(4,4,24,20);
    gGfx.fillStyle(0x6B3410);
    gGfx.fillRect(8,8,6,6);
    gGfx.fillRect(18,8,6,6);
    gGfx.fillStyle(0x000);
    gGfx.fillRect(8,16,4,2);
    gGfx.fillRect(20,16,4,2);
    gGfx.fillStyle(0x000);
    gGfx.fillRect(6,24,8,4); // feet
    gGfx.fillRect(18,24,8,4);
    gGfx.generateTexture('goomba', 32, 32);
    gGfx.destroy();
    
    // Coin: 16x16
    const cGfx = this.make.graphics({ add: false });
    cGfx.fillStyle(0xFFD700);
    cGfx.fillCircle(8,8,7);
    cGfx.fillStyle(0xFFA500);
    cGfx.fillCircle(8,8,4);
    cGfx.generateTexture('coin', 16, 16);
    cGfx.destroy();
    
    // Flag: 16x48
    const fGfx = this.make.graphics({ add: false });
    fGfx.fillStyle(0x808080);
    fGfx.fillRect(4,0,4,48); // pole
    fGfx.fillStyle(0x00FF00);
    fGfx.fillRect(8,4,24,16); // flag
    fGfx.generateTexture('flag', 32, 48);
    fGfx.destroy();
  }
  
  buildLevel() {
    // ground segments
    const segments = [
      { x: 0, w: 800 },
      { x: 900, w: 600 },
      { x: 1600, w: 400 },
      { x: 2200, w: 600 },
      { x: 3000, w: 400 },
      { x: 3600, w: 300 },
      { x: 4100, w: 10 }, // only pole area? Actually flag on a platform
    ];
    for (const seg of segments) {
      for (let i = 0; i < seg.w; i += 32) {
        this.platforms.create(seg.x + i, 568, 'brick'); // ground at y=568, tile 32x32 -> top at 568
        // Actually tile height 32: if top of ground should be visible at y=568, sprite center at 568+16=584.
        // Let's adjust: for static group, position is center. So to make top=568, y = 568 + 16 = 584.
        // Wait: I used 568 as top? Let's say ground level is at pixel 568. So y = 568 + 16 = 584.
      }
    }
    
    // floating platforms
    const floatPlats = [
      { x: 400, y: 420, w: 128 },
      { x: 700, y: 320, w: 96 },
      { x: 1200, y: 400, w: 64 },
      { x: 1500, y: 300, w: 96 },
      { x: 1800, y: 420, w: 128 },
      { x: 2100, y: 340, w: 64 },
      { x: 2400, y: 260, w: 96 },
      { x: 2700, y: 400, w: 128 },
      { x: 3200, y: 320, w: 64 },
      { x: 3500, y: 240, w: 96 },
      { x: 3800, y: 380, w: 128 },
    ];
    for (const p of floatPlats) {
      for (let i = 0; i < p.w; i += 32) {
        this.platforms.create(p.x + i, p.y, 'brick');
      }
    }
    
    // coins
    const coinPositions = [
      { x: 300, y: 500 }, { x: 450, y: 380 }, { x: 750, y: 280 },
      { x: 1250, y: 360 }, { x: 1550, y: 260 }, { x: 1850, y: 380 },
      { x: 2150, y: 300 }, { x: 2450, y: 220 }, { x: 2750, y: 360 },
      { x: 3250, y: 280 }, { x: 3550, y: 200 }, { x: 3850, y: 340 }
    ];
    for (const c of coinPositions) {
      this.coins.create(c.x, c.y, 'coin').setImmovable(true);
    }
    
    // enemies
    const enemyPositions = [
      { x: 300, y: 536 }, { x: 600, y: 536 }, { x: 950, y: 536 },
      { x: 1300, y: 536 }, { x: 1700, y: 536 }, { x: 2300, y: 536 },
      { x: 2600, y: 536 }, { x: 3100, y: 536 }, { x: 3400, y: 536 },
      { x: 3900, y: 536 }
    ];
    for (const e of enemyPositions) {
      const enemy = this.enemies.create(e.x, e.y, 'goomba');
      enemy.setData('dir', -1);
      enemy.setVelocityX(-100);
      enemy.body.setSize(28, 28);
    }
    
    // pipes maybe? Let's not complicate.
  }
}
```

Wait, the ground y: If tile is 32px, positioned at center y, top is y-16. We want top of ground to be at groundLevel (e.g. 568). So y = 568 + 16 = 584. The screen height should be at least 600. World bounds 600 height.

Player start y should be above ground, e.g., 400? Actually if ground top is 568, player bottom should be at 568. Player is 32 tall, so y = 568 - 16 = 552.

But player sprite center y is 552 means top=536, bottom=568. Wait player texture is 32px? I defined 24x32. If center is 552, top = 536, bottom = 568. That's fine, but it starts in air? The ground is at y=584 center, top 568. So player bottom at 568 and ground top at 568 - they collide.

So player initial y = 536? Let's compute: If ground center y = 568 + 16 = 584. Player height 32. Player center = 584 - 16 = 568. Wait player body top is center - 16 = 552. Player bottom is 584. That puts player intersected into ground. So initial player y = 536: player bottom = 536+16=552. That's 16px above ground, player falls and lands. Good.

Enemies on ground: goomba is 32x32, center y should be ground center? If placed at 584, bottom=600, top=568 - they stand on ground. But our world height is 600, so bottom at 600 is fine. However in previous formula ground center is 584. Let's set enemy y = 584 - 16 = 568? Wait goomba is 32 high. Center at 584 means bottom at 600, top 568. That touches ground top (568). So they stand on it. Let's place them at 568? Center at 568 means bottom=584, top=552. That would be half inside ground. So y = 584. Let's set ground y = 584 (center). Player start y = 500 (fall down).

I'll adjust accordingly.

Need to handle the camera deadzone and bounds.

For procedural textures, I should draw better sprites.

Let's refine the drawing functions:

Player (24x32):
- Shoes (brown) at bottom
- Legs (blue)
- Body/Torso (red shirt + blue overalls?) Mario is red shirt, blue overalls. Let's just do a simple red body with blue overalls.
- Head (skin) with brown hair.
- Eyes and mustache? Too detailed.

Simpler:
- Hat: red rect top.
- Face: skin rect.
- Overall: blue rect covering lower body.
- Shoes: brown rects at bottom.

Maybe 32x32 would make it easier with Phaser's tile alignment. Let's make player 32x32.
- Hat: 32x8 at top.
- Face: 32x8 (skin)
- Body: blue 32x12
- Legs: skin? Or just blue overalls but separate shoes.
- Shoes: brown 32x4.

Actually, in 32x32 pixels, we can fit more details.

Let's do 32x32 player:
```
pGfx.fillStyle(0xFF0000); pGfx.fillRect(0,0,32,8); // hat
pGfx.fillStyle(0xFFCC99); pGfx.fillRect(0,8,32,8); // face
pGfx.fillStyle(0x0000FF); pGfx.fillRect(0,16,32,12); // overalls
pGfx.fillStyle(0x8B4513); pGfx.fillRect(0,28,12,4); pGfx.fillRect(20,28,12,4); // shoes
```
That's okay.

Goomba 32x32:
```
fillStyle(0x8B4513);
fillRect(4,4,24,20);
fillStyle(0x6B3410);
fillRect(8,8,6,6);
fillRect(18,8,6,6);
fillStyle(0x000);
fillRect(8,16,4,2);
fillRect(20,16,4,2);
fillStyle(0x000);
fillRect(4,24,10,4);
fillRect(18,24,10,4);
```
Looks decent.

Coin 16x16:
```
fillStyle(0xFFD700);
fillCircle(8,8,7);
fillStyle(0xFFA500);
fillCircle(8,8,4);
```
Looks like a coin.

Flag pole 32x48:
```
fillStyle(0x808080);
fillRect(12,2,4,44); // pole
fillStyle(0x00AA00);
fillRect(16,4,16,12); // flag
fillStyle(0xFFFFFF);
fillCircle(14,14,3); // ball on top
```
Wait ball on top needs to be before pole? Let's do:
fillStyle(0xFFFFFF);
fillCircle(14,4,4);
fillStyle(0x808080);
fillRect(12,4,4,44);
fillStyle(0x00AA00);
fillRect(16,8,16,12);

Question block 32x32:
```
fillStyle(0xFFD700);
fillRect(0,0,32,32);
fillStyle(0xB8860B);
fillRect(0,0,4,32);
fillRect(28,0,4,32);
fillRect(0,0,32,4);
fillRect(0,28,32,4);
fillStyle(0x8B4513);
fillRect(12,8,8,4);
fillRect(12,16,8,2);
fillRect(12,20,8,10);
```
That should look like a question block.

Brick 32x32:
```
fillStyle(0xB22222);
fillRect(0,0,32,32);
fillStyle(0x8B0000);
// brick lines
fillRect(0,0,32,2);
fillRect(0,0,2,16);
fillRect(14,0,2,16);
fillRect(0,14,16,2);
fillRect(18,14,2,2);
fillRect(0,14,16,2);
fillRect(0,14,32,2);
```
Actually simpler: just solid brown with darker lines in a cross-hatch.

Now level building.

Ground level: y = 568? Let's define `const GRAVITY = 800; const GROUND_Y = 568;`. Platform top = GROUND_Y. Tile height = 32. So tile center y = GROUND_Y + 16 = 584.

World size: width 5000, height 600.

Player spawn: x=100, y=200 (fall down to ground). But camera may start at 0, player falls.

Camera follow: setBounds, startFollow.

Enemy AI:
I want enemies to patrol back and forth. In Phaser 3 arcade physics, if I set velocityX, they will move until they collide with something. However they might just walk in circles and fall off edges. I can give them a simple AI: reverse direction when they hit a wall. But falling off edges is okay? In Mario, goombas turn at edges. To do that, I need to check ahead. Or simpler: let them patrol between platforms by giving them a small patrol distance or just reverse periodically when they drift too far.

Simpler approach: Enemies have a set patrol zone? Or they just bounce off walls and if they fall off, they fall. To avoid all falling, place them only on platforms. When generating level, I should also check edge? Hard.

Alternative: use a physics body collide with world bounds? No.

Simpler: I'll add a tiny timer for enemies: every ~2 seconds flip direction. But that doesn't prevent falling off edges. To keep them on platforms, I could add invisible floor blocks under each platform segment? That's messy.

Simpler: make enemies not affected by gravity? Then they'd float. Not good.

Simpler: just let them fall off. The player might find it fun. But too many fall = less enemies.

Simpler: Just put enemies on ground and on floating platforms. Give them a small AI: they move left/right. When encountering a wall, reverse. Since ground segments are often wide enough, they'll stay on ground. For floating platforms, place enemies in the middle so they rarely fall off.

Let's define speed 60? Mario goombas are slow. 80.

Stomp detection:
`if (enemy.body.touching.down && player.body.touching.up)` ensures player is falling onto enemy. But sometimes it may not trigger if velocities don't align. I can also check `player.body.velocity.y > 0` and bounding box overlap: player bottom <= enemy center? Actually `body.touching.down` should work if arcade physics updates touches before collider. In collider callback, touches may not be set yet? According to Phaser 3, you can check `player.body.touching.down` and `enemy.body.touching.up` inside the collision callback. It should work. But safe check: `if (player.body.touching.down)` means the player is on something, so it's a stomp if it hits an enemy from above.

However, if player just grazes the side, we want death. So else is death.

One nuance: the collider processes before overlap? I'll use `this.physics.add.collider(this.player, this.enemies, this.handleEnemyCollision, null, this);`

In handleEnemyCollision:
```
if (player.body.touching.down) {
  // stomp
  enemy.disableBody(true, true);
  // or tween then destroy
  player.setVelocityY(-250);
  this.score += 100;
  this.updateScore();
} else {
  // kill player
}
```
`disableBody` is cleaner.

Win condition: overlap with flag. I'll place flag at end of level. For the flag, I can use a static sprite. Overlap callback sets win.

Scrolling: The level is 5000px. Camera follows player. Need to show a nice background. I can draw a gradient rectangle for sky using graphics and set as background image? Or just set background color on camera. I'll add a sky-colored rectangle covering the whole world as a static image or tile sprite. Or set the background color. Simpler: `this.cameras.main.setBackgroundColor('#87CEEB');`.

Platform draw: Maybe add some grass on top? Draw a thin green line on brick top? I could create a "grassBrick" texture that has green stripe. But for simplicity, just brown bricks. The game is aesthetic enough.

I can also add clouds as sprites or parralax background. But to keep it robust and fun, I'll focus on core gameplay. Clouds are nice though: use a simple white ellipse texture, place at various depths, and update scroll factor.

Let's incorporate some background clouds with setScrollFactor(0.2) etc. But they need textures. I'll generate a cloud texture: white circles. Actually draw a few white circles merged into a cloud shape. Generate texture once.

Cloud:
-gfx.fillStyle(0xffffff);
-fillRect(0,4,24,8);
-fillRect(4,0,16,4);

Simplify: just white groups? Or just stick to solid background. Keep it simple.

Let's write a complete game.

Important: Phaser 3 uses `this.physics.add.staticGroup()` for platforms. When creating, positions are center. I must align so top of tile is at correct y.

Let's write the full code carefully.

---

Structuring the code:

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Phaser Bros</title>
    <style>
        body { margin: 0; padding: 0; background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="phaser.min.js"></script>
    <script>
        // game code
    </script>
</body>
</html>
```

JS code:

```javascript
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container', // but no container, append to body automatically
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 800 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    backgroundColor: '#87CEEB'
};

const game = new Phaser.Game(config);

let player;
let platforms;
let enemies;
let coins;
let cursors;
let spaceKey;
let score = 0;
let scoreText;
let gameOver = false;
let win = false;
let GRAVITY = 800;
const WORLD_W = 5000;
const WORLD_H = 600;
const GROUND_Y = 568; // top of ground

function preload() {}

function create() {
    this.physics.world.setBounds(0, 0, WORLD_W, WORLD_H);
    this.cameras.main.setBounds(0, 0, WORLD_W, WORLD_H);
    
    generateTextures.call(this);
    
    // Platforms
    platforms = this.physics.add.staticGroup();
    enemies = this.physics.add.group({ collideWorldBounds: false });
    coins = this.physics.add.group({ collideWorldBounds: false });
    
    buildLevel.call(this);
    
    // Player
    player = this.physics.add.sprite(100, 300, 'player');
    player.setBounce(0);
    player.setCollideWorldBounds(false); // allow falling off
    player.body.setSize(24, 32);
    
    // Colliders
    this.physics.add.collider(player, platforms);
    this.physics.add.collider(enemies, platforms);
    this.physics.add.overlap(player, coins, collectCoin, null, this);
    this.physics.add.collider(player, enemies, hitEnemy, null, this);
    
    // Flag
    this.flag = this.physics.add.staticSprite(WORLD_W - 100, GROUND_Y, 'flag');
    this.physics.add.overlap(player, this.flag, reachFlag, null, this);
    
    // Camera
    this.cameras.main.startFollow(player, true, 0.1, 0.1);
    this.cameras.main.setDeadzone(100, 50);
    
    // Controls
    cursors = this.input.keyboard.createCursorKeys();
    spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
    
    // HUD
    scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '24px', fill: '#fff', stroke: '#000', strokeThickness: 3 }).setScrollFactor(0);
    
    gameOver = false;
    win = false;
}

function update() {
    if (gameOver || win) return;
    
    // Movement
    if (cursors.left.isDown) {
        player.setVelocityX(-220);
    } else if (cursors.right.isDown) {
        player.setVelocityX(220);
    } else {
        player.setVelocityX(0);
    }
    
    // Jump
    const onGround = player.body.touching.down || player.body.blocked.down;
    if ((cursors.up.isDown || spaceKey.isDown) && onGround) {
        player.setVelocityY(-500);
    }
    
    // Variable jump hold
    if (!cursors.up.isDown && !spaceKey.isDown && player.body.velocity.y < -100) {
        player.setVelocityY(player.body.velocity.y * 0.85);
    }
    
    // Fall out of world
    if (player.y > WORLD_H + 50) {
        die.call(this);
    }
    
    // Enemy logic
    enemies.getChildren().forEach(enemy => {
        if (!enemy.active) return;
        if (enemy.body.touching.down) {
            enemy.setVelocityX(enemy.getData('dir') * 90);
        }
        // Reverse at walls
        if (enemy.body.blocked.left) {
            enemy.setVelocityX(90);
            enemy.setData('dir', 1);
        } else if (enemy.body.blocked.right) {
            enemy.setVelocityX(-90);
            enemy.setData('dir', -1);
        }
        // fall off screen - disable if too low
        if (enemy.y > WORLD_H + 50) {
            enemy.disableBody(true, true);
        }
    });
}

function generateTextures() {
    // Player 32x32
    const p = this.make.graphics({ add: false });
    p.fillStyle(0xFF0000); p.fillRect(0,0,32,8); // hat
    p.fillStyle(0xFFCC99); p.fillRect(0,8,32,8); // face
    p.fillStyle(0x0000FF); p.fillRect(0,16,32,12); // overalls
    p.fillStyle(0x8B4513); p.fillRect(0,28,14,4); p.fillRect(18,28,14,4); // shoes
    p.generateTexture('player', 32, 32);
    p.destroy();
    
    // Brick 32x32
    const b = this.make.graphics({ add: false });
    b.fillStyle(0xB22222); b.fillRect(0,0,32,32);
    b.fillStyle(0x800000); // mortar
    b.fillRect(0,0,32,2);
    b.fillRect(0,0,2,32);
    b.fillRect(16,0,2,32);
    b.fillRect(0,16,32,2);
    b.generateTexture('brick', 32, 32);
    b.destroy();
    
    // Question block
    const q = this.make.graphics({ add: false });
    q.fillStyle(0xFFD700); q.fillRect(0,0,32,32);
    q.fillStyle(0xB8860B);
    q.fillRect(0,0,4,32); q.fillRect(28,0,4,32);
    q.fillRect(0,0,32,4); q.fillRect(0,28,32,4);
    q.fillStyle(0x8B4513);
    q.fillRect(12,8,8,4);
    q.fillRect(12,16,8,2);
    q.fillRect(12,20,8,10);
    q.generateTexture('question', 32, 32);
    q.destroy();
    
    // Goomba 32x32
    const g = this.make.graphics({ add: false });
    g.fillStyle(0x8B4513);
    g.fillRect(4,4,24,20);
    g.fillStyle(0x6B3410);
    g.fillRect(8,8,6,6); g.fillRect(18,8,6,6);
    g.fillStyle(0x000);
    g.fillRect(8,16,4,2); g.fillRect(20,16,4,2);
    g.fillStyle(0x000);
    g.fillRect(4,24,10,4); g.fillRect(18,24,10,4);
    g.generateTexture('goomba', 32, 32);
    g.destroy();
    
    // Coin 16x16
    const c = this.make.graphics({ add: false });
    c.fillStyle(0xFFD700); c.fillCircle(8,8,7);
    c.fillStyle(0xFFA500); c.fillCircle(8,8,4);
    c.generateTexture('coin', 16, 16);
    c.destroy();
    
    // Cloud
    const cl = this.make.graphics({ add: false });
    cl.fillStyle(0xFFFFFF);
    cl.fillRect(0,8,32,8);
    cl.fillRect(4,0,16,8);
    cl.generateTexture('cloud', 32, 16);
    cl.destroy();
    
    // Flag 32x48
    const f = this.make.graphics({ add: false });
    f.fillStyle(0xFFFFFF); f.fillCircle(14,8,5); // ball top
    f.fillStyle(0x808080); f.fillRect(12,8,4,40); // pole
    f.fillStyle(0x00AA00); f.fillRect(16,12,16,12); // flag
    f.generateTexture('flag', 32, 48);
    f.destroy();
    
    // Add background clouds
    for (let i = 0; i < 20; i++) {
        const x = Phaser.Math.Between(0, WORLD_W);
        const y = Phaser.Math.Between(20, 200);
        const cloud = this.add.image(x, y, 'cloud').setScrollFactor(0.5);
    }
}

function buildLevel() {
    // Ground segments
    const ground = [
        { x: 0, w: 800 },
        { x: 900, w: 600 },
        { x: 1700, w: 400 },
        { x: 2300, w: 600 },
        { x: 3200, w: 400 },
        { x: 3800, w: 500 },
    ];
    for (const seg of ground) {
        for (let i = seg.x; i < seg.x + seg.w; i += 32) {
            platforms.create(i, GROUND_Y + 16, 'brick');
        }
    }
    
    // Floating platforms
    const plats = [
        { x: 400, y: 420, w: 128 },
        { x: 700, y: 320, w: 96 },
        { x: 1100, y: 400, w: 64 },
        { x: 1400, y: 300, w: 96 },
        { x: 1900, y: 420, w: 128 },
        { x: 2200, y: 340, w: 64 },
        { x: 2500, y: 260, w: 96 },
        { x: 2900, y: 400, w: 128 },
        { x: 3400, y: 320, w: 64 },
        { x: 3700, y: 240, w: 96 },
        { x: 4100, y: 380, w: 128 },
    ];
    for (const p of plats) {
        for (let i = p.x; i < p.x + p.w; i += 32) {
            platforms.create(i, p.y, 'brick');
        }
    }
    
    // Coins
    const coinPos = [
        { x: 300, y: 500 }, { x: 450, y: 380 }, { x: 750, y: 280 },
        { x: 1130, y: 360 }, { x: 1430, y: 260 }, { x: 1930, y: 380 },
        { x: 2230, y: 300 }, { x: 2530, y: 220 }, { x: 2930, y: 360 },
        { x: 3430, y: 280 }, { x: 3730, y: 200 }, { x: 4130, y: 340 }
    ];
    for (const c of coinPos) {
        coins.create(c.x, c.y, 'coin').setImmovable(true);
    }
    
    // Enemies
    const enemyPos = [
        { x: 300, y: GROUND_Y + 16 }, { x: 600, y: GROUND_Y + 16 }, { x: 1000, y: GROUND_Y + 16 },
        { x: 1300, y: GROUND_Y + 16 }, { x: 1800, y: GROUND_Y + 16 }, { x: 2400, y: GROUND_Y + 16 },
        { x: 2700, y: GROUND_Y + 16 }, { x: 3300, y: GROUND_Y + 16 }, { x: 3600, y: GROUND_Y + 16 },
        { x: 3900, y: GROUND_Y + 16 }, { x: 4200, y: GROUND_Y + 16 }
    ];
    for (const e of enemyPos) {
        const enemy = enemies.create(e.x, e.y, 'goomba');
        enemy.setData('dir', -1);
        enemy.setVelocityX(-80);
        enemy.body.setSize(28, 28);
    }
}

function collectCoin(player, coin) {
    coin.disableBody(true, true);
    score += 10;
    scoreText.setText('Score: ' + score);
}

function hitEnemy(player, enemy) {
    if (player.body.touching.down) {
        // stomp
        player.setVelocityY(-300);
        enemy.disableBody(true, true);
        score += 100;
        scoreText.setText('Score: ' + score);
        // particle effect? No external assets, maybe just a tween
        // Create a small floating score text
        const txt = this.add.text(enemy.x, enemy.y - 20, '100', { fontSize: '16px', fill: '#fff', stroke: '#000', strokeThickness: 2 });
        this.tweens.add({
            targets: txt,
            y: txt.y - 40,
            alpha: 0,
            duration: 800,
            onComplete: () => txt.destroy()
        });
    } else {
        die.call(this);
    }
}

function die() {
    if (gameOver) return;
    gameOver = true;
    player.setTint(0xff0000);
    player.body.enable = false;
    this.add.text(this.cameras.main.midPoint.x - 80, this.cameras.main.midPoint.y - 30, 'GAME OVER', { fontSize: '40px', fill: '#f00', stroke: '#000', strokeThickness: 4 }).setScrollFactor(0).setDepth(10);
    const rt = this.add.text(this.cameras.main.midPoint.x - 120, this.cameras.main.midPoint.y + 20, 'Press R or click to restart', { fontSize: '18px', fill: '#fff', stroke: '#000', strokeThickness: 3 }).setScrollFactor(0).setDepth(10);
    this.time.delayedCall(400, () => {
        this.input.keyboard.once('keydown-R', () => this.scene.restart());
        this.input.once('pointerdown', () => this.scene.restart());
    });
}

function reachFlag(player, flag) {
    if (win) return;
    win = true;
    player.setVelocity(0, 0);
    this.add.text(this.cameras.main.midPoint.x - 100, this.cameras.main.midPoint.y - 30, 'YOU WIN!', { fontSize: '40px', fill: '#0f0', stroke: '#000', strokeThickness: 4 }).setScrollFactor(0).setDepth(10);
    const rt = this.add.text(this.cameras.main.midPoint.x - 120, this.cameras.main.midPoint.y + 20, 'Press R or click to restart', { fontSize: '18px', fill: '#fff', stroke: '#000', strokeThickness: 3 }).setScrollFactor(0).setDepth(10);
    this.time.delayedCall(400, () => {
        this.input.keyboard.once('keydown-R', () => this.scene.restart());
        this.input.once('pointerdown', () => this.scene.restart());
    });
}
```

I need to make sure `this` references are correct inside callbacks passed to physics. In Phaser 3 scene callbacks, `this` is the scene. So inside `collectCoin`, `hitEnemy`, etc., I can reference `this`. I used `this.add.text` which is fine.

One issue: `game`, `player`, `platforms`, etc. are global variables assigned in create. That's okay for a simple script, but they are referenced in event handlers (like die). Since `die` is a function in the script scope, it references `gameOver` and `player`. It does `player.setTint(0xff0000);`. Since `die.call(this)` is called with scene context, `this` is scene. But `player` is a global variable, so it finds the correct variable. Fine.

Need to ensure the scene functions are defined and assignable. In Phaser 3, using `scene: { preload, create, update }` in config works if functions exist in global scope. So I should define them globally, not as class methods inside a block that hides them. I'll just define them as regular functions in the global scope (within the script tag). No need for a scene class.

Let's double-check: In `update`, variable `gameOver` and `win` are globals.

Make sure `platforms.create` uses correct y. GROUND_Y = 568 is the top. So platform center y = 568 + 16 = 584. Let's define `const GROUND_Y = 568;` and use `GROUND_Y + 16`.

For enemy initial y: `GROUND_Y + 16`.

Player start y: Let's put player at `y: 300` initially. Camera will follow.

Question blocks: I defined a 'question' texture but didn't place them. That's fine, maybe not required.

Pits: gaps in ground will cause player to fall. Gaps in ground segments are implicit.

Need to handle platform collision with static group. `this.physics.add.staticGroup()` creates tiles that are immovable.

In `buildLevel`, I call `platforms.create(i, GROUND_Y + 16, 'brick');`. Wait, `platforms` is a static group, `create` syntax is `this.add.existing? No, staticGroup.create(x, y, texture)` returns a static physics sprite. That works.

Let's also add some question blocks that give coins or points? Not necessary. But to make it more fun, I can replace some bricks with question blocks that contain coins? Or just keep question blocks as decorative. I'll skip to keep code concise.

Pipe graphics? Maybe not needed.

Win: when reaching flag, player should do a little dance? We can animate flag or make player jump.

Let's keep it simple.

Check scrolling: camera startFollow with true for lerp.

Check physics collisions: For enemies on floating platforms, enemy body may be too big. I set `enemy.body.setSize(28, 28);` which is smaller than 32x32. Need to also offset? `setOffset`? Not needed.

Check coins: `coins.create(c.x, c.y, 'coin').setImmovable(true);` In static group? No, coins group is non-static group by default. They need to not be pushed by player. Using `setImmovable(true)` on a dynamic body makes it not move when collided. But we want overlap, not collide. I used `overlap` for coins, so no physics collision. However, to prevent coins from falling due to gravity if not overlapping, I should set `allowGravity = false` on each coin. In Arcade physics, a body in a group without gravity false will fall. So:
`coins.create(...).setImmovable(true).body.allowGravity = false;`
But in Phaser 3, `create` returns a Game Object, `setImmovable` is in physics. Actually `this.physics.add.group` members have physics bodies. So: `const coin = coins.create(c.x, c.y, 'coin'); coin.body.allowGravity = false;` or `coin.body.immovable = true;`. I'll add `.body.allowGravity = false;`.

For enemies, we want them affected by gravity, and collided with platforms.

One more thing: The player should not be affected by gravity? It is.

Sky: `backgroundColor: '#87CEEB'` in config works.

Clouds: `this.add.image(x, y, 'cloud')` will be a regular game object, not static physics. That's fine.

Let's test generateTexture with Graphics in Phaser 3.80. The syntax `this.make.graphics({ add: false })` is correct. `generateTexture(key, width, height)` is a method of Graphics in Phaser 3. But in Phaser 3.60+, it's `generateTexture(key, width, height)` indeed. However, in 3.80, the method signature may require `key` and optional `width`/`height`. Let's confirm from docs: `generateTexture(key, width, height)` is correct. If width/height are not provided, it uses the graphics bounds. But we pass them.

Wait, in Phaser 3.25+, `generateTexture` is on the Graphics instance and returns a RenderTexture? Actually it generates a texture from the graphics object. It does not require width/height args if drawn with bounds? Let's check: In Phaser 3, `graphics.generateTexture(key, width, height)` is available. It creates a Texture from the Graphics object's geometry. So passing width/height is fine.

Make sure to call `generateTexture` after drawing and before destroying.

Font for HUD: Use 'Arial' fallback. `{ fontFamily: 'Arial', fontSize: '24px', fill: '#fff', stroke: '#000', strokeThickness: 3 }`. Just fill is fine.

Potential issues:
- Using global variables `score`, `gameOver`, `win` inside `update` but they are assigned in `create`. Since `create` runs after scene starts, `update` may run before? No, `preload`->`create`->`update`. By the time `update` runs, `create` has run.
- `this` inside `hitEnemy`: `this` is scene. So `this.add.text` is fine.
- Restart mechanic: `this.scene.restart()` works.
- Collider with world bounds false for player: important so player can fall into pits.

Let's refine level segments to make sure gaps are enough to fall through.
Ground segments gaps:
0-800, gap: 800-900 (100px) - fine.
900-1500, gap: 1500-1700 (200px) - fine.
1700-2100, gap: 2100-2300 (200px) - fine.
2300-2900, gap: 2900-3200 (300px) - fine.
3200-3600, gap: 3600-3800 (200px) - fine.
3800-4300, then flag at 4900. Actually last ground 3800-4300. Then flag at WORLD_W-100 = 4900. That's a 600px gap after ground! The player would need to jump from floating platforms. That's a typical final challenge or I should add more ground leading to flag. Better: end ground should be near flag.

Let's adjust: final ground { x: 4100, w: 600 } so covers to 4700. Flag at 4900. That works.

Let's make WORLD_W = 5200. Flag at 5100.

Ground:
0-800, 900-1500, 1700-2100, 2300-2900, 3200-3600, 3800-4300, 4400-5000, 5100-5200 (flag at 5200-100=5100).

Wait, let's simplify: no gap after 4400-5000. Flag at 5100.

So WORLD_W = 5200.

Actually let's define WORLD_W = 5200, but keep platform placements and enemy placements within it.

Let's re-evaluate the segments to avoid huge unruly tables. I'll keep it but ensure no huge untraversable gaps.

Gaps: make them around 100-180px, which is jumpable.

Revised ground:
```javascript
const ground = [
    { x: 0, w: 800 },
    { x: 900, w: 600 },
    { x: 1600, w: 400 },
    { x: 2200, w: 600 },
    { x: 3000, w: 400 },
    { x: 3600, w: 300 },
    { x: 4100, w: 600 },
];
```
Flag at WORLD_W - 100 = 5100.

World W = 5200.

That works.

Now ensure player can reach the flag. The last ground goes from 4100 to 4700. Flag at 5100. Need platforms from 4700 to 5100. I'll add a floating platform or extend ground. Add a floating platform at 4800 y=400 w=96. Then player can jump to flag.

Add that to plats: `{ x: 4750, y: 400, w: 128 }`.

Also adjust some coins and enemies near end.

Now, the camera deadzone. In Phaser 3, `setDeadzone(width, height)` sets the area in the center where camera doesn't move until player leaves. Fine.

Let's also add a simple parallax background with a hill or mountains? Not necessary.

Make sure to handle player death on stomp correctly. When stomp, player.setVelocityY(-300) for bounce.

Let's finalize code.

One concern: `disableBody(true, true)` hides and disables the body. Good.

In `hitEnemy`, we call `die.call(this)` if not stomp. `die` sets player.enable false. But in Phaser 3, `player.body.enable = false` stops physics. However, setting `player.body.enable = false` might cause issues if not exact? Better: `player.disableBody(true, true);` hides and disables. Or `player.body.enable = false`. `player.body.enable` is valid. But since we want to hide the player too? Setting tint red and disabling physics is fine.

Also, ensure `player.body.touching.down` works after landing? Yes, if standing on a platform, `body.touching.down` is true.

Now, in `update`, `if ((cursors.up.isDown || spaceKey.isDown) && onGround)`. I used `player.body.touching.down || player.body.blocked.down`. This should allow jumping when standing on enemy? No, actually after stomp, `player.body.touching.down` might still be true for the enemy? The enemy is destroyed. But if enemy is still touching briefly, onGround might still be true. That's okay.

I should also consider mobile? No, just keyboard.

Let's write the final script.

Need to make sure `this.make.graphics` and `generateTexture` works. `generateTexture` in Phaser 3: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html#generateTexture__anchor. Signature: `generateTexture(key, width, height)` where width/height are optional but if provided, they set the texture size. Yes.

Clouds: `this.add.image(x, y, 'cloud').setScrollFactor(0.5);` This makes them move at half speed (parallax). Good.

I think the code is solid. Let's write it out carefully into the file.

Wait, the prompt says "load each with a plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top it: phaser.min.js."

So in index.html, include `<script src="phaser.min.js"></script>` then the game script inside another `<script>` tag. I can put everything in one script tag or separate. The game code can be directly inside a `<script>` tag without src.

Make sure it's fully self-contained.

Double-check level build function: call `buildLevel.call(this);`. Inside, `platforms`, `enemies`, `coins` are globals. That's fine.

Potential issue: `enemies.getChildren()` might return inactive/disabled enemies. Skip if !active.

Text stroke: in Phaser 3, `stroke` and `strokeThickness` work for Text.

Let's create the file.

The user asked to build a single-page web app in index.html. I wrote it. I should verify the file exists and maybe do a quick sanity read to ensure it looks correct. The write succeeded. No further action needed besides confirming.