Update index.html

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Choose Your Own Procedural Adventure</title>
     <style>
+        /* [Keep all existing CSS rules here] */
         body {
             font-family: 'Courier New', monospace;
             background-color: #222;
@@ -38,7 +39,7 @@
             padding: 20px;
             overflow-y: auto;
             background-color: #333;
-            min-width: 280px;
+            min-width: 280px; /* Increased min-width slightly */
             height: 100%;
             box-sizing: border-box;
             display: flex;
@@ -59,7 +60,7 @@
         #story-content {
             margin-bottom: 20px;
             line-height: 1.6;
-            flex-grow: 1;
+            flex-grow: 1; /* Let story content grow */
         }
         #story-content p { margin-bottom: 1em; }
         #story-content p:last-child { margin-bottom: 0; }
@@ -100,7 +101,7 @@
         #inventory-display .item-unknown { background-color: #555; border-color: #777;}
 
         #choices-container {
-            margin-top: auto;
+            margin-top: auto; /* Push choices to bottom */
             padding-top: 15px;
             border-top: 1px solid #555;
         }
@@ -118,8 +119,15 @@
         .choice-button:hover:not(:disabled) { background-color: #d4a017; color: #222; border-color: #b8860b; }
         .choice-button:disabled { background-color: #444; color: #888; cursor: not-allowed; border-color: #666; opacity: 0.7; }
 
-        .sell-button { background-color: #4a4a4a; border-color: #6a6a6a; }
-        .sell-button:hover:not(:disabled) { background-color: #a07017; border-color: #80500b; }
+        /* Specific style for Sell buttons */
+        .sell-button {
+            background-color: #4a4a4a;
+            border-color: #6a6a6a;
+        }
+        .sell-button:hover:not(:disabled) {
+            background-color: #a07017; /* Different hover for sell */
+            border-color: #80500b;
+        }
 
         .roll-success { color: #7f7; border-left: 3px solid #4a4; padding-left: 8px; margin-bottom: 1em; font-size: 0.9em; }
         .roll-failure { color: #f77; border-left: 3px solid #a44; padding-left: 8px; margin-bottom: 1em; font-size: 0.9em; }
@@ -131,7 +139,7 @@
         <div id="ui-container">
             <h2 id="story-title">Loading Adventure...</h2>
             <div id="story-content">
-                <p>Please wait while the adventure loads.</p>
+                <p id="loading-message">Please wait while the adventure loads.</p>
             </div>
             <div id="stats-inventory-container">
                 <div id="stats-display"></div>
@@ -156,19 +164,21 @@
     <script type="module">
         import * as THREE from 'three';
 
-        // DOM Element References (Checked - OK)
+        // DOM Element References
         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');
+        const loadingMessageElement = document.getElementById('loading-message'); // Get reference to loading message
 
-        // Global Three.js Variables (Checked - OK)
+        // Global Three.js Variables
         let scene, camera, renderer;
         let currentAssemblyGroup = null;
+        let loadingIntervalId = null; // Variable to hold the timer ID
 
-        // Materials (Checked - OK)
+        // --- Materials --- [Unchanged]
         const stoneMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.1 });
         const woodMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7, metalness: 0 });
         const darkWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x5C3D20, roughness: 0.7, metalness: 0 });
@@ -185,94 +195,16 @@
         const wetStoneMaterial = new THREE.MeshStandardMaterial({ color: 0x2F4F4F, roughness: 0.7 });
         const glowMaterial = new THREE.MeshStandardMaterial({ color: 0x00FFAA, emissive: 0x00FFAA, emissiveIntensity: 0.5 });
 
-        // --- Three.js Setup --- (Checked - OK)
-        function initThreeJS() {
-            if (!sceneContainer) { console.error("Scene container not found!"); return false; } // Return boolean on failure
-            try {
-                scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x222222);
-                const width = sceneContainer.clientWidth;
-                const height = sceneContainer.clientHeight;
-                if (!width || !height) {
-                     console.warn("Scene container has zero dimensions initially.");
-                     // Use fallback or wait? For now, proceed but log.
-                 }
-                camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000);
-                camera.position.set(0, 2.5, 7);
-                camera.lookAt(0, 0.5, 0);
-                renderer = new THREE.WebGLRenderer({ antialias: true });
-                renderer.setSize(width || 400, height || 300); // Use fallback dimensions
-                renderer.shadowMap.enabled = true;
-                renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-                sceneContainer.innerHTML = ''; // Clear previous content/errors
-                sceneContainer.appendChild(renderer.domElement);
-                const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-                scene.add(ambientLight);
-                window.addEventListener('resize', onWindowResize, false);
-                setTimeout(onWindowResize, 100);
-                animate();
-                return true; // Indicate success
-             } catch (error) {
-                 console.error("Error during Three.js initialization:", error);
-                 return false; // Indicate failure
-             }
-        }
-
-        function onWindowResize() {
-            if (!renderer || !camera || !sceneContainer) return;
-            const width = sceneContainer.clientWidth;
-            const height = sceneContainer.clientHeight;
-            if (width > 0 && height > 0) {
-                camera.aspect = width / height;
-                camera.updateProjectionMatrix();
-                renderer.setSize(width, height);
-            } else {
-                console.warn("onWindowResize called with zero dimensions.");
-            }
-        }
-
-        function animate() {
-             // Guard against errors if renderer/scene is not valid
-             if (!renderer || !scene || !camera) {
-                 // console.warn("Animation loop called before Three.js fully initialized or after error.");
-                 return;
-             }
-             requestAnimationFrame(animate); // Request next frame first
-             try {
-                 const time = performance.now() * 0.001;
-                 scene.traverse(obj => {
-                     if (obj.userData && obj.userData.update && typeof obj.userData.update === 'function') {
-                         obj.userData.update(time);
-                     }
-                 });
-                 renderer.render(scene, camera);
-             } catch (error) {
-                 console.error("Error during animation/render loop:", error);
-                 // Optionally stop the loop or display an error overlay
-                 // For now, just log it to avoid crashing the browser if possible
-             }
-        }
-
-        function createMesh(geometry, material, position = { x: 0, y: 0, z: 0 }, rotation = { x: 0, y: 0, z: 0 }, scale = { x: 1, y: 1, z: 1 }) {
-            const mesh = new THREE.Mesh(geometry, material);
-            mesh.position.set(position.x, position.y, position.z);
-            mesh.rotation.set(rotation.x, rotation.y, rotation.z);
-            mesh.scale.set(scale.x, scale.y, scale.z);
-            mesh.castShadow = true; mesh.receiveShadow = true;
-            return mesh;
-        }
 
-        function createGroundPlane(material = groundMaterial, size = 20) {
-            const groundGeo = new THREE.PlaneGeometry(size, size);
-            const ground = new THREE.Mesh(groundGeo, material);
-            ground.rotation.x = -Math.PI / 2; ground.position.y = -0.05;
-            ground.receiveShadow = true; ground.castShadow = false;
-            return ground;
-        }
+        // --- Three.js Setup --- [Unchanged]
+        function initThreeJS() { if (!sceneContainer) { console.error("Scene container not found!"); return false; } try { scene = new THREE.Scene(); scene.background = new THREE.Color(0x222222); const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight; if (!width || !height) { console.warn("Scene container has zero dimensions initially."); } camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000); camera.position.set(0, 2.5, 7); camera.lookAt(0, 0.5, 0); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width || 400, height || 300); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; sceneContainer.innerHTML = ''; sceneContainer.appendChild(renderer.domElement); const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); window.addEventListener('resize', onWindowResize, false); setTimeout(onWindowResize, 100); animate(); return true; } catch (error) { console.error("Error during Three.js initialization:", error); return false; } }
+        function onWindowResize() { if (!renderer || !camera || !sceneContainer) return; const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight; if (width > 0 && height > 0) { camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); } else { console.warn("onWindowResize called with zero dimensions."); } }
+        function animate() { if (!renderer || !scene || !camera) { return; } requestAnimationFrame(animate); try { const time = performance.now() * 0.001; scene.traverse(obj => { if (obj.userData && obj.userData.update && typeof obj.userData.update === 'function') { obj.userData.update(time); } }); renderer.render(scene, camera); } catch (error) { console.error("Error during animation/render loop:", error); } }
+        function createMesh(geometry, material, position = { x: 0, y: 0, z: 0 }, rotation = { x: 0, y: 0, z: 0 }, scale = { x: 1, y: 1, z: 1 }) { const mesh = new THREE.Mesh(geometry, material); mesh.position.set(position.x, position.y, position.z); mesh.rotation.set(rotation.x, rotation.y, rotation.z); mesh.scale.set(scale.x, scale.y, scale.z); mesh.castShadow = true; mesh.receiveShadow = true; return mesh; }
+        function createGroundPlane(material = groundMaterial, size = 20) { const groundGeo = new THREE.PlaneGeometry(size, size); const ground = new THREE.Mesh(groundGeo, material); ground.rotation.x = -Math.PI / 2; ground.position.y = -0.05; ground.receiveShadow = true; ground.castShadow = false; return ground; }
 
-        // --- Procedural Generation Functions --- (Checked - OK)
-        // [Keep all create...Assembly functions here - unchanged from previous]
-        // ... (createDefaultAssembly, createCityGatesAssembly, ..., createDarkCaveAssembly) ...
+        // --- Procedural Generation Functions --- [Unchanged]
+        // [Keep all create...Assembly functions here]
         function createDefaultAssembly() { const group = new THREE.Group(); const sphereGeo = new THREE.SphereGeometry(0.5, 16, 16); group.add(createMesh(sphereGeo, stoneMaterial, { x: 0, y: 0.5, z: 0 })); group.add(createGroundPlane()); return group; }
         function createCityGatesAssembly() { const group = new THREE.Group(); const gh = 4, gw = 1.5, gd = 0.8, ah = 1, aw = 3; const tlGeo = new THREE.BoxGeometry(gw, gh, gd); group.add(createMesh(tlGeo, stoneMaterial, { x: -(aw / 2 + gw / 2), y: gh / 2, z: 0 })); const trGeo = new THREE.BoxGeometry(gw, gh, gd); group.add(createMesh(trGeo, stoneMaterial, { x: (aw / 2 + gw / 2), y: gh / 2, z: 0 })); const aGeo = new THREE.BoxGeometry(aw, ah, gd); group.add(createMesh(aGeo, stoneMaterial, { x: 0, y: gh - ah / 2, z: 0 })); const cs = 0.4; const cg = new THREE.BoxGeometry(cs, cs, gd * 1.1); for (let i = -1; i <= 1; i += 2) { group.add(createMesh(cg.clone(), stoneMaterial, { x: -(aw / 2 + gw / 2) + i * cs * 0.7, y: gh + cs / 2, z: 0 })); group.add(createMesh(cg.clone(), stoneMaterial, { x: (aw / 2 + gw / 2) + i * cs * 0.7, y: gh + cs / 2, z: 0 })); } group.add(createMesh(cg.clone(), stoneMaterial, { x: 0, y: gh + ah - cs / 2, z: 0 })); group.add(createGroundPlane(stoneMaterial)); return group; }
         function createWeaponsmithAssembly() { const group = new THREE.Group(); const bw = 3, bh = 2.5, bd = 3.5; const bGeo = new THREE.BoxGeometry(bw, bh, bd); group.add(createMesh(bGeo, darkWoodMaterial, { x: 0, y: bh / 2, z: 0 })); const ch = 3.5; const cGeo = new THREE.CylinderGeometry(0.3, 0.4, ch, 8); group.add(createMesh(cGeo, stoneMaterial, { x: bw * 0.3, y: ch / 2, z: -bd * 0.3 })); group.add(createGroundPlane(dirtMaterial)); return group; }
@@ -295,25 +227,23 @@
         function createDarkCaveAssembly() { const group = new THREE.Group(); const caveRadius = 5; const caveHeight = 4; group.add(createGroundPlane(wetStoneMaterial, caveRadius * 2)); const wallGeo = new THREE.SphereGeometry(caveRadius, 32, 16, 0, Math.PI * 2, 0, Math.PI / 1.5); const wallMat = wetStoneMaterial.clone(); wallMat.side = THREE.BackSide; const wall = new THREE.Mesh(wallGeo, wallMat); wall.position.y = caveHeight * 0.6; group.add(wall); const stalactiteGeo = new THREE.ConeGeometry(0.1, 0.8, 8); const stalagmiteGeo = new THREE.ConeGeometry(0.15, 0.5, 8); for (let i = 0; i < 15; i++) { const x = (Math.random() - 0.5) * caveRadius * 1.5; const z = (Math.random() - 0.5) * caveRadius * 1.5; if (Math.random() > 0.5) { group.add(createMesh(stalactiteGeo, wetStoneMaterial, { x: x, y: caveHeight - 0.4, z: z })) } else { group.add(createMesh(stalagmiteGeo, wetStoneMaterial, { x: x, y: 0.25, z: z })) } } const dripGeo = new THREE.SphereGeometry(0.05, 8, 8); for (let i = 0; i < 5; i++) { const drip = createMesh(dripGeo, oceanMaterial, { x: (Math.random() - 0.5) * caveRadius, y: caveHeight - 0.2, z: (Math.random() - 0.5) * caveRadius }); drip.userData.startY = caveHeight - 0.2; drip.userData.update = (time) => { drip.position.y -= 0.1; if (drip.position.y < 0) { drip.position.y = drip.userData.startY; drip.position.x = (Math.random() - 0.5) * caveRadius; drip.position.z = (Math.random() - 0.5) * caveRadius; } }; group.add(drip); } return group; }
 
         // ========================================
-        // Game Data (Checked - OK, added goldValue)
+        // Game Data
         // ========================================
-        const itemsData = {
+        const itemsData = { // [Unchanged]
             "Flaming Sword":      {type:"weapon", description:"A legendary blade, wreathed in magical fire.", goldValue: 500},
             "Whispering Bow":     {type:"weapon", description:"Crafted by elves, its arrows fly almost silently.", goldValue: 350},
             "Guardian Shield":    {type:"armor",  description:"A sturdy shield imbued with protective enchantments.", goldValue: 250},
             "Healing Light Spell":{type:"spell",  description:"A scroll containing the incantation to mend minor wounds.", goldValue: 50},
             "Shield of Faith Spell":{type:"spell",description:"A scroll containing a prayer that grants temporary magical protection.", goldValue: 75},
             "Binding Runes Scroll":{type:"spell", description:"Complex runes scribbled on parchment, said to temporarily immobilize a foe.", goldValue: 100},
-            "Secret Tunnel Map":  {type:"quest",  description:"A crudely drawn map showing a hidden path, perhaps into the fortress?", goldValue: 0}, // Quest items non-sellable
+            "Secret Tunnel Map":  {type:"quest",  description:"A crudely drawn map showing a hidden path, perhaps into the fortress?", goldValue: 0},
             "Poison Daggers":     {type:"weapon", description:"A pair of wicked-looking daggers coated in a fast-acting toxin.", goldValue: 150},
             "Master Key":         {type:"quest",  description:"An ornate key rumored to unlock many doors, though perhaps not all.", goldValue: 0},
             "Crude Dagger":       {type:"weapon", description:"A roughly made dagger, chipped and stained.", goldValue: 10},
-            "Scout's Pouch":      {type:"quest",  description:"A small leather pouch containing flint & steel, jerky, and some odd coins.", goldValue: 20} // Pouch itself has value
+            "Scout's Pouch":      {type:"quest",  description:"A small leather pouch containing flint & steel, jerky, and some odd coins.", goldValue: 20}
         };
 
-        const gameData = { // (Checked - OK, added allowSell flag to 99)
-            // [Keep all page data here - unchanged from previous]
-            // ... (pages 1 to 224) ...
+        const gameData = { // [Unchanged except page 99]
              "1": { title: "The Crossroads", content: `<p>Dust swirls around a weathered signpost under a bright, midday sun. Paths lead north into the gloomy Shadowwood, east towards rolling green hills, and west towards coastal cliffs battered by sea spray. Which path calls to you?</p>`, options: [ { text: "Enter the Shadowwood Forest (North)", next: 5 }, { text: "Head towards the Rolling Hills (East)", next: 2 }, { text: "Investigate the Coastal Cliffs (West)", next: 3 } ], illustration: "crossroads-signpost-sunny" },
              "2": { title: "Rolling Hills", content: `<p>Verdant hills stretch before you, dotted with wildflowers. A gentle breeze whispers through the tall grass. In the distance, you see a lone figure tending to a flock of sheep. It feels peaceful, almost unnervingly so after the crossroads.</p>`, options: [ { text: "Follow the narrow path winding through the hills", next: 4 }, { text: "Try to hail the distant shepherd (Charisma Check?)", next: 99 } ], illustration: "rolling-green-hills-shepherd-distance" },
              "3": { title: "Coastal Cliffs Edge", content: `<p>You stand atop windswept cliffs, the roar of crashing waves filling the air below. Seabirds circle overhead. A precarious-looking path, seemingly carved by desperate hands, descends the cliff face towards a hidden cove.</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 }, { text: "Scan the cliff face for easier routes (Wisdom Check)", check: { stat: 'wisdom', dc: 11, onFailure: 32 }, next: 33 } ], illustration: "windy-sea-cliffs-crashing-waves-path-down" },
@@ -328,7 +258,6 @@
              "13": { title: "Daring Escape", content: `<p>With surprising agility, you feint left, then dive right, tumbling past the goblins' clumsy spear thrusts! You scramble to your feet and sprint down the path, leaving the surprised goblins behind.</p><p>(+25 XP)</p>`, options: [ { text: "Keep running!", next: 14 } ], illustration: "blurred-motion-running-past-goblins-forest", reward: { xp: 25 } },
              "14": { title: "Forest Stream Crossing", content: `<p>The overgrown path eventually leads to the bank of a clear, shallow stream. Smooth, mossy stones line the streambed, and dappled sunlight filters through the leaves overhead, sparkling on the water's surface.</p>`, options: [ { text: "Wade across the stream", next: 16 }, { text: "Look for a drier crossing point (fallen log?) upstream", next: 15 } ], illustration: "forest-stream-crossing-dappled-sunlight-stones" },
              "15": { title: "Log Bridge", content: `<p>A short walk upstream reveals a large, fallen tree spanning the stream. It's covered in slick, green moss, making it look like a potentially treacherous crossing.</p>`, options: [ { text: "Cross carefully on the mossy log (Dexterity Check)", check: { stat: 'dexterity', dc: 9, onFailure: 151 }, next: 16 }, { text: "Decide it's too risky and go back to wade across", next: 14 } ], illustration: "mossy-log-bridge-over-forest-stream" },
-             "151": { title: "Splash!", content: `<p>You place a foot carefully on the log, but the moss is slicker than it looks! Your feet shoot out from under you, and you tumble into the cold stream with a loud splash! You're soaked and slightly embarrassed, but otherwise unharmed.</p>`, options: [ { text: "Shake yourself off and continue on the other side", next: 16 } ], illustration: "character-splashing-into-stream-from-log" },
              "16": { title: "Edge of the Woods", content: `<p>Finally, the trees begin to thin, and you emerge from the oppressive gloom of the Shadowwood. Before you lie steep, rocky foothills leading up towards a formidable-looking mountain fortress perched high above.</p>`, options: [ { text: "Begin the ascent into the foothills towards the fortress", next: 17 }, { text: "Scan the fortress and surrounding terrain from afar (Wisdom Check)", check: { stat: 'wisdom', dc: 14, onFailure: 17 }, next: 18 } ], illustration: "forest-edge-view-rocky-foothills-distant-mountain-fortress" },
              "17": { title: "Rocky Foothills Path", content: `<p>The climb is arduous, the path winding steeply upwards over loose scree and jagged rocks. The air thins slightly. The dark stone walls of the mountain fortress loom much larger now, seeming to watch your approach.</p>`, options: [ { text: "Continue the direct ascent", next: 19 }, { text: "Look for signs of a hidden trail or less obvious route (Wisdom Check)", check: { stat: 'wisdom', dc: 15, onFailure: 19 }, next: 20 } ], illustration: "climbing-rocky-foothills-path-fortress-closer" },
              "18": { title: "Distant Observation", content: `<p>Taking a moment to study the fortress from this distance, your keen eyes notice something interesting. The main approach looks heavily guarded, but along the western ridge, the terrain seems slightly less sheer, potentially offering a less-guarded, albeit more treacherous, approach.</p><p>(+30 XP)</p>`, options: [ { text: "Decide against the risk and take the main path into the foothills", next: 17 }, { text: "Attempt the western ridge approach", next: 21 } ], illustration: "zoomed-view-mountain-fortress-western-ridge", reward: { xp: 30 } },
@@ -364,19 +293,19 @@
              "401": { title: "Mysterious Carvings", content:"<p>The carvings are too worn and abstract to decipher their specific meaning, though you sense they are very old.</p>", options: [{text:"Continue towards the badlands", next: 41}], illustration: "overgrown-stone-shrine-wildflowers-close"},
              "402": { title: "Moment of Peace", content:"<p>You spend a quiet moment in reflection. While no divine voice answers, the tranquility of the place settles your nerves.</p>", options: [{text:"Continue towards the badlands", next: 41}], illustration: "overgrown-stone-shrine-wildflowers-close"},
 
-            // Game Over Page (allowSell enabled)
             "99": {
                 title: "Game Over / To Be Continued...",
                 content: "<p>Your adventure ends here... for now. You can sell unwanted items for gold before starting again.</p>",
                 options: [ /* Restart button added dynamically */ ],
                 illustration: "game-over-generic",
                 gameOver: true,
-                allowSell: true // Enable selling feature on this page
+                allowSell: true // Enable selling feature
              }
         };
 
+
         // ========================================
-        // Game State (Checked - OK, uses default)
+        // Game State
         // ========================================
         const defaultCharacterState = {
             name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer",
@@ -386,317 +315,119 @@
         };
         let gameState = {
             currentPageId: 1,
-            character: JSON.parse(JSON.stringify(defaultCharacterState)) // Start with default
+            character: JSON.parse(JSON.stringify(defaultCharacterState))
         };
 
+
         // ========================================
-        // Game Logic Functions (Checked - OK)
+        // Game Logic Functions
         // ========================================
 
+        // Clears the loading animation interval
+        function stopLoadingAnimation() {
+            if (loadingIntervalId !== null) {
+                clearInterval(loadingIntervalId);
+                loadingIntervalId = null;
+                // Optional: Reset loading message text if needed, though renderPageInternal will overwrite it
+                 if(loadingMessageElement) loadingMessageElement.textContent = "Please wait while the adventure loads.";
+                console.log("Loading animation stopped.");
+            }
+        }
+
         function startNewGame() {
             console.log("Starting brand new game...");
+            stopLoadingAnimation(); // Stop animation when game actually starts
             gameState = {
                 currentPageId: 1,
-                character: JSON.parse(JSON.stringify(defaultCharacterState)) // Full reset
+                character: JSON.parse(JSON.stringify(defaultCharacterState))
             };
-            renderPage(gameState.currentPageId); // Render page 1
+            renderPage(gameState.currentPageId);
         }
 
         function restartGamePlus() {
             console.log("Restarting game (keeping progress)...");
-            // Only reset current location, keep character object
+            stopLoadingAnimation(); // Stop animation if restarting from an error state perhaps
             gameState.currentPageId = 1;
-            renderPage(gameState.currentPageId); // Render page 1
+            renderPage(gameState.currentPageId);
         }
 
-        function handleChoiceClick(choiceData) {
+        function handleChoiceClick(choiceData) { // [Unchanged from previous working version]
             console.log("Choice clicked:", choiceData);
-            let feedbackMessage = ""; // Message passed to render function
-
-            // --- Special Actions ---
-            if (choiceData.action === 'restart_plus') {
-                restartGamePlus();
-                return;
-            }
-            if (choiceData.action === 'sell_item') {
-                // handleSellItem now returns the feedback message
-                feedbackMessage = handleSellItem(choiceData.item);
-                // Re-render the current page (99) with the feedback
-                renderPageInternal(gameState.currentPageId, gameData[gameState.currentPageId], feedbackMessage);
-                return;
-            }
-
-            // --- Standard Page Navigation ---
-            const optionNextPageId = parseInt(choiceData.next);
-            const itemToAdd = choiceData.addItem;
-            let nextPageId = optionNextPageId;
-            const check = choiceData.check;
-
-            if (isNaN(optionNextPageId) && !check) {
-                 console.error("Invalid choice data: Missing 'next' page ID and no check defined.", choiceData);
-                 feedbackMessage = `<p class="feedback-error">Error: Invalid choice data! Cannot proceed.</p>`;
-                 renderPageInternal(gameState.currentPageId, gameData[gameState.currentPageId], feedbackMessage);
-                 choicesElement.querySelectorAll('button').forEach(b => b.disabled = true);
-                 return;
-            }
-
-            // --- Skill Check ---
-            if (check) {
-                const statValue = gameState.character.stats[check.stat] || 10;
-                const modifier = Math.floor((statValue - 10) / 2);
-                const roll = Math.floor(Math.random() * 20) + 1;
-                const totalResult = roll + modifier;
-                const dc = check.dc;
-                const statName = check.stat.charAt(0).toUpperCase() + check.stat.slice(1);
-                console.log(`Check: ${statName} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
-                if (totalResult >= dc) {
-                    nextPageId = optionNextPageId;
-                    feedbackMessage += `<p class="roll-success"><em>${statName} Check Success! (${totalResult} vs DC ${dc})</em></p>`;
-                } else {
-                    nextPageId = parseInt(check.onFailure);
-                    feedbackMessage += `<p class="roll-failure"><em>${statName} Check Failed! (${totalResult} vs DC ${dc})</em></p>`;
-                    if (isNaN(nextPageId)) {
-                        console.error("Invalid onFailure ID:", check.onFailure);
-                        nextPageId = 99;
-                        feedbackMessage += `<p class="feedback-error">Error: Invalid failure path defined!</p>`;
-                    }
-                }
-            }
-
-            // --- Page Transition & Consequences ---
+            let feedbackMessage = "";
+            if (choiceData.action === 'restart_plus') { restartGamePlus(); return; }
+            if (choiceData.action === 'sell_item') { feedbackMessage = handleSellItem(choiceData.item); renderPageInternal(gameState.currentPageId, gameData[gameState.currentPageId], feedbackMessage); return; }
+            const optionNextPageId = parseInt(choiceData.next); const itemToAdd = choiceData.addItem; let nextPageId = optionNextPageId; const check = choiceData.check;
+            if (isNaN(optionNextPageId) && !check) { console.error("Invalid choice data:", choiceData); feedbackMessage = `<p class="feedback-error">Error: Invalid choice data!</p>`; renderPageInternal(gameState.currentPageId, gameData[gameState.currentPageId], feedbackMessage); choicesElement.querySelectorAll('button').forEach(b => b.disabled = true); return; }
+            if (check) { const statValue = gameState.character.stats[check.stat] || 10; const modifier = Math.floor((statValue - 10) / 2); const roll = Math.floor(Math.random() * 20) + 1; const totalResult = roll + modifier; const dc = check.dc; const statName = check.stat.charAt(0).toUpperCase() + check.stat.slice(1); console.log(`Check: ${statName} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`); if (totalResult >= dc) { nextPageId = optionNextPageId; feedbackMessage += `<p class="roll-success"><em>${statName} Check Success! (${totalResult} vs DC ${dc})</em></p>`; } else { nextPageId = parseInt(check.onFailure); feedbackMessage += `<p class="roll-failure"><em>${statName} Check Failed! (${totalResult} vs DC ${dc})</em></p>`; if (isNaN(nextPageId)) { console.error("Invalid onFailure ID:", check.onFailure); nextPageId = 99; feedbackMessage += `<p class="feedback-error">Error: Invalid failure path!</p>`; } } }
             const targetPageData = gameData[nextPageId];
-            if (!targetPageData) {
-                console.error(`Data for target page ${nextPageId} not found!`);
-                feedbackMessage = `<p class="feedback-error">Error: Next page data missing! Cannot continue.</p>`;
-                renderPageInternal(99, gameData[99], feedbackMessage); // Go to game over
-                return;
-            }
-
-             let hpLostThisTurn = 0;
-             if (targetPageData.hpLoss) {
-                 hpLostThisTurn = targetPageData.hpLoss;
-                 gameState.character.stats.hp -= hpLostThisTurn;
-                 console.log(`Lost ${hpLostThisTurn} HP.`);
-             }
-             if (targetPageData.reward && targetPageData.reward.hpGain) {
-                  const hpGained = targetPageData.reward.hpGain;
-                  gameState.character.stats.hp += hpGained;
-                  console.log(`Gained ${hpGained} HP.`);
-             }
-
-             if (gameState.character.stats.hp <= 0) {
-                 gameState.character.stats.hp = 0;
-                 console.log("Player died!");
-                 nextPageId = 99;
-                 feedbackMessage += `<p class="feedback-error"><em>You have succumbed to your injuries!${hpLostThisTurn > 0 ? ` (-${hpLostThisTurn} HP)` : ''}</em></p>`;
-                 renderPageInternal(nextPageId, gameData[nextPageId], feedbackMessage); // Render game over immediately
-                 return;
-             }
-
-             if (targetPageData.reward) {
-                 if (targetPageData.reward.xp) {
-                     gameState.character.xp += targetPageData.reward.xp;
-                     console.log(`Gained ${targetPageData.reward.xp} XP! Total: ${gameState.character.xp}`);
-                     // checkLevelUp();
-                 }
-                 if (targetPageData.reward.statIncrease) {
-                     const stat = targetPageData.reward.statIncrease.stat;
-                     const amount = targetPageData.reward.statIncrease.amount;
-                     if (gameState.character.stats.hasOwnProperty(stat)) {
-                         gameState.character.stats[stat] += amount;
-                         console.log(`Stat ${stat} increased by ${amount}. New value: ${gameState.character.stats[stat]}`);
-                         if (stat === 'constitution') recalculateMaxHp();
-                     }
-                 }
-                 if (targetPageData.reward.addItem && !gameState.character.inventory.includes(targetPageData.reward.addItem)) {
-                      const itemName = targetPageData.reward.addItem;
-                      // Check if item exists in itemsData before adding
-                      if (itemsData[itemName]) {
-                          gameState.character.inventory.push(itemName);
-                          console.log(`Found item: ${itemName}`);
-                          feedbackMessage += `<p class="feedback-message"><em>Item acquired: ${itemName}</em></p>`;
-                      } else {
-                          console.warn(`Attempted to add unknown item from reward: ${itemName}`);
-                          feedbackMessage += `<p class="feedback-error"><em>Error: Tried to acquire unknown item '${itemName}'!</em></p>`;
-                      }
-                 }
-             }
-             if (itemToAdd && !gameState.character.inventory.includes(itemToAdd)) {
-                  if (itemsData[itemToAdd]) { // Check item exists
-                      gameState.character.inventory.push(itemToAdd);
-                      console.log("Added item:", itemToAdd);
-                      feedbackMessage += `<p class="feedback-message"><em>Item acquired: ${itemToAdd}</em></p>`;
-                  } else {
-                      console.warn(`Attempted to add unknown item from choice: ${itemToAdd}`);
-                      feedbackMessage += `<p class="feedback-error"><em>Error: Tried to acquire unknown item '${itemToAdd}'!</em></p>`;
-                  }
-             }
-
-             gameState.currentPageId = nextPageId;
-             recalculateMaxHp();
-             gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp);
-
-             console.log("Transitioning to page:", nextPageId, " New state:", JSON.stringify(gameState));
-             renderPageInternal(nextPageId, gameData[nextPageId], feedbackMessage);
+            if (!targetPageData) { console.error(`Data for target page ${nextPageId} not found!`); feedbackMessage = `<p class="feedback-error">Error: Next page data missing!</p>`; renderPageInternal(99, gameData[99], feedbackMessage); return; }
+            let hpLostThisTurn = 0; if (targetPageData.hpLoss) { hpLostThisTurn = targetPageData.hpLoss; gameState.character.stats.hp -= hpLostThisTurn; console.log(`Lost ${hpLostThisTurn} HP.`); } if (targetPageData.reward && targetPageData.reward.hpGain) { const hpGained = targetPageData.reward.hpGain; gameState.character.stats.hp += hpGained; console.log(`Gained ${hpGained} HP.`); }
+            if (gameState.character.stats.hp <= 0) { gameState.character.stats.hp = 0; console.log("Player died!"); nextPageId = 99; feedbackMessage += `<p class="feedback-error"><em>You have succumbed to your injuries!${hpLostThisTurn > 0 ? ` (-${hpLostThisTurn} HP)` : ''}</em></p>`; renderPageInternal(nextPageId, gameData[nextPageId], feedbackMessage); return; }
+            if (targetPageData.reward) { if (targetPageData.reward.xp) { gameState.character.xp += targetPageData.reward.xp; console.log(`Gained ${targetPageData.reward.xp} XP! Total: ${gameState.character.xp}`); } if (targetPageData.reward.statIncrease) { const stat = targetPageData.reward.statIncrease.stat; const amount = targetPageData.reward.statIncrease.amount; if (gameState.character.stats.hasOwnProperty(stat)) { gameState.character.stats[stat] += amount; console.log(`Stat ${stat} increased by ${amount}. New value: ${gameState.character.stats[stat]}`); if (stat === 'constitution') recalculateMaxHp(); } } if (targetPageData.reward.addItem && !gameState.character.inventory.includes(targetPageData.reward.addItem)) { const itemName = targetPageData.reward.addItem; if (itemsData[itemName]) { gameState.character.inventory.push(itemName); console.log(`Found item: ${itemName}`); feedbackMessage += `<p class="feedback-message"><em>Item acquired: ${itemName}</em></p>`; } else { console.warn(`Attempted to add unknown item reward: ${itemName}`); feedbackMessage += `<p class="feedback-error"><em>Error: Tried to acquire unknown item '${itemName}'!</em></p>`; } } }
+            if (itemToAdd && !gameState.character.inventory.includes(itemToAdd)) { if (itemsData[itemToAdd]) { gameState.character.inventory.push(itemToAdd); console.log("Added item:", itemToAdd); feedbackMessage += `<p class="feedback-message"><em>Item acquired: ${itemToAdd}</em></p>`; } else { console.warn(`Attempted to add unknown item choice: ${itemToAdd}`); feedbackMessage += `<p class="feedback-error"><em>Error: Tried to acquire unknown item '${itemToAdd}'!</em></p>`; } }
+            gameState.currentPageId = nextPageId; recalculateMaxHp(); gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp);
+            console.log("Transitioning to page:", nextPageId, " New state:", JSON.stringify(gameState)); renderPageInternal(nextPageId, gameData[nextPageId], feedbackMessage);
         }
 
-        // Returns feedback message string
-        function handleSellItem(itemName) {
-            console.log("Attempting to sell:", itemName);
-            const itemIndex = gameState.character.inventory.indexOf(itemName);
-            const itemInfo = itemsData[itemName];
-            let message = "";
-
-            // Add extra checks
-            if (itemIndex === -1) {
-                console.warn(`Sell failed: Item "${itemName}" not in inventory.`);
-                message = `<p class="feedback-error">Cannot sell ${itemName} - you don't have it!</p>`;
-            } else if (!itemInfo) {
-                 console.warn(`Sell failed: Item data for "${itemName}" not found.`);
-                 message = `<p class="feedback-error">Cannot sell ${itemName} - item data missing!</p>`;
-            } else if (itemInfo.type === 'quest') {
-                 console.log(`Sell blocked: Item "${itemName}" is a quest item.`);
-                 message = `<p class="feedback-message">Cannot sell ${itemName} - it seems important.</p>`;
-             } else if (itemInfo.goldValue === undefined || itemInfo.goldValue <= 0) {
-                 console.log(`Sell blocked: Item "${itemName}" has no gold value.`);
-                 message = `<p class="feedback-message">${itemName} isn't worth any gold.</p>`;
-             } else {
-                 // Proceed with selling
-                 const value = itemInfo.goldValue;
-                 gameState.character.gold += value;
-                 gameState.character.inventory.splice(itemIndex, 1);
-                 message = `<p class="feedback-success">Sold ${itemName} for ${value} Gold.</p>`;
-                 console.log(`Sold ${itemName} for ${value} gold. Current gold: ${gameState.character.gold}`);
-             }
-             return message; // Return the message to be displayed
+        function handleSellItem(itemName) { // [Unchanged from previous working version]
+            console.log("Attempting to sell:", itemName); const itemIndex = gameState.character.inventory.indexOf(itemName); const itemInfo = itemsData[itemName]; let message = ""; if (itemIndex === -1) { console.warn(`Sell failed: Item "${itemName}" not in inventory.`); message = `<p class="feedback-error">Cannot sell ${itemName} - you don't have it!</p>`; } else if (!itemInfo) { console.warn(`Sell failed: Item data for "${itemName}" not found.`); message = `<p class="feedback-error">Cannot sell ${itemName} - item data missing!</p>`; } else if (itemInfo.type === 'quest') { console.log(`Sell blocked: Item "${itemName}" is a quest item.`); message = `<p class="feedback-message">Cannot sell ${itemName} - it seems important.</p>`; } else if (itemInfo.goldValue === undefined || itemInfo.goldValue <= 0) { console.log(`Sell blocked: Item "${itemName}" has no gold value.`); message = `<p class="feedback-message">${itemName} isn't worth any gold.</p>`; } else { const value = itemInfo.goldValue; gameState.character.gold += value; gameState.character.inventory.splice(itemIndex, 1); message = `<p class="feedback-success">Sold ${itemName} for ${value} Gold.</p>`; console.log(`Sold ${itemName} for ${value} gold. Current gold: ${gameState.character.gold}`); } return message;
         }
 
-
-        function recalculateMaxHp() { // Checked - OK
-             const baseHp = 10;
-             const conModifier = Math.floor((gameState.character.stats.constitution - 10) / 2);
-             gameState.character.stats.maxHp = Math.max(1, baseHp + conModifier * gameState.character.level);
+        function recalculateMaxHp() { // [Unchanged from previous working version]
+             const baseHp = 10; const conModifier = Math.floor((gameState.character.stats.constitution - 10) / 2); gameState.character.stats.maxHp = Math.max(1, baseHp + conModifier * gameState.character.level);
         }
 
-        function renderPageInternal(pageId, pageData, message = "") { // Checked - OK (added sell buttons)
-             if (!pageData) {
-                 console.error(`Render Error: No data for page ${pageId}`);
-                 pageData = gameData["99"] || { title: "Error", content: "<p>Render Error! Critical page data missing.</p>", illustration: "error", gameOver: true };
-                 message += `<p class="feedback-error">Render Error: Page data for ID ${pageId} was missing!</p>`;
-                 pageId = 99;
-             }
-             console.log(`Rendering page ${pageId}: "${pageData.title}"`);
-
-             storyTitleElement.textContent = pageData.title || "Untitled Page";
-             storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
-
-             updateStatsDisplay();
-             updateInventoryDisplay();
-             choicesElement.innerHTML = '';
-
-             const options = pageData.options || [];
-             const isGameOverPage = pageData.gameOver === true;
-
-             // Generate Sell Buttons if applicable
-             if (isGameOverPage && pageData.allowSell === true) {
-                const sellableItems = gameState.character.inventory.filter(itemName => {
-                    const itemInfo = itemsData[itemName];
-                    // Check itemInfo exists before accessing properties
-                    return itemInfo && itemInfo.type !== 'quest' && itemInfo.goldValue !== undefined && itemInfo.goldValue > 0;
-                });
-
-                if (sellableItems.length > 0) {
-                     choicesElement.innerHTML += `<h3 style="margin-bottom: 5px;">Sell Items:</h3>`;
-                     sellableItems.forEach(itemName => {
-                         // Double check itemInfo exists here too before creating button
-                         const itemInfo = itemsData[itemName];
-                         if (!itemInfo) return; // Skip if item data somehow missing
-
-                         const sellButton = document.createElement('button');
-                         sellButton.classList.add('choice-button', 'sell-button');
-                         sellButton.textContent = `Sell ${itemName} (${itemInfo.goldValue} Gold)`;
-                         sellButton.onclick = () => handleChoiceClick({ action: 'sell_item', item: itemName });
-                         choicesElement.appendChild(sellButton);
-                     });
-                     choicesElement.innerHTML += `<hr style="border-color: #555; margin: 15px 0 10px 0;">`; // Separator
-                }
-             }
-
-             // Generate Standard Choices / Restart Button
-             if (!isGameOverPage && options.length > 0) {
-                 options.forEach(option => {
-                     const button = document.createElement('button');
-                     button.classList.add('choice-button');
-                     button.textContent = option.text;
-                     let requirementMet = true;
-                     let requirementText = [];
-                     if (option.requireItem) { if (!gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; requirementText.push(`Requires: ${option.requireItem}`); } }
-                     if (option.requireStat) { const currentStat = gameState.character.stats[option.requireStat.stat] || 0; if (currentStat < option.requireStat.value) { requirementMet = false; requirementText.push(`Requires: ${option.requireStat.stat.charAt(0).toUpperCase() + option.requireStat.stat.slice(1)} ${option.requireStat.value}`); } }
-                     button.disabled = !requirementMet;
-                     if (!requirementMet) button.title = requirementText.join(', ');
-                     else { const choiceData = { next: option.next, addItem: option.addItem, check: option.check }; button.onclick = () => handleChoiceClick(choiceData); }
-                     choicesElement.appendChild(button);
-                 });
-             } else if (isGameOverPage) {
-                 const restartButton = document.createElement('button');
-                 restartButton.classList.add('choice-button');
-                 restartButton.textContent = "Restart Adventure (Keep Progress)";
-                 restartButton.onclick = () => handleChoiceClick({ action: 'restart_plus' });
-                 choicesElement.appendChild(restartButton);
-             } else if (pageId !== 99) { // End of branch, not explicit game over page
-                  choicesElement.insertAdjacentHTML('beforeend', '<p><i>There are no further paths from here.</i></p>');
-                  const restartButton = document.createElement('button');
-                  restartButton.classList.add('choice-button');
-                  restartButton.textContent = "Restart Adventure (Keep Progress)";
-                  restartButton.onclick = () => handleChoiceClick({ action: 'restart_plus' });
-                  choicesElement.appendChild(restartButton);
-             }
-
+        function renderPageInternal(pageId, pageData, message = "") { // [Unchanged from previous working version]
+             stopLoadingAnimation(); // Stop loading animation whenever a page renders
+             if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); pageData = gameData["99"] || { title: "Error", content: "<p>Render Error! Critical page data missing.</p>", illustration: "error", gameOver: true }; message += `<p class="feedback-error">Render Error: Page data for ID ${pageId} was missing!</p>`; pageId = 99; } console.log(`Rendering page ${pageId}: "${pageData.title}"`);
+             storyTitleElement.textContent = pageData.title || "Untitled Page"; storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>"); updateStatsDisplay(); updateInventoryDisplay(); choicesElement.innerHTML = '';
+             const options = pageData.options || []; const isGameOverPage = pageData.gameOver === true;
+             if (isGameOverPage && pageData.allowSell === true) { const sellableItems = gameState.character.inventory.filter(itemName => { const itemInfo = itemsData[itemName]; return itemInfo && itemInfo.type !== 'quest' && itemInfo.goldValue !== undefined && itemInfo.goldValue > 0; }); if (sellableItems.length > 0) { choicesElement.innerHTML += `<h3 style="margin-bottom: 5px;">Sell Items:</h3>`; sellableItems.forEach(itemName => { const itemInfo = itemsData[itemName]; if (!itemInfo) return; const sellButton = document.createElement('button'); sellButton.classList.add('choice-button', 'sell-button'); sellButton.textContent = `Sell ${itemName} (${itemInfo.goldValue} Gold)`; sellButton.onclick = () => handleChoiceClick({ action: 'sell_item', item: itemName }); choicesElement.appendChild(sellButton); }); choicesElement.innerHTML += `<hr style="border-color: #555; margin: 15px 0 10px 0;">`; } }
+             if (!isGameOverPage && options.length > 0) { options.forEach(option => { const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = option.text; let requirementMet = true; let requirementText = []; if (option.requireItem) { if (!gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; requirementText.push(`Requires: ${option.requireItem}`); } } if (option.requireStat) { const currentStat = gameState.character.stats[option.requireStat.stat] || 0; if (currentStat < option.requireStat.value) { requirementMet = false; requirementText.push(`Requires: ${option.requireStat.stat.charAt(0).toUpperCase() + option.requireStat.stat.slice(1)} ${option.requireStat.value}`); } } button.disabled = !requirementMet; if (!requirementMet) button.title = requirementText.join(', '); else { const choiceData = { next: option.next, addItem: option.addItem, check: option.check }; button.onclick = () => handleChoiceClick(choiceData); } choicesElement.appendChild(button); }); } else if (isGameOverPage) { const restartButton = document.createElement('button'); restartButton.classList.add('choice-button'); restartButton.textContent = "Restart Adventure (Keep Progress)"; restartButton.onclick = () => handleChoiceClick({ action: 'restart_plus' }); choicesElement.appendChild(restartButton); } else if (pageId !== 99) { choicesElement.insertAdjacentHTML('beforeend', '<p><i>There are no further paths from here.</i></p>'); const restartButton = document.createElement('button'); restartButton.classList.add('choice-button'); restartButton.textContent = "Restart Adventure (Keep Progress)"; restartButton.onclick = () => handleChoiceClick({ action: 'restart_plus' }); choicesElement.appendChild(restartButton); }
              updateScene(pageData.illustration || 'default');
         }
 
-        function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); }
-
-        function updateStatsDisplay() { // Checked - OK (added gold)
-            const char=gameState.character;
-            statsElement.innerHTML = `<strong>Stats:</strong> <span class="stat-gold">Gold: ${char.gold}</span> <span>Lvl: ${char.level}</span> <span>XP: ${char.xp}/${char.xpToNextLevel}</span> <span>HP: ${char.stats.hp}/${char.stats.maxHp}</span> <span>Str: ${char.stats.strength}</span> <span>Int: ${char.stats.intelligence}</span> <span>Wis: ${char.stats.wisdom}</span> <span>Dex: ${char.stats.dexterity}</span> <span>Con: ${char.stats.constitution}</span> <span>Cha: ${char.stats.charisma}</span>`;
-        }
+        function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); } // [Unchanged]
+        function updateStatsDisplay() { const char = gameState.character; statsElement.innerHTML = `<strong>Stats:</strong> <span class="stat-gold">Gold: ${char.gold}</span> <span>Lvl: ${char.level}</span> <span>XP: ${char.xp}/${char.xpToNextLevel}</span> <span>HP: ${char.stats.hp}/${char.stats.maxHp}</span> <span>Str: ${char.stats.strength}</span> <span>Int: ${char.stats.intelligence}</span> <span>Wis: ${char.stats.wisdom}</span> <span>Dex: ${char.stats.dexterity}</span> <span>Con: ${char.stats.constitution}</span> <span>Cha: ${char.stats.charisma}</span>`; } // [Unchanged]
+        function updateInventoryDisplay() { let h = '<strong>Inventory:</strong> '; if (gameState.character.inventory.length === 0) { h += '<em>Empty</em>'; } else { gameState.character.inventory.forEach(itemName => { const item = itemsData[itemName] || { type: 'unknown', description: 'An unknown item.' }; const itemClass = `item-${item.type || 'unknown'}`; const descriptionText = typeof item.description === 'string' ? item.description : 'No description available.'; h += `<span class="${itemClass}" title="${descriptionText.replace(/"/g, '&quot;')}">${itemName}</span>`; }); } inventoryElement.innerHTML = h; } // [Unchanged]
 
-        function updateInventoryDisplay() { // Checked - OK
-            let h='<strong>Inventory:</strong> ';
-            if(gameState.character.inventory.length === 0){
-                h+='<em>Empty</em>';
-            } else {
-                gameState.character.inventory.forEach(itemName=>{
-                    const item = itemsData[itemName] || {type:'unknown',description:'An unknown item.'};
-                    const itemClass = `item-${item.type || 'unknown'}`;
-                    const descriptionText = typeof item.description === 'string' ? item.description : 'No description available.';
-                    h += `<span class="${itemClass}" title="${descriptionText.replace(/"/g, '&quot;')}">${itemName}</span>`;
-                });
-            }
-            inventoryElement.innerHTML = h;
-        }
-
-        // --- Scene Update and Lighting --- (Checked - OK)
-        // [Keep updateScene and adjustLighting functions here - unchanged from previous]
+        // --- Scene Update and Lighting --- [Unchanged]
+        // [Keep updateScene and adjustLighting functions here]
         function updateScene(illustrationKey) { if (!scene) { console.warn("Scene not initialized, cannot update visual."); return; } console.log("Updating scene for illustration key:", illustrationKey); if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); currentAssemblyGroup.traverse(child => { if (child.isMesh) { child.geometry.dispose(); } }); currentAssemblyGroup = null; } scene.fog = null; scene.background = new THREE.Color(0x222222); camera.position.set(0, 2.5, 7); camera.lookAt(0, 0.5, 0); let assemblyFunction; switch (illustrationKey) { case 'city-gates': assemblyFunction = createCityGatesAssembly; break; case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break; case 'temple': assemblyFunction = createTempleAssembly; break; case 'resistance-meeting': assemblyFunction = createResistanceMeetingAssembly; break; case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break; case 'game-over': case 'game-over-generic': assemblyFunction = createGameOverAssembly; break; case 'error': assemblyFunction = createErrorAssembly; break; case 'crossroads-signpost-sunny': scene.fog = new THREE.Fog(0x87CEEB, 10, 35); camera.position.set(0, 3, 10); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0x87CEEB); assemblyFunction = createCrossroadsAssembly; break; case 'rolling-green-hills-shepherd-distance': case 'hilltop-view-overgrown-shrine-wildflowers': case 'overgrown-stone-shrine-wildflowers-close': scene.fog = new THREE.Fog(0xA8E4A0, 15, 50); camera.position.set(0, 5, 15); camera.lookAt(0, 2, -5); scene.background = new THREE.Color(0x90EE90); if (illustrationKey === 'overgrown-stone-shrine-wildflowers-close') camera.position.set(1, 2, 4); if (illustrationKey === 'hilltop-view-overgrown-shrine-wildflowers') camera.position.set(3, 4, 8); assemblyFunction = createRollingHillsAssembly; break; case 'windy-sea-cliffs-crashing-waves-path-down': case 'scanning-sea-cliffs-no-other-paths-visible': case 'close-up-handholds-carved-in-cliff-face': scene.fog = new THREE.Fog(0x6699CC, 10, 40); camera.position.set(5, 5, 10); camera.lookAt(-2, 0, -5); scene.background = new THREE.Color(0x6699CC); assemblyFunction = createCoastalCliffsAssembly; break; case 'hidden-cove-beach-dark-cave-entrance': case 'character-fallen-at-bottom-of-cliff-path-cove': scene.fog = new THREE.Fog(0x336699, 5, 30); camera.position.set(0, 2, 8); camera.lookAt(0, 1, -2); scene.background = new THREE.Color(0x336699); assemblyFunction = createHiddenCoveAssembly; break; case 'rocky-badlands-cracked-earth-harsh-sun': scene.fog = new THREE.Fog(0xD2B48C, 15, 40); camera.position.set(0, 3, 12); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0xCD853F); assemblyFunction = createDefaultAssembly; break; case 'shadowwood-forest': scene.fog = new THREE.Fog(0x2E2E2E, 5, 20); camera.position.set(0, 2, 8); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0x1A1A1A); assemblyFunction = createForestAssembly; break; case 'dark-forest-entrance-gnarled-roots-filtered-light': scene.fog = new THREE.Fog(0x2E2E2E, 5, 20); camera.position.set(0, 2, 8); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0x1A1A1A); assemblyFunction = createForestEntranceAssembly; break; case 'overgrown-forest-path-glowing-fungi-vines': case 'pushing-through-forest-undergrowth': scene.fog = new THREE.Fog(0x1A2F2A, 3, 15); camera.position.set(0, 1.5, 6); camera.lookAt(0, 0.5, 0); scene.background = new THREE.Color(0x112211); assemblyFunction = createOvergrownPathAssembly; break; case 'forest-clearing-mossy-statue-weathered-stone': case 'forest-clearing-mossy-statue-hidden-compartment': case 'forest-clearing-mossy-statue-offering': scene.fog = new THREE.Fog(0x2E4F3A, 5, 25); camera.position.set(0, 2, 5); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0x223322); assemblyFunction = createClearingStatueAssembly; break; case 'narrow-game-trail-forest-rope-bridge-ravine': case 'character-crossing-rope-bridge-safely': case 'rope-bridge-snapping-character-falling': case 'fallen-log-crossing-ravine': scene.fog = new THREE.Fog(0x2E2E2E, 5, 20); camera.position.set(2, 3, 6); camera.lookAt(0, -1, -2); scene.background = new THREE.Color(0x1A1A1A); assemblyFunction = createForestAssembly; break; case 'two-goblins-ambush-forest-path-spears': case 'forest-shadows-hiding-goblins-walking-past': case 'defeated-goblins-forest-path-loot': case 'blurred-motion-running-past-goblins-forest': scene.fog = new THREE.Fog(0x1A2F2A, 3, 15); camera.position.set(0, 2, 7); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0x112211); assemblyFunction = createGoblinAmbushAssembly; break; case 'forest-stream-crossing-dappled-sunlight-stones': case 'mossy-log-bridge-over-forest-stream': case 'character-splashing-into-stream-from-log': scene.fog = new THREE.Fog(0x668866, 8, 25); camera.position.set(0, 2, 6); camera.lookAt(0, 0.5, 0); scene.background = new THREE.Color(0x446644); if (illustrationKey === 'mossy-log-bridge-over-forest-stream') camera.position.set(1, 2, 5); assemblyFunction = createForestAssembly; break; case 'forest-edge-view-rocky-foothills-distant-mountain-fortress': case 'forest-edge': scene.fog = new THREE.Fog(0xAAAAAA, 10, 40); camera.position.set(0, 3, 10); camera.lookAt(0, 1, -5); scene.background = new THREE.Color(0x888888); assemblyFunction = createForestEdgeAssembly; break; case 'climbing-rocky-foothills-path-fortress-closer': case 'rockslide-blocking-mountain-path-boulders': case 'character-climbing-over-boulders': case 'character-slipping-on-rockslide-boulders': case 'rough-detour-path-around-rockslide': scene.fog = new THREE.Fog(0x778899, 8, 35); camera.position.set(0, 4, 9); camera.lookAt(0, 2, 0); scene.background = new THREE.Color(0x708090); assemblyFunction = createDefaultAssembly; break; case 'zoomed-view-mountain-fortress-western-ridge': scene.fog = new THREE.Fog(0x778899, 8, 35); camera.position.set(5, 6, 12); camera.lookAt(-2, 3, -5); scene.background = new THREE.Color(0x708090); assemblyFunction = createDefaultAssembly; break; case 'narrow-goat-trail-mountainside-fortress-view': scene.fog = new THREE.Fog(0x778899, 5, 30); camera.position.set(1, 3, 6); camera.lookAt(0, 2, -2); scene.background = new THREE.Color(0x708090); assemblyFunction = createDefaultAssembly; break; case 'narrow-windy-mountain-ridge-path': case 'character-falling-off-windy-ridge': scene.fog = new THREE.Fog(0x8899AA, 6, 25); camera.position.set(2, 5, 7); camera.lookAt(0, 3, -3); scene.background = new THREE.Color(0x778899); assemblyFunction = createDefaultAssembly; break; case 'approaching-dark-fortress-walls-guards': scene.fog = new THREE.Fog(0x444455, 5, 20); camera.position.set(0, 3, 8); camera.lookAt(0, 2, 0); scene.background = new THREE.Color(0x333344); assemblyFunction = createDefaultAssembly; break; case 'dark-cave-entrance-dripping-water': scene.fog = new THREE.Fog(0x1A1A1A, 2, 10); camera.position.set(0, 1.5, 4); camera.lookAt(0, 1, 0); scene.background = new THREE.Color(0x111111); assemblyFunction = createDarkCaveAssembly; break; default: console.warn(`Unknown illustration key: "${illustrationKey}". Using default scene.`); assemblyFunction = createDefaultAssembly; break; } try { currentAssemblyGroup = assemblyFunction(); if (currentAssemblyGroup && currentAssemblyGroup.isGroup) { scene.add(currentAssemblyGroup); adjustLighting(illustrationKey); } else { throw new Error("Assembly function did not return a valid THREE.Group."); } } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); } currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); adjustLighting('error'); } onWindowResize(); }
         function adjustLighting(illustrationKey) { if (!scene) return; const lightsToRemove = scene.children.filter(child => child.isLight && !child.isAmbientLight); lightsToRemove.forEach(light => scene.remove(light)); const ambient = scene.children.find(c => c.isAmbientLight); if (!ambient) { console.warn("No ambient light found, adding default."); scene.add(new THREE.AmbientLight(0xffffff, 0.5)); } let directionalLight; let lightIntensity = 1.2; let ambientIntensity = 0.5; let lightColor = 0xffffff; let lightPosition = { x: 8, y: 15, z: 10 }; switch (illustrationKey) { case 'crossroads-signpost-sunny': case 'rolling-green-hills-shepherd-distance': case 'hilltop-view-overgrown-shrine-wildflowers': case 'overgrown-stone-shrine-wildflowers-close': ambientIntensity = 0.7; lightIntensity = 1.5; lightColor = 0xFFF8E1; lightPosition = { x: 10, y: 15, z: 10 }; break; case 'shadowwood-forest': case 'dark-forest-entrance-gnarled-roots-filtered-light': case 'overgrown-forest-path-glowing-fungi-vines': case 'forest-clearing-mossy-statue-weathered-stone': case 'narrow-game-trail-forest-rope-bridge-ravine': case 'two-goblins-ambush-forest-path-spears': case 'forest-stream-crossing-dappled-sunlight-stones': case 'forest-edge-view-rocky-foothills-distant-mountain-fortress': ambientIntensity = 0.4; lightIntensity = 0.8; lightColor = 0xB0C4DE; lightPosition = { x: 5, y: 12, z: 5 }; break; case 'dark-cave-entrance-dripping-water': ambientIntensity = 0.1; lightIntensity = 0.3; lightColor = 0x667799; lightPosition = { x: 0, y: 5, z: 3 }; break; case 'prisoner-cell': ambientIntensity = 0.2; lightIntensity = 0.5; lightColor = 0x7777AA; lightPosition = { x: 0, y: 10, z: 5 }; break; case 'windy-sea-cliffs-crashing-waves-path-down': case 'hidden-cove-beach-dark-cave-entrance': ambientIntensity = 0.6; lightIntensity = 1.0; lightColor = 0xCCDDFF; lightPosition = { x: -10, y: 12, z: 8 }; break; case 'rocky-badlands-cracked-earth-harsh-sun': ambientIntensity = 0.7; lightIntensity = 1.8; lightColor = 0xFFFFDD; lightPosition = { x: 5, y: 20, z: 5 }; break; case 'climbing-rocky-foothills-path-fortress-closer': case 'zoomed-view-mountain-fortress-western-ridge': case 'narrow-goat-trail-mountainside-fortress-view': case 'narrow-windy-mountain-ridge-path': case 'approaching-dark-fortress-walls-guards': ambientIntensity = 0.5; lightIntensity = 1.3; lightColor = 0xDDEEFF; lightPosition = { x: 10, y: 18, z: 15 }; break; case 'game-over': case 'game-over-generic': ambientIntensity = 0.2; lightIntensity = 0.8; lightColor = 0xFF6666; lightPosition = { x: 0, y: 5, z: 5 }; break; case 'error': ambientIntensity = 0.4; lightIntensity = 1.0; lightColor = 0xFFCC00; lightPosition = { x: 0, y: 5, z: 5 }; break; default: ambientIntensity = 0.5; lightIntensity = 1.2; lightColor = 0xffffff; lightPosition = { x: 8, y: 15, z: 10 }; break; } const currentAmbient = scene.children.find(c => c.isAmbientLight); if (currentAmbient) { currentAmbient.intensity = ambientIntensity; } directionalLight = new THREE.DirectionalLight(lightColor, lightIntensity); directionalLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z); directionalLight.castShadow = true; directionalLight.shadow.mapSize.set(1024, 1024); directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -20; directionalLight.shadow.camera.right = 20; directionalLight.shadow.camera.top = 20; directionalLight.shadow.camera.bottom = -20; directionalLight.shadow.bias = -0.001; scene.add(directionalLight); }
 
-        // --- Potential Future Improvements Comment --- (Checked - OK)
+        // --- Potential Future Improvements Comment --- [Unchanged]
         /* [Keep comment block here] */
 
         // ========================================
-        // Initialization (Checked - OK)
+        // Initialization
         // ========================================
         document.addEventListener('DOMContentLoaded', () => {
-            console.log("DOM Ready. Initializing game...");
-            // Attempt to initialize Three.js first
+            console.log("DOM Ready. Initializing...");
+
+            // Start loading animation
+            let dotCount = 0;
+            const baseLoadingText = "Please wait while the adventure loads";
+            if (loadingMessageElement) { // Check if element exists
+                 loadingIntervalId = setInterval(() => {
+                     dotCount = (dotCount + 1) % 4; // Cycle 0, 1, 2, 3
+                     const dots = '.'.repeat(dotCount);
+                     loadingMessageElement.textContent = baseLoadingText + dots;
+                 }, 500); // Update every 500ms
+                 console.log("Loading animation started.");
+             } else {
+                 console.warn("Loading message element not found.");
+             }
+
+            // Attempt to initialize Three.js
             if (initThreeJS()) {
-                // If Three.js setup succeeds, start the game
+                // If Three.js setup succeeds, start the game logic
+                // The loading animation will be stopped by the first call to renderPageInternal
                 startNewGame(); // Call startNewGame for the very first load
-                console.log("Game Started Successfully.");
+                console.log("Game setup initiated.");
             } else {
-                // If Three.js setup failed, display error in UI
+                // If Three.js setup failed, display error in UI and stop animation
+                stopLoadingAnimation(); // Stop animation on error
                 console.error("Initialization failed: Three.js setup error.");
                 storyTitleElement.textContent = "Initialization Error";
                 storyContentElement.innerHTML = `<p>A critical error occurred during 3D scene setup. The adventure cannot begin. Please check the console (F12) for technical details.</p>`;