game.js

import * as THREE from 'three';
// import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Keep commented unless needed

// --- DOM Elements ---
const sceneContainer = document.getElementById('scene-container');
const storyTitleElement = document.getElementById('story-title');
const storyContentElement = document.getElementById('story-content');
const choicesElement = document.getElementById('choices');
const statsElement = document.getElementById('stats-display');
const inventoryElement = document.getElementById('inventory-display');

// --- Config ---
const ROOM_SIZE = 10; // Size of each map grid cell in 3D space
const WALL_HEIGHT = 4;
const WALL_THICKNESS = 0.5;
const CAMERA_HEIGHT = 15; // How high the overhead camera is

// --- Three.js Setup ---
let scene, camera, renderer;
let mapGroup; // A group to hold all map related objects
// let controls; // Optional OrbitControls

function initThreeJS() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x111111); // Darker background for contrast
    scene.fog = new THREE.Fog(0x111111, CAMERA_HEIGHT * 1.5, CAMERA_HEIGHT * 3); // Add fog for depth

    camera = new THREE.PerspectiveCamera(60, sceneContainer.clientWidth / sceneContainer.clientHeight, 0.1, 1000);
    // Set initial overhead position (will be updated)
    camera.position.set(0, CAMERA_HEIGHT, 0);
    camera.lookAt(0, 0, 0);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
    renderer.shadowMap.enabled = true; // Enable shadows if using lights that cast them
    sceneContainer.appendChild(renderer.domElement);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Softer ambient
    scene.add(ambientLight);
    // Light source directly above the center (acts like a player flashlight)
    const playerLight = new THREE.PointLight(0xffffff, 1.5, ROOM_SIZE * 3); // Intensity, Distance
    playerLight.position.set(0, CAMERA_HEIGHT - 2, 0); // Position slightly below camera
    scene.add(playerLight);
    // We will move this light with the camera/player later

    // Map Group
    mapGroup = new THREE.Group();
    scene.add(mapGroup);

    // Optional Controls (for debugging)
    // controls = new OrbitControls(camera, renderer.domElement);
    // controls.enableDamping = true;
    // controls.target.set(0, 0, 0); // Ensure controls start looking at origin

    window.addEventListener('resize', onWindowResize, false);
    animate();
}

function onWindowResize() {
    if (!renderer || !camera) return;
    camera.aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
}

function animate() {
    requestAnimationFrame(animate);
    // if (controls) controls.update();
    if (renderer && scene && camera) {
        renderer.render(scene, camera);
    }
}

// --- Primitive Creation Functions ---
const materials = {
    floor_forest: new THREE.MeshLambertMaterial({ color: 0x228B22 }), // Green
    floor_cave: new THREE.MeshLambertMaterial({ color: 0x696969 }), // Grey
    floor_room: new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), // Light Grey
    floor_city: new THREE.MeshLambertMaterial({ color: 0xdeb887 }), // Tan/Pavement
    wall: new THREE.MeshLambertMaterial({ color: 0x888888 }),
    door: new THREE.MeshLambertMaterial({ color: 0xcd853f }), // Peru (brownish)
    river: new THREE.MeshBasicMaterial({ color: 0x4682B4, transparent: true, opacity: 0.7 }), // Steel Blue
    unexplored: new THREE.MeshBasicMaterial({ color: 0x555555, wireframe: true }),
    visited_marker: new THREE.MeshBasicMaterial({ color: 0xaaaaaa, wireframe: true, transparent: true, opacity: 0.5 }), // Faint marker for visited
    current_marker: new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }), // Yellow marker
};

const geometries = {
    floor: new THREE.PlaneGeometry(ROOM_SIZE, ROOM_SIZE),
    wall: new THREE.BoxGeometry(ROOM_SIZE, WALL_HEIGHT, WALL_THICKNESS),
    wall_side: new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, ROOM_SIZE),
    marker: new THREE.BoxGeometry(ROOM_SIZE * 0.8, 0.1, ROOM_SIZE * 0.8), // Flat marker
    river: new THREE.PlaneGeometry(ROOM_SIZE * 0.3, ROOM_SIZE), // Thin river strip
};

function createFloor(type = 'room', x = 0, z = 0) {
    const material = materials[`floor_${type}`] || materials.floor_room;
    const floor = new THREE.Mesh(geometries.floor, material);
    floor.rotation.x = -Math.PI / 2; // Rotate to be flat
    floor.position.set(x * ROOM_SIZE, 0, z * ROOM_SIZE);
    floor.receiveShadow = true;
    return floor;
}

function createWall(direction, x = 0, z = 0) {
    let wall;
    const base_x = x * ROOM_SIZE;
    const base_z = z * ROOM_SIZE;
    const half_room = ROOM_SIZE / 2;
    const wall_y = WALL_HEIGHT / 2; // Position center of wall at half height

    switch (direction) {
        case 'north':
            wall = new THREE.Mesh(geometries.wall, materials.wall);
            wall.position.set(base_x, wall_y, base_z - half_room);
            break;
        case 'south':
            wall = new THREE.Mesh(geometries.wall, materials.wall);
            wall.position.set(base_x, wall_y, base_z + half_room);
            break;
        case 'east':
            wall = new THREE.Mesh(geometries.wall_side, materials.wall);
            wall.position.set(base_x + half_room, wall_y, base_z);
            break;
        case 'west':
            wall = new THREE.Mesh(geometries.wall_side, materials.wall);
            wall.position.set(base_x - half_room, wall_y, base_z);
            break;
        default: return null;
    }
    wall.castShadow = true;
    wall.receiveShadow = true;
    return wall;
}

function createFeature(feature, x = 0, z = 0) {
    const base_x = x * ROOM_SIZE;
    const base_z = z * ROOM_SIZE;
    let mesh = null;
    // Example: Add a river feature
    if (feature === 'river') {
        mesh = new THREE.Mesh(geometries.river, materials.river);
        mesh.rotation.x = -Math.PI / 2;
        mesh.position.set(base_x, 0.05, base_z); // Slightly above floor
    }
    // Add more features: 'door_north', 'chest', 'tree' etc.
    // For doors, you might modify/omit wall segments instead of adding an object
    return mesh;
}


function createMarker(type, x = 0, z = 0) {
    let material;
    switch (type) {
        case 'current': material = materials.current_marker; break;
        case 'visited': material = materials.visited_marker; break;
        case 'unexplored': material = materials.unexplored; break;
        default: return null;
    }
    const marker = new THREE.Mesh(geometries.marker, material);
    marker.position.set(x * ROOM_SIZE, 0.1, z * ROOM_SIZE); // Slightly above floor
    return marker;
}

// --- Game Data (ADD MAP COORDINATES and TYPE/FEATURES) ---
const gameData = {
    // Page ID: { title, content, options, illustration(optional), mapX, mapY, type, features? }
    "1": {
        title: "The Beginning", content: "<p>...</p>", illustration: "city-gates",
        mapX: 0, mapY: 0, type: 'city', features: ['door_north'], // Example feature
        options: [
            { text: "Visit the local weaponsmith", next: 2 },
            { text: "Seek wisdom at the temple", next: 3 },
            { text: "Meet the resistance leader", next: 4 }
        ]
    },
    "2": { // Weaponsmith - let's place it near the start
        title: "The Weaponsmith", content: "<p>...</p>", illustration: "weaponsmith",
        mapX: -1, mapY: 0, type: 'room', features: ['door_east'],
        options: [
            { text: "Take Flaming Sword", next: 5, addItem: "Flaming Sword" },
            // ... other weapon choices ...
            { text: "Return to city square", next: 1 }
        ]
    },
    "3": { // Temple
        title: "The Ancient Temple", content: "<p>...</p>", illustration: "temple",
        mapX: 1, mapY: 0, type: 'room', features: ['door_west'],
         options: [
             { text: "Learn Healing Light", next: 5, addItem: "Healing Light Spell" },
             // ... other spell choices ...
             { text: "Return to city square", next: 1 }
        ]
    },
    "4": { // Resistance Tavern
        title: "The Resistance Leader", content: "<p>...</p>", illustration: "resistance-meeting",
        mapX: 0, mapY: -1, type: 'room', features: ['door_north'],
         options: [
             { text: "Take Secret Tunnel Map", next: 5, addItem: "Secret Tunnel Map" },
             // ... other item choices ...
             { text: "Return to city square", next: 1 }
        ]
    },
    "5": { // Start of Forest Path (North of City)
        title: "The Journey Begins", content: "<p>You leave Silverhold...</p>", illustration: "shadowwood-forest",
        mapX: 0, mapY: 1, type: 'forest', features: ['path_north', 'path_east', 'path_west', 'door_south'],
        options: [
            { text: "Take the main road (North)", next: 6 },
            { text: "Follow the river path (East)", next: 7 },
            { text: "Brave the ruins shortcut (West)", next: 8 },
            { text: "Return to the City Gate", next: 1} // Link back
        ]
    },
    "6": { // Forest Path North
        title: "Ambush!", content: "<p>Scouts jump out!</p>", illustration: "road-ambush",
        mapX: 0, mapY: 2, type: 'forest', features: ['path_north', 'path_south'],
        // Challenge will determine next step (9 or 10)
         challenge: { title: "Escape Ambush", stat: "courage", difficulty: 5, success: 9, failure: 10 },
         options: [] // Options determined by challenge
    },
     "7": { // River Path East
         title: "Misty River", content: "<p>A spirit appears...</p>", illustration: "river-spirit",
         mapX: 1, mapY: 1, type: 'forest', features: ['river', 'path_west'],
         challenge: { title: "River Riddle", stat: "wisdom", difficulty: 6, success: 11, failure: 12 },
         options: []
     },
     "8": { // Ruins Path West
         title: "Forgotten Ruins", content: "<p>Whispers echo...</p>", illustration: "ancient-ruins",
         mapX: -1, mapY: 1, type: 'ruins', features: ['path_east'],
         challenge: { title: "Navigate Ruins", stat: "wisdom", difficulty: 5, success: 13, failure: 14 },
         options: []
     },
     // --- Corresponding Challenge Outcomes ---
     "9": { // Success Ambush (Continue North)
        title: "Breaking Through", content: "<p>You fought them off!</p>", illustration: "forest-edge",
        mapX: 0, mapY: 3, type: 'forest', features: ['path_north', 'path_south'], // Edge of forest
        options: [ {text: "Cross the plains", next: 15} ] // To page 15 (fortress approach)
     },
     "10": { // Failure Ambush (Captured) -> Leads to different location potentially? Let's put it nearby for now.
         title: "Captured!", content: "<p>They drag you to an outpost.</p>", illustration: "prisoner-cell",
         mapX: 1, mapY: 2, type: 'cave', // Represent outpost as cave/cell
         options: [ { text: "Wait...", next: 20 } ] // Link to page 20 logic
     },
     "11": { // Success Riddle
         title: "Spirit's Blessing", content: "<p>The spirit blesses you.</p>", illustration: "spirit-blessing",
         mapX: 1, mapY: 1, type: 'forest', features: ['river', 'path_west'], // Stay in same spot, get item/stat
         addItem: "Water Spirit's Blessing", statIncrease: { stat: "wisdom", amount: 2 },
         options: [ { text: "Continue journey", next: 15 } ] // Option to move on
     },
    "12": { // Failure Riddle
         title: "Spirit's Wrath", content: "<p>Pulled underwater!</p>", illustration: "river-danger",
         mapX: 1, mapY: 1, type: 'forest', features: ['river', 'path_west'], // Stay in same spot, lose HP
         hpLoss: 8,
         options: [ { text: "Struggle onwards", next: 15 } ]
     },
     "13": { // Success Ruins
         title: "Ancient Allies", content: "<p>The spirits offer help.</p>", illustration: "ancient-spirits",
         mapX: -1, mapY: 1, type: 'ruins', features: ['path_east'],
         addItem: "Ancient Amulet", statIncrease: { stat: "wisdom", amount: 1 },
         options: [ { text: "Accept amulet and continue", next: 15 } ]
     },
     "14": { // Failure Ruins
         title: "Lost in Time", content: "<p>Exhausted from the maze.</p>", illustration: "lost-ruins",
         mapX: -1, mapY: 1, type: 'ruins', features: ['path_east'],
         hpLoss: 10,
         options: [ { text: "Push onwards, weakened", next: 15 } ]
     },
     "15": { // Fortress Approach (example)
        title: "The Looming Fortress", content: "<p>The dark fortress rises...</p>", illustration: "evil-fortress",
        mapX: 0, mapY: 4, type: 'plains', // Barren plains
        options: [ /* ... options to infiltrate ... */ {text: "Survey the area", next: 16} ]
     },
     // ... Add ALL other pages with mapX, mapY, type, features ...
    "99": {
        title: "Game Over", content: "<p>Your adventure ends here.</p>",
        mapX: 0, mapY: 0, type: 'gameover', // Special type
        options: [{ text: "Restart", next: 1 }],
        illustration: "game-over",
        gameOver: true
     }
};

const itemsData = { // (Keep this data as before)
    "Flaming Sword": { type: "weapon", description: "A fiery blade. +3 Attack.", attackBonus: 3 },
    "Whispering Bow": { type: "weapon", description: "A silent bow. +2 Attack.", attackBonus: 2 },
    // ... other items ...
    "Secret Tunnel Map": { type: "quest", description: "Shows a hidden path" },
    "Master Key": { type: "quest", description: "Unlocks many doors" },
    "Ancient Amulet": { type: "armor", description: "Wards off some dark magic. +1 Defense", defenseBonus: 1}, // Made armor type
};

// --- Game State ---
let gameState = {}; // Initialize in startGame
let visitedCoords = new Set(); // Track visited map coordinates as "x,y" strings

// --- Game Logic Functions ---

function startGame() {
    gameState = { // Reset state
        currentPageId: 1,
        inventory: [],
        stats: { courage: 7, wisdom: 5, strength: 6, hp: 30, maxHp: 30 }
    };
    visitedCoords = new Set(); // Reset visited locations
    const startPage = gameData[gameState.currentPageId];
    if (startPage && startPage.mapX !== undefined && startPage.mapY !== undefined) {
        visitedCoords.add(`${startPage.mapX},${startPage.mapY}`); // Mark start as visited
    }
    renderPage(gameState.currentPageId);
}

function renderPage(pageId) {
    const page = gameData[pageId];
    if (!page) {
        console.error(`Error: Page data not found for ID: ${pageId}`);
        // Handle error state more gracefully if needed
        storyTitleElement.textContent = "Error";
        storyContentElement.innerHTML = "<p>Adventure lost in the void!</p>";
         choicesElement.innerHTML = ''; // Clear choices
         addChoiceButton("Restart", 1); // Add only restart
        updateScene(null); // Clear the scene or show error state
        return;
    }

    // Update UI Text
    storyTitleElement.textContent = page.title || "Untitled Location";
    storyContentElement.innerHTML = page.content || "<p>...</p>";
    updateStatsDisplay();
    updateInventoryDisplay();

    // Update Choices based on requirements
    choicesElement.innerHTML = ''; // Clear old choices
    let hasAvailableOptions = false;
    if (page.options && !page.challenge && !page.gameOver) { // Don't show choices if there's a challenge or game over
        page.options.forEach(option => {
             // Check requirements before adding the button
            const requirementFailed = !checkChoiceRequirements(option, gameState.inventory);
            const button = addChoiceButton(option.text, option.next, option.addItem, requirementFailed);
            if (!requirementFailed) {
                hasAvailableOptions = true;
            }
        });
    }

     // Handle Game Over / No Options / Challenge Page
     if (page.gameOver) {
          addChoiceButton("Restart Adventure", 1);
          hasAvailableOptions = true; // Allow restart
     } else if (page.challenge) {
          choicesElement.innerHTML = `<p><i>A challenge blocks your path...</i></p>`;
          // Challenge resolved in handleChoiceClick *after* rendering this page
     } else if (!hasAvailableOptions && !page.gameOver && !page.challenge) {
          choicesElement.innerHTML = '<p><i>No further options available from here.</i></p>';
          addChoiceButton("Restart Adventure", 1);
     }

    // Update 3D Scene based on current page's coordinates
    updateScene(pageId);
}

// Helper to add choice buttons
function addChoiceButton(text, nextPage, addItem = null, disabled = false, requireItem = null, requireAnyItem = null) {
     const button = document.createElement('button');
     button.classList.add('choice-button');
     button.textContent = text;
     button.disabled = disabled;

     // Store data
     button.dataset.nextPage = nextPage;
     if (addItem) button.dataset.addItem = addItem;

     // Create tooltip for disabled buttons based on requirement
     if (disabled) {
         if (requireItem) button.title = `Requires: ${requireItem}`;
         else if (requireAnyItem) button.title = `Requires one of: ${requireAnyItem.join(', ')}`;
         else button.title = `Cannot choose this option now.`;
     }

     if (!disabled) {
         button.onclick = () => handleChoiceClick(button.dataset);
     }
     choicesElement.appendChild(button);
     return button; // Return button in case needed
}


// Check choice requirements (returns true if requirements MET)
function checkChoiceRequirements(option, inventory) {
    const reqItem = option.requireItem;
    if (reqItem && !inventory.includes(reqItem)) {
        return false; // Specific item required but not present
    }
    const reqAnyItem = option.requireAnyItem;
    if (reqAnyItem && !reqAnyItem.some(item => inventory.includes(item))) {
        return false; // Required one item from list, but none present
    }
    return true; // All requirements met or no requirements
}

function handleChoiceClick(dataset) {
    const nextPageId = parseInt(dataset.nextPage);
    const itemToAdd = dataset.addItem;

    if (isNaN(nextPageId)) {
        console.error("Invalid nextPageId:", dataset.nextPage);
        return;
    }

    // --- Process Effects of Making the Choice ---
    if (itemToAdd && !gameState.inventory.includes(itemToAdd)) {
        gameState.inventory.push(itemToAdd);
        console.log("Added item:", itemToAdd);
        // Add feedback to player? Maybe via story text update?
    }

    // --- Move to Next Page ---
    const previousPageId = gameState.currentPageId;
    gameState.currentPageId = nextPageId;

    const nextPageData = gameData[nextPageId];
    if (!nextPageData) {
        console.error(`Data for page ${nextPageId} not found!`);
        renderPage(99); // Go to game over page as fallback
        return;
    }

     // Add coordinates to visited set
     if (nextPageData.mapX !== undefined && nextPageData.mapY !== undefined) {
         visitedCoords.add(`${nextPageData.mapX},${nextPageData.mapY}`);
     }


    // --- Process Landing Effects & Challenges ---
    let currentPageIdAfterEffects = nextPageId; // Start with the target page ID

    // Apply HP loss defined on the *landing* page
    if (nextPageData.hpLoss) {
        gameState.stats.hp -= nextPageData.hpLoss;
        console.log(`Lost ${nextPageData.hpLoss} HP. Current HP: ${gameState.stats.hp}`);
        if (gameState.stats.hp <= 0) {
            console.log("Player died from HP loss!");
            gameState.stats.hp = 0;
            renderPage(99); // Go to a specific game over page ID
            return;
        }
    }
    // Apply stat increase defined on the *landing* page
    if (nextPageData.statIncrease) {
        const stat = nextPageData.statIncrease.stat;
        const amount = nextPageData.statIncrease.amount;
        if (gameState.stats.hasOwnProperty(stat)) {
            gameState.stats[stat] += amount;
            console.log(`Stat ${stat} increased by ${amount}.`);
        }
    }

     // Handle Challenge on the landing page
     if (nextPageData.challenge) {
          const challenge = nextPageData.challenge;
          const reqStat = challenge.stat;
          const difficulty = challenge.difficulty;
          const successPage = challenge.success;
          const failurePage = challenge.failure;

          if (reqStat && difficulty !== undefined && successPage !== undefined && failurePage !== undefined) {
             const currentStatValue = gameState.stats[reqStat] || 0;
             const roll = Math.floor(Math.random() * 6) + 1;
             const total = roll + currentStatValue;
             const success = total >= difficulty;

             console.log(`Challenge: ${challenge.title || 'Test'}. Roll(${roll}) + ${reqStat}(${currentStatValue}) = ${total} vs DC ${difficulty}. Success: ${success}`);

             // Update page based on challenge result
             currentPageIdAfterEffects = success ? successPage : failurePage;

             // Apply stat change from challenge outcome (optional: only on success/failure?)
             // This example applies basic +/- based on outcome
             if(gameState.stats.hasOwnProperty(reqStat)) {
                gameState.stats[reqStat] += success ? 1 : -1;
                gameState.stats[reqStat] = Math.max(1, gameState.stats[reqStat]); // Don't go below 1
             }

             // Add challenge result to story? (Needs modification of renderPage or state)

             // If challenge leads to non-existent page, handle error
             if (!gameData[currentPageIdAfterEffects]) {
                  console.error(`Challenge outcome page ${currentPageIdAfterEffects} not found!`);
                  renderPage(99); return;
             }
              // Update visited coords for the challenge outcome page
              const challengeOutcomePageData = gameData[currentPageIdAfterEffects];
               if (challengeOutcomePageData.mapX !== undefined && challengeOutcomePageData.mapY !== undefined) {
                    visitedCoords.add(`${challengeOutcomePageData.mapX},${challengeOutcomePageData.mapY}`);
               }


          } else {
              console.error("Malformed challenge data on page", nextPageId);
          }
          gameState.currentPageId = currentPageIdAfterEffects; // Update state with final page after challenge
     }


    // --- Render the final page after all effects/challenges ---
    renderPage(gameState.currentPageId);
}


function updateStatsDisplay() {
    let statsHTML = ''; // Start fresh
    statsHTML += `<span>HP: ${gameState.stats.hp}/${gameState.stats.maxHp}</span>`;
    statsHTML += `<span>Str: ${gameState.stats.strength}</span>`;
    statsHTML += `<span>Wis: ${gameState.stats.wisdom}</span>`;
    statsHTML += `<span>Cor: ${gameState.stats.courage}</span>`;
    statsElement.innerHTML = statsHTML;
}

function updateInventoryDisplay() {
    let inventoryHTML = ''; // Start fresh
    if (gameState.inventory.length === 0) {
        inventoryHTML += '<em>Empty</em>';
    } else {
        gameState.inventory.forEach(item => {
            const itemInfo = itemsData[item] || { type: 'unknown', description: '???' };
            const itemClass = `item-${itemInfo.type || 'unknown'}`;
            inventoryHTML += `<span class="${itemClass}" title="${itemInfo.description}">${item}</span>`;
        });
    }
    inventoryElement.innerHTML = inventoryHTML;
}

// --- Map and Scene Update Logic ---
function updateScene(currentPageId) {
    if (!mapGroup) return;

    // Clear previous map elements
    while (mapGroup.children.length > 0) {
        mapGroup.remove(mapGroup.children[0]);
    }

    const currentPageData = gameData[currentPageId];
    if (!currentPageData || currentPageData.mapX === undefined || currentPageData.mapY === undefined) {
        console.warn("Cannot update scene, current page has no map coordinates:", currentPageId);
         // Maybe show a default "limbo" state?
        camera.position.set(0, CAMERA_HEIGHT, 0);
        camera.lookAt(0, 0, 0);
        if (scene.getObjectByName("playerLight")) scene.getObjectByName("playerLight").position.set(0, CAMERA_HEIGHT - 2, 0);
        return;
    }

    const currentX = currentPageData.mapX;
    const currentY = currentPageData.mapY; // Using Y for Z in 3D

    // Update camera and light position to center on current room
    const targetX = currentX * ROOM_SIZE;
    const targetZ = currentY * ROOM_SIZE;
    camera.position.set(targetX, CAMERA_HEIGHT, targetZ + 0.1); // Offset slightly to avoid z-fighting if looking straight down
    camera.lookAt(targetX, 0, targetZ);
    const playerLight = scene.getObjectByName("playerLight"); // Get light added in init
    if (playerLight) playerLight.position.set(targetX, CAMERA_HEIGHT - 2, targetZ);


    // Define view distance (how many neighbors to render)
    const viewDistance = 2;

    // Render current room and neighbors
    for (let dx = -viewDistance; dx <= viewDistance; dx++) {
        for (let dy = -viewDistance; dy <= viewDistance; dy++) {
            const checkX = currentX + dx;
            const checkY = currentY + dy;
            const coordString = `${checkX},${checkY}`;

            // Find page ID for this coordinate (requires efficient lookup - maybe build map index?)
            let pageIdAtCoord = null;
            for (const id in gameData) {
                if (gameData[id].mapX === checkX && gameData[id].mapY === checkY) {
                    pageIdAtCoord = id;
                    break;
                }
            }

            if (pageIdAtCoord) {
                const pageDataAtCoord = gameData[pageIdAtCoord];
                const isVisited = visitedCoords.has(coordString);
                const isCurrent = (checkX === currentX && checkY === currentY);

                if (isCurrent || isVisited) {
                    // Render visited/current room
                    const floor = createFloor(pageDataAtCoord.type, checkX, checkY);
                    mapGroup.add(floor);

                    // Add walls (simplified: add all 4 unless a feature indicates door/opening)
                    // More complex: check connections to neighbors
                    const features = pageDataAtCoord.features || [];
                    if (!features.includes('door_north')) mapGroup.add(createWall('north', checkX, checkY));
                    if (!features.includes('door_south')) mapGroup.add(createWall('south', checkX, checkY));
                    if (!features.includes('door_east')) mapGroup.add(createWall('east', checkX, checkY));
                    if (!features.includes('door_west')) mapGroup.add(createWall('west', checkX, checkY));

                     // Add other features
                     features.forEach(feature => {
                         const featureMesh = createFeature(feature, checkX, checkY);
                         if (featureMesh) mapGroup.add(featureMesh);
                     });


                    // Add marker
                    if (isCurrent) {
                        mapGroup.add(createMarker('current', checkX, checkY));
                    } else {
                        mapGroup.add(createMarker('visited', checkX, checkY));
                    }

                } else {
                    // Render unexplored marker for adjacent non-visited rooms
                     if(Math.abs(dx) <= 1 && Math.abs(dy) <= 1 && !(dx === 0 && dy ===0)) { // Only immediate neighbors
                       mapGroup.add(createMarker('unexplored', checkX, checkY));
                     }
                }
            } else {
                // Optional: Render something if coordinate is empty but adjacent (like a boundary wall)
                 // Or just leave it empty (part of the fog)
            }
        }
    }
     // Update controls target if using OrbitControls
     // if (controls) controls.target.set(targetX, 0, targetZ);
}


// --- Initialization ---
initThreeJS();
startGame(); // Start the game after setting up Three.js