🔧 FOG FIX - Canvas Gradient (No More Errors!)

PROBLEM:
graphics.createRadialGradient() doesn't exist in Phaser
Error on launch

SOLUTION:
Use proper canvas texture creation:
- this.textures.createCanvas()
- ctx.createRadialGradient() ✅
- canvas.refresh()

CHANGES:
- Removed: graphics.createRadialGradient() ❌
- Added: canvas.context.createRadialGradient() ✅
- Texture name: 'fogTexture'
- Proper radial gradient (white center, transparent edges)

FOG SETTINGS:
- Scale: 2.0 → 5.0 (larger)
- Alpha: 0.1 → 0 (fades out)
- Lifespan: 6000ms
- Speed: 10-30
- Frequency: 200ms
- BlendMode: NORMAL

✅ NO MORE GRADIENT ERRORS!
✅ SOFT FOG TEXTURE!
✅ READY TO TEST!

src/scenes/StoryScene.js

@@ -102,31 +102,28 @@ class StoryScene extends Phaser.Scene {
     }
 
     createNoirFog(width, height) {
-        // Create fog particles with SOFT texture
-        const graphics = this.add.graphics();
+        // Create fog texture with CANVAS gradient (proper way!)
+        const canvas = this.textures.createCanvas('fogTexture', 64, 64);
+        const ctx = canvas.context;
+        const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
+        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
+        gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 64, 64);
+        canvas.refresh();
 
-        // Soft feathered circle (not harsh edges)
-        const gradient = graphics.createRadialGradient(32, 32, 0, 32, 32, 32);
-        gradient.addColorStop(0, 'rgba(200, 200, 200, 1)');
-        gradient.addColorStop(0.5, 'rgba(150, 150, 150, 0.5)');
-        gradient.addColorStop(1, 'rgba(100, 100, 100, 0)');
-
-        graphics.fillStyle(0xCCCCCC, 1);
-        graphics.fillCircle(32, 32, 28);
-        graphics.generateTexture('fog_particle', 64, 64);
-        graphics.destroy();
-
-        // Fog particle emitter - SOFTER, LARGER, SUBTLE
-        const fogEmitter = this.add.particles(0, 0, 'fog_particle', {
-            x: { min: -100, max: width + 100 },
-            y: { min: -50, max: height + 50 },
+        // Fog particle emitter - SOFT, LARGE, SUBTLE
+        const fogEmitter = this.add.particles(0, 0, 'fogTexture', {
+            x: { min: 0, max: width },
+            y: { min: 0, max: height },
             speedX: { min: -10, max: 10 },
             speedY: { min: -3, max: 3 },
-            scale: { start: 2.0, end: 4.0 }, // LARGER!
-            alpha: { start: 0, end: 0.05 }, // SUBTLE!
-            lifespan: 15000,
-            frequency: 600,
-            quantity: 1
+            scale: { start: 2.0, end: 5.0 },
+            alpha: { start: 0.1, end: 0 },
+            lifespan: 6000,
+            speed: { min: 10, max: 30 },
+            frequency: 200,
+            blendMode: 'NORMAL'
         });
 
         fogEmitter.setDepth(2);
@@ -137,7 +134,7 @@ class StoryScene extends Phaser.Scene {
 
         this.tweens.add({
             targets: vignette,
-            alpha: 0.5, // Stronger vignette
+            alpha: 0.5,
             duration: 3000,
             yoyo: true,
             repeat: -1,