Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on Apr 28

Commit

9c3a2d1

verified ·

1 Parent(s): 1aff277

Update index.html

Browse files

Files changed (1) hide show

index.html +348 -324

index.html CHANGED Viewed

@@ -3,38 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wacky D&D Shapes Adventure!</title>
     <style>
-        /* --- Base Styles --- */
         body { font-family: 'Verdana', sans-serif; background-color: #2a3a4a; color: #f0f0f0; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
         #game-container { display: flex; flex-grow: 1; overflow: hidden; }
         #scene-container { flex-grow: 3; position: relative; border-right: 3px solid #506070; min-width: 250px; background-color: #101820; height: 100%; box-sizing: border-box; overflow: hidden; cursor: default; }
         #ui-container { flex-grow: 2; padding: 25px; overflow-y: auto; background-color: #3a4a5a; min-width: 320px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
         #scene-container canvas { display: block; }
-        /* --- UI Elements --- */
         #story-title { color: #ffd700; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #506070; font-size: 1.8em; font-weight: bold; text-shadow: 1px 1px 2px #111; }
         #story-content { margin-bottom: 25px; line-height: 1.7; flex-grow: 1; font-size: 1.1em; color: #e8e8e8;}
         #stats-inventory-container { margin-bottom: 25px; padding: 15px; border: 1px solid #506070; border-radius: 5px; background-color: #4a5a6a; font-size: 0.95em; }
         #stats-display, #inventory-display { margin-bottom: 10px; line-height: 1.8; }
-        #stats-display span { display: inline-block; background-color: #5a6a7a; padding: 4px 10px; border-radius: 15px; margin: 0 8px 5px 0; border: 1px solid #7a8a9a; white-space: nowrap; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }
-        #inventory-display .item-tag { display: inline-block; background-color: #5a6a7a; padding: 4px 10px; border-radius: 15px; margin: 0 8px 5px 0; border: 1px solid #7a8a9a; white-space: nowrap; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); cursor: default; }
         #stats-display strong, #inventory-display strong { color: #e0e0e0; margin-right: 6px; font-weight:bold; }
         #inventory-display em { color: #aabbcc; font-style: normal; }
         .item-tool { background-color: #a0522d; border-color: #cd853f; color: #fff;}
         .item-key { background-color: #ffd700; border-color: #f0e68c; color: #333;}
         .item-treasure { background-color: #20b2aa; border-color: #48d1cc; color: #fff;}
         .item-food { background-color: #ff6347; border-color: #fa8072; color: #fff;}
-        .item-quest { background-color: #da70d6; border-color: #ee82ee; color: #fff;} /* Orchid/Violet */
         .item-unknown { background-color: #778899; border-color: #b0c4de;}
-        /* --- Choices & Messages --- */
         #choices-container { margin-top: auto; padding-top: 20px; border-top: 2px solid #506070; }
         #choices-container h3 { margin-top: 0; margin-bottom: 12px; color: #e0e0e0; font-size: 1.2em; font-weight: bold;}
-        #choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;} /* Grid for nav */
-        #action-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; border-top: 1px dashed #607080; padding-top: 15px;} /* Separate area for actions */
         .choice-button { display: block; width: 100%; padding: 13px 16px; margin-bottom: 0; background-color: #607080; color: #fff; border: 1px solid #8090a0; border-radius: 5px; cursor: pointer; text-align: center; font-family: 'Verdana', sans-serif; font-size: 1.0em; font-weight: bold; transition: background-color 0.2s, transform 0.1s; box-sizing: border-box; letter-spacing: 0.5px; }
-        .choice-button.action { text-align: left; grid-column: span 2;} /* Action buttons span full width */
         .choice-button:hover:not(:disabled) { background-color: #ffc107; color: #222; border-color: #ffca2c; transform: translateY(-1px); }
         .choice-button:disabled { background-color: #4e5a66; color: #8a9aab; cursor: not-allowed; border-color: #607080; opacity: 0.6; transform: none; box-shadow: none;}
         .choice-button[title]:disabled::after { content: ' (' attr(title) ')'; font-style: italic; font-size: 0.9em; margin-left: 5px; }
@@ -48,8 +43,6 @@
         .message-combat { color: #f98; border-left-color: #c64; font-weight: bold;}
         .combat-button { background-color: #a33; border-color: #c66; color: #fff; font-weight: bold; text-align: center;}
         .combat-button:hover:not(:disabled) { background-color: #d44; border-color: #f88;}
-        /* --- Action Info --- */
         #action-info { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.7); color: #ffcc66; padding: 5px 10px; border-radius: 3px; font-size: 0.9em; display: block; z-index: 10;}
     </style>
 </head>
@@ -60,7 +53,7 @@
         </div>
         <div id="ui-container">
             <h2 id="story-title">Initializing...</h2>
-            <div id="story-content"><p>Loading world...</p></div>
             <div id="stats-inventory-container">
                 <div id="stats-display">Loading Stats...</div>
                 <div id="inventory-display">Inventory: ...</div>
@@ -82,9 +75,9 @@
     <script type="module">
         import * as THREE from 'three';
         import { FontLoader } from 'three/addons/loaders/FontLoader.js';
         import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
-        // Orbit Controls removed again for simplicity focus
         console.log("Script module execution started.");
@@ -92,8 +85,8 @@
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
         const storyContentElement = document.getElementById('story-content');
-        const choicesElement = document.getElementById('choices'); // Nav buttons grid
-        const actionChoicesElement = document.getElementById('action-choices'); // Action buttons list
         const statsElement = document.getElementById('stats-display');
         const inventoryElement = document.getElementById('inventory-display');
         const actionInfoElement = document.getElementById('action-info');
@@ -101,11 +94,12 @@
         console.log("DOM elements obtained.");
         // --- Core Three.js Variables ---
-        let scene, camera, renderer, clock;
         let currentSceneGroup = null;
         let currentLights = [];
         let threeFont = null;
         let currentMessage = "";
         // --- Materials ---
         const MAT = {
@@ -126,8 +120,8 @@
             sky_blue: new THREE.MeshStandardMaterial({ color: 0x03a9f4, roughness: 0.5 }),
             town_wood: new THREE.MeshStandardMaterial({ color: 0xae8a63, roughness: 0.7 }),
             town_roof: new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.8 }),
-            goblin_skin: new THREE.MeshStandardMaterial({ color: 0x8FBC8F, roughness: 0.8 }), // DarkSeaGreen
-            text_material: new THREE.MeshBasicMaterial({ color: 0xffddaa }),
         };
         // --- Game State ---
@@ -140,16 +134,18 @@
             "Goblin's Favorite Sock": {type:"quest", description:"Smells... unique."},
             "Shiny Rock": {type:"treasure", description:"Distractingly shiny."},
             "Suspicious Mushroom": {type:"food", description:"Maybe... just maybe..."},
         };
         // --- Enemy Data ---
          const enemyData = {
             'goblin': { name: "Grumpy Goblin", hp: 12, defense: 12, attackBonus: 1, damageDice: 4, xp: 25, drops: ["Goblin's Favorite Sock", "Shiny Rock"] },
-            // Add more enemies later
         };
-        // --- Procedural Assembly Shapes ---
-         const SHAPE_GENERATORS = {
             'pointy_cone': (size) => new THREE.ConeGeometry(size * 0.5, size * 1.2, 6 + Math.floor(Math.random() * 5)),
             'round_blob': (size) => new THREE.SphereGeometry(size * 0.6, 12, 8),
             'spinny_torus': (size) => new THREE.TorusGeometry(size * 0.5, size * 0.15, 8, 16),
@@ -172,134 +168,139 @@
         };
         const shapeKeys = Object.keys(SHAPE_GENERATORS);
-        // --- Game Data (Page-Based, Expanded Story) ---
-        const gameData = {
-            1: {
                 title: "Snoring Meadows",
-                content: "<p>You wake up in a field of gently snoring grass. Yup, snoring. To the North are some Wiggly Woods. East leads to the Clanky Caves entrance.</p>",
                 options: [
-                    { text: "Enter Wiggly Woods (North)", next: 2 },
-                    { text: "Approach Clanky Caves (East)", next: 5 },
-                    { text: "Poke the snoring grass (Wisdom Check DC 10)", check: { stat: 'wisdom', dc: 10, next: 10, onFailure: 11 } }
                 ],
                 assemblyParams: { baseShape: 'ground_grass', baseSize: 30, mainShapes: ['squashed_ball', 'pointy_cone'], accents: [], count: 30, scaleRange: [0.5, 1.2], colorTheme: [MAT.grass, MAT.leaf_green, MAT.sky_blue], arrangement: 'scatter' }
             },
-            2: {
                 title: "Wiggly Woods",
-                content: "<p>These trees really do wiggle! It's making you a bit dizzy. A grumpy-looking goblin blocks the path deeper into the woods (South?).</p>",
                 options: [
-                    { text: "Talk to the Goblin", next: 3 },
-                    { text: "Try to sneak past (Dexterity Check DC 12)", check: { stat: 'dexterity', dc: 12, next: 4, onFailure: 3 } },
-                    { text: "Go Back (South)", next: 1 }
                 ],
                 assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder', 'knotty_thing'], accents: ['leaf_autumn'], count: 20, scaleRange: [1.0, 3.0], colorTheme: [MAT.wood_dark, MAT.leaf_autumn, MAT.deep_purple], arrangement: 'cluster', clusterRadius: 10 }
             },
-             3: {
-                title: "Grumpy Goblin",
-                content: "<p>'Oi! You wanna pass?' grunts the goblin, pointing a wobbly spear. 'Dis my wood! Whatcha gonna do?'</p>",
                 options: [
-                    { text: "Fight the Grumpy Goblin!", action: 'triggerCombat', enemy: 'goblin', nextOnWin: 4, nextOnLoss: 98 },
-                    { text: "Offer him a Shiny Rock (Requires Shiny Rock)", requires: "Shiny Rock", consume: true, next: 4, reward: {xp: 10} },
-                    { text: "Try to reason with him (Charisma Check DC 14)", check: { stat: 'charisma', dc: 14, next: 4, onFailure: 12 } },
-                    { text: "Run Away!", next: 2 }
                 ],
-                assemblyParams: { // Similar to woods, maybe add goblin representation
-                     baseShape: 'ground_dirt', baseSize: 25,
-                     mainShapes: ['tall_cylinder', 'knotty_thing'], accents: ['leaf_autumn', 'basic_tetra'],
-                     count: 20, scaleRange: [1.0, 3.0],
-                     colorTheme: [MAT.wood_dark, MAT.leaf_autumn, MAT.deep_purple, MAT.goblin_skin],
-                     arrangement: 'cluster', clusterRadius: 10
-                 }
             },
-             4: {
-                title: "Past the Goblin!",
-                content: "<p>You somehow got past the goblin! The path continues North to a weirdly Square Clearing. Or you can go back South.</p>",
                 options: [
-                    { text: "Go to Square Clearing (North)", next: 7 },
-                    { text: "Go Back (South)", next: 2 }
                 ],
-                 assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder'], accents: ['leaf_green'], count: 15, scaleRange: [1.0, 2.5], colorTheme: [MAT.wood_light, MAT.leaf_green], arrangement: 'scatter' }
             },
-            5: {
                  title: "Clanky Caves Entrance",
-                 content: "<p>The entrance to the cave clanks and whirs softly. It smells like old metal and damp socks. A sign reads 'Beware of... Clanks?'</p>",
-                 options: [ { text: "Enter the Caves", next: 8 }, { text: "Go Back West", next: 1 } ],
-                 assemblyParams: { baseShape: 'stone_grey', baseSize: 20, mainShapes: ['spiky_ball', 'spinny_torus'], accents: ['metal_rusty', 'basic_tetra'], count: 25, scaleRange: [0.5, 1.8], colorTheme: [MAT.stone_grey, MAT.metal_rusty], arrangement: 'cluster', clusterRadius: 8 }
              },
-             7: { // Added North from page 4
                  title: "The Square Clearing",
-                 content: "<p>This clearing is unnervingly square. Even the rocks look cubic! In the center is a perfectly square chest with a wobbly-looking lock.</p>",
                  options: [
-                     { text: "Try the Wobbly Key (Requires Wobbly Key)", requires: "Wobbly Key", consume: true, next: 13 },
-                     { text: "Whack it with a Stick (Requires Sturdy Stick)", requires: "Sturdy Stick", next: 14 },
-                     { text: "Go Back South", next: 4 }
                  ],
-                 assemblyParams: { baseShape: 'ground_grass', baseSize: 20, mainShapes: ['boxy_chunk', 'holed_box'], accents: [], count: 15, scaleRange: [0.8, 1.5], colorTheme: [MAT.stone_brown, MAT.grass], arrangement: 'patch', patchRadius: 8 }
              },
              8: { // Inside Clanky Caves
                   title: "Clanky Caves - Junction",
-                  content: "<p>Clank! Whirr! Sproing! The cave is full of noisy, spinning metal things. Passages lead West and East.</p>",
-                  options: [ { text: "Go West (Deeper?)", next: 9 }, { text: "Go East (Exit?)", next: 5 } ],
-                  assemblyParams: { baseShape: 'stone_grey', baseSize: 25, mainShapes: ['spinny_torus', 'holed_box'], accents: ['metal_shiny', 'basic_tetra'], count: 30, scaleRange: [0.6, 2.0], colorTheme: [MAT.stone_grey, MAT.metal_shiny, MAT.metal_rusty, MAT.bright_yellow], arrangement: 'cluster', clusterRadius: 10 }
              },
-             9: { // Deeper Cave
                   title: "Sprocket Stash",
-                  content: "<p>You found a pile of shiny sprockets! And maybe some suspicious mushrooms growing nearby.</p>",
-                  options: [ { text: "Take a Sprocket!", reward: { addItem: "Shiny Sprocket", xp: 10 }, next: 8 }, { text: "Eat a Mushroom?", next: 15 }, { text: "Go Back East", next: 8 } ],
-                  assemblyParams: { baseShape: 'stone_grey', baseSize: 15, mainShapes: ['gem_shape'], accents: ['spinny_torus', 'metal_shiny'], count: 20, scaleRange: [0.4, 1.0], colorTheme: [MAT.metal_shiny, MAT.bright_yellow, MAT.deep_purple], arrangement: 'patch', patchRadius: 4 }
              },
              10: { // Success poking grass
                  title: "Grass Tickled!",
-                 content: "<p>You gently poke the snoring grass. It giggles and coughs up a Wobbly Key! Weird.</p>",
-                 options: [ { text: "Grab the Key!", reward: { addItem: "Wobbly Key", xp: 5 }, next: 1 } ],
                  assemblyParams: { baseShape: 'ground_grass', baseSize: 30, mainShapes: ['squashed_ball', 'pointy_cone'], accents: [], count: 30, scaleRange: [0.5, 1.2], colorTheme: [MAT.grass, MAT.leaf_green, MAT.sky_blue], arrangement: 'scatter' }
              },
              11: { // Fail poking grass
-                 title: "Grass Bites Back!",
-                 content: "<p>Ouch! You poked too hard. The grass blade snapped back like a tiny whip! (-1 HP)</p>",
-                 options: [ { text: "Okay, fine, leave it alone.", next: 1 } ],
-                 hpLoss: 1,
                  assemblyParams: { baseShape: 'ground_grass', baseSize: 30, mainShapes: ['squashed_ball', 'pointy_cone'], accents: [], count: 30, scaleRange: [0.5, 1.2], colorTheme: [MAT.grass, MAT.leaf_green, MAT.sky_blue], arrangement: 'scatter' }
              },
               12: { // Fail charisma check on goblin
-                 title: "Goblin Unimpressed",
-                 content: "<p>'Nice try, smooth-talker!' the goblin sneers, waving his spear more menacingly. 'Now what?'</p>",
                  options: [
-                     { text: "Fight him!", action: 'triggerCombat', enemy: 'goblin', nextOnWin: 4, nextOnLoss: 98 },
-                     { text: "Offer a Shiny Rock (If you have one)", requires: "Shiny Rock", consume: true, next: 4, reward: {xp: 10} },
-                     { text: "Run Away!", next: 2 }
                  ],
                   assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder', 'knotty_thing'], accents: ['leaf_autumn', 'basic_tetra'], count: 20, scaleRange: [1.0, 3.0], colorTheme: [MAT.wood_dark, MAT.leaf_autumn, MAT.deep_purple, MAT.goblin_skin], arrangement: 'cluster', clusterRadius: 10 }
             },
              13: { // Open chest with key
-                 title: "Chest Opens!",
-                 content: "<p>Click! The wobbly key fits the wobbly lock! Inside you find... another Shiny Rock?</p>",
-                 options: [ { text: "Take the rock!", reward: { addItem: "Shiny Rock", xp: 15 }, next: 7 } ],
-                 assemblyParams: { baseShape: 'ground_grass', baseSize: 20, mainShapes: ['boxy_chunk', 'holed_box'], accents: [], count: 15, scaleRange: [0.8, 1.5], colorTheme: [MAT.stone_brown, MAT.grass], arrangement: 'patch', patchRadius: 8 }
             },
-             14: { // Whack chest
-                 title: "Thwack!",
-                 content: "<p>You whack the square chest with your Sturdy Stick. It makes a dull *thud*. Nothing happens, but the stick feels slightly less sturdy.</p>",
-                 options: [ { text: "Try the Wobbly Key (Requires Wobbly Key)", requires: "Wobbly Key", consume: true, next: 13 }, { text: "Give up and go back", next: 7 } ],
-                 // Maybe add consequence: Sturdy Stick breaks? Requires more state tracking.
-                 assemblyParams: { baseShape: 'ground_grass', baseSize: 20, mainShapes: ['boxy_chunk', 'holed_box'], accents: [], count: 15, scaleRange: [0.8, 1.5], colorTheme: [MAT.stone_brown, MAT.grass], arrangement: 'patch', patchRadius: 8 }
             },
-             15: { // Eat Mushroom
-                 title: "Gulp!",
-                 content: "<p>You bravely (or foolishly?) eat the Suspicious Mushroom. Your vision goes purple for a second, then... you feel... bouncy! (+5 Max HP! HP Restored!)</p>",
-                 options: [ { text: "Weird! Go back.", next: 8 } ],
-                 reward: { statGain: { maxHp: 5 }, hpGain: 5, xp: 5 }, // Example stat gain
                  assemblyParams: { baseShape: 'stone_grey', baseSize: 15, mainShapes: ['gem_shape'], accents: ['spinny_torus', 'metal_shiny'], count: 20, scaleRange: [0.4, 1.0], colorTheme: [MAT.metal_shiny, MAT.bright_yellow, MAT.deep_purple], arrangement: 'patch', patchRadius: 4 }
             },
             98: { // Lose combat
-                title: "Oof!",
-                content: "<p>You were defeated! You wake up back where you started, feeling dizzy.</p>",
-                options: [ { text: "Okay...", next: 1 } ],
-                assemblyParams: { baseShape: 'ground_grass', count: 5, mainShapes:['round_blob'], colorTheme:[MAT.grass]} // Simple scene
             },
             99: { // Generic End/TBC
-                title: "Adventure Paused!",
-                content: "<p>That's as far as this path goes for now. What an adventure!</p>",
                 options: [ { text: "Start Over?", next: 1 } ],
                 assemblyParams: { baseShape: 'flat_plate', baseSize: 10, mainShapes: ['basic_tetra'], count: 5, scaleRange: [1, 2], colorTheme: [MAT.sky_blue, MAT.bright_yellow], arrangement: 'center_stack', stackHeight: 3 }
             }
@@ -327,11 +328,11 @@
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             sceneContainer.appendChild(renderer.domElement);
-            // OrbitControls removed for focus on page-based nav
             // controls = new OrbitControls(camera, renderer.domElement);
             window.addEventListener('resize', onWindowResize, false);
-            renderer.domElement.addEventListener('click', onMouseClick, false); // For pickup
             setTimeout(onWindowResize, 100);
             animate();
             console.log("initThreeJS finished.");
@@ -340,14 +341,15 @@
         function loadFontAndStart() {
              console.log("Loading font...");
              const loader = new FontLoader();
              loader.load('https://unpkg.com/[email protected]/examples/fonts/helvetiker_regular.typeface.json', function (font) {
                  threeFont = font;
                  console.log("Font loaded.");
                  startGame();
              }, undefined, function (error) {
                  console.error('Font loading failed:', error);
-                 threeFont = null; // Ensure font is null if failed
-                 startGame(); // Start anyway
              });
         }
@@ -364,11 +366,10 @@
         }
          function onMouseClick( event ) {
-             // Calculate mouse position in normalized device coordinates (-1 to +1)
              const rect = renderer.domElement.getBoundingClientRect();
              mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
              mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
-             pickupItem(); // Only pickup is enabled via click now
          }
@@ -376,8 +377,7 @@
             requestAnimationFrame(animate);
             const delta = clock.getDelta();
             const time = clock.getElapsedTime();
-            // controls?.update(); // OrbitControls removed
             if (currentSceneGroup) {
                 currentSceneGroup.traverse(obj => {
@@ -397,23 +397,23 @@
              return mesh;
          }
-        function setupLighting(type = 'default') {
             currentLights.forEach(light => { if (light.parent) light.parent.remove(light); if(scene.children.includes(light)) scene.remove(light); });
             currentLights = [];
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); // Brighter ambient for kid-friendly
             scene.add(ambientLight);
             currentLights.push(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); // Brighter directional
-            directionalLight.position.set(8, 12, 10);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.set(1024, 1024);
-            directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
             const sb = 25;
             directionalLight.shadow.camera.left = -sb; directionalLight.shadow.camera.right = sb;
             directionalLight.shadow.camera.top = sb; directionalLight.shadow.camera.bottom = -sb;
-            directionalLight.shadow.bias = -0.0005;
             scene.add(directionalLight);
             currentLights.push(directionalLight);
         }
@@ -439,19 +439,19 @@
                 baseMesh = new THREE.Mesh(groundGeo, groundMat);
                 baseMesh.rotation.x = -Math.PI / 2; baseMesh.position.y = 0;
                 baseMesh.receiveShadow = true; baseMesh.castShadow = false;
-                baseMesh.userData.isGround = true; // Mark for placement/raycasting
                 group.add(baseMesh);
             } else {
                 const baseGeoFunc = SHAPE_GENERATORS[baseShape] || SHAPE_GENERATORS['flat_plate'];
                 const baseGeo = baseGeoFunc(baseSize);
                 baseMesh = createMesh(baseGeo, colorTheme[0] || MAT.stone_grey, {y:0.1});
                 baseMesh.receiveShadow = true; baseMesh.castShadow = false;
-                 baseMesh.userData.isGround = true; // Allow placing on non-plane bases
                 group.add(baseMesh);
             }
             const allShapes = [...mainShapes, ...accents];
-            let lastY = 0.1; // Start stacking slightly above base
             let stackCount = 0;
             for (let i = 0; i < count; i++) {
@@ -462,68 +462,61 @@
                 const scaleFactor = scaleRange[0] + Math.random() * (scaleRange[1] - scaleRange[0]);
                 const geometry = geoFunc(scaleFactor);
                 const material = colorTheme[Math.floor(Math.random() * colorTheme.length)];
                 const mesh = createMesh(geometry, material);
-                geometry.computeBoundingBox(); // Needed for height calculation
                  let height = 0;
                  if (geometry.boundingBox) {
                     height = (geometry.boundingBox.max.y - geometry.boundingBox.min.y) * mesh.scale.y;
                  } else {
-                    console.warn("Geometry missing boundingBox", geometry);
-                    height = scaleFactor; // Estimate height if bbox failed
                  }
-                 height = Math.max(0.1, height); // Ensure minimum height
                 let position = { x:0, y:0, z:0 };
-                let isValidPosition = false; // Flag to check if position calculation succeeded
                 switch(arrangement) {
-                    case 'stack':
-                        if (stackCount < stackHeight) {
-                            position.y = lastY + height / 2;
-                            position.x = (Math.random() - 0.5) * 0.5 * scaleFactor;
-                            position.z = (Math.random() - 0.5) * 0.5 * scaleFactor;
-                            lastY += height * 0.9;
-                            stackCount++;
-                            isValidPosition = true;
-                        }
-                        break;
-                    case 'center_stack':
                          if (stackCount < stackHeight) {
-                            position.y = lastY + height / 2;
-                            lastY += height * 0.95;
-                            stackCount++;
-                            isValidPosition = true;
-                         }
-                         break;
-                    case 'cluster':
-                        const angle = Math.random() * Math.PI * 2;
-                        const radius = Math.random() * clusterRadius;
-                        position.x = Math.cos(angle) * radius;
-                        position.z = Math.sin(angle) * radius;
-                        position.y = height / 2;
-                        isValidPosition = true;
-                        break;
-                     case 'patch':
-                         const pAngle = Math.random() * Math.PI * 2;
-                         const pRadius = Math.random() * patchRadius;
-                         position.x = patchPos.x + Math.cos(pAngle) * pRadius;
-                         position.z = patchPos.z + Math.sin(pAngle) * pRadius;
-                         position.y = (patchPos.y || 0) + height / 2;
-                         isValidPosition = true;
-                         break;
-                    case 'scatter':
-                    default:
-                        position.x = (Math.random() - 0.5) * baseSize * 0.8;
-                        position.z = (Math.random() - 0.5) * baseSize * 0.8;
-                        position.y = height / 2;
-                        isValidPosition = true;
-                        break;
                 }
-                if (!isValidPosition) continue; // Skip if arrangement logic failed (e.g., stack full)
                  mesh.position.set(position.x, position.y, position.z);
                  mesh.rotation.set(
@@ -544,22 +537,26 @@
                 }
                 group.add(mesh);
             }
-            console.log(`Assembly created with ${group.children.length -1} procedural objects.`); // -1 for base
             return group;
         }
         function updateScene(assemblyParams) {
              console.log("updateScene called");
              if (currentSceneGroup) {
-                currentSceneGroup.traverse(child => {
-                    if (child.isMesh) {
-                        if(child.geometry) child.geometry.dispose();
-                    }
-                });
-                scene.remove(currentSceneGroup);
                 currentSceneGroup = null;
              }
-             setupLighting('default'); // Use default lighting for simplicity now
              if (!assemblyParams) {
                  console.warn("No assemblyParams provided, creating default scene.");
@@ -572,10 +569,10 @@
                  console.log("New scene group added.");
              } catch (error) {
                  console.error("Error creating procedural assembly:", error);
-                 // Add error indicator?
              }
          }
         function startGame() {
             console.log("startGame called.");
             const defaultChar = {
@@ -586,59 +583,64 @@
             gameState = {
                 currentPageId: 1,
                 character: JSON.parse(JSON.stringify(defaultChar)),
-                combat: null // Ensure combat is null at start
             };
             renderPage(gameState.currentPageId);
             console.log("startGame finished.");
         }
-        function handleChoiceClick(choiceData) {
-             console.log("Choice clicked:", choiceData);
              currentMessage = "";
-             let nextPageId = parseInt(choiceData.next);
-             const currentPageData = gameData[gameState.currentPageId];
-             const option = currentPageData?.options?.find(opt => opt.next === nextPageId || (opt.action === choiceData.action && opt.enemy === choiceData.enemy)); // Find the specific option
-             // 1. Check Requirements
-             if (option && option.requires) {
-                 if (!gameState.character.inventory.includes(option.requires)) {
-                     currentMessage = `<p class="message message-warning">You need a ${option.requires} for that!</p>`;
-                     renderPage(gameState.currentPageId); // Re-render current page with message
-                     return;
-                 }
-                 if (option.consume) {
-                     gameState.character.inventory = gameState.character.inventory.filter(i => i !== option.requires);
-                     currentMessage += `<p class="message message-item">Used your ${option.requires}.</p>`;
-                 }
              }
-             // 2. Handle Actions (Combat, Checks) before transitioning
-             if (option && option.action === 'triggerCombat' && option.enemy) {
                  startCombat(option.enemy, option.nextOnWin, option.nextOnLoss);
-                 return; // Combat handles the next transition
-             }
-             if (option && option.check) {
                  performSkillCheck(option.check, option.next, option.onFailure);
-                 return; // Skill check handles the next transition
-             }
-             // 3. Apply Rewards (if navigating directly)
-             if (option && option.reward) {
-                 applyReward(option.reward);
-             }
-             // 4. Transition to Next Page (if not handled by action/check)
-             const targetPageData = gameData[nextPageId];
-             if (!targetPageData) {
-                 console.error(`Invalid next page ID: ${nextPageId}`);
-                 currentMessage += `<p class="message message-warning">That path is mysteriously blocked!</p>`;
-                 nextPageId = gameState.currentPageId;
-             }
-             gameState.currentPageId = nextPageId;
-             renderPage(nextPageId);
         }
         function performSkillCheck(checkData, successPageId, failurePageId) {
              const {stat, dc} = checkData;
@@ -646,11 +648,11 @@
              const modifier = Math.floor((baseStat - 10) / 2);
              const roll = Math.floor(Math.random() * 20) + 1;
              const total = roll + modifier;
-             const success = total >= dc;
              console.log(`Skill Check ${stat}: Roll ${roll} + Mod ${modifier} = ${total} vs DC ${dc}`);
              currentMessage += `<p class="message message-info"><em>Rolling ${stat}... (Rolled ${total} vs DC ${dc})</em></p>`;
-             displayDiceRoll(roll, success); // Show the roll
              if (success) {
                  currentMessage += `<p class="message message-success"><em>Success!</em></p>`;
@@ -659,111 +661,131 @@
                  currentMessage += `<p class="message message-failure"><em>Failed!</em></p>`;
                  gameState.currentPageId = failurePageId;
              }
-             // Add short delay before rendering next page to see dice roll
-             setTimeout(() => renderPage(gameState.currentPageId), 1500);
         }
         function applyReward(rewardData) {
              if(rewardData.addItem && itemsData[rewardData.addItem]) {
                  if (!gameState.character.inventory.includes(rewardData.addItem)) {
                      gameState.character.inventory.push(rewardData.addItem);
-                     currentMessage += `<p class="message message-item">You found a ${rewardData.addItem}!</p>`;
                  } else {
-                      currentMessage += `<p class="message message-info">You found another ${rewardData.addItem}, but can't carry more.</p>`;
                  }
              }
              if(rewardData.xp) {
                  gameState.character.stats.xp += rewardData.xp;
-                 currentMessage += `<p class="message message-xp">You gained ${rewardData.xp} XP!</p>`;
              }
               if(rewardData.hpGain) {
                  gameState.character.stats.hp = Math.min(gameState.character.stats.maxHp, gameState.character.stats.hp + rewardData.hpGain);
-                 currentMessage += `<p class="message message-success">You feel better! (+${rewardData.hpGain} HP)</p>`;
              }
-             if(rewardData.statGain) { // Example: { statGain: { maxHp: 5 } }
                  for (const stat in rewardData.statGain) {
                      if (gameState.character.stats.hasOwnProperty(stat)) {
-                         gameState.character.stats[stat] += rewardData.statGain[stat];
-                         currentMessage += `<p class="message message-success">Your ${stat} increased by ${rewardData.statGain[stat]}!</p>`;
-                         // If maxHp increases, maybe heal too?
-                          if (stat === 'maxHp' && rewardData.statGain[stat] > 0) {
-                               gameState.character.stats.hp += rewardData.statGain[stat];
                           }
                      }
                  }
              }
         }
         function renderPage(pageId) {
              console.log(`Rendering page ${pageId}`);
              const pageData = gameData[pageId];
-             if (!pageData) { /* Error handling as before */ return; }
              storyTitleElement.textContent = pageData.title || "An Unnamed Place";
              storyContentElement.innerHTML = currentMessage + (pageData.content || "<p>...</p>");
              choicesElement.innerHTML = '';
-             actionChoicesElement.innerHTML = ''; // Clear action choices too
-             // Setup Navigation Buttons (Always show, disable if unavailable)
-             const neighbors = getZoneNeighbors(gameState.currentZoneId || getZoneId(1,1)); // Use placeholder if needed
-             const directions = {'north': 'North', 'south': 'South', 'east': 'East', 'west': 'West'};
-             for(const dir in directions) {
-                  const neighborId = neighbors[dir]; // Note: This uses grid logic, pageData uses .next
                   const button = document.createElement('button');
                   button.classList.add('choice-button');
-                  button.textContent = `Go ${directions[dir]}`;
-                  // For now, navigation uses pageData.options, not grid neighbors
-                  button.disabled = true; // Disable all grid nav by default
                   choicesElement.appendChild(button);
-             }
-             // Add options from pageData to Action Choices area
-             if (pageData.options && pageData.options.length > 0) {
-                 pageData.options.forEach(option => {
-                     const button = document.createElement('button');
-                     button.classList.add('choice-button', 'action'); // Mark as action
-                     button.textContent = option.text;
-                     // Disable if required item is missing
-                     let requirementMet = true;
-                     if (option.requires && !gameState.character.inventory.includes(option.requires)) {
-                         requirementMet = false;
-                         button.title = `Requires: ${option.requires}`;
-                     }
-                     button.disabled = !requirementMet;
-                     button.onclick = () => handleChoiceClick(option); // Pass full option data
-                     actionChoicesElement.appendChild(button);
-                 });
-             } else {
-                 actionChoicesElement.innerHTML = '<p><i>Nothing else to do here right now.</i></p>';
              }
              updateStatsDisplay();
              updateInventoryDisplay();
              updateActionInfo();
              updateScene(pageData.assemblyParams);
         }
-        window.handleChoiceClick = handleChoiceClick; // Make global
         function updateStatsDisplay() {
-             if (!gameState.character || !statsElement) return;
-             const stats = gameState.character.stats;
-             const hpColor = stats.hp / stats.maxHp < 0.3 ? '#f88' : (stats.hp / stats.maxHp < 0.6 ? '#fd5' : '#8f8');
-             const statBonus = (statVal) => {
-                const mod = Math.floor((statVal - 10) / 2);
-                return `${statVal} (${mod >= 0 ? '+' : ''}${mod})`;
-             };
-             statsElement.innerHTML = `<strong>Stats:</strong>
-                 <span style="color:${hpColor}">HP: ${stats.hp}/${stats.maxHp}</span> <span>XP: ${stats.xp}</span><br>
-                 <span>Str: ${statBonus(stats.strength)}</span> <span>Dex: ${statBonus(stats.dexterity)}</span> <span>Con: ${statBonus(stats.constitution)}</span>
-                 <span>Int: ${statBonus(stats.intelligence)}</span> <span>Wis: ${statBonus(stats.wisdom)}</span> <span>Cha: ${statBonus(stats.charisma)}</span>`;
-         }
         function updateInventoryDisplay() {
              if (!gameState.character || !inventoryElement) return;
@@ -786,25 +808,25 @@
             actionInfoElement.textContent = `Location: ${gameData[gameState.currentPageId]?.title || 'Unknown'} | ${mode}`;
         }
-        // --- Combat ---
         function startCombat(enemyTypeId, nextOnWin, nextOnLoss) {
             const enemyBase = enemyData[enemyTypeId];
             if (!enemyBase) { console.error("Unknown enemy type:", enemyTypeId); return; }
             gameState.combat = {
                 active: true, enemyId: enemyTypeId, enemyName: enemyBase.name,
                 enemyHp: enemyBase.hp, enemyMaxHp: enemyBase.hp,
-                enemyDefense: enemyBase.defense, enemyAttackBonus: 2, // Simplified bonus
                 enemyDamageDice: enemyBase.damageDice || 4, enemyXp: enemyBase.xp,
                 enemyDrops: enemyBase.drops || [],
                 nextOnWin: nextOnWin, nextOnLoss: nextOnLoss
             };
-            currentMessage = `<p class="message message-combat">A ${enemyBase.name} blocks your path!</p>`;
-            renderCurrentPageUI(); // Update UI to show combat mode
         }
         function handleCombatAction(action) {
             if (!gameState.combat?.active) return;
-            currentMessage = ""; // Clear previous messages
             if (action === 'attack') {
                 // Player Attack
@@ -812,33 +834,32 @@
                 const playerAtkBonus = Math.floor((gameState.character.stats.strength - 10) / 2);
                 const playerTotalAttack = playerRoll + playerAtkBonus;
                 const playerHit = playerRoll === 20 || (playerRoll !== 1 && playerTotalAttack >= gameState.combat.enemyDefense);
-                displayDiceRoll(playerRoll, playerHit); // Show roll
                 if (playerHit) {
                     const weapon = gameState.character.inventory.find(i => itemsData[i]?.type === 'weapon');
-                    const baseDamage = itemsData[weapon]?.baseDamage || 2; // Unarmed = 1d2 ?
-                    const damageRoll = Math.max(1, Math.floor(Math.random() * baseDamage) + 1 + playerAtkBonus);
                     gameState.combat.enemyHp -= damageRoll;
-                    currentMessage += `<p class="message message-success">You hit the ${gameState.combat.enemyName} for ${damageRoll} damage! (Rolled ${playerTotalAttack} vs AC ${gameState.combat.enemyDefense})</p>`;
                 } else {
-                    currentMessage += `<p class="message message-failure">You missed the ${gameState.combat.enemyName}. (Rolled ${playerTotalAttack} vs AC ${gameState.combat.enemyDefense})</p>`;
                 }
                 // Check Enemy Defeat
                 if (gameState.combat.enemyHp <= 0) {
                     currentMessage += `<p class="message message-success"><b>You defeated the ${gameState.combat.enemyName}!</b></p>`;
-                    applyReward({ xp: gameState.combat.enemyXp });
-                    // Handle Drops (Simplified: drop one random item from list)
                     if (gameState.combat.enemyDrops.length > 0) {
                         const droppedItemName = gameState.combat.enemyDrops[Math.floor(Math.random() * gameState.combat.enemyDrops.length)];
                         dropItemInScene(droppedItemName, new THREE.Vector3(Math.random()*2-1, 0.2, Math.random()*2-1));
                         currentMessage += `<p class="message message-item"><em>The ${gameState.combat.enemyName} dropped a ${droppedItemName}! Click it to pick up.</em></p>`;
                     }
                     const winPage = gameState.combat.nextOnWin;
-                    gameState.combat = null; // End combat
-                    gameState.currentPageId = winPage; // Go to win page
-                    renderPage(gameState.currentPageId);
                     return;
                 }
@@ -848,8 +869,7 @@
                 const playerAC = 10 + Math.floor((gameState.character.stats.dexterity - 10) / 2);
                 const enemyHit = enemyRoll === 20 || (enemyRoll !== 1 && enemyTotalAttack >= playerAC);
-                 // Add slight delay for enemy roll display maybe?
-                setTimeout(() => displayDiceRoll(enemyRoll, enemyHit), 500); // Display enemy roll slightly later
                 if (enemyHit) {
                     const damageRoll = Math.max(1, Math.floor(Math.random() * gameState.combat.enemyDamageDice) + 1);
@@ -858,44 +878,44 @@
                     if (gameState.character.stats.hp <= 0) {
                         currentMessage += `<p class="message message-failure"><b>You have been defeated!</b></p>`;
                         const lossPage = gameState.combat.nextOnLoss;
-                        gameState.combat = null; // End combat
-                        gameState.currentPageId = lossPage; // Go to loss page
-                         setTimeout(() => renderPage(gameState.currentPageId), 1500); // Delay transition after showing roll
                         return;
                     }
                 } else {
                     currentMessage += `<p class="message message-info">The ${gameState.combat.enemyName} misses you. (Rolled ${enemyTotalAttack} vs AC ${playerAC})</p>`;
                 }
-                 setTimeout(() => renderPage(gameState.currentPageId), 1500); // Re-render UI after delay
             }
         }
-        window.handleCombatAction = handleCombatAction; // Make global
-        function displayDiceRoll(result, success) {
-             if (!threeFont) { console.warn("Font not loaded for dice roll."); return; }
              activeTimeouts.forEach(timeoutId => clearTimeout(timeoutId)); activeTimeouts = [];
-             scene.children.filter(c => c.userData?.isDiceRoll).forEach(c => scene.remove(c)); // Remove old rolls from main scene
              const textGeo = new TextGeometry(result.toString(), { font: threeFont, size: 1.0, height: 0.1, curveSegments: 4 });
-             textGeo.computeBoundingBox();
-             const textWidth = textGeo.boundingBox.max.x - textGeo.boundingBox.min.x;
              const textMat = MAT.text_material.clone();
              textMat.color.setHex(success ? 0x88ff88 : 0xff8888);
-             textMat.transparent = true; // Needed for opacity fade
              const textMesh = new THREE.Mesh(textGeo, textMat);
              textMesh.userData.isDiceRoll = true;
-             const distance = 6;
-             const textPos = camera.position.clone().add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(distance));
              textMesh.position.copy(textPos);
-             textMesh.position.y += 1.0; // Adjust vertical position
-             textMesh.position.x -= textWidth / 2 * textMesh.scale.x; // Center horizontally
-             textMesh.quaternion.copy(camera.quaternion);
              scene.add(textMesh);
-             const duration = 2.5; // seconds
              const startTime = clock.getElapsedTime();
              textMesh.userData.startTime = startTime;
              textMesh.userData.update = (time) => {
@@ -903,19 +923,23 @@
                  if (elapsed >= duration) {
                      if (textMesh.parent) textMesh.parent.remove(textMesh);
                      delete textMesh.userData.update;
                  } else {
-                     textMesh.position.y += 0.01;
-                     textMesh.material.opacity = 1.0 - (elapsed / duration);
                  }
              };
-        }
          function dropItemInScene(itemName, positionOffset = new THREE.Vector3(0, 0, 0)) {
-            const currentGroup = currentSceneGroup; // Items are dropped relative to the current scene group origin
             if (!currentGroup || !itemsData[itemName]) return;
             const itemDef = itemsData[itemName];
-            const itemGeo = new THREE.BoxGeometry(0.4, 0.4, 0.4); // Simple representation
             const itemMat = MAT.simple.clone();
              if(itemDef.type === 'weapon') itemMat.color.setHex(0xcc6666);
              else if(itemDef.type === 'consumable') itemMat.color.setHex(0xcc9966);
@@ -929,15 +953,15 @@
             console.log(`Dropped ${itemName} in scene`);
         }
-        function pickupItem() { // Re-enabled pickup
-            if (gameState.combat?.active) return; // No pickup during combat
             raycaster.setFromCamera(mouse, camera);
             const currentGroup = currentSceneGroup;
             if (!currentGroup) return;
             const pickupables = [];
-            currentGroup.traverseVisible(child => { // Check only visible objects in current group
                 if (child.userData.isPickupable) pickupables.push(child);
             });
@@ -954,20 +978,18 @@
                       if (!gameState.character.inventory.includes(itemName)) {
                            gameState.character.inventory.push(itemName);
                        } else {
-                           currentMessage += `<p class="message message-info"><em>(Cannot carry more ${itemName})</em></p>`;
                        }
-                       // Remove object fully after pickup
                        if(clickedObject.parent) clickedObject.parent.remove(clickedObject);
                        if(clickedObject.geometry) clickedObject.geometry.dispose();
-                       // We assume material is shared from MAT, so don't dispose
-                       renderCurrentPageUI(); // Update inventory and messages
                   }
              }
         }
         document.addEventListener('DOMContentLoaded', () => {
              console.log("DOM Ready - Initializing Wacky D&D Shapes Adventure!");
              try {
@@ -980,8 +1002,10 @@
                  storyTitleElement.textContent = "Initialization Error";
                  storyContentElement.innerHTML = `<p style="color:red;">Failed to start game:</p><pre style="color:red; white-space: pre-wrap;">${error.stack || error}</pre><p style="color:yellow;">Check console (F12) for details.</p>`;
                  if(sceneContainer) sceneContainer.innerHTML = '<p style="color:red; padding: 20px;">3D Scene Failed</p>';
-                  document.getElementById('stats-inventory-container').style.display = 'none';
-                  document.getElementById('choices-container').style.display = 'none';
              }
          });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wacky D&D Shapes Adventure! (Var Fix)</title>
     <style>
+        /* --- Base Styles (Same as before) --- */
         body { font-family: 'Verdana', sans-serif; background-color: #2a3a4a; color: #f0f0f0; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
         #game-container { display: flex; flex-grow: 1; overflow: hidden; }
         #scene-container { flex-grow: 3; position: relative; border-right: 3px solid #506070; min-width: 250px; background-color: #101820; height: 100%; box-sizing: border-box; overflow: hidden; cursor: default; }
         #ui-container { flex-grow: 2; padding: 25px; overflow-y: auto; background-color: #3a4a5a; min-width: 320px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
         #scene-container canvas { display: block; }
         #story-title { color: #ffd700; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #506070; font-size: 1.8em; font-weight: bold; text-shadow: 1px 1px 2px #111; }
         #story-content { margin-bottom: 25px; line-height: 1.7; flex-grow: 1; font-size: 1.1em; color: #e8e8e8;}
         #stats-inventory-container { margin-bottom: 25px; padding: 15px; border: 1px solid #506070; border-radius: 5px; background-color: #4a5a6a; font-size: 0.95em; }
         #stats-display, #inventory-display { margin-bottom: 10px; line-height: 1.8; }
+        #stats-display span, #inventory-display .item-tag { display: inline-block; background-color: #5a6a7a; padding: 4px 10px; border-radius: 15px; margin: 0 8px 5px 0; border: 1px solid #7a8a9a; white-space: nowrap; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }
         #stats-display strong, #inventory-display strong { color: #e0e0e0; margin-right: 6px; font-weight:bold; }
         #inventory-display em { color: #aabbcc; font-style: normal; }
         .item-tool { background-color: #a0522d; border-color: #cd853f; color: #fff;}
         .item-key { background-color: #ffd700; border-color: #f0e68c; color: #333;}
         .item-treasure { background-color: #20b2aa; border-color: #48d1cc; color: #fff;}
         .item-food { background-color: #ff6347; border-color: #fa8072; color: #fff;}
+        .item-quest { background-color: #da70d6; border-color: #ee82ee; color: #fff;}
         .item-unknown { background-color: #778899; border-color: #b0c4de;}
         #choices-container { margin-top: auto; padding-top: 20px; border-top: 2px solid #506070; }
         #choices-container h3 { margin-top: 0; margin-bottom: 12px; color: #e0e0e0; font-size: 1.2em; font-weight: bold;}
+        #choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;}
+        #action-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; border-top: 1px dashed #607080; padding-top: 15px;}
         .choice-button { display: block; width: 100%; padding: 13px 16px; margin-bottom: 0; background-color: #607080; color: #fff; border: 1px solid #8090a0; border-radius: 5px; cursor: pointer; text-align: center; font-family: 'Verdana', sans-serif; font-size: 1.0em; font-weight: bold; transition: background-color 0.2s, transform 0.1s; box-sizing: border-box; letter-spacing: 0.5px; }
+        .choice-button.action { text-align: left; grid-column: span 2;}
         .choice-button:hover:not(:disabled) { background-color: #ffc107; color: #222; border-color: #ffca2c; transform: translateY(-1px); }
         .choice-button:disabled { background-color: #4e5a66; color: #8a9aab; cursor: not-allowed; border-color: #607080; opacity: 0.6; transform: none; box-shadow: none;}
         .choice-button[title]:disabled::after { content: ' (' attr(title) ')'; font-style: italic; font-size: 0.9em; margin-left: 5px; }
         .message-combat { color: #f98; border-left-color: #c64; font-weight: bold;}
         .combat-button { background-color: #a33; border-color: #c66; color: #fff; font-weight: bold; text-align: center;}
         .combat-button:hover:not(:disabled) { background-color: #d44; border-color: #f88;}
         #action-info { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.7); color: #ffcc66; padding: 5px 10px; border-radius: 3px; font-size: 0.9em; display: block; z-index: 10;}
     </style>
 </head>
         </div>
         <div id="ui-container">
             <h2 id="story-title">Initializing...</h2>
+            <div id="story-content"><p>Loading assets...</p></div>
             <div id="stats-inventory-container">
                 <div id="stats-display">Loading Stats...</div>
                 <div id="inventory-display">Inventory: ...</div>
     <script type="module">
         import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Re-added controls
         import { FontLoader } from 'three/addons/loaders/FontLoader.js';
         import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
         console.log("Script module execution started.");
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
         const storyContentElement = document.getElementById('story-content');
+        const choicesElement = document.getElementById('choices');
+        const actionChoicesElement = document.getElementById('action-choices');
         const statsElement = document.getElementById('stats-display');
         const inventoryElement = document.getElementById('inventory-display');
         const actionInfoElement = document.getElementById('action-info');
         console.log("DOM elements obtained.");
         // --- Core Three.js Variables ---
+        let scene, camera, renderer, clock, controls, raycaster, mouse; // Added controls, raycaster, mouse back
         let currentSceneGroup = null;
         let currentLights = [];
         let threeFont = null;
         let currentMessage = "";
+        let activeTimeouts = []; // Clear timeouts on scene change
         // --- Materials ---
         const MAT = {
             sky_blue: new THREE.MeshStandardMaterial({ color: 0x03a9f4, roughness: 0.5 }),
             town_wood: new THREE.MeshStandardMaterial({ color: 0xae8a63, roughness: 0.7 }),
             town_roof: new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.8 }),
+            goblin_skin: new THREE.MeshStandardMaterial({ color: 0x8FBC8F, roughness: 0.8 }),
+            text_material: new THREE.MeshBasicMaterial({ color: 0xffddaa, transparent: true }), // Make text transparent for fade
         };
         // --- Game State ---
             "Goblin's Favorite Sock": {type:"quest", description:"Smells... unique."},
             "Shiny Rock": {type:"treasure", description:"Distractingly shiny."},
             "Suspicious Mushroom": {type:"food", description:"Maybe... just maybe..."},
+            "Cave Crystal": {type:"unknown", description:"A faintly glowing crystal shard."}
         };
         // --- Enemy Data ---
          const enemyData = {
             'goblin': { name: "Grumpy Goblin", hp: 12, defense: 12, attackBonus: 1, damageDice: 4, xp: 25, drops: ["Goblin's Favorite Sock", "Shiny Rock"] },
+            'skeleton': { name: "Clattering Skeleton", hp: 10, defense: 13, attackBonus: 2, damageDice: 4, xp: 20, drops: ["Ancient Coin"] }, // Added skeleton
+            'spider': { name: "Hairy Spider", hp: 15, defense: 11, attackBonus: 2, damageDice: 3, xp: 25, drops: ["Cave Crystal"] } // Adjusted spider
         };
+        // --- Procedural Shapes ---
+        const SHAPE_GENERATORS = {
             'pointy_cone': (size) => new THREE.ConeGeometry(size * 0.5, size * 1.2, 6 + Math.floor(Math.random() * 5)),
             'round_blob': (size) => new THREE.SphereGeometry(size * 0.6, 12, 8),
             'spinny_torus': (size) => new THREE.TorusGeometry(size * 0.5, size * 0.15, 8, 16),
         };
         const shapeKeys = Object.keys(SHAPE_GENERATORS);
+        // --- Game Data (More Pages) ---
+         const gameData = {
+            1: { // Snoring Meadows (Start)
                 title: "Snoring Meadows",
+                content: "<p>You wake with a start! Not from a nightmare, but because the grass around you is... snoring softly? Weird. A path leads North into the Wiggly Woods and East towards some noisy-looking Clanky Caves.</p>",
                 options: [
+                    { text: "Venture into Wiggly Woods", next: 2 },
+                    { text: "Investigate Clanky Caves", next: 5 },
+                    { text: "Poke the snoring grass? (WIS Check DC 10)", check: { stat: 'wisdom', dc: 10, next: 10, onFailure: 11 } }
                 ],
                 assemblyParams: { baseShape: 'ground_grass', baseSize: 30, mainShapes: ['squashed_ball', 'pointy_cone'], accents: [], count: 30, scaleRange: [0.5, 1.2], colorTheme: [MAT.grass, MAT.leaf_green, MAT.sky_blue], arrangement: 'scatter' }
             },
+            2: { // Wiggly Woods Entrance
                 title: "Wiggly Woods",
+                content: "<p>Whoa! These trees are doing the wiggle! It's quite groovy, but makes walking tricky. A particularly grumpy-looking Goblin blocks the path deeper (North).</p>",
                 options: [
+                    { text: "Politely ask the Goblin to move", next: 3 },
+                    { text: "Try to wiggle past (DEX Check DC 12)", check: { stat: 'dexterity', dc: 12, next: 4, onFailure: 3 } }, // Fail leads to talk
+                    { text: "Wiggle back to the Meadows (South)", next: 1 }
                 ],
                 assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder', 'knotty_thing'], accents: ['leaf_autumn'], count: 20, scaleRange: [1.0, 3.0], colorTheme: [MAT.wood_dark, MAT.leaf_autumn, MAT.deep_purple], arrangement: 'cluster', clusterRadius: 10 }
             },
+             3: { // Confront Goblin
+                title: "Grumpy Goblin Guard",
+                content: "<p>'Oi! Wiggler!' the Goblin shouts, adjusting his single, smelly sock. 'Dis MY patch o' wiggles! Whatcha want?' He doesn't look like he enjoys conversation. Or baths.</p>",
                 options: [
+                    { text: "'Just passing through!' (CHA Check DC 14)", check: { stat: 'charisma', dc: 14, next: 4, onFailure: 12 } },
+                    { text: "Offer 'Shiny Rock' as tribute", requires: "Shiny Rock", consume: true, next: 4, reward: {xp: 15} },
+                    { text: "Prepare for a Wobbly Tussle!", action: 'triggerCombat', enemy: 'goblin', nextOnWin: 4, nextOnLoss: 98 },
+                    { text: "'Nevermind!' (Retreat)", next: 2 }
                 ],
+                assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder', 'knotty_thing'], accents: ['leaf_autumn', 'basic_tetra'], count: 20, scaleRange: [1.0, 3.0], colorTheme: [MAT.wood_dark, MAT.leaf_autumn, MAT.deep_purple, MAT.goblin_skin], arrangement: 'cluster', clusterRadius: 10 }
             },
+             4: { // Past Goblin
+                title: "Further Into the Woods",
+                content: "<p>You made it past the grumpy guardian! The woods get thicker here, but you see a strange, perfectly Square Clearing to the North.</p>",
                 options: [
+                    { text: "Investigate the Square Clearing (North)", next: 7 },
+                    { text: "Go Back Past Goblin Spot (South)", next: 2 } // Assume goblin is gone/pacified
                 ],
+                 assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder', 'round_blob'], accents: ['leaf_green'], count: 25, scaleRange: [1.0, 2.8], colorTheme: [MAT.wood_light, MAT.leaf_green, MAT.stone_brown], arrangement: 'scatter' }
             },
+            5: { // Cave Entrance
                  title: "Clanky Caves Entrance",
+                 content: "<p>CLANK! WHOOSH! A rusty metal sign hangs crookedly: 'Clanky Caves - Enter At Yer Own Risk & Volume Level'. It smells faintly of oil and... ozone?</p>",
+                 options: [ { text: "Bravely Enter!", next: 8 }, { text: "Nope Out (West)", next: 1 } ],
+                 assemblyParams: { baseShape: 'stone_grey', baseSize: 20, mainShapes: ['spiky_ball', 'spinny_torus', 'holed_box'], accents: ['metal_rusty'], count: 25, scaleRange: [0.5, 1.8], colorTheme: [MAT.stone_grey, MAT.metal_rusty, MAT.metal_shiny], arrangement: 'cluster', clusterRadius: 8 }
              },
+             6: { // Placeholder - Reached from old page 3, needs rewrite
+                title: "Gem Patch Revisited",
+                content: "<p>You return to the shiny spot. The remaining gems twinkle invitingly.</p>",
+                options: [ { text: "Go Back to Meadow Path", next: 1 } ], // Simple exit
+                 assemblyParams: { baseShape: 'ground_grass', baseSize: 15, mainShapes: ['gem_shape', 'basic_tetra'], accents: ['pointy_cone'], count: 30, scaleRange: [0.2, 0.7], colorTheme: [MAT.crystal_blue, MAT.crystal_red, MAT.stone_grey], arrangement: 'patch', patchPos: {x:0, y:0.1, z:0}, patchRadius: 5 }
+             },
+             7: { // Square Clearing
                  title: "The Square Clearing",
+                 content: "<p>Wow, they weren't kidding. Everything is suspiciously square - the rocks, the flowers... In the center sits a locked chest, also square, with a distinctly wobbly keyhole.</p>",
                  options: [
+                     { text: "Try Wobbly Key", requires: "Wobbly Key", consume: true, next: 13 },
+                     { text: "Try Sturdy Stick (Strength Check DC 13 to pry)", requires: "Sturdy Stick", check: { stat: 'strength', dc: 13, next: 14, onFailure: 14 } }, // Fail still goes to 14 but maybe adds message
+                     { text: "Leave the Creepy Clearing (South)", next: 4 }
                  ],
+                 assemblyParams: { baseShape: 'ground_grass', baseSize: 20, mainShapes: ['boxy_chunk', 'holed_box'], accents: ['basic_tetra'], count: 15, scaleRange: [0.8, 1.5], colorTheme: [MAT.stone_brown, MAT.grass, MAT.stone_grey], arrangement: 'patch', patchRadius: 8 }
              },
              8: { // Inside Clanky Caves
                   title: "Clanky Caves - Junction",
+                  content: "<p>Clank! Whirr! Sproing! It's a cacophony! Gears spin wildly, pistons pump uselessly. Passages lead West (Clankier?) and East (Quieter?).</p>",
+                  options: [ { text: "Go West (More Clanks!)", next: 9 }, { text: "Go East (Less Clanky?)", next: 5 } ],
+                  assemblyParams: { baseShape: 'stone_grey', baseSize: 25, mainShapes: ['spinny_torus', 'holed_box', 'tall_cylinder'], accents: ['metal_shiny', 'basic_tetra'], count: 30, scaleRange: [0.6, 2.0], colorTheme: [MAT.stone_grey, MAT.metal_shiny, MAT.metal_rusty, MAT.bright_yellow], arrangement: 'cluster', clusterRadius: 10 }
              },
+             9: { // Deeper Cave / Sprocket Stash
                   title: "Sprocket Stash",
+                  content: "<p>Jackpot! A huge pile of Shiny Sprockets! They spin hypnotically. Also, some weird purple mushrooms pulse nearby.</p>",
+                  options: [ { text: "Grab a Sprocket!", reward: { addItem: "Shiny Sprocket", xp: 10 }, next: 9 }, { text: "Lick a Mushroom? (CON Check DC 11)", check: {stat:'constitution', dc: 11, next: 15, onFailure: 16 } }, { text: "Go Back East", next: 8 } ],
+                  assemblyParams: { baseShape: 'stone_grey', baseSize: 15, mainShapes: ['gem_shape', 'pointy_cone'], accents: ['spinny_torus', 'metal_shiny'], count: 25, scaleRange: [0.4, 1.0], colorTheme: [MAT.metal_shiny, MAT.bright_yellow, MAT.deep_purple], arrangement: 'patch', patchRadius: 4 }
              },
              10: { // Success poking grass
                  title: "Grass Tickled!",
+                 content: "<p>Hehe! The blade of grass giggles (yes, really!) and spits out a very Wobbly Key!</p>",
+                 options: [ { text: "Nab the Key!", reward: { addItem: "Wobbly Key", xp: 5 }, next: 1 } ],
                  assemblyParams: { baseShape: 'ground_grass', baseSize: 30, mainShapes: ['squashed_ball', 'pointy_cone'], accents: [], count: 30, scaleRange: [0.5, 1.2], colorTheme: [MAT.grass, MAT.leaf_green, MAT.sky_blue], arrangement: 'scatter' }
              },
              11: { // Fail poking grass
+                 title: "Grass Annoyed!",
+                 content: "<p>The snoring grass grumbles and rolls over, hiding whatever might have been there. Maybe try again later?</p>",
+                 options: [ { text: "Okay, okay, sorry!", next: 1 } ],
                  assemblyParams: { baseShape: 'ground_grass', baseSize: 30, mainShapes: ['squashed_ball', 'pointy_cone'], accents: [], count: 30, scaleRange: [0.5, 1.2], colorTheme: [MAT.grass, MAT.leaf_green, MAT.sky_blue], arrangement: 'scatter' }
              },
               12: { // Fail charisma check on goblin
+                 title: "Goblin Scowls",
+                 content: "<p>'Bah! Words are cheap!' The goblin tightens his grip on the spear. 'Try again, maybe with shiny stuff?'</p>",
                  options: [
+                     { text: "Attack!", action: 'triggerCombat', enemy: 'goblin', nextOnWin: 4, nextOnLoss: 98 },
+                     { text: "Offer 'Shiny Rock'", requires: "Shiny Rock", consume: true, next: 4, reward: {xp: 10} },
+                     { text: "Flee!", next: 2 }
                  ],
                   assemblyParams: { baseShape: 'ground_dirt', baseSize: 25, mainShapes: ['tall_cylinder', 'knotty_thing'], accents: ['leaf_autumn', 'basic_tetra'], count: 20, scaleRange: [1.0, 3.0], colorTheme: [MAT.wood_dark, MAT.leaf_autumn, MAT.deep_purple, MAT.goblin_skin], arrangement: 'cluster', clusterRadius: 10 }
             },
              13: { // Open chest with key
+                 title: "Wobbly Chest Opens!",
+                 content: "<p>Wiggle, jiggle... click! The key works! Inside is... a single, slightly Suspicious Mushroom. Huh.</p>",
+                 options: [ { text: "Take the Mushroom", reward: { addItem: "Suspicious Mushroom", xp: 15 }, next: 7 } ],
+                 assemblyParams: { baseShape: 'ground_grass', baseSize: 20, mainShapes: ['boxy_chunk', 'holed_box'], accents: [], count: 15, scaleRange: [0.8, 1.5], colorTheme: [MAT.stone_brown, MAT.grass, MAT.stone_grey], arrangement: 'patch', patchRadius: 8 }
+            },
+             14: { // Whack chest / Fail Str check
+                 title: "Thwack! Ow.",
+                 content: "<p>You whack the chest. It remains stubbornly square and closed. Your stick might have a splinter. The lock still wobbles mockingly.</p>",
+                 options: [ { text: "Try Wobbly Key", requires: "Wobbly Key", consume: true, next: 13 }, { text: "Leave it", next: 7 } ],
+                 assemblyParams: { baseShape: 'ground_grass', baseSize: 20, mainShapes: ['boxy_chunk', 'holed_box'], accents: [], count: 15, scaleRange: [0.8, 1.5], colorTheme: [MAT.stone_brown, MAT.grass, MAT.stone_grey], arrangement: 'patch', patchRadius: 8 }
             },
+             15: { // Success licking Mushroom
+                 title: "Tingly!",
+                 content: "<p>You lick the mushroom. It tastes like purple and static! You feel... stronger! (+1 Strength!)</p>",
+                 options: [ { text: "Whoa! Go Back.", next: 8 } ],
+                 reward: { statGain: { strength: 1 }, xp: 5 }, // Example stat gain
+                 assemblyParams: { baseShape: 'stone_grey', baseSize: 15, mainShapes: ['gem_shape'], accents: ['spinny_torus', 'metal_shiny'], count: 20, scaleRange: [0.4, 1.0], colorTheme: [MAT.metal_shiny, MAT.bright_yellow, MAT.deep_purple], arrangement: 'patch', patchRadius: 4 }
             },
+             16: { // Fail licking Mushroom
+                 title: "Blech!",
+                 content: "<p>You lick the mushroom. It tastes like old socks and regret. Your tongue feels fuzzy. (-1 Charisma temporarily? TBC)</p>",
+                 options: [ { text: "Ugh! Go Back.", next: 8 } ],
+                 // Add temporary effect later if needed
                  assemblyParams: { baseShape: 'stone_grey', baseSize: 15, mainShapes: ['gem_shape'], accents: ['spinny_torus', 'metal_shiny'], count: 20, scaleRange: [0.4, 1.0], colorTheme: [MAT.metal_shiny, MAT.bright_yellow, MAT.deep_purple], arrangement: 'patch', patchRadius: 4 }
             },
             98: { // Lose combat
+                title: "Bonked!",
+                content: "<p>Ouch! That hurt. You wake up back in the Snoring Meadows, feeling rather silly.</p>",
+                options: [ { text: "Try again?", next: 1 } ],
+                assemblyParams: { baseShape: 'ground_grass', count: 5, mainShapes:['round_blob'], colorTheme:[MAT.grass]}
             },
             99: { // Generic End/TBC
+                title: "To Be Continued... Maybe!",
+                content: "<p>That's the end of this particular wacky path. Was there a point? Who knows! Adventure!</p>",
                 options: [ { text: "Start Over?", next: 1 } ],
                 assemblyParams: { baseShape: 'flat_plate', baseSize: 10, mainShapes: ['basic_tetra'], count: 5, scaleRange: [1, 2], colorTheme: [MAT.sky_blue, MAT.bright_yellow], arrangement: 'center_stack', stackHeight: 3 }
             }
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             sceneContainer.appendChild(renderer.domElement);
+            // Controls removed for page-based navigation focus
             // controls = new OrbitControls(camera, renderer.domElement);
             window.addEventListener('resize', onWindowResize, false);
+            renderer.domElement.addEventListener('click', onMouseClick, false);
             setTimeout(onWindowResize, 100);
             animate();
             console.log("initThreeJS finished.");
         function loadFontAndStart() {
              console.log("Loading font...");
              const loader = new FontLoader();
+             // Ensure the path to the font is correct or use a reliable CDN
              loader.load('https://unpkg.com/[email protected]/examples/fonts/helvetiker_regular.typeface.json', function (font) {
                  threeFont = font;
                  console.log("Font loaded.");
                  startGame();
              }, undefined, function (error) {
                  console.error('Font loading failed:', error);
+                 threeFont = null;
+                 startGame();
              });
         }
         }
          function onMouseClick( event ) {
              const rect = renderer.domElement.getBoundingClientRect();
              mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
              mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
+             pickupItem(); // Only use click for pickup now
          }
             requestAnimationFrame(animate);
             const delta = clock.getDelta();
             const time = clock.getElapsedTime();
+            // controls?.update(); // Controls removed
             if (currentSceneGroup) {
                 currentSceneGroup.traverse(obj => {
              return mesh;
          }
+        function setupLighting(type = 'default') { // Simplified lighting
             currentLights.forEach(light => { if (light.parent) light.parent.remove(light); if(scene.children.includes(light)) scene.remove(light); });
             currentLights = [];
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
             scene.add(ambientLight);
             currentLights.push(ambientLight);
+            const 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;
             const sb = 25;
             directionalLight.shadow.camera.left = -sb; directionalLight.shadow.camera.right = sb;
             directionalLight.shadow.camera.top = sb; directionalLight.shadow.camera.bottom = -sb;
+            directionalLight.shadow.bias = -0.001; // Adjusted bias slightly
             scene.add(directionalLight);
             currentLights.push(directionalLight);
         }
                 baseMesh = new THREE.Mesh(groundGeo, groundMat);
                 baseMesh.rotation.x = -Math.PI / 2; baseMesh.position.y = 0;
                 baseMesh.receiveShadow = true; baseMesh.castShadow = false;
+                baseMesh.userData.isGround = true;
                 group.add(baseMesh);
             } else {
                 const baseGeoFunc = SHAPE_GENERATORS[baseShape] || SHAPE_GENERATORS['flat_plate'];
                 const baseGeo = baseGeoFunc(baseSize);
                 baseMesh = createMesh(baseGeo, colorTheme[0] || MAT.stone_grey, {y:0.1});
                 baseMesh.receiveShadow = true; baseMesh.castShadow = false;
+                 baseMesh.userData.isGround = true;
                 group.add(baseMesh);
             }
             const allShapes = [...mainShapes, ...accents];
+            let lastY = 0.1;
             let stackCount = 0;
             for (let i = 0; i < count; i++) {
                 const scaleFactor = scaleRange[0] + Math.random() * (scaleRange[1] - scaleRange[0]);
                 const geometry = geoFunc(scaleFactor);
+                if (!geometry) { console.warn(`Geometry creation failed for ${shapeKey}`); continue; } // Check geometry creation
                 const material = colorTheme[Math.floor(Math.random() * colorTheme.length)];
                 const mesh = createMesh(geometry, material);
+                 try {
+                     geometry.computeBoundingBox();
+                 } catch(e) { console.error("Error computing bounding box", e, geometry); continue; }
                  let height = 0;
                  if (geometry.boundingBox) {
                     height = (geometry.boundingBox.max.y - geometry.boundingBox.min.y) * mesh.scale.y;
                  } else {
+                    height = scaleFactor;
                  }
+                 height = Math.max(0.1, height);
                 let position = { x:0, y:0, z:0 };
+                let isValidPosition = false;
                 switch(arrangement) {
+                     case 'stack':
                          if (stackCount < stackHeight) {
+                             position.y = lastY + height / 2;
+                             position.x = (Math.random() - 0.5) * 0.5 * scaleFactor;
+                             position.z = (Math.random() - 0.5) * 0.5 * scaleFactor;
+                             lastY += height * 0.9;
+                             stackCount++; isValidPosition = true;
+                         } break;
+                     case 'center_stack':
+                          if (stackCount < stackHeight) {
+                             position.y = lastY + height / 2;
+                             lastY += height * 0.95;
+                             stackCount++; isValidPosition = true;
+                          } break;
+                     case 'cluster':
+                         const angle = Math.random() * Math.PI * 2;
+                         const radius = Math.random() * clusterRadius;
+                         position.x = Math.cos(angle) * radius;
+                         position.z = Math.sin(angle) * radius;
+                         position.y = height / 2; isValidPosition = true; break;
+                      case 'patch':
+                          const pAngle = Math.random() * Math.PI * 2;
+                          const pRadius = Math.random() * patchRadius;
+                          position.x = patchPos.x + Math.cos(pAngle) * pRadius;
+                          position.z = patchPos.z + Math.sin(pAngle) * pRadius;
+                          position.y = (patchPos.y || 0) + height / 2; isValidPosition = true; break;
+                     case 'scatter': default:
+                         position.x = (Math.random() - 0.5) * baseSize * 0.8;
+                         position.z = (Math.random() - 0.5) * baseSize * 0.8;
+                         position.y = height / 2; isValidPosition = true; break;
                 }
+                if (!isValidPosition) continue;
                  mesh.position.set(position.x, position.y, position.z);
                  mesh.rotation.set(
                 }
                 group.add(mesh);
             }
+            console.log(`Assembly created with ${group.children.length -1} procedural objects.`);
             return group;
         }
         function updateScene(assemblyParams) {
              console.log("updateScene called");
+             activeTimeouts.forEach(id => clearTimeout(id)); // Clear pending timeouts
+             activeTimeouts = [];
              if (currentSceneGroup) {
+                 scene.remove(currentSceneGroup); // Remove group cleanly
+                 // Dispose geometries in the removed group
+                 currentSceneGroup.traverse(child => {
+                     if (child.isMesh && child.geometry) {
+                         child.geometry.dispose();
+                     }
+                 });
                 currentSceneGroup = null;
              }
+             setupLighting('default');
              if (!assemblyParams) {
                  console.warn("No assemblyParams provided, creating default scene.");
                  console.log("New scene group added.");
              } catch (error) {
                  console.error("Error creating procedural assembly:", error);
              }
          }
         function startGame() {
             console.log("startGame called.");
             const defaultChar = {
             gameState = {
                 currentPageId: 1,
                 character: JSON.parse(JSON.stringify(defaultChar)),
+                combat: null
             };
             renderPage(gameState.currentPageId);
             console.log("startGame finished.");
         }
+        function handleChoiceClick(option) { // Renamed parameter for clarity
+             console.log("Choice clicked:", option);
              currentMessage = "";
+             // Check requirements first
+             if (option.requires && !gameState.character.inventory.includes(option.requires)) {
+                 currentMessage = `<p class="message message-warning">You need a ${option.requires} for that!</p>`;
+                 renderPage(gameState.currentPageId); // Re-render current page with message
+                 return;
+             }
+             // Consume item if required and successful (or if action doesn't fail)
+             let consumedItem = false;
+             if (option.requires && option.consume) {
+                 gameState.character.inventory = gameState.character.inventory.filter(i => i !== option.requires);
+                 currentMessage += `<p class="message message-item">Used your ${option.requires}.</p>`;
+                 consumedItem = true; // Mark as consumed
              }
+             // Handle different action types
+             if (option.action === 'triggerCombat' && option.enemy) {
                  startCombat(option.enemy, option.nextOnWin, option.nextOnLoss);
+                 // Combat flow handles the next steps and UI render
+             } else if (option.check) {
                  performSkillCheck(option.check, option.next, option.onFailure);
+                 // Skill check flow handles the next steps and UI render
+             } else if (option.next) {
+                 // Simple navigation or action leading to next page
+                 let nextPageId = parseInt(option.next);
+                 const targetPageData = gameData[nextPageId];
+                 if (!targetPageData) {
+                     console.error(`Invalid next page ID: ${nextPageId}`);
+                     currentMessage += `<p class="message message-warning">That path is mysteriously blocked!</p>`;
+                     nextPageId = gameState.currentPageId; // Stay on current page
+                 }
+                 // Apply rewards associated *with this specific choice*
+                 if (option.reward) {
+                     applyReward(option.reward);
+                 }
+                 gameState.currentPageId = nextPageId;
+                 renderPage(nextPageId); // Render the next page
+             } else {
+                 console.warn("Choice has no action or next page:", option);
+                 currentMessage += `<p class="message message-info">Nothing seems to happen...</p>`;
+                 renderPage(gameState.currentPageId); // Re-render current page
+             }
         }
+         window.handleChoiceClick = handleChoiceClick; // Expose for inline handlers
         function performSkillCheck(checkData, successPageId, failurePageId) {
              const {stat, dc} = checkData;
              const modifier = Math.floor((baseStat - 10) / 2);
              const roll = Math.floor(Math.random() * 20) + 1;
              const total = roll + modifier;
+             const success = roll === 20 || (roll !== 1 && total >= dc); // Nat 20 success, Nat 1 fail
              console.log(`Skill Check ${stat}: Roll ${roll} + Mod ${modifier} = ${total} vs DC ${dc}`);
              currentMessage += `<p class="message message-info"><em>Rolling ${stat}... (Rolled ${total} vs DC ${dc})</em></p>`;
+             displayDiceRoll(roll, success);
              if (success) {
                  currentMessage += `<p class="message message-success"><em>Success!</em></p>`;
                  currentMessage += `<p class="message message-failure"><em>Failed!</em></p>`;
                  gameState.currentPageId = failurePageId;
              }
+             // Add delay before showing result page
+             activeTimeouts.push(setTimeout(() => renderPage(gameState.currentPageId), 2600)); // Longer delay
         }
         function applyReward(rewardData) {
+             // Refactored reward application
+             if(!rewardData) return;
              if(rewardData.addItem && itemsData[rewardData.addItem]) {
                  if (!gameState.character.inventory.includes(rewardData.addItem)) {
                      gameState.character.inventory.push(rewardData.addItem);
+                     currentMessage += `<p class="message message-item">You got a ${rewardData.addItem}!</p>`;
                  } else {
+                      currentMessage += `<p class="message message-info">You found another ${rewardData.addItem}.</p>`;
                  }
              }
              if(rewardData.xp) {
                  gameState.character.stats.xp += rewardData.xp;
+                 currentMessage += `<p class="message message-xp">Gained ${rewardData.xp} XP!</p>`;
              }
               if(rewardData.hpGain) {
                  gameState.character.stats.hp = Math.min(gameState.character.stats.maxHp, gameState.character.stats.hp + rewardData.hpGain);
+                 currentMessage += `<p class="message message-success">Recovered ${rewardData.hpGain} HP.</p>`;
              }
+             if(rewardData.statGain) {
                  for (const stat in rewardData.statGain) {
                      if (gameState.character.stats.hasOwnProperty(stat)) {
+                         const increase = rewardData.statGain[stat];
+                         gameState.character.stats[stat] += increase;
+                         currentMessage += `<p class="message message-success">${stat.charAt(0).toUpperCase() + stat.slice(1)} increased by ${increase}!</p>`;
+                          if (stat === 'maxHp' && increase > 0) { // Also heal when maxHP increases
+                               gameState.character.stats.hp += increase;
                           }
+                          // Potentially recalculate maxHP if constitution changes (add recalculateMaxHp function if needed)
                      }
                  }
              }
         }
         function renderPage(pageId) {
              console.log(`Rendering page ${pageId}`);
              const pageData = gameData[pageId];
+             if (!pageData) { /* Error handling */ console.error(`No page data for ID: ${pageId}`); return; }
              storyTitleElement.textContent = pageData.title || "An Unnamed Place";
              storyContentElement.innerHTML = currentMessage + (pageData.content || "<p>...</p>");
              choicesElement.innerHTML = '';
+             actionChoicesElement.innerHTML = '';
+             // Navigation Buttons - Always show 4, disable if no exit
+             const neighbors = {}; // For page-based, neighbours aren't fixed grid, maybe infer from options? Or ignore for now.
+             const navOptions = pageData.options.filter(opt => opt.text.toLowerCase().includes("go ")); // Basic filter for nav text
+             ['North', 'South', 'East', 'West'].forEach(dir => {
                   const button = document.createElement('button');
                   button.classList.add('choice-button');
+                  button.textContent = `Go ${dir}`;
+                  // Find if an option corresponds to this direction (simplistic check)
+                  const matchingOption = pageData.options.find(opt => opt.text.toLowerCase().includes(`(${dir.toLowerCase()})`) || opt.text.toLowerCase().includes(`go ${dir.toLowerCase()}`));
+                  if (matchingOption) {
+                      button.onclick = () => handleChoiceClick(matchingOption);
+                      // Check requirements for this specific nav option
+                      if (matchingOption.requires && !gameState.character.inventory.includes(matchingOption.requires)) {
+                          button.disabled = true;
+                           button.title = `Requires: ${matchingOption.requires}`;
+                      }
+                  } else {
+                      button.disabled = true; // Disable if no matching option found
+                  }
                   choicesElement.appendChild(button);
+             });
+             // Action Buttons (Non-navigational)
+             if (pageData.options) {
+                  pageData.options.filter(opt => !opt.text.toLowerCase().includes("go ")).forEach(option => { // Filter out nav buttons
+                      const button = document.createElement('button');
+                      button.classList.add('choice-button', 'action');
+                       if (option.action === 'triggerCombat') button.classList.add('combat-button'); // Style combat triggers
+                      button.textContent = option.text;
+                      let requirementMet = true;
+                      if (option.requires && !gameState.character.inventory.includes(option.requires)) {
+                          requirementMet = false;
+                          button.title = `Requires: ${option.requires}`;
+                      }
+                      button.disabled = !requirementMet;
+                      button.onclick = () => handleChoiceClick(option);
+                      actionChoicesElement.appendChild(button);
+                  });
+              }
+               if (actionChoicesElement.innerHTML === '') {
+                 actionChoicesElement.innerHTML = '<p><i>Nothing else seems possible here.</i></p>';
+             }
+             // Combat UI
+              if (gameState.combat?.active) {
+                 actionChoicesElement.innerHTML += `
+                     <div id="combat-ui">
+                         <p class="message message-combat">Fighting ${gameState.combat.enemyName}! (Enemy HP: ${gameState.combat.enemyHp})</p>
+                         <button class="choice-button combat-button action" onclick="handleCombatAction('attack')">Attack!</button>
+                         </div>`;
              }
              updateStatsDisplay();
              updateInventoryDisplay();
              updateActionInfo();
              updateScene(pageData.assemblyParams);
         }
         function updateStatsDisplay() {
+            if (!gameState.character || !statsElement) return;
+            const stats = gameState.character.stats;
+            const hpColor = stats.hp / stats.maxHp < 0.3 ? '#f88' : (stats.hp / stats.maxHp < 0.6 ? '#fd5' : '#8f8');
+            const statBonus = (statVal) => {
+               const mod = Math.floor((statVal - 10) / 2);
+               return `${statVal} (${mod >= 0 ? '+' : ''}${mod})`;
+            };
+            statsElement.innerHTML = `<strong>Stats:</strong>
+                <span style="color:${hpColor}">HP: ${stats.hp}/${stats.maxHp}</span> <span>XP: ${stats.xp}</span><br>
+                <span>Str: ${statBonus(stats.strength)}</span> <span>Dex: ${statBonus(stats.dexterity)}</span> <span>Con: ${statBonus(stats.constitution)}</span>
+                <span>Int: ${statBonus(stats.intelligence)}</span> <span>Wis: ${statBonus(stats.wisdom)}</span> <span>Cha: ${statBonus(stats.charisma)}</span>`;
+        }
         function updateInventoryDisplay() {
              if (!gameState.character || !inventoryElement) return;
             actionInfoElement.textContent = `Location: ${gameData[gameState.currentPageId]?.title || 'Unknown'} | ${mode}`;
         }
+        // --- Combat & Item Functions ---
         function startCombat(enemyTypeId, nextOnWin, nextOnLoss) {
             const enemyBase = enemyData[enemyTypeId];
             if (!enemyBase) { console.error("Unknown enemy type:", enemyTypeId); return; }
             gameState.combat = {
                 active: true, enemyId: enemyTypeId, enemyName: enemyBase.name,
                 enemyHp: enemyBase.hp, enemyMaxHp: enemyBase.hp,
+                enemyDefense: enemyBase.defense, enemyAttackBonus: enemyBase.attackBonus || 2,
                 enemyDamageDice: enemyBase.damageDice || 4, enemyXp: enemyBase.xp,
                 enemyDrops: enemyBase.drops || [],
                 nextOnWin: nextOnWin, nextOnLoss: nextOnLoss
             };
+            currentMessage = `<p class="message message-combat">Watch out! A ${enemyBase.name} attacks!</p>`;
+            renderPage(gameState.currentPageId); // Re-render to show combat UI
         }
         function handleCombatAction(action) {
             if (!gameState.combat?.active) return;
+            currentMessage = "";
             if (action === 'attack') {
                 // Player Attack
                 const playerAtkBonus = Math.floor((gameState.character.stats.strength - 10) / 2);
                 const playerTotalAttack = playerRoll + playerAtkBonus;
                 const playerHit = playerRoll === 20 || (playerRoll !== 1 && playerTotalAttack >= gameState.combat.enemyDefense);
+                displayDiceRoll(playerRoll, playerHit);
                 if (playerHit) {
                     const weapon = gameState.character.inventory.find(i => itemsData[i]?.type === 'weapon');
+                    const baseDamage = itemsData[weapon]?.baseDamage || 2; // Use weapon or 1d2 for unarmed
+                    const damageRoll = Math.max(1, Math.floor(Math.random() * baseDamage) + 1 + playerAtkBonus); // Add STR mod to damage
                     gameState.combat.enemyHp -= damageRoll;
+                    currentMessage += `<p class="message message-success">You hit for ${damageRoll} damage! (Rolled ${playerTotalAttack} vs AC ${gameState.combat.enemyDefense})</p>`;
                 } else {
+                    currentMessage += `<p class="message message-failure">You missed. (Rolled ${playerTotalAttack} vs AC ${gameState.combat.enemyDefense})</p>`;
                 }
                 // Check Enemy Defeat
                 if (gameState.combat.enemyHp <= 0) {
                     currentMessage += `<p class="message message-success"><b>You defeated the ${gameState.combat.enemyName}!</b></p>`;
+                    applyReward({ xp: gameState.combat.enemyXp }); // Apply XP reward
+                    // Handle Drops
                     if (gameState.combat.enemyDrops.length > 0) {
                         const droppedItemName = gameState.combat.enemyDrops[Math.floor(Math.random() * gameState.combat.enemyDrops.length)];
                         dropItemInScene(droppedItemName, new THREE.Vector3(Math.random()*2-1, 0.2, Math.random()*2-1));
                         currentMessage += `<p class="message message-item"><em>The ${gameState.combat.enemyName} dropped a ${droppedItemName}! Click it to pick up.</em></p>`;
                     }
                     const winPage = gameState.combat.nextOnWin;
+                    gameState.combat = null;
+                    gameState.currentPageId = winPage;
+                    setTimeout(() => renderPage(gameState.currentPageId), 500); // Short delay after win message
                     return;
                 }
                 const playerAC = 10 + Math.floor((gameState.character.stats.dexterity - 10) / 2);
                 const enemyHit = enemyRoll === 20 || (enemyRoll !== 1 && enemyTotalAttack >= playerAC);
+                activeTimeouts.push( setTimeout(() => displayDiceRoll(enemyRoll, enemyHit), 600) ); // Display enemy roll slightly later
                 if (enemyHit) {
                     const damageRoll = Math.max(1, Math.floor(Math.random() * gameState.combat.enemyDamageDice) + 1);
                     if (gameState.character.stats.hp <= 0) {
                         currentMessage += `<p class="message message-failure"><b>You have been defeated!</b></p>`;
                         const lossPage = gameState.combat.nextOnLoss;
+                        gameState.combat = null;
+                        gameState.currentPageId = lossPage;
+                        activeTimeouts.push( setTimeout(() => renderPage(gameState.currentPageId), 2600) ); // Delay transition
                         return;
                     }
                 } else {
                     currentMessage += `<p class="message message-info">The ${gameState.combat.enemyName} misses you. (Rolled ${enemyTotalAttack} vs AC ${playerAC})</p>`;
                 }
+                 activeTimeouts.push( setTimeout(() => renderPage(gameState.currentPageId), 2600) ); // Re-render UI after delay
             }
         }
+        window.handleCombatAction = handleCombatAction;
+         function displayDiceRoll(result, success) {
+             if (!threeFont) { return; }
              activeTimeouts.forEach(timeoutId => clearTimeout(timeoutId)); activeTimeouts = [];
+             scene.children.filter(c => c.userData?.isDiceRoll).forEach(c => scene.remove(c));
              const textGeo = new TextGeometry(result.toString(), { font: threeFont, size: 1.0, height: 0.1, curveSegments: 4 });
+             textGeo.computeBoundingBox(); textGeo.center(); // Center geometry
              const textMat = MAT.text_material.clone();
              textMat.color.setHex(success ? 0x88ff88 : 0xff8888);
+             textMat.opacity = 1.0; // Start fully opaque
              const textMesh = new THREE.Mesh(textGeo, textMat);
              textMesh.userData.isDiceRoll = true;
+             const distance = 5; // Distance in front of camera
+             const cameraDirection = camera.getWorldDirection(new THREE.Vector3());
+             const textPos = camera.position.clone().add(cameraDirection.multiplyScalar(distance));
              textMesh.position.copy(textPos);
+             textMesh.position.y += 1.2; // Position slightly higher
+             textMesh.quaternion.copy(camera.quaternion); // Face camera
              scene.add(textMesh);
+             const duration = 2.5;
+             const fadeStart = 1.5; // Start fading after 1.5s
              const startTime = clock.getElapsedTime();
              textMesh.userData.startTime = startTime;
              textMesh.userData.update = (time) => {
                  if (elapsed >= duration) {
                      if (textMesh.parent) textMesh.parent.remove(textMesh);
                      delete textMesh.userData.update;
+                     // Remove from timeout tracking - not strictly needed as it stops updating
                  } else {
+                     textMesh.position.y += 0.015; // Float up
+                     if (elapsed > fadeStart) {
+                        textMesh.material.opacity = 1.0 - ((elapsed - fadeStart) / (duration - fadeStart));
+                     }
                  }
              };
+         }
          function dropItemInScene(itemName, positionOffset = new THREE.Vector3(0, 0, 0)) {
+            const currentGroup = currentSceneGroup; // Drop relative to current scene group
             if (!currentGroup || !itemsData[itemName]) return;
             const itemDef = itemsData[itemName];
+            const itemGeo = new THREE.BoxGeometry(0.4, 0.4, 0.4);
             const itemMat = MAT.simple.clone();
              if(itemDef.type === 'weapon') itemMat.color.setHex(0xcc6666);
              else if(itemDef.type === 'consumable') itemMat.color.setHex(0xcc9966);
             console.log(`Dropped ${itemName} in scene`);
         }
+        function pickupItem() {
+            if (gameState.combat?.active) return;
             raycaster.setFromCamera(mouse, camera);
             const currentGroup = currentSceneGroup;
             if (!currentGroup) return;
             const pickupables = [];
+            currentGroup.traverseVisible(child => { // Only check visible objects
                 if (child.userData.isPickupable) pickupables.push(child);
             });
                       if (!gameState.character.inventory.includes(itemName)) {
                            gameState.character.inventory.push(itemName);
                        } else {
+                           currentMessage += `<p class="message message-info"><em>(You already have a ${itemName})</em></p>`;
                        }
                        if(clickedObject.parent) clickedObject.parent.remove(clickedObject);
                        if(clickedObject.geometry) clickedObject.geometry.dispose();
+                       renderCurrentPageUI();
                   }
              }
         }
+        // --- Initialization ---
         document.addEventListener('DOMContentLoaded', () => {
              console.log("DOM Ready - Initializing Wacky D&D Shapes Adventure!");
              try {
                  storyTitleElement.textContent = "Initialization Error";
                  storyContentElement.innerHTML = `<p style="color:red;">Failed to start game:</p><pre style="color:red; white-space: pre-wrap;">${error.stack || error}</pre><p style="color:yellow;">Check console (F12) for details.</p>`;
                  if(sceneContainer) sceneContainer.innerHTML = '<p style="color:red; padding: 20px;">3D Scene Failed</p>';
+                  const statsInvContainer = document.getElementById('stats-inventory-container');
+                  const choicesCont = document.getElementById('choices-container');
+                  if (statsInvContainer) statsInvContainer.style.display = 'none';
+                  if (choicesCont) choicesCont.style.display = 'none';
              }
          });