feat: add Deep Sea alternative hunting area

- Add Deep Sea location to navigation map
- Create DeepSeaHuntingScene with dark atmosphere
- Add deep ocean transition visuals
- Bioluminescent particles and giant shadows

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/scenes/DeepSeaHuntingScene.js

@@ -0,0 +1,142 @@
+import Phaser from 'phaser';
+import { fontSize } from '../utils/responsive.js';
+import { createFullscreenButton } from '../utils/fullscreen.js';
+
+export default class DeepSeaHuntingScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'DeepSeaHuntingScene' });
+    }
+
+    init(data) {
+        this.inventory = data.inventory || { whaleOil: 0, fuel: 100, penguins: 0 };
+        this.whalesHunted = 0;
+    }
+
+    create() {
+        // Dark deep ocean background
+        this.add.rectangle(400, 300, 800, 600, 0x0a1a2a);
+
+        // Create atmospheric effects
+        this.createDeepOceanAtmosphere();
+
+        // UI elements
+        this.createHUD();
+        this.createInstructions();
+
+        // Fullscreen button
+        createFullscreenButton(this);
+
+        // Show initial message
+        this.showMessage('Deep Sea Hunting - Coming Soon! Click RETURN to go back.');
+    }
+
+    createDeepOceanAtmosphere() {
+        // Gradient darkness
+        for (let i = 0; i < 6; i++) {
+            const alpha = 0.05 + i * 0.03;
+            this.add.rectangle(400, 500 - i * 80, 800, 100, 0x000000, alpha);
+        }
+
+        // Subtle waves
+        const graphics = this.add.graphics();
+        graphics.lineStyle(2, 0x1a3a5a, 0.3);
+
+        for (let i = 0; i < 8; i++) {
+            const y = 80 + i * 70;
+            graphics.beginPath();
+            for (let x = 0; x < 800; x += 30) {
+                const waveY = y + Math.sin((x + i * 50) * 0.012) * 8;
+                if (x === 0) {
+                    graphics.moveTo(x, waveY);
+                } else {
+                    graphics.lineTo(x, waveY);
+                }
+            }
+            graphics.strokePath();
+        }
+
+        // Bioluminescent particles
+        for (let i = 0; i < 20; i++) {
+            const x = Math.random() * 800;
+            const y = 100 + Math.random() * 400;
+            const particle = this.add.circle(x, y, 2 + Math.random() * 2, 0x4a9fff, 0.5);
+
+            this.tweens.add({
+                targets: particle,
+                alpha: { from: 0.5, to: 0.1 },
+                y: y - 30,
+                duration: 3000 + Math.random() * 2000,
+                yoyo: true,
+                repeat: -1,
+                ease: 'Sine.inOut'
+            });
+        }
+
+        // Giant shadow placeholder
+        const shadow = this.add.ellipse(400, 350, 250, 100, 0x000000, 0.4);
+        this.tweens.add({
+            targets: shadow,
+            x: 450,
+            y: 370,
+            scaleX: 1.1,
+            scaleY: 0.9,
+            duration: 5000,
+            yoyo: true,
+            repeat: -1,
+            ease: 'Sine.inOut'
+        });
+    }
+
+    createHUD() {
+        // HUD background
+        const hudBg = this.add.rectangle(400, 30, 780, 50, 0x000000, 0.7);
+        hudBg.setStrokeStyle(2, 0x4a9fff);
+
+        // Stats
+        this.statsText = this.add.text(20, 15, '', {
+            fontSize: fontSize(16),
+            fill: '#4a9fff'
+        });
+
+        // Return button
+        const returnBtn = this.add.rectangle(750, 30, 80, 35, 0x1a3a5a);
+        returnBtn.setInteractive({ useHandCursor: true });
+        returnBtn.setStrokeStyle(2, 0x4a9fff);
+
+        const returnText = this.add.text(750, 30, 'RETURN', {
+            fontSize: fontSize(14),
+            fill: '#4a9fff'
+        }).setOrigin(0.5);
+
+        returnBtn.on('pointerdown', () => {
+            this.returnToMap();
+        });
+
+        this.updateStats();
+    }
+
+    updateStats() {
+        this.statsText.setText([
+            `Fuel: ${this.inventory.fuel}/100`,
+            `Oil: ${this.inventory.whaleOil}/50`,
+            `Leviathans: ${this.whalesHunted}`
+        ]);
+    }
+
+    createInstructions() {
+        this.messageText = this.add.text(400, 570, '', {
+            fontSize: fontSize(16),
+            fill: '#4a9fff',
+            backgroundColor: '#000000',
+            padding: { x: 10, y: 5 }
+        }).setOrigin(0.5);
+    }
+
+    showMessage(text) {
+        this.messageText.setText(text);
+    }
+
+    returnToMap() {
+        this.scene.start('MapScene', { inventory: this.inventory });
+    }
+}