Brick breaker · hy4

We need build game in index.html self-contained own CSS/JS, local phaser.min.js script. Need use browser tools inspect. Need likely Phaser version? Check files.

Need implement robust playable brick breaker. Need consider Phaser physics arcade. Graphics generated textures via Graphics generateTexture. Canvas perhaps game config 800x600 or responsive scaling. Need visible controls and Launch control. Use DOM launch button perhaps outside canvas; controls text inside HTML. Game generated graphics only. Need browser tool perhaps can click etc. Need inspect initial console/screenshot and representative checks. Need expose game state maybe via window.__gameDebug to inspect. Need support programmatic checks with browser key and click. Need ensure physics behavior reliable.

Let's plan design:

index.html with body dark, header/title, HUD perhaps DOM overlay or Phaser text. Requirement "Show controls" could show HTML instructions and visible Launch control. Need generated graphics all game graphics. We can use Phaser Graphics or generated textures, and Phaser Text for HUD perhaps acceptable. Use Phaser graphics to draw sprites:
- paddle rounded rectangle via graphics.fillRoundedRect, generateTexture('paddle', 120, 18)
- ball circle generateTexture('ball', 18,18)
- bricks perhaps multiple colored generated textures 70x24 or use graphics directly? Need physics collision and removal. Could generate one per row width 68x24 with rounded corners and shade. Use sprites with arcade static physics? Easier staticGroup with sprites created using generated textures. Need perhaps brick bounds. Use this.physics.add.staticGroup(); create(x,y,texture), refreshBody. Could add collider ball, bricks with callback hitBrick. Need score once per collision; disable body on hit and destroy. Arcade overlap could fire multiple times same frame; check active flag.

- paddle: physics.add.sprite, setImmovable(true), setCollideWorldBounds(true), allowGravity false. Ball: arcade sprite with circle body? generated 18x18; setCircle(9), setBounce(1,1), setCollideWorldBounds(true), setVelocity... Need custom bottom world collision disabled so falls out; could set collideWorldBounds true only top/left/right? Phaser body.checkCollision.down = false lets pass through bottom; or world bounds with custom check? Need bottom detection y > H + radius. setCollideWorldBounds(true); body.checkCollision.down=false. Need ensure `body.checkCollision` works. Also perhaps allow ball to pass through bottom and then detect update. Good.

- paddle collision: physics.add.collider(ball,paddle,onPaddleHit). Need ensure directional control. Arcade collider naturally reflects based on overlap; we can set velocity based on hit offset. Need avoid weird horizontal lock and ensure ball always moves upward. Use callback:
 if ball.body.velocity.y > 0 or perhaps after collide, determine relative x and set vx = offset*some, normalize speed and negative vy. Phaser Arcade collision callback occurs after separation? Usually callbacks process before separation? Need set anyway. use `this.physics.velocityFromRotation`? Simpler calculate:
 const offset = clamp((ball.x-paddle.x)/(paddleW/2), -1,1)
 const angle = offset * 60 degrees from upward; speed current speed + slight increment up to max.
 const rad = -Math.PI/2 + offset*(Math.PI/3); ball.setVelocity(Math.cos(rad)*speed, Math.sin(rad)*speed); ensure vy negative.
 But need contact visible changes direction. Good.
 Could prevent repeated collisions/tunneling with cooldown `this.time.now - lastPaddleHit > 80`, and only if ball.body.velocity.y > 0? Note collider callback may be called while ball moving upward after overlap if reset; store last hit. set ball.y = paddle.y - paddle.height/2 - radius - 1 to separate. Then velocity. Need exact shapes maybe body sizes.

- Brick collision: ball with staticGroup via collider callback, perhaps natural deflection plus custom logic. Need determine side of collision: Phaser physics has `body.touching` maybe at callback. Could use overlap displacement to choose bounce. E.g.
 const dx = ball.x - brick.x; dy=ball.y - brick.y; overlapX=(ball.width+brick.width)/2 - abs(dx); overlapY=...; if overlapX < overlapY then vx *= -1, else vy *= -1. But callback is before separation, can manually reflect. However if multiple bricks same frame, repeated inversion can cancel. Use cooldown or per-tick flag. We can set `this.lastBrickBounceFrame` and only reflect once per update frame? Phaser's `this.game.loop.frame`. Need score each brick hit, but perhaps no need multiple at once. Could simply rely on Arcade collision to bounce and callback remove brick. However if brick removed during collision callback maybe separation still done? Common Phaser examples: `this.physics.add.collider(ball, bricks, hitBrick, null, this)` and in hitBrick `brick.disableBody(true,true);` works. It bounces from static body. Need ensure collision changes direction reliably. Could use overlap rather than collider with custom reflection; but static sprite removal and overlap callback can compute. Yet overlapping ball can trigger same neighboring brick multiple times. Need controlled.

Need perhaps use physics.add.collider and let engine bounce, with in callback maybe determine correct bounce ourselves and ensure velocity. Phaser Arcade docs: collider callback invoked before separation? Looking at Arcade `collideSpriteVsGroup` etc: `this.callback` called and then separation maybe always? Need likely works. Typical breakout Phaser tutorials disable body and score, natural bounce works. We'll follow. But could further enforce to make robust:
- callback hitBrick(ball, brick):
 if !brick.active return
 brick.hit = true
 brick.disableBody(true, true)
 score +=10
 update HUD
 if (this.velocityBasedBrickBounce) ... perhaps set direction based on overlap && frame.
 const overlapX = ...; overlapY...
 if (this.bounceFrame === this.game.loop.frame) maybe don't adjust; else invert velocity based on prior velocity and overlap:
  if Math.abs(ball.body.deltaX()) > Math.abs(ball.body.deltaY())? Not straightforward.
 Could use Phaser `ball.body.touching` after collision? In callback probably touching flags set. For Arcade static collision, `separateX/Y` sets `touching.left/right/up/down` on dynamic body. Callback might be called before separation though. Let's inspect Phaser source maybe grep. But not necessary. Natural physics should bounce.

Could use manual collision entirely with `physics.add.overlap(ball, bricks, ...)` and implement reflection with a collision lock per frame. This avoids Arcade separation weirdness and allows reliable score once. Need make ball not pass through bricks at high velocity. Arcade physics discrete; speed ~300 at 60fps = 5 px, brick 25 high, fine. On overlap callback, determine reflection based on ball's previous position / velocity and brick:
 - get bounds perhaps. Need ball.x/y are center.
 - `prevX = ball.x - ball.body.velocity.x * delta/1000` (but step already integrated)
 - `prevY = ...`
 - if previous center was above/below brick's vertical extent, invert vy; else if left/right invert vx; else choose based on overlap.
 - reflect once per frame via `if (this.bounceFrame===frame) return` for direction but still remove brick/score. Actually if overlapping 2 bricks, remove both score, still possible.
 - reposition ball slightly outside brick using velocity maybe. Set ball y etc.
 - Need update body position sync? Setting sprite x/y after physics step should sync body? In Arcade Phaser Sprite's x setter maybe body position updates on next preUpdate? `ball.body.reset(x,y)` could ensure. But could avoid reposition and rely on next frame now reflected; overlapping remains maybe overlap callback again next frame. Could use `ball.body.blocked`? Simpler use collider physics.

Maybe implement custom no Arcade collision for bricks: each update check ball circle-rect overlap against active bricks array with own logic, manually reflect and remove. That might be robust and simpler. Use physics for movement/world bounds only. Need wall bounces: setCollideWorldBounds true with bounce 1; checkCollision.down false. Use arcade for ball-paddle collider or custom. Could implement all collisions manually, with Phaser sprite positions driven by arcade velocity. But still need physics body for movement. Could avoid Arcade entirely and integrate positions ourselves with delta, making full control. Then "using provided Phaser" still fine with sprites/manual update. Generated textures rendered via Phaser. But likely expected Phaser physics; not mandatory. However robust play needs no weirdness. Could use Phaser's `physics.add.collider` for paddle and bricks perhaps.

Let's evaluate browser tooling behavior. We can issue browser actions and inspect. Need likely headless browser with screenshot output. Need perhaps expose state via `window.__breakout` with getters for ball, paddle, bricks, score, etc., and methods to set special test states. Could test interactions deterministically by using debug API from browser tool? Browser tool supports `inspect` maybe DOM/console, no direct JS eval? Need see tool. "Run index.html, inspect DOM/console, interact, and see screenshots or motion frames." `inspect` likely can evaluate? Parameters only action,x,y,toX,toY,text,delta; maybe `type` sends text into focused input. No eval field. We can use `browser` actions reload/inspect/screenshot/motion/click/drag/key/type/scroll. `inspect` perhaps returns DOM summary and console. Could add visible debug text in DOM from game state, accessible via inspect, and use browser keys/clicks/mouse to play. Need perhaps use hidden `<pre id="state">` updating JSON for verification. Then inspect output may include text. Could make debug panel visible moderately (score/lives/status and ball telemetry) to aid checks. Need "Show controls", okay. We can include a small "Debug / live state" panel below game? But perhaps aesthetic. Could show `Ball: docked | (x,y) | vx,vy`, brick count, score, lives. That would let inspect parse. Need ensure browser inspect returns DOM text content. Likely. Could also set document.title dynamically to state for inspect. Could use console logs with event IDs; inspect likely captures console. We can emit console.info on launch, paddle hit, brick hit, wall hit perhaps. Then inspect may show console. We can also have a visible event log in HTML (small). We'll likely rely on screenshot and DOM state.

Need design accessible initial state and interactions. Use keyboard left/right and mouse. Space launch. Visible Launch button HTML. Restart button visible. Need mouse control: pointermove over canvas sets paddle x to pointer world coordinate; clamp. Keyboard controls override while pressed. Need prevent page scroll on Space/arrows maybe event.preventDefault.

Need game scaling. Browser viewport 1200x800. Canvas 800x600 perhaps. Center layout with header and controls. If full page 800 tall, canvas 600 plus header etc maybe fits. Could use Phaser.Scale.FIT with parent game-container, width 800 height 600, autoCenter. Need DOM button overlay? Better have all game UI in Phaser itself or HTML. Canvas container maybe 800x600. Create HTML top bar with controls and buttons surrounding. Need actual game display generated graphics via Phaser. Text can be Phaser text. Use `<div id="game-shell">` with top HUD panel, canvas parent, bottom controls panel. Total height maybe 720. With 1200x800 viewport fine. Add a fixed game dimension of 800x600; scale maybe CSS max width. To ensure pointer mapping correct, scale manager FIT handles pointer worldX perhaps. Use `pointer.worldX` with camera; or `this.input.x`? In Phaser Scale FIT, pointer.worldX should account. Could use `this.scale.transformX(pointer.x)`? In scene `pointer.worldX` works. Simpler pointermove: `const worldX = pointer.worldX ?? pointer.x;`. Need account camera no scroll. Good.

Potential issue mouse pointer from browser tool uses absolute viewport coordinates; canvas offset maybe around 200, etc. Need compute based on screenshot.

Could make canvas exactly 800x600 unscaled at center x=200..1000, y maybe 110..710. Browser tool coordinates 1200x800. Fine.

Need title and HUD. Could do within Phaser scene: game canvas background dark navy; draw playfield border via Phaser Graphics; top HUD text. Use `this.add.text` (graphics not loaded assets). Requirement "generate all graphics using Phaser Graphics or generated textures. Do not load image or audio assets." Text isn't a loaded asset. Fine. Could use HTML controls text outside too.

Maybe all dynamic HUD inside Phaser with graphical shapes.

Let's think through game logic thoroughly.

Game config:
```
const W=800,H=600;
const config = {
 type: Phaser.AUTO,
 width: W,height:H,
 parent:'game',
 backgroundColor:'#0b1024',
 physics:{default:'arcade', arcade:{debug:false, fps?}},
 scale:{mode:Phaser.Scale.FIT, autoCenter:Phaser.Scale.CENTER_BOTH, width:W,height:H},
 scene:{preload,create,update}
}
const game = new Phaser.Game(config);
```
If parent fixed dimensions and FIT, need CSS. Could set mode NONE and width fixed. Better FIT with parent width 800 height600. Browser screenshot layout center.

Scene create:
- Generate textures:
  - make `graphics = this.make.graphics({x:0,y:0,add:false})` and use fillStyle etc.; `generateTexture`.
  - Paddle 120x18: glow maybe multiple rounded rects. Since generated texture needs exact. Draw shadow maybe not necessary. `fillRoundedRect(0,0,120,18,8)`, highlight.
  - Ball 18x18: outer glow maybe transparent border; actually use 20x20 with circle at 10,10 radius9. Need body setCircle(9,1,1) if 20.
  - Brick 68x24 per color: base rounded rectangle 0,0,68,24; lighter top stripe.
  - maybe star/background dots generated? Use graphics draw static decorations maybe generated texture `bg` with dark gradient impossible with Graphics gradient? could draw grid lines. Use `this.add.graphics()` to draw border and subtle stars. Graphics generated in Phaser.
- Create world bounds? `physics.world.setBounds(PLAY_LEFT, PLAY_TOP, PLAY_WIDTH, PLAY_HEIGHT?)`. Need bottom open. If set world bounds bottom to H, ball with checkCollision.down=false falls. Could set world bounds(0,0,W,H). top HUD from 0..60; ball should bounce at top of playfield perhaps y=50 not 0. Requirement playfield walls. Could use invisible static walls:
  - left wall x~20, right x~780, top y~70. Could use physical static rectangles with generated texture? Use `this.physics.add.staticImage` with generated pixel texture? Need graphics generated. Could create thin rectangles via `this.add.rectangle`? "Generate all graphics using Phaser Graphics or generated textures" `add.rectangle` is a Shape GameObject perhaps okay but generated graphics request might imply only Phaser Graphics/text. Better use Graphics to draw walls as visuals, and set physics.world bounds to e.g. `setBounds(16,64,768,600?)`. But `setBounds` with y=64 and bottom=height+?` Need check Arcade world bounds signature x,y,width,height, checkCollision? Set x=18,y=64,width=764,height=700; then left/right/top align; bottom far below canvas to allow detection? Actually down collision at y=764, outside canvas; ball falls to y>620 and we reset before reaching. But `setCollideWorldBounds(true)` and checkCollision.down=false maybe world bottom irrelevant. Simpler set world bounds(18,64,764,700) and `ball.body.checkCollision.down=false`, detects y>H+14. Then left/right/top correct. Need render playfield boundaries with graphics lineStyle etc. But world bounds left at 18, right 782, top 64. Paddle at y=552. We can keep paddle inside these bounds with clamp `PLAY_LEFT+paddle.width/2` etc. Paddle body `setCollideWorldBounds(true)` would collide with bottom at y=764 but irrelevant; can just clamp manually every update. Use arcade body with `setImmovable(true)`, maybe `body.allowGravity=false`. Need prevent paddle from getting pushed by ball. `setImmovable(true)` plus `body.moves=false`? If body.moves=false, still can set x manually and collision works? Arcade static-like. Could use `this.physics.add.staticImage` for paddle and refresh body each move. But moving static body with `refreshBody` each frame can be okay; collision response perhaps. Better dynamic immovable with `setImmovable(true)`, `body.allowGravity=false`, `body.setAllowGravity(false)` and direct x. Ball collision with immovable dynamic body reflects if ball has bounce? Arcade separation might move paddle despite immovable? setPushable(false) perhaps. Use `paddle.setImmovable(true).setPushable(false)`. In Phaser 3.80, `setPushable` exists.

Need ball world bounds collision with left,right,top. `setBounce(1)`, `setCollideWorldBounds(true)`, `body.checkCollision.down=false`. Gravity zero default.

Need launch:
- `state = 'ready'|'playing'|'win'|'gameover'`.
- lives=3, score=0.
- ball docked to paddle at `paddle.x, paddle.y - 24`; ball.body.reset(...) maybe set velocity 0, `ball.setVelocity(0,0)`, `ball.body.enable = true` etc. If body disabled during ready? Keep enabled but immovable? Could set ball.body.enable=false while docked to avoid paddle collider. But when launch, enable. Need ensure collision callback only when playing. Simpler `ball.setVelocity(0)` and ball sits above paddle; collider not overlapping. On update in ready, keep position synced. `ball.body.reset(x,y)` each frame maybe resets velocity too. `ball.setPosition`. Since body follows sprite before physics? Could use `ball.body.reset(x,y)` to sync. Need position ordering: paddle x updated then ball.body.reset(x, y). Fine.
- Launch from button or Space. `launchBall()` if state='ready'; set state='playing'; ball.setVelocity(choose random slight x, -350); perhaps consistent deterministic initial vx=180, vy=-320; speed sqrt ~367. Could choose random side, but verification easier deterministic perhaps slight angle. Use `vx = Phaser.Math.Between(-160,160) || 140`; `vy=-340`; maybe start at x center and need hit bricks. For deterministic test, use vx=Phaser.Math.Between(-120,120) or 120. Could use launch angle based on paddle position? Fine. We can set `ball.setVelocity(160,-330)`, ensuring opening bounces. Need no horizontal zero. Maybe alternate directions by launch count? Keep fixed 170.
- Visible Launch control: HTML button `#launchBtn`, disabled when not ready. Space key handler global and Phaser key. Add keydown-SPACE listener on document to avoid focus issues; if focus button and press Space, browser click could also launch; no harm if guard. Need prevent default. Phaser keyboard maybe also. Use document `keydown`. Also a visible in-canvas "SPACE / LAUNCH" prompt near center when ready, Phaser text fade/pulse. Button text updates. Could use text in canvas that says "Press SPACE or click LAUNCH". Need show controls at top or HTML.
- Restart restores all bricks, score, lives, state ready. Need visible restart button always. Need perhaps clear bricks and recreate. `bricks.clear(true,true)` then build. StaticGroup clear/destroy; create again. Need ensure `brickCount`. Simple `buildBricks()`.
- Win state when brickCount==0: state='win'; freeze ball via setVelocity(0,0); show overlay "YOU WIN!" and subtext, update buttons. Need perhaps if last brick hit and ball falls same time; state guard.
- Lose life:
  - in update if ball.y - radius > H (or y>H+20): `loseLife()`.
  - lives--; if <=0 state='gameover'; ball velocity 0; maybe ball visible false; show overlay. else reset to ready.
  - Need avoid multiple calls in same frame; set state first.
  - HUD update.
- Game Over: restart available.
- clear all bricks shows win. Maybe still need ability to restart.

- Brick layout: rows=6, cols=10 maybe brick width 68 gap 6 total 10*68+9*6=734, play width 764; x from 18+15=33 plus width/2=67; right edge 33+734=767, world right=782. fine. Or 9 cols width 72? Need attractive.
Use `cols=10`, `rows=6`, `brickW=68`, `brickH=24`, `gapX=7`, `gapY=9`, `startX = (W-(10*68+9*7))/2 = (800-743)/2=28.5`, first center 62.5, last center 737.5? Actually total 743, rightmost right edge 771.5, within world right 782. top y=120. rows through 120+5*33=285. Fine.
Colors per row: #ff5d73, #ff9f43, #ffd166, #4ade80, #38bdf8, #a78bfa. Generate texture per row. Need perhaps visual glow with lighter stripe.
- ball at paddle y=546? Let's set play top=64, bottom=H=600. Paddle `y=552` with height 18, center. Ball radius=9, docked y=552-9-9-4=530. Ball drops below H+20. Bricks top=110. Good.
- HUD in y=14..50: score, lives, bricks; all Phaser text with fontFamily monospace. Also HTML status maybe.
- playfield border: Graphics line vertical at x=18/right=782, top=64, maybe bottom horizontal line at y=590? But ball should fall through bottom; drawing a bottom line could imply wall but requirement says fall below paddle costs life, so leave bottom open with dashed "drop zone" line. Could draw glowing line at y=590 with gaps? Maybe not. Use subtle border around playfield including bottom but explicit opening? Better draw only side and top walls. Add small markers at bottom. Ball can pass. `graphics.lineStyle(3,...); beginPath(); moveTo(left, top); lineTo(left,H); ...; strokePath();` plus top line. That's visual walls. World bounds bottom beyond canvas. Good.
- Background: graphics grid and stars. Use deterministic random via Phaser.Math.RND maybe. Could draw lines. But not necessary. Need generated all graphics. Fine.

Collision details:

Option A Arcade collider with static bricks. Let's build:
```
this.bricks = this.physics.add.staticGroup();
...
const brick = this.bricks.create(x,y,`brick${row}`);
brick.setDepth(2);
brick.refreshBody();
brick.setData('points', (rows-row)*10?)
brick.body.checkCollision...
```
StaticGroup `create` returns sprite with static body? yes. `refreshBody()` necessary if scaling? no but okay.

```
this.physics.add.collider(this.ball,this.bricks,(ball,brick)=>this.hitBrick(ball,brick),null,this);
this.physics.add.collider(this.ball,this.paddle,(ball,paddle)=>this.hitPaddle(...),null,this);
```
Need body circle:
```
ball.body.setCircle(9,1,1); // texture 20x20
```
Ball texture maybe 20x20 with glow extending to 20; setCircle(9,1,1). body diameter18; offset1. Good. Paddle texture 124x18; body setSize(120,16).setOffset(2,1) perhaps. Brick texture 72x26 with visible rounded rect 68x24 at x2,y2? Generate 72x28? Physics body by default 72x28, could extend gaps. Better texture exactly 68x24, body same. Fine. Need rounded corners but collision rectangular corners, okay.
- Collision callback order: ball, brick? Collider's callback signature `(object1, object2)`, with ball first. staticGroup sprite second.
- on brick hit:
```
if (this.mode !== 'playing' || !brick.active || brick.getData('hit')) return;
brick.setData('hit',true);
brick.disableBody(true,true);
this.bricksLeft--;
this.score += 10;
this.updateHud();
this.emit(`BRICK_HIT...`);
if (this.bricksLeft<=0) this.win();
else this.ensureBrickBounce(ball,brick); // careful brick destroyed but x/y still accessible? disableBody(true,true) sets active false and visible false but object still exists due to destroy? Actually `disableBody(disableGameObject=true, hideGameObject=false)`? Signature disableBody(disableGameObject, hideGameObject). Passing true,true: disables body and deactivates/hides GameObject, but does not destroy; x/y available. Group children remain. Could set flag. `brick.disableBody(true,true)` common. Good.
```
But `brick.active` false after; can use data flag. Need score once.
- Need ensure bounce direction. Natural Arcade collider should bounce; but callback may happen before separation. To strengthen, use custom `reflectFromBrick(ball,brick)` that adjusts velocity based on previous position. But if Phaser also separates and reverses velocity, our reversal could conflict. Could avoid by using `physics.add.overlap` instead of collider, so no built-in separation. Let's explore custom overlap approach more.

Use `this.physics.add.overlap(this.ball,this.bricks,this.hitBrick,null,this);`
`hitBrick` computes reflection solely when `this.lastBounceFrame !== this.game.loop.frame`.
- Need remove all overlapped bricks same frame and score each. For first, reflect based on overlap; set `lastBounceFrame=frame`; for later, maybe also remove/score but no velocity changes. Need set ball just outside hit brick to avoid repeated overlap; but after removal, body disabled so overlap with that brick gone; neighboring brick might overlap still, will remove too. Could be okay. Need prevent overlap callback with brick body disabled. Fine.
- Reflection algorithm:
```
const bx = brick.body.center.x; // or brick.x
const by = brick.body.center.y;
const dx = ball.x - bx;
const dy = ball.y - by;
const halfW = (brick.width + ball.body.width)/2;
const halfH = (brick.height + ball.body.height)/2;
const overlapX = halfW - Math.abs(dx);
const overlapY = halfH - Math.abs(dy);
let vx = ball.body.velocity.x, vy=ball.body.velocity.y;
if (overlapX < overlapY) { // hit left/right side
   vx = Math.abs(vx) * Math.sign(dx || -vx);
   // nudge ball x outward by overlapX + 1
   ball.x += Math.sign(dx || -vx) * (overlapX+1);
} else { // top/bottom
   vy = Math.abs(vy) * Math.sign(dy || -vy);
   ball.y += Math.sign(dy || -vy) * (overlapY+1);
}
ball.setVelocity(vx,vy);
```
Need update body to new position. `ball.body.reset(ball.x, ball.y); ball.setVelocity(vx,vy)` or `ball.body.position.x = ...`; `reset` also zeros velocity; then setVelocity. Need account body offset and center. `body.reset(x,y)` positions body based on center? It sets sprite position? In Arcade Body.reset(x,y) sets `this.position.x = x - offset.x ...` perhaps expects top-left? Let's check Phaser 3.80 source. Could avoid reposition; velocity reflection next frame should move out, but if deeply overlapped with adjacent bricks, next frame overlaps; removed ones no longer count. Could still get stuck on neighbors. Nudge helps.

Maybe use `ball.body.updateFromGameObject()` after setting x/y; this syncs body position from transform, preserving velocity? Need check method exists. In Arcade Body: `updateFromGameObject()` resets position based on gameObject and previous position. Could call. Or `ball.setPosition(...)`, then `ball.body.updateFromGameObject()`. Let's grep minified? Search source maybe no unminified. Could use `ball.body.reset(ball.x,ball.y);` then set velocity. Need know reset's coordinate semantics. Typical Phaser usage: `player.body.reset(100, 300)` sets player center to x,y. Yes likely. Good.

However overlap callback detection happens during Arcade update after bodies moved. If we call body.reset during collision processing, could interfere but likely fine. Could instead use collider and custom reflection after separation. Need avoid double bounce. Let's search common examples. Typical:
```
this.physics.add.collider(ball, bricks, function (ball, brick) {
  brick.disableBody(true, true);
  if (bricks.countActive() === 0) ...
}, null, this);
```
and ball has bounce 1; physics handles. This is reliable. We can trust it. To make direction more intentional and observable, perhaps in callback don't set velocity, but record body velocity before/after? Could use a `postupdate` event to see. Yet occasional edge hits may fail? Arcade static collision should choose separation axis based on overlap and velocity. Good.

Potential issue collider with static group when brick disabled inside callback: separation might still occur based on body disabled? In typical examples works. We'll use that.

Could also simplify paddle custom callback:
```
this.physics.add.collider(ball,paddle,this.paddleHit,null,this);
```
When callback fires, likely before separation. We set ball velocity and position; collider then separation maybe also modifies velocity? Let's inspect. Common Phaser breakout examples set velocity in callback:
```
hitPaddle(ball,paddle) {
 let diff=0;
 if (ball.x < paddle.x) { diff = paddle.x-ball.x; ball.setVelocityX(-10*diff);}
 ...
}
```
Only setX; vertical bounce automatic. So if we set vy negative, should be okay. Could avoid reposition. Need cooldown. We'll set velocity based on offset; then `ball.body.velocity.y = -Math.abs(...)`; collider separation might bounce vy based on previous velocity and could invert again? Let's understand Arcade separation order. Looking at Phaser Arcade World `collideObjects` perhaps:
```
this.collideSpriteVsSprite(sprite1,sprite2,collideCallback,...)
```
Inside:
```
if (this.separate(body1,body2)) {
  if (collideCallback) collideCallback.call(...)
  if (processCallback) ... ??? 
}
```
Actually likely separation first then callback. If separation reverses velocity (bounce) then our custom set after callback is final. Good. If callback before separation, Arcade bounce then might invert our negative vy to positive? Need check. In Phaser Arcade, `separateX`/`Y` uses `body1.velocity` and bounce to compute new velocities. If callback is after separation, fine. Let's find through minified perhaps. Use grep for "collideCallback" in minified? Could search string maybe.

No python perhaps node available.

Separation happens then callback. Great. So physics separation and bounce first, callback after. We can set final velocity in callback. Good. Need process callback param confusion. `separate(u,l,s,n,r)` where s=processCallback, n=callbackContext, r=overlapOnly. Then callback after. Great.

Need inspect bounce behavior perhaps Phaser World `separate` computes based on body1 dynamic and body2 static. Fine.

Need wall bounce events perhaps observe ball velocity changes via live state DOM. Need show "opening bounces" by inspecting after launch over time. We can log events. Need perhaps detect wall hits by comparing velocity signs each frame:
- `this.lastVx`, in update if sign changed and state playing -> log `WALL_BOUNCE x ...`, event.
- top wall bounce too. But brick bounces also change y sign. Could capture body.blocked? `ball.body.blocked.left/right/up` after world bounds collision in Arcade update. In scene update, check:
```
if (ball.body.blocked.left || ball.body.blocked.right) log wall event...
if (ball.body.blocked.up) log top event...
```
Need avoid repetitive logs every frame; track `wallContact` bool.
- Paddle hit logs.
- Brick hit logs.
Could add an event log panel in HTML with last 5 events, and hidden JSON state for inspect. This is good verification. Could include a small panel below canvas titled "Live event log" perhaps not too much style. Need fit viewport. Maybe use overlay inside canvas with Phaser text? HTML panel to right of canvas? 1200 wide, canvas 800, can put 250px side panel with controls/event log. Could make layout `display:flex`: game canvas 800x600 plus side panel 260x600. Total 1080 fits 1200. Header maybe 70 tall, total 670. Good. Side panel with:
  - Score/lives/Bricks (also Phaser HUD)
  - Controls list:
    ← → / A D: move
    Mouse: move
    Space: launch
  - Launch button
  - Restart button
  - Live state `<pre id=state>` JSON-ish
  - Event log `<div>`.
This makes visible controls and DOM inspect-friendly. Phaser canvas can remain exact 800x600.

Could design body background dark with subtle CSS gradient (CSS doesn't count external assets). No external fonts. Use system monospace. Game background generated in Phaser Graphics.

Need maybe use button "LAUNCH BALL" with disabled state and styles. Need accessible. Need `onclick` functions set after game loaded? We can create scene object and assign `window.scene`. Easier create global functions referencing a `sceneRef` variable set in create. Buttons:
```
let gameScene=null;
document.getElementById('launchBtn').addEventListener('click',()=>gameScene?.launch())
...
```
`create(){ gameScene=this; ... this.syncUi(); }`
Need restart perhaps works even if game not created yet; guard.
- Space keydown global:
```
window.addEventListener('keydown', e => {
 if (['Space','ArrowLeft','ArrowRight'].includes(e.code)) e.preventDefault();
 if (e.code==='Space') gameScene?.launch();
 if (e.code==='KeyR') gameScene?.restart();
})
```
Need keyboard Left/Right handled in scene via `this.input.keyboard.addKeys('LEFT,RIGHT,A,D')`. Phaser keyboard captures arrow keys maybe prevent default by default. We can also global keydown track keys with simple Set to avoid Phaser keyboard focus differences. But requirement move with Left/Right or mouse. Could use global `keys` object and scene update reads. That ensures browser tool key events work even if canvas not focused. Need ensure keydown events target document; browser tool `key` likely dispatches globally. We can document.addEventListener. Avoid Phaser's keyboard addKeys entirely. Use `window.__keys` Set.
```
const held = new Set();
window.addEventListener('keydown', e=> { held.add(e.code); ... });
window.addEventListener('keyup', e=> held.delete(e.code));
window.addEventListener('blur', ()=>held.clear());
```
Update:
```
const speed=520;
let dir = (held.has('ArrowRight')||held.has('KeyD')?1:0) - ...
if (dir) { paddle.x = clamp(paddle.x+dir*speed*delta/1000,...); pointerControl=false; }
else if (this.pointerActive) { paddle.x=clamp(this.pointerX,...); }
```
Mouse move:
```
this.input.on('pointermove', pointer => {
 if (pointer.wasTouch? maybe)
 const x = pointer.worldX ?? pointer.x;
 this.pointerX=x;
});
```
Need ignore keyboard overriding only while key held; after key release, paddle could snap back to last pointer position. That's okay but perhaps surprising. Better on pointermove set target; keyboard movement updates target too:
```
this.targetX = clamp(this.paddle.x + dir*speed*dt,...)
```
Then always paddle.x = this.targetX, perhaps slight smoothing? Need keep inside. Mouse sets target. This avoids snap. `paddle.x` directly set to target each frame. Need sync physics body. In Arcade dynamic body, setting `paddle.x` each frame before physics step should body follow via preUpdate? Usually yes. Could call `paddle.body.updateFromGameObject()` to ensure collision uses exact position if update order. Scene update likely after physics step? Phaser order: preUpdate -> physics world update -> scene update -> render. Actually Arcade world update is on scene update event maybe before Scene.update? Need check. If we set x in Scene.update, collision during next physics step uses body position maybe updated via preUpdate. Dynamic body `preUpdate` syncs from GameObject if `moves` true. If setImmovable true, body.moves maybe still true. Need call `paddle.body.updateFromGameObject()` after setting position to be safe. Or use `paddle.body.reset(x,y)` but that also zeros velocity (fine). Need ensure immovable body doesn't get stuck. Let's use `paddle.setX(this.targetX); paddle.body.updateFromGameObject();` if method exists. Need confirm Phaser 3.80 Arcade Body has `updateFromGameObject`. Search minified.

Good.

Need update state snapshot DOM perhaps every ~100ms to avoid too many DOM writes:
```
function publishState(s){
 const state = {
  mode:s.mode, score:s.score,lives:s.lives,bricks:s.bricksLeft,
  ball:{x:Math.round(...),y...,vx...,vy...,docked:...},
  paddle:{x:...,left:...,right:...},
  bounds:{left:PLAY_LEFT,right:PLAY_RIGHT},
  inside:...
 };
 window.__breakoutState=state;
 document.getElementById('state').textContent = JSON.stringify(state,null,2);
 document.title = `Breakout | ${mode} score ...`;
}
```
`window.__breakout = {snapshot:()=>window.__breakoutState, api: ... }` maybe for debugging. Could also expose `scene: ()=>gameScene`. Need browser inspect perhaps can read window properties? likely not. But DOM pre works. Add `data-*` attributes on body too. Could set body.dataset.mode etc. Fine.
- Event log:
```
function logEvent(text){
 const now = new Date().toLocaleTimeString...
 events.unshift(`${...} ${text}`)
 ...
 console.log(`[BREAKOUT] ${text}`);
}
```
Need avoid console spam from state. Events only.
Potential console errors from Phaser? Need check.

Need visual overlay:
- `this.overlay = this.add.container(W/2,H/2).setDepth(10).setVisible(false)` perhaps create graphics panel and texts. Could use `this.add.rectangle` shapes (not generated textures) but requirement says all graphics generated using Phaser Graphics or generated textures. `add.rectangle` is a Phaser Shape, okay likely. But safer use generated texture for panel or a Graphics object. Use Graphics:
```
const panel = this.add.graphics(); panel.fillStyle(...); panel.fillRoundedRect(-220,-85,440,170,18)
const title=this.add.text(0,-40,...).setOrigin(.5)
const sub=...
container.add([...])
```
However Graphics coordinates relative to container? `fillRoundedRect(-220,-85...)` works (graphics local coordinates). Good.
- Ready prompt maybe a container with text at y=420; show only ready. Could pulse alpha with sine.
- Game over/win panel state.
- HUD text and live prompt.
- Perhaps score increment floating text? optional. Could add small `+10` tween at brick position using Phaser Text. Nice, generated.
- Brick hit particles? use generated tiny circle texture and particle emitter? Phaser 3.80 API maybe tricky. Avoid.
- Screen shake small on brick hit could be nice but may interfere verify; skip.
- Paddle glow and ball trail: Could add trail using Graphics circles with alpha from history, but update each frame maybe. Not necessary. Could create `trailGraphics` and clear/draw circles from last positions. All generated via Graphics. Nice visual but could hurt. Keep simple.

Need ensure no network requests. Phaser itself might show WebGL? no assets loaded. No audio. Use Phaser.AUTO could attempt WebGL only local; no network. Fine.

Need perhaps avoid browser tool inspecting console warning "Phaser v3.80.1" normal.

Need implement Physics world bounds:
```
this.physics.world.setBounds(PLAY_LEFT, PLAY_TOP, PLAY_RIGHT-PLAY_LEFT, H+100-PLAY_TOP);
this.physics.world.setBoundsCollision(true,true,true,false)? 
```
There is `setBoundsCollision(left,right,up,down)` on world perhaps. Could use. Search.

World's `checkCollision` applies globally to all bodies? likely. Use:
```
this.physics.world.setBounds(...);
this.physics.world.setBoundsCollision(true,true,true,false);
```
Need maybe paddle also uses world bounds but down false; okay. Ball body checkCollision perhaps needs down false too:
```
ball.body.checkCollision.down = false;
```
Could set both.
- Physics world bounds left=20,right=780,top=64,height maybe 700 (bottom 764). Need ball collideWorldBounds sees bottom=764 but down disabled. Detect falling at y>H+16=616, before bottom. Good.
- Paddle at y=552 with body 18 high: within bottom, fine.
- Need mouse coordinate mapping if canvas scaled: pointer.worldX should be adjusted. But with Scale.FIT and parent 800x600, if viewport smaller than canvas, scale maybe 1; browser 1200x800 fine. We can set CSS canvas width 800 height600 and `scale.mode=NONE` perhaps easier. Use `scale: {mode: Phaser.Scale.NONE, width:W,height:H}`. Parent exact. Browser 1200x800 enough. But if runner viewport differs, maybe not. FIT is robust. Need pointer worldX works. Add CSS `#game {width:800px;height:600px;}`. Scale.FIT with parent maybe fit to 800x600. Fine.

Need perhaps mouse pointer only moves paddle when pointer is over canvas and game state not over? Could move anytime; allow even game over. Requirement just move paddle with mouse. Keep target clamp. `this.input.on('pointermove', ...)`; also `pointerdown` should set target. Maybe launch on click? Could launch on canvas click perhaps nice but not needed. Avoid accidental launch from browser click. But requirement visible Launch control, so use button. Could also click canvas to launch when ready perhaps. Add if state ready and pointerdown -> launch? Might cause verify clicks on canvas unexpectedly launching, but that's okay? Better not; only Launch control and Space. Could set pointer target on pointerdown.
- Need browser tool `drag` to move mouse perhaps pointermove events. We can use `drag` from x to y. Or `click` maybe pointerdown only. Could use browser `motion` frames after click. Need maybe use `drag` to set mouse. We'll inspect.

Need keyboard handling with browser tool key. Tool `key` likely sends key press with text maybe `ArrowRight`? We'll test. Need maybe use `text` parameter. Could use global event listeners and also A/D. If browser key tool wants string e.g. "ArrowRight". Need infer from tool docs? We can try later.

Need make game deterministic enough to hit brick quickly. With initial ball at center x=400,y~530, velocity vx=170, vy=-330. Bricks occupy y=110..~300. Time to brick ~220/330=0.67s; x moves ~114 to x=514; will hit brick row nearest bottom at y~285. There are bricks every 75 px, so x=514 likely hit one. First hit after ~0.67s. Need maybe paddle stays center. Good.
- Opening bounces: maybe ball hits right wall before brick? vx=170, from 400 to 782 =382 /170=2.25s, brick first. Top wall not before bricks. fine.
- Need "contact changes ball direction": brick hit and paddle hit. We can log velocity before/after maybe event. Physics separation flips vy, then callback can record final. Could log `BRICK: removed at (x,y), score +10, velocity after (vx,vy)` and compare prior stored velocity. Need store `prevVx,vy` at end of update. On hit, event shows before from last frame and after. Good.
- Need score once per brick: disable body and flag. Could track `totalBrickHits` and maybe ensure equals removed count. Snapshot. We can inspect.
- Need restart all bricks. Debug API perhaps allows directly test clearing all bricks and game over, but user asks verify representative checks focused on opening bounces/contact/brick/paddle bounds. We can also verify win/gameover via debug methods if time. Could add a hidden button? Maybe direct `window.__breakout.debug.clearBricks()` not accessible via browser tool. But browser inspect perhaps maybe allows JS evaluation? Need discover. Could use URL query params to trigger test states? E.g., if `?test=win`, spawn one brick, etc. But requirement says no network; query is local, okay. Could add "QA" buttons? Not needed and could clutter. Could implement debug keyboard shortcuts (e.g. F2 clear all bricks, F3 lose life) but not show controls perhaps. Yet verification can do via game interaction if enough time; clearing 60 bricks manually impractical. Could expose via JS console if browser inspect can evaluate, uncertain.
Maybe browser `inspect` can return JS values? Need call after building to see tool output shape. We can perhaps use action `inspect` with text containing an expression? Tool doesn't mention eval. Maybe `text` only used for type. Could add a visible "TEST: clear bricks" button to exercise win state; but requirement doesn't ask and might be weird. Could have a small "cheat" hidden with CSS? Better perhaps add keyboard shortcuts in JS to set one brick remaining and then hit it, not necessary.

Could use browser `type` into an input that dispatches commands (a debug console input) but that is extra UI. Or leave a visible "test panel" with small buttons "Win test" / "Lose test", but that may be considered implementation detail okay. However user asks playable game with win/gameover/restart; we should ideally verify those states. We can write debug API usable through browser URL hash perhaps reload with `#win` to trigger state. But browser tool reload likely can't set URL. Could use `click` on buttons if present. Could make `R` restart and perhaps `G` game-over test hidden. Hmm.

Maybe browser `inspect` has ability to execute arbitrary JS via `text`? Let's check tool with simple call after creating file. We'll see output. Need build first.

Let's write comprehensive index.html. Need be careful with Phaser API details.

Detailed JS structure:

```
(() => {
'use strict';
const W=800,H=600;
const WALL_L=20,WALL_R=780,WALL_T=64;
const PADDLE_W=124,PADDLE_H=18,PADDLE_Y=552;
const BALL_R=9, BALL_TEX=20;
const BRICK_W=68, BRICK_H=24, COLS=10, ROWS=6, GAP_X=7, GAP_Y=9, BRICK_TOP=112;
const MIN_X=WALL_L+PADDLE_W/2, MAX_X=WALL_R-PADDLE_W/2;
const held=new Set();
let sceneRef=null;
const launchBtn=..., restartBtn...
function clamp...
function fmt...
function logEvent...
...
class BreakoutScene extends Phaser.Scene {
 constructor(){super('Breakout')}
 preload(){}
 create(){
   sceneRef=this;
   this.mode='ready'; ...
   this.makeTextures();
   this.drawBackground();
   this.createHud();
   this.createObjects();
   this.createColliders();
   this.createOverlays();
   this.registerInput();
   this.resetGame(false? );
   ...
 }
 makeTextures() {...}
```
Need call `buildBricks` before reset ball. Could have `restart()` calls all. Maybe simpler:
```
create() {
  ...
  this.bricks = this.physics.add.staticGroup();
  this.physics.add.collider(this.ball, this.bricks,...)
  this.restart(true);
}
restart(silent=false){
  this.bricks.clear(true,true);
  this.score=0;this.lives=3;this.bricksLeft=0...
  this.buildBricks();
  this.mode='ready'; ...
  ball.enableBody?...
  this.dockBall();
  this.hideOverlays...
  this.updateHud();
  this.publish...
}
```
Need create bricks after collider? StaticGroup persists and clear children; collider references group, fine.
- `staticGroup.clear(true,true)` signature `clear(removeFromScene, destroyChild)`? Group.clear(removeFromScene, destroyChild) perhaps. `clear(true,true)` destroys. Search maybe. Common `group.clear(true, true)`. Fine.
- `this.bricks.create(x,y,key)` returns `Phaser.Physics.Arcade.Sprite` with static body. Need `brick.refreshBody()`. For staticGroup, create may already set. Call:
```
brick.setOrigin(0.5);
brick.refreshBody();
```
- Need collision category? no.
- Bricks data hit:
```
brick.setData('hit', false);
```
`brick.active` true.
- `this.bricksLeft = ROWS*COLS`.
- `this.bricks.countActive(true)` perhaps to determine win. Use own count.
- collider callback receives `ball, brick`. Could maybe callback order reversed due static group? Since we call collider(ball,bricks) it's ball first. Add defensive:
```
const b = brick === this.ball ? ball : brick; // maybe
```
but likely not needed. Could define function and detect which has `texture.key.startsWith('brick')`. Not necessary.
- `ball.body.setCircle(BALL_R,1,1);` Need setCircle signature radius, offsetX, offsetY. With 20x20 texture and circle radius9, offset1 -> body 18x18. Good.
- `paddle.body.setSize(PADDLE_W-4,PADDLE_H-2).setOffset(2,1);` For 124x18 texture, body width120 height16 offset2,1. body center equals sprite center. Fine.
- `paddle.setCollideWorldBounds(false)` perhaps manual clamp. If false, left/right world collisions not relevant. Set immovable etc. `paddle.body.moves = false`? If moves=false, world won't sync body from gameObject? Maybe leave.
```
this.paddle = this.physics.add.sprite(W/2,PADDLE_Y,'paddle').setImmovable(true).setPushable(false);
this.paddle.body.allowGravity=false;
```
Default Arcade no gravity. Need `setCollideWorldBounds(true)` would clamp to world bounds, possibly lower bound, but manual clamp anyway; but world bounds top=64 etc. Could set true to enforce. Yet paddle at y=552; left boundary based body width; world setBounds left20, right780, so paddle with collide bounds stays center 82..718, same as manual. Could use true and manual clamp. Good. Need down collision false globally; bottom not issue.
- Ball:
```
this.ball = this.physics.add.sprite(...,'ball').setBounce(1,1).setCollideWorldBounds(true);
this.ball.body.setCircle(...); this.ball.body.checkCollision.down=false; this.ball.body.onWorldBounds=true maybe not needed.
this.ball.setMaxVelocity(600,600);
```
- `this.physics.world.setBounds(WALL_L,WALL_T,WALL_R-WALL_L,H+120-WALL_T); this.physics.world.setBoundsCollision(true,true,true,false);` Need perhaps call before creating sprites? Either fine. Set in create before.
- Need use `this.physics.world.checkCollision.down=false` and body's checkCollision perhaps. `setBoundsCollision` sets world.checkCollision flags. Collide world bounds checks `body.checkCollision` and world.checkCollision. Setting ball body down=false could disable all down collisions, including paddle/bricks? Important! `body.checkCollision.down=false` means the body's down side doesn't collide with anything, which could prevent paddle hit from below? In Arcade, checkCollision is directional for all collisions, so disabling down would cause ball to pass through bricks/paddle maybe! Need not set ball.body.checkCollision.down=false. Instead world bounds down collision can be disabled globally via `physics.world.setBoundsCollision(true,true,true,false)`. Need check how world bounds collision uses flags. Search for `checkCollision.down` in World.

World.checkCollision.down false likely enough; need find world bounds collision function.

Need find uses `world.checkCollision` maybe property passed to `collideBounds`? Search `e.checkCollision.down` where e is world? Hmm. Phaser Arcade Body's `checkCollision` maybe receives world defaults? World's `checkCollision` used in `update` to set body? Search string `this.checkCollision.right&&` etc.

World checkCollision may be passed as tile options `o` etc. Need perhaps body `onWorldBounds` uses checkCollision flags from world? Let's find `collideBounds` function.

Interesting `checkCollision=u(!1)` maybe `u` creates false? Need understand. Wait likely `u` is function that creates object with all true? Could be `BuildGameObjectFromConfig`? Let's inspect around body update for world bounds. Search `collideWorldBounds&&` or `customBoundsRectangle`.

Great: world `checkCollision.down=false` enough, body.checkCollision stays all true. Need set world flag. Also note `body.customBoundsRectangle=t.bounds` is reference to world bounds object, so `setBounds` update works. Good. Need don't set ball.body.checkCollision.down=false.

Need world bottom beyond canvas. `setBounds(WALL_L,WALL_T,WALL_R-WALL_L,H+120-WALL_T)` gives bottom=720. We detect ball y>H+20=620; fine. If down collision disabled, no issue anyway. Could just set bottom=H+120. Good.

Need bounce from world uses bounce 1. Fine.

Need wall events with `body.blocked` flags updated by checkWorldBounds. In scene update after physics step, could read `blocked.left/right/up`. Need `resetFlags` at each preUpdate perhaps clears blocked; if body remains at boundary and moving away, blocked may false. Good. We can log on transition:
```
const touchKey = [blocked.left,blocked.right,blocked.up].join...
if (this.mode==='playing' && (...) && !this.wallTouching) log...
this.wallTouching = any...
```
Potential repeated if staying at boundary for one frame; okay.
But if ball hits wall and then remains near boundary with velocity away, next frame no blocked. Fine.

Need input event focus issues. Use document listeners. Need maybe browser tool `key` sends keydown/up with code maybe "ArrowRight". We'll see. We can also add explicit button left/right? Requirement only Left/Right or mouse; visible controls. Fine.

Need update ball speed maybe increase every N bricks to keep game exciting. Could set speed increment:
```
this.ballSpeed = 370 + (60-this.bricksLeft)*1.2 capped 500
```
When brick hit, natural bounce preserves speed. Could adjust after collision to maintain target speed. Need use `this.physics.velocityFromRotation`? We can normalize current velocity:
```
const v=ball.body.velocity;
const speed=Math.min(480,360+ destroyed*2);
const len=Math.hypot(v.x,v.y)||1;
this.ball.setVelocity(v.x/len*speed, v.y/len*speed)
```
But if physics separation produced vx/vy, preserve direction. Good. Need avoid setting vy to zero etc. Use min component maybe. Could cap.
- Paddle hit similarly set speed based on same target and angle from offset. Need ensure not too vertical/horizontal:
```
const angle = Phaser.Math.DegToRad(-90 + offset*62);
this.ball.setVelocity(Math.cos(angle)*speed, Math.sin(angle)*speed);
```
with `offset` = clamp((ball.x-paddle.x)/(PADDLE_W/2),-1,1). At offset ±1, angle -28° or -152°, vx ±0.88speed, vy -0.47speed, okay. At center angle -90, vx=0 (straight up), could be boring. If abs(vx)<60, set vx sign 60 and adjust vy to maintain speed. Need deterministic. Could use angle offset plus small base sign. Maybe:
```
let offset = clamp(...,-1,1);
if (Math.abs(offset)<0.12) offset = 0.12*(this.lastPaddleSide||1)
const angle=-Math.PI/2 + offset*1.05
```
Good.
- Need cooldown to prevent repeated collider callback:
```
if (this.time.now - this.lastPaddleHit < 80) return;
this.lastPaddleHit=this.time.now;
```
Need `this.time.now` exists? `this.time.now` maybe Scene Clock now. Use `this.game.loop.time` or `this.time.now`. Phaser Time.Clock has `now`. Fine. Could use `performance.now()`. Simpler `this.time.now`.
- Need separate ball from paddle:
```
this.ball.y = paddle.top - ballRadius - 1;
```
But body position? `ball.body.reset(this.ball.x, this.ball.y); ball.setVelocity(...)`. `body.reset` calls checkWorldBounds and stops; then setVelocity. Need ensure doesn't reset `blocked` weird. Fine. However `reset` may treat x,y as top-left? Need check source: `reset(t,e)` sets gameObject.setPosition(t,e); then `i.getTopLeft(s)` assigns position to body top-left. So t,e are gameObject center. Good.
- Need ensure ball.x remains within world bounds after reset; paddle clamped so yes.
- `ball.body.updateFromGameObject()` after set y would be safer, preserving velocity. Let's use:
```
this.ball.setPosition(this.ball.x, this.paddle.y - PADDLE_H/2 - BALL_R - 1);
this.ball.body.updateFromGameObject();
this.ball.setVelocity(...)
```
`updateFromGameObject()` also updateBounds and center, preserving velocity. Great.
- For brick hit, natural separation may have already moved body and possibly gameObject? Collider separation changes body.position but gameObject position updated in postUpdate later. callback uses `ball.x` maybe still previous position; body center updated. But we only log and disable brick. We can optionally normalize speed using body.velocity. Need perhaps ensure direction actually changed. We'll record `this.lastVelocity` from previous update and after hit log. Need callback can refer to `ball.body.velocity`. Fine. Then perhaps adjust final speed. Don't reposition. Good.
- Need perhaps physics separation with static brick after callback disabling body: separation already happened before callback (as seen from source), so good.

Need score once:
```
if (brick.getData('hit')) return;
brick.setData('hit',true);
brick.disableBody(true,true);
```
Even if collider calls twice in same frame, `brick.active` is false after disable so static tree removal maybe immediate. Data flag protects.
- Need win check after score:
```
if (this.bricksLeft <=0){ this.finish('win'); return; }
```
`finish` stops ball. Need if callback still processing other collisions after mode changed; hitBrick guard mode playing at top, so no more scoring. Could that leave bricks physically active? only if all gone, no issue.
- Need use `this.bricksLeft` exact.
- Need restart call from button:
```
restart(){
 if (!this.bricks) return;
 this.bricks.clear(true,true);
 ...
 this.buildBricks();
 this.ball.enableBody(true, x,y,true,true)? 
```
Arcade Sprite has `enableBody(reset,x,y,enableGameObject,showGameObject)`. We don't disable body ever. Set visible true, active true.
```
this.ball.setActive(true).setVisible(true);
this.ball.body.enable=true;
this.dockBall();
```
- Game over perhaps ball remains below screen and visible false:
```
this.ball.setVelocity(0,0); this.ball.setVisible(false); this.ball.body.enable=false;
```
Then restart enables.
- Win could keep ball visible but frozen; fine.
- lose life:
```
this.lives--;
logEvent...
if(lives<=0){ mode='gameover'; ball.setVisible(false); ball.body.enable=false; showOverlay; }
else { mode='ready'; dockBall(); }
updateHud...
```
Need if body disabled, `dockBall` re-enable. Good.
- Need avoid ball collision/detection after gameover; update guard.
- Need `dockBall`:
```
this.ball.body.enable=true;
this.ball.setVisible(true).setActive(true);
this.ball.body.reset(this.paddle.x, this.paddle.y - PADDLE_H/2 - BALL_R - 5);
this.ball.setVelocity(0,0);
this.ball.setBounce(1,1);
this.lastVelocity={x:0,y:0}
```
`body.reset` might call checkWorldBounds and set blocked; fine.
- Need update ready position every frame using `body.reset` perhaps. If paddle moves, `dockBall()` in update while ready. But calling body.reset each frame may reset blocked flags and check bounds; okay. Could use `ball.setPosition` plus `body.updateFromGameObject()`. Let's do:
```
if (mode==='ready') {
 this.ball.setPosition(this.paddle.x, this.paddle.y - ...);
 this.ball.body.updateFromGameObject();
 this.ball.setVelocity(0,0);
}
```
Need if body disabled after gameover, mode not ready. Fine. `dockBall` re-enables.
- Paddle target update even in win/gameover? likely allow but not needed. We can move always unless mode win/gameover maybe freeze. Could allow.
- `this.targetX` initial W/2. On pointermove:
```
this.targetX = clamp(pointer.worldX, MIN,MAX)
```
Need pointer.worldX perhaps undefined until camera transform? use fallback. Also pointer x relative to canvas maybe if CSS scale, pointer.worldX should correct. Need maybe use `pointer.positionToCamera(this.cameras.main)` to get world coords. Phaser pointer has `worldX` updated by input manager using main camera. Fine.
- Keyboard direction updates target:
```
if (dir!==0) this.targetX=clamp(this.targetX + dir*PADDLE_SPEED*dt/1000, MIN,MAX);
```
Then set paddle.x=targetX. Need perhaps `this.paddle.body.updateFromGameObject()`.
- `update(time, delta)`:
```
const dt=Math.min(delta,50)/1000;
...
this.movePaddle(dt);
if mode==='ready' dock...
if mode==='playing' {
  this.checkWallBounce();
  this.lastVelocity = {x: ball.body.velocity.x, y: ...};
  if (ball.y - BALL_R > H + 2) this.loseLife();
}
this.readyPrompt.setAlpha(...); ...
this.lastPublish += delta; if >100 publish...
```
Need detect ball falling below paddle, not necessarily bottom of canvas; requirement "A ball falling below the paddle costs one life". Could detect when `ball.y > H + BALL_R` (below playfield). Good. Could detect y>PADDLE_Y+40=592. But if ball bounces off paddle? ball center > paddle y? Let's use `ball.y - BALL_R > H` (entire ball below visible canvas) -> lose. That's clearly below paddle. Maybe `ball.y > H+12`. Need world bottom at720 and down collision disabled. Good.
- Need if ball comes downward and misses paddle, no collision; at y>612 reset. Fine.
- Need ball collider with paddle if moving down; `this.mode==='playing'` guard.
- Need preserve `lastVelocity` each frame for event logs. Because collision callback happens during physics step before Scene.update, `this.lastVelocity` is from previous frame, good.
- Need call `publishState` after update and on events. Fine.
- `checkWallBounce`:
```
const b=this.ball.body.blocked;
const touching= b.left||b.right||b.up;
if (touching && !this.wallContact) { ... }
this.wallContact=touching;
```
But if ball hits brick below, blocked flags from body are reset at preUpdate to all false? Actually `resetFlags` perhaps clears touching but blocked? Need likely. Fine.
- Need top wall bounce event and left/right. We can use sign changes in `lastVelocity` more robust:
```
const vx = ball.body.velocity.x, vy=...
if (this.lastVelocity) {
 if (Math.sign(vx)!==Math.sign(lastVx) && Math.sign(vx)!==0) log...
 if (Math.sign(vy)!==Math.sign(lastVy) ... ) log...
}
```
But brick and paddle hits also cause direction changes; could log generic. Better event from collision callbacks. `checkWallBounce` body.blocked enough. Need log on every transition. Fine.
- Need event log from paddle:
```
const before=`(${Math.round(prev.x)},${...})`;
const after...
logEvent(`PADDLE bounce ${before} -> ${after}; vy now upward ...`)
```
- Need brick:
```
logEvent(`BRICK removed at (${...}); score ${this.score}; velocity ${before} -> ${after}`)
```
Could be long; UI wraps.
- Need state snapshot include `paddleInside` boolean computed from body bounds:
```
const left=this.paddle.x-PADDLE_W/2, right=...
inside=left>=WALL_L-0.1 && right<=WALL_R+0.1
```
Actually body width120 vs texture124 full width; visible paddle width124; clamp using full width. Use full width boundaries MIN=20+62=82, MAX=780-62=718. Good.
- Need `ball` values from sprite x/y and body velocity. Need state after collision etc.
- Need score/lives DOM display perhaps update in side panel:
```
document.getElementById('scoreValue').textContent=...
```
Keep sync with Phaser HUD.
- Button disabled:
```
launchBtn.disabled = mode!=='ready';
launchBtn.textContent = mode==='ready'?'LAUNCH BALL':'BALL IN PLAY' maybe when gameover "NO LIVES";
```
But when game over, maybe "LAUNCH BALL" disabled. Fine.
- Body dataset:
```
document.body.dataset.mode=...
```
- `window.__breakout` API:
```
window.__breakout = {
 get state(){return window.__breakoutState},
 scene:()=>sceneRef,
 launch:()=>sceneRef?.launchBall(),
 restart:()=>sceneRef?.restart(),
 setPaddle:(x)=>..., // useful maybe browser inspect not eval
 debugWin:()=>sceneRef?.debugWin(),
 debugGameOver:()=>...
}
```
Could add `debugWin` and `debugGameOver` methods in scene and buttons perhaps lower side panel "QA shortcuts" with tiny buttons. But not necessary for user-facing; could make them as hidden but browser click maybe can't click hidden. Could add small text links "Test win / Test game over" in a `<details>` QA section. Yet potentially judged on visual UX; extra debug buttons can be acceptable if clearly marked QA. But user asks visible Launch control; adding test controls might clutter. Maybe use keyboard shortcuts F2/F3 documented in HTML hidden via title? Need verify win/gameover via those easily with browser `key` (maybe supports function keys). Could also URL query `?qa=1` to show QA buttons, but tool reload cannot set query perhaps. Could read `location.hash`; browser tool can't set hash. But we can create small QA buttons always with less prominence:
  - "Finish board (demo)" and "Drain ball (demo)" under event log. Then click to test win/gameover states. Does this violate anything? No. But user doesn't ask, and visible buttons may confuse. Could label "QA: Win / Lose" in a details panel collapsed by default; browser tool can click summary then buttons. That's okay.
Would ideally use eval from browser inspect; maybe avoid.

Alternative verify win/gameover via console by exposing methods if browser supports custom JS via `inspect` text. Need figure tool. Could simply call browser `inspect` with `text:"window.__breakout.debugWin()"` maybe it might evaluate. But no docs. We can experiment after initial build. If not, use QA buttons. Could also add debug controls and inspect them.

Need perhaps use `data-testid` attributes and state DOM.

Let's write file now. Need ensure CSS and JS all inline. Use Phaser script plain `<script src="phaser.min.js"></script>` exactly. Need no external resources. Need no separate files. Need maybe add meta CSP? no.

Let's craft carefully.

CSS:
```
:root ...
* box-sizing:border-box
body margin0 min-height100vh background radial-gradient...
#app max-width:1120 margin auto padding:16px
header display flex...
.layout display:flex gap:16px align-items:stretch
#game-wrap width:800px;height:600px;flex:0 0 800px;border...
#game canvas display:block
.panel width:260 ...
button...
#state font-size:11px ...
#eventLog...
@media max-width:1100 { layout flex-direction:column; ... maybe scale? }
```
Need browser viewport 1200x800. header ~55 + canvas600 + padding32 =687; good. side panel same height600. Maybe body content ~690. Fine.
Use `#game` width:800,height:600.
Phaser Scale.FIT with parent. Need canvas might be 800x600. Good.

HTML:
```
<header><h1>NEON BREAKER</h1><p>...</p></header>
<div class=layout>
 <div id=game-wrap><div id=game></div></div>
 <aside class=panel>
  <section class=stats> ... </section>
  <section controls>...
  <button id=launchBtn>▶ LAUNCH BALL</button>
  <button id=restartBtn>↻ RESTART</button>
  <section class=telemetry> <pre id=state>...</pre> <div id=eventLog>...</div></section>
  <details id=qa>...
```
Need fit 600 px. Stats 80, controls 120, buttons100, telemetry 250, QA collapsed ~30 =580. Fine. Could use scrolling aside `overflow:auto`.

QA buttons:
```
<details class="qa">
<summary>Demo / QA shortcuts</summary>
<button id=winBtn>Finish board</button>
<button id=loseBtn>Drain all lives</button>
<p>Use these to inspect end states quickly.</p>
</details>
```
Would need styles.

In-canvas overlay generated with Graphics. Need text font maybe `'Courier New', monospace`. No external fonts. Use `fontFamily:'Courier New, monospace'`, fontSize etc.

Texture generation:
```
makeTextures(){
 if(this.textures.exists('paddle')) return;
 const g=this.make.graphics({x:0,y:0,add:false});
 g.clear();
 g.fillStyle(0x0b1024,0); ...
 generateTexture('paddle',PADDLE_W,PADDLE_H)
```
Need generated texture alpha support. `generateTexture` by default background transparent. For ball, draw outer glow circle with alpha, then inner. For brick, fill rounded rect and highlight. Need perhaps line style. Use `g.fillRoundedRect`. `g.generateTexture` returns texture. Need call `g.clear()` after each. At end `g.destroy()`. Need maybe `this.make.graphics({x:0,y:0,add:false})` signature in Phaser 3.80 supports config. Could use `this.add.graphics()` then destroy after; make.graphics is fine.
- For wall visuals perhaps use `this.add.graphics()`, lineStyle etc. Need line path:
```
const bg=this.add.graphics().setDepth(-10);
bg.fillStyle(0x0b1024,1); bg.fillRect(0,0,W,H);
for lines...
bg.lineStyle(2,0x26335e,0.25)... 
bg.lineStyle(3,0x38bdf8,0.75);
bg.beginPath(); bg.moveTo(WALL_L,H); bg.lineTo(WALL_L,WALL_T); bg.lineTo(WALL_R,WALL_T); bg.lineTo(WALL_R,H); bg.strokePath();
```
Need bottom drop zone line maybe dashed at y=H-5 but ball can pass; draw small low-alpha ticks:
```
for x... bg.fillStyle(0xef4444,0.25); bg.fillRect(x,H-6,24,2)
```
- Add decorative stars via deterministic patterns:
```
for (let i=0;i<40;i++){ const x=...; if y>70 etc; bg.fillStyle(...); bg.fillCircle(...) }
```
Use `Phaser.Math.Between` uses global random; fine. Need avoid over bricks? low alpha.
- HUD top:
```
this.hudScore=this.add.text(32,18,'SCORE 0000',...);
this.hudLives=this.add.text(W/2,18,'',...).setOrigin(.5,0);
this.hudBricks=...
```
Need top boundary at y=64, HUD above it. Draw a dark bar perhaps graphics rect (0,0,W,64).
- lives represented text `LIVES ●●●` using Unicode; Phaser Text supports. Maybe use DOM stats too. Fine.
- `readyPrompt` text at y=405:
```
this.readyText=... setOrigin(.5)
this.readySubText=...
```
- overlay:
```
const g=this.add.graphics();
g.fillStyle(0x020617,.88); g.fillRoundedRect(-250,-100,500,200,18);
g.lineStyle(2,...); g.strokeRoundedRect...
const title = add.text(0,-50,'',...).setOrigin(.5)
...
this.overlay = this.add.container(W/2,H/2,[g,title,sub,hint]).setDepth(20).setVisible(false);
```
Need `add.container` supports list. Fine. `graphics.strokeRoundedRect` exists. Need perhaps container isn't setScrollFactor; okay.
- Could also add faint "READY" chip ready text with fill background? just text.

Create colliders once after ball/paddle/bricks:
```
this.physics.add.collider(this.ball,this.paddle,this.onPaddleHit,undefined,this);
this.physics.add.collider(this.ball,this.bricks,this.onBrickHit,undefined,this);
```
Need null process callback not undefined? `physics.add.collider(obj1,obj2,collideCallback,processCallback,callbackContext)`. Pass null for process. Good.

Scene methods syntax within class. Need set `gameScene = this` at create start.

Global UI functions need reference scene. Define before class:
```
function refreshButtons(mode){...}
function publish(snapshot){...}
function logEvent(message){...}
```
Need initial event log "READY: ...". Use global `eventSeq` maybe.
`logEvent` uses `console.info('[NEON BREAKER] '+message);` Could console be considered error? info okay.
Need `stateEl.textContent=JSON.stringify(snapshot,null,2)`. Need perhaps browser inspect output includes full body text; likely.
Need event log DOM:
```
const row=document.createElement('div'); row.textContent=...
```
No network.

Need perhaps title dynamic causing browser inspect to output; fine.

Need QA:
```
function makeDebugApi()...
window.__breakout = {
 state:()=>window.__breakoutState,
 snapshot:()=>sceneRef?.snapshot(),
 launch:..., restart:...,
 setPaddle:x=>{if(sceneRef) sceneRef.setPaddleTarget(x)},
 forceWin:()=>sceneRef?.forceWin(),
 forceGameOver:()=>sceneRef?.forceGameOver(),
 hitOneBrick:()=>sceneRef?.... perhaps
};
```
If browser inspect can eval maybe useful. QA buttons call these.
- `forceWin()` should remove all bricks and call win, but to test win state:
```
forceWin(){
 if(mode==='gameover') return;
 this.bricks.getChildren().slice().forEach(b=>{if(b.active){b.disableBody(true,true);}});
 this.score += this.bricksLeft*10;
 this.bricksLeft=0;
 this.updateHud();
 this.finish('win');
 logEvent('QA: board cleared');
}
```
Need not cause 60 event logs. Fine.
- `forceGameOver()`:
```
this.lives=1; this.ball.setPosition(W/2,H+30); this.updateHud(); this.loseLife();
```
But `loseLife` sets state etc. If mode='ready', maybe need mode='playing' for guard; set mode='playing'. Then call. Good.
- QA buttons perhaps disabled when gameover? restart first.
- `setPaddleTarget(x)` clamps and moves; can use browser tool if eval. Could expose.
- Maybe `hitBrickAt(index)` to test brick removal and score once by directly invoking callback? But we can verify natural collision. Expose `pulseBrick` not needed.

Need updateHud and publish:
```
updateHud(){
 this.scoreText.setText(...)
 ...
 refreshButtons(this.mode)
 this.publishState()
}
```
Need `publishState` called every ~120ms. Define method:
```
snapshot(){
 const b=this.ball.body;
 return {...}
}
publishState(){
 const s=this.snapshot(); publish(s); 
}
```
Need perhaps publication before object creation? create after all.
- Data attributes update in global publish.
- `window.__breakoutState=s` for console.

Need event log state perhaps include recentEvents array for inspect. `window.__breakoutEvents = events`. Good.

Need restart side effect clear event log? Could keep log but add RESTART. Maybe clear on restart and log. Keep to inspect. Global `clearEvents()`.
- Need `restart()` invoked at create; if it logs RESTART twice? Fine.
- Need "launchBall" event. On space while button focused, keydown global may call launch and browser default button click may also call launch after keyup; guard prevents double. Need `e.preventDefault()` stops click perhaps.
- Need Mouse pointer events from HTML side panel not on canvas; fine.
- Need prevent arrow scroll via global keydown. Fine.

Potential issue `document.addEventListener('keyup',...)` browser tool key may only send keydown with no keyup? If so held key remains indefinitely. Could add auto-release maybe:
```
if (e.code arrow) held.add; setTimeout(()=>held.delete(e.code), 500)
```
But if user holds, timeout would release prematurely. Could rely on Phaser's keyboard. Better maybe use Phaser `this.input.keyboard.addKeys` which also gets keyup. Browser tool likely dispatches both. Need perhaps use both global and Phaser keyboard fallback:
```
this.cursors = this.input.keyboard.createCursorKeys();
this.keys = this.input.keyboard.addKeys('A,D');
```
Then update direction from both:
```
dir from held || cursors.left.isDown etc.
```
But if global key stuck, still stuck. Could have `window.addEventListener('blur', clear)`, and browser tool key likely keyup. Fine.
Could also time-key held with `lastKeyTime` and ignore if no repeat for >2s. Browser tool maybe. But not necessary.

Need handle Phaser.Game creation perhaps after DOM loaded; script placed at end body so elements exist. Fine.

Phaser config with `render: { pixelArt:false, antialias:true, roundPixels:false }`, `scale`. Need `physics: {default:'arcade', arcade:{debug:false}}`. Need `fps` maybe default.
- `parent:'game'`, `canvasStyle:'display:block'`. Fine.

Need maybe Phaser.AUTO tries WebGL and logs renderer info; no issue. Could choose `Phaser.CANVAS` to avoid WebGL context maybe slower but robust in sandbox. Phaser Graphics works in Canvas. Use `type: Phaser.AUTO` likely browser tool supports WebGL. If WebGL unavailable, fallback. Fine.

Potential issue generated texture via `graphics.generateTexture` in Phaser 3.80 requires WebGL/Canvas render. Fine.
- `this.make.graphics({x:0,y:0,add:false})` maybe GraphicsFactory's `graphics(config, addToScene)` signature; passing object with `add:false` okay.
- Need `g.destroy()` after generating; generated textures remain.

Need perhaps brick labels or score points. Fine.

Let's write.

Need run browser inspect initial and console. Need use browser tool. First reload perhaps.

Initial output good. Need perhaps screenshot looks crisp, all graphics. Need note event log not visible in screenshot because below fold? aside height 600, event log heading at bottom, maybe scroll; browser inspect DOM has event log text omitted? It only shows "EVENT LOG" no list because event log at y>600 perhaps overflow; but console capture has event. Need perhaps not worry. But for verification maybe event log useful; could reduce telemetry heights to show event rows. Could adjust CSS: state max-height 135, eventLog height 90, controls etc. aside perhaps still overflow. Screenshot shows state panel from y=453 to612, event log heading y=630, event rows below visible canvas end y=650; body 800 actually aside extends to650, but event log at y650 maybe hidden due overflow? We can scroll aside. DOM inspect includes event text? It shows "EVENT LOG" but no event line because event row maybe below clipping. Console has event. It's fine. But perhaps need more visible event log to verify. Could adjust to fit: aside height600 from y56 to650, content:
- padding15, eyebrow 19, stats 51+15, controls maybe 119+14, buttons 40+9+40+9, telemetry state 164+10+heading+event130+ details~30 = ~584 plus padding. Might just fit. Yet screenshot shows event log heading at 632, so content overflow by ~100. Need reduce state and event. Maybe not essential but nice. Could set state max-height110, eventLog height85, controls smaller. Then event rows visible. We'll possibly adjust later.

Main issue: need verify game behavior. Launch with Space or button. Need use browser key or click. Let's click Launch button at x~1000,y350 (screenshot coordinates). Then inspect after perhaps some time. Need browser tool call durations? `motion` gives frames maybe captures over time. We can call click then inspect. Need perhaps tool click at (1002,350). Let's do.

Interesting after click, state ball y=425.5, x451; means ~0.3 sec elapsed between click and inspect perhaps. Need inspect after ~0.5 sec for brick hit. Browser tool call itself advances frames? Need use motion action to capture frames over time. Let's call `motion` maybe action with no text? Need see.

We see serious issue: first frame screenshot after motion shows ball not docked despite DOM state says ready and ball x400 y529. Actually a white ball appears at x183,y494 in second/third screenshots, while paddle at x456,y606. There are perhaps two balls? Let's inspect: screenshot second shows one white ball at x183,y494 and no ball on paddle. Fourth shows no ball. Could be score puff text? No, white circle. Perhaps ball from animation frame at earlier time while DOM state from final time? Motion frames maybe screenshots at different animation states but DOM state updated separately? Need understand. Could be browser tool captures multiple frames from previous screenshot sequence, some before reload? Hmm first screenshot no ball? Actually first screenshot at +0ms shows no ball on paddle (maybe hidden by "ready"?? paddle x456, y606; expected ball x456,y583), no visible ball. second shows ball at x183,y494. Could be an old motion frame from click before? Yet console shows brick hit+miss over 2.5s. Need maybe screenshots are not synchronized with DOM. Maybe tool captures 4 frames at intervals but game state in DOM is final; each frame could be from previous run due to screenshot caching? The second/third likely show ball traveling. Need check. The ball at x183,y494 could be from after top bounce and descending, near left wall; maybe plausible around t=2s. First frame ready, no ball (docked but maybe ball too faint? Actually ball should be visible). Second/third ball at left descending. Fourth no ball (life lost). So sequence is plausible. Need perhaps ball docked not visible due to screenshot resolution? first frame paddle at x456,y606; expected ball at y583, maybe perhaps hidden under ready prompt? no. Wait in canvas coordinates offset x56,y56; game world ball x400,y529 => screen x456,y585. Paddle at world x400,y552 => screen x456,y608. There should be white ball 20px diameter around screen (456,585). First screenshot paddle is at (456,606) but no ball. Maybe the ball is rendered behind paddle? Actually ball center y529, paddle center552, difference23; ball bottom538, paddle top543 =>5 px gap. Should show. Why no ball? Maybe ball's body is disabled from previous game over? But state at final ready after miss and `dockBall` doesn't re

enable body, but body was never disabled on miss. It should remain visible. Wait `loseLife` if lives>0 sets mode ready and `dockBall`; does not set ball visible/active or body enabled. It was visible and body enabled. fine.

Could be screenshots are from prior frames where ball not at final location; first image perhaps right after miss? Need not worry.

More serious: top bounce event at 12:03.112, only 7ms after brick hit at 12:03.105. That seems impossible to travel from y277 to top64 with vy329 (0.65s). Event timestamp could be inaccurate? Maybe log time from `new Date().toISOString().slice(14,23)`: that gives HH:MM:SS.mmm? Let's check ISO "2025-...T12:03:11.105Z", slice(14,23) yields "03:11.105" maybe includes minutes:seconds.mmm. So 12:03.112 not a second? Actually output "12:03.112" could be MM:SS.mmm. Top bounce 7ms after brick. Hmm maybe `Date` in browser is mocked/frozen? Could be. But all events could happen rapidly because browser motion advances game at accelerated time? Frame 2 +857ms might run many game steps to catch up? Phaser delta perhaps huge but clamped. Need not worry.

Need verify paddle hit. The ball missed because paddle stayed center and after brick bounce, top bounce, ended up at far left. Need move paddle to intercept. We can use mouse drag or keyboard. Need test keyboard left/right and paddle bounds. We can use browser key maybe press ArrowLeft repeatedly or drag to left edge. Need understand browser key tool: maybe `action:"key", text:"ArrowLeft"` sends keydown+keyup quickly. Could produce short movement ~few px. Could use `drag` from canvas center to far left, which should set pointer target to world x. Need test. Need coordinate mapping: canvas left~56, top~56, width800,height600, so pointer world x = screen x -56, y=screen y-56. To set paddle at world x=82 (left bound), drag to screen x=138, y maybe 608. Browser tool drag from current point to target. Let's use drag to x=100 (screen), y=608, which world x=44 -> clamp to82. Need ensure pointer events. Could

also use `click` at x=100,y=608 which sets target. Let's restart first, then click at left edge and inspect state. But need verify movement with keyboard too. Could issue browser `key` with ArrowLeft perhaps. Let's see after restart. Use click Restart at (1002,392), then key perhaps. Need call both in parallel? They are sequential dependent, so one call then next. We can use browser `click` restart, then `key`, etc.

Need maybe discover browser `inspect` with `text` can evaluate JS. We can try `action:"inspect", text:"window.__breakout.state()"`; perhaps returns DOM plus console same. But tool doesn't promise eval. Could test later.

First fix visual issue with event log hidden perhaps adjust CSS. Also perhaps improve paddle gameplay: initial ball after first brick bounce goes to top and then left, likely misses paddle; that's okay, user can move. Need verify paddle collision by moving paddle to ball's downward path. Could maybe include debug method to position paddle and launch such that it returns to center, but need test naturally. We can use a deterministic second launch with initial vx=170,-345 and adjust paddle? Need maybe compute path after first brick hit:
- initial hit at (513,277), vy flips to +329, vx162; ball goes downward and right; from y277 to paddle543 =266/329=0.81s, x moves 131 to644. Need paddle center near644. The observed top bounce event weird; maybe there were two brick hits? Actually after first hit, vy becomes +329 (downward), so going to paddle, not top. Why `WALL: TOP bounce, velocity (162,329)` 7ms later? Could be `blocked.up` from brick collision being reported as top wall due to body.blocked.up set by static brick separation; body.blocked flags can be true for static body collision, not only world bounds. Indeed checkWorldBounds not the only source; collider separation sets `blocked.up/down/left/right`. Our `checkWallBounce` uses blocked flags indiscriminately and mislabels brick contact as top wall. That log isn't actual wall bounce. Need fix wall detection by comparing velocity reversals or using world bounds coordinate, not generic blocked flags. Simple:
```
checkWallBounce(){
 const b=this.ball.body;
 const nearLeft = b.left <= WALL_L+1; nearRight=b.right>=WALL_R-1; nearTop=b

.top<=WALL_T+1;
 const touching = (nearLeft && b.velocity.x>0?) ... 
```
But at exact world bounds after bounce, position top-left body x maybe WALL_L etc. We can use `b.blocked` plus position:
```
const atLeft = b.left <= WALL_L+0.5 && b.blocked.left;
const atRight = b.right >= WALL_R-0.5 && b.blocked.right;
const atTop = b.top <= WALL_T+0.5 && b.blocked.up;
```
World bounds x=20,y=64, radius body left at x=20 etc. Static brick collision at y277 wouldn't satisfy nearTop. Good. Need check body position maybe at top bounce top=64 exactly. Nice.
Could also listen to `worldbounds` event with `ball.body.onWorldBounds=true` and `physics.world.on('worldbounds',...)`, but body block flags plus position easier.
Need log "wall" only for actual world walls. Need maybe contact flags remain from collision? We'll use `this.wallContact` key.

Also need check that brick hit score once: state score10 bricks59 destroyed1. Good. Need verify direction: log before (170,-345) -> after (162,329), vy sign flips. Great.
Need verify top wall bounce naturally maybe need launch after restart and move paddle to intercept. Could use QA `setPaddle` via maybe inspect eval. But browser can click/drag. Need perhaps use `action:"drag"` to set paddle target near predicted x. Let's restart to fresh state and test moving paddle with mouse far left/right to confirm clamp. Then perhaps use debug API via inspect if possible to set paddle at desired x mid-flight. But browser tool may not evaluate. Could use `click` at screen x corresponding to paddle landing x=644+56=700, y=608. Then launch; paddle at x644, ball should hit it after first brick. Need verify. That would also verify mouse. But to verify Left/Right keys, we can use key tool perhaps. Could use drag from screen x456 to x700 and inspect. Then click launch. Need target x = screen x -56 =644. Good.

Need also verify paddle stays inside at far edges: click screen x=0 or x=1200 perhaps; target clamp to82/718. Use click at x=50,y=608 (outside canvas maybe pointer not delivered to Phaser if outside canvas). Better click at

screen x=60,y=608 (within canvas near left edge; world x=4 clamp to82), and x=835 (world779 clamp718). Actually canvas right edge screen=856, so x=840 world784 clamp718. Use drag maybe. Need browser `click` at canvas coordinates. Should trigger pointerdown. Then inspect state paddle left/right. Need test both edges perhaps one call each.

Need verify keyboard: perhaps use browser `key` with text "ArrowLeft"; need see output. It might send a key press and state update. Could test after restart. We'll do a few actions.

Before that, fix wall event detection and CSS event log visibility. Also maybe need `registerInput` global keydown listeners accumulate on restart? registerInput called once in create, fine. `restart` doesn't recreate scene. Good.

Potential issue `restart()` calls `this.bricks.clear(true,true)` and then builds; static tree may contain disabled bodies from forceWin; `clear` destroy should remove. Fine.
Potential issue `forceWin()` doesn't clear brick data hit; but rebuild destroys. fine.
Potential issue `forceGameOver` from win mode sets mode playing and ball body enable; then loseLife shows gameover. fine.
Potential issue when game over ball body disabled and restart: `dockBall()` calls `ball.body.updateFromGameObject()` even if body disabled? `restart` sets `body.enable=true` before. good.
Potential issue losing life with ball below H: `loseLife` calls dockBall but doesn't set ball visible true, but it's still visible. fine.
Potential issue launch after life loss from button: `this.mode ready`, okay.
Potential issue ball might collide with paddle while docked because body overlaps? Ball center y529, radius9 bottom538; paddle body top543 (center552, half8) =>5 gap. fine.
Potential issue paddle's `setCollideWorldBounds(true)` with world bottom disabled and left/right boundaries; when we set x to min82, body width120 -> body left22 (because texture width124 and x=82 => sprite left20, body offset2 =>22), within world left20; okay. At max718, body right=718-62+2+120=778, within right780. fine.
Potential issue mouse pointer worldX mapping with Scale.FIT: need test. We'll see.

Need fix `checkWallBounce` as above, and perhaps adjust `update` to log actual side wall bounces. Also, `ball.body.blocked.up`

may persist after static brick collision but at y277; position check prevents.
Could use a key string of contact:
```
const b=this.ball.body;
const touchingLeft=b.blocked.left && b.left<=WALL_L+1;
...
const key = [..].join('');
if (key && key!==this.lastWallKey)...
this.lastWallKey=key;
```
But `wallContact` boolean currently; if top wall then left wall same frame impossible. Fine.
Need maybe wall bounce log velocity after bounce. Good.

CSS adjust:
- `#state max-height: 120px;`
- `#eventLog height: 94px;`
- `.controls {padding:9px 10px;margin-bottom:10px}` and `.controls div margin:3px 0`.
- `.stats margin-bottom:10`.
- buttons margin bottom7/padding9.
- telemetry margin-top8.
- details margin-top7.
This should fit event rows. Need maybe aside scroll to bottom still. Could also place event log before state, but live state more important. We can reduce state to 110 and event to90. Need screenshot likely event log row visible. Fine.

Need perhaps make ready ball visible: screenshot first no ball, maybe because ball texture white momentarily not drawn? Need close look. Could take screenshot after fresh reload and inspect. We'll do after fixes. Maybe ball is actually rendered under paddle due to body reset? Wait initial screenshot first at +0ms after motion sequence shows paddle and no ball. But DOM state says ball x400,y529. In screenshot the paddle at screen x456,y606; a cyan rectangle. Ball should be at screen x456,y585. There is maybe a tiny white circle just above paddle? zooming mental: first frame at center around y585, I see no white; perhaps because screenshots from motion sequence are not exact game frames (captured at physical moments) and ball may be in flight due to timing mismatch, but DOM state from final ready. Could be due to screenshot rendering at +0ms before Phaser draws latest frame after state change; the canvas still shows old in-flight frame with ball outside visible area (x -??) and then subsequent frames show it reappearing left. Need no issue.

Let's edit.

Need reload and inspect initial screenshot, check console.

Initial screenshot good; ball docked visible and event log visible. Great.

Need test mouse movement and bounds. Use `click` at near left canvas x=60,y=606 (screen). Need pointerdown on canvas. Then inspect. Could also use `drag` to right edge. Let's call click left.

Interesting screenshot shows paddle still center, ball center, despite DOM state x82. Again screenshot appears previous frame due to tool screenshot capture timing? It says frame at +0ms, likely captures before click event update rendered. Need subsequent screenshot to see visual. But DOM state confirms clamp at left exactly. Need maybe screenshot call separately after a delay. Browser `screenshot` might capture current output. Let's call screenshot.

Now visual still center, while DOM x82. That's a clear inconsistency: the paddle sprite is not moving visually despite `this.paddle.setX(this.targetX)` and body update. Why? Perhaps pointer click at x62,y606 sets target x82 but then global keydown? no. DOM says x82 from snapshot reading `this.paddle.x`, so sprite should be at x82. Yet screenshot shows center. Could be screenshot is cached from previous frame due WebGL readPixels issue? Browser tool screenshot seems same initial. Need perhaps motion to advance rendering; maybe WebGL canvas not updating because game loop is paused when browser tool takes screenshot? But initial screenshots after motion showed moving ball, so loop runs. Could be screenshot capture grabs a cached canvas frame (WebGL preserveDrawingBuffer false) from initial; warnings about readPixels. Need call motion to force repaint and capture frames. Let's do motion perhaps.

Frames show paddle center even though DOM x82. Only frame2 center with ball; frames1/3/4 no paddle/ball at all! This suggests WebGL rendering is flickering/canvas layer momentarily missing due to screenshot compositor (ball/paddle perhaps generated textures being cleared) or Phaser alternating frames? Need investigate. Maybe `preserveDrawingBuffer` false and browser screenshots via compositor capture sometimes miss canvas? But bricks/HUD are visible consistently; dynamic sprites disappear in some frames. Could be depth issue or something. Actually frame1 and frame3/4 no paddle/ball; frame2 center paddle/ball. Could be an animation/tween that flashes dynamic sprites? No. Could be WebGL texture batching issue caused by repeated `body.updateFromGameObject()` every frame? Not likely. Could be our `dockBall()` calls `body.updateFromGameObject()` and sets ball velocity zero, and `setPaddleX()` calls `body.updateFromGameObject()` every frame. Maybe these methods call `world.staticTree.remove`? No, dynamic body updateFromGameObject just updates bounds. Could somehow set transform scale? no.

Wait perhaps the paddle sprite is at x82 in DOM but graphics are drawn at center because Phaser's WebGL transform matrix uses body's `position` to render? No, sprite x should render. But screenshot frame2 shows paddle center, not x82. Could be screenshot is stale from initial frame (before click). WebGL canvas may not be updating at all due to game loop being paused when page not focused? Yet ready prompt alpha changes across frames (frame2 brighter, others dim), so canvas is updating some objects. The paddle might actually be at x82 but hidden under left boundary? In frame2 center paddle visible at x400. That could be a stale frame from before click; maybe screenshot frames alternate between current DOM canvas and stale frame due double-buffering. Hmm.

Maybe `motion` frames are not 4 sequential screenshots but something else: frame1 maybe first screenshot, frame2 maybe second; images attached show first no paddle, second center, third no paddle, fourth no paddle. Could be alternating due to `Phaser.Scale.FIT` canvas being resized/recreated? Or actual game render flicker because dynamic sprites are being culled due to body position? Let's understand.

Phaser WebGL renders dynamic sprites into canvas. Static background drawn as Graphics object; HUD text. If dynamic sprites disappear in some frames, perhaps their texture is being destroyed? We call `this

.makeTextures()` once; no. Maybe `this.bricks.clear(true,true)` with `destroyChild=true` could destroy shared textures? No, group children only. But restart called once at create after textures; no repeated. Maybe score puff text tween? none in ready.

Could be `ball` and `paddle` are being drawn with depth 5/6, while some transparent Graphics overlay with depth -10? no. Ready prompt depth9. bricks depth3. All visible.

Maybe `paddle.body.updateFromGameObject()` with dynamic body sets `gameObject.x` to body's position or vice versa? Let's look at source. We saw `updateFromGameObject` reads transform. Fine.

Maybe because ball/paddle are physics sprites and Phaser's Arcade physics `postUpdate` overwrites gameObject x/y from body position each frame. We call `paddle.setX(target)` in Scene.update, then `body.updateFromGameObject()` syncs body position. But then next frame the physics body's `postUpdate` may set `gameObject.x += delta`, where delta is body.position - prevFrame. Since we called `updateFromGameObject` mid-frame after `postUpdate`, `prevFrame` still old body position; at next frame `postUpdate` computes `e = t.x - this.prevFrame.x` and adds e to sprite x. Need examine: Dynamic body preUpdate sets `prevFrame`? At start of each physics step:
```
this.prevFrame.copy(this.position)
```
likely. If we call `updateFromGameObject()` in Scene.update after postUpdate, body.position changes but `prevFrame` remains old; at next preUpdate, perhaps prevFrame copies position (new), so fine. But if not, may double move or snap back. Let's inspect. Search around `preUpdate` to see `prevFrame`.

At preUpdate it calls updateFromGameObject from gameObject.x, so setting sprite x is enough; body sync fine. At postUpdate it sets sprite x += delta from body movement. At next preUpdate sync from sprite. Fine.

Why flicker? Could be `setPaddleX` called every frame with targetX from pointer event. If `pointermove` events fire continuously due browser tool mouse position maybe alternate between x62 (left) and something else? DOM state at end x82. But screenshot frame2 center perhaps from a pointermove event to center caused by browser tool? No motion tool maybe moves mouse? It might simulate mouse? Not sure.

Could be `window.__breakoutState` DOM state stale from click at left but actual scene target changed back to center due a `restart` call triggered by something? No restart event log. Maybe global keydown R from browser tool? no.

Need perhaps use `type: Phaser.CANVAS` instead of AUTO/WebGL to avoid WebGL screenshot flicker. This is important: browser tool likely captures WebGL canvas poorly due GPU readPixels warnings. Canvas renderer would be more reliable. Could switch to `Phaser.CANVAS` to avoid WebGL warnings and flicker. Performance fine for 60 bricks. Need do that. Then screenshots should reflect actual state. This likely solves. Let's switch config type to `Phaser.CANVAS`. Need perhaps preserve drawing buffer? Canvas renderer always. Use no WebGL. Good. Let's edit.

Need reload and test.

Canvas initial stable. Need click left then screenshot.

Still screenshot captured stale frame at click (paddle center maybe hidden due prompt alpha?), while DOM x82. Need maybe screenshot next call after 100ms. Let's call inspect maybe process time.

Now screenshot shows paddle center despite DOM x82. That's weird. Could be visual game state actually center because `paddle.x` DOM reads x82 from sprite but render transform uses something else? Need maybe inspect canvas pixels via JS? Browser inspect perhaps can evaluate expressions? Let's test `inspect` with text as expression maybe. But perhaps easier add a visible Phaser debug text showing paddle x; will draw from scene's paddle.x. Yet DOM already. Need understand discrepancy.

Wait perhaps the screenshot is showing a *different* paddle from the `paddle` sprite? There might be two paddles: `this.paddle` sprite at x82 (hidden?) and a generated texture residue at center from initial draw that isn't being cleared because background Graphics object only draws once and Canvas renderer does not clear canvas each frame? Phaser Canvas renderer normally clears entire canvas each frame with backgroundColor. But perhaps `Graphics` background at depth -10 covers whole canvas; should clear. If it doesn't clear, old paddle image could persist as ghost and new paddle at x82 maybe also should appear. Screenshot shows only center paddle, no left paddle. Could be stale last frame from before click, and canvas is not rendering after click because game loop stopped? But DOM state updates from `update()` every 100ms, so game loop running. However DOM state x82 is from `paddle.x`; if game loop running, render should show x82. Unless screenshot tool captures a cached frame from initial page load, not current canvas, while DOM output is current. Maybe canvas screenshots are static snapshots due browser tool caching of canvas pixel buffer? The ready prompt alpha changes in screenshot (initial bright vs click dim) indicating screenshot might be from a different frame but not necessarily stale: alpha pulse timing can differ. Could be from a frame before click but with different alpha due initial animation. Hmm.

Let's check via `motion` after left click; maybe frames will show left paddle.

Now all frames exactly same (center paddle) with DOM state x82; also ready prompt alpha no pulsing in Canvas frames, suggesting canvas render is frozen! Wait Phaser Canvas game loop may be paused because browser tool screenshot toggles visibility? But DOM state still updates from `update()`? Actually DOM state perhaps only updated after click via pointerdown? `setPaddleTarget` doesn't publish state; but `update()` publishes every 100ms. If game loop frozen after click, DOM state could still be from click? Yet snapshot x82 wouldn't be published by pointerdown unless `setPaddleX` called immediately, which it does! Ah! `pointerdown` handler calls `setPaddleTarget(x)` only, not `setPaddleX`; but update would call setPaddleX and publish. DOM state x82 requires at least one update loop running after click. But maybe pointerdown worldX x82 and `setPaddleTarget` plus not publish; then update ran once to set x82/publish, then game loop stopped/frozen. Could be browser tool freezes page during screenshot capture after one frame? Motion frames all identical because game loop paused when screenshot tool runs? But earlier during launched motion, ball moved and events happened. So maybe game loop is running but ready prompt alpha pulse not visible because alpha stays ~0.5? Could be text alpha changes but screenshot doesn't show subtle differences? It should.

Maybe Phaser Canvas renderer is not clearing/repainting because `autoRender` got disabled? Need inspect `game.loop.running`. Maybe browser inspect can eval via text. Let's test with `action:"inspect", text:"window.__breakout.state().paddle.x"`; perhaps tool might print result as console? Could be no. Need find custom tool docs? We have only browser tool; maybe hidden ability to evaluate expressions via `text` on inspect. Let's try.

Expression not evaluated. Need perhaps use `type` action into an input, no. Could create a debug input that evaluates JS via `new Function`, then use browser type, but overkill. Could perhaps use `key` with text to trigger console? no.

Need diagnose visual frozen issue. Maybe Phaser Canvas game loop is not rendering because game boot config `scale.mode FIT` with CSS canvas width/height fix causes canvas CSS size mismatch? But initial draw works. Could be `this.dockBall()` calls `ball.setVelocity(0,0)` each frame, which may cause physics world to consider no motion and Phaser's `game.loop` still renders. Should repaint.

Maybe pointerdown at canvas causes Phaser game to lose focus? No.

Maybe our `window.addEventListener('keydown', event => event.preventDefault())` not relevant.

Maybe Phaser Canvas renderer enters "smart render" mode that only renders when something changes; sprites x changes but renderer doesn't know because `body.updateFromGameObject()` might set `gameObject.renderFlags`? No.

Could be `game.loop` running but `this.game.renderer` not rendering because something throws an exception in render each frame; console would show error perhaps. No errors.

Could be screenshot tool is showing a static image generated from initial canvas DOM snapshot via `HTMLCanvasElement.toDataURL` at page load, not re-capturing canvas after changes. But earlier motion after launch showed ball movement in WebGL screenshots, and after Canvas switch maybe not tested launch. Need test launch with Canvas to see if canvas updates. If it does, then perhaps ready state canvas freeze due no velocity? Let's click Launch button and motion.

Now canvas updated: ready prompt gone, paddle disappeared entirely, ball at center ~x456,y585 (ball y529). Why paddle disappeared? DOM x82, but screenshot no paddle at left, and no center paddle. So paddle sprite visually not rendering at x82. Maybe because paddle at left edge is clipped by world bounds/physics body? Wait screenshot canvas left boundary screen x~76, paddle at world x82 -> screen x138; should be visible. No paddle anywhere. Could be `paddle.setCollideWorldBounds(true)` with world bounds x20 and body `checkWorldBounds` sets body.position.x=20 but `gameObject.x` becomes something weird? But DOM x82. Hmm.

Maybe paddle is rendered behind background graphics due depth? Background graphics at depth -10, paddle depth5. no.

Could be staticGroup bricks cross? no.

Could be paddle texture was destroyed by `bricks.clear(true,true)`? Wait `restart()` in create calls `this.bricks.clear(true,true)` on empty group. No. But maybe `clear(true,true)` destroys all children of group; no texture. Fine.
Could be ball/paddle are being hidden by `this.readyPrompt.setVisible(false)`? No, container only children.

Maybe `paddle` sprite is actually invisible due `setPushable(false)`? no.

Need inspect game object flags. Could add debug `console.log` about paddle visible, alpha, x, texture etc. Maybe browser inspect console after click. Could use our existing snapshot to include `paddle.visible`, `paddle.alpha`, `ball.visible`, and maybe renderer type. Need add to snapshot. Could also add a generated marker moving with paddle perhaps not.

Let's inspect via JS somehow. Could use browser tool `type` into an input if we create a debug command field. But easier modify snapshot to include `visible`, `alpha`, `depth`, `textureValid`. Then inspect DOM. Also maybe `canvas` pixel sampled at expected paddle position via `document.querySelector('canvas').getContext('2d').getImageData` but Canvas renderer uses 2d context; we can include pixel sample in snapshot. Yet Phaser Canvas renderer may use context; we can call `getImageData`. Could add debug to snapshot maybe too much. Let's first add paddle.visible/alpha and ball.visible to state. Also perhaps `camera.visible`. Need maybe not necessary but helpful.

Could be because paddle x=82 but `paddle.setCollideWorldBounds(true)` with world left20

and body left? At x82 body left=22, right142, fine. At left edge CSS player, should still show. Could be body `checkWorldBounds` modifies `sprite.x` to 20? snapshot x82. no.

Maybe Phaser's culling? A sprite with `setCollideWorldBounds(true)` has customBoundsRectangle? no.

Maybe `this.paddle.body.updateFromGameObject()` sets `this.paddle.renderFlags`? no.

Let's see if screenshot after launch further frames shows paddle at left. `motion`.

Now images show paddle at center x456 screen, despite DOM x82. Also no ball visible. So visual paddle x = center and DOM x =82. This confirms the sprite used for rendering is not the same as `this.paddle`? Wait screenshot paddle center x456 screen corresponds world x400. DOM x82. Could be two paddles: one rendered from background Graphics? No, background Graphics could have drawn a paddle? We didn't. Could be another physics sprite from a previous Phaser.Game instance? Ah! Browser reload may not destroy previous Phaser.Game instance; each reload creates a new canvas, but maybe old canvas remains? No, DOM only one. But perhaps even after reload, script runs multiple times due browser tool preserving old page state? Maybe multiple Phaser.Game instances are layered? `reload` should clear.

Could be Canvas renderer not repainting paddle position because texture image caching? But it still draws at center from initial frame; perhaps canvas is not being cleared by Phaser; background Graphics drawn once at startup, and old paddle remains as pixel residue, while new paddle is drawn at x82 but maybe under background? Hmm. If canvas isn't cleared each frame, old paddle at center would remain, and new paddle at x82 should also be drawn. But perhaps new paddle isn't drawn because its x=82 is considered outside camera cull due body bounds? Need investigate.
Actually the screenshot's paddle could be stale residue from initial center, and new paddle at x82 is culled/invisible. When ready prompt alpha pulses, HUD/bricks change (score, lives, brick removed) and could be redrawn on top, but stale paddle remains because background doesn't clear? Yet background graphics drawn every frame should cover entire canvas, including stale paddle. Unless Graphics object is cached to a texture and only re-rendered if changed? Phaser Canvas renderer should clear.

Maybe screenshot is not a live canvas but a cached bitmap from initial state composited with DOM overlay; however HUD text and brick count updated, so parts of canvas are live. The paddle center could be a stale layer that's not redrawn because static background doesn't cover it? Wait background Graphics is a GameObject drawn each frame with depth -10. It fills entire canvas. That should clear stale center. Unless Phaser Canvas renderer uses dirty rectangles and only clears changed regions? I think Phaser Canvas renderer clears whole canvas each frame (`clearRect`), so no stale.

Could there be duplicate paddle created by `this.physics.add.sprite` and `this

.bricks.clear(true,true)`? No.

Perhaps `this.paddle.x` is x82 but the sprite's **render x** is center because `setPaddleX` sets `this.paddle.setX(this.targetX)` but the Arcade Body `postUpdate` later overwrites `gameObject.x` with body's previous center (400). Yet snapshot at end of update sees x82 before postUpdate; rendering uses postUpdate x=400. This is key! Scene.update occurs **before** physics `postUpdate`? Need understand Phaser loop ordering. We assumed postUpdate before scene.update, but perhaps Arcade physics world is updated after scene.update, and bodies' `postUpdate` after scene.update modifies sprite x. Then snapshot in `update()` sees x82, but render sees body-driven x=400. Why would body-driven x be 400? Let's trace:
- At start of each frame, dynamic body preUpdate calls `updateFromGameObject()` from sprite x (which was 400 from previous postUpdate).
- Scene.update sets sprite x=82 and calls body.updateFromGameObject(), so body.position becomes left-side.
- Then Physics world step uses body.position; postUpdate computes delta from `prevFrame` maybe set at preUpdate to old body.position (400). If body.updateFromGameObject() changed body.position to82 in scene.update, then postUpdate `e = body.position.x - prevFrame.x` = -318 and adds e to gameObject.x (currently82) => gameObject.x = -236! Not 400. But maybe body.position isn't changed due physics? Hmm.
Wait perhaps Arcade world step and body preUpdate happen **after** Scene.update (in `Scene.Systems.step`?), then postUpdate at end. Need look at Phaser Scene update loop. Usually order:
1. Scene Systems events PRE_UPDATE
2. Scene.update
3. Scene Systems events UPDATE
4. Scene Systems events POST_UPDATE
Arcade Physics World listens to UPDATE or PRE_UPDATE? Colliders update on UPDATE. Body preUpdate/postUpdate happen in World.update (maybe UPDATE event). Render occurs after POST_UPDATE. If scene.update runs before physics world update, then our `setPaddleX` in scene.update is okay: preUpdate syncs body from sprite; physics step applies velocity/collisions; postUpdate updates sprite from body. But then calling `body.updateFromGameObject()` in scene.update is redundant. The body might have been moved by collisions from previous frame; setting sprite x directly before preUpdate should sync fine

though. Why render x center? Could be `paddle.body.updateFromGameObject()` changes body.position but body.prevFrame from last frame still center; then physics postUpdate calculation weird. Need inspect loop order and body postUpdate.

Let's look at Phaser Arcade World `update` and scene events. Search for `postUpdate` calls.

Need determine Scene update event order. Search `scene.sys.events.emit` maybe. But simpler: We can avoid body postUpdate overriding sprite by not relying on dynamic body's `moves` or by using static image for paddle. But need understand.

Dynamic body preUpdate's `updateFromGameObject()` from gameObject.x; then physics update integrates velocity; then postUpdate sets gameObject.x += body.position - prevFrame. If velocity=0 and no collisions, body.position remains gameObject.x at preUpdate; postUpdate delta=0, so sprite x remains our set x. So paddle should render x82. Unless body has velocity due collision pushing (we set immovable and pushable false). Ball collision might push paddle? But initial ready no ball collision. Could have velocity y? no.

What if `paddle.setCollideWorldBounds(true)` and world bounds left x20 cause `checkWorldBounds()` to set body.position.x=s.x=20; then postUpdate delta from prevFrame; could shift sprite; but at x82 body.position.x =22 (due offset), >20, no collision. Fine.

Could be `body.updateFromGameObject()` called in `setPaddleX` during scene.update **after** physics step but before postUpdate. Then postUpdate uses body.position changed from center to left but delta = body.position - prevFrame = -318, and applies to gameObject.x (currently82) => -236. Yet snapshot from next scene.update would read -236, not82, unless preUpdate reset from gameObject x=-236 then our setPaddleX sets back82. So snapshot could be always82 while rendered x is -236 (invisible). But screenshot paddle center still maybe stale from initial. That could explain no paddle at x82 and no visible ball! Ball docked similarly uses `body.updateFromGameObject()` every frame, causing it to be rendered at weird position. Yes! This is likely. Need avoid calling `body.updateFromGameObject()` on dynamic bodies in Scene.update if order is post-physics pre-postUpdate. Instead use `body.reset(x,y)` perhaps, which sets `prevFrame` too. Or better set positions via `body.reset()` which updates prevFrame and body position consistently. Need perhaps manage order.

Let's understand Phaser loop ordering: Scene.update likely called on `UPDATE` event, while Arcade Physics World update also on `UPDATE` event with order depending registration. Arcade plugin may register on `PRE_UPDATE`? Need search. But the

symptom strongly suggests postUpdate issue. We can use `body.reset()` to set sprite/body/prevFrame consistently. `reset` stops velocity and sets gameObject position + body top-left, prev, prevFrame, autoFrame. That should prevent postUpdate jumps. For paddle, set `body.reset(x,PADDLE_Y)` each frame; it zeros velocity (fine) and sets all consistent. For ball docked, also `body.reset(x,y)` each frame; it zeros velocity (fine). For brick bounce normalization, we don't change position. For paddle collision callback, we call `ball.setPosition(...)` + `body.updateFromGameObject()` during physics collision processing (world step), which might also cause postUpdate jump. Better use `ball.body.reset(x,y)` then set velocity. Need but `reset` stops velocity; then set desired velocity. It also updates prevFrame to new position, so postUpdate adds velocity*dt normally. Good. For loseLife/dock, use body.reset. For forceGameOver, use body.reset. For brick hit, no position changes. For initial ball/paddle creation, no need.

Need perhaps use `paddle.body.moves=false` and manually set x without body sync? Could use static body with refresh. But dynamic with reset works.

Need perhaps check body.reset coordinate semantics: It sets `gameObject.setPosition(t,e)`, then `getTopLeft(s)` to body.position. For paddle body with custom offset (2,1), `body.position` should be top-left of sprite plus offset? `getTopLeft(s)` sets s to gameObject top-left (x-62,y-9), ignoring body offset. Hmm `reset` sets body.position to gameObject top-left, not adding offset. That could shift body center relative to sprite by offset. But body's `offset` remains 2,1; preUpdate's `updateFromGameObject()` will set position correctly. Yet if reset's prevFrame uses top-left without offset, postUpdate delta may be offset shift ~2px; minor. Need inspect source reset: 
```
reset(t,e){ this.stop(); var i=gameObject; i&&i.setPosition(t,e); var s=this.position; i&&i.getTopLeft?i.getTopLeft(s):s.set(t,e); this.prev.copy(s); this.prevFrame.copy(s); this.autoFrame.copy(s); i&&this.updateBounds(); this.updateCenter(); ...}
```
It indeed sets body.position to top-left, ignoring offset;

maybe `getTopLeft` uses display origin and body offset? no. Could still be fine after preUpdate. But to preserve body offset, we can call reset then `body.updateFromGameObject()` and also set `body.prevFrame.copy(body.position)` maybe accessible. Need perhaps simpler: use `body.position.set(x - originX + offset.x, y - originY + offset.y)` and `body.prevFrame.copy(body.position)`, `body.prev.copy(...)`. Could use `body.reset(x,y)` then `body.updateFromGameObject()` then `body.prevFrame.copy(body.position)` and `body.prev.copy(body.position)` and `body.autoFrame.copy(body.position)`. That would fully sync. But calling `body.reset` also sets velocity zero; we can set desired velocity afterward. Need perhaps expose Vector2 copy methods. yes.

Could create helper:
```
syncDynamic(gameObject, x, y) {
 gameObject.setPosition(x,y);
 const b=gameObject.body;
 b.updateFromGameObject();
 b.prev.copy(b.position);
 b.prevFrame.copy(b.position);
 b.autoFrame.copy(b.position);
}
```
This sets body position based on transform and offset, and prev/prevFrame/autoFrame consistent. Need maybe also `b._dx=0; b._dy=0;` not necessary. `b.prev` used in update; copy to position. `b.prevFrame` used postUpdate; copy. `b.autoFrame` used directControl false but harmless. Then set velocity. This should prevent postUpdate position jumps. Could use setVelocity after. Need maybe physics step order: If scene.update runs before physics step, syncing prev/prevFrame is still okay. If after step but before postUpdate, syncing prevFrame to new position ensures postUpdate delta = body.position - prevFrame =0 (except velocity not applied because step already happened), so rendered sprite remains set position. Good.

Need use helper everywhere we set position:
- `setPaddleX`: gameObject.setPosition(target, PADDLE_Y?) currently only setX; use `syncBody(this.paddle, target, PADDLE_Y)`.
- `dockBall`: syncBody(ball, paddle.x, dockY), setVelocity(0,0).
- `onPaddleHit`: syncBody(ball, ball.x, y), setVelocity(vx,vy).
- `forceGameOver`: syncBody(ball,W/2,H+30), setVelocity maybe (0,100).
- maybe `restart` no direct.
- `ball.body

.enable` etc no.
- `ball.body.updateFromGameObject()` in create? no.
- `brick.refreshBody()` static fine.
- `loseLife` no set.
- `ball.setPosition` from physics integration naturally, don't sync.
- `launchBall` no position set.
- brick collision normalizes velocity only.

Need note `body.prev` and `body.prevFrame` perhaps private but accessible. `autoFrame` too. Fine. Could also set `body._dx=0; body._dy=0;` to avoid collision slope weirdness. Might help.
```
function syncArcadeSprite(sprite,x,y){
 sprite.setPosition(x,y);
 const body=sprite.body;
 body.updateFromGameObject();
 body.prev.copy(body.position);
 body.prevFrame.copy(body.position);
 body.autoFrame.copy(body.position);
 body._dx=0;body._dy=0;
}
```
Need perhaps preserve scale? fine.
Need not call `body.reset`.

Need perhaps issue with ball/paddle visual frozen due this helper not enough if Phaser renderer is rendering after postUpdate and body velocity=0. Let's reason:
If Scene.update runs before physics step: sync body prevFrame new; then body.preUpdate might run later? Wait preUpdate is part body.update in world.step, which runs on UPDATE event perhaps after Scene.update. It sets prevFrame to body.position (same), then update integrates velocity (0), then postUpdate delta=0, sprite stays. good.
If World.step runs before Scene.update: body step done, postUpdate might run after Scene.update; sync prevFrame new; postUpdate delta=`position - prevFrame`=0, sprite stays. good.
Thus robust.

Need ensure setting velocity after sync in `onPaddleHit` during world.step: If postUpdate runs after, prevFrame synced to position at collision time, then postUpdate delta = body.position - prevFrame maybe body.position might have been shifted by separation and velocity not integrated until next step. Should be okay (small delta). Then next frame physics integrates velocity. Good.

Need adjust `setPaddleX` to pass y PADDLE_Y. Need avoid calling `this.paddle.body.updateFromGameObject()` directly. Use global helper function `syncArcadeSprite`.

Need perhaps body `moves` true and physics postUpdate applies velocity delta; paddle velocity zero, fine.

Need maybe ball docked has body velocity zero, fine.

Need perhaps add `visible`, `alpha` to snapshot to verify.

Let's edit.

Need reload and click left, then inspect screenshot.

Initial good. Need click far left and screenshot.

Great! Fix worked. Paddle and ball at left bound. Need test right bound. Click x=845,y606 (within canvas right edge screen 856; world x789 clamp718). Use click then inspect.

Screenshot shows paddle at right bound, ball x~774 screen (world718), but DOM state still x82! Ah screenshot is one frame ahead of DOM snapshot? It shows right bound while DOM state left bound. Interesting: click action screenshot after pointer event may render new position, but DOM state snapshot may be stale from prior frame because publishState only every 100ms and click result output captured immediately. The DOM snapshot can lag up to 100ms. So earlier center screenshot vs DOM x82 might have been from stale frame because screenshot was updated? Actually now screenshot after click shows right, DOM x82 from previous left state. This confirms DOM snapshot lag. Need call inspect again to see DOM catch up. The visual is correct. Great.

Need call inspect to see right-bound state.

Now both visual and DOM right bound, inside true. Good.

Need keyboard Left/Right verification. Need browser `key` tool. Could call `action:"key", text:"ArrowLeft"` perhaps. Let's try from right bound. Need maybe key event by browser tool sends key down/up; if no keyup maybe heldKeys stays. We'll see state change. Could call key then inspect.

Key action didn't move perhaps because text "ArrowLeft" not recognized or keydown/keyup immediate with no frames in between. Need perhaps use `drag` or call repeatedly. We can test another `key` text maybe "ArrowLeft" and then `inspect` after motion. Need maybe tool's key action triggers a keyboard event with `key` property, but our listener checks `event.code`; perhaps tool sets `key` but code maybe "ArrowLeft". likely. Could use `text:"a"` to hold? Need maybe action `key` with text `"ArrowLeft:down"`? Unknown.

Could add alternative via Phaser keyboard `this.input.keyboard.addKeys`, but tool may dispatch proper DOM events. Need maybe inspect exact. Could add a global listener that logs `event.code` and `event.key` for keydown; then browser console after key would reveal. We can temporarily add console.log in listener; not ideal final but could remove. Or perhaps browser key tool itself sends `keydown` and `keyup` too quickly, so no update frame with held key; our update loop samples held state and misses it. We can fix by applying movement immediately on keydown rather than requiring it held across a frame. On each keydown for left/right, adjust `targetX` by a discrete step (e.g., 28 px) and setPaddleX immediately. Then even instant key press moves paddle. And while key held, update continues movement. That also ensures keyboard works reliably with browser tool. Need avoid double counting? Fine.

Implement in global keydown handler:
```
if (['ArrowLeft','KeyA','ArrowRight','KeyD'].includes(event.code)) {
 const step = 28;
 const dir = ...
 sceneRef.setPaddleTarget(sceneRef.targetX + dir*step);
 sceneRef.setPaddleX(sceneRef.targetX);
}
```
Need not do on event.repeat? Actually repeats can accelerate; update also handles. Fine. Could perhaps only if !event.repeat, but browser key repeats maybe. Use every keydown. Need call `publishState` immediately? `setPaddleX` could publish; we can call `sceneRef.publishState()` to update DOM. Good.
Need also maybe keyup release. Fine.
This satisfies keyboard control robustly. Need perhaps use `event.key` fallback if browser tool sets code empty:
```
const code = event.code || (event.key === 'ArrowLeft' ? 'ArrowLeft' : ...);
```
Could normalize. Add:
```
function

keyCode(e){
 if(e.code) return e.code;
 const k=e.key;
 if(k==='ArrowLeft') return 'ArrowLeft'; ...
 if(k===' ') return 'Space'; if(k.toLowerCase()==='r')...
}
```
Use code. Need browser key action perhaps sends event.key="ArrowLeft" but code="". We'll handle.
Need log maybe not necessary.

Also need test Space keyboard. Browser key tool with text "Space" or " " maybe. After adding fallback, we can test. Need launch via visible button already verified.

Need verify paddle collision. We can use mouse to position at predicted landing x644 and launch. Need perhaps use click on canvas at screen x700 (world644) then click Launch button; launch from x644? Wait in ready state ball docks to paddle, so if paddle at x644, ball starts x644, not center. Our earlier first brick hit at x513 was from starting center. Changing paddle position changes initial ball trajectory and brick hit location. Need compute new path from x644 with vx170, vy-345: time to brick bottom row y277 (from y529) ~252/345=0.73s, x moves124 to768, near right wall. It may hit a brick at x~768 or right wall at780 before brick? Bricks rightmost center ~? total width743 start28.5, centers62.5+9*75=737.5, right edge771.5. Ball x768 at y277 hits rightmost brick. Velocity flips down, vx maybe +162. Then from y277 to paddle543 takes0.81s, x+131=899 -> bounces off right wall at780 after0.07s then travels left vx=-162 for0.74s -> x660. Paddle at644 maybe intercept (paddle half62, ball radius9 => center range582..706) yes. So likely paddle hit. Good. We can click at screen x700 (world644), then Launch and motion; should get brick hit and paddle bounce. Need maybe ball starts at x644 from paddle, so initial x projected at brick ~768. Good.

Could also set paddle to center after launch via mouse while ball in flight, but pointer events need timing. Starting at x644 and leaving there likely fine.

Need verify wall bounce side perhaps this path will hit right wall and log WALL RIGHT. Good. Need ensure our wall detection catches bounce at x=WALL_R-9? World bounds right=780,

ball body right at780, `body.blocked.right` and body.right>=779 true. Good.

Need verify paddle hit; with `onPaddleHit` guard `ball.body.velocity.y < 0` and cooldown. Collider separation happens before callback and reverses velocity from downward to upward maybe! Wait we saw from source separation first, callback after. If collision callback sees `ball.body.velocity.y` after separation, it may already be negative (upward), so our guard `if velocity.y < 0 return;` would prevent paddle hit callback and custom direction! That's a serious issue. In earlier game, no paddle hit event, but ball missed anyway. Need check. Arcade separation with bounce 1 on dynamic ball vs immovable paddle likely reverses y velocity. Then callback after separation sees negative vy; our guard returns. Natural bounce still occurs, but no custom angle/log. Requirement "contact changes ball direction" can still be satisfied by natural bounce; but we'd like robust controlled angle and event. Need change guard to use `this.lastVelocity.y > 0` (pre-collision downward) rather than current velocity. Use stored lastVelocity from end of previous update. If `this.lastVelocity.y <=0` return. Then callback can set custom upward angle. Also if ball collides while lastVelocity stale maybe fine. Need remove `ball.body.velocity.y < 0` guard. Use:
```
if (this.mode !== 'playing' || this.lastVelocity.y <=0) return;
```
Need perhaps collision callback after separation and we set `ball.body.velocity` custom; good.
Need `lastVelocity` updated at end of update each frame after collision. In update, if mode playing, we set `this.lastVelocity` to current ball velocity. But collision callback may happen during physics step before scene.update; lastVelocity from previous frame. good.
Need perhaps if scene.update runs before physics step, lastVelocity set from current velocity before collision, also good.
Need cooldown. Fine.
Need use `ball.x` maybe after separation; okay.
Need check paddle collision naturally from ball moving down: collider separation flips vy to negative; callback sets custom. Great.
Need update event log before/after.

Potential issue brick hit callback similarly separation already flips velocity; our `before` from `lastVelocity` and `after` from current; good. We normalize speed. Fine.

Need check wall bounce detection: body.blocked.right from world bounds maybe resetFlags at preUpdate; after checkWorldBounds body.blocked.right true and position at

right. In scene.update, if world step before scene.update, flags may be reset at next preUpdate? Need order; might not catch. Could use sign-change fallback to detect walls. But we can log actual side wall bounces using velocity sign change and position near boundary, not relying solely on blocked flags. Need perhaps do:
```
const vx=body.velocity.x, vy=...
const prev=this.lastVelocity;
const leftWall = prev.x<0 && vx>0 && body.left <= WALL_L+3;
rightWall=prev.x>0 && vx<0 && body.right>=WALL_R-3;
topWall=prev.y<0 && vy>0 && body.top<=WALL_T+3;
```
This robustly detects. Use contact key. Need note lastVelocity set at end of update after check, so next frame prev is current. Good. Could replace blocked-based check with sign-change+position. Need maybe includes paddle/brick bounce near top? if ball near wall position and vy flips due brick impossible because bricks start y112, >top+3. left/right wall position near side could also hit brick at x near edge and vx flip; but brick widths at x~33-102 and 697-771, ball could be near wall and brick collision cause vx flip. Could mislabel as wall, but less likely. Need perhaps body.blocked flags plus position. We'll combine:
```
const atLeft = (blocked.left || (prev.x<0 && vx>0)) && body.left <= WALL_L+1;
...
```
Good.

Need perhaps add event for "WALL: RIGHT" when ball hits right wall after brick. Fine.

Need key movement immediate. Let's edit all.

Need reload and test keyboard, Space, etc. Could run reload then key ArrowLeft maybe from center; inspect.

Initial looks good. Need key ArrowLeft.

Keyboard works. Need perhaps test ArrowRight and key held? Not necessary; left verifies. Need test Space keyboard. Call key text "Space" maybe.

Space works. Need perhaps wait motion to see brick hit and maybe paddle bounce. Starting x362.7 leads first brick around x487 maybe; after bounce down-right x618; paddle at362 misses. Need maybe move paddle to x618 while ball in flight using mouse click at screen x=674 (world618), y606. We can do click now and motion. Need note pointerdown from canvas might set target; yes. Need click screen x=674. Ball currently y511, but after ~0.05s perhaps y495. Need click tool call immediate maybe time advances ~0.05s. Fine. Need perhaps set paddle to x620. Then motion over 2s. Let's do.

Time between tool calls ~1.6s; ball had already hit brick and missed before click. Need use restart to fresh state and pre-position paddle at predicted landing point before launch. Need determine path from starting x maybe center or choose paddle position such that first brick hit and return to paddle. We can use deterministic physics. Need calculate based on initial ball x = paddle x. Let's derive trajectory with Arcade.

Initial ball center y=529, radius9, vy=-345, vx=170. Bricks bottom row center y = BRICK_TOP + 5*(24+9) =112+165=277, height24, top265,bottom289. Ball circle radius9 approximated body width18; collision with brick from below occurs when ball center y≈289+9=298? Actually ball moving up, collision when ball top (center-9) reaches brick bottom289 -> center298. So time from529 to298 =231/345=0.6696s, x increase113.8. If starting x=400, hit x≈514, matching event 513. After collision, vy=+329, vx=162 (normalized speed367? 170,-345 speed384; after bounce maybe vx162, vy329 speed367). Then ball moves downward. Paddle top ~543 (center552 minus9), ball bottom hits paddle top when center y=543-9=534. Time from298 to534 =236/329=0.717s; x increase116.1. Total x≈630. This matches our earlier predicted 644 and click x619. But event from starting x362.7 gave brick at438 and miss; paddle click at619 came after miss. Need pre-position paddle at x630 **and launch from x630**? But ball start x follows paddle, so initial hit x≈744, maybe right wall bounce, landing x perhaps 700? Let's compute with right wall.

If start x = P, first brick hit x = P+113.8 (unless right wall interference). Return to paddle y=534 at x = P+113.8+116.2 = P+230, unless wall bounce. For collision with paddle centered at P (since we won't move paddle after launch), need P+230 ≈ P, impossible. So one must move paddle after launch from P to P+230. We can set initial paddle center e.g.400 (click screen456), launch, then move paddle to630 (screen686) before ball returns. Need do both clicks quickly

in sequence, perhaps tool call latency ~1.6s is too long? Wait browser tool `click` call itself output with ball y511.8 just after launch, meaning it advanced only ~0.05s. The 1.6s gap between calls is wall-clock inference from timestamps maybe tool actions are delayed by ~1.6s, but game time only advances 0.05s during each call? Let's examine timestamp:
- Space key event at 16:16.881, ball y511.8 (0.05s after launch).
- click event at 16:18.525 (1.644s later real time), but console shows brick at16:17.561 (0.68s after launch) and miss at16:18.525 (1.64s after launch). So game ran continuously in real time between tool calls. Thus we need issue click to move paddle within same tool call? Browser tool supports `drag` with from/to coordinates; perhaps drag from paddle initial center (screen456,y606) to target (screen686,y606) might generate pointermove sequence over some time; but need launch first. Could use a single `click` on Launch button then immediately `drag`? Tool calls aren't batched; parallel wrapper perhaps could run multiple browser actions in parallel but they operate on same page and may not have guaranteed sequential ordering. Could use browser `motion` after launch with predefined paddle movement? We can perhaps add autoplay/auto-move debug mode via QA button that sets paddle to follow ball; then verify paddle hit. But requirement human control still works; we can add an optional "Auto paddle" toggle for QA? Might be overkill. Or use keyboard hold via browser tool `key` with text maybe it holds key down for some duration? Need determine. Could use `drag` from x456 to x686 while ball is in flight; all pointermove events happen over ~? Browser drag action likely takes some time and moves in steps, perhaps 0.5s; could get paddle to target before ball returns. But need call drag right after launch; tool call gap ~1.6s due analysis time, but game runs. We can reduce analysis time by making two browser tool calls back-to-back in a single assistant message? We can call multi_tool_use.parallel with two browser actions, but they may execute concurrently; not good. Could perhaps call browser `click` launch then `drag` via one tool call? No multi-action tool. Could script

the game to auto-move paddle after launch to a predicted x; but that's not actual user mouse control. Need only verify contact changes direction; we can add a QA "Intercept" button that sets paddle x to630 and launches from center simultaneously by decoupling initial ball launch from paddle position. Actually can modify launchBall to always start ball from center? But requirement initially rest ball on paddle, so no. Could use QA method `demoPaddleBounce()` that resets ball to just above paddle with downward velocity and paddle center aligned, triggering collider; but that would verify collision physics. Could add a QA button "Paddle bounce demo" that prepares a ball approaching paddle from above, with paddle centered, and mode playing. Then motion shows bounce. That might be acceptable for verification, but user task says "Verify: Launch the ball, move the paddle, and inspect the opening bounces. Check that contact changes the ball direction..." We can verify natural brick direction via event; paddle contact can be verified with QA state or by direct interaction. Need perhaps not add extra QA button; can expose `window.__breakout.demoPaddleBounce()` and browser tool can't eval. Could add visible QA button.

Alternatively use browser `drag` action to move mouse while ball is in flight, starting from launch? Maybe use one `drag` from Launch button to canvas target? That could trigger click on launch at start then pointermove into canvas at end. Browser drag path from (1002,326) to (686,606) may generate pointerdown on Launch button and pointermove events outside canvas; when pointer enters canvas, Phaser input may receive pointermove only if pointer is captured? Phaser canvas may not receive mouse events when pointer started outside canvas unless global capture; likely not. Could directly drag from canvas center (where paddle is) to target after a separate click launch, but need first call. Maybe we can use browser `drag` with `toX`/`toY` and then `key` Space in parallel? Could perhaps click Launch button at start of drag path? Hmm.

Alternative: use `key` action to hold ArrowRight for ~230px while ball is in flight. Browser key tool might produce keydown+keyup with a duration; earlier one key press moved immediate 28px plus a few frames continuous movement (state x362.7 from 400, delta37.3; includes 28 immediate + ~9.3 from held frame). Perhaps repeated key calls can move ~230px quickly if issued in

parallel or sequence. But time between calls too long; ball returns after ~1.4s, so maybe 3-4 calls suffice if each tool call ~0.1s game time plus real gap~? Actually tool calls can be issued quickly by us in one message using parallel wrapper. Could use `multi_tool_use.parallel` with 8 `browser key` actions? They all operate concurrently, likely unreliable but perhaps send multiple keydown events. Need maybe not.

Could use `drag` from screen x456 to x686 directly **after reload** (before launch) to move paddle to x686; then perhaps call `key ArrowLeft` repeatedly to move back center? no. Need launch from center and target right. Could perhaps drag from center to right **while ball is docked and then launch via Space at end of drag?** Browser `drag` action moves mouse from start to end over some time but no key event. Could have game launch on pointerup after a drag? Not required. Could add game logic: when a drag gesture ends (pointerup) and mode ready, launch ball. Then one drag from center to target would set paddle at target and launch at pointerup; ball starts at target, bad. Could instead detect drag direction and launch from original center while moving paddle? Too complex.

Could add a "tap canvas to launch" behavior that launches from current paddle at pointerdown but then pointermove target updates. If we drag from center to target, pointerdown launches ball at center; subsequent pointermove moves paddle to target; pointerup no effect. This would be a natural control too (click canvas to launch) and allow single browser `drag` action to both launch and move paddle! Requirement says Space or visible Launch control starts it; adding canvas click launch doesn't violate. Need implement pointerdown handler: if mode ready, set target based on pointer and optionally launch? But if pointerdown at center, we want launch from center before target moves; then drag moves paddle to target. Could add:
```
this.input.on('pointerdown', pointer => {
 if (this.mode==='ready' && pointer.downElement===canvas?) this.launchBall(); 
 else set target...
});
```
But currently pointerdown merely sets target; adding auto-launch on canvas click could cause accidentally launching when trying to position paddle before game start. That's okay? Mouse positioning in ready state typically should not launch; requirement says Space or visible Launch control starts it, not canvas click. Adding extra launch behavior might be okay but could conflict

with expectation that mouse controls paddle only. Could perhaps restrict to pointer drag: track pointerdown start; on pointermove if distance >X and mode ready, launch from initial docked position then move paddle; that's weird. Not needed.

Could use browser `drag` from Launch button (x1002,y326) to canvas target (x686,y606) with Phaser input maybe receives pointermove events globally? Phaser's input manager listens to canvas element for pointer events, not window perhaps; if drag starts outside canvas, moving into canvas may trigger `pointerover` but Phaser might track via document? Need test. Could perhaps add window-level pointermove listener ourselves so any mouse movement over page maps to canvas coordinates. Then drag from Launch button to canvas target could update paddle even if pointer starts outside canvas, as long as browser dispatches mousemove events to elements under pointer. We can compute world x from clientX minus canvas bounding rect. Then clicking Launch button triggers launch (pointerdown/click) and dragging to canvas target moves paddle. That is actually a nice robust way to support mouse globally. We currently use Phaser pointer events only. Could add a `window.addEventListener('pointermove', ...)` mapping client coordinates to canvas, and update target if pointer is inside or near canvas. Then browser drag from Launch button to canvas target would set paddle target after launch. Need maybe browser tool drag action from (1002,326) to (686,606) would produce pointermove events at intermediate coordinates; when crossing canvas, our window listener can map. Good. Could also implement pointerdown on canvas via window listener with coordinate mapping. But this is extra complexity. Might be worth for verification and robust mouse control.

Need perhaps simpler: add a debug QA "Paddle bounce demo" button. We can click it from fresh reload and motion; it will set up ball approaching paddle and verify collision. But user specifically asks launch/move/inspect opening bounces—already verified launch, move, brick bounce; paddle contact needs verification. Could use demo to check paddle contact, but still not natural opening bounce. Better to implement global pointermove and use drag from Launch button.

Let's consider timing of `drag` action. Browser `drag` likely performs a mouse down at x,y, moves with maybe several steps, mouse up at toX,toY, over some short duration. Starting on Launch button at x1002,y326 triggers click on mouseup? If drag ends at different position, click event may not fire on button (

browser click requires down/up same element usually; drag might not click). But pointerdown on Launch button could perhaps call our HTML button's click? No, button click fires on pointerup, likely at canvas target, so no launch. We could add `pointerdown` listener to Launch button that calls launchBall directly, while `click` listener also calls (guard prevents double). Then dragging from button would launch on pointerdown. Good. Add:
```
launchBtn.addEventListener('pointerdown', () => sceneRef && sceneRef.launchBall());
```
Then browser drag from button to canvas target starts ball and moves paddle via global pointermove listener. Need ensure drag duration enough for paddle to reach target before ball returns (~1.4s). Browser drag likely quick (<0.5s), so yes.
Need global pointermove listener to map client coords:
```
function setPaddleFromClient(clientX,clientY){
 const canvas=document.querySelector('#game canvas');
 if(!canvas||!sceneRef) return;
 const rect=canvas.getBoundingClientRect();
 if(clientX < rect.left-10 || clientX > rect.right+10 || clientY < rect.top-10 || clientY > rect.bottom+10) return;
 const scaleX = W / rect.width; // game world width / displayed width
 const worldX = (clientX-rect.left)*scaleX;
 sceneRef.setPaddleTarget(worldX);
 sceneRef.setPaddleX(sceneRef.targetX);
}
window.addEventListener('pointermove', e=>setPaddleFromClient(e.clientX,e.clientY));
```
But Phaser's pointermove handler also sets target; potential conflict. Could remove Phaser pointermove and use window listener entirely; simpler. But Phaser pointer.worldX may map automatically. Use both could override with same mapping; no issue. Yet if global listener uses `setPaddleX` immediately and Phaser input uses `setPaddleTarget` only, update will apply. Fine.
Need perhaps pointerdown on canvas: our Phaser pointerdown already sets target. For drag from button to canvas, pointerdown outside not set; pointermove inside will. Fine.
Need perhaps browser drag tool doesn't dispatch `pointermove` (could dispatch mousemove only). Add `mousemove` too. Could listen to both `'pointermove'` and `'mousemove'`, but pointermove events typically include mousemove; no harm if double calls.
Need mapping with canvas CSS width 800, actual width maybe800; scaleX=1. If

FIT scale changes, W/rect.width adjusts. Good.
Need maybe mouse pointer moving over side panel after drag will not update, fine.
Need perhaps Launch button pointerdown event can fire from browser `click` action too; click action sends pointerdown then click, launch called twice but guard prevents. Fine.

Need perhaps hide "canvas click to launch"? Not adding, only button pointerdown.

Need test drag from Launch button to target. We can set initial paddle center by restart first. Then drag from (1002,326) to (686,606). Need perhaps target world x=630 (screen x=686). Drag path starts outside canvas; as it enters canvas, global mousemove should update target. Could perhaps end at canvas y606, x686. Need start y326 is side panel Launch button. Need map correct.

Need maybe drag action itself takes ~0.5s, ball starts at x400, first brick at x514, then lands x630 at t~1.39s. Paddle moved to630 by t~0.5s, so intercept. Great.

Need implement global pointermove and button pointerdown. Could use `window.addEventListener('mousemove', ...)` plus pointermove. Need ensure not triggered by browser tool screenshot/cursor? Fine. Could perhaps cause paddle to jump when mouse moves outside canvas after clicking side panel? We only update if within canvas rect plus a small margin. For drag from side panel into canvas, final inside. Good.
Need perhaps `pointer.worldX` from Phaser input uses game scale; global mapping might conflict if canvas rect has border offset. use rect of canvas. fine.

Need perhaps avoid duplicate listeners on reload (not issue). Need register in `registerInput()` maybe global listeners created once; sceneRef set. We can put global outside class:
```
function aimFromPagePointer(e){...}
window.addEventListener('pointermove',aimFromPagePointer);
window.addEventListener('mousemove',aimFromPagePointer);
```
But we need sceneRef defined. Fine. Phaser pointermove still handles. Might call `setPaddleX` immediately. Need perhaps avoid overwriting keyboard movement if mouse is stationary (no events), fine.

Need perhaps update target in ready state and move ball docked? `setPaddleX` moves paddle, update calls dockBall next frame. Fine.

Let's add.

We have ~5 min. Need finalize quickly. Need verify current changes no syntax errors and essential behavior. Need reload, maybe drag launch to intercept, check paddle bounce, then QA win/gameover/restart. Need not overdo.

Need note possible issue normalizedKey with browser key text "Space" -> event.code maybe "Space" or event.key " " fallback; works. Need no syntax issue with global `aimFromPagePointer` referencing W defined before? W defined at top before clamp, yes.

Need reload and then drag from Launch button to target in one action. Let's do reload first.

Need drag from Launch button (1002,326) to target screen x686,y606. Browser drag parameters x,y,toX,toY. Need perhaps drag duration ~? Let's call.

Great! Drag launched and moved paddle to629. Need motion now to let ball hit brick and paddle. Call motion.

Excellent. All opening bounces verified: brick, paddle, wall left/right, score once per brick. Need perhaps verify win/gameover/restart quickly via QA buttons. Need 5 min but user said at most 5, need finalize soon. Could do 1-2 calls. Need perhaps test QA win, restart, gameover. Need open details and click buttons. Coordinates from screenshot details at side panel bottom y646 (screen). Need click summary at x940,y646, then buttons appear maybe y670 etc. But viewport 800 tall, aside bottom y650, details expansion may overflow and scroll; buttons perhaps visible below screen? Could scroll aside with browser scroll action. Alternatively use browser `click` on hidden QA buttons even if details closed? They are inside closed `<details>`, not interactive; likely click won't trigger. Could use keyboard shortcuts direct perhaps no. Could use `window.__breakout.forceWin()` via some eval impossible. Could use browser `type` into content? Hmm.

Maybe use `browser click` on `details` summary to open, then scroll side panel down. Need call screenshot/inspect to find button coords. Could do quick. Need likely enough time. Let's open QA.

Details open but buttons likely below aside clipped; DOM says text. Need scroll aside to reveal. Browser `scroll` with delta maybe at x1000,y600. Let's call scroll delta 300.

Now QA buttons visible at screen x1008,y543 and y580. Need click win test.

Win state good. Need test restart and gameover perhaps one or two calls. Click Restart at x1008,y236 (visible after scroll). Then click lose QA button x1008,y580. Need perhaps after restart scroll position remains. Do sequential.

Restart good. Need gameover click at x1008,y580.

Game over visual shows "READY TO LAUNCH" prompt still visible behind overlay because loseLife doesn't hide readyPrompt when gameover. Need fix essential visual issue: hide readyPrompt in gameover branch. Also launch button says "BALL IN PLAY" in gameover, perhaps okay but could be "GAME OVER" to avoid confusion. Need maybe publish function for mode gameover to set button text "GAME OVER" and win "BOARD CLEARED". Not essential but nice. Need also life loss returns to launch state verified earlier. Need perhaps gameover QA shortcut sets lives=1 then drains one life, okay. Need maybe overlay prompt should hide on gameover. Fix. Need perhaps restart from gameover works (already tested restart from win, likely same). Need maybe click restart from gameover to confirm body re-enable; could quickly test after fix/reload? Time maybe 2-3 min. Need do essential fix then one reload or click restart. Need perhaps no need reload since code edit won't apply until reload. We need save final file; requirement says save index.html now. We can edit then reload for console check; perhaps quick.

Need fix:
```
if (lives<=0) { ... this.readyPrompt.setVisible(false); }
```
`publish`:
```
launchBtn.textContent = s.mode==='ready' ? '▶ LAUNCH BALL' : (s.mode==='win'?'★ BOARD CLEARED':s.mode==='gameover'?'GAME OVER':'● BALL IN PLAY');
```
Need maybe `launchBtn.disabled` still true for any non-ready. fine.
Need maybe `overlay` uses ball visible false; screenshot ball not visible. good.
Need maybe DOM state ball docked false and y630; fine.

Need note QA `forceGameOver()` from ready sets mode playing then calls loseLife; readyPrompt remains visible from prior ready. Fix hides.

Need perhaps natural game over after all lives also should hide prompt. good.

Need perhaps top HUD "LIVES ○○○" good.

Let's edit.

Need reload final and maybe quick inspect initial console no errors. Then perhaps leave. Need maybe final file syntax check via node? Could parse inline script with `node --check` extracted? Quick. Need not. But browser reload will catch.

Final initial screenshot good. Need maybe check file exists and perhaps size. Could use bash quickly. Need perhaps mention unverified behaviors: after final edit, win/gameover were verified before small UI fix; no need re-verify? The fix is simple. Need possibly gameover visual after fix unverified, but functionality verified. Need maybe restart from gameover unverified? Restart from win verified. Need user asked "briefly report what you actually checked and which behaviors remain unverified." Need include that.

Could perhaps run one final quick check of gameover after fix to ensure no ready prompt; but time maybe still okay. Need likely 1-2 min. But user said finalize ASAP. We can skip. Need maybe check syntax and file presence. Use bash `ls -l index.html; grep` etc. Need perhaps no external URL except phaser.io in Phaser lib (not our code). We have header text "no external assets". Our own HTML no external links. Need plain script tag exact. Good.
Need maybe no audio assets loaded. Fine.

Potential issue: `forceWin` QA shortcut gives 600 score, but user might consider score artificially changed; only QA. okay.
Potential issue: "Restart restores all bricks, score, and lives" verified from win state. Good.
Potential issue: "losing all lives shows Game Over" verified via QA, but natural losing all lives (three misses) not fully played; QA calls same `loseLife`, so logic path same except QA sets lives1. Actually natural game over path from lives1 to0 would use same code, so functionally covered. Could mention win/gameover via QA shortcuts; natural three-life depletion not manually played. Need maybe "remaining unverified: full 60-brick clear by manual play and three successive natural misses." That is honest.
Need maybe mention initial console only Phaser info and our ready log, no errors. Good.
Need maybe mention actual checks:
- initial load/screenshot and console.
- Space and Launch button.
- ArrowLeft and mouse drag/click; paddle clamped x=82 and718 (left20/right780).
- Brick hit removed one, score+10 once, velocity changed from (170,-345) to (162,329).
- Paddle contact changed (162,329)->(47,-364) and second paddle hit; wall left/right bounces logged.
- Win/restart/gameover via QA shortcuts; restart restored 60 bricks, score0,lives3.
- Life loss from actual miss returned to ready with2 lives.
Need perhaps mention final fix to hide ready prompt in gameover not visually rechecked. Could say "Final small game-over prompt/button text fix was not re-opened after reload." But we did reload initial only. Need include unverified. Could maybe recheck quickly with QA but need scroll etc. Maybe no. But user asks which behaviors remain unverified; mention that.

Need maybe ensure final file saved; write/edit already. Could use bash `test -f index.html && wc -c`. Do it.

Need final concise. Need perhaps mention file path clearly. Need not mention all detailed implementation maybe brief. Need include "unverified" explicitly. Need ensure no false claim after final small fix. Let's compose.

Need maybe note Phaser Canvas renderer used; no errors. Need perhaps "Game Over prompt cleanup edit was not re-opened" as unverified. Good.

Use bullet list.