kgames

game.js (139071B)

---

 const FT = window.FireTruckLib;
 
 const SCALE = 5;
 const CELL_SIZE = 96 * SCALE;
 const BAKE_CELL = 96; // px per cell in the baked chunk textures (CELL_SIZE / SCALE)
 const BASE_SPEED = 425;
 const MAX_SPEED = 550;
 const ACCEL = 650;
 const BRAKE = 800;
 const REACTION_TIME_S  = 2.0;
 const MIN_PROMPT_DIST  = CELL_SIZE * 0.72;
 const STOP_LINE_DIST = Math.round(CELL_SIZE * 0.45);
 const ROUTE_EXTENSION_COUNT = 36;
 const FIRE_TRIGGER_DIST   = CELL_SIZE * 0.6;
 const CAR_SPEED = 300;   // world u/s for ambient traffic
 const PED_SPEED = 90;    // world u/s for pedestrians
 const BIKE_SPEED = 170;  // world u/s for bicyclists
 const BUS_SPEED = 230;   // world u/s for buses
 // A people-first city: streets are full of walkers, bikes, and buses;
 // private cars are a rare sight.
 const PED_COUNT = 160;
 const BIKE_COUNT = 48;
 const BUS_COUNT = 6;
 const CAR_COUNT = 4;
 const FIRES_TO_WIN        = 4;
 
 // Tropical-island palette. Water stays saturated; asphalt stays dark for
 // stripe/crosswalk contrast. Building bodies are bright candy colors.
 const WATER_COLOR = 0x2bb5d8;
 const WATER_SHALLOW = 0x62d9e8;
 const WATER_FLECK = 0xc9f2f7;
 const BEACH_COLOR = 0xf9e3a9;
 const BEACH_WET = 0xeccd8a;
 const ASPHALT_COLOR = 0x30333c;
 const SIDEWALK_COLOR = 0xded5c3;
 const CROSSWALK_COLOR = 0xf4f2ec;
 const STRIPE_COLOR = 0xffd23f;
 const BUILDING_PALETTE = [0xff8a70, 0xffb347, 0x53d3c4, 0xffd76e, 0xf68fb8, 0xa8d96c];
 const ROOF_TERRACOTTA = 0xd97b52;
 const PARK_GRASS = 0x7ecb62;
 const PALM_TRUNK = 0x9a6b43;
 const PALM_FROND = 0x46b063;
 const BIKE_LANE_COLOR = 0x3e8e5a; // painted protected bike lanes
 
 // Both songs are ~1-minute arrangements: 16-step phrases (eighth notes)
 // concatenated so the loop is long enough not to grate. 'A' is the original
 // theme; the other phrases are new sections in the same E-minor character.
 // '.' = rest in the string form; chord rows place a triad every 4 steps
 // (main theme) or every 2 steps (end fanfare).
 const ftN = s => s.trim().split(/\s+/).map(t => (t === '.' ? null : t));
 const FTC = {
   Em: ['E3','G3','B3'], Am: ['A2','C3','E3'], G: ['G2','B2','D3'],
   C:  ['C3','E3','G3'], D:  ['D3','F#3','A3'], Bm: ['B2','D3','F#3'],
 };
 const ftChd4 = (a, b, c, d) =>
   [a, null, null, null, b, null, null, null, c, null, null, null, d, null, null, null];
 const ftChd8 = (...cs) => cs.flatMap(c => [c, null]);
 
 const MUSIC_GAIN = 0.8;
 const FT_BPM = 158;
 const FT_MEL = {
   A: ftN('E5 G5 A5 B5 G5 E5 D5 E5  A4 C5 D5 E5 C5 A4 G4 A4'),
   B: ftN('B4 D5 E5 G5 E5 D5 B4 D5  E5 G5 B5 A5 G5 E5 D5 B4'),
   C: ftN('E4 G4 A4 B4 A4 G4 E4 G4  A4 B4 C5 B4 A4 G4 F#4 E4'),
   D: ftN('B5 A5 G5 A5 B5 E6 D6 B5  C6 B5 A5 G5 A5 B5 A5 G5'),
   E: ftN('G5 B5 D6 B5 G5 D5 B4 D5  C5 E5 G5 E5 D5 F#5 A5 F#5'),
   F: ftN('E5 D5 C5 B4 A4 B4 C5 A4  B4 C5 D5 E5 F#5 D5 B4 E5'),
 };
 const FT_BAS = {
   A: ftN('E2 B2 E2 B2 A2 C3 E3 A2  G2 B2 G2 D3 A2 E2 A2 E2'),
   B: ftN('E2 B2 E2 B2 G2 B2 G2 B2  C3 G2 C3 G2 D3 A2 D3 B2'),
   C: ftN('E2 E3 E2 E3 E2 E3 E2 B2  A2 A3 A2 A3 B2 F#2 B2 E2'),
   D: ftN('E2 B2 E3 B2 E2 B2 E3 B2  A2 E3 A2 E3 D3 A2 D3 A2'),
   E: ftN('G2 D3 G2 D3 G2 B2 G2 B2  C3 G2 C3 G2 D3 A2 D3 C3'),
   F: ftN('A2 E3 A2 E3 A2 C3 A2 C3  B2 F#2 B2 F#2 B2 D3 B2 E2'),
 };
 const FT_CHD = {
   A: ftChd4(FTC.Em, FTC.Am, FTC.G, FTC.Am),
   B: ftChd4(FTC.Em, FTC.G, FTC.C, FTC.D),
   C: ftChd4(FTC.Em, FTC.Em, FTC.Am, FTC.Bm),
   D: ftChd4(FTC.Em, FTC.Em, FTC.Am, FTC.D),
   E: ftChd4(FTC.G, FTC.G, FTC.C, FTC.D),
   F: ftChd4(FTC.Am, FTC.Am, FTC.Bm, FTC.Bm),
 };
 const FT_ORDER = ['A','B','A','C','D','B','E','F','A','C',
                   'D','E','B','F','C','D','A','B','F','A'];
 const FT_MELODY = FT_ORDER.flatMap(k => FT_MEL[k]);
 const FT_BASS   = FT_ORDER.flatMap(k => FT_BAS[k]);
 const FT_CHORDS = FT_ORDER.flatMap(k => FT_CHD[k]);
 
 // Celebration song for the endgame screen — related to the main theme
 // (same Em/Am/G harmonic language, brighter octave, triumphant ascending phrases)
 const FT_END_BPM = 170;
 const FT_END_MEL = {
   A: ftN('E5 G5 B5 E6 D6 B5 G5 A5  A5 C6 E6 A6 G6 E6 D6 E6'),
   B: ftN('B5 G5 E5 G5 B5 D6 E6 D6  C6 A5 E5 A5 C6 E6 D6 B5'),
   C: ftN('G5 B5 D6 G6 E6 C6 G5 C6  D6 B5 G5 B5 E6 D6 B5 A5'),
   D: ftN('E6 D6 B5 G5 A5 B5 C6 A5  B5 G5 E5 G5 B5 D6 E6 E6'),
 };
 const FT_END_BAS = {
   A: ftN('E3 G3 B3 E4 D4 B3 G3 A3  A3 C4 E4 A4 G4 E4 B3 E4'),
   B: ftN('E3 B3 G3 B3 E4 B3 G3 B3  A3 E4 C4 E4 D4 A3 D4 B3'),
   C: ftN('G3 B3 D4 G4 C4 E4 G4 C4  D4 B3 G3 B3 E4 B3 G3 A3'),
   D: ftN('E4 B3 G3 B3 A3 E3 A3 C4  B3 E3 G3 E3 B3 G3 E4 E3'),
 };
 const FT_END_CHD = {
   A: ftChd8(FTC.Em, ['B2','D3','G3'], FTC.G, ['A2','E3','A3'],
             FTC.Am, ['E3','A3','C4'], FTC.G, FTC.Em),
   B: ftChd8(FTC.Em, FTC.Em, FTC.G, FTC.Em, FTC.Am, FTC.Am, FTC.Am, FTC.G),
   C: ftChd8(FTC.G, FTC.G, FTC.C, FTC.C, FTC.G, FTC.Em, FTC.Em, FTC.Am),
   D: ftChd8(FTC.Em, FTC.Em, FTC.Am, FTC.Am, FTC.Em, FTC.Em, FTC.G, FTC.Em),
 };
 const FT_END_ORDER = ['A','B','A','C','A','B','D','C','A','B',
                       'C','D','A','C','B','D','A','B','D','A'];
 const FT_END_MELODY = FT_END_ORDER.flatMap(k => FT_END_MEL[k]);
 const FT_END_BASS   = FT_END_ORDER.flatMap(k => FT_END_BAS[k]);
 const FT_END_CHORDS = FT_END_ORDER.flatMap(k => FT_END_CHD[k]);
 
 function arrowLabel(dir) {
   const ARROWS = { left: '←', right: '→', straight: '↑' };
   const NAMES  = { left: 'LEFT',  right: 'RIGHT',  straight: 'STRAIGHT' };
   return dir ? (ARROWS[dir] || '') + ' ' + (NAMES[dir] || dir.toUpperCase()) : '';
 }
 
 // Manual mode uses absolute compass directions (key = screen direction).
 const KEY_TO_HEADING = { ArrowUp: 'north', ArrowDown: 'south', ArrowLeft: 'west', ArrowRight: 'east' };
 
 function headingArrowLabel(heading) {
   const LABELS = { north: '↑ UP', south: '↓ DOWN', west: '← LEFT', east: '→ RIGHT' };
   return LABELS[heading] || '';
 }
 
 // ── Shared cartoony art (hose minigame + endgame screen) ────────────────────
 // Cartoon townspeople with a range of skin tones, hair colors, and hair
 // styles. Baked once as textures; both the FireHoseScene street crowd and the
 // FireTruckEndScene dancers draw from the same set.
 const KG_SKINS = [0xffe0bd, 0xf1c27d, 0xd9995b, 0xc68642, 0x8d5524, 0x5e3a1c];
 const KG_LOOKS = [
   { skin: KG_SKINS[4], shirt: 0xe63946, pants: 0x2f4858, hair: 0x1b1b1b, hairStyle: 2 },
   { skin: KG_SKINS[0], shirt: 0x1d7cf2, pants: 0x6b4a2b, hair: 0xd9b380, hairStyle: 0 },
   { skin: KG_SKINS[3], shirt: 0xffd23f, pants: 0x30333c, hair: 0x2f2a26, hairStyle: 1 },
   { skin: KG_SKINS[1], shirt: 0x2ec4b6, pants: 0x8d5524, hair: 0x4a3728, hairStyle: 3 },
   { skin: KG_SKINS[5], shirt: 0xff8c42, pants: 0x1d3557, hair: 0x1b1b1b, hairStyle: 0 },
   { skin: KG_SKINS[2], shirt: 0xf68fb8, pants: 0x2f4858, hair: 0x2f2a26, hairStyle: 2 },
   { skin: KG_SKINS[3], shirt: 0xa8d96c, pants: 0x30333c, hair: 0x1b1b1b, hairStyle: 3 },
   { skin: KG_SKINS[1], shirt: 0x7f6bd6, pants: 0x445266, hair: 0x8a5a2b, hairStyle: 1 },
 ];
 
 function bakePersonTexture(scene, key, look) {
   if (scene.textures.exists(key)) return;
   const g = scene.make.graphics({ add: false });
   // shadow + legs + shoes
   g.fillStyle(0x000000, 0.15); g.fillEllipse(28, 91, 34, 8);
   g.fillStyle(look.pants, 1);
   g.fillRoundedRect(19, 60, 8, 26, 4);
   g.fillRoundedRect(29, 60, 8, 26, 4);
   g.fillStyle(0x3a3f4a, 1);
   g.fillEllipse(23, 88, 12, 7); g.fillEllipse(33, 88, 12, 7);
   // arms + hands
   g.fillStyle(look.shirt, 1);
   g.fillRoundedRect(8, 42, 8, 24, 4);
   g.fillRoundedRect(40, 42, 8, 24, 4);
   g.fillStyle(look.skin, 1); g.fillCircle(12, 67, 4); g.fillCircle(44, 67, 4);
   // torso with a sheen highlight
   g.fillStyle(look.shirt, 1); g.fillRoundedRect(14, 38, 28, 28, 10);
   g.fillStyle(0xffffff, 0.25); g.fillRoundedRect(17, 41, 10, 6, 3);
   // big cartoon head: hair circle behind, face circle in front
   g.fillStyle(look.hair, 1); g.fillCircle(28, 17, 15);
   g.fillStyle(look.skin, 1); g.fillCircle(28, 21, 13);
   if (look.hairStyle === 1) {          // long hair down to the shoulders
     g.fillStyle(look.hair, 1);
     g.fillRoundedRect(11, 14, 8, 26, 4);
     g.fillRoundedRect(37, 14, 8, 26, 4);
   } else if (look.hairStyle === 2) {   // curly
     g.fillStyle(look.hair, 1);
     g.fillCircle(17, 12, 7); g.fillCircle(24, 7, 8);
     g.fillCircle(33, 8, 8); g.fillCircle(40, 14, 6);
   } else if (look.hairStyle === 3) {   // top bun
     g.fillStyle(look.hair, 1); g.fillCircle(28, 5, 6);
   }
   g.fillStyle(look.hair, 1); g.fillEllipse(28, 11, 24, 10); // fringe
   // face: eyes, pupils, cheeks, smile
   g.fillStyle(0xffffff, 1); g.fillCircle(23, 21, 3.4); g.fillCircle(33, 21, 3.4);
   g.fillStyle(0x2b2b2b, 1); g.fillCircle(23.6, 21.6, 1.7); g.fillCircle(33.6, 21.6, 1.7);
   g.fillStyle(0xff8c8c, 0.35); g.fillCircle(20, 26, 2.6); g.fillCircle(36, 26, 2.6);
   g.lineStyle(2, 0x7a4a3a, 1);
   g.beginPath(); g.arc(28, 26, 5.5, Math.PI * 0.15, Math.PI * 0.85, false); g.strokePath();
   g.generateTexture(key, 56, 96);
   g.destroy();
 }
 
 function bakePeopleTextures(scene) {
   KG_LOOKS.forEach((look, i) => bakePersonTexture(scene, 'kg-person-' + i, look));
 }
 
 // Side-view fire truck (facing right) — lockers, ladder turntable, crewed cab.
 function bakeSideTruckTexture(scene) {
   const key = 'kg-truck-side';
   if (scene.textures.exists(key)) return key;
   const g = scene.make.graphics({ add: false });
   g.fillStyle(0x000000, 0.18); g.fillEllipse(130, 102, 230, 14);
   // rear body
   g.fillStyle(0xe63946, 1); g.fillRoundedRect(6, 36, 168, 52, 8);
   g.lineStyle(3, 0x9b1c25, 1); g.strokeRoundedRect(6, 36, 168, 52, 8);
   // silver roll-up equipment lockers
   const locker = (x) => {
     g.fillStyle(0xd7dde6, 1); g.fillRoundedRect(x, 44, 34, 30, 4);
     g.lineStyle(1.5, 0x9aa4b2, 1);
     for (let ly = 49; ly <= 69; ly += 5) g.lineBetween(x + 2, ly, x + 32, ly);
   };
   locker(28); locker(70); locker(112);
   // hose reel + rear step
   g.fillStyle(0x9aa0a8, 1); g.fillCircle(16, 58, 9);
   g.fillStyle(0x30333c, 1); g.fillCircle(16, 58, 4);
   g.fillStyle(0x30333c, 1); g.fillRect(0, 82, 8, 8);
   // white stripe + gold band along the body
   g.fillStyle(0xffd23f, 1); g.fillRect(6, 77, 168, 2);
   g.fillStyle(0xffffff, 0.9); g.fillRect(6, 79, 168, 6);
   // ladder turntable on top
   g.fillStyle(0x9aa0a8, 1); g.fillRoundedRect(50, 26, 40, 12, 4);
   g.fillStyle(0xf4b400, 1); g.fillCircle(70, 31, 8);
   // cab
   g.fillStyle(0xe63946, 1); g.fillRoundedRect(172, 26, 76, 62, { tl: 14, tr: 22, bl: 0, br: 8 });
   g.lineStyle(3, 0x9b1c25, 1); g.strokeRoundedRect(172, 26, 76, 62, { tl: 14, tr: 22, bl: 0, br: 8 });
   // cab window with a firefighter at the wheel
   g.fillStyle(0x9fdcff, 1); g.fillRoundedRect(186, 34, 52, 24, { tl: 8, tr: 14, bl: 4, br: 4 });
   g.fillStyle(0x8d5524, 1); g.fillCircle(206, 50, 7);
   g.fillStyle(0xffd23f, 1); g.fillEllipse(206, 43, 18, 8);
   g.fillStyle(0x2b2b2b, 1); g.fillCircle(208.5, 50, 1.4);
   // stripe continues on the cab, door seam + handle
   g.fillStyle(0xffd23f, 1); g.fillRect(172, 77, 76, 2);
   g.fillStyle(0xffffff, 0.9); g.fillRect(172, 79, 76, 6);
   g.lineStyle(2, 0x9b1c25, 1); g.lineBetween(184, 60, 184, 86);
   g.fillStyle(0xffd23f, 1); g.fillRect(176, 64, 7, 3);
   // light bar
   g.fillStyle(0x30333c, 1); g.fillRoundedRect(196, 18, 34, 9, 3);
   g.fillStyle(0xe63946, 1); g.fillRoundedRect(198, 15, 12, 7, 2);
   g.fillStyle(0x1d7cf2, 1); g.fillRoundedRect(214, 15, 12, 7, 2);
   // bumper + headlight
   g.fillStyle(0xd7dde6, 1); g.fillRoundedRect(244, 74, 14, 14, 3);
   g.fillStyle(0xffe9a8, 1); g.fillCircle(250, 70, 4);
   // wheels
   const wheel = (x) => {
     g.fillStyle(0x22262e, 1); g.fillCircle(x, 88, 15);
     g.fillStyle(0x9aa0a8, 1); g.fillCircle(x, 88, 7.5);
     g.fillStyle(0x22262e, 1); g.fillCircle(x, 88, 2.5);
   };
   wheel(46); wheel(120); wheel(210);
   g.generateTexture(key, 260, 112);
   g.destroy();
   return key;
 }
 
 // Extending ladder with a firefighter + nozzle in the tip basket. Pivot is at
 // local (14, 15); the water jet leaves from local (206, 15).
 const KG_LADDER_PIVOT_X = 14;
 const KG_LADDER_TIP_X = 206;
 function bakeLadderTexture(scene) {
   const key = 'kg-ladder';
   if (scene.textures.exists(key)) return key;
   const g = scene.make.graphics({ add: false });
   g.fillStyle(0xffd23f, 1); g.fillRect(14, 7, 160, 5); g.fillRect(14, 18, 160, 5);
   g.fillStyle(0xcf9b1e, 1);
   for (let x = 22; x <= 166; x += 12) g.fillRect(x, 9, 3, 12);
   g.fillStyle(0x9aa0a8, 1); g.fillCircle(14, 15, 10);
   g.fillStyle(0x30333c, 1); g.fillCircle(14, 15, 4);
   // tip basket with firefighter (helmet + face) holding the nozzle
   g.fillStyle(0xe63946, 1); g.fillRoundedRect(170, 3, 20, 24, 5);
   g.fillStyle(0xc68642, 1); g.fillCircle(181, 12, 5);
   g.fillStyle(0xffd23f, 1); g.fillEllipse(181, 8, 13, 6);
   g.fillStyle(0x2b2b2b, 1); g.fillCircle(182.6, 12, 1.1);
   g.fillStyle(0xd7dde6, 1); g.fillRect(188, 12, 14, 6);
   g.fillStyle(0x30333c, 1); g.fillRect(201, 11, 6, 8);
   g.generateTexture(key, 210, 30);
   g.destroy();
   return key;
 }
 
 // Pets and tropical wildlife.
 function bakeCritterTextures(scene) {
   const mk = () => scene.make.graphics({ add: false });
   if (!scene.textures.exists('kg-dog')) {
     const g = mk();
     g.fillStyle(0x000000, 0.15); g.fillEllipse(24, 35, 36, 6);
     g.fillStyle(0xb5773a, 1); g.fillTriangle(4, 16, 12, 20, 4, 26); // tail
     g.fillStyle(0xc98a4b, 1); g.fillRoundedRect(8, 14, 28, 14, 7);  // body
     g.fillStyle(0xb5773a, 1);                                       // legs
     g.fillRect(11, 26, 4, 8); g.fillRect(19, 26, 4, 8); g.fillRect(29, 26, 4, 8);
     g.fillStyle(0xc98a4b, 1); g.fillCircle(38, 13, 8);              // head
     g.fillStyle(0x8a5a2b, 1); g.fillTriangle(32, 6, 38, 4, 36, 12); // ear
     g.fillStyle(0xe63946, 1); g.fillRect(31, 18, 12, 3);            // collar
     g.fillStyle(0xffffff, 1); g.fillCircle(40, 12, 2.6);            // eye
     g.fillStyle(0x2b2b2b, 1); g.fillCircle(40.8, 12.4, 1.3);
     g.fillStyle(0x2b2b2b, 1); g.fillCircle(45, 15, 2);              // nose
     g.generateTexture('kg-dog', 52, 40); g.destroy();
   }
   if (!scene.textures.exists('kg-cat')) {
     const g = mk();
     g.fillStyle(0x000000, 0.15); g.fillEllipse(18, 37, 26, 5);
     g.lineStyle(4, 0x8a6f52, 1);
     g.beginPath(); g.arc(28, 30, 8, -Math.PI * 0.5, Math.PI * 0.4); g.strokePath(); // tail
     g.fillStyle(0xa8886a, 1); g.fillRoundedRect(9, 18, 18, 20, 8);   // sitting body
     g.fillStyle(0xa8886a, 1); g.fillCircle(18, 12, 9);               // head
     g.fillStyle(0x8a6f52, 1);
     g.fillTriangle(10, 8, 14, 2, 16, 8); g.fillTriangle(20, 8, 22, 2, 26, 8); // ears
     g.fillStyle(0x7ecb62, 1); g.fillCircle(14.5, 12, 2.4); g.fillCircle(21.5, 12, 2.4);
     g.fillStyle(0x2b2b2b, 1); g.fillCircle(14.5, 12, 1.1); g.fillCircle(21.5, 12, 1.1);
     g.fillStyle(0xf3b0c3, 1); g.fillTriangle(16.6, 15, 19.4, 15, 18, 17); // nose
     g.generateTexture('kg-cat', 40, 40); g.destroy();
   }
   if (!scene.textures.exists('kg-parrot')) {
     const g = mk();
     g.fillStyle(0x1d7cf2, 1); g.fillTriangle(2, 26, 16, 20, 12, 30);  // tail feathers
     g.fillStyle(0x2ec4b6, 1); g.fillTriangle(4, 22, 16, 18, 12, 26);
     g.fillStyle(0xe63946, 1); g.fillEllipse(22, 22, 22, 18);          // body
     g.fillStyle(0xe63946, 1); g.fillCircle(33, 13, 8);                // head
     g.fillStyle(0xffffff, 1); g.fillCircle(35, 12, 4);                // face patch
     g.fillStyle(0x2b2b2b, 1); g.fillCircle(35.5, 12, 1.4);
     g.fillStyle(0xffd23f, 1); g.fillTriangle(40, 12, 46, 16, 39, 18); // beak
     g.fillStyle(0xffd23f, 1); g.fillTriangle(14, 16, 30, 22, 16, 28); // wing
     g.fillStyle(0xa8d96c, 1); g.fillTriangle(16, 18, 27, 22, 17, 26);
     g.generateTexture('kg-parrot', 48, 36); g.destroy();
   }
   if (!scene.textures.exists('kg-iguana')) {
     const g = mk();
     g.fillStyle(0x000000, 0.12); g.fillEllipse(32, 23, 52, 5);
     g.fillStyle(0x5ba64f, 1); g.fillTriangle(0, 18, 20, 12, 20, 20);  // tail
     g.fillStyle(0x6fbf5d, 1); g.fillEllipse(32, 16, 30, 12);          // body
     g.fillStyle(0x6fbf5d, 1); g.fillCircle(50, 13, 7);                // head
     g.fillStyle(0x5ba64f, 1);                                         // legs
     g.fillRect(24, 20, 4, 5); g.fillRect(38, 20, 4, 5);
     g.fillStyle(0x8fd97e, 1);                                         // back spines
     for (let sx = 20; sx <= 46; sx += 6) g.fillTriangle(sx, 11, sx + 3, 6, sx + 6, 11);
     g.fillStyle(0xffffff, 1); g.fillCircle(52, 12, 2.2);
     g.fillStyle(0x2b2b2b, 1); g.fillCircle(52.6, 12.2, 1.1);
     g.generateTexture('kg-iguana', 60, 26); g.destroy();
   }
 }
 
 // Fire/smoke FX textures shared by the driving scene and the hose minigame.
 function bakeFxTextures(scene) {
   if (!scene.textures.exists('smoke-puff')) {
     const g = scene.make.graphics({ add: false });
     g.fillStyle(0xb9bcc2, 0.5); g.fillCircle(14, 14, 12);
     g.fillStyle(0xe4e6ea, 0.5); g.fillCircle(11, 11, 7);
     g.generateTexture('smoke-puff', 28, 28); g.destroy();
   }
   if (!scene.textures.exists('glow')) {
     const g = scene.make.graphics({ add: false });
     for (let r = 32; r > 0; r -= 4) {
       g.fillStyle(0xffa733, 0.06);
       g.fillCircle(32, 32, r);
     }
     g.generateTexture('glow', 64, 64); g.destroy();
   }
 }
 
 // Side-view palm (curved trunk + drooping fronds), shared by the hose
 // minigame street and the endgame beach.
 function drawSidePalm(gfx, x, groundY, height) {
   gfx.lineStyle(Math.max(4, height * 0.09), PALM_TRUNK, 1);
   gfx.beginPath();
   gfx.moveTo(x, groundY);
   gfx.lineTo(x - height * 0.08, groundY - height * 0.5);
   gfx.lineTo(x + height * 0.06, groundY - height);
   gfx.strokePath();
   const topX = x + height * 0.06;
   const topY = groundY - height;
   const frondL = height * 0.55;
   const angles = [-2.5, -1.9, -1.3, -0.7, -0.1, 0.5];
   for (const a of angles) {
     gfx.lineStyle(Math.max(3, height * 0.05), PALM_FROND, 1);
     gfx.beginPath();
     gfx.moveTo(topX, topY);
     gfx.lineTo(topX + Math.cos(a) * frondL, topY + Math.sin(a) * frondL * 0.6 + frondL * 0.2);
     gfx.strokePath();
   }
   gfx.fillStyle(darken(PALM_TRUNK, 20), 1);
   gfx.fillCircle(topX, topY, height * 0.05);
 }
 
 // ── Web Audio SFX helpers (shared by scenes; ctx comes from the drive scene) ─
 function startWaterNoise(ctx) {
   if (!ctx) return null;
   try {
     const buffer = ctx.createBuffer(1, ctx.sampleRate, ctx.sampleRate);
     const data = buffer.getChannelData(0);
     for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;
     const source = ctx.createBufferSource();
     source.buffer = buffer;
     source.loop = true;
     const filter = ctx.createBiquadFilter();
     filter.type = 'bandpass';
     filter.frequency.value = 1200;
     filter.Q.value = 0.6;
     const gain = ctx.createGain();
     gain.gain.value = 0.14;
     source.connect(filter);
     filter.connect(gain);
     gain.connect(ctx.destination);
     source.start();
     return { source, gain };
   } catch (_) { return null; }
 }
 
 function stopWaterNoise(ctx, handle) {
   if (!handle) return;
   try {
     handle.gain.gain.setValueAtTime(handle.gain.gain.value, ctx.currentTime);
     handle.gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08);
     handle.source.stop(ctx.currentTime + 0.08);
   } catch (_) {}
 }
 
 // Short melodic blips: notes = [[freq, startOffsetSec, durSec], ...]
 function playJingle(ctx, muted, notes) {
   if (!ctx || muted) return;
   try {
     for (const [freq, at, dur] of notes) {
       const osc = ctx.createOscillator();
       const gain = ctx.createGain();
       osc.type = 'triangle';
       osc.frequency.value = freq;
       osc.connect(gain);
       gain.connect(ctx.destination);
       const t0 = ctx.currentTime + at;
       gain.gain.setValueAtTime(0.0001, t0);
       gain.gain.linearRampToValueAtTime(0.14, t0 + 0.02);
       gain.gain.exponentialRampToValueAtTime(0.001, t0 + dur);
       osc.start(t0);
       osc.stop(t0 + dur + 0.05);
     }
   } catch (_) {}
 }
 
 class FireTruckScene extends Phaser.Scene {
   constructor() {
     super({ key: 'FireTruckScene' });
     this.state = 'driving';
     this.speed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
     this.targetSpeed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
     this.promptDir = null;
     this.failVisible = false;
     this.route = [];
     this.island = null;
     this.routeIndex = 0;
     this.phase = 'approach';
     this.currentStep = null;
     this.heading = 'east';
     this.segmentEnd = { x: 0, y: 0 };
     this.audioCtx = null;
     this.promptResolved = false;
     this.warningUntil = 0;
     this.truckX = 0;
     this.truckY = 0;
     this.targetRotation = 0;
     this.successUntil = 0;
     this.debugDistance = 0;
     this.promptShownAt = 0;
     this.fireCell = null;
     this.fireBuildingCell = null;
     this.fireGraphics = null;
     this.firesExtinguished = 0;
     this.fireMode = false;
     this._stallSince = 0;
     // Manual control mode: truck moves only while an arrow key is held,
     // cell-centre to cell-centre along the road graph.
     this.controlMode = window.GAME_CONTROL_MODE ?? 'guided';
     this.heldHeadings = [];      // stack of held arrow-key headings, last wins
     this.manualCell = null;      // road cell the truck last centred on
     this.manualTarget = null;    // neighbouring road cell being driven toward
     this.manualHintHeading = null;
     this.fireDistances = null;   // Map road cell -> graph distance to current fire
     this._manualLastDist = null;
     // Music and siren both start OFF and are switched on by the player (M / S).
     // Browsers only let audio start from a real user gesture, and some (Edge on
     // macOS, Safari everywhere) never revive a context that was created or
     // resumed outside one. Starting silent and letting the player ask for sound
     // means the very first audio work happens inside a keypress, which is the
     // one moment every browser accepts.
     this.musicOn       = false;
     this.sfxMuted      = false;
     this.sirenOn       = false;
     this.lightsOn      = false;
     this._audioInited  = false;
     this._audioReady   = false;
     this._audioUnlock  = null;
     this._musicUnlock  = null;
     this._musicStarted = false;
     this._audioCheckAt = 0;
     this.audioHudText  = null;
     this.bgGain        = null;
     this.melodySynth   = null;
     this.bassSynth     = null;
     this.chordSynth    = null;
     this.sirenOsc      = null;
     this.sirenLfo      = null;
     this.sirenGainNode = null;
     this.truckLight    = null;
   }
 
   create() {
     this.island = FT.buildIsland({ width: 50, height: 50, routeCount: 200 });
     this.route = this.island.route;
     this.cellSize = CELL_SIZE;
 
     // Decoration precompute: building blocks (one rect per road-bounded block)
     // and park tagging. Must run before renderIsland + fire destination pick.
     this.blocks = FT.findBuildingBlocks(this.island.grid);
     FT.assignParks(this.island, { fraction: 0.15 });
 
     this.cameras.main.setBackgroundColor('#2BB5D8');
     this.cameras.main.setZoom(1 / SCALE);
     this.cameras.main.setBounds(
       this.island.bounds.minX * CELL_SIZE,
       this.island.bounds.minY * CELL_SIZE,
       this.island.bounds.width * CELL_SIZE,
       this.island.bounds.height * CELL_SIZE
     );
 
     this.overlay = this.add.rectangle(0, 0, this.scale.width, this.scale.height, 0xe63946, 0)
       .setOrigin(0, 0)
       .setScrollFactor(0)
       .setDepth(40);
 
     this.successOverlay = this.add.rectangle(0, 0, this.scale.width, this.scale.height, 0x2ec4b6, 1)
       .setAlpha(0)
       .setOrigin(0, 0)
       .setScrollFactor(0)
       .setDepth(39);
 
     this.promptText = this.add.text(this.scale.width / 2, this.scale.height - 74, '', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '34px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 8,
       align: 'center',
     }).setOrigin(0.5).setScrollFactor(0).setDepth(50);
 
     this.statusText = this.add.text(this.scale.width / 2, this.scale.height - 34, 'Watch for the next arrow.', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '20px',
       color: '#213321',
       backgroundColor: '#ffffff',
       padding: { x: 10, y: 4 },
     }).setOrigin(0.5).setScrollFactor(0).setDepth(50);
     this.statusText.setAlpha(0.88);
 
     this.fpsText = this.add.text(8, 8, '', {
       fontFamily: 'monospace',
       fontSize: '14px',
       color: '#2e372d',
       backgroundColor: 'rgba(255,255,255,0.7)',
       padding: { x: 6, y: 3 },
     }).setScrollFactor(0).setDepth(50);
 
     this.fireCountText = this.add.text(this.scale.width / 2, 78, '🔥 0 / 4', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '26px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 7,
       align: 'center',
     }).setOrigin(0.5, 0).setScrollFactor(0).setDepth(50);
 
     // Sound is opt-in: this line is the only instruction the player needs.
     this.audioHudText = this.add.text(this.scale.width / 2, 112, '', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '18px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 5,
       align: 'center',
     }).setOrigin(0.5, 0).setScrollFactor(0).setDepth(50);
     this._refreshAudioHud();
 
     this.uiCamera = this.cameras.add(0, 0, this.scale.width, this.scale.height);
 
     this._addOcean();
     this.renderIsland();
     this.createTruck();
 
     this.uiCamera.ignore([...this.cityChunks, this.truck]);
     this.cameras.main.ignore([this.overlay, this.successOverlay, this.promptText, this.statusText, this.fpsText, this.fireCountText, this.audioHudText]);
 
     this.currentStep = this.route[0];
     const start = this.worldPoint(this.island.routeStart.x, this.island.routeStart.y);
     this.segmentEnd = this.worldPoint(this.currentStep.x, this.currentStep.y);
     this.heading = this.currentStep.headingIn;
     this.targetRotation = this.rotationForHeading(this.heading);
     this.truck.setPosition(start.x, start.y);
     this.truck.rotation = this.targetRotation;
 
     this.input.keyboard.on('keydown', this.onKeyDown, this);
     this.input.keyboard.on('keyup', this.onKeyUp, this);
     // This is a keyboard-driven game — players may never click the canvas, so
     // start audio on the first key press too (a real keydown is a user gesture
     // that satisfies the browser autoplay policy).
     this.input.keyboard.once('keydown', () => this.initAudio(), this);
     this.input.once('pointerdown', () => this.initAudio(), this);
     this.scale.on('resize', this.onResize, this);
     this.onResize(this.scale.gameSize);
 
     this.cameras.main.startFollow(this.truck, false, 1, 1);
 
     this._initAmbient();
 
     this.lastStepTime = performance.now();
     this.fallbackTimer = setInterval(() => {
       const now = performance.now();
       const elapsed = now - this.lastStepTime;
       if (elapsed > 250) {
         this.step(Math.min(elapsed / 1000, 0.5));
         this.lastStepTime = now;
       }
     }, 200);
 
     this.events.on('shutdown', this.shutdown, this);
     this.events.on('destroy', this.shutdown, this);
 
     window.__FT_SCENE__ = this;
     this._initFireDestination();
     if (this.controlMode === 'manual') this._enterManualMode();
     this._updateFireCounter();
     this.refreshDebug();
   }
 
   worldPoint(x, y) {
     return { x: x * CELL_SIZE, y: y * CELL_SIZE };
   }
 
   renderIsland() {
     // Bake the static island into 16-cell chunk textures at BAKE_CELL px/cell,
     // drawn ×SCALE (camera zoom 1/SCALE) → ~1:1 on screen. Per-frame cost drops
     // to a handful of textured quads and Phaser culls offscreen chunks for free.
     //
     // Chunk-seam rule: every pass iterates a 1-cell apron around the chunk
     // (clamped to the grid) so overhanging art — SE shadows, palm fronds,
     // block-spanning buildings — that crosses a chunk border is re-drawn by the
     // neighbouring chunk. generateTexture clips whatever falls outside the tile.
     const CHUNK_CELLS = 16;
     const CHUNK_PX = CHUNK_CELLS * BAKE_CELL;
     const chunkCountX = Math.ceil(this.island.width / CHUNK_CELLS);
     const chunkCountY = Math.ceil(this.island.height / CHUNK_CELLS);
 
     this.cityChunks = [];
 
     for (let chunkY = 0; chunkY < chunkCountY; chunkY++) {
       for (let chunkX = 0; chunkX < chunkCountX; chunkX++) {
         const ox = chunkX * CHUNK_CELLS;
         const oy = chunkY * CHUNK_CELLS;
         const cellEndX = Math.min(this.island.width, ox + CHUNK_CELLS);
         const cellEndY = Math.min(this.island.height, oy + CHUNK_CELLS);
         const ax0 = Math.max(0, ox - 1);
         const ay0 = Math.max(0, oy - 1);
         const ax1 = Math.min(this.island.width, cellEndX + 1);
         const ay1 = Math.min(this.island.height, cellEndY + 1);
 
         const gfx = this.make.graphics({ add: false });
         this._bakeGround(gfx, ax0, ay0, ax1, ay1, ox, oy);
         this._bakeSidewalks(gfx, ax0, ay0, ax1, ay1, ox, oy);
         this._bakeRoadMarkings(gfx, ax0, ay0, ax1, ay1, ox, oy);
         this._bakeBuildings(gfx, ax0, ay0, ax1, ay1, ox, oy);
         this._bakeParks(gfx, ax0, ay0, ax1, ay1, ox, oy);
         this._bakePalms(gfx, ax0, ay0, ax1, ay1, ox, oy);
 
         const key = `island-bake-${chunkX}_${chunkY}`;
         if (this.textures.exists(key)) this.textures.remove(key);
         gfx.generateTexture(key, CHUNK_PX, CHUNK_PX);
         gfx.destroy();
 
         const imageWorldX = (ox - 0.5) * CELL_SIZE;
         const imageWorldY = (oy - 0.5) * CELL_SIZE;
         const img = this.add.image(imageWorldX, imageWorldY, key)
           .setOrigin(0, 0)
           .setScale(SCALE)
           .setDepth(0);
         this.cityChunks.push(img);
       }
     }
   }
 
   // Fill a colored strip along each edge of a cell that faces a `neighborType`
   // neighbour (shallow water beside beach, wet sand beside water, …).
   _edgeBands(gfx, x, y, gx, gy, neighborType, color, thick) {
     const grid = this.island.grid;
     const nb = (dx, dy) => {
       const c = grid[y + dy] && grid[y + dy][x + dx];
       return c && c.type === neighborType;
     };
     gfx.fillStyle(color, 1);
     if (nb(0, -1)) gfx.fillRect(gx, gy, BAKE_CELL, thick);
     if (nb(0, 1)) gfx.fillRect(gx, gy + BAKE_CELL - thick, BAKE_CELL, thick);
     if (nb(-1, 0)) gfx.fillRect(gx, gy, thick, BAKE_CELL);
     if (nb(1, 0)) gfx.fillRect(gx + BAKE_CELL - thick, gy, thick, BAKE_CELL);
   }
 
   _bakeGround(gfx, ax0, ay0, ax1, ay1, ox, oy) {
     const grid = this.island.grid;
     const T = FT.CELL_TYPES;
     for (let y = ay0; y < ay1; y++) {
       for (let x = ax0; x < ax1; x++) {
         const cell = grid[y][x];
         const gx = (x - ox) * BAKE_CELL;
         const gy = (y - oy) * BAKE_CELL;
         if (cell.type === T.WATER) {
           gfx.fillStyle(WATER_COLOR, 1);
           gfx.fillRect(gx, gy, BAKE_CELL, BAKE_CELL);
           this._edgeBands(gfx, x, y, gx, gy, T.BEACH, WATER_SHALLOW, 22);
           if (FT.hashCell(x, y, 11) < 0.5) {
             gfx.fillStyle(WATER_FLECK, 0.7);
             const fx = gx + FT.hashCell(x, y, 12) * (BAKE_CELL - 24) + 6;
             const fy = gy + FT.hashCell(x, y, 13) * (BAKE_CELL - 16) + 6;
             gfx.fillRect(fx, fy, 14, 4);
           }
         } else if (cell.type === T.BEACH) {
           gfx.fillStyle(BEACH_COLOR, 1);
           gfx.fillRect(gx, gy, BAKE_CELL, BAKE_CELL);
           this._edgeBands(gfx, x, y, gx, gy, T.WATER, BEACH_WET, 20);
           if (FT.hashCell(x, y, 14) < 0.35) {
             gfx.fillStyle(0xffffff, 0.55);
             const sx = gx + FT.hashCell(x, y, 15) * (BAKE_CELL - 20) + 10;
             const sy = gy + FT.hashCell(x, y, 16) * (BAKE_CELL - 20) + 10;
             gfx.fillCircle(sx, sy, 3);
           }
         } else if (cell.type === T.ROAD) {
           gfx.fillStyle(ASPHALT_COLOR, 1);
           gfx.fillRect(gx, gy, BAKE_CELL, BAKE_CELL);
         } else {
           // building / park footprint → pavement base (body drawn on top later)
           gfx.fillStyle(SIDEWALK_COLOR, 1);
           gfx.fillRect(gx, gy, BAKE_CELL, BAKE_CELL);
         }
       }
     }
   }
 
   _bakeSidewalks(gfx, ax0, ay0, ax1, ay1, ox, oy) {
     const grid = this.island.grid;
     const maskSize = Math.round(BAKE_CELL * 0.22);
     const band = 15;
     const curb = darken(SIDEWALK_COLOR, 40);
     for (let y = ay0; y < ay1; y++) {
       for (let x = ax0; x < ax1; x++) {
         const cell = grid[y][x];
         if (cell.type !== FT.CELL_TYPES.ROAD) continue;
         const gx = (x - ox) * BAKE_CELL;
         const gy = (y - oy) * BAKE_CELL;
 
         // Round the road corners: paint the outer corner where two adjacent
         // exits are missing with the diagonal neighbour's ground colour.
         const fillCorner = (cx, cy, dgx, dgy) => {
           const dc = grid[y + dgy] && grid[y + dgy][x + dgx];
           gfx.fillStyle(groundColorForCell(dc), 1);
           gfx.fillRect(cx, cy, maskSize, maskSize);
         };
         if (!cell.exits.N && !cell.exits.W) fillCorner(gx, gy, -1, -1);
         if (!cell.exits.N && !cell.exits.E) fillCorner(gx + BAKE_CELL - maskSize, gy, 1, -1);
         if (!cell.exits.S && !cell.exits.E) fillCorner(gx + BAKE_CELL - maskSize, gy + BAKE_CELL - maskSize, 1, 1);
         if (!cell.exits.S && !cell.exits.W) fillCorner(gx, gy + BAKE_CELL - maskSize, -1, 1);
 
         // Sidewalk band on each edge that abuts a building/park.
         const edges = FT.sidewalkEdges(grid, x, y);
         gfx.fillStyle(SIDEWALK_COLOR, 1);
         if (edges.N) gfx.fillRect(gx, gy, BAKE_CELL, band);
         if (edges.S) gfx.fillRect(gx, gy + BAKE_CELL - band, BAKE_CELL, band);
         if (edges.W) gfx.fillRect(gx, gy, band, BAKE_CELL);
         if (edges.E) gfx.fillRect(gx + BAKE_CELL - band, gy, band, BAKE_CELL);
         gfx.fillStyle(curb, 1);
         if (edges.N) gfx.fillRect(gx, gy + band, BAKE_CELL, 2);
         if (edges.S) gfx.fillRect(gx, gy + BAKE_CELL - band - 2, BAKE_CELL, 2);
         if (edges.W) gfx.fillRect(gx + band, gy, 2, BAKE_CELL);
         if (edges.E) gfx.fillRect(gx + BAKE_CELL - band - 2, gy, 2, BAKE_CELL);
 
         // Bus-stop shelters dotted along straight sidewalk-lined streets.
         const meta = cell.meta || FT.classifyIntersection(cell.exits);
         if (meta.kind === 'straight' && this._busStopEdge(cell, edges, x, y)) {
           this._drawBusStop(gfx, gx, gy, this._busStopEdge(cell, edges, x, y));
         }
       }
     }
   }
 
   // Which sidewalk edge (if any) of this road cell hosts a bus stop.
   // Deterministic via hashCell so every bake places them identically.
   _busStopEdge(cell, edges, x, y) {
     if (FT.hashCell(x, y, 35) >= 0.10) return null;
     for (const card of ['N', 'S', 'E', 'W']) if (edges[card]) return card;
     return null;
   }
 
   _drawBusStop(gfx, gx, gy, edge) {
     const roof = 0x1d7cf2;
     // Shelter roof (36×10) hugging the sidewalk band, plus a small yellow sign.
     const draw = (rx, ry, w, h, sx, sy) => {
       gfx.fillStyle(0x000000, 0.15); gfx.fillRoundedRect(rx + 2, ry + 2, w, h, 3);
       gfx.fillStyle(roof, 1); gfx.fillRoundedRect(rx, ry, w, h, 3);
       gfx.fillStyle(0xffffff, 0.5); gfx.fillRoundedRect(rx + 3, ry + 2, w - 6, 3, 2);
       gfx.fillStyle(STRIPE_COLOR, 1); gfx.fillCircle(sx, sy, 4);
       gfx.fillStyle(0x22303a, 1); gfx.fillCircle(sx, sy, 2);
     };
     if (edge === 'N') draw(gx + 30, gy + 1, 36, 10, gx + 74, gy + 7);
     else if (edge === 'S') draw(gx + 30, gy + BAKE_CELL - 11, 36, 10, gx + 74, gy + BAKE_CELL - 7);
     else if (edge === 'W') draw(gx + 1, gy + 30, 10, 36, gx + 7, gy + 74);
     else draw(gx + BAKE_CELL - 11, gy + 30, 10, 36, gx + BAKE_CELL - 7, gy + 74);
   }
 
   _bakeRoadMarkings(gfx, ax0, ay0, ax1, ay1, ox, oy) {
     const grid = this.island.grid;
     for (let y = ay0; y < ay1; y++) {
       for (let x = ax0; x < ax1; x++) {
         const cell = grid[y][x];
         if (cell.type !== FT.CELL_TYPES.ROAD) continue;
         const gx = (x - ox) * BAKE_CELL;
         const gy = (y - oy) * BAKE_CELL;
         const meta = cell.meta || FT.classifyIntersection(cell.exits);
         if (meta.kind === 'straight') {
           // Painted protected bike lanes on both sides of every straight
           // segment (offsets match the bicyclists' riding line), with a
           // white separator dash on the traffic side.
           const laneIn = 16, laneOut = 30; // px from road centerline
           const mid = BAKE_CELL / 2;
           if (cell.exits.N && cell.exits.S) {
             gfx.fillStyle(BIKE_LANE_COLOR, 0.55);
             gfx.fillRect(gx + mid - laneOut, gy, laneOut - laneIn, BAKE_CELL);
             gfx.fillRect(gx + mid + laneIn, gy, laneOut - laneIn, BAKE_CELL);
             gfx.fillStyle(0xffffff, 0.7);
             for (let dy = 4; dy < BAKE_CELL - 4; dy += 20) {
               gfx.fillRect(gx + mid - laneIn - 2, gy + dy, 2, 10);
               gfx.fillRect(gx + mid + laneIn, gy + dy, 2, 10);
             }
           } else {
             gfx.fillStyle(BIKE_LANE_COLOR, 0.55);
             gfx.fillRect(gx, gy + mid - laneOut, BAKE_CELL, laneOut - laneIn);
             gfx.fillRect(gx, gy + mid + laneIn, BAKE_CELL, laneOut - laneIn);
             gfx.fillStyle(0xffffff, 0.7);
             for (let dx = 4; dx < BAKE_CELL - 4; dx += 20) {
               gfx.fillRect(gx + dx, gy + mid - laneIn - 2, 10, 2);
               gfx.fillRect(gx + dx, gy + mid + laneIn, 10, 2);
             }
           }
           gfx.fillStyle(STRIPE_COLOR, 0.9);
           if (cell.exits.N && cell.exits.S) {
             for (let dy = 8; dy < BAKE_CELL - 8; dy += 24) gfx.fillRect(gx + BAKE_CELL / 2 - 3, gy + dy, 6, 14);
           } else {
             for (let dx = 8; dx < BAKE_CELL - 8; dx += 24) gfx.fillRect(gx + dx, gy + BAKE_CELL / 2 - 3, 14, 6);
           }
         } else if (meta.kind === 't' || meta.kind === 'four') {
           // Zebra crosswalks near each approach edge.
           gfx.fillStyle(CROSSWALK_COLOR, 0.95);
           const cw = 10, gap = 8, inset = 6;
           if (cell.exits.N) for (let i = 0; i < 4; i++) gfx.fillRect(gx + inset + i * (cw + gap), gy + 4, cw, 16);
           if (cell.exits.S) for (let i = 0; i < 4; i++) gfx.fillRect(gx + inset + i * (cw + gap), gy + BAKE_CELL - 20, cw, 16);
           if (cell.exits.W) for (let i = 0; i < 4; i++) gfx.fillRect(gx + 4, gy + inset + i * (cw + gap), 16, cw);
           if (cell.exits.E) for (let i = 0; i < 4; i++) gfx.fillRect(gx + BAKE_CELL - 20, gy + inset + i * (cw + gap), 16, cw);
         }
       }
     }
   }
 
   _bakeBuildings(gfx, ax0, ay0, ax1, ay1, ox, oy) {
     const grid = this.island.grid;
     for (const block of this.blocks) {
       if (grid[block.y][block.x].park) continue; // parks handled separately
       if (block.x >= ax1 || block.x + block.w <= ax0 || block.y >= ay1 || block.y + block.h <= ay0) continue;
       this._drawBuilding(gfx, block, ox, oy);
     }
   }
 
   _drawBuilding(gfx, block, ox, oy) {
     const margin = 14; // pavement gap around the block
     const bx = (block.x - ox) * BAKE_CELL + margin;
     const by = (block.y - oy) * BAKE_CELL + margin;
     const bw = block.w * BAKE_CELL - margin * 2;
     const bh = block.h * BAKE_CELL - margin * 2;
     if (bw <= 10 || bh <= 10) return;
     const big = block.w >= 2 && block.h >= 2;
     const color = BUILDING_PALETTE[Math.floor(FT.hashCell(block.x, block.y, 0) * BUILDING_PALETTE.length) % BUILDING_PALETTE.length];
 
     // SE drop shadow, roof body, parapet outline.
     gfx.fillStyle(0x000000, 0.15);
     gfx.fillRoundedRect(bx + 7, by + 7, bw, bh, 10);
     gfx.fillStyle(color, 1);
     gfx.fillRoundedRect(bx, by, bw, bh, 10);
     gfx.lineStyle(3, darken(color, 45), 1);
     gfx.strokeRoundedRect(bx, by, bw, bh, 10);
 
     // Rooftop skylight / window grid.
     const winLit = 0xffe9a8;
     const winDark = darken(color, 25);
     for (let wy = by + 16; wy < by + bh - 14; wy += 26) {
       for (let wx = bx + 14; wx < bx + bw - 12; wx += 24) {
         const lit = FT.hashCell(Math.round(wx), Math.round(wy), 5) < 0.32;
         gfx.fillStyle(lit ? winLit : winDark, 0.95);
         gfx.fillRect(wx, wy, 12, 14);
       }
     }
 
     // One rooftop feature keyed by hash.
     const roofStyle = Math.floor(FT.hashCell(block.x, block.y, 3) * 5);
     if (roofStyle === 0) {
       gfx.fillStyle(0xb8bcc4, 1);
       gfx.fillRoundedRect(bx + bw * 0.20, by + bh * 0.20, 22, 18, 4);
       gfx.fillRoundedRect(bx + bw * 0.55, by + bh * 0.52, 20, 16, 4);
     } else if (roofStyle === 1) {
       const r = Math.min(bw, bh) * 0.16;
       gfx.fillStyle(0x9aa0a8, 1); gfx.fillCircle(bx + bw / 2, by + bh / 2, r);
       gfx.fillStyle(0x7d828a, 1); gfx.fillCircle(bx + bw / 2, by + bh / 2, r * 0.55);
     } else if (roofStyle === 2) {
       gfx.fillStyle(PARK_GRASS, 1); gfx.fillRoundedRect(bx + 10, by + 10, bw - 20, bh - 20, 8);
       gfx.fillStyle(darken(PARK_GRASS, 30), 1);
       gfx.fillCircle(bx + bw * 0.35, by + bh * 0.4, 9);
       gfx.fillCircle(bx + bw * 0.62, by + bh * 0.6, 9);
     } else if (roofStyle === 3 && big) {
       gfx.fillStyle(0x3fc9e0, 1); gfx.fillRoundedRect(bx + bw * 0.25, by + bh * 0.3, bw * 0.5, bh * 0.35, 8);
       gfx.fillStyle(0x8fe3f0, 0.6); gfx.fillRoundedRect(bx + bw * 0.28, by + bh * 0.33, bw * 0.44, bh * 0.12, 6);
     } else {
       gfx.fillStyle(darken(color, 35), 1);
       gfx.fillCircle(bx + bw * 0.3, by + bh * 0.3, 5);
       gfx.fillCircle(bx + bw * 0.7, by + bh * 0.7, 5);
     }
   }
 
   _bakeParks(gfx, ax0, ay0, ax1, ay1, ox, oy) {
     const grid = this.island.grid;
     for (const block of this.blocks) {
       if (!grid[block.y][block.x].park) continue;
       if (block.x >= ax1 || block.x + block.w <= ax0 || block.y >= ay1 || block.y + block.h <= ay0) continue;
       this._drawPark(gfx, block, ox, oy);
     }
   }
 
   _drawPark(gfx, block, ox, oy) {
     const margin = 8;
     const bx = (block.x - ox) * BAKE_CELL + margin;
     const by = (block.y - oy) * BAKE_CELL + margin;
     const bw = block.w * BAKE_CELL - margin * 2;
     const bh = block.h * BAKE_CELL - margin * 2;
     if (bw <= 10 || bh <= 10) return;
     gfx.fillStyle(0x000000, 0.12); gfx.fillRoundedRect(bx + 6, by + 6, bw, bh, 10);
     gfx.fillStyle(PARK_GRASS, 1); gfx.fillRoundedRect(bx, by, bw, bh, 10);
     gfx.lineStyle(2, darken(PARK_GRASS, 40), 1); gfx.strokeRoundedRect(bx, by, bw, bh, 10);
     // Path cross.
     gfx.fillStyle(0xe6dcc0, 0.9);
     gfx.fillRect(bx + bw / 2 - 8, by, 16, bh);
     gfx.fillRect(bx, by + bh / 2 - 8, bw, 16);
     // Fountain.
     gfx.fillStyle(0x9aa0a8, 1); gfx.fillCircle(bx + bw / 2, by + bh / 2, 16);
     gfx.fillStyle(WATER_SHALLOW, 1); gfx.fillCircle(bx + bw / 2, by + bh / 2, 11);
     // Round-canopy trees.
     const nTrees = 3 + Math.floor(FT.hashCell(block.x, block.y, 8) * 4);
     for (let i = 0; i < nTrees; i++) {
       const hx = FT.hashCell(block.x * 7 + i, block.y * 3 + 1, 20);
       const hy = FT.hashCell(block.x * 3 + 1, block.y * 7 + i, 21);
       const tx = bx + 18 + hx * (bw - 36);
       const ty = by + 18 + hy * (bh - 36);
       gfx.fillStyle(0x000000, 0.12); gfx.fillEllipse(tx + 3, ty + 4, 26, 16);
       gfx.fillStyle(darken(PARK_GRASS, 22), 1); gfx.fillCircle(tx, ty, 13);
       gfx.fillStyle(lighten(PARK_GRASS, 25), 0.85); gfx.fillCircle(tx - 3, ty - 3, 6);
     }
   }
 
   _bakePalms(gfx, ax0, ay0, ax1, ay1, ox, oy) {
     const grid = this.island.grid;
     const T = FT.CELL_TYPES;
     for (let y = ay0; y < ay1; y++) {
       for (let x = ax0; x < ax1; x++) {
         const cell = grid[y][x];
         const gx = (x - ox) * BAKE_CELL;
         const gy = (y - oy) * BAKE_CELL;
         if (cell.type === T.BEACH && FT.hashCell(x, y, 30) < 0.5) {
           const jx = gx + BAKE_CELL / 2 + (FT.hashCell(x, y, 32) - 0.5) * BAKE_CELL * 0.4;
           const jy = gy + BAKE_CELL / 2 + (FT.hashCell(x, y, 33) - 0.5) * BAKE_CELL * 0.4;
           this._drawPalm(gfx, jx, jy);
         } else if (cell.type === T.ROAD) {
           // Street trees stand on the sidewalk band, never in the roadway:
           // anchor to a sidewalk edge and jitter only along that edge.
           const e = FT.sidewalkEdges(grid, x, y);
           if (FT.hashCell(x, y, 31) >= 0.12) continue;
           if (this._busStopEdge(cell, e, x, y)) continue; // shelter lives here
           const edges = ['N', 'S', 'E', 'W'].filter((c) => e[c]);
           if (!edges.length) continue;
           const edge = edges[Math.floor(FT.hashCell(x, y, 34) * edges.length) % edges.length];
           const along = BAKE_CELL / 2 + (FT.hashCell(x, y, 32) - 0.5) * BAKE_CELL * 0.5;
           if (edge === 'N') this._drawPalm(gfx, gx + along, gy + 7);
           else if (edge === 'S') this._drawPalm(gfx, gx + along, gy + BAKE_CELL - 7);
           else if (edge === 'W') this._drawPalm(gfx, gx + 7, gy + along);
           else this._drawPalm(gfx, gx + BAKE_CELL - 7, gy + along);
         }
       }
     }
   }
 
   _drawPalm(gfx, cx, cy) {
     gfx.fillStyle(0x000000, 0.15); gfx.fillEllipse(cx + 6, cy + 12, 42, 16);
     gfx.fillStyle(PALM_TRUNK, 1); gfx.fillRect(cx - 4, cy - 6, 8, 26);
     const n = 7;
     const top = cy - 8;
     for (let i = 0; i < n; i++) {
       const a = (i / n) * Math.PI * 2;
       gfx.fillStyle(i % 2 ? PALM_FROND : lighten(PALM_FROND, 25), 1);
       gfx.fillTriangle(
         cx, top,
         cx + Math.cos(a - 0.2) * 30, top + Math.sin(a - 0.2) * 22,
         cx + Math.cos(a) * 34, top + Math.sin(a) * 24
       );
     }
     gfx.fillStyle(darken(PALM_TRUNK, 20), 1); gfx.fillCircle(cx, top, 5);
   }
 
   _addOcean() {
     const key = 'water-tile';
     if (!this.textures.exists(key)) {
       const g = this.make.graphics({ add: false });
       g.fillStyle(WATER_COLOR, 1); g.fillRect(0, 0, 256, 256);
       g.fillStyle(WATER_SHALLOW, 0.4);
       for (let i = 0; i < 6; i++) g.fillRect(0, (i * 43) % 256, 256, 6);
       g.fillStyle(WATER_FLECK, 0.4);
       for (let i = 0; i < 20; i++) g.fillRect((i * 61) % 256, (i * 97) % 256, 12, 3);
       g.generateTexture(key, 256, 256); g.destroy();
     }
     // Screen-fixed animated water backdrop (scrollFactor 0). A world-sized
     // TileSprite would allocate a multi-GB fill canvas, so we keep it viewport
     // sized; the opaque island chunks cover the centre and the sea shows around
     // the edges, drifting each frame.
     this.ocean = this.add.tileSprite(0, 0, this.scale.width, this.scale.height, key)
       .setOrigin(0, 0)
       .setScrollFactor(0)
       .setDepth(-1);
     this.uiCamera.ignore(this.ocean);
 
     // A couple of static buoys bobbing in the offshore ring.
     if (!this.textures.exists('buoy')) {
       const g = this.make.graphics({ add: false });
       g.fillStyle(0x000000, 0.18); g.fillEllipse(20, 30, 26, 10);
       g.fillStyle(0xe63946, 1); g.fillCircle(20, 18, 11);
       g.fillStyle(0xffffff, 1); g.fillRect(9, 15, 22, 5);
       g.fillStyle(0xffd23f, 1); g.fillCircle(20, 8, 4);
       g.generateTexture('buoy', 40, 40); g.destroy();
     }
     this.buoys = [];
     const b0 = this.island.bounds;
     const spots = [
       { x: (b0.minX - 3) * CELL_SIZE, y: (b0.minY + 12) * CELL_SIZE },
       { x: (b0.maxX + 3) * CELL_SIZE, y: (b0.minY + 30) * CELL_SIZE },
       { x: (b0.minX + 25) * CELL_SIZE, y: (b0.maxY + 3) * CELL_SIZE },
     ];
     for (const s of spots) {
       const buoy = this.add.image(s.x, s.y, 'buoy').setScale(SCALE * 0.9).setDepth(6);
       this.uiCamera.ignore(buoy);
       this.tweens.add({ targets: buoy, y: s.y - 10 * SCALE, angle: 6, duration: 1400, ease: 'Sine.easeInOut', yoyo: true, repeat: -1 });
       this.buoys.push(buoy);
     }
   }
 
   // ── Ambient life ──────────────────────────────────────────────────────────
 
   // Add a world object at a depth and hide it from the HUD camera.
   _addWorld(obj, depth) {
     obj.setDepth(depth);
     this.uiCamera.ignore(obj);
     return obj;
   }
 
   _cellCenter(cell) {
     return { x: cell.x * CELL_SIZE, y: cell.y * CELL_SIZE };
   }
 
   // Unit vector pointing to the right of travel (for lane / curb offsets).
   _rightVec(heading) {
     if (heading === 'east') return { x: 0, y: 1 };
     if (heading === 'south') return { x: -1, y: 0 };
     if (heading === 'west') return { x: 0, y: -1 };
     return { x: 1, y: 0 };
   }
 
   _bakeAmbientTextures() {
     const mk = () => this.make.graphics({ add: false });
 
     const carColors = [0xe63946, 0x1d7cf2, 0xffd23f, 0x2ec4b6, 0xff8c42];
     carColors.forEach((color, i) => {
       const key = 'car-' + i;
       if (this.textures.exists(key)) return;
       const g = mk();
       g.fillStyle(0x000000, 0.2); g.fillEllipse(15, 15, 28, 8);
       g.fillStyle(color, 1); g.fillRoundedRect(2, 2, 26, 12, 4);
       g.fillStyle(0x22303a, 0.85); g.fillRect(19, 3, 6, 10); // windshield (front = +x)
       g.fillStyle(0xffffff, 0.5); g.fillRect(6, 6, 11, 4);
       g.generateTexture(key, 30, 18); g.destroy();
     });
 
     // Top-down bicyclists (facing +x): two wheel lines, frame, rider on top.
     const bikeShirts = [0xe63946, 0x1d7cf2, 0x2ec4b6, 0xff8c42];
     bikeShirts.forEach((color, i) => {
       const key = 'bike-' + i;
       if (this.textures.exists(key)) return;
       const g = mk();
       g.fillStyle(0x000000, 0.2); g.fillEllipse(15, 10, 22, 5);
       g.fillStyle(0x22303a, 1);
       g.fillRoundedRect(2, 6, 9, 3, 1.5);   // rear wheel
       g.fillRoundedRect(19, 6, 9, 3, 1.5);  // front wheel
       g.fillStyle(0x8a929c, 1); g.fillRect(10, 6.5, 10, 2); // frame
       g.fillStyle(0xd8dde3, 1); g.fillRect(20, 3, 2, 9);    // handlebars
       g.fillStyle(color, 1); g.fillRoundedRect(9, 3, 10, 9, 3); // rider torso
       g.fillStyle(0xf0c8a0, 1); g.fillCircle(14, 7.5, 3);   // head
       g.generateTexture(key, 30, 15); g.destroy();
     });
 
     // Top-down buses (facing +x): long body, window rows, white roof stripe.
     const busColors = [0x2ec4b6, 0xffd23f];
     busColors.forEach((color, i) => {
       const key = 'bus-' + i;
       if (this.textures.exists(key)) return;
       const g = mk();
       g.fillStyle(0x000000, 0.2); g.fillEllipse(24, 16, 44, 8);
       g.fillStyle(color, 1); g.fillRoundedRect(2, 3, 44, 14, 4);
       g.lineStyle(2, darken(color, 50), 1); g.strokeRoundedRect(2, 3, 44, 14, 4);
       g.fillStyle(0x22303a, 0.85);
       g.fillRect(41, 5, 4, 10); // windshield (front = +x)
       for (let wx = 6; wx <= 34; wx += 7) { g.fillRect(wx, 4, 5, 3); g.fillRect(wx, 13, 5, 3); }
       g.fillStyle(0xffffff, 0.6); g.fillRoundedRect(8, 8, 30, 4, 2); // roof stripe
       g.generateTexture(key, 48, 20); g.destroy();
     });
 
     const shirts = [0x1d7cf2, 0xe63946, 0x2ec4b6, 0xffd23f];
     shirts.forEach((color, i) => {
       const key = 'ped-' + i;
       if (this.textures.exists(key)) return;
       const g = mk();
       g.fillStyle(0x000000, 0.2); g.fillEllipse(5, 14, 8, 3);
       g.fillStyle(color, 1); g.fillRoundedRect(1, 6, 8, 7, 2);
       g.fillStyle(0xf0c8a0, 1); g.fillCircle(5, 4, 3);
       g.generateTexture(key, 11, 17); g.destroy();
     });
 
     if (!this.textures.exists('boat')) {
       const g = mk();
       g.fillStyle(0xffffff, 0.5); g.fillEllipse(24, 40, 42, 10);
       g.fillStyle(0x5a3a24, 1); g.fillRect(23, 6, 3, 26);
       g.fillStyle(0xffffff, 1); g.fillTriangle(24, 6, 24, 32, 41, 30);
       g.fillStyle(0xe63946, 1); g.fillTriangle(23, 6, 23, 19, 13, 17);
       g.fillStyle(0x8a5a3b, 1);
       g.fillPoints([{ x: 8, y: 32 }, { x: 40, y: 32 }, { x: 34, y: 43 }, { x: 14, y: 43 }], true);
       g.generateTexture('boat', 48, 48); g.destroy();
     }
 
     if (!this.textures.exists('cloud-shadow')) {
       const g = mk();
       g.fillStyle(0x14304a, 0.10);
       g.fillEllipse(60, 40, 90, 46);
       g.fillEllipse(40, 34, 54, 40);
       g.fillEllipse(84, 44, 58, 36);
       g.generateTexture('cloud-shadow', 120, 80); g.destroy();
     }
 
     if (!this.textures.exists('bird')) {
       const g = mk();
       g.lineStyle(3, 0x3a3f4a, 1);
       g.beginPath();
       g.moveTo(2, 9); g.lineTo(12, 3); g.lineTo(22, 9);
       g.strokePath();
       g.generateTexture('bird', 24, 12); g.destroy();
     }
 
     bakeFxTextures(this);
 
     if (!this.textures.exists('burning-overlay')) {
       const g = mk();
       g.fillStyle(0x2a1a12, 0.55); g.fillRoundedRect(6, 6, 84, 84, 10);
       g.fillStyle(0xffb347, 0.9);
       for (let wy = 16; wy < 80; wy += 22) {
         for (let wx = 16; wx < 80; wx += 22) g.fillRect(wx, wy, 10, 12);
       }
       g.generateTexture('burning-overlay', 96, 96); g.destroy();
     }
   }
 
   _randomRoadStart() {
     const grid = this.island.grid;
     const roads = this.island.roads;
     for (let tries = 0; tries < 40; tries++) {
       const cell = FT.randPick(this.ambientRng, roads);
       const headings = [];
       for (const card of ['N', 'E', 'S', 'W']) {
         if (cell.exits[card]) headings.push(FT.CARD_TO_HEADING[card]);
       }
       if (!headings.length) continue;
       const heading = FT.randPick(this.ambientRng, headings);
       const to = FT.cellAhead(grid, cell, heading);
       if (to && to.type === FT.CELL_TYPES.ROAD) return { from: cell, to, heading };
     }
     return null;
   }
 
   _initAmbient() {
     this._bakeAmbientTextures();
     this.ambientRng = FT.createSeededRng(0x51ce77);
     this.trafficCars = [];
     this.pedestrians = [];
     this.bicyclists = [];
     this.buses = [];
     this.clouds = [];
     this.boats = [];
     this.birds = [];
 
     const spawnMovers = (count, list, texture, textureCount, scale, depth) => {
       for (let i = 0; i < count; i++) {
         const start = this._randomRoadStart();
         if (!start) continue;
         const key = texture + '-' + Math.floor(this.ambientRng.next() * textureCount);
         const img = this._addWorld(this.add.image(0, 0, key).setScale(SCALE * scale), depth);
         list.push({ img, from: start.from, to: start.to, heading: start.heading, t: this.ambientRng.next() });
       }
     };
     spawnMovers(CAR_COUNT, this.trafficCars, 'car', 5, 0.85, 9);
     spawnMovers(BUS_COUNT, this.buses, 'bus', 2, 0.9, 9);
     spawnMovers(BIKE_COUNT, this.bicyclists, 'bike', 4, 0.85, 8.5);
     spawnMovers(PED_COUNT, this.pedestrians, 'ped', 4, 0.85, 8);
 
     const b = this.island.bounds;
     for (let i = 0; i < 3; i++) {
       const scale = 4 + this.ambientRng.next() * 3;
       const x = (b.minX + this.ambientRng.next() * b.width) * CELL_SIZE;
       const y = (b.minY + this.ambientRng.next() * b.height) * CELL_SIZE;
       const img = this._addWorld(this.add.image(x, y, 'cloud-shadow').setScale(scale).setAlpha(0.55), 34);
       this.clouds.push({ img, vx: 55 + this.ambientRng.next() * 25, vy: 18 + this.ambientRng.next() * 14 });
     }
 
     // Boats bob just offshore around the perimeter.
     const boatSpots = [
       { x: (b.minX - 1.5) * CELL_SIZE, y: (b.minY + 8) * CELL_SIZE },
       { x: (b.maxX + 1.5) * CELL_SIZE, y: (b.minY + 20) * CELL_SIZE },
       { x: (b.minX + 10) * CELL_SIZE, y: (b.minY - 1.5) * CELL_SIZE },
       { x: (b.minX + 34) * CELL_SIZE, y: (b.maxY + 1.5) * CELL_SIZE },
       { x: (b.maxX + 1.5) * CELL_SIZE, y: (b.maxY - 12) * CELL_SIZE },
     ];
     boatSpots.forEach((s, i) => {
       const img = this._addWorld(this.add.image(s.x, s.y, 'boat').setScale(SCALE), 6);
       this.boats.push(img);
       this.tweens.add({ targets: img, y: s.y - 12 * SCALE, angle: 4, duration: 1600 + i * 220, ease: 'Sine.easeInOut', yoyo: true, repeat: -1 });
     });
 
     this._scheduleBird();
     this.ambientReady = true;
   }
 
   _scheduleBird() {
     const delay = 9000 + this.ambientRng.next() * 6000;
     this._birdTimer = this.time.delayedCall(delay, () => {
       this._spawnBirdFlock();
       this._scheduleBird();
     });
   }
 
   _spawnBirdFlock() {
     if (!this.birds || this.birds.length >= 4) return;
     const view = this.cameras.main.worldView;
     const fromLeft = this.ambientRng.next() < 0.5;
     const count = 1 + Math.floor(this.ambientRng.next() * 3);
     const y0 = view.y + view.height * (0.1 + this.ambientRng.next() * 0.3);
     for (let i = 0; i < count && this.birds.length < 4; i++) {
       const startX = fromLeft ? view.x - 60 * SCALE : view.right + 60 * SCALE;
       const img = this._addWorld(this.add.image(startX, y0 + i * 26 * SCALE, 'bird').setScale(SCALE), 38);
       const dir = fromLeft ? 1 : -1;
       this.birds.push({ img, vx: dir * (90 + this.ambientRng.next() * 50), baseY: img.y, phase: this.ambientRng.next() * 6 });
     }
   }
 
   _moveMover(m, speed, offset, dt, rotate) {
     const grid = this.island.grid;
     const fromC = this._cellCenter(m.from);
     const toC = this._cellCenter(m.to);
     const r = this._rightVec(m.heading);
     const px = fromC.x + (toC.x - fromC.x) * m.t + r.x * offset;
     const py = fromC.y + (toC.y - fromC.y) * m.t + r.y * offset;
     const nearTruck = Math.hypot(px - this.truck.x, py - this.truck.y) < CELL_SIZE * 0.8;
     if (!nearTruck) {
       m.t += (speed * dt) / CELL_SIZE;
       let guard = 0;
       while (m.t >= 1 && guard++ < 8) {
         m.t -= 1;
         const plan = FT.advanceCarPlan(grid, m.to, m.heading, this.ambientRng);
         m.from = m.to;
         m.to = plan.cell;
         m.heading = plan.heading;
       }
     }
     const fc = this._cellCenter(m.from);
     const tc = this._cellCenter(m.to);
     const rr = this._rightVec(m.heading);
     m.img.setPosition(
       fc.x + (tc.x - fc.x) * m.t + rr.x * offset,
       fc.y + (tc.y - fc.y) * m.t + rr.y * offset
     );
     if (rotate) m.img.rotation = this.rotationForHeading(m.heading);
   }
 
   _updateAmbient(dt) {
     for (const car of this.trafficCars) this._moveMover(car, CAR_SPEED, CELL_SIZE * 0.16, dt, true);
     for (const bus of this.buses) this._moveMover(bus, BUS_SPEED, CELL_SIZE * 0.14, dt, true);
     for (const bike of this.bicyclists) this._moveMover(bike, BIKE_SPEED, CELL_SIZE * 0.24, dt, true);
     for (const ped of this.pedestrians) this._moveMover(ped, PED_SPEED, CELL_SIZE * 0.34, dt, false);
 
     const b = this.island.bounds;
     const margin = 6 * CELL_SIZE;
     const minX = (b.minX) * CELL_SIZE - margin, maxX = (b.maxX) * CELL_SIZE + margin;
     const minY = (b.minY) * CELL_SIZE - margin, maxY = (b.maxY) * CELL_SIZE + margin;
     for (const c of this.clouds) {
       c.img.x += c.vx * dt;
       c.img.y += c.vy * dt;
       if (c.img.x > maxX) c.img.x = minX;
       if (c.img.y > maxY) c.img.y = minY;
     }
 
     if (this.birds.length) {
       const view = this.cameras.main.worldView;
       const t = this.time.now * 0.006;
       for (let i = this.birds.length - 1; i >= 0; i--) {
         const bird = this.birds[i];
         bird.img.x += bird.vx * dt;
         bird.img.y = bird.baseY + Math.sin(t + bird.phase) * 10 * SCALE;
         if (bird.img.x < view.x - 120 * SCALE || bird.img.x > view.right + 120 * SCALE) {
           bird.img.destroy();
           this.birds.splice(i, 1);
         }
       }
     }
   }
 
   createTruck() {
     // Bake a top-down fire-truck texture once (nose points +x = east, matching
     // rotationForHeading('east') === 0). The container keeps [image, truckLight]
     // so toggleLights / _updateLightsEffect drive the light rectangle unchanged.
     const key = 'truck-top';
     if (!this.textures.exists(key)) {
       const g = this.make.graphics({ add: false });
       // Shadow
       g.fillStyle(0x000000, 0.2); g.fillEllipse(26, 22, 46, 12);
       // Red body
       g.fillStyle(0xe63946, 1); g.fillRoundedRect(4, 5, 40, 18, 5);
       g.lineStyle(2, 0x9b1c25, 1); g.strokeRoundedRect(4, 5, 40, 18, 5);
       // White side stripe
       g.fillStyle(0xffffff, 0.85); g.fillRect(6, 13, 38, 3);
       // Yellow ladder along the spine with rungs
       g.fillStyle(0xffd23f, 1); g.fillRect(9, 11, 22, 6);
       g.fillStyle(0xcf9b1e, 1);
       for (let rx = 11; rx < 30; rx += 4) g.fillRect(rx, 11, 1.6, 6);
       // Turntable
       g.fillStyle(0xf4b400, 1); g.fillCircle(13, 14, 4);
       g.fillStyle(0xcf9b1e, 1); g.fillCircle(13, 14, 2);
       // White cab at the front (+x)
       g.fillStyle(0xf6f7fb, 1); g.fillRoundedRect(30, 6, 13, 16, 3);
       g.lineStyle(2, 0xbcc6d4, 1); g.strokeRoundedRect(30, 6, 13, 16, 3);
       // Windshield
       g.fillStyle(0x88ccff, 1); g.fillRect(40, 8, 3, 12);
       // Mirrors
       g.fillStyle(0x30333c, 1); g.fillRect(31, 3, 4, 2); g.fillRect(31, 23, 4, 2);
       g.generateTexture(key, 52, 28); g.destroy();
     }
     const truckImage = this.add.image(0, 0, key);
     this.truckLight = this.add.rectangle(-14, 0, 8, 8, 0x1d7cf2, 1);
     this.truck = this.add.container(0, 0, [truckImage, this.truckLight]);
     this.truck.setDepth(35);
     this.truck.setScale(SCALE * 0.82);
   }
 
   onResize(gameSize) {
     this.overlay.setSize(gameSize.width, gameSize.height);
     this.successOverlay.setSize(gameSize.width, gameSize.height);
     this.promptText.setPosition(gameSize.width / 2, gameSize.height - 74);
     this.statusText.setPosition(gameSize.width / 2, gameSize.height - 34);
     this.fireCountText.setPosition(gameSize.width / 2, 78);
     if (this.audioHudText) this.audioHudText.setPosition(gameSize.width / 2, 112);
     if (this.uiCamera) this.uiCamera.setSize(gameSize.width, gameSize.height);
     if (this.ocean) this.ocean.setSize(gameSize.width, gameSize.height);
   }
 
   updateTargetSpeed() {
     const m = window.GAME_SPEED_MULTIPLIER ?? 1.0;
     if (this.controlMode === 'manual') return; // manual speed follows held keys
     if (this.state === 'driving') {
       this.targetSpeed = (this.promptResolved ? MAX_SPEED : BASE_SPEED) * m;
     } else if (this.state === 'waiting' || this.state === 'stopped') {
       this.targetSpeed = 0;
     }
   }
 
   onKeyDown(event) {
     this.initAudio();
     if (event.code === 'Space') return; // spraying lives in FireHoseScene now
     if (event.key === 's' || event.key === 'S') {
       this.toggleSiren();
       return;
     }
     if (event.key === 'l' || event.key === 'L') {
       this.toggleLights();
       return;
     }
     if (event.key === 'm' || event.key === 'M') {
       this.toggleMusic();
       return;
     }
     const held = KEY_TO_HEADING[event.key];
     if (held && !event.repeat) {
       this.heldHeadings = this.heldHeadings.filter((h) => h !== held);
       this.heldHeadings.push(held);
     }
     if (this.controlMode === 'manual') return; // stepManual reads heldHeadings
     const move = event.key === 'ArrowLeft' ? 'left' : event.key === 'ArrowRight' ? 'right' : event.key === 'ArrowUp' ? 'straight' : null;
     if (!move || !this.promptDir) return;
     if (move === this.promptDir) {
       this.promptResolved = true;
       this.promptDir = null;
       this.failVisible = false;
       this.overlay.setFillStyle(0xe63946, 0);
       if (this.state !== 'minigame') {
         this.state = 'driving';
         this.targetSpeed = MAX_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
       }
       this.statusText.setText('Great! Keep driving.');
       this.playSuccessSound();
       this.successOverlay.setAlpha(0.12);
       this.successUntil = this.time.now + 200;
       this.refreshDebug();
       return;
     }
     if (this.state === 'driving' || this.state === 'waiting') this.enterStopped();
   }
 
   onKeyUp(event) {
     const held = KEY_TO_HEADING[event.key];
     if (held) this.heldHeadings = this.heldHeadings.filter((h) => h !== held);
   }
 
   // Creates the SFX context and arms the shared unlock helper. Called from the
   // first key press. Nothing is audible yet: music waits for M and the siren
   // for S, so a browser that refuses audio outside a gesture has nothing to
   // refuse until the player actually asks for sound.
   initAudio() {
     if (this._audioInited) return;
     this._audioInited = true;
     try {
       this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
     } catch (_) {}
     this._audioUnlock = KGames.installAudioUnlock(() => [this.audioCtx], () => {
       this._audioReady = true;
       if (this.sirenOn) this._startSiren();
       this._refreshAudioHud();
     });
   }
 
   // ── Music (opt-in, key M) ─────────────────────────────────────────────────
   //
   // Tone.js builds its AudioContext when the script loads — long before any
   // gesture — so on a strict browser it is born suspended and stays that way
   // unless something resumes it from inside an activating event. toggleMusic()
   // is always called from a keydown (or the settings checkbox's click), so it
   // resumes there and arms a second unlock helper that keeps retrying from
   // every later gesture. _audioWatchdog() then catches the case where the
   // context came up but the transport did not.
   toggleMusic() {
     this.setMusicEnabled(!this.musicOn);
   }
 
   setMusicEnabled(on) {
     on = !!on;
     this.musicOn = on;
     this.initAudio();
     if (on) {
       // Inside the gesture: ask Tone directly, then arm the retry helper.
       try { const p = Tone.start(); if (p && p.catch) p.catch(() => {}); } catch (_) {}
       if (!this._musicUnlock) {
         this._musicUnlock = KGames.installAudioUnlock(() => [KGames.toneContext()], () => {
           this._musicStarted = true;
           this.initMusic();
           this._refreshAudioHud();
         });
       } else {
         this._musicUnlock.attempt();
       }
       if (this.bgGain) {
         this.bgGain.gain.value = MUSIC_GAIN;
         try { Tone.Transport.start(); } catch (_) {}
       }
     } else {
       if (this.bgGain) this.bgGain.gain.value = 0;
       try { Tone.Transport.pause(); } catch (_) {}
     }
     const box = document.getElementById('music-toggle');
     if (box && box.checked !== on) box.checked = on;
     this._refreshAudioHud();
   }
 
   // Runs ~once a second from update(). If the player asked for music but the
   // transport is not actually running, nudge it again — cheap insurance against
   // a browser that resumed the context late or suspended it behind our back.
   _audioWatchdog(now) {
     if (now < this._audioCheckAt) return;
     this._audioCheckAt = now + 1000;
     if (!this.musicOn) return;
     if (this._musicUnlock) this._musicUnlock.attempt();
     if (!this._musicStarted) return;
     try {
       if (Tone.Transport.state !== 'started') Tone.Transport.start();
     } catch (_) {}
     this._refreshAudioHud();
   }
 
   _musicAudible() {
     if (!this.musicOn || !this._musicStarted) return false;
     try {
       return KGames.toneContext().state === 'running' && Tone.Transport.state === 'started';
     } catch (_) { return false; }
   }
 
   _refreshAudioHud() {
     if (!this.audioHudText) return;
     const music = this.musicOn ? (this._musicAudible() ? '🎵 Music ON (M)' : '🎵 Music starting… (M)')
                                : '🔇 Music OFF — press M';
     const siren = this.sirenOn ? '🚨 Siren ON (S)' : '🔕 Siren OFF — press S';
     this.audioHudText.setText(music + '   ·   ' + siren);
   }
 
   initMusic() {
     if (this.bgGain) return;
     this.bgGain = new Tone.Gain(this.musicOn ? MUSIC_GAIN : 0).toDestination();
 
     this.bassSynth = new Tone.Synth({
       oscillator: { type: 'sawtooth' },
       envelope: { attack: 0.005, decay: 0.12, sustain: 0.18, release: 0.08 },
     }).connect(this.bgGain);
     this.bassSynth.volume.value = -14;
 
     this.chordSynth = new Tone.PolySynth(Tone.Synth, {
       oscillator: { type: 'square' },
       envelope: { attack: 0.008, decay: 0.1, sustain: 0.12, release: 0.05 },
     }).connect(this.bgGain);
     this.chordSynth.volume.value = -22;
 
     this.melodySynth = new Tone.Synth({
       oscillator: { type: 'square' },
       envelope: { attack: 0.005, decay: 0.07, sustain: 0.18, release: 0.04 },
     }).connect(this.bgGain);
     this.melodySynth.volume.value = -18;
 
     let step = 0;
     new Tone.Sequence((time, note) => {
       const i = step % FT_MELODY.length;
       step++;
       this.melodySynth.triggerAttackRelease(note, '8n', time);
       this.bassSynth.triggerAttackRelease(FT_BASS[i], '8n', time);
       if (FT_CHORDS[i]) this.chordSynth.triggerAttackRelease(FT_CHORDS[i], '8n', time);
     }, FT_MELODY, '8n').start(0);
 
     Tone.Transport.bpm.value = FT_BPM;
     if (this.musicOn) Tone.Transport.start();
   }
 
   toggleSiren() {
     this.sirenOn = !this.sirenOn;
     if (this.sirenOn) {
       if (this._audioUnlock) this._audioUnlock.attempt();
       this._startSiren();
     } else {
       this._stopSiren();
     }
     this._refreshAudioHud();
   }
 
   _startSiren() {
     // Before the contexts are running there's nothing to hear; sirenOn is kept
     // and the unlock callback in initAudio() starts the siren once audio is up.
     if (this.sirenOsc || !this.audioCtx || !this._audioReady) return;
     try {
       const ctx = this.audioCtx;
       const osc = ctx.createOscillator();
       osc.type = 'triangle';
       osc.frequency.value = 550;
 
       const lfo = ctx.createOscillator();
       lfo.type = 'sine';
       lfo.frequency.value = 0.7;
 
       const lfoGain = ctx.createGain();
       lfoGain.gain.value = 110;
       lfo.connect(lfoGain);
       lfoGain.connect(osc.frequency);
 
       const gainNode = ctx.createGain();
       gainNode.gain.value = this.sfxMuted ? 0 : 0.12;
       osc.connect(gainNode);
       gainNode.connect(ctx.destination);
 
       lfo.start();
       osc.start();
 
       this.sirenOsc = osc;
       this.sirenLfo = lfo;
       this.sirenGainNode = gainNode;
     } catch (_) {}
   }
 
   _stopSiren() {
     if (!this.sirenOsc) return;
     try {
       const ctx = this.audioCtx;
       if (ctx) {
         this.sirenGainNode.gain.setValueAtTime(this.sirenGainNode.gain.value, ctx.currentTime);
         this.sirenGainNode.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
         this.sirenOsc.stop(ctx.currentTime + 0.31);
         this.sirenLfo.stop(ctx.currentTime + 0.31);
       }
     } catch (_) {}
     this.sirenOsc = null;
     this.sirenLfo = null;
     this.sirenGainNode = null;
   }
 
   toggleLights() {
     this.lightsOn = !this.lightsOn;
     if (!this.lightsOn && this.truckLight) {
       this.truckLight.setFillStyle(0x1d7cf2);
     }
   }
 
   _updateLightsEffect() {
     if (!this.truckLight || !this.lightsOn) return;
     const phase = Math.floor(this.time.now / 166) % 2;
     this.truckLight.setFillStyle(phase === 0 ? 0xe63946 : 0x1d7cf2);
   }
 
   setSfxMuted(muted) {
     this.sfxMuted = muted;
     if (this.sirenGainNode && this.audioCtx) {
       this.sirenGainNode.gain.setValueAtTime(muted ? 0.001 : 0.12, this.audioCtx.currentTime);
     }
   }
 
   playSuccessSound() {
     this.initAudio();
     if (!this.audioCtx || this.sfxMuted) return;
     try {
       const ctx = this.audioCtx;
       const osc = ctx.createOscillator();
       const gain = ctx.createGain();
       osc.connect(gain);
       gain.connect(ctx.destination);
       osc.type = 'sine';
       osc.frequency.setValueAtTime(880, ctx.currentTime);
       osc.frequency.setValueAtTime(1100, ctx.currentTime + 0.08);
       gain.gain.setValueAtTime(0.12, ctx.currentTime);
       gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
       osc.start(ctx.currentTime);
       osc.stop(ctx.currentTime + 0.2);
     } catch (_) {}
   }
 
   playFailSound() {
     this.initAudio();
     if (!this.audioCtx || this.sfxMuted) return;
     try {
       const ctx = this.audioCtx;
       const osc = ctx.createOscillator();
       const gain = ctx.createGain();
       osc.connect(gain);
       gain.connect(ctx.destination);
       osc.type = 'square';
       osc.frequency.setValueAtTime(220, ctx.currentTime);
       osc.frequency.exponentialRampToValueAtTime(120, ctx.currentTime + 0.24);
       gain.gain.setValueAtTime(0.18, ctx.currentTime);
       gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);
       osc.start(ctx.currentTime);
       osc.stop(ctx.currentTime + 0.26);
     } catch (_) {}
   }
 
   enterStopped() {
     this.state = 'stopped';
     this.targetSpeed = 0;
     this.failVisible = true;
     this.warningUntil = this.time.now + 250;
     this.overlay.setFillStyle(0xe63946, 0.18);
     this.statusText.setText('Try the ' + arrowLabel(this.promptDir) + '.');
     this.playFailSound();
     this.refreshDebug();
   }
 
   enterWaiting() {
     if (this.state === 'stopped' || this.state === 'waiting') return;
     this.state = 'waiting';
     this.targetSpeed = 0;
     this.statusText.setText('Stop! Press ' + arrowLabel(this.promptDir));
     this.refreshDebug();
   }
 
   update(_, deltaMs) {
     const now = performance.now();
     const elapsed = now - this.lastStepTime;
     if (elapsed > 0) {
       this.step(Math.min(elapsed / 1000, 0.5));
       this.lastStepTime = now;
     }
     const dt = Math.min((deltaMs || 16) / 1000, 0.1);
     if (this.ocean) {
       this.ocean.tilePositionX += dt * 8;
       this.ocean.tilePositionY += dt * 4;
     }
     if (this.ambientReady) this._updateAmbient(dt);
     this._audioWatchdog(now);
   }
 
   step(dt) {
     if (this.state === 'minigame') return; // FireHoseScene owns the action
     if (this.controlMode === 'manual') { this.stepManual(dt); return; }
     const m = window.GAME_SPEED_MULTIPLIER ?? 1.0;
     if (this.speed < this.targetSpeed) this.speed = Math.min(this.targetSpeed, this.speed + ACCEL * m * dt);
     if (this.speed > this.targetSpeed) this.speed = Math.max(this.targetSpeed, this.speed - BRAKE * m * dt);
 
     const dx = this.segmentEnd.x - this.truck.x;
     const dy = this.segmentEnd.y - this.truck.y;
     const dist = Math.hypot(dx, dy);
 
     const promptTriggerDist = Math.max(MIN_PROMPT_DIST, this.speed * REACTION_TIME_S);
 
     // F6: stall watchdog
     if (this.state === 'driving' && this.targetSpeed > 0 && this.speed < 1 && !this.promptDir) {
       if (!this._stallSince) this._stallSince = this.time.now;
       if (this.time.now - this._stallSince > 2000) {
         this.targetSpeed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
         this._stallSince = 0;
       }
     } else {
       this._stallSince = 0;
     }
 
     let promptJustSet = false;
     if (this.phase === 'approach' && !this.promptDir && !this.promptResolved && this.currentStep && dist <= promptTriggerDist) {
       this.promptDir = this.currentStep.move;
       this.promptResolved = false;
       this.promptShownAt = this.time.now;
       promptJustSet = true;
       this.statusText.setText('Press the ' + arrowLabel(this.promptDir) + ' before the crossing.');
     }
 
     if (!promptJustSet && this.phase === 'approach' && this.promptDir && !this.promptResolved
         && dist <= STOP_LINE_DIST + 1.0) {
       this.enterWaiting();
     }
 
     if (dist > 0.001 && this.speed > 0) {
       let travel = Math.min(dist, this.speed * dt);
       if (this.phase === 'approach' && this.promptDir && !this.promptResolved) {
         travel = Math.min(travel, Math.max(0, dist - STOP_LINE_DIST));
       }
       this.truck.x += (dx / dist) * travel;
       this.truck.y += (dy / dist) * travel;
       this.debugDistance += travel;
     }
 
     // Fire proximity → enter firefighting
     if (this.fireMode && this.fireCell && this.state === 'driving') {
       const fdx = this.fireCell.x * CELL_SIZE - this.truck.x;
       const fdy = this.fireCell.y * CELL_SIZE - this.truck.y;
       if (Math.hypot(fdx, fdy) < FIRE_TRIGGER_DIST) {
         this.enterFirefighting();
         return;
       }
     }
     // Always animate fire while driving toward it
     if (this.fireGraphics) this._updateFireAnimation(this.time.now);
 
     const remaining = Math.hypot(this.segmentEnd.x - this.truck.x, this.segmentEnd.y - this.truck.y);
     if (remaining <= 0.8 * SCALE) {
       this.truck.setPosition(this.segmentEnd.x, this.segmentEnd.y);
       this.advancePhase();
     }
 
     if (this.failVisible && this.state !== 'stopped') {
       this.failVisible = false;
       this.overlay.setFillStyle(0xe63946, 0);
     }
     if (this.state === 'stopped' && this.time.now > this.warningUntil) {
       this.overlay.setFillStyle(0xe63946, 0.12);
     }
 
     if (this.phase === 'exit') {
       let diff = this.targetRotation - this.truck.rotation;
       while (diff > Math.PI) diff -= 2 * Math.PI;
       while (diff < -Math.PI) diff += 2 * Math.PI;
       const rotateSpeed = 5;
       if (Math.abs(diff) > 0.005) {
         this.truck.rotation += Math.sign(diff) * Math.min(Math.abs(diff), rotateSpeed * dt);
       } else {
         this.truck.rotation = this.targetRotation;
       }
     } else {
       this.truck.rotation = this.rotationForHeading(this.heading);
     }
 
     if (this.time.now > this.successUntil && this.successOverlay.alpha > 0) {
       const newAlpha = Math.max(0, this.successOverlay.alpha - 2 * dt);
       this.successOverlay.setAlpha(newAlpha);
     }
 
     this._updateLightsEffect();
     this.refreshDebug();
   }
 
   // ── Manual control mode ────────────────────────────────────────────────
   // The truck drives only while an arrow key is held, in that key's compass
   // direction, snapping cell-centre to cell-centre along the road graph.
   // Reversing (opposite key) is allowed mid-segment; turns happen at cell
   // centres where the road graph has an exit that way.
 
   setControlMode(mode) {
     if (mode !== 'manual' && mode !== 'guided') return;
     if (mode === this.controlMode) return;
     this.controlMode = mode;
     if (this.state === 'minigame') return; // applied when the minigame resumes us
     if (mode === 'manual') this._enterManualMode();
     else this._enterGuidedMode();
   }
 
   _nearestRoadCell() {
     const gx = Math.round(this.truck.x / CELL_SIZE);
     const gy = Math.round(this.truck.y / CELL_SIZE);
     const cell = this.cellAt(gx, gy);
     if (cell && cell.type === FT.CELL_TYPES.ROAD) return cell;
     for (const card of ['N', 'E', 'S', 'W']) {
       const n = this.cellAt(gx + FT.DIRS[card].dx, gy + FT.DIRS[card].dy);
       if (n && n.type === FT.CELL_TYPES.ROAD) return n;
     }
     return this.island.grid[this.island.routeStart.y][this.island.routeStart.x];
   }
 
   _enterManualMode() {
     this.promptDir = null;
     this.promptResolved = false;
     this.failVisible = false;
     this.overlay.setFillStyle(0xe63946, 0);
     this.manualCell = this._nearestRoadCell();
     this.manualTarget = null;
     const p = this.worldPoint(this.manualCell.x, this.manualCell.y);
     this.truck.setPosition(p.x, p.y);
     this.state = 'driving';
     this.targetSpeed = 0;
     this.speed = 0;
     this._manualLastDist = this.fireDistances ? this.fireDistances.get(this.manualCell) : null;
     this.statusText.setText('Hold an arrow key to drive to the fire!');
     this._updateManualHint();
     this.refreshDebug();
   }
 
   _enterGuidedMode() {
     this.heldHeadings = [];
     this.manualTarget = null;
     this.manualHintHeading = null;
     const fromCell = this._nearestRoadCell();
     const p = this.worldPoint(fromCell.x, fromCell.y);
     this.truck.setPosition(p.x, p.y);
     let routed = false;
     if (this.fireMode && this.fireCell) {
       const targetCell = this.island.grid[this.fireCell.y][this.fireCell.x];
       routed = this._applyRouteTo(fromCell, targetCell);
     }
     if (!routed) this.segmentEnd = { x: this.truck.x, y: this.truck.y };
     this.promptDir = null;
     this.promptResolved = false;
     this.state = 'driving';
     this.targetSpeed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
     this.statusText.setText('Watch for the next arrow.');
     this.refreshDebug();
   }
 
   stepManual(dt) {
     const m = window.GAME_SPEED_MULTIPLIER ?? 1.0;
     if (!this.manualCell) this._enterManualMode();
     const desired = this.heldHeadings.length ? this.heldHeadings[this.heldHeadings.length - 1] : null;
 
     if (desired) {
       if (!this.manualTarget) {
         this._manualDepart(desired);
       } else if (desired === FT.OPPOSITE[this.heading]) {
         // Reverse mid-segment: head back toward the cell we just left.
         const behind = this.manualCell;
         this.manualCell = this.manualTarget;
         this.manualTarget = behind;
         this.heading = desired;
         this.targetRotation = this.rotationForHeading(desired);
       }
     }
 
     this.targetSpeed = (desired && this.manualTarget) ? MAX_SPEED * m : 0;
     if (this.speed < this.targetSpeed) this.speed = Math.min(this.targetSpeed, this.speed + ACCEL * m * dt);
     if (this.speed > this.targetSpeed) this.speed = Math.max(this.targetSpeed, this.speed - BRAKE * m * dt);
 
     if (this.manualTarget && this.speed > 0) {
       const end = this.worldPoint(this.manualTarget.x, this.manualTarget.y);
       const dx = end.x - this.truck.x;
       const dy = end.y - this.truck.y;
       const dist = Math.hypot(dx, dy);
       const travel = Math.min(dist, this.speed * dt);
       if (dist > 0.001) {
         this.truck.x += (dx / dist) * travel;
         this.truck.y += (dy / dist) * travel;
         this.debugDistance += travel;
       }
       if (dist - travel <= 0.8 * SCALE) {
         this.truck.setPosition(end.x, end.y);
         this._manualArrive();
       }
     }
 
     // Fire proximity → enter firefighting
     if (this.fireMode && this.fireCell && this.state === 'driving') {
       const fdx = this.fireCell.x * CELL_SIZE - this.truck.x;
       const fdy = this.fireCell.y * CELL_SIZE - this.truck.y;
       if (Math.hypot(fdx, fdy) < FIRE_TRIGGER_DIST) {
         this.enterFirefighting();
         return;
       }
     }
     if (this.fireGraphics) this._updateFireAnimation(this.time.now);
 
     let diff = this.targetRotation - this.truck.rotation;
     while (diff > Math.PI) diff -= 2 * Math.PI;
     while (diff < -Math.PI) diff += 2 * Math.PI;
     if (Math.abs(diff) > 0.005) {
       this.truck.rotation += Math.sign(diff) * Math.min(Math.abs(diff), 5 * dt);
     } else {
       this.truck.rotation = this.targetRotation;
     }
 
     if (this.failVisible && this.time.now > this.warningUntil) {
       this.failVisible = false;
       this.overlay.setFillStyle(0xe63946, 0);
     }
     if (this.time.now > this.successUntil && this.successOverlay.alpha > 0) {
       this.successOverlay.setAlpha(Math.max(0, this.successOverlay.alpha - 2 * dt));
     }
 
     this._updateLightsEffect();
     this.refreshDebug();
   }
 
   _manualDepart(desired) {
     const card = FT.HEADING_TO_CARD[desired];
     const cell = this.manualCell;
     if (cell.exits[card]) {
       const next = this.cellAt(cell.x + FT.DIRS[card].dx, cell.y + FT.DIRS[card].dy);
       if (next && next.type === FT.CELL_TYPES.ROAD) {
         this.manualTarget = next;
         this.heading = desired;
         this.targetRotation = this.rotationForHeading(desired);
         return;
       }
     }
     this.statusText.setText('No road that way! Try another arrow.');
   }
 
   _manualArrive() {
     this.manualCell = this.manualTarget;
     this.manualTarget = null;
     if (this.fireMode && this.fireDistances) {
       const d = this.fireDistances.get(this.manualCell);
       if (d != null && this._manualLastDist != null) {
         if (d > this._manualLastDist) this._flagWrongWay();
         else if (d < this._manualLastDist) this.statusText.setText('Great! Keep going!');
       }
       if (d != null) this._manualLastDist = d;
     }
     this._updateManualHint();
   }
 
   _flagWrongWay() {
     this.failVisible = true;
     this.warningUntil = this.time.now + 500;
     this.overlay.setFillStyle(0xe63946, 0.15);
     this.statusText.setText('Wrong way! Turn around — the fire is the other way!');
     this.playFailSound();
   }
 
   _updateManualHint() {
     if (!this.fireMode || !this.fireDistances || !this.manualCell) {
       this.manualHintHeading = null;
       return;
     }
     const card = FT.bestRoadDirection(this.island.grid, this.manualCell, this.fireDistances);
     this.manualHintHeading = card ? FT.CARD_TO_HEADING[card] : null;
   }
 
   advancePhase() {
     if (this.phase === 'approach') {
       if (this.promptDir && !this.promptResolved) return;
       if (!this.currentStep) {
         // Straight-line final segment to fire cell — fire trigger handles the rest
         this.phase = 'exit';
         this.state = 'driving';
         this.targetSpeed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
         return;
       }
       this.heading = this.currentStep.headingOut;
       this.segmentEnd = this.worldPoint(this.currentStep.exitX, this.currentStep.exitY);
       this.targetRotation = this.rotationForHeading(this.heading);
       this.phase = 'exit';
       this.state = 'driving';
       this.targetSpeed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
       return;
     }
 
     this.routeIndex += 1;
     this.extendRouteIfNeeded();
     this.currentStep = this.route[this.routeIndex];
     if (!this.currentStep) {
       if (this.fireMode && this.fireCell) {
         this.segmentEnd = { x: this.fireCell.x * CELL_SIZE, y: this.fireCell.y * CELL_SIZE };
         this.phase = 'approach';
         this.promptDir = null;
       }
       return;
     }
     this.heading = this.currentStep.headingIn;
     this.segmentEnd = this.worldPoint(this.currentStep.x, this.currentStep.y);
     this.phase = 'approach';
     this.promptDir = null;
     this.promptResolved = false;
     this.promptShownAt = 0;
     this.state = 'driving';
     this.targetSpeed = BASE_SPEED * (window.GAME_SPEED_MULTIPLIER ?? 1.0);
     this.statusText.setText('Watch for the next arrow.');
   }
 
   extendRouteIfNeeded() {
     if (this.fireMode) return;
     if (this.routeIndex < this.route.length - 12) return;
     const extension = FT.extendRouteOnGraph(this.island, this.route, ROUTE_EXTENSION_COUNT);
     this.route.push(...extension);
   }
 
   rotationForHeading(heading) {
     if (heading === 'east') return 0;
     if (heading === 'south') return Math.PI / 2;
     if (heading === 'west') return Math.PI;
     return -Math.PI / 2;
   }
 
   refreshDebug() {
     this.truckX = this.truck ? this.truck.x : 0;
     this.truckY = this.truck ? this.truck.y : 0;
     this.debugDistancePx = this.debugDistance;
     this.fps = this.game.loop.actualFps;
     if (this.fpsText) this.fpsText.setText(`FPS: ${this.fps.toFixed(0)}`);
     if (this.controlMode === 'manual') {
       this.promptText.setText(this.manualHintHeading ? headingArrowLabel(this.manualHintHeading) : '');
     } else {
       this.promptText.setText(this.promptDir ? arrowLabel(this.promptDir) : '');
     }
   }
 
   cellAt(x, y) {
     return this.island && this.island.grid[y] && this.island.grid[y][x] ? this.island.grid[y][x] : null;
   }
 
   snapTruckToRouteIndex(index) {
     if (!this.route[index]) throw new Error('Invalid route index: ' + index);
 
     this.routeIndex = index;
     this.currentStep = this.route[index];
     this.heading = this.currentStep.headingIn;
     this.segmentEnd = this.worldPoint(this.currentStep.x, this.currentStep.y);
     this.phase = 'approach';
     this.promptDir = this.currentStep.move;
     this.promptResolved = false;
     this.state = 'driving';
     this.targetSpeed = 0;
     this.speed = 0;
     this.targetRotation = this.rotationForHeading(this.heading);
 
     const pos = this.worldPoint(this.currentStep.approachX, this.currentStep.approachY);
     this.truck.setPosition(pos.x, pos.y);
     this.truck.rotation = this.targetRotation;
     this.refreshDebug();
   }
 
   _setupFireRoute(island, fromCell) {
     const rng = FT.createSeededRng(Date.now());
     const targetDistance = window.GAME_FIRE_DISTANCE ?? 20;
     const variance = window.GAME_FIRE_VARIANCE ?? 5;
     const dest = FT.pickFireDestination(island, rng, { fromCell, targetDistance, variance });
     if (!dest) return false;
     this.fireCell = dest.roadCell;
     this.fireBuildingCell = dest.buildingCell;
 
     const targetCell = island.grid[this.fireCell.y][this.fireCell.x];
     if (!this._applyRouteTo(fromCell, targetCell)) {
       this.fireCell = null;
       this.fireBuildingCell = null;
       return false;
     }
     this.fireDistances = FT.bfsRoadDistances(island.grid, targetCell);
     return true;
   }
 
   _applyRouteTo(fromCell, targetCell) {
     const island = this.island;
     const cellPath = FT.bfsRoadPath(island.grid, fromCell, targetCell);
     if (!cellPath) return false;
 
     const route = FT.pathToRouteSteps(island.grid, cellPath, 0);
     this.route = route;
     this.routeIndex = 0;
     this.currentStep = route[0] ?? null;
     this.phase = 'approach';
 
     if (route.length === 0) {
       this.segmentEnd = { x: targetCell.x * CELL_SIZE, y: targetCell.y * CELL_SIZE };
       if (cellPath.length >= 2) this.heading = FT.headingFromTo(cellPath[0], cellPath[1]);
     } else {
       this.heading = this.currentStep.headingIn;
       this.segmentEnd = this.worldPoint(this.currentStep.x, this.currentStep.y);
     }
     this.targetRotation = this.rotationForHeading(this.heading);
     return true;
   }
 
   _updateFireCounter() {
     this.fireCountText.setText(`🔥 ${this.firesExtinguished} / ${FIRES_TO_WIN}`);
   }
 
   _initFireDestination() {
     const island = this.island;
     const fromCell = island.grid[island.routeStart.y][island.routeStart.x];
     const ok = this._setupFireRoute(island, fromCell);
     if (!ok) return;
     this._createFireGraphics();
     this.fireMode = true;
   }
 
   _createFireGraphics() {
     if (this.fireGraphics) { this.fireGraphics.destroy(); }
     this.fireGraphics = this.add.graphics();
     this.fireGraphics.setDepth(10);
     this.uiCamera.ignore(this.fireGraphics);
 
     const cx = this.fireBuildingCell.x * CELL_SIZE;
     const cy = this.fireBuildingCell.y * CELL_SIZE;
 
     if (this.burnOverlay) { this.burnOverlay.destroy(); }
     this.burnOverlay = this.add.image(cx, cy, 'burning-overlay').setScale(SCALE).setDepth(9.5);
     this.uiCamera.ignore(this.burnOverlay);
 
     if (this.fireGlow) { this.fireGlow.destroy(); }
     this.fireGlow = this.add.image(cx, cy + CELL_SIZE * 0.1, 'glow')
       .setScale(SCALE * 1.4).setDepth(9.7).setBlendMode(Phaser.BlendModes.ADD);
     this.uiCamera.ignore(this.fireGlow);
 
     this._startSmoke();
   }
 
   _startSmoke() {
     if (this._smokeTimer) return;
     this._smokeTimer = this.time.addEvent({ delay: 350, loop: true, callback: () => this._emitSmoke() });
   }
 
   _stopSmoke() {
     if (this._smokeTimer) { this._smokeTimer.remove(false); this._smokeTimer = null; }
   }
 
   _emitSmoke() {
     if (!this.fireBuildingCell) return;
     const cx = this.fireBuildingCell.x * CELL_SIZE + (Math.random() - 0.5) * CELL_SIZE * 0.25;
     const cy = this.fireBuildingCell.y * CELL_SIZE - CELL_SIZE * 0.1;
     const puff = this.add.image(cx, cy, 'smoke-puff').setScale(SCALE * 0.6).setAlpha(0.7).setDepth(12);
     this.uiCamera.ignore(puff);
     this.tweens.add({
       targets: puff,
       x: cx - CELL_SIZE * 0.4, y: cy - CELL_SIZE * 0.95,
       scale: SCALE * 1.4, alpha: 0,
       duration: 1600, ease: 'Sine.easeOut',
       onComplete: () => puff.destroy(),
     });
   }
 
   _updateFireAnimation(t) {
     if (!this.fireGraphics || !this.fireBuildingCell) return;
     const gfx = this.fireGraphics;
     gfx.clear();
     const cx = this.fireBuildingCell.x * CELL_SIZE;
     const cy = this.fireBuildingCell.y * CELL_SIZE;
     const baseY = cy + CELL_SIZE * 0.36;
     const scale = 1; // full blaze until the hose minigame puts it out
 
     // Pulsing glow underneath.
     if (this.fireGlow) {
       const pulse = 1.3 + Math.sin(t * 0.006) * 0.18;
       this.fireGlow.setScale(SCALE * 1.4 * pulse * (0.5 + scale * 0.5));
       this.fireGlow.setAlpha(0.6 * (0.3 + scale * 0.7));
     }
 
     // Three layered flames (outer orange, mid red, inner yellow) each flickering
     // on its own phase, plus a few rising embers.
     const layers = [
       { color: 0xff7a18, half: 0.24, h: 0.78, phase: 0.0 },
       { color: 0xff3b1f, half: 0.17, h: 0.62, phase: 1.7 },
       { color: 0xffd23f, half: 0.10, h: 0.44, phase: 3.1 },
     ];
     for (const L of layers) {
       const half = CELL_SIZE * L.half * scale;
       for (let i = 0; i < 3; i++) {
         const offset = Math.sin(t * 0.004 + i * 1.9 + L.phase) * CELL_SIZE * 0.10 * scale;
         const h = (CELL_SIZE * L.h + Math.sin(t * 0.006 + i * 2.3 + L.phase) * CELL_SIZE * 0.16) * scale;
         gfx.fillStyle(L.color, 0.78 + Math.sin(t * 0.005 + i + L.phase) * 0.2);
         gfx.fillTriangle(
           cx + offset - half, baseY,
           cx + offset + half, baseY,
           cx + offset, baseY - h
         );
       }
     }
     // Embers
     gfx.fillStyle(0xffd76e, 0.9);
     for (let i = 0; i < 5; i++) {
       const ex = cx + Math.sin(t * 0.003 + i * 2.1) * CELL_SIZE * 0.28 * scale;
       const ey = baseY - ((t * 0.12 + i * 90) % (CELL_SIZE * 0.9)) * scale;
       gfx.fillCircle(ex, ey, 3 * scale + 1);
     }
   }
 
   // The truck has arrived at the fire: hand off to the street-level hose
   // minigame. This scene pauses (its HUD and world stay rendered underneath,
   // fully covered by the minigame backdrop) until _onMinigameComplete.
   enterFirefighting() {
     this.state = 'minigame';
     this.targetSpeed = 0;
     this.speed = 0;
     this.promptDir = null;
     // Keyups delivered while this scene is paused are lost — drop held keys.
     this.heldHeadings = [];
     this.manualTarget = null;
     this.statusText.setText('You made it! Put out the fire!');
     this.promptText.setText('');
     this.scene.launch('FireHoseScene', { fireNumber: this.firesExtinguished });
     this.scene.pause();
   }
 
   // Called by FireHoseScene right after it resumes this scene.
   _onMinigameComplete() {
     if (!this.fireBuildingCell) return;
     this.lastStepTime = performance.now();
     this.firesExtinguished += 1;
     this._updateFireCounter();
     this.successOverlay.setAlpha(0.12);
     this.successUntil = this.time.now + 200;
     this.playSuccessSound();
     this._stopSmoke();
     if (this.fireGraphics) { this.fireGraphics.destroy(); this.fireGraphics = null; }
     if (this.fireGlow) { this.fireGlow.destroy(); this.fireGlow = null; }
     // Leave a brief scorch mark that fades out.
     if (this.burnOverlay) {
       const ov = this.burnOverlay;
       this.burnOverlay = null;
       this.tweens.add({ targets: ov, alpha: 0, duration: 800, onComplete: () => ov.destroy() });
     }
     this.fireCell = null;
     this.fireBuildingCell = null;
     this.statusText.setText('Fire out! Great job!');
 
     // Wall-clock timeouts (not scene delayedCalls): headless/throttled
     // browsers can starve the scene clock, and these transitions must happen.
     if (this.firesExtinguished >= FIRES_TO_WIN) {
       setTimeout(() => {
         if (this.scene && this.scene.isActive()) this.scene.start('FireTruckEndScene', { musicOn: this.musicOn });
       }, 900);
       return;
     }
 
     setTimeout(() => {
       if (!this.scene || !this.scene.isActive() || this.state !== 'minigame') return;
       const island = this.island;
       const mult = window.GAME_SPEED_MULTIPLIER ?? 1.0;
       const truckX = Math.round(this.truck.x / CELL_SIZE);
       const truckY = Math.round(this.truck.y / CELL_SIZE);
       const fromCell = (island.grid[truckY] && island.grid[truckY][truckX] &&
         island.grid[truckY][truckX].type === FT.CELL_TYPES.ROAD)
         ? island.grid[truckY][truckX]
         : island.grid[island.routeStart.y][island.routeStart.x];
 
       const ok = this._setupFireRoute(island, fromCell);
       if (!ok) {
         this.fireMode = false;
         this.fireDistances = null;
         this.phase = 'approach';
         this.promptDir = null;
         this.promptResolved = false;
         this.state = 'driving';
         this.targetSpeed = BASE_SPEED * mult;
         if (this.controlMode === 'manual') this._enterManualMode();
         else this.statusText.setText('Watch for the next arrow.');
         return;
       }
       this.phase = 'approach';
       this.promptDir = null;
       this.promptResolved = false;
       this.state = 'driving';
       this.targetSpeed = BASE_SPEED * mult;
       if (this.controlMode === 'manual') this._enterManualMode();
       else this.statusText.setText('Watch for the next arrow.');
       this._createFireGraphics();
     }, 600);
   }
 
   shutdown() {
     if (this.fallbackTimer) {
       clearInterval(this.fallbackTimer);
       this.fallbackTimer = null;
     }
     this._stopSiren();
     this._stopSmoke();
     if (this._audioUnlock) { this._audioUnlock.dispose(); this._audioUnlock = null; }
     if (this._musicUnlock) { this._musicUnlock.dispose(); this._musicUnlock = null; }
     if (this.bgGain) { try { Tone.Transport.stop(); } catch (_) {} }
     if (this.fireGraphics) { this.fireGraphics.destroy(); this.fireGraphics = null; }
     if (this.fireGlow) { this.fireGlow.destroy(); this.fireGlow = null; }
     if (this.burnOverlay) { this.burnOverlay.destroy(); this.burnOverlay = null; }
     this.ambientReady = false;
     if (this._birdTimer) { this._birdTimer.remove(false); this._birdTimer = null; }
   }
 }
 
 function colorForCell(cell) {
   if (!cell) return WATER_COLOR;
   if (cell.type === FT.CELL_TYPES.WATER) return WATER_COLOR;
   if (cell.type === FT.CELL_TYPES.BEACH) return BEACH_COLOR;
   if (cell.type === FT.CELL_TYPES.ROAD) return ASPHALT_COLOR;
   return BUILDING_PALETTE[Math.abs((cell.x * 13 + cell.y * 17) % BUILDING_PALETTE.length)];
 }
 
 // Base ground colour under a cell (building/park footprints read as pavement).
 function groundColorForCell(cell) {
   if (!cell) return WATER_COLOR;
   if (cell.type === FT.CELL_TYPES.WATER) return WATER_COLOR;
   if (cell.type === FT.CELL_TYPES.BEACH) return BEACH_COLOR;
   if (cell.type === FT.CELL_TYPES.ROAD) return ASPHALT_COLOR;
   return SIDEWALK_COLOR;
 }
 
 function lighten(color, amt) {
   const c = Phaser.Display.Color.IntegerToColor(color);
   return Phaser.Display.Color.GetColor(
     Math.min(255, c.red + amt), Math.min(255, c.green + amt), Math.min(255, c.blue + amt));
 }
 
 function darken(color, amt) {
   const c = Phaser.Display.Color.IntegerToColor(color);
   return Phaser.Display.Color.GetColor(
     Math.max(0, c.red - amt), Math.max(0, c.green - amt), Math.max(0, c.blue - amt));
 }
 
 // ── Street-level hose minigame ───────────────────────────────────────────────
 // Launched (over the paused driving scene) when the truck reaches the fire.
 // A building facade fills the view with several windows ablaze; arrow keys
 // steer an aim reticle, holding SPACE sprays water from the truck's ladder
 // nozzle. Dousing a window long enough quenches it — a resident (or cat!)
 // appears waving thanks. When every window is out the crowd celebrates and
 // control returns to the driving scene.
 const HOSE_QUENCH_S = 1.4;
 
 class FireHoseScene extends Phaser.Scene {
   constructor() {
     super({ key: 'FireHoseScene' });
   }
 
   init(data) {
     this.fireNumber = (data && data.fireNumber) || 0;
     this.done = false;
     this.spraying = false;
     this.hoverFire = null;
     this.waterNoise = null;
     this._steamAccum = 0;
     this._catUsed = false;
   }
 
   create() {
     const W = this._W = this.scale.width;
     const H = this._H = this.scale.height;
     this.drive = this.scene.get('FireTruckScene');
     this.rng = FT.createSeededRng(((Date.now() & 0xffff) + 1) * (this.fireNumber + 3));
 
     bakePeopleTextures(this);
     bakeSideTruckTexture(this);
     bakeLadderTexture(this);
     bakeCritterTextures(this);
     bakeFxTextures(this);
     if (window.KGames && KGames.bakeFireworksAtlas) {
       try { KGames.bakeFireworksAtlas(this); } catch (_) {}
     }
 
     this.streetY = H * 0.76;
     this._drawBackdrop(W, H);
     this._buildFacade(W, H);
     this._spawnCrowd(W, H);
     this._placeTruck(W, H);
 
     this.fireGfx = this.add.graphics().setDepth(20);
     this.waterGfx = this.add.graphics().setDepth(30);
     this.ringGfx = this.add.graphics().setDepth(41);
     this.lightGfx = this.add.graphics().setDepth(27);
 
     // Aim reticle: white outer ring + yellow inner ring + crosshair ticks.
     // The green ring lights up when the aim is over a burning window.
     this.aimX = (this.bldX0 + this.bldX1) / 2;
     this.aimY = (this.bldTop + this.streetY) / 2;
     const retGfx = this.add.graphics();
     retGfx.lineStyle(4, 0xffffff, 0.9); retGfx.strokeCircle(0, 0, 26);
     retGfx.lineStyle(3, 0xffd23f, 1); retGfx.strokeCircle(0, 0, 20);
     retGfx.lineStyle(4, 0xffffff, 0.9);
     retGfx.lineBetween(-34, 0, -12, 0); retGfx.lineBetween(12, 0, 34, 0);
     retGfx.lineBetween(0, -34, 0, -12); retGfx.lineBetween(0, 12, 0, 34);
     this.hoverRing = this.add.graphics();
     this.hoverRing.lineStyle(5, 0x7dff9a, 0.95);
     this.hoverRing.strokeCircle(0, 0, 30);
     this.hoverRing.setVisible(false);
     this.reticle = this.add.container(this.aimX, this.aimY, [retGfx, this.hoverRing]).setDepth(40);
     this.tweens.add({
       targets: this.reticle, scale: { from: 0.92, to: 1.08 },
       duration: 500, yoyo: true, repeat: -1, ease: 'Sine.easeInOut',
     });
 
     this.cursors = this.input.keyboard.createCursorKeys();
 
     this.hudText = this.add.text(W / 2, 66, '', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '24px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 7,
       align: 'center',
     }).setOrigin(0.5, 0).setDepth(60);
     this._updateHud();
 
     this._smokeTimer = this.time.addEvent({ delay: 320, loop: true, callback: () => this._emitFireSmoke() });
 
     // Headless/throttled browsers can starve RAF (same workaround as the
     // driving scene): gameplay-critical logic lives in _step, driven from
     // update() and from this wall-clock fallback. _finishAtWall is checked
     // there too, so the return-to-driving handoff never relies on the scene
     // clock.
     this._finishAtWall = 0;
     this._finished = false;
     this.lastStepTime = performance.now();
     this.fallbackTimer = setInterval(() => {
       const now = performance.now();
       if (now - this.lastStepTime > 250) {
         this._step(Math.min((now - this.lastStepTime) / 1000, 0.5));
         this.lastStepTime = now;
       }
     }, 200);
 
     window.__FT_HOSE_SCENE__ = this;
     this.events.on('shutdown', this._shutdown, this);
     this.events.on('destroy', this._shutdown, this);
   }
 
   _drawBackdrop(W, H) {
     const g = this.add.graphics().setDepth(0);
     // Sky: cool blue up top warming toward the horizon.
     g.fillGradientStyle(0x8fe0f2, 0x8fe0f2, 0xffe3a3, 0xffd08a, 1);
     g.fillRect(0, 0, W, this.streetY);
     g.fillStyle(0xfff2b0, 1); g.fillCircle(W * 0.07, H * 0.10, H * 0.045);
     // Distant pastel skyline peeking out on both sides of the facade.
     const silhouettes = [
       [0.00, 0.13, 0.34], [0.08, 0.09, 0.26], [0.84, 0.10, 0.30], [0.92, 0.09, 0.38],
     ];
     silhouettes.forEach(([fx, fw, fh], i) => {
       const color = lighten(BUILDING_PALETTE[(i * 2 + 1) % BUILDING_PALETTE.length], 40);
       g.fillStyle(color, 1);
       g.fillRect(W * fx, this.streetY - H * fh, W * fw, H * fh);
       g.fillStyle(0xffffff, 0.35);
       for (let wy = this.streetY - H * fh + 12; wy < this.streetY - 12; wy += 22) {
         for (let wx = W * fx + 8; wx < W * (fx + fw) - 10; wx += 20) g.fillRect(wx, wy, 8, 10);
       }
     });
     // Sidewalk band + curb.
     g.fillStyle(SIDEWALK_COLOR, 1); g.fillRect(0, this.streetY, W, H * 0.07);
     g.fillStyle(darken(SIDEWALK_COLOR, 40), 1); g.fillRect(0, this.streetY + H * 0.07 - 3, W, 3);
     // Road with the painted bike lane nearest the curb.
     g.fillStyle(ASPHALT_COLOR, 1); g.fillRect(0, this.streetY + H * 0.07, W, H * 0.23);
     g.fillStyle(BIKE_LANE_COLOR, 0.6); g.fillRect(0, this.streetY + H * 0.075, W, H * 0.035);
     g.fillStyle(0xffffff, 0.7);
     for (let dx = 8; dx < W; dx += 46) g.fillRect(dx, this.streetY + H * 0.075 + H * 0.035, 22, 3);
     g.fillStyle(STRIPE_COLOR, 0.9);
     for (let dx = 0; dx < W; dx += 70) g.fillRect(dx, this.streetY + H * 0.16, 38, 5);
     // Street palms framing the block.
     drawSidePalm(g, W * 0.075, this.streetY + 6, H * 0.17);
     drawSidePalm(g, W * 0.945, this.streetY + 6, H * 0.20);
   }
 
   _buildFacade(W, H) {
     const facade = FT.buildFacade(this.rng, { fireNumber: this.fireNumber });
     const x0 = this.bldX0 = W * 0.18;
     const x1 = this.bldX1 = W * 0.82;
     const top = this.bldTop = H * 0.10;
     const bw = x1 - x0;
     const bh = this.streetY - top;
     const color = BUILDING_PALETTE[Math.floor(this.rng.next() * BUILDING_PALETTE.length)];
     const g = this.add.graphics().setDepth(5);
 
     // Body with drop shadow, outline, parapet.
     g.fillStyle(0x000000, 0.12);
     g.fillRoundedRect(x0 + 10, top + 10, bw, bh, { tl: 14, tr: 14, bl: 0, br: 0 });
     g.fillStyle(color, 1);
     g.fillRoundedRect(x0, top, bw, bh, { tl: 14, tr: 14, bl: 0, br: 0 });
     g.lineStyle(4, darken(color, 50), 1);
     g.strokeRoundedRect(x0, top, bw, bh, { tl: 14, tr: 14, bl: 0, br: 0 });
     g.fillStyle(darken(color, 25), 1);
     g.fillRoundedRect(x0 - 8, top - 6, bw + 16, 18, 8);
 
     // Entrance: awning-striped doorway at street level.
     const doorW = Math.min(bw * 0.16, 96);
     const doorH = H * 0.09;
     const doorX = (x0 + x1) / 2 - doorW / 2;
     g.fillStyle(darken(color, 60), 1);
     g.fillRoundedRect(doorX, this.streetY - doorH, doorW, doorH, { tl: 10, tr: 10, bl: 0, br: 0 });
     g.fillStyle(0xffe9a8, 0.9);
     g.fillRoundedRect(doorX + doorW * 0.2, this.streetY - doorH * 0.85, doorW * 0.6, doorH * 0.55, 6);
     const awnY = this.streetY - doorH - 14;
     for (let i = 0; i < 6; i++) {
       g.fillStyle(i % 2 ? 0xffffff : 0xe63946, 1);
       g.fillRect(doorX - 8 + i * ((doorW + 16) / 6), awnY, (doorW + 16) / 6, 14);
     }
 
     // Window grid (fire windows start dark + ablaze; the rest get lit/curtain
     // interiors and the odd sill plant).
     const cols = facade.cols, rows = facade.rows;
     const areaX = x0 + bw * 0.07, areaW = bw * 0.86;
     const areaY = top + 32;
     const areaH = (this.streetY - doorH - 22) - areaY;
     const gapX = areaW * 0.06, gapY = areaH * 0.10;
     const winW = (areaW - gapX * (cols - 1)) / cols;
     const winH = (areaH - gapY * (rows - 1)) / rows;
     const fireSet = new Set(facade.fires.map((f) => f.index));
     this.windows = [];
     for (let r = 0; r < rows; r++) {
       for (let c = 0; c < cols; c++) {
         const index = r * cols + c;
         const wx = areaX + c * (winW + gapX);
         const wy = areaY + r * (winH + gapY);
         g.fillStyle(darken(color, 45), 1);
         g.fillRoundedRect(wx - 5, wy - 5, winW + 10, winH + 10, 6);
         g.fillStyle(darken(color, 30), 1);
         g.fillRect(wx - 9, wy + winH + 5, winW + 18, 6);
         const burning = fireSet.has(index);
         if (burning) {
           g.fillStyle(0x2a1a12, 1);
           g.fillRect(wx, wy, winW, winH);
         } else {
           g.fillStyle(this.rng.next() < 0.45 ? 0xffe9a8 : 0xbcd8e8, 1);
           g.fillRect(wx, wy, winW, winH);
           g.lineStyle(2, darken(color, 45), 0.8);
           g.lineBetween(wx + winW / 2, wy, wx + winW / 2, wy + winH);
           g.lineBetween(wx, wy + winH / 2, wx + winW, wy + winH / 2);
           if (this.rng.next() < 0.3) {
             g.fillStyle(0x46b063, 1);
             g.fillCircle(wx + winW * 0.82, wy + winH - 7, 6);
             g.fillStyle(0xd97b52, 1);
             g.fillRect(wx + winW * 0.82 - 5, wy + winH - 4, 10, 5);
           }
         }
         const win = {
           index, x: wx, y: wy, w: winW, h: winH,
           cx: wx + winW / 2, cy: wy + winH / 2,
           burning, progress: 0, out: false, glow: null, flicker: this.rng.next() * 7,
         };
         if (burning) {
           win.glow = this.add.image(win.cx, win.cy, 'glow')
             .setDepth(19).setBlendMode(Phaser.BlendModes.ADD).setScale(winW / 34);
         }
         this.windows.push(win);
       }
     }
     this.fires = this.windows.filter((w) => w.burning);
   }
 
   _spawnCrowd(W, H) {
     // Onlookers gathered on the sidewalk clear of the truck, with pets and a
     // little tropical wildlife in the mix.
     this.crowd = [];
     const scale = (H * 0.115) / 96;
     const baseY = this.streetY + H * 0.05;
     const n = 6 + Math.floor(this.rng.next() * 3);
     for (let i = 0; i < n; i++) {
       const px = W * (0.42 + (i + this.rng.next() * 0.6) * (0.53 / n));
       const p = this.add.image(px, baseY + (this.rng.next() - 0.5) * H * 0.012, 'kg-person-' + (i % KG_LOOKS.length))
         .setOrigin(0.5, 1).setScale(scale).setDepth(12);
       if (this.rng.next() < 0.5) p.setFlipX(true);
       this.tweens.add({
         targets: p, y: p.y - H * 0.008,
         duration: 420 + i * 60, yoyo: true, repeat: -1, ease: 'Sine.easeInOut',
       });
       this.crowd.push(p);
     }
     const dog = this.add.image(W * 0.47, baseY, 'kg-dog').setOrigin(0.5, 1).setScale(scale * 1.1).setDepth(12);
     this.tweens.add({ targets: dog, y: dog.y - H * 0.015, duration: 300, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' });
     this.crowd.push(dog);
     const cat = this.add.image(W * 0.90, baseY - 2, 'kg-cat').setOrigin(0.5, 1).setScale(scale).setDepth(12);
     this.crowd.push(cat);
     const iguana = this.add.image(W * 0.955, baseY - 2, 'kg-iguana').setOrigin(0.5, 1).setScale(scale).setDepth(12);
     if (this.rng.next() < 0.5) iguana.setFlipX(true);
     this.crowd.push(iguana);
     // A parrot cruises back and forth across the sky.
     this.parrot = this.add.image(-60, H * 0.14, 'kg-parrot').setScale(scale * 1.3).setDepth(8);
     this.tweens.add({
       targets: this.parrot, x: W + 60,
       duration: 11000, repeat: -1, yoyo: true,
       onYoyo: () => this.parrot.setFlipX(true),
       onRepeat: () => this.parrot.setFlipX(false),
     });
     this.tweens.add({ targets: this.parrot, y: H * 0.18, duration: 900, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' });
   }
 
   _placeTruck(W, H) {
     const scale = Math.min((W * 0.30) / 260, (H * 0.24) / 112);
     this.truckImg = this.add.image(W * 0.155, this.streetY + H * 0.145, 'kg-truck-side')
       .setOrigin(0.5, 1).setScale(scale).setDepth(25);
     // Ladder pivots on the turntable (local 70,31 in the 260×112 texture).
     const px = this.truckImg.x + (70 - 130) * scale;
     const py = this.truckImg.y + (31 - 112) * scale;
     this.ladderPivot = { x: px, y: py };
     const ladderScale = scale * 1.25;
     this.ladder = this.add.image(px, py, 'kg-ladder')
       .setOrigin(KG_LADDER_PIVOT_X / 210, 0.5).setScale(ladderScale).setDepth(26);
     this.ladderLen = (KG_LADDER_TIP_X - KG_LADDER_PIVOT_X) * ladderScale;
     // Light-bar flash position (local 212,17).
     this._lightX = this.truckImg.x + (212 - 130) * scale;
     this._lightY = this.truckImg.y + (17 - 112) * scale;
   }
 
   _updateHud() {
     const left = this.fires ? this.fires.filter((f) => !f.out).length : 0;
     this.hudText.setText(left > 0
       ? `🔥 ${left} window${left === 1 ? '' : 's'} on fire!   ◀ ▲ ▼ ▶ aim  ·  hold SPACE to spray`
       : '✨ All the fires are out! ✨');
   }
 
   // Gameplay-critical logic (aim, quench, finish handoff). Runs from update()
   // and from the wall-clock fallback interval, so it keeps working even when
   // the render loop is throttled.
   _step(dt) {
     const H = this._H;
     if (!this.done) {
       const mdt = Math.min(dt, 0.05); // don't teleport the aim on a long tick
       const spd = H * 0.62;
       if (this.cursors.left.isDown) this.aimX -= spd * mdt;
       if (this.cursors.right.isDown) this.aimX += spd * mdt;
       if (this.cursors.up.isDown) this.aimY -= spd * mdt;
       if (this.cursors.down.isDown) this.aimY += spd * mdt;
       this.aimX = Phaser.Math.Clamp(this.aimX, this.bldX0 + 16, this.bldX1 - 16);
       this.aimY = Phaser.Math.Clamp(this.aimY, this.bldTop + 16, this.streetY - 20);
       this.reticle.setPosition(this.aimX, this.aimY);
       this.spraying = this.cursors.space.isDown;
     } else {
       this.spraying = false;
     }
 
     // Which burning window (if any) is under the aim?
     this.hoverFire = null;
     for (const f of this.fires) {
       if (f.out) continue;
       const mx = f.w * 0.35, my = f.h * 0.35;
       if (this.aimX >= f.x - mx && this.aimX <= f.x + f.w + mx &&
           this.aimY >= f.y - my && this.aimY <= f.y + f.h + my) {
         this.hoverFire = f;
         break;
       }
     }
     this.hoverRing.setVisible(!!this.hoverFire);
 
     // Quenching: douse a burning window to fill its progress ring.
     if (this.spraying && this.hoverFire) {
       const f = this.hoverFire;
       f.progress += dt / HOSE_QUENCH_S;
       this._steamAccum += dt;
       if (this._steamAccum > 0.12) {
         this._steamAccum = 0;
         this._emitSteam(f);
       }
       if (f.progress >= 1) this._quenchWindow(f);
     }
 
     if (this._finishAtWall && performance.now() >= this._finishAtWall) this._finish();
   }
 
   update(time) {
     const now = performance.now();
     if (now > this.lastStepTime) {
       this._step(Math.min((now - this.lastStepTime) / 1000, 0.5));
       this.lastStepTime = now;
     }
 
     // Ladder tracks the aim; water pours from its tip.
     const ang = Math.atan2(this.aimY - this.ladderPivot.y, this.aimX - this.ladderPivot.x);
     this.ladder.rotation = ang;
     const tipX = this.ladderPivot.x + Math.cos(ang) * this.ladderLen;
     const tipY = this.ladderPivot.y + Math.sin(ang) * this.ladderLen;
 
     this.waterGfx.clear();
     if (this.spraying) {
       if (!this.waterNoise && this.drive.audioCtx && !this.drive.sfxMuted) {
         this.waterNoise = startWaterNoise(this.drive.audioCtx);
       }
       this._drawWater(time, tipX, tipY);
     }
     if ((!this.spraying || this.drive.sfxMuted) && this.waterNoise) {
       stopWaterNoise(this.drive.audioCtx, this.waterNoise);
       this.waterNoise = null;
     }
 
     this.ringGfx.clear();
     const hf = this.hoverFire;
     if (hf && !hf.out && hf.progress > 0) {
       this.ringGfx.lineStyle(7, 0x7ddcff, 0.95);
       this.ringGfx.beginPath();
       this.ringGfx.arc(this.aimX, this.aimY, 38, -Math.PI / 2, -Math.PI / 2 + hf.progress * Math.PI * 2);
       this.ringGfx.strokePath();
     }
 
     this._drawFires(time);
 
     // Emergency lights strobing on the cab.
     this.lightGfx.clear();
     const phase = Math.floor(time / 166) % 2;
     this.lightGfx.fillStyle(phase ? 0xe63946 : 0x1d7cf2, 0.9);
     this.lightGfx.fillCircle(this._lightX + (phase ? -8 : 8), this._lightY, 6);
   }
 
   _drawWater(time, tx, ty) {
     const gfx = this.waterGfx;
     const ax = this.aimX, ay = this.aimY;
     const dist = Math.hypot(ax - tx, ay - ty) || 1;
     // Quadratic arc from the nozzle, sagging control point lifted above the chord.
     const mx = (tx + ax) / 2, my = (ty + ay) / 2 - dist * 0.18;
     const pt = (t) => ({
       x: (1 - t) * (1 - t) * tx + 2 * (1 - t) * t * mx + t * t * ax,
       y: (1 - t) * (1 - t) * ty + 2 * (1 - t) * t * my + t * t * ay,
     });
     const SEG = 14;
     const strands = [
       { color: 0x44aaff, alpha: 0.45, width: 14 },
       { color: 0x9fdcff, alpha: 0.9, width: 7 },
     ];
     for (const s of strands) {
       let prev = pt(0);
       for (let i = 1; i <= SEG; i++) {
         const t = i / SEG;
         const p = pt(t);
         const wig = Math.sin(t * 9 + time * 0.02) * 3;
         gfx.lineStyle(s.width * (1 - t * 0.45), s.color, s.alpha);
         gfx.lineBetween(prev.x, prev.y + wig, p.x, p.y + wig);
         prev = p;
       }
     }
     // Droplets and an expanding splash ring at the point of impact.
     gfx.fillStyle(0xcdeeff, 0.9);
     for (let i = 0; i < 5; i++) {
       gfx.fillCircle(ax + (Math.random() - 0.5) * 36, ay + (Math.random() - 0.5) * 30, 2 + Math.random() * 3);
     }
     const ring = (Math.sin(time * 0.014) * 0.5 + 0.5) * 14 + 10;
     gfx.lineStyle(3, 0x9fdcff, 0.6);
     gfx.strokeCircle(ax, ay, ring);
     // Water running down the wall when the spray isn't on a fire.
     if (!this.hoverFire) {
       gfx.fillStyle(0x9fdcff, 0.5);
       for (let i = 0; i < 3; i++) {
         gfx.fillRect(ax - 14 + i * 12, ay + 8 + ((time * 0.06 + i * 20) % 26), 3, 10);
       }
     }
   }
 
   _drawFires(t) {
     const gfx = this.fireGfx;
     gfx.clear();
     const layers = [
       { color: 0xff7a18, half: 0.34, h: 1.15, phase: 0.0 },
       { color: 0xff3b1f, half: 0.24, h: 0.90, phase: 1.7 },
       { color: 0xffd23f, half: 0.14, h: 0.60, phase: 3.1 },
     ];
     for (const f of this.fires) {
       if (f.out) continue;
       const scale = 1 - f.progress * 0.75;
       const baseY = f.y + f.h - 2;
       if (f.glow) {
         const pulse = 1 + Math.sin(t * 0.006 + f.flicker) * 0.15;
         f.glow.setScale((f.w / 34) * pulse * (0.5 + scale * 0.5));
         f.glow.setAlpha(0.35 + scale * 0.5);
       }
       for (const L of layers) {
         const half = f.w * L.half * scale;
         for (let i = 0; i < 2; i++) {
           const off = Math.sin(t * 0.004 + i * 1.9 + L.phase + f.flicker) * f.w * 0.12 * scale;
           const h = (f.h * L.h + Math.sin(t * 0.006 + i * 2.3 + L.phase + f.flicker) * f.h * 0.2) * scale;
           gfx.fillStyle(L.color, 0.78 + Math.sin(t * 0.005 + i + L.phase) * 0.2);
           gfx.fillTriangle(
             f.cx + off - half, baseY,
             f.cx + off + half, baseY,
             f.cx + off, baseY - h
           );
         }
       }
     }
   }
 
   _emitFireSmoke() {
     if (!this.fires) return;
     for (const f of this.fires) {
       if (f.out || Math.random() > 0.6) continue;
       const puff = this.add.image(f.cx + (Math.random() - 0.5) * f.w * 0.5, f.y, 'smoke-puff')
         .setScale(f.w / 40).setAlpha(0.7).setDepth(21);
       this.tweens.add({
         targets: puff,
         x: puff.x - 20 - Math.random() * 30, y: puff.y - 70 - Math.random() * 40,
         scale: f.w / 18, alpha: 0,
         duration: 1400, ease: 'Sine.easeOut',
         onComplete: () => puff.destroy(),
       });
     }
   }
 
   _emitSteam(f) {
     const puff = this.add.image(this.aimX + (Math.random() - 0.5) * f.w * 0.4, f.cy, 'smoke-puff')
       .setScale(f.w / 60).setAlpha(0.95).setTint(0xf2f8ff).setDepth(31);
     this.tweens.add({
       targets: puff,
       y: puff.y - 40 - Math.random() * 25, scale: f.w / 26, alpha: 0,
       duration: 700, ease: 'Sine.easeOut',
       onComplete: () => puff.destroy(),
     });
   }
 
   _quenchWindow(f) {
     if (f.out) return;
     f.out = true;
     f.progress = 1;
     if (f.glow) { f.glow.destroy(); f.glow = null; }
 
     // Relight the window and pop in a grateful resident (one lucky window
     // reveals a cat instead).
     const g = this.add.graphics().setDepth(6);
     g.fillStyle(0xffe9a8, 1);
     g.fillRect(f.x, f.y, f.w, f.h);
     const useCat = !this._catUsed && (this.rng.next() < 0.3 || this.fires.every((fi) => fi.out || fi === f));
     if (useCat) {
       this._catUsed = true;
       const cat = this.add.image(f.cx, f.y + f.h, 'kg-cat').setOrigin(0.5, 1).setDepth(7);
       cat.setScale(Math.min(f.w / 60, f.h / 48));
       cat.setAlpha(0);
       this.tweens.add({ targets: cat, alpha: 1, duration: 250 });
     } else {
       this._addWaver(f);
     }
 
     // Feedback burst: steam, chime, popup, confetti, HUD.
     for (let i = 0; i < 6; i++) this._emitSteam(f);
     playJingle(this.drive.audioCtx, this.drive.sfxMuted, [[880, 0, 0.18], [1320, 0.09, 0.26]]);
     this._popup(f.cx, f.y - 8, 'Fire out!');
     if (window.KGames && KGames.burstConfetti) {
       try { KGames.burstConfetti(this, f.cx, f.cy); } catch (_) {}
     }
     this._updateHud();
 
     if (this.fires.every((fi) => fi.out)) this._celebrate();
   }
 
   // A cartoon head-and-shoulders resident waving from inside the window.
   _addWaver(f) {
     const look = KG_LOOKS[Math.floor(this.rng.next() * KG_LOOKS.length)];
     const s = Math.min(f.w, f.h) / 60;
     const c = this.add.container(f.cx, f.y + f.h).setDepth(7);
     const body = this.add.graphics();
     body.fillStyle(look.shirt, 1); body.fillRoundedRect(-16 * s, -22 * s, 32 * s, 22 * s, 8 * s);
     body.fillStyle(look.hair, 1); body.fillCircle(0, -34 * s, 14 * s);
     body.fillStyle(look.skin, 1); body.fillCircle(0, -31 * s, 12 * s);
     body.fillStyle(look.hair, 1); body.fillEllipse(0, -40 * s, 22 * s, 9 * s);
     body.fillStyle(0xffffff, 1); body.fillCircle(-4.5 * s, -31 * s, 3 * s); body.fillCircle(4.5 * s, -31 * s, 3 * s);
     body.fillStyle(0x2b2b2b, 1); body.fillCircle(-4 * s, -30.4 * s, 1.5 * s); body.fillCircle(5 * s, -30.4 * s, 1.5 * s);
     body.lineStyle(2 * s, 0x7a4a3a, 1);
     body.beginPath(); body.arc(0, -27 * s, 5 * s, Math.PI * 0.15, Math.PI * 0.85); body.strokePath();
     const hand = this.add.graphics();
     hand.fillStyle(look.skin, 1); hand.fillCircle(0, 0, 4.5 * s);
     hand.setPosition(19 * s, -34 * s);
     c.add([body, hand]);
     c.setAlpha(0);
     this.tweens.add({ targets: c, alpha: 1, duration: 250 });
     this.tweens.add({
       targets: hand, y: -42 * s,
       duration: 260, yoyo: true, repeat: -1, ease: 'Sine.easeInOut',
     });
   }
 
   _popup(x, y, text) {
     const t = this.add.text(x, y, text, {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '26px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 7,
     }).setOrigin(0.5, 1).setDepth(62);
     this.tweens.add({
       targets: t, y: y - 46, alpha: 0,
       duration: 1100, ease: 'Sine.easeOut',
       onComplete: () => t.destroy(),
     });
   }
 
   _celebrate() {
     if (this.done) return;
     this.done = true;
     if (this.waterNoise) {
       stopWaterNoise(this.drive.audioCtx, this.waterNoise);
       this.waterNoise = null;
     }
     this.reticle.setVisible(false);
     this._updateHud();
 
     const W = this._W, H = this._H;
     const banner = this.add.text(W / 2, H * 0.34, 'You saved the building!', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: Math.round(W / 16) + 'px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 10,
       align: 'center',
     }).setOrigin(0.5).setScale(0.2).setDepth(63);
     this.tweens.add({ targets: banner, scale: 1, duration: 420, ease: 'Back.easeOut' });
 
     for (let i = 0; i < this.crowd.length; i++) {
       const p = this.crowd[i];
       this.tweens.killTweensOf(p);
       this.tweens.add({
         targets: p, y: p.y - H * 0.045,
         duration: 260 + (i % 3) * 50, yoyo: true, repeat: 5, ease: 'Sine.easeOut', delay: i * 60,
       });
     }
     playJingle(this.drive.audioCtx, this.drive.sfxMuted,
       [[523, 0, 0.15], [659, 0.12, 0.15], [784, 0.24, 0.15], [1047, 0.36, 0.45]]);
     if (window.KGames && KGames.burstConfetti) {
       try {
         KGames.burstConfetti(this, W * 0.35, H * 0.3);
         KGames.burstConfetti(this, W * 0.65, H * 0.35);
       } catch (_) {}
     }
 
     this._finishAtWall = performance.now() + 2600;
   }
 
   _finish() {
     if (this._finished) return;
     this._finished = true;
     const drive = this.drive;
     this.scene.resume('FireTruckScene');
     drive._onMinigameComplete();
     this.scene.stop();
   }
 
   _shutdown() {
     if (this.fallbackTimer) { clearInterval(this.fallbackTimer); this.fallbackTimer = null; }
     if (this._smokeTimer) { this._smokeTimer.remove(false); this._smokeTimer = null; }
     if (this.waterNoise) {
       stopWaterNoise(this.drive && this.drive.audioCtx, this.waterNoise);
       this.waterNoise = null;
     }
     if (window.__FT_HOSE_SCENE__ === this) window.__FT_HOSE_SCENE__ = null;
   }
 }
 
 class FireTruckEndScene extends Phaser.Scene {
   constructor() {
     super({ key: 'FireTruckEndScene' });
     this._hue = 0;
     this._W = 0;
     this._H = 0;
   }
 
   preload() {
     const CDN = 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/';
     this.load.svg('dolphin-emoji', CDN + '1f42c.svg', { width: 128, height: 128 });
   }
 
   create(data) {
     const W = this._W = this.scale.width;
     const H = this._H = this.scale.height;
     // Music stays whatever the player chose in the driving scene — the party
     // does not get to switch the speakers back on by itself.
     this._musicOn = !!(data && data.musicOn);
 
     bakePeopleTextures(this);
     bakeSideTruckTexture(this);
     bakeCritterTextures(this);
 
     // Warm tropical sky gradient
     const skyGfx = this.add.graphics();
     skyGfx.fillGradientStyle(0xffe3a3, 0xffd08a, 0x8fe0f2, 0x62d9e8, 1);
     skyGfx.fillRect(0, 0, W, H * 0.52);
 
     // Pulsing sun (disc + halo rings) top-right.
     this.sunGfx = this.add.graphics();
     this._sunX = W * 0.82;
     this._sunY = H * 0.16;
 
     // Drifting puffy clouds.
     if (!this.textures.exists('end-cloud')) {
       const g = this.make.graphics({ add: false });
       g.fillStyle(0xffffff, 0.95);
       g.fillEllipse(70, 40, 120, 46);
       g.fillEllipse(44, 34, 60, 44);
       g.fillEllipse(96, 36, 66, 40);
       g.generateTexture('end-cloud', 140, 70); g.destroy();
     }
     this._clouds = [];
     for (let i = 0; i < 4; i++) {
       const cx = W * (0.1 + i * 0.24);
       const cy = H * (0.08 + (i % 2) * 0.12);
       const cloud = this.add.image(cx, cy, 'end-cloud').setScale(0.8 + (i % 3) * 0.4).setAlpha(0.9).setDepth(1);
       this._clouds.push({ img: cloud, vx: 8 + i * 3 });
     }
 
     // Dense tropical skyline (left 42%, varied heights + rooftop features).
     const bldGfx = this.add.graphics();
     const bldColors = BUILDING_PALETTE;
     const numBlds = 10;
     const bldZoneW = W * 0.42;
     for (let i = 0; i < numBlds; i++) {
       const bw = bldZoneW / numBlds;
       const bh = H * (0.10 + ((i * 7 + 3) % 9) / 9 * 0.38);
       const bx = i * bw;
       const by = H * 0.52 - bh;
       const color = bldColors[i % bldColors.length];
       bldGfx.fillStyle(color, 1);
       bldGfx.fillRect(bx, by, bw - 3, bh);
       bldGfx.lineStyle(2, darken(color, 45), 1);
       bldGfx.strokeRect(bx + 1, by + 1, bw - 5, bh - 2);
       // Windows
       bldGfx.fillStyle(0xffe8a0, 0.75);
       for (let wy = by + 10; wy < H * 0.52 - 10; wy += 14) {
         for (let wx = bx + 5; wx < bx + bw - 10; wx += 12) {
           bldGfx.fillRect(wx, wy, 7, 8);
         }
       }
       // Rooftop feature: alternating water tank / terracotta gable.
       if (i % 3 === 0) {
         bldGfx.fillStyle(0x9aa0a8, 1);
         bldGfx.fillRect(bx + bw * 0.3, by - bh * 0.08, bw * 0.4, bh * 0.08);
       } else if (i % 3 === 1) {
         bldGfx.fillStyle(ROOF_TERRACOTTA, 1);
         bldGfx.fillTriangle(bx, by, bx + bw - 3, by, bx + (bw - 3) / 2, by - bh * 0.14);
       }
     }
 
     // Side-view palms tucked between skyline and beach.
     for (let i = 0; i < 3; i++) {
       drawSidePalm(bldGfx, bldZoneW + i * W * 0.05 + W * 0.02, H * 0.52, H * 0.10);
     }
 
     // Road
     const roadGfx = this.add.graphics();
     roadGfx.fillStyle(ASPHALT_COLOR, 1);
     roadGfx.fillRect(0, H * 0.52, W, H * 0.10);
     // Yellow dashes
     roadGfx.fillStyle(STRIPE_COLOR, 1);
     const dashW = W * 0.06;
     const dashGap = W * 0.04;
     const dashY = H * 0.52 + H * 0.048;
     for (let dx = 0; dx < W; dx += dashW + dashGap) {
       roadGfx.fillRect(dx, dashY, dashW, 5);
     }
 
     // Beach
     const beachGfx = this.add.graphics();
     beachGfx.fillStyle(BEACH_COLOR, 1);
     beachGfx.fillRect(0, H * 0.62, W, H * 0.06);
 
     // Ocean fill
     const oceanGfx = this.add.graphics();
     oceanGfx.fillGradientStyle(0x2bb5d8, 0x2bb5d8, 0x1c8fb0, 0x1c8fb0, 1);
     oceanGfx.fillRect(0, H * 0.68, W, H * 0.32);
 
     // Beach parasol + towels (right side of the beach band).
     const beachDetailGfx = this.add.graphics();
     const towels = [[0x1d7cf2, W * 0.70], [0xe63946, W * 0.78], [0xffd23f, W * 0.86]];
     for (const [tc, tx] of towels) {
       beachDetailGfx.fillStyle(tc, 0.9);
       beachDetailGfx.fillRoundedRect(tx, H * 0.635, W * 0.05, H * 0.03, 4);
     }
     // Parasol
     const umbX = W * 0.62, umbY = H * 0.64;
     beachDetailGfx.fillStyle(0x8a5a3b, 1);
     beachDetailGfx.fillRect(umbX - 1, umbY, 3, H * 0.045);
     beachDetailGfx.fillStyle(0xe63946, 1);
     beachDetailGfx.fillTriangle(umbX - W * 0.045, umbY, umbX + W * 0.045, umbY, umbX, umbY - H * 0.05);
     beachDetailGfx.fillStyle(0xffffff, 0.85);
     beachDetailGfx.fillTriangle(umbX - W * 0.015, umbY, umbX + W * 0.015, umbY, umbX, umbY - H * 0.05);
 
     // Sailboat traversing the ocean with a bob tween.
     if (!this.textures.exists('end-boat')) {
       const g = this.make.graphics({ add: false });
       g.fillStyle(0x5a3a24, 1); g.fillRect(28, 6, 3, 34);
       g.fillStyle(0xffffff, 1); g.fillTriangle(30, 6, 30, 40, 54, 38);
       g.fillStyle(0xe63946, 1); g.fillTriangle(28, 6, 28, 26, 12, 24);
       g.fillStyle(0x9b1c25, 1);
       g.fillPoints([{ x: 6, y: 40 }, { x: 52, y: 40 }, { x: 44, y: 54 }, { x: 14, y: 54 }], true);
       g.generateTexture('end-boat', 60, 58); g.destroy();
     }
     this._endBoat = this.add.image(W * 0.1, H * 0.80, 'end-boat').setScale(H / 400).setDepth(2);
     this.tweens.add({ targets: this._endBoat, y: H * 0.80 - 8, angle: 3, duration: 1800, ease: 'Sine.easeInOut', yoyo: true, repeat: -1 });
     this.tweens.add({ targets: this._endBoat, x: W * 0.95, duration: 18000, ease: 'Linear', repeat: -1 });
 
     // Wave graphics (cleared/redrawn each frame)
     this.waveGfx = this.add.graphics();
 
     // Fire truck (the shared cartoony side-view, parked on the road facing right)
     const truckX = W * 0.30;
     const truckY = H * 0.615;
     const truckScale = (W * 0.15) / 260;
     this.add.image(truckX, truckY, 'kg-truck-side')
       .setOrigin(0.5, 1).setScale(truckScale).setDepth(2);
 
     // Water fan (cleared/redrawn each frame) sprays from the front of the truck
     this.waterFanGfx = this.add.graphics();
     this._truckFrontX = truckX + 130 * truckScale;
     this._truckFrontY = truckY - 50 * truckScale;
 
     // Dolphins (3) — Twemoji SVG, jump above ocean surface
     this._dolphins = [];
     const dolphinSize = Math.round(H * 0.09);
     for (let i = 0; i < 3; i++) {
       const dx = W * (0.55 + i * 0.14);
       const waterY = H * 0.70;
       const peakY  = H * 0.50;
       const d = this.add.image(dx, waterY, 'dolphin-emoji')
         .setOrigin(0.5)
         .setDisplaySize(dolphinSize, dolphinSize)
         .setDepth(5);
       d.setAlpha(0);
       this._dolphins.push(d);
       const launchDolphin = (dol) => {
         dol.y = waterY;
         dol.setAlpha(1).setAngle(90); // left-facing emoji: +90° = nose straight up
         // Smooth 180° rotation over the full visible jump (no instant flip)
         this.tweens.add({
           targets: dol, angle: -90,
           duration: 1200, ease: 'Sine.easeInOut',
         });
         // y arc: rise then fall
         this.tweens.add({
           targets: dol, y: peakY,
           duration: 600, ease: 'Sine.easeOut',
           onComplete: () => {
             this.tweens.add({
               targets: dol, y: waterY,
               duration: 600, ease: 'Sine.easeIn',
               onComplete: () => {
                 dol.setAlpha(0);
                 this.time.delayedCall(900 + i * 300, () => launchDolphin(dol));
               }
             });
           }
         });
       };
       this.time.delayedCall(i * 1100, () => launchDolphin(d));
     }
 
     // Dancing crowd on the road — the same diverse cartoon townspeople as the
     // hose minigame, bouncing and swaying, joined by a dog, cat, iguana, and a
     // parrot doing laps across the sky.
     const dancerScale = (H * 0.105) / 96;
     for (let i = 0; i < 6; i++) {
       const px = W * (0.46 + i * 0.075);
       const py = H * 0.615;
       const person = this.add.image(px, py, 'kg-person-' + (i % KG_LOOKS.length))
         .setOrigin(0.5, 1).setScale(dancerScale).setDepth(3);
       if (i % 2) person.setFlipX(true);
       this.tweens.add({
         targets: person, y: py - H * 0.028,
         duration: 330 + i * 55, ease: 'Sine.easeInOut',
         yoyo: true, repeat: -1,
       });
       this.tweens.add({
         targets: person, angle: { from: -7, to: 7 },
         duration: 400 + i * 50, ease: 'Sine.easeInOut',
         yoyo: true, repeat: -1,
       });
     }
     const endDog = this.add.image(W * 0.42, H * 0.615, 'kg-dog')
       .setOrigin(0.5, 1).setScale(dancerScale * 1.2).setDepth(3);
     this.tweens.add({
       targets: endDog, y: H * 0.615 - H * 0.035,
       duration: 300, ease: 'Sine.easeOut', yoyo: true, repeat: -1,
     });
     const endCat = this.add.image(W * 0.94, H * 0.61, 'kg-cat')
       .setOrigin(0.5, 1).setScale(dancerScale).setDepth(3);
     this.tweens.add({
       targets: endCat, angle: { from: -5, to: 5 },
       duration: 500, ease: 'Sine.easeInOut', yoyo: true, repeat: -1,
     });
     this.add.image(W * 0.48, H * 0.675, 'kg-iguana')
       .setOrigin(0.5, 1).setScale(dancerScale).setDepth(3);
     const endParrot = this.add.image(-50, H * 0.12, 'kg-parrot')
       .setScale(dancerScale * 1.4).setDepth(3);
     this.tweens.add({
       targets: endParrot, x: W + 50,
       duration: 12000, repeat: -1, yoyo: true,
       onYoyo: () => endParrot.setFlipX(true),
       onRepeat: () => endParrot.setFlipX(false),
     });
     this.tweens.add({
       targets: endParrot, y: H * 0.16,
       duration: 850, yoyo: true, repeat: -1, ease: 'Sine.easeInOut',
     });
 
     // "You did it!" text
     this.didItText = this.add.text(W / 2, H * 0.30, 'You did it!', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: Math.round(W / 8) + 'px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 10,
       align: 'center',
     }).setOrigin(0.5).setDepth(60);
 
     this.tweens.add({
       targets: this.didItText,
       scaleX: { from: 0.91, to: 1.09 },
       scaleY: { from: 0.91, to: 1.09 },
       angle: { from: -5, to: 5 },
       duration: 650,
       ease: 'Sine.easeInOut',
       yoyo: true,
       repeat: -1,
     });
 
     // "Play Again" button
     const btnY = H * 0.91;
     const btnBg = this.add.rectangle(W / 2, btnY, 210, 56, 0xe63946)
       .setStrokeStyle(4, 0x9b1c25)
       .setInteractive({ useHandCursor: true })
       .setDepth(61);
     const btnText = this.add.text(W / 2, btnY, 'Play Again', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '26px',
       color: '#ffffff',
     }).setOrigin(0.5).setDepth(62);
 
     btnBg.on('pointerover', () => btnBg.setFillStyle(0xff6b6b));
     btnBg.on('pointerout', () => btnBg.setFillStyle(0xe63946));
     btnBg.on('pointerdown', () => window.location.reload());
 
     this.add.text(W / 2, btnY + 44, 'Press M for music', {
       fontFamily: 'Fredoka, sans-serif',
       fontSize: '16px',
       color: '#ffffff',
       stroke: '#2f2f2f',
       strokeThickness: 4,
     }).setOrigin(0.5).setDepth(62);
 
     // Celebration music, but only if the player switched music on while driving
     // (M toggles it here too).
     this.input.keyboard.on('keydown-M', () => this._toggleEndMusic());
     if (this._musicOn) this._startEndMusic();
 
     // Celebration fireworks + confetti (guarded so a shared-lib load failure
     // can never throw into the console-error tests).
     if (window.KGames && KGames.launchFireworks) {
       try {
         KGames.bakeFireworksAtlas(this);
         KGames.launchFireworks(this);
         KGames.burstConfetti(this, W / 2, H * 0.3);
         this._fwTimer = this.time.addEvent({
           delay: 4000, loop: true,
           callback: () => {
             if (!this.scene.isActive()) return;
             KGames.launchFireworks(this);
           },
         });
       } catch (_) {}
     }
 
     window.__FT_END_SCENE__ = this;
     this.events.on('shutdown', this._shutdown, this);
     this.events.on('destroy', this._shutdown, this);
   }
 
   _toggleEndMusic() {
     this._musicOn = !this._musicOn;
     if (this._musicOn) {
       try { const p = Tone.start(); if (p && p.catch) p.catch(() => {}); } catch (_) {}
       if (!this._endGain) this._startEndMusic();
       else {
         this._endGain.gain.value = 0.7;
         try { Tone.Transport.start(); } catch (_) {}
       }
     } else {
       if (this._endGain) this._endGain.gain.value = 0;
       try { Tone.Transport.pause(); } catch (_) {}
     }
   }
 
   _startEndMusic() {
     try {
       this._endGain = new Tone.Gain(0.7).toDestination();
 
       this._endMelodySynth = new Tone.Synth({
         oscillator: { type: 'triangle' },
         envelope: { attack: 0.006, decay: 0.10, sustain: 0.22, release: 0.08 },
       }).connect(this._endGain);
       this._endMelodySynth.volume.value = -14;
 
       this._endBassSynth = new Tone.Synth({
         oscillator: { type: 'sawtooth' },
         envelope: { attack: 0.005, decay: 0.08, sustain: 0.10, release: 0.05 },
       }).connect(this._endGain);
       this._endBassSynth.volume.value = -18;
 
       this._endChordSynth = new Tone.PolySynth(Tone.Synth, {
         oscillator: { type: 'square' },
         envelope: { attack: 0.005, decay: 0.06, sustain: 0.08, release: 0.03 },
       }).connect(this._endGain);
       this._endChordSynth.volume.value = -26;
 
       let step = 0;
       new Tone.Sequence((time, note) => {
         const i = step % FT_END_MELODY.length;
         step++;
         this._endMelodySynth.triggerAttackRelease(note, '8n', time);
         this._endBassSynth.triggerAttackRelease(FT_END_BASS[i], '8n', time);
         if (FT_END_CHORDS[i]) this._endChordSynth.triggerAttackRelease(FT_END_CHORDS[i], '8n', time);
       }, FT_END_MELODY, '8n').start(0);
 
       Tone.Transport.bpm.value = FT_END_BPM;
       Tone.Transport.start();
     } catch (_) {}
   }
 
   _shutdown() {
     if (this._fwTimer) { this._fwTimer.remove(false); this._fwTimer = null; }
     try { Tone.Transport.stop(); } catch (_) {}
     if (this._endGain) { try { this._endGain.dispose(); } catch (_) {} this._endGain = null; }
     if (this._endMelodySynth) { try { this._endMelodySynth.dispose(); } catch (_) {} this._endMelodySynth = null; }
     if (this._endBassSynth) { try { this._endBassSynth.dispose(); } catch (_) {} this._endBassSynth = null; }
     if (this._endChordSynth) { try { this._endChordSynth.dispose(); } catch (_) {} this._endChordSynth = null; }
     window.__FT_END_SCENE__ = null;
   }
 
   update(time, delta) {
     const dt = delta / 1000;
     const W = this._W;
     const H = this._H;
 
     // Color-cycle "You did it!" text
     this._hue = (this._hue + dt * 0.18) % 1;
     const c = Phaser.Display.Color.HSLToColor(this._hue, 0.85, 0.62);
     this.didItText.setColor(Phaser.Display.Color.RGBToString(c.r, c.g, c.b));
 
     // Pulsing sun + halo rings.
     if (this.sunGfx) {
       const pulse = 1 + Math.sin(time * 0.002) * 0.06;
       this.sunGfx.clear();
       for (let r = 4; r >= 1; r--) {
         this.sunGfx.fillStyle(0xffe08a, 0.08 * r);
         this.sunGfx.fillCircle(this._sunX, this._sunY, W * 0.05 * r * 0.5 * pulse);
       }
       this.sunGfx.fillStyle(0xfff2b0, 1);
       this.sunGfx.fillCircle(this._sunX, this._sunY, W * 0.045 * pulse);
     }
 
     // Drifting clouds (wrap across the sky).
     if (this._clouds) {
       for (const cl of this._clouds) {
         cl.img.x += cl.vx * dt;
         if (cl.img.x - cl.img.displayWidth > W) cl.img.x = -cl.img.displayWidth;
       }
     }
 
     // Ocean waves
     this.waveGfx.clear();
     for (let w = 0; w < 3; w++) {
       const waveY = H * 0.70 + w * H * 0.055;
       this.waveGfx.lineStyle(3, 0x5bc8d0, 0.45 - w * 0.1);
       this.waveGfx.beginPath();
       let first = true;
       for (let x = 0; x <= W; x += 4) {
         const y = waveY + Math.sin((x / W) * Math.PI * 6 + time * 0.002 + w * 1.2) * H * 0.012;
         if (first) { this.waveGfx.moveTo(x, y); first = false; } else { this.waveGfx.lineTo(x, y); }
       }
       this.waveGfx.strokePath();
     }
 
     // Celebratory water fan arcing up from the truck front
     this.waterFanGfx.clear();
     this.waterFanGfx.lineStyle(3, 0x88ddff, 0.7);
     const tfx = this._truckFrontX;
     const tfy = this._truckFrontY;
     for (let r = 0; r < 7; r++) {
       const angle = -1.05 + r * 0.09 + Math.sin(time * 0.004 + r) * 0.04;
       const len = W * 0.09 + Math.sin(time * 0.003 + r * 0.7) * W * 0.01;
       this.waterFanGfx.lineBetween(tfx, tfy, tfx + Math.cos(angle) * len, tfy + Math.sin(angle) * len);
     }
   }
 }
 
 // preserveDrawingBuffer is required so Playwright tests can readPixels the
 // canvas, but it disables compositor fast paths on some drivers and tanks
 // framerate. Keep it on only for tests.
 const IS_TEST = !!window.__TEST_MODE__;
 
 window.__KG_GAME__ = new Phaser.Game({
   type: Phaser.AUTO,
   parent: 'game-container',
   backgroundColor: '#2BB5D8',
   scale: {
     mode: Phaser.Scale.RESIZE,
     width: window.innerWidth,
     height: window.innerHeight,
   },
   render: {
     preserveDrawingBuffer: IS_TEST,
     antialias: false,
     pixelArt: false,
   },
   scene: [FireTruckScene, FireHoseScene, FireTruckEndScene],
 });