Spaces:

awacke1
/

ChooseYourOwnAdventure

Running

App Files Files Community

awacke1 commited on Apr 27

Commit

1d47995

verified ·

1 Parent(s): 4b76367

Update index.html

Browse files

Files changed (1) hide show

index.html +531 -113

index.html CHANGED Viewed

@@ -112,14 +112,11 @@
         .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; }
-        /* Optional Roll Result Styling */
         .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; }
     </style>
 </head>
 <body>
     <div id="game-container">
         <div id="scene-container"></div>
         <div id="ui-container">
@@ -149,8 +146,6 @@
     <script type="module">
         import * as THREE from 'three';
-        // Optional: Add OrbitControls for debugging/viewing scene
-        // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
@@ -162,6 +157,7 @@
         let scene, camera, renderer;
         let currentAssemblyGroup = null;
         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 });
@@ -171,6 +167,12 @@
         const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
         const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 });
         const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
         function initThreeJS() {
             if (!sceneContainer) { console.error("Scene container not found!"); return; }
@@ -188,17 +190,6 @@
             sceneContainer.appendChild(renderer.domElement);
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
-            directionalLight.position.set(8, 15, 10);
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 1024;
-            directionalLight.shadow.mapSize.height = 1024;
-            directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 50;
-             const shadowCamSize = 15;
-            directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize;
-            directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize;
-            scene.add(directionalLight);
             window.addEventListener('resize', onWindowResize, false);
             setTimeout(onWindowResize, 100);
             animate();
@@ -217,7 +208,10 @@
         function animate() {
             requestAnimationFrame(animate);
-            // if (currentAssemblyGroup) { currentAssemblyGroup.rotation.y += 0.0005; } // Optional rotation
             if (renderer && scene && camera) {
                 renderer.render(scene, camera);
             }
@@ -240,33 +234,355 @@
             return ground;
         }
-        // --- Procedural Generation Functions ---
-        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()); return group; }
-        function createTempleAssembly() { const group = new THREE.Group(); const bs=5, bsh=0.5, ch=3, cr=0.25, rh=0.5; const bGeo = new THREE.BoxGeometry(bs, bsh, bs); group.add(createMesh(bGeo, templeMaterial, { x:0, y:bsh/2, z:0 })); const cGeo = new THREE.CylinderGeometry(cr, cr, ch, 12); const cPos = [{x:-bs/3, z:-bs/3}, {x:bs/3, z:-bs/3}, {x:-bs/3, z:bs/3}, {x:bs/3, z:bs/3}]; cPos.forEach(p=>group.add(createMesh(cGeo.clone(), templeMaterial, { x:p.x, y:bsh+ch/2, z:p.z }))); const rGeo = new THREE.BoxGeometry(bs*0.9, rh, bs*0.9); group.add(createMesh(rGeo, templeMaterial, { x:0, y:bsh+ch+rh/2, z:0 })); group.add(createGroundPlane()); return group; }
-        function createResistanceMeetingAssembly() { const group = new THREE.Group(); const tw=2, th=0.8, td=1, tt=0.1; const ttg = new THREE.BoxGeometry(tw, tt, td); group.add(createMesh(ttg, woodMaterial, { x:0, y:th-tt/2, z:0 })); const lh=th-tt, ls=0.1; const lg=new THREE.BoxGeometry(ls, lh, ls); const lofW=tw/2-ls*1.5; const lofD=td/2-ls*1.5; group.add(createMesh(lg, woodMaterial, { x:-lofW, y:lh/2, z:-lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:-lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:-lofW, y:lh/2, z:lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:lofD })); const ss=0.4; const sg=new THREE.BoxGeometry(ss, ss*0.8, ss); group.add(createMesh(sg, darkWoodMaterial, { x:-tw*0.6, y:ss*0.4, z:0 })); group.add(createMesh(sg.clone(), darkWoodMaterial, { x:tw*0.6, y:ss*0.4, z:0 })); group.add(createGroundPlane(stoneMaterial)); return group; }
-        function createForestAssembly(tc=10, a=10) { const group = new THREE.Group(); const cT=(x,z)=>{ const tg=new THREE.Group(); const th=Math.random()*1.5+2; const tr=Math.random()*0.1+0.1; const tGeo = new THREE.CylinderGeometry(tr*0.7, tr, th, 8); tg.add(createMesh(tGeo, woodMaterial, {x:0, y:th/2, z:0})); const fr=th*0.4+0.2; const fGeo=new THREE.SphereGeometry(fr, 8, 6); tg.add(createMesh(fGeo, leafMaterial, {x:0, y:th*0.9, z:0})); tg.position.set(x,0,z); return tg; }; for(let i=0; i<tc; i++){ const x=(Math.random()-0.5)*a; const z=(Math.random()-0.5)*a; if(Math.sqrt(x*x+z*z)>1.0) group.add(cT(x,z)); } group.add(createGroundPlane(groundMaterial, a*1.1)); return group; }
-        function createRoadAmbushAssembly() { const group = new THREE.Group(); const a=12; const fg = createForestAssembly(8, a); group.add(fg); const rw=3, rl=a*1.2; const rGeo=new THREE.PlaneGeometry(rw, rl); const rMat=new THREE.MeshStandardMaterial({color:0x966F33, roughness:0.9}); const r=createMesh(rGeo, rMat, {x:0, y:0.01, z:0}, {x:-Math.PI/2}); r.receiveShadow=true; group.add(r); const rkGeo=new THREE.SphereGeometry(0.5, 5, 4); const rkMat=new THREE.MeshStandardMaterial({color:0x666666, roughness:0.8}); group.add(createMesh(rkGeo, rkMat, {x:rw*0.7, y:0.25, z:1}, {y:Math.random()*Math.PI})); group.add(createMesh(rkGeo.clone().scale(0.8,0.8,0.8), rkMat, {x:-rw*0.8, y:0.2, z:-2}, {y:Math.random()*Math.PI})); return group; }
-        function createForestEdgeAssembly() { const group = new THREE.Group(); const a=15; const fg = createForestAssembly(15, a); const ttr=[]; fg.children.forEach(c => { if(c.type === 'Group' && c.position.x > 0) ttr.push(c); }); ttr.forEach(t => fg.remove(t)); group.add(fg); return group; }
-        function createPrisonerCellAssembly() { const group = new THREE.Group(); const cs=3, wh=2.5, wt=0.2, br=0.05, bsp=0.25; const cfMat=stoneMaterial.clone(); cfMat.color.setHex(0x555555); group.add(createGroundPlane(cfMat, cs)); const wbGeo=new THREE.BoxGeometry(cs, wh, wt); group.add(createMesh(wbGeo, stoneMaterial, {x:0, y:wh/2, z:-cs/2})); const wsGeo=new THREE.BoxGeometry(wt, wh, cs); group.add(createMesh(wsGeo, stoneMaterial, {x:-cs/2, y:wh/2, z:0})); group.add(createMesh(wsGeo.clone(), stoneMaterial, {x:cs/2, y:wh/2, z:0})); const bGeo=new THREE.CylinderGeometry(br, br, wh, 8); const nb=Math.floor(cs/bsp); for(let i=0; i<nb; i++){ const xp=-cs/2+(i+0.5)*bsp; group.add(createMesh(bGeo.clone(), metalMaterial, {x:xp, y:wh/2, z:cs/2})); } return group; }
-        function createGameOverAssembly() { const group = new THREE.Group(); const boxGeo = new THREE.BoxGeometry(2, 2, 2); group.add(createMesh(boxGeo, gameOverMaterial, { x: 0, y: 1, z: 0 })); group.add(createGroundPlane(stoneMaterial.clone().set({color: 0x333333}))); return group; }
-        function createErrorAssembly() { const group = new THREE.Group(); const coneGeo = new THREE.ConeGeometry( 0.8, 1.5, 8 ); group.add(createMesh(coneGeo, errorMaterial, { x: 0, y: 0.75, z: 0 })); group.add(createGroundPlane()); return group; }
-        // --- Game Data ---
-        const itemsData = { "Flaming Sword":{type:"weapon", description:"A fiery blade"}, "Whispering Bow":{type:"weapon", description:"A silent bow"}, "Guardian Shield":{type:"armor", description:"A protective shield"}, "Healing Light Spell":{type:"spell", description:"Mends minor wounds"}, "Shield of Faith Spell":{type:"spell", description:"Temporary shield"}, "Binding Runes Scroll":{type:"spell", description:"Binds an enemy"}, "Secret Tunnel Map":{type:"quest", description:"Shows a hidden path"}, "Poison Daggers":{type:"weapon", description:"Daggers with poison"}, "Master Key":{type:"quest", description:"Unlocks many doors"}, "Crude Dagger":{type:"weapon", description:"A roughly made dagger."}, "Scout's Pouch":{type:"quest", description:"Contains odds and ends."} };
         const gameData = {
-             "1": { title: "The Crossroads", content: `<p>Dust swirls... 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... It feels peaceful...</p>`, options: [ { text: "Follow the narrow path", 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... A precarious-looking path descends...</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" },
-             "4": { title: "Hill Path Overlook", content: `<p>The path crests a hill... you see a small, overgrown shrine...</p>`, options: [ { text: "Investigate the overgrown shrine", next: 40 }, { text: "Continue towards the badlands", next: 41 } ], illustration: "hilltop-view-overgrown-shrine-wildflowers" },
-             "5": { title: "Shadowwood Entrance", content: `<p>Sunlight struggles to pierce the dense canopy... How do you proceed?</p>`, options: [ { text: "Follow the main, albeit overgrown, path", next: 6 }, { text: "Try to navigate through the lighter undergrowth", next: 7 }, { text: "Look for animal trails or signs of passage (Wisdom Check)", check: { stat: 'wisdom', dc: 10, onFailure: 6 }, next: 8 } ], illustration: "dark-forest-entrance-gnarled-roots-filtered-light" },
-             "6": { title: "Overgrown Forest Path", content: `<p>The path is barely visible... You hear a twig snap nearby!</p>`, options: [ { text: "Ready your weapon and investigate", next: 10 }, { text: "Attempt to hide quietly (Dexterity Check)", check: { stat: 'dexterity', dc: 11, onFailure: 10 }, next: 11 }, { text: "Call out cautiously", next: 10 } ], illustration: "overgrown-forest-path-glowing-fungi-vines" },
-             "7": { title: "Tangled Undergrowth", content: `<p>Pushing through ferns... You stumble upon a small clearing containing a moss-covered, weathered stone statue...</p>`, options: [ { text: "Examine the statue closely (Intelligence Check)", check: { stat: 'intelligence', dc: 13, onFailure: 71 }, next: 70 }, { text: "Ignore the statue and press on", next: 72 }, { text: "Leave a small offering (if possible)", next: 73 } ], illustration: "forest-clearing-mossy-statue-weathered-stone" },
-             "8": { title: "Hidden Game Trail", content: `<p>Your sharp eyes spot a faint trail... It leads towards a ravine spanned by a rickety rope bridge.</p><p>(+20 XP)</p>`, options: [ { text: "Risk crossing the rope bridge (Dexterity Check)", check: { stat: 'dexterity', dc: 10, onFailure: 81 }, next: 80 }, { text: "Search for another way across the ravine", next: 82 } ], illustration: "narrow-game-trail-forest-rope-bridge-ravine", reward: { xp: 20 } },
-            "10": { title: "Goblin Ambush!", content: `<p>Two scraggly goblins leap out, brandishing crude spears!</p>`, options: [ { text: "Fight the goblins!", next: 12 }, { text: "Attempt to dodge past them (Dexterity Check)", check: { stat: 'dexterity', dc: 13, onFailure: 10 }, next: 13 } ], illustration: "two-goblins-ambush-forest-path-spears" }, // Simplified options
             "11": { title: "Hidden Evasion", content: `<p>You melt into the shadows as the goblins blunder past.</p><p>(+30 XP)</p>`, options: [ { text: "Continue cautiously", next: 14 } ], illustration: "forest-shadows-hiding-goblins-walking-past", reward: { xp: 30 } },
-            "12": { title: "Ambush Victory!", content: `<p>You defeat the goblins! Found a Crude Dagger.</p><p>(+50 XP)</p>`, options: [ { text: "Press onward", next: 14 } ], illustration: "defeated-goblins-forest-path-loot", reward: { xp: 50, addItem: "Crude Dagger" } }, // Added item directly
             "13": { title: "Daring Escape", content: `<p>With surprising agility, you tumble past the goblins!</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 path leads to a clear, shallow stream...</p>`, options: [ { text: "Wade across the stream", next: 16 }, { text: "Look for a drier crossing point (fallen log?)", next: 15 } ], illustration: "forest-stream-crossing-dappled-sunlight-stones" },
             "15": { title: "Log Bridge", content: `<p>Further upstream, a large, mossy log spans the stream.</p>`, options: [ { text: "Cross carefully on the log (Dexterity Check)", check: { stat: 'dexterity', dc: 9, onFailure: 151 }, next: 16 }, { text: "Go back and wade instead", next: 14 } ], illustration: "mossy-log-bridge-over-forest-stream" },
@@ -280,21 +596,19 @@
             "31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard on the sandy cove floor. You lose 5 HP. A dark cave entrance beckons.</p>`, options: [ { text: "Gingerly explore the dark cave", next: 35 } ], illustration: "character-fallen-at-bottom-of-cliff-path-cove", hpLoss: 5 },
             "32": { title: "No Easier Path", content: `<p>You scan the cliffs intently but find no obviously easier routes.</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 } ], illustration: "scanning-sea-cliffs-no-other-paths-visible" },
             "33": { title: "Smuggler's Steps?", content: `<p>Your keen eyes spot a series of barely visible handholds and steps carved into the rock...</p><p>(+15 XP)</p>`, options: [ { text: "Use the hidden steps (Easier Dex Check)", check: { stat: 'dexterity', dc: 8, onFailure: 31 }, next: 30 } ], illustration: "close-up-handholds-carved-in-cliff-face", reward: { xp: 15 } },
-            "35": { title: "Dark Cave", content: `<p>The cave smells of salt and decay. Water drips somewhere within.</p>`, options: [{ text: "Press deeper into the darkness", next: 99 } ], illustration: "dark-cave-entrance-dripping-water" }, // End of this branch for now
             "40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine. It feels ancient and neglected.</p>`, options: [{ text: "Examine the carvings (Intelligence Check)", check:{stat:'intelligence', dc:11, onFailure: 401}, next: 400 } ], illustration: "overgrown-stone-shrine-wildflowers-close" },
-            "41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth and jagged rock formations under a harsh sun.</p>`, options: [{ text: "Scout ahead", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" }, // End of this branch
-            // Add pages 70-73, 80-82, 190-192, 21, 22, 400, 401 etc.
             "190": { title: "Over the Rocks", content:"<p>With considerable effort, you manage to climb over the rockslide.</p><p>(+35 XP)</p>", options: [{text:"Continue up the path", next: 22}], illustration:"character-climbing-over-boulders", reward: {xp:35} },
             "191": { title: "Climb Fails", content:"<p>The boulders are too unstable or sheer. You cannot climb them safely.</p>", options: [{text:"Search for another way around", next: 192}], illustration:"character-slipping-on-rockslide-boulders"},
             "192": { title: "Detour Found", content:"<p>After some searching, you find a rough path leading around the rockslide, eventually rejoining the main trail.</p>", options: [{text:"Continue up the path", next: 22}], illustration:"rough-detour-path-around-rockslide"},
             "21": { title: "Western Ridge", content:"<p>The ridge path is narrow and exposed, with strong winds threatening to push you off.</p>", options: [{text:"Proceed carefully (Dexterity Check)", check:{stat:'dexterity', dc: 14, onFailure: 211}, next: 22 } ], illustration:"narrow-windy-mountain-ridge-path" },
-            "22": { title: "Fortress Approach", content:"<p>You've navigated the treacherous paths and now stand near the outer walls of the dark fortress. Guards patrol the battlements.</p>", options: [{text:"Look for an unguarded entrance", next: 99}], illustration:"approaching-dark-fortress-walls-guards"}, // End for now
             "211": {title:"Lost Balance", content:"<p>A strong gust of wind catches you off guard, sending you tumbling down a steep slope! You lose 10 HP.</p>", options:[{text:"Climb back up and find another way", next: 17}], illustration:"character-falling-off-windy-ridge", hpLoss: 10},
             "99": { title: "Game Over / To Be Continued...", content: "<p>Your adventure ends here (for now).</p>", options: [{ text: "Restart", next: 1 }], illustration: "game-over-generic", gameOver: true }
         };
-        // --- Game State ---
         let gameState = {
             currentPageId: 1,
             character: {
@@ -305,12 +619,10 @@
             }
         };
-        // --- Game Logic Functions ---
         function startGame() {
             const defaultChar = { name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer", level: 1, xp: 0, xpToNextLevel: 100, stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 }, inventory: [] };
-            gameState = { currentPageId: 1, character: { ...defaultChar } }; // Reset state
-            // Potential load logic could go here later:
-            // if (loadCharacter()) { console.log("Loaded saved game."); }
             renderPage(gameState.currentPageId);
         }
@@ -319,7 +631,7 @@
             const itemToAdd = choiceData.addItem;
             let nextPageId = optionNextPageId;
             let rollResultMessage = "";
-            const check = choiceData.check; // Get check data if it exists
             if (isNaN(optionNextPageId) && !check) { console.error("Invalid choice data:", choiceData); return; }
@@ -331,10 +643,10 @@
                 const dc = check.dc;
                 console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
                 if (totalResult >= dc) {
-                    nextPageId = optionNextPageId; // Check succeeds, use original 'next'
                     rollResultMessage = `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
                 } else {
-                    nextPageId = parseInt(check.onFailure); // Check fails, use 'onFailure'
                     rollResultMessage = `<p class="roll-failure"><em>Check Failed! (${totalResult} vs DC ${dc})</em></p>`;
                     if (isNaN(nextPageId)) { console.error("Invalid onFailure ID:", check.onFailure); nextPageId = 99; }
                 }
@@ -352,24 +664,30 @@
                 if (nextPageData.hpLoss) {
                     gameState.character.stats.hp -= nextPageData.hpLoss;
                     console.log(`Lost ${nextPageData.hpLoss} HP.`);
-                    if (gameState.character.stats.hp <= 0) { gameState.character.stats.hp = 0; console.log("Player died!"); nextPageId = 99; /* Force redirect handled below */ }
                 }
                 if (nextPageData.reward) {
                     if (nextPageData.reward.xp) { gameState.character.xp += nextPageData.reward.xp; console.log(`Gained ${nextPageData.reward.xp} XP! Total: ${gameState.character.xp}`); }
-                    if (nextPageData.reward.statIncrease) { const stat = nextPageData.reward.statIncrease.stat; const amount = nextPageData.reward.statIncrease.amount; if (gameState.character.stats.hasOwnProperty(stat)) { gameState.character.stats[stat] += amount; console.log(`Stat ${stat} increased by ${amount}.`); } }
-                    if(nextPageData.reward.addItem && !gameState.character.inventory.includes(nextPageData.reward.addItem)){ gameState.character.inventory.push(nextPageData.reward.addItem); console.log(`Found item: ${nextPageData.reward.addItem}`); }
                 }
-                 // Recalculate max HP based on CON after potential stat changes
-                 const conModifier = Math.floor((gameState.character.stats.constitution - 10) / 2);
-                 // Example Max HP calculation: Base + CON modifier per level
-                 gameState.character.stats.maxHp = 10 + (conModifier * gameState.character.level); // Adjust base 10 as needed
-                 gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp); // Clamp HP
-                 // Handle forced game over from HP loss
-                 if (nextPageId === 99 && gameState.character.stats.hp <= 0) {
-                      renderPageInternal(99, gameData[99], rollResultMessage);
-                      return;
-                 }
             } else {
                 console.error(`Data for page ${nextPageId} not found!`);
                 renderPageInternal(99, gameData[99], "<p><em>Error: Next page data missing!</em></p>");
@@ -379,29 +697,71 @@
         }
         function renderPageInternal(pageId, pageData, message = "") {
-            if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); return; } // Guard clause
             storyTitleElement.textContent = pageData.title || "Untitled Page";
             storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
-            updateStatsDisplay(); updateInventoryDisplay();
             choicesElement.innerHTML = '';
             if (pageData.options && pageData.options.length > 0) {
                 pageData.options.forEach(option => {
-                    const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = option.text; let requirementMet = true;
-                    if (option.requireItem && !gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; button.title = `Requires: ${option.requireItem}`; button.disabled = true; }
-                    if (requirementMet) { const choiceData = { nextPage: option.next, addItem: option.addItem, check: option.check }; button.onclick = () => handleChoiceClick(choiceData); } else { button.classList.add('disabled'); } choicesElement.appendChild(button); });
-            } else { const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = pageData.gameOver ? "Restart Adventure" : "The End"; button.onclick = () => handleChoiceClick({ nextPage: pageData.gameOver ? 1 : 99 }); choicesElement.appendChild(button); if (!pageData.gameOver) choicesElement.insertAdjacentHTML('afterbegin', '<p><i>The path ends here.</i></p>'); }
             updateScene(pageData.illustration || 'default');
         }
         function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); }
-        function updateStatsDisplay() { const char=gameState.character; statsElement.innerHTML = `<strong>Stats:</strong> <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 updateInventoryDisplay() { let h='<strong>Inventory:</strong> '; if(gameState.character.inventory.length === 0){ h+='<em>Empty</em>'; } else { gameState.character.inventory.forEach(i=>{ const d=itemsData[i]||{type:'unknown',description:'???'}; const c=`item-${d.type||'unknown'}`; h+=`<span class="${c}" title="${d.description}">${i}</span>`; }); } inventoryElement.innerHTML = h; }
         function updateScene(illustrationKey) {
-            // console.log(`Updating scene to: ${illustrationKey}`); // Minimal log
             if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
-            currentAssemblyGroup = null; let assemblyFunction;
             switch (illustrationKey) {
                 case 'city-gates': assemblyFunction = createCityGatesAssembly; break;
                 case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
@@ -411,57 +771,115 @@
                 case 'road-ambush': assemblyFunction = createRoadAmbushAssembly; break;
                 case 'forest-edge': assemblyFunction = createForestEdgeAssembly; break;
                 case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
-                case 'game-over': case 'game-over-generic': assemblyFunction = createGameOverAssembly; break; // Added generic key
                 case 'error': assemblyFunction = createErrorAssembly; break;
-                case 'crossroads-signpost-sunny': // New keys added
                 case 'rolling-green-hills-shepherd-distance':
                 case 'windy-sea-cliffs-crashing-waves-path-down':
-                case 'hilltop-view-overgrown-shrine-wildflowers':
                 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-shadows-hiding-goblins-walking-past':
-                case 'defeated-goblins-forest-path-loot':
-                case 'blurred-motion-running-past-goblins-forest':
-                case 'forest-stream-crossing-dappled-sunlight-stones':
-                case 'mossy-log-bridge-over-forest-stream':
-                case 'character-splashing-into-stream-from-log':
-                case 'forest-edge-view-rocky-foothills-distant-mountain-fortress':
-                case 'climbing-rocky-foothills-path-fortress-closer':
-                case 'zoomed-view-mountain-fortress-western-ridge':
-                case 'rockslide-blocking-mountain-path-boulders':
-                case 'narrow-goat-trail-mountainside-fortress-view':
                 case 'hidden-cove-beach-dark-cave-entrance':
-                case 'character-fallen-at-bottom-of-cliff-path-cove':
-                case 'scanning-sea-cliffs-no-other-paths-visible':
-                case 'close-up-handholds-carved-in-cliff-face':
                 case 'dark-cave-entrance-dripping-water':
-                case 'overgrown-stone-shrine-wildflowers-close':
-                case 'rocky-badlands-cracked-earth-harsh-sun':
-                case 'character-climbing-over-boulders':
-                case 'character-slipping-on-rockslide-boulders':
-                case 'rough-detour-path-around-rockslide':
-                case 'narrow-windy-mountain-ridge-path':
-                case 'approaching-dark-fortress-walls-guards':
-                case 'character-falling-off-windy-ridge':
-                // Add specific assembly functions for these later or assign existing ones
-                    console.warn(`Assembly function not yet defined for: "${illustrationKey}". Using default.`);
-                    assemblyFunction = createDefaultAssembly; break;
                 default:
                     console.warn(`Unknown illustration key: "${illustrationKey}". Using default.`);
                     assemblyFunction = createDefaultAssembly; break;
             }
-            try { currentAssemblyGroup = assemblyFunction(); scene.add(currentAssemblyGroup); } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); }
         }
         document.addEventListener('DOMContentLoaded', () => {
-             console.log("DOM Ready.");
-             try { initThreeJS(); startGame(); } catch (error) { console.error("Init failed:", error); storyTitleElement.textContent = "Error"; storyContentElement.innerHTML = `<p>Init Error. Check console.</p><pre>${error}</pre>`; }
         });
     </script>
 </body>
 </html>

         .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; }
         .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; }
     </style>
 </head>
 <body>
     <div id="game-container">
         <div id="scene-container"></div>
         <div id="ui-container">
     <script type="module">
         import * as THREE from 'three';
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
         let scene, camera, renderer;
         let currentAssemblyGroup = null;
+        // Materials
         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 });
         const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
         const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 });
         const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
+        const dirtMaterial = new THREE.MeshStandardMaterial({ color: 0x8B5E3C, roughness: 0.9 });
+        const grassMaterial = new THREE.MeshStandardMaterial({ color: 0x3CB371, roughness: 0.8 });
+        const oceanMaterial = new THREE.MeshStandardMaterial({ color: 0x1E90FF, roughness: 0.5, metalness: 0.2 });
+        const sandMaterial = new THREE.MeshStandardMaterial({ color: 0xF4A460, roughness: 0.9 });
+        const wetStoneMaterial = new THREE.MeshStandardMaterial({ color: 0x2F4F4F, roughness: 0.7 });
+        const glowMaterial = new THREE.MeshStandardMaterial({ color: 0x00FFAA, emissive: 0x00FFAA, emissiveIntensity: 0.5 });
         function initThreeJS() {
             if (!sceneContainer) { console.error("Scene container not found!"); return; }
             sceneContainer.appendChild(renderer.domElement);
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             window.addEventListener('resize', onWindowResize, false);
             setTimeout(onWindowResize, 100);
             animate();
         function animate() {
             requestAnimationFrame(animate);
+            const time = performance.now() * 0.001;
+            scene.traverse(obj => {
+                if (obj.userData.update) obj.userData.update(time);
+            });
             if (renderer && scene && camera) {
                 renderer.render(scene, camera);
             }
             return ground;
         }
+        // Procedural Generation Functions
+        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());
+            return group;
+        }
+        function createTempleAssembly() {
+            const group = new THREE.Group();
+            const bs=5, bsh=0.5, ch=3, cr=0.25, rh=0.5;
+            const bGeo = new THREE.BoxGeometry(bs, bsh, bs);
+            group.add(createMesh(bGeo, templeMaterial, { x:0, y:bsh/2, z:0 }));
+            const cGeo = new THREE.CylinderGeometry(cr, cr, ch, 12);
+            const cPos = [{x:-bs/3, z:-bs/3}, {x:bs/3, z:-bs/3}, {x:-bs/3, z:bs/3}, {x:bs/3, z:bs/3}];
+            cPos.forEach(p=>group.add(createMesh(cGeo.clone(), templeMaterial, { x:p.x, y:bsh+ch/2, z:p.z })));
+            const rGeo = new THREE.BoxGeometry(bs*0.9, rh, bs*0.9);
+            group.add(createMesh(rGeo, templeMaterial, { x:0, y:bsh+ch+rh/2, z:0 }));
+            group.add(createGroundPlane());
+            return group;
+        }
+        function createResistanceMeetingAssembly() {
+            const group = new THREE.Group();
+            const tw=2, th=0.8, td=1, tt=0.1;
+            const ttg = new THREE.BoxGeometry(tw, tt, td);
+            group.add(createMesh(ttg, woodMaterial, { x:0, y:th-tt/2, z:0 }));
+            const lh=th-tt, ls=0.1;
+            const lg=new THREE.BoxGeometry(ls, lh, ls);
+            const lofW=tw/2-ls*1.5;
+            const lofD=td/2-ls*1.5;
+            group.add(createMesh(lg, woodMaterial, { x:-lofW, y:lh/2, z:-lofD }));
+            group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:-lofD }));
+            group.add(createMesh(lg.clone(), woodMaterial, { x:-lofW, y:lh/2, z:lofD }));
+            group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:lofD }));
+            const ss=0.4;
+            const sg=new THREE.BoxGeometry(ss, ss*0.8, ss);
+            group.add(createMesh(sg, darkWoodMaterial, { x:-tw*0.6, y:ss*0.4, z:0 }));
+            group.add(createMesh(sg.clone(), darkWoodMaterial, { x:tw*0.6, y:ss*0.4, z:0 }));
+            group.add(createGroundPlane(stoneMaterial));
+            return group;
+        }
+        function createForestAssembly(tc=10, a=10) {
+            const group = new THREE.Group();
+            const cT=(x,z)=>{
+                const tg=new THREE.Group();
+                const th=Math.random()*1.5+2;
+                const tr=Math.random()*0.1+0.1;
+                const tGeo = new THREE.CylinderGeometry(tr*0.7, tr, th, 8);
+                tg.add(createMesh(tGeo, woodMaterial, {x:0, y:th/2, z:0}));
+                const fr=th*0.4+0.2;
+                const fGeo=new THREE.SphereGeometry(fr, 8, 6);
+                tg.add(createMesh(fGeo, leafMaterial, {x:0, y:th*0.9, z:0}));
+                tg.position.set(x,0,z);
+                return tg;
+            };
+            for(let i=0; i<tc; i++){
+                const x=(Math.random()-0.5)*a;
+                const z=(Math.random()-0.5)*a;
+                if(Math.sqrt(x*x+z*z)>1.0) group.add(cT(x,z));
+            }
+            group.add(createGroundPlane(groundMaterial, a*1.1));
+            return group;
+        }
+        function createRoadAmbushAssembly() {
+            const group = new THREE.Group();
+            const a=12;
+            const fg = createForestAssembly(8, a);
+            group.add(fg);
+            const rw=3, rl=a*1.2;
+            const rGeo=new THREE.PlaneGeometry(rw, rl);
+            const rMat=new THREE.MeshStandardMaterial({color:0x966F33, roughness:0.9});
+            const r=createMesh(rGeo, rMat, {x:0, y:0.01, z:0}, {x:-Math.PI/2});
+            r.receiveShadow=true;
+            group.add(r);
+            const rkGeo=new THREE.SphereGeometry(0.5, 5, 4);
+            const rkMat=new THREE.MeshStandardMaterial({color:0x666666, roughness:0.8});
+            group.add(createMesh(rkGeo, rkMat, {x:rw*0.7, y:0.25, z:1}, {y:Math.random()*Math.PI}));
+            group.add(createMesh(rkGeo.clone().scale(0.8,0.8,0.8), rkMat, {x:-rw*0.8, y:0.2, z:-2}, {y:Math.random()*Math.PI}));
+            return group;
+        }
+        function createForestEdgeAssembly() {
+            const group = new THREE.Group();
+            const a=15;
+            const fg = createForestAssembly(15, a);
+            const ttr=[];
+            fg.children.forEach(c => {
+                if(c.type === 'Group' && c.position.x > 0) ttr.push(c);
+            });
+            ttr.forEach(t => fg.remove(t));
+            group.add(fg);
+            return group;
+        }
+        function createPrisonerCellAssembly() {
+            const group = new THREE.Group();
+            const cs=3, wh=2.5, wt=0.2, br=0.05, bsp=0.25;
+            const cfMat=stoneMaterial.clone();
+            cfMat.color.setHex(0x555555);
+            group.add(createGroundPlane(cfMat, cs));
+            const wbGeo=new THREE.BoxGeometry(cs, wh, wt);
+            group.add(createMesh(wbGeo, stoneMaterial, {x:0, y:wh/2, z:-cs/2}));
+            const wsGeo=new THREE.BoxGeometry(wt, wh, cs);
+            group.add(createMesh(wsGeo, stoneMaterial, {x:-cs/2, y:wh/2, z:0}));
+            group.add(createMesh(wsGeo.clone(), stoneMaterial, {x:cs/2, y:wh/2, z:0}));
+            const bGeo=new THREE.CylinderGeometry(br, br, wh, 8);
+            const nb=Math.floor(cs/bsp);
+            for(let i=0; i<nb; i++){
+                const xp=-cs/2+(i+0.5)*bsp;
+                group.add(createMesh(bGeo.clone(), metalMaterial, {x:xp, y:wh/2, z:cs/2}));
+            }
+            return group;
+        }
+        function createGameOverAssembly() {
+            const group = new THREE.Group();
+            const boxGeo = new THREE.BoxGeometry(2, 2, 2);
+            group.add(createMesh(boxGeo, gameOverMaterial, { x: 0, y: 1, z: 0 }));
+            group.add(createGroundPlane(stoneMaterial.clone().set({color: 0x333333})));
+            return group;
+        }
+        function createErrorAssembly() {
+            const group = new THREE.Group();
+            const coneGeo = new THREE.ConeGeometry(0.8, 1.5, 8);
+            group.add(createMesh(coneGeo, errorMaterial, { x: 0, y: 0.75, z: 0 }));
+            group.add(createGroundPlane());
+            return group;
+        }
+        function createCrossroadsAssembly() {
+            const group = new THREE.Group();
+            group.add(createGroundPlane(dirtMaterial, 30));
+            const poleGeo = new THREE.CylinderGeometry(0.1, 0.1, 3, 8);
+            group.add(createMesh(poleGeo, woodMaterial, { y: 1.5 }));
+            const signGeo = new THREE.BoxGeometry(1.5, 0.3, 0.05);
+            group.add(createMesh(signGeo, woodMaterial, { y: 2.5, z: 0.2 }, { y: Math.PI / 4 }));
+            group.add(createMesh(signGeo, woodMaterial, { y: 2.5, z: -0.2 }, { y: -Math.PI / 4 }));
+            const grassGeo = new THREE.ConeGeometry(0.2, 0.5, 6);
+            for (let i = 0; i < 20; i++) {
+                const x = (Math.random() - 0.5) * 15;
+                const z = (Math.random() - 0.5) * 15;
+                if (Math.abs(x) > 2 || Math.abs(z) > 2) {
+                    group.add(createMesh(grassGeo, grassMaterial, { x, y: 0.25, z }, { y: Math.random() * Math.PI }));
+                }
+            }
+            const rockGeo = new THREE.SphereGeometry(0.3, 6, 6);
+            for (let i = 0; i < 10; i++) {
+                group.add(createMesh(rockGeo, stoneMaterial, { x: (Math.random() - 0.5) * 10, y: 0.15, z: (Math.random() - 0.5) * 10 }, { y: Math.random() * Math.PI }));
+            }
+            return group;
+        }
+        function createRollingHillsAssembly() {
+            const group = new THREE.Group();
+            const hillGeo = new THREE.PlaneGeometry(50, 50, 10, 10);
+            const hillMat = grassMaterial.clone();
+            const hill = new THREE.Mesh(hillGeo, hillMat);
+            hill.rotation.x = -Math.PI / 2;
+            hill.receiveShadow = true;
+            for (let i = 0; i < hillGeo.attributes.position.count; i++) {
+                const x = hillGeo.attributes.position.getX(i);
+                const z = hillGeo.attributes.position.getZ(i);
+                hillGeo.attributes.position.setY(i, Math.sin(x * 0.2 + z * 0.2) * 2);
+            }
+            hillGeo.computeVertexNormals();
+            group.add(hill);
+            const shepherdGeo = new THREE.CylinderGeometry(0.1, 0.1, 1, 8);
+            group.add(createMesh(shepherdGeo, darkWoodMaterial, { x: 10, y: 2, z: -15 }));
+            const grassGeo = new THREE.ConeGeometry(0.3, 0.7, 6);
+            for (let i = 0; i < 50; i++) {
+                group.add(createMesh(grassGeo, grassMaterial, { x: (Math.random() - 0.5) * 40, y: 0.35, z: (Math.random() - 0.5) * 40 }, { y: Math.random() * Math.PI }));
+            }
+            return group;
+        }
+        function createCoastalCliffsAssembly() {
+            const group = new THREE.Group();
+            const cliffGeo = new THREE.BoxGeometry(10, 5, 10);
+            group.add(createMesh(cliffGeo, stoneMaterial, { y: 2.5 }));
+            const pathGeo = new THREE.PlaneGeometry(1, 10);
+            const path = createMesh(pathGeo, dirtMaterial, { x: -2, y: 2, z: 0 }, { x: -Math.PI / 2, z: -Math.PI / 4 });
+            group.add(path);
+            const oceanGeo = new THREE.PlaneGeometry(100, 100);
+            const ocean = createMesh(oceanGeo, oceanMaterial, { y: -2 }, { x: -Math.PI / 2 });
+            ocean.receiveShadow = false;
+            ocean.userData.update = (time) => {
+                ocean.position.y = -2 + Math.sin(time * 0.5) * 0.1;
+            };
+            group.add(ocean);
+            return group;
+        }
+        function createForestEntranceAssembly() {
+            const group = createForestAssembly(20, 12);
+            const rootGeo = new THREE.TorusGeometry(0.5, 0.1, 8, 16);
+            for (let i = 0; i < 10; i++) {
+                group.add(createMesh(rootGeo, woodMaterial, { x: (Math.random() - 0.5) * 8, y: 0.1, z: (Math.random() - 0.5) * 8 }, { x: Math.PI / 2 }));
+            }
+            return group;
+        }
+        function createOvergrownPathAssembly() {
+            const group = new THREE.Group();
+            group.add(createGroundPlane(dirtMaterial, 15));
+            const forest = createForestAssembly(15, 10);
+            group.add(forest);
+            const fungiGeo = new THREE.SphereGeometry(0.1, 8, 8);
+            for (let i = 0; i < 30; i++) {
+                group.add(createMesh(fungiGeo, glowMaterial, { x: (Math.random() - 0.5) * 8, y: 0.1, z: (Math.random() - 0.5) * 8 }));
+            }
+            const vineGeo = new THREE.CylinderGeometry(0.05, 0.05, 2, 8);
+            for (let i = 0; i < 10; i++) {
+                group.add(createMesh(vineGeo, leafMaterial, { x: (Math.random() - 0.5) * 6, y: 2, z: (Math.random() - 0.5) * 6 }, { z: Math.random() * Math.PI }));
+            }
+            return group;
+        }
+        function createClearingStatueAssembly() {
+            const group = new THREE.Group();
+            group.add(createGroundPlane(grassMaterial, 10));
+            const statueGeo = new THREE.BoxGeometry(0.8, 2, 0.8);
+            group.add(createMesh(statueGeo, stoneMaterial, { y: 1 }));
+            const mossGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            for (let i = 0; i < 10; i++) {
+                group.add(createMesh(mossGeo, grassMaterial, { x: (Math.random() - 0.5) * 0.8, y: 0.5 + Math.random(), z: (Math.random() - 0.5) * 0.8 }));
+            }
+            const leafGeo = new THREE.PlaneGeometry(0.1, 0.1);
+            for (let i = 0; i < 20; i++) {
+                group.add(createMesh(leafGeo, leafMaterial, { x: (Math.random() - 0.5) * 5, y: 0.05, z: (Math.random() - 0.5) * 5 }, { y: Math.random() * Math.PI }));
+            }
+            return group;
+        }
+        function createGoblinAmbushAssembly() {
+            const group = createOvergrownPathAssembly();
+            const bodyGeo = new THREE.CylinderGeometry(0.3, 0.3, 1, 8);
+            const headGeo = new THREE.SphereGeometry(0.2, 8, 8);
+            const goblinMat = new THREE.MeshStandardMaterial({ color: 0x556B2F });
+            for (let i = -1; i <= 1; i += 2) {
+                const goblin = new THREE.Group();
+                goblin.add(createMesh(bodyGeo, goblinMat, { y: 0.5 }));
+                goblin.add(createMesh(headGeo, goblinMat, { y: 1.2 }));
+                const spearGeo = new THREE.CylinderGeometry(0.05, 0.05, 2, 8);
+                goblin.add(createMesh(spearGeo, woodMaterial, { x: 0.3, y: 1, z: 0 }, { z: Math.PI / 4 }));
+                goblin.position.set(i * 2, 0, 2);
+                group.add(goblin);
+            }
+            return group;
+        }
+        function createHiddenCoveAssembly() {
+            const group = new THREE.Group();
+            group.add(createGroundPlane(sandMaterial, 15));
+            const caveGeo = new THREE.BoxGeometry(3, 2, 3);
+            group.add(createMesh(caveGeo, stoneMaterial, { z: -5, y: 1 }));
+            const rockGeo = new THREE.SphereGeometry(0.5, 6, 6);
+            for (let i = 0; i < 15; i++) {
+                group.add(createMesh(rockGeo, stoneMaterial, { x: (Math.random() - 0.5) * 10, y: 0.25, z: (Math.random() - 0.5) * 10 }));
+            }
+            const seaweedGeo = new THREE.ConeGeometry(0.2, 1, 6);
+            for (let i = 0; i < 10; i++) {
+                group.add(createMesh(seaweedGeo, leafMaterial, { x: (Math.random() - 0.5) * 8, y: 0.5, z: (Math.random() - 0.5) * 8 }));
+            }
+            return group;
+        }
+        function createDarkCaveAssembly() {
+            const group = new THREE.Group();
+            group.add(createGroundPlane(wetStoneMaterial, 10));
+            const wallGeo = new THREE.CylinderGeometry(3, 3, 5, 12, 1, true);
+            const wall = createMesh(wallGeo, stoneMaterial, { y: 2.5 }, { x: Math.PI / 2 });
+            wall.scale.set(1, 1, -1);
+            group.add(wall);
+            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) * 2, y: 4, z: (Math.random() - 0.5) * 2 });
+                drip.userData.update = (time) => {
+                    drip.position.y -= 0.1;
+                    if (drip.position.y < 0) drip.position.y = 4;
+                };
+                group.add(drip);
+            }
+            return group;
+        }
+        // Game Data
+        const itemsData = {
+            "Flaming Sword":{type:"weapon", description:"A fiery blade"},
+            "Whispering Bow":{type:"weapon", description:"A silent bow"},
+            "Guardian Shield":{type:"armor", description:"A protective shield"},
+            "Healing Light Spell":{type:"spell", description:"Mends minor wounds"},
+            "Shield of Faith Spell":{type:"spell", description:"Temporary shield"},
+            "Binding Runes Scroll":{type:"spell", description:"Binds an enemy"},
+            "Secret Tunnel Map":{type:"quest", description:"Shows a hidden path"},
+            "Poison Daggers":{type:"weapon", description:"Daggers with poison"},
+            "Master Key":{type:"quest", description:"Unlocks many doors"},
+            "Crude Dagger":{type:"weapon", description:"A roughly made dagger."},
+            "Scout's Pouch":{type:"quest", description:"Contains odds and ends."}
+        };
         const gameData = {
+            "1": { title: "The Crossroads", content: `<p>Dust swirls... 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... It feels peaceful...</p>`, options: [ { text: "Follow the narrow path", 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... A precarious-looking path descends...</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" },
+            "4": { title: "Hill Path Overlook", content: `<p>The path crests a hill... you see a small, overgrown shrine...</p>`, options: [ { text: "Investigate the overgrown shrine", next: 40 }, { text: "Continue towards the badlands", next: 41 } ], illustration: "hilltop-view-overgrown-shrine-wildflowers" },
+            "5": { title: "Shadowwood Entrance", content: `<p>Sunlight struggles to pierce the dense canopy... How do you proceed?</p>`, options: [ { text: "Follow the main, albeit overgrown, path", next: 6 }, { text: "Try to navigate through the lighter undergrowth", next: 7 }, { text: "Look for animal trails or signs of passage (Wisdom Check)", check: { stat: 'wisdom', dc: 10, onFailure: 6 }, next: 8 } ], illustration: "dark-forest-entrance-gnarled-roots-filtered-light" },
+            "6": { title: "Overgrown Forest Path", content: `<p>The path is barely visible... You hear a twig snap nearby!</p>`, options: [ { text: "Ready your weapon and investigate", next: 10 }, { text: "Attempt to hide quietly (Dexterity Check)", check: { stat: 'dexterity', dc: 11, onFailure: 10 }, next: 11 }, { text: "Call out cautiously", next: 10 } ], illustration: "overgrown-forest-path-glowing-fungi-vines" },
+            "7": { title: "Tangled Undergrowth", content: `<p>Pushing through ferns... You stumble upon a small clearing containing a moss-covered, weathered stone statue...</p>`, options: [ { text: "Examine the statue closely (Intelligence Check)", check: { stat: 'intelligence', dc: 13, onFailure: 71 }, next: 70 }, { text: "Ignore the statue and press on", next: 72 }, { text: "Leave a small offering (if possible)", next: 73 } ], illustration: "forest-clearing-mossy-statue-weathered-stone" },
+            "8": { title: "Hidden Game Trail", content: `<p>Your sharp eyes spot a faint trail... It leads towards a ravine spanned by a rickety rope bridge.</p><p>(+20 XP)</p>`, options: [ { text: "Risk crossing the rope bridge (Dexterity Check)", check: { stat: 'dexterity', dc: 10, onFailure: 81 }, next: 80 }, { text: "Search for another way across the ravine", next: 82 } ], illustration: "narrow-game-trail-forest-rope-bridge-ravine", reward: { xp: 20 } },
+            "10": { title: "Goblin Ambush!", content: `<p>Two scraggly goblins leap out, brandishing crude spears!</p>`, options: [ { text: "Fight the goblins!", next: 12 }, { text: "Attempt to dodge past them (Dexterity Check)", check: { stat: 'dexterity', dc: 13, onFailure: 10 }, next: 13 } ], illustration: "two-goblins-ambush-forest-path-spears" },
             "11": { title: "Hidden Evasion", content: `<p>You melt into the shadows as the goblins blunder past.</p><p>(+30 XP)</p>`, options: [ { text: "Continue cautiously", next: 14 } ], illustration: "forest-shadows-hiding-goblins-walking-past", reward: { xp: 30 } },
+            "12": { title: "Ambush Victory!", content: `<p>You defeat the goblins! Found a Crude Dagger.</p><p>(+50 XP)</p>`, options: [ { text: "Press onward", next: 14 } ], illustration: "defeated-goblins-forest-path-loot", reward: { xp: 50, addItem: "Crude Dagger" } },
             "13": { title: "Daring Escape", content: `<p>With surprising agility, you tumble past the goblins!</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 path leads to a clear, shallow stream...</p>`, options: [ { text: "Wade across the stream", next: 16 }, { text: "Look for a drier crossing point (fallen log?)", next: 15 } ], illustration: "forest-stream-crossing-dappled-sunlight-stones" },
             "15": { title: "Log Bridge", content: `<p>Further upstream, a large, mossy log spans the stream.</p>`, options: [ { text: "Cross carefully on the log (Dexterity Check)", check: { stat: 'dexterity', dc: 9, onFailure: 151 }, next: 16 }, { text: "Go back and wade instead", next: 14 } ], illustration: "mossy-log-bridge-over-forest-stream" },
             "31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard on the sandy cove floor. You lose 5 HP. A dark cave entrance beckons.</p>`, options: [ { text: "Gingerly explore the dark cave", next: 35 } ], illustration: "character-fallen-at-bottom-of-cliff-path-cove", hpLoss: 5 },
             "32": { title: "No Easier Path", content: `<p>You scan the cliffs intently but find no obviously easier routes.</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 } ], illustration: "scanning-sea-cliffs-no-other-paths-visible" },
             "33": { title: "Smuggler's Steps?", content: `<p>Your keen eyes spot a series of barely visible handholds and steps carved into the rock...</p><p>(+15 XP)</p>`, options: [ { text: "Use the hidden steps (Easier Dex Check)", check: { stat: 'dexterity', dc: 8, onFailure: 31 }, next: 30 } ], illustration: "close-up-handholds-carved-in-cliff-face", reward: { xp: 15 } },
+            "35": { title: "Dark Cave", content: `<p>The cave smells of salt and decay. Water drips somewhere within.</p>`, options: [{ text: "Press deeper into the darkness", next: 99 } ], illustration: "dark-cave-entrance-dripping-water" },
             "40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine. It feels ancient and neglected.</p>`, options: [{ text: "Examine the carvings (Intelligence Check)", check:{stat:'intelligence', dc:11, onFailure: 401}, next: 400 } ], illustration: "overgrown-stone-shrine-wildflowers-close" },
+            "41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth and jagged rock formations under a harsh sun.</p>`, options: [{ text: "Scout ahead", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" },
             "190": { title: "Over the Rocks", content:"<p>With considerable effort, you manage to climb over the rockslide.</p><p>(+35 XP)</p>", options: [{text:"Continue up the path", next: 22}], illustration:"character-climbing-over-boulders", reward: {xp:35} },
             "191": { title: "Climb Fails", content:"<p>The boulders are too unstable or sheer. You cannot climb them safely.</p>", options: [{text:"Search for another way around", next: 192}], illustration:"character-slipping-on-rockslide-boulders"},
             "192": { title: "Detour Found", content:"<p>After some searching, you find a rough path leading around the rockslide, eventually rejoining the main trail.</p>", options: [{text:"Continue up the path", next: 22}], illustration:"rough-detour-path-around-rockslide"},
             "21": { title: "Western Ridge", content:"<p>The ridge path is narrow and exposed, with strong winds threatening to push you off.</p>", options: [{text:"Proceed carefully (Dexterity Check)", check:{stat:'dexterity', dc: 14, onFailure: 211}, next: 22 } ], illustration:"narrow-windy-mountain-ridge-path" },
+            "22": { title: "Fortress Approach", content:"<p>You've navigated the treacherous paths and now stand near the outer walls of the dark fortress. Guards patrol the battlements.</p>", options: [{text:"Look for an unguarded entrance", next: 99}], illustration:"approaching-dark-fortress-walls-guards"},
             "211": {title:"Lost Balance", content:"<p>A strong gust of wind catches you off guard, sending you tumbling down a steep slope! You lose 10 HP.</p>", options:[{text:"Climb back up and find another way", next: 17}], illustration:"character-falling-off-windy-ridge", hpLoss: 10},
             "99": { title: "Game Over / To Be Continued...", content: "<p>Your adventure ends here (for now).</p>", options: [{ text: "Restart", next: 1 }], illustration: "game-over-generic", gameOver: true }
         };
+        // Game State
         let gameState = {
             currentPageId: 1,
             character: {
             }
         };
+        // Game Logic Functions
         function startGame() {
             const defaultChar = { name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer", level: 1, xp: 0, xpToNextLevel: 100, stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 }, inventory: [] };
+            gameState = { currentPageId: 1, character: { ...defaultChar } };
             renderPage(gameState.currentPageId);
         }
             const itemToAdd = choiceData.addItem;
             let nextPageId = optionNextPageId;
             let rollResultMessage = "";
+            const check = choiceData.check;
             if (isNaN(optionNextPageId) && !check) { console.error("Invalid choice data:", choiceData); return; }
                 const dc = check.dc;
                 console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
                 if (totalResult >= dc) {
+                    nextPageId = optionNextPageId;
                     rollResultMessage = `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
                 } else {
+                    nextPageId = parseInt(check.onFailure);
                     rollResultMessage = `<p class="roll-failure"><em>Check Failed! (${totalResult} vs DC ${dc})</em></p>`;
                     if (isNaN(nextPageId)) { console.error("Invalid onFailure ID:", check.onFailure); nextPageId = 99; }
                 }
                 if (nextPageData.hpLoss) {
                     gameState.character.stats.hp -= nextPageData.hpLoss;
                     console.log(`Lost ${nextPageData.hpLoss} HP.`);
+                    if (gameState.character.stats.hp <= 0) { gameState.character.stats.hp = 0; console.log("Player died!"); nextPageId = 99; }
                 }
                 if (nextPageData.reward) {
                     if (nextPageData.reward.xp) { gameState.character.xp += nextPageData.reward.xp; console.log(`Gained ${nextPageData.reward.xp} XP! Total: ${gameState.character.xp}`); }
+                    if (nextPageData.reward.statIncrease) {
+                        const stat = nextPageData.reward.statIncrease.stat;
+                        const amount = nextPageData.reward.statIncrease.amount;
+                        if (gameState.character.stats.hasOwnProperty(stat)) {
+                            gameState.character.stats[stat] += amount;
+                            console.log(`Stat ${stat} increased by ${amount}.`);
+                        }
+                    }
+                    if(nextPageData.reward.addItem && !gameState.character.inventory.includes(nextPageData.reward.addItem)){
+                        gameState.character.inventory.push(nextPageData.reward.addItem);
+                        console.log(`Found item: ${nextPageData.reward.addItem}`);
+                    }
+                }
+                const conModifier = Math.floor((gameState.character.stats.constitution - 10) / 2);
+                gameState.character.stats.maxHp = 10 + (conModifier * gameState.character.level);
+                gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp);
+                if (nextPageId === 99 && gameState.character.stats.hp <= 0) {
+                    renderPageInternal(99, gameData[99], rollResultMessage);
+                    return;
                 }
             } else {
                 console.error(`Data for page ${nextPageId} not found!`);
                 renderPageInternal(99, gameData[99], "<p><em>Error: Next page data missing!</em></p>");
         }
         function renderPageInternal(pageId, pageData, message = "") {
+            if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); return; }
             storyTitleElement.textContent = pageData.title || "Untitled Page";
             storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
+            updateStatsDisplay();
+            updateInventoryDisplay();
             choicesElement.innerHTML = '';
             if (pageData.options && pageData.options.length > 0) {
                 pageData.options.forEach(option => {
+                    const button = document.createElement('button');
+                    button.classList.add('choice-button');
+                    button.textContent = option.text;
+                    let requirementMet = true;
+                    if (option.requireItem && !gameState.character.inventory.includes(option.requireItem)) {
+                        requirementMet = false;
+                        button.title = `Requires: ${option.requireItem}`;
+                        button.disabled = true;
+                    }
+                    if (requirementMet) {
+                        const choiceData = { nextPage: option.next, addItem: option.addItem, check: option.check };
+                        button.onclick = () => handleChoiceClick(choiceData);
+                    } else {
+                        button.classList.add('disabled');
+                    }
+                    choicesElement.appendChild(button);
+                });
+            } else {
+                const button = document.createElement('button');
+                button.classList.add('choice-button');
+                button.textContent = pageData.gameOver ? "Restart Adventure" : "The End";
+                button.onclick = () => handleChoiceClick({ nextPage: pageData.gameOver ? 1 : 99 });
+                choicesElement.appendChild(button);
+                if (!pageData.gameOver) choicesElement.insertAdjacentHTML('afterbegin', '<p><i>The path ends here.</i></p>');
+            }
             updateScene(pageData.illustration || 'default');
         }
         function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); }
+        function updateStatsDisplay() {
+            const char=gameState.character;
+            statsElement.innerHTML = `<strong>Stats:</strong> <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 updateInventoryDisplay() {
+            let h='<strong>Inventory:</strong> ';
+            if(gameState.character.inventory.length === 0){
+                h+='<em>Empty</em>';
+            } else {
+                gameState.character.inventory.forEach(i=>{
+                    const d=itemsData[i]||{type:'unknown',description:'???'};
+                    const c=`item-${d.type||'unknown'}`;
+                    h+=`<span class="${c}" title="${d.description}">${i}</span>`;
+                });
+            }
+            inventoryElement.innerHTML = h;
+        }
         function updateScene(illustrationKey) {
             if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
+            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 'road-ambush': assemblyFunction = createRoadAmbushAssembly; break;
                 case 'forest-edge': assemblyFunction = createForestEdgeAssembly; 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, 30);
+                    scene.background = new THREE.Color(0x87CEEB);
+                    camera.position.set(0, 3, 10); camera.lookAt(0, 1, 0);
+                    assemblyFunction = createCrossroadsAssembly; break;
                 case 'rolling-green-hills-shepherd-distance':
+                    scene.fog = new THREE.Fog(0xA8E4A0, 15, 50);
+                    camera.position.set(0, 5, 15); camera.lookAt(0, 2, -5);
+                    assemblyFunction = createRollingHillsAssembly; break;
                 case 'windy-sea-cliffs-crashing-waves-path-down':
+                    scene.fog = new THREE.Fog(0x6699CC, 10, 40);
+                    scene.background = new THREE.Color(0x6699CC);
+                    camera.position.set(5, 5, 10); camera.lookAt(-2, 0, -5);
+                    assemblyFunction = createCoastalCliffsAssembly; 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);
+                    assemblyFunction = createForestEntranceAssembly; break;
                 case 'overgrown-forest-path-glowing-fungi-vines':
+                    scene.fog = new THREE.Fog(0x1A2F2A, 3, 15);
+                    camera.position.set(0, 1.5, 6); camera.lookAt(0, 0.5, 0);
+                    assemblyFunction = createOvergrownPathAssembly; break;
                 case 'forest-clearing-mossy-statue-weathered-stone':
+                    scene.fog = new THREE.Fog(0x2E4F3A, 5, 25);
+                    camera.position.set(0, 2, 5); camera.lookAt(0, 1, 0);
+                    assemblyFunction = createClearingStatueAssembly; break;
                 case 'two-goblins-ambush-forest-path-spears':
+                    scene.fog = new THREE.Fog(0x2E2E2E, 5, 20);
+                    camera.position.set(0, 2, 7); camera.lookAt(0, 1, 0);
+                    assemblyFunction = createGoblinAmbushAssembly; break;
                 case 'hidden-cove-beach-dark-cave-entrance':
+                    scene.fog = new THREE.Fog(0x336699, 5, 30);
+                    scene.background = new THREE.Color(0x336699);
+                    camera.position.set(0, 2, 8); camera.lookAt(0, 1, -2);
+                    assemblyFunction = createHiddenCoveAssembly; break;
                 case 'dark-cave-entrance-dripping-water':
+                    scene.fog = new THREE.Fog(0x1A1A1A, 2, 10);
+                    scene.background = new THREE.Color(0x1A1A1A);
+                    camera.position.set(0, 1.5, 4); camera.lookAt(0, 1, 0);
+                    assemblyFunction = createDarkCaveAssembly; break;
                 default:
                     console.warn(`Unknown illustration key: "${illustrationKey}". Using default.`);
                     assemblyFunction = createDefaultAssembly; break;
             }
+            try {
+                currentAssemblyGroup = assemblyFunction();
+                scene.add(currentAssemblyGroup);
+                adjustLighting(illustrationKey);
+            } catch (error) {
+                console.error(`Error creating assembly for ${illustrationKey}:`, error);
+                currentAssemblyGroup = createErrorAssembly();
+                scene.add(currentAssemblyGroup);
+            }
+        }
+        function adjustLighting(illustrationKey) {
+            scene.children.forEach(child => {
+                if (child.isLight && child !== scene.children.find(c => c.isAmbientLight)) {
+                    scene.remove(child);
+                }
+            });
+            const ambient = scene.children.find(c => c.isAmbientLight);
+            let directionalLight;
+            switch (illustrationKey) {
+                case 'crossroads-signpost-sunny':
+                    ambient.intensity = 0.8;
+                    directionalLight = new THREE.DirectionalLight(0xFFF8E1, 1.5);
+                    directionalLight.position.set(10, 15, 10);
+                    break;
+                case 'dark-forest-entrance-gnarled-roots-filtered-light':
+                case 'overgrown-forest-path-glowing-fungi-vines':
+                    ambient.intensity = 0.3;
+                    directionalLight = new THREE.DirectionalLight(0xA8E4A0, 0.6);
+                    directionalLight.position.set(5, 10, 5);
+                    break;
+                case 'dark-cave-entrance-dripping-water':
+                    ambient.intensity = 0.1;
+                    directionalLight = new THREE.DirectionalLight(0x666666, 0.2);
+                    directionalLight.position.set(2, 5, 2);
+                    break;
+                default:
+                    ambient.intensity = 0.5;
+                    directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
+                    directionalLight.position.set(8, 15, 10);
+            }
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.set(1024, 1024);
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 50;
+            directionalLight.shadow.camera.left = -15;
+            directionalLight.shadow.camera.right = 15;
+            directionalLight.shadow.camera.top = 15;
+            directionalLight.shadow.camera.bottom = -15;
+            scene.add(directionalLight);
         }
         document.addEventListener('DOMContentLoaded', () => {
+            console.log("DOM Ready.");
+            try {
+                initThreeJS();
+                startGame();
+            } catch (error) {
+                console.error("Init failed:", error);
+                storyTitleElement.textContent = "Error";
+                storyContentElement.innerHTML = `<p>Init Error. Check console.</p><pre>${error}</pre>`;
+            }
         });
     </script>
 </body>
 </html>