/* ==========================================================================
   朗文家品牌皮肤 v4
   --------------------------------------------------------------------------
   这一层不改布局，只换"身份"。上面 style.css 是结构与动效（那些是调过很多轮
   的手感，不重写）；这里把颜色、圆角、字重、卡片形态整体换成朗文家现有 App
   的那套语言。

   对齐的四条依据（全部来自客户的在架截图）：
   1. 主色不是"儿童色块堆叠"，而是 深海军蓝 + 亮青 + 黄绿 三色制：
      深蓝负责沉浸（超级专区/夜景），青色负责"我要你点这里"，黄绿负责品牌识别。
   2. 所有卡片都是大圆角（20–28px）+ 白底 + 极轻投影，没有描边描死。
   3. 标题用超粗黑体（900），正文用常规黑体；全站无衬线，没有宋体。
   4. 激励系统是星星与进度药丸，不是分数条。

   覆盖策略：同一元素在 style.css 里可能有多条按时辰/状态的规则（例如
   .stage svg[data-time="night"]:not(.has-bg) .boat .hull）。为了让这一层
   稳定生效，颜色类声明统一加 !important，并在此说明原因 —— 不是偷懒，
   是不想让"时辰变体"在后续维护里又悄悄顶掉品牌色。
   ========================================================================== */

:root {
  /* ---- 品牌色 ---- */
  --lm-lime: #c6d91a;
  --lm-lime-lt: #e2ef5c;
  --lm-lime-deep: #9db00c;
  --lm-cyan: #33cde7;
  --lm-cyan-lt: #a8ecf7;
  --lm-cyan-pale: #e2fafe;
  --lm-peri: #8fa6f5;
  --lm-peri-deep: #5b6fe0;
  --lm-navy: #12294a;
  --lm-navy-2: #1b3e6e;
  --lm-navy-3: #2c5b96;
  --lm-orange: #f5a23c;
  --lm-orange-deep: #e07c22;
  --lm-cream: #fff6e4;
  --lm-text: #24314a;
  --lm-text-2: #5c6d8a;
  --lm-star: #ffc93c;
  --lm-red: #e8543f;

  --lm-r-card: 1.6rem;
  --lm-r-pill: 999px;
  --lm-shadow: 0 0.7rem 1.8rem rgba(12, 34, 66, 0.14);
  --lm-shadow-lg: 0 1.4rem 3rem rgba(9, 26, 52, 0.28);

  /* ---- 覆盖 v3 令牌，让未单独重写的遗留规则也落进品牌色系 ---- */
  --ink: #16233c;
  --ink-soft: #2b3d5c;
  --paper: #ffffff;
  --paper-dim: rgba(255, 255, 255, 0.8);
  --gold: var(--lm-star);
  --gold-soft: rgba(255, 201, 60, 0.45);
  --vermilion: var(--lm-red);
  --fog: rgba(255, 255, 255, 0.92);
  --glass: rgba(255, 255, 255, 0.95);
  --glass-line: rgba(30, 66, 120, 0.12);

  --font-cn: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
    "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Nunito", "Varela Round", "PingFang SC", system-ui, sans-serif;
}

html,
body {
  background: var(--lm-navy);
  font-family: var(--font-cn);
  letter-spacing: 0.01em;
}

/* 品牌字重：标题一律 800–900，正文 400。宋体在儿童界面里太"书面" */
.cover-title,
.achieve-title,
.report-summary,
.linebar-line,
.quiz-prompt,
.hud-title {
  font-weight: 800;
  letter-spacing: 0.005em;
}

/* --------------------------------- 按钮 ---------------------------------- */
/* 朗文家的按钮是"糖果胶囊"：满圆角、实色、底部一层硬阴影（像实体键帽） */
.btn {
  border-radius: var(--lm-r-pill);
  font-weight: 700;
  font-family: var(--font-cn);
  border: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.2s ease;
}

.btn-primary {
  background: linear-gradient(180deg, var(--lm-lime-lt), var(--lm-lime));
  color: #24340a;
  box-shadow: 0 0.45rem 0 var(--lm-lime-deep), 0 1rem 2rem rgba(120, 140, 0, 0.28);
}

.btn-primary:active {
  transform: translateY(0.28rem);
  box-shadow: 0 0.16rem 0 var(--lm-lime-deep);
}

.btn-ghost {
  background: #ffffff;
  color: var(--lm-navy);
  box-shadow: var(--lm-shadow);
}

.btn-ghost:active {
  transform: scale(0.97);
}

/* 说话键是全局最重要的一个控件 —— 青底白字、够大、有按下反馈 */
.btn-talk {
  background: linear-gradient(180deg, #5fdcf0, var(--lm-cyan));
  color: #08313d;
  box-shadow: 0 0.45rem 0 #1fa4bd, 0 1rem 2rem rgba(51, 205, 231, 0.35);
  font-weight: 800;
}

.btn-talk:active,
.btn-talk.is-hot {
  transform: translateY(0.2rem) scale(1.01);
  box-shadow: 0 0.14rem 0 #1fa4bd;
}

.talk-dot {
  background: #08313d;
}

/* ---------------------------------- 封面 ---------------------------------- */
/* 品牌首屏是"中文标题扛大梁 + 英文退成副标 + 一个明确的黄绿 CTA"，
   不是中英并列。客户的产品里中文永远是主字号，英文是补充信息。 */
.screen-cover .cover-scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 58%;
  padding-top: 1rem;
}

.cover-eyebrow {
  order: 1;
  display: inline-block;
  background: var(--lm-lime);
  color: #24340a;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  padding: 0.34rem 1rem;
  border-radius: var(--lm-r-pill);
  box-shadow: 0 0.4rem 1.2rem rgba(120, 140, 0, 0.3);
  margin: 0 0 1.1rem;
  text-indent: 0;
}

.cover-title-zh {
  order: 2;
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin: 0;
  text-indent: 0;
  text-shadow: 0 0.5rem 2rem rgba(6, 20, 40, 0.6);
}

.cover-title {
  order: 3;
  font-family: var(--font-en);
  font-size: 1.72rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--lm-cyan-lt);
  letter-spacing: 0.01em;
  margin: 0.7rem 0 0;
  text-shadow: none;
}

.cover-title span:last-child { color: var(--lm-cyan-lt); }

.cover-pitch {
  order: 4;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  margin: 1.1rem 0 0;
}

/* 封面加一枚"关卡信息"药丸，和朗文家的入口卡同款 */
.screen-cover .cover-scroll::after {
  content: "★ 听说关 · 8 幕 · 约 4 分钟";
  order: 5;
  margin-top: 1rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--lm-r-pill);
  padding: 0.34rem 0.95rem;
  backdrop-filter: blur(6px);
}

.screen-cover .cover-scroll > .btn {
  order: 6;
  margin-top: 1.4rem;
}

.cover-note {
  order: 7;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  margin: 1rem 0 0;
}

/* ---------------------------------- HUD ----------------------------------- */
/* 顶栏：左侧"助手头像 + 故事名"，右侧进度药丸。对应朗文家阅读页的
   头像 + 计时药丸那一条 */
.hud {
  align-items: center;
  gap: 0.7rem;
}

.hud-title {
  background: rgba(255, 255, 255, 0.95);
  color: var(--lm-navy);
  border-radius: var(--lm-r-pill);
  padding: 0.42rem 1.15rem 0.42rem 0.5rem;
  font-size: 1.35rem;
  box-shadow: var(--lm-shadow);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.guide-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #ffe9d6;
  display: block;
  flex: none;
  overflow: hidden;
}

.hud-progress {
  background: var(--lm-navy);
  color: #fff;
  border-radius: var(--lm-r-pill);
  padding: 0.36rem 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--lm-shadow);
}

.hud-close {
  background: rgba(255, 255, 255, 0.95);
  color: var(--lm-navy);
  border-radius: 50%;
  box-shadow: var(--lm-shadow);
}

.hud--solid {
  background: transparent;
}

/* ---------------------------------- 舞台 ---------------------------------- */
/* 夜景走品牌深蓝（对应"超级专区"那张星空页），不是水墨的墨黑 */
.stage svg[data-time] .js-sky-top { stop-color: #0c1b38 !important; }
.stage svg[data-time] .js-sky-mid { stop-color: #16345f !important; }
.stage svg[data-time] .js-sky-bot { stop-color: #2a5590 !important; }

.stage svg[data-time="morning"] .js-sky-top { stop-color: #2c5da0 !important; }
.stage svg[data-time="morning"] .js-sky-mid { stop-color: #5c93ce !important; }
.stage svg[data-time="morning"] .js-sky-bot { stop-color: #a9cdea !important; }

.stage svg[data-time="dawn"] .js-sky-top { stop-color: #2b3f7d !important; }
.stage svg[data-time="dawn"] .js-sky-mid { stop-color: #7f7fc0 !important; }
.stage svg[data-time="dawn"] .js-sky-bot { stop-color: #f3b98a !important; }

.stage svg[data-time] .js-water-top { stop-color: #16305c !important; }
.stage svg[data-time] .js-water-bot { stop-color: #081a34 !important; }

.stage svg[data-time="morning"] .js-water-top { stop-color: #4a7fb4 !important; }
.stage svg[data-time="morning"] .js-water-bot { stop-color: #23517f !important; }

.stage svg[data-time="dawn"] .js-water-top { stop-color: #9a6a8f !important; }
.stage svg[data-time="dawn"] .js-water-bot { stop-color: #402a5c !important; }

/* 山：三层纯色剪影，远浅近深 —— 扁平儿童插画的标准做法 */
.stage svg .hills--far { fill: #2b4c86 !important; opacity: calc(var(--depth, 0.9) * 0.55) !important; }
.stage svg .hills--mid { fill: #1f3c70 !important; opacity: calc(var(--depth, 0.9) * 0.78) !important; }
.stage svg .hills--near { fill: #142d58 !important; opacity: calc(var(--depth, 0.9) * 0.96) !important; }

.stage svg[data-time="morning"] .hills--far { fill: #7ea9cf !important; }
.stage svg[data-time="morning"] .hills--mid { fill: #4d7aa8 !important; }
.stage svg[data-time="morning"] .hills--near { fill: #2c5483 !important; }

.stage svg[data-time="dawn"] .hills--far { fill: #8b6ea8 !important; }
.stage svg[data-time="dawn"] .hills--mid { fill: #5d4a80 !important; }
.stage svg[data-time="dawn"] .hills--near { fill: #3a2f5c !important; }

/* 星与月 */
.stars circle {
  fill: #ffffff;
  animation: twinkle 4.2s ease-in-out infinite;
  animation-delay: var(--tw, 0s);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.35; }
}

.moon circle { fill: #ffeec2 !important; }
.moon { filter: drop-shadow(0 0 3rem rgba(255, 224, 160, 0.55)); }
.sun circle { fill: #ffd98a !important; }
.js-glow circle { opacity: 0.5; }

.waves path { stroke: rgba(255, 255, 255, 0.2) !important; stroke-width: 2; }

/* 船：奶白船身 + 深蓝描边，是朗文家插画里最常见的"亮主体压暗底"关系。
   舱内必须给颜色 —— style.css 没定义 .deck，默认 fill 是纯黑，船会变成一团黑剪纸 */
.boat .hull {
  fill: url(#gHull) !important;
  stroke: #1b3a66 !important;
  stroke-width: 2.4 !important;
}

.boat .deck {
  fill: url(#gDeck) !important;
  stroke: none !important;
  opacity: 0.82;
}

/* 船舷上沿的一道反光：一条线就把"平片"变成"有厚度的船" */
.boat .hull-hi {
  fill: none !important;
  stroke: #fffdf5;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.62;
}

.boat .hull-line { stroke: rgba(255, 250, 238, 0.34) !important; }
.boat .pole { stroke: #b07a3f !important; stroke-width: 5 !important; }
.boat .wake { stroke: rgba(255, 255, 255, 0.32) !important; }
.boat .shadow { opacity: 0.5; }

/* 草人：做成"稻草木偶"而不是剪影 —— 暖橘布衣 + 木头手 + 草帽 + 一张脸。
   品牌里的"人"全是暖色且有表情，在深蓝底上跳出来靠的就是这点暖 */
.boat .sbody {
  fill: #f2a34a !important;
  stroke: #c9772a !important;
  stroke-width: 2 !important;
}

.boat .sbelt {
  stroke: #c9772a !important;
  stroke-width: 3 !important;
  opacity: 0.5;
}

.boat .sarm {
  stroke: #d98b34 !important;
  stroke-width: 7.5 !important;
  stroke-linecap: round !important;
  fill: none !important;
}

.boat .spole { stroke: #a9702f !important; stroke-width: 4.5 !important; }

.boat .shead {
  fill: #f9c078 !important;
  stroke: #c9772a !important;
  stroke-width: 2 !important;
}

/* 头顶高光：暗底上的球体全靠这一小块亮斑 */
.boat .shi {
  fill: #ffe4bc !important;
  stroke: none !important;
  opacity: 0.9;
}

.boat .seye {
  fill: #6b3a10 !important;
  stroke: none !important;
}

.boat .sbrim {
  fill: #e8b458 !important;
  stroke: #b8791f !important;
  stroke-width: 1.6 !important;
}

.boat .shat {
  fill: #f0c46a !important;
  stroke: #b8791f !important;
  stroke-width: 1.6 !important;
}

/* 月亮同心光环：一圈圈往外淡，才是"发光"而不是"贴了个圆" */
.moon-rings circle {
  fill: none !important;
  stroke: #ffeec2;
  stroke-width: 1.3;
  opacity: 0.16;
}

.moon-rings circle:nth-child(2) { opacity: 0.1; }
.moon-rings circle:nth-child(3) { opacity: 0.06; }

/* 漂浮光点：缓慢上下浮动，深浅交替 */
.orb {
  opacity: 0.5;
  animation: orbFloat 6.5s ease-in-out infinite;
  animation-delay: var(--fl, 0s);
}

.orb--cyan { fill: #7fe6f6; }
.orb--peri { fill: #a9b8f8; }
.orb--lime { fill: #d6e86a; }

@keyframes orbFloat {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-9px); opacity: 0.8; }
}

/* 箭：奶白杆 + 橘红箭镞，插在橘色草人上仍然分得清 */
.arrow .shaft,
.volley .shaft {
  stroke: #fff3dc !important;
  stroke-width: 3.4 !important;
}

.arrow .head,
.volley .head { fill: #e8543f !important; }

.volley .dust { stroke: rgba(255, 255, 255, 0.9) !important; }

/* 曹营：中蓝帐幕 + 橘红旗，和船形成冷暖对照 */
.camp .campbank { fill: #1a3763 !important; opacity: 0.85 !important; }
.camp .tent { fill: #2b5a9c !important; stroke: rgba(255, 255, 255, 0.18) !important; }
.camp .tent--b { fill: #234b85 !important; }
.camp .flagpole { stroke: #a9702f !important; stroke-width: 3.5 !important; }
.camp .flag { fill: var(--lm-red) !important; opacity: 1 !important; }
.camp .archers circle { fill: #14305a !important; }
.camp .archers path { stroke: #14305a !important; }

/* 雾：冷白，浓度靠 JS 给，整体比水墨版更薄 —— 品牌插画不用雾做主体 */
.fog-puff { opacity: calc(var(--op, 0.6) * 0.62) !important; }

/* 压角：顶部给 HUD 留对比，底部给台词卡留层次 */
.stage::after {
  background:
    linear-gradient(180deg, rgba(6, 18, 40, 0.6) 0%, rgba(6, 18, 40, 0.18) 16%, rgba(6, 18, 40, 0) 34%),
    linear-gradient(0deg, rgba(6, 18, 40, 0.72) 0%, rgba(6, 18, 40, 0.24) 22%, rgba(6, 18, 40, 0) 46%) !important;
}

/* -------------------------------- 旁白条 --------------------------------- */
/* 白卡 + 深字。这是全站出现最多的一块表面，圆角和投影必须稳 */
.narrator {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--lm-r-card);
  padding: 0.9rem 1.2rem;
  box-shadow: var(--lm-shadow);
  gap: 0.8rem;
  align-items: center;
}

.narrator::before { display: none; }

.narrator-text {
  color: var(--lm-text);
  font-size: 1.35rem;
  line-height: 1.55;
  font-weight: 500;
}

.narrator-replay {
  background: var(--lm-cyan-pale);
  color: #0e7b91;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  box-shadow: none;
}

/* -------------------------------- 台词条 --------------------------------- */
/* 底部白卡：任务做成青色小药丸，台词是视觉主角，说完全句给一个黄绿勾 */
.linebar {
  background: #ffffff;
  border-radius: 2rem 2rem 0 0;
  box-shadow: 0 -0.6rem 2.4rem rgba(6, 18, 40, 0.28);
  padding-top: 1.5rem;
}

.linebar-task {
  display: inline-block;
  background: var(--lm-cyan-pale);
  color: #0d6f84;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.28rem 0.9rem;
  border-radius: var(--lm-r-pill);
  letter-spacing: 0.02em;
}

.linebar-line {
  color: var(--lm-navy);
  font-family: var(--font-en);
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.linebar-zh {
  color: var(--lm-text-2);
  font-size: 1.15rem;
}

.linebar.is-done .linebar-line { color: #4a7a0a; }

/* 跳过：做成看得见、点得中的次级按钮。
   原来只有一行 30% 透明度的灰字，既不像按钮又难看清——配合"长按才生效"的逻辑，
   基本等于一个坏掉的控件。现在给它描边 + 44px 触摸高度，一次点击即翻页。 */
.skip {
  display: inline-flex;
  align-items: center;
  color: rgba(36, 49, 74, 0.66);
  font-weight: 600;
  border-radius: var(--lm-r-pill);
  min-height: 44px;
  padding: 0 1.3rem;
  border: 1.5px solid rgba(36, 49, 74, 0.16);
  background: #ffffff;
  transition: background 0.15s ease, transform 0.15s ease;
}

.skip:active {
  background: rgba(36, 49, 74, 0.08);
  transform: scale(0.97);
}

.finger-tip {
  background: var(--lm-navy);
  color: #fff;
  border-radius: var(--lm-r-pill);
  box-shadow: var(--lm-shadow);
  font-weight: 600;
}

/* -------------------------------- 反馈层 --------------------------------- */
.feedback {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 1.8rem;
  box-shadow: var(--lm-shadow-lg);
  color: var(--lm-text);
}

.feedback-stars { color: var(--lm-star); }
.feedback-plot { color: var(--lm-navy); }
.feedback-echo { color: var(--lm-text-2); }

/* -------------------------------- 题目页 --------------------------------- */
/* 朗文家的答题页是浅底 + 白选项行 + 蓝色字母徽章（截图 3）。
   这里不再复用夜景舞台 —— 答题是"读"，不是"看戏" */
.screen-quiz {
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(168, 236, 247, 0.55), transparent 62%),
    radial-gradient(50% 60% at 8% 92%, rgba(143, 166, 245, 0.28), transparent 66%),
    #f0fbfe;
}

.screen-quiz .stage,
.screen-quiz .quiz-scrim { display: none; }

.quiz-prompt {
  color: var(--lm-navy);
  font-family: var(--font-en);
  font-size: 2.05rem;
  font-weight: 800;
  text-align: left;
  /* 与选项列表同宽同轴：题干贴着左边缘、选项却缩进一截，是最容易被一眼看出的"没对齐" */
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
}

.quiz-prompt-zh {
  color: var(--lm-text-2);
  font-size: 1.15rem;
  width: 100%;
  max-width: 66rem;
  margin: 0 auto 0.6rem;
  text-align: left;
}

.quiz-options {
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 66rem;
}

.quiz-opt {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1.4rem 0.85rem 0.9rem;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: var(--lm-r-pill);
  box-shadow: 0 0.4rem 1.2rem rgba(12, 34, 66, 0.09);
  color: var(--lm-text);
  text-align: left;
}

.quiz-opt:active { transform: scale(0.985); }

.quiz-opt.is-right {
  border-color: var(--lm-lime);
  background: #f7fce2;
}

.quiz-opt.is-wrong {
  border-color: #f4b9ae;
  background: #fff3f1;
  opacity: 1;
}

/* 字母徽章：A/B/C/D 取代原来的图标，识别成本最低，孩子一眼对上题号 */
.qicon {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #7ec8f2, #4f9fe0);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.35rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  opacity: 1;
}

.quiz-opt.is-right .qicon { background: linear-gradient(180deg, #cfe93c, #a8c40f); }
.quiz-opt.is-wrong .qicon { background: linear-gradient(180deg, #f3a497, #e0695a); }

.quiz-opt-label {
  font-family: var(--font-en);
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--lm-navy);
  line-height: 1.3;
}

.quiz-opt-zh {
  font-size: 1rem;
  color: var(--lm-text-2);
  margin-left: 0.2rem;
}

.screen-quiz .hud-title { background: #ffffff; box-shadow: var(--lm-shadow); }

/* 手机横屏（可视高 350–420px）时选项行必须更紧，否则第 4 个必然被切 */
@media (max-height: 460px) {
  .quiz-prompt { font-size: 1.5rem; }
  .quiz-opt { width: 100%; padding: 0.6rem 1rem 0.6rem 0.7rem; }
  .qicon { width: 2rem; height: 2rem; font-size: 1.1rem; border-radius: 0.7rem; }
  .quiz-opt-label { font-size: 1.1rem; }
  .quiz-options { gap: 0.55rem; }
}

/* -------------------------------- 配音页 --------------------------------- */
/* 舞台只占左侧：svh 铺满全屏时，右侧面板会把船队切成两半。
   收窄容器后 svg 的 slice 会按新比例裁边，船队自然落进可视区 */
.screen-dubbing .stage {
  inset: 0 44% 0 0;
}

.dub-panel {
  background: #ffffff;
  border-radius: 1.8rem;
  box-shadow: var(--lm-shadow-lg);
  color: var(--lm-text);
}

/* "已配完"是禁用态，原样式是浅青底 + 白字，在白面板上等同于看不见 */
.btn-talk[disabled] {
  background: #dceff4 !important;
  color: #4d8593 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.dub-lead { color: var(--lm-navy); font-weight: 800; }
.dub-line { border-radius: 1.1rem; background: #f4f9ff; border: 2px solid transparent; }
.dub-line.is-active { border-color: var(--lm-cyan); background: #effcff; }
.dub-no {
  background: var(--lm-cyan-pale);
  color: #0d6f84;
  border-radius: var(--lm-r-pill);
  font-weight: 800;
}
.dub-text { color: var(--lm-navy); font-weight: 600; }
.dub-state { color: var(--lm-text-2); }
.dub-hear { background: var(--lm-cyan-pale); color: #0d6f84; border-radius: var(--lm-r-pill); }
.dub-note { color: rgba(36, 49, 74, 0.5); }

/* ------------------------------ 报告 / 成就 ------------------------------ */
/* 结算页是"发奖"，全站最亮的一屏：深蓝底 + 金光 + 黄绿 CTA */
.screen-report,
.screen-achieve {
  background:
    radial-gradient(70% 60% at 50% 18%, rgba(143, 166, 245, 0.28), transparent 62%),
    radial-gradient(60% 50% at 50% 100%, rgba(51, 205, 231, 0.18), transparent 60%),
    #0e2144;
}

/* 插进成就卡的箭船插画。要小：横屏手机只有 500px 高，主视觉吃点空间，
   但绝不能把三个数字和按钮挤出去 */
.achieve-art {
  display: block;
  width: 15rem;
  height: auto;
  margin: -0.4rem auto -0.2rem;
}

.achieve-card > :nth-child(7) { animation-delay: 0.78s; }

.achieve-title,
.achieve-sub { color: #ffffff; }
.achieve-eyebrow {
  background: var(--lm-lime);
  color: #24340a;
  border-radius: var(--lm-r-pill);
  padding: 0.3rem 1rem;
  font-weight: 800;
}
.achieve-card { color: #ffffff; }
.achieve-stats { color: rgba(255, 255, 255, 0.82); }

/* 数字要"实"：细体数字在这类结算屏上像占位符，粗体才有兑现感 */
.achieve-stats b {
  font-weight: 800;
  color: var(--lm-star) !important;
}

.achieve-sub { color: rgba(255, 255, 255, 0.78); }

.report-table {
  background: #ffffff;
  border-radius: 1.6rem;
  box-shadow: var(--lm-shadow);
  color: var(--lm-text);
}

/* 表头与台词列原本是给深色底用的浅色字，落到白表格上会彻底消失 ——
   这一屏是给家长看的，读不出来就没有意义，所以颜色必须按白底重定 */
.report-table th {
  color: rgba(36, 49, 74, 0.52) !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(30, 66, 120, 0.12) !important;
}

.report-table td {
  color: var(--lm-text) !important;
  border-bottom: 1px solid rgba(30, 66, 120, 0.07) !important;
}

.cell-line {
  color: var(--lm-navy) !important;
  font-weight: 600;
}

.band--ok {
  background: rgba(36, 49, 74, 0.07);
  color: var(--lm-text-2);
}

.band--retry {
  background: rgba(232, 84, 63, 0.12);
  color: #b53a29;
}

.report-summary b { color: var(--lm-star); font-weight: 800; }
.report-summary span { color: rgba(255, 255, 255, 0.7); }

.report-summary { color: var(--lm-navy); }
.report-entry { border-bottom: 1px solid rgba(30, 66, 120, 0.08); }
.report-note { color: rgba(255, 255, 255, 0.55); }

.band { border-radius: var(--lm-r-pill); font-weight: 800; }
.band--great { color: var(--lm-star); }
.band--ok { color: var(--lm-cyan-lt); }
.band--retry { color: #ff9a88; }

/* ------------------------------ 弹窗 / 遮罩 ------------------------------ */
.dialog {
  background: #ffffff;
  border-radius: 1.8rem;
  box-shadow: var(--lm-shadow-lg);
  color: var(--lm-text);
}

.dialog h2 { color: var(--lm-navy); font-weight: 800; }

.envbar {
  background: var(--lm-navy);
  color: #fff;
  border-radius: var(--lm-r-pill);
}

.rotate-mask { background: #0e2144; }
.rotate-inner p { color: #fff; font-weight: 700; }
.rotate-mask button {
  background: var(--lm-lime);
  color: #24340a;
  border: none;
  border-radius: var(--lm-r-pill);
  font-weight: 800;
  padding: 0.7rem 1.6rem;
}

/* --------------------------- 矮视口（真机横屏） --------------------------- */
/*
 * 手机横屏后 CSS 视口只有 ~837x388（2720x1260 @3.25 密度），
 * 而 html 的 rem 基准是 calc(9px + 0.75vmin)，在这里 1rem 只有 ~11.9px。
 * 成就页元素最多（徽章 + 标题 + 副标题 + 三列统计 + 两个按钮 + 家长入口），
 * 按原间距算下来约 412px，比视口高 24px —— 表现就是底部的
 * 「给爸爸妈妈看」被切掉一半。这里按真实高度重排，并留滚动兜底。
 */
.screen-achieve {
  /* safe center：内容放得下就居中，放不下就从顶部开始，不会把顶部顶出视口 */
  justify-content: safe center;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-height: 470px) {
  .achieve-card {
    padding: 0.9rem 2rem;
  }

  .achieve-eyebrow {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .achieve-title {
    font-size: 2.9rem;
    margin-bottom: 0.5rem;
  }

  .achieve-sub {
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
  }

  .achieve-stats {
    gap: 2.8rem;
    margin-bottom: 1.2rem;
  }

  .achieve-stats b {
    font-size: 2.1rem;
  }

  .achieve-stats span {
    font-size: 0.95rem;
  }

  .achieve-actions {
    gap: 1rem;
  }

  .report-entry {
    margin-top: 0.9rem;
    font-size: 1rem;
  }
}