/* ==========================================================================
   音标-字母组合「拼读展开」—— 课堂页 + 课程编辑器预览**共用**的一份视图
   --------------------------------------------------------------------------
   为什么单独一个文件：投影上看到的和编辑器里预览的必须是同一个东西，
   分成两份写迟早跑偏。改这里，两边一起变。

   尺寸怎么来的：
     --u   = 容器高度的 1%（PhoView.fit() 量的）→ 舞台放大缩小、小预览，比例一致
     --k   = 自动适配倍率（PhoView.autofit() 量的）
             **内容少 → k 变大（字母/音标更大更醒目）；内容多 → k 变小（一屏放得下）**
     --k2  = sqrt(k)，给间距/内边距/按钮用（不然 k 大时空隙会夸张地大）

   颜色怎么来的（2026-10-09 接入课堂主题）：
     全部走 `var(--phv-xxx, 兜底值)` / `var(--wb-xxx, 兜底值)`。
     兜底值 = 原来那套浅色，所以**没接入主题的地方（编辑器预览等）样子一点没变**；
     课堂页按主题给了深色版本，深色主题下自动换过去。
     ⛔ 别在这里硬写颜色，要改去 `xy_theme.css`。

   【2026-10-09 老师要求】
     · 音标（上排白药丸）**不加粗**、用 Arial；字母组合（下排蓝药丸）**加粗加大**。
     · 面板（背景层）拉到画面 80% 宽，字母和音标自适应大小，最清晰最显眼。
     · 删掉底部「左键 / 右键」提示 —— 这是投给学生看的，不能放操作提示。
     · 点音素卡**不再**播讲解音频，只有点卡片左上角的 ▶ 图标才播。
   ========================================================================== */

.phv{position:absolute;inset:0;
  background:var(--phv-bg,radial-gradient(120% 105% at 50% 0,#FFFFFF 0%,#F4F9FE 58%,#E8F1FA 100%));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--u) * 1.6) 0;   /* 水平不留边：面板 80% 就是**画面**的 80% */
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color:var(--phv-ink,#0D263B);overflow:hidden}

/* ---------- 音素卡面板（背景层：画面 80% 宽，内容自适应） ---------- */
.phv-panel{box-sizing:border-box;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:calc(var(--u) * 1.6 * var(--k2,1)) calc(var(--u) * 2.2 * var(--k2,1));
  /* 面板压一层淡色（照参考实现 #f2f7fd）：白药丸才有"浮起来"的感觉。
     三层对比刚好拉开：面板(最淡) < 字母药丸(中间) < 音标白药丸(最亮) */
  background:var(--phv-panel-bg,linear-gradient(180deg,rgba(246,250,255,.96),rgba(232,241,251,.96)));
  border:1px solid var(--phv-panel-line,rgba(255,255,255,.95));
  border-radius:calc(var(--u) * 2.8);
  padding:calc(var(--u) * 2.6 * var(--k2,1)) calc(var(--u) * 3);
  box-shadow:0 calc(var(--u) * 1.2) calc(var(--u) * 3.2) rgba(13,38,59,.07);
  width:80%;max-width:80%;max-height:88%;overflow:hidden}
/* 【2026-10-09 老师要求】音标/字母组合**太多时自动缩小、挤成一行**。
   PhoView.autofit() 会先挂这个类再二分找倍率 —— 能一行就一行；
   极长的词连最小档都放不下时它会自己摘掉这个类退回折行（不裁字）。 */
.phv-panel.one-row, .xrc-panel.one-row{flex-wrap:nowrap}
/* 【2026-10-09 重新设计，照参考实现 /phonics 的比例】
   上一版我用「音标=400 细 / 字母=900 超粗」硬拉对比，老师看了说不好看 —— 确实，
   一个字重极轻、一个字重极重，像两种字体拼在一起，页面很躁。
   参考实现的做法是：**两个都用 700**，靠
     · 字号（音标 44px : 字母 36px ≈ 1.22）
     · 颜色（音标深墨蓝 : 字母中蓝，底白 : 底浅蓝）
   来分层。这样对比是"柔"的，但主次一眼分得出，而且很干净。
   ⛔ 尺寸比例别再乱改：音标 7.2 : 字母 5.9（≈1.22），改比值就毁掉层次。 */
.phv-item{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--u) * 1.35 * var(--k2,1));cursor:pointer;flex:0 0 auto;
  padding-top:calc(var(--u) * 1.5 * var(--k2,1))}

/* 音标：**始终是最亮的一层**（近白药丸 + 深字），所有主题下都不变 ——
   它是这一页最重要的信息，投影上必须最跳。⛔ 别改成深底浅字。 */
.phv-sym{font-family:Arial,Helvetica,"Arial Unicode MS",sans-serif;
  font-weight:700;font-size:calc(var(--u) * 9.2 * var(--k,1));line-height:1.18;
  color:var(--phv-sym-fg,#0D263B);background:var(--phv-sym-bg,#fff);
  border:1.5px solid var(--phv-sym-line,#DFEAF6);
  border-radius:999px;
  padding:calc(var(--u) * .5 * var(--k2,1)) calc(var(--u) * 2.4 * var(--k2,1));
  min-width:calc(var(--u) * 9.4 * var(--k,1));text-align:center;
  letter-spacing:0;
  box-shadow:0 calc(var(--u) * 1) calc(var(--u) * 2.6) rgba(13,38,59,.12);
  transition:transform .14s,background .14s,box-shadow .14s}
.phv-item:hover .phv-sym{transform:translateY(calc(var(--u) * -.5)) scale(1.04);
  background:var(--phv-sym-hi,#DCE9F8);
  box-shadow:0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(13,38,59,.16)}

/* 字母组合：中间那层药丸，字号比音标小一档 —— 从属关系清楚但不刺眼 */
.phv-let{font-family:Arial,Helvetica,sans-serif;font-weight:700;
  font-size:calc(var(--u) * 7.4 * var(--k,1));line-height:1.2;
  color:var(--phv-let-fg,#1F4B6E);
  background:var(--phv-let-bg,#E3EDF7);border-radius:999px;
  padding:calc(var(--u) * .45 * var(--k2,1)) calc(var(--u) * 2.4 * var(--k2,1));
  min-width:calc(var(--u) * 9.4 * var(--k,1));text-align:center;
  transition:transform .14s,background .14s}
.phv-item:hover .phv-let{transform:translateY(calc(var(--u) * -.5)) scale(1.04);
  background:var(--phv-let-hi,#D4E2F0)}

/* 重音：主重音红、次重音橙（参考实现就是这样，一眼分得出）。
   ⚠️ 这两个颜色**不用主题变量** —— 因为它们永远渲染在"近白色"的 .phv-sym 药丸里，
   不管什么主题底色都是白药丸，所以红/橙始终清楚。 */
.phv-st{color:#CC2222;font-size:1.02em;font-weight:700;
  text-shadow:0 0 calc(var(--u) * .8) rgba(204,34,34,.22)}
.phv-st.sec{color:#D4772A;font-size:.96em;
  text-shadow:0 0 calc(var(--u) * .8) rgba(212,119,42,.22)}

/* 点中的那张卡：描一圈紫边，学生跟着老师的手指走 */
.phv-item.on .phv-sym{border-color:#6B4C9A;
  box-shadow:0 0 0 calc(var(--u) * .4) rgba(107,76,154,.30),
             0 calc(var(--u) * .7) calc(var(--u) * 1.8) rgba(13,38,59,.12)}
.phv-item.on .phv-let{background:var(--phv-let-hi,#CBE0F4)}

/* 只有重音、没有音素的那种卡（收尾）。
   ⛔ 原来硬编码成"浅米底 + 棕字"，深色主题下就是深色面板上一块刺眼的白。
   现在跟普通音素卡共用同一对变量（近白药丸），字用主重音的那个红（跟 .phv-st 一致）——
   不管什么主题都是"白药丸 + 红重音符"，清楚又统一。 */
.phv-item.only .phv-sym{background:var(--phv-sym-bg,#fff);
  border-color:var(--phv-sym-line,#DFEAF6);color:#CC2222}
.phv-let.dash{background:var(--phv-chip-bg,#EEF4FA);
  border:1px dashed var(--phv-chip-line,#D0DCE8);color:var(--phv-mut,#6B8AA8);
  font-size:calc(var(--u) * 2.4);font-weight:600;cursor:default}

/* 播放键：紫色圆钮，钉在卡片**左上角**。
   【老师要求】讲解音频**只由它**触发（点卡片本身不播）。
   底色用近白（跟音标药丸同层），所以深色主题下也看得见。 */
.phv-play{position:absolute;left:calc(var(--u) * -.8);top:calc(var(--u) * -.4);
  width:calc(var(--u) * 3.8 * var(--k2,1));height:calc(var(--u) * 3.8 * var(--k2,1));
  border-radius:50%;
  border:2px solid #6B4C9A;background:var(--phv-sym-bg,#fff);color:#6B4C9A;padding:0;
  font-size:calc(var(--u) * 1.35 * var(--k2,1));line-height:1;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;transition:.16s;
  box-shadow:0 1px 4px rgba(13,38,59,.22)}
.phv-play:hover{background:#6B4C9A;color:#fff;transform:scale(1.12)}
.phv-play.on{background:#B91C1C;border-color:#B91C1C;color:#fff;
  animation:phvPulse .8s ease-in-out infinite}
@keyframes phvPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- 左键：例词条 ----------
   【2026-10-09 老师要求】弹层"**可以跨上部分和下部分**，不一定非要完全在上部分显示"。
   JS 现在把弹层挂在**整块舞台**上（课堂 = #stage，编辑器 = #pe-stage），
   所以下面这些百分比和 --u 都是**相对整块舞台**的（不是相对上半区那 56.25%）。
   ⛔ 别再按"上半区"写值：舞台是 100% 高，
      原来那句 bottom:2.2u 放到舞台上就等于"贴地板"，弹层会掉到最底下。
   位置：底边压在舞台 **71%** 处（bottom:29%），往上长、最高 27% ——
        于是它落在 44%~71% 这一段：**跨过 56.25% 那条线**，
        但顶不到音素卡、也压不到字幕。
   ⛔ 29% 这个数是**量出来的**：字幕落在舞台 71.5%~76.5%（`.xy-subwrap` 是下半屏的
     80% 居中 + 上下内边距，见 RULES），所以底边压到 71% 就刚好停住。
     以后要是再动字幕位置，这个值要跟着重新量（别凭感觉改）。 */
.phv-ex{position:absolute;left:5%;right:5%;bottom:29%;
  max-height:27%;z-index:36;
  background:var(--phv-pop-bg,rgba(255,255,255,.99));
  border:1px solid var(--phv-pop-line,#E2ECF7);
  border-radius:calc(var(--u) * 2.6);
  padding:calc(var(--u) * 2) calc(var(--u) * 2.6);
  box-shadow:0 calc(var(--u) * 1.8) calc(var(--u) * 4.6) rgba(13,38,59,.20);
  display:flex;flex-direction:column;gap:calc(var(--u) * 1.4);
  overflow:auto;/* animation:phvUp .2s ease */}
@keyframes phvUp{from{opacity:0;transform:translateY(calc(var(--u) * 2))}
                 to{opacity:1;transform:none}}
.phv-exhd{display:flex;align-items:center;gap:calc(var(--u) * 1.2);
  padding-bottom:calc(var(--u) * 1.2);
  border-bottom:2px solid var(--phv-chip-line,#E9F0F6)}
/* ⛔⛔ 这里**必须**用 --phv-sym-bg / --phv-sym-line（跟上方音素卡同一对）。
   2026-10-09 老师报「左键点开以后，第一个音标的字看不见」——
   原因就是这个 .sm 覆盖了底色却用 --phv-chip-bg（深色主题下只有 7% 不透明、
   等于没底），字色却继承 .phv-sym 的 --phv-sym-fg（深墨蓝）。
   深色弹层 + 深墨蓝字 = 一团糊。**底色和字色必须成对取用**，
   音标永远是最亮的一层，任何主题下都该是"近白药丸 + 深字"。 */
.phv-sym.sm{font-size:calc(var(--u) * 4.4);font-weight:700;
  padding:calc(var(--u) * .2) calc(var(--u) * 1.8);
  min-width:0;
  background:var(--phv-sym-bg,#fff);
  border-color:var(--phv-sym-line,#DFEAF6)}
.phv-let.sm{font-size:calc(var(--u) * 3.6);font-weight:700;
  padding:calc(var(--u) * .2) calc(var(--u) * 1.8);min-width:0}
.phv-arw{color:var(--phv-mut,#8AABBA);font-size:calc(var(--u) * 2.6);line-height:1}
.phv-lb{font-size:calc(var(--u) * 1.9);color:var(--phv-mut,#6B8AA8);letter-spacing:1px}
.phv-x{margin-left:auto;background:transparent;border:0;color:var(--phv-mut,#8AABBA);
  font-size:calc(var(--u) * 2.4);cursor:pointer;padding:0 calc(var(--u) * .8);
  line-height:1;border-radius:calc(var(--u) * .8)}
.phv-x:hover{color:var(--phv-ink,#1E3A5F);background:var(--phv-chip-bg,#F2F7FD)}

/* 例词卡：学生要读的词，字很大、可点读 */
.phv-exs{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 1) calc(var(--u) * 1.2);
  justify-content:center}
.phv-exw{display:inline-flex;align-items:center;gap:calc(var(--u) * .7);
  background:var(--phv-chip-bg,#F5F9FE);
  border:1px solid var(--phv-chip-line,#E9F0F6);border-radius:999px;
  padding:calc(var(--u) * .9) calc(var(--u) * 2.1);
  font-size:calc(var(--u) * 3.3);font-weight:700;color:var(--phv-ink,#0D263B);
  cursor:pointer;transition:transform .14s,background .14s,box-shadow .14s}
.phv-exw:hover{background:var(--phv-let-hi,#E5EEF8);
  transform:translateY(calc(var(--u) * -.3));
  box-shadow:0 calc(var(--u) * .8) calc(var(--u) * 1.8) rgba(13,38,59,.08)}
.phv-exw.on{background:#B91C1C;border-color:#B91C1C;color:#fff;
  animation:phvPulse .8s ease-in-out infinite}
.phv-exw .spk{font-size:.68em;opacity:.5}
.phv-exw.on .spk{opacity:1}
.phv-none{color:var(--phv-mut,#8AABBA);font-size:calc(var(--u) * 2);
  padding:calc(var(--u) * .6)}

/* ---------- 右键：完整规则（这个音素的**全部**组合 + 例词） ----------
   【2026-10-09 老师要求】同样允许跨上下半屏 ——
   原来是 inset:1.8u 挤在**上半区**里，字母组合一多就滚不完。
   【2026-10-09 再改，老师反馈「弹窗太高，纵向居中一点」】
   上一版是 top:5%;bottom:5% = 硬撑到舞台的 **90% 高**，
   哪怕只有 3 个字母组合也顶天立地，看着又高又压。
   现在改成：**高度由内容决定**（fit），纵向**居中**浮在舞台正中间；
   只有内容真的很多时才长到 max-height:76% 再内部滚动。
   ⛔ 居中必须用 transform，而 transform 会盖掉 @keyframes 里的，
      所以动画两帧都要自己带上 translateY(-50%)（见 phvIn）。 */
.phv-rule{position:absolute;left:4%;right:4%;top:50%;z-index:38;
  transform:translateY(-50%);max-height:76%;
  display:flex;flex-direction:column;gap:calc(var(--u) * 1.1);
  background:var(--phv-pop-bg,rgba(255,255,255,.985));
  border:1px solid var(--phv-pop-line,#E2ECF7);
  border-radius:calc(var(--u) * 2.8);
  padding:calc(var(--u) * 2.2) calc(var(--u) * 2.6);
  box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(var(--xy-sh,13,38,59),.3);
  overflow:auto;/* animation:phvIn .18s ease */}
@keyframes phvIn{
  from{opacity:0;transform:translateY(-50%) scale(.985)}
  to{opacity:1;transform:translateY(-50%)}
}
.phv-rhd{display:flex;align-items:center;gap:calc(var(--u) * 1.4);
  padding-bottom:calc(var(--u) * 1.4);
  border-bottom:2px solid var(--phv-chip-line,#E9F0F6)}
.phv-rtile{font-family:Arial,Helvetica,"Arial Unicode MS",sans-serif;font-weight:400;
  color:var(--phv-ink,#0D263B);background:var(--phv-chip-bg,#F2F7FD);
  border:2px solid var(--phv-chip-line,#E6EEF7);
  border-radius:calc(var(--u) * 1.8);
  padding:calc(var(--u) * .2) calc(var(--u) * 1.8);
  font-size:calc(var(--u) * 6);line-height:1.2}
.phv-rcode{font-family:Consolas,"Courier New",monospace;
  font-size:calc(var(--u) * 2);color:var(--phv-let-fg,#1F4B6E);
  background:var(--phv-let-bg,#E3EDF7);
  border-radius:999px;padding:calc(var(--u) * .3) calc(var(--u) * 1.4)}
.phv-rcnt{font-size:calc(var(--u) * 1.9);color:var(--phv-mut,#6B8AA8);
  background:var(--phv-chip-bg,#EEF4FA);
  border-radius:999px;padding:calc(var(--u) * .25) calc(var(--u) * 1.4)}
.phv-sec{display:flex;align-items:center;gap:calc(var(--u) * 1);
  font-size:calc(var(--u) * 2.1);font-weight:600;color:var(--phv-mut,#4A6A86);
  margin-top:calc(var(--u) * .6)}
.phv-badge{font-size:calc(var(--u) * 1.65);font-weight:400;
  background:var(--phv-chip-bg,#E8EDF4);color:var(--phv-mut,#6B8AA8);
  border-radius:999px;padding:calc(var(--u) * .15) calc(var(--u) * 1.2)}
.phv-combos{display:flex;flex-wrap:wrap;gap:calc(var(--u) * .9) calc(var(--u) * 1.2)}
.phv-combo{font-family:Arial,Helvetica,sans-serif;font-weight:800;
  font-size:calc(var(--u) * 3.2);color:var(--phv-let-fg,#1F4B6E);
  background:var(--phv-let-bg,#E3EDF7);
  border:2px solid transparent;border-radius:999px;
  padding:calc(var(--u) * .45) calc(var(--u) * 1.9);cursor:pointer;
  transition:.14s}
.phv-combo:hover{background:var(--phv-let-hi,#D4E2F0);transform:scale(1.04)}
.phv-combo.on{background:#6B4C9A;border-color:#6B4C9A;color:#fff}
.phv-combo.none{color:var(--phv-mut,#8AABBA);background:transparent;
  border:1px dashed var(--phv-let-hi,#D4E2F0);cursor:default}
.phv-hintbar{margin-top:auto;padding-top:calc(var(--u) * 1);
  border-top:1px solid var(--phv-chip-line,#EFF4FA)}

/* ==========================================================================
   下半屏：单词卡（课堂页和编辑器预览共用）
   【2026-10-09 老师要求：从设计角度重做】之前是"描边卡片 + 单词 900 + 中间一条分隔线
   + 释义 650 深色"，元素太多、层级靠"都加重"去堆，所以显得挤、躁。

   这次照参考实现（/phonics 的 word-left）的设计语言来：
     单词   56px / 700 / letter-spacing -0.5px / 深墨蓝  —— 大，但字重克制，显精致
     音标   小一号的药丸，轻（400），不跟单词抢
     释义   20px / 400 / 灰蓝，**不加分隔线**，靠留白和颜色分层
   一句话原则：**层级靠"字号 + 颜色 + 留白"，不靠描边和加粗**。
   ========================================================================== */
.wb{box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--u,4px) * 2.1 * var(--k2,1));
  width:min(92%,calc(var(--u,4px) * 80));
  max-height:96%;
  padding:calc(var(--u,4px) * 3.4 * var(--k2,1)) calc(var(--u,4px) * 4.4);
  background:var(--wb-bg,#F8FBFF);
  border:1px solid var(--wb-line,#E6F0FA);
  border-radius:calc(var(--u,4px) * 3);
  box-shadow:0 calc(var(--u,4px) * 1.4) calc(var(--u,4px) * 3.6) rgba(16,52,86,.07);
  text-align:center;overflow:hidden}

/* 单词：全屏最重的一层。700 而不是 900 —— 900 在这么大字号下会糊成一团墨 */
.wb-word{font-size:calc(var(--u,4px) * 8.6);font-weight:700;color:var(--wb-word,#0D263B);
  line-height:1.12;letter-spacing:-.5px;
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif}
.wb-word[contenteditable]{outline:none}
.wb-word[contenteditable]:focus{outline:2px dashed #9EC3E6;outline-offset:4px;
  border-radius:8px}

/* 音标：英美各一个小药丸（中间层 / 400 轻字重）。
   当前选中的那个（跟控制面板英音·美音走）加一圈描边 —— 高亮但不吵。 */
/* 【2026-10-16 老师要求】音标"稍微大一些字体、两个音标分散开一点，别太拥挤"：
   ① 字号 2.7u → **3.4u**（比下面的中文释义还大一档，成为第二显眼的东西）；
   ② 两个药丸之间的 gap .8u → **2.2u**（英/美分开，不再挤在一起）。
   ⛔ 药丸内部（"英"和音标之间）也顺带松了一点。 */
.wb-phon{display:flex;flex-wrap:wrap;gap:calc(var(--u,4px) * 2.2);
  justify-content:center;font-family:Arial,Helvetica,sans-serif}
.wb-phon>span{display:inline-flex;align-items:baseline;
  gap:calc(var(--u,4px) * .7);
  background:var(--wb-phon-bg,#EAF3FC);border:1px solid var(--wb-phon-line,#DCEAFA);
  border-radius:999px;
  padding:calc(var(--u,4px) * .5) calc(var(--u,4px) * 1.9);
  font-size:calc(var(--u,4px) * 3.4);font-weight:400;color:var(--wb-phon-fg,#3C6E96);
  letter-spacing:.2px;font-variant-numeric:tabular-nums}
.wb-phon b{font-weight:600;font-size:.72em;color:var(--wb-phon-lb,#7C9AB5);
  font-family:inherit}
.wb-phon>span.on{background:var(--wb-phon-on-bg,#D6E9FB);
  border-color:var(--wb-phon-on-line,#B7D6F2);color:var(--wb-phon-on-fg,#134A78);
  box-shadow:inset 0 0 0 1.5px var(--wb-phon-on-ring,#8FBEE8)}
.wb-phon>span.on b{color:var(--wb-phon-on-lb,#1F4B6E)}

/* 释义：不描边、不加粗、不画线 —— 只靠"字号小一档 + 颜色偏灰"跟大单词拉开层级
   （参考实现 word-meaning 就是这么做的） */
/* 【2026-10-16 老师要求】中文意思"可以小点字体，让出空间"：3.3u → **2.8u**
   （这样"音标 > 中文"的层级才顺；原来是反的，中文比音标还大）。 */
.wb-mean{font-size:calc(var(--u,4px) * 2.8);font-weight:400;color:var(--wb-mean,#3A5878);
  line-height:1.5;max-width:94%;letter-spacing:.2px}
.wb-empty{font-size:calc(var(--u,4px) * 2.4);color:var(--wb-empty,#8395A7);line-height:1.5}

/* ==========================================================================
   音标回忆页（2026-10-09 老师要求）
   --------------------------------------------------------------------------
   老师原话：「这个图1 为背景，两行，下面是音标，上行是字母。和音标展开页的
   音标卡和字母卡一样，上下对应。音标一直显示，点击音标，上面的字母组合出现，
   再点击音标，字母组合消失。—— 用来训练学生看音标、拼字母拼单词的能力。」

   ⛔ 两个关键设计，别改：
     1. **字母那一格永远占着地方**（只是字透明 + 虚线框），不是 display:none ——
        否则一点开，整排卡片会跳一下，学生眼睛会跟丢。
     2. 颜色**不用主题变量**：这一页的背景是固定的浅色云纹图，
        深色主题的浅色字会直接看不见。
   尺寸沿用同一套 --u / --k / --k2（PhoView.fit + autofit 量的），
   所以课堂投影和编辑器小预览比例一致。
   ========================================================================== */
/* ⛔⛔ 背景**平铺**，不要拉伸（老师 2026-10-09：「我是说平铺，不要拉伸」）。
   这张 recall_bg.jpg 是**无缝云纹图案**（花纹在四边能接上），
   所以直接按**原始尺寸**重复铺 —— 云纹大小恒定，屏幕多大都一样。
   原来是 `center/cover`：图会被缩放去"填满"1:1 的舞台，云纹忽大忽小、
   边缘还被裁掉，看着就不是一张可延展的纹样了。
   ⚠️ 别再改回 cover/contain/100% 100%。 */
.phv.xrc,.xrc{background:url("/static/xiyou/recall_bg.jpg") left top repeat}
.xrc-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:calc(var(--u,4px) * 2.6 * var(--k2,1)) calc(var(--u,4px) * 2.4 * var(--k2,1));
  width:90%;max-width:90%;max-height:90%;overflow:hidden;box-sizing:border-box;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.92);
  border-radius:calc(var(--u,4px) * 3);
  padding:calc(var(--u,4px) * 3 * var(--k2,1)) calc(var(--u,4px) * 3.2);
  box-shadow:0 calc(var(--u,4px) * 1.6) calc(var(--u,4px) * 3.6) rgba(72,58,32,.16)}
.xrc-item{display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--u,4px) * 1.3 * var(--k2,1));flex:0 0 auto;cursor:pointer}
/* 字母组合（上排）：**没揭开时也占位** —— 字透明 + 虚线圈 */
.xrc-let{font-family:Arial,Helvetica,sans-serif;font-weight:700;
  font-size:calc(var(--u,4px) * 8.2 * var(--k,1));line-height:1.2;
  color:transparent;background:rgba(255,255,255,.5);
  border:2px dashed rgba(122,110,86,.45);border-radius:999px;
  padding:calc(var(--u,4px) * .5 * var(--k2,1)) calc(var(--u,4px) * 2.6 * var(--k2,1));
  min-width:calc(var(--u,4px) * 10 * var(--k,1));text-align:center;
  transition:color .18s,background .18s,border-color .18s,transform .18s}
.xrc-item.on .xrc-let{color:#1F4B6E;background:#E3EDF7;border-color:#E3EDF7;
  transform:translateY(calc(var(--u,4px) * -.4))}
/* 音标（下排）：**一直显示**，最亮的一层（白药丸 + 深字） */
.xrc-sym{font-family:Arial,Helvetica,"Arial Unicode MS",sans-serif;font-weight:700;
  font-size:calc(var(--u,4px) * 9.5 * var(--k,1));line-height:1.18;
  color:#0D263B;background:#fff;border:1.5px solid #DFEAF6;border-radius:999px;
  padding:calc(var(--u,4px) * .5 * var(--k2,1)) calc(var(--u,4px) * 2.6 * var(--k2,1));
  min-width:calc(var(--u,4px) * 10 * var(--k,1));text-align:center;
  box-shadow:0 calc(var(--u,4px) * 1) calc(var(--u,4px) * 2.6) rgba(13,38,59,.14);
  transition:transform .18s,box-shadow .18s}
.xrc-item:hover .xrc-sym{transform:translateY(calc(var(--u,4px) * -.6))}
.xrc-item.on .xrc-sym{border-color:#8FBEE8}
.xrc-empty{color:#6B7C96;font-size:calc(var(--u,4px) * 2.6);line-height:1.7;
  text-align:center;padding:0 8%}

/* ==========================================================================
   问答页的**默认背景**：三张星空图循环渐变（2026-10-09 老师要求）
   --------------------------------------------------------------------------
   老师原话：「问答页，默认背景我给你三张图，这三张图在问答的过程中不断的
   由浅入深、由深入浅的渐变变化。」
   · 顺序 = 浅(quiz_bg1) → 中(quiz_bg2) → 深(quiz_bg3) → 中(quiz_bg2) → 浅…
   · ⛔ **纯 CSS 关键帧**，不用 JS 定时器：
       JS 定时器一遇到"重绘预览"就会被打断/重启，编辑器里会一闪一闪；
       CSS 动画挂着就一直跑，且课堂和编辑器用的是同一段。
   · 28s 一轮，每一档约 7s，交叠 ~2.2s 做交叉渐变。
   ========================================================================== */
.qbg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B1626}
.qbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity;animation-duration:28s;
  animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.qbg img:nth-child(1){animation-name:qbgLight}
.qbg img:nth-child(2){animation-name:qbgMid}
.qbg img:nth-child(3){animation-name:qbgDeep}
@keyframes qbgLight{
  0%{opacity:1} 20%{opacity:1} 28%{opacity:0} 88%{opacity:0} 100%{opacity:1}}
@keyframes qbgMid{
  0%{opacity:0} 20%{opacity:0} 28%{opacity:1} 45%{opacity:1}
  53%{opacity:0} 70%{opacity:0} 78%{opacity:1} 95%{opacity:1} 100%{opacity:0}}
@keyframes qbgDeep{
  0%{opacity:0} 45%{opacity:0} 53%{opacity:1} 70%{opacity:1} 78%{opacity:0}
  100%{opacity:0}}
/* 动画被关掉时（系统"减少动态效果"）：至少留一张看得见的底 */
@media (prefers-reduced-motion: reduce){
  .qbg img{animation:none}
  .qbg img:nth-child(1){opacity:1}
}

/* 回忆页右上角的**英美音标切换**（2026-10-09 老师要求：按钮就放在 1:1 窗口里）
   · 胶囊两段，当前那个用深蓝底白字；只在回忆页出现（其它页仍用右侧控制面板）。
   · 颜色写死不用主题变量（背景是固定的浅色云纹图）。 */
.xrc-switch{position:absolute;right:2.6%;top:2.8%;z-index:6;display:flex;
  border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(122,110,86,.3);
  box-shadow:0 calc(var(--u,4px) * .9) calc(var(--u,4px) * 2.2) rgba(72,58,32,.16)}
.xrc-sw{border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:calc(var(--u,4px) * 2.1);line-height:1;font-weight:600;
  color:#5A6A80;padding:calc(var(--u,4px) * 1.15) calc(var(--u,4px) * 2.3);
  transition:background .14s,color .14s}
.xrc-sw:hover{background:rgba(227,237,247,.95)}
.xrc-sw.on{background:#1F4B6E;color:#fff}
.xrc-sw + .xrc-sw{border-left:1px solid rgba(122,110,86,.22)}