FAZA 17: 2.5D Minecraft-Style Terrain + Y-Layer Stacking + Custom Sprites

COMPLETED FEATURES:

 Custom Sprite Integration:
- Player, Zombie, Merchant sprites (0.2 scale)
- 11 custom sprites + 5 asset packs loaded
- Auto-transparency processing (white/brown removal)
- Gravestone system with atlas extraction

 2.5D Minecraft-Style Terrain:
- Volumetric blocks with 25px thickness
- Strong left/right side shading (30%/50% darker)
- Minecraft-style texture patterns (grass, dirt, stone)
- Crisp black outlines for definition

 Y-Layer Stacking System:
- GRASS_FULL: All green (elevation > 0.7)
- GRASS_TOP: Green top + brown sides (elevation 0.4-0.7)
- DIRT: All brown (elevation < 0.4)
- Dynamic terrain depth based on height

 Floating Island World Edge:
- Stone cliff walls at map borders
- 2-tile transition zone
- Elevation flattening for cliff drop-off effect
- 100x100 world with defined boundaries

 Performance & Polish:
- Canvas renderer for pixel-perfect sharpness
- CSS image-rendering: crisp-edges
- willReadFrequently optimization
- No Canvas2D warnings

 Technical:
- 3D volumetric trees and rocks
- Hybrid rendering (2.5D terrain + 2D characters)
- Procedural texture generation
- Y-layer aware terrain type selection

src/systems/DayNightSystem.js

@@ -0,0 +1,91 @@
+class DayNightSystem {
+    constructor(scene, timeSystem) {
+        this.scene = scene;
+        this.timeSystem = timeSystem;
+
+        // Visual overlay
+        this.overlay = null;
+        this.currentPhase = 'day'; // dawn, day, dusk, night
+
+        this.init();
+    }
+
+    init() {
+        // Create lighting overlay
+        this.overlay = this.scene.add.graphics();
+        this.overlay.setDepth(4999); // Below weather, above everything else
+        this.overlay.setScrollFactor(0); // Fixed to camera
+    }
+
+    update() {
+        if (!this.timeSystem) return;
+
+        const hour = this.timeSystem.getCurrentHour();
+        const phase = this.getPhase(hour);
+
+        if (phase !== this.currentPhase) {
+            this.currentPhase = phase;
+            console.log(`🌅 Time of Day: ${phase} (${hour}:00)`);
+        }
+
+        this.updateLighting(hour);
+    }
+
+    getPhase(hour) {
+        if (hour >= 5 && hour < 7) return 'dawn';      // 5-7
+        if (hour >= 7 && hour < 18) return 'day';      // 7-18
+        if (hour >= 18 && hour < 20) return 'dusk';    // 18-20
+        return 'night';                                 // 20-5
+    }
+
+    updateLighting(hour) {
+        const width = this.scene.cameras.main.width;
+        const height = this.scene.cameras.main.height;
+
+        this.overlay.clear();
+
+        let color = 0x000033; // Default night blue
+        let alpha = 0;
+
+        if (hour >= 0 && hour < 5) {
+            // Deep Night (0-5h) - Dark blue
+            color = 0x000033;
+            alpha = 0.6;
+        } else if (hour >= 5 && hour < 7) {
+            // Dawn (5-7h) - Orange/Pink gradient
+            color = 0xFF6B35;
+            const progress = (hour - 5) / 2; // 0-1
+            alpha = 0.6 - (progress * 0.6); // 0.6 -> 0
+        } else if (hour >= 7 && hour < 18) {
+            // Day (7-18h) - No overlay (bright)
+            alpha = 0;
+        } else if (hour >= 18 && hour < 20) {
+            // Dusk (18-20h) - Orange/Purple
+            color = 0x8B4789;
+            const progress = (hour - 18) / 2; // 0-1
+            alpha = progress * 0.5; // 0 -> 0.5
+        } else if (hour >= 20 && hour < 24) {
+            // Night (20-24h) - Dark blue
+            color = 0x000033;
+            const progress = (hour - 20) / 4; // 0-1
+            alpha = 0.5 + (progress * 0.1); // 0.5 -> 0.6
+        }
+
+        if (alpha > 0) {
+            this.overlay.fillStyle(color, alpha);
+            this.overlay.fillRect(0, 0, width, height);
+        }
+    }
+
+    getCurrentPhase() {
+        return this.currentPhase;
+    }
+
+    isNight() {
+        return this.currentPhase === 'night';
+    }
+
+    isDay() {
+        return this.currentPhase === 'day';
+    }
+}