Spaces:

awacke1
/

ChooseYourOwnAdventure

Running

App Files Files Community

awacke1 commited on 26 days ago

Commit

5ead6ab

verified ·

1 Parent(s): edaf0c0

Update index.html

Browse files

Files changed (1) hide show

index.html +233 -112

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Choose Your Own Procedural Adventure (Stable Base)</title>
     <style>
         body{font-family:'Courier New',monospace;background-color:#222;color:#eee;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;height:100vh}
         #game-container{display:flex;flex-grow:1;overflow:hidden}
@@ -32,7 +32,14 @@
         .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}
-        .xp-gain{color:#7af;font-style:italic;font-size:0.9em;display:block;margin-top:0.5em;} /* Style for XP messages */
     </style>
 </head>
 <body>
@@ -47,7 +54,7 @@
             <div id="stats-inventory-container">
                  <div id="stats-display"></div>
                  <div id="inventory-display"></div>
-            </div>
             <div id="choices-container">
                  <h3>What will you do?</h3>
                  <div id="choices"></div>
@@ -73,6 +80,7 @@
         const choicesElement = document.getElementById('choices');
         const statsElement = document.getElementById('stats-display');
         const inventoryElement = document.getElementById('inventory-display');
         let scene, camera, renderer;
         let currentAssemblyGroup = null;
@@ -81,19 +89,18 @@
         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 leafMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.6, metalness: 0 });
         const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 });
         const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
         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 });
-        // Added materials for forest variation from previous step, keep them
-        const pineLeafMaterial = new THREE.MeshStandardMaterial({ color: 0x1A5A2A, roughness: 0.7, metalness: 0 });
-        const gnarledWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x6B4F3A, roughness: 0.85, metalness: 0 });
         function initThreeJS() {
             if (!sceneContainer) { console.error("Scene container not found!"); return; }
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x222222);
             const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight;
             camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000);
             camera.position.set(0, 2.5, 7); camera.lookAt(0, 0.5, 0);
@@ -116,17 +123,20 @@
         }
         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); }
         }
         function animate() {
             requestAnimationFrame(animate);
             if (renderer && scene && camera) { renderer.render(scene, camera); }
         }
         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;
@@ -134,77 +144,89 @@
         }
         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 (Using simpler, non-parameterized versions first) ---
-        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(params = {}) { // Kept params for potential future use, but using defaults now
-            const group = new THREE.Group(); const tc=10, a=10; // Use fixed values
-            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(); 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(); 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."}, "Healing Poultice":{type:"spell", description:"Soothes wounds, heals 5 HP."} };
-        const gameData = { // Using the expanded game data with ~20 pages and checks
-            "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...</p>`, options: [ { text: "Follow the narrow path", next: 4 }, { text: "Head back to the crossroads", next: 1 } ], illustration: "rolling-green-hills-shepherd-distance" },
             "3": { title: "Coastal Cliffs Edge", content: `<p>You stand atop windswept cliffs...</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 }, { text: "Return to the crossroads", next: 1 } ], 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 }, { text: "Go back", next: 2 } ], 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 class="xp-gain">(+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: 101 }, 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 class="xp-gain">(+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 class="xp-gain">(+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 class="xp-gain">(+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" },
             "151": { title: "Splash!", content: `<p>You slip on the mossy log and tumble into the cold stream! You're soaked but unharmed.</p>`, options: [ { text: "Shake yourself off and continue", next: 16 } ], illustration: "character-splashing-into-stream-from-log" },
             "16": { title: "Edge of the Woods", content: `<p>You emerge from the Shadowwood... Before you lie rocky foothills...</p>`, options: [ { text: "Begin the ascent into the foothills", next: 17 }, { text: "Scan the fortress 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 fortress looms larger now.</p>`, options: [ { text: "Continue the direct ascent", next: 19 }, { text: "Look for signs of a hidden trail (Wisdom Check)", check: { stat: 'wisdom', dc: 15, onFailure: 19 }, next: 20 } ], illustration: "climbing-rocky-foothills-path-fortress-closer" },
-            "18": { title: "Distant Observation", content: `<p>You notice what might be a less-guarded approach along the western ridge...</p><p class="xp-gain">(+30 XP)</p>`, options: [ { text: "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 } },
             "19": { title: "Blocked Pass", content: `<p>The main path is blocked by a recent rockslide!</p>`, options: [ { text: "Try to climb over (Strength Check)", check: { stat: 'strength', dc: 14, onFailure: 191 }, next: 190 }, { text: "Search for another way around", next: 192 } ], illustration: "rockslide-blocking-mountain-path-boulders" },
-            "20": { title: "Goat Trail", content: `<p>You discover a narrow trail barely wide enough for a mountain goat...</p><p class="xp-gain">(+40 XP)</p>`, options: [ { text: "Follow the precarious goat trail", next: 22 } ], illustration: "narrow-goat-trail-mountainside-fortress-view", reward: { xp: 40 } },
-            "30": { title: "Hidden Cove", content: `<p>Your careful descent brings you to a secluded cove. A dark cave entrance is visible...</p><p class="xp-gain">(+25 XP)</p>`, options: [ { text: "Explore the dark cave", next: 35 } ], illustration: "hidden-cove-beach-dark-cave-entrance", reward: { xp: 25 } },
             "31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard... 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 }, { text: "Return to crossroads", next: 1} ], 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 class="xp-gain">(+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...</p>`, options: [{ text: "Press deeper into the darkness (End)", next: 99 } ], illustration: "dark-cave-entrance-dripping-water" },
             "40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine...</p>`, options: [{ text: "Examine the carvings (Intelligence Check)", check:{stat:'intelligence', dc:11, onFailure: 401}, next: 400 }, { text: "Leave it be", next: 4 } ], illustration: "overgrown-stone-shrine-wildflowers-close" },
             "41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth...</p>`, options: [{ text: "Scout ahead (End)", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" },
-            "70": { title: "Statue Examined", content: `<p>The statue depicts a forgotten nature deity. You notice a small compartment at its base.</p><p class="xp-gain">(+10 XP)</p>`, options: [{text:"Try to open compartment (Strength Check?)", check:{stat:'strength', dc: 10, onFailure: 71}, next: 700}], illustration:"close-up-mossy-statue-compartment", reward:{xp:10}},
             "71": { title: "Statue Unyielding", content: `<p>You examine the statue but learn little. It remains an imposing enigma.</p>`, options: [{text:"Press onward", next: 72}], illustration:"forest-clearing-mossy-statue-weathered-stone-shrug"},
             "72": { title: "Deeper Woods", content: `<p>Leaving the statue behind, you push further into the increasingly dense woods.</p>`, options: [{text:"Continue", next: 14}], illustration:"dense-forest-undergrowth-shadows" },
             "73": { title: "Offering Made", content: `<p>You leave a small token. For a moment, you think you feel a sense of ancient approval.</p>`, options: [{text:"Press onward", next: 72}], illustration:"offering-at-base-of-mossy-statue"},
-            "80": { title: "Bridge Crossed", content: `<p>You make it across the swaying bridge, your heart pounding.</p><p class="xp-gain">(+15 XP)</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"view-from-end-of-rope-bridge-forest", reward:{xp:15}},
             "81": { title: "Bridge Collapse!", content: `<p>A frayed rope snaps! You plummet into the shallow ravine below, losing 8 HP!</p>`, options: [{text:"Climb out and find another way", next: 82}], illustration:"character-falling-from-broken-rope-bridge", hpLoss:8},
-            "82": { title: "Ravine Detour", content: `<p>You find a place where the ravine narrows and manage to climb down and back up the other side.</p><p class="xp-gain">(+5 XP)</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"climbing-out-of-shallow-ravine-forest", reward:{xp:5}},
             "101": { title:"Failed Dodge", content:"<p>You try to dodge, but a goblin spear trips you! You take 3 damage.</p>", options:[{text:"Get up and Fight!", next: 12}], illustration:"character-tripped-by-goblin-spear", hpLoss: 3},
-            "190": { title: "Over the Rocks", content:"<p>With considerable effort, you clamber over the rockslide.</p><p class="xp-gain">(+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. 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.</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...</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...</p>`, options: [{text:"Look for an unguarded entrance (End of Demo)", next: 99}], illustration:"approaching-dark-fortress-walls-guards"},
             "211": {title:"Lost Balance", content:"<p>A strong gust sends you tumbling down a steep slope! (-10 HP)</p>", options:[{text:"Climb back up and find another way", next: 17}], illustration:"character-falling-off-windy-ridge", hpLoss: 10},
-            "400": {title:"Shrine Secrets", content:"<p>The carvings depict ancient rituals. You find a loose stone revealing a Healing Poultice!</p><p class="xp-gain">(+20 XP)</p>", options:[{text:"Take the poultice and leave", next:4, addItem:"Healing Poultice"}], illustration:"close-up-shrine-carvings-hidden-compartment", reward:{xp:20}},
-            "401": {title:"Mysterious Carvings", content:"<p>The carvings are worn and indecipherable.</p>", options:[{text:"Leave the shrine", next:4}], illustration:"worn-stone-carvings-shrine"},
-            "700": {title:"Statue's Gift", content:"<p>The compartment clicks open, revealing a smooth, grey stone that feels strangely warm.</p><p class="xp-gain">(+30 XP)</p>", options:[{text:"Take the stone and press on", next: 72, addItem:"Warm Stone"}], illustration:"hand-holding-warm-grey-stone-statue-base", reward:{xp:30}},
             "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 }
         };
@@ -214,16 +236,18 @@
             currentPageId: 1,
             character: {
                 name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer",
-                level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0, // Stat points for leveling
                 stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 },
-                inventory: []
             }
         };
         // --- Game Logic Functions ---
         function startGame() {
-            const defaultChar = { name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer", level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0, stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 }, inventory: [] };
             gameState = { currentPageId: 1, character: { ...defaultChar } };
             recalculateMaxHp();
             gameState.character.stats.hp = gameState.character.stats.maxHp;
             renderPage(gameState.currentPageId);
@@ -235,21 +259,85 @@
             char.level++;
             char.xp -= char.xpToNextLevel;
             char.xpToNextLevel = Math.floor(char.xpToNextLevel * 1.5 + 50);
-            char.availableStatPoints += 1; // Gain 1 point
             recalculateMaxHp();
-            char.stats.hp = char.stats.maxHp; // Full heal
             console.log(`LEVEL UP! Reached Level ${char.level}.`);
-            // Later, add UI to spend points. For now, they just accumulate.
-            updateStatsDisplay(); // Update UI to show new level/XP/HP/Points
             return true;
         }
         function recalculateMaxHp() {
              const char = gameState.character;
              const conModifier = Math.floor((char.stats.constitution - 10) / 2);
-             char.stats.maxHp = 8 + (char.level * Math.max(1, 2 + conModifier)); // Recalculate Max HP
         }
         function handleChoiceClick(choiceData) {
             const optionNextPageId = parseInt(choiceData.nextPage);
             const itemToAdd = choiceData.addItem;
@@ -259,25 +347,25 @@
             const check = choiceData.check;
             const effect = choiceData.effect;
-             if (isNaN(optionNextPageId) && !check && !effect) { console.error("Invalid choice data:", choiceData); return; }
-             // --- Apply direct effects (like resting) ---
-             if (effect) {
-                 if (effect.hpGain) {
-                     const maxHeal = gameState.character.stats.maxHp - gameState.character.stats.hp;
-                     const actualGain = Math.min(effect.hpGain, maxHeal);
-                     if (actualGain > 0) {
-                          gameState.character.stats.hp += actualGain;
-                          rollResultMessage += `<p class="xp-gain">Rested and recovered ${actualGain} HP.</p>`;
-                          console.log(`Recovered ${actualGain} HP.`);
-                     } else {
-                          rollResultMessage += `<p class="xp-gain">You rest, but gain no HP.</p>`;
-                     }
-                 }
-                 // If effect determines next page, override default
-                 if (effect.setNextPage !== undefined) nextPageId = effect.setNextPage;
-                 // For simple rest, we still want to proceed, so no return here.
-             }
             // --- Process Stat Check ---
             if (check) {
@@ -290,10 +378,10 @@
                 console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
                 if (totalResult >= dc) { // Success
-                    nextPageId = optionNextPageId;
                     rollResultMessage += `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
-                    const marginBonus = Math.max(0, Math.floor(successMargin * 1.0)); // XP per point over DC
-                    const oddsBonus = Math.max(0, Math.floor(dc * 0.5)); // XP for difficulty
                     const checkBonusXp = marginBonus + oddsBonus;
                     if (checkBonusXp > 0) { gainedXpThisTurn += checkBonusXp; rollResultMessage += `<p class="xp-gain">+${checkBonusXp} bonus XP!</p>`; console.log(`Check bonus XP: ${checkBonusXp}`); }
                 } else { // Failure
@@ -313,40 +401,31 @@
             const nextPageData = gameData[nextPageId];
             if (nextPageData) {
-                if (nextPageData.hpLoss) {
-                    gameState.character.stats.hp -= nextPageData.hpLoss;
-                    console.log(`Lost ${nextPageData.hpLoss} HP.`);
-                    // HP check is done after potential level up healing
-                }
                 if (nextPageData.reward) {
                     if (nextPageData.reward.xp) { gainedXpThisTurn += nextPageData.reward.xp; console.log(`Base reward: +${nextPageData.reward.xp} 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}.`); recalculateMaxHp(); } } // Recalc HP if CON changes
                     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}`); }
                 }
                 if (gainedXpThisTurn > 0) {
                     gameState.character.xp += gainedXpThisTurn;
                     console.log(`Total XP Gained: ${gainedXpThisTurn}. Current XP: ${gameState.character.xp}`);
-                    if (!rollResultMessage.includes("bonus XP")) { // Avoid double message if check bonus already added
-                        rollResultMessage += `<p class="xp-gain">You gained ${gainedXpThisTurn} XP.</p>`;
-                    }
                 }
                  let leveledUp = false;
-                 while (gameState.character.xp >= gameState.character.xpToNextLevel) {
-                     if (levelUpCharacter()) { leveledUp = true; } else { break; }
-                 }
                  if (leveledUp) { rollResultMessage += `<p class="level-up">LEVEL UP! You reached Level ${gameState.character.level}!</p>`; }
-                 recalculateMaxHp(); // Ensure maxHP is current
-                 gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp); // Clamp HP
                  gameState.character.stats.hp = Math.max(0, gameState.character.stats.hp);
-                 // Check for death *after* potential healing from level up
-                 if (gameState.character.stats.hp <= 0) {
-                    console.log("Player died!"); nextPageId = 99; // Force redirect
-                    renderPageInternal(99, gameData[99], rollResultMessage + "<p class='roll-failure'><em>Your wounds overwhelm you...</em></p>"); return;
-                 }
             } else { // Invalid next page ID
                 console.error(`Data for page ${nextPageId} not found!`);
@@ -357,14 +436,23 @@
         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, effect: option.effect }; 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', pageData.sceneParams);
@@ -372,27 +460,60 @@
         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 title="Strength">Str: ${char.stats.strength}</span> <span title="Intelligence">Int: ${char.stats.intelligence}</span> <span title="Wisdom">Wis: ${char.stats.wisdom}</span> <span title="Dexterity">Dex: ${char.stats.dexterity}</span> <span title="Constitution">Con: ${char.stats.constitution}</span> <span title="Charisma">Cha: ${char.stats.charisma}</span>`; } // Added titles
         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, sceneParams = {}) {
             if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
-            currentAssemblyGroup = null; let assemblyFunction;
-            // Simple routing for now, using default for most new keys
-            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 '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 'forest-stream-crossing-dappled-sunlight-stones': case 'mossy-log-bridge-over-forest-stream': case 'dense-forest-undergrowth-shadows': assemblyFunction = createForestAssembly; break; // Group forest keys
-                case 'road-ambush': case 'two-goblins-ambush-forest-path-spears': assemblyFunction = createRoadAmbushAssembly; break; // Group ambush keys
-                case 'forest-edge': case 'forest-edge-view-rocky-foothills-distant-mountain-fortress': assemblyFunction = createForestEdgeAssembly; break; // Group edge keys
-                case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
-                case 'game-over': case 'game-over-generic': assemblyFunction = createGameOverAssembly; break;
                 case 'error': assemblyFunction = createErrorAssembly; break;
-                // Add more specific assignments if needed
-                default: assemblyFunction = createDefaultAssembly; break;
             }
             try { currentAssemblyGroup = assemblyFunction(sceneParams); scene.add(currentAssemblyGroup); } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); }
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choose Your Own Procedural Adventure</title>
     <style>
         body{font-family:'Courier New',monospace;background-color:#222;color:#eee;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;height:100vh}
         #game-container{display:flex;flex-grow:1;overflow:hidden}
         .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}
+        .xp-gain{color:#7af;font-style:italic;font-size:0.9em;display:block;margin-top:0.5em;}
+        .level-up{color:#ffcc66;font-weight:bold;border:1px dashed #ffcc66;padding:5px;margin-bottom:1em;text-align:center;}
+        /* Optional: Style for Known NPCs display */
+        #known-npcs-display { margin-top: 10px; }
+        #known-npcs-display span { background-color: #404850; border-color: #607080; } /* Bluish */
+        #known-npcs-display .npc-allied { background-color: #306630; border-color: #489948; } /* Green */
+        #known-npcs-display .npc-hostile { background-color: #663030; border-color: #994848; } /* Red */
+        #known-npcs-display .npc-wary { background-color: #666030; border-color: #999048; } /* Yellowish */
     </style>
 </head>
 <body>
             <div id="stats-inventory-container">
                  <div id="stats-display"></div>
                  <div id="inventory-display"></div>
+                 <div id="known-npcs-display"></div> </div>
             <div id="choices-container">
                  <h3>What will you do?</h3>
                  <div id="choices"></div>
         const choicesElement = document.getElementById('choices');
         const statsElement = document.getElementById('stats-display');
         const inventoryElement = document.getElementById('inventory-display');
+        const knownNpcsElement = document.getElementById('known-npcs-display'); // Get new element
         let scene, camera, renderer;
         let currentAssemblyGroup = null;
         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 leafMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.6, metalness: 0 });
+        const pineLeafMaterial = new THREE.MeshStandardMaterial({ color: 0x1A5A2A, roughness: 0.7, metalness: 0 });
+        const gnarledWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x6B4F3A, roughness: 0.85, metalness: 0 });
         const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 });
         const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
         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() {
+            // ... (Keep existing initThreeJS - no changes needed here) ...
             if (!sceneContainer) { console.error("Scene container not found!"); return; }
+            scene = new THREE.Scene(); scene.background = new THREE.Color(0x222222);
             const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight;
             camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000);
             camera.position.set(0, 2.5, 7); camera.lookAt(0, 0.5, 0);
         }
         function onWindowResize() {
+            // ... (Keep existing 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); }
         }
         function animate() {
+            // ... (Keep existing animate) ...
             requestAnimationFrame(animate);
             if (renderer && scene && camera) { renderer.render(scene, camera); }
         }
         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 }) {
+             // ... (Keep existing createMesh) ...
             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;
         }
         function createGroundPlane(material = groundMaterial, size = 20) {
+            // ... (Keep existing createGroundPlane) ...
+             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 ---
+        // ... (Keep ALL existing create...Assembly functions, including parameterized createForestAssembly) ...
+        function createDefaultAssembly(params={}) { 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(params = {}) { const group = new THREE.Group(); const gh=params.height||4, gw=params.width||1.5, gd=params.depth||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); if(params.crenellations !== false){ 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(params = {}) { const group = new THREE.Group(); const bw=params.size||3, bh=2.5, bd=3.5; const mat = params.material === 'stone' ? stoneMaterial : darkWoodMaterial; const bGeo = new THREE.BoxGeometry(bw, bh, bd); group.add(createMesh(bGeo, mat, { x:0, y:bh/2, z:0 })); if(params.chimney !== false) { 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(params = {}) { 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(params = {}) { 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(params = {}) { const group = new THREE.Group(); const treeCount = params.count ?? 10; const area = params.area ?? 10; const treeTypes = params.types ?? ['deciduous']; const avgHeight = params.avgHeight ?? 2.5; const foliageDensity = params.foliageDensity ?? 1.0; const createTree = (x, z, type) => { const treeGroup = new THREE.Group(); let trunkMat = woodMaterial; let leafMat = leafMaterial; let trunkHeight = avgHeight + (Math.random() - 0.5) * avgHeight * 0.4; let trunkRadius = trunkHeight * (0.05 + Math.random() * 0.05); let foliageRadius = trunkHeight * 0.4 * foliageDensity; if (type === 'pine') { leafMat = pineLeafMaterial; trunkHeight *= 1.2; trunkRadius *= 0.8; foliageRadius = trunkHeight * 0.25 * foliageDensity; } else if (type === 'gnarled') { trunkMat = gnarledWoodMaterial; trunkHeight *= 0.8; trunkRadius *= 1.5; foliageRadius = trunkHeight * 0.5 * foliageDensity; } const trunkGeo = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 8); treeGroup.add(createMesh(trunkGeo, trunkMat, { x: 0, y: trunkHeight / 2, z: 0 })); if (type === 'pine') { const numCones = Math.max(2, Math.floor(3 * foliageDensity)); for(let i=0; i<numCones; i++){ const coneR = foliageRadius * (1.5 - i*0.3); const coneH = trunkHeight * 0.4 * (1 - i*0.1); const coneY = trunkHeight * 0.7 + i * coneH * 0.3; const coneGeo = new THREE.ConeGeometry(coneR, coneH, 8); treeGroup.add(createMesh(coneGeo, leafMat, { x: 0, y: coneY, z: 0 })); } } else { const foliageCount = Math.max(3, Math.floor((Math.random() * 4 + 4) * foliageDensity)); const sphereRadius = foliageRadius * 0.3 + Math.random() * 0.1; const sphereGeo = new THREE.SphereGeometry(sphereRadius, 6, 5); for (let i = 0; i < foliageCount; i++) { const offsetX = (Math.random() - 0.5) * foliageRadius * 1.5; const offsetY = Math.random() * foliageRadius * 0.8; const offsetZ = (Math.random() - 0.5) * foliageRadius * 1.5; treeGroup.add(createMesh(sphereGeo.clone(), leafMat, { x: offsetX, y: trunkHeight * 0.8 + offsetY, z: offsetZ })); } } treeGroup.position.set(x, 0, z); treeGroup.rotation.y = Math.random() * Math.PI * 2; return treeGroup; }; for (let i = 0; i < treeCount; i++) { const x = (Math.random() - 0.5) * area; const z = (Math.random() - 0.5) * area; const type = treeTypes[Math.floor(Math.random() * treeTypes.length)]; if (Math.sqrt(x*x + z*z) > 1.0) group.add(createTree(x, z, type)); } group.add(createGroundPlane(groundMaterial, area * 1.1)); return group; }
+        function createRoadAmbushAssembly(params={}) { const group = new THREE.Group(); const a=12; const fg = createForestAssembly({ count: 8, area: a, types: params.forestTypes ?? ['deciduous', 'pine'] }); 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(params={}) { const group = new THREE.Group(); const a=15; const fg = createForestAssembly({ count: 15, area: a, types: params.forestTypes ?? ['deciduous', 'pine'] }); 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(params = {}) { 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(params = {}) { 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(params = {}) { 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; }
+        // --- NPC Data ---
+        const npcs = {
+            "gorn": { name: "Gorn the Weaponsmith", description: "Gruff but skilled.", initialDisposition: "neutral", locationHint: "Silverhold" },
+            "alara": { name: "High Priestess Alara", description: "Serene and wise.", initialDisposition: "helpful", locationHint: "Silverhold Temple" },
+            "lyra": { name: "Lyra, Resistance Leader", description: "Determined and wary.", initialDisposition: "neutral", locationHint: "Silverhold (Secret)" },
+            "shepherd": { name: "Old Man Hemlock", description: "A simple shepherd.", initialDisposition: "neutral", locationHint: "Rolling Hills" },
+            "cliff_hermit": { name: "Silas the Hermit", description: "Lives in the cliff caves.", initialDisposition: "wary", locationHint: "Coastal Cliffs" }
+        };
         // --- Game Data ---
+        const itemsData = { "Flaming Sword":{type:"weapon", description:"A fiery blade"}, /* ... other items ... */ "Crude Dagger":{type:"weapon", description:"A roughly made dagger."}, "Scout's Pouch":{type:"quest", description:"Contains odds and ends."}, "Healing Poultice":{type:"spell", description:"Soothes wounds, heals 5 HP."}, "Warm Stone":{type:"quest", description:"A smooth grey stone, strangely warm."} };
+        const gameData = { // Using expanded data with checks, rewards, onEnter events
+            "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 }, { text: "Rest and gather thoughts", effect: { hpGain: 5, setNextPage: 1 } } ], illustration: "crossroads-signpost-sunny" },
+            "2": { title: "Rolling Hills", content: `<p>Verdant hills stretch before you...</p>`, options: [ { text: "Follow the narrow path", next: 4 }, { text: "Head back to the crossroads", next: 1 } ], illustration: "rolling-green-hills-shepherd-distance", onEnter: [{ action: "meetNpc", npcId: "shepherd", setDisposition: "seen" }] }, // Example: NPC seen
             "3": { title: "Coastal Cliffs Edge", content: `<p>You stand atop windswept cliffs...</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 }, { text: "Return to the crossroads", next: 1 } ], 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 }, { text: "Go back", next: 2 } ], 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", sceneParams: { types: ['deciduous', 'gnarled'], density: 1.2, avgHeight: 3.5 } },
+            "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", sceneParams: { types: ['deciduous', 'gnarled'], density: 1.5 } },
             "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>`, 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: 101 }, 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>`, 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>`, 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>`, 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", sceneParams: { types: ['deciduous'], density: 0.8, avgHeight: 2.8 } },
             "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" },
             "151": { title: "Splash!", content: `<p>You slip on the mossy log and tumble into the cold stream! You're soaked but unharmed.</p>`, options: [ { text: "Shake yourself off and continue", next: 16 } ], illustration: "character-splashing-into-stream-from-log" },
             "16": { title: "Edge of the Woods", content: `<p>You emerge from the Shadowwood... Before you lie rocky foothills...</p>`, options: [ { text: "Begin the ascent into the foothills", next: 17 }, { text: "Scan the fortress 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 fortress looms larger now.</p>`, options: [ { text: "Continue the direct ascent", next: 19 }, { text: "Look for signs of a hidden trail (Wisdom Check)", check: { stat: 'wisdom', dc: 15, onFailure: 19 }, next: 20 } ], illustration: "climbing-rocky-foothills-path-fortress-closer" },
+            "18": { title: "Distant Observation", content: `<p>You notice what might be a less-guarded approach along the western ridge...</p>`, options: [ { text: "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 } },
             "19": { title: "Blocked Pass", content: `<p>The main path is blocked by a recent rockslide!</p>`, options: [ { text: "Try to climb over (Strength Check)", check: { stat: 'strength', dc: 14, onFailure: 191 }, next: 190 }, { text: "Search for another way around", next: 192 } ], illustration: "rockslide-blocking-mountain-path-boulders" },
+            "20": { title: "Goat Trail", content: `<p>You discover a narrow trail barely wide enough for a mountain goat...</p>`, options: [ { text: "Follow the precarious goat trail", next: 22 } ], illustration: "narrow-goat-trail-mountainside-fortress-view", reward: { xp: 40 } },
+            "30": { title: "Hidden Cove", content: `<p>Your careful descent brings you to a secluded cove. A dark cave entrance is visible...</p>`, options: [ { text: "Explore the dark cave", next: 35 } ], illustration: "hidden-cove-beach-dark-cave-entrance", reward: { xp: 25 } },
             "31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard... 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 }, { text: "Return to crossroads", next: 1} ], 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>`, 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. A figure huddles near a sputtering fire.</p>`, options: [ { text: "Approach the figure cautiously", next: 350 }, { text: "Try to sneak past", check: { "stat": "dexterity", "dc": 13, "onFailure": 351 }, "next": 352 } ], illustration: "dark-cave-sputtering-fire-huddled-figure", onEnter: [{ action: "meetNpc", npcId: "cliff_hermit", setDisposition: "seen" }] },
             "40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine...</p>`, options: [{ text: "Examine the carvings (Intelligence Check)", check:{stat:'intelligence', dc:11, onFailure: 401}, next: 400 }, { text: "Leave it be", next: 4 } ], illustration: "overgrown-stone-shrine-wildflowers-close" },
             "41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth...</p>`, options: [{ text: "Scout ahead (End)", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" },
+            "70": { title: "Statue Examined", content: `<p>The statue depicts a forgotten nature deity. You notice a small compartment at its base.</p>`, options: [{text:"Try to open compartment (Strength Check?)", check:{stat:'strength', dc: 10, onFailure: 71}, next: 700}], illustration:"close-up-mossy-statue-compartment", reward:{xp:10}},
             "71": { title: "Statue Unyielding", content: `<p>You examine the statue but learn little. It remains an imposing enigma.</p>`, options: [{text:"Press onward", next: 72}], illustration:"forest-clearing-mossy-statue-weathered-stone-shrug"},
             "72": { title: "Deeper Woods", content: `<p>Leaving the statue behind, you push further into the increasingly dense woods.</p>`, options: [{text:"Continue", next: 14}], illustration:"dense-forest-undergrowth-shadows" },
             "73": { title: "Offering Made", content: `<p>You leave a small token. For a moment, you think you feel a sense of ancient approval.</p>`, options: [{text:"Press onward", next: 72}], illustration:"offering-at-base-of-mossy-statue"},
+            "80": { title: "Bridge Crossed", content: `<p>You make it across the swaying bridge, your heart pounding.</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"view-from-end-of-rope-bridge-forest", reward:{xp:15}},
             "81": { title: "Bridge Collapse!", content: `<p>A frayed rope snaps! You plummet into the shallow ravine below, losing 8 HP!</p>`, options: [{text:"Climb out and find another way", next: 82}], illustration:"character-falling-from-broken-rope-bridge", hpLoss:8},
+            "82": { title: "Ravine Detour", content: `<p>You find a place where the ravine narrows and manage to climb down and back up the other side.</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"climbing-out-of-shallow-ravine-forest", reward:{xp:5}},
             "101": { title:"Failed Dodge", content:"<p>You try to dodge, but a goblin spear trips you! You take 3 damage.</p>", options:[{text:"Get up and Fight!", next: 12}], illustration:"character-tripped-by-goblin-spear", hpLoss: 3},
+            "190": { title: "Over the Rocks", content:"<p>With considerable effort, you clamber over the rockslide.</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. 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.</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...</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...</p>`, options: [{text:"Look for an unguarded entrance (End of Demo)", next: 99}], illustration:"approaching-dark-fortress-walls-guards"},
             "211": {title:"Lost Balance", content:"<p>A strong gust sends you tumbling down a steep slope! (-10 HP)</p>", options:[{text:"Climb back up and find another way", next: 17}], illustration:"character-falling-off-windy-ridge", hpLoss: 10},
+            "350": { title: "Cave Dweller", content:"<p>'Who's there?' croaks the figure, revealing a wild-eyed hermit clutching a sharpened shell. 'State yer business!'</p>", options:[{text:"'I mean no harm, just exploring.' (Charisma Check?)", next: 353},{text:"Attack the hermit!", next: 354}], illustration:"cave-hermit-wild-eyes-sharpened-shell", onEnter: [{ action: "meetNpc", npcId: "cliff_hermit", setDisposition: "wary" }] }, // Explicitly met and wary
+            "351": { title: "Spotted!", content:"<p>Your clumsy attempt at stealth alerts the figure! 'Intruder!' the hermit shrieks, lunging with a sharpened shell.</p>", options:[{text:"Defend yourself!", next: 354}], illustration:"cave-hermit-lunging-attack-shadows"},
+            "352": { title: "Sneaked Past", content:"<p>You slip past the figure unnoticed and find the cave continues deeper.</p>", options:[{text:"Explore deeper", next: 99}], illustration:"sneaking-past-cave-hermit-fire", reward:{xp:20}},
+            "353": { title: "Uneasy Truce", content:"<p>The hermit eyes you suspiciously but lowers the shell slightly. 'Exploring, eh? Nothin' but trouble finds these caves. Be warned.' He doesn't seem hostile now, but certainly not friendly.</p>", options:[{text:"Ask about the caves", next: 99},{text:"Leave the cave", next: 3}], illustration:"cave-hermit-suspicious-lowered-shell", onEnter: [{ action: "meetNpc", npcId: "cliff_hermit", setDisposition: "neutral" }] }, // Updated disposition
+            "354": { title: "Hermit Defeated", content:"<p>You overcome the surprisingly fierce hermit. His meager possessions offer little of value.</p>", options:[{text:"Explore deeper", next: 99}], illustration:"defeated-cave-hermit-meager-belongings", reward:{xp:40}, onEnter: [{ action: "meetNpc", npcId: "cliff_hermit", setDisposition: "defeated" }] },
+            "400": {title:"Shrine Secrets", content:"<p>The carvings depict ancient rituals. You find a loose stone revealing a Healing Poultice!</p>`, options:[{text:"Take the poultice and leave", next:4, addItem:"Healing Poultice"}], illustration:"close-up-shrine-carvings-hidden-compartment", reward:{xp:20}},
+            "401": {title:"Mysterious Carvings", content:"<p>The carvings are worn and indecipherable.</p>`, options:[{text:"Leave the shrine", next:4}], illustration:"worn-stone-carvings-shrine"},
+            "700": {title:"Statue's Gift", content:"<p>The compartment clicks open, revealing a smooth, grey stone that feels strangely warm.</p>`, options:[{text:"Take the stone and press on", next: 72, addItem:"Warm Stone"}], illustration:"hand-holding-warm-grey-stone-statue-base", reward:{xp:30}},
             "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 }
         };
             currentPageId: 1,
             character: {
                 name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer",
+                level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0,
                 stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 },
+                inventory: [],
+                knownNpcs: {} // Added to track NPC interactions
             }
         };
         // --- Game Logic Functions ---
         function startGame() {
+            const defaultChar = { name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer", level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0, stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 }, inventory: [], knownNpcs: {} };
             gameState = { currentPageId: 1, character: { ...defaultChar } };
+            // TODO: Load from localStorage if exists
             recalculateMaxHp();
             gameState.character.stats.hp = gameState.character.stats.maxHp;
             renderPage(gameState.currentPageId);
             char.level++;
             char.xp -= char.xpToNextLevel;
             char.xpToNextLevel = Math.floor(char.xpToNextLevel * 1.5 + 50);
+            char.availableStatPoints += 1;
             recalculateMaxHp();
+            char.stats.hp = char.stats.maxHp;
             console.log(`LEVEL UP! Reached Level ${char.level}.`);
+            updateStatsDisplay();
             return true;
         }
         function recalculateMaxHp() {
              const char = gameState.character;
              const conModifier = Math.floor((char.stats.constitution - 10) / 2);
+             char.stats.maxHp = 8 + (char.level * Math.max(1, 2 + conModifier));
+             // Clamp current HP just in case it somehow exceeded new maxHP before recalc
+             char.stats.hp = Math.min(char.stats.hp, char.stats.maxHp);
+        }
+        // Process events that happen just by entering a page
+        function processPageEntryEvents(pageData) {
+            if (!pageData || !pageData.onEnter) return;
+            const char = gameState.character;
+            pageData.onEnter.forEach(event => {
+                if (event.action === "meetNpc") {
+                    if (!npcs[event.npcId]) {
+                        console.warn(`NPC not found in npcs data: ${event.npcId}`);
+                        return;
+                    }
+                    const currentStatus = char.knownNpcs[event.npcId];
+                    const newStatus = event.setDisposition || "met"; // Default to 'met'
+                    // Update status only if it's new or different (or always override?) - let's override
+                    if (currentStatus !== newStatus) {
+                        char.knownNpcs[event.npcId] = newStatus;
+                        console.log(`NPC Status Update: ${npcs[event.npcId]?.name} is now ${newStatus}`);
+                        updateKnownNpcsDisplay(); // Update the UI
+                    } else if (!currentStatus) { // First time meeting
+                         char.knownNpcs[event.npcId] = newStatus;
+                         console.log(`Met NPC: ${npcs[event.npcId]?.name} (${newStatus})`);
+                         updateKnownNpcsDisplay();
+                    }
+                }
+                // Add other onEnter actions here (e.g., random encounters, environment effects)
+            });
+        }
+         // Update function to handle choice effects and NPC disposition changes
+         function processChoiceEffect(effect) {
+            if (!effect) return;
+            const char = gameState.character;
+            let hpGained = 0;
+            if (effect.hpGain) {
+                const maxHeal = char.stats.maxHp - char.stats.hp;
+                const actualGain = Math.min(effect.hpGain, maxHeal);
+                if (actualGain > 0) {
+                    char.stats.hp += actualGain;
+                    hpGained = actualGain;
+                    console.log(`Recovered ${actualGain} HP.`);
+                }
+            }
+            // Handle NPC disposition changes from choice effect
+            if (effect.setNpcDisposition) {
+                const npcId = effect.setNpcDisposition.npcId;
+                const status = effect.setNpcDisposition.status;
+                if (npcs[npcId] && status) {
+                     if (char.knownNpcs[npcId] !== status) {
+                        char.knownNpcs[npcId] = status;
+                        console.log(`NPC Status Update via Choice: ${npcs[npcId].name} is now ${status}`);
+                        updateKnownNpcsDisplay();
+                    }
+                } else {
+                    console.warn(`Invalid setNpcDisposition effect:`, effect.setNpcDisposition);
+                }
+            }
+            // Add other effects (e.g., addItem, statChange)
+            return { hpGained }; // Return results if needed for messages
         }
         function handleChoiceClick(choiceData) {
             const optionNextPageId = parseInt(choiceData.nextPage);
             const itemToAdd = choiceData.addItem;
             const check = choiceData.check;
             const effect = choiceData.effect;
+            if (isNaN(optionNextPageId) && !check && !effect) { console.error("Invalid choice data:", choiceData); return; }
+            // --- Apply direct choice effects FIRST ---
+            let effectResult = processChoiceEffect(effect);
+            if (effectResult?.hpGained > 0) {
+                 rollResultMessage += `<p class="xp-gain">Rested and recovered ${effectResult.hpGained} HP.</p>`;
+            }
+            // If effect dictates next page, use it
+            if (effect && effect.setNextPage !== undefined) {
+                nextPageId = effect.setNextPage;
+                // If the effect was the *only* action (like resting), proceed directly to render
+                 if (!check && !itemToAdd && isNaN(optionNextPageId)) { // Check if there was no original 'next' page
+                    gameState.currentPageId = nextPageId;
+                    renderPageInternal(nextPageId, gameData[nextPageId], rollResultMessage);
+                    return;
+                }
+                // Otherwise, allow potential check/item add to override if needed after rest
+            }
             // --- Process Stat Check ---
             if (check) {
                 console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
                 if (totalResult >= dc) { // Success
+                    nextPageId = optionNextPageId; // Ensure success path is taken
                     rollResultMessage += `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
+                    const marginBonus = Math.max(0, Math.floor(successMargin * 1.0));
+                    const oddsBonus = Math.max(0, Math.floor(dc * 0.5));
                     const checkBonusXp = marginBonus + oddsBonus;
                     if (checkBonusXp > 0) { gainedXpThisTurn += checkBonusXp; rollResultMessage += `<p class="xp-gain">+${checkBonusXp} bonus XP!</p>`; console.log(`Check bonus XP: ${checkBonusXp}`); }
                 } else { // Failure
             const nextPageData = gameData[nextPageId];
             if (nextPageData) {
+                 // Process entry events for the *new* page
+                 processPageEntryEvents(nextPageData); // Process NPC meets etc.
+                if (nextPageData.hpLoss) { gameState.character.stats.hp -= nextPageData.hpLoss; console.log(`Lost ${nextPageData.hpLoss} HP.`); }
                 if (nextPageData.reward) {
                     if (nextPageData.reward.xp) { gainedXpThisTurn += nextPageData.reward.xp; console.log(`Base reward: +${nextPageData.reward.xp} 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}.`); recalculateMaxHp(); } }
                     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}`); }
                 }
                 if (gainedXpThisTurn > 0) {
                     gameState.character.xp += gainedXpThisTurn;
                     console.log(`Total XP Gained: ${gainedXpThisTurn}. Current XP: ${gameState.character.xp}`);
+                    if (!rollResultMessage.includes("bonus XP")) { rollResultMessage += `<p class="xp-gain">You gained ${gainedXpThisTurn} XP.</p>`; }
                 }
                  let leveledUp = false;
+                 while (gameState.character.xp >= gameState.character.xpToNextLevel) { if (levelUpCharacter()) { leveledUp = true; } else { break; } }
                  if (leveledUp) { rollResultMessage += `<p class="level-up">LEVEL UP! You reached Level ${gameState.character.level}!</p>`; }
+                 recalculateMaxHp();
+                 gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp);
                  gameState.character.stats.hp = Math.max(0, gameState.character.stats.hp);
+                 if (gameState.character.stats.hp <= 0 && !(nextPageData.gameOver)) { console.log("Player died!"); nextPageId = 99; renderPageInternal(99, gameData[99], rollResultMessage + "<p class='roll-failure'><em>Your wounds overwhelm you...</em></p>"); return; }
             } else { // Invalid next page ID
                 console.error(`Data for page ${nextPageId} not found!`);
         function renderPageInternal(pageId, pageData, message = "") {
             if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); return; }
+             // Process entry events *before* rendering content that might depend on them
+             processPageEntryEvents(pageData);
             storyTitleElement.textContent = pageData.title || "Untitled Page";
             storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
+            updateStatsDisplay(); updateInventoryDisplay(); updateKnownNpcsDisplay(); // Update all UI parts
             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;
+                    // Add requirement checks for items OR knownNpcs status here later
                     if (option.requireItem && !gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; button.title = `Requires: ${option.requireItem}`; button.disabled = true; }
+                    // Example NPC check:
+                    // if (option.requireNpcStatus && gameState.character.knownNpcs[option.requireNpcStatus.npcId] !== option.requireNpcStatus.status) { requirementMet = false; button.title = `Requires: ${npcs[option.requireNpcStatus.npcId]?.name} to be ${option.requireNpcStatus.status}`; button.disabled = true; }
                     if (requirementMet) { const choiceData = { nextPage: option.next, addItem: option.addItem, check: option.check, effect: option.effect }; 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', pageData.sceneParams);
         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 title="Strength">Str: ${char.stats.strength}</span> <span title="Intelligence">Int: ${char.stats.intelligence}</span> <span title="Wisdom">Wis: ${char.stats.wisdom}</span> <span title="Dexterity">Dex: ${char.stats.dexterity}</span> <span title="Constitution">Con: ${char.stats.constitution}</span> <span title="Charisma">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; }
+        // New function to display known NPCs
+        function updateKnownNpcsDisplay() {
+            let npcHtml = '<strong>Known NPCs:</strong> ';
+            const known = gameState.character.knownNpcs;
+            const npcIds = Object.keys(known);
+            if (npcIds.length === 0) {
+                npcHtml += '<em>None</em>';
+            } else {
+                npcIds.forEach(npcId => {
+                    const npcData = npcs[npcId] || { name: npcId }; // Fallback name
+                    const status = known[npcId];
+                    // Add classes based on status for potential styling
+                    let statusClass = 'npc-met'; // Default class
+                    if (status === 'allied' || status === 'helped') statusClass = 'npc-allied';
+                    else if (status === 'hostile' || status === 'defeated') statusClass = 'npc-hostile';
+                    else if (status === 'wary') statusClass = 'npc-wary';
+                     else if (status === 'seen') statusClass = 'npc-seen'; // Just seen, not interacted
+                    npcHtml += `<span class="${statusClass}" title="${npcData.description} (${status})">${npcData.name}</span>`;
+                });
+            }
+            knownNpcsElement.innerHTML = npcHtml;
+        }
         function updateScene(illustrationKey, sceneParams = {}) {
             if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
+            currentAssemblyGroup = null; let assemblyFunction = createDefaultAssembly; // Default
+            const keyRoot = illustrationKey.split('-')[0]; // Basic check
+            switch (keyRoot) { // Simplified routing based on first word
+                case 'city': case 'gates': assemblyFunction = createCityGatesAssembly; break;
                 case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
                 case 'temple': assemblyFunction = createTempleAssembly; break;
+                case 'resistance': case 'meeting': assemblyFunction = createResistanceMeetingAssembly; break;
+                case 'forest': case 'shadowwood': case 'overgrown': case 'clearing': case 'trail': case 'stream': case 'log': case 'edge': case 'dense': assemblyFunction = createForestAssembly; break;
+                case 'road': case 'ambush': case 'goblins': assemblyFunction = createRoadAmbushAssembly; break;
+                case 'prisoner': case 'cell': assemblyFunction = createPrisonerCellAssembly; break;
+                case 'hills': case 'shrine': case 'overlook': assemblyFunction = createDefaultAssembly; break; // TODO: createHillsAssembly
+                case 'cliffs': case 'cove': case 'cave': case 'hermit': assemblyFunction = createDefaultAssembly; break; // TODO: createCliffsAssembly
+                case 'ruins': assemblyFunction = createDefaultAssembly; break; // TODO: createRuinsAssembly
+                case 'badlands': assemblyFunction = createDefaultAssembly; break; // TODO: createBadlandsAssembly
+                case 'fortress': case 'ridge': case 'rockslide': assemblyFunction = createDefaultAssembly; break; // TODO: createMountainAssembly
+                case 'game': assemblyFunction = createGameOverAssembly; break;
                 case 'error': assemblyFunction = createErrorAssembly; break;
+                // Add specific full keys if needed override root check
+                case 'crossroads-signpost-sunny': assemblyFunction = createDefaultAssembly; break; // TODO: createCrossroadsAssembly
             }
+             // console.log(`Routing '${illustrationKey}' (root: '${keyRoot}') to ${assemblyFunction.name}`);
             try { currentAssemblyGroup = assemblyFunction(sceneParams); scene.add(currentAssemblyGroup); } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); }
         }