Let me analyze the task. The user wants me to build a brick-breaker game using PhaserJS (phaser.min.js is already present in the current directory). The game should have:
- A paddle (arrow keys or mouse)
- A bouncing ball
- A wall of breakable bricks
- A score

Constraints:
- Single-page web app in one self-contained file named index.html
- CSS in <style>, JS in <script>, inline
- No external resources, CDNs, or network requests
- Use ONLY procedurally generated graphics via Phaser Graphics API or generated textures
- No external image or audio assets

Let me first check the phaser.min.js file to understand its version.

Let me check the Phaser version.

It's Phaser 3.80.1. This is a modern version. I'll use the Arcade physics system, Graphics API to draw everything procedurally.

Let me design the game:
1. Game configuration with Arcade physics
2. Procedurally generated textures/graphics:
   - Paddle: drawn via rectangle on graphics
   - Ball: circle
   - Bricks: rectangles in different colors
3. Controls: arrow keys (and mouse)
4. Ball physics: bounce off walls, paddle, bricks
5. Score tracking
6. Game over / win conditions

I'll use `generateTexture` from a Graphics object, or use the `add.graphics()` and create textures from them. Actually the cleanest approach for Phaser 3 is to create a Graphics object, draw shapes, then call `generateTexture()`.

Actually, even simpler: I can use `this.add.rectangle()` for static shapes but those aren't physics bodies by default. For physics, I'll create sprites with generated textures.

Let me plan:

- `const gfx = this.add.graphics();` draw paddle, then `let paddleTexture = gfx.generateTexture('paddle', width, height);` then destroy gfx or reuse.
- Ball: draw circle, generate texture.
- Bricks: I can draw different colored bricks. Either create one texture per color or draw each brick with graphics and generate a texture. Simpler: create a few brick color textures, then assign randomly or by row.

Let me make a robust brick-breaker.

Approach: Use Arcade physics.
- Ball: sprite with physics body, bounce = 1, velocity set initially.
- Paddle: static or dynamic body. I'll make it a sprite with physics, immovable = true, allowGravity = false so it doesn't fall.
- Walls: use physics static bodies (setImmovable).
- Bricks: sprites with physics, body.bounce, sensor? No, bricks should be destroyed on hit (overlap). I'll use overlap callback to destroy bricks and reverse ball velocity.

Actually for brick collision, using physics collider with a process callback works too, but destroying during collision can be tricky. Let me use `overlap` for bricks (cleaner for destruction).

Let me write the structure.

Game states/phases:
- 'play': ball moving, paddle controls
- 'gameover': ball falls below paddle → game over, click to restart
- 'won': all bricks destroyed → victory, click to restart

I'll generate textures in a function.

Let me write the code carefully.

For paddle texture: 
```
const size = 300;
const padG = this.add.graphics();
padG.fillStyle(0xffffff);
padG.fillRoundedRect(0,0,120,20,10);
padG.generateTexture('paddle', 120, 20);
padG.destroy();
```

For ball:
```
const ballG = this.add.graphics();
ballG.fillStyle(0xff4444);
ballG.fillCircle(8,8,8);
ballG.generateTexture('ball', 16, 16);
ballG.destroy();
```

For bricks - multiple colors per row:
```
const colors = [0xff0000, 0xffaa00, 0xffff00, 0x00ff00, 0x00aaff, 0xff00ff];
for (let i=0;i<colors.length;i++){
  const g = this.add.graphics();
  g.fillStyle(colors[i]);
  g.fillRect(0,0,BRICK_W, BRICK_H);
  g.lineStyle(2, 0x000000);
  g.strokeRect(0,0,BRICK_W,BRICK_H);
  g.generateTexture('brick'+i, BRICK_W, BRICK_H);
  g.destroy();
}
```

Then create bricks grid.

Controls: 
- keyboard: cursor keys, paddle moves horizontally.
- mouse: paddle follows mouse x.

Let me handle paddle follow with mouse: pointer.x.

For ball physics: Arcade body bounce set to 1, collideWorldBounds = true. Set velocity manually. On paddle hit, adjust angle based on where ball hits paddle (realistic). I'll just rely on physics bounce but add a slight random/position-based velocity.

Actually with Arcade, paddle is immovable. When ball hits paddle, the bounce on the ball's body will reflect it. To make it more controllable, I can set the ball's velocity on overlap with paddle based on impact position.

Let me set ball.body.setBounce(1). On paddle overlap, compute relativeX, set velocity.x = relativeX * factor, keep magnitude.

Let me write everything.

World bounds: I'll set the world size and enable physics world bounds. Add top/left/right walls as static bodies or use world bounds collision (ball collideWorldBounds). For paddle staying in bounds, I'll clamp or use world bounds + immovable on paddle with collideWall.

Let me also handle "missed" ball: if ball.y > paddle.y + some offset → game over.

Let me make paddle immovable and collide with walls using physics.

Actually let me keep it simple but polished.

Let me also add a subtle effect: when a brick is hit, spawn a few particles? Graphics can do it but it's extra. I'll add a simple tween/scale effect on brick hit maybe. Let me keep core game solid first.

Let me write the HTML.

Let me think about the layout/sizing. Game 800x600.

Brick wall: 8 rows x 12 cols? Let me do 10 cols x 6 rows. Brick size 60x20, with gap. 12*60 = 720 within 800. Good.

Let me make bricks in a grid with spacing.

Let me write it.

For the restart: on gameover/won, show text overlay with "Game Over - Click to Restart" or "You Win!" and set input.on('pointerdown', restart).

Let me write clean code.

I'll structure:
- preload (empty - all procedural)
- create: create textures, set up physics, paddle, ball, bricks, cursors, score text, lives text
- update: paddle controls, ball bounds check

Let me code it.

One consideration: when ball body bounces off the static world bounds, that's fine. But for paddle I'll use overlap with a bounce handler.

Let me think about whether to use collider or overlap for bricks. I'll use overlap so I can destroy bricks in the callback. On overlap, I'll reverse the ball velocity component based on which side. Simpler: just negate velocity.y (since bricks come from top half, mostly horizontal movement). Actually to be robust, I'll determine hit side by checking position.

Let me do a simpler robust approach: on overlap, call a function that flips the sign of velocity.x or velocity.y based on geometry. For arcade it's tricky. Let me just reverse y (bricks are above, ball comes from top or side). Actually ball could hit brick from below too if it bounces up... unlikely in brick breaker but possible. 

A common technique: in the overlap callback, get the ball and brick, and based on which axis of penetration is smaller, flip that velocity. But Phaser overlap doesn't easily give penetration. 

I'll keep simple: reverse velocity.y when hitting brick. Good enough and classic. Many brickbreakers just do this.

Actually, to be more accurate and avoid ball getting stuck, I'll reverse based on relative position center-to-center.

```
function handleBrickHit(ball, brick){
  // determine side
  const dx = ball.x - brick.x;
  const dy = ball.y - brick.y;
  if(Math.abs(dx) > Math.abs(dy)){
    ball.body.velocity.x *= -1;
  } else {
    ball.body.velocity.y *= -1;
  }
  brick.destroy();
  score += 10;
  ...
}
```

That's a decent heuristic. Combined with bounce, it works.

But careful: after reversing velocity in overlap, the physics bounce may also apply. With overlap (not collider), there's no physics response, only my manual reversal. That's clean. Good — use overlap for bricks.

For paddle: use overlap too, with custom bounce for control.

For world bounds: ball.collideWorldBounds = true with bounce 1. That handles top/left/right.

Let me finalize.

Ball velocity: set initial at game start, e.g. velocity.x = 200, velocity.y = -250 (randomize a bit).

Game over when ball.y > game height (missed). Lives: 3.

Let me add lives and reset ball on death.

Let me write the code now. I'll make it a full featured game.

I'll include: 
- Title screen? Keep it minimal: maybe just start playing with a "Click / Press to Start" overlay that hides. Actually let me add a simple title screen for polish.

Let me add a start screen and game states.

Let me make a state machine: 'title', 'play', 'gameover', 'won'.

I'll keep it clean with a variable gameState.

Let me write:

```
let gameState = 'title';
const TITLE = ...;
function startGame(){ ... }
```

Hmm, but with a single scene and update, managing states is fine.

Let me code it all.

Let me make textures with a helper.

For the paddle mouse control, I'll track pointer in update.

Let me write the full file now.

Let me be careful with generating textures: `graphics.generateTexture(key, width, height)`. In Phaser 3.80 this exists.

Let me write.

Also add a "trail" effect on ball? Could use a particle emitter, but that's extra complexity. I'll add a simple glow via the ball texture having a soft circle. Let me make ball texture bigger with gradient. Actually I can draw a filled dark circle with a lighter inner circle. Keep simple: red circle with white highlight.

Let me make the ball texture 24x24 with a circle radius 10 centered at 12,12, plus a small highlight.

Let me just do a clean red ball.

Now writing.

I'll also add sound-free feedback (visual) like scaling the paddle on hit (no, no audio). Just the game.

Let me write the HTML file.

Let me think about paddle control responsiveness and ball speed. Ball speed ~350 px/s.

Let me code it up.

For lives display, draw little circles or text. Text is fine.

Let me write the full thing.

I'll make the ball launch on first click and also serve as restart.

Let me structure create:
1. setBounds
2. create textures
3. create static walls (top, left, right) - or rely on world bounds. World bounds handles ball. For paddle, set paddle body collideWorldBounds = true and body.setImmovable(true)? Actually collideWorldBounds keeps paddle inside. Let me set paddle.body.collideWorldBounds = true, paddle.body.setImmovable(true), allowGravity = false, and set it as static? No, I want to move it with keys/mouse. So dynamic body with allowGravity false, immovable true, collideWorldBounds true.

3. paddle sprite
4. ball sprite (physics), set bounce 1, collideWorldBounds true
5. bricks group
6. cursors
7. score/lives text
8. title/gameover/won overlay text

Let me write update:
- if state != play return
- move paddle toward pointer (mouse) if pointer is down? Let me always follow mouse x, and also cursor keys.

I'll do: if cursors left.isDown, move left; if right.isDown, move right; also mouse: paddle.x = pointer.x (lerp). Combine: base velocity from keys, plus follow mouse. Actually let me prioritize mouse: if mouse moved significantly, set paddle.x to pointer.x. Let me just do mouse follow + keyboard additive.

Simpler clean approach: 
```
const speed = 420;
if (this.cursors.left.isDown) paddle.body.setVelocityX(-speed);
else if (this.cursors.right.isDown) paddle.body.setVelocityX(speed);
else if (mouse following) ...
else paddle.body.setVelocityX(0);
paddle.x = clamp(paddle.x, paddle.width/2, width - paddle.width/2);
```

Hmm I'll use a combination: keyboard sets velocity; mouse directly positions (with smoothing). Let me do keyboard as primary and mouse also works. I'll implement both: 
- if pointer buttons down, lerp paddle toward pointer.x.
- keyboard also sets velocityX.

I'll combine by: compute target velocity from keyboard, then apply mouse position override: set paddle.body.velocity.x based on (pointer.x - paddle.x)*k when pointer is active.

Let me keep it straightforward and robust:

```
update(){
  if(gameState !== 'play') return;
  if (this.cursors.left.isDown){
    paddle.body.setVelocityX(-420);
  } else if (this.cursors.right.isDown){
    paddle.body.setVelocityX(420);
  } else {
    paddle.body.setVelocityX(0);
  }
  // mouse follow
  if (this.input.activePointer.buttons === 1){
    const dx = this.input.activePointer.x - paddle.x;
    if (Math.abs(dx) > 8){
      paddle.body.setVelocityX(Phaser.Math.Clamp(dx*8, -420, 420));
    } else {
      paddle.body.setVelocityX(0);
    }
  }
  // clamp
  // paddle collideWorldBounds handles edges but also need clamp for static...
  // ball update
  if (ball.y > this.cameras.main.height + 50){
     // lost life
     this.loseLife();
  }
}
```

For clamping paddle, since body.collideWorldBounds true, it'll stop at edges. Good. But that can cause physics jitter; fine.

Let me make the ball follow and relaunch.

I'll set `ball.body.setAllowGravity(false)` implicitly (arcade default gravity 0 unless set). Good.

Let me write the full code now. I'll write to index.html.

Let me make the ball launch with a random x direction.

Launch:
```
function resetBall(){
  ball.setPosition(paddle.x, paddle.y - 40);
  const angle = Phaser.Math.Between(-120, -60); // degrees above
  const v = new Phaser.Math.Vector2(1,0).rotate(Phaser.Math.Deg.ToRad(angle)).scale(400);
  ball.body.setVelocity(v.x, v.y);
}
```

Hmm but angle -120 to -60 relative to... let me just pick random left or right and upward. Use:
```
const speed = 400;
const angle = -(Phaser.Math.Between(45, 75)); // between -45 and -75 degrees (upwards)
const dir = Phaser.Math.Between(0,1) ? 1 : -1;
ball.body.setVelocity(dir * speed * Math.cos(angle), speed * Math.sin(angle));
// sin(angle) negative for upward
```
angle in radians. Let me do degrees with rotate.

Let me use:
```
const angleDeg = Phaser.Math.Between(45, 75);
const rad = Phaser.Math.Deg.ToRad(angleDeg);
const dir = Phaser.Math.Between(0,1)===0 ? -1 : 1;
ball.body.setVelocity(dir*speed*Math.cos(rad), -speed*Math.sin(rad));
```

Good.

loseLife:
```
lives--;
updateLivesText();
if(lives <= 0){
  gameState = 'gameover';
  showOverlay('Game Over', 'Click to Restart');
  ball.body.setVelocity(0,0);
} else {
  resetBall();
}
```

brick hit: increment score, update score text. Check win.

Let me write full file.

For overlay, create a text object and set visible/invisible, and the title text. I'll use a single overlay container.

Let me write it.

Let me also add a small particles effect using a tween when brick destroyed (scale pop). And maybe a trail of dots for the ball (too fancy). I'll add a simple ball trail via particles for polish - but particles need a texture; I can generate one. Let me add an emitter with a small circle texture. Actually let me keep it lean but nice. I'll add a subtle star-field background? Could draw random dots via a single rendered texture. Let me add a background texture with random stars for visual polish.

Background: create graphics, draw many tiny white dots, generateTexture 'bg', then a sprite covering the canvas with depth -1.

Let me do that.

Now let me write everything to index.html.

Let me write the CSS to center canvas and make it look good.

Let me write the file.

Wait, I referenced 'brickHard' and 'brickHard0','brickHard1' textures that I never created, and `this.physics.add.existingGroup()` doesn't exist, and `this.bricks` is unused. Let me clean up. Let me reconsider and simplify — the hard brick feature adds complexity and I made mistakes. Let me rewrite more carefully and robustly.

Let me reconsider the whole scene:

1. `this.physics.add.existingGroup()` — that doesn't exist. Should use `this.physics.add.group()`. Let me remove that line.

2. `this.physics.add.existing(this.add.image(...), true)` — `add.existing` second arg is `callback` not `visible`. Actually `add.existing` signature is `add.existing(child, [callback])`. Setting a physics body via `add.existing` won't make it a physics body properly. Better to just create the image then `this.physics.add.existing(this.paddle)`. Let me rewrite.

3. The "paddle" using `add.existing` then `enableBody` is messy. Let me just create images and call `this.physics.add.existing()` with default (dynamic) body, then configure.

4. `brickHard` textures not created, `texture` method `setTexture('brickHard'+(2-brick.hits))` — undefined texture. Remove hard brick entirely to keep it clean and bug-free.

Let me rewrite the create and the brick/paddle/ball setup cleanly.

Also `this.paddle.body.speed` doesn't exist in Arcade. I'll fix the hit logic.

Let me also reconsider `_hitPaddle` — I wrote two conflicting approaches. Let me simplify: when ball overlaps paddle, set velocity based on impact position so it goes upward, and flip. Use the ball's current speed magnitude.

Let me rewrite the file cleanly. I'll be careful.

Let me also double check `fillGradientStyle` exists on Graphics in 3.80 — yes it does. But `createRadialGradient` on graphics doesn't exist (that's canvas context). I removed it. Good. Actually I kept the `fillGradientStyle` for bg2 which is fine but unused-ish. Let me keep bg simple: starfield + solid dark panel. Remove bg2 to avoid issues.

Let me rewrite the entire file properly.

Plan for a clean, working game:

Textures:
- 'bg': starfield
- 'paddle': white capsule with highlight
- 'ball': red circle with shine
- 'brick0'..'brick6': colored rounded rects

Objects:
- paddle: image, physics body dynamic, allowGravity false, immovable true, collideWorldBounds true
- ball: image, physics, bounce 1, collideWorldBounds true, allowGravity false
- walls: top/left/right as static bodies OR use world bounds. I'll add visible top wall and let world bounds handle left/right for the ball via collideWorldBounds. Actually collideWorldBounds makes ball bounce off world bounds, which I set to 0..WIDTH,0..HEIGHT. That covers top/left/right. But the bottom — I want ball to fall below for "miss". Since collideWorldBounds true and world bounds bottom at HEIGHT, the ball would bounce off the bottom too. To allow miss detection, I should NOT set collideWorldBounds, OR set world bounds larger and add a bottom trigger.

Better approach: disable ball collideWorldBounds, add static walls top/left/right manually (with physics), and a bottom trigger zone (overlap) for miss detection. Let me do that — clearer.

So:
- topWall: static body rectangle (visible), collides with ball (we can use overlap/collide). Use collide with paddle? Actually ball bouncing off walls: set ball bounce 1, and collide with static walls. Use `this.physics.add.collider(this.ball, topWall)`. Similarly left/right.
- bottomTrigger: a zone at bottom, overlapping → loseLife.

For bottom, I'll add a hidden rectangle zone at y = HEIGHT (just below paddle area) extending full width, height small. Overlap → loseLife. Set as sensor to avoid blocking? Overlap doesn't need sensor. Just use overlap.

Hmm but I also want ball to not get stuck: with collideWorldBounds off and manual walls, fine.

Let me add visible top wall and left/right walls. Bottom is a sensor trigger (invisible) for death.

Let me implement:
```
const walls = this.physics.add.staticBody... 
```
Static bodies must be added to a physics world. Use `this.add.rectangle(...)` then `this.physics.add.existing(rect, true)` where true = isStatic? Actually `add.existing(child, isStaticBody)`. Yes! `this.physics.add.existing(gameobject, isStatic)`. If true, creates static body. 

So:
```
const top = this.add.rectangle(WIDTH/2, 6, WIDTH, 10, 0x2a2f4f);
this.physics.add.existing(top, true);
const left = this.add.rectangle(4, HEIGHT/2, 8, HEIGHT, 0x2a2f4f);
this.physics.add.existing(left, true);
const right = this.add.rectangle(WIDTH-4, HEIGHT/2, 8, HEIGHT, 0x2a2f4f);
this.physics.add.existing(right, true);
```
Static bodies don't need allowGravity/immovable; they're immovable by default.

Then colliders:
```
this.physics.add.collider(this.ball, top);
this.physics.add.collider(this.ball, left);
this.physics.add.collider(this.ball, right);
```

For the bottom death zone:
```
this.deathZone = this.add.zone(WIDTH/2, HEIGHT-2, WIDTH, 4);
this.physics.add.existing(this.deathZone, true);  // static, sensor
this.deathZone.body.setAllowGravity(false); 
// mark as sensor
this.deathZone.body.checkCollision.none... 
```
Actually easier: use overlap with ball. Overlap doesn't do physics response anyway.
```
this.physics.add.overlap(this.ball, this.deathZone, ()=>this.loseLife());
```
But deathZone as static body with overlap — overlap tests bodies. Static bodies participate in overlap. Good. I won't set sensor needed. Just need the deathZone body. Let me make it a zone (no visible) with body size. Actually zone's body default is 0 size; set with setSize or use a rectangle. Let me use add.zone then set body size:
```
this.deathZone = this.add.zone(WIDTH/2, HEIGHT-1, WIDTH, 4);
this.physics.add.existing(this.deathZone); // dynamic (default)
this.deathZone.body.setAllowGravity(false);
this.deathZone.body.setImmovable(true);
this.deathZone.body.setCheckCollision({up:true, down:false, left:false, right:false});
this.deathZone.body.moves = false;
```
Hmm, simpler: make deathZone a static body rectangle invisible:
```
this.deathZone = this.physics.add.staticBody(0,0,1,1); // then set position? 
```
Actually `this.physics.add.existing(this.add.rectangle(WIDTH/2,HEIGHT-1,WIDTH,4), true)` and set visible false.

`this.add.rectangle(..., 0x000000, 0)` transparent, then existing static. Let me do:
```
this.deathZone = this.add.rectangle(WIDTH/2, HEIGHT-1, WIDTH, 4, 0x000000, 0);
this.physics.add.existing(this.deathZone, true);
this.physics.add.overlap(this.ball, this.deathZone, ()=>this.loseLife());
```
But overlap between ball and static body — should work. Set body as sensor? No, overlap ignores collision response, so no need for sensor. Good.

Wait, but if deathZone is static and ball also collides with top/left/right static walls via collider, the overlap with deathZone works. Good.

Now paddle: dynamic body, immovable, allowGravity false, collideWorldBounds true. The paddle should also bounce ball? With overlap I handle bounce manually. With collide, physics would reflect. Let me use overlap for paddle too so I control ball reflection. But then paddle needs to stop ball penetrating — with overlap, if ball approaches fast it could go through paddle. With manual velocity reversal on overlap, it's okay as long as overlap triggers. But if ball is below paddle moving down, overlap still triggers. Fine.

Actually, mixing collider (walls) and overlap (paddle/bricks) is fine.

But there's a subtlety: with `collideWorldBounds` false for ball now, and only explicit walls as static bodies collided, the ball won't bounce off world edges except my walls. Good.

Let me also add paddle-ball collide? I'll use overlap with `_hitPaddle`.

Hmm, but there's a risk: the ball overlaps paddle and I set velocity, but on next frame if still overlapping the callback fires again repeatedly, causing jitter. To prevent, I can disable the overlap briefly or ensure ball is moving upward after. Since I set velocity.y to negative (upward), the overlap won't retrigger because ball moves away. Good enough. Add a small guard: only reflect if ball moving downward (velocity.y > 0).

```
_hitPaddle(ball,paddle){
  if(ball.body.velocity.y <= 0) return; // don't double-handle
  ...
}
```

Good.

Now brick hit: flip axis. Guard against retrigger: after flipping velocity.y to negative, ball moves up and away from bricks, so no retrigger. But could still be overlapping same brick? Bricks are above paddle, ball moves up away. Fine.

Let me also reduce ball speed over time? Keep constant.

Let me simplify `_hitPaddle`:
```
_hitPaddle(ball,paddle){
  if(ball.body.velocity.y <= 0) return;
  const dx = ball.body.center.x - paddle.body.center.x;
  const norm = Phaser.Math.Clamp(dx / (paddle.width/2), -1, 1);
  const speed = 420;
  const sp = Phaser.Math.Clamp(ball.body.speed, 320, 500);
  ball.body.setVelocity(norm*sp, -sp*0.9);
  if(Math.abs(ball.body.velocity.x) < 90){
    ball.body.velocity.x = 90*(Math.random()<0.5?1:-1);
  }
}
```
`ball.body.speed` is the magnitude of velocity — yes Arcade.Body has `speed` getter. Good.

Actually I want to preserve the speed and just redirect upward-ish. Let me compute current speed magnitude and keep it.

Let me finalize `_hitPaddle`:
```
_hitPaddle(ball,paddle){
  if(ball.body.velocity.y <= 0) return;
  const cur = ball.body.speed || 400;
  const dx = ball.body.center.x - paddle.body.center.x;
  const norm = Phaser.Math.Clamp(dx/(paddle.width/2), -1, 1);
  const vx = norm*cur;
  const vy = -Math.abs(cur)*0.95;
  ball.body.setVelocity(vx, vy);
}
```

Good.

Now `_hitBrick`:
```
_hitBrick(ball, brick){
  if(!brick.body) return;
  const dx = Math.abs(ball.body.center.x - brick.body.center.x);
  const dy = Math.abs(ball.body.center.y - brick.body.center.y);
  if(dx > dy){
    ball.body.setVelocityX(-ball.body.velocity.x);
  } else {
    ball.body.setVelocityY(-ball.body.velocity.y);
  }
  if(ball.body.velocity.y > 0) ball.body.velocity.y = -Math.abs(ball.body.velocity.y);
  brick.destroy();
  this.brickCount--;
  this.score += 10;
  this.scoreText.setText('SCORE: '+this.score);
  this._sparkle(brick.x, brick.y, 0xffffff);
  if(this.brickCount <= 0) this._win();
}
```

Remove hard brick.

Let me rewrite the file fully and cleanly. Let me also remove the unused `this.bricks = this.physics.add.existingGroup()`.

Also `this._makeTextures_full(){}` empty unused — remove.

Let me also double-check texture generation: `graphics.generateTexture(key, width, height)` — valid in Phaser 3.80. It adds to the texture manager. Good.

`fillRoundedRect` and `strokeRoundedRect` exist in CanvasRenderingContext2D and Phaser's CanvasRenderer? Phaser.Graphics has `fillRoundedRect` and `strokeRoundedRect` (added in 3.12+). Yes.

`fillCircle` exists.

`setTexture` on image — exists.

`createRadialGradient` is NOT on Phaser.Graphics (that's canvas context). I must not use it. I used `fillGradientStyle` for bg2. Let me drop bg2 entirely and just use starfield.

Let me rewrite cleanly now.

Let me also reconsider the overlay tween using alpha from 0 to 1 — fine.

Also `this.sub` text color uses `var('--muted')` which in JS string returns the JS, not evaluated. I wrote `color:var('--muted')` in the text style string — that won't work in a plain JS object; Phaser won't interpret CSS vars. Use a hex color like '#9ca5b8'. Fix.

Let me rewrite the whole file.

Good, the APIs exist. Now let me rewrite the index.html cleanly. I'll verify the key APIs are present:
- `generateTexture` ✓
- `fillRoundedRect` ✓
- `strokeRoundedRect` ✓
- `fillCircle` ✓

Let me write the clean final version.

I left a broken `makeWall` function in the create() that references `this._ballPlaceholder`, `this.ball`, `this._pendingBall` which are undefined. That's a bug — it runs at create time. Let me remove that broken `makeWall` function entirely. Let me edit it out.

The block:
```
      // ---------- static side/top walls ----------
      const makeWall = (x,y,wWd,wHt) => {
        const r = this.add.rectangle(x,y,wWd,wHt,0x2a3152);
        this.physics.add.existing(r, true); // static body
        this.physics.add.collider(this._ballPlaceholder? this.ball:this._pendingBall, r);
        return r;
      };
      this.add.rectangle(WIDTH/2,6,WIDTH,10,0x2a3152);
      this.topWall = this.add.rectangle(WIDTH/2,8,WIDTH,12,0x2a3152);
```

Let me remove the makeWall function and the stray first add.rectangle, keep topWall etc. Let me edit.