/* ============================================================
   思絃集 T.S.L.M.C. — 非遺小測驗 quiz.css
   頁面級樣式（僅 quiz.html 載入）
   規範：顏色/字體一律引用 global.css 的 :root token；
        共享元件（.btn-szesuen 等）不在此重定義。
   ============================================================ */

/* ============================================================
   非遺小測驗 · 頁面專屬樣式（品牌 token 沿用 global.css）
   墨黑 --ink · 琥珀金 --amber · 米白 --rice
   松綠 --pine（答對）· 朱砂 --cinnabar（答錯）
   ============================================================ */

/* ---------- 頁面骨架 ---------- */
.quiz-body{
  background:var(--rice);
  color:var(--text);
  font-family:var(--font-sans);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background .6s ease;
}
.quiz-body.result-mode{background:var(--warm-dark)}

.quiz-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px clamp(20px,5vw,48px);
  border-bottom:1px solid var(--border);
}
.quiz-brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.quiz-brand img{height:34px;width:auto}
.quiz-brand .b-name{
  font-family:var(--font-serif);font-size:17px;font-weight:600;
  letter-spacing:.05em;color:var(--text);line-height:1.2;
}
.quiz-brand .b-name small{
  display:block;font-family:var(--font-latin-sans);font-size:9px;
  font-weight:400;letter-spacing:.18em;color:var(--text-muted);margin-top:2px;
}
.quiz-top-note{
  font-family:var(--font-latin-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.quiz-body.result-mode .quiz-top{border-bottom-color:rgba(245,241,232,.12)}
.quiz-body.result-mode .quiz-top-note{color:rgba(245,241,232,.4)}

.quiz-stage{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:48px clamp(20px,5vw,48px) 56px;
}
.quiz-col{width:100%;max-width:720px}

.quiz-foot{
  padding:22px clamp(20px,5vw,48px);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.quiz-foot p{margin:0;font-size:12.5px;color:var(--text-muted);letter-spacing:.04em}
.quiz-foot a{color:var(--amber);text-decoration:none;font-weight:500}
.quiz-foot a:hover{color:var(--amber-dark)}
.quiz-body.result-mode .quiz-foot{border-top-color:rgba(245,241,232,.12)}
.quiz-body.result-mode .quiz-foot p{color:rgba(245,241,232,.42)}

/* ---------- 螢幕切換動畫 ---------- */
.screen{transition:opacity .45s ease,transform .45s ease}
.screen.is-entering{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){
  .screen{transition:none}
  .screen.is-entering{opacity:1;transform:none}
  .btn-szesuen,.q-opt{transition:none}
}

/* ---------- 開始頁 ---------- */
#screen-intro{text-align:center;padding:24px 0}
.seal{
  width:84px;height:84px;margin:0 auto 30px;
  border:2px solid var(--amber);border-radius:4px;position:relative;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-3deg);
}
.seal::after{
  content:"";position:absolute;inset:5px;
  border:1px solid rgba(184,148,90,.55);border-radius:2px;
}
.seal span{
  font-family:var(--font-serif);font-size:38px;font-weight:600;
  color:var(--amber);line-height:1;transform:translateY(-2px);
}
#screen-intro h1{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(30px,5.4vw,42px);line-height:1.4;letter-spacing:.02em;
  margin:14px 0 18px;
}
#screen-intro .lead{
  font-size:15.5px;line-height:1.9;color:var(--text-secondary);
  max-width:460px;margin:0 auto 26px;
}
.quiz-meta{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-latin-sans);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:34px;
}
.quiz-meta i{width:3px;height:3px;border-radius:50%;background:var(--amber);font-style:normal}

/* ---------- 級別與範疇選擇器（與全頁中軸構圖一致：全部置中） ---------- */
.picker-block{margin-bottom:22px;text-align:center}
.picker-label{
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;color:var(--text-secondary);margin-bottom:10px;
  display:flex;align-items:baseline;justify-content:center;gap:10px;
}
.picker-label em{
  font-style:normal;font-weight:400;font-size:11.5px;
  letter-spacing:.04em;color:var(--text-muted);
}
.lv-picker{display:flex;gap:10px;justify-content:center}
.lv-btn{
  font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.08em;
  padding:10px 26px;border-radius:2px;cursor:pointer;
  background:var(--rice-light);color:var(--text-secondary);
  border:1px solid var(--border);transition:all .25s ease;
}
.lv-btn:hover{border-color:var(--amber);color:var(--amber)}
.lv-btn.is-active{background:var(--amber);border-color:var(--amber);color:#fff}
.topic-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.topic-chip{
  font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:7px 16px;border-radius:2px;cursor:pointer;
  background:var(--rice-light);color:var(--text-secondary);
  border:1px solid var(--border);transition:all .25s ease;
}
.topic-chip:hover{border-color:var(--amber);color:var(--amber)}
.topic-chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--rice)}
#screen-intro .picker-block + .picker-block{margin-bottom:26px}
#screen-intro .quiz-meta{margin-bottom:26px}
.r-mode{
  font-family:var(--font-latin-sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-light);
  margin:10px 0 0;
}
#screen-result #r-desc{margin-top:14px}

/* ---------- 答題頁 ---------- */
.quiz-progress{margin-bottom:34px}
.quiz-progress .qp-row{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;
}
.quiz-progress .qp-label{
  font-family:var(--font-latin-sans);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
}
.quiz-progress .qp-count{
  font-family:var(--font-latin-serif);font-size:17px;font-weight:500;
  color:var(--text-secondary);letter-spacing:.06em;
}
.quiz-progress .qp-count b{color:var(--ink);font-weight:600}
.quiz-progress .qp-track{height:3px;background:var(--rice-dark);border-radius:2px;overflow:hidden}
.quiz-progress .qp-fill{
  display:block;height:100%;width:16.66%;background:var(--amber);
  border-radius:2px;transition:width .45s ease;
}

.q{padding:6px 0 0}
.q-tag{
  display:inline-block;font-family:var(--font-sans);font-size:12px;font-weight:600;
  letter-spacing:.2em;color:var(--amber);border:1px solid rgba(184,148,90,.5);
  padding:5px 14px;border-radius:2px;margin-bottom:20px;
}
.q-title{
  font-family:var(--font-serif);font-weight:600;
  font-size:clamp(21px,3.6vw,25px);line-height:1.55;letter-spacing:.01em;
  margin:0 0 28px;
}
.q-options{display:flex;flex-direction:column;gap:12px}
.q-opt{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--rice-light);border:1px solid var(--border);border-radius:3px;
  padding:15px 18px;cursor:pointer;
  font-family:var(--font-sans);font-size:15.5px;line-height:1.7;color:var(--text);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.q-opt:not(:disabled):hover{
  border-color:var(--amber);background:#fff;transform:translateX(3px);
}
.q-opt:not(:disabled):focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}
.q-opt-key{
  flex:none;width:28px;height:28px;border:1px solid var(--amber-light);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-latin-serif);font-size:14px;font-weight:600;color:var(--amber);
  background:transparent;transition:all .25s ease;
}
.q-opt-mark{flex:none;margin-left:auto;width:20px;height:20px;display:none}

/* 答對 */
.q-opt.is-right{
  background:var(--pine-bg);border-color:var(--pine);color:var(--ink);
  transform:none;font-weight:500;
}
.q-opt.is-right .q-opt-key{border-color:var(--pine);color:var(--pine)}
.q-opt.is-right .q-opt-mark{display:block}
/* 答錯 */
.q-opt.is-wrong{
  background:var(--cinnabar-bg);border-color:var(--cinnabar);color:var(--ink);
  transform:none;
}
.q-opt.is-wrong .q-opt-key{border-color:var(--cinnabar);color:var(--cinnabar)}
.q-opt.is-wrong .q-opt-mark{display:block}
/* 已作答後其餘選項 */
.q-opt[disabled]{cursor:default;opacity:.72}
.q-opt.is-right[disabled],.q-opt.is-wrong[disabled]{opacity:1}

/* 原來如此 */
.q-explain{
  margin-top:24px;background:var(--rice-light);
  border-left:3px solid var(--amber);border-radius:0 3px 3px 0;
  padding:20px 24px 20px 22px;
}
.q-explain-label{
  font-family:var(--font-serif);font-size:14px;font-weight:700;
  letter-spacing:.24em;color:var(--amber);margin-bottom:8px;
}
.q-explain p{
  margin:0;font-size:14.5px;line-height:2;color:var(--text-secondary);
}
.q-actions{margin-top:28px;display:flex;justify-content:flex-end}

/* ---------- 結果頁（墨色） ---------- */
#screen-result{text-align:center;color:var(--rice);padding:12px 0}
.r-score{
  font-family:var(--font-latin-serif);line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin-bottom:6px;
}
.r-score em{
  font-style:normal;font-size:clamp(84px,16vw,120px);font-weight:500;
  color:var(--amber);letter-spacing:.02em;
}
.r-score span{font-size:26px;color:rgba(245,241,232,.5);font-weight:400}
.r-score-label{
  font-family:var(--font-latin-sans);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.45);
  margin-bottom:34px;
}
.r-rule{width:36px;height:3px;background:var(--amber);margin:0 auto 26px;border-radius:2px}
#r-level{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(28px,5vw,36px);letter-spacing:.12em;
  margin:0 0 16px;color:var(--rice);
}
#r-desc{
  font-size:15px;line-height:2;color:rgba(245,241,232,.66);
  max-width:440px;margin:0 auto 40px;
}
.r-recs{
  background:rgba(245,241,232,.05);border:1px solid rgba(184,148,90,.35);
  border-radius:4px;padding:26px 30px;margin-bottom:36px;text-align:left;
}
.r-recs-label{
  font-family:var(--font-serif);font-size:13px;font-weight:700;
  letter-spacing:.24em;color:var(--amber);margin-bottom:14px;text-align:center;
}
.r-recs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.r-recs li a{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;
  color:var(--rice);font-size:14.5px;line-height:1.8;
  border-bottom:1px solid rgba(245,241,232,.1);padding-bottom:10px;
  transition:color .25s ease;
}
.r-recs li:last-child a{border-bottom:none;padding-bottom:0}
.r-recs li a:hover{color:var(--amber-light)}
.r-recs li a .rec-sub{
  display:block;font-size:12.5px;color:rgba(245,241,232,.45);line-height:1.7;
}
.r-recs li a .rec-arrow{
  margin-left:auto;flex:none;font-family:var(--font-latin-serif);
  color:var(--amber);font-size:16px;
}
.r-actions{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-bottom:22px;
}
#screen-result .btn-szesuen-ghost{
  color:var(--rice);border-color:rgba(245,241,232,.35);
}
#screen-result .btn-szesuen-ghost:hover{
  border-color:var(--amber);color:var(--amber);background:rgba(184,148,90,.08);
}
#screen-result .btn-szesuen-light{
  background:transparent;color:var(--amber-light);border:1.5px solid var(--amber);
}
#screen-result .btn-szesuen-light:hover{
  background:var(--amber);color:var(--warm-dark);
}
.r-share{
  font-size:12.5px;color:rgba(245,241,232,.4);letter-spacing:.06em;margin:0;
}

/* ---------- 小屏 ---------- */
@media (max-width:576px){
  .q-title{margin-bottom:22px}
  .q-opt{padding:13px 14px;gap:12px;font-size:14.5px}
  .q-opt-mark{width:18px;height:18px}
  .q-explain{padding:16px 16px 16px 14px}
  .r-recs{padding:20px 18px}
  .quiz-top-note{display:none}
  .q-actions .btn-szesuen{width:100%;justify-content:center}
  .r-actions .btn-szesuen{flex:1;justify-content:center}
}