<!DOCTYPE html>
<html lang="zh-CN" data-theme="classical">
<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="theme-color" content="#1a0b2e" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="量子签" />
  <title>量子签 · Quantum Fortune</title>
  <link rel="manifest" href="manifest.json" />
  <link rel="icon" type="image/svg+xml" href="icon.svg" />
  <link rel="icon" type="image/png" sizes="192x192" href="icon-192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="icon-512.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="icon-180.png" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- AR 背景层(摄像头流) -->
  <div class="ar-bg" id="arBg" style="display:none">
    <video id="arVideo" autoplay muted playsinline></video>
  </div>

  <!-- 顶栏 -->
  <header class="topbar" id="topbar">
    <button class="icon-btn" id="btnBack" style="visibility:hidden" aria-label="返回">‹</button>
    <span class="title" id="topTitle">量子签</span>
    <button class="icon-btn" id="btnLedger" aria-label="签簿">≡</button>
  </header>

  <!-- 主舞台 -->
  <main id="stage">

    <!-- 屏幕 1: 请签 -->
    <section class="screen active" id="screen-app">
      <div class="brand">
        <h1>量子签</h1>
        <div class="subtitle">QUANTUM · FORTUNE</div>
      </div>

      <div class="tube-wrap" id="tubeWrap">
        <div class="tube" id="tube">
          <div class="mouth"></div>
          <div class="body"></div>
          <div class="label">观音灵签</div>
        </div>
      </div>

      <div class="quantum-status" id="quantumStatus">
        <span class="qs-dot" id="qs-dot"></span>
        <span class="qs-text" id="qs-text">👋 摇动手机 · 或点屏幕出签</span>
        <span class="qs-detail" id="qs-detail" hidden></span>
      </div>

      <div class="center-actions">
        <button class="btn primary tap-to-start" id="btnShake">点 击 此 处 摇 签</button>
      </div>
    </section>

    <!-- 屏幕 2: 解签 -->
    <section class="screen" id="screen-handle">
      <div class="lot-paper" id="lotPaper">
        <div class="lot-no-row">
          <span class="lot-no">第 <span id="lotNo">—</span> 签</span>
          <span class="lot-grade" id="lotGrade" data-tone="">—</span>
        </div>
        <h2 class="lot-title" id="lotTitle">—</h2>
        <div class="lot-story" id="lotStory"></div>

        <div class="poem" id="poem"></div>

        <h3 class="section-title">六 项 占 断</h3>
        <div class="divinations" id="divinations"></div>
        <p class="divination-progress" id="divinationProgress" data-complete="false">
          已阅 0/6 · 先看完六项再启封
        </p>

        <div class="seal">量子<br/>已阅</div>
      </div>

      <div class="center-actions">
        <button class="btn primary" id="btnReveal" hidden>启 封</button>
        <button class="btn small" id="btnShare">分 享 卡 片</button>
        <button class="btn small" id="btnHome1">重 新 摇</button>
      </div>
    </section>

    <!-- 屏幕 3: 占断详情 -->
    <section class="screen" id="screen-divination">
      <div class="divination-page">
        <div class="divination-page-top">
          <div class="divination-page-meta">
            <span class="divination-page-kicker">六 项 占 断</span>
            <span class="divination-detail-progress" id="divinationDetailProgress">已阅 0/6</span>
          </div>
          <h2 id="divinationName">—</h2>
        </div>
        <div class="divination-answer">
          <div class="answer-label">断 语</div>
          <p id="divinationHeadline">—</p>
        </div>
        <div class="divination-omen-box">
          <div class="answer-label">象 曰</div>
          <p id="divinationOmen">—</p>
        </div>
      </div>
      <div class="center-actions">
        <button class="btn primary" id="btnNextDivination">下 一 项</button>
        <button class="btn small" id="btnBackToHandle">签 文 总 览</button>
      </div>
    </section>

    <!-- 屏幕 4: 反转 -->
    <section class="screen" id="screen-reveal">
      <div class="reveal-card">
        <div class="emoji">🤡</div>
        <h2 class="reveal-title" id="revealTitle"></h2>
        <p class="reveal-body" id="revealBody"></p>
        <div class="reveal-epilogue" id="epilogue"></div>
      </div>
      <div class="center-actions">
        <button class="btn primary" id="btnHome2">再 摇 一 支</button>
        <button class="btn small" id="btnSeeLedger">看 看 签 簿</button>
      </div>
    </section>

    <!-- 屏幕 5: 签簿 -->
    <section class="screen" id="screen-ledger">
      <div class="ledger-header">
        <h2>签 簿</h2>
        <button class="btn small" id="btnClearLedger">清 空</button>
      </div>
      <div id="ledgerList"></div>
      <div class="center-actions">
        <button class="btn small" id="btnHome3">返 回</button>
      </div>
    </section>

  </main>

  <!-- 分享卡片 Modal -->
  <div class="modal-bg" id="shareModal">
    <div class="modal-card">
      <span class="close" id="shareClose">×</span>
      <img id="shareImg" alt="分享卡片" />
      <p style="text-align:center;font-size:12px;color:var(--muted);margin-top:10px">
        长按图片可保存到相册
      </p>
    </div>
  </div>

  <!-- Toast -->
  <div id="toast"></div>

  <!-- ============= 脚本 ============= -->
  <script src="quantum.js"></script>
  <script src="collectors.js"></script>
  <script src="generator.js"></script>
  <script src="sharecard.js"></script>
  <script src="ledger.js"></script>
  <script src="app.js"></script>
</body>
</html>
