<!-- (Do NOT remove this entire comment block at the top of the HTML file!)

### **1. Game Overview**

* **Concept:** A 3D take on the classic sfcave game.  
* **Perspective:** First-person view, with the plane represented as a single dot (hitbox).  
* **Core Challenge:** Navigate a procedurally generated tunnel that narrows over time while avoiding obstacles.

---

### **2. Core Gameplay Mechanics**

* **Movement:**  
  * **Vertical Control:** A tap (on mobile) or mouse click (on PC) provides an upward impulse. Gravity continuously pulls the dot downward.  
  * **Horizontal Control:** Sensor-based input on mobile (via tilt) and mouse movement on PC allow the player to steer left and right.  
* **Collision & Life:**  
  * The player has 1HP. Colliding with any obstacle or leaving the tunnel results in an immediate game over.

---

### **3. Tunnel and Obstacles**

* **Tunnel:**  
  * **Procedural Generation:** Levels are generated based on a seed. The seed is displayed to the player for sharing and replay purposes.  
  * **Dynamic Difficulty:** As the player progresses, the tunnel gradually narrows, increasing the challenge.  
* **Obstacles:**  
  * Static and brightly colored obstacles are positioned throughout the tunnel.  
  * They are meant to be easily recognizable hazards that the player must avoid.  
  * Obstacle density remains constant regardless of tunnel narrowing.

---

### **4. Collectible Power-Ups**

There are three types of time-limited power-ups, with durations that accumulate if the same type is collected while an effect is already active:

* **Slow-Motion Effect:**  
  * Temporarily slows down time (affecting overall gameplay speed).  
* **Score Boost:**  
  * Increases bonus points received (e.g., multiplier for distance or actions) while active.  
* **Auto-Firing Weapon:**  
  * **Behavior:** Automatically fires projectiles every 1 second.  
  * **Direction:** Projectiles are shot in the direction the dot is currently steering (incorporating both vertical and horizontal movement).  
  * **Impact:** When a projectile hits an obstacle, the obstacle is immediately destroyed and bonus points are awarded.

---

### **5. Ghost Player Functionality**

* **Purpose:** Motivates players to compete against their own previous best runs.  
* **Recording:** Only the player’s movement (position and timing) is recorded.  
* **Usage:** Ghost runs are available when playing with the same seed.

---

### **6. Level Seed Management**

* **Visibility:** The seed is displayed on-screen, allowing players to copy and share it.  
* **Usage:** Players can either reuse a seed to challenge their previous ghost runs or change the seed to generate a new level layout.

---

### **7. Scoring System**

* **Base Score:** Continuously accumulates based on the distance traveled.  
* **Bonuses:**  
  * Additional bonus points are awarded for every obstacle destroyed by the auto-firing weapon.  
  * Additional bonus points are given for each power-up collected.  
* **Tuning:** Specific bonus values are tunable and can be adjusted during playtesting.

---

### **8. Game Over and Feedback**

* **Trigger:** The game ends immediately when the player's dot collides with an obstacle or exits the tunnel.  
* **Game Over Screen:** Upon game termination, display the following final statistics:  
  * Final Score  
  * Distance Traveled  
  * Number of Obstacles Destroyed  
  * Number of Power-Ups Collected  
  * The Seed used for that run  
* **Feedback:** Appropriate visual and audio cues (e.g., sound effects or screen shake) may be included to enhance the impact of game over.

---

### **9. Control Methods for Different Platforms**

* **Mobile:**  
  * **Steering:** Left/right via sensor-based tilt.  
  * **Vertical Movement:** Tap for upward impulse.  
* **PC (Testing):**  
  * **Steering:** Mouse movement or keyboard (if desired) for left/right.  
  * **Vertical Movement:** Mouse click for upward impulse.


## General Instructions (Do not remove!)

1. Keep this comment block in the code! Also do not remove any comments in the code below.
2. If any text is displayed, the font should be CONSOLAS, monospace.
3. There is no backend; all data needs to be stored locally.
4. Simplify the code if possible (without removing comments or the functionality described above).
5. You MUST keep all comments in the code below, even if you think they are redundant.
6. Always respond with the full new html file (including these comments here), additional explanations are not necessary. 
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Open 3D SFCave</title>
  <style>
    html, body {
      margin: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      background: #000;
      font-family: Consolas, monospace;
      color: white;
    }
    #renderCanvas {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
    #uiOverlay {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 10;
    }
    #gameOver {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      padding: 20px;
      border: 2px solid white;
      display: none;
      text-align: center;
    }
    .smallInput {
      width: 80px;
    }
    /* Toast styling */
    #toastContainer {
      position: absolute;
      bottom: 30%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }
    .toast {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #fff;
      padding: 5px 10px;
      border-radius: 3px;
      animation: fadeOut 2s forwards;
    }
    @keyframes fadeOut {
      0% { opacity: 1; }
      80% { opacity: 1; }
      100% { opacity: 0; }
    }
  </style>
</head>
<body>
  <canvas id="renderCanvas"></canvas>
  
  <!-- Top-left UI overlay now only shows the current score -->
  <div id="uiOverlay">
    <span id="scoreDisplay">Score: 0</span>
  </div>
  
  <!-- Container for toasts -->
  <div id="toastContainer"></div>

  <!-- Game Over screen, includes final stats and seed management -->
  <div id="gameOver">
    <h1>Game Over</h1>
    <div id="finalStats"></div>
    <div>
      <!-- Seed management UI. Will display current seed in input. -->
      <input id="seedInput" class="smallInput" type="text">
      <button id="setSeedBtn">Generate Level</button>
    </div>
    <br>
    <button id="restartBtn">Restart</button>
    <button id="shareBtn">Share</button>
  </div>

  <!-- Include Babylon.js and Cannon.js (for physics) from CDN -->
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <script src="https://cdn.babylonjs.com/cannon.js"></script>
  <script>
    "use strict";

    // ==== Global Variables ====
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);
    let scene;
    let camera; // We'll store the camera here so we can reference it anywhere

    // Parse seed from URL if present, otherwise use a random seed
    function getSeedFromURL() {
      const params = new URLSearchParams(window.location.search);
      let s = parseInt(params.get("seed"));
      if (isNaN(s)) {
        // If no seed is specified, use a random seed and update the URL so it doesn't get lost on refresh
        s = Math.floor(Math.random() * 100000);
        params.set("seed", s);
        window.history.replaceState({}, "", "?" + params.toString());
      }
      return s;
    }
    let seed = getSeedFromURL(); // Displayed seed

    // We'll store ghost runs in localStorage. If a ghost run exists for the same seed, we'll show it.
    // Instead of recording every frame (which can be huge and cause QuotaExceededError),
    // we record fewer positions to keep storage smaller.
    let ghostPositions = [];       // for current run recording (compressed to arrays)
    let storedGhostPositions = []; // replay data if available (also arrays)
    let ghostMesh = null;          // a sphere for the ghost
    let ghostIndex = 0;            // track frames for replay
    let ghostRecordFrameSkip = 3;  // only record every N frames to reduce storage usage
    let ghostFrameCounter = 0;     // counter to decide when to record

    // Game settings & tunable variables.
    const GRAVITY = -16;                  // downward gravity (constant)
    const UP_IMPULSE = 11;                // upward impulse on tap/click
    const FORWARD_SPEED = 20;             // forward speed along the tunnel
    const HORIZONTAL_SENSITIVITY = 0.01;  
    const INITIAL_TUNNEL_RADIUS = 10;     
    const MIN_TUNNEL_RADIUS = 4;          
    const OBSTACLE_INTERVAL = 10;         
    const OBSTACLE_SIZE = 1.5;
    const TUNNEL_LENGTH = 10000; 
    const STEP_SIZE = 7; // distance between cross-section "rings"

    // Power-Up settings
    const POWERUP_INTERVAL = 50;     
    const POWERUP_SIZE = 1;
    const POWERUP_BONUS_POINTS = 50; 

    // Durations (in seconds) for each power-up
    const SLOW_MO_DURATION = 5;
    const SCORE_BOOST_DURATION = 5;
    const AUTO_FIRE_DURATION = 5;

    // Multipliers / factors for power-ups
    const SLOW_MO_FACTOR = 0.5;     // Slow-mo speed factor
    const SCORE_BOOST_MULT = 2;     
    const AUTO_FIRE_INTERVAL = 1;   

    // Score & state
    let score = 0;
    let scoreMultiplier = 1.0;         
    let obstaclesDestroyed = 0;        
    let powerUpsCollected = 0;         
    let gameRunning = true;

    // For obstacles & power-ups
    let obstacles = [];
    let powerUps = [];

    // Power-up timers
    let slowMoRemaining = 0;
    let scoreBoostRemaining = 0;
    let autoFireRemaining = 0;

    // Auto-fire support
    let nextAutoFireTime = 0;
    let projectiles = [];

    // UI elements
    const scoreDisplay = document.getElementById("scoreDisplay");
    const gameOverDiv = document.getElementById("gameOver");
    const finalStatsDiv = document.getElementById("finalStats");
    const restartBtn = document.getElementById("restartBtn");
    const setSeedBtn = document.getElementById("setSeedBtn");
    const seedInput = document.getElementById("seedInput");
    const shareBtn = document.getElementById("shareBtn");

    // Toast container
    const toastContainer = document.getElementById("toastContainer");

    // References to key game objects
    let tunnel; 
    let playerMesh; 

    // We'll track lastZ for incremental scoring
    let lastZ = 0; 

    // A simple seeded random (for consistent obstacle & power-up placement by seed)
    function seededRandom() {
      // Basic LCG constants to demonstrate determinism; not cryptographically secure.
      seed = (seed * 9301 + 49297) % 233280;
      return seed / 233280;
    }

    // We'll store the tunnel's center path for each "step" in Z,
    // so we can place obstacles/power-ups around the actual curve.
    let pathCenters = [];  // array of BABYLON.Vector2 indicating the center x,y for each discrete Z step

    // Utility for returning the clamped tunnel radius at a given z
    // Uses an exponential/curved formula.
    function getTunnelRadiusAtZ(z) {
      // Exponential approach:
      // The tunnel radius transitions from INITIAL_TUNNEL_RADIUS at z=0
      // asymptotically toward MIN_TUNNEL_RADIUS as z increases.
      // Adjust the factor below to control how quickly it narrows.
      const factor = 0.0005;
      let radius = MIN_TUNNEL_RADIUS + (INITIAL_TUNNEL_RADIUS - MIN_TUNNEL_RADIUS) * Math.exp(-factor * z);
      return radius;
    }

    // Utility to get a random position (x,y) around center2D within maxRadius
    function getRandomPositionAroundCenter(center2D, maxRadius) {
      let angle = seededRandom() * Math.PI * 2;
      let r = seededRandom() * maxRadius;
      return {
        x: center2D.x + Math.cos(angle) * r,
        y: center2D.y + Math.sin(angle) * r
      };
    }

    // Utility: Return the 2D center for a given Z (integer steps). We clamp to the array bounds.
    function getCenterAtZ(z) {
      // Convert z to an index in pathCenters. Each step is STEP_SIZE.
      let idx = Math.floor(z / STEP_SIZE);
      if (idx < 0) idx = 0;
      if (idx >= pathCenters.length) idx = pathCenters.length - 1;
      return pathCenters[idx];
    }

    // We keep a reference for the base time step to adjust for slow-mo on each frame.
    let baseTimeStep = 1/60;

    // ==== Local Storage Helpers (added for code simplification, keeping comments) ====
    // We'll keep all relevant code comments in place.

    // Helper function to safely get data from localStorage
    function getLocalData(key) {
      let data = localStorage.getItem(key);
      if (!data) return null;
      try {
        return JSON.parse(data);
      } catch (e) {
        return null;
      }
    }

    // Helper function to safely set data in localStorage
    function setLocalData(key, value) {
      try {
        localStorage.setItem(key, JSON.stringify(value));
      } catch (error) {
        // If we fail due to quota, we simply won't store the new data.
        console.warn("Failed to store data (quota exceeded).");
      }
    }

    // ==== Scene Setup ====
    function createScene() {
      scene = new BABYLON.Scene(engine);

      // Enable physics (using CannonJSPlugin) with a fixed time step set later
      scene.enablePhysics(
        new BABYLON.Vector3(0, GRAVITY, 0),
        new BABYLON.CannonJSPlugin()
      );

      // We'll manage slow motion by adjusting the physics time step below.
      scene.getPhysicsEngine().setTimeStep(baseTimeStep);

      // Basic light
      let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0,1,0), scene);

      // 1) Create the cave-like tunnel with random slopes in x/y, but ensure the start is at (0,0).
      createAsymmetricCave();

      // 2) Create the player
      createPlayer();

      // 3) Create obstacles (start them further in so the player has time to react)
      generateObstacles();

      // 4) Create power-ups
      generatePowerUps();

      // On mobile, use DeviceOrientationCamera; on desktop, use UniversalCamera
      if (/Mobi|Android/i.test(navigator.userAgent)) {
        camera = new BABYLON.DeviceOrientationCamera("camera", new BABYLON.Vector3(0,0,0), scene);
        camera.attachControl(canvas, true);

        // === Calibrate initial device orientation (zero out pitch, roll, and yaw) ===
        let initialCalibrationDone = false;
        camera.onAfterCheckInputsObservable.add(() => {
          if (!initialCalibrationDone) {
            initialCalibrationDone = true;
            let initRotX = camera.rotation.x;
            let initRotY = camera.rotation.y;
            let initRotZ = camera.rotation.z;
            camera.rotation.x -= initRotX;
            camera.rotation.y -= initRotY;
            camera.rotation.z -= initRotZ;
          }
        });
      } else {
        camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0,0,0), scene);
        camera.attachControl(canvas, true);
      }

      camera.parent = playerMesh;
      camera.position.z = 0;

      // Setup ghost if we have data from a previous run
      initGhostRun();

      // Register input handlers
      setupInputHandlers();

      return scene;
    }

    // ==== Create an Asymmetric Cave with the first cross-section at (0,0) ====
    function createAsymmetricCave() {
      const pathArray = [];
      const steps = TUNNEL_LENGTH / STEP_SIZE;
      const crossSectionPointsCount = 16; 

      // We'll track a 2D "center" (x,y) that shifts slightly each step, while z increments.
      // Force the tunnel to start at (0,0).
      let currentCenter = new BABYLON.Vector2(0, 0);
      let dir = new BABYLON.Vector2(seededRandom() - 0.5, seededRandom() - 0.5);
      dir.normalize();

      for (let i = 0; i <= steps; i++) {
        let z = i * STEP_SIZE;

        // For i>0, update the direction and shift the center. For i=0, it stays at (0,0).
        if (i > 0) {
          dir.x += (seededRandom() - 0.5) * 0.2;
          dir.y += (seededRandom() - 0.5) * 0.2;
          dir.normalize();

          // Move the center by some small step in x,y.
          let moveDist = 2.5; // how fast the center moves horizontally/vertically each step
          currentCenter = currentCenter.add(dir.scale(moveDist));
        }

        // Store the center so we can place obstacles/power-ups around it later.
        pathCenters[i] = currentCenter.clone();

        // Determine radius for this cross-section (narrowing effect)
        let baseRadius = getTunnelRadiusAtZ(z);

        // Build a ring of points around currentCenter.x, currentCenter.y
        let crossSection = [];
        for (let t = 0; t < crossSectionPointsCount; t++) {
          let angle = (t / crossSectionPointsCount) * 2 * Math.PI;
          // Slight random offset to make the tunnel less uniform.
          let localOffset = (seededRandom() - 0.5) * 3.0;
          let radius = baseRadius + localOffset;
          let x = currentCenter.x + Math.cos(angle) * radius;
          let y = currentCenter.y + Math.sin(angle) * radius;
          crossSection.push(new BABYLON.Vector3(x, y, z));
        }

        pathArray.push(crossSection);
      }

      // Create a ribbon to form the cave walls
      tunnel = BABYLON.MeshBuilder.CreateRibbon("tunnel", {
        pathArray: pathArray,
        closeArray: false,
        closePath: true,
        sideOrientation: BABYLON.Mesh.BACKSIDE
      }, scene);

      // Cave material
      tunnel.material = new BABYLON.StandardMaterial("tunnelMat", scene);
      tunnel.material.diffuseColor = new BABYLON.Color3(0.36, 0.24, 0.18);
      tunnel.material.specularColor = new BABYLON.Color3(0, 0, 0);

      // Physics impostor for the tunnel mesh.
      tunnel.physicsImpostor = new BABYLON.PhysicsImpostor(
        tunnel,
        BABYLON.PhysicsImpostor.MeshImpostor,
        { mass: 0, friction: 0.2, restitution: 0 },
        scene
      );
    }

    // ==== Create Player ====
    function createPlayer() {
      playerMesh = BABYLON.MeshBuilder.CreateSphere("playerMesh", { diameter: 0.5 }, scene);
      // Start at (0,0,0), which should now be inside the very first cross-section of the tunnel.
      playerMesh.position = new BABYLON.Vector3(0, 0, 0);

      playerMesh.physicsImpostor = new BABYLON.PhysicsImpostor(
        playerMesh,
        BABYLON.PhysicsImpostor.SphereImpostor,
        { mass: 1, friction: 0.0, restitution: 0 },
        scene
      );

      // Initial forward velocity along Z
      playerMesh.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(0, 0, FORWARD_SPEED));

      // Player material
      let pmat = new BABYLON.StandardMaterial("playerMat", scene);
      pmat.diffuseColor = new BABYLON.Color3(0, 0.5, 1);
      playerMesh.material = pmat;

      // If player collides with tunnel => game over
      playerMesh.physicsImpostor.registerOnPhysicsCollide(
        tunnel.physicsImpostor,
        () => {
          if (gameRunning) {
            gameOver();
          }
        }
      );
    }

    // ==== Obstacle Generation ====
    function generateObstacles() {
      // Single material for obstacles
      let obstacleMaterial = new BABYLON.StandardMaterial("obsMat", scene);
      obstacleMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red

      // Start obstacles further in, so the first ones appear at z=30 onward.
      for (let z = 30; z < TUNNEL_LENGTH; z += OBSTACLE_INTERVAL) {
        let center2D = getCenterAtZ(z);
        let tunnelRadius = getTunnelRadiusAtZ(z);
        const { x, y } = getRandomPositionAroundCenter(center2D, tunnelRadius - OBSTACLE_SIZE - 0.5);

        // Create the obstacle as a red sphere
        let obstacleMesh = BABYLON.MeshBuilder.CreateSphere("obstacle" + z, { diameter: OBSTACLE_SIZE }, scene);
        obstacleMesh.position = new BABYLON.Vector3(x, y, z);
        obstacleMesh.material = obstacleMaterial; // assign the single red material

        // Static physics body
        obstacleMesh.physicsImpostor = new BABYLON.PhysicsImpostor(
          obstacleMesh,
          BABYLON.PhysicsImpostor.SphereImpostor,
          { mass: 0, friction: 0.2, restitution: 0 },
          scene
        );

        // Collision => game over (if from player). We'll also handle projectile collision separately.
        playerMesh.physicsImpostor.registerOnPhysicsCollide(
          obstacleMesh.physicsImpostor,
          () => {
            if (gameRunning) {
              gameOver();
            }
          }
        );

        obstacles.push(obstacleMesh);
      }
    }

    // ==== Power-Up Generation ====
    function generatePowerUps() {
      // Materials for different power-up types
      let slowMoMat = new BABYLON.StandardMaterial("slowMoMat", scene);
      slowMoMat.diffuseColor = new BABYLON.Color3(0, 1, 0); // green
      let scoreBoostMat = new BABYLON.StandardMaterial("scoreBoostMat", scene);
      scoreBoostMat.diffuseColor = new BABYLON.Color3(1, 1, 0); // yellow
      let autoFireMat = new BABYLON.StandardMaterial("autoFireMat", scene);
      autoFireMat.diffuseColor = new BABYLON.Color3(0.6, 0, 1); // purple

      // Place power-ups at intervals in the tunnel.
      for (let z = POWERUP_INTERVAL; z < TUNNEL_LENGTH; z += POWERUP_INTERVAL) {
        // We'll randomly decide whether to spawn a power-up at this interval.
        if (seededRandom() < 0.3) {
          let center2D = getCenterAtZ(z);
          let tunnelRadius = getTunnelRadiusAtZ(z);
          const { x, y } = getRandomPositionAroundCenter(center2D, tunnelRadius - POWERUP_SIZE - 0.5);

          // Randomly pick one of the three power-up types
          let types = ["slowMo", "scoreBoost", "autoFire"];
          let pickIndex = Math.floor(seededRandom() * types.length);
          let chosenType = types[pickIndex];

          let powerUpMesh = BABYLON.MeshBuilder.CreateSphere("powerUp" + z, { diameter: POWERUP_SIZE }, scene);
          powerUpMesh.position = new BABYLON.Vector3(x, y, z);
          powerUpMesh.physicsImpostor = new BABYLON.PhysicsImpostor(
            powerUpMesh,
            BABYLON.PhysicsImpostor.SphereImpostor,
            { mass: 0, friction: 0, restitution: 0 },
            scene
          );

          // Assign color based on type & store type in metadata
          powerUpMesh.metadata = { type: chosenType };
          if (chosenType === "slowMo") {
            powerUpMesh.material = slowMoMat;
          } else if (chosenType === "scoreBoost") {
            powerUpMesh.material = scoreBoostMat;
          } else {
            powerUpMesh.material = autoFireMat;
          }

          // Collision => collect power-up (no game over)
          playerMesh.physicsImpostor.registerOnPhysicsCollide(
            powerUpMesh.physicsImpostor,
            () => {
              if (gameRunning && powerUpMesh.isVisible) {
                collectPowerUp(powerUpMesh.metadata.type, powerUpMesh);
              }
            }
          );

          powerUps.push(powerUpMesh);
        }
      }
    }

    // ==== Utility: Show Toast ====
    function showToast(message) {
      const toast = document.createElement("div");
      toast.className = "toast";
      toast.innerText = message;
      toastContainer.appendChild(toast);

      // Remove the toast from DOM after 2 seconds
      setTimeout(() => {
        if (toastContainer.contains(toast)) {
          toastContainer.removeChild(toast);
        }
      }, 2000);
    }

    // ==== Collect Power-Up ====
    function collectPowerUp(type, powerUpMesh) {
      powerUpsCollected++;
      score += POWERUP_BONUS_POINTS; // immediate bonus

      // Hide and disable
      powerUpMesh.isVisible = false;
      powerUpMesh.setEnabled(false);

      // Show a small toast with the name of the power-up
      if (type === "slowMo") {
        showToast("Collected: Slow-Mo");
        slowMoRemaining += SLOW_MO_DURATION;
      } else if (type === "scoreBoost") {
        showToast("Collected: Score Boost");
        scoreBoostRemaining += SCORE_BOOST_DURATION;
      } else if (type === "autoFire") {
        showToast("Collected: Auto-Fire");
        autoFireRemaining += AUTO_FIRE_DURATION;
      }
    }

    // ==== Projectiles Handling (auto-fire) ====
    function createProjectile() {
      let proj = BABYLON.MeshBuilder.CreateSphere("projectile", { diameter: 0.2 }, scene);
      proj.position = playerMesh.position.clone();
      proj.position.z += 1; // offset slightly in front

      let mat = new BABYLON.StandardMaterial("projMat", scene);
      mat.diffuseColor = new BABYLON.Color3(1, 1, 1);
      proj.material = mat;

      // We'll store a direction from the player's current velocity
      let vel = playerMesh.physicsImpostor.getLinearVelocity().clone();
      let speed = vel.length();
      if (speed < 0.001) {
        vel = new BABYLON.Vector3(0, 0, 1);
      } else {
        vel.normalize();
      }
      let projectileSpeed = 50;
      proj.physicsImpostor = new BABYLON.PhysicsImpostor(
        proj,
        BABYLON.PhysicsImpostor.SphereImpostor,
        { mass: 1, friction: 0, restitution: 0 },
        scene
      );
      proj.physicsImpostor.setLinearVelocity(vel.scale(projectileSpeed));

      projectiles.push(proj);

      // Collision with obstacles => destroy them and remove projectile
      obstacles.forEach(obs => {
        proj.physicsImpostor.registerOnPhysicsCollide(obs.physicsImpostor, () => {
          if (obs.isVisible && proj.isVisible) {
            obstaclesDestroyed++;
            score += 25; // bonus points

            // Remove both from scene to ensure they disappear right away
            obs.dispose();
            proj.dispose();
          }
        });
      });
    }

    // ==== Input Handling ====
    function setupInputHandlers() {
      // On pointer down => upward impulse (for mobile and PC)
      canvas.addEventListener("pointerdown", () => {
        if (!gameRunning) return;

        // iOS needs permission request for device orientation.
        // We'll attempt it on first touch/click if available.
        if (typeof DeviceOrientationEvent !== "undefined" &&
            typeof DeviceOrientationEvent.requestPermission === "function") {
          DeviceOrientationEvent.requestPermission().catch(() => {
            // Ignore or log error if user denies; game will still run but won't get orientation data.
          });
        }

        let currentVel = playerMesh.physicsImpostor.getLinearVelocity();
        currentVel.y = UP_IMPULSE;
        playerMesh.physicsImpostor.setLinearVelocity(currentVel);
      });

      // Sensor-based input on mobile (left/right tilt)
      if (window.DeviceOrientationEvent) {
        window.addEventListener("deviceorientation", (e) => {
          if (!gameRunning) return;
          if (e.gamma !== null) {
            let tilt = BABYLON.Scalar.Clamp(e.gamma / 45, -1, 1);
            let currentVel = playerMesh.physicsImpostor.getLinearVelocity();
            // Just adjust X velocity for tilt (simple approach)
            currentVel.x += tilt * HORIZONTAL_SENSITIVITY * 1.5;
            playerMesh.physicsImpostor.setLinearVelocity(currentVel);
          }
        });
      }
    }

    // ==== Main Update Loop ====
    function updateGame() {
      if (!gameRunning) return;
      let dt = engine.getDeltaTime() / 1000; // in seconds (for timers, etc.)

      // Update power-ups timers
      updatePowerUps(dt);

      // Adjust the physics time step for slow motion if needed
      if (slowMoRemaining > 0) {
        scene.getPhysicsEngine().setTimeStep(baseTimeStep * SLOW_MO_FACTOR);
      } else {
        scene.getPhysicsEngine().setTimeStep(baseTimeStep);
      }

      // Instead of always pushing forward on the global Z axis, 
      // move the player in the direction the camera is looking (for proper steering).
      let oldVel = playerMesh.physicsImpostor.getLinearVelocity();
      let forward = scene.activeCamera.getDirection(BABYLON.Vector3.Forward());
      forward.normalize();
      let newVel = new BABYLON.Vector3(
        forward.x * FORWARD_SPEED,
        oldVel.y, // keep vertical velocity for gravity/up-impulse
        forward.z * FORWARD_SPEED
      );
      playerMesh.physicsImpostor.setLinearVelocity(newVel);

      // Distance-based scoring (based on z-position or overall movement)
      // We'll use the actual player's z-position for scoring.
      let currentZ = playerMesh.position.z;
      if (currentZ > lastZ) {
        let dist = (currentZ - lastZ);
        score += dist * 10 * scoreMultiplier;
        lastZ = currentZ;
      }
      scoreDisplay.innerText = "Score: " + Math.floor(score);

      // === Manual check for tunnel boundary collision (to ensure we don't slip through) ===
      checkTunnelBoundary();

      if (playerMesh.position.z > TUNNEL_LENGTH) {
        gameOver();
      }

      // Auto-fire handling
      if (autoFireRemaining > 0) {
        let now = performance.now() / 1000;
        if (now > nextAutoFireTime) {
          createProjectile();
          nextAutoFireTime = now + AUTO_FIRE_INTERVAL;
        }
      }

      // Cleanup projectiles that have gone past the tunnel
      projectiles = projectiles.filter(proj => {
        if (!proj.isVisible) return false;
        if (proj.position.z > TUNNEL_LENGTH + 50) {
          proj.dispose();
          return false;
        }
        return true;
      });

      // Update ghost replay
      if (ghostMesh && storedGhostPositions.length > 0 ) {
        let i = Math.floor(ghostIndex / ghostRecordFrameSkip);
        if (i < storedGhostPositions.length) {
          let posArray = storedGhostPositions[i];
          ghostMesh.position.x = posArray[0];
          ghostMesh.position.y = posArray[1];
          ghostMesh.position.z = posArray[2];
        }
        ghostIndex++;
      }

      // Record ghost position less frequently to avoid huge storage usage
      ghostFrameCounter++;
      if (ghostFrameCounter % ghostRecordFrameSkip === 0) {
        // Store as an array of [x,y,z] to reduce size
        ghostPositions.push([playerMesh.position.x, playerMesh.position.y, playerMesh.position.z]);
      }
    }

    // ==== Ensure player stays within tunnel ====
    function checkTunnelBoundary() {
      let zPos = playerMesh.position.z;
      let center2D = getCenterAtZ(zPos);
      let dx = playerMesh.position.x - center2D.x;
      let dy = playerMesh.position.y - center2D.y;
      let dist = Math.sqrt(dx*dx + dy*dy);
      let radius = getTunnelRadiusAtZ(zPos);

      // Player's sphere radius is 0.25 (half of 0.5 diameter)
      let playerRadius = 0.25;

      if (dist + playerRadius > radius) {
        if (gameRunning) {
          gameOver();
        }
      }
    }

    // ==== Update Power-Up Timers ====
    function updatePowerUps(dt) {
      // Slow-Mo timer
      if (slowMoRemaining > 0) {
        slowMoRemaining -= dt;
        if (slowMoRemaining < 0) {
          slowMoRemaining = 0;
        }
      }
      // Score Boost timer
      if (scoreBoostRemaining > 0) {
        scoreBoostRemaining -= dt;
        if (scoreBoostRemaining <= 0) {
          scoreBoostRemaining = 0;
          scoreMultiplier = 1.0;
        } else {
          scoreMultiplier = SCORE_BOOST_MULT;
        }
      }
      // Auto-Fire timer
      if (autoFireRemaining > 0) {
        autoFireRemaining -= dt;
        if (autoFireRemaining < 0) {
          autoFireRemaining = 0;
        }
      }
    }

    // ==== Ghost Run Initialization ====
    function initGhostRun() {
      // See if there's stored ghost data for this seed
      let savedData = getLocalData("ghostPositions_" + seed);
      if (savedData) {
        let runPositions = Array.isArray(savedData) ? savedData : savedData.positions;
        if (runPositions && runPositions.length > 0) {
          storedGhostPositions = runPositions.slice(); // copy

          // Skip some frames at the start so the ghost starts visibly ahead (optional)
          let framesToSkip = 60/ghostRecordFrameSkip;
          if (storedGhostPositions.length > framesToSkip) {
            storedGhostPositions.splice(0, framesToSkip);
          }

          // Create ghost mesh
          ghostMesh = BABYLON.MeshBuilder.CreateSphere("ghostMesh", { diameter: 0.5 }, scene);
          ghostMesh.position = new BABYLON.Vector3(0, 0, 0);
          let ghostMat = new BABYLON.StandardMaterial("ghostMat", scene);
          ghostMat.diffuseColor = new BABYLON.Color3(1, 1, 1);
          ghostMat.alpha = 0.3; // semi-transparent
          ghostMesh.material = ghostMat;
        }
      }
    }

    // ==== Store Ghost Run ====
    function storeGhostRun() {
      // We'll store ghost positions if we traveled some distance
      if (playerMesh && playerMesh.position.z > 0) {
        // Prepare new run data (storing final score as well)
        let newRunData = {
          positions: ghostPositions,
          finalScore: score
        };

        let oldData = getLocalData("ghostPositions_" + seed);
        if (oldData) {
          let oldScore = 0;
          // If old format is just an array, there's no oldScore to compare; treat that as 0.
          if (!Array.isArray(oldData)) {
            oldScore = oldData.finalScore || 0;
          }
          // Now store the new run if this run's final score is higher than the old run's final score.
          if (score > oldScore) {
            setLocalData("ghostPositions_" + seed, newRunData);
          }
        } else {
          // No old data, store new data if possible
          setLocalData("ghostPositions_" + seed, newRunData);
        }
      }
    }

    // ==== Game Over ====
    function gameOver() {
      gameRunning = false;
      engine.stopRenderLoop();

      // Store ghost run (now based on final score, not just distance)
      storeGhostRun();

      // Check if there's a best score for this seed to display next to the final score
      let bestScorePart = "";
      let oldData = getLocalData("ghostPositions_" + seed);
      if (oldData) {
        let oldRun = null;
        if (!Array.isArray(oldData)) {
          oldRun = oldData;
        }
        if (oldRun && oldRun.finalScore) {
          bestScorePart = ` (vs Best Run: ${Math.floor(oldRun.finalScore)})`;
        }
      }

      finalStatsDiv.innerHTML = `
        <p>Final Score: ${Math.floor(score)}${bestScorePart}</p>
        <p>Distance Traveled: ${playerMesh.position.z.toFixed(2)}</p>
        <p>Number of Obstacles Destroyed: ${obstaclesDestroyed}</p>
        <p>Number of Power-Ups Collected: ${powerUpsCollected}</p>
      `;

      gameOverDiv.style.display = "block";
    }

    // ==== Create and Run Scene ====
    scene = createScene();
    scene.registerBeforeRender(updateGame);

    engine.runRenderLoop(() => {
      if (scene) {
        scene.render();
      }
    });

    // Handle resizing
    window.addEventListener("resize", () => {
      engine.resize();
    });

    // Set the current seed in the input field for easy viewing/editing
    seedInput.value = new URLSearchParams(window.location.search).get("seed") || seed;

    // Restart button => reload
    restartBtn.addEventListener("click", () => {
      location.reload();
    });

    // Set new seed button
    setSeedBtn.addEventListener("click", () => {
      let newSeed = parseInt(seedInput.value);
      if (!isNaN(newSeed)) {
        window.location.href = window.location.pathname + "?seed=" + newSeed;
      }
    });

    // Share button => uses the native share functionality (if available)
    shareBtn.addEventListener("click", () => {
      if (navigator.share) {
        navigator.share({
          title: "Open 3D SFCave",
          url: window.location.href
        }).catch(console.error);
      } else {
        alert(
          "Sharing not supported by your browser.\n" +
          "Copy this link instead:\n" +
          window.location.href
        );
      }
    });
  </script>
</body>
</html>