<!-- Start Panel -->
<div class="panel show" id="panelStart">
  <div class="card">
    <h1>像素跑酷</h1>
    <div class="row">
      <div class="seg" id="difficultyGroup">
        <input type="radio" name="difficulty" id="diffEasy" value="easy" checked>
        <label for="diffEasy">初级</label>
        <input type="radio" name="difficulty" id="diffMedium" value="medium">
        <label for="diffMedium">中级</label>
        <input type="radio" name="difficulty" id="diffHard" value="hard">
        <label for="diffHard">高级</label>
      </div>
      <div class="spacer"></div>
      <button class="btn primary" id="btnStart">开始游戏</button>
    </div>
    <div class="row" style="margin-top:10px">
      <div class="col" style="flex:1">
        <h2>玩法与操作</h2>
        <div class="help">
          - 无尽跑酷，障碍随机，速度随时间提升，分数按行进距离累计。<br>
          - 桌面：按 <span class="kbd">空格</span> 或 <span class="kbd">↑</span> 跳跃；在空中再次按键进行二段跳。<br>
          - 手机：点击屏幕跳跃；快速双击触发二段跳。<br>
          - 随时点击“暂停”，或按 <span class="kbd">P</span> 暂停/继续。<br>
          - 音效可开关，排行榜使用本地存储，仅保存在你的设备。
        </div>
      </div>
      <div class="col" style="flex:1">
        <h2>本地排行榜</h2>
        <div id="boardList" class="list"></div>
        <div class="row" style="margin-top:8px">
          <button class="btn" id="btnClearBoard">清空排行榜</button>
          <span class="muted">最多展示前10名</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Pause Panel -->
<div class="panel" id="panelPause">
  <div class="card">
    <h1>暂停中</h1>
    <div class="row" style="margin-top:6px">
      <div class="chip">当前分数 <strong id="pauseScore">0</strong></div>
      <div class="chip">当前速度 <strong id="pauseSpeed">0</strong></div>
    </div>
    <div class="row" style="margin-top:10px">
      <button class="btn primary" id="btnResume">继续</button>
      <button class="btn" id="btnRestart">重新开始</button>
      <button class="btn" id="btnBackMenu">返回主页</button>
    </div>
    <div class="help" style="margin-top:8px">提示：按 P 也可继续游戏</div>
  </div>
</div>

<!-- Result Panel -->
<div class="panel" id="panelResult">
  <div class="card">
    <h1>结算</h1>
    <div class="row">
      <div class="chip">得分 <strong id="resultScore">0</strong></div>
      <div class="chip">难度 <strong id="resultDiff">初级</strong></div>
      <div class="chip">最高分 <strong id="bestScore">0</strong></div>
    </div>
    <div class="row" style="margin-top:10px">
      <input id="playerName" class="btn" style="width:180px;text-align:left" placeholder="输入你的名字">
      <button class="btn primary" id="btnSaveScore">保存成绩</button>
      <button class="btn" id="btnPlayAgain">再来一局</button>
      <button class="btn" id="btnResultBack">返回主页</button>
    </div>
    <div class="col" style="margin-top:12px">
      <h2>本地排行榜</h2>
      <div id="boardListResult" class="list"></div>
    </div>
  </div>
</div>