/* app.css — 版面、卡片、RWD。配色/字體變數見 tokens.css。 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding-left: 1.1em; }

/* ---------- 全域動畫關鍵影格 ---------- */
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flash-right {
  0%   { box-shadow: 0 0 0 0 rgba(159,230,160,.0); border-color: var(--border); }
  30%  { box-shadow: 0 0 0 6px rgba(159,230,160,.35); border-left-color: var(--success); }
  100% { box-shadow: 0 0 0 0 rgba(159,230,160,.0); border-left-color: var(--cyan); }
}
@keyframes flash-wrong {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,107,.0); border-color: var(--border); }
  30%  { box-shadow: 0 0 0 6px rgba(255,107,107,.30); border-left-color: var(--danger); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,107,.0); border-left-color: var(--cyan); }
}
@keyframes rank-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,198,107,.0); }
  40%       { box-shadow: 0 0 0 18px rgba(232,198,107,.22); }
  70%       { box-shadow: 0 0 0 8px rgba(232,198,107,.10); }
}
@keyframes streak-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(.96); }
  100% { transform: scale(1); }
}

/* 數字/速度/% 等寬字，營造儀表板感（§3 質感規則） */
.study-counter, .term-en, .nav-en { font-family: var(--font-data); }

/* ---------- 殼 / 版面 ---------- */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 8px;
}
.lang-toggle {
  margin-left: auto; min-width: 44px; min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--font-data); font-size: 13px; cursor: pointer;
}
.lang-toggle:hover { filter: brightness(1.12); color: var(--text); }
.contact-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--font-ui); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.contact-btn:hover { filter: brightness(1.12); color: var(--text); text-decoration: none; }
/* 手機版：副標「飛行養成學習系統」折到 FLIGHT DECK 下方，不跟登入列搶空間 */
/* 字標是 <a href="/">（回介紹頁）：拿掉連結預設樣式，hover 時字標點亮成青色光暈——
   儀表面板的字是「亮起來」，不是加底線。 */
.brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-decoration: none; }
.logo { font-family: var(--font-ui); font-weight: 600; letter-spacing: 2px; color: var(--cyan); transition: text-shadow 160ms ease; }
.brand:hover .logo, .brand:focus-visible .logo { text-shadow: 0 0 14px rgba(94, 231, 255, 0.55); }
.logo-sub { font-size: 13px; color: var(--text-muted); }

.view { padding: 12px 16px 96px; max-width: 720px; width: 100%; margin: 0 auto; }
.view > * { animation: slide-down .18s ease; }

/* ---------- 導覽（手機底部 / 桌面側欄） ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 48px; justify-content: center;
  color: var(--text-muted); border-radius: var(--radius-sm);
}
.nav-zh { font-size: 13px; }
.nav-en { font-size: 10px; letter-spacing: .5px; }
.nav-item.active { color: var(--cyan); position: relative; }
.nav-item.active .nav-en { color: var(--cyan); }
/* 底部 active 線指示器（手機） */
.nav-item.active::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 99px; background: var(--cyan);
}
@media (min-width: 880px) {
  /* 桌面側欄改為左側豎線 */
  .nav-item.active::after {
    bottom: auto; top: 50%; transform: translateY(-50%);
    left: -12px; width: 3px; height: 22px;
  }
}

@media (min-width: 880px) {
  /* 桌面版：標題與副標恢復同一行並排 */
  .brand { flex-direction: row; align-items: baseline; gap: 10px; }
  .app-shell { flex-direction: row; }
  .nav {
    position: sticky; top: 0; bottom: auto; height: 100vh; width: 168px;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    border-top: none; border-right: 1px solid var(--border); padding: 24px 12px;
  }
  .nav-item { flex: none; flex-direction: row; gap: 8px; justify-content: flex-start; padding: 0 12px; }
  .nav-zh { font-size: 15px; }
}

/* ---------- 通用卡片 / 狀態 ---------- */
.state-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 22px; text-align: center; margin-top: 24px;
}
.state-card h2 { margin: 0 0 8px; font-size: 20px; }
.state-card.success { border-color: #2f5a3a; }
.callsign {
  font-family: var(--font-data); color: var(--success);
  letter-spacing: 2px; font-size: 13px; margin-bottom: 10px;
}
.dim { color: var(--text-dim); margin: 0; line-height: 1.6; }

/* ---------- 儀表告示牌（advisory placard）---------- */
.advisory {
  background: #0a1830; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05);
  margin-top: 14px;
}
.advisory-row {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 14px;
}
.advisory-row + .advisory-row { border-top: 1px solid rgba(255,255,255,.06); }
.advisory-tag {
  font-family: var(--font-data); font-size: 10px; letter-spacing: 2px;
  color: var(--cyan); flex: none; min-width: 44px;
}
.advisory-tag.amber { color: var(--amber); }
.advisory-text { font-size: 13px; color: var(--text-dim); line-height: 1.65; flex: 1; }

/* ---------- 學習流程 ---------- */
.study-progress {
  height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin: 8px 0;
}
.study-progress-fill {
  height: 100%; width: 0; background: var(--cyan);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.study-counter { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--cyan); border-radius: var(--radius);
  padding: 20px 18px; line-height: 1.65;
}
.card[data-tier="scenario"] { border-left-color: var(--amber); }

/* 標籤列固定單行：徽章不收縮、概念過長時以省略號截斷，避免在窄螢幕（手機）換行。 */
.card-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 14px; overflow: hidden; }
.tier-badge {
  flex: none; font-size: 12px; padding: 3px 9px; border-radius: 99px;
  background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-soft);
  white-space: nowrap;
}
/* 單元重點：獨立一行，完整顯示不截斷（取代舊的擠在 card-meta 內的 .concept）。 */
.card-concept {
  font-size: 13px; color: var(--text-muted); line-height: 1.4;
  margin: -4px 0 12px;
}
.teach-tag {
  flex: none; margin-left: auto; font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: rgba(54, 197, 240, .12); color: var(--cyan); border: 1px solid rgba(54, 197, 240, .3);
  white-space: nowrap;
}

/* 模式徽章：複習中 / 新課程（讓使用者一眼分辨抽到的是學過的還是新卡） */
.mode-badge {
  flex: none; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  white-space: nowrap;
}
.mode-review {
  background: rgba(255, 180, 84, .14); color: var(--amber-soft);
  border: 1px solid rgba(255, 180, 84, .35);
}
.mode-new {
  background: rgba(159, 230, 160, .14); color: var(--success);
  border: 1px solid rgba(159, 230, 160, .35);
}
.review-hint {
  font-size: 12px; color: var(--amber-soft); margin: -4px 0 12px;
  display: flex; align-items: center; gap: 6px;
}

.recall-hint {
  font-size: 12px; color: var(--text-muted); margin: 4px 0 10px;
  font-style: italic;
}

.card-face .q { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.card-face .hint { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.card-face .setup {
  font-family: var(--font-data); font-size: 14px; color: var(--amber-soft);
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}

.card-face.answer {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border);
  animation: slide-down .22s ease;
}
.card-face .a { font-size: 16px; margin: 0 0 10px; }
.card-face .explain { color: var(--text-dim); font-size: 15px; margin: 8px 0 0; }
.key-points { color: var(--text-dim); font-size: 15px; }
.key-points li { margin: 4px 0; }

/* 內文條列拆行（richText）：題幹／答案／解析／選項若含 · 項目符號或 1. 數字順序，
   拆成獨立行呈現，不再擠成一段。容器沿用原欄位 class（.q/.a/.setup…），字級、顏色照舊。 */
.has-list { display: block; }
.has-list .rich-p { margin: 0 0 8px; }
.has-list > .rich-p:last-child,
.has-list > .rich-item:last-child { margin-bottom: 0; }
.has-list .rich-item { display: flex; gap: 0.5em; margin: 5px 0; }
.has-list .rich-marker { flex: none; }
.has-list .rich-num > .rich-marker { color: var(--cyan); font-variant-numeric: tabular-nums; font-weight: 600; }
.has-list .rich-bul > .rich-marker { color: var(--text-muted); }
.has-list .rich-itext { flex: 1; min-width: 0; }
/* 選項按鈕內的條列：marker 縮小間距，維持在按鈕內對齊。 */
.choice-text.has-list .rich-item { margin: 3px 0; }

/* physics 三件式 */
.physics { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.physics-row { display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.physics-tag {
  flex: none; width: 36px; height: fit-content; text-align: center;
  font-size: 12px; padding: 2px 0; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--cyan);
}
/* 儀表 / 航圖示意圖（自繪 SVG，題目與資料庫共用） */
.card-figure {
  max-width: 280px; margin: 4px auto 14px; padding: 8px;
  background: var(--surface-3); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.card-figure svg { width: 100%; height: auto; }
.lib-figure { margin: 4px auto 12px; max-width: 240px; }
/* 橫長型圖（空域剖面、航圖，figures.js 標 .fig-wide）：縮到儀表的 280px 會讓
 * 圖內文字過小，給更寬的容器。 */
.card-figure:has(.fig-wide) { max-width: 520px; }
.lib-figure:has(.fig-wide) { max-width: 460px; }
.figure-caption {
  margin-top: 6px; font-size: 12px; color: var(--text-muted);
  text-align: center; line-height: 1.5;
}

.physics-body { color: var(--text-dim); line-height: 1.6; }
.terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.term {
  display: inline-flex; gap: 6px; align-items: baseline;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 99px; padding: 3px 10px; font-size: 12px;
}
.term-en { color: var(--cyan); }
.term-zh { color: var(--text-muted); }

/* ---------- 按鈕 ---------- */
.actions { display: flex; gap: 12px; margin-top: 20px; }
.btn {
  flex: 1; min-height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 16px; cursor: pointer; transition: transform .06s ease, filter .15s ease;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; box-sizing: border-box; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.12); }
.btn-primary { background: var(--amber); color: #1a1205; border-color: var(--amber); font-weight: 600; }
.btn-right { border-color: #2f5a3a; color: var(--success); }
.btn-wrong { border-color: #5a2a2e; color: var(--danger); }

/* ---------- Korry 式照明押扣（主 CTA） ---------- */
.korry {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; width: 100%; min-height: 64px;
  padding: 10px 16px;
  box-sizing: border-box; border-radius: 6px; cursor: pointer; text-decoration: none;
  border: 1px solid #35516d;
  background: linear-gradient(180deg, #1b3450, #0e2036);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35);
  transition: filter .15s ease, box-shadow .15s ease, transform .06s ease;
}
.korry::before {
  content: ''; position: absolute; inset: 4px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.5); pointer-events: none;
}
.korry-caption {
  font-family: var(--font-data); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--amber);
  text-shadow: 0 0 8px rgba(255,180,84,.55);
}
.korry-label {
  font-size: 17px; font-weight: 700; color: var(--amber-soft);
  text-shadow: 0 0 10px rgba(255,180,84,.5); letter-spacing: 1px;
}
.korry:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35),
    0 0 18px rgba(255,180,84,.22);
}
.korry:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.06);
}
.korry.locked {
  cursor: not-allowed;
}
.korry.locked .korry-caption,
.korry.locked .korry-label {
  color: var(--text-muted); text-shadow: none;
}
/* 未點亮時沒有按壓回饋：不發亮、不下沉（實體上是尚未供電的押扣） */
.korry.locked:hover,
.korry.locked:active {
  filter: none; transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35);
}

/* 小號押扣：作答流程內高頻的前進鍵（下一題／翻開答案／作答），比主 CTA 收斂一號 */
.korry-sm {
  min-height: 52px; gap: 2px; padding: 8px 14px;
}
.korry-sm .korry-caption { font-size: 9px; letter-spacing: 2px; }
.korry-sm .korry-label { font-size: 15px; }

/* 中性刻字：次要動作（查看紀錄簿）用青色刻字，不搶主 CTA 的琥珀光 */
.korry-alt .korry-caption {
  color: var(--cyan); text-shadow: 0 0 8px rgba(94,231,255,.45);
}
.korry-alt .korry-label {
  color: var(--text); text-shadow: 0 0 10px rgba(94,231,255,.2);
}
.korry-alt:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35),
    0 0 18px rgba(94,231,255,.18);
}

.complete-actions .korry { flex: 1; }

.complete-actions { display: flex; gap: 10px; margin-top: 18px; }
.receipt {
  margin-top: 14px; font-family: var(--font-data); font-size: 13px;
  color: var(--success); line-height: 1.6;
}
.complete-note {
  margin-top: 16px; font-size: 13px; color: var(--text-dim); line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
}

/* ---------- 今日 Sortie ---------- */
.sortie-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--amber); border-radius: var(--radius);
  padding: 22px 20px; margin-top: 16px;
}
.sortie-kicker {
  font-family: var(--font-data); letter-spacing: 2px; font-size: 12px;
  color: var(--amber); text-transform: uppercase;
}
.streak-line {
  font-family: var(--font-data); font-size: 13px; color: var(--text-dim); margin: 6px 0 8px;
}
.current-module {
  font-size: 13px; color: var(--cyan); margin: 0 0 14px;
}
.sortie-card h2 { margin: 0 0 14px; font-size: 21px; }
.sortie-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
  background: #0a1830; border: 1px solid var(--border);
  border-radius: 4px; padding: 7px 14px; font-size: 14px; color: var(--text-dim);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05);
}
.chip b {
  font-family: var(--font-data); color: var(--cyan); font-weight: 600; margin-right: 4px;
  text-shadow: 0 0 8px rgba(94,231,255,.35);
}
.start-btn { flex: none; }

/* ---------- 紀錄簿 Logbook ---------- */
.tiles { display: flex; gap: 12px; margin-top: 16px; }
.tile {
  flex: 1; background: #0a1830; border: 1px solid var(--border);
  border-radius: 6px; padding: 18px 16px; text-align: center;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.05);
}
.tile-num {
  font-family: var(--font-data); color: var(--cyan);
  text-shadow: 0 0 10px rgba(94,231,255,.35);
  /* 窄螢幕自動縮小、且不換行：飛行時數「1 小時 31 分」在手機上維持一行 */
  font-size: clamp(19px, 6vw, 26px); white-space: nowrap; line-height: 1.15;
}
.tile-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.rank-card {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);
}
.rank-stripes {
  font-family: var(--font-data); color: var(--gold); font-size: 18px; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(232,198,107,.4);
}
.rank-zh { font-weight: 500; }
.rank-en { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.section-h { font-size: 15px; color: var(--text-dim); margin: 24px 0 10px; font-weight: 500; }
.mastery {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.mastery.mastered { border-color: var(--gold); }
/* flex-wrap＋meta 可斷行：英文 meta 很長（learned/scenarios/Mastered），大字級手機上
 * 曾因 nowrap 直接壓過左側模組名；塞不下時 meta 整段掉到名稱下一行。 */
.mastery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 10px; margin-bottom: 10px; }
.mastery-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mastery-zh { font-size: 15px; }
.mastery-en { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); }
.mastery-meta { margin-top: 2px; font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.mastery.mastered .mastery-meta { color: var(--gold); }
.mastery-bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.mastery-fill { height: 100%; background: var(--cyan); border-radius: 99px; transition: width .3s ease; }
.mastery.mastered .mastery-fill { background: var(--gold); }

/* ---------- Widget 互動圖 ---------- */
.widget-container {
  margin: 14px 0 10px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.widget-wrap { line-height: 0; }
.widget-svg {
  width: 100%; height: auto; display: block;
  max-height: 640px; object-fit: contain; margin: 0 auto;
}
.widget-caption {
  font-size: 13px; color: var(--text-muted);
  text-align: center; margin: 6px 10px 9px;
  line-height: 1.5;
}
/* 多行圖說：一句一行；窄螢幕需折行時只在標點處折（keep-all 避免拆散
 * 「誘導阻力」這類詞），並讓兩段長度均衡。 */
.widget-caption div { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.widget-error {
  font-size: 13px; color: var(--text-muted);
  padding: 12px; text-align: center;
}
/* 手機版：互動圖卡多為橫長型，縮在卡片內距（view 16 + card 18 + 邊框 1）裡會偏小，
 * 旁邊還空著。讓圖卡向左右各外擴 27px，掙脫卡片內距、再借一點版心留白，
 * 在手機上約離螢幕邊 8px，盡量用滿寬度（窄機約 +17% 寬）。
 * 桌面（≥880px）版心夠寬且置中，維持原樣不外溢。 */
@media (max-width: 879px) {
  .widget-container {
    margin-left: -27px;
    margin-right: -27px;
  }
  /* 橫長型自繪圖（轉彎協調儀三聯圖、空域剖面、航圖）同樣外擴用滿寬度，
   * 手機上字才不會被擠到太小；窄圖（圓形儀表）不受影響。 */
  .card-figure:has(.fig-wide),
  .lib-figure:has(.fig-wide) {
    max-width: none;
    margin-left: -27px;
    margin-right: -27px;
  }
}

/* ---------- 授階階梯 Ranks ---------- */
.ranks-intro { margin-top: 16px; }
.ranks-intro .dim { margin-top: 6px; }
.ladder {
  margin-top: 16px; position: relative;
  display: flex; flex-direction: column; gap: 10px;
}
.ladder-step {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.ladder-step.locked { opacity: .5; }
.ladder-step.current { border-color: var(--gold); border-left: 4px solid var(--gold); background: var(--surface-2); }
.ladder-insignia { flex: none; width: 48px; display: flex; justify-content: center; }
.insignia-svg { display: block; }
.ladder-step.locked .insignia-svg { filter: grayscale(1); }
.ladder-body { flex: 1; min-width: 0; }
.ladder-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ladder-zh { font-size: 17px; font-weight: 500; }
.ladder-en { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); }
.ladder-aircraft { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.ladder-status { font-family: var(--font-data); font-size: 12px; margin-top: 6px; color: var(--text-muted); }
.ladder-step.current .ladder-status { color: var(--gold); }
.ladder-step.unlocked:not(.current) .ladder-status { color: var(--success); }

/* 卡片答對/答錯閃光（JS 動態加 class） */
.card.graded-right { animation: flash-right .65s ease forwards; }
.card.graded-wrong  { animation: flash-wrong  .65s ease forwards; }

/* ---------- 首頁 Home ---------- */
.home-hero {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--cyan); border-radius: var(--radius);
  padding: 28px 22px; margin-top: 16px;
}
.home-title { font-size: 24px; margin: 6px 0 14px; font-weight: 700; }
.home-desc { color: var(--text-dim); line-height: 1.75; margin: 0 0 20px; font-size: 15px; }
.home-features { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.home-feat {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 14px; border: 1px solid var(--border-soft);
}
.home-feat-icon { font-size: 18px; flex: none; }
.home-feat-label { font-weight: 600; font-size: 14px; min-width: 76px; }
.home-feat-desc { font-size: 13px; color: var(--text-dim); }

/* ── 首頁 emoji 圖示欄：固定寬＋置中，讓後面文字/標題起頭對齊 ──
 * 不同 emoji 字寬不一（📘 比 🎓 窄、🛩️ 比 💡 寬），若圖示欄寬度隨 emoji 浮動，
 * 後面文字會從不同 x 起頭而看起來沒對齊。固定 1.5em 欄寬並置中，emoji 對齊、文字也對齊。 */
.home-feat-icon,
.home-aud-icon,
.home-source-icon,
.review-notice-icon,
.storage-notice-icon {
  flex: none;
  width: 1.5em;
  text-align: center;
}

/* ── 首頁：適合對象 ── */
.home-audience { margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.home-audience-title { font-size: 15px; font-weight: 700; margin: 4px 0 4px; }
.home-aud-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 14px; border: 1px solid var(--border-soft);
}
.home-aud-icon { font-size: 18px; flex: none; line-height: 1.5; }
.home-aud-label { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.home-meta { margin: 0 0 22px; }
.home-meta .dim { font-size: 13px; margin: 3px 0; }
.home-cta { width: 100%; }

/* ── 首頁：題庫範圍與資料來源 ── */
.home-scope { margin: 20px 0 22px; display: flex; flex-direction: column; gap: 8px; }
.home-domain {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.home-domain.planned { opacity: 0.6; }
.home-domain-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.home-domain-label { font-weight: 600; font-size: 14px; }
/* 領域標記 emoji（✅ 已完成／🛠 規劃中）固定寬＋置中，讓後面標題起頭對齊（兩者字寬不同）。 */
.home-domain-mark { display: inline-block; width: 1.5em; margin-right: 3px; text-align: center; }
.home-domain-en { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); }
.home-domain-count {
  margin-left: auto; font-size: 12px; font-family: var(--font-data);
  color: var(--cyan); background: rgba(94,231,255,.08);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.home-domain.planned .home-domain-count { color: var(--text-muted); background: var(--surface-3); }
.home-domain-items { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.home-source {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-3); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.home-source-line1 { display: flex; align-items: center; gap: 6px; }
.home-source-icon { font-size: 13px; }
.home-source-label { font-weight: 600; color: var(--text-dim); }
.home-source-line2 { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.home-source strong { color: var(--text); font-weight: 600; }

/* ── 首頁：回訪者摘要卡（昨日進度 + 今天要學的） ── */
.home-resume {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--amber); border-radius: var(--radius);
  padding: 22px 20px; margin-top: 16px;
}
.home-resume .streak-line { margin: 6px 0 2px; }
.home-resume .current-module { margin-bottom: 4px; }
.home-resume-h { font-size: 18px; margin: 16px 0 12px; }
.home-resume-note { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 12px 0 4px; }
.home-resume .home-cta { margin-top: 16px; }
.home-resume-actions { display: flex; gap: 10px; margin-top: 14px; }

/* 關於這個 App：完整介紹收摺疊 */
.home-about {
  margin-top: 18px; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 4px 16px;
}
.home-about > summary {
  cursor: pointer; padding: 12px 2px; font-size: 14px; font-weight: 600;
  color: var(--text-dim); list-style-position: inside;
}
.home-about > summary:hover { color: var(--text); }
.home-about[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.home-about .review-notice,
.home-about .storage-notice { margin-bottom: 16px; }

/* ---------- MCQ 選擇題 ---------- */
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.choice-btn {
  width: 100%; text-align: left; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.55;
  transition: border-color .12s, background .12s;
  font-family: inherit;
}
.choice-btn:hover:not(:disabled) { border-color: var(--cyan); background: var(--surface-3); }
.choice-btn:disabled { cursor: default; }
.choice-label {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-3); color: var(--cyan);
  font-family: var(--font-data); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.choice-text { flex: 1; }
.choice-btn.choice-correct { border-color: var(--success); }
.choice-btn.choice-correct .choice-label { background: var(--success); color: #0a1f0d; }
.choice-btn.choice-selected-right { border-color: var(--success); background: rgba(159,230,160,.07); }
.choice-btn.choice-selected-right .choice-label { background: var(--success); color: #0a1f0d; }
.choice-btn.choice-selected-wrong { border-color: var(--danger); background: rgba(255,107,107,.07); }
.choice-btn.choice-selected-wrong .choice-label { background: var(--danger); color: #200a0a; }

/* 是非題：單句敘述 + 是／非兩鍵（沿用 choice-btn 的判分高亮，覆寫成置中大鍵） */
.tf-lead { font-size: 14px; color: var(--text-muted); margin: 0 0 8px; }
/* 記憶卡／觀念卡是非題的題幹：把主題帶進大字（沿用 .q 大小），與下方判斷敘述拉開間距。 */
.tf-stem { margin-bottom: 12px; }
.tf-statement {
  font-size: 17px; line-height: 1.6; margin: 0 0 4px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
}
.tf-choices { flex-direction: row; gap: 12px; }
.tf-btn {
  flex: 1; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 5px; padding: 16px 10px;
}
.tf-glyph { font-family: var(--font-data); font-size: 24px; line-height: 1; color: var(--text-muted); }
.tf-word { font-size: 16px; font-weight: 600; }
.choice-btn.tf-btn.choice-correct .tf-glyph,
.choice-btn.tf-btn.choice-selected-right .tf-glyph { color: var(--success); }
.choice-btn.tf-btn.choice-selected-wrong .tf-glyph { color: var(--danger); }
.tf-verdict { font-weight: 600; font-size: 15px; margin: 16px 0 -2px; }
.tf-verdict.is-true { color: var(--success); }
.tf-verdict.is-false { color: var(--danger); }

/* ---------- 失事檔案（機長的選擇） ---------- */
/* 首頁/今日入口卡 */
/* 入口卡＝儀表面板上的「銀牌模組」。
   關鍵不在陰影，而在版式：四角螺絲固定、mono 大寫刻字（placard）、
   左側燈罩指示燈、右側內凹讀數窗。缺了螺絲與刻字，它就只是一張通用卡片。
   --lamp 是這塊模組的燈色：失事＝琥珀（CAUTION 語彙）、天氣＝青（COM 語彙）。 */
.cases-entry {
  --lamp: var(--amber);
  --lamp-rgb: 255,180,84;
  position: relative;
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  padding: 16px 18px; border-radius: 4px; text-decoration: none;
  border: 1px solid var(--border); border-left: 4px solid var(--lamp);
  /* 四角螺絲畫在背景層：面板是「鎖上去」的，不是浮在畫面上的卡片 */
  /* 螺絲：暗色螺絲頭 → 亮金屬環 → 外圈暗影（＝鎖進面板、有深度）。
     太小太淡會被當成畫面雜訊，直徑要到 8px 才讀得出是五金。 */
  background:
    radial-gradient(circle at 10px 10px, #16243a 0 2.4px, #5a748f 2.4px 3.4px, rgba(0,0,0,.55) 3.4px 4.3px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, #16243a 0 2.4px, #5a748f 2.4px 3.4px, rgba(0,0,0,.55) 3.4px 4.3px, transparent 4.5px),
    radial-gradient(circle at 10px calc(100% - 10px), #16243a 0 2.4px, #5a748f 2.4px 3.4px, rgba(0,0,0,.55) 3.4px 4.3px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #16243a 0 2.4px, #5a748f 2.4px 3.4px, rgba(0,0,0,.55) 3.4px 4.3px, transparent 4.5px),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -2px 5px rgba(0,0,0,.4),
    0 2px 6px rgba(0,0,0,.3);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cases-entry:hover, .cases-entry:focus-visible {
  border-color: var(--lamp);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 5px rgba(0,0,0,.4),
    0 0 0 1px rgba(var(--lamp-rgb),.25),
    0 2px 10px rgba(0,0,0,.35);
}
/* 按下去要有下沉，跟 korry 押扣同一套手感 */
.cases-entry:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.5); transform: translateY(1px); }

/* 左側：燈罩指示燈（玻璃反光＋有新項目時整顆點亮） */
.cases-entry-icon {
  flex: none; width: 42px; height: 42px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 34%, #14294a, #08152a 78%);
  border: 1px solid #2c435e; border-radius: 4px;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.06);
}
.cases-entry:hover .cases-entry-icon {
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.55),
    inset 0 0 12px rgba(var(--lamp-rgb),.3),
    0 0 10px rgba(var(--lamp-rgb),.2);
}

.cases-entry-mid { flex: 1; min-width: 0; }
/* 銘板刻字：面板上的字是蝕刻出來的，小、寬字距、mono、不搶主標 */
.cases-entry-code {
  font-family: var(--font-data); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; margin-right: -.2em;
  color: var(--text-muted); margin-bottom: 2px;
}
.cases-entry-title { font-size: 15px; font-weight: 600; color: var(--text); }
.cases-entry-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* 右側：內凹讀數窗（數字是「透過玻璃看進去」的，故壓深、加內陰影） */
.cases-entry-count {
  flex: none; font-family: var(--font-data); font-size: 12px; color: var(--text-dim);
  background: linear-gradient(180deg, #060f1c, #0a1526);
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid #22364f;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
}
.cases-entry-count.has-new {
  color: var(--lamp); font-weight: 600;
  text-shadow: 0 0 8px rgba(var(--lamp-rgb),.6);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 0 8px rgba(var(--lamp-rgb),.15);
}

/* 列表頁 */
.cases-head { margin-bottom: 14px; }
.cases-title { margin: 0 0 6px; }
.cases-list { display: flex; flex-direction: column; gap: 10px; }
.case-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); font-family: inherit;
  border-left: 3px solid var(--amber);
}
.case-row:hover:not(:disabled) { border-color: var(--amber); background: var(--surface-3); }
.case-row.case-locked { border-left-color: var(--border); opacity: .6; cursor: default; }
.case-row.case-done { border-left-color: var(--success); }
.case-row-icon { flex: none; font-size: 18px; width: 22px; text-align: center; }
.case-row-mid { flex: 1; min-width: 0; }
.case-row-title { font-size: 15px; font-weight: 500; line-height: 1.35; }
.case-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.case-badge.new {
  flex: none; font-family: var(--font-data); font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 180, 84, .14); color: var(--amber); border: 1px solid rgba(255, 180, 84, .35);
}

/* 作答卡 */
.case-tag { background: rgba(255,180,84,.14); color: var(--amber); border-color: rgba(255,180,84,.35); }
.card[data-tier="case"] { border-left-color: var(--amber); }
.choice-btn.choice-crew { box-shadow: inset 0 0 0 1px var(--amber-soft); }
.choice-crew-tag {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--amber-soft); font-family: var(--font-data);
}
.case-event { font-size: 15px; font-weight: 600; color: var(--amber-soft); margin-bottom: 8px; }
.case-crew { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.case-crew.crew-right { color: var(--success); }
.case-crew.crew-wrong { color: var(--danger); }
.case-lesson { color: var(--text-dim); }
/* 事故後修正項目（設計／軟體／手冊／流程）：自成一塊、藍綠強調，與「教訓」「來源」區隔 */
.case-fixes {
  margin-top: 12px; padding: 12px 14px;
  background: rgba(159,230,160,.07); border-radius: var(--radius-sm);
  border: 1px solid rgba(159,230,160,.26);
}
.case-fixes-label {
  font-size: 11px; color: var(--success); font-family: var(--font-data);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;
}
.case-fixes-p { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin: 0 0 8px; }
.case-fixes-p:last-child { margin-bottom: 0; }
/* 情境／揭露長文字分段（手機可讀性）：每段一個 <p>，段間留白 */
.case-card .setup { font-size: 15px; line-height: 1.75; color: var(--text); margin: 4px 0 14px; }
.setup-p { margin: 0 0 12px; }
.setup-p:last-child { margin-bottom: 0; }
.a-p { margin: 0 0 10px; line-height: 1.7; }
.a-p:last-child { margin-bottom: 0; }
/* 長文裡的機組對話／系統喊話（「」與 "" 引住的片段）：上色減密度、有無線電感 */
.setup-dlg { color: var(--cyan); }
/* 情境收尾的急迫短句（「只剩幾秒評估與行動。」）：琥珀色強調，把讀者推向抉擇 */
.setup-p.setup-crux { color: var(--amber-soft); font-weight: 600; margin-top: 2px; }
/* 機組時數資訊卡：官方報告 Personnel Information 數字，數字用航電 mono 字體 */
.case-crewinfo {
  margin: 2px 0 14px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cyan); border-radius: var(--radius-sm);
}
.case-crewinfo-label {
  font-size: 11px; color: var(--cyan); font-family: var(--font-data);
  letter-spacing: 1px; margin-bottom: 6px;
}
.case-crewinfo-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 3px 0; font-size: 13px; flex-wrap: wrap;
}
.case-crewinfo-role { color: var(--text-dim); min-width: 0; }
.case-crewinfo-hours { font-family: var(--font-data); color: var(--amber-soft); white-space: nowrap; }
/* 手機：時數固定放職位下一行，兩位機組排版才一致（並排時擠不下會不規則換行） */
@media (max-width: 879px) {
  .case-crewinfo-row { display: block; padding: 4px 0; }
  .case-crewinfo-role { display: block; }
  .case-crewinfo-hours { display: block; margin-top: 1px; padding-left: 1em; }
}

/* 調查檔案（第二階段）：證據板＋推理四選一 */
.inv-open-btn {
  background: rgba(126, 214, 223, .1); color: var(--cyan);
  border: 1px solid rgba(126, 214, 223, .4);
}
.inv-open-btn:hover { background: rgba(126, 214, 223, .18); }
.inv-intro { margin: 0 0 12px; }
.inv-clues { margin: 0 0 14px; }
.inv-clues-label {
  font-size: 11px; color: var(--cyan); font-family: var(--font-data);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
}
.inv-clue {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cyan); border-radius: var(--radius-sm);
}
.inv-clue:last-child { margin-bottom: 0; }
.inv-clue-tag {
  font-size: 11px; color: var(--cyan); font-family: var(--font-data);
  letter-spacing: 1px; margin-bottom: 3px;
}
.inv-clue-text { font-size: 13px; color: var(--text-dim); line-height: 1.65; }

/* ---------- 天氣電報（METAR 課程＋每日電報） ---------- */
/* 同一塊面板，只換燈色：天氣＝青（COM／無線電語彙）。其餘樣式全部繼承 .cases-entry */
.wx-entry { --lamp: var(--cyan); --lamp-rgb: 94,231,255; }
.wx-daily-row { margin-bottom: 14px; border-left-color: var(--cyan); }
.wx-metar {
  font-family: var(--font-data); font-size: 15px; line-height: 1.7;
  letter-spacing: .5px; word-break: break-word;
  padding: 12px 14px; margin: 0 0 10px;
  background: var(--surface-2); color: var(--cyan);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.wx-example-label {
  font-size: 11px; color: var(--cyan); font-family: var(--font-data);
  letter-spacing: 1px; text-transform: uppercase; margin: 4px 0 6px;
}
.wx-quiz-label { margin-top: 16px; }
.wx-code {
  font-family: var(--font-data); font-size: 13px; font-weight: 600;
  color: var(--amber-soft); margin-bottom: 3px;
}
.wx-quiz { margin-top: 12px; }
.wx-note { font-size: 11px; margin-top: 12px; }
.wx-lesson-done { min-height: 1em; }
.wx-lesson-done.is-done { color: var(--success); font-weight: 600; }

/* --- 今日真實電報（live METAR，2026-07-23 起） --- */
.wx-live-tag { color: var(--cyan); }
.wx-live-station { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; }
.wx-live-icao {
  font-family: var(--font-data); font-size: 18px; font-weight: 700;
  color: var(--cyan); letter-spacing: 2px;
}
.wx-live-name { font-size: 13px; color: var(--text-dim); }
.wx-metar-loading { color: var(--text-muted); }
.wx-live-meta {
  display: flex; align-items: center; gap: 10px; margin: -4px 0 10px;
  font-family: var(--font-data); font-size: 12px; color: var(--text-muted);
  letter-spacing: .5px;
}
/* 飛行類別徽章沿用航空氣象慣例色：VFR 綠、MVFR 藍、IFR 紅、LIFR 洋紅 */
.wx-fltcat {
  padding: 1px 8px; border: 1px solid currentColor; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.wx-fltcat-vfr  { color: var(--success); }
.wx-fltcat-mvfr { color: var(--cyan); }
.wx-fltcat-ifr  { color: var(--danger); }
.wx-fltcat-lifr { color: #c77dff; }
.wx-fallback-note { font-size: 12px; color: var(--amber-soft); margin: 0 0 8px; }
/* 歷史事故天氣的揭曉區 */
.wx-history-event { font-size: 13px; font-weight: 600; color: var(--amber-soft); margin: 4px 0 6px; }
.wx-history-source { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* ---------- 空難案例 ---------- */
.accident-block {
  margin-top: 12px; padding: 12px 14px;
  background: rgba(255,107,107,.06); border-radius: var(--radius-sm);
  border: 1px solid rgba(255,107,107,.22);
}
.accident-label {
  font-size: 11px; color: var(--danger); font-family: var(--font-data);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px;
}
.accident-event { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 5px; }
.accident-summary { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin-bottom: 6px; }
.accident-source { font-size: 11px; color: var(--text-muted); }
.accident-watch { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ---------- 事實查核來源 ---------- */
.source-block {
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.source-label {
  font-size: 11px; color: var(--amber); font-family: var(--font-data);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px;
}
.source-ref { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 3px; font-weight: 500; }
a.source-link { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
a.source-link:hover { color: var(--amber); }
.source-note { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* ---------- 解鎖慶祝徽章 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 10, 20, .72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fade-in .2s ease;
}
.celebrate {
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 30px 26px; text-align: center; max-width: 340px; width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.3),
    0 0 0 1px rgba(232,198,107,.25), 0 24px 60px rgba(0,0,0,.5);
  animation: pop-in .28s cubic-bezier(.2,.9,.3,1.2), rank-pulse 1.8s ease .3s 2;
}
.celebrate-insignia { display: flex; justify-content: center; margin-bottom: 12px; }
.celebrate-insignia .insignia-svg { width: 96px; height: 84px; }
.celebrate h2 { margin: 6px 0 4px; font-size: 22px; text-wrap: balance; }
.celebrate .btn, .celebrate .korry { margin-top: 20px; }
.btn-sm { font-size: 13px; padding: 7px 16px; }

/* ---------- 首頁進度保存說明卡 ---------- */
.storage-notice {
  margin-top: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  padding: 18px;
  animation: slide-down .2s ease;
}
.storage-notice-header { margin-bottom: 14px; }
.storage-notice-tag {
  font-size: 11px; font-family: var(--font-ui); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--cyan); font-weight: 600;
}
.storage-notice-rows { display: flex; flex-direction: column; gap: 10px; }
.storage-notice-row { display: flex; align-items: flex-start; gap: 12px; }
.storage-notice-icon { font-size: 16px; flex: none; margin-top: 1px; }
.storage-notice-row > div { display: flex; flex-direction: column; gap: 2px; }
.storage-notice-label { font-size: 13px; font-weight: 600; color: var(--text); }
.storage-notice-desc  { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ── 首頁學習方式說明（間隔複習 / 抽卡複習）── */
.review-notice {
  margin: 22px 0 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 180, 84, .28);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 18px;
}
.review-notice-header { margin-bottom: 14px; }
.review-notice-tag {
  font-size: 11px; font-family: var(--font-ui); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--amber); font-weight: 700;
}
.review-notice-rows { display: flex; flex-direction: column; gap: 12px; }
.review-notice-row { display: flex; align-items: flex-start; gap: 12px; }
.review-notice-icon { font-size: 16px; flex: none; margin-top: 1px; }
.review-notice-row > div { display: flex; flex-direction: column; gap: 2px; }
.review-notice-label { font-size: 13px; font-weight: 600; color: var(--text); }
.review-notice-desc  { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* ── 首頁開始前確認門檻 ── */
.home-ack {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 12px;
  cursor: pointer; font-size: 13px; color: var(--text-dim); line-height: 1.5;
  transition: border-color .15s ease;
}
.home-ack-box { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--amber); cursor: pointer; }
.home-ack.nudge { animation: ack-nudge .5s ease; border-color: var(--amber); }
@keyframes ack-nudge {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
/* .korry.locked（css/app.css 按鈕區塊）已定義未點亮態，此處不再疊加 opacity */
.home-ack-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin: 8px 0 0; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 資料庫 / 複習區 Library ---------- */
.lib-intro { margin-top: 16px; }
.lib-intro .dim { margin-top: 6px; }

/* 篩選列 */
.lib-filters { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.lib-filter {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 99px; padding: 7px 14px; font-size: 14px;
  color: var(--text-dim); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.lib-filter:hover { border-color: var(--cyan); }
.lib-filter.active { border-color: var(--cyan); background: rgba(94,231,255,.10); color: var(--text); }
.lib-filter-n { font-family: var(--font-data); font-size: 12px; color: var(--cyan); }

/* 領域標題 */
.lib-body { margin-top: 12px; }
.lib-domain-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.lib-domain-zh { font-size: 16px; font-weight: 600; color: var(--text); }
.lib-domain-en { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); letter-spacing: .5px; }

/* 模組手風琴 */
.lib-module {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.lib-module-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: none; border: none; cursor: pointer;
  color: var(--text); text-align: left;
}
.lib-module-head:hover { background: var(--surface-2); }
.lib-module-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-module-zh { font-size: 15px; font-weight: 500; }
.lib-module-en { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); }
.lib-module-count { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.lib-module-count b { color: var(--cyan); font-weight: 600; }

.lib-caret { flex: none; color: var(--text-muted); font-size: 12px; transition: transform .18s ease; }
.lib-module.open > .lib-module-head .lib-caret,
.lib-item.open > .lib-item-head .lib-caret { transform: rotate(180deg); }

.lib-item-list { border-top: 1px solid var(--border-soft); }

/* 單一題目 */
.lib-item { border-bottom: 1px solid var(--border-soft); }
.lib-item:last-child { border-bottom: none; }
.lib-item-head {
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; background: none; border: none; cursor: pointer;
  color: var(--text); text-align: left; line-height: 1.55;
}
.lib-item-head:hover { background: var(--surface-2); }
.lib-item-head .tier-badge { flex: none; margin-top: 1px; }
.lib-q { flex: 1; min-width: 0; font-size: 15px; }
.lib-item-head .lib-caret { margin-top: 3px; }

/* 進度狀態標記 */
.lib-stat {
  flex: none; font-family: var(--font-data); font-size: 11px;
  padding: 2px 8px; border-radius: 3px; white-space: nowrap; margin-top: 1px;
  background: #0a1830; color: var(--text-muted); border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
}
.lib-stat-new { color: var(--text-muted); }
.lib-stat-learned { color: var(--gold); border-color: rgba(232,198,107,.4); text-shadow: 0 0 6px rgba(232,198,107,.35); }
.lib-stat-wrong { color: var(--danger); border-color: rgba(255,107,107,.35); text-shadow: 0 0 6px rgba(255,107,107,.3); }

/* 展開的解析 */
.lib-answer {
  padding: 4px 16px 18px; line-height: 1.65;
  animation: slide-down .18s ease;
}
.lib-answer .a { font-size: 15px; margin: 0 0 10px; }
.lib-answer .setup {
  font-family: var(--font-data); font-size: 14px; color: var(--amber-soft);
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}
.lib-answer .explain { color: var(--text-dim); font-size: 14px; margin: 8px 0 0; }

@media (min-width: 880px) {
  /* 桌面側欄：六個分頁仍直排，無需調整 */
  .lib-q { font-size: 15px; }
}

/* ---------- 知識圖鑑（紀錄簿） ---------- */
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gallery-head .section-h { margin-bottom: 0; }
.gallery-count { font-family: var(--font-data); font-size: 12px; color: var(--gold); white-space: nowrap; }
.gallery-hint { font-size: 12px; margin: 2px 0 12px; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.kcard {
  position: relative; background: var(--surface);
  border: 1px solid var(--rarity, var(--border)); border-radius: var(--radius);
  padding: 12px 12px 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity, transparent) 22%, transparent),
              0 6px 18px rgba(0, 0, 0, .25);
}
.kcard-art {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  background: radial-gradient(circle at 50% 38%, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kcard-art svg { width: 84%; height: 84%; display: block; }
.kcard-rarity {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-data); font-size: 11px; font-weight: 700;
  color: #0a1424; background: var(--rarity, var(--border));
  padding: 1px 7px; border-radius: 99px;
}
.kcard-title { margin-top: 9px; font-size: 14px; line-height: 1.3; text-wrap: balance; }
.kcard-en { font-size: 11px; color: var(--text-muted); margin-top: 2px; text-wrap: balance; }
.kcard-fact {
  font-family: var(--font-cjk); font-size: 12px; line-height: 1.55;
  color: var(--text-dim); margin: 8px 0 0;
  /* 平衡換行，避免卡片說明最後一行只剩一兩個字加標點 */
  text-wrap: balance;
}

/* 未解鎖：剪影 + 鎖頭 */
.kcard-locked { border-color: var(--border-soft); box-shadow: none; }
.kcard-locked .kcard-art { background: var(--surface-3); }
.kcard-locked .kcard-art svg { filter: brightness(0) invert(.22); opacity: .8; }
.kcard-locked .kcard-rarity { background: var(--text-muted); color: var(--surface); }
.kcard-locked .kcard-title { color: var(--text-muted); }
.kcard-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* 獲得新圖卡演出（沿用 .overlay / .celebrate） */
.card-reveal .kcard { max-width: 190px; margin: 8px auto 2px; text-align: left; }
.card-reveal h2 { margin: 4px 0 2px; font-size: 20px; }

/* ---------- 機場圖鑑（紀錄簿主收集線） ---------- */
.apcard {
  position: relative; background: var(--surface);
  border: 1px solid var(--rarity, var(--border)); border-radius: var(--radius);
  padding: 12px 12px 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity, transparent) 22%, transparent),
              0 6px 18px rgba(0, 0, 0, .25);
}
.apcard-art {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  background:
    linear-gradient(rgba(127, 176, 224, .05) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(127, 176, 224, .05) 1px, transparent 1px) 0 0 / 25% 100%,
    radial-gradient(circle at 50% 42%, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  overflow: hidden;
}
.apcard-art svg { width: 100%; height: 100%; display: block; }
.apcard-codes {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 9px; font-family: var(--font-data); font-size: 11px;
  color: var(--cyan); letter-spacing: .04em; white-space: nowrap;
}
.apcard-rwys {
  margin-top: 6px; font-family: var(--font-data); font-size: 11px;
  color: var(--text-dim); line-height: 1.5;
}
.apcard .kcard-fact { font-size: 12.5px; }
.apcard-source { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.apcard-source a { color: var(--text-muted); text-decoration: underline dotted; }
.apcard-lockhint {
  margin-top: 8px; font-family: var(--font-data); font-size: 11.5px;
  color: var(--text-muted);
}

/* 機場圖鑑區塊標題：與上方精熟度列表拉開距離 */
.ap-section-head { margin-top: 30px; }

/* 里程儀表：機械滾輪里程計（FLT DIST／DEST／NEXT 三格） */
.ap-meter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 10px 14px; margin: 4px 0 14px;
}
.ap-meter-odo { display: flex; flex-direction: column; gap: 4px; }
.ap-meter-cap {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .12em;
  color: var(--text-muted); white-space: nowrap;
}
.ap-meter-drum { display: flex; align-items: baseline; gap: 3px; }
.ap-meter-digit {
  display: inline-block; min-width: 17px; text-align: center;
  font-family: var(--font-data); font-size: 17px; font-weight: 600; line-height: 1.5;
  color: var(--gold); background: #0a1424;
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, .45), inset 0 6px 8px rgba(0, 0, 0, .45);
}
.ap-meter-digit-gold { color: var(--cyan); }
.ap-meter-unit {
  font-family: var(--font-data); font-size: 11px; color: var(--text-muted); margin-left: 3px;
}
/* NEXT 段（FMC PROGRESS 語彙，2026-07-19 拍板）：固定獨佔一排（flex-basis:100%，
 * 不再隨機場名長短時而併排時而折行），上排 caption＋DTG 讀數、機場名放大、
 * 下方航段進度線 */
.ap-meter-next {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  flex-basis: 100%;
  border-top: 1px dashed var(--border-soft); padding-top: 10px;
}
.ap-next-caprow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ap-meter-next-name { font-size: 16px; font-weight: 700; color: var(--text); }
.ap-meter-next-dist { font-family: var(--font-data); font-size: 13px; color: var(--amber); white-space: nowrap; }

/* 航段進度線：--prog＝已飛比例（由 js/airports.js segmentTrack 設定） */
.ap-track { position: relative; height: 34px; margin-top: 8px; --prog: 0%; }
.ap-track-rail { position: absolute; left: 5px; right: 5px; top: 13px; }
.ap-track-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: var(--border); }
.ap-track-flown { position: absolute; left: 0; top: 0; height: 2px; border-radius: 1px; background: var(--amber); width: var(--prog); }
.ap-track-from, .ap-track-to { position: absolute; top: 1px; transform: translate(-50%, -50%); border-radius: 50%; }
.ap-track-from { left: 0; width: 8px; height: 8px; background: var(--amber); }
.ap-track-to { left: 100%; width: 6px; height: 6px; border: 2px solid var(--cyan); background: var(--bg-top); }
.ap-track-plane { position: absolute; left: var(--prog); top: -13px; transform: translateX(-50%); width: 28px; }
.ap-track-plane svg { display: block; width: 100%; height: auto; }
.ap-track-lfrom, .ap-track-lto {
  position: absolute; top: 19px; font-family: var(--font-data);
  font-size: 10px; letter-spacing: .08em; color: var(--text-muted);
}
.ap-track-lfrom { left: 0; }
.ap-track-lto { right: 0; color: var(--cyan); }

/* 首頁／今日的航線網摘要條（整條可點） */
.ap-strip {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px 2px; margin-top: 14px;
}
.ap-strip:hover { border-color: var(--cyan); }
.ap-strip-kicker {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--amber-soft); margin-bottom: 8px;
}
.ap-strip-more { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ap-strip .ap-meter { margin: 0 0 12px; border: none; background: none; padding: 0; }

/* 未來航點預告卡 */
.apcard-teaser .apcard-art svg { filter: none; opacity: 1; }

/* 環球航線網完成徽章（極座標航程圖＋金框） */
.ap-complete {
  display: flex; align-items: center; gap: 16px;
  background:
    radial-gradient(80% 120% at 20% 50%, rgba(232, 198, 107, .07), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(232, 198, 107, .25), 0 0 22px rgba(232, 198, 107, .12),
              0 6px 18px rgba(0, 0, 0, .3);
  border-radius: var(--radius);
  padding: 14px 16px; margin: 0 0 14px;
}
.ap-complete-map {
  flex: 0 0 128px; width: 128px; aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, #10203a, #0a1424);
  border: 1px solid var(--border-soft); border-radius: 50%;
  overflow: hidden;
}
.ap-complete-map svg { width: 100%; height: 100%; display: block; }
.ap-complete-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-complete-kicker {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .18em;
  color: var(--gold); opacity: .85;
}
.ap-complete-title { font-size: 17px; font-weight: 700; color: var(--text); text-wrap: balance; }
.ap-complete-line { font-size: 12.5px; color: var(--text-dim); }
.ap-complete-date { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
@media (max-width: 420px) {
  .ap-complete { flex-direction: column; text-align: center; }
  .ap-complete-info { align-items: center; }
}
.card-reveal .ap-complete { max-width: 320px; margin: 10px auto 2px; text-align: left; }

/* 已開航卡可點開放大 */
.apcard-clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.apcard-clickable:hover, .apcard-clickable:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity, transparent) 55%, transparent),
              0 10px 24px rgba(0, 0, 0, .35);
  outline: none;
}

/* 放大檢視面板：桌面左圖右文，窄幅疊直 */
.ap-detail {
  position: relative; background: var(--surface);
  border: 1px solid var(--rarity, var(--border)); border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity, transparent) 30%, transparent),
              0 16px 44px rgba(0, 0, 0, .5);
  width: min(680px, calc(100vw - 36px));
  max-height: calc(100dvh - 60px); overflow-y: auto;
  padding: 18px 20px 22px;
  animation: trivia-in .22s ease;
}
.ap-detail-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer;
}
.ap-detail-close:hover { color: var(--text); border-color: var(--text-muted); }
.ap-detail-head { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
.ap-detail-codes {
  font-family: var(--font-data); font-size: 13px; letter-spacing: .06em;
  color: var(--cyan);
}
.ap-detail-rarity { position: static; }
.ap-detail-title { margin: 6px 0 0; font-size: 21px; line-height: 1.25; text-wrap: balance; }
.ap-detail-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; text-wrap: balance; }
.ap-detail-body { display: flex; gap: 20px; margin-top: 14px; align-items: flex-start; }
.ap-detail-art { flex: 0 0 264px; width: 264px; }
.ap-detail-info { flex: 1; min-width: 0; }
.ap-detail-specs { border-top: 1px solid var(--border-soft); margin-bottom: 4px; }
.ap-detail-spec {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 2px; border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-data); font-size: 12.5px;
}
.ap-detail-spec-k { color: var(--text-muted); letter-spacing: .04em; white-space: nowrap; }
.ap-detail-spec-v { color: var(--text); }
.ap-detail-fact {
  font-family: var(--font-cjk); font-size: 14px; line-height: 1.75;
  color: var(--text-dim); margin: 12px 0 0;
}
.ap-detail .apcard-source { margin-top: 10px; }
.ap-detail-notes {
  margin-top: 14px; padding: 10px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--gold); border-radius: var(--radius-sm);
}
.ap-detail-notes-kicker {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .14em;
  color: var(--gold); opacity: .9;
}
.ap-detail-notes-text {
  font-family: var(--font-cjk); font-size: 13.5px; line-height: 1.75;
  color: var(--text-dim); margin: 6px 0 0;
}
.ap-detail-notes .apcard-source { margin-top: 6px; }
.ap-detail-share { display: flex; margin: 18px auto 0; }
.ap-detail-share:disabled { opacity: .5; cursor: wait; }
@media (max-width: 600px) {
  .ap-detail-body { flex-direction: column; gap: 14px; }
  .ap-detail-art { flex: none; width: 100%; }
}

/* 未開航：跑道圖沉入夜色 */
.apcard-locked { border-color: var(--border-soft); box-shadow: none; }
.apcard-locked .apcard-art svg { filter: grayscale(1) brightness(.55); opacity: .75; }
.apcard-locked .kcard-title { color: var(--text-muted); }
.apcard-locked .apcard-codes { color: var(--text-muted); }
.card-reveal .apcard { max-width: 210px; margin: 8px auto 2px; text-align: left; }

/* 典藏（原知識圖鑑降格收納） */
.archive-details { margin-top: 18px; }
.archive-details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px;
  color: var(--text-dim); font-size: 14px; font-weight: 600;
}
.archive-details > summary::before { content: '▸'; transition: transform .15s ease; }
.archive-details[open] > summary::before { transform: rotate(90deg); }
.archive-details > summary::-webkit-details-marker { display: none; }
.archive-details .archive-hint { font-size: 12px; margin: 6px 0 12px; color: var(--text-muted); }
.archive-details .gallery { margin-top: 10px; }

/* ---------- 航海・航空小知識（刷題穿插卡） ---------- */
.trivia-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rarity, var(--cyan));
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  animation: trivia-in .3s ease;
}
@keyframes trivia-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.trivia-cheer {
  font-size: 13px; font-weight: 600; color: var(--amber-soft);
  margin: 0 0 10px;
}
.trivia-kicker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-data); font-size: 11px; letter-spacing: .5px;
  color: var(--cyan); text-transform: uppercase;
}
.trivia-kicker-icon { font-size: 13px; }
.trivia-kicker .trivia-cat { margin-left: auto; }
/* 分類徽章（穿插卡與圖鑑卡共用） */
.trivia-cat {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-cjk); font-size: 11px; line-height: 1.4;
  text-transform: none; letter-spacing: 0;
  padding: 2px 9px; border-radius: 99px;
  color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--rarity, var(--border)) 55%, var(--border));
  background: color-mix(in srgb, var(--rarity, transparent) 12%, transparent);
}
.trivia-title { margin: 11px 0 6px; font-size: 17px; line-height: 1.35; }
.trivia-fact { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.trivia-verdict {
  display: inline-block; font-family: var(--font-data); font-size: 11px;
  padding: 2px 9px; border-radius: 99px; margin: 0 0 8px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.trivia-verdict.myth    { color: var(--danger);     border-color: var(--danger); }
.trivia-verdict.reverse { color: var(--cyan);       border-color: var(--cyan); }
.trivia-verdict.note    { color: var(--amber-soft); border-color: var(--amber); }
.trivia-verdict.origin  { color: var(--success);    border-color: var(--success); }
.trivia-example {
  display: block; font-size: 13.5px; line-height: 1.7; color: var(--text-dim);
  margin: 0 0 10px; padding: 9px 11px;
  border-left: 3px solid color-mix(in srgb, var(--rarity, var(--cyan)) 60%, var(--border));
  background: color-mix(in srgb, var(--rarity, transparent) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.trivia-example-label {
  display: inline-block; font-family: var(--font-data); font-size: 11px;
  font-weight: 700; letter-spacing: .5px; margin-right: 7px;
  color: color-mix(in srgb, var(--rarity, var(--cyan)) 75%, var(--text));
}
.trivia-source { font-size: 11px; color: var(--text-muted); margin: 0 0 12px; }
.trivia-source-label { font-family: var(--font-data); }
.trivia-source-link { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* ---------- 小知識圖鑑（獨立分頁；解鎖式） ---------- */
.trivia-intro { margin-bottom: 4px; }
/* 手機版：單欄、由上而下展開，整段文字一行行讀比較順；寬螢幕才排兩欄。 */
.gallery.trivia-gallery { grid-template-columns: 1fr; gap: 14px; margin-top: 4px; }
@media (min-width: 640px) { .gallery.trivia-gallery { grid-template-columns: repeat(2, 1fr); } }
.trivia-gallery .tcard { padding: 14px 16px; }
.trivia-gallery .tcard-title { font-size: 15px; }
.trivia-gallery .tcard-fact { font-size: 13.5px; line-height: 1.65; }
.tcard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--rarity, var(--border)); border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity, transparent) 20%, transparent),
              0 5px 14px rgba(0, 0, 0, .22);
}
.tcard .trivia-cat { margin-bottom: 4px; }
.tcard-title { margin-top: 2px; font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.tcard-fact {
  font-family: var(--font-cjk); font-size: 12px; line-height: 1.55;
  color: var(--text-dim); margin: 7px 0 8px;
}
.tcard .trivia-example { font-size: 12px; line-height: 1.6; padding: 7px 9px; margin-bottom: 8px; }
.tcard .trivia-example-label { font-size: 10px; }
.tcard .trivia-verdict { align-self: flex-start; font-size: 10px; padding: 1px 7px; }
.tcard .trivia-source { font-size: 10px; margin-bottom: 0; }
.tcard-locked { border-color: var(--border-soft); box-shadow: none; opacity: .72; }
.tcard-locked .trivia-cat { filter: grayscale(1) brightness(.85); }
.tcard-locked .tcard-title { color: var(--text-muted); }
.tcard-lockhint { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* ---------- 更新專區 Updates ---------- */
/* 導覽鈕 NEW 標記 */
.nav-item { position: relative; }
.nav-badge {
  font-family: var(--font-data); font-size: 8px; font-weight: 700; letter-spacing: .5px;
  line-height: 1; color: #0b1626; background: var(--amber);
  border-radius: 99px; padding: 2px 4px;
  position: absolute; top: 2px; left: 50%; transform: translateX(6px);
}
@media (min-width: 880px) {
  .nav-badge { position: static; transform: none; margin-left: auto; }
}

.updates { margin-top: 8px; }
.updates-title { margin: 6px 0 4px; font-size: 21px; }
.updates-list { margin-top: 18px; }
.update-item { display: flex; gap: 14px; }
/* 左側時間軸：圓點 + 連接線 */
.update-rail { position: relative; flex: none; width: 12px; display: flex; justify-content: center; }
.update-rail::before {
  content: ''; position: absolute; top: 6px; bottom: -6px; left: 50%;
  width: 2px; transform: translateX(-50%); background: var(--border);
}
.update-item:last-child .update-rail::before { display: none; }
.update-dot {
  width: 11px; height: 11px; border-radius: 99px; margin-top: 4px;
  background: var(--cyan); box-shadow: 0 0 0 4px var(--bg-top); position: relative; z-index: 1;
}
.update-body {
  flex: 1; padding-bottom: 22px; min-width: 0;
}
.update-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.update-date { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); letter-spacing: 1px; }
.update-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-dim);
}
.update-chip.type-feature { color: var(--cyan); }
.update-chip.type-content { color: var(--amber); }
.update-chip.type-fix { color: var(--success); }
.update-item-title { margin: 8px 0 4px; font-size: 16px; font-weight: 600; color: var(--text); }
.update-desc { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-dim); }


/* ---------- 匯出／匯入進度 ---------- */
.backup-section { margin: 32px 0 16px; border-top: 1px solid var(--border); padding-top: 20px; }
.backup-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.backup-btn { flex: 1; min-width: 120px; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------- 跨裝置同步（同步碼） ---------- */
/* 沿用匯出／匯入區塊的間距語彙，讓兩塊在紀錄簿頁視覺上是同一組「進度管理」功能。 */
.sync-section { margin: 32px 0 16px; border-top: 1px solid var(--border); padding-top: 20px; }
.sync-section .section-h { margin-top: 0; }
/* 同步碼讀數窗：沿用 .cases-entry-count 的內凹玻璃窗語彙（深色漸層＋內陰影），放大給碼獨立顯示。 */
.sync-code-readout {
  font-family: var(--font-data); font-size: 17px; font-weight: 600; letter-spacing: .03em;
  color: var(--cyan); text-align: center; word-break: break-all; user-select: all;
  background: linear-gradient(180deg, #060f1c, #0a1526);
  padding: 14px 12px; border-radius: var(--radius-sm);
  border: 1px solid #22364f;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
  margin: 10px 0;
}
.sync-status-line { margin: 10px 0; font-size: 13px; }
.sync-input-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.sync-input-row input {
  flex: 1; min-width: 180px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-data); font-size: 14px; letter-spacing: .02em;
}
.sync-input-row input:focus { outline: none; border-color: var(--cyan); }
.sync-msg { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.sync-msg.err { color: var(--danger); }
.sync-msg.ok { color: var(--success); }
/* 進度保存卡裡的「前往紀錄簿」小連結（同步入口） */
.storage-notice-golink { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--cyan); text-decoration: none; }
.storage-notice-golink:hover { text-decoration: underline; }
/* 同步狀態小吊牌：底部置中、非阻塞、不可點；沿用面板底色＋細框語彙。 */
.sync-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px;
  background: linear-gradient(180deg, #0c1830, #091326);
  border: 1px solid #22364f; border-radius: 999px;
  padding: 7px 16px; font-size: 13px; color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  z-index: 9000; pointer-events: none;
  opacity: 1; transition: opacity .35s;
}
.sync-toast.gone { opacity: 0; }
/* 完成畫面的同步邀請卡／狀態列：沿用 .complete-note 的內凹說明框語彙。 */
.sync-complete-note { display: flex; flex-direction: column; gap: 4px; }
.sync-complete-note .sync-complete-title { font-weight: 600; color: var(--text); }

/* ---------- 小額贊助（紀錄簿頁最底） ---------- */
/* 沿用同步／備份區塊的分隔線＋間距語彙；按鈕用 korry-alt（青色刻字），
   不搶學習主 CTA 的琥珀光——贊助永遠是次要動作。 */
.support-section { margin: 32px 0 16px; border-top: 1px solid var(--border); padding-top: 20px; }
.support-section .section-h { margin-top: 0; }
.support-section .dim { font-size: 13px; }
/* 按鈕收窄置中：全寬 korry 在 720px 版面上會讀成主 CTA。 */
.support-actions { max-width: 320px; margin: 16px auto 0; }
.support-amount {
  margin: 8px 0 0; text-align: center;
  font-size: 13px; color: var(--text-dim); line-height: 1.6;
}
.support-note {
  margin: 10px 0 0; text-align: center;
  font-size: 12px; color: var(--text-muted); line-height: 1.6;
}

/* 更新頁的常駐置頂卡：刻意不進左側時間軸（它沒有日期，也不是一則更新），
   用一張比更新條目更淡的框卡與時間軸區隔開。 */
.support-pin {
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.support-pin .update-item-title { margin-top: 6px; font-size: 15px; }
.support-pin-chip { color: var(--text-muted); }
.support-pin-link {
  display: inline-block; margin-top: 8px;
  font-size: 13px; color: var(--cyan); text-decoration: none;
}
.support-pin-link:hover { text-decoration: underline; }

/* ---------- 儲存失敗警告條 ---------- */
.fd-storage-warn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: var(--amber, #f5c842); color: #1a1200;
  font-size: 13px; text-align: center; padding: 8px 16px;
  animation: slide-down .25s ease;
}

/* ---------- 無障礙 ---------- */
/* 鍵盤焦點環：只在鍵盤操作（Tab）時出現，滑鼠／觸控點擊不顯示；不影響既有 :active/:hover。 */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* 尊重系統「減少動態效果」：關閉所有動畫與過場，避免前庭敏感者不適（功能完全不變）。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}