<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:,">
    <title>Tower defense</title>
  <script type="module" crossorigin src="/assets/index-Bi8mMFyO.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-CwugAcOs.css">
</head>

<body>
    <canvas class="webgl"></canvas>

    <!-- Menu -->
    <div id="MenuOverlay" class="invisible">
        <button id="MenuPlay" class="button menu-btn">PLAY</button>
        <button id="settings" class="button menu-btn">SETTINGS</button>
    </div>

    <!-- Lobby -->
    <div id="LobbyOverlay" class="invisible ui-container">
        <div id="LevelTitle"></div>
        <button id="LobbyPlay" class="button">PLAY</button>
    </div>

    <!-- Round HUD -->
    <div id="RoundOverlay" class="invisible ui-container">

        <!-- Top left: wave + timer -->
        <div id="RoundTopLeft">
            <div id="WaveNumber">Wave 1/15</div>
            <div id="WaveTimer"></div>
        </div>

        <!-- Top center: health bar (normal or boss) -->
        <div id="HealthBarContainer">
            <!-- Normal base health bar -->
            <div id="NormalHealthBar">
                <div id="NormalHealthFill"></div>
                <div id="NormalHealthText">100 / 100</div>
            </div>

            <!-- Boss health bar (shown during boss waves, replaces normal) -->
            <div id="BossHealthBar" class="invisible">
                <div id="BossIconSlot"></div>
                <div id="BossBarInner">
                    <div id="BossHealthFill"></div>
                    <div id="BossHealthText">1200 / 1200</div>
                </div>
            </div>
        </div>

        <!-- Bottom left: cash -->
        <div id="CashDisplay">💰 : 200</div>

        <!-- Bottom center: loadout -->
        <div id="LoadoutBar"></div>

        <!-- Start wave button -->
        <button id="StartWaveBtn" class="start-wave-btn" style="display:none;">Start Game</button>

        <!-- Skip dialog (appears after skipAfter) -->
        <div id="SkipDialog" class="invisible">
            <div id="SkipDialogTitle">Skip wave?</div>
            <div id="SkipDialogButtons">
                <button id="SkipNo"  class="skip-dialog-btn skip-no">✕</button>
                <button id="SkipYes" class="skip-dialog-btn skip-yes">✓</button>
            </div>
        </div>

    </div>

    <!-- Tower info panel -->
    <div id="TowerInfoPanel" class="invisible">
        <div id="TowerInfoHeader">
            <span id="TowerInfoName"></span>
            <button id="TowerInfoClose">✕</button>
        </div>
        <div id="TowerStatsContainer"></div>
        <button id="TowerAbilityBtn" class="ability-btn" style="display:none;"></button>
        <button id="TowerUpgradeBtn" class="upgrade-btn"></button>
        <button id="TowerSellBtn" class="sell-btn" style="display:none">SELL — 💰0</button>
    </div>

    <!-- End screen -->
    <div id="EndScreen" class="end-screen invisible">
        <div id="EndScreenInner">
            <div id="EndScreenDeco"></div>
            <div id="EndScreenEyebrow"></div>
            <div id="EndScreenTitle"></div>
            <div id="EndScreenRule"></div>
            <div id="EndScreenMessage"></div>
            <button id="EndScreenBtn">Return to Lobby</button>
        </div>
    </div>

    <div id="SettingsOverlay" class="invisible">
        <div id="SettingsPanel">
            <h2>SETTINGS</h2>
            <div class="settings-row">
                <div class="settings-label">
                    🔊 Volume <span id="VolumeValue">100%</span>
                </div>
                <input type="range" id="VolumeSlider" min="0" max="100" value="100">
            </div>
            <button id="SettingsClose">CLOSE</button>
        </div>
    </div>

</body>
</html>