/* ─────────────────────────────────────────────────────────────
 * assets/styles.css
 * 共用設計語彙 — 只放「首頁 UI」與「六個關卡逐字相同」的規則
 *
 * 刻意「不放」各關卡專屬的樣式：
 *   .compare / .opt / .swatches / .sw / .stage / .countdown
 *   .choice / .hotwrap / .hot / .found-tag / .foundlist / .answerbox
 *   .opts / .notes / .compare-table / .banner / .rhythm / .tips
 * 那些留在各自的頁面內嵌，因為它們和各關卡的版面結構緊密耦合。
 * ───────────────────────────────────────────────────────────── */

/* ═══════════ 1. 設計變數 ═══════════ */
:root{
  --navy:#0b2f5b; --navy2:#173f70; --orange:#f5a623; --yellow:#ffd65a;
  --bg:#f4f7fb; --text:#1d2a38; --muted:#65758b; --line:#d8e0ea;
  --good:#197a55; --bad:#b42318;
  --radius:16px; --shadow:0 6px 24px rgba(11,47,91,.08);
}

/* ═══════════ 2. 基礎 ═══════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Microsoft JhengHei","Noto Sans TC","PingFang TC","Heiti TC",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 72px}
/* 首頁內容較短，不需要為長頁面預留的底部空間 */
.wrap.home{padding-bottom:24px}

h1{font-size:34px;color:var(--navy);margin:14px 0 8px;letter-spacing:.5px}
.sub{color:var(--muted);margin:0;font-size:16px}
header.page{margin-bottom:22px}

.badge{display:inline-block;background:var(--yellow);color:var(--navy);
  font-weight:700;font-size:15px;padding:6px 16px;border-radius:999px;letter-spacing:.5px}

[hidden]{display:none !important}

/* ═══════════ 3. 卡片 ═══════════ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;margin-top:18px}
h2.step{font-size:23px;color:var(--navy);margin:2px 0 14px}
h2.qtext{font-size:24px;color:var(--navy);margin:4px 0 18px}

/* ═══════════ 4. 按鈕 ═══════════ */
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;align-items:center}

.btn{font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;
  border-radius:12px;padding:12px 30px;border:2px solid var(--line);
  background:#fff;color:var(--navy);transition:.18s;
  display:inline-block;text-align:center;text-decoration:none}
.btn:hover{border-color:var(--navy);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:var(--navy2);border-color:var(--navy2)}
.btn.next{background:var(--orange);color:#3a2600;border-color:var(--orange)}
.btn.next:hover{background:var(--yellow);border-color:var(--yellow)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ═══════════ 5. 回饋框 ═══════════ */
.feedback{margin-top:18px;padding:16px 18px;border-radius:14px;
  border-left:6px solid var(--navy);background:#f7fafd}
.feedback.ok{border-left-color:var(--good);background:#eef8f3}
.feedback.again{border-left-color:var(--orange);background:#fff8ec}
.feedback.soft{border-left-color:var(--orange);background:#fff8ec}
.feedback .verdict{font-weight:800;font-size:19px;margin-bottom:6px;color:var(--navy)}
.feedback.ok .verdict{color:var(--good)}
.feedback.again .verdict{color:#a35b00}
.feedback.soft .verdict{color:#a35b00}
.feedback p{margin:0}

/* 探索階段的描述性回饋（尚未按下「確認答案」） */
.feedback.explore{border-left-color:var(--navy2);background:#f2f6fb}
.feedback.explore .verdict{color:var(--navy2)}

/* ═══════════ 6. 核心概念方塊 ═══════════ */
.concept{margin-top:18px;padding:20px;border-radius:14px;background:var(--navy);color:#fff}
.concept .lbl{font-size:14px;letter-spacing:1px;color:var(--yellow);font-weight:800}
.concept p{margin:8px 0 0;font-size:20px;font-weight:800;line-height:1.6}

/* ═══════════ 7. 完成面板 ═══════════ */
.done{text-align:center;padding:34px 22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px}
.done h2{font-size:30px;color:var(--navy);margin:0 0 8px}
.wait{color:var(--muted);font-weight:700;font-size:17px;margin:0}

.done .done-mark{font-size:52px;line-height:1;color:var(--good);margin-bottom:8px}
.done .done-badge{display:inline-block;margin:10px 0 4px;font-size:20px;font-weight:800;
  color:#8a5a00;background:var(--yellow);padding:9px 24px;border-radius:999px}
.done .done-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.done .done-hint{color:var(--muted);font-size:15px;font-weight:700;margin:16px 0 0}

/* ═══════════ 8. Toast ═══════════ */
.w3-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;font-weight:700;padding:12px 26px;border-radius:999px;
  box-shadow:0 10px 30px rgba(11,47,91,.35);opacity:0;pointer-events:none;
  transition:.25s;z-index:99}
.w3-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════ 9. 首頁：Hero ＋ 進度 ═══════════ */
.hero{background:var(--navy);color:#fff;border-radius:20px;padding:16px 26px;
  box-shadow:var(--shadow)}
.hero-top{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.hero-title{font-size:30px;font-weight:800;letter-spacing:.5px;margin:0;line-height:1.25;
  color:#fff}
.hero-sub{color:#c9d8ea;font-size:15px;margin:2px 0 0}

.hero-progress{text-align:right;min-width:220px}
.progress-seg{display:flex;gap:6px;justify-content:flex-end}
.progress-seg i{display:block;width:22px;height:12px;border-radius:3px;
  background:rgba(255,255,255,.22)}
.progress-seg i.on{background:var(--yellow)}
.progress-text{color:var(--yellow);font-weight:800;font-size:15px;margin-top:5px;
  letter-spacing:.5px}

/* 全部完成時的 Hero 變體 */
.hero.is-final{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%)}
/* 與副標同一行，避免多佔一列高度（1366×768 的高度預算很緊） */
.hero-final-badge{display:inline-block;margin-left:12px;background:var(--yellow);
  color:#5c3d00;font-weight:800;font-size:13px;padding:3px 14px;border-radius:999px;
  letter-spacing:1px;vertical-align:2px}

/* 被 middleware 導回時的提示 */
.locked-notice{margin-top:16px;padding:14px 18px;border-radius:14px;background:#fff8ec;
  border-left:6px solid var(--orange);font-size:15px;color:#7a4a00;font-weight:700}

/* ═══════════ 10. 首頁：關卡地圖 ═══════════ */
.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}

.lv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;
  transition:.18s;position:relative;overflow:hidden}
.lv-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,47,91,.14)}

.lv-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lv-tag{background:var(--yellow);color:var(--navy);font-weight:800;font-size:12px;
  padding:3px 11px;border-radius:999px;letter-spacing:.6px;white-space:nowrap}
.lv-time{color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap}
.lv-title{font-size:20px;color:var(--navy);font-weight:800;margin:8px 0 0;
  line-height:1.3}
.lv-sub{color:var(--muted);font-size:13.5px;margin:4px 0 0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 狀態與動作併為同一列，讓卡片在不捲動的 1366×768 內塞得進兩排 */
.lv-foot{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-top:14px}

.lv-state{font-weight:800;font-size:15px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.lv-state .st-chip{padding:2px 11px;border-radius:999px;font-size:14px;white-space:nowrap}
.lv-state .st-note{font-size:13.5px;font-weight:700;white-space:nowrap}

.lv-card .lv-btn{padding:10px 20px;font-size:15px;width:auto}

/* 狀態：已完成 */
.lv-card.is-completed{border-top:5px solid var(--good)}
.lv-card.is-completed .lv-state{color:var(--good)}
.lv-card.is-completed .st-chip{background:#eef8f3;color:var(--good)}
.lv-card.is-completed .lv-btn{background:#fff;color:var(--navy);border-color:var(--line)}

/* 狀態：可挑戰（目前唯一會被高亮的卡片） */
.lv-card.is-available{border-top:5px solid var(--orange);
  box-shadow:0 0 0 4px rgba(245,166,35,.16), var(--shadow)}
.lv-card.is-available .lv-state{color:#a35b00}
.lv-card.is-available .st-chip{background:#fff8ec;color:#a35b00}
.lv-card.is-available .lv-btn{background:var(--orange);color:#3a2600;
  border-color:var(--orange)}
.lv-card.is-available .lv-btn:hover{background:var(--yellow);border-color:var(--yellow)}

/* 狀態：尚未解鎖（Phase 3 才會出現） */
.lv-card.is-locked{border-top:5px solid var(--line);opacity:.62}
.lv-card.is-locked .lv-title,
.lv-card.is-locked .lv-sub{color:var(--muted)}
.lv-card.is-locked .st-chip{background:#eef2f7;color:var(--muted)}
.lv-card.is-locked .lv-btn{background:#fff;color:var(--muted);border-color:var(--line)}

/* 狀態：載入中（等待 /api/status 時先佔位，避免版面跳動） */
.lv-card.is-skeleton{background:#eef2f7;border:1px solid #e3eaf3;box-shadow:none;
  min-height:181px}
.lv-card.is-skeleton:hover{transform:none;box-shadow:none}

/* 剛解鎖時播放一次的光暈 */
@keyframes w3UnlockGlow{
  0%{box-shadow:0 0 0 0 rgba(245,166,35,.55), var(--shadow)}
  70%{box-shadow:0 0 0 14px rgba(245,166,35,0), var(--shadow)}
  100%{box-shadow:0 0 0 0 rgba(245,166,35,0), var(--shadow)}
}
.lv-card.just-unlocked{animation:w3UnlockGlow .4s ease-out}

/* ═══════════ 11. 首頁：頁尾重置區 ═══════════ */
.reset-zone{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end}
.reset-link{background:none;border:0;padding:2px 0;font-family:inherit;font-size:13.5px;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.reset-link:hover{color:var(--bad)}
.reset-link:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}

.reset-confirm{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff5f4;border:1px solid #f2c9c5;border-left:6px solid var(--bad);
  border-radius:12px;padding:12px 16px;width:100%;justify-content:space-between}
.reset-confirm .msg{font-weight:800;color:var(--bad);font-size:15px}
.reset-confirm .sub-msg{color:var(--muted);font-weight:700;font-size:13px}
.reset-confirm .row{display:flex;gap:10px;flex-wrap:wrap}
.reset-confirm .btn{padding:8px 18px;font-size:14px}
.btn.danger{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.danger:hover{background:#8f1c13;border-color:#8f1c13}

/* ═══════════ 12. 密碼視窗（Phase 3 使用，先預留樣式） ═══════════ */
.pw-dialog{border:0;border-radius:18px;padding:0;max-width:460px;width:calc(100% - 40px);
  box-shadow:0 24px 60px rgba(11,47,91,.35);color:var(--text)}
.pw-dialog::backdrop{background:rgba(11,47,91,.55)}
.pw-body{padding:26px 28px 22px}
.pw-eyebrow{background:var(--yellow);color:var(--navy);font-weight:800;font-size:12px;
  padding:3px 11px;border-radius:999px;letter-spacing:.6px}
.pw-title{font-size:23px;color:var(--navy);font-weight:800;margin:10px 0 4px}
.pw-hint{color:var(--muted);font-size:14.5px;margin:0 0 14px}
.pw-label{display:block;font-size:13px;font-weight:800;color:var(--navy);
  letter-spacing:.5px;margin:0 0 6px}
.pw-input{width:100%;font-family:inherit;font-size:17px;padding:12px 14px;
  border:2px solid var(--line);border-radius:12px;color:var(--text);background:#fff}
.pw-input:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--navy)}
.pw-error{color:var(--bad);font-weight:800;font-size:14.5px;margin:10px 0 0}
.pw-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}
.pw-actions .btn{padding:10px 22px;font-size:15px}

/* ═══════════ 13. 響應式 ═══════════ */
@media (max-width:1000px){
  .map-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  h1{font-size:26px}
  .hero-title{font-size:24px}
  .hero-progress{text-align:left;min-width:0;width:100%}
  .progress-seg{justify-content:flex-start}
}
@media (max-width:680px){
  .map-grid{grid-template-columns:1fr}
  .lv-card .lv-btn{padding:13px 20px;width:100%}
  .lv-foot{gap:10px}
  .hero{padding:18px 20px}
  .reset-zone{justify-content:flex-start}
  .pw-dialog{width:100%;max-width:100%;border-radius:18px 18px 0 0;margin:auto 0 0}
}

/* 大螢幕／投影機：加大內容寬度 */
@media (min-width:1700px){ .wrap{ max-width:1500px; } }

/* 尊重系統的減少動態偏好 */
@media (prefers-reduced-motion: reduce){
  .lv-card,.btn{transition:none}
  .lv-card:hover{transform:none}
  .lv-card.just-unlocked{animation:none}
}