<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>星域战机 - STG</title>
<script>
(function () {
  var entry = document.querySelector('script[type="module"][src*="main.ts"]');
  if (!entry) return;
  var src = entry.getAttribute('src');
  fetch(src, { method: 'HEAD' }).then(function (res) {
    var ct = (res.headers.get('content-type') || '').toLowerCase();
    if (!res.ok || (ct.indexOf('javascript') === -1 && ct.indexOf('ecmascript') === -1 && ct.indexOf('wasm') === -1)) {
      throw new Error('deploy');
    }
  }).catch(function () {
    var loading = document.getElementById('loading-screen');
    var err = document.getElementById('error-screen');
    if (loading) loading.style.display = 'none';
    if (err) {
      var msg = err.querySelector('.error-msg');
      if (msg) {
        msg.innerHTML = '部署配置错误：站点正在加载源码 <code>main.ts</code>，浏览器无法运行。<br><br>'
          + 'Cloudflare Pages 请设置：<br>'
          + '· 构建命令：<code>npm ci && npm run build</code><br>'
          + '· 输出目录：<code>dist</code><br><br>'
          + '或本地 <code>npm run build</code> 后，仅上传 <code>dist</code> 文件夹内容。';
      }
      err.style.display = 'flex';
    }
  });
})();
</script>
  <script type="module" crossorigin src="./assets/index-IsOONoEr.js"></script>
  <link rel="stylesheet" crossorigin href="./assets/index-DglaFcO_.css">
<script id="vite-plugin-pwa:register-sw" src="./registerSW.js"></script></head>
<body>
<!-- Loading Screen -->
<div id="loading-screen">
  <canvas id="loading-canvas"></canvas>
  <div class="loading-content">
    <div class="loading-title">星域战机</div>
    <div class="loading-subtitle">STAR DOMAIN STG</div>
    <div class="loading-bar-container"><div class="loading-bar" id="loading-bar"></div></div>
    <div class="loading-text" id="loading-text">加载中...</div>
  </div>
</div>

<!-- Error Screen -->
<div id="error-screen">
  <div class="error-icon">⚠️</div>
  <div class="error-msg">游戏出了点小问题，请刷新页面重试</div>
  <button class="error-btn" onclick="location.reload()">刷新页面</button>
</div>

<div id="game-container">
  <canvas id="game-canvas"></canvas>

  <!-- Fullscreen Toggle -->
  <button class="fs-toggle" id="fs-toggle" title="全屏 (F11)" onclick="window.toggleFullscreen()">⛶</button>

  <!-- 底部工具栏 (全端统一入口) -->
  <div class="hud-toolbar" id="hud-toolbar" style="display:none">
    <button class="toolbar-btn" id="tb-backpack" title="背包 (I)">🎒 <span class="tb-label">背包</span></button>
    <button class="toolbar-btn" id="tb-status" title="状态 (C)">📊 <span class="tb-label">状态</span></button>
    <button class="toolbar-btn" id="tb-fusion" title="融合 (F)">🔀 <span class="tb-label">融合</span></button>
    <button class="toolbar-btn" id="tb-shop" title="商店 (B)">🛒 <span class="tb-label">商店</span></button>
    <button class="toolbar-btn" id="tb-pause" title="暂停 (ESC)">⏸ <span class="tb-label">暂停</span></button>
  </div>

  <!-- HUD (hidden by default) -->
  <div id="hud">
    <!-- Top Row -->
    <div class="hud-top">
      <!-- Left: Level + XP -->
      <div class="hud-top-left">
        <div class="hud-level">Lv.<span id="level-text">1</span></div>
        <div class="hud-xp-bar"><div class="hud-xp-fill" id="xp-fill" style="width:0%"></div></div>
      </div>
      <!-- Center: Wave + Timer -->
      <div class="hud-top-center">
        <div class="game-timer-hud" id="game-timer-hud">00:00</div>
        <div class="hud-wave" id="wave-display"></div>
        <div class="hud-wave-progress" id="wave-progress" style="display:none">
          <div class="hud-wave-progress-fill" id="wave-progress-fill" style="width:100%"></div>
        </div>
      </div>
      <!-- Right: Coins + Kills + Time -->
      <div class="hud-top-right">
        <div class="hud-coins">💰 <span id="gold-text">0</span></div>
        <div class="hud-kills">击杀: <span id="kills-text">0</span></div>
        <div class="hud-kills">⏱️ <span id="time-text">00:00</span></div>
        <div class="hud-kills">⭐ <span id="score-text">0</span></div>
      </div>
    </div>

    <!-- Boss HP Bar -->
    <div class="hud-boss-bar" id="boss-bar">
      <div class="hud-boss-name" id="boss-name">BOSS</div>
      <div class="hud-boss-hp-bar">
        <div class="hud-boss-hp-fill" id="boss-hp-fill" style="width:100%"></div>
        <div class="hud-boss-hp-pct" id="boss-hp-pct">100%</div>
      </div>
    </div>

    <!-- Combo Display -->
    <div class="combo-text" id="combo-text"></div>

    <!-- HP Bar (bottom area) -->
    <div class="hud-hp-container">
      <span>❤️</span>
      <div class="hud-hp-bar"><div class="hud-hp-fill" id="hp-fill" style="width:100%"></div></div>
      <span class="hud-hp-text" id="hp-text">100/100</span>
    </div>

    <!-- Buff/Debuff Status Bar -->
    <div class="hud-buff-bar" id="buff-bar"></div>

    <!-- Low HP Warning Overlay -->
    <div id="low-hp-warning"></div>

    <!-- Skill Bar -->
    <div class="hud-skill-bar" id="skill-bar">
      <div class="hud-skill-label">主动技能</div>
      <div class="hud-skill-row" id="active-skill-row"></div>
      <div class="hud-skill-label">被动技能</div>
      <div class="hud-skill-row" id="passive-skill-row"></div>
    </div>

    <!-- Weapon Bar (left vertical) -->
    <div class="hud-weapon-bar" id="weapon-bar">
      <div class="hud-weapon-bar-label">武器</div>
      <div class="hud-weapon-grid" id="weapon-grid"></div>
      <div class="hud-weapon-passive-row" id="weapon-passive-row"></div>
    </div>
  </div>

  <!-- Toast -->
  <div class="toast" id="toast"></div>

  <!-- Status / DPS Panel (toolbar C) -->
  <div id="status-panel" class="menu-screen" style="display:none;z-index:8500;">
    <div class="pause-title">📊 战斗状态</div>
    <div id="status-panel-content" style="width:min(90vw,400px);max-height:60vh;overflow-y:auto;padding:8px;"></div>
    <button class="pause-btn" id="btn-close-status" style="margin-top:12px;">关闭 (ESC)</button>
  </div>

  <!-- Countdown Overlay -->
  <div id="countdown-overlay">
    <div id="countdown-text" class="countdown-number"></div>
  </div>

  <!-- Pause Overlay -->
  <div id="pause-overlay">
    <div class="pause-title">⏸️ 已暂停</div>
    <div id="pause-seed-display" style="font-size:10px;color:#888;margin-bottom:8px;"></div>
    <div id="pause-main-menu">
      <div class="pause-buttons">
        <button class="pause-btn" id="btn-resume">▶ 继续游戏</button>
        <button class="pause-btn" id="btn-pause-weapons">🔫 武器</button>
        <button class="pause-btn" id="btn-pause-skills">✨ 技能</button>
        <button class="pause-btn" id="btn-pause-shop">💰 商店</button>
        <button class="pause-btn" id="btn-pause-menu">🏠 返回主菜单</button>
      </div>
    </div>
    <div id="pause-sub-view" style="display:none">
      <div id="pause-sub-content" class="pause-sub-content"></div>
      <!-- DPS Stats (shown when viewing weapons or as separate tab) -->
      <div id="dps-stats-view" class="pause-sub-content" style="display:none">
        <h3>📊 伤害统计</h3>
        <div id="dps-stats-content"></div>
        <div id="dps-total" style="font-size:13px;color:#aaa;margin-top:8px"></div>
      </div>
      <button class="pause-btn" id="btn-pause-back" style="margin-top:16px">← 返回</button>
    </div>
  </div>

  <!-- In-Run Shop -->
  <div id="in-run-shop" style="display:none">
    <div class="shop-header">
      <div class="shop-title">💰 局内商店</div>
      <div class="shop-gold" style="display:flex;flex-direction:column;align-items:center;gap:4px;">
        <span>金币: <span id="shop-gold-display">0</span></span>
        <span id="shop-stat-display" style="font-size:12px;color:#aaa;font-weight:normal;"></span>
      </div>
    </div>
    <div class="shop-items" id="shop-items"></div>
    <button class="menu-btn" id="btn-close-shop">关闭商店</button>
  </div>

  <!-- Main Menu -->
  <div class="menu-screen" id="menu-screen">
    <div id="welcome-back-banner" style="display:none"></div>
    <h1>星域战机</h1>
    <div class="subtitle">STAR DOMAIN STG</div>
    <button class="menu-btn highlight" id="btn-start">开始游戏</button>
    <div class="menu-btn-row" style="display:flex;gap:8px;justify-content:center;margin-top:4px;">
      <button class="menu-btn" id="btn-daily" style="flex:1;max-width:180px;font-size:12px;padding:10px 8px;">📅 每日挑战</button>
      <button class="menu-btn" id="btn-endless" style="flex:1;max-width:180px;font-size:12px;padding:10px 8px;">🔁 无尽模式</button>
    </div>
    <button class="menu-btn" id="btn-challenge" style="margin-top:4px;">⚡ 挑战模式</button>
    <button class="menu-btn" id="btn-codex">📖 图鉴</button>
    <button class="menu-btn" id="btn-season-pass">🎫 赛季通行证</button>
    <button class="menu-btn" id="btn-meta-shop">🛒 商店</button>
    <button class="menu-btn" id="btn-settings">⚙️ 设置</button>
    <button class="menu-btn" id="btn-leaderboard">排行榜</button>
    <button class="menu-btn" id="btn-howto">操作说明</button>
  </div>

  <!-- Challenge Mode Select (G5) -->
  <div class="menu-screen" id="challenge-screen" style="display:none">
    <h1 style="font-size:28px">⚡ 挑战模式</h1>
    <div class="subtitle">CHALLENGE MODE</div>
    <div id="challenge-list" style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:440px;padding:20px"></div>
    <button class="menu-btn" id="btn-back-from-challenge" style="margin-top:16px">返回</button>
  </div>

  <!-- Character Select (角色选择) -->
  <div class="menu-screen" id="character-select-screen" style="display:none">
    <h1 style="font-size:28px">选择战机</h1>
    <div class="subtitle">SELECT CHARACTER</div>
    <div id="character-select" style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:440px;padding:20px"></div>
    <button class="menu-btn" id="btn-back-from-char" style="margin-top:16px">返回</button>
  </div>

  <!-- Faction Select (流派选择) -->
  <div class="menu-screen" id="char-select-screen" style="display:none">
    <h1 style="font-size:28px">选择流派</h1>
    <div class="subtitle">SELECT FACTION</div>
    <div id="char-select"></div>
    <button class="menu-btn" id="btn-back-menu" style="margin-top:16px">返回</button>
  </div>

  <!-- Talent Tree (天赋树) -->
  <div class="menu-screen" id="talent-screen" style="display:none">
    <h1 style="font-size:28px">🌟 天赋树</h1>
    <div class="subtitle">TALENT TREE</div>
    <div class="talent-points-display">
      剩余天赋点: <span id="talent-points-remaining">5</span>
    </div>
    <div class="talent-branches" id="talent-branches"></div>
    <div class="talent-tree" id="talent-tree"></div>
    <div class="talent-footer">
      <button class="menu-btn" id="btn-talent-reset">重置天赋</button>
      <button class="menu-btn highlight" id="btn-talent-confirm">确认出战</button>
    </div>
  </div>

  <!-- Level Up -->
  <div id="level-up">
    <h2>⬆️ 升级！选择技能</h2>
    <div class="skill-choices" id="skill-choices"></div>
  </div>

  <!-- Fusion Notification -->
  <div id="fusion-notification">
    <div class="fusion-title">🔮 融合可用！</div>
    <div class="fusion-desc" id="fusion-notification-desc"></div>
  </div>

  <!-- Game Over / Settlement Panel -->
  <div class="menu-screen" id="game-over">
    <div class="settlement-title">游戏结束</div>
    <div class="settlement-subtitle">SETTLEMENT</div>
    <div id="endless-badge" style="display:none;font-size:14px;color:#ff8844;margin-bottom:8px;font-weight:bold;">🔁 无尽模式</div>
    <div id="challenge-badge" style="display:none;font-size:13px;color:#ffaa00;margin-bottom:4px;">⚡ </div>
    <div id="seed-badge" style="display:none;font-size:10px;color:#888;margin-bottom:8px;">🌱 Seed: </div>
    <div class="final-score" id="final-score">0</div>
    <div class="star-coin-earned" id="star-coin-earned"></div>
    <div class="settlement-stats" id="settlement-stats"></div>
    <div class="settlement-buttons">
      <button class="menu-btn" id="btn-restart">🔄 再来一局</button>
      <div class="btn-row">
        <button class="menu-btn" id="btn-menu">🏠 返回主菜单</button>
        <button class="menu-btn" id="btn-share">📤 分享</button>
      </div>
    </div>
  </div>

  <!-- Leaderboard -->
  <div class="menu-screen" id="leaderboard">
    <h1 style="font-size:28px">排行榜</h1>
    <div class="subtitle">LEADERBOARD</div>
    <div class="lb-list" id="lb-list"></div>
    <button class="menu-btn" id="btn-back-from-lb">返回</button>
  </div>

  <!-- How to Play -->
  <div class="menu-screen" id="howto-screen" style="display:none">
    <h1 style="font-size:24px">操作说明</h1>
    <div style="max-width:300px;text-align:left;line-height:2;font-size:14px;margin:20px">
      🖱️ <b>鼠标/触摸</b>：移动战机<br>
      🔫 自动射击（始终开启）<br>
      ⬆️ 击杀敌人获得经验升级<br>
      🎯 升级时从3个技能中选1个<br>
      💎 拾取道具获得增益<br>
      ☠️ 避开红色减益道具<br>
      ⌨️ <b>P/ESC</b>：暂停游戏<br>
      ⌨️ <b>I</b>：打开背包管理武器<br>
      ⌨️ <b>1-6</b>：聚焦武器槽 (+30%射速)<br>
      👑 BOSS每20000分出现
    </div>
    <button class="menu-btn" id="btn-back-from-howto">返回</button>
  </div>

  <!-- Codex (图鉴) -->
  <div class="menu-screen" id="codex-screen" style="display:none">
    <h1 style="font-size:28px">📖 图鉴</h1>
    <div class="codex-tabs">
      <button class="codex-tab active" data-tab="weapons">武器</button>
      <button class="codex-tab" data-tab="skills">技能</button>
      <button class="codex-tab" data-tab="factions">流派</button>
      <button class="codex-tab" data-tab="enemies">敌人</button>
      <button class="codex-tab" data-tab="bosses">Boss</button>
    </div>
    <div class="codex-content" id="codex-content"></div>
    <button class="menu-btn" id="btn-back-from-codex">返回</button>
  </div>

  <!-- Meta Shop (商店) -->
  <div class="menu-screen meta-shop-layout" id="meta-shop-screen" style="display:none">
    <div class="meta-shop-panel">
      <header class="meta-shop-header">
        <h1 style="font-size:28px;margin:0">🛒 商店</h1>
        <div class="subtitle" style="margin-bottom:0">SHOP</div>
        <div class="meta-shop-balance">⭐ 星币: <span id="meta-shop-coins">0</span></div>
      </header>
      <div class="meta-shop-tabs">
        <button class="meta-shop-tab active" data-category="consumable">消耗品</button>
        <button class="meta-shop-tab" data-category="permanent">永久道具</button>
        <button class="meta-shop-tab" data-category="weapons">武器</button>
        <button class="meta-shop-tab" data-category="upgrades">强化</button>
      </div>
      <div class="meta-shop-items" id="meta-shop-items"></div>
      <button class="menu-btn meta-shop-back" id="btn-back-from-shop">返回</button>
    </div>
  </div>


  <!-- Season Pass (免费) -->
  <div class="menu-screen" id="season-pass-screen" style="display:none">
    <div class="season-pass-header">
      <div class="season-pass-free-badge">100% 免费 · 无付费</div>
      <h1 id="season-pass-title">🎫 赛季通行证</h1>
      <div class="subtitle">SEASON PASS</div>
      <div id="season-pass-timer" class="season-pass-timer"></div>
      <div class="season-pass-progress">
        <div class="season-pass-progress-bar"><div class="season-pass-progress-fill" id="season-pass-bar-fill"></div></div>
        <div class="season-pass-stats">
          <span>等级 <b id="season-pass-level">1</b></span>
          <span>赛季经验 <b id="season-pass-xp">0</b></span>
        </div>
      </div>
    </div>
    <div id="season-pass-list"></div>
    <button class="menu-btn" id="btn-back-from-season" style="margin-top:16px">返回</button>
  </div>

  <!-- Settings (设置) -->
  <div class="menu-screen" id="settings-screen" style="display:none">
    <h1 style="font-size:28px">⚙️ 设置</h1>
    <div class="settings-content">
      <div class="setting-item">
        <label>🔊 总音量</label>
        <input type="range" id="master-volume" min="0" max="100" value="50">
      </div>
      <div class="setting-item">
        <label>🔫 音效音量</label>
        <input type="range" id="sfx-volume" min="0" max="100" value="70">
      </div>
      <div class="setting-item">
        <label>🎵 音乐音量</label>
        <input type="range" id="music-volume" min="0" max="100" value="30">
      </div>
      <div class="setting-item">
        <label>📳 屏幕震动</label>
        <label class="toggle">
          <input type="checkbox" id="screen-shake" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>
      <div class="setting-item">
        <label>✨ 特效质量</label>
        <select id="effects-quality" class="setting-select">
          <option value="low">低</option>
          <option value="medium" selected>中</option>
          <option value="high">高</option>
        </select>
      </div>
      <div class="setting-item">
        <label>🖥️ 全屏模式</label>
        <label class="toggle">
          <input type="checkbox" id="fullscreen-toggle">
          <span class="toggle-slider"></span>
        </label>
      </div>
    </div>
    <div class="settings-divider"></div>
    <div class="settings-content">
      <div class="setting-item" style="justify-content:center">
        <button class="menu-btn" id="btn-reset-data" style="width:180px;padding:10px 0;font-size:14px;border-color:rgba(255,68,68,0.5);color:#ff6666">🗑️ 重置数据</button>
      </div>
    </div>
    <div class="version-info" id="version-info">v2.0.0</div>
    <button class="menu-btn" id="btn-back-from-settings">返回</button>
  </div>

  <!-- Tutorial Overlay -->
  <div id="tutorial-overlay">
    <div class="tutorial-backdrop"></div>
    <div class="tutorial-highlight" id="tutorial-highlight"></div>
    <button class="tutorial-skip-btn" id="tutorial-skip">跳过教程</button>
    <div class="tutorial-content" id="tutorial-content">
      <div class="tutorial-step-indicator" id="tutorial-step-indicator"></div>
      <div class="tutorial-icon" id="tutorial-icon"></div>
      <div class="tutorial-text" id="tutorial-text"></div>
      <div class="tutorial-hint" id="tutorial-hint"></div>
    </div>
  </div>

  <!-- B1: Backpack Screen -->
  <div class="menu-screen" id="backpack-screen" style="display:none"></div>

  <!-- Fusion Screen (独立融合界面) -->
  <div class="menu-screen" id="fusion-screen" style="display:none;z-index:45"></div>

  <!-- Dynamic overlays (融合确认、重置数据等) -->
  <div id="ui-overlay" style="position:absolute;inset:0;pointer-events:none;z-index:30;"></div>

</div>

</body>
</html>
