Phase 28 Session 3: Debug borders for chunk visualization

Added visual debugging to verify chunk rendering:

Flat2DTerrainSystem.js changes:
- Added red border around each rendered chunk
- Border: 2px red, semi-transparent (0.5 alpha)
- High depth (100) to ensure visibility
- Console log for each border created

Purpose:
- Verify chunks are actually being rendered
- See chunk boundaries visually
- Debug if chunks overlap or have gaps
- Confirm 3x3 chunk grid (9 chunks = 9 red boxes)

Expected visual:
- 9 red rectangles around player (3x3 grid)
- Each rectangle = 50x50 tiles = 2400x2400 pixels
- Player should be in center rectangle

Session 3: Visual testing in progress
Next: Reload and verify red borders appear

docs/PHASE28_SESSION3_LOG.md

@@ -0,0 +1,105 @@
+# 🧪 PHASE 28 - SESSION 3: BIOME VISUAL TESTING
+
+**Date:** 15.12.2025 17:18  
+**Session:** Visual Verification & Debugging  
+**Status:** 🔄 IN PROGRESS
+
+---
+
+## 🎯 **SESSION 3 OBJECTIVES:**
+
+1. **Verify Console Output** - Check if biomes are loading
+2. **Visual Verification** - See if biome colors are different
+3. **Chunk Boundaries** - Check for visual seams
+4. **Performance** - Verify 60 FPS
+5. **Debug** - Fix any rendering issues
+
+---
+
+## 🔍 **EXPECTED CONSOLE OUTPUT:**
+
+```
+🌍 Initializing Biome System (500x500 world)...
+🌍 Generating biome map...
+✅ Biome map generated!
+💾 Initializing Chunk Manager...
+💾 ChunkManager initialized (chunk size: 50x50)
+✅ BiomeSystem & ChunkManager connected to terrainSystem
+🎨 Flat2DTerrainSystem initialized (500x500 world)
+🗺️ Generating flat 2D map...
+🌍 Using BiomeSystem for chunk-based terrain generation
+🎨 Creating biome-aware background...
+✅ Biome background created, ready for chunks
+👤 Spawning player at world center: (250, 250)
+💾 Loading initial chunks around player...
+📦 Loading chunk (4, 4)
+📦 Loading chunk (4, 5)
+📦 Loading chunk (4, 6)
+📦 Loading chunk (5, 4)
+📦 Loading chunk (5, 5)  ← Player chunk (center)
+📦 Loading chunk (5, 6)
+📦 Loading chunk (6, 4)
+📦 Loading chunk (6, 5)
+📦 Loading chunk (6, 6)
+✅ Chunk (5, 5) rendered with biomes
+✅ Loaded 9 chunks (22500 tiles)
+```
+
+---
+
+## 🐛 **POTENTIAL ISSUE:**
+
+**Problem:** Chunk tiles might be rendering UNDER the background!
+
+**Reason:** Background depth = 0, chunk tiles depth = 1
+
+**Solution:** Check if tiles are actually visible or covered
+
+---
+
+## ✅ **TESTING CHECKLIST:**
+
+- [ ] Game loads without errors
+- [ ] Console shows biome initialization
+- [ ] Console shows chunk loading (9 chunks)
+- [ ] Player spawns at (250, 250)
+- [ ] Can see biome-colored tiles
+- [ ] Different colors in different areas
+- [ ] No visual gaps between chunks
+- [ ] 60 FPS maintained
+- [ ] Player can move to trigger chunk loading
+- [ ] New chunks load as player moves
+
+---
+
+## 📊 **DEBUG COMMANDS:**
+
+Open console (F12) and try:
+
+```javascript
+// Check if biomeSystem exists
+console.log(this.scene.scenes[1].biomeSystem);
+
+// Check if chunkManager exists
+console.log(this.scene.scenes[1].chunkManager);
+
+// Get chunk stats
+console.log(this.scene.scenes[1].chunkManager.getStats());
+
+// Get biome stats
+console.log(this.scene.scenes[1].biomeSystem.getBiomeStats());
+
+// Check current player position
+const pos = this.scene.scenes[1].player.getPosition();
+console.log(`Player at (${pos.x}, ${pos.y})`);
+
+// Get biome at player position
+const biome = this.scene.scenes[1].biomeSystem.getBiomeAt(pos.x, pos.y);
+console.log(`Player is in: ${biome} biome`);
+```
+
+---
+
+**Status:** Awaiting game load...
+**Time:** 17:18
+**Next:** Check console output

src/systems/Flat2DTerrainSystem.js

@@ -396,6 +396,29 @@ class Flat2DTerrainSystem {
         }
 
         console.log(`✅ Chunk (${chunk.chunkX}, ${chunk.chunkY}) rendered with biomes`);
+
+        // 🐛 DEBUG: Add visible border around chunk
+        if (this.scene.add) {
+            const chunkWorldX = chunk.chunkX * (this.chunkSize * size);
+            const chunkWorldY = chunk.chunkY * (this.chunkSize * size);
+            const chunkPixelSize = this.chunkSize * size;
+
+            const border = this.scene.add.rectangle(
+                chunkWorldX,
+                chunkWorldY,
+                chunkPixelSize,
+                chunkPixelSize
+            );
+            border.setOrigin(0, 0);
+            border.setStrokeStyle(2, 0xFF0000, 0.5); // Red semi-transparent border
+            border.setDepth(100); // High depth to see it
+            border.setFillStyle(0x000000, 0); // No fill
+
+            if (!chunk.sprites) chunk.sprites = [];
+            chunk.sprites.push(border);
+
+            console.log(`🔲 Debug border added at (${chunkWorldX}, ${chunkWorldY})`);
+        }
     }
 
     // Add biome-specific feature