Mario-style platformer · hy4

We need build index.html using Phaser local. Need inspect files. Need use browser tools. Need time 15 min. Need design robustly. Let's list.

Need know Phaser version maybe grep.

Phaser 3.80.1. Need implement all. Need likely browser tool can run index and inspect screenshots/console and key interactions. Need understand tool interface perhaps reload, screenshot, key, etc. We can create robust game.

Need graphics generated textures via Graphics.generateTexture. Could also draw directly? For sprites use generated textures. Need no external assets. Classic Mario-inspired but avoid exact copyrighted perhaps red cap plumber, bricks, clouds, hills, bushes, coins, goombas. We can generate textures with graphics.

Need game dimensions likely 960x540 (or 1200x675), responsive via CSS and Phaser Scale.FIT maybe game canvas scales to viewport. Browser tool viewport 1200x800 fixed. Need displayed controls. Could overlay HTML UI or Phaser text. Better HTML hud and overlays perhaps Phaser text for fixed camera. Need camera follow and restart reset state. We can make HUD DOM fixed (outside Phaser scroll) and lose/win overlay DOM with restart button. But requirement "Provide Restart" accessible perhaps button. HTML is easiest. Need ensure restart maps to Phaser scene. Could also R key. Need test restarting via browser click; need know coordinates. Could use DOM with fixed placement and call restart.

Phaser Arcade Physics. Use generated textures for player, enemy, coin, platform blocks, decorations, flag. Need solid platforms + gaps. Need one completable level. Need camera within bounds. Need carefully design level geometry and collisions. Need dynamic tiled platforms from rectangles; perhaps static physics group with invisible rectangles? We need visual tile platforms using generated textures. Could create each platform as rectangle generated at exact width/height (texture key per dimension) and static image with refreshBody. Use generated textures with brick pattern maybe generate one tile 40x40 and tileSprite? Arcade static images repeated. Need create static group of tile images with collision. Generate brick texture (40x40), ground texture perhaps 40x40, used as image per tile. For floating platforms widths multiples of tile. Could use staticGroup.create(x,y,'brick') for each tile. That allows solidity. Need no huge number? Level width maybe 4200 with ground segments.

We need gaps to create challenge. Need level design with platforms over gaps; enemies patrol; coins; goal flag. Need ensure completable given jump physics. Need test through starting area and camera. Could design generous jump, physics constants. Need perhaps player movement 230, jump -430, gravity 1000, max fall 700. Vertical jump max ~92px, airtime ~0.86s, horizontal ~198px. Need gaps <= 150 px to be manageable. Platform heights <= 70 above. Need side-scrolling within level bounds. Need death if fall below world e.g. y > 680. Need perhaps portal for reaching goal flag; overlap with flag zone triggers win. Need static flagpole + flag texture generated.

Need ground segments:
world width 4200, ground y maybe 500, tile size 40, game 960x540. Ground from y=500 to 560? Tile rows 2 maybe. Ground x segments:
0-720 (18 tiles)
gap 720-860 (140)
860-1480
gap 1480-1620 (140)
1620-2320
gap 2320-2460 (140)
2460-3180
gap 3180-3320 (140)
3320-4200
Need floating platforms bridging gaps perhaps at y=440 over gap center (x 740..840 etc) and at various places. But requirement solid platforms, gaps. Floating bricks could be used. Need make level completable. Ground is flat. Enemies patrol segments. Need perhaps hopping platforms with coins. Need ensure enemy side contact lost, top stomp bounce. Need enemy patrol boundaries and turn around. Could use velocity and update if beyond min/max. Need collision with platforms. Enemies should not fall off; choose ranges within solid segments. Need overlap handling: physics.add.collider(player, platforms); collider(enemies, platforms). For player-enemy overlap, custom callback with touch checks. Arcade overlap is callback every frame. Need check player.body.velocity.y > 0 and player.body.bottom <= enemy.body.top + maybe 14, or player.body.blocked.down? If side contact death. Need use `player.body.touching.down`? In overlap callback body.touching may be set by collider only, not overlap. Compare previous? We can evaluate based on relative vertical positions and downward velocity: if player.body.velocity.y > 0 && player.body.bottom <= enemy.body.top + 16. That means overlap from above. Need stomp: enemy.destroy; bounce velocity.y=-330; score maybe not needed. Side contact death.

Prevent repeated mid-air jumping: `if (this.input.keyboard... && player.body.blocked.down)` or `onFloor()`. Arcade body has `onFloor()` (or `blocked.down`). Need jump only on JustDown and onFloor. Could support a small coyote? Not necessary. Need smooth controls. Could use keyboard `addKeys('LEFT,RIGHT,A,D,SPACE,R')`; check JustDown for jump. Need prevent page scrolling for space, but canvas focus perhaps. Add keydown preventDefault for arrows/space. Need key interaction with browser tool. Phaser key events should work if browser key event dispatched/canvas focus. Might need click canvas first. Browser tool key perhaps sends to active element. We'll test.

Need displayed controls. HTML panel showing "←/→ or A/D Run · SPACE Jump · R Restart · Stomp enemies" plus coin count, restart button. This is fixed on top. Need perhaps status overlay for win/death. Need local coordinate mapping? Browser action click x/y uses viewport coordinates. Canvas may be centered and scaled. We can choose game 960x540 and CSS main container width min(100vw, 1200px) etc. Scale.FIT with autoCenter. To simplify tool screenshot and clicks, use Phaser width 1200, height 675? Viewport 1200x800; then canvas 1200x675 with CSS if scale FIT could be 1200x675 centered horizontally, top maybe 62.5. HUD overlay at top. But canvas likely coordinate space independent; tool click on DOM button uses actual viewport. Need easiest exact dimensions: use parent #game with width 1200px; height 675px; Phaser config `width: 1200, height: 675`, `scale: {mode: Phaser.Scale.FIT, autoCenter: CENTER_BOTH, parent:'game', width:1200,height:675}`; CSS body maybe flex, hud absolute. Could produce coordinate scaling. Maybe use EXACT `width:1200,height:675`, no Scale.FIT? Browser viewport 1200x800, canvas exactly 1200x675; all robust. Could set CSS canvas width:100%; max-width 1200px; aspect-ratio; but browser tool screen 1200 wide. A fixed 1200x675 canvas works. For smaller viewport, use CSS `canvas { width: min(100vw,1200px); height:auto; }` but Phaser internal mouse perhaps scale, though keyboard unaffected. We can use Phaser Scale.FIT with auto center; but for restart button tool we can locate through DOM or use keyboard R. Could define clickable overlay `#restart` at fixed top right with z-index. That's easy. Need ensure click at x ~1100,y~30.

Maybe use Phaser config:
```
const config = {
 type: Phaser.AUTO,
 width: 1200, height: 675,
 parent: 'game',
 backgroundColor:'#68c5f7',
 physics: {default:'arcade', arcade:{gravity:{y:1100}, debug:false}},
 scale:{ mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width:1200,height:675},
 scene:{preload,create,update}
}
```
But with parent style etc, Scale.FIT might fit and center in parent. Need set `#game { width:100vw; height:100vh; }` and canvas centered. Then DOM HUD overlays independent. Browser screenshot can see. Maybe use a `stage` container that is 1200x675 scaled via CSS transform? But no need.

We can set body to dark and game container `width: 1200px; height: 675px; max-width:100vw; max-height:100vh;` and Phaser Scale.RESIZE? Actually config width/height plus CSS width 100%; let canvas default 1200x675, style width:100%;height:100%; object-fit:contain. Browser screenshot at 1200x800 will show full. Fine.

Need perhaps use Phaser Graphics generated textures. We can make texture atlas from graphics:
- player 28x38 (standing/running maybe two frames generated, but no animations required). Use graphics fill rects with red cap, blue overalls, skin etc. A simple pixel-art character. Need perhaps flipped based on velocity. Could generate `hero` texture with a 32x40 shape. Use pixelated scaling? Graphics uses rectangles and `generateTexture('hero',32,40)`. In game physics, set body size maybe 24x38 and offset.
- heroRun texture? Could generate two textures and switch based on animation, nice but not required. Could simply flipX and slight rotation? Classic style with red cap. We can generate hero, hero2 and animate via update. Need ensure no external assets. Generate textures with `this.make.graphics({x:0,y:0,add:false})` then draw, generateTexture, destroy. Need call graphics methods.

- enemy 32x30 brown mushroom-ish goomba: rounded body, feet, eyes, brows. Graphics has fillRoundedRect? `fillRoundedRect` exists. We can use rectangles and circles. Generate.
- coin 20x24 with yellow circles / star? Graphics lineStyle and fillCircle etc. Could generate multiple coin frames to animate spin. Generate `coin1`, `coin2` etc. Then perhaps use `this.physics.add.group({allowGravity:false})` and create images; each has an animation? Phaser animations need spritesheet; generated single textures cannot animate unless frames with texture manager? Could switch textures in tween every 250ms globally. Simpler static gold coin with shine. Could use graphics to generate a 24x24 coin with concentric ellipses. But generated textures via Graphics ellipse maybe. Need ensure physics body circle maybe `body.setCircle(9,3,3)`. Overlap group.
- brick tile 40x40: orange-brown base, dark mortar lines, highlight, little studs.
- ground tile maybe grass-top + dirt with dots. Use `ground` 40x40. Need ground row below maybe `dirt` texture. But only top collision needed; can create two rows with same ground tile? visual repeating grass top weird. Generate separate `groundTop` and `earth`. Solid platform group includes both rows. Could create only one row from y=500 to 540 plus draw a static background lower ground from y=540 to 675 with a graphics rectangle? But collision only top. For classic look, generate groundTop tile with green grass strip at top and brown body; generate earth tile below with brown. Create 2 rows (500, 540) maybe ground tile at y=500 and earth at y=540, 580 (world height 675). Need ground from y=500 to 675 maybe 4 rows, but visual sky background with clouds/hills. Maybe ground top y=520 and earth rows y=560,600,640. Game height 675. Player starts y=460, body 40 tall -> bottom 500, falls 20 px onto ground top y=520 if top row center 540? Need coordinate definitions:
Tile size 40. `groundY = 540` maybe top of tile at 520? Let's define row function with center y = groundTopY + 20 where `groundTopY=540` -> center 560; top at 540. World height 675. Rows at y=560,600,640 (3 rows) down to 660. Player spawn y=500 (center; bottom 520) falls 20. Fine. Camera world bounds height 675. Death when y > 720 (below screen; camera vertical maybe fixed because bounds height = height and camera doesn't scroll vertically). But physics world bounds set 0,0,levelWidth,levelHeight? Need not set collideWorldBounds on player; leaving screen downward can continue to y>760. Camera bounds height should be maybe 675. Need allow fall below; world physics bounds perhaps (0,0,4800,900), camera bounds (0,0,4800,675). If player.setCollideWorldBounds(false), can fall beyond. Need death threshold y>740. Good.

Maybe game height 640 and ground top 520; simpler. But use 675 to match 16:9. Fine.

Need background graphics drawn in world coordinates, perhaps blue sky rectangle fixed to camera? Can use `this.add.rectangle(0,0,levelWidth,675,0x6ec8ff).setOrigin(0)` in world; then clouds/hills created at various world x. Could add parallax using scrollFactor 0.2 for clouds/hills but need maybe generate textures. We can use Graphics to draw clouds and hills into generated textures, then `this.add.image(x,y,...).setScrollFactor(0.3)`. Need avoid clipping? Could create many clouds. Or direct graphics shape with scrollFactor. Classic style. Need generated graphics only—Phaser Graphics is allowed. We can use `this.add.graphics()` with fill etc. But static sky with scrollFactor 0 maybe full screen. Could use `this.cameras.main.setBackgroundColor('#63c7ff')`; add cloud group with scrollFactor 0.25 and generated texture; hills near ground with scrollFactor 0.5; bushes at ground with scrollFactor 1.

Need collision with floating brick platforms. Need add tile static group. For each platform segmented. Need maybe mystery blocks? Could include flags. Need goal flag at near end. Need one level. Need widths.

Need carefully design level:
- Level width maybe 4200; canvas 1200. Camera follow startX maybe 0.
- Ground segments:
  [0, 760], [920, 1540], [1700, 2380], [2540, 3260], [3420, 4400].
  Gaps of 160. Player max horizontal jump maybe 220 (with run speed 250, jump -470, gravity 1100 => airtime 0.85 sec => 214). Need player can jump 160 comfortably. Use speed 260, jump -500, gravity 1200 => airtime 0.833, horizontal 217. Safe. Could add floating bridge platforms at gap centers (maybe at y=470, 50 above ground top 540) two tiles wide to make easier. But if platform center at y=480? Need coordinate top = maybe 470, ground top 540, 70 above. Jump apex = 104 if -500^2/(2*1200)=104. Need can land on platform 70 above and cross. Need platform dimensions maybe 3 tiles=120 centered over gap. Could have one floating brick row from x=gapStart+20 to gapEnd-20 at y=480 (top), i.e. center y=500. Jump from ground at 540 to platform top 480 = 60, easy. Then jump down across remainder. But that reduces "gap" challenge; still gap with platform. Need perhaps no bridge in first gap but can jump directly 160. Others use floating platforms. Need ensure jump from moving horizontally works. Player body width 24; effective gap to clear from last ground edge (player center at 760-12) to next start (player center at 920+12), ~172. With 217 airtime, doable. Need timing. Use jump velocity -540, gravity 1200 => airtime 0.9, horizontal 234. Good. Apex 121. So can jump 70-90 high. Use speed 270 => 243. Need safe. Let's choose gravity 1200, jump -540, speed 260. Horizontal distance 234. Good.

- Floating platforms at y top 450/460 perhaps 80-90 above ground. Need accessible from ground (apex 121) but with body top relation: player bottom initial 540, to land on platform top 460, needs 80 rise. Player center apex ~121, so bottom at 419; can land. Good.
Could place:
  segment1 at x=360..520, top=440 (4 tiles) with coins above; accessible via jump from ground? 100 difference, apex121; landing with center needs bottom at 440; yes. Need careful horizontally jumping onto from ground; platform width 160. At rise to 100 occurs near t maybe .13/.77 sec; horizontal ~34/200; possible. Could make top 460 (80 diff) friendlier.
  x=1050..1210 top=450 (90 diff)
  x=1850..2050 top=440 (100)
  x=2750..2930 top=460
  x=3600..3800 top=440
Need not too hard.

- bricks overhead maybe not needed.

- Coins: on ground path at x 220, 300, 380? Starting area visible coins. Need coin y maybe 490 (center) so player at y ~520 center, body top 500, coin at 490, overlap when jumping or maybe standing? Need coin body 20 tall center 490 -> bottom500, player body top maybe 502 if player center 520, no overlap. Need jump to collect. But requirement test visible coins and restart. Could put coins along path at y=500, player's body top 500 if center 520; overlap maybe touching. Need collectible with overlap; perhaps coin center y=490, bottom 501, player top 500 => slight overlap; but physics updates. Better coin center y=495 and player center on ground = 518? Let's calculate: player texture 32x40; body maybe 24x38 with offset (4,2); when standing on ground top 540, player sprite center? Arcade body bottom =540 => sprite center =540 - (offsetY+bodyH - h/2?) Need body setSize(24,38) and offset maybe (4,2); body top = sprite y - 20 + 2 = y-18; bottom=y+20. So sprite center y=520. body top=502. Coin center 490 with radius 10 => body top480,bottom500, no overlap. Need jump. Nice. Could place coin center 490 just above body. Some coins on platforms at y=410 (40 above top 450). Need collect while jumping.

Need display count once. Use overlap callback with guard `if (!coin.active || coin.collected) return; coin.collected=true; coin.disableBody(true,true); coinCount++; updateHUD();` `disableBody(true,true)` on group child works. Need reset restart entire scene; all created from scratch, coinCount variable in create gets 0. Need ensure restart resets DOM state. Could define global `const ui` and `resetGame` call `game.scene.start('Level')` perhaps scene restart. Simpler define `restart()` from outside: `game.scene.getScene('Level').scene.restart()`? Need Phaser ScenePlugin `this.scene.restart()` inside. For HTML button, need access to current scene and call restart. Could assign `window.restartLevel = () => { const scene = game.scene.getScene('Level'); scene.scene.restart(); }`; inside create update HUD to zero/hide overlay. Need clear any game-over state. Since scene.restart destroys all GameObjects, fine. Need key R callback inside update: `if (Phaser.Input.Keyboard.JustDown(this.keys.R)) this.restartLevel();`. Need define a method `restartLevel()` in Scene class or closure. Could make class `LevelScene extends Phaser.Scene`. Use `window.game` global. `document.getElementById('restart').addEventListener('click',()=>window.game.scene.getScene('Level').scene.restart())`. Need initial event registered after game creation. Could also use pointer overlay button. Fine.
Need game over/win overlay. `endGame(type)` sets `this.finished=true`, player.body.setVelocity(0,0), maybe `this.physics.pause()`. Show DOM overlay with message and button "Play again". Need make button call restart. Need update coin HUD. Need `endGame` also pause enemy movements? physics.pause handles. For win maybe flag wave animation? Not necessary. Perhaps player does victory pose or confetti generated via graphics? We can show HTML overlay. Need requirement "shows a win state". Clear modal is good. Need "loss state" clear modal. Need overlay with restart. Need restart button always in HUD too.
Need ensure no repeated endGame due to flag overlap or death. Guard.

Need camera follow within level bounds:
```
this.physics.world.setBounds(0,0,LEVEL_WIDTH, WORLD_HEIGHT+200);
this.cameras.main.setBounds(0,0,LEVEL_WIDTH,GAME_HEIGHT);
this.cameras.main.startFollow(this.player, true, 0.1, 0.1, 0, 120?);
this.cameras.main.setFollowOffset(-180? maybe startFollow(player,true,0.1,0.1,-180,0))
```
Default follow centers player in viewport. At start, camera bounds clamp to x=0 so player appears center until camera could scroll? With bounds, initial camera scroll perhaps 0 because x=100 - 600 would clamp 0. So player at x=100. As moves right >600, camera follows. Good. Need perhaps set deadzone? Not needed. Need camera return after restart. On scene restart, camera likely resets to scroll 0? `this.cameras.main` is reset? Scene restart shuts down and recreates camera perhaps yes. To be safe in create call `this.cameras.main.setScroll(0,0)` before startFollow. Need check. Could explicitly reset scroll and startFollow. Need maybe preserve camera? Scene restart resets cameras and display list. Fine.
Need world bounds perhaps `(0,0,LEVEL_WIDTH, GAME_HEIGHT+250)` to allow falling. Player no collide. Enemies colliders with platform, maybe no world bounds. Need turn at patrol bounds. Need set enemies `setCollideWorldBounds(true)`? That could bounce off world edges; not needed if min/max custom. Need enemies stay on ground due physics gravity. Need update each enemy:
```
enemy.body.setVelocityX(enemy.dir * 55)
if (enemy.x <= enemy.minX) { enemy.x=enemy.minX; enemy.dir=1; enemy.setFlipX(false); }
...
enemy.body.setVelocityX(enemy.dir * 55)
```
Need body size and collision. Enemy sprite 32x30 setSize(26,26), offset(3,4). Perhaps body is positioned relative to texture. Need set `enemy.setBounce(0)` and `setImmovable(false)`. Need collision with platforms. Need avoid enemies walking over floating platform edges? Place on ground segments only with min/max away from gaps. Enemy can't collide side with player? We use overlap so no physical push. Need check stomp from above. Need include slight forgiveness:
```
const falling = player.body.velocity.y > 40;
const feetAboveHead = player.body.bottom - enemy.body.top < 16;
if (falling && feetAboveHead) ...
```
But when overlap first occurs from above, player's bottom may have penetrated 10 px into enemy top; check `< 18`. Side contact while falling slightly could be mistaken if player's bottom is just below enemy top due to coming from side? side contact at same y means player.bottom is ~40 lower than enemy.top >18, so death. Good. Need set player position up maybe `player.body.bottom = enemy.body.top` manually? In Arcade, body.y can be set. `player.y = enemy.body.top - 20` (assuming body bottom = y+20); `setVelocityY(-360)`. enemy.destroy or disableBody. Need enemy group overlap might still call with destroyed? `enemy.disableBody(true,true)` safe. Could add small score effect text "STOMP!" using generated text (Phaser Text no external font; uses browser default). Fine. Optional.
Need ensure enemy destroyed removed from group and not recreated until restart. Good.

Need falling into gap: update if player.y > 720 (world bounds maybe 900) -> lose. Also maybe if player falls below view. Good.
Need side contact with enemies death. Need guard overlap when player body velocity maybe 0 standing and enemy walks into player from side: enemy.top maybe 514, player.bottom=540, difference26 >18, death. Good. If player jumps from above, difference maybe <=16, stomp. Need player may land on enemy from above while body.velocity.y positive. Good.

Need goal flag: place at x=4200 maybe near end, ground top 540; pole from y=340 to 540; flag triangle at y=350. Could generate one texture `flag` with pole plus flag. Need a zone for overlap: `this.add.zone(x,470,60,140)` with physics? `this.physics.add.existing(zone,true)` static; then overlap player with zone. Or use an invisible rectangle image generated. Could create `this.goal = this.physics.add.staticImage(x, 460, 'goalFlag')` with generated texture 70x200. But collision overlap with full sprite including pole could trigger from side, that's fine goal. Need make goal flag visible and physically not obstruct; use overlap, not collider. Need maybe texture with transparent background. Generate `flag` 80x200 with pole at x=20, base, flag. The static body default full 80x200; overlap when player touches flag region from x near 4200. Good. Could add a `goalZone = this.add.zone(...); this.physics.add.existing(goalZone,true);` separate to avoid full texture overlap weird. But goalFlag could be a static image with `.setOrigin(0.5,1)` and then `this.physics.add.overlap(player, goalFlag, win)`; body bounding 80x200 perhaps appropriate. Need ensure texture generated with transparent area? Graphics default transparent? `generateTexture` captures with transparent background if no fill? Yes likely. Need clear. Could create flag graphic with transparent background and `generateTexture('goalFlag',80,200)`. Need `setOrigin(0.5,1)` at x=4200,y=540; center x=4200, bottom y=540; physics body refresh maybe. `this.physics.add.staticImage` origin? StaticImage uses origin. Need `goal.refreshBody()` after scaling/origin. Could just use `this.add.image(4200,540,'goalFlag').setOrigin(0.5,1);` then a static zone:
```
const goalZone = this.add.zone(4195, 455, 48, 170);
this.physics.add.existing(goalZone, true);
this.physics.add.overlap(this.player, goalZone, ...);
```
Need `zone.body` static. Easier use a generated transparent or white rectangle texture? Could use `this.add.rectangle` and `physics.add.existing(rect,true)`, but `Rectangle` GameObject has no physics? Arcade Physics can add existing GameObject maybe yes if it has x/y/displayWidth/height, likely. Use `this.add.zone` is designed. Need set origin? Zone default 0.5. `zone.setSize(60,180)`? Use constructor `this.add.zone(x,y,w,h)`. `this.physics.add.existing(zone,true);` static body. Need maybe `zone.body.setSize(60,180)` and updateFromGameObject. We can call `goalZone.body.updateFromGameObject()`. But static body on Zone likely works. Could test. Alternative make `goalSensor = this.physics.add.staticImage(x,y,'sensor')` where `sensor` generated 1x1 transparent? Then setDisplaySize(50,170).refreshBody(). Need create an invisible static image:
```
const g=make.graphics; g.fillStyle(0xffffff,0); g.fillRect(0,0,4,4); generateTexture('sensor',4,4)
const goal = this.physics.add.staticImage(4200,460,'sensor').setVisible(false);
goal.setDisplaySize(60,160).refreshBody();
```
Even if invisible, overlap works. This is reliable. Need no image assets (generated). Could simply use generated flag texture as physics static image; overlap with player. Let's use visible goal flag as `this.physics.add.staticImage(x, y, 'flag').setOrigin(0.5,1);` then `.refreshBody()` after origin change. Need body covers full 80x200; reaching near x of pole triggers player. That's fine. Need win. But body full 80 includes empty transparent area; no issue.

Need generated textures with Graphics. Need understand `generateTexture` with Graphics and drawing pixel art. Need use `lineStyle` etc. Need create all in preload or create. Since no assets, no `preload` needed. Could do in `create` helper `createTextures` only once; scene restart would try generate same keys and throw? Phaser Texture Manager `generateTexture` with existing key likely warns / doesn't overwrite. Need guard `if (this.textures.exists('hero')) return;`. Good. Need ensure draw operations cleared between textures. Could create new graphics each texture. Helper.
```
makeTexture(key,w,h,drawFn) {
 const g=this.make.graphics({x:0,y:0,add:false});
 drawFn(g);
 g.generateTexture(key,w,h);
 g.destroy();
}
```
Need know `this.make.graphics` config in Phaser 3.80: `this.make.graphics({x:0,y:0,add:false})` works. Could also `this.add.graphics();...` set visible false. `make.graphics({add:false})` likely. Need maybe `g.fillStyle(0xff0000,1); g.fillRect(...)`. Good.
Need generated textures for `hero`, `heroRun`, `coin`, `enemy`, `groundTop`, `earth`, `brick`, `cloud`, `hill`, `bush`, `flag`. Could make all. Need maybe use `g.fillRoundedRect`; available. Need avoid anti-aliasing? Graphics shapes smooth. Fine.

Pixel-art style via rectangular blocks. Need perhaps generate textures at natural size and set `pixelArt: true` in config to preserve crispness when scaling. Use `pixelArt:true` globally. But graphics-generated shapes with circles may look pixelated if scaled? generation at target size; fine. Use `roundPixels: true`. Need perhaps `antialias:false`.
Need background hills using `hill` texture maybe width 220x120 with green half-circle-ish shapes. Graphics has `fillCircle` but bottom may need clipping. Could draw multiple circles/ellipses. Since texture has transparent bottom perhaps functions. `g.fillStyle(0x3ba34a); g.fillEllipse(110,110,220,160);` then highlights. Need position at ground top around y=540 so bottom at 550 (slight under ground). Set image origin(0.5,1) at y=540 and scrollFactor 0.45. But because scrollFactor, as camera moves, hills appear slowly. Need avoid mismatch. Fine. Need cloud texture 100x50 with white circles. Generated with fillCircle. Need set scrollFactor 0.25 and repeat every ~500 world px. Need clipped in camera but okay. Sky background could be camera color. Need perhaps sun. Add a large yellow circle at x=1000,y=100 with scrollFactor 0.05? Or create generated `sun`. Could just `this.add.circle(1100,100,38,0xfff27a).setScrollFactor(0.1)`. This is a Phaser Shape (generated graphics) okay. Need ensure no asset. Fine.

Ground visuals: generate `groundTop` 40x40 with top 8px green, brown rest and pixel details; `earth` similar. Add platform tiles. Need each static physics object. We can create helper `addPlatformTiles(xStart,xEnd,topY,type)`:
```
for (let x=xStart; x<xEnd; x+=TILE) {
 const img = this.platforms.create(x+TILE/2, topY+TILE/2, type);
 img.setDepth(2);
}
```
`this.physics.add.staticGroup()`; `create` returns sprite with static body automatically, but after no scaling need refreshBody perhaps `img.refreshBody()`. StaticGroup.create adds static body at texture size. Need call `.refreshBody()`. For rows:
```
for (const [start,end] of groundSegments) {
 addTileRow(start,end,GROUND_Y,'groundTop');
 for (let y=GROUND_Y+TILE; y<GAME_HEIGHT+TILE; y+=TILE) addTileRow(start,end,y,'earth');
}
```
Need game height 675, groundY=540; rows at y=540,580,620,660; last extends to700, cropped. Fine. This is ~4200/40=105 tiles * 4 =420 plus overlap duplicates; manageable. Could make one static rectangle for entire earth beneath ground to reduce objects and use earth tile only visible top? But tile visuals need repeating. Could use `this.add.tileSprite(center,...,'earth')` for visual but static body rectangle separate. Simpler staticGroup with one invisible body per segment and tileSprite visual. Need generated textures allowed. This reduces physics bodies. Could create `this.physics.add.staticImage(center, groundY+...,'solid')` with generated 1x1 texture scaled to width,height and tint transparent? Need no invisible? setVisible(false) still body. Then use `this.add.tileSprite`. But requirement "solid platforms" doesn't require each tile as collider. Could make tile group colliders; straightforward. With 400 objects, Phaser can handle. Floating platforms 30 more. Fine.

Need maybe platform collision from sides and bottom. Arcade static tile colliders can cause snagging between adjacent tiles? When tiles adjacent exactly, ledge detection maybe fine but internal edges can cause collision issues? In Arcade Physics, collision with adjacent static bodies may produce weird `blocked.down` on seams, but generally okay. Could instead create one static body spanning each ground segment and use tileSprite for visual, avoiding seams. That might be more robust. Let's design:
- `platforms = this.physics.add.staticGroup()`.
- Create a 1x1 white texture `solid` (or use generated 'brick'). For each ground segment, create staticImage at center x, y=groundY+height/2, texture `solid`, setDisplaySize(width,height), setVisible(false), refreshBody(). This gives one solid collision rectangle. Then draw visual tileSprite for top row and earth rows, with depth maybe 1. Need tileSprite can be added via `this.add.tileSprite(x,y,width,height,'groundTop').setOrigin(0,0)`; texture likely 40x40 and tiling. To make grass top only 8 high repeating vertically, use a top strip 40x8 texture and earth 40x40 tile; can just create top 40x40 tile and a tileSprite height 40. That works. Need earth rows below tiled earth. Could create one `tileSprite` width x 135 using earth. For each segment. No physics colliders on visuals. This is much cleaner and fewer bodies. Need ensure `solid` texture generated (white 1x1). StaticImage scaled to width/height with `refreshBody()`; if visible false, body still works. Need if `setVisible(false)` plus `refreshBody()` no issue. Need perhaps `staticImage.setDisplaySize(w,h).refreshBody()`; body width/height updates. Good. For floating brick platforms, one staticImage collision per platform plus tileSprite visual. Need perhaps create collision body height exactly 40; then tileSprite with brick texture. Great.

Need platform layout includes vertical heights. Need perhaps overhead brick rows as solids? Could create separate floating platform segments. Need avoid player's collision from below; static body blocks all. Fine.

Need collision group with staticImage invisible; okay. Could perhaps set `this.physics.add.collider(player, platforms)`.

Need add visual tileSprites before or after player? Need depth. Use `setDepth(1)`, player depth 5, coins 4, enemies 4, decorations 0. Need tileSprite visual not part of physics. Need static body invisible with depth maybe irrelevant. Need perhaps `setVisible(false)` but still body. Fine.

Need generated textures and sensor for goal. Could use staticImage with `solid` scaled to sensor size and invisible. Need avoid body from goal in platforms group? Put separate `goalSensor`, overlap. Need call `goalSensor.refreshBody()`. Since `solid` generated 1x1 white, scaling to 60x160 makes a white rect if visible; setVisible(false). Fine. Need flag visual separate.

Need add flagpole via generated `flag` texture (transparent). Need set origin(0.5,1) and depth 3. Could add a castle maybe generated by Graphics at x=4250? Goal flag enough. Could generate `castle` 160x140 with brick rectangles, placed near end. Nice classic visual. But not required. We can add using generated texture. Need maybe goal at x=4200, level width 4400 so some room after. Could add castle at x=4270,y=540. Need not interfere. Could create flag at x=4150 and castle behind at 4280. Overlap zone around flag. Need winning before castle. Fine.

Need patrol enemies positions:
- x=500, ground segment 0-760, min=420,max=700, speed=60.
- x=1120, segment 920-1540, min=980,max=1450; but floating platform above at 1050-1210 top=450; enemy ground unaffected. Good.
- x=1320 maybe second enemy on same segment. Could add two.
- x=1900, segment1700-2380, min=1760,max=2300.
- x=2700, segment2540-3260, min=2600,max=3180.
- x=3650, segment3420-4400, min=3480,max=4050.
Need starting area enemy at x=500 (seen after camera moves; initial visible up to1200 though). Need maybe near starting area platform at x=320. Need player can jump and land on nearby platform. Requirement verify "running and jumping near starting area. Check landing on a nearby platform and camera following as player moves." Need platform near x=300-460 top=460. Player starts x=100. Can run and jump onto it. Need place at x=300..460 top=460. At player speed 260, body width24, jump apex etc. Starting ground top540. To land on platform top460 (80 above), can jump from x~240 and land near x~300 at t maybe 0.2 sec? Let's calculate vertical equation with jump -540,g1200: y displacement = -540 t +600t². Need -80 at ascent: 600t²-540t+80=0 => t=(540 ± sqrt291600-192000)/1200=(540±315.6)/1200 =>0.187,0.713. Horizontal from x240 at speed260 gives +49 at t=.187, +185 at .713. Platform extends 300-460, so if start jump x=240, at ascent cross top at x289 (just under platform); descending cross top at x425, land. Works. Need start jump earlier x=200: ascent x249, desc x385, land at385. Great. Need run from100 to200 then jump. Fine. Need ensure platform collision from side if player's body reaches x300 while bottom below top? At t maybe .38, body bottom displacement -540*.38+600*.1444=-205+86.6=-118, so bottom at422 (<460) at apex, above platform; okay. It can land on top. Good.
Need camera following as player moves: initial camera x=0, player x=100; camera starts moving when player x>600 due centered follow. Starting area platform at300; need test camera following after running to x>600. Could perhaps set camera deadzone or follow offset to start camera moving earlier so "camera following" easy. If we set `startFollow(player,true,0.12,0.12,-220,0)`, camera targets player center + offset? Need understand followOffset: camera view centers on `target.x + followOffset.x`? In Phaser 3, `startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)` sets followOffset and camera scroll = target center - width/2 + offset? Need check docs/source. Usually `camera.startFollow(player, true, 0.05, 0.05);` centers. To put player left-of-center for side-scroller, use `camera.setFollowOffset(-200, 0)`? Need know sign. Likely `scrollX = target.x - width*0.5 - followOffset.x`; if offset -200 => scroll = player.x -600+200 = player.x-400, so player at x=400 (left side). Then camera begins scroll at player x=400 (bounds clamp negative -> 0 until player>400). This gives more view ahead and easier test. Need check. Could call `camera.startFollow(player,true,0.12,0.12); camera.setFollowOffset(-220,0);` and see. But if sign opposite, player appears right side. Need inspect via browser. Could simply use default centered; camera follow at x>600 obvious. Need level width 4400, enough. Browser tests can hold right key for ~3 seconds to x~800. Fine.
Need camera bounds: setBounds(0,0,LEVEL_WIDTH,GAME_HEIGHT). With width1200, player at x>600 scroll. Need startFollow and `setScroll(0,0)`. Need perhaps death zone when falling y>700. Since camera doesn't vertical follow due bounds height equals viewport, fine. Need camera clamps at x=LEVEL_WIDTH-GAME_WIDTH=3200, so at end player appears centered etc. Good.

Need display controls in HTML. Need perhaps title. Need avoid HUD covering game too much. `#hud` fixed top 0 with gradient dark bar height ~62. But canvas starts at top maybe behind HUD. Better place game container below HUD: body flex column; `#hud` position:absolute top0, z-index10, width100%; game underneath. HUD translucent dark, text. Overlay inside game. Need use CSS. Need canvas fill screen? We can use `#game { width: 100vw; height: calc(100vh - 64px); }` and Phaser Scale.FIT to fit 1200x675 into available viewport (1200x736) => scale=1.09? Height 675 fits, width maybe width-limited 1200 so scale1, leaving 61px vertical. Canvas center. HUD 64 top. Then world viewport 1200x675. Browser screenshot at 1200x800 sees HUD then canvas from y~94 to769 if centered in remaining 736. Fine. But key interactions not tied to coordinates. Need restart button in HUD at top right x~1100,y~30. Easy. Need overlay modal positioned absolute over game maybe full viewport with z-index20; use CSS flex center. Could have `#message` hidden by default with `.show`. Need initial overlay none. Need title and controls. Need coin count DOM.

Maybe make full-screen canvas behind HUD: `#game {position:absolute;inset:0}`, Phaser Scale.FIT with width1200xheight675 into 1200x800 -> scale1 (height leaves 125px total, center y62.5). HUD overlay top 0. Then visual game area y62.5..737.5; controls at top. Good. Use body black/blue background. HUD width100%, fixed. Overlay full-screen with translucent dark. Need game canvas centered. Browser tool screenshot can see. Need perhaps background outside canvas dark blue. Fine.
CSS:
```
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#12243c;font-family:...}
#game{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
canvas{image-rendering:pixelated;box-shadow:...}
#hud{position:fixed;top:0;left:0;right:0;height:58px;display:flex;...; background:linear-gradient(...); z-index:10; color:white; border-bottom:...}
...
#restart{...}
#overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(...);z-index:20}
#overlay.show{display:flex}
.card{...}
```
Need Phaser Scale.FIT with `autoCenter: Phaser.Scale.CENTER_BOTH`, parent 'game'. Parent display flex maybe Phaser applies canvas margin auto based on scale manager; could conflict but likely okay. Better `#game { position:absolute; inset:0; }` and ScaleManager handles centering. No flex. Need avoid fixed HUD covering top portion of canvas; HUD 58px overlay over sky maybe okay, not critical. Could set canvas at y~62, HUD exactly overlays top 58, so no world obscured. With scale FIT into full viewport, canvas center y=62.5; HUD covers y0-58, so no overlap (except 4.5px). Nice. At 1200x800, scale1 and canvas y62.5. Great. Need set `#hud` height 58. Good.

Need game config:
```
scale: {
 mode: Phaser.Scale.FIT,
 autoCenter: Phaser.Scale.CENTER_BOTH,
 parent:'game',
 width:1200,
 height:675
}
```
But parent config at top-level and scale parent? In Phaser config, `parent` top-level or within scale? Usually top level `parent:'game'` and `scale: {mode, autoCenter,width,height}`. Use both? Fine. Need not duplicate parent. Use:
```
const config = {
 type: Phaser.AUTO,
 parent: 'game',
 width: 1200,
 height: 675,
 backgroundColor:'#68c8ff',
 pixelArt:true,
 scale:{mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH},
 physics:...
 scene: LevelScene
}
```
Width/height top-level. Scale manager uses them. Need maybe `autoCenter` with parent full viewport. Good.
Need `render: { pixelArt: true, antialias:false, roundPixels:true }`? `pixelArt:true` top level enough. Need maybe Canvas fallback. Fine.
Need perhaps browser tool can't load local script due `file://`? Runner likely serves. But `phaser.min.js` script tag plain. Need ensure inline library in final artifact runner. Fine.
Need test with browser; tool `reload` likely opens index.html and perhaps outputs console. We need create file first.

Let's map precise game code.

Class LevelScene:
```
class LevelScene extends Phaser.Scene {
 constructor(){super('Level');}
 create(){
   this.levelWidth=4400; this.groundY=540; this.tile=40;
   this.coinsCollected=0; this.finished=false;
   this.createTextures();
   this.cameras.main.setBounds(0,0,this.levelWidth,GAME_HEIGHT);
   this.physics.world.setBounds(0,0,this.levelWidth,GAME_HEIGHT+300);
   this.cameras.main.setBackgroundColor('#67c9f7');
   this.cameras.main.setScroll(0,0);
   this.addBackground();
   this.platforms=this.physics.add.staticGroup();
   this.buildLevel();
   this.createPlayer();
   this.createCoins();
   this.createEnemies();
   this.createGoal();
   this.createColliders();
   this.keys=...
   this.cameras.main.startFollow(this.player,true,0.1,0.1);
   // maybe setFollowOffset(-180,0)
   updateHUD(0)
   hideOverlay()
   this.events.once('shutdown',...) maybe no need
 }
 update(time, delta){
  if (this.finished) return;
  const left=..., right=...
  if(left) ... else if(right)... else setVelocityX(0), setAccelerationX(0)
  if (Phaser.Input.Keyboard.JustDown(this.keys.SPACE) && this.player.body.blocked.down) { setVelocityY(JUMP); }
  if (JustDown(R)) { this.scene.restart(); }
  if (this.player.y > 730) this.lose();
  enemies.children.iterate(...)
  // walk animation switch texture based on time maybe
 }
}
```
Need robust movement with acceleration or direct velocity. Direct velocity gives immediate. `setVelocityX(-SPEED)` etc. Need friction? direct fine.
Need update player texture depending on floor and movement:
```
if (Math.abs(vx)>0 && player.body.blocked.down) player.setTexture(Math.floor(time/120)%2 ? 'heroRun':'hero');
else player.setTexture('hero');
```
Need when airborne maybe `heroJump` generated. Could generate 3 textures hero, heroRun, heroJump. Need body size consistency across textures same dims 32x40; setting texture doesn't reset body. Fine.
Need flipX according to direction.
Need perhaps `this.player.body.blocked.down` can be false on first frame after landing if static rectangle; okay. Could use `.onFloor()` which checks blocked.down or touching.down. Need use `blocked.down || touching.down`. For static bodies, Arcade collision sets `blocked.down`? I think `blocked` used world bounds, `touching` used collision with bodies. In Phaser Arcade: `body.onFloor()` returns `this.blocked.down || this.touching.down`. Common Phaser examples use `body.touching.down`. Actually for static ground collisions, `body.blocked.down` might be true too? Phaser official platformer uses `player.body.touching.down`. To be safe `this.player.body.onFloor()` or `(blocked.down || touching.down)`. Need use `onFloor()` exists likely. Use `this.player.body.onFloor()`. Need check. In Arcade Body, `onFloor()` returns `this.blocked.down || this.touching.down`; yes. Need justDown with `space`, and `onFloor()`. Good.
Potential issue: if jump key pressed while in air, JustDown consumed; no repeated jump. Fine.
Need dynamic body's origin and size:
```
this.player = this.physics.add.sprite(100,500,'hero');
this.player.setDepth(6);
this.player.setCollideWorldBounds(false);
this.player.body.setSize(24,38);
this.player.body.setOffset(4,2);
this.player.setMaxVelocity(350,800);
```
Need texture 32x40. Body offset with center calculation: dynamic body `setSize` and `setOffset` perhaps auto centers? Actually `setSize(w,h,center=true)` centers body by default; then setOffset explicitly. We can call `body.setSize(24,38); body.setOffset(4,1);` should work. Bottom = y - displayOriginY + offsetY + height. For 32x40, displayOrigin=(16,20); bottom=y-20+1+38=y+19 -> on ground top540 => y=521. Fine. top=y-19. Starting y=500 => body bottom519, falls21. Good. Use offsetY=1. Need set player at y=500. Fine.

Coin placement:
```
const coinPositions = [
 [220,490],[280,490],[340,410],[400,410], // platform coins maybe over platform
 ...
]
```
Need maybe visible coins at start. Starting camera shows x0-1200; many. Need coin count initial 0. Need 20 coins. Need avoid coin overlap with enemy or platform. Need all reachable. Need place at y=500 (ground coins) and y=410 (floating). Need compute body overlap: player top on ground ~502; coin center490, radius9 => bottom499, not overlapping by 3px. Need jump. That's okay. But first coins should be collectible by running/jumping. Could put center y=495, bottom504, player top502: overlap 2px while standing, so simply running collects. Need requirement "collecting coin removes it and increases displayed count once." Easier to test if coin at ground run height. Let's set ground coin center y=500; coin body circle radius10 at 500; player body top ~502; overlap from y502-510, yes. So running collects. Need ensure Arcade circle body set with offset. If we use default rectangular body on 24x24 coin, bottom512, definitely overlap. Good. So ground coins at y=495 or500. Use center y=495; player top502, coin bottom507 -> overlap5. Good. Need player maybe collides from side with coin overlap enough. Fine. So starting coin at x=180,y=495; player runs right and collects. A visible coin at x=220 etc. Need coin count update. Need restart checks visible coins return. On restart, group recreated. Good.

Coin frame animation: Could create `coin` texture 24x24 and tween scaleX of each coin to simulate spin? Use `this.tweens.add({targets: coins.children.iterate?})`; not needed. Could in update set each coin texture based on phase? Need generated `coin1`,`coin2` textures and update globally:
```
this.coinFrame = Math.floor(time/180)%2? 'coin2':'coin1';
this.coins.children.iterate(c=>{if(c.active)c.setTexture(this.coinFrame)});
```
Need this can be done each frame; no problem. Or tween scaleX:
```
this.tweens.add({targets:this.coins.getChildren(), scaleX:0.35, yoyo:true, repeat:-1, duration:650, ease:'Sine.easeInOut'})
```
But after collecting, tween on disabled body still maybe runs; harmless. Could use global update to avoid. Need generated coin2 with narrow ellipse. Need make one coin texture 24x24 and animate `scaleX` via tween:
```
this.coinTween = this.tweens.add({ targets: this.coins.getChildren(), scaleX: {from:1,to:0.35}, duration:600, yoyo:true, repeat:-1});
```
Potential issue tween targets are group children including disabled; still fine. Need restart scene destroys tweens. Good. Need maybe coin body circle not affected by scale? Arcade body might scale? Better not. Could instead set `coin.setTexture` alternating. Let's generate `coinA` and `coinB` and update textures in `update`. Need no tween complexity. Use `coinA` 24x24 with gold circle and inner oval; `coinB` narrow gold ellipse with bright center. In update:
```
if (time > this.nextCoinFrame) { this.coinFrame=...; this.nextCoinFrame=time+180; children.iterate(c=>{ if(c.active) c.setTexture(...);});}
```
Need switch texture with same size. Nice.

Need overlay UI:
Global functions:
```
const ui = {...};
function setCoinCount(n){...}
function showOverlay(kind,coins){...}
function hideOverlay(){...}
function restartGame(){ hideOverlay(); const scene=window.game?.scene.getScene('Level'); if(scene) scene.scene.restart(); }
```
Need CSS `.hidden`. Need pointer events. Overlay button `id=overlayRestart`. HUD button `id=restartBtn`. Add event listeners on DOMContentLoaded? Since script at bottom after elements, can add immediately. Need game global perhaps `const game = new Phaser.Game(config);` but if restart function declared before game assignment, closure referencing `game` fine. Need use `window.game = new Phaser.Game(config)` to access from button. Need no network.
Need `showOverlay` text:
- lose `Game Over` with "You fell into a gap or bumped an enemy." maybe specific reason argument.
- win `Level Complete!` with `You collected ${coins} of ${total} coins.`
Need card with button.
Need `endGame(kind, reason)`:
```
if(this.finished)return;
this.finished=true;
this.physics.pause();
this.player.setTint(kind==='lose'?0xff7777:0xffffff);
showOverlay(kind,this.coinsCollected,coinTotal,reason)
```
Physics pause means scene.update still runs but guard returns; R key won't work if `update` returns before checking R. Could handle R globally via keyboard event? Need restart via button works. Requirement Restart button. Could also allow R in loss/win; add key listener outside update:
```
this.input.keyboard.on('keydown-R',()=>this.scene.restart())
```
But scene restart with keyboard event might register duplicate? On shutdown, input event listeners likely removed. Could use global `window.addEventListener('keydown',...)` for R to call restartGame robustly, and preventDefault. But Phaser also handles R. Could just add global event listener:
```
window.addEventListener('keydown', e=>{ if(['ArrowLeft',...,'Space'].includes(e.code)) e.preventDefault(); if(e.code==='KeyR') restartGame();});
```
Need avoid `KeyR` causing restart repeatedly on key repeat; check `e.repeat`. Might be okay. Then no need R key in Phaser update. But requirement display controls, R Restart optional. Could include. Need global preventDefault arrows/space to avoid page scroll. However calling `preventDefault` on keydown might still allow Phaser to see event since listener on window likely before Phaser? Phaser listens on window or document; event propagation still occurs regardless preventDefault. Fine.
Need no `keydown-R` listener in Scene update; use global. Need ensure global `restartGame()` can call `window.game.scene.getScene('Level').scene.restart()` even after physics pause. Yes. Need hide overlay. Good.
Need avoid restart when scene not yet created (game boot) but safe check.
Need maybe `scene.scene.restart()` while scene paused? `physics.pause()` doesn't pause Scene, just Arcade world; restart works. Good.
Need `this.finished` reset in create. Need hideOverlay in create.
Need HUD coin count reset to 0. Need maybe `coinTotal` global computed from coinPositions. Define constant `COIN_SPOTS` globally. Need `coinTotal=...`. Need `setCoinCount`. Need maybe status text "0 / 22 coins".
Need level generation functions.

Let's choose exact level data:
```
const W=1200,H=675,TILE=40,LEVEL_W=4400,GROUND_Y=540;
const GROUND = [[0,760],[920,1540],[1700,2380],[2540,3260],[3420,4400]];
const LEDGES = [
 {x:300,y:460,w:160}, // start platform, above ground
 {x:520,y:400,w:120}, // stair? Need accessible? Could be too high from ground (140 diff) but from platform 460 to400 (60) accessible. Nice.
 {x:780,y:480,w:120}, // little bridge over first gap 760-920, top 480; from ground 540 jump 60, easy. Could land and cross.
 {x:1080,y:450,w:160}, // segment2
 {x:1560,y:470,w:120}, // over gap1540-1700
 {x:1860,y:450,w:200}, // segment3
 {x:2180,y:410,w:120}, // high from previous 450 to410, accessible
 {x:2400,y:470,w:120}, // over gap2380-2540
 {x:2720,y:450,w:180}, // segment4
 {x:3060,y:410,w:120}, // high
 {x:3280,y:470,w:120}, // over gap3260-3420
 {x:3600,y:450,w:200}, // segment5
 {x:3920,y:410,w:120}
];
```
Need check gap bridge positions relative:
gap1 760-920 width160, bridge x780-900 top=480 (center gap; leaves 20 px each side). Player can jump from ground to bridge and then to next ground; trivially safe. Good.
gap2 1540-1700, bridge x1560-1680 top470 (70 above). Good.
gap3 2380-2540, bridge x2400-2520 top470.
gap4 3260-3420, bridge x3280-3400 top470.
Need platform height 70-90 above ground. Player can land. Need ensure can jump from ground just before gap to bridge whose start is 20px into gap; yes.
Need platform thickness 40. Player can potentially hit underside when jumping from ground because platform lies across gap; need jump early enough to be above top by x780. From ground edge x760, need body bottom <=480 before x780 (20px horizontal -> 0.077 sec). Vertical rise at t=.077 = -41.6+3.6=-38 => bottom502, not above480. So if running off edge and jumping at last moment, you'd hit side of bridge or fall. Need jump earlier from x680: at x780 (100px /260=.385s), vertical rise=-208+89=-119 => bottom421, above platform; descending crosses top480 around t=.71 at x865, so can land on bridge. Good. Need player must jump ~80px before gap. Fine.
Could make bridge top=500 (40 above ground) so easier to clear; but still could hit side. Need maybe bridge starts before gap? x740-900, so platform overlaps ground segment from740-760 at y480. Player can jump onto from x650 etc. Better. Need perhaps visually over ground creates a step. Use bridges top=490 (50 above), starts at gapStart-40 and ends gapEnd-20, e.g. 720..900. Then accessible. Need survivability. But gaps should remain meaningful if player can fall. Could design floating platforms not spanning entire gap so direct jump needed. Simpler direct jump from ground: gap160, horizontal jump234; no bridge needed. If jump from edge x748 and land x932, need body center travel184; airtime to ground .9*260=234, okay. Need jump timing. Bridge can make easier if placed high though. Maybe okay.

Need ensure level completable without impossible high platform. Main path can stay on ground and jump gaps; floating platforms optional for coins. Need no enemies blocking gaps in impossible ways. Need enemies patrol away from gap edges maybe. We can place enemy mid-segment, can stomp or jump over. Need jump height121, enemy height30; can jump over from side. Fine.
Need maybe direct gap jump from x=748 to x=932. At jump -540, gravity1200, airtime until body bottom reaches y540 from y540 is 0.9. Horizontal 234. Starting center max x=748 (body right=760), ending center min x=932 (body left=920), distance184; available234, margin50. Good. Need if jump held? no variable height; fixed. Fine.
Need no collision with platform above gap if direct jump; if bridge at top480, apex bottom419; player passes over bridge and may land on it. If bridge occupies most gap, player may land on it; then need jump off to next ground. Easy. Need but landing on bridge while descending occurs around t~0.71 (body bottom480) at x=748+185=933, which is beyond gap end920; if bridge ends900, no landing—player lands on ground at x920, perfect. Interesting. If jump from earlier x680, descending cross top480 around t=.71 at x865, land on bridge. Good. Both choices.
Need perhaps bridge x780-900 top480 and player can jump from x680. Works. Good.
Need platform rows at y460 etc could obstruct ground path? They are 80px above ground, player height40, so player can run underneath with 40px headroom (platform bottom500, ground top540; player top502; 2px clearance) actually player top502, platform bottom500 => only2px gap, safe but collider may snag from below. Need if player jumps from ground underneath platform, they'll hit underside. That's fine but could make path tricky. Starting platform x300-460 top460, bottom500; player on ground body top502, 2px clearance. Need slight tolerance. Better set platform top450 (bottom490), clearance12. Need ground-to-platform rise90, apex121; accessible. Set start platform y=450 (90). Need player top502, platform bottom490 =>12 gap. Good. Use y=450 for first. Need from ground jump onto platform top450 (90 rise) at ascent t=(540-sqrt(291600-216000)=sqrt75600=275)/1200=.221; horizontal57px. Descending t=.679; horizontal176px. Need start x~200 -> ascending x257, platform starts300; descending x376 -> land. Good. Fine.
Need other floating platforms top420, bottom460, clear. Good. Need keep heights within121.

Platforms:
```
[
{x:300,y:450,w:160}, {x:520,y:400,w:120}, // from first top450 to400 only50 rise; horizontal gap60
{x:780,y:480,w:120}, // bridge
{x:1080,y:450,w:160}, {x:1320,y:410,w:120},
{x:1560,y:470,w:120},
{x:1860,y:440,w:200}, {x:2160,y:400,w:120},
{x:2400,y:470,w:120},
{x:2720,y:440,w:180}, {x:3000,y:400,w:120},
{x:3280,y:470,w:120},
{x:3600,y:440,w:200}, {x:3900,y:400,w:120}
]
```
Need from ground to floating top400 (140 rise) impossible, but reachable from nearby platform top440/450 (40-50 rise). Good. Need maybe platform at x520 y400 reachable from x300-460 y450 (60 gap,50 rise). Need jump horizontal enough. Fine.
Need some coins above high platforms.
Need ground segments exact multiples of40: 0,760 (19 tiles); 920 (23),1540(38.5?) 620 width=15.5 tiles; need tileSprite can handle fractional but okay. Better use multiples40:
LEVEL_W=4400
segments:
[0,760] width760=19*40
[920,1560] width640
[1720,2400] width680
[2560,3280] width720
[3440,4400] width960
gaps160 each. Use nice multiples.
Bridges:
gap1 760-920: x780..900 width120.
gap2 1560-1720: x1580..1700 width120.
gap3 2400-2560: x2420..2540 width120.
gap4 3280-3440: x3300..3420 width120.
Need final ground to4400; goal x4160; castle x4270.
Need platform top perhaps:
- [300,450,160] (x=left coordinate)
- [520,400,120]
- bridge [780,480,120]
- [1080,440,160], [1320,400,120]
- bridge [1580,470,120]
- [1840,440,200], [2140,400,120]
- bridge [2420,470,120]
- [2720,440,180], [3000,400,120]
- bridge [3300,470,120]
- [3600,440,200], [3900,400,120]
Need gap bridge top470 (70 above ground). Fine. Need player body run under bridge? bridge spans gap only, no ground underneath. Good.
Ground enemies:
- x=620, range 500-720; start platform above x520-640 top400, no issue.
- x=1100 range 980-1480; platform x1080-1240 top440 overhead. Enemy can walk under; player on ground top502, platform bottom480, clearance22. Enemy height28 top512, clear32. Fine.
- x=1380 maybe same segment but overlapping range could collide; avoid.
- x=1900 range 1780-2320; platform1840-2040 top440 overhead. Fine.
- x=2800 range2640-3180.
- x=3700 range3520-4040.
Need maybe one enemy near x=400? Starting area enemy at x620; close enough. Need test stomp perhaps browser tool can simulate jump near enemy; could be tricky. Need perhaps ensure enemy near start at x250 to easily stomp. But side contact death risk when running. Could place first enemy at x650 min=570,max=720. Starting area platform at300. Need camera visible. To test stomp, tool could move right and jump at x~600. Not necessary? Required verify representative checks includes running/jumping, landing platform, camera, restart. We should test stomp maybe if time. Need could place a "nearby enemy" at x350 on ground under platform? If platform x300-460 top450, enemy at x600 actually. Could place enemy at x500 min=440,max=720, after platform. Need jump from platform onto enemy. Nice. Need starting platform ends460; enemy at520, can drop from platform onto it at x500. Could test. But if player lands on platform then walks off, enemy at520 below, can stomp. Good. Use enemy x=560, min=480,max=720, speed45. Need moving; tough. Could set speed40. Need stomp condition. Fine.
Need maybe enemy patrol ranges should not approach gap edges. min480 max720 within0-760. Good.
Need second enemy at1200 range1000-1460, etc.
Need total coins perhaps 24. Define positions globally:
Starting visible around x=160,220,280,350,410, etc. Need platform coins at safe y:
- ground coins center y=500 at x=160,220,280? But platform at x300-460 top450; coins at x340,400 could be on platform center y=410 (40 above top450? coin bottom422, platform top450, gap28; player standing on platform has body bottom450, top412, coin body y398-422 overlaps top region412-422, so collect while standing. Good. If coin center410, body bottom422, player top412 => overlap10. Good.)
- high platform x520-640 y400, coins at y360, x560,600.
- ground x700 y500? gap starts760; can collect.
- bridge coin x830,y440 (40 above platform480), player on bridge top480, body top442, coin bottom452 -> overlap10.
- segment2 ground x960,1020 y500; platform coins x1120,1180 y400 (platform top440, body top402, coin center400 bottom412 => overlap10); high platform x1320-1440 y400, coins y360.
- bridge coin x1640,y430.
- etc.
Need coin center relative to platform top: top -40 (coin center), bottom top-28, player body top = top-38 => overlap10. Good. For ground top540, player body top502; coin center500 -> bottom512, overlap10. Good. So use `y=platformTop-40` for platform coins. Need collectible by standing on platform. For bridge top470, coin y430, player top432 -> coin bottom442 overlap10. Good.
Need ground coin y=500. Nice.
Need coin group with `allowGravity:false, immovable:true` perhaps create static images? Use physics.add.group({allowGravity:false, immovable:true}). Each `coin=this.coins.create(x,y,'coinA')`; coin.body.setAllowGravity(false); coin.body.setCircle? If default rectangle 24x24, easy. Could setCircle(9,3,3). Need overlap robust. If circle body set, player standing on platform top with top=442, coin body center? body position offset3, radius9 => top=coin.y-12+3=coin.y-9, bottom=coin.y+9. For coin y=430, bottom439; player top432 -> overlap7. Good. Ground coin y500,bottom509; player top502 -> overlap7. Good. Use circle body. Need `coin.body.setCircle(9,3,3)` perhaps static? dynamic group but allowGravityfalse. Need `coin.body.setAllowGravity(false); coin.body.moves=false;` Could avoid body drifting. `coin.setImmovable(true)` maybe. Fine. Need `coin.body.setCircle(9,3,3)`. Need `coin.setDepth(4)`.
Need overlap callback:
```
this.physics.add.overlap(this.player,this.coins,(player,coin)=>{
 if(this.finished || !coin.active || coin.taken) return;
 coin.taken=true;
 coin.disableBody(true,true);
 this.coinsCollected++;
 setCoinCount(...);
 this.popText(coin.x,coin.y,'+1',0xffe45c);
}, undefined, this)
```
Need `disableBody(true,true)` hides and deactivates. Could `coin.destroy()` but group iteration okay. `disableBody` works on Arcade Sprite. Need perhaps tween text floats. `this.add.text(...)` with stroke etc. This uses system font, no external asset. Need `this.tweens.add({targets:t,y:t.y-30,alpha:0,duration:500,onComplete:()=>t.destroy()})`. Good. Need text scroll with world by default (scrollFactor1) so attached to world position. Fine.
Need stomp poptext similarly.
Need total coin count maybe 30. Need all coin positions count. Let's enumerate 30:
```
const COIN_SPOTS = [
 [160,500],[220,500],[280,500],
 [340,410],[400,410], // platform y450 =>410
 [560,360],[600,360], // y400 =>360
 [700,500],
 [830,440], // bridge y480 =>440
 [960,500],[1020,500],
 [1120,400],[1180,400], // platform y440=>400
 [1360,360],[1400,360], // high y400
 [1640,430], // bridge y470=>430
 [1760,500],[1820,500],
 [1900,400],[1980,400], // platform y440=>400
 [2180,360],[2240,360], // high y400
 [2480,430],
 [2600,500],[2660,500],
 [2780,400],[2860,400], // platform y440
 [3040,360],[3100,360], // high y400
 [3360,430],
 [3480,500],[3540,500],
 [3660,400],[3740,400], // platform y440
 [3940,360],[4000,360], // high y400
 [4120,500] // near flag
];
```
That's 37. Fine. Need display `0 / 37`. Need some coins on high platforms optional. Need ensure all visible count reset. Good.
Need maybe coin at x280,y500 under platform x300 start; no overlap side. Fine.
Need ground coin at x700 near gap and enemy at560; fine.
Need clear path to goal. Need flag at x4160. Need level width4400. Need castle x4280. Need goal sensor at x4160, y470 (width60,height140). Need player on ground center y521, body x around4160,y502-540; sensor maybe y=470 h=140 covers400-540, so overlap at y502-540. Good. Need flag visual at x4160,y540; origin bottom. Need sensor staticImage generated white1x1 scaled60x140 setVisible false. Need physics.add.overlap. Need perhaps flag pole itself no collider; fine.
Need win state if player reaches x4160. Need player might jump over sensor? sensor extends y390-540; player jump apex body bottom419, still overlaps top region? If jumping high at x4160, body y381-419, sensor y400-540 -> overlap19. Good.
Need castle generated texture perhaps width180,height150 with origin(0.5,1) at y540. Draw using graphics rectangles, dark door, battlements, windows. Need no external assets. Good.
Need maybe background decorations near ground: bushes generated texture 80x40, placed at x etc on solid segments with depth0.5 (behind ground? if behind ground and y540, lower part hidden). Need cloud and hills. Need maybe draw world ground edges? Visual ground tileSprites cover. Need gap visible as sky/earth background? Since sky is camera background and earth tileSprites only on segments, gaps show sky all the way down—classic pits often show sky/black, okay. Could add dark pit gradient behind gaps perhaps generated rectangle with dark blue at bottom. But tile sprites and background hills may show across gaps due scrollFactor; need don't fill gap visually with hills. Hills placed behind ground at y540, could visually span gaps and look like ground, confusing. Need hills scrollFactor 0.45 and y maybe 540; their bases might show in gaps. Could set hill y=600 with bottom behind earth; but scrollFactor means location changes. Could still show. Need ensure gaps visually obvious: add dark underworld rectangles below groundY across entire level at depth0, maybe sky above; hill images at depth0.1 and dark pit overlay? Actually easiest: use camera background blue; add a big dark blue rectangle from y=540 to675 across world at depth0 to represent underground. Then ground tile sprites at depth1. Gaps show dark blue pit, clearly not solid. But hills behind ground from y~420-540 might also show in gaps. We can set hills' bottom y=540 and only above ground; in gaps, hill shape could appear but not solid; maybe okay. Need add dark pit rectangle `this.add.rectangle(0,GROUND_Y,LEVEL_W,H-GROUND_Y,0x16385b).setOrigin(0,0).setDepth(-2)` with scrollFactor1. Need camera background sky. Need hills at depth -1 maybe behind ground but above pit. Could place hill y=540 and draw hills semicircle, in gaps they would show green land behind and might look solid; but dark pit below540. Need perhaps avoid hills near gaps or use parallax slow. Could place bushes at known solid segments only; no need hills if cloud + sun. Could generate hill texture and place with scrollFactor0.25 at x coordinates; because parallax, visual location relative to gaps shifts, not exact. Fine.
Need maybe a "classic Mario-inspired" look: blue sky, white clouds, green hills, brick blocks, coins, mushroom enemies, red-capped hero, flag/castle. Good.

Need generated textures specifics. Let's write helper robustly:
```
createTextures() {
 if (this.textures.exists('hero')) return;
 const make=(key,w,h,fn)=>{const g=this.make.graphics({x:0,y:0,add:false}); fn(g); g.generateTexture(key,w,h); g.destroy();};
 make('solid',1,1,g=>{g.fillStyle(0xffffff,1);g.fillRect(0,0,1,1)});
 make('groundTop',40,40,g=>{...});
 ...
}
```
Need `fillTriangle` for hills? Graphics has `fillTriangle(x1,y1,x2,y2,x3,y3)`. Could use `fillEllipse`. Need ensure method names: Phaser.GameObjects.Graphics has `fillRoundedRect`, `fillCircle`, `fillEllipse`, `fillTriangle`, `fillRect`, `lineStyle`, `strokeRect`, `strokeCircle`, `fillGradientStyle` maybe. Use basic methods likely. `fillEllipse(x,y,width,height)` exists. `fillRoundedRect` exists. Need maybe `fillStyle(color, alpha)`. Fine.
Hero pixel:
```
make('hero',32,40,(g)=>{
 // shadow? no
 g.fillStyle(0xb52b2b); g.fillRect(6,0,20,7); // cap
 g.fillStyle(0xe33b32); g.fillRect(4,5,24,5); // brim
 g.fillStyle(0xffc49a); g.fillRect(7,10,18,12); // face
 g.fillStyle(0x352018); g.fillRect(18,14,3,4); // eye
 g.fillStyle(0x8b451d); g.fillRect(7,17,5,4); // moustache
 g.fillStyle(0x2b5bd7); g.fillRect(5,22,22,12); // overalls
 g.fillStyle(0xe33b32); g.fillRect(3,21,5,10); g.fillRect(24,21,5,10); // shirt arms
 g.fillStyle(0xffd34d); g.fillRect(12,24,3,3);g.fillRect(19,24,3,3); // buttons
 g.fillStyle(0x6b3b1f); g.fillRect(6,34,8,6);g.fillRect(18,34,8,6); // shoes
});
```
Need heroRun similar with one leg forward. heroJump with arms up. Could generate via copy modifications. Need maybe avoid too many; can generate all. Need body same dims.
Need enemy:
```
make('enemy',34,30,g=>{
 dark outline fillRoundedRect(1,4,32,22,8) etc
 brown body, tan lower face, eyes white, pupils, angry brows, feet
});
```
Need `fillRoundedRect`; if unavailable? It exists. Could use fillRect manually to be safe. Use rectangles only. Fine.
CoinA:
```
g.fillStyle(0xffc928); g.fillCircle(12,12,10);
g.lineStyle(2,0xd48700);g.strokeCircle(12,12,10);
g.fillStyle(0xffe977);g.fillEllipse(12,12,8,16);
g.fillStyle(0xd99000); g.fillRect(10,5,4,14); maybe star? 
```
Need graphics uses circles visually; fine.
CoinB narrow: ellipse width6 etc.
Brick:
```
g.fillStyle(0x9a4b1e); fillRect(0,0,40,40)
g.fillStyle(0xd77b35); fillRect(1,1,38,38)
g.lineStyle(2,0x7a3518); strokeRect...
lineBetween? `g.lineBetween(x1,y1,x2,y2)` available. Could use `fillRect` for mortar: fillRect(0,19,40,3), fillRect(19,0,3,20), fillRect(9,22,3,18), fillRect(29,22,3,18), etc.
```
Need Graphics lineBetween method likely. Use fillRect for lines to avoid lineStyle issues.
GroundTop:
```
brown base, dark pixel dots, green top strip with highlights
```
Earth:
```
brown with darker speckles
```
Cloud:
```
g.fillStyle(0xffffff,0.95); fillCircle etc
```
Hill:
```
g.fillStyle(0x27964b); fillEllipse(110,110,220,160); maybe fillTriangle...
g.fillStyle(0x3ec65c) highlights...
g.fillStyle(0x1b7438); eye spots? 
```
Need if ellipse extends beyond texture width/height, generateTexture clips. Fine.
Bush:
```
green circles.
```
Flag:
```
make('flag',70,200,g=>{
 g.fillStyle(0x6b6b6b); g.fillRect(31,4,6,190);
 g.fillStyle(0xd9d9d9); g.fillRect(29,4,10,8);
 g.fillStyle(0x2bb04a); g.fillTriangle(37,12,64,30,37,48); maybe classic flag
 g.fillStyle(0xffffff); small star/circle
 g.fillStyle(0x777); base blocks...
});
```
Need transparent texture beyond drawings; generated texture likely clear.
Castle:
```
make('castle',180,150,g=>{
 bricks etc, battlements, door arch, windows.
});
```
Need perhaps flag texture and castle depth. Fine.
Need maybe `g.generateTexture` will include transparent background? Graphics canvas initially transparent. yes.

Need background:
```
addBackground() {
 this.add.rectangle(0,GROUND_Y,LEVEL_W,H-GROUND_Y,0x143b64).setOrigin(0,0).setDepth(-3);
 const sun=this.add.circle(980,115,42,0xfff27a).setScrollFactor(0.08).setDepth(-2); // if circle at world x980 with scrollFactor .08 creates at x980 initially; camera shift appears nearly fixed. Good.
 for (let x=100; x<LEVEL_W; x+=420) { const cloud=this.add.image(x,100+(x%3)*30,'cloud').setScrollFactor(0.35).setDepth(-2).setScale(0.9+...);}
 for (...) hill images with scrollFactor0.55 at y=GROUND_Y+4, depth=-1; origin(0.5,1)
```
Need with scrollFactor, world x placement may be weird but okay. Could instead use sky fixed graphics and scrollFactor0.15. Need no concern.
Bushes placed at solid segment x positions with scrollFactor1, depth2? Actually ground tileSprite depth1; bushes should be in front of ground top maybe depth2 but behind player/enemies. Place origin(0.5,1) at y=GROUND_Y+2, depth2; they might cover ground top but fine. Need segment positions [140,680,1000,...], avoid enemies/coins. Could use generated bush.
Need perhaps ground visual tileSprites depth1; pit rectangle depth -3; hills depth -2. Good.
Need ground body perhaps invisible but in `platforms` group, no visual depth. Need make sure physics collides with ground from all directions; body top at540. Player can land. Need body height maybe H-GROUND_Y+80=215; extends below world. setDisplaySize(w,200) and center y=GROUND_Y+100. Need in physics world bounds y maybe975. Fine.
Need `this.add.tileSprite` with texture at origin(0,0). Need width/height. For ground top:
```
const top=this.add.tileSprite(start,GROUND_Y,end-start,TILE,'groundTop').setOrigin(0,0).setDepth(1);
const dirt=this.add.tileSprite(start,GROUND_Y+TILE,end-start,H-GROUND_Y-TILE+40,'earth').setOrigin(0,0).setDepth(1);
```
Need if height less than one tile? H-GROUND_Y=135, top40, dirt95 => tile repeats. Good. Need body height maybe 200 to ensure fall collision? Only top matters. Use center y=GROUND_Y+100, height200. Fine.
Need a static body with generated `solid` texture scaled:
```
const body=this.platforms.create(start+w/2, GROUND_Y+100,'solid');
body.setDisplaySize(w,200).setVisible(false).refreshBody();
```
Potential issue: `staticGroup.create()` with a 1x1 texture, then `setDisplaySize(w,200)` scales to w and200; `refreshBody()` recomputes body from display width. Fine. Need body origin center default0.5. Good.
Need floating platform:
```
const visual=this.add.tileSprite(p.x,p.y,p.w,TILE,'brick').setOrigin(0,0).setDepth(2);
const body=this.platforms.create(p.x+p.w/2,p.y+TILE/2,'solid');
body.setDisplaySize(p.w,TILE).setVisible(false).refreshBody();
```
Need perhaps bricks edges nice. Need maybe add darker bottom line via generated brick texture. Fine.
Need collisions with tileSprite? no.
Need check `physics.add.staticGroup().create()` returns ArcadeSprite with `refreshBody()`. yes.
Need maybe group children hidden static bodies are still processed. yes.
Need `this.platforms` set before build level. Good.
Need `buildLevel()` also adds ground edge perhaps no need.
Need goal. Need perhaps check colliders from floating bodies with enemies. Fine.

Need enemies group:
```
this.enemies=this.physics.add.group({allowGravity:true, immovable:false});
for each data:
 const e=this.enemies.create(data.x, GROUND_Y-15, 'enemy'); // texture34x30 center => bottom = GROUND_Y; good
 e.setDepth(5); e.setCollideWorldBounds(false); e.setBounce(0);
 e.body.setSize(28,26); e.body.setOffset(3,4); // bottom? sprite center y=525, displayOrigin y15, body bottom y=525-15+4+26=540, good.
 e.dir=...; e.minX...; e.maxX...
 e.body.setVelocityX(e.dir*ENEMY_SPEED)
```
Need set `e.body.setAllowGravity(true)` default. Need `e.setMaxVelocity(100,800)`. Need `e.setData` or direct properties. Direct fine.
Need physics collider(enemies,platforms). Need no `collideWorldBounds`; custom turning. Need update:
```
this.enemies.children.iterate(e=>{
 if(!e || !e.active) return;
 if(e.x <= e.minX){e.x=e.minX;e.dir=1;}
 else if(e.x >= e.maxX){e.x=e.maxX;e.dir=-1;}
 e.setVelocityX(e.dir*ENEMY_SPEED);
 e.setFlipX(e.dir>0? false:true);
});
```
Need flipX maybe enemy texture symmetric so no matter. Need perhaps enemies get stuck on floating platform body if they walk under? Platform bottom e.g.480, enemy top512, no collision. Fine.
Need overlap player/enemies:
```
this.physics.add.overlap(this.player,this.enemies,this.hitEnemy,undefined,this);
```
Callback:
```
hitEnemy(player, enemy) {
 if(this.finished || !enemy.active) return;
 const falling = player.body.velocity.y > 40;
 const fromAbove = player.body.bottom <= enemy.body.top + 16; // maybe body.bottom - enemy.body.top <=16
 if(falling && fromAbove) {
   player.y = enemy.body.top - (player.body.height - player.body.offset.y? hmm)
   player.setVelocityY(-360)
   enemy.disableBody(true,true)
   this.popText(...,'STOMP!',...)
 } else {
   this.lose('An enemy got you!')
 }
}
```
Need set player.y correctly: Body bottom formula y - displayOriginY + offsetY + body.height. For hero dimensions32x40, displayOriginY20, offsetY1, bodyH38 -> bottom=y+19. So `player.y = enemy.body.top - 19`. Could avoid exact: `player.body.y = enemy.body.top - player.body.height;` But Arcade body and sprite sync? Setting `body.y` may move sprite? Need use `player.setY(enemy.body.top - 19)`, but body offset depends current texture maybe same dims. Define constant `PLAYER_BODY_BOTTOM_OFFSET = 19`. Use `player.y = enemy.body.top - 19; player.body.updateFromGameObject?` Actually when you set sprite y, its body position updates on next physics step? Arcade Body `preUpdate` syncs from gameObject transform possibly using `body.position` and `prev`. If you set velocity but body may retain old y until preUpdate; setting `player.y` updates body? In Phaser, dynamic body position is driven by body, but `updateFromGameObject()` needed. Could call `player.body.reset(player.x, enemy.body.top - 19)` but reset sets velocity0 and removes gravity; then setVelocityY(-360). `body.reset(x,y)` works. Use `this.player.body.reset(this.player.x, enemy.body.top - 19);` It sets body.center? Actually reset(x,y) uses x,y as top-left? Need check: Arcade Body.reset(x,y) sets position to x,y center maybe? In Phaser docs, `body.reset(x,y)` sets GameObject position? Hmm. Could avoid repositioning; simply set velocityY(-360). The overlap may persist for one frame but enemy disabled immediately, no further death. Player might be a few pixels into enemy, but bounce works. Fine. Need maybe `player.setVelocityY(-360)`; no need position. Great. Need no `player.body.bottom` reset. In next frame player rises. Good.
Need enemy disableBody true,true. Need maybe add 100 points? no score required. Poptext.
Need side contact loss. Need `lose(reason)` invoke overlay. Need pause physics. Maybe player tint red. Fine.
Need stomp bounce upward and enemy defeated. Good.
Need falling gap: update `if(player.y > 720) this.lose('You fell into a gap!')`. Need if player falls through gap and camera fixed vertical, sprite disappears below screen before y720; overlay appears soon. Fine. Need physics world bounds high enough. Need maybe set bounds to y=1000; otherwise dynamic body with setCollideWorldBounds(false) can still fall beyond? `physics.world.setBounds` used for collision only if collideWorldBounds true, so no block. Fine.
Need side contact with enemy that is close to gap? Players can jump over. Good.
Need goal overlap:
```
const goalSensor=this.physics.add.staticImage(GOAL_X,GROUND_Y-75,'solid')
goalSensor.setDisplaySize(55,150).setVisible(false).refreshBody();
this.physics.add.overlap(player,goalSensor,()=>this.win(),null,this);
```
Need staticImage at y=465, h150 => top390,bottom540. Good. Need goal visual at x=4160,y540 origin(0.5,1), depth3. Need castle at x4280,y540 origin(0.5,1), depth0 maybe behind flag and ground. Need castle perhaps player could overlap but no collider. Fine.
Need `win()` guard and show overlay with coins. Need maybe player.setVelocity(0,0), physics.pause. Need perhaps setTint? no.
Need if `physics.pause()` called during overlap callback, fine. Need `showOverlay` DOM.

Need perhaps camera followness and restart. Need make `window.__debug` hook for browser inspection? Could expose game and scene state to inspect via browser tool's `inspect` perhaps tool returns DOM/console, maybe can evaluate JS? `browser inspect` likely returns page DOM and console maybe. Need we can add a debug panel or global state. Could use browser tool `inspect` perhaps includes JS eval? Need see. We can use browser screenshot and key. Could perhaps create hidden DOM data attributes updated each frame for player/camera/coins to inspect. This is clever: update `#debug` hidden? Need browser `inspect` might show DOM. Could show status via HUD text including x/camera? Not required but useful. Could add small `#state` element showing "x 100 · cam 0" maybe not desirable visually. Could set `document.body.dataset.playerX`, etc. Browser inspect may show dataset? Maybe not. Could use console logs on key events / restart. Browser tool inspect likely shows console messages. We can add logs for key/camera/restart? Need not pollute console but could. Need verify with browser actions and screenshot. Could expose `window.getState = () => ({...})`; but browser tool may not support evaluating JS. Need perhaps tool `inspect` returns DOM plus maybe console, not arbitrary JS eval. Need check once file created. Could make visual coordinate/camera readout in HUD: `POS 100 · CAM 0` in small muted text. That helps verify camera follow and restart via screenshots. We can include it as a debug/status indicator perhaps not too intrusive. Could call it "PROGRESS" or just small text. Need user asked display controls; adding camera position might look technical. Could put hidden text only for test? Could use HTML comment? Better have `#cameraReadout` small in HUD maybe "Camera 0 · X 100". Not classic style but okay. Could style subtle. Or use `data-*` attributes and inspect. We can maybe use browser's `inspect` action with text parameter? Need tool signature: action inspect no text? `text` accepts 2000 maybe for type? Could be used for JS eval? Need see. We'll test.

Need maybe use HTML overlay and Phaser DOM? Fine.

Need ensure generated textures on restart don't regenerate due guard. Need `if(this.textures.exists('hero')) return;` but if scene restarted in same game, `this.textures` global manager persists. Good.
Need when restarting, `hideOverlay()` called from global restart and create. Need coin count set0. Need camera scroll0. Need enemies recreated. Need player start x100,y500. Need coin group recreated. Need camera follow start. Need perhaps `this.cameras.main.setScroll(0,0)` after `startFollow` because startFollow immediately may adjust camera scroll based on player x100 and bounds clamp0. Fine. Need maybe reset camera lerp? startFollow sets. Fine.
Need maybe initial `this.cameras.main.setBounds()` after restart; yes.
Need global restart event maybe called before game initialized; check.
Need DOM buttons:
```
document.getElementById('restartBtn').addEventListener('click', restartGame);
document.getElementById('againBtn').addEventListener('click', restartGame);
```
Need overlay hidden by default via CSS `display:none`. Need `#overlay.show`.
Need perhaps clicking button gives focus to button, then keyboard events still go to window; Phaser's keyboard plugin listens to window, so okay. Need canvas focus not needed. Good.
Need avoid general keydown R restarted while user types? no inputs. Fine.

Need controls:
```
<div id=controls><kbd>←</kbd><kbd>→</kbd> / <kbd>A</kbd><kbd>D</kbd> RUN ...</div>
```
Need coin count. Maybe title "PIXEL PLUMBER RUN". Need classic Mario-inspired visual style but avoid naming Mario perhaps. Fine.

Need browser test strategy:
1. reload and inspect console, screenshot.
2. Use `browser key` action with text perhaps "ArrowRight"? Need tool signature has `text` (likely key name), `action key`. Could call `{"action":"key","text":"ArrowRight"}` maybe keydown only? Need see. There is also `type` action. Need perhaps hold keys via `key` action with text and maybe repeated? `browser` action key likely sends a key press, not hold. Tool perhaps supports `drag` etc. Need inspect tool output to deduce. Could use keyboard simulation by programmatically dispatching events in browser via `inspect` if eval supported. But likely browser tool has `key` for short press and maybe `text` field to specify key; need hold with `action:"key", text:"ArrowRight"` might be a press. Could call repeatedly, but each keydown+keyup would not move much. Maybe action `key` with text `"ArrowRight"` triggers keydown and holds? Need see. Could use `drag` to simulate? Need perhaps `browser` tool action `key` sends a key down-up event; likely not enough. Could use `type` with text of repeated characters? Might not hold arrows. Could leverage Phaser input keyboard state through JS from a debug query param or hidden button that autopilots. Need perhaps implement an in-game "demo" or keyboard state toggles to test. But requirement asks browser representative checks, need actually run and jump. We can add a built-in auto-test API accessible via URL hash? Or use browser tool to inject events if possible. Let's first understand browser tool. Since no docs. We can call reload after creating file. `inspect` perhaps output DOM and console; maybe can execute JavaScript via `text` field? Let's see later.

Need perhaps use `browser` action `key` with text `"ArrowRight"` and maybe tool supports `delta` for hold duration? The `delta` parameter is for scroll. No duration. Could call `key` with text maybe e.g. `"ArrowRight:1000"`? Unclear. Might need use `browser` action `drag` to hold? Hmm.

Maybe browser tool's `key` action sends a key press and can specify `text` as JSON like `{"key":"ArrowRight","down":true}`? Need inspect from underlying? Could search pi docs? Not relevant. Maybe browser tool implementation exposed in /app/pipeline? Could grep tool code. We have bash access to current directory maybe only job files, but could search /app/pipeline for browser tool code. Need perhaps not necessary but can inspect quickly.

Search too broad. Browser tool likely custom wrapper outside pi coding agent. Could find via /app/pipeline maybe "playwright" tool. But time. Let's focus implementation. Need maybe use browser tool after.

Need perhaps add a test harness in page to support keyboard simulation via URL query or external global function. Since browser tool could call `click` on a hidden element that triggers scripted movement. We can add a small "demo" button? But required controls display; adding hidden debug buttons might be okay. Could expose global `window.__test = {press(...), hold(...), state()}` and perhaps browser tool `inspect` can execute JS? Need maybe use `browser action type` with `text` into an input field where we can parse commands. Could add a hidden input? Not ideal. Alternative implement URL hash commands: on load, if `location.hash` includes `#demo`, run scripted sequence. Browser reload perhaps can specify? Tool reload no URL parameter. Could use `browser navigate` not available. Could use `click` on positioned debug buttons with x,y that trigger actions. Add small "DEMO" button in HUD to auto-run a scripted test; visually hidden maybe via opacity but clickable. Could use Phaser game input directly with synthetic KeyboardEvent from global function triggered by a debug button. But better to include a built-in "autoplay" not visible maybe suspicious.

Need test actual keys via browser tool. Let's see tool behavior after file. Could call `browser key` with text and inspect output. Likely action key supports Playwright `keyboard.press(text)`, which sends keydown+keyup quickly. Phaser's `isDown` may be true only for a few ms, maybe one frame if browser tool waits? It might be enough to move 4 px. Could call multiple times. There may be `motion` action that captures frames over time perhaps can hold keys? Need maybe action `motion` with text as key? Hmm. Let's inspect browser tool implementation from custom harness maybe find file. Use `find / -name '*browser*'` maybe.

Could search for tool schema `action:"motion"` in some bundled custom tool.

Not fruitful. Need just write file now. Time likely ~? We have enough. Need implement carefully.

Potential concern screenshot tool with Phaser canvas may capture blank if WebGL unsupported; use `Phaser.AUTO`, could choose WebGL; typically works in headless browser. If not, `Phaser.CANVAS` more reliable. Use `type: Phaser.CANVAS` to ensure no WebGL dependencies. Generated textures work. Need avoid `pixelArt` with CANVAS fine. Let's use `Phaser.AUTO` or `CANVAS`; headless chromium supports WebGL likely but to be safe `Phaser.CANVAS`. That's allowed. Need performance okay.

Need maybe Phaser 3.80 uses `this.make.graphics({x:0,y:0,add:false})` with Canvas renderer. Fine.
Need generated textures from graphics via `generateTexture`. In Canvas renderer, `Graphics.generateTexture` may draw to texture. Fine.

Need maybe `this.add.tileSprite` uses WebGL? Canvas works.

Need maybe DOM overlay prevents canvas keyboard? Phaser listens to window so okay. Need perhaps add `tabindex` to canvas? Phaser keyboard manager listens window. Fine.

Need write file. Let's craft full code meticulously. Need avoid syntax errors. Maybe use no optional chaining? Modern browser supports. Fine.

Detailed HTML/CSS.

Need `#state` readout maybe hidden. Could include small status in HUD:
```
<span id="position" class="readout">X 100 · CAM 0</span>
```
Need update each frame with `Math.round(player.x)` and `Math.round(camera.scrollX)`. This technically displays extra debug info but can be styled subtle as "DIST 0100". Better for verification. Could call `DIST 100 · VIEW 0`. That's game-like. Need perhaps not mention camera. But we can use it to inspect screenshot. We'll include a small `#telemetry` with `X 100 · CAM 0` under title? Could be considered debug; okay. It can help verify reset. Style tiny dim. Need update `document.body.dataset.playerX` etc too.
```
function setTelemetry(x,cam){ ... }
```
Call each frame with simple throttle maybe every frame fine. Need DOM dataset every frame maybe okay. Could update only when values change. Need set in create initial.
Need perhaps `window.gameState()` function returning state. If browser inspect can evaluate via console perhaps not. But could add a `<pre id="debugJson" hidden>` with JSON state updated each frame; browser inspect may include hidden text? Might not. Could make it `aria-hidden` hidden. Need perhaps `inspect` returns DOM text including hidden? uncertain. We can use visible telemetry.

Need maybe add `window.__gameState = () => ...` for browser tool if it can evaluate. Good. Add global:
```
window.getGameState = function(){ const scene=...; return {...}; };
```
Need perhaps browser tool `inspect` with `text` could execute JS? We'll see. But `window.getGameState` available.

Need perhaps expose testing helpers for synthetic keydown:
```
window.setTestKeys = ...
```
Not necessary if tool can run JS. But we could implement optional scripted input based on URL hash. Maybe not.

Need direct synthetic key events via global helper:
```
window.sendKey = (code, down=true) => window.dispatchEvent(new KeyboardEvent(down?'keydown':'keyup',{code,key:... , bubbles:true}));
```
Could use if browser tool `inspect` supports eval. But no need to include unless helpful. Could call within page using a DOM button? We can add debug "TEST" buttons? Hmm.

Need tool's `key` likely can press keys. Let's assume.

Need verify with browser screenshots. Need maybe moving player via key holds. We can perhaps use `browser action key` with text `"ArrowRight"` repeatedly, but if keydown+keyup fast maybe not. Could use `browser action drag` from x to x while mouse down? No. Could use `browser action motion` perhaps records frames while actions? Need maybe `motion` action takes `text` with a script? Let's call after reload and see.

Let's write file. Use a single `write`. Need ensure no external resource references. Need no fonts `@import`. Fine. Need no audio. Need no `src` except phaser.min.js.

Let's formulate JS fully:

```
const GAME_W = 1200,...
const ui = {...} // after DOM elements exist at script bottom.
function showOverlay(state,coins,reason)...
function hideOverlay...
function restartGame(){...}
window.addEventListener('keydown', e=>{ const code=e.code; if([...].includes(code)) e.preventDefault(); if(code==='KeyR' && !e.repeat) restartGame();});
...
class LevelScene extends Phaser.Scene {
...
create(){
 this.finished=false;...
 this.createTextures();
 this.cameras.main.setBounds(...);...
 this.addBackdrop();
 this.platforms=this.physics.add.staticGroup();
 this.buildPlatforms();
 this.player=...
 ...
 this.keys=this.input.keyboard.addKeys({left:'LEFT',...}); // need syntax. Phaser `addKeys` can take object mapping to keycodes or strings? It accepts object with key codes as values as strings e.g. `{up:'W',down:'S',left:'A',right:'D'}` maybe uses KeyCodes via string. Could use `this.input.keyboard.addKeys('LEFT,RIGHT,A,D,SPACE')` returning keys with names. Then `this.keys.LEFT.isDown`, etc. Need lowercase? I think returned object keys uppercase from strings. Better use `this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT)` etc individually:
 ```
 this.cursors = this.input.keyboard.createCursorKeys();
 this.wasd = this.input.keyboard.addKeys({left:Phaser.Input.Keyboard.KeyCodes.A, right:...});
 this.jumpKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
 ```
Need `addKeys` object with numeric KeyCodes works? likely yes. Could simply use `this.input.keyboard.addKeys('A,D,SPACE,LEFT,RIGHT')` then `keys.A`, `keys.D`, `keys.SPACE`, etc. Fine. Need `Phaser.Input.Keyboard.JustDown(this.keys.SPACE)`. Good.
 ```
 this.cameras.main.startFollow(this.player,true,0.12,0.12);
 this.cameras.main.setFollowOffset(-180,0); // maybe uncertain sign. Could omit for simplicity.
 this.cameras.main.setScroll(0,0);
 ```
Need maybe call setScroll after startFollow to force initial0. In update camera follow will clamp. Fine.
 Need create colliders before/after camera no matter.
}
```
Need order: player created after platforms, colliders after all. Need startFollow after player. Need initial telemetry.

`addBackdrop`: need `this.add.rectangle` with scrollFactor1. `this.add.circle` with scrollFactor maybe setDepth. Need use generation via shapes allowed. Fine.
Need perhaps hill images with scrollFactor0.45 and x positions maybe repeated. Need avoid hills covering pits too much. Use y=GROUND_Y+2, origin0.5,1, depth -1. Need dark pit rectangle at depth -3, clouds depth -2. Actually hill should be above pit but behind ground; if hill bottom at y542, its lower part can cover dark pit in gaps only down to542; dark pit from540 down, so 2px overlap. Fine. That gives green hills above gap only, not solid-looking. Good.
Need ground images depth1 (foreground). Bush depth2 behind player but on top of ground. Fine.

`buildPlatforms`:
```
for (const [start,end] of GROUND_SEGMENTS) {
 const w=end-start;
 const collider=this.platforms.create(start+w/2,GROUND_Y+100,'solid');
 collider.setDisplaySize(w,200).setVisible(false).refreshBody();
 this.add.tileSprite(start,GROUND_Y,w,TILE,'groundTop').setOrigin(0,0).setDepth(1);
 this.add.tileSprite(start,GROUND_Y+TILE,w,GAME_H-GROUND_Y-TILE+40,'earth').setOrigin(0,0).setDepth(1);
}
for platforms...
```
Need static body height200 means center y640, top540,bottom740. Good. Player fall into gap won't collide with side of ground segment from below? Body extends down to740; if falling into gap near edge, could collide with side of ground body and be blocked horizontally, but that's okay; player could land on side? Arcade static body blocks horizontal. Need if falling into gap close to edge, body side collision could push player; but death threshold y>720 could occur while body still colliding with ground side around x760. Hmm. If player falls just inside gap at x780, ground body ends760; no collision. If at x750 (still above ground), no fall. Fine.
Need player can land on top of ground body at y540. Good.
Floating platform collider center y=p.y+20, height40. Need setDisplaySize. Visual. Need maybe add small shadow under floating platform via `g` none. Fine.
Need add pipes? Could be visual but not solid. Not necessary.

`createCoins`: need group created after platform, before player? no matter.
```
this.coins=this.physics.add.group({allowGravity:false,immovable:true});
COIN_SPOTS.forEach(([x,y])=>{
 const c=this.coins.create(x,y,'coinA');
 c.setDepth(4); c.body.setAllowGravity(false); c.body.setCircle(9,3,3); c.body.moves=false;
 c.taken=false;
});
```
Need `body.moves=false` maybe static-like but still overlap works? If body.moves=false, still part of collisions? Arcade Body `moves=false` means not integrated but can be overlapped; yes. Could avoid moves=false; allowGravityfalse and velocity0, group immovable. Fine. Need perhaps gravity from world default applies if group config uses `allowGravity:false`. To be safe set each.
Need maybe `setImmovable(true)` on sprite. Fine.
Need `c.body.setCircle(9,3,3)` after group create; body default 24x24. Need setOffset with circle? `setCircle(radius, offsetX, offsetY)` handles. Fine.
Need `coinA` texture 24x24.

`createEnemies`:
```
this.enemies=this.physics.add.group();
...
const e=this.enemies.create(...);
e.body.setSize(28,26);
e.body.setOffset(3,4);
e.setCollideWorldBounds(false);
e.setBounce(0);
e.setVelocityX(...);
e.setDepth(5);
e.dir=...
```
Need `enemy.body.setAllowGravity(true)` default. Need maybe `e.setMaxVelocity(100,800)`. Need `e.patrolMin` etc.
Need perhaps `enemy.setImmovable(false)`.
Need collider after.
Need enemy texture 34x30; body bottom at groundY if spawn y=GROUND_Y-15? Sprite center y525; displayOriginY15; body bottom=525-15+4+26=540. Good. Need body top=514; player on ground body top502, bottom540; side overlap vertical502-540 with enemy514-540; death. Stomp: player falling body bottom maybe <=enemy.top+16 =530. Good. With player bottom540 when side, difference26>16. Good.
Need enemy body offset maybe 3,4. Fine.

`createPlayer`:
```
this.player=this.physics.add.sprite(100,500,'hero');
this.player.setDepth(6);
this.player.body.setSize(24,38);
this.player.body.setOffset(4,1);
this.player.setMaxVelocity(400,900);
```
Need no `setCollideWorldBounds(false)` default false. Need avoid player leaving world left? Fine. Could `setCollideWorldBounds(true)`? That would prevent falling through bottom if world bounds y=900 but left/right boundaries would block. Need camera bounds level; physics world width4400. Could set true and world bounds height975, allowing fall until y975; death threshold720 would trigger before hitting bottom. But if setCollideWorldBounds true, player's body would collide with floor at y975 only after threshold. Fine. Need side boundaries. Could set true to avoid x<0. `this.player.setCollideWorldBounds(true)`. But world bounds height perhaps GAME_H+300=975; death at720, so okay. Need body might collide with bottom at975, but game already over. Fine. Use true.
Need `this.player.body.setGravityY(0)` default inherits1200. Fine.
Need maxVelocity y maybe 900. Good.

`createGoal`:
```
this.add.image(GOAL_X+120, GROUND_Y,'castle').setOrigin(0.5,1).setDepth(0);
this.add.image(GOAL_X, GROUND_Y,'flag').setOrigin(0.5,1).setDepth(3);
const sensor=this.physics.add.staticImage(GOAL_X,GROUND_Y-75,'solid');
sensor.setDisplaySize(52,150).setVisible(false).refreshBody();
this.goalSensor=sensor;
```
Need castle at GOAL_X+130 =4290, within level width4400; width180 extends4200-4380. Good.
Need flag texture width70 bottom at540; pole from y4..194, top at346. Good.
Need sensor top390 (540-75-75=390), bottom540. Good.
Need `this.physics.add.overlap(this.player,this.goalSensor,...` after colliders. Need store sensor not in platforms. Fine.

`setupCollisions`:
```
this.physics.add.collider(this.player,this.platforms);
this.physics.add.collider(this.enemies,this.platforms);
this.physics.add.overlap(this.player,this.coins,this.collectCoin,null,this);
this.physics.add.overlap(this.player,this.enemies,this.hitEnemy,null,this);
this.physics.add.overlap(this.player,this.goalSensor,()=>this.win(),null,this);
```
Need callback context for arrow maybe okay. For `collectCoin`, method uses `this` if bound via context arg. `this.physics.add.overlap(..., this.collectCoin, undefined, this)` ensures. Need function signature (player,coin). Fine.
Need hitEnemy callback context too.
Need maybe collision of enemies with each other? not necessary but they could overlap; okay.
Need `this.physics.add.collider(this.enemies,this.platforms)` ensures ground collision. Need no enemy-enemy collider.

`update(time,delta)`:
```
if(this.finished){ updateTelemetry(); return; }
const left = keys.LEFT.isDown || keys.A.isDown; ...
if(left===right) setVelocityX(0); else ...
if(Phaser.Input.Keyboard.JustDown(keys.SPACE) && this.player.body.onFloor()) {...}
...
if (player.y>720) this.lose(...)
this.enemies.children.iterate(...)
if (time>this.nextCoinFrame)...
this.updatePlayerArt(time)
this.updateTelemetry()
```
Need if death from gap in update, physics.pause; then after lose call, continue maybe fine; guard at next frame. Need perhaps return after `lose`.
Need jump uses `JustDown` after key state; global keydown `preventDefault`. Need `keys.SPACE` from `addKeys('LEFT,RIGHT,A,D,SPACE')`; key names maybe `SPACE` and `LEFT` etc. Need confirm Phaser addKeys with comma string returns object with keys e.g. `W,A,S,D` uppercase. yes.
Need `keyboard.addKeys('LEFT,RIGHT,A,D,SPACE')` perhaps uses KeyCodes lookup by string; should work. Need maybe `SPACE` maps to 'SPACE'. yes.
Need perhaps global R handler causing Phaser not need R key. Fine.

Player art:
```
if(!this.player.body.onFloor()) this.player.setTexture('heroJump');
else if(Math.abs(vx)>10) this.player.setTexture(Math.floor(time/120)%2 ? 'heroRun':'hero');
else this.player.setTexture('hero');
```
Need preserving `flipX` after texture change; flipX property persists. Need set flipX based on direction.
Need maybe `this.player.setFlipX(left)`; if no movement leave previous. Good.

Coin animation:
```
if(time>this.nextCoinFrame){this.coinStage=1-this.coinStage;this.nextCoinFrame=time+170; const tex=...; this.coins.children.iterate(c=>{if(c&&c.active)c.setTexture(tex);});}
```
Need `setTexture` doesn't affect body. good.

Enemies:
```
if(!enemy.active) return;
if(enemy.x <= enemy.minX){...}
...
enemy.setVelocityX(enemy.dir * ENEMY_SPEED);
enemy.setFlipX(enemy.dir >0); // not important
```
Need if physics world paused, update returns before. Fine.

Telemetry:
```
function setTelemetry(x,cam,coins,enemies) { ... }
```
Need maybe call every frame. Need body dataset. Could set text: `X ${Math.round(x)} · CAM ${Math.round(cam)}`. Need display initial. Need coin count separate. Need maybe `window.getGameState` uses scene fields.
```
window.getGameState=()=>{ const s=window.game.scene.getScene('Level'); return {x:..., y:..., cameraX:..., coins:..., activeCoins:..., enemies:..., finished:s.finished};};
```
Need `coins.countActive(true)` group method maybe exists. Could use `getChildren().filter(c=>c.active).length`. Fine.
Need `overlay.classList.contains('show')`.
Need function `setTelemetry(x,cam)` update `#telemetry`.
Need perhaps hidden debug JSON element:
```
document.body.dataset.state = JSON.stringify(...)
```
Maybe not needed.

`collectCoin`:
```
if (coin.taken) return;
coin.taken=true;
this.coinsCollected +=1;
setCoinCount(...);
this.floatText(...);
coin.disableBody(true,true);
```
Need order popText before disabling or coin.x remains. Fine.
Need `this.sound` none. Need perhaps no audio.

`floatText`:
```
const t=this.add.text(x,y,msg,{fontFamily:'Arial, sans-serif',fontSize:'16px',fontStyle:'bold',color:'#fff',stroke:'#4a2600',strokeThickness:3}).setOrigin(0.5).setDepth(8);
this.tweens.add({targets:t,y:y-34,alpha:0,duration:550,ease:'Cubic.easeOut',onComplete:()=>t.destroy()});
```
Need `fontFamily` Arial local system font; no external. Fine.
Need color string maybe '#ffe45c'. Good.

`hitEnemy`:
```
if(!enemy.active || this.finished) return;
const falling=player.body.velocity.y>30;
const above=player.body.bottom <= enemy.body.top+18;
if(falling && above){ enemy.disableBody(true,true); player.setVelocityY(-390); floatText(...); }
else this.lose('An enemy caught you from the side.');
```
Need perhaps player.body.bottom at initial overlap from above could be enemy.top+? Arcade overlap first frame when bodies intersect, bottom might be enemy.top+1..maybe velocity delta per frame ~20px at high fall. Could be >18 if falling fast. Need stomp forgiving enough but still differentiate side. If falling from high, velocity maybe up to ~600, frame delta10px, so bottom <= enemy.top+10 likely. Use threshold24. Side contact body bottom540, enemy.top514 =>26. So threshold24 just under side difference26; narrow. Could set threshold22. Need robust with physics timestep maybe 16ms*600=9.6. Use threshold22. But if side contact while player on ground body bottom540 and enemy.top514 diff26, death. Great. If player is slightly above ground due platform collision maybe diff? Fine.
Need perhaps enemy body top uses body.position y maybe514; player body bottom at540. diff26. threshold20. Use `player.body.bottom - enemy.body.top <= 20`. Stomp from above at penetrating up to20. Good. Need if falling velocity >40 and above. Fine. Need maybe high falling velocity could penetrate >20 in one step if 75fps? Phaser fixed step maybe16.67ms, max velocity900 =>15px. So20 okay. Good.
Need maybe enemy is on a platform? none. Fine.

`lose(reason)`:
```
if(this.finished)return;
this.finished=true;
this.player.setVelocity(0,0);
this.physics.pause();
this.player.setTint(0xff8888);
showOverlay('lose',this.coinsCollected,reason);
```
Need if physics.pause in overlap callback, no issue. Need maybe no red tint on canvas images? `setTint` on Sprite works. Good.
`win()` similar with `showOverlay('win',...)`. Need maybe set `player.setVelocityX(0)` and `setVelocityY(0)`. Fine.

Need `restartGame`:
```
function restartGame(){
 hideOverlay();
 const scene = window.game && window.game.scene.getScene('Level');
 if(scene && scene.sys.isActive()) scene.scene.restart();
}
```
Need scene may be `paused`? physics pause doesn't pause scene. `scene.sys.isActive()` maybe false during transition. Could simply `window.game.scene.getScene('Level').scene.restart()`. Need no `isActive` needed. Use try/catch. Need avoid global R keydown before game created; `window.game` undefined. Fine.
Need maybe scene restart after win overlay triggers `hideOverlay` and create also hide. Good.
Need `button` events. Need `overlay` button perhaps at center; click coordinates uncertain but HUD restart button always available. Need maybe overlay itself captures clicks; HUD z-index10 vs overlay20, overlay covers HUD, so HUD restart inaccessible while overlay shown. Need overlay card button at center. Need set overlay button style and id. Need perhaps give HUD z-index30 so always above overlay? But overlay should cover screen; could set HUD z-index40, overlay30, so HUD restart remains clickable. But overlay card background maybe under HUD; fine. Could set overlay z-index25 and HUD40, so HUD always visible. Need overlay card centered. Good. Then restart button top right always works. Need overlay button too. Need maybe overlay card at y400 center. Fine. Let's set HUD z-index50, overlay z-index40. Then HUD button accessible. Need overlay card not cover HUD due inset maybe start below hud; set `#overlay {padding-top:58px}` and align center. Fine.

Need CSS canvas maybe border radius etc. Need `#game` pointer events maybe canvas receives focus? no matter. Need `#game canvas {outline:none}`. Need maybe click game to focus? Could add a window click handler focusing canvas? Phaser already handles window keyboard. Not needed.
Need ensure global keydown preventDefault doesn't block button click when Space pressed? If overlay button focused and user presses Space, preventDefault stops click; but R/buttons work. Not critical.
Need maybe `A`/`D` movement when typing no inputs. Fine.

Let's write.

Need run browser reload inspect console.

Initial output looks good. Need check console only Phaser banner, no errors. Need test keys. Need understand key tool. Let's call key ArrowRight and inspect/screenshot after. Maybe `key` action likely sends press down and up with 50ms? Need try.

Key press did not move player, X100 CAM0. Could be because key press too quick or tool didn't send event to window? Need use browser key likely sends to focused body and Phaser keyboard manager maybe captures? It should. Need maybe need click canvas first. Let's click canvas at e.g. 600,400 then key.

Click no effect. Need key with text perhaps "Right" or "d"? Need maybe browser key action text expects Playwright key name to hold for 1 frame? It did not move, but perhaps frame timing no delta passed? Need maybe use `motion` action to capture multiple frames while holding key. Tool `motion` perhaps can capture animation frames for a duration; maybe key involved via `text`. Need try `{"action":"motion","text":"ArrowRight"}`? Could be motion captures frames during CSS animation, not key. Let's inspect tool behavior by calling motion with no text.

Good visual. Interesting enemy moved over time, coins animate; player stayed. Need key hold tool not working. Need a way to simulate holding keys via browser tool. Perhaps `browser action key` with text `"ArrowRight"` doesn't work because Phaser key codes maybe event code? Actually Phaser keyboard manager might listen to `keydown` and `keyup` on window; Playwright keyboard.press should dispatch both, and Phaser key isDown might be true during a frame if event held >16ms? Playwright press dispatches keydown then keyup almost immediately (same JS task), so no frame. Need hold key via tool. Maybe `action:"key","text":"ArrowRight","delta":1000`? `delta` perhaps can be used as duration? Need try. `delta` documented as number maybe used for scroll, but key action might interpret as duration. Could call with delta 1000. Need see. Or browser `type` action with text maybe types characters via keyboard insertText, not hold arrows. Need custom tool perhaps key action can send key down/up based on text format. We can inspect tool implementation maybe from custom harness (not pi package). Search whole /app for signature "motion" but minified playwright output polluted. Need search for `'"reload"'` or schema string maybe.

Could be tool server not in filesystem. Need experiment. Need hold ArrowRight. Try `browser key` with text maybe `"ArrowRight:down"`? Could use browser `drag` on canvas to simulate pointer but not keyboard. Could add game support for on-screen touch controls with buttons that hold while pointer down. This could allow browser `drag` to press and hold (drag starts mouse down, moves, up). Need maybe add overlay HTML buttons for left/right/jump with pointer events, and use `drag` to hold right button for duration. But browser `drag` action likely performs mousedown at x,y, move to toX,toY, mouseup. On a button, pointerdown sets a virtual movement flag, pointerup clears. Duration of drag maybe short but perhaps move step with time? Could use `action:"drag"` with from/to and maybe delta interpreted as duration? Tool may perform drag over some duration maybe 0ms. But could set flag on pointerdown and only clear on pointerup; if drag is instantaneous, no frames similarly. Could add a toggle button that when clicked sets virtual move right for a fixed duration (e.g., 1.2 seconds). That would be a test aid but also useful as touch controls. Could add on-screen controls for mobile: left/right/jump buttons that on click apply a timed impulse or hold. However requirement keyboard controls; adding touch buttons is fine. Need test camera follow and jump via these buttons. Could use a hidden debug auto-run button that triggers scripted movement and jump over time. Need not harm gameplay; maybe add subtle on-screen control buttons at bottom right visible only small screens? Could still be clicked by browser tool. But maybe easier to use JS injection through browser tool's `inspect` `text` field—maybe tool can evaluate JS? Let's test `inspect` with text `"window.getGameState()"`.

`inspect` text ignored; no eval. Need maybe tool `type` with text can type into page; if we add a hidden input with event listener to execute commands, we could type JS. But tool `type` likely uses keyboard typing to focused element. Could add a hidden `#commandInput` focus and parse text. But browser tool can't focus hidden input maybe click coordinates. Could add visible debug input perhaps not ideal. Could use `type` with text into body if no input; keypress events might be consumed by Phaser, but not eval. Could implement a key sequence parser in global keydown events: e.g., typing "run" triggers scripted movement; but browser `type` with text "run" would send key events that could be parsed. Need then test. Better: add a hidden (but clickable) test button that automatically performs a scripted run/jump sequence using direct scene physics. Could call via browser click at coordinates. Need not rely on key holding. This can verify running and jumping near starting area, landing platform, camera following, restart. We can add a "demo" function `window.runDemo()` triggered by a hidden clickable element. But we need access to click via tool. Add a small visible "DEMO" button perhaps in HUD; could be acceptable maybe not required. But it might confuse user. Could style as subtle `TEST RUN` button or hidden with `opacity:0` but clickable. Since user may not notice. Need maybe issue: hidden debug button could be clicked accidentally; but okay if placed bottom-left tiny. Could instead repurpose title or telemetry to trigger demo on click. `#telemetry` visible; add click listener to run a scripted sequence. That doesn't alter UI. Great. Add `title` or telemetry click listener to trigger a scripted test. Need in code, not just test. Could expose `window.startDemo()` and attach telemetry click. Browser tool can click telemetry at x~840,y~27. Need know coordinate from screenshot: telemetry around x815-890,y27. Click at850,27. Need maybe click on span; attach listener. Then scripted sequence runs movement/jump over time. Need use virtual controls or direct set velocity. Could implement `window.startDemo` with Phaser timed events driving player. Need maybe sequence:
- reset to x100 via restart first? Could call restartGame and schedule after 100ms.
- from t0 to t0+600ms: setVelocityX(RUN_SPEED)
- at t0

+600ms: jump (setVelocityY(JUMP_SPEED)) while continuing right
- at t0+1000ms: stop horizontal maybe to land on platform (x? starting x100, run 0.6s*260=156 -> x256; jump 0.4s*260=104 -> x360; descending crosses platform y450 around t0+600+0.68=1.28s; if horizontal continues until1.28, x=100+1.28*260=433, within platform300-460. Good. Need stop horizontal at t0+1.25 maybe x425, land on platform. Perfect. Then camera still0 (player x<600). Need camera follow test requires x>600. Could after landing at t1.5, run right for ~2s to x~945, but there's gap760-920 and enemy around570-? need jumping over enemy/gap could interrupt. Could instead just teleport? Need "camera following as player moves" check can run right along ground until x~700 without falling (camera start at x>600). Need avoid enemy at570. Could handle enemy via stomp or disable in demo. We can test camera follow by a separate demo that sets player.x = 700 and camera follows, but requirement "as player moves" should test actual movement. Could script right movement from start with collisions; enemy at x570 may cause side contact death. Need jump over enemy around x500. Could also set enemies inactive during demo. But don't want test-only behavior to affect normal. Could use `startDemo` to toggle a "ghost" mode? Maybe simpler: use direct physics movement and temporarily disable enemy overlaps? Could set `scene.enemies.children.iterate(e=>e.active=false...)` but then restart needed. But for test only. Need test camera follow after moving to x~700 and before gap760. Starting x100, run 2.4s -> x724. Camera should start at x~124 (centering), browser telemetry will show CAM >0. Need avoid enemy at570; could jump over it at x450. If we jump at x~430, horizontal distance to land at x~660; enemy patrol around570 moving left maybe could be under jump. Need first jump onto platform at x300, then run off and over enemy. Hmm.

Could make a simpler "demo" that uses direct positions and velocities with collision disabled? Need verify camera follow only. Could set player x = 700,y500, velocityX=260 for 0.5s, no enemies nearby maybe enemy around570 could overlap as player moves from700 to830 (far enough). But gap starts760; player could fall. Need set x=620 and move to720 in0.4s, camera scroll from20 to120, no gap; enemy at570 maybe behind. Good. Need camera follow. Need test starting area run/jump/land platform separately. Could combine with a sequence:
1. scripted starting run/jump land on platform (x ~400).
2. after a brief pause, set player x=620,y500 (teleport) and run right to720, showing camera scroll.
But that's unnatural; perhaps still verifies camera follow as player moves. Better to simply add separate test buttons for run/jump and camera. But not necessary if we can inspect `window.getGameState` somehow; maybe browser tool can't eval but DOM telemetry can show camera. We can use scripted actions and check telemetry.

Need maybe use browser `drag` to hold virtual controls instead of scripted demo. Could add touch controls with `pointerdown` set virtual right flag and `pointerup` clear; `drag` might hold for some milliseconds due movement steps. Need uncertain. Scripted test is more robust.

Need discover if `browser key` with `delta` could hold. Try `{"action":"key","text":"ArrowRight","delta":1000}`.

No. Need maybe key action can hold key down only if text like `"ArrowRight"` with special flag? Let's try `{"action":"key","text":"ArrowRight","x":...}` no. Could call `browser type` with `"ArrowRight"` maybe sends keydown only? Need not.

Let's use synthetic KeyboardEvent from page triggered by a DOM click. Add a `window.__demo` function attached to telemetry click. Need need test actual gameplay including normal physics. Need not expose visible button; telemetry click is okay. But adding a scripted demo to final app is an unspecified implementation detail; allowed. Could perhaps call it "AUTO DEMO" in title? No need. Could add `title` attribute "Click for a short demo" to telemetry; no visual. Need maybe not suspicious.

Need implement demo using virtual input flags in Scene update, rather than direct set velocities overwritten by update. If we add a `this.demo = {left,right,jump}` and update checks it alongside key state. Then `window.startDemo()` schedules virtual flags. Need jump from virtual flag using JustDown semantics; easiest schedule to call `scene.player.setVelocityY(JUMP_SPEED)` at t=600 while on floor. Need avoid update overriding Y velocity (it doesn't), so fine. Need set velocityX via virtual flags each frame in update. Add:
```
const left = keys... || (this.demo && this.demo.left);
...
```
Need jump at t=600 via timed event. Need timed events persist after scene restart? If restartGame called, scene timers destroyed; need schedule after restart with a delay. Could start demo function:
```
function startDemo() {
  restartGame();
  setTimeout(()=>{
    const scene=...
    scene.demo = {left:false,right:false};
    scene.demo.right=true;
    scene.time.delayedCall(500,()=>{if(!scene.finished && scene.player.body.onFloor()) scene.player.setVelocityY(JUMP_SPEED);});
    scene.time.delayedCall(1250,()=>{scene.demo.right=false;});
    scene.time.delayedCall(1800,()=>{... camera phase...});
  },80);
}
```
Need maybe restartGame calls scene.restart, then scene create may take one frame. setTimeout80ms enough. Need virtual flags in update. Need maybe after 1.25s player lands on platform x? Let's compute more precisely with starting x100, right velocity260 from t=0 to t=1.25 = +325

x425. Jump at t=0.55 maybe x243. Need land on platform top450 at descending t from jump .679 => total1.229, x=100+1.229*260=419.5. If stop at1.25, x425, good. But platform covers300-460. Need body width24, landing at x425 good. Need jump at .55, body on ground yes. Need coins at x160,220,280 collected on run; coin count likely3. Need platform coins at340,410 maybe collected while jumping? Player path:
- at x340, t=0.923 total, jump t=.373, vertical displacement=-201+83=-118, body bottom422, body top384. Coin center410,bottom419, body top384..bottom420 maybe overlap with coin; yes collect x340 and maybe400. Good. Could collect 5 coins. Nice.
- Platform land at x425,y? body bottom450, player sprite center431. Need perhaps at x425, coin x400 y410 might be missed due passing earlier at t1.15, jump t=.60, body bottom? -324+216=-108 =>432, body top394, coin y410 bottom419, overlap; yes collect.
Need stop right at1.25. Player body may land slightly after1.229; if stop at1.25, lands on platform. Good.
Need camera still0 because x425<600. Need then camera phase. Could maybe move right from platform to x700 with jump over enemy, but enemy around570 patrolling. Need maybe script:
- At t=1.6, set player x=610,y500, body.reset? Could use `player.body.reset(610,500)`; but body.reset stops velocity and sets position. If we use `player.setPosition(610,500)`, body may not sync; use `body.reset(610,500)`. Need check reset coordinates likely center? Phaser docs: `body.reset(x, y)` "Resets this Body to the given x and y coordinates. Also sets velocity and acceleration to zero." It likely sets GameObject x/y to those coordinates (center). Common use `player.body.reset(100, 450)`. Good. Then set `demo.right=true` for 0.45s -> x727, camera scroll ~127. No gap until760, enemy x570 behind. Good. Need perhaps set y=500 top of ground; body bottom519 then falls20.

During0.45s, on floor after ~0.18s; camera follow will lag but scroll >0. Need stop at x730. Need no coin issue. Need maybe camera scroll around70-120. Need telemetry show CAM>0. Need can capture screenshot after ~2.5s. Could call motion after clicking demo to capture frames; browser motion captures 4 frames over ~1.7s, might not see full. Could call `motion` twice or `screenshot` after waiting via motion. Need perhaps use tool "motion" with `text` maybe nothing; it captures 4 frames over ~1.7s. Start demo click then motion; need attach click to telemetry. Need maybe click at x840,y27; need verify coordinates. From screenshot, HUD: title x20-243, controls x270-800, telemetry x815-895, coins x970-1073, restart x1090-1180. So click x850,y27 should hit telemetry. Need add listener. Need perhaps need click to trigger startDemo; then motion captures frames. Need maybe button is span with no pointer cursor; still clickable. Add CSS `cursor:pointer`, title attr. Could also attach listener to title. Let's attach to telemetry and title just in case. Need maybe browser `click` at850,27 hits `#telemetry`; yes. Need maybe adding `pointer-events` not needed. Need perhaps HUD high z-index; good.

Need script precise. Need maybe `window.startDemo` global should be accessible perhaps tool `type` not. Attach click.

Need also perhaps test restart from HUD button at x1135,y27. Need click and inspect X100 CAM0 coins0 visible coins. Need maybe after demo, click restart and inspect. Good.

Need perhaps test jump via virtual input; need maybe use `scene.demo` flags in update. Need add `this.demo = null` in create. Need update:
```
const demo = this.demo || {};
const left=keys... || demo.left;
...
```
Need jump via virtual demo `jumpRequested` maybe easier:
```
if ((JustDown(SPACE) || this.demoJump) && onFloor) { ...; this.demoJump=false; }
```
Set `scene.demoJump=true` at t550 rather than direct velocityY. This uses actual jump logic and ensures onFloor. Good. Need add `this.demoJump=false` create. Need update:
```
if ((Phaser.Input.Keyboard.JustDown(this.keys.SPACE) || this.demoJump) && onFloor)
 {setVelocityY; this.demoJump=false;} else if(this.demoJump && !onFloor) this.demoJump=false; 
```
But if demoJump set while airborne, it will clear; fine. Need set at t550 while on floor. Good.
Need virtual right flag entire phase.
Need camera phase teleport:
```
scene.time.delayedCall(1600,()=> {
 if(scene.finished)return;
 scene.player.body.reset(610,500);
 scene.player.setVelocityY(0);
 scene.demo.right=true;
});
scene.time.delayedCall(2050,()=>{ scene.demo.right=false;});
```
Need `body.reset` might set `enable` true and velocity0; fine. Need maybe player texture. Need maybe position with camera camera still follows; after teleport, camera lerp from0 to10 then to120 gradually. Good. Need maybe camera scroll at t2.3 ~? lerp0.11 per frame ~60fps => reaches target quickly ~0.3s. At x730 target scroll130; camera maybe90. Good.
Need stop at2.05, then camera continues to settle. Need capture at2.5. `motion` 4 frames over1.74s might capture at0,0.587,1.175,1.740 after click. Need by frame4 camera phase begins at1.6, maybe camera~5; not enough. Could call motion again to get frames at1.74-3.48; likely with continuous game time but tool starts new capture after first call and game continues. Need call motion twice. Or use `screenshot` after some delay via `motion` (motion itself provides delay). Could call `click demo`, then `motion` (1.74s), then `motion` again (another1.74s) and inspect DOM; by then demo finished t3.5, camera may have settled at130. Good. Need perhaps after t2.05 player stops x730; camera target130, stays. So final telemetry X730 CAM130. Good. Need perhaps enemy side contact? Enemy around570, player teleport x610 and moves to730; enemy patrol might be at x? At t1.6 enemy from570 moving left52*1.6=83 -> x487, away. Fine. Need no gap. Good.
Need starting jump landing on platform: could verify screenshot frame

at t1.175 or t1.74; capture frames with motion. Need maybe telemetry y not shown. We can add y to telemetry for verification or use `window.getGameState` not accessible; DOM telemetry only x/cam. Could add `Y` to telemetry: `X 425 · Y 431 · CAM 0`. That helps verify jump/landing. Need maybe update `setTelemetry(x,cam,y)` and calls. Could also set body dataset playerY/onFloor. Need browser dom shows telemetry. Need perhaps need inspect DOM dataset? Tool inspect returns text only; body dataset not in DOM output. Could add hidden `<span id=...>` with state? Could include y in telemetry. Let's modify setTelemetry to accept y and show `X ... · Y ... · CAM ...`. Need update calls. Need perhaps `window.getGameState` still. Need no issue.

Need perhaps test coin count via HUD text after demo. Need restart check visible coins return; HUD coin count0; visible coins maybe screenshot. Need could count gold coins in visible scene; screenshot shows initial. Need after restart from demo camera position back; screenshot. Need perhaps `window.getGameState` not accessible, but HUD shows coin count and camera. Need visible coins return visually (start with all initial gold coins). Need screenshot after restart. Need perhaps use `body.dataset.visibleCoins` not shown. Could add hidden `<output id="stateJson">` with JSON including active coins; but user may not see. Could put in DOM as `data` attributes; `inspect` maybe Dom text doesn't include. Could add title tooltip? Better add a tiny status line under telemetry maybe `#telemetry` includes `COINS 37`? Already coin HUD shows collected count, not visible count. Could add `VIS 37` to telemetry hidden on small screens. Let's include `VIS ${visibleCoins}` maybe. Need pass visibleCoins and onFloor to setTelemetry. Could show `X 100 · Y 520 · CAM 0 · ON 1 · VIS 37`. That is quite debug-y. Could use concise: `X100 Y520 C0 F1 V37`. But screenshot from user maybe okay. Need maybe not overcomplicate. We can add into title attribute on `#telemetry` for inspect? DOM output perhaps includes attributes? likely no. Could add a hidden `<span id=state>` with `aria-hidden` but styled `display:none`, browser inspect's DOM

text extraction may include hidden text? In initial dom output, hidden overlay text "Game Over" not included, likely because display:none, so no. Need visible. Could add state to telemetry perhaps okay; use small font and techy HUD. Need maybe show `X 100 · Y 520 · CAM 0 · FLOOR 1 · VIS 37`. That's useful for verification and not harmful. Need update setTelemetry to accept a state object. In update:
```
setTelemetry({
 x:player.x,y:player.y,cam:camera.scrollX,
 floor:player.body.onFloor()?1:0,
 visible:coins.getChildren().filter(c=>c.active).length
});
```
Need in create before coins group maybe visible count COIN_SPOTS.length; can set default. Need maybe scene fields exist. Could call with explicit state after all created. Need easier:
```
function setTelemetry(x,y,cam,floor,visible) { text=... }
```
Calls:
- create `setTelemetry(this.player.x,this.player.y,0,0,COIN_SPOTS.length)`
- update `setTelemetry(this.player.x,this.player.y,this.cameras.main.scrollX,this.player.body.onFloor()?1:0,this.coins.getChildren().filter(c=>c.active).length)`
Need maybe compute active coins every frame; fine.
Need body dataset playerY, floor, visibleCoins.
Need `window.getGameState` unchanged.
Need move "stomp enemies from above!" plus telemetry may be too wide. At 1200 width, controls end around800, telemetry currently x815-895. Adding longer telemetry to maybe x815-1020 would overlap coins at970. Need need shrink controls or put telemetry maybe below? Could hide controls text after "stomp..." on narrow; at 1200 likely overcrowded. Could put telemetry in a second line within HUD? Height58. Could use absolute bottom2px left20px tiny status, above game. But then okay. Maybe keep telemetry short `X425 Y431 C0 F1 V32` ~130px. Current controls end ~800; 130px from815 to945, coins starts970—fits. Good. Use compact with no spaces around separators: `X425 Y431 C0 F1 V32`. Still understandable to us. Need perhaps initial `X100 Y520 C0 F0 V37`. Fine. Need maybe display `CAM` not just C; but we know. Could use `C` for camera

and `V` for visible. Good. Need maybe title tooltip explain. Fine.

Need add demo. Need also perhaps on-screen touch controls? Not necessary. Need perhaps actual keyboard control still works; could verify through synthetic keydown via demo? We can use browser `key` with Space maybe press at start; JustDown may be processed even though keydown+keyup same JS task? Phaser's JustDown logic uses `_justDown` flag set on keydown; keyup before next frame may reset? Maybe `JustDown` returns true if `_justDown` still true; keyup may not clear. Could test after adding virtual demo? We can maybe use synthetic key events on page from a DOM click to test normal keyboard path. Need not. But requirement "Use Left/Right or A/D to run and Space to jump" should work in real browser. Need ensure `addKeys` works and key events. Could test with `browser type` maybe send a single character "d" that might be held for some ms? But likely no movement. We can add a global synthetic keyboard test in `startDemo` that dispatches `KeyboardEvent('keydown',{code:'ArrowRight',key:'ArrowRight'})`, waits, dispatches keyup. That would test Phaser key handling. Could use that instead of virtual flags entirely. Need need hold event for duration:
```
window.dispatchEvent(new KeyboardEvent('keydown',{code:'ArrowRight',key:'ArrowRight',bubbles:true}));
setTimeout(()=>window.dispatchEvent(new KeyboardEvent('keyup',...)),1250);
```
Phaser keyboard manager should respond to these events. Similarly Space keydown at550 and keyup at650. This would truly test keyboard input path. Need perhaps event `keyCode` required by Phaser? KeyboardEvent constructor with `keyCode` may be ignored unless defined via Object.defineProperty. Phaser's KeyboardManager uses `event.keyCode` maybe. Need can set:
```
function synth(code,key,type){
 const e = new KeyboardEvent(type,{code,key,bubbles:true});
 Object.defineProperty(e,'keyCode',{get:()=>code==='ArrowRight'?39:32});
 window.dispatchEvent(e);
}
```
Need perhaps Phaser listens on `window` for keydown. It should. Need perhaps our global keydown listener `preventDefault` doesn't stop propagation. Good. This could replace virtual demo and more faithfully test controls. Need need ensure event target window. Browser's Phaser keyboard manager likely attaches to `window` event listeners; yes. Need need `keyup` also. Need maybe Focus not relevant. Could do this via `startDemo` without modifying scene update. This is ideal. Need test if synthetic events work. Could implement `window.startDemo` that uses synthetic keydown/keyup with timeouts:
```
function keyEvent(type,code,key,keyCode){
 const e=new KeyboardEvent(type,{code,key,bubbles:true});
 Object.defineProperty(e,'keyCode',{value:keyCode});
 Object.defineProperty(e,'which',{value:keyCode});
 window.dispatchEvent(e);
}
function startDemo() {
 restartGame();
 setTimeout(()=> {
  keyEvent('keydown','ArrowRight','ArrowRight',39);
  setTimeout(()=>{keyEvent('keydown','Space',' ',32); setTimeout(()=>keyEvent('keyup','Space',' ',32),80);},550);
  setTimeout(()=>keyEvent('keyup','ArrowRight','ArrowRight',39),1250);
  setTimeout(()=>{ ... teleport and hold right again ...},1600);
 },80);
}
```
Need if keyup for space after80ms, Phaser JustDown triggers in one frame. Good. Need jump at550 while on floor. Need right held until1250. Need camera phase use synthetic right again from1600 to2050 after teleport. Need `player.body.reset(610,500)`. Need restart after80ms. Need no virtual flags. This tests actual keyboard mapping. Need perhaps because global `keydown` listener on window uses `event.code`, good. Phaser manager maybe also window. Need keyCode fallback. Great. Need no change to Scene update except perhaps none. Need add `window.startDemo` and telemetry click listener. Need perhaps if synthetic event uses `isTrusted=false`, Phaser doesn't care. Need if Phaser KeyboardManager attaches to document rather than window? In Phaser 3, default input target is `window` unless `input.keyboard.target`. It uses `target.addEventListener('keydown', ...)`. Should catch. Need perhaps `KeyboardEvent` with `key` and `keyCode`. Good.
Need maybe `event.preventDefault()` in our listener called; no issue.
Need need `keyup` event not in blockedKeys but Phaser sees. Good.

Need perhaps browser tool `key` press also dispatches key event with `keyCode` etc but too short. Synthetic held works. Need implement. Need maybe `window.dispatchEvent` not enough if Phaser listens on `document`; could dispatch to both window and document to be safe:
```
[window, document].forEach(target=>target.dispatchEvent(new KeyboardEvent(...)));
```
But duplicate keydown might reset JustDown? Phaser might receive both; `_justDown` remains true. Could cause weird but okay. Better dispatch to window then document only if not defaultPrevented? Hmm. Phaser likely window. Let's inspect Phaser docs: `this.input.keyboard.on('keydown', ...)` manager target default `window` with `addCapture`. Should be fine. Need no duplicate. Could dispatch to `window` and `document` with same event not allowed after dispatch? It can be redispatched, but duplicated. Better use `window.dispatchEvent(e); document.dispatchEvent(e.clone?)` no clone. Could create separate events for each and Phaser might double process. Avoid. Let's use window only; test.

Need maybe `scene.time.delayedCall` not needed if using setTimeout. Need schedule with absolute setTimeout. Need restart call asynchronous; need avoid stale scene reference. Use `window.setTimeout`.
Need need ensure demo can run multiple times and clear old timeouts. Could keep `demoTimers` array, clear before starting. Need perhaps restart scene while old timers active could confuse. Add:
```
let demoTimers=[];
function later(ms,fn){demoTimers.push(setTimeout(fn,ms));}
function clearDemo(){demoTimers.forEach(clearTimeout); demoKeys...}
```
Need perhaps release held keys:
```
const heldCodes = new Set();
function keyEvent(type,...){... if type==='keydown' heldCodes.add(code) else delete}
function cancelDemo(){ heldCodes.forEach(code=>keyup); clear timers; }
```
Need maybe startDemo calls cancelDemo then restartGame. Need if right key held from previous demo, keyup first. Good.
Need maybe `keyCodeMap`.
Need maybe startDemo uses `scene.player.body.reset(610,500)`. Need if scene.finished (loss) due enemy during jump, skip teleport and camera phase. But should not lose. Need maybe disable enemy overlaps? Starting enemy at570 moving left, by t1.6 x~487; player landing platform x425,y431, no collision. During run from100 to425, enemy initial570 moving left to487 by1.6; never overlaps player because player max425. Good. Need no side contact. Need camera phase starts x610, enemy x487, moving further left to maybe470; no contact. Good. Need no gap. Great.
Need starting jump at550ms: player x100+0.55*260=243. Need platform starts300. On jump trajectory, at x300 (t=.77 total, jump t=.22, body bottom=540-119+29=450 exactly top; player could hit platform side? At x300, body right312, platform starts300; body bottom450 = platform top450. Arcade collision likely if overlapping at boundary maybe lands on top or blocked side. Need okay. At x300, player is at apex-ish crossing top450 during ascent, could collide with underside/side? Since platform is solid from y450 to490. At t=.22, body bottom ~450, body top412. The body overlaps platform x300-312 and y450 at boundary; could be resolved as top collision perhaps. It may land early on platform at x300. Fine. Need could collide with side because body bottom exactly450, likely top collision. Great. Then continues right along top, collecting coins and staying at y450. Need jump may land earlier on platform; still on platform. Need stop at1.25 at x425; on platform. Good.
Need jump at x243 and platform x300; distance57, ascent crossing top450 at t=.22, x243+57=300. Good. Nice.
Need repeated mid-air jumping? We only press space once. Could test press again mid-air and see no extra velocity