/* ════════════════════════════════════════════════════════════════
   quiz.css — 测验页「单栏闯关式」布局（设计系统第 4 页）
   复用 flashcards.css 的 fcx- 骨架（.fcx-page/.fcx-head/.fcx-card）
   + --fcx-* 变量。测验是 9 页里唯一带「游戏感」的——自己一套：
   顶部游戏 HUD（心心 + 连击 + 进度），下面一张专注题卡，每题变身
   5 种题型。同一套零件，布局各管各的。
   类名全 fcx-qz- 前缀，跟 luxe.css 的 [class*=] 扫除规则隔离
   （避开 -chip/-tag/-title/-num/-btn-primary 这些危险子串）。
   ════════════════════════════════════════════════════════════════ */

/* ═══ 1. 游戏 HUD：心心 + 连击 + 进度（两行一条） ═══ */
.fcx-qz-hud {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--fcx-panel); border-radius: 18px;
  padding: 15px 24px; margin: auto auto 14px;
  width: 100%; max-width: 900px;
}
.fcx-qz-hud.hide { display: none; }
.fcx-qz-hud-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* 心心 */
.fcx-qz-hearts { display: flex; align-items: center; gap: 5px; }
.fcx-qz-heart {
  display: flex; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.fcx-qz-heart svg { width: 21px; height: 21px; }
.fcx-qz-heart.is-full svg  { fill: var(--fcx-coral-d); }
.fcx-qz-heart.is-empty svg { fill: var(--fcx-line); }
.fcx-qz-heart.is-breaking { transform: scale(0) rotate(-25deg); opacity: 0; }

/* 连击 */
.fcx-qz-streak {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fcx-sans); font-size: 13px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--fcx-soft); color: var(--fcx-faint);
  transition: background .2s, color .2s;
}
.fcx-qz-streak svg { width: 14px; height: 14px; }
.fcx-qz-streak[data-streak="lit"]   { background: rgba(28,176,246,.14); color: var(--fcx-sky); }
.fcx-qz-streak[data-streak="hot"]   { background: rgba(255,150,0,.16);  color: var(--fcx-amber-d); }
.fcx-qz-streak[data-streak="super"] { background: rgba(206,130,255,.18); color: var(--fcx-purple); }
html[data-theme="luxe"] .fcx-qz-streak[data-streak="lit"],
html[data-theme="luxe"] .fcx-qz-streak[data-streak="hot"],
html[data-theme="luxe"] .fcx-qz-streak[data-streak="super"] {
  background: rgba(245,197,24,.16); color: var(--fcx-mint);
}

/* 进度条 + 第 N/M 题 */
.fcx-qz-bar { flex: 1; height: 10px; background: var(--fcx-line); border-radius: 999px; overflow: hidden; }
.fcx-qz-bar i {
  display: block; height: 100%; width: 0;
  background: var(--fcx-mint); border-radius: 999px;
  transition: width .45s cubic-bezier(.3,.8,.3,1);
}
.fcx-qz-count {
  font-family: var(--fcx-serif); font-size: 14px; font-weight: 600;
  color: var(--fcx-muted); white-space: nowrap; min-width: 56px; text-align: right;
}
.fcx-qz-count b { color: var(--fcx-mint-d); font-size: 16px; }

/* 页头右侧：安静的得分 */
.fcx-qz-score {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fcx-serif); font-size: 14px; font-weight: 600; color: var(--fcx-muted);
}
.fcx-qz-score svg { width: 15px; height: 15px; color: var(--fcx-amber); }
.fcx-qz-score b { font-size: 19px; color: var(--fcx-ink); }

/* ═══ 2. 闯关舞台：单栏居中 ═══ */
.fcx-qz-stage {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin-bottom: auto; padding: 0 0 24px;
}
.fcx-qz-card { width: 100%; max-width: 900px; cursor: default; user-select: text; padding: 40px 48px 36px; }
.fcx-qz-card.hide { display: none; }

/* ═══ 3. 题目通用零件 ═══ */
.fcx-qz-q { display: block; }
.fcx-qz-kicker {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--fcx-faint); margin: 0 0 14px;
}
.fcx-qz-kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--fcx-mint); flex-shrink: 0;
}
.fcx-qz-prompt {
  font-family: var(--fcx-serif); font-size: 24px; font-weight: 600;
  line-height: 1.45; color: var(--fcx-ink); margin: 0 0 24px;
}
.fcx-qz-word { color: var(--fcx-mint-d); }
html[data-theme="luxe"] .fcx-qz-word { color: var(--fcx-mint); }

/* ═══ 4. 选项（选义 / 反选 / 听音 共用，2×2） ═══ */
.fcx-qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
/* Duolingo 风 3D 按钮：4px 实色下边阴影 + 抬/压交互（见 design-refs/quiz/DESIGN.md L81 "招牌别去掉"） */
.fcx-qz-opt {
  position: relative;
  display: flex; align-items: center; gap: 13px; width: 100%;
  border: none; cursor: pointer; border-radius: 15px; text-align: left;
  background: var(--fcx-soft); padding: 17px 18px;
  font-family: var(--fcx-sans);
  box-shadow: 0 4px 0 0 var(--fcx-soft-d);
  transition: background .2s, transform .1s, box-shadow .15s, opacity .3s;
}
.fcx-qz-opt:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--fcx-soft-d);
}
.fcx-qz-opt:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--fcx-soft-d);
}
.fcx-qz-opt:disabled { cursor: default; box-shadow: 0 2px 0 0 var(--fcx-soft-d); }

/* streak pill 里 SVG / 文字 / 数字之间的呼吸（修 Combo0 拥挤） */
.fcx-qz-streak { display: inline-flex; align-items: center; gap: 6px; }
.fcx-qz-streak-lbl { letter-spacing: .02em; }
.fcx-qz-streak-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.fcx-qz-opt-l {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--fcx-panel); color: var(--fcx-muted);
  font-family: var(--fcx-serif); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.fcx-qz-opt-t { font-size: 16px; font-weight: 700; color: var(--fcx-ink); line-height: 1.4; }
.fcx-qz-opt-en { font-family: var(--fcx-serif); font-size: 18px; }
/* ── 批改揭晓：答对挺立发光 / 答错塌陷成「废牌」 ──
   动画本身走 JS（WAAPI，见 app.js 的 quizLeap / quizDrop——luxe 掐 @keyframes，
   CSS 关键帧不可靠）；这里只管「定格」状态，动画掐了也能一眼看出对错。 */
.fcx-qz-opt.is-correct {
  background: rgba(88,204,2,.18);
  box-shadow: 0 7px 20px -9px rgba(88,204,2,.55);
}
.fcx-qz-opt.is-correct .fcx-qz-opt-l { background: var(--fcx-mint); color: #fff; }
html[data-theme="luxe"] .fcx-qz-opt.is-correct .fcx-qz-opt-l { color: #1a1610; }
/* 答错：抽掉颜色、压暗，定格在 quizDrop 留下的塌斜里 */
.fcx-qz-opt.is-wrong { background: var(--fcx-line); opacity: .85; }
.fcx-qz-opt.is-wrong .fcx-qz-opt-l { background: var(--fcx-faint); color: #fff; }
.fcx-qz-opt.is-wrong .fcx-qz-opt-t { color: var(--fcx-muted); }
/* 揭晓时没碰到的选项淡出，焦点收到「对 / 错」两张上 */
.fcx-qz-opt--mute { opacity: .4; }
/* 答错那张被劈开的裂纹（JS 注入的 SVG，描边走 WAAPI 画出来） */
.fcx-qz-crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.fcx-qz-crack path {
  fill: none; stroke: var(--fcx-qz-crack, #7a5346);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* 召回热词：选项文字加一道下划标 */
.fcx-qz-opt.is-hot .fcx-qz-opt-t { box-shadow: inset 0 -2px 0 var(--fcx-amber); }

/* ═══ 5. 听音题：播放提示行 ═══ */
.fcx-qz-cue {
  display: flex; align-items: center; gap: 14px;
  background: var(--fcx-soft); border-radius: 15px;
  padding: 14px 16px; margin-bottom: 14px;
}
.fcx-qz-play {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  border: none; cursor: pointer; border-radius: 12px;
  background: var(--fcx-sky); color: #fff;
  font-family: var(--fcx-serif); font-size: 14px; font-weight: 600;
  padding: 11px 17px; box-shadow: 0 4px 0 #1488c4; transition: transform .12s;
}
html[data-theme="luxe"] .fcx-qz-play { background: var(--fcx-mint); color: #1a1610; box-shadow: 0 4px 0 var(--fcx-mint-d); }
.fcx-qz-play:hover { transform: translateY(-1px); }
.fcx-qz-play:active { transform: translateY(2px); box-shadow: 0 1px 0 #1488c4; }
.fcx-qz-play svg { width: 17px; height: 17px; }
.fcx-qz-cue-tip { font-size: 13px; font-weight: 700; color: var(--fcx-muted); }

/* ═══ 6. 拼写题 ═══ */
.fcx-qz-spell { text-align: center; }
.fcx-qz-spell .fcx-qz-kicker { justify-content: center; }
.fcx-qz-spell-def {
  font-family: var(--fcx-serif); font-size: 28px; font-weight: 600;
  color: var(--fcx-ink); margin: 6px 0 10px; line-height: 1.35;
}
.fcx-qz-spell-meta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 16px; font-size: 13.5px; font-weight: 700; color: var(--fcx-muted);
}
.fcx-qz-mini {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; cursor: pointer; border-radius: 9px;
  background: rgba(28,176,246,.13); color: var(--fcx-sky);
  font-family: var(--fcx-sans); font-size: 12.5px; font-weight: 800;
  padding: 6px 11px; transition: filter .12s;
}
html[data-theme="luxe"] .fcx-qz-mini { background: rgba(245,197,24,.14); color: var(--fcx-mint); }
.fcx-qz-mini:hover { filter: brightness(1.05); }
.fcx-qz-mini svg { width: 13px; height: 13px; }
.fcx-qz-input {
  width: 100%; border: none; text-align: center;
  background: var(--fcx-soft); border-radius: 14px;
  padding: 15px 17px; font-family: var(--fcx-serif);
  font-size: 21px; font-weight: 600; color: var(--fcx-ink);
  letter-spacing: .04em;
  outline: 2px solid transparent; transition: outline-color .15s;
}
.fcx-qz-input::placeholder { color: var(--fcx-faint); font-weight: 500; letter-spacing: normal; }
.fcx-qz-input:focus { outline-color: var(--fcx-sky); }
html[data-theme="luxe"] .fcx-qz-input:focus { outline-color: var(--fcx-mint); }

/* ═══ 7. 连连看 ═══ */
.fcx-qz-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fcx-qz-mcol { display: flex; flex-direction: column; gap: 13px; }
.fcx-qz-cell {
  position: relative; /* quizDrop 的 .fcx-qz-crack 裂纹需要 non-static 父级 */
  width: 100%; border: none; cursor: pointer; border-radius: 13px;
  background: var(--fcx-soft); color: var(--fcx-ink);
  padding: 13px 12px; font-family: var(--fcx-sans);
  font-size: 14px; font-weight: 700; line-height: 1.35;
  box-shadow: 0 4px 0 0 var(--fcx-soft-d);
  transition: background .14s, transform .1s, box-shadow .14s;
}
.fcx-qz-cell-w { font-family: var(--fcx-serif); font-size: 16px; }
.fcx-qz-cell:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--fcx-soft-d); }
.fcx-qz-cell:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--fcx-soft-d); }
.fcx-qz-cell:disabled { box-shadow: 0 2px 0 0 var(--fcx-soft-d); }

/* luxe 主题：3D 下压改成金色描边 + 微光晕（深底上更"高级感"，不走 Duolingo 路线） */
html[data-theme="luxe"] .fcx-page .fcx-qz-opt,
html[data-theme="luxe"] .fcx-page .fcx-qz-cell,
html[data-theme="luxe"] .fcx-page .fcx-qz-btn {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
html[data-theme="luxe"] .fcx-page .fcx-qz-opt:hover:not(:disabled),
html[data-theme="luxe"] .fcx-page .fcx-qz-cell:hover:not(:disabled),
html[data-theme="luxe"] .fcx-page .fcx-qz-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(245,197,24,.45),
    0 0 18px -4px rgba(245,197,24,.28);
}
html[data-theme="luxe"] .fcx-page .fcx-qz-opt:active:not(:disabled),
html[data-theme="luxe"] .fcx-page .fcx-qz-cell:active:not(:disabled),
html[data-theme="luxe"] .fcx-page .fcx-qz-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 1px rgba(245,197,24,.65),
    0 0 8px -2px rgba(245,197,24,.35);
}
.fcx-qz-cell.is-sel {
  background: rgba(28,176,246,.16); color: var(--fcx-sky);
  box-shadow: inset 0 0 0 2px var(--fcx-sky);
}
html[data-theme="luxe"] .fcx-qz-cell.is-sel {
  background: rgba(245,197,24,.16); color: var(--fcx-mint);
  box-shadow: inset 0 0 0 2px var(--fcx-mint);
}
.fcx-qz-cell.is-done {
  background: rgba(88,204,2,.16); color: var(--fcx-mint-d);
  cursor: default; opacity: .7;
}
.fcx-qz-cell.is-bad { background: rgba(255,93,108,.16); color: var(--fcx-coral-d); }
.fcx-qz-cell.fcx-qz-shake { animation: fcxQzShake .4s ease; }
@keyframes fcxQzShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}
.fcx-qz-mstat {
  text-align: center; margin: 16px 0 0;
  font-family: var(--fcx-serif); font-size: 14px; font-weight: 600; color: var(--fcx-muted);
}
.fcx-qz-mstat strong { color: var(--fcx-mint-d); font-size: 17px; }

/* ═══ 8. 按钮：主操作 / 次操作 ═══ */
.fcx-qz-acts { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.fcx-qz-go {
  border: none; cursor: pointer; border-radius: 14px;
  background: var(--fcx-mint); color: #fff;
  font-family: var(--fcx-serif); font-size: 15px; font-weight: 600;
  padding: 13px 30px; box-shadow: 0 4px 0 var(--fcx-mint-d);
  transition: transform .12s, filter .12s;
}
html[data-theme="luxe"] .fcx-qz-go { color: #1a1610; }
.fcx-qz-go:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.fcx-qz-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--fcx-mint-d); }
.fcx-qz-go:disabled { opacity: .5; cursor: default; box-shadow: 0 1px 0 var(--fcx-mint-d); }
.fcx-qz-btn {
  border: none; cursor: pointer; border-radius: 14px;
  background: var(--fcx-soft); color: var(--fcx-muted);
  font-family: var(--fcx-serif); font-size: 14.5px; font-weight: 600;
  padding: 13px 22px; text-decoration: none; display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 0 0 var(--fcx-soft-d);
  transition: color .15s, transform .12s, box-shadow .12s;
}
.fcx-qz-btn:hover { color: var(--fcx-ink); transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--fcx-soft-d); }
.fcx-qz-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--fcx-soft-d); }

/* 题卡底部小贴士 */
.fcx-qz-tip {
  margin: 16px 0 0; font-size: 12.5px; font-weight: 700;
  color: var(--fcx-faint); text-align: center; line-height: 1.5;
}

/* ═══ 9. 结算卡 ═══ */
.fcx-qz-end { text-align: center; padding: 8px 0 12px; }
.fcx-qz-end-ic { display: flex; justify-content: center; margin-bottom: 12px; }
.fcx-qz-end-badge {
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(135deg, var(--fcx-mint) 0%, var(--fcx-mint-d) 100%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 0 0 var(--fcx-mint-d), 0 0 0 5px rgba(88,204,2,.12);
}
.fcx-qz-end-badge--red {
  background: linear-gradient(135deg, #f05050 0%, #c03030 100%);
  box-shadow: 0 6px 0 0 #992020, 0 0 0 5px rgba(240,80,80,.12);
}
html[data-theme="luxe"] .fcx-qz-end-badge { box-shadow: 0 6px 0 0 var(--fcx-mint-d), 0 0 0 5px rgba(245,197,24,.15); }
.fcx-qz-end-title {
  font-family: var(--fcx-serif); font-size: 28px; font-weight: 700;
  color: var(--fcx-ink); margin: 8px 0 16px;
}
.fcx-qz-end-stats {
  display: flex; gap: 0; justify-content: center;
  background: var(--fcx-soft); border-radius: 16px;
  padding: 14px 0; margin: 0 0 4px;
}
.fcx-qz-end-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0 20px;
}
.fcx-qz-end-stat + .fcx-qz-end-stat {
  border-left: 1.5px solid var(--fcx-line);
}
.fcx-qz-end-stat-n {
  font-family: var(--fcx-serif); font-size: 26px; font-weight: 800;
  color: var(--fcx-ink); line-height: 1;
}
.fcx-qz-end-stat-l {
  font-size: 11.5px; font-weight: 700; color: var(--fcx-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.fcx-qz-end-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ═══ 10. 答完的行内反馈（沿用 listen 的 feedback 皮） ═══ */
.fcx-qz-card .feedback { margin-top: 14px; border-radius: 13px; padding: 12px 15px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.fcx-qz-card .feedback.ok  { background: rgba(88,204,2,.13);  color: var(--fcx-mint-d); }
.fcx-qz-card .feedback.bad { background: rgba(255,93,108,.13); color: var(--fcx-coral-d); }

/* ═══ 11. 窄屏 ═══ */
@media (max-width: 760px) {
  .fcx-qz-card { padding: 26px 22px 24px; }
  .fcx-qz-opts { grid-template-columns: 1fr; }
  .fcx-qz-prompt { font-size: 19px; }
  .fcx-qz-score { display: none; }
}

/* ═══ 12. luxe 深色「质感」补丁（2026-05-22）═══
   修三个毛病：①题卡背景透明、黑摞黑看不出卡片 ②舞台内容顶在最上方、
   下面留一大片黑 ③卡片 / HUD / 选项糊成一个色、没层次。
   只在 luxe 主题的测验页生效，不碰卡通主题、不碰别的页。 */

/* 面板色整体提亮一档——深黑底上，卡片 / HUD / 选项才分得出前后层次 */
html[data-theme="luxe"] .fcx-page:has(.fcx-qz-stage) {
  --fcx-panel: #212123;   /* 卡片底 / HUD 底 / 选项字母标 */
  --fcx-soft:  #2e2e31;   /* 选项按钮 / 输入框 / 连连看格子 */
  --fcx-qz-crack: rgba(236,236,242,.72);   /* 深色底上裂纹要浅色才看得见 */
}

/* 题卡：补上一张真正的「面」。背景被别处刷成透明了，这里高优先级重铺，
   带 luxe 招牌的右下角淡金光晕 + 干净的浮起阴影 + 顶边一道接光高光。 */
html[data-theme="luxe"] .fcx-page .fcx-qz-card {
  background:
    radial-gradient(ellipse 58% 78% at 88% 86%, rgba(245,197,24,.07), transparent 62%),
    var(--fcx-panel) !important;
  box-shadow:
    0 22px 52px -20px rgba(0,0,0,.74),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* HUD：跟题卡同款浮起，两块才像一家人 */
html[data-theme="luxe"] .fcx-page .fcx-qz-hud {
  box-shadow:
    0 12px 30px -20px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* 选项 hover：除了上浮，再提亮一点，点上去更有实感 */
html[data-theme="luxe"] .fcx-page .fcx-qz-opt:hover:not(:disabled) {
  background: #38383c;
}

/* 舞台：在居中的题卡背后铺一层极淡暖光，把「空」变成「打了灯的留白」 */
html[data-theme="luxe"] .fcx-qz-stage {
  background: radial-gradient(ellipse 60% 54% at 50% 47%, rgba(245,197,24,.05), transparent 72%);
}