/* ==========================================================================
   v5 · 按朗文家现有 App 的版式重建（浅底 + 卡片 + 双栏）
   --------------------------------------------------------------------------
   前三层的分工：
     style.css  结构、动效、舞台（那些手感不重写）
     brand.css  品牌色令牌
     本层       版式骨架

   对照客户在架截图，改的是四件事（不是换颜色）：
     ① 深色不再铺满页面。朗文的深色只出现在"插画卡"里，页面底色永远是浅的；
        我们之前是"一张图铺满 + 文字压上去"，所以整体发暗、没有层次。
     ② 版面从"图上压字"改成"底 → 圆角卡 → 卡内内容"三层。
        故事页 = 左插画卡 + 右内容卡；配音页同理。
     ③ 顶栏从"透明压角"改成"白色胶囊条"：左标题、右进度，都是可点的实体件。
     ④ 答题页 = 题干卡 + 选项行（白底药丸 + 蓝色字母徽章），单栏居中，不再压在夜景上。
   ========================================================================== */

:root {
  /* 底色与表面 */
  --pg: #eef4fb;
  --card: #ffffff;
  --card-2: #f5f9ff;
  --line: #e3ecf7;

  /* 文字 */
  --ink: #1b2a41;
  --ink-2: #5c6f8c;
  --ink-3: #93a3ba;

  /* 主色：朗文家的可交互件是蓝，进度/奖励是绿，黄绿只做点睛 */
  --blue: #2e7bf6;
  --blue-deep: #1f5fd0;
  --blue-soft: #e8f1ff;
  --green: #22c06a;
  --green-deep: #148b4a;
  --green-soft: #e2f8ed;
  --lime: #c9f06a;
  --star: #ffb81c;

  --r-card: 1.8rem;
  --shadow: 0 0.6rem 1.6rem rgba(23, 45, 80, 0.08);
  --shadow-lg: 0 1.2rem 3rem rgba(23, 45, 80, 0.16);
}

html,
body {
  background: var(--pg) !important;
  color: var(--ink);
}

.app {
  background:
    radial-gradient(46% 58% at 90% 4%, rgba(140, 200, 255, 0.3), transparent 62%),
    radial-gradient(44% 56% at 2% 98%, rgba(150, 235, 205, 0.26), transparent 64%),
    var(--pg);
}

/* 雾幕的三层渐变直接写在 style.css 里（浅色云），这里不再覆盖背景：
   之前用 !important 把整块改成同一张径向渐变，翻页只剩"闪一下白"，
   三层雾的先后关系全被压平了。 */

/* --------------------------------- 按钮 ---------------------------------- */
/* 朗文家的按钮是实色胶囊 + 底部一圈硬阴影（像实体键帽），不是发光渐变 */
.btn {
  border-radius: 999px;
  font-weight: 800;
  font-family: var(--font-cn);
}

.btn-primary {
  background: linear-gradient(180deg, #4a90ff, var(--blue)) !important;
  color: #ffffff !important;
  box-shadow: 0 0.4rem 0 var(--blue-deep), 0 0.9rem 1.8rem rgba(46, 123, 246, 0.26) !important;
}

.btn-primary:active {
  transform: translateY(0.26rem) !important;
  box-shadow: 0 0.12rem 0 var(--blue-deep) !important;
}

.btn-ghost {
  background: #ffffff !important;
  color: var(--ink-2) !important;
  border: 1.5px solid var(--line);
  box-shadow: none !important;
}

.btn-talk {
  background: linear-gradient(180deg, #4a90ff, var(--blue)) !important;
  color: #ffffff !important;
  box-shadow: 0 0.4rem 0 var(--blue-deep), 0 0.9rem 2rem rgba(46, 123, 246, 0.3) !important;
}

.btn-talk .talk-dot {
  background: #ffffff !important;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}

.btn-talk.is-recording {
  background: linear-gradient(180deg, #ff7a6a, #f2543f) !important;
  box-shadow: 0 0.4rem 0 #c53a27, 0 0.9rem 2rem rgba(242, 84, 63, 0.32) !important;
}

/* ---------------------------------- 顶栏 ---------------------------------- */
.hud {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 !important;
  background: none !important;
  z-index: 10;
}

.hud--solid {
  position: relative !important;
  background: none !important;
  border: none !important;
}

.hud-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: var(--ink) !important;
  border-radius: 999px;
  padding: 0.34rem 1rem 0.34rem 0.42rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: var(--shadow);
}

.guide-avatar {
  width: 1.9rem;
  height: 1.9rem;
  background: #ffe9d6;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.hud-progress {
  margin-left: auto;
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  font-family: var(--font-en);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.hud-close {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink-2);
  font-size: 1.05rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  flex: none;
}

/* -------------------------------- 故事页 --------------------------------- */
/* 左插画卡 + 右内容卡。插画宽度必须 ≥ 50%：舞台是 16:9 的 svg，
   卡片太窄会按 slice 裁掉两侧，三条船里外侧那条会被切出画面。 */
.screen-story {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: calc(0.85rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(0.85rem + var(--safe-b))
    calc(1rem + var(--safe-l));
  background: transparent;
}

.screen-story .stage {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0c1b38;
}

/* 卡内不再需要上下压角去抗文字——文字已经挪出去了，只留一层极淡的顶部渐变，
   让插画和上面的白顶栏之间有个"接住"的过渡 */
.screen-story .stage::after {
  background: linear-gradient(180deg, rgba(10, 24, 48, 0.34) 0%, rgba(10, 24, 48, 0) 26%) !important;
}

.side {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

/* 旁白卡：一条窄白卡，不是浮在图上的半透明条 */
.narrator {
  position: static !important;
  max-width: none !important;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  background: #ffffff;
  border-radius: var(--r-card);
  padding: 0.65rem 0.85rem;
  box-shadow: var(--shadow);
}

.narrator::before {
  display: none !important;
}

.narrator-text {
  font-family: var(--font-en);
  font-size: 1.1rem;
  line-height: 1.48;
  color: var(--ink-2) !important;
  text-shadow: none !important;
  font-weight: 500;
  margin: 0;
}

.narrator-replay {
  flex: none;
  width: 2.05rem;
  height: 2.05rem;
  border: none;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 1rem;
  cursor: pointer;
}

/* 台词卡：整栏的主表面。任务药丸 → 英文台词（主角）→ 中文 → 按钮 */
.linebar {
  position: relative !important;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  background: #ffffff !important;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

/* 台词卡下半截是空的（一句话就那么长），空着会像"没做完"。
   垫一圈极淡的声波环当背景纹样 —— 它同时承担"在等你的声音"这个语义，
   比塞一句提示文案安静，也不会抢台词。 */
.linebar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.4rem;
  width: 15rem;
  height: 15rem;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(46, 123, 246, 0.1);
  box-shadow:
    0 0 0 2.4rem rgba(46, 123, 246, 0.045),
    0 0 0 4.8rem rgba(46, 123, 246, 0.028),
    0 0 0 7.2rem rgba(46, 123, 246, 0.018);
  pointer-events: none;
  z-index: 0;
}

.linebar > * {
  position: relative;
  z-index: 1;
}

.linebar-task {
  align-self: flex-start;
  background: var(--green-soft);
  color: var(--green-deep) !important;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.72rem;
  border-radius: 999px;
  margin: 0;
}

.linebar-line {
  font-family: var(--font-en);
  font-size: 1.85rem;
  line-height: 1.22;
  font-weight: 800;
  color: var(--ink) !important;
  text-shadow: none !important;
  letter-spacing: -0.005em;
  margin: 0.1rem 0 0;
}

.linebar-zh {
  font-size: 1rem;
  color: var(--ink-3) !important;
  margin: 0;
}

.linebar-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: auto;
  padding: 0.5rem 0 0;
}

.linebar-actions .btn {
  font-size: 1.02rem;
  padding: 0.7rem 1rem;
  white-space: nowrap;
}

.linebar-actions .js-demo-say {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linebar-actions .btn-talk {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.linebar.is-done .linebar-line {
  color: var(--green-deep) !important;
}

.skip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 0.15rem;
  padding: 0 0.85rem;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink-3) !important;
  background: transparent !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px;
}

.skip:active {
  background: rgba(27, 42, 65, 0.06) !important;
}

.finger-tip {
  right: calc(1.4rem + var(--safe-r)) !important;
  bottom: calc(7.6rem + var(--safe-b)) !important;
  background: var(--ink) !important;
  color: #ffffff !important;
  border: none;
  font-size: 1.02rem;
  box-shadow: var(--shadow-lg);
}

/* 反馈：说成之后把右侧台词卡换成一张结果卡，不压住插画 */
.feedback {
  position: absolute;
  left: calc(50% + 1.4rem);
  right: calc(1.4rem + var(--safe-r));
  top: 50%;
  bottom: auto;
  transform: translateY(-46%) scale(0.97);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  background: #ffffff !important;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.feedback.is-in {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.feedback-plot {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink) !important;
  margin: 0;
  text-shadow: none !important;
}

.feedback-echo {
  font-family: var(--font-en);
  font-size: 1.14rem;
  line-height: 1.45;
  color: var(--ink-2) !important;
  margin: 0;
}

.feedback-stars {
  font-size: 1.5rem;
  letter-spacing: 0.28em;
  color: var(--star) !important;
  text-indent: 0;
}

.feedback .btn {
  margin-top: 0.5rem;
  width: 100%;
  font-size: 1.05rem;
  padding: 0.8rem 1.2rem;
}

/* ---------------------------------- 封面 --------------------------------- */
.screen-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
  gap: 1.4rem;
  padding: calc(1rem + var(--safe-t)) calc(2rem + var(--safe-r)) calc(1rem + var(--safe-b))
    calc(2.2rem + var(--safe-l));
  background: transparent !important;
}

.screen-cover .stage {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-height: 0;
  border-radius: 2.2rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0c1b38;
}

.screen-cover .stage::after {
  background: linear-gradient(180deg, rgba(10, 24, 48, 0.28) 0%, rgba(10, 24, 48, 0) 38%) !important;
}

.screen-cover .cover-scroll {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  max-width: none;
  padding: 0;
  text-align: left;
}

.cover-eyebrow {
  background: var(--blue-soft) !important;
  color: var(--blue-deep) !important;
  box-shadow: none !important;
  font-size: 1.04rem !important;
  padding: 0.3rem 0.9rem !important;
}

.cover-title-zh {
  color: var(--ink) !important;
  font-size: 3.5rem !important;
  text-shadow: none !important;
  letter-spacing: 0.06em;
}

.cover-title {
  color: var(--blue) !important;
  font-size: 1.5rem !important;
  text-shadow: none !important;
}

.cover-title span:last-child {
  color: var(--blue) !important;
}

.cover-pitch {
  color: var(--ink-2) !important;
  font-size: 1.15rem !important;
  margin-top: 0.85rem !important;
}

.screen-cover .cover-scroll::after {
  content: "★ 听说关 · 8 幕 · 约 4 分钟";
  background: #ffffff !important;
  color: var(--ink-2) !important;
  border: 1.5px solid var(--line) !important;
  padding: 0.3rem 0.9rem !important;
  font-size: 0.98rem !important;
  font-weight: 700;
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.screen-cover .cover-scroll > .btn {
  margin-top: 1.15rem !important;
  /* 封面这颗是整屏唯一的主按钮，上面只有"开始"两个字。
     原来 1.22rem（约 15.6px）字高只占按钮高的 0.29，夹在上面的英文大标题和
     下面 0.94rem 的说明之间，反而是整列里最小的一行，看起来像颗缩水的胶囊。
     提到 1.62rem（约 0.37 个身高），按钮高度不动，视觉重量才追得上标题。 */
  font-size: 1.62rem !important;
  padding: 0.85rem 2.35rem !important;
}

.cover-note {
  color: var(--ink-3) !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.02em;
}

/* --------------------------------- 配音页 --------------------------------- */
.screen-dubbing {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: calc(0.85rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(0.85rem + var(--safe-b))
    calc(1rem + var(--safe-l));
  background: transparent;
}

.screen-dubbing .stage {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0c1b38;
}

.screen-dubbing .stage::after {
  background: linear-gradient(180deg, rgba(10, 24, 48, 0.3) 0%, rgba(10, 24, 48, 0) 28%) !important;
}

.dub-panel {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1rem !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dub-lead {
  font-size: 1.1rem !important;
  font-weight: 800;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  margin: 0;
}

.dub-lines {
  gap: 0.45rem;
  margin-block: 0.1rem;
}

.dub-actions .btn-ghost {
  background: var(--card-2) !important;
  border: none !important;
  color: var(--ink-2) !important;
}

.dub-actions .btn-ghost:not(:disabled) {
  background: var(--blue-soft) !important;
  color: var(--blue-deep) !important;
}

.dub-line {
  background: var(--card-2) !important;
  border-radius: 1rem;
  padding: 0.5rem 0.6rem !important;
  border: 1.5px solid transparent !important;
}

.dub-line:has(.dub-state.is-ok) {
  background: var(--green-soft) !important;
  border-color: rgba(34, 192, 106, 0.45) !important;
}

.dub-no {
  color: var(--blue-deep) !important;
  font-size: 1.05rem !important;
  font-weight: 800;
}

.dub-text {
  color: var(--ink) !important;
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
}

.dub-hear {
  width: 2.15rem !important;
  height: 2.15rem !important;
  border: none !important;
  background: #ffffff !important;
  color: var(--blue-deep) !important;
  box-shadow: var(--shadow);
  font-size: 1rem !important;
}

.dub-state {
  color: var(--ink-3) !important;
  font-size: 0.98rem !important;
}

.dub-state.is-ok {
  color: var(--green-deep) !important;
  font-weight: 700;
}

.dub-note {
  color: var(--ink-3) !important;
  font-size: 0.96rem !important;
  line-height: 1.5;
  margin: 0;
}

.dub-actions {
  margin-top: 0;
  gap: 0.5rem;
}

.dub-actions .btn {
  font-size: 1rem;
  padding: 0.72rem 1rem;
}

/* --------------------------------- 答题页 --------------------------------- */
/* 单栏居中卡片：题干在上，选项是一条条白底药丸，左侧蓝色字母徽章 —— 对应客户
   答题页的形态。深色舞台在这里完全退场（答题是"读"，不是"看戏"）。 */
.screen-quiz {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: calc(0.85rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(0.85rem + var(--safe-b))
    calc(1rem + var(--safe-l));
  background: transparent !important;
}

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

.quiz-body {
  flex: 0 1 auto;
  min-height: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 62rem;
  margin: auto;
  padding: 1rem 1.3rem !important;
  background: #ffffff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.quiz-prompt {
  color: var(--ink) !important;
  font-family: var(--font-en);
  font-size: 1.62rem !important;
  font-weight: 800;
  text-align: left;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}

.quiz-prompt-zh {
  color: var(--ink-3) !important;
  font-size: 1rem !important;
  width: 100%;
  max-width: none !important;
  margin: 0 0 0.35rem !important;
  text-align: left;
}

.quiz-options {
  width: 100%;
  max-width: none !important;
  gap: 0.5rem !important;
}

.quiz-opt {
  border-radius: 1.1rem !important;
  background: var(--card-2) !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  padding: 0.6rem 0.9rem !important;
  gap: 0.7rem !important;
}

.quiz-opt .qicon {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 0.72rem;
  background: var(--blue);
  color: #ffffff;
  font-family: var(--font-en);
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 0.2rem 0 var(--blue-deep);
}

.quiz-opt-label {
  font-family: var(--font-en);
  font-size: 1.16rem;
  color: var(--ink) !important;
  line-height: 1.3;
}

.quiz-opt-zh {
  font-size: 0.96rem;
  color: var(--ink-3) !important;
}

.quiz-opt.is-right {
  background: var(--green-soft) !important;
  border-color: rgba(34, 192, 106, 0.5) !important;
}

.quiz-opt.is-right .qicon {
  background: var(--green);
  box-shadow: 0 0.2rem 0 var(--green-deep);
}

.quiz-opt.is-wrong {
  background: #fff0ee !important;
  border-color: rgba(242, 84, 63, 0.45) !important;
}

.quiz-opt.is-wrong .qicon {
  background: #f2543f;
  box-shadow: 0 0.2rem 0 #c53a27;
}

.screen-quiz .skip {
  margin-top: 0.4rem !important;
}

/* --------------------------------- 成就页 --------------------------------- */
.screen-achieve {
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: calc(0.9rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(0.9rem + var(--safe-b))
    calc(1rem + var(--safe-l));
}

.screen-achieve .achieve-card {
  background: #ffffff;
  border-radius: 2.2rem;
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.6rem;
  width: min(56rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.screen-achieve .achieve-bloom {
  display: none;
}

.achieve-art {
  height: 8.2rem;
  width: auto;
  margin: 0 auto -0.2rem;
}

.achieve-eyebrow {
  color: var(--green-deep) !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em;
  margin: 0;
}

.achieve-title {
  color: var(--ink) !important;
  font-size: 2.2rem !important;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: none !important;
  margin: 0;
  line-height: 1.1;
}

.achieve-sub {
  color: var(--ink-2) !important;
  font-size: 1.02rem !important;
  margin: 0.15rem 0 0.4rem;
}

.achieve-stats {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}

.achieve-stats div {
  flex: 1;
  background: var(--card-2) !important;
  border-radius: 1.1rem;
  padding: 0.5rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.achieve-stats b {
  color: var(--ink) !important;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.achieve-stats span {
  color: var(--ink-3) !important;
  font-size: 0.94rem;
}

.achieve-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
  width: 100%;
  justify-content: center;
}

.achieve-actions .btn {
  font-size: 1.02rem;
  padding: 0.72rem 1.3rem;
}

.report-entry {
  margin-top: 0.45rem;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--blue-deep) !important;
  background: var(--blue-soft) !important;
  border: none !important;
  border-radius: 999px;
  padding: 0.42rem 1.1rem;
  cursor: pointer;
}

/* --------------------------------- 报告页 --------------------------------- */
.screen-report {
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: calc(0.85rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(0.85rem + var(--safe-b))
    calc(1rem + var(--safe-l));
}

.report-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 !important;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0 !important;
  border-bottom: none !important;
  font-weight: 400 !important;
}

.report-summary div {
  background: #ffffff;
  border-radius: 1.1rem;
  box-shadow: var(--shadow);
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.report-summary b {
  color: var(--ink) !important;
  font-family: var(--font-en);
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.2;
}

.report-summary span {
  color: var(--ink-3) !important;
  font-size: 0.94rem;
  letter-spacing: 0 !important;
}

.report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0 !important;
  background: #ffffff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  font-size: 0.98rem;
  color: var(--ink-2) !important;
  padding: 0.2rem;
}

.report-table thead th:first-child {
  border-top-left-radius: 1.2rem;
}

.report-table thead th:last-child {
  border-top-right-radius: 1.2rem;
}

.report-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--r-card);
}

.report-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--r-card);
}

.report-table th {
  background: var(--card-2);
  color: var(--ink-3) !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none !important;
}

.report-table td {
  padding: 0.45rem 0.6rem;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  color: var(--ink-2);
}

.report-table .cell-line {
  color: var(--ink) !important;
  font-family: var(--font-en);
  font-size: 1.02rem;
}

.band {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.band--great {
  background: var(--green-soft);
  color: var(--green-deep);
}

.band--ok {
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.band--retry {
  background: #fff0ee;
  color: #c53a27;
}

.report-note {
  color: var(--ink-3) !important;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0.35rem 0 0 !important;
}

/* 环境提示条：浅底上要能看清 */
.envbar {
  background: #fff4d6 !important;
  color: #7a5200 !important;
  border-bottom: 1px solid #f0dca6;
}

/* -------------------------------- 矮视口兜底 ------------------------------- */
/* 真机 CSS 视口只有 837×388，横屏矮到 388px。卡片间距和字号必须再收一档，
   否则台词卡会把"跳过"顶出可视区（成就页之前就是这么被裁的）。 */
@media (max-height: 470px) {
  .screen-story,
  .screen-dubbing,
  .screen-quiz {
    gap: 0.6rem;
    padding-top: calc(0.6rem + var(--safe-t));
    padding-bottom: calc(0.6rem + var(--safe-b));
  }

  .hud-title {
    font-size: 1.08rem;
    padding: 0.26rem 0.85rem 0.26rem 0.34rem;
  }

  .guide-avatar {
    width: 1.7rem;
    height: 1.7rem;
  }

  .hud-progress {
    font-size: 1rem;
    padding: 0.24rem 0.8rem;
  }

  .hud-close {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.96rem;
  }

  .narrator {
    padding: 0.5rem 0.7rem;
  }

  .narrator-text {
    font-size: 1rem;
    line-height: 1.42;
  }

  .linebar {
    padding: 0.7rem 0.85rem;
    gap: 0.3rem;
  }

  .linebar-line {
    font-size: 1.6rem;
  }

  .linebar-actions .btn {
    font-size: 0.96rem;
    padding: 0.6rem 0.8rem;
  }

  .skip {
    min-height: 28px;
    font-size: 0.9rem;
  }

  .achieve-card {
    padding: 0.8rem 1.2rem;
  }

  .achieve-art {
    height: 4.6rem;
  }

  .achieve-title {
    font-size: 1.8rem !important;
  }

  .achieve-sub {
    font-size: 0.94rem !important;
  }

  .quiz-prompt {
    font-size: 1.4rem !important;
  }

  .quiz-opt-label {
    font-size: 1.06rem;
  }
}