hey ADD it so in sandbox mode in settings u can switch a button to Level 1 entienies 2 3 or 4 or 5 and a on a off button is it does SpawnEndlessmode enemies normally just with a switch on to which to spawn please. and when its turned off it stops spawning them. full snadbox html script snippet please and make the function for what I said and make the fun functions button have css


<div id="sandbox-gui" style="position:fixed;top:50px;right:20px;width:520px;height:600px;background:rgba(0,0,0,0.95);color:#0ff;border:2px solid cyan;box-sizing:border-box;z-index:9999;display:flex;flex-direction:column;font-family: monospace;">
  <div id="sandbox-header" style="background:#004;padding:6px;cursor:move;display:flex;justify-content:space-between;align-items:center;">
    <span>Sandbox Mode</span>
    <button id="sandbox-minimize-btn" style="background:#006;color:#0ff;border:none;padding:4px 10px;cursor:pointer;">_</button>
  </div>
  <div id="sandbox-tabs-container" style="flex-grow:1;display:flex;flex-direction:column;overflow:hidden;">
    <!-- Tab buttons -->
    <div id="sandbox-tabs" style="display:flex;gap:10px;background:#003;padding:6px;border-bottom:1px solid cyan;">
      <button class="sandbox-tab-btn active" data-tab="all-elements" style="background:none;color:#0ff;border:none;cursor:pointer;">All Elements</button>
      <button class="sandbox-tab-btn" data-tab="character-modifiers" style="background:none;color:#0ff;border:none;cursor:pointer;">Character Modifiers</button>
      <button class="sandbox-tab-btn" data-tab="fun" style="background:none;color:#0ff;border:none;cursor:pointer;">Fun</button>
      <button class="sandbox-tab-btn" data-tab="map-modifier" style="background:none;color:#0ff;border:none;cursor:pointer;">Map Modifier</button>
      <button class="sandbox-tab-btn" data-tab="settings" style="background:none;color:#0ff;border:none;cursor:pointer;">Settings</button>
    </div>
    <!-- Tab contents -->
    <div id="sandbox-tab-contents" style="flex-grow:1;overflow:auto;padding:10px;">
      <!-- All Elements Tab -->
      <div id="tab-all-elements" class="sandbox-tab-content active" style="display:block;">
        <input id="element-search" placeholder="Search elements..." type="text" style="width:100%;padding:6px;margin-bottom:8px;color:#000;" />
        <div id="element-list" style="max-height:280px;overflow-y:auto;border:1px solid #0ff;padding:6px;background:#111;"></div>
        <div style="margin-top:8px;display:flex;justify-content:center;gap:10px;">
          <button id="element-prev" class="btn" style="background:#006;color:#0ff;border:none;padding:6px 14px;cursor:pointer;">&laquo; Prev</button>
          <span id="element-page-info" style="align-self:center;"></span>
          <button id="element-next" class="btn" style="background:#006;color:#0ff;border:none;padding:6px 14px;cursor:pointer;">Next &raquo;</button>
        </div>
        <hr style="margin:8px 0;border:1px solid #0ff;" />
        <div id="element-preview-container" style="display:flex;gap:10px;">
          <div id="element-preview" style="flex:1;min-height:130px;border:1px solid #0ff;background:#112;display:flex;justify-content:center;align-items:center;position:relative;color:#0ff;">
            <em>Select element to preview</em>
          </div>
          <div style="flex-shrink:0; display:flex; flex-direction: column; gap: 6px;">
            <button id="spawn-element-btn" style="background:#00a;color:#0ff;border:none;padding:10px 18px;cursor:pointer;" disabled>Spawn</button>

            <label for="spawn-offset-slider" style="margin-top:8px; font-size:12px; color:#0ff; user-select:none;">Spawn Distance Offset: <span id="spawn-offset-value">200</span> px</label>
            <input id="spawn-offset-slider" type="range" min="0" max="2000" step="10" value="600" style="width:200px;" />

            <div style="margin-top:6px; display:flex; gap:6px;">
              <button id="undo-spawn-btn" style="flex:1; background:#660;color:#fff; border:none; padding:8px; cursor:pointer;" disabled>Undo</button>
              <button id="redo-spawn-btn" style="flex:1; background:#066;color:#0ff; border:none; padding:8px; cursor:pointer;" disabled>Redo</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Character Modifiers Tab -->
      <div id="tab-character-modifiers" class="sandbox-tab-content" style="display:none; color:#0ff;">
        <div>
          <label>Player Color: </label>
          <input type="color" id="player-color-picker" value="#4CAF50" />
        </div>
        <div style="margin-top:12px;">
          <label>Gravity (normal=0.5): </label>
          <input type="range" id="gravity-slider" min="-1" max="1" step="0.05" value="0.5" style="width:100%;" />
          <div id="gravity-value" style="text-align:right;">0.50</div>
        </div>
        <div style="margin-top:12px;">
          <label>Player Speed: </label>
          <input type="range" id="player-speed-slider" min="1" max="15" step="0.1" value="5" style="width:100%;" />
          <div id="player-speed-value" style="text-align:right;">5.00</div>
        </div>
        <div style="margin-top:12px;">
          <label>Bullet Speed: </label>
          <input type="range" id="bullet-speed-slider" min="1" max="20" step="0.1" value="5" style="width:100%;" />
          <div id="bullet-speed-value" style="text-align:right;">5.00</div>
        </div>
      </div>
      <!-- Fun Tab -->
<div id="tab-fun" class="sandbox-tab-content" style="display:none; color:#0ff;">

  <h3>Fun Functions</h3>
  <input 
    id="fun-functions-search" 
    type="search" 
    placeholder="Search fun functions..." 
    style="width: 100%; margin-bottom: 12px; padding: 6px; font-size: 14px;"
    autocomplete="off"
  />
  <div id="fun-functions-list" style="display:flex; flex-direction: column; gap: 10px;"></div>
  <div id="fun-cooldown-message" style="margin-top:10px; font-style: italic;"></div>
</div>
      <!-- Map Modifier Tab -->
      <div id="tab-map-modifier" class="sandbox-tab-content" style="display:none; color:#0ff;">
        <div>
          <label>Background Color: </label>
          <input type="color" id="background-color-picker" value="#333333" />
        </div>
        <div style="margin-top:12px;">
          <label><input type="checkbox" id="toggle-platforms" checked /> Platforms Visible</label><br/>
          <label><input type="checkbox" id="toggle-obstacles" checked /> Obstacles Visible</label><br/>
          <label><input type="checkbox" id="toggle-enemies" checked /> Enemies Visible</label><br/>
          <label><input type="checkbox" id="toggle-powerups" checked /> Power-Ups Visible</label><br/>
          <label><input type="checkbox" id="toggle-coins" checked /> Coins Visible</label><br/>
        </div>
      </div>
      <!-- Settings Tab -->
      <div id="tab-settings" class="sandbox-tab-content" style="display:none; color:#0ff;">
        <div>
          <label><input type="checkbox" id="experiment-mode-checkbox" /> Enable Experiment Mode (Freeze enemies + Move)</label>
        </div>
        <div id="experiment-controls" style="margin-top:10px; display:none; border:1px solid #0ff; padding:8px;">
          <p>Experiment Mode Controls:</p>
          <div><button id="unfreeze-enemies-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Unfreeze All Enemies</button></div>
          <p style="margin-top:8px;">Select an enemy in Map Modifier tab to move it:</p>
          <div style="display:flex;gap:6px;flex-wrap:wrap">
            <button data-dir="up" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Up</button>
            <button data-dir="down" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Down</button>
            <button data-dir="left" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Left</button>
            <button data-dir="right" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Right</button>
          </div>
          <div style="margin-top:6px;">
            <em>Selected Enemy: <span id="selected-enemy-info">None</span></em>
          </div>
        </div>
        <hr />
        <div>
          <label><input type="checkbox" id="enable-logs-checkbox" /> Enable View Logs (Toggle draggable logs window)</label>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- Logs window -->
<div id="logs-window" style="position:fixed; top:680px; right:20px; width:400px; max-height:200px; background:rgba(0,0,0,0.85); border:2px solid cyan; overflow:auto; padding:8px; font-family: monospace; font-size:12px; color:#0ff; z-index:10000; display:none; cursor:move;">
  <b>Logs</b>
  <button id="clear-logs-btn" style="float:right;background:#006; color:#0ff; border:none; cursor:pointer;">Clear</button>
  <pre id="logs-content" style="white-space:pre-wrap;"></pre>
</div>


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Adventure Game</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
 
        #game-container {
            position: relative;
            width: 800px;
            height: 400px;
            background-color: #333;
            overflow: hidden;
            border: 2px solid #444;
        }


        #upgrades-menu {
            display: none;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }

        #upgrade-list {
            margin: 20px 0;
        }

        .upgrade-option {
            margin: 10px 0;
            font-size: 18px;
        }

#start-menu, #game-mode-options, #level-options {
    display: none; /* Initially hidden */
    text-align: center; /* Center text for buttons */
    position: absolute; /* Positioned relative to parent */
    top: 50%; /* Start middle of vertical view */
    left: 50%; /* Start middle of horizontal view */
    transform: translate(-50%, -50%); /* Center it */
    z-index: 10; /* Bring to the front */
}

        .button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #555;
            color: #fff;
            border: none;
            border-radius: 5px;
        }

        .navigation-button {
            margin: 5px;
        }

.split-enemy.split {
    border-radius: 0 !important;
}

.boost-drainer-chain {
  position: absolute;
  border-top: 2px dotted cyan;
  pointer-events: none;
  z-index: 1000;
  height: 0; /* Since it's a horizontal line rotated, height is zero */
}


.boost-drainer {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid cyan;
  background-color: green; /* start at green */
  transition: background-color 0.5s;
  z-index: 20;
}

.boost-drainer.green { background-color: green !important; }
.boost-drainer.yellow { background-color: yellow !important; }
.boost-drainer.red { background-color: red !important; }

.boost-laser {
  position: absolute;
  width: 5px;
  height: 120px; /* height of laser, adjust */
  background-color: red;
  top: 0; /* will be positioned at bottom 0 */
  box-shadow: 0 0 10px red;
  z-index: 19;
  pointer-events: none; /* no interference with input */
}

.split-enemy:not(.split) {
    border-radius: 0 !important; /* Make mini splitters squares */
}

.split-enemy:not(.split) {
    border-radius: 0 !important;
}
 
#game-world {
    position: absolute;
    width: 10000px; /* bigger world - adjust as you wish */
    height: 100%;
    transition: transform 0.1s linear;
}
 
        #player {
            position: absolute;
            bottom: 0;
            left: 50px;
            width: 30px;
            height: 30px;
            background-color: #4CAF50;
            animation: idle 1s infinite alternate;
        }
 
        @keyframes idle {
            from { transform: translateY(0); }
            to { transform: translateY(2px); }
        }
 
@keyframes charging-prep {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.6); }
    50% { box-shadow: 0 0 15px rgba(255, 0, 0, 1); }
}

#sandbox-panel {
    border: 2px solid cyan !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
}
 
@keyframes boss-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-5px, 0); }
    50% { transform: translate(5px, 0); }
    75% { transform: translate(-5px, 0); }
}
 
 
@keyframes charge-trail {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}
 
@keyframes boss-shield-glow {
    0%, 100% { box-shadow: 0 0 10px red; }
    50% { box-shadow: 0 0 20px red; }
}
 
        .character, .boss-door, .power-up, .enemy, .virus-drone, .laser-enemy, .obstacle, .bullet, .burst, .boss, #friend, .coin, .flying-enemy, .charging-enemy, .stealth-enemy, .split-enemy, .boost-drainer, .sniper-enemy, .reflective-enemy, .explosive-enemy, .teleporter-enemy, .mourning-enemy, .velocity-enemy, .sticky-enemy, .reflective-enemy {
            position: absolute;
        }
 
        .character, .king, .stealth-enemy, .split-enemy, .sniper-enemy, .reflective-enemy, .explosive-enemy,
        .teleporter-enemy, .mourning-enemy, .velocity-enemy, .sticky-enemy, .reflective-enemy {
            border-radius: 50%;
        }


.virus-drone {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: green;
    border: 3px solid red;
    border-radius: 5px;
    z-index: 11;
}

.infected {
    background-color: #00cc00 !important; // bright green
    filter: drop-shadow(0 0 5px lime);
    transition: background-color 0.3s;
}

.infected.shielded::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border: 2px solid cyan;
    border-radius: 5px;
    pointer-events: none;
    animation: shieldPulse 2s infinite;
}

@keyframes shieldPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.energy-blast {
    position: absolute;
    width: 200px; /* Diameter of the burst */
    height: 200px; /* Diameter of the burst */
    border-radius: 50%; /* Make it circular */
    border: 2px solid rgba(0, 255, 255, 0.8); /* Color and transparency */
    opacity: 0.5; /* Semi-transparent */
    animation: pulse 0.5s ease-out; /* Animation for the burst */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(2); /* Expand the burst for the visual effect */
        opacity: 0; /* Fade out */
    }
}
 
.charging-prep {
    animation: charging-prep 1s infinite alternate;
}

.outlined {
    border: 3px solid green; /* Change as necessary */
    box-shadow: 0 0 10px green; /* Add glow effect */
}
 
.boss-shielded {
    animation: boss-shield-glow 0.8s infinite alternate;
    border: 3px solid red;
}
 
.charging-active {
    box-shadow: 0 0 15px red, 0 0 30px red;
    border: 2px solid red;
}
 
.charge-trail {
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: rgba(255, 50, 50, 0.5);
    border-radius: 50%;
    opacity: 1;
    animation: charge-trail 0.4s ease-out;
}
 
.bullet-trail {
    position: absolute;
    width: 8px;
    height: 4px;
    background-color: rgba(255, 215, 0, 0.5);
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.laser-line {
    pointer-events: none; /* prevent interfering with input */
    z-index: 1000;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}
 

.infected.shielded::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border: 2px solid cyan;
    border-radius: 5px;
    pointer-events: none;
    animation: shieldPulse 2s infinite;
}

 
        .coin {
            width: 15px;
            height: 15px;
            background-color: #FFD700;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }
 
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
 
        .flying-enemy {
            width: 30px;
            height: 30px;
            background-color: #0099FF;
            border-radius: 50%;
            opacity: 0.9;
        }
 
        .charging-enemy {
            width: 40px;
            height: 40px;
            background-color: #FF5500;
            animation: charge 1s linear infinite alternate;
            border-radius: 50%;
        }
 
        .enemy {
            width: 25px;
            height: 25px;
            background-color: #FF5733;
        }

.laser-warning-line {
    position: absolute;
    width: 6px;
    background-color: yellow;
    opacity: 0.7;
    pointer-events: none;
    z-index: 9;
}

.laser-beam {
    position: absolute;
    width: 8px;
    background-color: red;
    opacity: 0.9;
    pointer-events: none;
    z-index: 10;
}

        .split-enemy {
            width: 35px;
            height: 35px;
            background-color: #FF5733;
        }

        .laser-enemy {
            width: 35px;
            height: 35px;
            background-color: #FF5733;
        }
 
        .obstacle {
            width: 30px;
            height: 30px;
            background-color: #f44336;
        }

.lava {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: red;
    z-index: 5;
    height: 0;
    transition: height 0.1s linear;
}
 
        .power-up {
            width: 20px;
            height: 20px;
        }
 
        .bullet {
            width: 10px;
            height: 5px;
            background-color: #FFD700;
        }
 
        .burst {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 69, 0, 0.7);
            animation: burst 0.5s ease-out;
        }
 
        @keyframes burst {
            from { transform: scale(0.5); opacity: 1; }
            to { transform: scale(1.5); opacity: 0; }
        }
 
        .boss-door {
            width: 30px;
            height: 60px;
            background-color: #FFFF00;
        }
 
        .burst {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 69, 0, 0.7);
            animation: burst 0.5s ease-out;
        }   
 
        .boss {
            width: 60px;
            height: 60px;
            background-color: #FF4500;
        }


.reflective-enemy {
    width: 25px;
    height: 25px;
    background-color: #FF5733;
    border: 3px solid transparent; /* Initial border */
    box-shadow: 0 0 10px green; /* Glow effect */
}

        .mourning-enemy {
            width: 25px;
            height: 25px;
            background-color: #FF3333;
        }

        .sniper-enemy {
            width: 25px;
            height: 25px;
            background-color: #FF3333;
        }


 
        #score, #lives, #level, #timer, #shop-score {
            position: absolute;
            top: 10px;
            font-size: 16px;
        }


 
 
 
        #score { left: 10px; }
        #lives { right: 10px; }
        #level { left: 150px; }
        #timer { left: 250px; }
        #shop-score { left: 350px; }
 
        #instructions, #cutscene, #level-intro, #level-intro, #boss-fight, #boss-hallway, #game-over, #interact-message {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            flex-direction: column;
            font-size: 18px;
            z-index: 10;
        }

  #sandbox-gui .btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  #sandbox-gui input[type="range"] {
    -webkit-appearance: none; width: 100%; background: #004;
  }
  #sandbox-gui input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 16px; width: 16px; background: #0ff; cursor: pointer; border-radius: 50%;
  }
 
        #instructions button, #cutscene button, #level-intro button, #level-intro2 button, #boss-fight button, #game-over button, #boss-hallway button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #555;
            color: #fff;
        }
 
        #cutscene, #level-intro, #level-intro2, #boss-fight, #boss-hallway, #game-over, #interact-message {
            display: none;
        }

#element-sample > div {
    margin: auto;
    transform-origin: center center;
}
 
        #intro {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            flex-direction: row;
            font-size: 18px;
            z-index: 11;
        }
 
#boss-health-bar {
    display: none; /* Initially hidden */
    position: absolute;
    top: 10px; /* Adjust based on your UI */
    left: 50%; /* Center it horizontally or adjust as needed */
    transform: translateX(-50%); /* Center alignment */
    width: 150px; /* Set fixed maximum width for the health bar */
    height: 20px; /* Height of the bar */
    background-color: #666; /* Background bar color */
    border: 1px solid #333; /* Border style */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow */
    transition: width 0.5s ease; /* Smooth transition */
}

#boss-health {
    height: 100%;
    background-color: green; /* Initial health segment color */
    border-radius: 5px; /* Rounded corners for inner health */
}
 
        #friend {
            width: 30px;
            height: 30px;
            background-color: #00FF00;
            display: none;
        }
 
        #power-up-message {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            z-index: 12;
            display: none;
        }
 
        /* New CSS for cool features */
        @keyframes flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
 
        .flashing {
            animation: flash 0.5s infinite;
        }
 
        .glow {
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="game-world">
            <div id="player"></div>
        </div>
<div id="upgrades-menu" style="display:none;">
    <h2>Upgrades</h2>
    <button onclick="previousUpgrade()" class="button">Previous</button>
    <div id="upgrade-list"></div>
    <button onclick="nextUpgrade()" class="button">Next</button>
    <button onclick="buyUpgrade()" class="button">Buy Upgrade</button>
    <button onclick="viewEquippedUpgrades()" class="button">View Equipped</button> <!-- New button -->
    <button onclick="closeUpgrades()" class="button">Close</button>
    <div id="message" style="color: red;"></div>
</div>

<div id="sandbox-gui" style="position:fixed;top:50px;right:20px;width:520px;height:600px;background:rgba(0,0,0,0.95);color:#0ff;border:2px solid cyan;box-sizing:border-box;z-index:9999;display:flex;flex-direction:column;font-family: monospace;">
  <div id="sandbox-header" style="background:#004;padding:6px;cursor:move;display:flex;justify-content:space-between;align-items:center;">
    <span>Sandbox Mode</span>
    <button id="sandbox-minimize-btn" style="background:#006;color:#0ff;border:none;padding:4px 10px;cursor:pointer;">_</button>
  </div>
  <div id="sandbox-tabs-container" style="flex-grow:1;display:flex;flex-direction:column;overflow:hidden;">
    <!-- Tab buttons -->
    <div id="sandbox-tabs" style="display:flex;gap:10px;background:#003;padding:6px;border-bottom:1px solid cyan;">
      <button class="sandbox-tab-btn active" data-tab="all-elements" style="background:none;color:#0ff;border:none;cursor:pointer;">All Elements</button>
      <button class="sandbox-tab-btn" data-tab="character-modifiers" style="background:none;color:#0ff;border:none;cursor:pointer;">Character Modifiers</button>
      <button class="sandbox-tab-btn" data-tab="fun" style="background:none;color:#0ff;border:none;cursor:pointer;">Fun</button>
      <button class="sandbox-tab-btn" data-tab="map-modifier" style="background:none;color:#0ff;border:none;cursor:pointer;">Map Modifier</button>
      <button class="sandbox-tab-btn" data-tab="settings" style="background:none;color:#0ff;border:none;cursor:pointer;">Settings</button>
    </div>
    <!-- Tab contents -->
    <div id="sandbox-tab-contents" style="flex-grow:1;overflow:auto;padding:10px;">
      <!-- All Elements Tab -->
      <div id="tab-all-elements" class="sandbox-tab-content active" style="display:block;">
        <input id="element-search" placeholder="Search elements..." type="text" style="width:100%;padding:6px;margin-bottom:8px;color:#000;" />
        <div id="element-list" style="max-height:280px;overflow-y:auto;border:1px solid #0ff;padding:6px;background:#111;"></div>
        <div style="margin-top:8px;display:flex;justify-content:center;gap:10px;">
          <button id="element-prev" class="btn" style="background:#006;color:#0ff;border:none;padding:6px 14px;cursor:pointer;">&laquo; Prev</button>
          <span id="element-page-info" style="align-self:center;"></span>
          <button id="element-next" class="btn" style="background:#006;color:#0ff;border:none;padding:6px 14px;cursor:pointer;">Next &raquo;</button>
        </div>
        <hr style="margin:8px 0;border:1px solid #0ff;" />
        <div id="element-preview-container" style="display:flex;gap:10px;">
          <div id="element-preview" style="flex:1;min-height:130px;border:1px solid #0ff;background:#112;display:flex;justify-content:center;align-items:center;position:relative;color:#0ff;">
            <em>Select element to preview</em>
          </div>
          <div style="flex-shrink:0; display:flex; flex-direction: column; gap: 6px;">
            <button id="spawn-element-btn" style="background:#00a;color:#0ff;border:none;padding:10px 18px;cursor:pointer;" disabled>Spawn</button>

            <label for="spawn-offset-slider" style="margin-top:8px; font-size:12px; color:#0ff; user-select:none;">Spawn Distance Offset: <span id="spawn-offset-value">200</span> px</label>
            <input id="spawn-offset-slider" type="range" min="0" max="2000" step="10" value="600" style="width:200px;" />

            <div style="margin-top:6px; display:flex; gap:6px;">
              <button id="undo-spawn-btn" style="flex:1; background:#660;color:#fff; border:none; padding:8px; cursor:pointer;" disabled>Undo</button>
              <button id="redo-spawn-btn" style="flex:1; background:#066;color:#0ff; border:none; padding:8px; cursor:pointer;" disabled>Redo</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Character Modifiers Tab -->
      <div id="tab-character-modifiers" class="sandbox-tab-content" style="display:none; color:#0ff;">
        <div>
          <label>Player Color: </label>
          <input type="color" id="player-color-picker" value="#4CAF50" />
        </div>
        <div style="margin-top:12px;">
          <label>Gravity (normal=0.5): </label>
          <input type="range" id="gravity-slider" min="-1" max="1" step="0.05" value="0.5" style="width:100%;" />
          <div id="gravity-value" style="text-align:right;">0.50</div>
        </div>
        <div style="margin-top:12px;">
          <label>Player Speed: </label>
          <input type="range" id="player-speed-slider" min="1" max="15" step="0.1" value="5" style="width:100%;" />
          <div id="player-speed-value" style="text-align:right;">5.00</div>
        </div>
        <div style="margin-top:12px;">
          <label>Bullet Speed: </label>
          <input type="range" id="bullet-speed-slider" min="1" max="20" step="0.1" value="5" style="width:100%;" />
          <div id="bullet-speed-value" style="text-align:right;">5.00</div>
        </div>
      </div>
      <!-- Fun Tab -->
<div id="tab-fun" class="sandbox-tab-content" style="display:none; color:#0ff;">

  <h3>Fun Functions</h3>
  <input 
    id="fun-functions-search" 
    type="search" 
    placeholder="Search fun functions..." 
    style="width: 100%; margin-bottom: 12px; padding: 6px; font-size: 14px;"
    autocomplete="off"
  />
  <div id="fun-functions-list" style="display:flex; flex-direction: column; gap: 10px;"></div>
  <div id="fun-cooldown-message" style="margin-top:10px; font-style: italic;"></div>
</div>
      <!-- Map Modifier Tab -->
      <div id="tab-map-modifier" class="sandbox-tab-content" style="display:none; color:#0ff;">
        <div>
          <label>Background Color: </label>
          <input type="color" id="background-color-picker" value="#333333" />
        </div>
        <div style="margin-top:12px;">
          <label><input type="checkbox" id="toggle-platforms" checked /> Platforms Visible</label><br/>
          <label><input type="checkbox" id="toggle-obstacles" checked /> Obstacles Visible</label><br/>
          <label><input type="checkbox" id="toggle-enemies" checked /> Enemies Visible</label><br/>
          <label><input type="checkbox" id="toggle-powerups" checked /> Power-Ups Visible</label><br/>
          <label><input type="checkbox" id="toggle-coins" checked /> Coins Visible</label><br/>
        </div>
      </div>
      <!-- Settings Tab -->
      <div id="tab-settings" class="sandbox-tab-content" style="display:none; color:#0ff;">
        <div>
          <label><input type="checkbox" id="experiment-mode-checkbox" /> Enable Experiment Mode (Freeze enemies + Move)</label>
        </div>
        <div id="experiment-controls" style="margin-top:10px; display:none; border:1px solid #0ff; padding:8px;">
          <p>Experiment Mode Controls:</p>
          <div><button id="unfreeze-enemies-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Unfreeze All Enemies</button></div>
          <p style="margin-top:8px;">Select an enemy in Map Modifier tab to move it:</p>
          <div style="display:flex;gap:6px;flex-wrap:wrap">
            <button data-dir="up" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Up</button>
            <button data-dir="down" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Down</button>
            <button data-dir="left" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Left</button>
            <button data-dir="right" class="enemy-move-btn" style="background:#006;color:#0ff;border:none;padding:6px 12px;cursor:pointer;">Right</button>
          </div>
          <div style="margin-top:6px;">
            <em>Selected Enemy: <span id="selected-enemy-info">None</span></em>
          </div>
        </div>
        <hr />
        <div>
          <label><input type="checkbox" id="enable-logs-checkbox" /> Enable View Logs (Toggle draggable logs window)</label>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- Logs window -->
<div id="logs-window" style="position:fixed; top:680px; right:20px; width:400px; max-height:200px; background:rgba(0,0,0,0.85); border:2px solid cyan; overflow:auto; padding:8px; font-family: monospace; font-size:12px; color:#0ff; z-index:10000; display:none; cursor:move;">
  <b>Logs</b>
  <button id="clear-logs-btn" style="float:right;background:#006; color:#0ff; border:none; cursor:pointer;">Clear</button>
  <pre id="logs-content" style="white-space:pre-wrap;"></pre>
</div>

        <div id="score">Score: 0</div>
        <div id="shop-score">Shop Score: 0</div>
        <div id="lives">Lives: 3</div>
        <div id="level">Level: 1</div>
        <div id="timer">Timer: 0</div>
        <div id="instructions">
            <p>Press Arrow Up to Jump</p>
            <p>Use Arrow Left/Right to Move</p>
            <p>Press Space to Shoot</p>
            <p>Press Z for Power-Up</p>
            <p>Press E to interact</p>
            <button onclick="showGameModeOptions()">Start Game</button> <!-- Start Game Button -->
            <button onclick="togglePause()">Pause/Resume</button>
            <button onclick="openUpgrades()">Open Upgrades</button>
        </div>
        <div id="cutscene">
            <p>Get ready for the next level!</p>
            <button onclick="continueGame()">Continue</button>
        </div>
    <div id="equipped-upgrades" style="display: none;"> <!-- Initially hidden -->
        <h3>Equipped Upgrades:</h3>
        <!-- Equipped upgrades will be displayed here -->
    </div>
<div id="game-mode-options" style="display: none;"> 
    <button onclick="startGamee()" class="button">Story Mode</button>
    <button id="endless-mode-btn" onclick="showLevelOptions()" class="button" style="display: none;">Endless Mode</button>
    <button id="sandbox-mode-btn" onclick="startSandboxMode()" class="button" style="display: none;">Sandbox Mode</button>
</div>
    <div id="level-options" style="display: none;"> 
        <button onclick="startEndlessMode(1)" class="button" >Level 1</button> <!-- Level 1 Button -->
        <button onclick="startEndlessMode(2)" class="button">Level 2</button> <!-- Level 2 Button -->
        <button onclick="startEndlessMode(3)" class="button">Level 3</button> <!-- Level 3 Button -->
        <button onclick="startEndlessMode(4)" class="button">Level 4</button> <!-- Level 4 Button -->
        <button onclick="startEndlessMode(5)" class="button">Level 5</button> <!-- Level 4 Button -->

    </div>

    </div>
        <div id="level-intro">
            <p id="level-text">Get Ready for Adventure!</p>
            <button onclick="startLevel()">Start Level</button>
        </div>
       <div id="level-intro2">
            <p id="level-text">Get Ready for Adventure!</p>
            <button onclick="restartGame()">Start Endless mode</button>
        </div>
        <div id="boss-fight">
            <p>Defeat the Boss!</p>
        </div>
        <div id="game-over">
            <p>Game Over!</p>
            <button onclick="restartGame()">Restart</button>
        </div>
        <div id="boss-hallway">
            <p>You have entered the boss hallway! Prepare yourself!</p>
            <button onclick="startBossFight()">Proceed</button>
        </div>
        <div id="boss-health-bar">
            <div id="boss-health"></div>
        </div>
        <div id="power-up-message"></div>
        <div id="interact-message"></div>
        <div id="friend"></div>
    </div>
 
    <script>
            const gameContainer = document.getElementById('game-container');
            const gameWorld = document.getElementById('game-world');
            const player = document.getElementById('player');
            const scoreDisplay = document.getElementById('score');
            const maxUpgrades = 5; // Maximum number of upgrades you can equip
            const livesDisplay = document.getElementById('lives');
            const levelDisplay = document.getElementById('level');
            const timerDisplay = document.getElementById('timer');
            const instructions = document.getElementById('instructions');
const funTabBtn = document.querySelector('.sandbox-tab-btn[data-tab="fun"]');
const funTabContent = document.getElementById('tab-fun');
  let experimentModeEnabled = false;
  let frozenEnemyPositions = new Map();
  let selectedEnemy = null;
            const cutscene = document.getElementById('cutscene');
            const levelIntro = document.getElementById('level-intro');
            const levelText = document.getElementById('level-text2');
            const levelIntro2 = document.getElementById('level-intro2');
            const levelText2 = document.getElementById('level-text');
const spawnOffsetSlider = document.getElementById('spawn-offset-slider');
const spawnOffsetValueDisplay = document.getElementById('spawn-offset-value');
const spawnBtn = document.getElementById('spawn-element-btn');
const undoBtn = document.getElementById('undo-spawn-btn');
const redoBtn = document.getElementById('redo-spawn-btn');
const funSearchInput = document.getElementById('fun-functions-search');
const funFunctionsListDiv = document.getElementById('fun-functions-list');
            const bossFightScreen = document.getElementById('boss-fight');
            const gameOverScreen = document.getElementById('game-over');
let spawnOffset = parseInt(spawnOffsetSlider.value, 10);

// Undo/Redo stacks for spawned elements
const spawnedElementsStack = [];
const redoStack = [];
            const intro = document.getElementById('intro');
            const dialoguePara = document.querySelector('#dialogue p');
const upgradesPerPage = 1; // Number of upgrades to show per page
            const bossHallway = document.getElementById('boss-hallway');
            const bossHealthBar = document.getElementById('boss-health-bar');
            const bossHealthDisplay = document.getElementById('boss-health');
            let currentPage = 0; // Tracks current page
let currentGameMode; // Temporary variable to store the current game mode

let currentEndlessLevel = localStorage.getItem('endlessLevel') ? parseInt(localStorage.getItem('endlessLevel')) : 1; // Endless Mode Level Tracking
let storyModeLevel = localStorage.getItem('storyLevel') ? parseInt(localStorage.getItem('storyLevel')) : 1; // Story Mode Level Tracking
let isEndlessMode = false; // Track if currently in Endless Mode
            let bulletSpeed = 5; // Initialize bullet speed
// Other variables...
            let phaseStartTime = null; // Track the start time of the boss phase
            let playerScore = localStorage.getItem('playerScore') ? parseInt(localStorage.getItem('playerScore')) : 0;
            const powerUpMessage = document.getElementById('power-up-message');
            let upgradesEquipped = []; // Store equipped upgrades
            const viruses = [];

            const friend = document.getElementById('friend');
            const obstacleSpawnDistance = 500; // Distance before the right edge
            let playerPositionX = 50;
            let upgradesPurchased = [];
            let boostDrainer = null;
            let boostDrainerLaser = null;
            let boostDrainerHP = 3;
            let boostDrainerState = "moving"; // "moving", "green", "yellow", "red", "firing", "dead"
            let boostDrainerAttackTimeout = null;
            const boostDrainerAttackXOffset = 250; // how close to player it moves before attack
            const boostDrainerSpeed = 1.0; // pixels per frame
            let virusDroneHits = 0;  // tracks hits on Virus Drone
            let playerPositionY = 0;
            let playerVelocityX = 0;
            let objectSpawnDistance = 300; // Distance from the right edge to spawn new objects
            let playerVelocityY = 0;
            let removedEnemies = [];
            let phaseThreeStarted = false; // Flag to track if Phase Three has started
            let phaseThreeStarted1 = false; // Flag to track if Phase Three has started
            let phaseThreeStarted3 = false; // Flag to track if Phase Three has started
            let bossDefeatedMessageDisplayed = false; // Flag to track if the defeated message has been displayed
            let playerMaxSpeed = 5;
            const playerJumpStrength = 12;
            let jumpCount = 0;
            let maxJumps = 1;
            let isDoubleJumpEnabled = false;
            let isJumping = false;
            let isCycling = false;  // Lock to prevent concurrent calls
            let isPaused = false;
            let canShoot = true;
            let waveCooldown = false; // Track if a wave is on cooldown
            let bossAttacking = false;
            let bossAttackPhase = 0;
            let gameInterval;
            let obstacles = [];
            let enemies = [];
            const shownPreMessages = {};
            let bullets = [];
            let powerUps = [];
            let boostDrainerChain = null;
            let isTeleporting = false; // Track whether teleport is available
            let platforms = [];
            let bossDoors = [];
            let maxPlayerPositionX = 50;  // Track furthest progress
            let coins = [];
            let score = 0;
            let isInBossDoor = false;
            let lives = 3;
            let level = localStorage.getItem('playerLevel') ? parseInt(localStorage.getItem('playerLevel')) : 1;
            const gravity = 0.5;
            const maxLevels = 5;
            let movingLeft = false, movingRight = false;
            let currentDirection = 1;
            let currentPowerUp = null;
            let powerUpTimer = 0;
            let gameScrollPosition = 0;
            let maxGameScrollPosition = 0; // Holds furthest right camera scroll so far
            let leftBoundaryX = 0; // Moving left boundary for player position
            const bossScoreThreshold = 1;
            const dialogues = [
                "Player: Hey friend! What a nice day for an adventure!",
                "Friend: Indeed! Maybe we should explore the caves.",
                "Player: What's that over there? Is it the King?",
                "King: Haha, I've found you! You're coming with me!",
                "Friend: Player, help me!"
            ];
            let dialogueIndex = 0;
            let boss = null;
            let bossHealth = 100;
            let bossShielded = true;
            let bossPowerObtained = false;
            let bossFightActive = false;

  const gui = document.getElementById('sandbox-gui');
  const header = document.getElementById('sandbox-header');
  const minimizeBtn = document.getElementById('sandbox-minimize-btn');
  
  // Tabs
  const tabButtons = gui.querySelectorAll('.sandbox-tab-btn');
  const tabContents = gui.querySelectorAll('.sandbox-tab-content');
  
  // All Elements tab vars
  let allCssClasses = [];
  let filteredClasses = [];
  let currentElementPage = 0;
  const elementsPerPage = 5;
  let selectedElementClass = null;

  // References to tab elements under all elements tab
  const elementListDiv = document.getElementById('element-list');
  const searchInput = document.getElementById('element-search');
  const prevBtn = document.getElementById('element-prev');
  const nextBtn = document.getElementById('element-next');
  const pageInfoSpan = document.getElementById('element-page-info');
  const previewContainer = document.getElementById('element-preview');
  const spawnElementBtn = document.getElementById('spawn-element-btn');

  // Character Modifiers tab elements
  const playerColorInput = document.getElementById('player-color-picker');
  const gravitySlider = document.getElementById('gravity-slider');
  const gravityValue = document.getElementById('gravity-value');
  const playerSpeedSlider = document.getElementById('player-speed-slider');
  const playerSpeedValue = document.getElementById('player-speed-value');
let lastFunCallTime = 0;
const funCooldownSecs = 1;
  const bulletSpeedSlider = document.getElementById('bullet-speed-slider');
  const bulletSpeedValue = document.getElementById('bullet-speed-value');

  // Map Modifier tab
  const bgColorInput = document.getElementById('background-color-picker');
  const togglePlatforms = document.getElementById('toggle-platforms');
  const toggleObstacles = document.getElementById('toggle-obstacles');
  const toggleEnemies = document.getElementById('toggle-enemies');
  const togglePowerups = document.getElementById('toggle-powerups');
  const toggleCoins = document.getElementById('toggle-coins');

  // Settings tab
  const experimentModeCheckbox = document.getElementById('experiment-mode-checkbox');
  const experimentControls = document.getElementById('experiment-controls');
  const unfreezeEnemiesBtn = document.getElementById('unfreeze-enemies-btn');
  const enemyMoveButtons = experimentControls.querySelectorAll('.enemy-move-btn');
  const selectedEnemyInfoSpan = document.getElementById('selected-enemy-info');
  const enableLogsCheckbox = document.getElementById('enable-logs-checkbox');

  // Logs window elements
  const logsWindow = document.getElementById('logs-window');
  const logsContent = document.getElementById('logs-content');
  const clearLogsBtn = document.getElementById('clear-logs-btn');

  let isMinimized = false;

  // For dragging
  let dragOffsetX = 0, dragOffsetY = 0, isDragging = false;
  header.addEventListener('mousedown', e => {
    if (e.target === minimizeBtn) return;
    isDragging = true;
    const rect = gui.getBoundingClientRect();
    dragOffsetX = e.clientX - rect.left;
    dragOffsetY = e.clientY - rect.top;
    document.body.style.userSelect = 'none';
  });
  window.addEventListener('mouseup', () => {
    isDragging = false;
    document.body.style.userSelect = '';
  });
  window.addEventListener('mousemove', e => {
    if (isDragging) {
      let posX = e.clientX - dragOffsetX;
      let posY = e.clientY - dragOffsetY;

      // Clamp inside viewport
      posX = Math.min(Math.max(0, posX), window.innerWidth - gui.offsetWidth);
      posY = Math.min(Math.max(0, posY), window.innerHeight - gui.offsetHeight);

      gui.style.left = posX + 'px';
      gui.style.top = posY + 'px';
      gui.style.right = '';
      gui.style.bottom = '';
      gui.style.position = 'fixed';
    }
  });

  // Logs window drag
  let logDragOffsetX=0, logDragOffsetY=0, logIsDragging=false;
  logsWindow.addEventListener('mousedown', e => {
    if(e.target === clearLogsBtn) return;
    logIsDragging=true;
    const r = logsWindow.getBoundingClientRect();
    logDragOffsetX = e.clientX - r.left;
    logDragOffsetY = e.clientY - r.top;
    document.body.style.userSelect = 'none';
  });
  window.addEventListener('mouseup', () => {
    logIsDragging=false;
    document.body.style.userSelect = '';
  });
  window.addEventListener('mousemove', e => {
    if(logIsDragging){
      let lnX = e.clientX - logDragOffsetX;
      let lnY = e.clientY - logDragOffsetY;
      lnX = Math.min(Math.max(0, lnX), window.innerWidth - logsWindow.offsetWidth);
      lnY = Math.min(Math.max(0, lnY), window.innerHeight - logsWindow.offsetHeight);
      logsWindow.style.left = lnX + 'px';
      logsWindow.style.top = lnY + 'px';
      logsWindow.style.position = 'fixed';
      logsWindow.style.right = '';
      logsWindow.style.bottom = '';
    }
  });

  // Minimize toggle
  minimizeBtn.onclick = () => {
    isMinimized = !isMinimized;
    if (isMinimized) {
      gui.style.height = '40px';
      gui.querySelector('#sandbox-tabs-container').style.display = 'none';
      minimizeBtn.textContent = '❐';
    } else {
      gui.style.height = '600px';
      gui.querySelector('#sandbox-tabs-container').style.display = 'flex';
      minimizeBtn.textContent = '_';
    }
  };

  // Tab switching
  tabButtons.forEach(btn => {
    btn.addEventListener('click', e => {
      tabButtons.forEach(b => b.classList.remove('active'));
      tabContents.forEach(c => (c.style.display = 'none'));
      btn.classList.add('active');
      const targetTab = btn.dataset.tab;
      document.getElementById('tab-' + targetTab).style.display = 'block';
    });
  });

function initializeSandboxElements() {
  allCssClasses = extractAllCssClasses();

  // Add your known power-ups forcibly if missing
  allPowerUpTypes.forEach(pu => {
    if (!allCssClasses.includes(pu)) {
      allCssClasses.push(pu);
    }
  });

  allCssClasses.sort();
  filteredClasses = allCssClasses;

  currentElementPage = 0;
  selectedElementClass = null;
  spawnElementBtn.disabled = true;
  searchInput.value = '';
  previewContainer.innerHTML = '<em>Select element to preview</em>';

  displayElementList();
}

function enableEnemySelection() {
  enemies.forEach(enemy => {
    if (!enemy._selectionEnabled) {
      enemy.addEventListener('click', (e) => {
        e.stopPropagation();
        if (selectedEnemy) selectedEnemy.style.outline = '';
        selectedEnemy = enemy;
        selectedEnemy.style.outline = '2px solid magenta';
        selectedEnemyInfoSpan.textContent = `Class: ${selectedEnemy.className}`;
        log(`Selected enemy: ${selectedEnemy.className}`);
      });
      enemy._selectionEnabled = true;
    }
  });
}

gameWorld.addEventListener('click', () => {
  if (selectedEnemy) {
    selectedEnemy.style.outline = '';
    selectedEnemy = null;
    selectedEnemyInfoSpan.textContent = 'None';
    log('Deselected enemy.');
  }
});

  // --- All Elements Tab functions ---

  // Extract all CSS classes from embedded stylesheets
  const allPowerUpTypes = [
    "super-speed", "invincibility", "teleportation",
    "reflective-shield", "double-shot", "extra-life",
    "score-boost", "mega-jump", "energy-blast", "light-speed",
    "blazing-trail", "sonic-wave", "armor", "telekinetic",
    "camouflage", "dimension-shift", "energy-drain", "mind-control",
    "hologram", "fire", "ice", "hypno"
  ];

  // Recursively process a list of CSSRules and add all classes found
function extractAllCssClasses() {
  const classesSet = new Set();


  function processRules(rules) {
    if (!rules) return;
    for (const rule of rules) {
      if (rule.type === CSSRule.STYLE_RULE) {
        if (rule.selectorText) {
          const selectors = rule.selectorText.split(/\s*,\s*/);
          for (const sel of selectors) {
            const classMatches = sel.match(/\.(?:[\w-]+)/g);
            if (classMatches) {
              classMatches.forEach(cls => {
                classesSet.add(cls.substring(1));
              });
            }
          }
        }
      } else if (
        rule.type === CSSRule.MEDIA_RULE ||
        rule.type === CSSRule.SUPPORTS_RULE ||
        rule.type === CSSRule.DOCUMENT_RULE
      ) {
        processRules(rule.cssRules);
      }
    }
  }

  for (const sheet of document.styleSheets) {
    try {
      if (!sheet.cssRules) continue;
      processRules(sheet.cssRules);
    } catch (e) {
      // Ignore inaccessible sheets
    }
  }
  // Add power-up types forcibly to ensure inclusion
  allPowerUpTypes.forEach(pu => classesSet.add(pu));

  return Array.from(classesSet).sort();
}

function displayElementList() {
  const start = currentElementPage * elementsPerPage;
  const end = start + elementsPerPage;
  const toShow = filteredClasses.slice(start, end);

  elementListDiv.innerHTML = '';
  if (toShow.length === 0) {
    elementListDiv.innerHTML = '<em>No elements found.</em>';
    spawnElementBtn.disabled = true;
    previewContainer.innerHTML = '<em>Select element to preview</em>';
    selectedElementClass = null;
    updatePageInfo();
    return;
  }

  toShow.forEach(cls => {
    const el = document.createElement('div');
    el.textContent = cls;
    el.style.padding = '6px';
    el.style.cursor = 'pointer';
    el.style.borderBottom = '1px solid #0ff';
    el.title = 'Click to preview and spawn';

    if (cls === selectedElementClass) {
      el.style.backgroundColor = '#066';
    }

    el.onclick = () => {
      selectedElementClass = cls;
      spawnElementBtn.disabled = false;
      displayElementList(); // refresh to highlight selection
      showElementPreview(cls);
    };

    elementListDiv.appendChild(el);
  });

  updatePageInfo();
}

funTabBtn.addEventListener('click', () => {
  // Deactivate all tabs and hide contents
  document.querySelectorAll('.sandbox-tab-btn').forEach(btn => btn.classList.remove('active'));
  document.querySelectorAll('.sandbox-tab-content').forEach(c => c.style.display = 'none');

  // Activate Fun tab and show content
  funTabBtn.classList.add('active');
  funTabContent.style.display = 'block';
});

// --- Define your fun functions here ---
const funFunctions = [
  // Your original 5 fun functions:
  {
    name: 'Grant Extra Life',
    description: 'Add one life to player.',
    func: () => {
      lives = Math.min(lives + 1, 99);
      updateDisplay();
      log('Extra life granted!');
    }
  },
  {
    name: 'Spawn Power-Up',
    description: 'Spawn a random power-up near the player.',
    func: () => {
      spawnPowerUp();
      log('Random power-up spawned!');
    }
  },
  {
    name: 'Freeze Enemies',
    description: 'Freeze all enemies for 5 seconds.',
    func: () => {
      enemies.forEach(enemy => {
        enemy.classList.add('frozen-enemy');
        enemy.style.opacity = '0.3';
      });
      log('Enemies frozen for 5 seconds.');
      setTimeout(() => {
        enemies.forEach(enemy => {
          enemy.classList.remove('frozen-enemy');
          enemy.style.opacity = '1';
        });
        log('Enemies unfrozen.');
      }, 5000);
    }
  },
  {
    name: 'Max Heal Player',
    description: 'Restore full lives (up to max).',
    func: () => {
      lives = 99;
      updateDisplay();
      log('Player healed to full lives!');
    }
  },
  {
    name: 'Shockwave',
    description: 'Destroy all enemies instantly.',
    func: () => {
      enemies.forEach(enemy => {
        enemy.remove();
      });
      enemies.length = 0;
      updateDisplay();
      log('Shockwave destroyed all enemies!');
    }
  },

  // 250+ Additional unique fun functions (ALL self-contained) --

  {
    name: 'Toggle Gravity',
    description: 'Invert gravity for 5 seconds.',
    func: () => {
      let gravityBackup = gravity;
      gravity = -gravityBackup;
      log('Gravity inverted!');
      setTimeout(() => {
        gravity = gravityBackup;
        log('Gravity restored!');
      }, 5000);
    }
  },
  {
    name: 'Create Player Clone',
    description: 'Spawn a clone of the player that lasts 5 seconds.',
    func: () => {
      const clone = document.createElement('div');
      clone.id = `clone-${Date.now()}`;
      clone.style.position = 'absolute';
      clone.style.width = player.offsetWidth + 'px';
      clone.style.height = player.offsetHeight + 'px';
      clone.style.backgroundColor = '#00f';
      clone.style.left = player.style.left;
      clone.style.bottom = player.style.bottom;
      clone.style.border = '2px dashed #fff';
      clone.style.opacity = '0.7';
      gameWorld.appendChild(clone);
      log('Player clone created!');
      setTimeout(() => {
        clone.remove();
      }, 5000);
    }
  },
  {
    name: 'Shrink Player',
    description: 'Reduce player size for 5 seconds.',
    func: () => {
      const originalTransform = player.style.transform || '';
      player.style.transform = 'scale(0.5)';
      log('Player shrunk!');
      setTimeout(() => {
        player.style.transform = originalTransform;
        log('Player size restored!');
      }, 5000);
    }
  },
  {
    name: 'Grow Player',
    description: 'Increase player size for 5 seconds.',
    func: () => {
      const originalTransform = player.style.transform || '';
      player.style.transform = 'scale(1.5)';
      log('Player grown!');
      setTimeout(() => {
        player.style.transform = originalTransform;
        log('Player size restored!');
      }, 5000);
    }
  },
  {
    name: 'Activate Shield',
    description: 'Activate shield: add purple border & +1 life.',
    func: () => {
      player.style.border = '3px solid purple';
      lives = Math.min(lives + 1, 99);
      updateDisplay();
      log('Shield activated! +1 life');
      setTimeout(() => {
        player.style.border = '';
        log('Shield expired!');
      }, 7000);
    }
  },
  {
    name: 'Boost Score',
    description: 'Add 100 points to score.',
    func: () => {
      score += 100;
      updateDisplay();
      log('Score boosted by 100!');
    }
  },
  {
    name: 'Heal Player',
    description: 'Heal player by 1 life.',
    func: () => {
      lives = Math.min(lives + 1, 99);
      updateDisplay();
      log('Player healed by 1 life!');
    }
  },
  {
    name: 'Freeze Enemies Longer',
    description: 'Freeze all enemies for 10 seconds.',
    func: () => {
      enemies.forEach(enemy => {
        enemy.classList.add('frozen-enemy');
        enemy.style.opacity = '0.1';
      });
      log('Enemies frozen for 10 seconds.');
      setTimeout(() => {
        enemies.forEach(enemy => {
          enemy.classList.remove('frozen-enemy');
          enemy.style.opacity = '1';
        });
        log('Enemies unfrozen.');
      }, 10000);
    }
  },
  {
    name: 'Slow Down Time',
    description: 'Slow down game speed for 5 seconds.',
    func: () => {
      if (typeof gameInterval === 'undefined') { log("Game loop not found!"); return; }
      clearInterval(gameInterval);
      gameInterval = setInterval(gameLoop, 1000 / 30); // half-speed
      log('Time slowed!');
      setTimeout(() => {
        clearInterval(gameInterval);
        gameInterval = setInterval(gameLoop, 1000 / 60); // normal speed
        log('Time restored!');
      }, 5000);
    }
  },
  {
    name: 'Activate Regeneration',
    description: 'Regenerate 1 life every 2 seconds for 10 seconds.',
    func: () => {
      const regenInterval = setInterval(() => {
        if (lives < 99) {
          lives++;
          updateDisplay();
          log('Regenerated 1 life!');
        }
      }, 2000);
      setTimeout(() => {
        clearInterval(regenInterval);
        log('Regeneration ended!');
      }, 10000);
    }
  },
  {
    name: 'Activate Magnet',
    description: 'Attract nearby coins for 5 seconds.',
    func: () => {
      const attractInterval = setInterval(() => {
        coins.forEach(coin => {
          const coinX = parseInt(coin.style.left);
          const coinY = parseInt(coin.style.bottom);
          const dx = playerPositionX - coinX;
          const dy = playerPositionY - coinY;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < 100) {
            coin.style.left = coinX + dx * 0.15 + 'px';
            coin.style.bottom = coinY + dy * 0.15 + 'px';
          }
        });
      }, 100);
      log('Magnet activated!');
      setTimeout(() => {
        clearInterval(attractInterval);
        log('Magnet expired!');
      }, 5000);
    }
  },
  {
    name: 'Teleport Player',
    description: 'Teleport player forward 150px.',
    func: () => {
      playerPositionX += 150;
      if (playerPositionX > gameWorld.offsetWidth - player.offsetWidth) playerPositionX = gameWorld.offsetWidth - player.offsetWidth;
      player.style.left = playerPositionX + 'px';
      log('Player teleported forward 150px!');
    }
  },
  {
    name: 'Activate Blazing Trail',
    description: 'Player leaves damaging fire trail for 5 seconds.',
    func: () => {
      let intervalId = setInterval(() => {
        const trail = document.createElement('div');
        trail.className = 'bullet';
        trail.style.left = (playerPositionX + player.offsetWidth / 2) + 'px';
        trail.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px';
        trail.style.backgroundColor = 'orange';
        gameWorld.appendChild(trail);
        setTimeout(() => trail.remove(), 500);
        enemies.forEach((enemy, idx) => {
          if (checkCollision(trail, enemy)) {
            enemy.remove();
            enemies.splice(idx, 1);
            log('Enemy burnt by blazing trail!');
          }
        });
      }, 100);
      log('Blazing trail activated!');
      setTimeout(() => {
        clearInterval(intervalId);
        log('Blazing trail ended!');
      }, 5000);
    }
  },
  {
    name: 'Activate Sonic Wave',
    description: 'Release shockwave to destroy up to 3 obstacles.',
    func: () => {
      const wave = document.createElement('div');
      wave.className = 'wave';
      wave.style.left = (playerPositionX - 50) + 'px';
      wave.style.bottom = (playerPositionY - 50) + 'px';
      wave.style.backgroundColor = 'cyan';
      wave.style.width = '100px';
      wave.style.height = '100px';
      wave.style.position = 'absolute';
      gameWorld.appendChild(wave);

      let destroyed = 0;
      let interval = setInterval(() => {
        wave.style.left = (parseInt(wave.style.left) + 10) + 'px';
        obstacles.forEach((obstacle, index) => {
          if (checkCollision(wave, obstacle) && destroyed < 3) {
            obstacle.remove();
            obstacles.splice(index, 1);
            destroyed++;
            log('Obstacle destroyed by sonic wave!');
          }
        });
        if (parseInt(wave.style.left) > gameWorld.offsetWidth) {
          clearInterval(interval);
          wave.remove();
          log('Sonic wave ended!');
        }
      }, 50);
      log('Sonic wave activated!');
    }
  },
  {
    name: 'Activate Armor',
    description: 'Add 3 extra lives and a steel blue border for 7 seconds.',
    func: () => {
      lives = Math.min(lives + 3, 99);
      player.style.border = '3px solid steelblue';
      updateDisplay();
      log('Armor activated! +3 lives');
      setTimeout(() => {
        player.style.border = '';
        log('Armor expired!');
      }, 7000);
    }
  },
  {
    name: 'Activate Telekinetic',
    description: 'Lift enemies up for 5 seconds.',
    func: () => {
      const intId = setInterval(() => {
        enemies.forEach(enemy => {
          let bottom = parseInt(enemy.style.bottom) || 0;
          enemy.style.bottom = (bottom + 2) + 'px';
        });
      }, 50);
      log('Telekinetic effect activated!');
      setTimeout(() => {
        clearInterval(intId);
        log('Telekinetic effect ended!');
      }, 5000);
    }
  },
  {
    name: 'Activate Camouflage',
    description: 'Make player semi-transparent for 5 seconds.',
    func: () => {
      player.style.opacity = '0.2';
      log('Camouflage activated!');
      setTimeout(() => {
        player.style.opacity = '1';
        log('Camouflage ended!');
      }, 5000);
    }
  },
  {
    name: 'Activate Dimension Shift',
    description: 'Remove enemies and obstacles for 5 seconds.',
    func: () => {
      enemies.forEach(enemy => enemy.style.display = 'none');
      obstacles.forEach(block => block.style.display = 'none');
      log('Dimension shift activated - enemies and obstacles hidden!');
      setTimeout(() => {
        enemies.forEach(enemy => enemy.style.display = '');
        obstacles.forEach(block => block.style.display = '');
        log('Dimension shift ended - everything restored!');
      }, 5000);
    }
  },
  {
    name: 'Activate Energy Drain',
    description: 'Drain 1 score every 100ms for 5 seconds.',
    func: () => {
      const id = setInterval(() => {
        if (score > 0) {
          score -= 1;
          updateDisplay();
          log('Energy drained 1 point.');
        }
      }, 100);
      log('Energy drain started!');
      setTimeout(() => {
        clearInterval(id);
        log('Energy drain ended!');
      }, 5000);
    }
  },
  {
    name: 'Activate Mind Control',
    description: 'Hypnotize all enemies changing their color to violet for 5 seconds.',
    func: () => {
      enemies.forEach(enemy => {
        enemy.style.backgroundColor = 'violet';
      });
      log('Mind control activated!');
      setTimeout(() => {
        enemies.forEach(enemy => {
          enemy.style.backgroundColor = ''; // Restore original
        });
        log('Mind control ended!');
      }, 5000);
    }
  },
  {
    name: 'Activate Hologram',
    description: 'Create a hologram that distracts enemies for 5 seconds.',
    func: () => {
      const hologram = document.createElement('div');
      hologram.className = 'hologram';
      hologram.style.position = 'absolute';
      hologram.style.left = `${playerPositionX - 25}px`;
      hologram.style.bottom = `${playerPositionY}px`;
      hologram.style.width = '50px';
      hologram.style.height = '50px';
      hologram.style.backgroundColor = 'rgba(0, 0, 255, 0.5)';
      hologram.style.borderRadius = '50%';
      hologram.style.zIndex = '100';
      gameWorld.appendChild(hologram);
      log('Hologram created!');
      setTimeout(() => {
        hologram.remove();
        log('Hologram disappeared!');
      }, 5000);
    }
  },
  {
    name: 'Shoot Fire Bullet',
    description: 'Shoot a fire bullet that burns enemies on contact.',
    func: () => {
      shootFire();
      log('Fire bullet fired!');
    }
  },
  {
    name: 'Shoot Ice Bullet',
    description: 'Shoot an ice bullet that freezes enemies temporarily.',
    func: () => {
      shootIce();
      log('Ice bullet fired!');
    }
  },
  {
    name: 'Shoot Hypno Bullet',
    description: 'Shoot a hypnotize bullet to confuse enemies.',
    func: () => {
      shootHypno();
      log('Hypno bullet fired!');
    }
  },
  {
    name: 'Create Instant Burst',
    description: 'Create burst effect at player location.',
    func: () => {
      createBurst(playerPositionX, playerPositionY);
      log('Burst created!');
    }
  },
  {
    name: 'Random Screen Shake',
    description: 'Shake the game screen for 2 seconds.',
    func: () => {
      shakeScreen();
      log('Screen shaken!');
    }
  },
  {
    name: 'Random Color Cycle Player',
    description: 'Cycle player colors randomly for 5 seconds.',
    func: () => {
      const colors = ['red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'orange'];
      let i = 0;
      const intervalId = setInterval(() => {
        player.style.backgroundColor = colors[i++ % colors.length];
      }, 150);
      log('Player color cycling started!');
      setTimeout(() => {
        clearInterval(intervalId);
        player.style.backgroundColor = '#4CAF50';
        log('Player color cycling ended!');
      }, 5000);
    }
  },
  {
    name: 'Flash Screen White',
    description: 'Flash entire screen white for 1 second.',
    func: () => {
      const flash = document.createElement('div');
      Object.assign(flash.style, {
        position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh',
        backgroundColor: 'white', opacity: '0.85', zIndex: 10000,
        pointerEvents: 'none',
      });
      document.body.appendChild(flash);
      log('Screen flashed white!');
      setTimeout(() => {
        flash.remove();
        log('White flash ended!');
      }, 1000);
    }
  },
  {
    name: 'Invert Game Colors',
    description: 'Invert game colors for 10 seconds.',
    func: () => {
      gameContainer.style.filter = 'invert(1)';
      log('Game colors inverted!');
      setTimeout(() => {
        gameContainer.style.filter = '';
        log('Game colors restored!');
      }, 10000);
    }
  },
  {
    name: 'Random Background Color',
    description: 'Change game background color randomly.',
    func: () => {
      const colors = ['#222', '#440000', '#004400', '#000044', '#444444', '#222244', '#442222'];
      const c = colors[Math.floor(Math.random() * colors.length)];
      gameContainer.style.backgroundColor = c;
      log(`Background color changed to ${c}!`);
    }
  },
  {
    name: 'Double Score Bonus',
    description: 'Double score gained for 10 seconds.',
    func: () => {
      let origAddScore = window.addScore;
      window.addScore = function(amount) {
        origAddScore(amount * 2);
      }
      log('Score doubled!');
      setTimeout(() => {
        window.addScore = origAddScore;
        log('Score doubled ended!');
      }, 10000);
    }
  },
  {
    name: 'Invert Enemy Movement',
    description: 'Enemies move backwards for 7 seconds.',
    func: () => {
      enemies.forEach(enemy => {
        enemy.dataset.originalSpeed = enemy.dataset.speed || '1';
        enemy.dataset.speed = (-parseFloat(enemy.dataset.originalSpeed)).toString();
      });
      log('Enemies reversed movement!');
      setTimeout(() => {
        enemies.forEach(enemy => {
          if (enemy.dataset.originalSpeed) {
            enemy.dataset.speed = enemy.dataset.originalSpeed;
          }
        });
        log('Enemies movement restored!');
      }, 7000);
    }
  },
  {
    name: 'Slow Enemy Movement',
    description: 'Slow all enemies by half speed.',
    func: () => {
      enemies.forEach(enemy => {
        const speed = parseFloat(enemy.dataset.speed) || 1;
        enemy.dataset.speed = (speed / 2).toString();
      });
      log('Enemies slowed!');
    }
  },
  {
    name: 'Force Player Jump',
    description: 'Force the player to jump once instantly.',
    func: () => {
      if (!isJumping && jumpCount < maxJumps) {
        playerVelocityY = playerJumpStrength;
        jumpCount++;
        isJumping = true;
        log('Forced player jump!');
      }
    }
  },
  {
    name: 'Spawn Temporary Wall',
    description: 'Spawn an obstacle wall 50px ahead of player, lasts 7 seconds.',
    func: () => {
      const wall = createElement('obstacle', obstacles, playerPositionX + player.offsetWidth + 50);
      wall.style.bottom = '0px';
      log('Temporary wall spawned!');
      setTimeout(() => {
        wall.remove();
        obstacles.splice(obstacles.indexOf(wall), 1);
        log('Temporary wall removed!');
      }, 7000);
    }
  },
  {
    name: 'Toggle Player Transparency',
    description: 'Toggle player visibility between opaque and 30% transparent.',
    func: () => {
      player.style.opacity = player.style.opacity === '0.3' ? '1' : '0.3';
      log(`Player transparency toggled to ${player.style.opacity}`);
    }
  },
  {
    name: 'Player Flashing Effect',
    description: 'Make player flash on/off for 5 seconds.',
    func: () => {
      player.classList.add('flashing');
      log('Player flashing started!');
      setTimeout(() => {
        player.classList.remove('flashing');
        log('Player flashing ended!');
      }, 5000);
    }
  },
  {
    name: 'Rapid Fire 10 Bullets',
    description: 'Rapidly fire bullets 10 times with 100ms delay.',
    func: () => {
      let shots = 0;
      const interval = setInterval(() => {
        shootBullet(currentDirection);
        shots++;
        if (shots >= 10) clearInterval(interval);
      }, 100);
      log('Rapid fire started!');
    }
  },
  {
    name: 'Shoot 3 Bullets Spread',
    description: 'Shoot 3 bullets with a slight spread.',
    func: () => {
      shootBullet(currentDirection);
      shootBullet(currentDirection + 2);
      shootBullet(currentDirection - 2);
      log('Spread shot fired!');
    }
  },
  {
    name: 'Instant 50 Score Bonus',
    description: 'Add 50 points to current score immediately.',
    func: () => {
      score += 50;
      updateDisplay();
      log('50 score bonus added!');
    }
  },
  {
    name: 'Random Nearby Teleport',
    description: 'Teleport player randomly up to 200px left or right.',
    func: () => {
      const offset = (Math.random() - 0.5) * 400;
      playerPositionX = Math.max(0, Math.min(gameWorld.offsetWidth - player.offsetWidth, playerPositionX + offset));
      player.style.left = playerPositionX + 'px';
      log('Player randomly teleported!');
    }
  },
  {
    name: 'Player Glowing Outline',
    description: 'Add glowing outline to player for 7 seconds.',
    func: () => {
      player.classList.add('glow');
      log('Player glow enabled!');
      setTimeout(() => {
        player.classList.remove('glow');
        log('Player glow disabled!');
      }, 7000);
    }
  },
  {
    name: 'Spawn Burst At Player',
    description: 'Create burst effect centered at player position.',
    func: () => {
      createBurst(playerPositionX, playerPositionY);
      log('Burst spawned at player!');
    }
  },
{
  name: 'Force Player Jump',
  description: 'Force the player to jump once instantly.',
  func: () => {
    if (!isJumping && jumpCount < maxJumps) {
      playerVelocityY = playerJumpStrength;
      jumpCount++;
      isJumping = true;
      log('Forced player jump!');
    }
  }
},
{
  name: 'Double Player Jump',
  description: 'Force the player to double jump instantly if possible.',
  func: () => {
    if (isJumping && jumpCount < maxJumps) {
      playerVelocityY = playerJumpStrength;
      jumpCount++;
      log('Forced double jump!');
    }
  }
},
{
  name: 'Player Nudge Left',
  description: 'Move player 50 pixels left instantly.',
  func: () => {
    playerPositionX = Math.max(0, playerPositionX - 50);
    player.style.left = playerPositionX + 'px';
    log('Player nudged left!');
  }
},
{
  name: 'Player Nudge Right',
  description: 'Move player 50 pixels right instantly.',
  func: () => {
    playerPositionX = Math.min(gameWorld.offsetWidth - player.offsetWidth, playerPositionX + 50);
    player.style.left = playerPositionX + 'px';
    log('Player nudged right!');
  }
},
{
  name: 'Player Teleport Up',
  description: 'Teleport the player 100 pixels up (vertical).',
  func: () => {
    playerPositionY = playerPositionY + 100;
    player.style.bottom = playerPositionY + 'px';
    log('Player teleported up!');
  }
},
{
  name: 'Player Teleport Down',
  description: 'Teleport the player 100 pixels down (vertical).',
  func: () => {
    playerPositionY = Math.max(0, playerPositionY - 100);
    player.style.bottom = playerPositionY + 'px';
    log('Player teleported down!');
  }
},
{
  name: 'Invert Player Direction',
  description: 'Invert the player’s current facing direction.',
  func: () => {
    currentDirection = currentDirection === 1 ? -1 : 1;
    log('Player direction inverted!');
  }
},
{
  name: 'Instant Score Boost',
  description: 'Add 200 points instantly to the player’s score.',
  func: () => {
    score += 200;
    updateDisplay();
    log('Score boosted by 200!');
  }
},
{
  name: 'Extra Life Grant',
  description: 'Add one extra life to the player, up to max.',
  func: () => {
    lives = Math.min(lives + 1, 99);
    updateDisplay();
    log('Extra life granted!');
  }
},
{
  name: 'Drain One Life',
  description: 'Remove one life from the player, minimum 1.',
  func: () => {
    lives = Math.max(1, lives - 1);
    updateDisplay();
    log('One life removed!');
  }
},
{
  name: 'Player Flash Red',
  description: 'Flash the player’s color red for 1 second.',
  func: () => {
    const originalColor = player.style.backgroundColor;
    player.style.backgroundColor = 'red';
    setTimeout(() => { player.style.backgroundColor = originalColor || '#4CAF50'; }, 1000);
    log('Player flashed red!');
  }
},
{
  name: 'Player Flash Green',
  description: 'Flash the player’s color green for 1 second.',
  func: () => {
    const originalColor = player.style.backgroundColor;
    player.style.backgroundColor = 'limegreen';
    setTimeout(() => { player.style.backgroundColor = originalColor || '#4CAF50'; }, 1000);
    log('Player flashed green!');
  }
},
{
  name: 'Player Spin 360',
  description: 'Spin the player fully around once.',
  func: () => {
    player.style.transition = 'transform 0.7s linear';
    player.style.transform = 'rotate(360deg)';
    setTimeout(() => { player.style.transform = ''; player.style.transition = ''; }, 700);
    log('Player did a spin!');
  }
},
{
  name: 'Toggle Player Visibility',
  description: 'Toggle player visibility between visible and semi-transparent.',
  func: () => {
    player.style.opacity = (player.style.opacity === '0.3') ? '1' : '0.3';
    log('Player visibility toggled!');
  }
},
{
  name: 'Player Blink Twice',
  description: 'Make the player blink (toggle visibility) twice quickly.',
  func: () => {
    let count = 0;
    const interval = setInterval(() => {
      player.style.opacity = (player.style.opacity === '0') ? '1' : '0';
      count++;
      if(count >= 4) {
        clearInterval(interval);
        player.style.opacity = '1';
        log('Player blinked twice!');
      }
    }, 200);
  }
},
{
  name: 'Reverse Controls For 5 Sec',
  description: 'Reverse left/right player controls for 5 seconds.',
  func: () => {
    window.invertedControls = true;
    log('Controls reversed!');
    setTimeout(() => {
      window.invertedControls = false;
      log('Controls normalized!');
    }, 5000);
  }
},
{
  name: 'Player Bounce Twice',
  description: 'Force player to jump twice in quick succession.',
  func: () => {
    if (!isJumping && jumpCount < maxJumps) {
      playerVelocityY = playerJumpStrength;
      jumpCount++;
      isJumping = true;
      setTimeout(() => {
        if(jumpCount < maxJumps) {
          playerVelocityY = playerJumpStrength;
          jumpCount++;
          log('Player bounced twice!');
        }
      }, 400);
    }
  }
},
{
  name: 'Spawn Burst At Player',
  description: 'Create an explosion burst effect where the player stands.',
  func: () => {
    createBurst(playerPositionX, playerPositionY);
    log('Explosion burst spawned!');
  }
},
{
  name: 'Temporary Invincibility',
  description: 'Make player invincible for 5 seconds.',
  func: () => {
    window.isInvincible = true;
    log('Player is now invincible!');
    setTimeout(() => {
      window.isInvincible = false;
      log('Player invincibility ended!');
    }, 5000);
  }
},
{
  name: 'Random Enemy Freeze',
  description: 'Freeze one random enemy for 5 seconds.',
  func: () => {
    if(enemies.length === 0) { log('No enemies to freeze!'); return; }
    const enemy = enemies[Math.floor(Math.random() * enemies.length)];
    enemy.classList.add('frozen-enemy');
    enemy.style.opacity = '0.3';
    setTimeout(() => {
      enemy.classList.remove('frozen-enemy');
      enemy.style.opacity = '1';
      log('Enemy thawed!');
    }, 5000);
    log('Enemy frozen!');
  }
},
{
  name: 'Hide All Coins Temporarily',
  description: 'Coins become hidden for 5 seconds then reappear.',
  func: () => {
    coins.forEach(c => c.style.visibility = 'hidden');
    log('Coins hidden!');
    setTimeout(() => {
      coins.forEach(c => c.style.visibility = 'visible');
      log('Coins are visible again!');
    }, 5000);
  }
},
{
  name: 'Increase Player Max Speed for 5s',
  description: 'Boost player max speed by 3 for 5 seconds.',
  func: () => {
    playerMaxSpeed += 3;
    log('Player speed boosted!');
    setTimeout(() => {
      playerMaxSpeed -= 3;
      log('Player speed restored!');
    }, 5000);
  }
},
{
  name: 'Decrease Player Max Speed for 5s',
  description: 'Reduce player max speed by 3 for 5 seconds.',
  func: () => {
    playerMaxSpeed = Math.max(1, playerMaxSpeed - 3);
    log('Player speed decreased!');
    setTimeout(() => {
      playerMaxSpeed += 3;
      log('Player speed restored!');
    }, 5000);
  }
},
{
  name: 'Player Slide Right',
  description: 'Push the player smoothly 100px right over 1 second.',
  func: () => {
    let start = playerPositionX;
    let target = Math.min(gameWorld.offsetWidth - player.offsetWidth, start + 100);
    let duration = 1000;
    let startTime = Date.now();
    function slide() {
      let now = Date.now();
      let progress = Math.min(1, (now - startTime) / duration);
      playerPositionX = start + (target - start) * progress;
      player.style.left = playerPositionX + 'px';
      if(progress < 1) requestAnimationFrame(slide);
      else log('Player slide right complete!');
    }
    slide();
  }
},
{
  name: 'Player Slide Left',
  description: 'Push the player smoothly 100px left over 1 second.',
  func: () => {
    let start = playerPositionX;
    let target = Math.max(0, start - 100);
    let duration = 1000;
    let startTime = Date.now();
    function slide() {
      let now = Date.now();
      let progress = Math.min(1, (now - startTime) / duration);
      playerPositionX = start + (target - start) * progress;
      player.style.left = playerPositionX + 'px';
      if(progress < 1) requestAnimationFrame(slide);
      else log('Player slide left complete!');
    }
    slide();
  }
},
{
  name: 'Spawn Coin Shower',
  description: 'Spawn 20 coins in a burst around player for fun.',
  func: () => {
    for(let i=0; i<20; i++) {
      let coin = createElement('coin', coins, playerPositionX + (Math.random()-0.5) * 200);
      coin.style.bottom = (playerPositionY + Math.random() * 150) + 'px';
      setTimeout(() => {
        coin.remove();
        coins.splice(coins.indexOf(coin),1);
      }, 12000);
    }
    log('Coin shower spawned!');
  }
},
{
  name: 'Player Glow On',
  description: 'Add a glowing green outline around the player for 5 seconds.',
  func: () => {
    player.classList.add('glow');
    log('Player glow activated!');
    setTimeout(() => {
      player.classList.remove('glow');
      log('Player glow disabled!');
    }, 5000);
  }
},
{
  name: 'Instant Enemy Stun',
  description: 'Make all enemies stay frozen for 3 seconds.',
  func: () => {
    enemies.forEach(enemy => {
      enemy.setAttribute('data-stunned', 'true'); // You can extend your move logic to check this
      enemy.style.opacity = '0.3';
    });
    log('All enemies stunned!');
    setTimeout(() => {
      enemies.forEach(enemy => {
        enemy.removeAttribute('data-stunned');
        enemy.style.opacity = '1';
      });
      log('Enemies unstunned!');
    }, 3000);
  }
},
{
  name: 'Create Small Smoke Cloud',
  description: 'Create a smoke burst effect at player location.',
  func: () => {
    const smoke = document.createElement('div');
    smoke.className = 'smoke-effect';
    smoke.style.position = 'absolute';
    smoke.style.left = playerPositionX + 'px';
    smoke.style.bottom = playerPositionY + 'px';
    smoke.style.width = '40px';
    smoke.style.height = '40px';
    smoke.style.backgroundColor = 'rgba(100,100,100,0.4)';
    smoke.style.borderRadius = '50%';
    gameWorld.appendChild(smoke);
    log('Smoke cloud created!');
    setTimeout(() => smoke.remove(), 1500);
  }
},
{
  name: 'Reduce Jump Height for 5s',
  description: 'Halve jump strength temporarily.',
  func: () => {
    const originalJump = playerJumpStrength;
    playerJumpStrength = originalJump / 2;
    log('Jump height reduced!');
    setTimeout(() => {
      playerJumpStrength = originalJump;
      log('Jump height restored!');
    }, 5000);
  }
},
{
  name: 'Massive Jump Boost for 3s',
  description: 'Triple jump strength instantly for 3 seconds.',
  func: () => {
    const originalJump = playerJumpStrength;
    playerJumpStrength = originalJump * 3;
    log('Massive jump boost!');
    setTimeout(() => {
      playerJumpStrength = originalJump;
      log('Jump boost ended!');
    }, 3000);
  }
},
{
  name: 'Make All Enemies Weaker',
  description: 'Reduce all enemy health by 50% for 10 seconds.',
  func: () => {
    enemies.forEach(enemy => {
      let hp = parseInt(enemy.dataset.health) || 1;
      enemy.dataset.originalHealth = hp.toString();
      enemy.dataset.health = Math.max(1, Math.floor(hp / 2)).toString();
    });
    log('Enemies weakened!');
    setTimeout(() => {
      enemies.forEach(enemy => {
        if(enemy.dataset.originalHealth) {
          enemy.dataset.health = enemy.dataset.originalHealth;
          delete enemy.dataset.originalHealth;
        }
      });
      log('Enemies restored strength!');
    }, 10000);
  }
},
{
  name: 'Make Enemies Faster',
  description: 'Double speed of all enemies for 6 seconds.',
  func: () => {
    enemies.forEach(enemy => {
      let speed = parseFloat(enemy.dataset.speed) || 1;
      enemy.dataset.originalSpeed = speed.toString();
      enemy.dataset.speed = (speed * 2).toString();
    });
    log('Enemies sped up!');
    setTimeout(() => {
      enemies.forEach(enemy => {
        if(enemy.dataset.originalSpeed) {
          enemy.dataset.speed = enemy.dataset.originalSpeed;
          delete enemy.dataset.originalSpeed;
        }
      });
      log('Enemies speed normalized!');
    }, 6000);
  }
},
{
  name: 'Random Player Color Blink',
  description: 'Player blinks random colors for 4 seconds.',
  func: () => {
    const colors = ['red','blue','lime','yellow','cyan','magenta','white']
    let i = 0;
    const id = setInterval(() => {
      player.style.backgroundColor = colors[i++ % colors.length];
    }, 150);
    setTimeout(() => {
      clearInterval(id);
      player.style.backgroundColor = '#4CAF50';
      log('Color blinking ended!');
    }, 4000);
    log('Player started blinking colors!');
  }
},
{
  name: 'Shake Screen for 2 seconds',
  description: 'Shake the game screen.',
  func: () => {
    shakeScreen();
    log('Screen shake started!');
  }
},
{
  name: 'Slow Player Speed by Half for 6s',
  description: 'Player moves slower temporarily.',
  func: () => {
    const origSpeed = playerMaxSpeed;
    playerMaxSpeed /= 2;
    log('Player slowed down!');
    setTimeout(() => {
      playerMaxSpeed = origSpeed;
      log('Player speed restored!');
    }, 6000);
  }
},
{
  name: 'Heal Player to Full',
  description: 'Restore all player lives.',
  func: () => {
    lives = 99;
    updateDisplay();
    log('Player fully healed!');
  }
},
{
  name: 'Random Player Position Jump',
  description: 'Player teleports to a random horizontal position.',
  func: () => {
    playerPositionX = Math.random() * (gameWorld.offsetWidth - player.offsetWidth);
    player.style.left = playerPositionX + 'px';
    log('Player jumped randomly!');
  }
},
{
  name: 'Create Player Trail Effect',
  description: 'Create a glitter trail behind the player for 5s.',
  func: () => {
    const intervalId = setInterval(() => {
      const trail = document.createElement('div');
      trail.className = 'trail-effect';
      trail.style.position = 'absolute';
      trail.style.left = playerPositionX + 'px';
      trail.style.bottom = playerPositionY + 'px';
      trail.style.width = '10px';
      trail.style.height = '10px';
      trail.style.backgroundColor = 'cyan';
      trail.style.borderRadius = '50%';
      gameWorld.appendChild(trail);
      setTimeout(() => trail.remove(), 800);
    }, 100);
    log('Glitter trail activated!');
    setTimeout(() => {
      clearInterval(intervalId);
      log('Glitter trail ended!');
    }, 5000);
  }
},
{
  name: 'Reverse Player Gravity for 5s',
  description: 'Player experiences upside down gravity.',
  func: () => {
    let origGravity = gravity;
    gravity = -gravity;
    log('Gravity reversed for player!');
    setTimeout(() => {
      gravity = origGravity;
      log('Gravity restored!');
    }, 5000);
  }
},
{
  name: 'Quick Dash Forward',
  description: 'Player instantly moves forward 200 pixels.',
  func: () => {
    playerPositionX = Math.min(playerPositionX + 200, gameWorld.offsetWidth - player.offsetWidth);
    player.style.left = playerPositionX + 'px';
    log('Player dashed forward!');
  }
},
{
  name: 'Quick Dash Backward',
  description: 'Player instantly moves backward 200 pixels.',
  func: () => {
    playerPositionX = Math.max(playerPositionX - 200, 0);
    player.style.left = playerPositionX + 'px';
    log('Player dashed backward!');
  }
},
{
  name: 'Temporary Player Transparency',
  description: 'Make player transparent for 6 seconds.',
  func: () => {
    player.style.opacity = '0.2';
    log('Player became transparent!');
    setTimeout(() => {
      player.style.opacity = '1';
      log('Player transparency ended!');
    }, 6000);
  }
},
{
  name: 'Player Flash White',
  description: 'Flash player white for 1 second.',
  func: () => {
    const origColor = player.style.backgroundColor || '#4CAF50';
    player.style.backgroundColor = 'white';
    setTimeout(() => player.style.backgroundColor = origColor, 1000);
    log('Player flashed white!');
  }
},
{
  name: 'Jump And Dash Combo',
  description: 'Force player to jump and dash forward quickly.',
  func: () => {
    if (!isJumping && jumpCount < maxJumps) {
      playerVelocityY = playerJumpStrength;
      jumpCount++;
      isJumping = true;
      playerPositionX = Math.min(playerPositionX + 100, gameWorld.offsetWidth - player.offsetWidth);
      player.style.left = playerPositionX + 'px';
      log('Jump and dash combo!');
    }
  }
},
{
  name: 'Slow Enemy Bullets',
  description: 'Slow down all enemy bullets for 5 seconds.',
  func: () => {
    bullets.forEach(bullet => {
      bullet.speedBackup = bullet.speedBackup || 5;
      bullet.speed = 2;
    });
    log('Enemy bullets slowed!');
    setTimeout(() => {
      bullets.forEach(bullet => bullet.speed = bullet.speedBackup || 5);
      log('Enemy bullets speed restored!');
    }, 5000);
  }
},
{
    name: "Ground Slam",
    description: "Player slams the ground causing a shockwave that pushes enemies back.",
    func: () => {
      log("Player performs a ground slam!");
      createBurst(playerPositionX, playerPositionY);
      enemies.forEach(enemy => {
        const dist = Math.abs(parseInt(enemy.style.left) - playerPositionX);
        if(dist < 300){
          let enemyLeft = parseInt(enemy.style.left);
          enemyLeft += (enemyLeft < playerPositionX) ? -100 : 100;
          enemy.style.left = enemyLeft + "px";
          log("Enemy knocked back!");
        }
      });
    }
  },
  {
    name: "Flash Burst",
    description: "Create a blinding flash that freezes enemies for 3 seconds.",
    func: () => {
      log("Flash burst activated!");
      const flash = document.createElement('div');
      Object.assign(flash.style, {
        position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh',
        backgroundColor: 'white', opacity: '0.9', zIndex: 10000,
        pointerEvents: 'none',
      });
      document.body.appendChild(flash);
      enemies.forEach(enemy => {
        enemy.classList.add("frozen-enemy");
        enemy.style.opacity = '0.2';
      });
      setTimeout(() => {
        flash.remove();
        enemies.forEach(enemy => {
          enemy.classList.remove("frozen-enemy");
          enemy.style.opacity = '1';
        });
        log("Enemies unfrozen!");
      }, 3000);
    }
  },
  {
    name: "Summon Ally Drone",
    description: "Summon a friendly drone that shoots enemies for 7 seconds.",
    func: () => {
      const drone = document.createElement('div');
      drone.style.position = 'absolute';
      drone.style.width = '30px';
      drone.style.height = '30px';
      drone.style.borderRadius = '50%';
      drone.style.backgroundColor = 'cyan';
      drone.style.left = (playerPositionX + 50) + 'px';
      drone.style.bottom = (playerPositionY + 100) + 'px';
      gameWorld.appendChild(drone);
      log("Ally drone summoned!");
      let shootCount = 0;
      const shootInterval = setInterval(() => {
        if(shootCount >= 10){
          clearInterval(shootInterval);
          drone.remove();
          log("Ally drone vanished!");
          return;
        }
        if(enemies.length > 0){
          const target = enemies[Math.floor(Math.random() * enemies.length)];
          if(target){
            // Simulate shooting by creating a small bullet element (pure visual)
            const bullet = document.createElement('div');
            bullet.style.position = 'absolute';
            bullet.style.width = '6px';
            bullet.style.height = '3px';
            bullet.style.backgroundColor = 'cyan';
            bullet.style.borderRadius = '2px';
            bullet.style.left = drone.style.left;
            bullet.style.bottom = drone.style.bottom;
            gameWorld.appendChild(bullet);
            setTimeout(() => bullet.remove(), 500);

            // Remove enemy on hit
            target.remove();
            enemies.splice(enemies.indexOf(target), 1);
            log("Enemy hit by drone!");
          }
        }
        shootCount++;
      }, 700);
    }
  },
  {
    name: "Super Jump Attack",
    description: "Player jumps super high and deals damage on landing, stunning nearby enemies.",
    func: async () => {
      log("Super jump initiated!");
      playerVelocityY = playerJumpStrength * 2.5;
      jumpCount++;
      isJumping = true;
      await new Promise(r => setTimeout(r, 1200)); // wait approx jump time
      createBurst(playerPositionX, 0);
      enemies.forEach(enemy => {
        const dist = Math.abs(parseInt(enemy.style.left) - playerPositionX);
        if(dist < 250){
          enemy.classList.add('frozen-enemy');
          enemy.style.opacity = '0.3';
          setTimeout(() => {
            enemy.classList.remove('frozen-enemy');
            enemy.style.opacity = '1';
            log("Enemy stunned and recovered.");
          }, 3000);
          log("Enemy stunned!");
        }
      });
    }
  },
  {
    name: "Energy Orb",
    description: "Spawn an energy orb that circles the player burning enemies for 7 seconds.",
    func: () => {
      const orb = document.createElement('div');
      orb.style.position = 'absolute';
      orb.style.width = '25px';
      orb.style.height = '25px';
      orb.style.backgroundColor = 'orange';
      orb.style.borderRadius = '50%';
      orb.style.left = (playerPositionX + 30) + 'px';
      orb.style.bottom = (playerPositionY + 60) + 'px';
      orb.style.zIndex = 1000;
      gameWorld.appendChild(orb);
      let angle = 0;
      const radius = 50;
      const interval = setInterval(() => {
        angle += 0.1;
        let x = playerPositionX + radius * Math.cos(angle);
        let y = playerPositionY + radius * Math.sin(angle) + 40;
        orb.style.left = x + 'px';
        orb.style.bottom = y + 'px';

        enemies.forEach((enemy, idx) => {
          if(checkCollision(orb, enemy)){
            enemy.remove();
            enemies.splice(idx, 1);
            log("Enemy burned by energy orb!");
          }
        });
      }, 30);
      setTimeout(() => {
        clearInterval(interval);
        orb.remove();
        log("Energy orb vanished!");
      }, 7000);
    }
  },
  {
    name: "Bullet Storm",
    description: "Player fires a rapid bullet storm in all directions.",
    func: () => {
      log("Bullet storm unleashed!");
      const directions = [-1, 0, 1];
      for(let dx of directions){
        for(let dy of directions){
          if(dx === 0 && dy === 0) continue;
          for(let i=0; i<5; i++){
            setTimeout(() => {
              const bullet = document.createElement('div');
              bullet.classList.add('bullet');
              bullet.style.position = 'absolute';
              bullet.style.width = '10px';
              bullet.style.height = '5px';
              bullet.style.backgroundColor = 'yellow';
              bullet.style.left = (playerPositionX + player.offsetWidth / 2) + 'px';
              bullet.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px';
              gameWorld.appendChild(bullet);
              let speed = 7 + Math.random() * 3;
              let frameId;

              function moveBullet(){
                if(!bullet.parentElement) return cancelAnimationFrame(frameId);
                const left = parseFloat(bullet.style.left);
                const bottom = parseFloat(bullet.style.bottom);
                bullet.style.left = (left + dx * speed) + 'px';
                bullet.style.bottom = (bottom + dy * speed) + 'px';

                // Remove if out of view
                if(left < 0 || left > gameWorld.offsetWidth || bottom < 0 || bottom > gameWorld.offsetHeight){
                  bullet.remove();
                  cancelAnimationFrame(frameId);
                }
                frameId = requestAnimationFrame(moveBullet);
              }
              moveBullet();
            }, i * 100);
          }
        }
      }
    }
  },
  {
    name: "Thunder Clap",
    description: "Thunder sound with screen flash and damage to all enemies.",
    func: () => {
      log("Thunder clap!");
      const flash = document.createElement('div');
      Object.assign(flash.style, {
        position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh',
        backgroundColor: 'white', opacity: '0.9', zIndex: 10000,
        pointerEvents: 'none',
      });
      document.body.appendChild(flash);
      enemies.forEach(enemy => {
        enemy.remove();
      });
      enemies.length = 0;
      setTimeout(() => flash.remove(), 200);
      log("All enemies K.O’d by thunder!");
    }
  },
  {
    name: "Flame Wall",
    description: "Create a moving wall of fire that burns enemies.",
    func: () => {
      const wall = document.createElement('div');
      wall.style.position = 'absolute';
      wall.style.width = '20px';
      wall.style.height = '300px';
      wall.style.left = (gameScrollPosition + gameContainer.offsetWidth) + 'px';
      wall.style.bottom = '0px';
      wall.style.backgroundColor = 'orange';
      wall.style.boxShadow = '0 0 15px 5px orange';
      gameWorld.appendChild(wall);
      let posX = parseInt(wall.style.left);
      const interval = setInterval(() => {
        posX -= 5;
        if(posX < gameScrollPosition - 30) {
          clearInterval(interval);
          wall.remove();
          log("Flame wall vanished!");
          return;
        }
        wall.style.left = posX + "px";
        enemies.forEach((enemy, idx) => {
          if(checkCollision(wall, enemy)){
            enemy.remove();
            enemies.splice(idx, 1);
            log("Enemy burned by flame wall!");
          }
        });
      }, 30);
      log("Flame wall spawned!");
    }
  },
  {
    name: "Phase Shift",
    description: "Make player intangible, pass through enemies for 5 seconds.",
    func: () => {
      player.style.opacity = '0.4';
      player.dataset.phased = 'true';
      log("Player phased out!");
      setTimeout(() => {
        player.style.opacity = '1';
        delete player.dataset.phased;
        log("Player phased back!");
      }, 5000);
    }
  },
  {
    name: "Magnetic Pulse",
    description: "Pull all coins and power-ups slowly toward player for 10 seconds.",
    func: () => {
      log("Magnetic pulse activated!");
      let interval = setInterval(() => {
        [...coins, ...powerUps].forEach(obj => {
          const ox = parseInt(obj.style.left);
          const oy = parseInt(obj.style.bottom);
          let nx = ox + (playerPositionX - ox) * 0.1;
          let ny = oy + (playerPositionY - oy) * 0.1;
          obj.style.left = nx + 'px';
          obj.style.bottom = ny + 'px';
        });
      }, 50);
      setTimeout(() => {
        clearInterval(interval);
        log("Magnetic pulse ended!");
      }, 10000);
    }
  },
  {
    name: "Giant Smash",
    description: "Player grows giant and smashes everything around for 5 seconds.",
    func: () => {
      player.style.transform = 'scale(3)';
      const prevSpeed = playerMaxSpeed;
      playerMaxSpeed *= 1.5;
      let smashInterval = setInterval(() => {
        enemies.forEach((enemy, idx) => {
          let distX = Math.abs(parseInt(enemy.style.left) - playerPositionX);
          let distY = Math.abs(parseInt(enemy.style.bottom) - playerPositionY);
          if(distX < 200 && distY < 150){
            enemy.remove();
            enemies.splice(idx, 1);
            createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
            log("Enemy smashed!");
          }
        });
      }, 500);
      log("Giant Smash activated!");
      setTimeout(() => {
        player.style.transform = '';
        playerMaxSpeed = prevSpeed;
        clearInterval(smashInterval);
        log("Giant Smash ended!");
      }, 5000);
    }
  },
  {
    name: "Charge Dash",
    description: "Player dashes forward rapidly, damaging enemies on contact.",
    func: () => {
      log('Charging dash!');
      let distance = 0;
      let dashInterval = setInterval(() => {
        if(distance > 300){
          clearInterval(dashInterval);
          log('Charge complete!');
          return;
        }
        playerPositionX = Math.min(playerPositionX + 15, gameWorld.offsetWidth - player.offsetWidth);
        player.style.left = playerPositionX + 'px';
        enemies.forEach((enemy, idx) => {
          if (checkCollision(player, enemy)) {
            enemy.remove();
            enemies.splice(idx, 1);
            createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
            log('Enemy smashed by charge!');
          }
        });
        distance += 15;
      }, 30);
    }
  },
  {
    name: "Sonic Boom",
    description: "Create a sonic boom that instantly destroys nearby obstacles and enemies.",
    func: () => {
      log("Sonic boom unleashed!");
      const radius = 250;
      [...obstacles, ...enemies].forEach((obj, idx, arr) => {
        let ox = parseInt(obj.style.left);
        if(Math.abs(ox - playerPositionX) < radius){
          obj.remove();
          arr.splice(idx,1);
          createBurst(ox, parseInt(obj.style.bottom));
          log("Object destroyed by sonic boom!");
        }
      });
    }
  },
  {
    name: "Spinning Blades",
    description: "Spawn 3 spinning blades that orbit player and damage enemies.",
    func: () => {
      const blades = [];
      for(let i = 0; i < 3; i++){
        const blade = document.createElement('div');
        blade.style.position = 'absolute';
        blade.style.width = '30px';
        blade.style.height = '10px';
        blade.style.backgroundColor = 'silver';
        blade.style.borderRadius = '10px';
        blade.style.left = playerPositionX + 'px';
        blade.style.bottom = playerPositionY + 'px';
        gameWorld.appendChild(blade);
        blades.push({el: blade, angle: i * 120});
      }
      let duration = 7000;
      let start = Date.now();
      let interval = setInterval(() => {
        let now = Date.now();
        let elapsed = now - start;
        blades.forEach((blade, idx) => {
          blade.angle += 0.1;
          let x = playerPositionX + 60 * Math.cos(blade.angle);
          let y = playerPositionY + 60 * Math.sin(blade.angle);
          blade.el.style.left = x + 'px';
          blade.el.style.bottom = y + 'px';
          enemies.forEach((enemy, eIdx) => {
            if(checkCollision(blade.el, enemy)){
              enemy.remove();
              enemies.splice(eIdx, 1);
              createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
              log('Enemy cut by spinning blade!');
            }
          });
        });
        if(elapsed > duration){
          blades.forEach(b => b.el.remove());
          clearInterval(interval);
          log('Spinning blades vanished!');
        }
      }, 30);
      log('Spinning blades activated!');
    }
  },
  {
    name: "Reflective Bubble",
    description: "Create a bubble around player that reflects bullets for 5 seconds.",
    func: () => {
      const bubble = document.createElement('div');
      bubble.style.position = 'absolute';
      bubble.style.width = '100px';
      bubble.style.height = '100px';
      bubble.style.borderRadius = '50%';
      bubble.style.border = '3px solid cyan';
      bubble.style.left = (playerPositionX - 35) + 'px';
      bubble.style.bottom = (playerPositionY - 35) + 'px';
      bubble.style.zIndex = '999';
      gameWorld.appendChild(bubble);
      log('Reflective bubble active!');
      
      // Reflect bullets logic – intercept bullet movement and reverse direction if inside bubble
      const reflectInterval = setInterval(() => {
        bullets.forEach(bulletObj => {
          const bullet = bulletObj.element;
          const bulletRect = bullet.getBoundingClientRect();
          const bubbleRect = bubble.getBoundingClientRect();

          if(!(bulletRect.right < bubbleRect.left || bulletRect.left > bubbleRect.right || 
            bulletRect.bottom < bubbleRect.top || bulletRect.top > bubbleRect.bottom)) {
            bulletObj.direction *= -1;
            bullet.style.left = (parseInt(bullet.style.left) + bulletObj.direction * 10) + 'px'; // push back a bit
            log('Bullet reflected!');
          }
        });
      }, 100);

      setTimeout(() => {
        clearInterval(reflectInterval);
        bubble.remove();
        log('Reflective bubble expired!');
      }, 5000);
    }
  },
  {
    name: "Gravity Well",
    description: "Enemies and power-ups are pulled slowly towards the player for 8 seconds.",
    func: () => {
      log('Gravity well activated!');
      const interval = setInterval(() => {
        [...enemies, ...powerUps].forEach(obj => {
          let ox = parseFloat(obj.style.left);
          let oy = parseFloat(obj.style.bottom);
          obj.style.left = ox + (playerPositionX - ox) * 0.05 + 'px';
          obj.style.bottom = oy + (playerPositionY - oy) * 0.05 + 'px';
        });
      }, 50);
      setTimeout(() => {
        clearInterval(interval);
        log('Gravity well ended!');
      }, 8000);
    }
  },
  {
    name: "Time Freeze",
    description: "Freeze all movement except player input for 4 seconds.",
    func: () => {
      log('Time freeze activated!');
      const originalSpeeds = enemies.map(en => parseFloat(en.dataset.speed || '1'));
      enemies.forEach((enemy) => enemy.dataset.speed = '0');
      setTimeout(() => {
        enemies.forEach((enemy, idx) => {
          enemy.dataset.speed = originalSpeeds[idx] || '1';
        });
        log('Time freeze ended!');
      }, 4000);
    }
  },
  {
    name: "Laser Sweep",
    description: "A sweeping laser damages enemies on its horizontal path for 3 seconds.",
    func: () => {
      log("Laser sweep started!");
      const laser = document.createElement('div');
      laser.style.position = 'absolute';
      laser.style.bottom = '0px';
      laser.style.width = '8px';
      laser.style.height = '100%';
      laser.style.backgroundColor = 'red';
      laser.style.left = gameScrollPosition + 'px';
      laser.style.zIndex = '1000';
      gameWorld.appendChild(laser);

      let posX = gameScrollPosition;

      const interval = setInterval(() => {
        posX += 25;
        laser.style.left = posX + 'px';
        enemies.forEach((enemy, idx) => {
          if (checkCollision(enemy, laser)) {
            enemy.remove();
            enemies.splice(idx, 1);
            createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
            log('Enemy zapped by laser!');
          }
        });
        if (posX > gameScrollPosition + gameContainer.offsetWidth) {
          clearInterval(interval);
          laser.remove();
          log('Laser sweep finished!');
        }
      }, 50);
    }
  },
  {
    name: "Magnetic Pulse",
    description: "Pull all coins and power-ups towards player for 7 seconds.",
    func: () => {
      log('Magnetic pulse activated!');
      const interval = setInterval(() => {
        [...coins, ...powerUps].forEach(obj => {
          const ox = parseFloat(obj.style.left);
          const oy = parseFloat(obj.style.bottom);
          obj.style.left = ox + (playerPositionX - ox) * 0.1 + 'px';
          obj.style.bottom = oy + (playerPositionY - oy) * 0.1 + 'px';
        });
      }, 50);
      setTimeout(() => {
        clearInterval(interval);
        log('Magnetic pulse ended!');
      }, 7000);
    }
  },
  {
    name: "Energy Explosion",
    description: "Massive explosion destroys all enemies and obstacles within a radius.",
    func: () => {
      log('Energy explosion unleashed!');
      const radius = 300;
      const playerCenterX = playerPositionX + player.offsetWidth / 2;

      [...enemies, ...obstacles].forEach((obj, idx, arr) => {
        const objCenterX = parseInt(obj.style.left) + obj.offsetWidth / 2;
        if (Math.abs(objCenterX - playerCenterX) <= radius) {
          createBurst(parseInt(obj.style.left), parseInt(obj.style.bottom));
          obj.remove();
          arr.splice(idx, 1);
          log('Object destroyed in explosion!');
        }
      });
    }
  },
  {
    name: "Mirror Image",
    description: "Create three mirror images of player that confuse enemies for 6 seconds.",
    func: () => {
      log('Mirror images spawned!');
      const images = [];
      for (let i = 0; i < 3; i++) {
        const img = document.createElement('div');
        img.style.position = 'absolute';
        img.style.width = player.offsetWidth + 'px';
        img.style.height = player.offsetHeight + 'px';
        img.style.left = (playerPositionX + (i + 1) * 50) + 'px';
        img.style.bottom = playerPositionY + 'px';
        img.style.backgroundColor = '#00f8';
        img.style.borderRadius = '50%';
        gameWorld.appendChild(img);
        images.push(img);
      }
      setTimeout(() => {
        images.forEach(img => img.remove());
        log('Mirror images disappeared!');
      }, 6000);
    }
  },
  {
    name: "Gravity Flip",
    description: "Flip the gravity for player and enemies for 4 seconds.",
    func: () => {
      log('Gravity flipped!');
      gravity = -gravity;
      enemies.forEach(enemy => {
        enemy.style.transform = 'scaleY(-1)';
      });
      setTimeout(() => {
        gravity = -gravity;
        enemies.forEach(enemy => {
          enemy.style.transform = '';
        });
        log('Gravity returned to normal!');
      }, 4000);
    }
  },
  {
    name: "Electric Shock",
    description: "Shock all enemies nearby, stunning them for 3 seconds.",
    func: () => {
      log('Electric shock delivered!');
      enemies.forEach(enemy => {
        const dist = Math.abs(parseInt(enemy.style.left) - playerPositionX);
        if(dist<200){
          enemy.classList.add('frozen-enemy');
          enemy.style.opacity = '0.3';
          setTimeout(() => {
            enemy.classList.remove('frozen-enemy');
            enemy.style.opacity = '1';
            log('Enemy shocked recovered!');
          }, 3000);
        }
      });
    }
  },
  {
    name: "Fake Death",
    description: "Player becomes invulnerable and invisible for 3 seconds.",
    func: () => {
      isInvincible = true;
      player.style.opacity = '0.1';
      log('Player faked death!');
      setTimeout(() => {
        isInvincible = false;
        player.style.opacity = '1';
        log('Player back alive!');
      }, 3000);
    }
  },
  {
    name: "Blast Wave",
    description: "Blast knocks back all enemies within 400px radius.",
    func: () => {
      log('Blast wave activated!');
      enemies.forEach(enemy => {
        const distX = parseInt(enemy.style.left) - playerPositionX;
        if(Math.abs(distX) < 400){
          let newLeft = parseInt(enemy.style.left) + (distX > 0 ? 100 : -100);
          enemy.style.left = newLeft + 'px';
          log('Enemy knocked back!');
        }
      });
    }
  },
  // Add more creative effects if you want, pattern is the same:
  // Visual/physics effects, enemy/player status changes, small spawned elements, timed cleanup, log feedback.
];

function updatePageInfo() {
  const totalPages = Math.ceil(filteredClasses.length / elementsPerPage);
  pageInfoSpan.textContent = `Page ${currentElementPage + 1} / ${totalPages || 1}`;
  prevBtn.disabled = currentElementPage === 0;
  nextBtn.disabled = currentElementPage >= totalPages - 1;
}

// Handlers for prev/next buttons in element list pagination

nextBtn.onclick = () => {
  const totalPages = Math.ceil(filteredClasses.length / elementsPerPage);
  if (currentElementPage < totalPages - 1) {
    currentElementPage++;
    displayElementList();
  }
};

spawnOffsetSlider.addEventListener('input', () => {
  spawnOffset = parseInt(spawnOffsetSlider.value, 10);
  spawnOffsetValueDisplay.textContent = spawnOffset;
});

// Filter elements on search input change
searchInput.oninput = () => {
  const searchTerm = searchInput.value.trim().toLowerCase();
  if (searchTerm) {
    filteredClasses = allCssClasses.filter(c => c.toLowerCase().includes(searchTerm));
  } else {
    filteredClasses = allCssClasses;
  }
  currentElementPage = 0;
  selectedElementClass = null;
  spawnElementBtn.disabled = true;
  previewContainer.innerHTML = '<em>Select element to preview</em>';
  displayElementList();
};


  const powerUpClasses = [
    "super-speed", "invincibility", "teleportation",
    "reflective-shield", "double-shot", "extra-life",
    "score-boost", "mega-jump", "energy-blast", "light-speed",
    "blazing-trail", "sonic-wave", "armor", "telekinetic",
    "camouflage", "dimension-shift", "energy-drain", "mind-control",
    "hologram", "fire", "ice", "hypno"
  ];


function updateFunCooldownUI() {
  const now = Date.now();
  const cooldownDiv = document.getElementById('fun-cooldown-message');
  const buttons = document.querySelectorAll('#fun-functions-list button');

  // Use 1000 (milliseconds) for 1-second cooldown check instead of 100
  const timeSinceLastCall = (now - lastFunCallTime) / 1000; // Corrected to divide by 1000 for seconds

  if (timeSinceLastCall < funCooldownSecs) {
    const secondsLeft = Math.ceil(funCooldownSecs - timeSinceLastCall);
    cooldownDiv.textContent = `Cooldown: Please wait ${secondsLeft} second${secondsLeft !== 1 ? 's' : ''} before next function call.`;
    buttons.forEach(btn => btn.disabled = true);
  } else {
    cooldownDiv.textContent = 'You can call a fun function!';
    buttons.forEach(btn => btn.disabled = false);
  }
}

function renderFilteredFunFunctions(filterText = '') {
  const filter = filterText.trim().toLowerCase();
  funFunctionsListDiv.innerHTML = '';
  const filtered = funFunctions.filter(f => f.name.toLowerCase().includes(filter) || (f.description && f.description.toLowerCase().includes(filter)));
  if (filtered.length === 0) {
    funFunctionsListDiv.innerHTML = '<em>No fun functions match your search.</em>';
    return;
  }
  filtered.forEach((f, idx) => {
    const btn = document.createElement('button');
    btn.textContent = f.name;
    btn.title = f.description || '';
    btn.style.padding = '8px 12px';
    btn.style.cursor = 'pointer';
    btn.style.width = '100%';
    btn.style.textAlign = 'left';

    btn.onclick = () => {
      f.func();
    };

    funFunctionsListDiv.appendChild(btn);
  });
}

// Initially render full list
renderFilteredFunFunctions();

// Search input event
funSearchInput.addEventListener('input', e => {
  renderFilteredFunFunctions(e.target.value);
});

// Build and render function buttons list
function renderFunFunctions() {
  const container = document.getElementById('fun-functions-list');

  // Create search input if it doesn't exist yet
  let searchInput = document.getElementById('fun-functions-search');
  if (!searchInput) {
    searchInput = document.createElement('input');
    searchInput.id = 'fun-functions-search';
    searchInput.type = 'search';
    searchInput.placeholder = 'Search fun functions...';
    searchInput.style.width = '100%';
    searchInput.style.marginBottom = '12px';
    searchInput.style.padding = '6px';
    searchInput.style.fontSize = '14px';
    container.parentNode.insertBefore(searchInput, container);

    // Re-render buttons as user types
    searchInput.addEventListener('input', () => {
      renderFunFunctions();
    });
  }

  const filterText = searchInput.value.trim().toLowerCase();

  container.innerHTML = ''; // Clear previous buttons

  // Filter functions by search term in name or description
  const filteredFun = filterText === '' 
    ? funFunctions 
    : funFunctions.filter(f => 
        f.name.toLowerCase().includes(filterText) || (f.description && f.description.toLowerCase().includes(filterText))
      );

  if (filteredFun.length === 0) {
    container.innerHTML = '<em>No fun functions match your search.</em>';
    return;
  }

  filteredFun.forEach(f => {
    const btn = document.createElement('button');
    btn.textContent = f.name;
    btn.title = f.description;
    btn.style.padding = '8px 12px';
    btn.style.cursor = 'pointer';

    btn.onclick = () => {
      const now = Date.now();
      if (now - lastFunCallTime < funCooldownSecs * 1000) {
        // Still cooling down - ignore click
        return;
      }
      try {
        f.func();
      } catch (err) {
        log(`Error running function ${f.name}: ${err}`);
      }
      lastFunCallTime = now;
      updateFunCooldownUI();
    };

    container.appendChild(btn);
  });

  // Initial cooldown UI update
  updateFunCooldownUI();

  // Run cooldown UI updates every second, only once
  if (!renderFunFunctions._cooldownIntervalId) {
    renderFunFunctions._cooldownIntervalId = setInterval(updateFunCooldownUI, 1000);
  }
}


  // Create preview element for selected class
function showElementPreview(cssClass) {
  previewContainer.innerHTML = '';
  if (!cssClass) {
    previewContainer.innerHTML = '<em>Select element to preview</em>';
    return;
  }
  const previewEl = document.createElement('div');
  previewEl.className = cssClass;
  previewEl.textContent = cssClass;
  previewEl.style.margin = 'auto';
  previewEl.style.width = '100px';
  previewEl.style.height = '100px';
  previewEl.style.position = 'relative';
  previewEl.style.display = 'flex';
  previewEl.style.justifyContent = 'center';
  previewEl.style.alignItems = 'center';
  previewEl.style.backgroundColor = 'rgba(0,255,255,0.1)';
  previewContainer.appendChild(previewEl);

  // Try to detect any CSS animation and run it (optional)
  const computed = window.getComputedStyle(previewEl);
  const animationName = computed.animationName || computed.webkitAnimationName;
  if (animationName && animationName !== 'none') {
    previewEl.style.animationPlayState = 'running';
  }
}

// Spawn one element with the selected class near player position on clicking spawn button
spawnElementBtn.onclick = () => {
  if (!selectedElementClass) return;

  let el;
  const spawnX = playerPositionX + spawnOffset;  // use dynamic spawn offset

  if (allPowerUpTypes.includes(selectedElementClass)) {
    // Spawn power-up properly with offset
    el = spawnPowerUpOfType(selectedElementClass, spawnOffset);
    log(`Spawned power-up: ${selectedElementClass} at +${spawnOffset}px`);
  } else {
    // Spawn generic div with class and offset
    el = document.createElement('div');
    el.className = selectedElementClass;
    el.style.position = 'absolute';
    el.style.left = spawnX + 'px';
    el.style.bottom = '0px';
    gameWorld.appendChild(el);

    // Add to appropriate arrays if necessary
    const enemyClasses = [
      "enemy", "flying-enemy", "charging-enemy", "split-enemy", "laser-enemy",
      "sniper-enemy", "reflective-enemy", "velocity-enemy", "sticky-enemy",
      "teleporter-enemy", "mourning-enemy", "virus-drone"
    ];

    if (enemyClasses.includes(selectedElementClass)) {
      enemies.push(el);
    } else if (selectedElementClass === 'obstacle') {
      obstacles.push(el);
    } else if (selectedElementClass === 'platform') {
      platforms.push(el);
    } else if (selectedElementClass === 'power-up') {
      powerUps.push(el);
    } else if (selectedElementClass === 'coin') {
      coins.push(el);
    }

    log(`Spawned element: ${selectedElementClass} at x=${spawnX}`);
  }

  // Highlight briefly after spawn
  el.style.outline = '2px solid cyan';
  setTimeout(() => {
    if (el) el.style.outline = '';
  }, 1500);

  // If you implement Undo/Redo, you can register the spawned element here:
  if (typeof spawnedElementsStack !== 'undefined') {
    spawnedElementsStack.push(el);
    if (typeof redoStack !== 'undefined') redoStack.length = 0;  // Clear redo after new spawn
    if (typeof updateUndoRedoButtons === 'function') updateUndoRedoButtons();
  }
};

  // --- Character Modifiers Tab functions ---

  function updatePlayerColor(color) {
    player.style.backgroundColor = color;
  }
  playerColorInput.oninput = (e) => {
    updatePlayerColor(e.target.value);
  };

gravitySlider.oninput = e => {
  gravity = parseFloat(e.target.value);
  gravityValue.textContent = gravity.toFixed(2);
};

playerSpeedSlider.oninput = e => {
  playerMaxSpeed = parseFloat(e.target.value);
  playerSpeedValue.textContent = playerMaxSpeed.toFixed(2);
};

bulletSpeedSlider.oninput = e => {
  bulletSpeed = parseFloat(e.target.value);
  bulletSpeedValue.textContent = bulletSpeed.toFixed(2);
};

  // Initialize values from existing variables (if set)
  playerColorInput.value = window.getComputedStyle(player).backgroundColor || '#4CAF50';
  if (window.gravity !== undefined) gravitySlider.value = window.gravity;
  else gravitySlider.value = 0.5;
  gravityValue.textContent = gravitySlider.value;

  if (window.playerMaxSpeed !== undefined) playerSpeedSlider.value = window.playerMaxSpeed;
  else playerSpeedSlider.value = 5;
  playerSpeedValue.textContent = playerSpeedSlider.value;

  if (window.bulletSpeed !== undefined) bulletSpeedSlider.value = window.bulletSpeed;
  else bulletSpeedSlider.value = 5;
  bulletSpeedValue.textContent = bulletSpeedSlider.value;

  // --- Map Modifier Tab functions ---

  bgColorInput.oninput = e => {
    gameContainer.style.backgroundColor = e.target.value;
  };

  function toggleVisibility(collection, visible) {
    collection.forEach(el => {
      el.style.display = visible ? '' : 'none';
    });
  }

  togglePlatforms.onchange = e => {
    toggleVisibility(platforms, e.target.checked);
  };
  toggleObstacles.onchange = e => {
    toggleVisibility(obstacles, e.target.checked);
  };
  toggleEnemies.onchange = e => {
    toggleVisibility(enemies, e.target.checked);
  };
  togglePowerups.onchange = e => {
    toggleVisibility(powerUps, e.target.checked);
  };
  toggleCoins.onchange = e => {
    toggleVisibility(coins, e.target.checked);
  };

  // --- Experiment Mode and Settings tab ---

  // Experiment Mode: freezes enemies (pauses their movement / removes from move list)
  // Stores original functions and disables updates for enemies

// Undo button removes last spawned element
undoBtn.addEventListener('click', () => {
  if (spawnedElementsStack.length === 0) return;

  const lastEl = spawnedElementsStack.pop();
  if (lastEl) {
    lastEl.remove();
    redoStack.push(lastEl);
    log(`Undo spawn`);
  }
  updateUndoRedoButtons();
});

// Redo button restores last undone spawn
redoBtn.addEventListener('click', () => {
  if (redoStack.length === 0) return;

  const el = redoStack.pop();
  if (el) {
    gameWorld.appendChild(el);
    spawnedElementsStack.push(el);
    log(`Redo spawn`);
  }
  updateUndoRedoButtons();
});

// Enable/disable Undo/Redo buttons based on stacks
function updateUndoRedoButtons() {
  undoBtn.disabled = spawnedElementsStack.length === 0;
  redoBtn.disabled = redoStack.length === 0;
}


function spawnPowerUpOfType(type, offset = 200) {
  const powerUp = document.createElement('div');
  powerUp.classList.add('power-up');
  powerUp.setAttribute('data-type', type);
  powerUp.style.backgroundColor = getPowerUpColor(type);
  powerUp.style.position = 'absolute';
  powerUp.style.left = (playerPositionX + offset) + 'px';
  powerUp.style.bottom = (Math.floor(Math.random() * 100) + 50) + 'px';
  gameWorld.appendChild(powerUp);
  powerUps.push(powerUp);
  return powerUp;
}

  function freezeEnemies() {
    enemies.forEach(enemy => {
      if (!enemy.classList.contains('sandbox-frozen')) {
        enemy.classList.add('sandbox-frozen');
        frozenEnemyPositions.set(enemy, {left: enemy.style.left, bottom: enemy.style.bottom});
        enemy.style.transition = 'none';
        // Freeze by flag; we do not call movement on frozen enemies (modify your game loop to respect if you add that)
      }
    });
  }
  function unfreezeEnemies() {
    enemies.forEach(enemy => {
      enemy.classList.remove('sandbox-frozen');
    });
    frozenEnemyPositions.clear();
  }

  experimentModeCheckbox.onchange = e => {
    experimentModeEnabled = e.target.checked;
    if (experimentModeEnabled) {
      freezeEnemies();
      experimentControls.style.display = 'block';
      log("Experiment Mode Enabled: Enemies frozen.");
    } else {
      unfreezeEnemies();
      experimentControls.style.display = 'none';
      selectedEnemy = null;
      selectedEnemyInfoSpan.textContent = 'None';
      log("Experiment Mode Disabled: Enemies unfrozen.");
    }
  };

  unfreezeEnemiesBtn.onclick = () => {
    unfreezeEnemies();
    experimentModeCheckbox.checked = false;
    experimentControls.style.display = 'none';
    selectedEnemy = null;
    selectedEnemyInfoSpan.textContent = 'None';
    log("Unfroze all enemies through Experiment Control.");
  };

  // Map Modifier tab enhancement: select enemy by click for movement in experiment mode
  toggleEnemies.parentElement.addEventListener('click', (ev) => {
    if(!experimentModeEnabled) return;
    if(ev.target.tagName.toLowerCase() === 'input') return; // ignore checkbox clicks

    // Reset any existing highlights
    enemies.forEach(en => {
      en.style.outline = '';
    });

    if (enemies.length === 0) {
      selectedEnemy = null;
      selectedEnemyInfoSpan.textContent = 'None';
      return;
    }

    // Select the first enemy visible, or improve this by popup list if you want
    // For demo: select random visible enemy
    const visibleEnemies = enemies.filter(en => en.style.display !== 'none');
    if (visibleEnemies.length === 0) return;
    selectedEnemy = visibleEnemies[0];
    selectedEnemy.style.outline = '2px solid magenta';
    selectedEnemyInfoSpan.textContent = `Class: ${selectedEnemy.className}`;
  });

  // Movement buttons for selected enemy
  enemyMoveButtons.forEach(btn => {
    btn.onclick = () => {
      if (!selectedEnemy) return;
      let leftPx = parseInt(selectedEnemy.style.left) || 0;
      let bottomPx = parseInt(selectedEnemy.style.bottom) || 0;

      switch(btn.dataset.dir) {
        case 'up': bottomPx += 10; break;
        case 'down': bottomPx = Math.max(0, bottomPx - 10); break;
        case 'left': leftPx = Math.max(0, leftPx - 10); break;
        case 'right': leftPx += 10; break;
      }
      selectedEnemy.style.left = leftPx + 'px';
      selectedEnemy.style.bottom = bottomPx + 'px';
      log(`Moved selected enemy ${btn.dataset.dir} to (left:${leftPx}px, bottom:${bottomPx}px)`);
    };
  });

  // --- Logs window ---

  function log(msg) {
    // Time stamp + message
    const time = new Date().toLocaleTimeString();
    logsContent.textContent += `[${time}] ${msg}\n`;
    logsContent.scrollTop = logsContent.scrollHeight;
  }
  clearLogsBtn.onclick = () => {
    logsContent.textContent = '';
  };

  enableLogsCheckbox.onchange = e => {
    if (e.target.checked) {
      logsWindow.style.display = 'block';
      log('Logs window enabled');
    } else {
      logsWindow.style.display = 'none';
    }
  };


  // --- Initialize data WHEN sandbox mode is started ---

  function startSandboxMode() {
    // Show sandbox GUI
    gui.style.display = 'flex';

    // Reset inputs to current values (optional)
    playerColorInput.value = rgbToHex(
      window.getComputedStyle(player).backgroundColor || '#4CAF50'
    );
    gravitySlider.value = window.gravity !== undefined ? window.gravity : 0.5;
    gravityValue.textContent = gravitySlider.value;
    playerSpeedSlider.value = window.playerMaxSpeed !== undefined ? window.playerMaxSpeed : 5;
    playerSpeedValue.textContent = playerSpeedSlider.value;
    bulletSpeedSlider.value = window.bulletSpeed !== undefined ? window.bulletSpeed : 5;
    bulletSpeedValue.textContent = bulletSpeedSlider.value;
    bgColorInput.value = rgbToHex(window.getComputedStyle(gameContainer).backgroundColor || '#333333');

    togglePlatforms.checked = platforms.every(el => el.style.display !== 'none');
    toggleObstacles.checked = obstacles.every(el => el.style.display !== 'none');
    toggleEnemies.checked = enemies.every(el => el.style.display !== 'none');
    togglePowerups.checked = powerUps.every(el => el.style.display !== 'none');
    toggleCoins.checked = coins.every(el => el.style.display !== 'none');

    // Extract & show all CSS classes initially
    allCssClasses = extractAllCssClasses();
    filteredClasses = allCssClasses;
    currentElementPage = 0;
    selectedElementClass = null;
    spawnElementBtn.disabled = true;
    searchInput.value = '';
    displayElementList();
    renderFunFunctions();
    clearAllElements();
    playerPositionX = 50;
    playerPositionY = 0;
    player.style.left = playerPositionX + 'px';
    player.style.bottom = playerPositionY + 'px';

    score = 0;
    lives = 3;
    level = 1;
    updateDisplay();
    startGame();
    gui.style.left = '';
    gui.style.top = '';
    gui.style.right = '20px';
    gui.style.bottom = '';

    if (gameInterval) clearInterval(gameInterval);
    gameInterval = setInterval(gameLoop, 1000 / 60);

    log('Sandbox Mode activated');

    // Ensure sandbox doesn't auto-close when starting for testing
  }

  // Utility: convert rgb/rgba string to hex color for input[type=color]
  function rgbToHex(rgb) {
    const m = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
    if (!m) return '#000000';
    return "#" + ((1 << 24) + (parseInt(m[1]) << 16) + (parseInt(m[2]) << 8) + parseInt(m[3])).toString(16).slice(1);
  }

  // Hide sandbox GUI initially (until mode started)
  gui.style.display = 'none';

  // Expose startSandboxMode globally for your "Sandbox Mode" button
  window.startSandboxMode = startSandboxMode;

  // Optional: you can auto-enable sandbox for testing now:
  //startSandboxMode();

  // --- DONE SETUP ---
 

            window.addEventListener('keydown', handleKeydown);
            window.addEventListener('keyup', handleKeyup);


const upgrades = [
    { name: 'Super Speed', price: 4500, effect: 'Increase speed by 10%', id: 'speedBoost' },
    { name: 'Super bullet', price: 1200, effect: 'Faster bullet speed', id: 'doubleDamage' },
    { name: 'Double jump', price: 7500, effect: 'Double jump', id: 'doubleJump' },
    { name: 'Extra Lives', price: 2500, effect: 'Gain 3 extra lives', id: 'ExtraLives' }, // Add this line for Extra Lives
    // Add more upgrades as needed
];

function getCssClasses() {
    const classes = new Set();
    for (const sheet of document.styleSheets) {
        try {
            if (!sheet.cssRules) continue; // skip if no rules available
            for (const rule of sheet.cssRules) {
                if (rule.selectorText) {
                    const selectors = rule.selectorText.split(/\s*,\s*/);
                    selectors.forEach(selector => {
                        // Match class names in selectors (e.g. ".enemy", ".split-enemy", ".boss-door")
                        const matches = selector.match(/\.(\w[\w-]*)/g);
                        if (matches) {
                            matches.forEach(cls => classes.add(cls.substring(1)));
                        }
                    });
                }
            }
        } catch (e) {
            // Ignore CORS protected stylesheets
        }
    }
    return Array.from(classes).sort();
}

// Render elements with search and preview support


function showEndlessModeButton() {
    const endlessBtn = document.getElementById('endless-mode-btn');
    if (endlessBtn) {
        endlessBtn.style.display = 'inline-block';
        endlessBtn.disabled = false;
    }
}

function showSandboxModeButton() {
    const sandboxBtn = document.getElementById('sandbox-mode-btn');
    if (sandboxBtn) {
        sandboxBtn.style.display = 'inline-block';
        sandboxBtn.disabled = false;
    }
}

// Function to select an upgrade
// Function to select the current upgrade
function selectUpgrade(index) {
    selectedUpgrade = upgrades[index]; // Select the upgrade at the given index
}

function updateShopScoreDisplay() {
    const shopScoreDisplay = document.getElementById('shop-score');
    shopScoreDisplay.textContent = `Shop Score: ${playerScore}`; // Display the total amount
}

// Function to display current selected upgrade details
function displaySelectedUpgrade() {
    const upgradeInfo = document.getElementById("upgrade-list");
    upgradeInfo.innerHTML += `<br><strong>Selected Upgrade:</strong><br>
        ${selectedUpgrade.name}<br>
        Price: ${selectedUpgrade.price}<br>
        Effect: ${selectedUpgrade.effect}<br>`;
}

// Declare the selectedUpgrade at the top
let selectedUpgrade = null;
let currentUpgradeIndex = 0; // Keep track of the currently selected upgrade

// Function to open upgrades
function openUpgrades() {
    document.getElementById("instructions").style.display = "none"; // Hide main menu
    document.getElementById("upgrades-menu").style.display = "block"; // Show upgrades menu
    displayUpgradeOptions(); // Display available upgrades
    selectUpgrade(currentUpgradeIndex); // Start with first upgrade selected
}

function closeUpgrades() {
    document.getElementById("upgrades-menu").style.display = "none"; // Hide upgrades menu
    document.getElementById("instructions").style.display = "flex"; // Show main menu again
}

// Function to buy the selected upgrade
// Function to buy the selected upgrade
// Function to buy the selected upgrade

        function showGameModeOptions() {
            document.getElementById('instructions').style.display = 'none'; // Hide start button
            document.getElementById('game-mode-options').style.display = 'block'; // Show game mode options
        }

        // Function to show level options for Endless Mode
        function showLevelOptions() {
            document.getElementById('game-mode-options').style.display = 'none'; // Hide game mode options
            document.getElementById('level-options').style.display = 'block'; // Show level buttons
        }




function startEndlessMode(chosenLevel) {
    console.log('Endless Mode Selected for Level:', chosenLevel); // Debug log
        document.getElementById('level-options').style.display = 'none'; // Hide level options
    // Set the game mode to Endless
    localStorage.setItem('gameMode', 'endless'); // This sets the gameMode in local storage
    isEndlessMode = true; // Indicate that we are now in endless mode
    currentEndlessLevel = chosenLevel; // Set the chosen level for this session
    
    localStorage.setItem('endlessLevel', currentEndlessLevel); // Save the selected level to local storage

    resetGame(); // Reset your game state

    switchLevelBackground(); // Set the correct background according to currentEndlessLevel

    spawnEndlessEntities(); // Spawn enemies based on the current endless level

checkCollisionWithPlatformsAndObstacles();

    gameInterval = setInterval(gameLoop, 1000 / 60); // Start the game loop    
}

// Ensure the currentEndlessLevel is used in your functions where needed, 
// for instance in the game loop or resetGame function if appropriate
window.addEventListener('load', () => {
    loadEquippedUpgrades();

    const endlessUnlocked = localStorage.getItem('endlessModeUnlocked') === 'true';

    const sandboxBtn = document.getElementById('sandbox-mode-btn');

    const sandboxUnlocked = localStorage.getItem('sandboxModeUnlocked') === 'true';

    const endlessBtn = document.getElementById('endless-mode-btn');


    if (endlessUnlocked) {
        // Show endless mode button properly
        if (endlessBtn) {
            endlessBtn.style.display = 'inline-block';  // Show
            endlessBtn.disabled = false;
            endlessBtn.style.visibility = 'visible';
            endlessBtn.removeAttribute('hidden');
        }
    } else {
        // Hide endless mode button initially
        if (endlessBtn) {
            endlessBtn.style.display = 'none';
        }
    }

    if (sandboxUnlocked) {
        // Show endless mode button properly
        if (sandboxBtn) {
            sandboxBtn.style.display = 'inline-block';  // Show
            sandboxBtn.disabled = false;
            sandboxBtn.style.visibility = 'visible';
            sandboxBtn.removeAttribute('hidden');
        }
    } else {
        // Hide endless mode button initially
        if (sandboxBtn) {
            sandboxBtn.style.display = 'none';
        }
    }

    // Reset temp variables - only if you really intend to reset them on load
    currentGameMode = null;
    currentEndlessLevel = null;
});

// Store purchased upgrades separately

// Function to buy and equip/unequip upgrades
function buyUpgrade() {
    const upgrade = upgrades[currentPage]; // Get the currently displayed upgrade
    if (!upgrade) {
        return displayMessage("Please select an upgrade.");
    }

    const score = parseInt(localStorage.getItem('playerScore')) || 0;
    const upgradeIndex = upgradesEquipped.indexOf(upgrade.id);
    const purchasedIndex = upgradesPurchased.indexOf(upgrade.id);

    // If the upgrade is already equipped
    if (upgradeIndex > -1) {
        // Unequip logic
        upgradesEquipped.splice(upgradeIndex, 1);
        removeUpgradeEffects(upgrade); // Remove effects of the unequipped upgrade
        displayMessage(`${upgrade.name} has been unequipped!`);
    } else {
        // If the upgrade is already purchased but not equipped
        if (purchasedIndex > -1) {
            // Just equip the upgrade
            upgradesEquipped.push(upgrade.id);
            applyUpgrade(upgrade); // Apply effects of the newly equipped upgrade
            displayMessage(`${upgrade.name} has been equipped!`);
        } else {
            // Check if the player has enough score to buy the upgrade
            if (score < upgrade.price) {
                return displayMessage("You need more score to buy this upgrade.");
            }

            // Deduct the cost and "purchase" the upgrade
            localStorage.setItem('playerScore', score - upgrade.price);
            upgradesPurchased.push(upgrade.id); // Mark the upgrade as purchased
            upgradesEquipped.push(upgrade.id); // Equip it
            applyUpgrade(upgrade); // Apply effects of the newly equipped upgrade
            displayMessage(`${upgrade.name} has been equipped!`);
        }
    }

    // Save the equipped upgrades and purchased upgrades to local storage
    saveUpgrades();
    
    // Refresh equipped display if needed
    updateEquippedDisplay(); 

    // Update the button text or state accordingly
    updateButtonText(upgrade.id);
}

function loadEquippedUpgrades() {
    const savedUpgradesEquipped = localStorage.getItem('upgradesEquipped');
    if (savedUpgradesEquipped) {
        upgradesEquipped = JSON.parse(savedUpgradesEquipped); // Update contents instead of reassigning with const
        upgradesEquipped.forEach(upgradeId => {
            const upgrade = upgrades.find(up => up.id === upgradeId);
            if (upgrade) {
                applyUpgrade(upgrade); // Apply effects of loaded upgrades
            }
        });
    }

    const savedUpgradesPurchased = localStorage.getItem('upgradesPurchased');
    if (savedUpgradesPurchased) {
        upgradesPurchased = JSON.parse(savedUpgradesPurchased); // Update contents
    }
}

// Function to save the upgrades to local storage
function saveUpgrades() {
    localStorage.setItem('upgradesEquipped', JSON.stringify(upgradesEquipped));
    localStorage.setItem('upgradesPurchased', JSON.stringify(upgradesPurchased));
}

// Function to update the button text based on the equipped state
function updateButtonText(upgradeId) {
    const upgrade = upgrades.find(up => up.id === upgradeId);
    if (upgrade) {
        const button = document.getElementById('upgrade-list'); // Assume the button has this ID
        const isEquipped = upgradesEquipped.indexOf(upgradeId) > -1;
        button.textContent = isEquipped ? "Unequip" : "Buy Upgrade"; 
    }
}

// Function to remove effects when unequipping an upgrade
function removeUpgradeEffects(upgrade) {
    switch (upgrade.id) {
        case 'speedBoost':
            playerMaxSpeed -= 1.5; // Revert speed increase
            break;
        case 'doubleDamage':
            bulletSpeed -= 7;
            break;
        case 'doubleJump':
            maxJumps = 1
            isDoubleJumpEnabled = false; // Enable double jump
            console.log('Double Jump Activated!');
            break;
        case 'ExtraLives': // New case for Extra Lives upgrade
            removeLife();
            console.log('Extra lives granted! Total lives:', lives); // Log the new lives total
            break;
        // Add additional cases for removing effects of new upgrades here
    }
}

function startGamee() {
                localStorage.setItem('gameMode', 'story'); // Set game mode to endless
                startGame();
}

// Function to apply effects of an upgrade
function applyUpgrade(upgrade) {
    switch (upgrade.id) {
        case 'speedBoost':
            playerMaxSpeed += 2; // Increase speed
            break;
        case 'doubleDamage':
            bulletSpeed += 7;
            break;
        case 'doubleJump':
            maxJumps = 2; // Allow an additional jump
            isDoubleJumpEnabled = true; // Enable double jump
            console.log('Double Jump Activated! You can now jump again mid-air.');
            break;
        case 'ExtraLives': // New case for Extra Lives upgrade
            gainExtraLife2();
            console.log('Extra lives granted! Total lives:', lives); // Log the new lives total
            break;
        // Add additional cases for new upgrades here
    }
}

// Function to view equipped upgrades
function viewEquippedUpgrades() {
    const equippedList = document.getElementById("equipped-upgrades");
    
    // Toggle display of the equipped upgrades
    if (equippedList.style.display === "none") {
        equippedList.style.display = "block"; // Show the equipped upgrades
        updateEquippedDisplay(); // Update the display with currently equipped upgrades
    } else {
        equippedList.style.display = "none"; // Hide the equipped upgrades
    }
}

// Function to update the equipped display
function viewEquippedUpgrades() {
    // Open a new blank tab
    const equippedWindow = window.open("", "_blank");
    
    // Create the HTML content for the equipped upgrades
    let equippedContent = '<html><head><title>Equipped Upgrades</title></head><body>';
    equippedContent += '<h3>Equipped Upgrades:</h3>'; // Add header

    if (upgradesEquipped.length === 0) {
        equippedContent += "<p>No upgrades equipped.</p>"; // Message when no upgrades are equipped
    } else {
        upgradesEquipped.forEach(id => {
            const upgrade = upgrades.find(upg => upg.id === id);
            if (upgrade) {
                equippedContent += `
                    <div>
                        <strong>${upgrade.name}</strong><br>
                        Price: ${upgrade.price}<br>
                        Effect: ${upgrade.effect}<br>
                    </div>
                    <hr>
                `;
            }
        });
    }

    equippedContent += '</body></html>'; // Close HTML tags
    
    // Write the content to the new window
    equippedWindow.document.write(equippedContent);
    equippedWindow.document.close(); // Close the document for rendering
}

function updateEquippedDisplay() {
    const equippedList = document.getElementById("equipped-upgrades");
    equippedList.innerHTML = ""; // Clear the current display

    if (upgradesEquipped.length === 0) {
        equippedList.innerHTML = "<p>No upgrades equipped.</p>"; // Handle the case where no upgrades are equipped
    } else {
        upgradesEquipped.forEach(id => {
            const upgrade = upgrades.find(upg => upg.id === id);
            if (upgrade) {
                equippedList.innerHTML += `
                    <div>
                        <strong>${upgrade.name}</strong><br>
                        Price: ${upgrade.price}<br>
                        Effect: ${upgrade.effect}<br>
                    </div>
                    <hr>
                `;
            }
        });
    }
}

if (upgradesEquipped.includes(selectedUpgrade.id)) {
    // Unequip logic
    const index = upgradesEquipped.indexOf(selectedUpgrade.id);
    if (index > -1) upgradesEquipped.splice(index, 1);
    displayMessage(`${selectedUpgrade.name} is now unequipped!`);
} else {
    // Equip logic
    localStorage.setItem('playerScore', score - selectedUpgrade.price);
    upgradesEquipped.push(selectedUpgrade.id);
    displayMessage(`${selectedUpgrade.name} has been equipped!`);
}

// Refresh equipped display
updateEquippedDisplay(); // Call it here to update the UI

function updateNavigationButtons(totalUpgrades) {
    const prevBtn = document.querySelector('#upgrades-menu button[onclick="previousUpgrade()"]');
    const nextBtn = document.querySelector('#upgrades-menu button[onclick="nextUpgrade()"]');
    
    prevBtn.disabled = currentPage === 0; // Disable if on the first page
    nextBtn.disabled = (currentPage + 1) * upgradesPerPage >= totalUpgrades; // Disable if on the last page
}



// Function to display messages to the player
function displayMessage(text, seconds = 3) {
    bossMessageElement.textContent = text; // example
    bossMessageElement.style.display = "block";
    setTimeout(() => {
        bossMessageElement.style.display = "none";
    }, seconds * 1000);
}

function nextUpgrade() {
    if (currentPage < upgrades.length - 1) {
        currentPage++;
        displayUpgradeOptions();
    }
}

function previousUpgrade() {
    if (currentPage > 0) {
        currentPage--;
        displayUpgradeOptions();
    }
}

function displayUpgradeOptions() {
    const upgradeList = document.getElementById("upgrade-list");
    const upgrade = upgrades[currentPage];


    const equipped = upgradesEquipped.includes(upgrade.id) ? " (Equipped)" : ""; // Check if equipped
    upgradeList.innerHTML = `
        <strong>${upgrade.name}</strong>${equipped}<br>
        Price: ${upgrade.price}<br>
        Effect: ${upgrade.effect}<br>
    `;

    // Update navigation buttons
    updateNavigationButtons();
}

 
function handleKeydown(e) {
    switch (e.key) {
        case 'ArrowLeft':
            movingLeft = true;
            currentDirection = -1;
            break;
        case 'ArrowRight':
            movingRight = true;
            currentDirection = 1;
            break;
        case 'ArrowUp':
            handleJump();
            break;
        case ' ': // Space bar for shooting
            if (canShoot) {
                shootBullet(currentDirection);
                canShoot = false;
                setTimeout(() => canShoot = true, 300);
            }
            break;
        case 'z':
        case 'Z': // Power-Up activation
            if (currentPowerUp) { // Check if there is a power-up to use
                usePowerUp();
            } else if (bossPowerObtained) { // Charge if the boss power is obtained and no power-up is active
                isCharging = true;
                chargeTime = 0;
            }
            break;
        case 'e':
        case 'E':
            interact(); // Trigger the interact function when 'E' is pressed
            break;
    }
}
 
function handleKeyup(e) {
    switch (e.key) {
        case 'ArrowLeft':
            movingLeft = false;
            break;
        case 'ArrowRight':
            movingRight = false;
            break;
        case 'z':
        case 'Z':
            if (bossPowerObtained && isCharging) {
                isCharging = false;
                shootLaserBlast(chargeTime);
            }
            break;
    }
}
 
 
function handleJump() {
    if (playerPositionY === 0) { // If the player is on the ground, perform a regular jump
        playerVelocityY = playerJumpStrength; // Apply jump force
        jumpCount = 1; // Set jump count to indicate first jump
        isJumping = true; // Set jumping status to true
    } else if (jumpCount < maxJumps) { // Allow double jump if jump count allows
        doubleJump(); // Call double jump function
    }
}
 
            function nextDialogue() {
                if (dialogueIndex < dialogues.length - 1) {
                    dialogueIndex++;
                    dialoguePara.textContent = dialogues[dialogueIndex];
                } else {
                    intro.style.display = 'none';
                    startGame();
                }
            }





function doubleJump() {
    if (jumpCount < maxJumps) { // Check if the player can still jump
        playerVelocityY = playerJumpStrength; // Apply jump force
        jumpCount++; // Increment the jump count
        isJumping = true; // Set jumping status to true
    }
}
 
            function shootBullet(direction) {
                const bullet = createBullet(direction);
                bullets.push({ element: bullet, direction });
                gameWorld.appendChild(bullet);
 
                if (currentPowerUp === 'double-shot') {
                    const altBullet = createBullet(direction + 1);
                    bullets.push({ element: altBullet, direction });
                    gameWorld.appendChild(altBullet);
                }
 
                if (currentPowerUp === 'speed-bullet') {
                    const sideBullet1 = createBullet(direction + 6);
                    const sideBullet2 = createBullet(direction - 6);
                    bullets.push({ element: sideBullet1, direction });
                    bullets.push({ element: sideBullet2, direction });
                    gameWorld.appendChild(sideBullet1);
                    gameWorld.appendChild(sideBullet2);
                }
            }
 
            function createBurst(x, y) {
                const burst = document.createElement('div');
                burst.classList.add('burst');
                burst.style.left = x + 'px';
                burst.style.bottom = y + 'px';
                gameWorld.appendChild(burst);
                setTimeout(() => burst.remove(), 500);
            }
 
function moveCamera() {
    if (!isInBossDoor) {
        let proposedScroll = Math.max(0, playerPositionX - (gameContainer.offsetWidth / 2));

        if (proposedScroll > maxGameScrollPosition) {
            maxGameScrollPosition = proposedScroll;
        }
        gameScrollPosition = maxGameScrollPosition;
    } else {
        // Inside boss door, camera follows player freely (no scrolling restrictions)
        gameScrollPosition = Math.max(0, playerPositionX - (gameContainer.offsetWidth / 2));
    }

    gameWorld.style.transform = `translateX(${-gameScrollPosition}px)`;
}

// Function to reset player and possibly generate more obstacles
function resetPlayerPosition() {
    playerPositionX = 50; // Reset to starting position
    player.style.left = playerPositionX + 'px'; // Ensure the player is positioned correctly

    // Optionally, regenerate obstacles or enemies here
    regenerateEntities(); // Call a function that generates new obstacles and/or enemies
}

// Function to regenerate entities
function regenerateEntities() {
    // Logic to create and append new obstacles/enemies depending on your game mechanics
    for (let i = 0; i < 5; i++) { // Change the number to spawn desired quantity
        spawnObstacle(); // or spawnEnemy(); as needed
    }
}
 
let summonCooldown = 0;
 
function summonAllies() {
    for (let i = 0; i < 3; i++) {
        let ally = createElement('ally', [], parseInt(player.style.left) + (i * 30));
        ally.style.bottom = player.style.bottom;
        gameWorld.appendChild(ally);
 
        let destroyCount = 0;
        let moveInterval = setInterval(() => {
            ally.style.left = (parseInt(ally.style.left) + 5) + 'px';
 
            enemies.forEach((enemy, index) => {
                if (checkCollision(ally, enemy) && destroyCount < 3) {
                    enemy.remove();
                    enemies.splice(index, 1);
                    destroyCount++;
                }
            });
 
            if (destroyCount >= 3) {
                ally.remove();
                clearInterval(moveInterval);
            }
        }, 50);
 
        setTimeout(() => {
            ally.remove();
            clearInterval(moveInterval);
        }, 5000);
    }
}
 
 
 
function createBulletTrail(x, y) {
    const trail = document.createElement('div');
    trail.classList.add('bullet-trail');
    trail.style.left = x + 'px';
    trail.style.bottom = y + 'px';
    gameWorld.appendChild(trail);
 
    setTimeout(() => {
        trail.style.opacity = '0';
        setTimeout(() => trail.remove(), 300);
    }, 50);
}
 
function moveBullets() {
    bullets.forEach((bulletObj, index) => {
        const bullet = bulletObj.element;
        const bulletDirection = bulletObj.direction;

        // Calculate new position
        const newX = parseInt(bullet.style.left) + (bulletDirection * bulletSpeed);
        bullet.style.left = newX + 'px';

        createBulletTrail(newX, parseInt(bullet.style.bottom));

        // Remove if out of bounds
        if (newX > gameScrollPosition + gameContainer.offsetWidth || newX < 0) {
            bullet.remove();
            bullets.splice(index, 1);
        } else {
            // Check collisions with enemies
            for (let enemyIndex = 0; enemyIndex < enemies.length; enemyIndex++) {
                const enemy = enemies[enemyIndex];
                if (checkCollision(bullet, enemy)) {
                    if (enemy.classList.contains('reflective-enemy')) {
                        // Handle reflective enemy bullet collision
                        handleBulletCollisionWithReflectiveEnemy(enemy, bullet);
                        bullet.remove();
                        bullets.splice(index, 1);
                        break;
                    } else if (enemy.classList.contains('boost-drainer')) {
                        // Handle boost drainer bullet collision
                        if (handleBoostDrainerHit(bulletObj, index)) {
                            // Bullet handled and removed inside handler
                            break;
                        }
                    } else {
                        // Handle other enemy hits
                        handleEnemyHit(enemy, enemyIndex);
                        createBurst(newX, parseInt(bullet.style.bottom));
                        bullet.remove();
                        bullets.splice(index, 1);
                        break;
                    }
                }
            }
            checkBossHit();
        }
    });
}
 
function handleEnemyHit(enemy, enemyIndex) {
    if (enemy.classList.contains('split-enemy')) {
        handleSplitterEnemyHit(enemy, enemyIndex);
    } else if (enemy.classList.contains('infected')) {
        // Existing infected enemy logic...
        let shieldHitsLeft = parseInt(enemy.dataset.shieldHitsLeft) || 0;

        if (shieldHitsLeft > 0) {
            shieldHitsLeft--;
            enemy.dataset.shieldHitsLeft = shieldHitsLeft.toString();

            if (shieldHitsLeft === 0) enemy.classList.remove('shielded');

            enemy.style.opacity = '0.5';
            setTimeout(() => {
                if (enemy) enemy.style.opacity = '0.8';
            }, 150);
            return;
        }

        let health = parseInt(enemy.dataset.health) || 1;
        health--;

        if (health <= 0) {
            enemy.remove();
            enemies.splice(enemyIndex, 1);
        } else {
            enemy.dataset.health = health.toString();
            enemy.style.opacity = '0.5';
            setTimeout(() => {
                if (enemy) enemy.style.opacity = '0.8';
            }, 150);
        }
    } else {
        // Normal enemy - destroy immediately
        enemy.remove();
        enemies.splice(enemyIndex, 1);
    }

    score += 10;
    playerScore += 50;
    localStorage.setItem('playerScore', playerScore);
    updateDisplay();
}
 
function startGame() {
    // Hide game mode options and other screens
    document.getElementById("game-mode-options").style.display = "none";
    gameOverScreen.style.display = 'none';
    instructions.style.display = 'none';

    // Retrieve the game mode from local storage
    const gameMode = localStorage.getItem('gameMode');

    if (gameMode === 'story') {
        // Logic for starting Story Mode
        resetGame(false); // Continue from current Story Mode level
        levelIntro.style.display = 'flex'; // Show level intro for Story Mode
    } else if (gameMode === 'endless') {
        // Logic for starting Endless Mode
        if (!localStorage.getItem('endlessLevel')) {
            localStorage.setItem('endlessLevel', '1'); // Start Endless level at 1 if not set
        }
        resetGame(false); // Continue from last saved Endless level
        levelIntro.style.display = 'flex'; // Show level intro for Endless Mode
    } else if (gameMode === 'sandbox') {
        // Logic for starting Sandbox Mode
        // You can skip level intro or show some sandbox intro if you want
        resetGame(false); // Reset game for fresh sandbox session, or false to continue?
        levelIntro.style.display = 'none'; // Hide level intro; sandbox doesn't need level intro
        clearInterval(gameInterval); // Stop any existing intervals if any
    } else {
        // Default to Story Mode if no mode is set
        localStorage.setItem('gameMode', 'story'); // Default to Story Mode
        localStorage.setItem('storyLevel', '2'); // Set initial level for Story Mode
        resetGame(true); // Start a new game
        levelIntro.style.display = 'flex'; // Show level intro screen
    }
}
 
            function startLevel() {
                levelIntro.style.display = 'none';
                gameInterval = setInterval(gameLoop, 1000 / 60);
            }
 
function resetGame(isNewGame = false) {
    lives = upgradesEquipped.includes('ExtraLives') ? 6 : 3; // Set lives based on the Extra Lives upgrade

    // Reset player state variables
    playerPositionX = 50; 
    playerPositionY = 0; 
    playerVelocityX = 0; 
    playerVelocityY = 0; 
    isJumping = false;
    jumpCount = 0;
    isDoubleJumpEnabled = false; 
    gameScrollPosition = 0; 
    
    clearAllElements(); // Clear all game entities

    // Reset the level based on the game mode.
    const gameMode = localStorage.getItem('gameMode');
    if (gameMode === 'endless') {
        level = localStorage.getItem('endlessLevel') 
                ? parseInt(localStorage.getItem('endlessLevel')) // Retrieve endless level
                : 1; // Start at Level 1 if none found
    } else {
        level = localStorage.getItem('storyLevel') 
                ? parseInt(localStorage.getItem('storyLevel')) 
                : 1; // Default for story mode
    }

    switchLevelBackground(); // Set the background according to the current level

    updateDisplay(); // Reflect updates on the UI
}


 
function updateDisplay() {
    if (isEndlessMode) {
        // For Endless Mode
        levelDisplay.textContent = `Level: ${currentEndlessLevel}`;
    } else {
        // For Story Mode
        levelDisplay.textContent = `Level: ${storyModeLevel}`;
    }
    scoreDisplay.textContent = `Score: ${score}`;
    livesDisplay.textContent = `Lives: ${lives}`;
    timerDisplay.textContent = `Timer: ${powerUpTimer}`;
}
 



function updatePlayerPosition() {
    // Calculate velocity based on input
    if (movingRight) {
        playerVelocityX = playerMaxSpeed;
    } else if (movingLeft) {
        playerVelocityX = -playerMaxSpeed;
    } else {
        playerVelocityX = 0;
    }

    // Tentative new position
    let newPlayerX = playerPositionX + playerVelocityX;

    if (!isInBossDoor) {
        // Moving border and player left clamp applied only outside boss door/fight
        let proposedScroll = Math.max(0, newPlayerX - (gameContainer.offsetWidth / 2));

        if (proposedScroll > leftBoundaryX) {
            leftBoundaryX = proposedScroll;
        }

        if (newPlayerX < leftBoundaryX) {
            // Clamp player so they cannot move backward beyond moving border
            newPlayerX = leftBoundaryX;
        }
    }
    // Inside boss door, no restrictions on player X movement
    playerPositionX = newPlayerX;
    player.style.left = playerPositionX + 'px';

    // Jump/gravity logic stays the same...

    let onPlatform = checkCollisionWithPlatformsAndObstacles();

    platforms.forEach(platform => {
        if (checkCollision(player, platform) && playerVelocityY < 0) {
            playerPositionY = parseInt(platform.style.bottom) + platform.offsetHeight;
            playerVelocityY = 0;
            isJumping = false;
            jumpCount = 0;
            onPlatform = true;
        }
    });

    if (!onPlatform || isJumping) {
        playerVelocityY -= gravity;
        playerPositionY += playerVelocityY;

        if (playerPositionY <= 0) {
            playerPositionY = 0;
            playerVelocityY = 0;
            isJumping = false;
            jumpCount = 0;
        }
    } else {
        playerVelocityY = 0;
    }
    player.style.bottom = playerPositionY + 'px';

    // Move camera (handles boss door differently)
    moveCamera();
}


 
function spawnEntities() {
    if (!isPaused && !bossFightActive) {
        if (Math.random() < 0.003) spawnObstacle();
        
        // Spawn enemies based on the current level
        if (level === 1) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.003) spawnFlyingEnemy();
            if (Math.random() < 0.002) spawnObstacle();
        } else if (level === 2) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.002) spawnObstacle();
            if (Math.random() < 0.003) spawnChargingEnemy(); // Charging enemy option for Level 2
            if (Math.random() < 0.001) spawnSniperEnemy(); // Sniper enemy option for Level 2
        } else if (level === 3) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.002) spawnObstacle();
            if (Math.random() < 0.003) spawnFlyingEnemy(); // Flying enemy option for Level 3
            if (Math.random() < 0.001) spawnReflectiveEnemy(); // Reflective enemy option for Level 3
        } else if (level === 4) {
            if (Math.random() < 0.001) spawnLaserEnemy();
            if (Math.random() < 0.002) spawnSplitterEnemy();
        } else if (level === 5) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.002) spawnVirusDrone();
            if (Math.random() < 0.001) spawnSplitterEnemy();
        }

        if (Math.random() < 0.002 && !currentPowerUp) spawnPowerUp();
        if (Math.random() < 0.001) spawnPlatform();
        if (Math.random() < 0.003) spawnCoin();



        // Manage boss door spawning only if in Story Mode
        if (localStorage.getItem('gameMode') === 'story') {
            if (bossDoors.length === 0 && score >= level * bossScoreThreshold && enemies.length === 0) {
                spawnBossDoor();
            }
        }
    }
}
 

function cleanUpObjects() {
    // Remove obstacles that are too far to the left
    obstacles = obstacles.filter(obstacle => {
        const position = parseInt(obstacle.style.left);
        if (position < -obstacle.offsetWidth) {
            obstacle.remove(); // Remove from the DOM
            return false; // Do not keep this object in the active array
        }
        return true; // Keep this object in the active array
    });

    // Similarly for enemies
    enemies = enemies.filter(enemy => {
        const position = parseInt(enemy.style.left);
        if (position < -enemy.offsetWidth) {
            enemy.remove(); // Remove from the DOM
            return false; // Do not keep this object in the active array
        }
        return true; // Keep this object in the active array
    });
}

            function moveElements() {
                moveArray(obstacles, 2, 15);
                moveArray(enemies, 1, 30);
                moveArray(coins, 2, 0);
                moveArray(powerUps, 2, 0, true);
                moveArray(platforms, 1, 0);
                moveFlyingEnemies();
                moveSniperEnemies();
                moveLaserEnemies();
                moveReflectiveEnemies();
                moveSplitterEnemies();
                moveChargingEnemies();
                moveStealthEnemies();
                moveVirusDrones();
                moveBullets();
                moveNewEnemies();
                moveBoostDrainer()
            }

// Spawn a Laser Enemy (like a sniper — fixed x, y)
function spawnLaserEnemy() {
    const leftPos = gameScrollPosition + gameContainer.offsetWidth;
    const laserEnemy = createElement('laser-enemy', enemies, leftPos);
    laserEnemy.style.bottom = '300px';
    laserEnemy.style.width = '30px';
    laserEnemy.style.height = '30px';
    laserEnemy.style.backgroundColor = 'purple';
    laserEnemy.dataset.laserState = 'warning';
    laserEnemy.dataset.lastDamageTime = '0';
    laserEnemy._warningLine = null;
    laserEnemy._laserBeam = null;
    // createElement already does append and enemies.push
}

// Call every frame in moveEnemies or gameLoop
function moveLaserEnemies() {
    enemies.forEach(enemy => {
        if (!enemy.classList.contains('laser-enemy')) return;

        if (enemy.dataset.laserState === 'warning') {
            if (!enemy._warningLine) {
                createWarningLine(enemy);
                setTimeout(() => {
                    enemy.dataset.laserState = 'active';
                    if (enemy._warningLine) {
                        enemy._warningLine.remove();
                        enemy._warningLine = null;
                    }
                    if (enemy._warningLineUpdateInterval) {
                        clearInterval(enemy._warningLineUpdateInterval);
                        enemy._warningLineUpdateInterval = null;
                    }
                    activateLaserBeam(enemy);
                }, 1000);
            }
            // ⚠️ WARNING LINE DOES NOT DAMAGE PLAYER - NO COLLISION CHECK!
        } else if (enemy.dataset.laserState === 'active') {
            const lastDamageTime = parseInt(enemy.dataset.lastDamageTime) || 0;
            const now = Date.now();

            if (enemy._laserBeam && checkCollision(enemy._laserBeam, player)) {
                if (now - lastDamageTime > 1000) { // damage cooldown 1s
                    reduceLives();
                    enemy.dataset.lastDamageTime = now.toString();
                }
            }
        }
    });
}

 
            function spawnObstacle() {
                const obstacle = createElement('obstacle', obstacles, gameScrollPosition + gameContainer.offsetWidth);
                obstacle.style.bottom = '0px';
            }
 
            function spawnEnemy() {
                const baseEnemy = createElement('enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                baseEnemy.style.bottom = '0px';
 
                const chance = Math.random();
                if (chance < 0.3) {
                    spawnTeleporterEnemy();
                } else if (chance < 0.7) {
                    spawnVelocityEnemy();
                } else if (chance < 0.9) {
                    spawnStickyEnemy();
                }
            }

function moveVirusDrones() {
    viruses.forEach((virus, vIndex) => {
        if (!virus.infectedCount) virus.infectedCount = 0; // init counter

        // Pick target enemy for infection
        if (!virus.targetEnemy || !enemies.includes(virus.targetEnemy)) {
            virus.targetEnemy = null;
            if (enemies.length > 0) {
                virus.targetEnemy = enemies[Math.floor(Math.random() * enemies.length)];
            } else {
                // No target, fly left and clean up if off-screen
                virus.style.left = (parseInt(virus.style.left) - parseInt(virus.dataset.speed)) + 'px';
                if(parseInt(virus.style.left) < gameScrollPosition - virus.offsetWidth) {
                    virus.remove();
                    viruses.splice(vIndex, 1);
                    virusDroneHits = 0;
                }
                return;
            }
        }

        const target = virus.targetEnemy;

        const virusPosX = parseFloat(virus.style.left) + virus.offsetWidth / 2;
        const virusPosY = parseFloat(virus.style.bottom);
        const enemyPosX = parseFloat(target.style.left) + target.offsetWidth / 2;
        const enemyPosY = parseFloat(target.style.bottom);

        const speedH = parseFloat(virus.dataset.speed) || 5;
        const speedV = 10;

        // Horizontal move gently towards target
        if (Math.abs(virusPosX - enemyPosX) > 5) {
            if (virusPosX < enemyPosX) {
                virus.style.left = (parseFloat(virus.style.left) + speedH) + 'px';
            } else {
                virus.style.left = (parseFloat(virus.style.left) - speedH) + 'px';
            }

            // Use smooth vertical cruising instead of forced fixed height (optional)
            const cruisingHeight = 350;
            let virusPosYCurrent = parseFloat(virus.style.bottom) || cruisingHeight;
            if (virusPosYCurrent < cruisingHeight) {
                virus.style.bottom = (virusPosYCurrent + speedV) + 'px';
            } else if (virusPosYCurrent > cruisingHeight) {
                virus.style.bottom = (virusPosYCurrent - speedV) + 'px';
            } else {
                virus.style.bottom = cruisingHeight + 'px';
            }
        } else {
            // Move vertically down inside enemy for infection smoothly
            const targetInsideY = enemyPosY + target.offsetHeight / 2;
            if (virusPosY > targetInsideY + 2) {
                // Smooth downward movement clamped to not go below targetInsideY + 2 
                let newBottom = virusPosY - speedV;
                if (newBottom < targetInsideY + 2) {
                    newBottom = targetInsideY + 2;
                }
                virus.style.bottom = newBottom + 'px';
            } else {
                infectEnemy(target);

                virus.infectedCount++; // Increment infection count
                virus.targetEnemy = null; // Reset target

                if (virus.infectedCount >= 3) {
                    // Destroy virus drone after infecting 3 enemies
                    virus.remove();
                    viruses.splice(vIndex, 1);
                    virusDroneHits = 0;
                }
            }
        }

        // Check bullets hitting virus drone - keep your existing logic here as needed
        bullets.forEach((bulletObj, bIndex) => {
            const bullet = bulletObj.element;
            if (checkCollision(virus, bullet)) {
                bullet.remove();
                bullets.splice(bIndex, 1);

                virusDroneHits++;
                if (virusDroneHits >= 3) {
                    virus.remove();
                    viruses.splice(vIndex, 1);
                    virusDroneHits = 0;
                    enemies.forEach(e => {
                        if (e.classList.contains('infected')) {
                            cureEnemy(e);
                        }
                    });
                }
            }
        });

        // Remove virus drone if off screen left
        if (parseFloat(virus.style.left) < gameScrollPosition - virus.offsetWidth) {
            virus.remove();
            viruses.splice(vIndex, 1);
            virusDroneHits = 0;
        }
    });
}

function createWarningLine(enemy) {
    if (enemy._warningLine) {
        enemy._warningLine.remove();
        enemy._warningLine = null;
    }

    const warning = document.createElement('div');
    warning.classList.add('laser-warning-line');

    const width = 6;

    const enemyLeft = parseInt(enemy.style.left);
    const enemyBottom = parseInt(enemy.style.bottom);
    const enemyHeight = enemy.offsetHeight;
    const left = enemyLeft + enemy.offsetWidth / 2 - width / 2;

    warning.style.position = 'absolute';
    warning.style.left = left + 'px';
    warning.style.bottom = '0px';
    warning.style.width = width + 'px';
    warning.style.height = (enemyBottom + enemyHeight) + 'px';
    warning.style.backgroundColor = 'yellow';
    warning.style.opacity = '0.7';
    warning.style.zIndex = '9';

    gameWorld.appendChild(warning);
    enemy._warningLine = warning;

    if (enemy._warningLineUpdateInterval) clearInterval(enemy._warningLineUpdateInterval);
    enemy._warningLineUpdateInterval = setInterval(() => {
        if (!enemy._warningLine) {
            clearInterval(enemy._warningLineUpdateInterval);
            enemy._warningLineUpdateInterval = null;
            return;
        }
        const curLeft = parseInt(enemy.style.left);
        const curBottom = parseInt(enemy.style.bottom);
        const leftPos = curLeft + enemy.offsetWidth / 2 - width / 2;
        enemy._warningLine.style.left = leftPos + 'px';
        enemy._warningLine.style.height = (curBottom + enemy.offsetHeight) + 'px';
    }, 16);
}

function activateLaserBeam(enemy) {
    if (enemy._warningLine) {
        enemy._warningLine.remove();
        enemy._warningLine = null;
    }
    if (enemy._warningLineUpdateInterval) {
        clearInterval(enemy._warningLineUpdateInterval);
        enemy._warningLineUpdateInterval = null;
    }
    if (enemy._laserBeam) {
        enemy._laserBeam.remove();
        enemy._laserBeam = null;
    }

    const laser = document.createElement('div');
    laser.classList.add('laser-beam');

    const laserWidth = 8;
    const enemyLeft = parseInt(enemy.style.left);
    const enemyBottom = parseInt(enemy.style.bottom);
    const enemyHeight = enemy.offsetHeight;
    const left = enemyLeft + enemy.offsetWidth / 2 - laserWidth / 2;

    laser.style.position = 'absolute';
    laser.style.left = left + 'px';
    laser.style.bottom = '0px';
    laser.style.width = laserWidth + 'px';
    laser.style.height = (enemyBottom + enemyHeight) + 'px';
    laser.style.backgroundColor = 'red';
    laser.style.opacity = '0.9';
    laser.style.zIndex = '10';

    gameWorld.appendChild(laser);
    enemy._laserBeam = laser;

    enemy._laserBeamUpdateInterval = setInterval(() => {
        if (!enemy._laserBeam) {
            clearInterval(enemy._laserBeamUpdateInterval);
            enemy._laserBeamUpdateInterval = null;
            return;
        }
        const curLeft = parseInt(enemy.style.left);
        const curBottom = parseInt(enemy.style.bottom);
        const leftPos = curLeft + enemy.offsetWidth / 2 - laserWidth / 2;

        enemy._laserBeam.style.left = leftPos + 'px';
        enemy._laserBeam.style.height = (curBottom + enemy.offsetHeight) + 'px';
    }, 16);

    setTimeout(() => {
        if (enemy._laserBeam) {
            enemy._laserBeam.remove();
            enemy._laserBeam = null;
        }
        clearInterval(enemy._laserBeamUpdateInterval);
        enemy._laserBeamUpdateInterval = null;

        enemy.dataset.laserState = 'cooldown';

        setTimeout(() => {
            enemy.dataset.laserState = 'warning';
        }, 3000);
    }, 2000);
}

// Infect Enemy function
// Infect Enemy function - updated for multiple shield hits and faster speed
function infectEnemy(enemy) {
    if (enemy.classList.contains('infected')) return; // Already infected
    enemy.classList.add('infected', 'shielded');

    enemy.dataset.health = '1';          // 1 health after shield
    enemy.dataset.shieldHitsLeft = '2';  // 2 shield hits before health

    // Store or retrieve base speed
    let baseSpeed = parseInt(enemy.dataset.baseSpeed) || 1;
    if (!enemy.dataset.baseSpeed) {
        baseSpeed = parseInt(enemy.dataset.speed) || 1;
        enemy.dataset.baseSpeed = baseSpeed.toString();
    }
    enemy.dataset.speed = (baseSpeed * 3).toString(); // Speed is tripled

    enemy.dataset.powerful = 'true';

    // Visual effects
    enemy.style.opacity = '0.8';
    enemy.style.filter = 'drop-shadow(0 0 5px lime)';
}

// Handle bullet collision with shielded enemy - place this inside your bullet collision code
function handleBulletCollisionWithInfectedEnemy(enemy, bulletIndex) {
    if (enemy.classList.contains('infected') && enemy.classList.contains('shielded')) {
        let shieldHitsLeft = parseInt(enemy.dataset.shieldHitsLeft) || 0;
        shieldHitsLeft--;

        // Shield hit logic to decrement shield hits
        if (shieldHitsLeft <= 0) {
            // Shield broken, now damage health
            enemy.dataset.shieldHitsLeft = '0';
            // Decrement health by 1 on each bullet after shield is down
            let health = parseInt(enemy.dataset.health) || 2; // default infected health 2
            health--;

            if (health <= 0) {
                // Enemy dies
                enemy.remove();
                enemies = enemies.filter(e => e !== enemy);
            } else {
                enemy.dataset.health = health.toString();
                // Maybe flash enemy to indicate hit
                enemy.style.opacity = '0.5';
                setTimeout(() => {
                    if (enemy) enemy.style.opacity = '0.8';
                }, 150);
            }
        } else {
            // Shield still active
            enemy.dataset.shieldHitsLeft = shieldHitsLeft.toString();
            // Flash on shield hit
            enemy.style.opacity = '0.5';
            setTimeout(() => {
                if (enemy) enemy.style.opacity = '0.8';
            }, 150);
        }

        // Remove the bullet after hit
        bullets[bulletIndex].element.remove();
        bullets.splice(bulletIndex, 1);

        return true;
    }
    return false;
}

// Cure enemy restores normal speed and removes shield
function cureEnemy(enemy) {
    enemy.classList.remove('infected', 'shielded');
    enemy.style.pointerEvents = 'auto';
    enemy.style.opacity = '1';
    enemy.style.filter = 'none';

    // Reset speed to baseSpeed or default 1
    enemy.dataset.speed = enemy.dataset.baseSpeed || '1';
    enemy.dataset.shieldHitsLeft = '0';
    enemy.dataset.health = '1'; // normal enemies 1 HP
    enemy.dataset.powerful = 'false';

    // You may reset other enemy attributes here if applied.
}


// Enhance Enemy stats (called on infection)
function enhanceEnemy(enemy) {
    // Example: double speed and fire rate if enemy shoots
    const speed = parseInt(enemy.dataset.speed) || 1;
    enemy.dataset.speed = speed * 2;

    // If enemy shoots bullets (like sniper), reduce cooldown or increase damage
    if(enemy.dataset.lastShotTime) {
        enemy.dataset.shootCooldown = (parseInt(enemy.dataset.shootCooldown) || 3000) / 2; 
    }

    // You can add more attribute enhancements here, e.g. health, damage, size
}

// Normalize Enemy back to default (called on cure)
function normalizeEnemy(enemy) {
    const speed = parseInt(enemy.dataset.speed) || 2;
    enemy.dataset.speed = speed / 2;

    if(enemy.dataset.lastShotTime) {
        enemy.dataset.shootCooldown = (parseInt(enemy.dataset.shootCooldown) || 1500) * 2;
    }

    // Reset any other attributes to normal here
}
 
            function spawnPowerUp() {
                const powerUpTypes = allPowerUpTypes;
                const type = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
                const powerUp = createElement('power-up', powerUps, gameScrollPosition + gameContainer.offsetWidth);
                powerUp.setAttribute('data-type', type);
                powerUp.style.backgroundColor = getPowerUpColor(type);
                powerUp.style.bottom = Math.floor(Math.random() * 100) + 'px';
            }
 
            function spawnCoin() {
                const coin = createElement('coin', coins, gameScrollPosition + gameContainer.offsetWidth);
                coin.style.bottom = Math.floor(Math.random() * 50 + 50) + 'px';
            }
 
function getPowerUpColor(type) {
    switch (type) {
        case 'super-speed': return 'lime';
        case 'invincibility': return 'gold';
        case 'teleportation': return 'violet';
        case 'reflective-shield': return 'aqua';
        case 'double-shot': return 'red';
        case 'extra-life': return 'lightgreen';
        case 'score-boost': return 'coral';
        case 'mega-jump': return 'fuchsia';
        case 'energy-blast': return 'limegreen'; // Specify colors for valid powers
        case 'light-speed': return 'white'; // Define colors for light-speed
        case 'blazing-trail': return 'gold'; // Specify for blazing-trail
        case 'sonic-wave': return 'blueviolet'; // Specify for sonic-wave
        case 'armor': return 'lightgrey'; // Define color for armor
        case 'telekinetic': return 'silver'; // Define color for telekinetic
        case 'camouflage': return 'darkgreen'; // Define color for camouflage
        case 'dimension-shift': return 'black'; // Define color for dimension-shift
        case 'energy-drain': return 'red'; // Define color for energy-drain
        case 'mind-control': return 'purple'; // Define color for mind-control
        case 'hologram': return 'pink'; // Define color for hologram
        case 'fire': return 'red'; // Define color for energy-drain
        case 'ice': return 'darkblue'; // Define color for energy-drain
        case 'hypno': return 'pink'; // Define color for energy-drain
        default: return 'white'; // Fallback for any unknown type
    }
}
 
            function spawnPlatform() {
                const platform = createElement('platform', platforms, gameScrollPosition + gameContainer.offsetWidth);
                platform.style.bottom = Math.floor(Math.random() * 200 + 100) + 'px';
            }
 
            function spawnBossDoor() {
                const bossDoor = createElement('boss-door', bossDoors, gameScrollPosition + gameContainer.offsetWidth + 200);
                bossDoor.style.bottom = '0px';
            }
 
function createElement(className, array, leftPosition, type = '') {
    const element = document.createElement('div');
    element.classList.add(className);
    if (type) element.setAttribute('data-type', type);
    element.style.left = leftPosition + 'px';
    gameWorld.appendChild(element);
    array.push(element);
    return element;
}
 
function moveArray(array, speed, scoreValue, isPowerUp = false) {
    array.forEach((el, index) => {
        el.style.left = (parseInt(el.style.left) - speed) + 'px';
        if (parseInt(el.style.left) < gameScrollPosition - el.offsetWidth) {
            removeElement(el, array, index, 0);
        } else if (checkCollision(player, el)) {
            handleCollision(el, array, index, scoreValue, isPowerUp);
        }
    });
}
 
            function removeElement(el, array, index, scoreValue) {
                el.remove();
                array.splice(index, 1);
                if (scoreValue) {
                    score += scoreValue;
                    updateDisplay();
                }
            }
 
function handleCollision(el, array, index, scoreValue, isPowerUp = false) {
    if (el.classList.contains('coin')) {
        score += 5; // Increase score for collecting a coin
        updateDisplay(); // Update the display if needed
    } 
    
    // Handle power-ups
    else if (isPowerUp) {
        applyPowerUp(el); // Apply power-up effects
    }
    
    // Handle boss door interactions
    else if (el.classList.contains('boss-door')) {
        if (score >= level * bossScoreThreshold) {
            interactMessage.textContent = "Press 'E' to enter boss door."; // Prompt for interaction
            interactMessage.style.display = checkCollision(player, el) ? 'block' : 'none'; // Show message if player is near
            if (checkCollision(player, el) && playerPositionX >= parseInt(el.style.left)) {
                openBossHallway(); // Proceed to boss hallway
            }
        }
    }

    // Handle enemy and obstacle collisions
    else if (el.classList.contains('enemy') || el.classList.contains('obstacle')) {
        reduceLives(); // Reduce player's lives on collision with enemies or obstacles
    }

    // Remove the collided element from the game world
    removeElement(el, array, index, scoreValue);
}
 
            function applyPowerUp(el) {
                if (currentPowerUp || currentPowerUp === 'boss-power-up') return;
 
                const type = el.getAttribute('data-type');
                if (type === 'boss-power-up') {
                    grantBossPowerUp();
                } else {
                    currentPowerUp = type;
                    let duration = 10;
                    activatePowerUp(type);
                    powerUpTimer = duration;
 
                    const powerUpInterval = setInterval(() => {
                        powerUpTimer--;
                        if (powerUpTimer <= 0) {
                            clearInterval(powerUpInterval);
                            resetPowerUp();
                        }
                        updateDisplay();
                    }, 1000);
                }
 
                displayPowerUpMessage(type);
            }

function activatePowerUp(type) {
    switch (type) {
        case 'super-speed':
            player.style.backgroundColor = 'lime';
            playerMaxSpeed += 8; // Increase speed
            break;
        case 'invincibility':
            player.style.backgroundColor = 'gold';
            PlayerInvincibility(); // Implement this function for invincibility
            break;
        case 'teleportation':
            teleportPlayer(); // Implement this function for teleportation
            break;
        case 'reflective-shield':
            activateReflectiveShield(); // Implement the reflective shield functionality
            break;
        case 'double-shot':
            enableDoubleShot(); // Implement functionality for double shot
            break;
        case 'extra-life':
            gainExtraLife(); // Implement functionality for gaining an extra life
            break;
        case 'score-boost':
            boostScore(); // Implement functionality for score boost
            break;
        case 'mega-jump':
            activateMegaJump(); // Implement functionality for mega jump
            break;
        case 'energy-blast':
            activateEnergyBlast(); // Implement functionality for energy blast
            break;
        case 'light-speed':
            player.style.backgroundColor = 'lime';
            playerMaxSpeed += 10; // Increase speed
            break;
        case 'blazing-trail':
            activateBlazingTrail(); // Implement functionality for blazing trail
            break;
        case 'sonic-wave':
            activateSonicWave(); // Implement functionality for sonic wave
            break;
        case 'armor':
            activateArmor(); // Implement functionality for armor
            break;
        case 'telekinetic':
            activateTelekinetic(); // Implement functionality for telekinetic
            break;
        case 'camouflage':
            activateCamouflage(); // Implement functionality for camouflage
            break;
        case 'dimension-shift':
            activateDimensionShift(); // Implement functionality for dimension shift
            break;
        case 'energy-drain':
            activateEnergyDrain(); // Implement functionality for energy drain
            break;
        case 'mind-control':
            activateMindControl(); // Implement functionality for mind control
            break;
        case 'hologram':
            activateHologram(); // Implement functionality for hologram
            break;
        case 'fire':
            shootFire();
            break;
        case 'ice':
            shootIce();
            break;
        case 'hypno':
            shootHypno();
            break;
        default:
            // Consider logging or managing invalid power-up requests
            console.log(`Unknown power-up type: ${type}`);
            break;
    }
}

function handlePlayerEnemyCollision() {
    enemies.forEach((enemy, index) => {
        // Check collision with the player
        if (checkCollision(player, enemy)) {
            if (enemy.classList.contains('frozen')) {
                // If frozen, destroy the enemy
                enemy.remove(); // Remove frozen enemy
                enemies.splice(index, 1); // Remove from the enemies array
                updateDisplay(); // Update any relevant game display elements if needed
            } else {
                // Normal behavior for non-frozen enemies
                reduceLives(); // This would reduce lives for non-frozen collisions
            }
        }
    });
}
 


function allowPlayerMovement(e) {
    switch (e.key) {
        case 'ArrowLeft':
            playerPositionX -= playerMaxSpeed; // Move left
            player.style.left = playerPositionX + 'px';
            break;
        case 'ArrowRight':
            playerPositionX += playerMaxSpeed; // Move right
            player.style.left = playerPositionX + 'px';
            break;
        case ' ': // Space to shoot
            shootBullet(currentDirection); // Allow shooting during freeze
            break;
    }
}
 
function resetPowerUp() {
    currentPowerUp = null; // Also can now be re-assigned
    player.style.backgroundColor = '#4CAF50';
    if (upgradesEquipped.includes('speedBoost')) {
        playerMaxSpeed = 7; // Set the boosted speed or any other value you want
    } else {
        playerMaxSpeed = 5; // Default speed if the upgrade is not equipped
    }
    player.style.opacity = '1';
    if (upgradesEquipped.includes('doubleJump')) {
        isDoubleJumpEnabled = true; // Enable double jump if upgrade is equipped
    } else {
        isDoubleJumpEnabled = false; // Disable double jump otherwise
    }
    clearTimeout(timeSlowTimeout);
    resetGravity();
}
 
            function displayPowerUpMessage(type) {
                powerUpMessage.textContent = `You obtained ${type.replace(/-/g, ' ')}!`;
                powerUpMessage.style.display = 'block';
                setTimeout(() => powerUpMessage.style.display = 'none', 2000);
            }
 
            function grantBossPowerUp() {
                bossPowerObtained = true;
                powerUpMessage.textContent = "Boss Power-Up Obtained!";
                powerUpMessage.style.display = 'block';
                setTimeout(() => powerUpMessage.style.display = 'none', 2000);
            }

function PlayerInvincibility() {
    // Check for collision with enemies
    enemies.forEach((enemy) => {
        if (checkCollision(player, enemy)) {
            if (!isInvincible) { // Only reduce lives if not invincible
                if (lives > 1) {
                    lives--; // Deduct a life when colliding with an enemy
                    updateDisplay(); // Update the displayed lives
                }
            }
        }
    });

    // Immediately reset lives to 3 if they drop below that
    if (lives < 3) {
        lives = 3; // Reset lives to 3 instantly
        updateDisplay(); // Update display to show 3 lives
    }
}
 
            function usePowerUp() {
                if (!currentPowerUp) return;
                switch (currentPowerUp) {
                    case 'ice':
                        shootIce();
                        break;
                    case 'sonic-wave':
                        activateSonicWave();
                        break;
                    case 'fire':
                        shootFire();
                        break;
                    case 'teleportation':
                        teleportPlayer();
                        break;
                    case 'levitate':
                        useLevitate();
                        break;
                    case 'hypno':
                        shootHypno();
                        break;
                    case 'double-shot':
                        shootDouble();
                        break;
                    default:
                        break;
                }
            }
 
function shootIce() {
    const iceBullet = createBullet(currentDirection); // Create the ice bullet
    iceBullet.style.backgroundColor = 'blue'; // Set bullet color to blue
    gameWorld.appendChild(iceBullet);

    const iceBulletObj = { element: iceBullet, direction: currentDirection };
    
    animateBullet(iceBulletObj, 5, (target) => {
        // Check for collision with enemies
        if (target.classList.contains('obstacles')) {
            target.classList.add('frozen'); // Mark the enemy as frozen
            target.style.backgroundColor = '#00f'; // Change color to blue
            target.style.opacity = '0.5'; // Reduce visibility
            target.dataset.isFrozen = 'true'; // Mark enemy as frozen

            // Set a timer to unfreeze
            setTimeout(() => {
                if (target.dataset.isFrozen === 'true') {
                    target.classList.remove('frozen'); // Remove frozen status
                    target.style.backgroundColor = ''; // Reset color
                    target.style.opacity = '1'; // Reset visibility
                    delete target.dataset.isFrozen; // Clear the frozen marker
                }
            }, 5000); // 5 seconds to unfreeze
        }
    });
}
 
function shootFire() {
  const fireBullet = createBullet(currentDirection);
  fireBullet.style.backgroundColor = 'red';
  fireBullet.classList.add('fire-bullet');   // << Add this class
  gameWorld.appendChild(fireBullet);

  const fireBulletObj = { element: fireBullet, direction: currentDirection };
  animateBullet(fireBulletObj);
}
 
            function useLevitate() {
                player.style.transform = 'translateY(-20px)';
                const levitateUp = setTimeout(() => {
                    player.style.transform = 'translateY(0)';
                    clearTimeout(levitateUp);
                }, 1000);
            }
 
            function enableDoubleShot() {
            }
 
            function createBullet(direction = 1) {
                const bullet = document.createElement('div');
                bullet.classList.add('bullet');
                bullet.style.backgroundColor = '#FFD700';
                bullet.style.left = (playerPositionX + player.offsetWidth / 2 - 5) + 'px';
                bullet.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px';
                return bullet;
            }
 
function shootHypno() {
  const hypnoBullet = createBullet(currentDirection);
  hypnoBullet.style.backgroundColor = 'pink';
  hypnoBullet.classList.add('hypno-bullet'); // << Add this class
  gameWorld.appendChild(hypnoBullet);

  const hypnoBulletObj = { element: hypnoBullet, direction: currentDirection };
  animateBullet(hypnoBulletObj);
}
 
            function shootDouble() {
                const bullet1 = createBullet(currentDirection);
                const bullet2 = createBullet(currentDirection);
                bullets.push({ element: bullet1, direction: currentDirection });
                bullets.push({ element: bullet2, direction: currentDirection });
                gameWorld.appendChild(bullet1);
                gameWorld.appendChild(bullet2);
            }
 
function hypnotizeEnemy(enemy) {
    let destroyCount = 0; // Count how many enemies are destroyed by this hypnotized enemy
    const moveInterval = setInterval(() => {
        let nearestEnemy = findNearestEnemyTo(enemy);
        if (!nearestEnemy) {
            enemy.remove(); // If no nearest enemy, remove this one
            clearInterval(moveInterval); // Stop interval
            return;
        }

        let ex = parseInt(enemy.style.left);
        let ey = parseInt(enemy.style.bottom);
        let nex = parseInt(nearestEnemy.style.left);
        let ney = parseInt(nearestEnemy.style.bottom);

        let dx = nex - ex;
        let dy = ney - ey;
        let distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < 5) {
            destroyCount++;
            createBurst(nex, ney); // Create an effect when destroying enemies
            nearestEnemy.remove();
            enemies = enemies.filter(e => e !== nearestEnemy); // Clean up enemies

            if (destroyCount >= 3) { // Define a limit for multiple enemies hypnotized
                enemy.remove(); // Remove this hypnotized enemy after doing its effects
                clearInterval(moveInterval); // Stop interval
            }
        } else {
            let angle = Math.atan2(dy, dx); // Calculate angle to move towards the nearest enemy
            enemy.style.left = (ex + Math.cos(angle) * 2) + 'px'; // Move slightly towards
            enemy.style.bottom = (ey + Math.sin(angle) * 2) + 'px';
        }
    }, 1000 / 60); // Run update at 60 FPS
}
 
            function findNearestEnemyTo(sourceEnemy) {
                let minDistance = Infinity;
                let closestEnemy = null;
 
                enemies.forEach(enemy => {
                    if (enemy !== sourceEnemy) {
                        let distance = calculateDistance(sourceEnemy, enemy);
                        if (distance < minDistance) {
                            minDistance = distance;
                            closestEnemy = enemy;
                        }
                    }
                });
 
                return closestEnemy;
            }
 
            function calculateDistance(el1, el2) {
                let el1Rect = el1.getBoundingClientRect();
                let el2Rect = el2.getBoundingClientRect();
                let dx = (el1Rect.left + el1Rect.width / 2) - (el2Rect.left + el2Rect.width / 2);
                let dy = (el1Rect.top + el1Rect.height / 2) - (el2Rect.top + el2Rect.height / 2);
                return Math.sqrt(dx * dx + dy * dy);
            }
 
            function enableDoubleJump(enable = true) {
                isDoubleJumpEnabled = enable;
            }

function moveBoostDrainer() {
    if (!boostDrainer) return;

    // Move left slowly
    let currentX = parseInt(boostDrainer.style.left);
    boostDrainer.style.left = (currentX - 0.5) + 'px'; // Adjust speed here

    // Remove if off-screen left
    if (currentX < gameScrollPosition - boostDrainer.offsetWidth) {
        removeBoostDrainer();
        return;
    }

    // Update chain line connecting player and boost drainer
    if (boostDrainerChain) {
        updateChainLine(boostDrainer, boostDrainerChain, player);
    }
}
 
function teleportPlayer() {
    if (isTeleporting) return; // Prevent multiple teleports in quick succession

    // Set cooldown
    isTeleporting = true; // Set to true to indicate teleport in progress

    // Calculate teleportation distance
    const teleportDistance = 145; // Increase this to a larger value for more noticeable teleport

    // Determine player current direction
    let teleportOffset = teleportDistance * currentDirection; // Use currentDirection to allow for left (-1) and right (1) teleporting

    // Update player position
    playerPositionX += teleportOffset; // Move the player in the direction they are facing
    playerPositionX = Math.max(0, Math.min(gameWorld.offsetWidth - player.offsetWidth, playerPositionX)); // Ensure player stays in bounds

    // Log positions for debugging
    console.log('Teleporting to position:', playerPositionX);

    player.style.left = playerPositionX + 'px'; // Update player's position on screen

    // Set a timeout for the cooldown
    setTimeout(() => {
        isTeleporting = false; // Reset teleport ability after cooldown
    }, 1000); // 1000 milliseconds = 1 second cooldown
}
 
            function toggleGravity() {
                const originalGravity = gravity;
                gravity = -gravity;
                setTimeout(() => {
                    gravity = originalGravity;
                }, 5000);
            }
 
function resetGravity() {
    gravity = Math.abs(gravity); // Needs to ensure gravity is declared with let or var
}
 
            function freezeEnemies() {
                enemies.forEach(enemy => {
                    enemy.style.transition = 'opacity 1s';
                    enemy.style.opacity = '0.2';
                    enemy.classList.add('frozen-enemy');
                });
                setTimeout(() => {
                    enemies.forEach(enemy => {
                        enemy.style.opacity = '1';
                        enemy.classList.remove('frozen-enemy');
                    });
                }, 5000);
            }
 
            function createClone() {
                const clone = createElement('player', [], playerPositionX + 50);
                clone.style.bottom = playerPositionY + 'px';
                clone.style.backgroundColor = '#00F';
                clone.style.border = '2px dashed #FFF';
                gameWorld.appendChild(clone);
                setTimeout(() => clone.remove(), 5000);
            }
 
            function triggerShockwave() {
                const shockwaveRadius = 10000;
                enemies.forEach(enemy => {
                    const dist = calculateDistance(player, enemy);
                    if (dist < shockwaveRadius) {
                        createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
                        enemy.remove();
                    }
                });
            }
 
            function absorbEnergy() {
                score += 50;
                updateDisplay();
            }
 
            function shrinkPlayer() {
                player.style.transform = 'scale(0.5)';
                setTimeout(() => player.style.transform = 'scale(1)', 5000);
            }
 
            function growPlayer() {
                player.style.transform = 'scale(1.5)';
                setTimeout(() => player.style.transform = 'scale(1)', 5000);
            }
 
            function healPlayer() {
                if (lives < 5) {
                    lives++;
                    updateDisplay();
                }
            }
 
            function activateShield() {
                player.style.border = '3px solid purple';
                player.style.opacity = '0.6';
                lives = Math.min(lives + 1, 7);
                updateDisplay();
            }
 
            function gainExtraLife() {
                lives = Math.min(lives + 1, 7);
                updateDisplay();
            }

function gainExtraLife2() {
    lives = Math.min(lives + 3, 6); // Increase lives by 3, ensuring it doesn't exceed 5
    updateDisplay(); // Update the display to reflect the new number of lives
}

function removeLife() {
    lives = Math.max(lives - 3, 3); // Decrease lives by 3, ensuring it doesn't fall below 3
    updateDisplay(); // Update the display to reflect the new number of lives
}
 
            function boostScore() {
                score += 100;
                updateDisplay();
            }
 
let consecutiveJumps = 0; // Initialize a variable to track consecutive jumps
const maxJumpCount = 3; // Maximum number of normal jumps before triggering a mega jump
const megaJumpMultiplier = 1.5; // Multiplier for the mega jump

function activateMegaJump() {
    if (consecutiveJumps < maxJumpCount) {
        // Perform a normal jump if within the max jump limit
        playerVelocityY = playerJumpStrength; // Regular jump value
        consecutiveJumps++; // Increment consecutive jumps
    } else {
        // Trigger a mega jump if max jump limit has been reached
        playerVelocityY = playerJumpStrength * megaJumpMultiplier; // Apply mega jump
        consecutiveJumps = 0; // Reset consecutive jumps to 0 after a mega jump
    }
    isJumping = true; // Set the jumping status to true
}

// Call this function whenever the player lands to reset the consecutive jumps count
function checkLanding() {
    if (playerPositionY <= 0) { // Assuming ground level is at y = 0
        consecutiveJumps = 0; // Reset consecutive jumps when landing
    }
}
 
            function activateReflectiveShield() {
                player.style.border = '3px dashed cyan';
                const reflectInterval = setInterval(() => {
                    bullets.forEach((bullet, index) => {
                        if (checkCollision(player, bullet.element)) {
                            bullet.direction *= -1;
                        }
                    });
                }, 1000 / 60);
 
                setTimeout(() => {
                    player.style.border = '';
                    clearInterval(reflectInterval);
                }, 5000);
            }
 
            function activateRegeneration() {
                const regenerationInterval = setInterval(() => {
                    if (lives < 5) lives++;
                    updateDisplay();
                    if (!currentPowerUp || currentPowerUp !== 'regeneration') {
                        clearInterval(regenerationInterval);
                    }
                }, 2000);
            }
 
            function activateMagnet() {
                const magnetInterval = setInterval(() => {
                    coins.forEach(coin => {
                        const coinX = parseInt(coin.style.left);
                        const coinY = parseInt(coin.style.bottom);
                        const dx = playerPositionX - coinX;
                        const dy = playerPositionY - coinY;
                        if (Math.sqrt(dx * dx + dy * dy) < 100) {
                            coin.style.left = (coinX + dx * 0.1) + 'px';
                            coin.style.bottom = (coinY + dy * 0.1) + 'px';
                        }
                    });
 
                    if (!currentPowerUp || currentPowerUp !== 'magnet') {
                        clearInterval(magnetInterval);
                    }
                }, 1000/ 60);
            }
 
            let timeSlowTimeout;
 
            function slowDownTime() {
                const originalTiming = 1000 / 60;
                clearInterval(gameInterval);
                gameInterval = setInterval(gameLoop, originalTiming * 2);
                timeSlowTimeout = setTimeout(() => {
                    clearInterval(gameInterval);
                    gameInterval = setInterval(gameLoop, originalTiming);
                }, 5000);
            }
 
function activateEnergyBlast() {
    const blastRadius = 100; // Define the radius of the blast
    const burst = document.createElement('div'); // Create a burst element
    burst.classList.add('energy-blast'); // Assign a class for styles
    burst.style.left = (playerPositionX - blastRadius) + 'px'; // Position the burst to the player's location
    burst.style.bottom = (playerPositionY - blastRadius) + 'px'; // Center the burst around the player
    gameWorld.appendChild(burst); // Add the burst to the game world

    // Set a timeout to remove the burst effect after a duration
    setTimeout(() => {
        burst.remove(); // Remove the burst after showing it
    }, 500); // Keep the burst visible for half a second

    // Identify and destroy nearby enemies
    let enemiesToRemove = enemies.filter(enemy => calculateDistance(player, enemy) < blastRadius);
    enemiesToRemove.forEach(enemy => {
        createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom)); // Create an explosion effect at enemy's location
        enemy.remove(); // Remove the enemy from the game
        enemies = enemies.filter(e => e !== enemy); // Ensure the enemy is removed from the enemies array
    });

    updateDisplay(); // Update the display to reflect any changes (like score)
}

function initializeBossHealth() {
    bossHealth = level === 3 ? 250 : 100; // Example health values based on level
    updateDisplay();
}
 
function activateBlazingTrail() {
    let trailInterval = setInterval(() => {
        const trail = document.createElement('div');
        trail.className = 'bullet'; // Using the same class for stylistic purposes
        trail.style.left = (playerPositionX + player.offsetWidth / 2) + 'px'; // Position trail based on player's location
        trail.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px'; // Center the trail on the player
        trail.style.backgroundColor = 'orange'; // Trail color
        gameWorld.appendChild(trail); // Add the trail to the game

        // Check collision with enemies
        enemies.forEach((enemy, enemyIndex) => {
            if (checkCollision(trail, enemy)) {
                // Create burst effect for visual feedback
                const burst = document.createElement('div');
                burst.className = 'burst'; // The CSS class for the burst effect
                burst.style.left = enemy.style.left; // Position it at the enemy's position
                burst.style.bottom = enemy.style.bottom; // Position it at the enemy's position
                gameWorld.appendChild(burst);
                
                // Clean up burst after a short duration
                setTimeout(() => burst.remove(), 500); // Remove burst after 0.5 seconds
                
                // Remove enemy
                enemy.remove(); // Remove the enemy from game
                enemies.splice(enemyIndex, 1); // Remove from enemies array to prevent future collisions
            }
        });

        // Remove the trail after a short duration
        setTimeout(() => trail.remove(), 500); // Remove trail after 0.5 seconds
    }, 100); // The interval for creating the trails

    // Automatically clear the interval after a certain time, e.g., 5 seconds
    setTimeout(() => {
        clearInterval(trailInterval); // Clear the interval for the trail creation
    }, 5000);
}


 
function activateSonicWave() {
    if (waveCooldown) return; // Prevent activation if already on cooldown
    waveCooldown = true; // Set cooldown to prevent further activation

    const wave = document.createElement('div');
    wave.className = 'wave'; // Class for wave styling
    wave.style.left = (playerPositionX - 50) + 'px'; // Center the wave below the player
    wave.style.bottom = (playerPositionY - 50) + 'px'; // Position just below player
    wave.style.backgroundColor = 'cyan'; // Wave color
    wave.style.width = '100px'; // Width of the wave
    wave.style.height = '100px'; // Height of the wave
    wave.style.position = 'absolute'; // Ensure proper positioning
    gameWorld.appendChild(wave); // Add the wave to the game world

    let destroyedBlocks = 0; // Track how many blocks have been destroyed

    // Move the wave forward quickly
    let waveInterval = setInterval(() => {
        wave.style.left = (parseInt(wave.style.left) + 10) + 'px'; // Move wave to the right

        // Check for collision with obstacles
        obstacles.forEach((block, index) => {
            if (checkCollision(wave, block) && destroyedBlocks < 3) { // Destroy only until 3 blocks
                // Create burst effect
                const burst = document.createElement('div'); 
                burst.className = 'burst';
                burst.style.left = block.style.left; 
                burst.style.bottom = block.style.bottom; 
                gameWorld.appendChild(burst);
                
                setTimeout(() => burst.remove(), 500); // Remove burst after half a second
                
                block.remove(); // Remove the obstacle
                obstacles.splice(index, 1); // Remove from the array
                destroyedBlocks++; // Increment the destroyed block count
            }
        });

        // Cleanup if wave goes off screen
        if (parseInt(wave.style.left) > gameWorld.offsetWidth) {
            clearInterval(waveInterval); // Stop moving the wave if it goes off screen
            wave.remove(); // Remove the wave
            resetWave(); // Reset block destruction count
            return; // Exit the function
        }
    }, 50); // Adjust speed of the wave as needed

    // Automatically remove the wave after a brief time
    setTimeout(() => {
        clearInterval(waveInterval); // Ensure the interval is cleared after time is up
        wave.remove(); // Remove the wave
        resetWave(); // Reset properties after the effect finishes
    }, 2000); // Duration of the wave effect (2 seconds)
}

// Reset wave properties for future use
function resetWave() {
    destroyedBlocks = 0; // Reset the number of destroyed blocks for future waves
    waveCooldown = false; // Reset cooldown state
}
 
            function activateArmor() {
                player.style.border = '3px solid steelblue';
                lives = Math.min(lives + 3, 5);
                updateDisplay();
            }
 
function activateTelekinetic() {
    const forceInterval = setInterval(() => {
        enemies.forEach((enemy, index) => {
            const enemyX = parseInt(enemy.style.left) + enemy.offsetWidth / 2; // Get center position
            const enemyY = parseInt(enemy.style.bottom) + enemy.offsetHeight / 2; // Get center position
            const dx = playerPositionX - enemyX;
            const dy = playerPositionY - enemyY;

            // Check if the player is within a certain distance (e.g., 100 pixels)
            if (Math.sqrt(dx * dx + dy * dy) < 100) {
                // Move the enemy upwards slightly
                enemy.style.bottom = (enemyY + 2) + 'px'; // Adjust height as necessary for feel
            } else if (enemyY > 0) { // Only lower it if above 0
                // Bring the enemy back down to ground level smoothly
                enemy.style.bottom = (enemyY - 2) + 'px'; // Adjust to bring back down
                // Stop exactly at the ground level if necessary
                if (parseInt(enemy.style.bottom) < 0) {
                    enemy.style.bottom = '0px'; // Prevent going below 0
                }
            }
        });
    }, 1000 / 60); // Update at 60 FPS

    // Optional: Set a timeout for how long telekinesis lasts
    setTimeout(() => clearInterval(forceInterval), 5000); // Lasts for 5 seconds
}
 
            function activateCamouflage() {
                player.style.opacity = '0.2';
                setTimeout(() => player.style.opacity = '1', 5000);
            }
 
// Array to temporarily hold removed enemies

function activateDimensionShift() {
    // Change the background color to indicate the shift
    gameWorld.style.backgroundColor = 'black';

    // Hide and remove all enemies in the game world
    enemies.forEach((enemy, index) => {
        enemy.style.transition = 'opacity 1s'; // Set transition for fading effect
        enemy.style.opacity = '0'; // Start fading the enemy
        setTimeout(() => {
            enemy.remove(); // Remove from the DOM after fading
            enemies.splice(index, 1); // Remove from the enemies array
        }, 1000); // Match the timeout to the fade-out duration (1 second)
    });

    // Hide and remove all obstacles in the game world
    obstacles.forEach((obstacle, index) => {
        obstacle.style.transition = 'opacity 1s'; // Set transition for fading effect
        obstacle.style.opacity = '0'; // Start fading the obstacle
        setTimeout(() => {
            obstacle.remove(); // Remove from the DOM after fading
            obstacles.splice(index, 1); // Remove from the obstacles array
        }, 1000); // Match the timeout to the fade-out duration (1 second)
    });

    // Reset background color after a period
    setTimeout(() => {
        gameWorld.style.backgroundColor = ''; // Reset the background color after 5 seconds

        // Restore removed enemies
        removedEnemies.forEach(removedEnemy => {
            // Re-create the enemy in the game world
            const newEnemy = createElement(removedEnemy.className, enemies, gameScrollPosition + gameContainer.offsetWidth);
            newEnemy.style.bottom = '0px'; // Reset position
            gameWorld.appendChild(newEnemy); // Append back to game world
        });

        // Clear out the removedEnemies array for future use
        removedEnemies = [];

        // If you have obstacles that should be restored, handle that here as well
        // You may need to keep track of removed obstacles in a similar way if needed
    }, 5000); // Keep the black background for 5 seconds
}
 
            function activateEnergyDrain() {
                const drainInterval = setInterval(() => {
                    if (score > 0) {
                        score -= 1;
                        updateDisplay();
                    }
                }, 100);
 
                setTimeout(() => clearInterval(drainInterval), 5000);
            }

function applyBurn(enemy) {
    // Prevent stacking multiple burns on same enemy
    if (enemy.classList.contains('burning')) return;

    enemy.classList.add('burning');
    enemy.style.backgroundColor = 'orange';  // Visual indicator for burn

    // Initialize or read enemy health (default to 3 if not set)
    let health = parseInt(enemy.dataset.health) || 3;
    enemy.dataset.health = health.toString();

    let burnTicks = 3;   // Number of damage ticks (seconds)
    const burnDamage = 1; // Damage per tick

    const burnInterval = setInterval(() => {
        if(burnTicks <= 0) {
            // Burn finished: cleanup visuals & interval
            clearInterval(burnInterval);
            enemy.classList.remove('burning');
            enemy.style.backgroundColor = '';  // Reset to original or default

            // Remove dataset health if enemy survived for neatness
            if (enemy.parentElement && health > 0) {
                enemy.dataset.health = health.toString();
            } else if (health <= 0) {
                enemy.remove();
                enemies = enemies.filter(e => e !== enemy);
            }

            return;
        }

        // Apply burn damage
        health -= burnDamage;

        // Update health dataset
        enemy.dataset.health = health.toString();

        // Optional: flash to indicate hit
        enemy.style.opacity = '0.5';
        setTimeout(() => {
            if(enemy) enemy.style.opacity = '1';
        }, 150);

        // Remove enemy if health depleted
        if (health <= 0) {
            clearInterval(burnInterval);
            if (enemy.parentElement) {
                enemy.remove();
                enemies = enemies.filter(e => e !== enemy);
            }
            return;
        }

        burnTicks--;
    }, 1000); // Tick every 1 second
}
 
function activateMindControl() {
    const hypnotizeRange = 1000; // Set hypnotize range in pixels (you can adjust this)

    // Loop through all enemies
    enemies.forEach(enemy => {
        const enemyX = parseInt(enemy.style.left) + (enemy.offsetWidth / 2); // Get the center of the enemy
        const enemyY = parseInt(enemy.style.bottom) + (enemy.offsetHeight / 2); // Get the center of the enemy
        const dx = playerPositionX - enemyX; // Calculate horizontal distance
        const dy = playerPositionY - enemyY; // Calculate vertical distance

        // Check if within the hypnotize range
        const distance = Math.sqrt(dx * dx + dy * dy); // Calculate distance to the player
        if (distance < hypnotizeRange) {
            if (!enemy.classList.contains('hypnotized')) {
                enemy.classList.add('hypnotized'); // Mark enemy as hypnotized
                enemy.style.backgroundColor = 'violet'; // Change color to indicate hypnotization
                
                // Call the function to handle hypnosis effects
                hypnotizeEnemy(enemy);
            }
        }
    });
}
 
function activateHologram() {
    const hologram = document.createElement('div');
    hologram.className = 'hologram'; // Use a hologram class for styling
    hologram.style.position = 'absolute';
    hologram.style.left = `${playerPositionX - 25}px`; // Position the hologram centered relative to player
    hologram.style.bottom = `${playerPositionY}px`; // Vertical alignment with player
    hologram.style.width = '50px'; // Fixed width for better visibility
    hologram.style.height = '50px'; // Fixed height for better visibility
    hologram.style.backgroundColor = 'rgba(0, 0, 255, 0.5)'; // Semi-transparent blue color
    hologram.style.borderRadius = '50%'; // Round shape
    hologram.style.zIndex = '100'; // Ensure the hologram is above other elements
    gameWorld.appendChild(hologram); // Add the hologram to the game world

    // Pulsate effect
    let scale = 5;
    const pulseSpeed = 0.05; // Adjust pulsate speed
    const maxScale = 1.2; // Maximum scale for pulsate
    const minScale = 1; // Minimum scale for pulsate
    
    const pulseInterval = setInterval(() => {
        scale += pulseSpeed * Math.sin(Date.now() / 500); // Use sine for smooth pulsating effect
        scale = Math.max(minScale, Math.min(scale, maxScale)); // Clamp scale
        hologram.style.transform = `scale(${scale})`;
    }, 100); // Make it appear smooth

    // Behavior to distract nearby enemies
    enemies.forEach(enemy => {
        const enemyX = parseInt(enemy.style.left) + (enemy.offsetWidth / 2);
        const enemyY = parseInt(enemy.style.bottom) + (enemy.offsetHeight / 2);
        const dx = playerPositionX - enemyX;
        const dy = playerPositionY - enemyY;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < 100) { // If enemy is within distraction range
            // Smoothly move the enemy away from the hologram
            const moveAmount = 50; // The distance to move away
            const newLeft = enemyX + (dx > 0 ? moveAmount : -moveAmount); // Move away from hologram
            enemy.style.transition = 'left 0.5s'; // Smooth movement transition
            enemy.style.left = `${newLeft}px`;
        }
    });

    // Remove the hologram after 5 seconds
    setTimeout(() => {
        clearInterval(pulseInterval); // Stop the pulsating effect
        hologram.remove(); // Remove hologram from the game world
    }, 7500);
}
 
function animateBullet(bulletObj, speed, impactCallback = () => {}) {
    const bulletInterval = setInterval(() => {
        const bullet = bulletObj.element;
        const newLeft = parseInt(bullet.style.left) + (bulletObj.direction * speed);
        bullet.style.left = newLeft + 'px';

        if (newLeft > gameScrollPosition + gameContainer.offsetWidth || newLeft < 0) {
            bullet.remove();
            clearInterval(bulletInterval);
            return;
        }

        for (const target of [...obstacles, ...enemies]) {
            if (checkCollision(bullet, target)) {
                // Handle infected + shielded enemy
                if (target.classList.contains('infected') && target.classList.contains('shielded')) {
                    let shieldHitsLeft = parseInt(target.dataset.shieldHitsLeft) || 2;
                    shieldHitsLeft--;

                    if (shieldHitsLeft <= 0) {
                        // Shield broken
                        target.dataset.shieldHitsLeft = '0';
                        target.classList.remove('shielded');

                        let health = parseInt(target.dataset.health) || 1;
                        health--;

                        if (health <= 0) {
                            target.remove();
                            enemies = enemies.filter(e => e !== target);
                        } else {
                            target.dataset.health = health.toString();
                            target.style.opacity = '0.5';
                            setTimeout(() => {
                                if (target) target.style.opacity = '0.8';
                            }, 150);
                        }
                    } else {
                        // Shield still active, just decrement and flash
                        target.dataset.shieldHitsLeft = shieldHitsLeft.toString();
                        target.style.opacity = '0.5';
                        setTimeout(() => {
                            if (target) target.style.opacity = '0.8';
                        }, 150);
                    }

                    createBurst(newLeft, parseInt(bullet.style.bottom));
                    bullet.remove();
                    clearInterval(bulletInterval);
                    return;
                }

                // Hypno bullet effect (no instant death)
                if (bullet.classList.contains('hypno-bullet') && target.classList.contains('enemy') && !target.classList.contains('hypnotized')) {
                    target.classList.add('hypnotized');
                    target.style.backgroundColor = 'pink';
                    hypnotizeEnemy(target);

                    createBurst(newLeft, parseInt(bullet.style.bottom));
                    bullet.remove();
                    clearInterval(bulletInterval);
                    return;
                }

                // Fire bullet effect (fade and remove obstacle)
if (bullet.classList.contains('fire-bullet') && target.classList.contains('enemy')) {
    applyBurn(target);
    bullet.remove();
    clearInterval(bulletMoveInterval);
    return;
}

                // Ice bullet effect (freeze, no instant death)
                if (bullet.classList.contains('ice-bullet')) {
                    if (target.classList.contains('obstacle') || target.classList.contains('enemy')) {
                        target.classList.add('frozen');
                        target.style.backgroundColor = '#00f';
                        target.style.opacity = '0.5';
                        target.dataset.isFrozen = 'true';

                        setTimeout(() => {
                            if (target.dataset.isFrozen === 'true') {
                                target.classList.remove('frozen');
                                target.style.backgroundColor = '';
                                target.style.opacity = '1';
                                delete target.dataset.isFrozen;
                            }
                        }, 5000);

                        createBurst(newLeft, parseInt(bullet.style.bottom));
                        bullet.remove();
                        clearInterval(bulletInterval);
                        return;
                    }
                }

                // Normal enemies and obstacles: remove on hit
                if (target.classList.contains('enemy') || target.classList.contains('obstacle')) {
                    target.remove();
                    enemies = enemies.filter(e => e !== target);
                    createBurst(newLeft, parseInt(bullet.style.bottom));
                    bullet.remove();
                    clearInterval(bulletInterval);
                    return;
                }

                // Apply other impact effects, if any
                impactCallback(target);

                bullet.remove();
                clearInterval(bulletInterval);
                return;
            }
        }
    }, 1000 / 60);
}
 
function reduceLives() {
    if (player.style.border) {
        player.style.border = '';
        player.style.opacity = '1';
    } else {
        lives--;
        if (lives <= 0) {
            endGame(false); // Call endGame if lives are 0
        } else {
        }
    }
    updateDisplay();
}

function resetBoss() {
    if (boss) {
        if (level === 3) {
            bossHealth = 150; // Restore boss health to 150 for level 3
        } else {
            bossHealth = 100; // Restore boss health for other levels
        }
        updateBossHealth(); // Update the UI to reflect the new health value
    }
}
 
            function checkCollision(rect1, rect2) {
                const rect1Bounds = rect1.getBoundingClientRect();
                const rect2Bounds = rect2.getBoundingClientRect();
                return !(rect1Bounds.top > rect2Bounds.bottom || rect1Bounds.bottom < rect2Bounds.top ||
                        rect1Bounds.left > rect2Bounds.right || rect1Bounds.right < rect2Bounds.left);
            }
 
            function togglePause() {
                if (isPaused) {
                    gameInterval = setInterval(gameLoop, 1000 / 60);
                    isPaused = false;
                } else {
                    clearInterval(gameInterval);
                    isPaused = true;
                }
            }
 
            function clearAllElements() {
                [obstacles, enemies, bullets.map(b => b.element), powerUps, platforms, bossDoors, coins]
                    .forEach(arr => {
                        arr.forEach(el => el.remove());
                        arr.length = 0;
                    });
            }
 
function interact() {
    if (checkCollision(player, friend)) {
        activateFriendDialogue();
    }
    bossDoors.forEach(door => {
        if (checkCollision(player, door)) {
            if (score >= level * bossScoreThreshold) {
                openBossHallway();
            } else {
                openBossHallway();
            }
        }
    });
}
 
            function openBossHallway() {
                bossHallway.style.display = 'flex';
                clearAllElements();
                clearInterval(gameInterval);

                isInBossDoor = true;
            }
 
function startBossFight() {
    bossHallway.style.display = 'none';
    isInBossDoor = true; // enable movement restrictions again if desired
    triggerBossFight();
    gameInterval = setInterval(gameLoop, 1000 / 60); // Ensure the game loop is running for updates
}
 
function incrementLevel() {
    level++; // Increment level

    // Check if the level exceeds 3; if so, reset to 1
    if (level > 3) {
        level = 1; // Reset to Level 1
    }

    playerMaxSpeed = 5; // Reset speed back to normal
    localStorage.setItem('playerLevel', level); // Save updated level in local storage
    updateDisplay(); // Update the game display
    resetGame(); // Reset game state


}
 
            function switchLevelBackground() {
                const backgrounds = ['#333', '#1E90FF', '#228B22', '#a3a3a3','#7208c1'];
                gameContainer.style.backgroundColor = backgrounds[(level - 1) % backgrounds.length];
            }
 
            function continueGame() {
                levelIntro.style.display = 'none';
                gameInterval = setInterval(gameLoop, 1000 / 60);
            }

function spawnEndlessEntities() {
    if (!isPaused && !bossFightActive) {
        if (Math.random() < 0.003) spawnObstacle();
        
        // Spawn enemies based on the current level
        if (level === 1) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.003) spawnFlyingEnemy();
            if (Math.random() < 0.002) spawnObstacle();
        } else if (level === 2) {
            if (Math.random() < 0.002) spawnObstacle();
            if (Math.random() < 0.003) spawnChargingEnemy(); // Charging enemy option for Level 2
            if (Math.random() < 0.001) spawnSniperEnemy(); // Sniper enemy option for Level 2
        } else if (level === 3) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.003) spawnFlyingEnemy(); // Flying enemy option for Level 3
            if (Math.random() < 0.001) spawnReflectiveEnemy(); // Reflective enemy option for Level 3
        } else if (level === 4) {
            if (Math.random() < 0.001) spawnLaserEnemy(); // Charging enemy option for Level 2
            if (Math.random() < 0.002) spawnSplitterEnemy();
        } else if (level === 5) {
            if (Math.random() < 0.005) spawnEnemy();
            if (Math.random() < 0.003) spawnVirusDrone(); // Charging enemy option for Level 2
            if (Math.random() < 0.001) spawnSniperEnemy(); // Sniper enemy option for Level 2
        }

        if (Math.random() < 0.002 && !currentPowerUp) spawnPowerUp();
        if (Math.random() < 0.001) spawnPlatform();
        if (Math.random() < 0.003) spawnCoin();



        // Manage boss door spawning only if in Story Mode
        if (localStorage.getItem('gameMode') === 'endless') {
            if (bossDoors.length === 0 && score >= level * bossScoreThreshold && enemies.length === 0) {
                spawnBossDoor();
            }
        }
    }
}


 
function gameLoop() {
    if (!isPaused) {
        updatePlayerPosition();

        const gameMode = localStorage.getItem('gameMode');

        if (gameMode === 'endless') {
            spawnEndlessEntities();
            switchLevelBackground();
        } else if (gameMode === 'story') {
            spawnEntities();
        } else if (gameMode === 'sandbox') {
            // Sandbox mode: No auto spawning
            level = 1; // Optional: force level here
        }

        moveElements();

        handlePlayerEnemyCollision();

        updateShopScoreDisplay();

        checkScoreForLevelTransition();
        updateBoostDrainer();
        updateDisplay();
    }
}
 
function endGame(isWin = false) {
    clearInterval(gameInterval);
    
    if (!isWin) {
        // Reset boss health if the game is lost
        resetBoss();
    }
    

    // Display the game over screen with the final score
    gameOverScreen.style.display = 'flex';
    if (localStorage.getItem('gameMode') === 'story') {
        gameOverScreen.innerHTML = `
            <p>${isWin ? 'Congratulations! You won!' : 'Game Over!'}</p>
            <p>Your current score: ${score}</p>
            <button onclick="restartGame2()">Restart</button>
        `;
    } else if (localStorage.getItem('gameMode') === 'endless') {
        gameOverScreen.innerHTML = `
            <p>Endless Mode Over!</p>
            <p>Your score: ${score}</p>
            <button onclick="restartGame()">Restart</button>
        `;
    }
}
 
            function restartGame() {
                gameOverScreen.style.display = 'none';
                resetGame();
                startLevel();
            }

            function restartGame2() {
                gameOverScreen.style.display = 'none';
                resetGame();
                startLevel();
            }
 
            function triggerBossFight() {
                bossFightScreen.style.display = 'flex';
                setTimeout(() => {
                    bossFightScreen.style.display = 'none';
                    startBossLogic();
                }, 2000);
            }
 
            function startBossLogic() {
                bossFightActive = true;
                boss = createElement('boss', [], 600);
                boss.style.bottom = '100px';
                gameWorld.appendChild(boss);
                displayBossHealth();
 
                cycleBossAttacks(); // Start the attack pattern cycle
            }
 
 
 



// Helper function for delay(ms)
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Example placeholder for displayMessage function
// You need to implement or adjust this to your UI


// New asynchronous cycleBossAttacks function


// Helper to sleep (wait) for milliseconds

// Display a message for specified seconds
async function displayMessageTimed(text, seconds) {
    displayMessage(text, seconds);
    await sleep(seconds * 1000);
}

// Displays all pre-attack messages in sequence, then calls and awaits attackFunc
async function preAttackWithMessage(messages, attackFunc) {
    for (const msg of messages) {
        await displayMessageTimed(msg.text, msg.durationSeconds);
    }
    await attackFunc();
}

async function cycleBossAttacks() {
    if (bossHealth <= 0) {
        if (!bossDefeatedMessageDisplayed) {
            bossDefeatedMessageDisplayed = true;
            await displayMessageTimed("Boss Defeated!", 5);
        }
        return;
    }

    if (!phaseStartTime) {
        phaseStartTime = Date.now();
        bossAttackPhase = 0;
    }

    bossAttacking = true;
    bossShielded = true;
    boss.classList.add('boss-shielded');

    const maxBossMoves = (level === 1) ? 4 : (level === 2) ? 4 : 6;

    switch (level) {
        case 1:
            switch (bossAttackPhase) {
                case 0: await bossEnemyBarrage(); break;
                case 1: await bossTargetSlam(); break;
                case 2: await bossNewPower(); break;
                case 3: await bossExplosionRain(); break;
            }
            break;

        case 2:
            switch (bossAttackPhase) {
                case 0: await bossPhaseTwoBarrage(); break;
                case 1: await bossPhaseTwoTargetSlam(); break;
                case 2: await bossPhaseTwoNewPower(); break;
                case 3: await bossPhaseTwoExplosionRain(); break;
            }
            break;

        case 3:
            if (bossAttackPhase === 0 && (Date.now() - phaseStartTime) < 13000) {
                await startPhaseThree();
                return;
            }
            switch (bossAttackPhase) {
                case 0: await bossPhaseThree(); break;
                case 1: await bossPhaseTwoExplosionRain2(); break;
                case 2: await bossPhaseTwoTargetSlam3(); break;
                case 3: await bossPhaseTwoNewPower2(); break;
                case 4: await bossPhaseTwoTargetSlam2(); break;
                case 5: await bossPhase5(); break;
            }
            break;

        case 4:
            if (bossAttackPhase === 0 && (Date.now() - phaseStartTime) < 13000) {
                await startPhaseFour();
                return;
            }
            switch (bossAttackPhase) {
                case 0:
                    await preAttackWithMessage(
                        [{ text: "Lets start with something simple!", durationSeconds: 4 }],
                        EnemyBarrage
                    );
                    break;
                case 1:
                    await preAttackWithMessage(
                        [{ text: "Incredible, a nice worthy foe.", durationSeconds: 3 }],
                        bossPhaseTwoTargetSlam3
                    );
                    break;
                case 2:
                    await preAttackWithMessage(
                        [{ text: "Well nobody has got this far before, your doing somehow great...", durationSeconds: 4 }],
                        bossPhase5
                    );
                    break;
                case 3:
                    await preAttackWithMessage(
                        [{ text: "How are you NOT DEAD YET?", durationSeconds: 3 }],
                        bossPhaseTwoExplosionRain2
                    );
                    break;
                case 4:
                    await preAttackWithMessage(
                        [{ text: "Your actully getting annoying now...", durationSeconds: 3 }],
                        bossPhaseThree
                    );
                    break;
                case 5:
                    await preAttackWithMessage(
                        [{ text: "Alright let me stop talking now its game on.", durationSeconds: 4 }],
                        slidingLaserPhase
                    );
                    break;
            }
            break;

        case 5:
            switch (bossAttackPhase) {
                case 0: await bossPhaseFiveAttackA(); break;
                case 1: await bossPhaseFiveAttackB(); break;
                case 2: await bossPhaseFiveAttackC(); break;
                case 3: await bossPhaseFiveAttackE(); break;
                case 4: await bossPhaseFiveAttackF(); break;
                case 5: await bossPhaseFiveAttackF(); break;
            }
            break;

        default:
            // You might want to handle unexpected level values here as well
            break;
    }

    // Increment phase for next attack
    bossAttackPhase = (bossAttackPhase + 1) % maxBossMoves;

    // Remove shield after 10s and notify player (fire-and-forget, no await needed)
    setTimeout(() => {
        bossShielded = false;
        boss.classList.remove('boss-shielded');
        displayMessage("Boss shield is OFF! Attack now!");
    }, 10000);
}



async function slidingLaserPhase() {
    displayMessage("Sliding laser phase! Jump over the lasers!", 3);
    await sleep(3000);

    const gameWorld = document.getElementById('game-world');
    const gameBounds = gameWorld.getBoundingClientRect();

    // Laser parameters
    const laserWidth = 150;
    const laserHeight = 20;
    const initialSpeed = 3;
    const maxBounces = 4;

    // Create laser elements
    function createLaserElement(y, direction) {
        const el = document.createElement('div');
        el.style.position = 'absolute';
        el.style.width = laserWidth + 'px';
        el.style.height = laserHeight + 'px';
        el.style.backgroundColor = 'red';
        el.style.bottom = y + 'px';
        el.style.left = (gameBounds.width / 2 - laserWidth / 2) + 'px'; // center horizontally
        el.style.borderRadius = '5px';
        el.style.zIndex = '100';
        gameWorld.appendChild(el);

        return {
            element: el,
            y: y,
            speed: initialSpeed,
            direction: direction,
            bounces: 0,
            destroyed: false,
            get left() {
                return this.element.offsetLeft;
            },
            set left(val) {
                this.element.style.left = val + 'px';
            },
            get right() {
                return this.left + laserWidth;
            },
            remove() {
                if (this.element.parentElement) {
                    this.element.parentElement.removeChild(this.element);
                }
                this.destroyed = true;
            }
        };
    }

    // Instantiate two lasers
    const lasers = [
        createLaserElement(gameBounds.height * 0.3, 1),
        createLaserElement(gameBounds.height * 0.5, -1)
    ];

    // Check collision between laser and player
    function laserCollidesWithPlayer(laser) {
        const laserRect = laser.element.getBoundingClientRect();
        const playerRect = player.getBoundingClientRect();

        return !(
            playerRect.right < laserRect.left ||
            playerRect.left > laserRect.right ||
            playerRect.bottom < laserRect.top ||
            playerRect.top > laserRect.bottom
        );
    }

    return new Promise(resolve => {
        function animate() {
            // If both destroyed, end phase
            if (lasers.every(l => l.destroyed)) {
                displayMessage("Sliding laser phase complete!", 3);
                setTimeout(() => {
                    resolve();
                    cycleBossAttacks();
                }, 3000);
                return;
            }

            lasers.forEach(laser => {
                if (laser.destroyed) return;

                let newLeft = laser.left + laser.speed * laser.direction;

                // Bounce left wall
                if (newLeft <= 0) {
                    newLeft = 0;
                    laser.direction *= -1;
                    laser.bounces++;
                    laser.speed *= 1.3; // speed up

                    if (laser.bounces >= maxBounces) {
                        laser.remove();
                        return;
                    }
                }

                // Bounce right wall
                if (newLeft + laserWidth >= gameBounds.width) {
                    newLeft = gameBounds.width - laserWidth;
                    laser.direction *= -1;
                    laser.bounces++;
                    laser.speed *= 1.3;

                    if (laser.bounces >= maxBounces) {
                        laser.remove();
                        return;
                    }
                }

                laser.left = newLeft;

                // Damage player if colliding
                if (laserCollidesWithPlayer(laser)) {
                    lives = Math.max(0, lives - 1);
                    displayMessage(`Ouch! Lives left: ${lives}`, 1);

                    // Optional knockback or player jump boost can be added here
                }
            });

            requestAnimationFrame(animate);
        }

        animate();
    });
}

function bossPhase5() {
    const blockWidth = 80;
    const blockHeight = 20;

    const lavaRiseSpeed = 4;           // pixels per tick
    const lavaRiseInterval = 100;      // ms
    const warningDuration = 1000;      // 1 second warning before lava rises
    const totalPhases = 3;
    const obstacleWidth = 30;   // Add this line
    const obstacleHeight = 30;  // Add this line
    const platformHeights = [100, 200, 300];
    const laserWarningDuration = 1000; // 1 second yellow warning before laser fires
    const laserPhaseDuration = 6000;   // total laser active time per phase (6 seconds)
    const laserBaseInterval = 1000;    // starting laser shoot interval

    const obstacles = [];
    const warningLines = [];
    const lasers = [];

    const gameWorld = document.getElementById('game-world');

    let currentPhase = 0;
    let lavaHeight = 0;
    let lavaInterval;
    let lastDamageTime = 0;

    // Save original jump settings
    let originalMaxJumps = maxJumps;
    let originalDoubleJumpEnabled = isDoubleJumpEnabled;

    let laserIntervalId = null;
    let laserTimeoutId = null;

    // Create or get lava element
    let lavaElement = gameWorld.querySelector('.lava');
    if (!lavaElement) {
        lavaElement = document.createElement('div');
        lavaElement.className = 'lava';
        Object.assign(lavaElement.style, {
            position: 'absolute',
            width: '100%',
            bottom: '0',
            backgroundColor: 'red',
            height: '0px',
            zIndex: '5',
            transition: 'height 0.1s linear',
        });
        gameWorld.appendChild(lavaElement);
    }

    // Clear existing platforms and obstacles
    function clearPlatformsAndObstacles() {
        obstacles.forEach(o => o.remove());
        obstacles.length = 0;

        const blocks = [...gameWorld.querySelectorAll('div')].filter(el =>
            el.style.backgroundColor === 'blue' &&
            el.offsetWidth === blockWidth &&
            el.offsetHeight === blockHeight
        );
        blocks.forEach(b => b.remove());
    }



    // Create a block platform
    function spawnBlock(x, y) {
        const block = document.createElement('div');
        Object.assign(block.style, {
            position: 'absolute',
            width: blockWidth + 'px',
            height: blockHeight + 'px',
            backgroundColor: 'blue',
            left: x + 'px',
            bottom: y + 'px',
            zIndex: '10',
        });
        gameWorld.appendChild(block);
        return block;
    }

    // Create obstacle near block to jump on
    function spawnObstacle(x, y) {
        const obstacle = document.createElement('div');
        obstacle.className = 'obstacle';
        Object.assign(obstacle.style, {
            position: 'absolute',
            width: obstacleWidth + 'px',
            height: obstacleHeight + 'px',
            backgroundColor: 'orange',
            left: x + 'px',
            bottom: y + 'px',
            zIndex: '10',
        });
        gameWorld.appendChild(obstacle);
        obstacles.push(obstacle);
        return obstacle;
    }

    function spawnPhasePlatforms(phase) {
        clearPlatformsAndObstacles();
        const yPos = platformHeights[phase];
        const xs = [100, 300, 500];

        xs.forEach(x => spawnBlock(x, yPos));
        xs.forEach(x => spawnObstacle(x + 70, yPos));
    }

    // Get player’s distance from bottom of gameWorld
    function getPlayerBottomOffset() {
        const playerRect = player.getBoundingClientRect();
        const worldRect = gameWorld.getBoundingClientRect();
        return worldRect.bottom - playerRect.bottom;
    }

    function setTripleJump() {
        maxJumps = 3;
        isDoubleJumpEnabled = true;
        jumpCount = 0;
    }

    function restoreJumpSettings() {
        maxJumps = originalMaxJumps;
        isDoubleJumpEnabled = originalDoubleJumpEnabled;
        jumpCount = 0;
    }

    function startLavaPhase() {
        displayMessage("Lava is rising soon! Prepare yourself!");
        setTimeout(() => {
            lavaHeight = 0;
            lavaElement.style.height = '0px';
            setTripleJump();
            lavaInterval = setInterval(riseLava, lavaRiseInterval);
        }, warningDuration);
    }

    // Lava rising step
    function riseLava() {
        const maxLavaHeight = platformHeights[currentPhase];

        if (lavaHeight < maxLavaHeight) {
            lavaHeight += lavaRiseSpeed;
            if (lavaHeight > maxLavaHeight) lavaHeight = maxLavaHeight;
            lavaElement.style.height = lavaHeight + 'px';

            const playerBottomPx = parseFloat(player.style.bottom) || 0;
            const playerVelocityDown = playerVelocityY <= 0;

// Remove or comment out this block inside riseLava:


            const now = Date.now();
            if (checkCollision(player, lavaElement)) {
                const playerBottom = getPlayerBottomOffset();
                if (playerBottom < lavaHeight && (now - lastDamageTime) > 1000) {
                    reduceLives();
                    lastDamageTime = now;
                }
            }
        } else {
            clearInterval(lavaInterval);
            startLaserPhase();
        }
    }

    // Create a warning line (yellow) above a block
    function createWarningLine(block) {
        const warning = document.createElement('div');
        warning.style.position = 'absolute';
        warning.style.width = blockWidth + 'px';
        warning.style.height = '5px';
        warning.style.backgroundColor = 'yellow';
        warning.style.left = block.style.left;
        warning.style.bottom = (parseInt(block.style.bottom) + blockHeight) + 'px';
        warning.style.zIndex = '20';
        gameWorld.appendChild(warning);
        warningLines.push(warning);
        return warning;
    }

    // Create a laser beam (red) that shoots upwards from a block
    function createLaser(block) {
        const laser = document.createElement('div');
        laser.style.position = 'absolute';
        laser.style.width = '50px';
        laser.style.height = '200px'; // laser beam height
        laser.style.backgroundColor = 'red';
        laser.style.left = (parseInt(block.style.left) + blockWidth / 2 - 3) + 'px'; // centered on block
        laser.style.bottom = (parseInt(block.style.bottom) + blockHeight) + 'px';
        laser.style.zIndex = '15';
        gameWorld.appendChild(laser);
        lasers.push(laser);

        // Remove laser after 0.5s
        setTimeout(() => {
            laser.remove();
            lasers.splice(lasers.indexOf(laser), 1);
        }, 500);
        return laser;
    }

    // Remove warning lines
    function clearWarningLines() {
        warningLines.forEach(w => w.remove());
        warningLines.length = 0;
    }

    // Remove all active lasers
    function clearLasers() {
        lasers.forEach(l => l.remove());
        lasers.length = 0;
    }

    // Laser phase variables
    let laserPhaseTimer = 0;
    let currentLaserInterval = laserBaseInterval;

    // Laser damage cooldown for player (similar to lava damage)
    let laserLastDamageTime = 0;

    // Laser Phase logic:
    // Every currentLaserInterval ms: choose a random block platform and:
    // - Draw a yellow warning line 1 second before laser fires
    // - After 1s, fire laser & damage player if in laser zone (once per laser)
    function laserTick() {
        if (laserPhaseTimer >= laserPhaseDuration) {
            // Laser phase ended
            clearInterval(laserIntervalId);
            clearWarningLines();
            clearLasers();
            lavaInterval = setInterval(lowerLava, lavaRiseInterval);
            return;
        }

        laserPhaseTimer += currentLaserInterval;

        // Get all current blocks (platforms player can jump on)
        const blocks = [...gameWorld.querySelectorAll('div')].filter(el =>
            el.style.backgroundColor === 'blue' &&
            el.offsetWidth === blockWidth &&
            el.offsetHeight === blockHeight
        );
        if (blocks.length === 0) return;

        // Pick a random block different from last one if possible
        let chosenBlock = blocks[Math.floor(Math.random() * blocks.length)];

        // WARNING LINE
        const warning = createWarningLine(chosenBlock);

        // After 1s fire laser & damage
        setTimeout(() => {
            warning.remove();
            warningLines.splice(warningLines.indexOf(warning), 1);

            const laser = createLaser(chosenBlock);

            // Check if player is in laser zone vertically and horizontally approx.
            const now = Date.now();
            const playerLeftPx = parseFloat(player.style.left) || 0;
            const playerRightPx = playerLeftPx + player.offsetWidth;

            const blockLeft = parseInt(chosenBlock.style.left);
            const blockRight = blockLeft + blockWidth;

            const laserTop = parseInt(laser.style.bottom) + parseInt(laser.style.height);
            const playerBottom = parseFloat(player.style.bottom) || 0;
            const playerTop = playerBottom + player.offsetHeight;

            // Check horizontal overlap
            const horizontalOverlap = playerRightPx > blockLeft && playerLeftPx < blockRight;
            // Check vertical overlap with laser beam
            const verticalOverlap = playerBottom < laserTop && playerTop > parseInt(laser.style.bottom);

            if (horizontalOverlap && verticalOverlap && (now - laserLastDamageTime) > 1000) {
                reduceLives();
                laserLastDamageTime = now;
            }
        }, laserWarningDuration);
    }

    // Lower lava smoothly after laser phase ends
    function lowerLava() {
        if (lavaHeight > 0) {
            lavaHeight -= lavaRiseSpeed;
            if (lavaHeight < 0) lavaHeight = 0;
            lavaElement.style.height = lavaHeight + 'px';

            // Adjust player standing on lava during lowering
            const playerBottomPx = parseFloat(player.style.bottom) || 0;
            const playerVelocityDown = playerVelocityY <= 0;
            if (playerBottomPx < lavaHeight && playerVelocityDown) {
                playerPositionY = lavaHeight;
                playerVelocityY = 0;
                isJumping = false;
                jumpCount = 0;
                player.style.bottom = playerPositionY + 'px';
            }
        } else {
            clearInterval(lavaInterval);
            // Next phase
            currentPhase++;
            if (currentPhase < totalPhases) {
                currentLaserInterval = Math.max(laserBaseInterval - currentPhase * 150, 400); // speeds up laser shooting each phase
                laserPhaseTimer = 0;
                spawnPhasePlatforms(currentPhase);
                startLavaPhase();
            } else {
                displayMessage("Lava and laser phases complete! Prepare for next boss attack.");
                setTimeout(() => {
                    clearPlatformsAndObstacles();
                    lavaElement.style.height = '0px';
                    restoreJumpSettings();
                    cycleBossAttacks();
                }, 2000);
            }
        }
    }

    // Start lava rising phases as before
    currentPhase = 0;
    spawnPhasePlatforms(currentPhase);
    displayMessage("Prepare! Lava will start rising soon!");

    setTimeout(() => {
        startLavaPhase();
    }, 1500);

    // Overwrite startLavaPhase so that after lava rises fully, laser phase starts
    function startLavaPhase() {
        displayMessage("Lava is rising soon! Prepare yourself!");
        setTimeout(() => {
            lavaHeight = 0;
            lavaElement.style.height = '0px';
            setTripleJump();
            lavaInterval = setInterval(riseLava, lavaRiseInterval);
        }, warningDuration);
    }

    // Modify riseLava to start laser phase after rising fully
    function riseLava() {
        const maxLavaHeight = platformHeights[currentPhase];

        if (lavaHeight < maxLavaHeight) {
            lavaHeight += lavaRiseSpeed;
            if (lavaHeight > maxLavaHeight) lavaHeight = maxLavaHeight;
            lavaElement.style.height = lavaHeight + 'px';

            const playerBottomPx = parseFloat(player.style.bottom) || 0;
            const playerVelocityDown = playerVelocityY <= 0;

            if (playerBottomPx < lavaHeight && playerVelocityDown) {
                playerPositionY = lavaHeight;
                playerVelocityY = 0;
                isJumping = false;
                jumpCount = 0;
                player.style.bottom = playerPositionY + 'px';
            }

const now = Date.now();
if (checkCollision(player, lavaElement)) {
    const playerBottom = getPlayerBottomOffset();
    console.log(`Collision! playerBottom=${playerBottom}, lavaHeight=${lavaHeight}`);
    if (playerBottom < lavaHeight && (now - lastDamageTime) > 1000) {
        console.log("Reducing lives from lava collision");
        reduceLives();
        lastDamageTime = now;
    }
}
        } else {
            clearInterval(lavaInterval);
            displayMessage("Warning! Lasers incoming!");
            startLaserPhase();
        }
    }

    // Laser phase start
    function startLaserPhase() {
        laserPhaseTimer = 0;
        laserLastDamageTime = 0;
        laserIntervalId = setInterval(laserTick, currentLaserInterval);

        // Laser phase ends after fixed duration
        laserTimeoutId = setTimeout(() => {
            clearInterval(laserIntervalId);
            clearWarningLines();
            clearLasers();
            displayMessage("Lava retreating... Prepare for next rise!");
            lavaInterval = setInterval(lowerLava, lavaRiseInterval);
        }, laserPhaseDuration);
    }
}

function checkCollisionWithPlatformsAndObstacles() {
    const playerLeft = playerPositionX;
    let playerBottom = playerPositionY;
    const playerWidth = player.offsetWidth;
    const playerHeight = player.offsetHeight;

    let onPlatform = false;

    // Check platforms
    const blocks = [...gameWorld.querySelectorAll('div')].filter(el =>
        el.style.backgroundColor === 'blue' &&
        el.offsetWidth === 80 &&
        el.offsetHeight === 20
    );

    for (const block of blocks) {
        const blockLeft = parseInt(block.style.left);
        const blockBottom = parseInt(block.style.bottom);
        const blockRight = blockLeft + block.offsetWidth;
        const blockTop = blockBottom + block.offsetHeight;

        const horizontalOverlap = playerLeft + playerWidth > blockLeft && playerLeft < blockRight;
        const nextPlayerBottom = playerBottom + playerVelocityY;

        if (
            horizontalOverlap &&
            playerBottom >= blockTop &&
            nextPlayerBottom <= blockTop &&
            playerVelocityY <= 0
        ) {
            playerPositionY = blockTop;
            playerVelocityY = 0;
            isJumping = false;
            jumpCount = 0;
            onPlatform = true;
            break;
        } else if (
            horizontalOverlap &&
            playerBottom >= blockTop - 1 &&
            playerBottom <= blockTop + 1 &&
            playerVelocityY === 0
        ) {
            playerPositionY = blockTop;
            isJumping = false;
            jumpCount = 0;
            onPlatform = true;
            break;
        }
    }

    // Check obstacles with same logic
    for (const obstacle of obstacles) {
        const obLeft = parseInt(obstacle.style.left);
        const obBottom = parseInt(obstacle.style.bottom);
        const obRight = obLeft + obstacle.offsetWidth;
        const obTop = obBottom + obstacle.offsetHeight;

        const horizontalOverlap = playerLeft + playerWidth > obLeft && playerLeft < obRight;
        const nextPlayerBottom = playerBottom + playerVelocityY;

        if (
            horizontalOverlap &&
            playerBottom >= obTop &&
            nextPlayerBottom <= obTop &&
            playerVelocityY <= 0
        ) {
            playerPositionY = obTop;
            playerVelocityY = 0;
            isJumping = false;
            jumpCount = 0;
            onPlatform = true;
            break;
        } else if (
            horizontalOverlap &&
            playerBottom >= obTop - 1 &&
            playerBottom <= obTop + 1 &&
            playerVelocityY === 0
        ) {
            playerPositionY = obTop;
            isJumping = false;
            jumpCount = 0;
            onPlatform = true;
            break;
        }
    }

    return onPlatform;
}

function bossPhaseTwoTargetSlam2() {
    const warningLineHeight = 5; // Height of the warning line
    const rodWidth = 80; // Width of the laser rod
    const rodHeight = 300; // Height of the rod
    const rodColor = 'red'; // Color of the rod
    const laserSpawnTime = 500; // Time between spawn of lasers
    const totalWarnings = 12; // Total number of laser warnings
    let warningCount = 0; // Counter for warnings
    const warningPositions = []; // Store positions for warnings

    function spawnWarningLine() {
        // Create a warning line
        const warningLine = document.createElement('div');
        warningLine.classList.add('warning-line');
        warningLine.style.width = '80px'; // Width of the warning line
        warningLine.style.height = `${warningLineHeight}px`;
        warningLine.style.backgroundColor = 'yellow'; // Set color
        warningLine.style.position = 'absolute';
        const warningLinePosition = Math.random() * (gameContainer.offsetWidth - 80); // Random horizontal position
        warningLine.style.left = `${warningLinePosition}px`; // Set position
        warningLine.style.bottom = '50px'; // Slightly above player position
        gameWorld.appendChild(warningLine);

        // Wait for 0.5 seconds, then spawn the laser rod above
        setTimeout(() => {
            // Create a rod above the warning line
            const rod = document.createElement('div');
            rod.classList.add('rod'); // Add a class for styling
            rod.style.width = `${rodWidth}px`;
            rod.style.height = `${rodHeight}px`;
            rod.style.backgroundColor = rodColor;
            rod.style.position = 'absolute';
            rod.style.left = `${warningLinePosition + 25}px`; // Center the rod above the warning line
            rod.style.bottom = '0px'; // Start at ground level

            gameWorld.appendChild(rod); // Add rod to the game world

            // Damage player if they are still there
            if (checkCollision(player, rod)) {
                reduceLives(); // Damage the player
            }

            // Remove the rod after a brief duration
            setTimeout(() => {
                rod.remove(); // Clean up after the rod
            }, 200); // Keep the rod visible for 200 ms

            // Remove the warning line
            warningLine.remove();
        }, 500); // Spawn the rod after 500 milliseconds
    }

    // Spawn warning lines and lasers at intervals
    const spawnWarningsInterval = setInterval(() => {
        if (warningCount >= totalWarnings) {
            clearInterval(spawnWarningsInterval); // Stop after total warnings
            cycleBossAttacks(); // Proceed to the next boss cycle
            return; // Exit the function
        }

        spawnWarningLine(); // Spawn a warning line
        warningCount++; // Increase warning count
    }, laserSpawnTime); // Spawn a warning every 500 ms
}

function bossPhaseTwoNewPower2() {
    const laserCount = 3;               // Number of lasers per burst
    const laserRadius = 80;             // Distance lasers start from boss center (for initial pos)
    const laserWidth = 20;
    const laserHeight = 20;
    const laserColor = 'red';
    const healColor = 'green';
    const healChance = 0.2;
    const maxBursts = 8;
    const laserInterval = 2000;         // Time between bursts

    let burstCount = 0;

    const bounceLimit = 1; // Number of bounces before laser is destroyed

    // Assume these globals (define globally)
    // const boss = document.getElementById('boss');
    // const player = document.getElementById('player');
    // const gameWorld = document.getElementById('gameWorld');

    // Get game world boundaries once
    const worldRect = gameWorld.getBoundingClientRect();

    function createLasers() {
        const bossRect = boss.getBoundingClientRect();

        for (let i = 0; i < laserCount; i++) {
            const angle = (i * 2 * Math.PI) / laserCount; // spread lasers evenly around circle

            // Create laser element
            const laser = document.createElement('div');
            laser.classList.add('laser');
            laser.style.position = 'absolute';
            laser.style.width = `${laserWidth}px`;
            laser.style.height = `${laserHeight}px`;
            laser.style.backgroundColor = laserColor;
            laser.style.borderRadius = '2px';

            // Initial position roughly at boss position + offset by radius along angle
            // Calculate relative to gameWorld top-left (absolute positioning)
            const startX = bossRect.left + bossRect.width/2 + Math.cos(angle)*laserRadius - laserWidth/2;
            const startY = bossRect.top + bossRect.height/2 + Math.sin(angle)*laserRadius - laserHeight/2;

            laser.style.left = `${startX}px`;
            laser.style.top = `${startY}px`;

            gameWorld.appendChild(laser);

            // Velocity vector (pixels per frame)
            // Let's say speed = 4px per frame (~60fps, adjust as needed)
            const speed = 4;
            let vx = Math.cos(angle)*speed;
            let vy = Math.sin(angle)*speed;

            let bounces = 0;

            // Use requestAnimationFrame for smooth animation
            function animate() {
                if (!laser.parentElement) return; // Laser removed/destroyed

                // Current position
                let x = parseFloat(laser.style.left);
                let y = parseFloat(laser.style.top);

                // Move laser
                x += vx;
                y += vy;

                // Check boundaries (bounce off gameWorld edges)
                if (x <= 0) { 
                    x = 0;
                    vx = -vx;
                    bounces++;
                }
                if (y <= 0) { 
                    y = 0;
                    vy = -vy;
                    bounces++;
                }
                if (x + laserWidth >= worldRect.width) {
                    x = worldRect.width - laserWidth;
                    vx = -vx;
                    bounces++;
                }
                if (y + laserHeight >= worldRect.height) {
                    y = worldRect.height - laserHeight;
                    vy = -vy;
                    bounces++;
                }

                laser.style.left = `${x}px`;
                laser.style.top = `${y}px`;

                // Collision with player
                // Here you can improve detection, currently simple AABB
                const playerRect = player.getBoundingClientRect();
                const laserRect = laser.getBoundingClientRect();

                if (!(playerRect.right < laserRect.left ||
                    playerRect.left > laserRect.right ||
                    playerRect.bottom < laserRect.top ||
                    playerRect.top > laserRect.bottom)) {

                    // On collision, heal or damage once:
                    if (Math.random() < healChance) {
                        gainExtraLife && gainExtraLife();
                    } else {
                        reduceLives();
                    }

                    // Remove laser immediately on hit
                    laser.remove();
                    return;
                }

                // Remove laser after 2 bounces
                if (bounces > bounceLimit) {
                    laser.remove();
                    return;
                }

                requestAnimationFrame(animate);
            }

            requestAnimationFrame(animate);
        }
    }

    // Interval that runs burstCount times, then stops
    const laserBurstInterval = setInterval(() => {
        if (burstCount >= maxBursts) {
            clearInterval(laserBurstInterval);
            cycleBossAttacks && cycleBossAttacks();
            return;
        }

        createLasers();
        burstCount++;
    }, laserInterval);
}



// Call function to test
// bossPhaseTwoNewPower2();


function startPhaseThree() {
    if (phaseThreeStarted) return; // Prevent running it multiple times
    phaseThreeStarted = true; // Set flag to true once started

    initializeBossHealth(); // Sets the boss health based on the current level

    const messages = [
        "Player: Oh god what is this",
        "Boss: All the moves and powers i had...",
        "Boss: But this time your not going to get pass this.",
        "Boss: This is your final game",
        "Player: alright lets take a bet on that!",
    ];

    let phase3MessageIndex = 0; // Track which message is currently displayed

    function displayMessages() {
        if (phase3MessageIndex < messages.length) {
            displayMessage(messages[phase3MessageIndex]);
            phase3MessageIndex++;
            setTimeout(displayMessages, 3000); // Display the next message after 3 seconds
        } else {
            // Once messages are done, start the boss attack cycle
            cycleBossAttacks(); // Start boss attacks
        }
    }

    displayMessages(); // Start displaying messages
}



// Wait until boss exists, then change color
function changeBossColorBlue() {
  if (!boss) {
    console.warn("Boss element not ready!");
    return;
  }
  boss.style.backgroundColor = 'blue';
}

function changeBossColorBlue2() {
  if (!boss) {
    console.warn("Boss element not ready!");
    return;
  }
  boss.style.backgroundColor = 'yellow';
}

// Call it when appropriate, no await needed
function startPhaseFour() {
    console.log("startPhaseFour called");

    if (typeof phaseThreeStarted === "undefined") {
        console.error("phaseThreeStarted is not defined!");
    }
    if (phaseThreeStarted) {
        console.log("Phase 3 already started.");
        return;
    }
    phaseThreeStarted = true;
    console.log("Starting Phase Four logic.");

    if (typeof initializeBossHealth !== "function") {
        console.error("initializeBossHealth is not defined!");
    }
    initializeBossHealth();

    // Set up level-specific behaviors
    let messages;
    let preMessageFunction = function() {};
    let endMessageFunction = function() {};

    console.log("Level:", level);

    if (level === 4) {
        messages = [
            "Boss: Well well well...",
            "Boss: THIS? is what my brother was talking about!",
            "Boss: You look so weak haha..",
            "Boss: Well i should introduce myself",
            "Boss: Im the strongest cube ever!",
            "Player: Well he just told me that already so a big flex ig...",
            "Boss: Intersting... you seem somewhat smart.",
            "Player: Well knowing this is the last boss fight i will end you!...",
            "Boss: Alright lets get started then!",
        ];
        preMessageFunction = changeBossColorBlue;
        endMessageFunction = cycleBossAttacks;
    } else if (level === 5) {
        messages = [
            "System: Welcome to your final test.",
            "Player: What do you mean?",
            "System: To unlock life you must win..",
            "Player: Alright lets do it!",
        ];
        preMessageFunction = changeBossColorBlue2;
        endMessageFunction = cycleBossAttacks;
    } else {
        messages = [
            "Boss: Well well well...",
            "Boss: THIS? is what my brother was talking about!",
            "Boss: You look so weak haha..",
            "Boss: Well i should introduce myself",
            "Boss: Im the strongest cube ever!",
            "Player: Well he just told me that already so a big flex ig...",
            "Boss: Intersting... you seem somewhat smart.",
            "Player: Well knowing this is the last boss fight i will end you!...",
            "Boss: Alright lets get started then!",
        ];
        preMessageFunction = changeBossColorBlue;
        endMessageFunction = cycleBossAttacks;
    }
    if (typeof preMessageFunction !== "function") {
        console.error("preMessageFunction is not a function!");
    }
    preMessageFunction();

    let phase3MessageIndex = 0;

    function displayMessages() {
        if (phase3MessageIndex < messages.length) {
            if (typeof displayMessage !== "function") {
                console.error("displayMessage is not defined!");
            }
            displayMessage(messages[phase3MessageIndex]);
            phase3MessageIndex++;
            setTimeout(displayMessages, 3000);
        } else {
            if (typeof endMessageFunction !== "function") {
                console.error("endMessageFunction is not a function!");
            }
            cycleBossAttacks();
        }
    }

    displayMessages();
}



function startPhaseFive() {
    if (phaseThreeStarted) return;
    phaseThreeStarted = true;

    initializeBossHealth();
    changeBossColorBlue2();

    const messages = [
        "System: Welcome to your final test.",
        "Player: What do you mean?",
        "System: To unlock life you must win..",
        "Player: Alright lets do it!",
    ];

    let phase3MessageIndex = 0;

    function displayMessages() {
        if (phase3MessageIndex < messages.length) {
            console.log("Displaying message:", messages[phase3MessageIndex]);
            displayMessage(messages[phase3MessageIndex]);
            phase3MessageIndex++;
            setTimeout(displayMessages, 3000);
        } else {
            console.log("Messages done. Starting boss attacks...");
            cycleBossAttacks();
        }
    }

    displayMessages();
}


function bossPhaseTwoTargetSlam() {
  const maxSlams = 4;
  const groundLevel = 0;
  const hoverHeight = 100;
  const slamDurationDown = 400;    // Faster slam down
  const slamHoldDuration = 1200;   // Hold slam a bit shorter
  const slamDurationUp = 600;      // Faster slam up
  const slamCooldown = 700;        // Faster cooldown between slams

  // Reduce lives should be defined globally / externally
  // This function just calls it
  function reduceLives() {
    if (lives > 0) {
      lives--;
      console.log("Player hit by boss slam! Lives Remaining:", lives);
      // Trigger additional feedback if needed
    }
  }

  function createBurst(x, y) {
    // Your burst effect implementation here
    console.log(`Burst at (${x}, ${y})`);
  }

  // Animate CSS bottom property with transition and Promise-based resolution
  function animateBottomPosition(targetBottom, duration) {
    return new Promise((resolve) => {
      let resolved = false;

      function onTransitionEnd(e) {
        if (e.propertyName === 'bottom' && !resolved) {
          resolved = true;
          boss.removeEventListener('transitionend', onTransitionEnd);
          resolve();
        }
      }

      boss.addEventListener('transitionend', onTransitionEnd);
      boss.style.transition = `bottom ${duration}ms ease-in-out`;
      boss.style.bottom = `${targetBottom}px`;

      // Safety fallback if transitionend does not fire
      setTimeout(() => {
        if (!resolved) {
          resolved = true;
          boss.removeEventListener('transitionend', onTransitionEnd);
          resolve();
        }
      }, duration + 50);
    });
  }

  // Get bounding rects for player, boss, and boss parent
  function getRects() {
    return {
      playerRect: player.getBoundingClientRect(),
      bossRect: boss.getBoundingClientRect(),
      parentRect: boss.parentElement.getBoundingClientRect()
    };
  }

  // Axis-aligned bounding box collision detection
  function isCollision(rect1, rect2) {
    return !(
      rect1.right < rect2.left ||
      rect1.left > rect2.right ||
      rect1.bottom < rect2.top ||
      rect1.top > rect2.bottom
    );
  }

  // Monitor collision during slam hold, damage max once per second
  function monitorCollisionDuringSlam(duration) {
    return new Promise((resolve) => {
      const hitCooldown = 1000; // ms between allowed hits
      let lastHitTimestamp = 0;
      const startTime = performance.now();

      function check(time) {
        if (time - startTime >= duration) {
          resolve();
          return;
        }

        const { playerRect, bossRect } = getRects();

        if (isCollision(playerRect, bossRect)) {
          if (time - lastHitTimestamp > hitCooldown && lives > 0) {
            reduceLives();
            lastHitTimestamp = time;
            shakeScreen(); // Assuming you defined shakeScreen globally
          }
        }

        if (lives <= 0) {
          resolve(); // Stop if no lives left
          return;
        }

        requestAnimationFrame(check);
      }

      requestAnimationFrame(check);
    });
  }

  async function performSlam() {
    let slamCount = 0;

    while (slamCount < maxSlams) {
      // Position boss instantly above player horizontally
      const { playerRect, parentRect } = getRects();
      const playerCenterX = playerRect.left - parentRect.left + playerRect.width / 2;

      boss.style.transition = 'none';
      boss.style.left = `${playerCenterX - boss.offsetWidth / 2}px`;
      boss.style.bottom = `${hoverHeight}px`;

      // Wait for next frame so changes apply
      await new Promise(resolve => requestAnimationFrame(resolve));

      // Shorter hover pause for snappier feel
      await new Promise(resolve => setTimeout(resolve, 300));

      shakeScreen();

      // Slam down
      await animateBottomPosition(groundLevel, slamDurationDown);

      createBurst(playerCenterX, groundLevel);

      // Hold slam while monitoring collision damage
      await monitorCollisionDuringSlam(slamHoldDuration);

      // Slam back up
      await animateBottomPosition(hoverHeight, slamDurationUp);

      slamCount++;

      // Cooldown before next slam
      await new Promise(resolve => setTimeout(resolve, slamCooldown));
    }

    console.log("Slam attack finished");

    if (typeof resetBossPosition === 'function') {
      resetBossPosition();
    }

    if (typeof cycleBossAttacks === 'function') {
      setTimeout(cycleBossAttacks, 5000); // Faster cycle after slam attack
    }
  }

  performSlam();
}

function bossPhaseTwoTargetSlam3() {
    let slamCount = 0;
    const maxSlams = 6;
    const groundLevel = 0;   
    const hoverHeight = 100; 
    const slamDurationDown = 200;
    const slamHoldDuration = 1000;
    const slamDurationUp = 700;
    const slamCooldown = 450;
    let slamActive = false;

    // assuming boss and player are defined globally or in the outer scope
    // e.g. const boss = document.getElementById('boss');
    // const player = document.getElementById('player');

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function monitorCollisionDuringSlam(duration) {
        const startTime = Date.now();
        let lastHitTime = 0;   // added to throttle reduceLives

        return new Promise((resolve) => {
            const interval = setInterval(() => {
                const now = Date.now();
                if (now - startTime >= duration) {
                    clearInterval(interval);
                    resolve();
                    return;
                }

                if (checkCollision(player, boss)) {
                    // Only reduce lives if at least 1000ms (1 second) passed since last hit
                    if (now - lastHitTime >= 1000) {
                        reduceLives();
                        console.log("Player hit by the boss slam! Lives Remaining: " + lives);
                        lastHitTime = now;
                    }
                }
            }, 50);
        });
    }

    function animateBottomPosition(targetBottom, duration) {
        return new Promise(resolve => {
            function onTransitionEnd(event) {
                if (event.propertyName === 'bottom') {
                    boss.removeEventListener('transitionend', onTransitionEnd);
                    resolve();
                }
            }
            boss.addEventListener('transitionend', onTransitionEnd);
            void boss.offsetWidth;
            boss.style.transition = `bottom ${duration}ms ease-in-out`;
            boss.style.bottom = `${targetBottom}px`;
        });
    }

    async function performSlam() {
        while (slamCount < maxSlams) {
            slamActive = true;

            const playerRect = player.getBoundingClientRect();
            const parentRect = boss.parentElement.getBoundingClientRect();

            const playerX = playerRect.left - parentRect.left + playerRect.width / 2;

            boss.style.transition = 'none';
            boss.style.left = `${playerX - boss.offsetWidth / 2}px`;
            boss.style.bottom = `${hoverHeight}px`;

            await sleep(250);

            shakeScreen();

            await animateBottomPosition(groundLevel, slamDurationDown);

            createBurst(playerX, groundLevel);

            await monitorCollisionDuringSlam(slamHoldDuration);

            await animateBottomPosition(hoverHeight, slamDurationUp);

            slamCount++;
            slamActive = false;

            await sleep(slamCooldown);
        }

        console.log('Slam attack finished');
        resetBossPosition();
        setTimeout(cycleBossAttacks, 10000);
    }

    performSlam();
}

function bossTargetSlam() {
    let slamCount = 0;
    const maxSlams = 4;
    const groundLevel = 0;   
    const hoverHeight = 100; 
    const slamDurationDown = 500;   
    const slamHoldDuration = 1500;  
    const slamDurationUp = 700;     
    const slamCooldown = 1000;      

    // Track if a slam is currently active
    let slamActive = false;

    // Promise-based sleep
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // Collision check: AABB rectangle intersection
    function checkCollision(elem1, elem2) {
        const r1 = elem1.getBoundingClientRect();
        const r2 = elem2.getBoundingClientRect();
        return !(
            r1.right < r2.left ||
            r1.left > r2.right ||
            r1.bottom < r2.top ||
            r1.top > r2.bottom
        );
    }

    // Placeholder for player's lives remaining, define accordingly
    let lives = 3;

    // Reduces player's lives safely
reduceLives();

    // Shake screen effect placeholder — implement your own or remove

shakeScreen();

    // Create burst effect placeholder — implement as needed
    function createBurst(x, y) {
        console.log(`Burst at (${x}, ${y})`);
    }

    // Animate bottom position with transition and Promise
    function animateBottomPosition(targetBottom, duration) {
        return new Promise(resolve => {
            function onTransitionEnd(event) {
                if (event.propertyName === 'bottom') {
                    boss.removeEventListener('transitionend', onTransitionEnd);
                    resolve();
                }
            }
            boss.addEventListener('transitionend', onTransitionEnd);

            // Force reflow to apply transition properly
            void boss.offsetWidth;

            boss.style.transition = `bottom ${duration}ms ease-in-out`;
            boss.style.bottom = `${targetBottom}px`;
        });
    }

    // Monitor collision during slamHoldDuration, but only reduce lives once per second max
    async function monitorCollisionDuringSlam(duration) {
        return new Promise((resolve) => {
            let lastHitTime = 0;

            const interval = setInterval(() => {
                const now = Date.now();

                if (now - lastHitTime >= 1000 && checkCollision(player, boss)) {
                    reduceLives();
                    lastHitTime = now;
                }

                if (now >= startTime + duration) {
                    clearInterval(interval);
                    resolve();
                }
            }, 50);

            const startTime = Date.now();
        });
    }

    async function performSlam() {
        while (slamCount < maxSlams) {
            slamActive = true;

            // Calculate player and boss parent positions to align boss over player horizontally
            const playerRect = player.getBoundingClientRect();
            const parentRect = boss.parentElement.getBoundingClientRect();

            // Player center X inside boss parent container
            const playerX = playerRect.left - parentRect.left + playerRect.width / 2;

            // Position boss instantly above player at hover height
            boss.style.transition = 'none';
            boss.style.left = `${playerX - boss.offsetWidth / 2}px`;
            boss.style.bottom = `${hoverHeight}px`;

            await sleep(500); // hover delay

            shakeScreen();

            // Slam down
            await animateBottomPosition(groundLevel, slamDurationDown);

            createBurst(playerX, groundLevel);

            // Check collision during slam hold, max once per 1000ms
            await monitorCollisionDuringSlam(slamHoldDuration);

            // Slam back up
            await animateBottomPosition(hoverHeight, slamDurationUp);

            slamCount++;
            slamActive = false;

            await sleep(slamCooldown);
        }

        console.log("Slam attack finished");
        if (typeof resetBossPosition === 'function') {
            resetBossPosition();
        }
        if (typeof cycleBossAttacks === 'function') {
            setTimeout(cycleBossAttacks, 10000);
        }
    }

    performSlam();
}







function bossPhaseTwoNewPower() {
    let bossSlideCount = 0; // Count how many times the boss has slid side to side
    const bossMaxSlides = 5; // Maximum number of slides
    let direction = 1; // 1 for right, -1 for left
    let canDamagePlayer = true; // Flag to control damage timing
    
    // Set the boss to ground level and an initial position
    boss.style.bottom = '0px'; // Set boss to ground level
    boss.style.left = '50px'; // Starting position; adjust as needed

    // Get the width of the game world for boundary checks
    const gameWorldWidth = gameWorld.offsetWidth;

    // Interval to move the boss
    const slideInterval = setInterval(() => {
        // Move the boss
        const currentLeft = parseInt(boss.style.left);
        const nextLeft = currentLeft + (4 * direction); // Move by 4 pixels

        // Check for wall collision
        if (nextLeft < 0 || nextLeft + boss.offsetWidth > gameWorldWidth) {
            direction *= -1; // Reverse direction upon hitting the wall
            bossSlideCount++; // Increment the slide count
            
            // Bounce back the boss a little to ensure it doesn't stay stuck
            boss.style.left = (currentLeft + (4 * direction)) + 'px'; // Adjust position slightly after collision
        } else {
            boss.style.left = nextLeft + 'px'; // Move the boss
        }

        // Check collision with the player
        if (checkCollision(boss, player)) {
            // Reduce lives every second when colliding
            if (canDamagePlayer) {
                reduceLives(); // Damage the player if they collide with the boss
                canDamagePlayer = false; // Prevent further damage until the cooldown
                setTimeout(() => {
                    canDamagePlayer = true; // Reset after 1 second
                }, 1000);
            }
        }

        // Stop sliding after the specified number of slides and trigger the next boss cycle
        if (bossSlideCount >= bossMaxSlides) {
            clearInterval(slideInterval); // Stop the sliding movement
            resetBossPosition();
            cycleBossAttacks(); // Call this function to start the next boss cycle
        }
    }, 3); // Faster interval for rapid movement
}


function bossPhaseTwoExplosionRain2() {
    const blockWidth = 30; // Width of the falling blocks
    const blockHeight = 10; // Height of the falling blocks
    const blockSpeed = 5; // Speed of block movement (pixels per frame)
    const blocks = []; // Array to hold active blocks
    const spawnInterval = 500; // Time between block spawns (in milliseconds)
    const duration = 15000; // Total duration of the attack (in milliseconds)
    const leftRightDuration = 5500; // Move blocks left/right for 3 seconds
    const upDownDuration = duration - leftRightDuration; // Then move blocks up/down for 7 seconds

    // Keep track of current phase
    let phase = 'leftRight'; // 'leftRight' or 'upDown'
    let phaseStartTime = performance.now();

    // Function to spawn a block for the left/right phase
    function spawnBlockLeftRight() {
        const block = document.createElement('div');
        block.classList.add('explosive-block');
        block.style.width = `${blockWidth}px`;
        block.style.height = `${blockHeight}px`;
        block.style.position = 'absolute';
        block.style.backgroundColor = 'red';

        // Spawn from left or right side randomly
        const fromLeft = Math.random() < 0.5;
        block.dataset.fromLeft = fromLeft; // Store direction in dataset

        // Set initial horizontal position (off screen)
        block.style.left = fromLeft ? `${-blockWidth}px` : `${window.innerWidth}px`;
        // Random vertical position on screen
        block.style.bottom = `${Math.random() * (window.innerHeight - blockHeight)}px`;
        document.body.appendChild(block);

        blocks.push(block);
    }

    // Function to spawn a block for the up/down phase
    function spawnBlockUpDown() {
        const block = document.createElement('div');
        block.classList.add('explosive-block');
        block.style.width = `${blockWidth}px`;
        block.style.height = `${blockHeight}px`;
        block.style.position = 'absolute';
        block.style.backgroundColor = 'red';

        // Spawn from bottom or top randomly
        const fromBottom = Math.random() < 0.5;
        block.dataset.fromBottom = fromBottom;

        // Random horizontal position on the screen
        block.style.left = `${Math.random() * (window.innerWidth - blockWidth)}px`;
        // Initial vertical position (off screen)
        block.style.bottom = fromBottom ? `${-blockHeight}px` : `${window.innerHeight}px`;
        document.body.appendChild(block);

        blocks.push(block);
    }

    // Function to update/move the blocks based on current phase
    function updateBlocks() {
        for (let i = blocks.length - 1; i >= 0; i--) {
            const block = blocks[i];
            if (!document.body.contains(block)) { 
                // Remove any blocks that were removed from DOM
                blocks.splice(i, 1);
                continue;
            }

            if (phase === 'leftRight') {
                // Move horizontally toward center of screen
                let currentLeft = parseFloat(block.style.left);
                const moveDir = block.dataset.fromLeft === 'true' ? 1 : -1; // left->right is +1, right->left is -1
                const newLeft = currentLeft + (blockSpeed * moveDir);
                block.style.left = `${newLeft}px`;

                // If block moved completely off screen past opposite side, remove it
                if (moveDir === 1 && newLeft > window.innerWidth) {
                    block.remove();
                    blocks.splice(i, 1);
                    continue;
                }
                if (moveDir === -1 && newLeft < -blockWidth) {
                    block.remove();
                    blocks.splice(i, 1);
                    continue;
                }
            } else if (phase === 'upDown') {
                // Move blocks vertically up or down
                let currentBottom = parseFloat(block.style.bottom);
                const moveDir = block.dataset.fromBottom === 'true' ? 1 : -1; // bottom->top = +1, top->bottom = -1
                const newBottom = currentBottom + (blockSpeed * moveDir);
                block.style.bottom = `${newBottom}px`;

                // Remove if off screen vertically
                if (moveDir === 1 && newBottom > window.innerHeight) {
                    block.remove();
                    blocks.splice(i, 1);
                    continue;
                }
                if (moveDir === -1 && newBottom < -blockHeight) {
                    block.remove();
                    blocks.splice(i, 1);
                    continue;
                }
            }

            // Check collision with player (assuming player is accessible globally)
            if (checkCollision(player, block)) {
                reduceLives();
                block.remove();
                blocks.splice(i, 1);
            }
        }
    }

    // Interval to spawn blocks depending on the phase
    let spawnBlocksInterval = setInterval(() => {
        if (phase === 'leftRight') {
            spawnBlockLeftRight();
        } else if (phase === 'upDown') {
            spawnBlockUpDown();
        }
    }, spawnInterval);

    // Animation frame loop to move blocks
    function animationLoop() {
        const now = performance.now();

        // Switch phase after respective time
        if (phase === 'leftRight' && now - phaseStartTime >= leftRightDuration) {
            phase = 'upDown';
            phaseStartTime = now;

            // Remove all existing blocks from leftRight phase immediately
            blocks.forEach(block => block.remove());
            blocks.length = 0;
        } else if (phase === 'upDown' && now - phaseStartTime >= upDownDuration) {
            // End attack and clean up
            clearInterval(spawnBlocksInterval);
            blocks.forEach(block => block.remove());
            blocks.length = 0;
            cycleBossAttacks();
            return; // Stop the animation loop
        }

        updateBlocks();
        requestAnimationFrame(animationLoop);
    }

    requestAnimationFrame(animationLoop);
}



function spawnBoostDrainer() {
    if (boostDrainer) return;

    const spawnX = gameScrollPosition + gameContainer.offsetWidth + 50;
    const spawnY = Math.random() * 200 + 50;

    boostDrainer = document.createElement('div');
    boostDrainer.classList.add('boost-drainer');
    boostDrainer.style.left = spawnX + 'px';
    boostDrainer.style.bottom = spawnY + 'px';
    gameWorld.appendChild(boostDrainer);

    // Create chain element
    boostDrainerChain = document.createElement('div');
    boostDrainerChain.classList.add('boost-drainer-chain');
    gameWorld.appendChild(boostDrainerChain);

    boostDrainerHP = 3;
    boostDrainerState = "moving"; // Start moving state
}

// Call this inside your main game loop or movement update function
function updateBoostDrainer() {
    if (!boostDrainer) return;

    const playerX = playerPositionX;
    let enemyX = parseInt(boostDrainer.style.left);

    switch (boostDrainerState) {
        case 'moving':
            const targetX = playerX + boostDrainerAttackXOffset;

            if (enemyX > targetX) {
                enemyX -= boostDrainerSpeed;
                boostDrainer.style.left = enemyX + 'px';
            } else {
                // Reached attack position, start attack cycle
                boostDrainerState = 'green';
                boostDrainer.style.backgroundColor = 'green'; // Visual green state
                boostDrainer.classList.remove('yellow', 'red');

                boostDrainerAttackTimeout = setTimeout(() => {
                    boostDrainerState = 'yellow';
                    boostDrainer.style.backgroundColor = 'yellow';
                    boostDrainer.classList.add('yellow');
                    
                    boostDrainerAttackTimeout = setTimeout(() => {
                        boostDrainerState = 'red';
                        boostDrainer.style.backgroundColor = 'red';
                        boostDrainer.classList.remove('yellow');
                        boostDrainer.classList.add('red');

                        fireBoostDrainerLaser(3); // Repeat laser fire 3 times
                    }, 1000);
                }, 1000);
            }
            break;
        // other states can be no movement
        default:
            break;
    }

    // Update the chain line only when moving or in states where player and drainer exist
    if (boostDrainerChain) {
        updateChainLine(boostDrainer, boostDrainerChain, player);
    }
}

function fireBoostDrainerLaser(timesLeft) {
    if (!boostDrainer || timesLeft <= 0) {
        removeBoostDrainer();
        return;
    }

    boostDrainerState = 'firing';

    // Create laser div or reuse existing laser if you want smooth transition
    if (boostDrainerLaser) {
        boostDrainerLaser.remove();
        boostDrainerLaser = null;
    }

    boostDrainerLaser = document.createElement('div');
    boostDrainerLaser.classList.add('boost-laser');

    const left = parseInt(boostDrainer.style.left) + boostDrainer.offsetWidth / 2 - 2; 
    boostDrainerLaser.style.left = left + 'px';
    boostDrainerLaser.style.bottom = '0px';
    
    // Laser height can be fixed or adjusted dynamically
    boostDrainerLaser.style.height = '120px';

    gameWorld.appendChild(boostDrainerLaser);

    // Laser stays visible for 0.75s, then disappear, and wait 0.5s before next fire
    setTimeout(() => {
        if(boostDrainerLaser) {
            boostDrainerLaser.remove();
            boostDrainerLaser = null;
        }
        boostDrainerState = 'red'; // Can reset state or handle as needed
        
        setTimeout(() => {
            fireBoostDrainerLaser(timesLeft -1);
        }, 500);
    }, 750);
}

// Update the dotted chain line between two elements
function updateChainLine(fromEl, lineEl, toEl) {
    if (!fromEl || !lineEl || !toEl) return;

    // Get bounding rectangles
    const fromRect = fromEl.getBoundingClientRect();
    const toRect = toEl.getBoundingClientRect();
    const containerRect = gameWorld.getBoundingClientRect();

    // Calculate center point within gameWorld coordinates
    // relative to gameWorld's top-left corner BUT we position absolute with bottom coordinate,
    // so invert Y relative to container
    function centerX(rect) {
        return rect.left - containerRect.left + rect.width / 2;
    }
    function centerYBottom(rect) {
        // bottom coordinate = container height - (rect.top - container top + half height)
        return gameContainer.offsetHeight - (rect.top - containerRect.top + rect.height / 2);
    }

    const x1 = centerX(fromRect);
    const y1 = centerYBottom(fromRect);
    const x2 = centerX(toRect);
    const y2 = centerYBottom(toRect);

    const dx = x2 - x1;
    const dy = y2 - y1;

    const length = Math.sqrt(dx * dx + dy * dy);
    const angle = Math.atan2(dy, dx) * 180 / Math.PI;

    // Adjust the dotted line style here for better positioning
    lineEl.style.width = length + 'px';
    lineEl.style.left = x1 + 'px';
    lineEl.style.bottom = y1 + 'px';
    lineEl.style.transformOrigin = 'left center';
    lineEl.style.transform = `rotate(${angle}deg)`;
}

// Handle when bullet hits the boost drainer
function handleBoostDrainerHit(bulletObj, bulletIndex) {
    if (!boostDrainer) return false;
    if (!checkCollision(bulletObj.element, boostDrainer)) return false;

    // Remove bullet
    bulletObj.element.remove();
    bullets.splice(bulletIndex, 1);

    // Reduce HP
    boostDrainerHP--;
    // Flash
    boostDrainer.style.opacity = '0.5';
    setTimeout(() => {
        if (boostDrainer) boostDrainer.style.opacity = '1';
    }, 150);

    // If dead, remove
    if (boostDrainerHP <= 0) {
        removeBoostDrainer();
    }

    return true; // bullet handled
}

// Remove drainer and chain line cleanup
function removeBoostDrainer() {
    if (boostDrainer) {
        boostDrainer.remove();
        boostDrainer = null;
    }
    if (boostDrainerChain) {
        boostDrainerChain.remove();
        boostDrainerChain = null;
    }
    if (boostDrainerLaser) {
        boostDrainerLaser.remove();
        boostDrainerLaser = null;
    }
    if (boostDrainerAttackTimeout) {
        clearTimeout(boostDrainerAttackTimeout);
        boostDrainerAttackTimeout = null;
    }
    boostDrainerHP = 0;
    boostDrainerState = "dead";
}

function checkBoostDrainerLaserCollision() {
    if (!boostDrainerLaser) return;

    if (checkCollision(player, boostDrainerLaser)) {
        // Hit by laser — destroy enemy & reduce lives
        removeBoostDrainer();
        reduceLives();
    }
}


function bossPhaseTwoExplosionRain() {
    const blockWidth = 30; // Width of the falling blocks
    const blockHeight = 10; // Height of the falling blocks
    const blockSpeed = 5; // Speed of block movement
    const blocks = []; // Array to hold active blocks
    const spawnInterval = 500; // Time between block spawns (in milliseconds)
    const duration = 10000; // Duration of the attack (in milliseconds)

    // Function to create and spawn blocks
    function spawnBlock() {
        const block = document.createElement('div');
        block.classList.add('explosive-block'); // Add a class for styling
        block.style.width = `${blockWidth}px`;
        block.style.height = `${blockHeight}px`;
        block.style.position = 'absolute';
        block.style.backgroundColor = 'red';

        // Determine random left or right spawn position (off screen)
        const side = Math.random() < 0.5 ? -blockWidth : window.innerWidth; 
        block.style.left = side < 0 ? `${side}px` : `${side - blockWidth}px`;
        block.style.bottom = `${Math.random() * window.innerHeight}px`; // Random vertical position
        document.body.appendChild(block);

        // Move block across the screen
        const moveInterval = setInterval(() => {
            const currentLeft = parseInt(block.style.left);
            block.style.left = `${currentLeft + (side < 0 ? blockSpeed : -blockSpeed)}px`; // Move toward center

            // Check if the block is out of bounds
            if (currentLeft < -blockWidth || currentLeft > window.innerWidth) {
                clearInterval(moveInterval); // Stop moving if out of bounds
                block.remove(); // Remove block from DOM
            }

            // Check collision with player
            if (checkCollision(player, block)) {
                reduceLives(); // Reduce player's lives
                block.remove(); // Remove block on collision
                clearInterval(moveInterval); // Stop moving
            }
        }, 1000 / 60); // Move at 60 FPS
        blocks.push(block); // Add the block to the list of active blocks
    }

    // Start spawning blocks
    const spawnBlocksInterval = setInterval(spawnBlock, spawnInterval);

    // Stop spawning after the specified duration and clean up
    setTimeout(() => {
        clearInterval(spawnBlocksInterval);
        blocks.forEach(block => block.remove()); // Remove remaining blocks
        cycleBossAttacks(); // Move to next boss attack cycle
    }, duration);
}

function eded() {
  // === Config ===
  const CONFIG = {
    blockWidth: 80,
    blockHeight: 20,
    obstacleWidth: 40,
    obstacleHeight: 20,
    lavaRiseSpeed: 1,          // pixels per tick
    lavaRiseInterval: 100,     // ms
    phaseLavaHeight: 100,      // lava height per phase
    totalPhases: 3,
    damageCooldown: 1000       // ms cooldown between damage ticks
  };

  // === State ===
  let currentPhase = 0;
  let lavaHeight = 0;
  let lavaIntervalId = null;
  let lastDamageTime = 0;

  // Spawned elements tracking (for cleanup)
  const blocks = [];
  const obstacles = [];

  // Assumes global DOM references:
  // - gameWorld: container element for gameplay (should be position: relative or absolute)
  // - player: player character element
  // - reduceLives(): function that reduces player lives
  // - cycleBossAttacks(): function that triggers after phase completes

  // === Helper: checkCollision ===
  // Simple AABB collision between two elements using getBoundingClientRect

  // === Helper: getPlayerBottomOffset ===
  // Distance in pixels from player's bottom edge to bottom of the game world container.
  function getPlayerBottomOffset() {
    const playerRect = player.getBoundingClientRect();
    const worldRect = gameWorld.getBoundingClientRect();
    return worldRect.bottom - playerRect.bottom; // positive means above bottom
  }

  // === Spawn functions ===
  function createBlock(x) {
    const block = document.createElement('div');
    block.className = 'block';
    Object.assign(block.style, {
      position: 'absolute',
      width: CONFIG.blockWidth + 'px',
      height: CONFIG.blockHeight + 'px',
      backgroundColor: 'blue',
      left: x + 'px',
      bottom: '0',
      zIndex: '10',
    });
    gameWorld.appendChild(block);
    blocks.push(block);
    return block;
  }

  function createObstacle(x) {
    const obstacle = document.createElement('div');
    obstacle.className = 'obstacle';
    Object.assign(obstacle.style, {
      position: 'absolute',
      width: CONFIG.obstacleWidth + 'px',
      height: CONFIG.obstacleHeight + 'px',
      backgroundColor: 'orange',
      left: x + 'px',
      bottom: '0',
      zIndex: '10',
    });
    gameWorld.appendChild(obstacle);
    obstacles.push(obstacle);
    return obstacle;
  }

  // === Spawning initial fixed blocks ===
  function spawnInitialBlocks() {
    [100, 300, 500].forEach(xPos => createBlock(xPos));
  }

  // === Spawning obstacles per phase ===
  function spawnPhaseObstacles() {
    // Could vary per phase dynamically, for now fixed positions
    [150, 350, 550].forEach(xPos => createObstacle(xPos));
  }

  // === Cleanup elements ===
  function cleanupElements() {
    blocks.forEach(b => b.remove());
    obstacles.forEach(o => o.remove());
    blocks.length = 0;
    obstacles.length = 0;

    // Remove lava if any
    const existingLava = gameWorld.querySelector('.lava');
    if (existingLava) existingLava.remove();
  }

  // === Create lava element ===
  function createLava() {
    const lava = document.createElement('div');
    lava.className = 'lava';
    Object.assign(lava.style, {
      position: 'absolute',
      width: '100%',
      height: '0',
      bottom: '0',
      backgroundColor: 'red',
      zIndex: '5',
      transition: 'height 0.1s linear', // smooth growth per interval
    });
    gameWorld.appendChild(lava);
    return lava;
  }

  // === Damage player if touching lava with cooldown ===
  function tryDamagePlayer() {
    const now = Date.now();
    if (now - lastDamageTime < CONFIG.damageCooldown) return; // cooldown active

    if (checkCollision(player, lavaElement)) {
      const playerBottomDist = getPlayerBottomOffset();
      if (playerBottomDist < lavaHeight) {
        reduceLives();
        lastDamageTime = now;
      }
    }
  }

  // === Lava rise tick ===
  function onLavaRise() {
    lavaHeight += CONFIG.lavaRiseSpeed;
    lavaElement.style.height = lavaHeight + 'px';

    tryDamagePlayer();

    // Check if current phase lava fully raised
    if (lavaHeight >= (currentPhase + 1) * CONFIG.phaseLavaHeight) {
      clearInterval(lavaIntervalId);
      lavaIntervalId = null;
      currentPhase++;

      if (currentPhase < CONFIG.totalPhases) {
        // Spawn obstacles for next phase
        spawnPhaseObstacles();

        // Reset lava after short delay for player repositioning
        setTimeout(() => {
          lavaHeight = 0;
          lavaElement.style.height = '0px';
          lavaIntervalId = setInterval(onLavaRise, CONFIG.lavaRiseInterval);
        }, 1000);

      } else {
        // Final phase complete, proceed to next boss phase or attacks
        cycleBossAttacks();
      }
    }
  }

  // === Start phase 5 ===
  function startPhase() {
    cleanupElements();

    // Spawn blocks and initial obstacles
    spawnInitialBlocks();
    spawnPhaseObstacles();

    // Create lava element fresh
    lavaElement = createLava();

    // Reset state
    lavaHeight = 0;
    currentPhase = 0;
    lastDamageTime = 0;

    // Start lava rising loop
    lavaIntervalId = setInterval(onLavaRise, CONFIG.lavaRiseInterval);
  }

  // Launch phase 5
  let lavaElement; // define lavaElement here to be accessible in nested functions
  startPhase();
}


function bossPhaseTwoTargetSlam() {
    let slamCount = 0;
    const maxSlams = 4;
    const groundLevel = 0;   
    const hoverHeight = 100; 
    const slamDurationDown = 500;   
    const slamHoldDuration = 1500;  
    const slamDurationUp = 700;     
    const slamCooldown = 1000;      

    // Track if a slam is currently active
    let slamActive = false;

    // Promise-based sleep
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // Collision check: AABB rectangle intersection
    function checkCollision(elem1, elem2) {
        const r1 = elem1.getBoundingClientRect();
        const r2 = elem2.getBoundingClientRect();
        return !(
            r1.right < r2.left ||
            r1.left > r2.right ||
            r1.bottom < r2.top ||
            r1.top > r2.bottom
        );
    }

    // Placeholder for player's lives remaining, define accordingly
    let lives = 3;

    // Reduces player's lives safely
    function reduceLives() {
        if (lives > 0) {
            lives--;
            console.log("Player hit by boss slam! Lives Remaining:", lives);
        }
    }

    // Shake screen effect placeholder — implement your own or remove
    function shakeScreen() {
        // Example simple console log
        console.log("Screen shakes!");
    }

    // Create burst effect placeholder — implement as needed
    function createBurst(x, y) {
        console.log(`Burst at (${x}, ${y})`);
    }

    // Animate bottom position with transition and Promise
    function animateBottomPosition(targetBottom, duration) {
        return new Promise(resolve => {
            function onTransitionEnd(event) {
                if (event.propertyName === 'bottom') {
                    boss.removeEventListener('transitionend', onTransitionEnd);
                    resolve();
                }
            }
            boss.addEventListener('transitionend', onTransitionEnd);

            // Force reflow to apply transition properly
            void boss.offsetWidth;

            boss.style.transition = `bottom ${duration}ms ease-in-out`;
            boss.style.bottom = `${targetBottom}px`;
        });
    }

    // Monitor collision during slamHoldDuration, but only reduce lives once per second max
    async function monitorCollisionDuringSlam(duration) {
        return new Promise((resolve) => {
            let lastHitTime = 0;

            const interval = setInterval(() => {
                const now = Date.now();

                if (now - lastHitTime >= 1000 && checkCollision(player, boss)) {
                    reduceLives();
                    lastHitTime = now;
                }

                if (now >= startTime + duration) {
                    clearInterval(interval);
                    resolve();
                }
            }, 50);

            const startTime = Date.now();
        });
    }

    async function performSlam() {
        while (slamCount < maxSlams) {
            slamActive = true;

            // Calculate player and boss parent positions to align boss over player horizontally
            const playerRect = player.getBoundingClientRect();
            const parentRect = boss.parentElement.getBoundingClientRect();

            // Player center X inside boss parent container
            const playerX = playerRect.left - parentRect.left + playerRect.width / 2;

            // Position boss instantly above player at hover height
            boss.style.transition = 'none';
            boss.style.left = `${playerX - boss.offsetWidth / 2}px`;
            boss.style.bottom = `${hoverHeight}px`;

            await sleep(500); // hover delay

            shakeScreen();

            // Slam down
            await animateBottomPosition(groundLevel, slamDurationDown);

            createBurst(playerX, groundLevel);

            // Check collision during slam hold, max once per 1000ms
            await monitorCollisionDuringSlam(slamHoldDuration);

            // Slam back up
            await animateBottomPosition(hoverHeight, slamDurationUp);

            slamCount++;
            slamActive = false;

            await sleep(slamCooldown);
        }

        console.log("Slam attack finished");
        if (typeof resetBossPosition === 'function') {
            resetBossPosition();
        }
        if (typeof cycleBossAttacks === 'function') {
            setTimeout(cycleBossAttacks, 10000);
        }
    }

    performSlam();
}

// Function to shake the screen
function shakeScreen() {
    let shakeEffect = document.createElement('div');
    shakeEffect.style.position = "fixed";
    shakeEffect.style.top = "0";
    shakeEffect.style.left = "0";
    shakeEffect.style.width = "100%";
    shakeEffect.style.height = "100%";
    shakeEffect.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; // Flashing effect
    shakeEffect.style.transition = 'transform 0.1s';
    document.body.appendChild(shakeEffect);

    // Shake effect
    const shakeTimes = 15; // Number of shakes
    const shakeDistance = 40; // Distance to shake
    const shakeInterval = 50; // Time between shakes

    for(let i = 0; i < shakeTimes; i++) {
        setTimeout(() => {
            shakeEffect.style.transform = (i % 2 === 0) ? `translateX(-${shakeDistance}px)` : `translateX(${shakeDistance}px)`;
        }, i * shakeInterval);
    }

    // Reset the screen after shaking
    setTimeout(() => {
        shakeEffect.style.transform = 'translateX(0)';
    }, shakeTimes * shakeInterval);

    setTimeout(() => {
        shakeEffect.remove(); // Clean up the shake effect
    }, shakeTimes * shakeInterval + 100); // Ensure it removes after the reset
}

// Function to reset the boss position to the center of the screen
function resetBossPosition() {
    boss.style.left = (gameContainer.offsetWidth / 2 - boss.offsetWidth / 2) + 'px'; // Center the boss
    boss.style.bottom = "100px"; // Reset position
}
 
 


function bossPhaseTwoBarrage() {
    boss.style.animation = "boss-shake 1s infinite alternate"; // Boss shakes

    let spawnCount = 0;
    let spawnInterval = setInterval(() => {
        if (spawnCount >= 15) { // Stops after 10 spawns
            clearInterval(spawnInterval);
            boss.style.animation = ""; // Stop shaking
            setTimeout(cycleBossAttacks, 3000); // Cooldown before next attack
            return;
        }

        let enemy = createElement('enemy', enemies, Math.random() * gameContainer.offsetWidth);
        enemy.style.bottom = "400px"; // Start from top

        let fallSpeed = 12;
        let fallInterval = setInterval(() => {
            enemy.style.bottom = (parseInt(enemy.style.bottom) - fallSpeed) + "px";

            if (parseInt(enemy.style.bottom) <= 0) {
                enemy.style.bottom = "0px"; // Stop at ground level
                clearInterval(fallInterval);
            }

            // Check for collision with player
            if (checkCollision(player, enemy)) {
                reduceLives();
                enemy.remove();
                clearInterval(fallInterval);
            }
        }, 50);

        spawnCount++;
    }, 500); // Spawn every half second
}
 
function bossEnemyBarrage() {
    boss.style.animation = "boss-shake 1s infinite alternate"; // Boss shakes

    let spawnCount = 0;
    let spawnInterval = setInterval(() => {
        if (spawnCount >= 10) { // Stops after 10 spawns
            clearInterval(spawnInterval);
            boss.style.animation = ""; // Stop shaking
            setTimeout(cycleBossAttacks, 3000); // Cooldown before next attack
            return;
        }

        let enemy = createElement('enemy', enemies, Math.random() * gameContainer.offsetWidth);
        enemy.style.bottom = "400px"; // Start from top

        let fallSpeed = 8;
        let fallInterval = setInterval(() => {
            enemy.style.bottom = (parseInt(enemy.style.bottom) - fallSpeed) + "px";

            if (parseInt(enemy.style.bottom) <= 0) {
                enemy.style.bottom = "0px"; // Stop at ground level
                clearInterval(fallInterval);
            }

            // Check for collision with player
            if (checkCollision(player, enemy)) {
                reduceLives();
                enemy.remove();
                clearInterval(fallInterval);
            }
        }, 50);

        spawnCount++;
    }, 500); // Spawn every half second
}
 
 
 
function bossPhaseTwoTargetSlam() {
  const maxSlams = 4;
  const groundLevel = 0;
  const hoverHeight = 100;
  const slamDurationDown = 400;    // Faster slam down
  const slamHoldDuration = 1200;   // Hold slam a bit shorter
  const slamDurationUp = 600;      // Faster slam up
  const slamCooldown = 700;        // Faster cooldown between slams

  // Track if slam is active to avoid overlapping slams
  let slamCount = 0;

  // Player lives placeholder (should come from your global game state)
  // Consider passing lives as param or referencing global store instead

  function reduceLives() {
    if (lives > 0) {
      lives--;
      console.log("Player hit by boss slam! Lives Remaining:", lives);
      // TODO: Trigger player hit animation / feedback here
    }
  }


  // Use Promises to handle CSS transitions cleanly
  function animateBottomPosition(targetBottom, duration) {
    return new Promise((resolve) => {
      let resolved = false;
      
      function onTransitionEnd(e) {
        if (e.propertyName === 'bottom' && !resolved) {
          resolved = true;
          boss.removeEventListener('transitionend', onTransitionEnd);
          resolve();
        }
      }
      
      boss.addEventListener('transitionend', onTransitionEnd);

      // Apply CSS transition
      boss.style.transition = `bottom ${duration}ms ease-in-out`;
      boss.style.bottom = `${targetBottom}px`;

      // Safety fallback in case transitionend doesn't fire:
      setTimeout(() => {
        if (!resolved) {
          resolved = true;
          boss.removeEventListener('transitionend', onTransitionEnd);
          resolve();
        }
      }, duration + 50);
    });
  }

  // Helper to get player and boss rectangles
  function getRects() {
    return {
      playerRect: player.getBoundingClientRect(),
      bossRect: boss.getBoundingClientRect(),
      parentRect: boss.parentElement.getBoundingClientRect()
    };
  }

  // Check AABB collision between two DOMRect objects
  function isCollision(rect1, rect2) {
    return !(
      rect1.right < rect2.left ||
      rect1.left > rect2.right ||
      rect1.bottom < rect2.top ||
      rect1.top > rect2.bottom
    );
  }

  // Smoothly monitor collision during hold using requestAnimationFrame for fast, real-time checks
 function monitorCollisionDuringSlam(duration) {
  return new Promise((resolve) => {
    const hitCooldown = 1000; // ms between allowed hits
    let lastHitTimestamp = 0;
    const startTime = performance.now();

    function check(time) {
      if (time - startTime >= duration) {
        resolve();
        return;
      }

      const { playerRect, bossRect } = getRects();

      if (isCollision(playerRect, bossRect)) {
        if (time - lastHitTimestamp > hitCooldown && lives > 0) {
          reduceLives();
          lastHitTimestamp = time;
          shakeScreen();
        }
      }

      if (lives <= 0) {
        resolve(); // Stop checking if player dead or no lives left
        return;
      }

      requestAnimationFrame(check);
    }

    requestAnimationFrame(check);
  });
}

  async function performSlam() {
    slamCount = 0;

    while (slamCount < maxSlams) {
      // Position boss above player horizontally, instantly (no transition)
      const { playerRect, parentRect } = getRects();
      const playerCenterX = playerRect.left - parentRect.left + playerRect.width / 2;
      boss.style.transition = 'none';  // Remove transition for instant move
      boss.style.left = `${playerCenterX - boss.offsetWidth / 2}px`;
      boss.style.bottom = `${hoverHeight}px`;

      // Let rendering catch up (a frame or short delay)
      await new Promise(resolve => requestAnimationFrame(resolve));

      await new Promise(resolve => setTimeout(resolve, 300)); // small hover pause, quicker than before

      shakeScreen();

      // Slam down animation
      await animateBottomPosition(groundLevel, slamDurationDown);

      createBurst(playerCenterX, groundLevel);

      // Hold slammed position while checking collision multiple times a second, respond quick but not too spammy
      await monitorCollisionDuringSlam(slamHoldDuration);

      // Slam back up
      await animateBottomPosition(hoverHeight, slamDurationUp);

      slamCount++;

      // Cooldown between slams
      await new Promise(resolve => setTimeout(resolve, slamCooldown));
    }

    console.log("Slam attack finished");

    // Reset boss position or continue attack cycles
    if (typeof resetBossPosition === 'function') {
      resetBossPosition();
    }
    if (typeof cycleBossAttacks === 'function') {
      // Reduced delay to chain attacks faster
      setTimeout(cycleBossAttacks, 5000);
    }
  }

  performSlam();
}
 
function bossExplosionRain() {
    boss.style.animation = "boss-shake 1s infinite alternate";

    let dropCount = 0;
    let dropInterval = setInterval(() => {
        if (dropCount >= 10) {
            clearInterval(dropInterval);
            boss.style.animation = "";
            setTimeout(cycleBossAttacks, 3000); // Cooldown before next attack
            return;
        }

        // Randomize the X position based on the player's position
        let playerPositionX = parseInt(player.style.left);
        let explosionBlock = document.createElement('div'); // Corrected to use document.createElement
        explosionBlock.classList.add('explosive-block'); // Add a class if you want to style it later
        explosionBlock.style.position = "absolute"; // Important for positioning
        explosionBlock.style.left = (playerPositionX + Math.random() * 30 - 15) + "px"; // Randomize the horizontal position
        explosionBlock.style.bottom = "400px"; // Start high
        explosionBlock.style.width = "30px"; // Width of the falling block
        explosionBlock.style.height = "10px"; // Height of the falling block
        explosionBlock.style.backgroundColor = "red"; // Color of the falling block
        gameWorld.appendChild(explosionBlock);

        let fallSpeed = 5; // Speed of fall
        let fallInterval = setInterval(() => {
            explosionBlock.style.bottom = (parseInt(explosionBlock.style.bottom) - fallSpeed) + "px";

            if (parseInt(explosionBlock.style.bottom) <= 0) {
                createBurst(parseInt(explosionBlock.style.left), 0); // Create burst effect
                if (checkCollision(explosionBlock, player)) {
                    reduceLives(); // Reduce lives if hit
                }
                explosionBlock.remove(); // Remove block once it hits ground
                clearInterval(fallInterval);
            }
        }, 50); // Update every 50ms

        dropCount++;
    }, 1000); // Drop every second
}


class Laser {
    constructor(x, y, direction, length) {
        this.x = x;
        this.y = y;
        this.direction = direction;  // 'vertical' or 'horizontal'
        this.length = length;
        this.element = null;
    }

    createElement() {
        this.element = document.createElement('div');
        this.element.style.position = 'absolute';
        this.element.style.backgroundColor = 'yellow';
        if (this.direction === 'vertical') {
            this.element.style.width = '4px';
            this.element.style.height = this.length + 'px';
            this.element.style.left = this.x + 'px';
            this.element.style.bottom = this.y + 'px';
        } else {
            this.element.style.height = '4px';
            this.element.style.width = this.length + 'px';
            this.element.style.left = this.x + 'px';
            this.element.style.bottom = this.y + 'px';
        }
        this.element.style.opacity = '0.8';
        this.element.style.zIndex = '1000';
        this.element.classList.add('laser-beam');
        document.getElementById('game-world').appendChild(this.element);
    }

    activate() {
        // Make laser red and fully opaque when activated
        if (!this.element) return;
        this.element.style.backgroundColor = 'red';
        this.element.style.opacity = '1';
    }

    remove() {
        if (this.element && this.element.parentElement) {
            this.element.parentElement.removeChild(this.element);
            this.element = null;
        }
    }

    getBoundingRect() {
        return this.element.getBoundingClientRect();
    }
}

function isPlayerOnLaser(laser) {
    if (!laser.element) return false;
    const playerRect = player.getBoundingClientRect();
    const laserRect = laser.getBoundingRect();

    return !(
        playerRect.right < laserRect.left ||
        playerRect.left > laserRect.right ||
        playerRect.bottom < laserRect.top ||
        playerRect.top > laserRect.bottom
    );
}

// Main laser phase boss move function - call it with await in your attack cycle
async function laserPhaseMove() {
    displayMessage("Dodge the lasers!", 2);
    await sleep(2000); // Wait for player to read the message

    const repeats = 4;
    const gameWorld = document.getElementById('game-world');
    const gameBounds = gameWorld.getBoundingClientRect();

    for (let round = 0; round < repeats; round++) {
        // Spawn lasers
        const lasers = [];

        // Number of lasers per round (can tweak for difficulty)
        const lasersCount = 5;

        for (let i = 0; i < lasersCount; i++) {
            const vertical = Math.random() < 0.5;

            if (vertical) {
                // Random X inside game world boundaries
                const xPos = Math.random() * gameBounds.width;
                // Y set to bottom of game world container - zero
                lasers.push(new Laser(xPos, 0, 'vertical', gameBounds.height));
            } else {
                // Random Y inside game world height
                const yPos = Math.random() * gameBounds.height;
                // X at left edge = 0
                lasers.push(new Laser(0, yPos, 'horizontal', gameBounds.width));
            }
        }

        // Create laser elements in DOM with warning color (yellow)
        lasers.forEach(laser => laser.createElement());

        // Warn lasers blinking: toggle opacity several times for 1 second
        const warningDurationMs = 1000;
        const blinkIntervalMs = 200;
        const blinkCount = warningDurationMs / blinkIntervalMs;
        for (let b = 0; b < blinkCount; b++) {
            lasers.forEach(laser => {
                if (!laser.element) return;
                laser.element.style.opacity = (b % 2 === 0) ? '0.3' : '0.8';
            });
            await sleep(blinkIntervalMs);
        }

        // Set lasers fully visible and red (active)
        lasers.forEach(laser => laser.activate());

        // Damage phase: 2 seconds, check collisions every 100ms
        const damageDurationMs = 2000;
        const damageCheckIntervalMs = 100;
        let elapsed = 0;

        while (elapsed < damageDurationMs) {
            lasers.forEach(laser => {
                if (isPlayerOnLaser(laser)) {
                    lives = Math.max(0, lives - 1);
                    displayMessage(`Hit! Lives: ${lives}`, 1);

                    // TODO: Add your death/game over logic here if lives <= 0
                }
            });
            await sleep(damageCheckIntervalMs);
            elapsed += damageCheckIntervalMs;
        }

        // Remove all lasers from DOM and clear array
        lasers.forEach(laser => laser.remove());
        lasers.length = 0;

        // Short delay before next round
        await sleep(500);
    }

    displayMessage("Laser phase complete!", 2);
    await sleep(2000);

    cycleBossAttacks();
}

// Helper sleep function (if not defined)

function getRandomSpawnCount(min = 1, max = 2) {
    // Reduced spawn per interval for better control
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

async function bossPhaseFiveAttackA() {
    displayMessage("Trial 1", 3);
    await sleep(3000);

    const spawnInterval = 1000;  // Spawn every 1s
    const maxTotalEnemies = 12;
    let totalSpawned = 0;

    await new Promise(resolve => {
        const intervalId = setInterval(() => {
            if (totalSpawned >= maxTotalEnemies) {
                clearInterval(intervalId);
                resolve();
                return;
            }

            let count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnEnemy();
                totalSpawned++;
            }

            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnFlyingEnemy();
                totalSpawned++;
            }

            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnObstacle();
                totalSpawned++;
            }
        }, spawnInterval);
    });

    await cycleBossAttacks();
}

async function bossPhaseFiveAttackB() {
    displayMessage("Trial 2", 3);
    await sleep(3000);

    const spawnInterval = 1200;
    const maxTotalEnemies = 12;
    let totalSpawned = 0;

    await new Promise(resolve => {
        const intervalId = setInterval(() => {
            if (totalSpawned >= maxTotalEnemies) {
                clearInterval(intervalId);
                resolve();
                return;
            }
            let count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnChargingEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i = 0; i < count && totalSpawned < maxTotalEnemies; i++) {
                spawnSniperEnemy();
                totalSpawned++;
            }
        }, spawnInterval);
    });

    await cycleBossAttacks();
}

async function bossPhaseFiveAttackC() {
    displayMessage("Trial 3", 3);
    await sleep(3000);

    const spawnInterval = 1100;
    const maxTotalEnemies = 12;
    let totalSpawned = 0;

    await new Promise(resolve => {
        const intervalId = setInterval(() => {
            if (totalSpawned >= maxTotalEnemies) {
                clearInterval(intervalId);
                resolve();
                return;
            }
            let count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnFlyingEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnReflectiveEnemy();
                totalSpawned++;
            }
        }, spawnInterval);
    });

    await cycleBossAttacks();
}

async function bossPhaseFiveAttackD() {
    displayMessage("Trial 4", 3);
    await sleep(3000);

    const spawnInterval = 1200;
    const maxTotalEnemies = 12;
    let totalSpawned = 0;

    await new Promise(resolve => {
        const intervalId = setInterval(() => {
            if (totalSpawned >= maxTotalEnemies) {
                clearInterval(intervalId);
                resolve();
                return;
            }
            let count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnLaserEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnSplitterEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnObstacle();
                totalSpawned++;
            }
        }, spawnInterval);
    });

    await cycleBossAttacks();
}

async function bossPhaseFiveAttackE() {
    displayMessage("Trial 5", 3);
    await sleep(3000);

    const spawnInterval = 1400;
    const maxTotalEnemies = 12;
    let totalSpawned = 0;

    await new Promise(resolve => {
        const intervalId = setInterval(() => {
            if (totalSpawned >= maxTotalEnemies) {
                clearInterval(intervalId);
                resolve();
                return;
            }
            let count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnFlyingEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnSniperEnemy();
                totalSpawned++;
            }
        }, spawnInterval);
    });

    await cycleBossAttacks();
}

async function bossPhaseFiveAttackF() {
    displayMessage("Trial 6", 3);
    await sleep(3000);

    const spawnInterval = 1300;
    const maxTotalEnemies = 12;
    let totalSpawned = 0;

    await new Promise(resolve => {
        const intervalId = setInterval(() => {
            if (totalSpawned >= maxTotalEnemies) {
                clearInterval(intervalId);
                resolve();
                return;
            }
            let count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnEnemy();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnVirusDrone();
                totalSpawned++;
            }
            count = getRandomSpawnCount(1,1);
            for(let i=0; i<count && totalSpawned < maxTotalEnemies; i++) {
                spawnSplitterEnemy();
                totalSpawned++;
            }
        }, spawnInterval);
    });

    await cycleBossAttacks();
}

function EnemyBarrage() {
    const numberOfFlyingEnemies = 3; // Total number of flying enemies to summon
    const numberOfChargingEnemies = 5; // Number of charging enemies to spawn
    const flyingSpawnDelay = 3000; // Delay between each flying enemy spawn (in milliseconds)
    const chargingSpawnDelay = 4000; // Delay between each charging enemy spawn (in milliseconds)
    const totalDuration = 15000; // Total time for the flying enemy spawning process (in milliseconds)

    // Function to spawn multiple flying enemies
    const flyingEnemiesInterval = setInterval(() => {
        if (numberOfFlyingEnemies > 0) {
            SpawnSplitterEnemy(); // Call to spawn a single flying enemy
            numberOfFlyingEnemies--; // Decrement the count
        } else {
            clearInterval(flyingEnemiesInterval); // Stop spawning when done
        }
    }, flyingSpawnDelay); // Spawn every 2 seconds

    // Function to spawn charging enemies
    const chargingEnemiesInterval = setInterval(() => {
        if (numberOfChargingEnemies > 0) {
            spawnChargingEnemy(); // Call to spawn a charging enemy
            numberOfChargingEnemies--; // Decrement the count
        } else {
            clearInterval(chargingEnemiesInterval); // Stop spawning when done
        }
    }, chargingSpawnDelay); // Spawn every 3 seconds

    // Wait before proceeding to the next boss cycle
    setTimeout(() => {
        clearInterval(flyingEnemiesInterval); // Clear the spawn loops
        clearInterval(chargingEnemiesInterval);
        cycleBossAttacks(); // Proceed to the next boss attack
    }, totalDuration); // 10 seconds before moving to next attack
}

function bossPhaseThree() {
    const numberOfFlyingEnemies = 6; // Total number of flying enemies to summon
    const numberOfChargingEnemies = 10; // Number of charging enemies to spawn
    const flyingSpawnDelay = 3000; // Delay between each flying enemy spawn (in milliseconds)
    const chargingSpawnDelay = 4000; // Delay between each charging enemy spawn (in milliseconds)
    const totalDuration = 20000; // Total time for the flying enemy spawning process (in milliseconds)

    // Function to spawn multiple flying enemies
    const flyingEnemiesInterval = setInterval(() => {
        if (numberOfFlyingEnemies > 0) {
            spawnFlyingEnemy(); // Call to spawn a single flying enemy
            numberOfFlyingEnemies--; // Decrement the count
        } else {
            clearInterval(flyingEnemiesInterval); // Stop spawning when done
        }
    }, flyingSpawnDelay); // Spawn every 2 seconds

    // Function to spawn charging enemies
    const chargingEnemiesInterval = setInterval(() => {
        if (numberOfChargingEnemies > 0) {
            spawnChargingEnemy(); // Call to spawn a charging enemy
            numberOfChargingEnemies--; // Decrement the count
        } else {
            clearInterval(chargingEnemiesInterval); // Stop spawning when done
        }
    }, chargingSpawnDelay); // Spawn every 3 seconds

    // Wait before proceeding to the next boss cycle
    setTimeout(() => {
        clearInterval(flyingEnemiesInterval); // Clear the spawn loops
        clearInterval(chargingEnemiesInterval);
        cycleBossAttacks(); // Proceed to the next boss attack
    }, totalDuration); // 10 seconds before moving to next attack
}

function bossNewPower() {
    let shotsFired = 0;
    const maxShots = 15;
    const shotCooldown = 800; // 0.8 seconds between shots

    const shootInterval = setInterval(() => {
        if (shotsFired >= maxShots) {
            clearInterval(shootInterval);

            // Introduce a delay before invoking the next attack or phase
            setTimeout(() => {
                cycleBossAttacks(); // Call back the attack cycle function
            }, 2000); // 2 seconds for any cooling down or animation effect
            return; // Stop firing after maximum shots
        }

        // Calculate the boss's and player's positions
        const bossX = parseInt(boss.style.left) + boss.offsetWidth / 2; // Middle of the boss
        const bossY = parseInt(boss.style.bottom) + 30; // Just above the boss
        const playerX = parseInt(player.style.left) + player.offsetWidth / 2; // Middle of the player
        const playerY = parseInt(player.style.bottom); // Bottom of the player
        
        // Calculate the direction vector
        const dx = playerX - bossX;
        const dy = playerY - bossY;
        const distance = Math.sqrt(dx * dx + dy * dy);
        const velocity = 10; // Speed of the projectile

        // Create a projectile
        const projectile = document.createElement('div');
        projectile.classList.add('boss-projectile');
        projectile.style.width = '10px';
        projectile.style.height = '10px';
        projectile.style.backgroundColor = 'orange';
        projectile.style.position = 'absolute';
        projectile.style.left = `${bossX - 5}px`; // Center it
        projectile.style.bottom = `${bossY}px`; // Start just above the boss
        gameWorld.appendChild(projectile);

        let projectileInterval = setInterval(() => {
            // Move projectile towards the player
            const moveX = (dx / distance) * velocity; // Calculate x movement
            const moveY = (dy / distance) * velocity; // Calculate y movement
            projectile.style.left = (parseInt(projectile.style.left) + moveX) + 'px';
            projectile.style.bottom = (parseInt(projectile.style.bottom) + moveY) + 'px';

            // Check collision
            if (checkCollision(player, projectile)) {
                reduceLives(); // Reduce player lives on hit
                projectile.remove(); // Remove projectile on hit
                clearInterval(projectileInterval);
            }

            // Remove projectile if it goes off-screen
            if (parseInt(projectile.style.bottom) > gameContainer.offsetHeight || 
                parseInt(projectile.style.left) < 0 || 
                parseInt(projectile.style.left) > gameContainer.offsetWidth) {
                projectile.remove(); // Remove off-screen
                clearInterval(projectileInterval);
            }
        }, 50); // Update every 50ms

        shotsFired++;
    }, shotCooldown); // Fire every 0.8 seconds
}
 
 
 
 
            function displayBossHealth() {
                bossHealthBar.style.display = 'block';
                updateBossHealth();
            }
 
function updateBossHealth() {
    // Ensure the health bar width updates according to boss health
    const maxHealth = 150; // Define the maximum health for level 3
    const currentHealth = Math.max(0, Math.min(bossHealth, maxHealth)); // Ensure health stays within bounds

    // Calculate the percentage of current health relative to the maximum health
    const healthPercentage = (currentHealth / maxHealth) * 100;

    // Update the CSS width of the health bar to reflect the current health
    bossHealthBar.style.width = `${healthPercentage}%`;

    // Optional: Set a different color based on health status (for visual feedback)
    if (currentHealth > maxHealth * 0.5) {
        bossHealthBar.style.backgroundColor = 'green'; // Healthy
    } else if (currentHealth > maxHealth * 0.2) {
        bossHealthBar.style.backgroundColor = 'yellow'; // Caution
    } else {
        bossHealthBar.style.backgroundColor = 'red'; // Critical health
    }
}
 
            function spawnBossEnemies() {
                if (bossShielded) {
                    for (let i = 0; i < 2; i++) {
                        const enemy = createElement('enemy', enemies, parseInt(boss.style.left) + (i * 50));
                        enemy.style.bottom = `${Math.random() * 250}px`;
                    }
                }
            }
 
            function spawnBossBullets() {
                const bullet = createBullet();
                bullet.style.left = parseInt(boss.style.left) + 'px';
                bullet.style.bottom = parseInt(boss.style.bottom) + 30 + 'px';
                bullet.style.backgroundColor = 'orange';
                gameWorld.appendChild(bullet);
                bullets.push({ element: bullet, direction: -1 });
            }
 
function checkBossHit() {
    if (!boss || bossShielded) return; // Stop damaging if boss is shielded

    bullets.forEach((bullet, bulletIndex) => {
        if (checkCollision(bullet.element, boss)) {
            bossHealth -= 2; // Decrement boss health
            updateBossHealth();
            bullet.element.remove();
            bullets.splice(bulletIndex, 1);
            
            // Check if the boss is defeated
            if (bossHealth <= 0) {
                displayMessage("Boss defeated!");
                onBossDefeated(); // Trigger boss defeat logic
            }
        }
    });
}
 
 
 
function onBossDefeated() {
    bossHealthBar.style.display = 'none'; // Hide health bar upon defeat

    const gameMode = localStorage.getItem('gameMode');
    let messages = []; // Array to hold messages

    // Create messages based on the level
    if (level === 1) {
        messages = [
            "Player: Take THAT!.",
            "Boss: Noooo! You may have won, but I'll see you in the next level!",
            "Boss: Until next time.",
            "Boss: Prepare yourself for what's to come!"
        ];
    } else if (level === 2) {
        messages = [
            "Player: Heh to ez!.",
            "Boss: You think this is the end? I’ll return!",
            "Boss: With my new enemies, you will never win!",
            "Boss: Prepare for an even greater challenge in Level 3!",
            "Boss: You will need to be stronger to defeat me next time!",
        ];
} else if (level === 3) {
    messages = [
        "Boss: How could this happen?!",
        "Boss: Well... That was all the attacks I had... and you beated them.",
        "Boss: Well now worries because my brother knows about this now.",
        "Boss: He will make sure your dead.",
        "Player: What do you mean your brother is coming to get me?.",
        "Boss: The strongest one in our family known for wiping all advanturers.",
        "Player: How come he is the strongest.",
        "Boss: he is known for his annoying attacks and summoning things.",
        "Boss: He plays around to much with his players.",
        "Boss: Good luck because this might be your actual last fight...",
        "Player: Ok?...",
    ];
    } else if (level === 4) {
        messages = [
            "Boss: I wish not to speak with you, get out.",
        ];
    } else if (level === 5) {
        messages = [
            "Trials ended",
            "Thank you for playing.",
            "That is the end of the game.",
        ];
}

// Function to display messages sequentially
function displaySequentialMessages(messages, index) {
    if (index < messages.length) {
        displayMessage(messages[index]); // Display current message
        
        // Set timeout for the next message
        setTimeout(() => {
            displaySequentialMessages(messages, index + 1); // Move to next message
        }, 4500); // 4.5 seconds delay
    } else {
        // After all messages in level 3, unlock Endless Mode
        if (level === 6) {
            localStorage.setItem('endlessModeUnlocked', 'true');
            localStorage.setItem('sandboxModeUnlocked', 'true');
            displayMessage("Endless Mode And sandbox Unlocked!"); // Optional inform player
            showEndlessModeButton();
            setTimeout(() => {
                setupNextLevel(); // Proceed to the next level setup
            }, 3000);
        } else {
            setupNextLevel(); // Proceed to the next level setup
        }
    }
}



    // Start the message display
    displaySequentialMessages(messages, 0);
}

function setupNextLevel() {
    // Check if in Endless Mode or Story Mode to manage levels separately
    if (isEndlessMode) {
        // Increment level for Endless mode
        currentEndlessLevel++; 
        localStorage.setItem('endlessLevel', currentEndlessLevel); // Save updated level
        
        displayMessage(`You've advanced to Endless Level ${currentEndlessLevel}!`);
        
    } else {
        // Logic for Story Mode - increment story level
        storyModeLevel++;
        if (storyModeLevel > 5) {
            storyModeLevel = 1; // Reset back to Level 1 if beyond max
        }
        localStorage.setItem('storyLevel', storyModeLevel); // Save updated level
        
        displayMessage(`You've advanced to Story Level ${storyModeLevel}!`);
    }

    // Set up the boss door to advance to the next level
    const bossDoor = document.createElement('div'); // Create a new div for the boss door
    bossDoor.classList.add('boss-door'); // Add class for styling
    bossDoor.style.position = 'absolute'; // Positioning for the door
    bossDoor.style.left = '600px'; // Specify door's X position
    bossDoor.style.bottom = '0px'; // Specify door's Y position (ground level)
    bossDoor.style.width = '50px'; // Set width
    bossDoor.style.height = '100px'; // Set height
    bossDoor.style.backgroundColor = 'gold'; // Set background color (for visibility)
    bossDoor.style.border = '2px solid black'; // Optional: add a border
    bossDoor.style.boxShadow = '0 0 15px rgba(255, 215, 0, 1)'; // Glow effect

    // Append the boss door to the game world
    gameWorld.appendChild(bossDoor);

    // Inform the player they can interact with the door
    displayMessage("Press 'E' to proceed to the next level!");
    
    // Allow player to transition to the next level upon interacting
    document.addEventListener('keydown', function handleKeyDown(event) {
        if (event.key === 'E' || event.key === 'e') {
            displayMessage("Refreshing to Level " + level + "...");
            location.reload(); // Refresh the page to start the new level
            console.log("Page refreshed for Level " + level + ".");
            document.removeEventListener('keydown', handleKeyDown); // Remove the event listener to prevent repeated triggering
        }
    });
}

function clearAllElements() {
    // Clear all elements in the game (elements grouped into arrays for easier management)
    [obstacles, enemies, bullets.map(b => b.element), powerUps, platforms, bossDoors, coins].forEach(arr => {
        arr.forEach(el => el.remove());
        arr.length = 0; // Clear the array
    });
}

function SendBackToDoor() {
    setTimeout(() => {
        player.style.left = "50px";
        player.style.bottom = "0px";

        setTimeout(() => {
            activateBossPower();
            level = 2; // Reset to Level 1
            resetGame();
            startLevel(); // Restart the game
        }, 2000);
    }, 3000);
}
 
 
            function activateFriendDialogue() {
                interactMessage.style.display = 'none';
                displayMessage("Thank you for saving me!");
                setTimeout(() => {
                    displayMessage("I got a secret power for you.");
                    setTimeout(() => {
                        grantBossPowerUp();
                        sendbacktodoor();
                        friend.style.display = 'none';
                    }, 3000);
                }, 2000);
            }
 
let isCharging = false;
let chargeTime = 0;
 
function shootLaserBlast(chargeTime) {
    let laser = document.createElement('div');
    laser.classList.add('laser');
    laser.style.left = player.style.left;
    laser.style.bottom = player.style.bottom;
    laser.style.width = `${chargeTime * 10}px`;
    laser.style.height = "10px";
    laser.style.backgroundColor = "cyan";
    gameWorld.appendChild(laser);
 
    setTimeout(() => {
        laser.remove();
        enemies.forEach(enemy => {
            if (checkCollision(laser, enemy)) {
                enemy.remove();
            }
        });
    }, 100);
}
 
 
            function displayMessage(message) {
                powerUpMessage.textContent = message;
                powerUpMessage.style.display = 'block';
                setTimeout(() => {
                    powerUpMessage.style.display = 'none';
                }, 2000);
            }
 
            function checkScoreForLevelTransition() {
                   localStorage.setItem('playerLevel', level); // Save updated level in local stora
            }
 
            function spawnFlyingEnemy() {
                const flyingEnemy = createElement('flying-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                flyingEnemy.style.bottom = Math.random() * 150 + 50 + 'px';
            }
 
function moveFlyingEnemies() {
    enemies.forEach((enemy, index) => {
        if (enemy.classList.contains('flying-enemy')) {
            // Move the enemy up and down
            let enemyYPosition = parseInt(enemy.style.bottom) || 0; // Get current Y position or default to 0
            let direction = enemy.dataset.direction ? parseInt(enemy.dataset.direction) : 1; // Up or down direction

            // Update vertical position of the flying enemy
            enemyYPosition += direction * 1; // Move 1 pixel per frame 
            enemy.style.bottom = enemyYPosition + 'px';

            // Reverse direction if the flying enemy reaches a certain height
            if (enemyYPosition >= 150) { // Maximum height
                direction = -1; // Change to downward movement
            } else if (enemyYPosition <= 0) { // Minimum height (ground)
                direction = 1; // Change to upward movement
            }
            enemy.dataset.direction = direction; // Store the current direction for the next update

            // Move the enemy left
            enemy.style.left = (parseInt(enemy.style.left) - 2) + 'px';

            // Check shooting
            if (enemy.dataset.lastShotTime === undefined || Date.now() - enemy.dataset.lastShotTime > 10000) { // Every 10 seconds
                shootBulletAtPlayer(enemy); // Shoot at the player
                enemy.dataset.lastShotTime = Date.now(); // Update the last shot time
            }

            // Boundary checking and collision with the player
            if (parseInt(enemy.style.left) < 0) {
                removeElement(enemy, enemies, index, 30);
            } else if (checkCollision(player, enemy)) {
                reduceLives();
                removeElement(enemy, enemies, index, 0);
            }
        }
    });
}

// Function to shoot a bullet aimed at the player
function shootBulletAtPlayer(enemy) {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet'); // Add your bullet class
    bullet.style.width = '10px';
    bullet.style.height = '5px';
    bullet.style.backgroundColor = 'orange'; // Bullet color
    bullet.style.position = 'absolute';
    
    // Position the bullet at the enemy's current position
    bullet.style.left = (parseInt(enemy.style.left) + 20) + 'px'; // Position it slightly in front of the enemy
    bullet.style.bottom = (parseInt(enemy.style.bottom) + 15) + 'px'; // Start just below the enemy
    gameWorld.appendChild(bullet); // Add bullet to the game world
    
    // Calculate angle towards the player
    const playerX = parseInt(player.style.left) + player.offsetWidth / 2; // Center of player
    const playerY = parseInt(player.style.bottom); // Bottom of player

    const dx = playerX - (parseInt(bullet.style.left) + bullet.offsetWidth / 2);
    const dy = playerY - (parseInt(bullet.style.bottom));
    const distance = Math.sqrt(dx * dx + dy * dy); 
    const velocity = 5; // Speed of the bullet

    // Bullet movement
    const moveBullet = setInterval(() => {
        const moveX = (dx / distance) * velocity; 
        const moveY = (dy / distance) * velocity;

        bullet.style.left = (parseInt(bullet.style.left) + moveX) + 'px';
        bullet.style.bottom = (parseInt(bullet.style.bottom) + moveY) + 'px';

        // Check if the bullet hits the player or goes off screen
        if (checkCollision(bullet, player)) {
            reduceLives(); // Damages the player
            bullet.remove(); // Remove bullet
            clearInterval(moveBullet); // Stop moving the bullet
        }

        if (parseInt(bullet.style.left) < 0 || parseInt(bullet.style.left) > gameWorld.offsetWidth || parseInt(bullet.style.bottom) < 0) {
            bullet.remove(); // Remove bullet if it goes off screen
            clearInterval(moveBullet); // Stop moving the bullet
        }
    }, 1000 / 60); // 60 FPS
}
 
            function spawnChargingEnemy() {
                const chargingEnemy = createElement('charging-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                chargingEnemy.style.bottom = '0px';
                chargingEnemy.setAttribute('data-charge', '0');
                chargingEnemy.classList.add('charging-prep'); // Fading in/out red glow effect
            }
 
 
            function createChargeTrail(x, y) {
                const trail = document.createElement('div');
                trail.classList.add('charge-trail');
                trail.style.left = x + 'px';
                trail.style.bottom = y + 'px';
                gameWorld.appendChild(trail);
 
                setTimeout(() => trail.remove(), 400); // Shorter effect for smoothness
            }
 
 
 
 
function moveChargingEnemies() {
    enemies.forEach((enemy, index) => {
        if (enemy.classList.contains('charging-enemy')) {
            let chargeTime = parseInt(enemy.getAttribute('data-charge'));
 
            if (chargeTime < 60) {
                // Charging phase (fading in/out glow)
                enemy.setAttribute('data-charge', chargeTime + 1);
            } else {
                // Fully Charged (Solid Red Outline + Charging Forward)
                enemy.classList.remove('charging-prep');
                enemy.classList.add('charging-active');
                enemy.style.left = (parseInt(enemy.style.left) - 6) + 'px';
 
                // Create a bright red trail
                createChargeTrail(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
            }
 
            // Check collision with player
            if (checkCollision(player, enemy)) {
                createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom)); // Impact explosion
                reduceLives();
                removeElement(enemy, enemies, index, 0);
            }
 
            // Remove if out of bounds
            if (parseInt(enemy.style.left) < gameScrollPosition - enemy.offsetWidth) {
                removeElement(enemy, enemies, index, 30);
            }
        }
    });
}
 
 
 
            function spawnStealthEnemy() {
                const stealthEnemy = createElement('stealth-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                stealthEnemy.setAttribute('data-stealth', '0');
                stealthEnemy.style.backgroundColor = '#555';
                stealthEnemy.style.opacity = '1';
            }
 
            function moveStealthEnemies() {
                enemies.forEach(en => {
                    if (en.classList.contains('stealth-enemy')) {
                        const stealth = parseInt(en.getAttribute('data-stealth'));
                        if (stealth > 50) {
                            en.style.opacity = en.style.opacity == '0' ? '1' : '0';
                            en.setAttribute('data-stealth', '0');
                        } else {
                            en.setAttribute('data-stealth', stealth + 1);
                        }
                    }
                });
            }

function moveSniperEnemies() {
    enemies.forEach((enemy, index) => {
        if (enemy.classList.contains('sniper-enemy')) {
            const enemyX = parseInt(enemy.style.left) + enemy.offsetWidth / 2; // Center position
            const enemyY = parseInt(enemy.style.bottom) + enemy.offsetHeight; // Height

            // Shooting mechanism
            if (!enemy.dataset.lastShotTime || Date.now() - enemy.dataset.lastShotTime > 3000) { // Every 3 seconds
                shootAtPlayer(enemy);
                enemy.dataset.lastShotTime = Date.now(); // Update for next shot
            }

            // Check distance to player
            const distanceToPlayer = Math.sqrt(Math.pow(enemyX - (parseInt(player.style.left) + player.offsetWidth / 2), 2) + 
                Math.pow(enemyY - parseInt(player.style.bottom), 2));
            
            if (distanceToPlayer < 300) { // Within 300 pixels visibility range
                enemy.style.opacity = '1'; // Fully visible
            } else {
                enemy.style.opacity = '0.5'; // Reduced opacity
            }
        }
    });
}

// Function for the sniper to shoot at the player
function shootAtPlayer(enemy) {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet'); // Add your class for the bullet
    bullet.style.width = '10px';
    bullet.style.height = '5px';
    bullet.style.backgroundColor = 'red'; // Bullet color
    bullet.style.position = 'absolute';
    
    // Position the bullet at the sniper's location
    bullet.style.left = (parseInt(enemy.style.left) + 20) + 'px'; // Set slight offset
    bullet.style.bottom = (parseInt(enemy.style.bottom) + 15) + 'px'; // Set above the sniper
    gameWorld.appendChild(bullet); // Add bullet to the game world

    // Calculate angle towards the player
    const playerX = parseInt(player.style.left) + player.offsetWidth / 2; // Center of player
    const playerY = parseInt(player.style.bottom); // Bottom of player

    const dx = playerX - (parseInt(bullet.style.left) + bullet.offsetWidth / 2);
    const dy = playerY - (parseInt(bullet.style.bottom));
    const distance = Math.sqrt(dx * dx + dy * dy); 
    const velocity = 5; // Speed of the bullet

    // Bullet movement logic
    const moveBullet = setInterval(() => {
        const moveX = (dx / distance) * velocity; // Calculate x movement direction
        const moveY = (dy / distance) * velocity; // Calculate y movement direction

        bullet.style.left = (parseInt(bullet.style.left) + moveX) + 'px';
        bullet.style.bottom = (parseInt(bullet.style.bottom) + moveY) + 'px';

        // Check for bullet collision with player
        if (checkCollision(bullet, player)) {
            reduceLives(); // Damage player
            bullet.remove(); // Remove bullet
            clearInterval(moveBullet); // Stop bullet movement
        }

        // Remove bullet if it goes off screen
        if (parseInt(bullet.style.left) < 0 || parseInt(bullet.style.left) > gameWorld.offsetWidth || parseInt(bullet.style.bottom) < 0) {
            bullet.remove(); // Remove bullet if it goes off screen
            clearInterval(moveBullet); // Stop bullet movement
        }
    }, 1000 / 60); // 60 FPS
}
 
function spawnSplitterEnemy() {
    const leftPos = gameScrollPosition + gameContainer.offsetWidth;
    const splitter = createElement('split-enemy', enemies, leftPos);
    splitter.style.left = leftPos + 'px';
    splitter.style.bottom = '0px';
    splitter.classList.add('split');  // Important!
    splitter.style.width = '50px';    
    splitter.style.height = '50px';
}

function moveSplitterEnemies() {
    enemies.forEach((enemy, index) => {
        if (enemy.classList.contains('split-enemy')) {
            const speed = enemy.classList.contains('split') ? 1 : 3; // mini splitters move faster
            enemy.style.left = (parseInt(enemy.style.left) - speed) + 'px';

            if (parseInt(enemy.style.left) < gameScrollPosition - enemy.offsetWidth) {
                removeElement(enemy, enemies, index, 30);  // Give some score for killing
            } else if (checkCollision(player, enemy)) {
                reduceLives();
                removeElement(enemy, enemies, index, 0);
            }
        }
    });
}
 
function handleSplitterEnemyHit(enemy, enemyIndex) {
    console.log('Splitter hit triggered for enemy:', enemy);
    if (enemy.classList.contains('split')) {  // just to be sure
        const baseLeft = parseInt(enemy.style.left);
        const baseBottom = enemy.style.bottom;
        const miniSize = 20;          // Increased size from 15 to 20 px
        const gap = 10;               // Gap between minis (pixels)

        for (let i = 0; i < 2; i++) { // Spawn only 2 mini enemies
            // Calculate left position for each mini enemy to have gap between them
            const miniLeft = baseLeft + i * (miniSize + gap);
            const miniEnemy = createElement('split-enemy', enemies, miniLeft);
            miniEnemy.style.width = miniSize + 'px';
            miniEnemy.style.height = miniSize + 'px';
            miniEnemy.classList.remove('split');
            miniEnemy.style.bottom = baseBottom; // Appear at the same vertical pos
        }
    }
    removeElement(enemy, enemies, enemyIndex, 0);
}
 
            function handleExplosiveEnemyHit(enemy, enemyIndex) {
                removeElement(enemy, enemies, enemyIndex, 0);
                enemies.forEach((otherEnemy, index) => {
                    if (calculateDistance(enemy, otherEnemy) < 50) {
                        removeElement(otherEnemy, enemies, index, 0);
                    }
                });
                createBurst(parseInt(enemy.style.left), parseInt(enemy.style.bottom));
                reduceLives();
            }
 
            function spawnSniperEnemy() {
                const sniper = createElement('sniper-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                sniper.style.bottom = '200px';
                const sniperInterval = setInterval(() => {
                    if (Math.random() < 0.05 && calculateDistance(player, sniper) < 300) {
                        const bullet = createBullet();
                        bullet.style.left = parseInt(sniper.style.left) + 'px';
                        bullet.style.bottom = parseInt(sniper.style.bottom) + 'px';
                        bullet.style.backgroundColor = 'red';
                        gameWorld.appendChild(bullet);
                        bullets.push({ element: bullet, direction: -1 });
                    }
                }, 1000);
 
                sniper.setAttribute('data-interval', sniperInterval);
            }
 

// Function to spawn the reflective enemy at the bottom
function spawnReflectiveEnemy() {
    // Create the reflective enemy element
    var reflectiveEnemy = createElement('reflective-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);

    // Set initial attributes
    reflectiveEnemy.setAttribute('data-health', '10'); // Set initial health or reflection strength
    reflectiveEnemy.classList.add('outlined'); // Add CSS class for glowing outline
    reflectiveEnemy.dataset.reflectiveHits = 0; // Initialize reflection hits tracking

    // Position the reflective enemy at the bottom of the game world
    reflectiveEnemy.style.bottom = '0px'; // Set to 0 for the bottom position

    // Set up shooting capability
    reflectiveEnemy.dataset.lastShotTime = Date.now(); // Track when the last shot was fired

    // Append the reflective enemy to the game world
    gameWorld.appendChild(reflectiveEnemy);
}

// Function to handle shooting bullets at the player
function shootAtPlayer2(reflectiveEnemy) {
    const bullet = document.createElement('div');
    bullet.classList.add('enemy-bullet'); // Style class for the bullet
    bullet.style.width = '10px';
    bullet.style.height = '5px';
    bullet.style.backgroundColor = 'red'; // Enemy bullet color
    bullet.style.position = 'absolute';

    // Position the bullet at the enemy's location
    bullet.style.left = `${parseInt(reflectiveEnemy.style.left) + 20}px`; // Center the bullet
    bullet.style.bottom = `${parseInt(reflectiveEnemy.style.bottom) + 15}px`; // Above the enemy
    gameWorld.appendChild(bullet); // Add bullet to the game world

    // Calculate the player’s position
    const playerX = parseInt(player.style.left) + player.offsetWidth / 2; // Center of player
    const playerY = parseInt(player.style.bottom); // Bottom of player

    // Calculate direction towards the player
    const dx = playerX - (parseInt(bullet.style.left) + bullet.offsetWidth / 2);
    const dy = playerY - parseInt(bullet.style.bottom);
    const distance = Math.sqrt(dx * dx + dy * dy);
    const velocity = 5; // Speed of the bullet

    // Move the bullet towards the player
    const moveBulletInterval = setInterval(() => {
        const moveX = (dx / distance) * velocity; // Calculate x movement
        const moveY = (dy / distance) * velocity; // Calculate y movement

        bullet.style.left = (parseInt(bullet.style.left) + moveX) + 'px';
        bullet.style.bottom = (parseInt(bullet.style.bottom) + moveY) + 'px';

        // Check for collision with player
        if (checkCollision(player, bullet)) {
            reduceLives(); // Damage player
            bullet.remove(); // Remove bullet
            clearInterval(moveBulletInterval); // Stop movement
        }

        // Remove bullet if it goes off screen
        if (parseInt(bullet.style.left) < 0 || parseInt(bullet.style.left) > gameWorld.offsetWidth || parseInt(bullet.style.bottom) < 0) {
            bullet.remove(); // Remove bullet if it goes off screen
            clearInterval(moveBulletInterval); // Stop movement
        }
    }, 1000 / 60); // Move at 60 FPS
}

// Update reflective enemy behavior to shoot at player on hit
function handleBulletCollisionWithReflectiveEnemy(reflectiveEnemy, bullet) {
    // Check if the bullet collides with the reflective enemy
    if (checkCollision(reflectiveEnemy, bullet)) {
        bullet.remove(); // Remove bullet on collision
        reflectiveEnemy.dataset.reflectiveHits++; // Track the number of hits

        // Call the shoot function after a certain interval
        if (Date.now() - reflectiveEnemy.dataset.lastShotTime >= 1) { // Cooldown for 2 seconds between shots
            shootAtPlayer2(reflectiveEnemy);
            reflectiveEnemy.dataset.lastShotTime = Date.now(); // Reset the shot time
        }
    }
}
 
            function spawnNewInteractiveEnemies() {
                const randomFeature = Math.random();
                if (randomFeature < 0.2) {
                    spawnTeleporterEnemy();
                } else if (randomFeature < 0.6) {
                    spawnVelocityEnemy();
                } else if (randomFeature < 0.8) {
                    spawnStickyEnemy();
                } else {
                    spawnReflectiveEnemy();
                }
            }
 
            function moveNewEnemies() {
                moveTeleporterEnemies();
                moveVelocityEnemies();
                moveStickyEnemies();
            }
 
            // New enemies with creative features
            function spawnTeleporterEnemy() {
                const teleporterEnemy = createElement('teleporter-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                teleporterEnemy.style.backgroundColor = '#8A2BE2'; 
                teleporterEnemy.style.bottom = '0px';
                teleporterEnemy.setAttribute('data-teleport', '0');
            }
 
            function moveTeleporterEnemies() {
                enemies.forEach(en => {
                    if (en.classList.contains('teleporter-enemy')) {
                        const teleport = parseInt(en.getAttribute('data-teleport'));
                        if (teleport > 100) {
                            en.style.left = Math.random() * (gameWorld.offsetWidth - en.offsetWidth) + 'px';
                            en.setAttribute('data-teleport', '0');
                        } else {
                            en.setAttribute('data-teleport', teleport + 1);
                        }
                    }
                });
            }

function moveReflectiveEnemies() {
    var enemiesToRemove = []; // Array to track enemies to be removed

    enemies.forEach(function(en, index) {
        if (en.classList.contains('reflective-enemy')) {
            // Move the reflective enemy to the left
            en.style.left = (parseInt(en.style.left) - 1) + 'px';

            // Check for collision with bullets
            bullets.forEach(function(bullet, bulletIndex) {
                // If the bullet collides with the reflective enemy
                if (checkCollision(en, bullet.element)) {
                    // Reflect the bullet's direction
                    bullet.direction *= -1; 

                    // Adjust bullet position slightly to avoid getting stuck
                    bullet.element.style.left = (parseInt(bullet.element.style.left) + (bullet.direction * 5)) + 'px';

                    // Increment the reflective hits count
                    en.dataset.reflectiveHits++;

                    // Optional: handle when you want to remove the enemy after a number of hits, if desired
                    if (parseInt(en.dataset.reflectiveHits) >= 10) {
                        enemiesToRemove.push(index); // Mark for removal
                    }

                    // Remove the bullet
                    bullet.element.remove();
                    bullets.splice(bulletIndex, 1); // Remove bullet from the bullets array
                }
            });

            // Check for collision with the player
            if (checkCollision(player, en)) {
                reduceLives(); // Reduce lives if player hits the reflective enemy
                enemiesToRemove.push(index); // Mark enemy for removal
            }

            // Remove if off-screen
            if (parseInt(en.style.left) < -en.offsetWidth) {
                enemiesToRemove.push(index); // Mark for removal
            }
        }
    });

    // Remove enemies marked for removal
    enemiesToRemove.reverse().forEach(function(index) {
        removeElement(enemies[index], enemies, index, 0);
    });
}
 
            function spawnVelocityEnemy() {
                const velocityEnemy = createElement('velocity-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                velocityEnemy.style.backgroundColor = '#FF4500'; 
                velocityEnemy.style.bottom = Math.random() * 150 + 'px';
                velocityEnemy.setAttribute('data-speed', '2');
            }
 
            function moveVelocityEnemies() {
                enemies.forEach(en => {
                    if (en.classList.contains('velocity-enemy')) {
                        const speed = parseInt(en.getAttribute('data-speed'));
                        en.style.left = (parseInt(en.style.left) - speed) + 'px';
                        en.style.bottom = (parseInt(en.style.bottom) + (Math.random() - 0.5) * 10) + 'px';
                        if (parseInt(en.style.left) < gameScrollPosition - en.offsetWidth) {
                            removeElement(en, enemies, 0, 30);
                        } else if (checkCollision(player, en)) {
                            reduceLives();
                            removeElement(en, enemies, 0, 0);
                        }
                    }
                });
            }

function spawnVirusDrone() {
    const leftPos = gameScrollPosition + gameContainer.offsetWidth;
    const virus = document.createElement('div');
    virus.classList.add('virus-drone');
    virus.style.bottom = '380px'; // top of screen (400px height container minus 20 px)
    virus.style.left = leftPos + 'px';
    virus.dataset.speed = 8;
    virus.dataset.activeEnemy = ''; // enemy it’s currently infecting

    gameWorld.appendChild(virus);
    viruses.push(virus); // store in separate array to manage separately
}
 
            function spawnStickyEnemy() {
                const stickyEnemy = createElement('sticky-enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
                stickyEnemy.style.backgroundColor = '#FFD700'; 
                stickyEnemy.style.bottom = '0px';
            }
 
            function moveStickyEnemies() {
                enemies.forEach(en => {
                    if (en.classList.contains('sticky-enemy')) {
                        en.style.left = (parseInt(en.style.left) - 1) + 'px';
                        if (checkCollision(player, en)) {
                            player.style.backgroundColor = '#FFD700';
                            setTimeout(() => player.style.backgroundColor = '#4CAF50', 2000);
                            removeElement(en, enemies, 0, 0);
                        }
                    }
                });
            }
 
 
    </script>
</body>
</html>