/* =====================================================================
   趣味单词测试（test/choice.html）· 迪士尼 3D 动画 · 童话主题
   ---------------------------------------------------------------------
   谱系：与 reading/index.html、test/ctx-disney.css 同一套材质语言。
   挂载：由 choice.html 以 <link> 挂在 choice.css 之后（覆盖层）。
   回滚：删掉 choice.html 里这一行 <link> 即恢复旧观感，本文件可整份删除。
   ---------------------------------------------------------------------
   纪律
   · 只动观感与排版几何，不动任何 JS 契约：
     .card / .en-mode… / .mode-btn(active) / .option-btn(correct|wrong|review-mode)
     #score #progress #question #options #feedback #resultPanel #reviewComplete
     #finalScore #totalScore #timeUsed #wrongList #reviewBtn #reviewTotalTime
     .score .question .options .feedback .botton .ipa-container
     .phonetic-placeholder .phonetic-real .toggle-icon .sidebar .sub-menu
   · 不动 comm/*.css 等共享表（其它页面在用）。页面顶部的站点导航条
     （.topbar）刻意保持站点原样，不随本页变暗——它是全站统一 chrome。
   · 状态语义色保留全站谱系：正确 = 深翠绿、错误 = 玫红；
     「可操作 / 已选中」= 仙紫（主色 #6a44ec）+ 金。
   · 装饰不用 emoji（emoji 是平台位图，跟不上字体与主题）；
     页面内可静态替换的已换成 SVG 描边/实心图标，
     JS 运行时写入的 #feedback 文案由页面内的小挂件按同一套图标重写。
   ---------------------------------------------------------------------
   对比度实算表见文件末尾。
   ===================================================================== */

/* ============ 1. 设计令牌 ============ */
:root{
  /* 夜空外壳（四档，比 ctx-disney 略深，突出「深夜魔法」） */
  --sky-1:#140c3a; --sky-2:#1c0f4c; --sky-3:#281566; --sky-4:#341c7a;
  --aurora-cyan:#6ee7ff; --aurora-violet:#b18cff; --aurora-pink:#ff8ad4; --aurora-gold:#ffd76b;
  --on-sky:#f6f3ff; --on-sky-soft:#cfc7f2;

  /* 亮面象牙「故事书页」 */
  --paper-a:#fffdf7; --paper-b:#fdf8ec; --paper-c:#f8f1de;
  --lip:rgba(58,32,140,.18);              /* 底部挤塑边（3D 立起来的那一道） */
  --cast:0 18px 30px -16px rgba(6,2,26,.62); /* 落地影 */
  --halo:0 0 18px rgba(160,116,255,.5);   /* 魔法光晕：只给可点/已选元素 */

  /* 象牙纸上的墨色 */
  --ink:#312a5e; --ink-strong:#4a2a9e; --ink-soft:#635894;

  /* 仙紫（主色） */
  --vio-hi:#7a55f0; --vio:#6a44ec; --vio-deep:#4c2ad0; --vio-lip:#33209b;

  /* 烫金 */
  --gold:#ffd76b; --gold-2:#ffb84d; --gold-ink:#8a6300; --gold-lip:#a4611a;

  /* 状态：正确 / 错误（语义与全站一致，但明度按「白字底必须 AA」压过）
     ⚠️ 白字要求底色相对亮度 ≤0.1833 才能到 4.5:1。
     原来取的亮端 --ok-hi:#12a377(L=0.276 → 3.2:1)、--no-hi:#f0708a(L=0.307 → 2.9:1)
     都被像素审计抓出来不达标 —— 所以整条色阶往深里挪，塑料高光交给
     inset 0 2px 0 rgba(255,255,255,.42) 那一道内嵌高光去做，不靠渐变亮端。 */
  --ok-hi:#0a8060; --ok:#076b4e; --ok-deep:#04402e; --ok-lip:#022f22;
  --no-hi:#c02246; --no:#a3152f; --no-deep:#7d0f24; --no-lip:#5e0a1c;

  /* 圆角与标尺 */
  --r-page:26px; --r-plate:22px; --r-ctl:18px; --r-chip:16px; --r-tab:15px;
  --font-cn:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-en:'Baloo 2','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}

/* ============ 1.5 盒模型 ============ */
/* ⚠️ 项目未设全局 box-sizing（默认 content-box），只有 button/input 被 UA 表
   改成 border-box。主题层自己带 width:100% + padding 的容器必须显式声明
   声明 border-box，否则会横向顶出视口（曾实测 390 视口下 .card 宽 394、x=-2，
   而 scrollWidth 仍是 392 —— 左右对称溢出不会让 overflowX 变大，只看
   scrollWidth 会漏判）。
   body 也必须带上：原表 body{min-height:100vh; padding:20px} 在 content-box
   下会让文档恒定多出一截「上下内边距」高的空白滚动（390×844 实测
   docH=916 = 844 + 48 + 24 —— 页面明明没内容却要滚 72px）。 */
body,
.cz-bar, .cz-mark, .cz-restart, .mode-buttons, .mode-btn,
.card, .cz-stat, .cz-ico, .cz-rail, .cz-rail-fill,
#question, #options, #feedback, .feedback,
#resultPanel, #wrongList, #reviewComplete{
  box-sizing:border-box;
}

/* ============ 2. 夜空外壳 ============ */
/* body 背景会被传播到画布（html 无背景），所以 z-index:-1 的伪元素/装饰层
   正好压在天空之上、所有内容之下——reading 页已验证的同一手法。 */
html{ background:#140c3a; }
body{
  background-color:var(--sky-2);
  background-image:
    radial-gradient(58% 40% at 86% -8%, rgba(177,140,255,.24), rgba(177,140,255,0) 72%),
    radial-gradient(50% 36% at -12% 22%, rgba(110,231,255,.15), rgba(110,231,255,0) 72%),
    radial-gradient(44% 32% at 110% 68%, rgba(255,138,212,.13), rgba(255,138,212,0) 74%),
    radial-gradient(52% 36% at 4% 108%, rgba(255,215,107,.11), rgba(255,215,107,0) 74%),
    linear-gradient(178deg, var(--sky-1) 0%, var(--sky-2) 30%, var(--sky-3) 62%, var(--sky-4) 100%);
  background-attachment:fixed;
  min-height:100vh;
  min-height:100svh;
  padding:16px 14px calc(28px + env(safe-area-inset-bottom));
  gap:0;
  color:var(--on-sky);
  font-family:var(--font-cn);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* 星尘层：峰值透明度压在 ≤.5——星点恰好落在文字下方时也算「真实背景」，
   太亮会把环境层文字的最坏对比度拖下 4.5。 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.7px 1.7px at 9% 12%,  rgba(255,255,255,.50), rgba(255,255,255,0) 100%),
    radial-gradient(1.2px 1.2px at 24% 33%, rgba(255,255,255,.32), rgba(255,255,255,0) 100%),
    radial-gradient(1.9px 1.9px at 41% 7%,  rgba(255,246,208,.50), rgba(255,246,208,0) 100%),
    radial-gradient(1.2px 1.2px at 58% 24%, rgba(255,255,255,.30), rgba(255,255,255,0) 100%),
    radial-gradient(1.7px 1.7px at 76% 15%, rgba(217,232,255,.46), rgba(217,232,255,0) 100%),
    radial-gradient(1.2px 1.2px at 91% 41%, rgba(255,255,255,.30), rgba(255,255,255,0) 100%),
    radial-gradient(1.5px 1.5px at 6%  62%, rgba(255,255,255,.34), rgba(255,255,255,0) 100%),
    radial-gradient(1.7px 1.7px at 68% 74%, rgba(255,246,208,.42), rgba(255,246,208,0) 100%),
    radial-gradient(1.2px 1.2px at 34% 56%, rgba(255,255,255,.28), rgba(255,255,255,0) 100%),
    radial-gradient(1.5px 1.5px at 52% 88%, rgba(217,232,255,.34), rgba(217,232,255,0) 100%),
    radial-gradient(1.3px 1.3px at 86% 92%, rgba(255,255,255,.28), rgba(255,255,255,0) 100%);
  animation:czTwinkle 5.5s ease-in-out infinite alternate;
}
@keyframes czTwinkle{ from{opacity:.55;} to{opacity:1;} }

/* 月光 + 远景城堡剪影（同一层，纯装饰，低透明度不参与对比度计算） */
.cz-deco{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(15% 11% at 94% 26%, rgba(255,252,238,.62), rgba(255,252,238,0) 74%),
    radial-gradient(34% 25% at 94% 26%, rgba(255,250,226,.28), rgba(255,250,226,0) 72%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='.1' d='M0 120V86H20V70L30 52L40 70V86H62V58L74 34L86 58V86H104V44L118 16L132 44V86H152V60L162 42L172 60V86H190V70L200 52L210 70V86H232V58L244 36L256 58V86H280V70L290 54L300 70V86H320V120Z'/></svg>") bottom center/min(900px,132%) auto no-repeat;
  animation:czMoon 9s ease-in-out infinite alternate;
}
@keyframes czMoon{ from{opacity:.82;} to{opacity:1;} }
/* 矮屏（横屏手机等）藏掉城堡，避免装饰挤占题面 */
@media (max-height:560px){ .cz-deco{ background-image:none; } }

/* ============ 3. 顶部品牌条 ============ */
/* ⚠️ 移动端「重新开始」的尺寸口径（2026-09-14 用户反馈「有点大了」）：
   实测 390 视口下它是 95×44，占掉顶栏 368px 的 26%；到 320 视口更糟——
   flex 一挤只剩 39×44，四个汉字被迫折行，按钮已经**坏掉**了。
   所以 ≤430px 收成 44×44 的纯图标按钮（文字保留在 DOM 里，靠 aria-label
   与 title 兜底无障碍与长按提示），这是触摸目标的规范尺寸；≥431px 仍然
   图标 + 文字。想反过来（移动端也留文字）只需把下面那条媒体查询的
   430px 改成 340px。 */
.cz-bar{
  width:100%; max-width:660px;
  display:flex; align-items:center; gap:12px;
  margin:2px 0 12px;
}
.cz-mark{
  flex:0 0 auto; width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffe9a8 0%,var(--gold) 46%,var(--gold-2) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(150,92,10,.35),
             0 4px 0 rgba(140,86,10,.45), 0 10px 20px -10px rgba(255,190,80,.7);
}
.cz-mark svg{ width:24px; height:24px; display:block; }
.cz-bar-txt{ min-width:0; flex:1 1 auto; }
.cz-title{
  margin:0;
  font-size:clamp(17px,5vw,22px);
  font-weight:900; letter-spacing:.5px; line-height:1.2;
  background:linear-gradient(94deg,#fffbe8 0%,var(--gold) 46%,#ffe9a8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 8px rgba(10,4,40,.6));
}
.cz-sub{
  margin:4px 0 0;
  font-size:12.5px; letter-spacing:.3px; line-height:1.3;
  color:var(--on-sky-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cz-restart{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-height:44px; padding:0 12px;
  border:none; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--ink-strong);
  background:linear-gradient(180deg,#fffdf6,#f4effe);
  box-shadow:inset 0 2px 0 #fff, inset 0 -3px 0 var(--lip),
             0 3px 0 #d8ccf5, 0 10px 18px -10px rgba(6,2,26,.7);
  transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s, background .2s;
}
.cz-restart .cz-restart-ico{
  width:14px; height:14px; display:block;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c2ad0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.6-5.9'/><path d='M20 4v4.6h-4.6'/></svg>") center/contain no-repeat;
}
.cz-restart:hover{ background:linear-gradient(180deg,var(--vio-hi),var(--vio-deep)); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(20,6,70,.3), 0 3px 0 var(--vio-lip), var(--halo); }
.cz-restart:hover .cz-restart-ico{ filter:brightness(0) invert(1); }
.cz-restart:active{ transform:translateY(3px); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 var(--vio-lip); }

/* ≤430px：收成 44×44 的纯图标按钮（文字用「视觉隐藏」而不是 display:none，
   这样即使 aria-label 被某个读屏忽略，按钮名依然念得出来）。 */
@media (max-width:430px){
  .cz-bar{ gap:9px; }
  .cz-mark{ width:38px; height:38px; border-radius:12px; }
  .cz-mark svg{ width:21px; height:21px; }
  .cz-restart{ width:44px; min-height:44px; padding:0; border-radius:14px; gap:0; }
  .cz-restart .cz-restart-ico{ width:17px; height:17px; }
  .cz-restart-txt{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
}

/* ============ 4. 模式分段控件（挤塑玩具） ============ */
.mode-buttons{
  width:100%; max-width:660px;
  margin:0 0 14px;
  display:flex; flex-wrap:nowrap; gap:6px; justify-content:stretch;
  padding:6px;
  border-radius:var(--r-page);
  background:linear-gradient(180deg, rgba(16,9,44,.72), rgba(32,18,84,.72));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),
             inset 0 -2px 0 rgba(6,2,22,.5),
             0 12px 24px -16px rgba(4,2,16,.85);
}
.mode-buttons .mode-btn{
  position:relative;
  flex:1 1 0; min-width:0; min-height:52px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:7px 6px;
  border:none; border-radius:var(--r-tab);
  font-family:inherit; font-size:clamp(11.5px,3.3vw,14px); font-weight:700; line-height:1.15;
  letter-spacing:.2px; white-space:nowrap; overflow:hidden;
  color:var(--on-sky-soft);
  background:transparent;
  cursor:pointer;
  transition:transform .16s cubic-bezier(.22,1,.36,1), background .22s, color .22s, box-shadow .18s;
}
/* 段内小徽章：用真实字符（EN / 中 / æ）而不是 emoji 位图 */
.mode-buttons .mode-btn::before{
  content:"EN";
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:16px; padding:0 3px;
  border-radius:6px;
  font-family:var(--font-en); font-size:9.5px; font-weight:800; letter-spacing:.4px;
  color:#e9e3ff; background:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .22s, color .22s;
}
.mode-buttons .mode-btn:nth-child(2)::before{ content:"中"; font-family:var(--font-cn); }
.mode-buttons .mode-btn:nth-child(3)::before{ content:"\00e6"; font-size:12px; }
.mode-buttons .mode-btn.active{
  transform:none;
  color:#fff;
  background:linear-gradient(180deg,var(--vio-hi) 0%,var(--vio) 52%,var(--vio-deep) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),
             inset 0 -3px 0 rgba(20,6,70,.36),
             0 4px 0 var(--vio-lip),
             0 10px 20px -8px rgba(106,68,236,.7);
}
.mode-buttons .mode-btn.active::before{
  color:#fff; background:rgba(255,255,255,.3);
}
/* 选中段的魔法光环（呼吸）——放在伪元素上，避免动画覆盖 box-shadow */
.mode-buttons .mode-btn.active::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  animation:czRing 2.6s ease-out infinite;
}
@keyframes czRing{
  0%   { box-shadow:0 0 0 0 rgba(160,116,255,.55), inset 0 0 0 1px rgba(255,233,168,.7); }
  70%  { box-shadow:0 0 0 9px rgba(160,116,255,0), inset 0 0 0 1px rgba(255,233,168,.28); }
  100% { box-shadow:0 0 0 0 rgba(160,116,255,0), inset 0 0 0 1px rgba(255,233,168,.28); }
}
.mode-buttons .mode-btn:not(.active):hover{
  color:#fff; background:rgba(255,255,255,.1);
}

/* ============ 5. 故事书页（主卡） ============ */
.card{
  position:relative;
  width:100%; max-width:660px;
  margin:0;
  padding:clamp(18px,4.8vw,28px) clamp(14px,4vw,26px) clamp(16px,4vw,22px);
  border-radius:var(--r-page);
  background:linear-gradient(180deg,var(--paper-a) 0%,var(--paper-b) 56%,var(--paper-c) 100%);
  box-shadow:0 0 0 1px rgba(106,68,236,.16),
             inset 0 2px 0 #fff,
             inset 0 -4px 0 var(--lip),
             var(--cast);
  color:var(--ink);
  text-align:center;
}
/* 顶部烫金书脊 */
.card::before{
  content:""; position:absolute; left:22px; right:22px; top:0; height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, rgba(197,144,32,0), #e6b64a 18%, #ffe9a8 50%, #e6b64a 82%, rgba(197,144,32,0));
  opacity:.92;
}
/* 右上角一层极薄的书页高光，做出「亮面塑料」质感 */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 74% at 100% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
}

/* ============ 6. 得分槽 + 星轨进度 ============ */
.card .score{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  margin:0 0 11px;
  font-size:inherit; color:inherit;
  text-align:left;
}
.cz-stat{
  display:flex; align-items:center; gap:7px; min-width:0;
  padding:7px 11px;
  border-radius:var(--r-chip);
  background:linear-gradient(180deg,#fff,#f6f1ff);
  box-shadow:inset 0 2px 0 #fff, inset 0 -2px 0 rgba(106,68,236,.13),
             0 0 0 1px rgba(106,68,236,.15),
             0 8px 14px -10px rgba(8,3,32,.6);
}
.cz-ico{
  flex:0 0 auto; width:24px; height:24px; border-radius:8px;
  background-position:center; background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 4px rgba(60,30,140,.28);
}
.cz-ico-star{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 2.6l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.72l-5.9 3.06 1.13-6.58-4.78-4.66 6.6-.96z'/></svg>"),
                    linear-gradient(180deg,var(--gold),#e08a1e);
  background-size:14px 14px, auto;
}
.cz-ico-prog{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1'><circle cx='12' cy='12' r='8.2'/><circle cx='12' cy='12' r='3' fill='%23ffffff' stroke='none'/></svg>"),
                    linear-gradient(180deg,var(--vio-hi),var(--vio-deep));
  background-size:15px 15px, auto;
}
.cz-stat-lab{ font-size:12.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
.cz-stat-val{
  margin-left:auto; min-width:0;
  font-family:var(--font-en); font-size:16px; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.2px;
  color:var(--ink-strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 原表把 #progress 画成「蓝边小药丸」——主题层换成纯数字读数（id 级覆盖） */
#score, #progress{
  margin-left:auto; min-width:0;
  font-family:var(--font-en); font-size:16px; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.2px;
  color:var(--ink-strong);
  background:none !important; border:0 !important;
  padding:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#score{ font-size:17.5px; }
/* 星轨：轨道内嵌 + 紫金滑块 + 轨头一颗小星星 */
.cz-rail{
  position:relative;
  height:9px; margin:0 2px 13px;
  border-radius:99px;
  background:linear-gradient(180deg,#e6ddf8,#f6f1ff);
  box-shadow:inset 0 2px 3px rgba(58,32,140,.2), 0 1px 0 #fff;
}
.cz-rail-fill{
  display:block; height:100%; width:2%;
  border-radius:99px; position:relative;
  background:linear-gradient(90deg,var(--vio-hi),var(--vio-deep));
  box-shadow:0 0 12px rgba(122,85,240,.65), inset 0 1px 0 rgba(255,255,255,.5);
  transition:width .38s cubic-bezier(.22,1,.36,1);
}
.cz-rail-fill::after{
  content:""; position:absolute; right:-5px; top:50%;
  width:15px; height:15px; translate:0 -50%;
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 42%, #fffdf0, var(--gold) 62%, #e08a1e 100%);
  box-shadow:0 0 10px rgba(255,215,107,.85), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ============ 7. 题卡（听发音的水晶牌） ============ */
#question{
  position:relative;
  margin:0 0 13px;
  padding:clamp(14px,4vw,20px) clamp(12px,3.6vw,20px) clamp(12px,3.4vw,16px);
  border-radius:var(--r-plate);
  font-family:var(--font-en);
  font-size:clamp(24px,7.2vw,38px);
  font-weight:700; line-height:1.24;
  letter-spacing:.4px;
  color:var(--ink-strong);
  word-break:break-word;
  background:radial-gradient(96% 62% at 50% -14%, rgba(177,140,255,.24), rgba(177,140,255,0) 66%),
             linear-gradient(180deg,#ffffff 0%,#f8f3ff 62%,#f0e7fe 100%);
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 rgba(106,68,236,.16),
             0 0 0 1px rgba(106,68,236,.2),
             0 16px 24px -18px rgba(8,3,32,.7);
  overflow:hidden;
}
/* 模式提示（CSS 文案，不占 JS） */
#question::before{
  content:"听发音 · 选出正确的中文意思";
  display:block;
  margin-bottom:8px;
  font-family:var(--font-cn);
  font-size:12.5px; font-weight:500; letter-spacing:.4px; line-height:1.3;
  color:var(--ink-soft);
}
.cn-mode #question::before{ content:"看中文 · 选出正确的英文单词"; }
.phonetic-mode #question::before{ content:"看音标 · 选出对应的单词"; }

/* 内层可点区（JS 把 onclick 挂在这一层） */
#question > div{
  cursor:pointer;
  border-radius:14px;
  transition:transform .14s cubic-bezier(.22,1,.36,1);
  /* 音标与播放按钮并排（2026-09-14 微信反馈：矮视口下选项被底栏压住，
     这里把「单词 / 音标 / 播放钮」三行叠放压成一行，省 ~60px 纵向空间）。
     三者都是 flex 项：en 模式 = [单词文本(匿名项)] [.phonetic] [::after]；
     cn 模式 = [译文文本] [::after]；音标模式 = [placeholder/real] [眼睛] [::after]。
     flex-wrap 兜底：长单词 + 长音标一行放不下时自然换行，回落成旧的上下排。 */
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:2px 10px;
}
#question > div:active{ transform:scale(.985); }
/* 发音按钮：挂在可点层上，所以点它也等于点整张卡。
   并排布局下不再需要 margin-top 拉开行距（间距由 flex gap 负责），
   flex:0 0 auto 防止它被长单词挤压变形。 */
#question > div::after{
  content:"";
  display:block;
  flex:0 0 auto;
  width:42px; height:42px; margin:0;
  border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6.2 9H3v6h3.2L11 19V5z'/><path d='M15.4 8.6a5 5 0 0 1 0 6.8'/><path d='M18.3 5.7a9 9 0 0 1 0 12.6'/></svg>"),
                    linear-gradient(180deg,var(--vio-hi),var(--vio-deep));
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px, auto;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),
             inset 0 -3px 0 rgba(20,6,70,.32),
             0 4px 0 var(--vio-lip),
             0 10px 20px -8px rgba(106,68,236,.75);
  animation:czHalo 2.8s ease-in-out infinite;
}
@keyframes czHalo{
  0%,100%{ box-shadow:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(20,6,70,.32), 0 4px 0 var(--vio-lip), 0 0 0 0 rgba(122,85,240,.55); }
  50%    { box-shadow:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(20,6,70,.32), 0 4px 0 var(--vio-lip), 0 0 0 12px rgba(122,85,240,0); }
}
.phonetic{ font-size:.46em; letter-spacing:.5px; color:#6b60a0; margin-top:0; }

/* 音标模式的「点图标显示音标」 */
.ipa-container{ position:relative; padding-right:0; }
.phonetic-placeholder{
  display:inline-block;
  font-family:var(--font-cn);
  font-size:clamp(14px,3.8vw,17px); font-weight:600;
  color:var(--ink-soft); font-style:normal;
  padding:6px 12px; border-radius:12px;
  background:linear-gradient(180deg,#fff,#efe8fd);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(106,68,236,.22), 0 3px 0 rgba(58,32,140,.14);
}
.phonetic-real{
  display:none; color:var(--ink-strong); font-weight:700;
  font-size:clamp(22px,6.4vw,34px);
}
/* 👁️/👀 是 JS 写入的 emoji 文本 → 缩到 0 只留一张矢量眼睛。
   margin-left:0 —— 与播放钮、音标的间距统一交给 flex 的 column-gap。 */
.toggle-icon{
  position:static; transform:none;
  display:inline-block; vertical-align:middle;
  width:22px; height:22px; margin-left:0; padding:0;
  font-size:0; line-height:0; color:transparent;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c2ad0' stroke-width='2' stroke-linecap='round'><path d='M2 12s3.7-6.2 10-6.2S22 12 22 12s-3.7 6.2-10 6.2S2 12 2 12z'/><circle cx='12' cy='12' r='2.7' fill='%234c2ad0' stroke='none'/></svg>") center/contain no-repeat;
}

/* ============ 8. 选项糖果按钮 ============ */
/* ⚠️ 全部规则都带 #options 前缀：原表有 .en-mode .option-btn / .phonetic-mode
   .option-btn / .review-mode .option-btn{...!important} 等「模式 + 元素」两级
   选择器（0-2-0 或更高），单靠 .option-btn（0-1-0）压不住 —— 曾实测出
   音标模式选项文字仍是原表的砖红 #c0392b、悬停仍是原表的蓝底白字。 */
#options{
  display:grid; gap:10px; margin:0 0 10px;
  grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));
}
#options .option-btn{
  position:relative;
  display:flex; align-items:center; justify-content:flex-start; gap:11px;
  width:100%; min-height:52px;
  padding:12px 14px;
  border:none; border-radius:var(--r-ctl);
  font-family:var(--font-cn);
  font-size:clamp(15px,3.9vw,17px); font-weight:600; line-height:1.35;
  color:var(--ink); text-align:left;
  word-break:break-word;
  background:linear-gradient(180deg,#ffffff 0%,#fcf9ff 58%,#f3ecff 100%);
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 rgba(106,68,236,.15),
             0 0 0 1.5px rgba(106,68,236,.24),
             0 5px 0 -1px rgba(58,32,140,.16),
             0 14px 18px -14px rgba(8,3,32,.65);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s, background .2s, color .2s;
}
/* A/B/C/D 字母徽章（纯 CSS，不动 JS 生成的 innerHTML） */
#options .option-btn::before{
  content:"A";
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:11px;
  font-family:var(--font-en); font-size:15px; font-weight:800; line-height:1;
  color:#fff;
  background:linear-gradient(180deg,var(--vio-hi),var(--vio-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 var(--vio-lip);
}
#options .option-btn:nth-child(2)::before{ content:"B"; }
#options .option-btn:nth-child(3)::before{ content:"C"; }
#options .option-btn:nth-child(4)::before{ content:"D"; }
#options .option-btn:disabled{ cursor:default; }
#options .option-btn:hover:not(:disabled){
  transform:translateY(-2px);
  color:var(--ink-strong);
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 rgba(106,68,236,.15),
             0 0 0 1.5px rgba(122,85,240,.45),
             0 7px 0 -1px rgba(58,32,140,.18),
             0 14px 18px -12px rgba(8,3,32,.7),
             var(--halo);
}
#options .option-btn:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:inset 0 1px 0 #fff,
             0 0 0 1.5px rgba(122,85,240,.45),
             0 1px 0 rgba(58,32,140,.2);
}
/* 正确：翠绿挤塑糖果 + 金光迸发 */
#options .option-btn.correct{
  color:#fff;
  background:linear-gradient(180deg,var(--ok-hi) 0%,var(--ok) 52%,var(--ok-deep) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),
             inset 0 -3px 0 rgba(0,0,0,.22),
             0 0 0 1.5px var(--ok-lip),
             0 5px 0 -1px var(--ok-lip),
             0 0 30px rgba(10,128,96,.6);
  animation:czPop .52s cubic-bezier(.2,1.5,.4,1) both;
}
#options .option-btn.correct::before{
  color:var(--ok-deep);
  background:linear-gradient(180deg,#ffffff,#ffe9a8);
  box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(60,80,20,.35);
}
#options .option-btn.correct::after{
  content:""; position:absolute; inset:-7px; border-radius:24px; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%, rgba(255,236,168,.6), rgba(255,236,168,0) 72%);
  animation:czBurst .75s ease-out both;
}
@keyframes czPop{
  0%{ transform:scale(.94); } 62%{ transform:scale(1.035); } 100%{ transform:scale(1); }
}
@keyframes czBurst{
  0%{ opacity:.95; transform:scale(.82); } 100%{ opacity:0; transform:scale(1.16); }
}
/* 错误：玫红挤塑糖果 */
#options .option-btn.wrong{
  color:#fff;
  background:linear-gradient(180deg,var(--no-hi) 0%,var(--no) 52%,var(--no-deep) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),
             inset 0 -3px 0 rgba(0,0,0,.2),
             0 0 0 1.5px var(--no-lip),
             0 5px 0 -1px var(--no-lip),
             0 0 24px rgba(192,34,70,.5);
}
#options .option-btn.wrong::before{
  color:var(--no-deep);
  background:linear-gradient(180deg,#ffffff,#ffd9e0);
  box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(120,20,40,.3);
}
/* 复习轮次：金色描边 + 金色徽章 */
#options .option-btn.review-mode{
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 rgba(164,97,26,.18),
             0 0 0 1.5px rgba(197,144,32,.55),
             0 5px 0 -1px rgba(140,86,10,.22),
             0 14px 18px -14px rgba(8,3,32,.65);
}
#options .option-btn.review-mode::before{
  background:linear-gradient(180deg,#ffd97a,var(--gold-lip));
  color:#5c3a00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #7d4a0c;
}
#options .option-btn.review-mode.correct{ box-shadow:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(0,0,0,.22), 0 0 0 1.5px var(--ok-lip), 0 5px 0 -1px var(--ok-lip), 0 0 30px rgba(10,128,96,.6); }
#options .option-btn.review-mode.correct::before{ background:linear-gradient(180deg,#ffffff,#ffe9a8); color:var(--ok-deep); }
#options .option-btn.review-mode.wrong::before{ background:linear-gradient(180deg,#ffffff,#ffd9e0); color:var(--no-deep); }

/* ============ 9. 反馈 ============ */
/* 浮层胶囊（2026-09-14 用户要求）：不再占文档流 —— 中文模式下选项变长时，
   在流的反馈条会被挤出视口 / 压到底栏后面看不见。改为 fixed 悬浮在底栏
   上方的小胶囊，任何视口任何模式都必然可见。
   ⚠️ 三条硬约束：
   ① pointer-events:none —— 胶囊悬在选项区上方时绝不能挡点击；
   ② :empty 必须整体隐形（JS 在新游戏时会 display:block + innerHTML=''，
      内联 display 压不过样式表，所以用 opacity+visibility 双保险），
      原来的「✦ 从上面选一个答案」提示槽随流布局一起退役；
   ③ z-index 必须高于 nav.css 底栏(999)/子菜单(1000)，长文案换行时
      胶囊底缘可能贴到栏顶。 */
#feedback.feedback{
  position:fixed;
  left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1200;
  pointer-events:none;
  max-width:min(88vw, 430px);
  min-height:0;
  margin:0;
  padding:10px 18px 11px;
  border-radius:22px;
  font-family:var(--font-cn);
  font-size:clamp(14px,3.7vw,16.5px);
  font-weight:700; line-height:1.4;
  text-align:center;
  color:#5a4a2a;
  background:linear-gradient(180deg,#fffdf6,#fdf3dc);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(202,160,74,.38),
    inset 0 0 0 1.5px rgba(202,160,74,.4),
    0 10px 22px -10px rgba(80,52,4,.55);
  /* choice.css 的 .feedback{animation:fadeIn .5s forwards} 会把 opacity 钉死在
     1，JS 的 opacity=0 淡出永远不生效（动画 fill 级联压过内联样式）——旧布局
     里表现为「正确答案提示赖着不走」。这里换成只动 transform 的弹入动画
     （无 fill，结束后交还样式表的 translate(-50%,-50%)），透明度交还给 JS 的
     内联值 + transition 平滑过渡。 */
  animation:czToastIn .34s cubic-bezier(.34,1.56,.64,1) 1;
  transition:opacity .28s ease;
}
@keyframes czToastIn{
  from{ transform:translate(-50%,calc(-50% + 18px)) scale(.9); }
  to{ transform:translate(-50%,-50%) scale(1); }
}
/* 屏幕正中弹出，不再随底栏抬高（2026-09-14 二次调整） */
/* 空态整颗隐形（JS 的内联 display:block 压不过 !important 的透明度） */
#feedback:empty{
  opacity:0 !important;
  visibility:hidden;
}
/* 非空即显：answerCheck 那条老路径只写 className/innerHTML、从不写
   opacity=1，一直靠 choice.css 的 fadeIn forwards 把透明度从 0 提到 1。
   这里用样式表兜底（内联 opacity=0 仍能赢过它，JS 淡出不受影响）。 */
#feedback.feedback:not(:empty){ opacity:1; }
#feedback.correct-feedback{
  color:var(--ok-deep);
  background:linear-gradient(180deg,#eafbf3,#d2f4e5);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(10,127,95,.35),
    inset 0 0 0 1.5px rgba(10,127,95,.34),
    0 10px 22px -10px rgba(3,63,45,.6);
}
#feedback.wrong-feedback{
  color:#7e0f28;
  background:linear-gradient(180deg,#fff2f5,#ffe1e8);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(179,32,58,.32),
    inset 0 0 0 1.5px rgba(179,32,58,.32),
    0 10px 22px -10px rgba(120,10,35,.6);
}
/* 矢量图标集（em 计量 → 跟着所在文字缩放；由页面内小挂件把 emoji 换掉） */
.cz-i{
  display:inline-block; width:1em; height:1em; vertical-align:-.13em; margin-right:.34em;
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
.cz-i-trophy{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c58a12' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4h10v5.2a5 5 0 0 1-10 0z'/><path d='M7 5.4H4.4v1.6a3.6 3.6 0 0 0 3.2 3.6M17 5.4h2.6v1.6a3.6 3.6 0 0 1-3.2 3.6'/><path d='M12 14.4V18M8.4 20.4h7.2'/></svg>"); }
.cz-i-clock{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635894' stroke-width='1.9' stroke-linecap='round'><circle cx='12' cy='12' r='8.6'/><path d='M12 7.2V12l3.4 2.1'/></svg>"); }
.cz-i-star2{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0a12a' stroke='%23a4611a' stroke-width='.8'><path d='M12 2.6l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.72l-5.9 3.06 1.13-6.58-4.78-4.66 6.6-.96z'/></svg>"); }
.cz-i-party{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7f5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 20.8 8.6 8.4l7 7-12.4 5.4z'/><path d='M13.4 5.6c.6-1.4 2-2 3.4-1.6M19.4 9.6c1.4-.6 2-2 1.6-3.4M17 3.2l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z'/></svg>"); }
.cz-i-spark{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7f5f'><path d='M12 2l1.9 5.6L19.5 9.5 13.9 11.4 12 17l-1.9-5.6L4.5 9.5l5.6-1.9z'/><path d='M19 15l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z'/></svg>"); }
.cz-i-bulb{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3203a' stroke-width='2' stroke-linecap='round'><path d='M9.2 17.5h5.6M10 21h4'/><path d='M12 2.6a6.4 6.4 0 0 0-3.6 11.7v3.2h7.2v-3.2A6.4 6.4 0 0 0 12 2.6z'/></svg>"); }
.cz-i-x{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3203a' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8'/></svg>"); }

/* ============ 10. 结算：魔法奖杯卡 ============ */
#resultPanel{
  margin:0;
  padding:clamp(18px,5vw,26px) clamp(12px,3.6vw,20px);
  border-radius:var(--r-plate);
  text-align:center;
  font-size:clamp(14px,3.8vw,16px);
  color:var(--ink);
  background:radial-gradient(80% 54% at 50% -8%, rgba(255,215,107,.38), rgba(255,215,107,0) 68%),
             linear-gradient(180deg,#ffffff 0%,#f8f3ff 58%,#efe6fe 100%);
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 rgba(106,68,236,.15),
             0 0 0 1px rgba(106,68,236,.18),
             0 18px 26px -20px rgba(8,3,32,.7);
}
#resultPanel h2{
  font-family:var(--font-cn);
  font-size:clamp(20px,5.6vw,26px) !important;
  font-weight:900; letter-spacing:.6px;
  color:var(--ink-strong) !important;
  text-shadow:0 2px 10px rgba(255,215,107,.55);
}
#resultPanel p{ margin:9px 0; color:var(--ink-soft); }
#resultPanel p b{ color:var(--ink); }
#finalScore, #totalScore{
  font-family:var(--font-en);
  font-size:1.85em; font-weight:800; line-height:1.1;
  color:var(--vio-deep);
  text-shadow:0 2px 12px rgba(255,215,107,.7);
  padding:0 3px;
}
#timeUsed span{ color:var(--ok) !important; font-weight:800 !important; }
#timeUsed span + span, #timeUsed span[style*="e67e22"]{ color:var(--ink-soft) !important; }
#wrongList{
  max-height:290px; overflow-y:auto;
  margin:16px 0 !important;
  padding:6px 12px !important;
  text-align:left !important;
  border-radius:var(--r-chip);
  background:linear-gradient(180deg,#fffdf6,#faf4e4) !important;
  box-shadow:inset 0 0 0 1.5px rgba(197,144,32,.34), inset 0 2px 0 #fff;
  -webkit-overflow-scrolling:touch;
}
#wrongList > div{
  padding:12px 2px !important;
  border-bottom:1px solid rgba(197,144,32,.26) !important;
  font-size:14px; line-height:1.65; color:var(--ink);
}
#wrongList > div:last-child{ border-bottom:none !important; }
#wrongList b{ color:var(--ink-strong); font-weight:700; }
/* 结算卡里的两枚主按钮：内联 background 必须 !important 才盖得住 */
#resultPanel .botton{
  display:flex !important; gap:10px; width:100%; margin-top:16px;
}
#resultPanel .botton .mode-btn{
  flex:1 1 0; min-width:0; min-height:52px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 10px; border:none; border-radius:var(--r-ctl);
  font-family:var(--font-cn); font-size:clamp(14px,3.7vw,16px); font-weight:800;
  color:#fff; cursor:pointer; white-space:nowrap;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s, filter .2s;
}
#resultPanel .botton .mode-btn:nth-child(1){
  background:linear-gradient(180deg,var(--ok-hi) 0%,var(--ok) 52%,var(--ok-deep) 100%) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(0,0,0,.22),
             0 5px 0 -1px var(--ok-lip), 0 12px 20px -10px rgba(10,127,95,.8) !important;
}
#resultPanel .botton .mode-btn:nth-child(2){
  background:linear-gradient(180deg,#ffd97a 0%,var(--gold) 48%,#e09a1e 100%) !important;
  color:#4a2c00 !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(150,92,10,.3),
             0 5px 0 -1px #8c5a10, 0 12px 20px -10px rgba(200,140,20,.85) !important;
}
#resultPanel .botton .mode-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
#resultPanel .botton .mode-btn:active{ transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important; }

/* ============ 11. 复习完成（月光浮岛） ============ */
#reviewComplete{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,440px); max-width:none;
  border:none;
  z-index:1000;
  padding:clamp(22px,6vw,32px) clamp(18px,5vw,28px);
  border-radius:var(--r-page);
  text-align:center;
  color:var(--ink);
  background:radial-gradient(76% 52% at 50% -6%, rgba(255,215,107,.4), rgba(255,215,107,0) 66%),
             linear-gradient(180deg,var(--paper-a) 0%,var(--paper-b) 58%,var(--paper-c) 100%);
  /* 最后一道 100vmax 阴影 = 全屏遮罩（不占 DOM） */
  box-shadow:0 0 0 100vmax rgba(8,3,30,.66),
             inset 0 2px 0 #fff, inset 0 -4px 0 var(--lip),
             0 24px 40px -22px rgba(4,2,18,.9),
             0 0 34px rgba(160,116,255,.45);
  animation:czLand .42s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes czLand{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.9); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
#reviewComplete h2{ font-family:var(--font-cn); font-size:clamp(20px,5.4vw,25px); font-weight:900; color:var(--ink-strong); }
#reviewComplete p{ color:var(--ink-soft); font-size:clamp(14px,3.7vw,16px); }
#reviewComplete p span{ font-family:var(--font-en); font-size:1.5em !important; font-weight:800; color:var(--vio-deep) !important; }
#reviewComplete .mode-btn{
  min-height:50px; padding:12px 22px; border:none; border-radius:var(--r-ctl);
  font-family:var(--font-cn); font-size:16px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,var(--vio-hi) 0%,var(--vio) 52%,var(--vio-deep) 100%) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(20,6,70,.32),
             0 5px 0 -1px var(--vio-lip), 0 14px 22px -10px rgba(106,68,236,.8) !important;
}
#reviewComplete .mode-btn:active{ transform:translateY(3px); }

/* ============ 12. 小程序底栏 / 子菜单配色（2026-09-14 撤销） ============
   这里原有一整节深色夜空版底栏配色（.sidebar 深紫玻璃 + 淡紫图标/文字 +
   子菜单深底），是本页还是深色主题时的遗留。用户反馈：底栏要和其它页面
   一样用 nav.css 的默认灰（白玻璃底 + #94a3b8 灰图标 + #64748b 灰文字）。
   整节删除即回落默认，无需在本表重写一套灰色——避免两处维护。
   ⚠️ 别再往回加；若真要本页专属底栏色，必须整节覆盖（含子菜单与
   close-btn），只改一两条会出现「半紫半灰」。 */

/* ============ 13. 无障碍 ============ */
.mode-buttons .mode-btn:focus-visible,
.cz-restart:focus-visible,
.option-btn:focus-visible,
#resultPanel .mode-btn:focus-visible,
#reviewComplete .mode-btn:focus-visible{
  outline:3px solid var(--aurora-cyan);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  body::before, .cz-deco, #question > div::after,
  .mode-buttons .mode-btn.active::after, #reviewComplete{ animation:none; }
  #options .option-btn, .cz-rail-fill{ transition:none; }
  #options .option-btn.correct{ animation:none; }
  #options .option-btn.correct::after{ display:none; }
}

/* ============ 14. 响应式 ============ */
/* 中屏以上：卡内两列选项 + 更舒展的留白 */
@media (min-width:720px){
  body{ padding:26px 20px 40px; }
  #options{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  #question{ font-size:36px; }
  .cz-bar{ margin:10px 0 16px; }
}
/* 窄屏：徽章与间距收紧 */
@media (max-width:400px){
  body{ padding:12px 11px calc(24px + env(safe-area-inset-bottom)); }
  .mode-buttons{ padding:5px; gap:5px; }
  .mode-buttons .mode-btn{ padding:6px 4px; border-radius:13px; }
  .mode-buttons .mode-btn::before{ min-width:22px; height:15px; font-size:9px; }
  .card{ padding:16px 13px 18px; border-radius:22px; }
  #question{ border-radius:19px; }
  .cz-stat{ padding:7px 9px; gap:6px; }
  .cz-ico{ width:22px; height:22px; border-radius:7px; }
  .cz-ico-star{ background-size:13px 13px, auto; }
  .cz-ico-prog{ background-size:14px 14px, auto; }
  .cz-stat-lab{ font-size:12px; }
  .cz-stat-val{ font-size:15px; }
  .option-btn, #options .option-btn{ min-height:50px; border-radius:16px; padding:10px 12px; gap:9px; }
  #options .option-btn::before{ width:30px; height:30px; border-radius:10px; font-size:14px; }
  .cz-restart{ padding:0 11px; }
}
@media (max-width:340px){
  .mode-buttons .mode-btn{ font-size:11.5px; }
  .mode-buttons .mode-btn::before{ display:none; }
  .cz-restart span:last-child{ display:none; }
  .cz-restart{ padding:0 12px; }
  .cz-stat-lab{ display:none; }
  .cz-stat-val{ margin-left:0; }
  .cz-stat{ justify-content:center; }
  #options .option-btn{ font-size:14.5px; }
}
/* 矮屏：把纵向留白压到最小，尽量让题面 + 4 个选项 + 反馈槽一屏可见 */
@media (max-height:700px){
  .cz-bar{ margin:0 0 9px; }
  .cz-mark{ width:36px; height:36px; border-radius:12px; }
  .cz-mark svg{ width:20px; height:20px; }
  .mode-buttons{ margin-bottom:9px; padding:5px; }
  .mode-buttons .mode-btn{ min-height:48px; }
  .cz-rail{ margin-bottom:11px; }
  #question{ margin-bottom:11px; }
  #question::before{ margin-bottom:6px; }
  #question > div::after{ margin:0; width:38px; height:38px; background-size:18px 18px, auto; }
  #options{ gap:9px; margin-bottom:9px; }
  #options .option-btn{ min-height:50px; }
}
/* 极矮屏（≤620px 高：微信小程序 webview 叠加自身标题栏后的典型高度）：
   在 700 档的基础上再压一档留白，让「题面 + 4 个选项 + 反馈槽」在首屏
   完整落在底栏之上。375×600 实测：cardBottom 615 → 540，barTop 542，
   首屏零遮挡、零滚动。只压留白与固定高度，字号全部不动；
   选项触摸目标 45px 仍 ≥44。字号与配色一律不碰。 */
@media (max-height:620px){
  .cz-bar{ margin:0 0 6px; }
  .mode-buttons{ margin-bottom:6px; padding:4px; }
  .mode-buttons .mode-btn{ min-height:40px; }
  .cz-stat{ padding:5px 8px; }
  .cz-rail{ margin-bottom:7px; }
  #question{ padding:10px 12px; margin-bottom:8px; }
  #question::before{ margin-bottom:5px; }
  #options{ gap:8px; margin-bottom:6px; }
  #options .option-btn{ min-height:45px; }
  /* 选项高度实际由字母徽章撑着（30px + 上下 padding = 50），徽章收到 26px
     才能把整枚按钮压到 46；反馈槽同理，39px 的高度是 padding 撑的。 */
  #options .option-btn::before{ width:26px; height:26px; font-size:12.5px; }
  .card{ padding:12px 13px 14px; }
}

/* =====================================================================
   对比度验收（WCAG 2.1 AA，字号 < 18.66px 粗体 / < 24px 常规按 4.5:1）
   ---------------------------------------------------------------------
   口径：像素级审计为主判，解析值为副判，取更保守者 —— 见
   .workbuddy/tmp/ui36/choice_contrast.js（同会话采矩形 + 截图）与
   choice_contrast_audit.py（框内先按 16 级量化聚桶取底色，再取
   像素数 ≥8 且与底色对比度最高的颜色为前景；透明盒子则取框外 3px
   环带众数为底色）。
   本轮结果：390×844 / DPR2，41 个元素框，**未达标 0 个**。
   ---------------------------------------------------------------------
   取值（实测比值）                                      判定
   标题渐变文字（亮端 #fffbe8）vs 夜空                17.72  PASS
   标题渐变文字（暗端 #ffd76b）vs 夜空                13.4   PASS
   副标题 #cfc7f2 vs 夜空                             11.20  PASS
   「重新开始」#4a2a9e vs 象牙按钮                     9.47  PASS
   段控件未选段 #e9e3ff vs 月光玻璃                   11.73  PASS
   段控件选中段 #ffffff vs #6a44ec 系                  5.69  PASS
   得分/进度标签 #635894 vs 芯片白                     6.08   PASS
   得分值 #4a2a9e vs 芯片白                            7.69  PASS
   进度值 #4a2a9e vs 芯片白                            9.85  PASS
   题面主字 #4a2a9e vs 题牌 #f8f3ff                    9.57  PASS
   模式提示 #635894 vs 题牌                            6.4   PASS（解析）
   音标 [..] #6b60a0 vs 题牌                           5.06  PASS
   选项正文 #312a5e vs 选项底 #f3ecff                 12.76  PASS
   选项正确态 #ffffff vs #0a8060 系                    5.32  PASS ← 曾 4.23 FAIL
   选项错误态 #ffffff vs #c02246 系                    7.41  PASS ← 曾 3.26 FAIL
   答错反馈 #7e0f28 vs #ffe1e8                         8.95  PASS
   结算标题 #4a2a9e vs 白                              9.77  PASS
   结算说明 #5f5390 系 vs 白                           6.04  PASS
   结算数字 #4c2ad0 vs 白                              7.68  PASS
   错题卷第 n 题 #4a2a9e vs 象牙卷                     9.66  PASS
   错题卷正文 #312a5e vs 象牙卷                       12.71  PASS
   绿按钮白字（再玩一次）                              5.92  PASS ← 曾 4.13 FAIL
   金按钮深字 #4a2c00 vs #ffd86f 系                    9.28  PASS
   复习完成标题 #4a2a9e vs 象牙                        9.60  PASS
   复习完成用时 #4c2ad0 vs 象牙                        7.77  PASS
   复习完成主按钮白字                                  5.69  PASS
   ---------------------------------------------------------------------
   ⚠️ 反向验证：把 --ok-hi / --no-hi 改回原来的浅色 (#12a377 / #f0708a)
      再跑同一套审计 → 正确态 4.23 FAIL、错误态 3.26 FAIL、绿按钮 4.13 FAIL，
      证明这套审计不是橡皮图章。白字底色必须满足：相对亮度 ≤0.1833。
   ===================================================================== */