/* ============================================================
 * 一年级学习乐园 - 样式表 v2（美术升级版）
 * 移动端优先：手机 / 平板横竖屏自适应
 *
 * 美术要点：
 * - 三层阴影体系（贴地 / 悬浮 / 高光），让卡片有真实厚度
 * - 柔和渐变色 + 内高光，避免纯色扁平感
 * - 背景装饰元素缓慢浮动，页面"呼吸"
 * - 触摸目标 ≥60px，反馈 <100ms
 * ============================================================ */

:root {
  --app-max: 720px;
  --radius: 22px;
  --radius-sm: 16px;
  --radius-xs: 12px;

  /* 三层阴影：贴地、悬浮、高光 */
  --sh-1: 0 1px 2px rgba(70, 85, 120, .06), 0 2px 6px rgba(70, 85, 120, .06);
  --sh-2: 0 2px 4px rgba(70, 85, 120, .07), 0 6px 16px rgba(70, 85, 120, .09);
  --sh-3: 0 4px 8px rgba(70, 85, 120, .09), 0 12px 32px rgba(70, 85, 120, .13);
  --sh-in: inset 0 1px 0 rgba(255, 255, 255, .55);

  --text: #2A3350;
  --text-sub: #78839F;
  --text-dim: #A6AFC6;
  --bg: #F2F6FE;
  --card: #FFFFFF;
  --line: #E9EFFA;

  --ok: #3FC08A;
  --ok-dark: #2AA26F;
  --no: #F2686C;
  --no-dark: #D64A50;
  --gold: #FFC53D;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  color: var(--text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  background: var(--bg);
}

/* 细微纸张纹理，避免大面积纯色的塑料感 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .30;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,150,255,.05) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,180,120,.05) 0%, transparent 45%);
}

/* ---------- 应用外壳 ---------- */
#app {
  width: 100%;
  max-width: var(--app-max);
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

/* 背景装饰：缓慢浮动的光斑 */
#bgDecor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#bgDecor i {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .42;
  animation: drift 18s ease-in-out infinite;
}
#bgDecor i:nth-child(1) {
  width: 190px; height: 190px;
  background: rgba(120,155,255,.42);
  top: -60px; left: -50px;
  animation-duration: 21s;
}
#bgDecor i:nth-child(2) {
  width: 150px; height: 150px;
  background: rgba(255,175,120,.36);
  top: 34%; right: -60px;
  animation-duration: 25s;
  animation-delay: -6s;
}
#bgDecor i:nth-child(3) {
  width: 170px; height: 170px;
  background: rgba(110,215,180,.32);
  bottom: -50px; left: 22%;
  animation-duration: 23s;
  animation-delay: -12s;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(22px, -18px) scale(1.10); }
  66% { transform: translate(-16px, 16px) scale(.94); }
}

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.32,.72,.35,1);
  overflow: hidden;
}
.page.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 2;
}
.page.leaving { transform: translateX(-24px); }

/* ---------- 顶部栏 ---------- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) 20px 14px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(233,239,250,.9);
  min-height: 66px;
  position: relative;
  z-index: 3;
}

.topbar h1 {
  flex: 1;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(180deg, #F6F9FF 0%, #EAF1FD 100%);
  color: var(--text);
  font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-1), var(--sh-in);
  transition: transform .13s, box-shadow .13s, filter .13s;
}
.icon-btn:active {
  transform: scale(.92);
  box-shadow: 0 1px 2px rgba(70,85,120,.10);
  filter: brightness(.97);
}

/* 顶部统计条 */
.stat-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 9px;
  padding: 12px 16px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(233,239,250,.7);
}
.stat-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #F8FAFF 0%, #EEF3FD 100%);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--sh-in), 0 1px 2px rgba(70,85,120,.04);
}
.stat-pill .em { font-size: 17px; }
.stat-pill.gold {
  background: linear-gradient(180deg, #FFF9E8 0%, #FFF1CE 100%);
  color: #A87400;
}

/* ---------- 滚动区 ---------- */
.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 16px calc(30px + var(--safe-bottom));
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 首页欢迎卡 ---------- */
.hero {
  border-radius: var(--radius);
  padding: 24px 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.26) 0%, transparent 52%),
    linear-gradient(135deg, #6B8AFF 0%, #8AA5FF 48%, #A8BEFF 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(105,138,255,.34), inset 0 1px 0 rgba(255,255,255,.30);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -36px; top: -36px;
  width: 138px; height: 138px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.hero::before {
  content: '';
  position: absolute;
  right: 40px; bottom: -50px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.hero h2 {
  margin: 0 0 7px;
  font-size: 22px;
  font-weight: 800;
  position: relative; z-index: 1;
  letter-spacing: .2px;
}
.hero p {
  margin: 0;
  font-size: 14.5px;
  opacity: .94;
  position: relative; z-index: 1;
}
.hero-stars {
  position: relative; z-index: 1;
  margin-top: 16px;
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 800;
}
.hero-bar {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.28);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
}
.hero-bar > i {
  display: block;
  height: 100%;
  border-radius: 5px;
  width: 0;
  background: linear-gradient(90deg, #FFD970 0%, #FFC53D 100%);
  box-shadow: 0 0 10px rgba(255,197,61,.7);
  transition: width .8s cubic-bezier(.3,.8,.35,1);
}

/* ---------- 科目卡 ---------- */
.sec-title {
  font-size: 15.5px;
  font-weight: 800;
  margin: 4px 0 13px 5px;
  color: var(--text-sub);
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sec-title::before {
  content: '';
  width: 4px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8AA5FF, #B9C9FF);
}

.subject-grid { display: grid; gap: 15px; }

.subject-card {
  border-radius: var(--radius);
  padding: 21px 19px;
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
}
.subject-card::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
.subject-card:active {
  transform: scale(.975);
  box-shadow: var(--sh-1);
}
.subject-card .ico {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 19px;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 31px;
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 8px rgba(0,0,0,.08);
  position: relative; z-index: 1;
}
.subject-card .meta { flex: 1; min-width: 0; position: relative; z-index: 1; }
.subject-card .meta b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.subject-card .meta span {
  display: block;
  font-size: 13.5px;
  opacity: .92;
  line-height: 1.4;
}
.subject-card .prog-ring {
  flex: 0 0 auto;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  position: relative; z-index: 1;
}
.subject-card .prog-ring b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 2px;
}

/* ---------- 关卡列表 ---------- */
.level-list { display: grid; gap: 13px; }

.level-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s;
  border: 1.5px solid rgba(255,255,255,.9);
  min-height: 88px;
  position: relative;
  overflow: hidden;
}
.level-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #8AA5FF, #B9C9FF);
  opacity: 0;
  transition: opacity .18s;
}
.level-card:active { transform: scale(.98); box-shadow: var(--sh-1); }
.level-card.locked { opacity: .58; }
.level-card.locked .lv-ico { background: #F0F3FA !important; }

/* 已完成关卡左侧彩条 */
.level-card.done::before { opacity: 1; }
.level-card.perfect::before { background: linear-gradient(180deg, #FFD970, #FFC53D); }

.lv-ico {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px;
  background: linear-gradient(180deg, #F6F9FF 0%, #EAF1FD 100%);
  box-shadow: var(--sh-in), 0 1px 3px rgba(70,85,120,.06);
  position: relative;
}
.lv-info { flex: 1; min-width: 0; }
.lv-info b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-info span {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.4;
}
.lv-right {
  flex: 0 0 auto;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}
.lv-stars { letter-spacing: 1px; font-size: 16px; }
.lv-stars i { font-style: normal; opacity: .20; }
.lv-stars i.on {
  opacity: 1;
  filter: drop-shadow(0 1px 3px rgba(255,180,0,.42));
}

/* ---------- 答题页 ---------- */
.quiz-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 16px;
  position: relative;
}

/* 答题页背景装饰：漂浮的小图标，填充留白 */
.quiz-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.quiz-decor i {
  position: absolute;
  opacity: .18;
  animation: floatDeco 7s ease-in-out infinite;
  font-style: normal;
  line-height: 1;
}
.quiz-decor i:nth-child(1) { left: 4%;  top: 17%;  font-size: 34px; animation-delay: 0s;   animation-duration: 8s; }
.quiz-decor i:nth-child(2) { right: 5%; top: 23%;  font-size: 28px; animation-delay: -2s;  animation-duration: 9.5s; }
.quiz-decor i:nth-child(3) { left: 7%;  bottom: 20%; font-size: 30px; animation-delay: -4s;  animation-duration: 7.5s; }
.quiz-decor i:nth-child(4) { right: 6%; bottom: 15%; font-size: 26px; animation-delay: -6s;  animation-duration: 10s; }
.quiz-decor i:nth-child(5) { left: 48%; top: 9%;   font-size: 22px; animation-delay: -3s;  animation-duration: 8.5s; }
.quiz-decor i:nth-child(6) { right: 40%; bottom: 7%; font-size: 24px; animation-delay: -1s;  animation-duration: 9s; }

@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); opacity: .16; }
  50% { transform: translateY(-16px) rotate(8deg) scale(1.14); opacity: .28; }
}

.qprogress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0 11px;
  position: relative;
  z-index: 2;
}
.qprogress .bar {
  flex: 1;
  height: 13px;
  border-radius: 7px;
  background: #E5EBF8;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(70,85,120,.10);
}
.qprogress .bar > i {
  display: block;
  height: 100%;
  border-radius: 7px;
  width: 0;
  background: linear-gradient(90deg, #6B8AFF, #9DB4FF);
  box-shadow: 0 0 10px rgba(107,138,255,.5);
  transition: width .4s cubic-bezier(.3,.8,.35,1);
  position: relative;
}
.qprogress .bar > i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34), transparent 60%);
  border-radius: 7px;
}
.qprogress .num {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-sub);
  min-width: 58px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.qcard {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 0;
  padding: 4px 0;
  position: relative;
  z-index: 2;
}
.qcard.enter { animation: qIn .32s cubic-bezier(.32,.72,.35,1); }
@keyframes qIn {
  from { opacity: 0; transform: translateY(15px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 题干 + 吉祥物的组合行 */
.q-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.q-head .mascot-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.34,1.5,.64,1);
}
.q-head .mascot-slot.pulse { animation: mascotPulse .5s cubic-bezier(.34,1.5,.64,1); }
@keyframes mascotPulse {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.22) rotate(-8deg); }
  70% { transform: scale(1.06) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
.q-head .mascot-slot.shake { animation: mascotShake .5s; }
@keyframes mascotShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px) rotate(-5deg); }
  55% { transform: translateX(6px) rotate(4deg); }
  80% { transform: translateX(-3px); }
}

.q-text {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius);
  padding: 26px 22px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
  word-break: break-word;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 选项 */
.opts {
  display: grid;
  gap: 13px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}
.opts.grid2 { grid-template-columns: 1fr 1fr; }
.opts.grid1 { grid-template-columns: 1fr; }

.opt {
  border: 1.5px solid rgba(255,255,255,.95);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  color: var(--text);
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  padding: 18px 14px;
  min-height: 72px;
  cursor: pointer;
  box-shadow: var(--sh-2);
  transition: transform .13s cubic-bezier(.34,1.4,.64,1), background .20s, color .20s, box-shadow .20s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  word-break: break-word;
}
.opt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 52%);
  pointer-events: none;
  border-radius: inherit;
}
.opt:active:not(:disabled) {
  transform: scale(.968);
  box-shadow: var(--sh-1);
}
.opt:disabled { cursor: default; }
.opt .badge {
  flex: 0 0 auto;
  width: 31px; height: 31px;
  border-radius: 10px;
  background: linear-gradient(180deg, #F6F9FF, #E8EFFC);
  color: var(--text-sub);
  font-size: 15px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-in), 0 1px 2px rgba(70,85,120,.06);
  position: relative; z-index: 1;
}
.opt > span:last-child { position: relative; z-index: 1; }

.opt.correct {
  background: linear-gradient(180deg, #4FD09A 0%, #38B37F 100%);
  color: #fff;
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 6px 22px rgba(63,192,138,.42), inset 0 1px 0 rgba(255,255,255,.34);
  animation: correctPulse .42s cubic-bezier(.34,1.5,.64,1);
}
.opt.correct .badge {
  background: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: none;
}
@keyframes correctPulse {
  0% { transform: scale(1); }
  42% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.opt.wrong {
  background: linear-gradient(180deg, #F47C80 0%, #DE5A60 100%);
  color: #fff;
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 6px 20px rgba(242,104,108,.38);
  animation: shake .44s;
}
.opt.wrong .badge { background: rgba(255,255,255,.26); color: #fff; box-shadow: none; }
.opt.dim { opacity: .40; }

@keyframes shake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  16% { transform: translateX(-9px) rotate(-1deg); }
  34% { transform: translateX(8px) rotate(1deg); }
  52% { transform: translateX(-6px) rotate(-.6deg); }
  70% { transform: translateX(4px) rotate(.4deg); }
  86% { transform: translateX(-2px); }
}

/* 答题底部 */
.qfoot {
  flex: 0 0 auto;
  padding: 13px 0 calc(17px + var(--safe-bottom));
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tip-box {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .26s, transform .26s;
  pointer-events: none;
  box-shadow: var(--sh-in);
}
.tip-box.show { opacity: 1; transform: none; }
.tip-box.good {
  background: linear-gradient(180deg, #E7FAF1 0%, #D6F5E6 100%);
  color: #197A50;
  border: 1px solid rgba(63,192,138,.22);
}
.tip-box.bad {
  background: linear-gradient(180deg, #FDEFF0 0%, #FBE2E4 100%);
  color: #B83A40;
  border: 1px solid rgba(242,104,108,.22);
}

.btn-next {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-sm);
  padding: 19px 31px;
  min-height: 62px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #7B96FF 0%, #5F7DFF 100%);
  box-shadow: 0 6px 20px rgba(95,125,255,.40), inset 0 1px 0 rgba(255,255,255,.30);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .20s, transform .13s;
}
.btn-next.show { opacity: 1; pointer-events: auto; }
.btn-next:active { transform: scale(.96); }

/* ---------- 结算页 ---------- */
.result-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px calc(26px + var(--safe-bottom));
  text-align: center;
  gap: 6px;
  overflow-y: auto;
}
.result-emoji {
  font-size: 76px;
  line-height: 1;
  animation: pop .55s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 6px 16px rgba(70,85,120,.18));
}
@keyframes pop {
  0% { transform: scale(.3) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.result-title {
  font-size: 28px;
  font-weight: 800;
  margin: 10px 0 3px;
  letter-spacing: .3px;
}
.result-sub {
  font-size: 15.5px;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.result-stars {
  font-size: 46px;
  letter-spacing: 6px;
  margin: 8px 0 12px;
}
.result-stars i { font-style: normal; opacity: .18; }
.result-stars i.on {
  opacity: 1;
  animation: starIn .5s backwards cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 2px 8px rgba(255,180,0,.48));
}
.result-stars i.on:nth-child(1) { animation-delay: .12s; }
.result-stars i.on:nth-child(2) { animation-delay: .30s; }
.result-stars i.on:nth-child(3) { animation-delay: .48s; }
@keyframes starIn {
  from { transform: scale(0) rotate(-50deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.result-stats {
  display: flex;
  gap: 11px;
  width: 100%;
  max-width: 410px;
  margin: 14px 0 20px;
}
.result-stats > div {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 15px 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  box-shadow: var(--sh-2);
  border: 1.5px solid rgba(255,255,255,.9);
}
.result-stats b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #5F7DFF;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.result-stats span {
  font-size: 12.5px;
  color: var(--text-sub);
  font-weight: 700;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 410px;
}
.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  min-height: 62px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .13s cubic-bezier(.34,1.4,.64,1), box-shadow .13s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #7B96FF 0%, #5F7DFF 100%);
  box-shadow: 0 6px 20px rgba(95,125,255,.38), inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-ghost {
  color: var(--text);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
  box-shadow: var(--sh-2);
  border: 1.5px solid rgba(255,255,255,.9);
}

/* 错题回顾 */
.wrong-list {
  width: 100%;
  max-width: 470px;
  text-align: left;
  margin-top: 17px;
  display: grid;
  gap: 11px;
}
.wrong-item {
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBFB 100%);
  box-shadow: var(--sh-2);
  border-left: 5px solid var(--no);
  position: relative;
}
.wrong-item .q {
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 7px;
  line-height: 1.5;
}
.wrong-item .a {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.55;
}
.wrong-item .a em {
  font-style: normal;
  color: var(--ok-dark);
  font-weight: 800;
}
.wrong-item .a s {
  color: var(--no-dark);
  text-decoration-thickness: 2px;
}

/* ---------- 家长端 ---------- */
.gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 26px;
  gap: 18px;
  text-align: center;
}
.gate .lock-ico {
  font-size: 62px;
  filter: drop-shadow(0 6px 16px rgba(70,85,120,.16));
}
.gate h3 { margin: 0; font-size: 21px; font-weight: 800; }
.gate p { margin: 0; font-size: 14.5px; color: var(--text-sub); line-height: 1.65; }
.gate input {
  width: 100%;
  max-width: 320px;
  padding: 18px;
  font-size: 19px;
  font-family: inherit;
  border: 2px solid #E3EAF8;
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: center;
  letter-spacing: 3px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  min-height: 62px;
  box-shadow: var(--sh-in);
}
.gate input:focus {
  border-color: #8AA5FF;
  box-shadow: 0 0 0 4px rgba(138,165,255,.16);
}
.gate .err { color: var(--no-dark); font-size: 14px; font-weight: 700; min-height: 20px; }

/* 报告卡 */
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 20px;
}
.report-card {
  border-radius: var(--radius-sm);
  padding: 17px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  box-shadow: var(--sh-2);
  border: 1.5px solid rgba(255,255,255,.9);
}
.report-card .label {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 700;
  margin-bottom: 7px;
}
.report-card .value {
  font-size: 27px;
  font-weight: 800;
  color: #5F7DFF;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.report-card .unit { font-size: 14px; font-weight: 700; margin-left: 3px; }

/* 科目报告行 */
.subj-report {
  border-radius: var(--radius-sm);
  padding: 17px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  box-shadow: var(--sh-2);
  margin-bottom: 13px;
  border: 1.5px solid rgba(255,255,255,.9);
}
.subj-report .head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
}
.subj-report .head .ico {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: linear-gradient(180deg, #F6F9FF, #EAF1FD);
  box-shadow: var(--sh-in);
}
.subj-report .head b { flex: 1; font-size: 17px; font-weight: 800; }
.subj-report .head span {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}

.meter {
  height: 12px;
  border-radius: 6px;
  background: #EDF1FA;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 3px rgba(70,85,120,.09);
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: 6px;
  transition: width .8s cubic-bezier(.3,.8,.35,1);
  position: relative;
}
.meter > i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.36), transparent 58%);
  border-radius: 6px;
}
.subj-report .detail {
  font-size: 13.5px;
  color: var(--text-sub);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 600;
}

/* 空状态 */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-sub);
}
.empty .ico {
  font-size: 56px;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(70,85,120,.12));
}
.empty p { margin: 0; font-size: 15px; line-height: 1.65; }

/* ---------- 特效层 ---------- */
#fxLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.float-xp {
  position: absolute;
  font-size: 30px;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(255,180,0,.60), 0 0 3px rgba(255,255,255,.9);
  animation: floatUp 1.1s cubic-bezier(.2,.7,.3,1) forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  22% { opacity: 1; transform: translate(-50%, -20px) scale(1.20); }
  100% { opacity: 0; transform: translate(-50%, -100px) scale(1); }
}

/* 飞向顶部的星星 */
.fly-star {
  position: absolute;
  font-size: 26px;
  pointer-events: none;
  z-index: 1000;
  filter: drop-shadow(0 2px 8px rgba(255,180,0,.55));
  transition: none;
}

.confetti {
  position: absolute;
  width: 9px; height: 14px;
  border-radius: 2px;
  animation: confFall linear forwards;
}
@keyframes confFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(105vh) rotate(720deg); }
}

/* 全屏庆祝 */
#celebrate {
  position: fixed; inset: 0;
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#celebrate.show { display: flex; }
.celebrate-inner { text-align: center; animation: pop .55s cubic-bezier(.34,1.56,.64,1); }
.celebrate-inner .big {
  font-size: 98px;
  line-height: 1;
  filter: drop-shadow(0 8px 22px rgba(70,85,120,.20));
}
.celebrate-inner .t {
  font-size: 27px;
  font-weight: 800;
  margin-top: 16px;
  color: var(--text);
}
.celebrate-inner .s {
  font-size: 15.5px;
  color: var(--text-sub);
  margin-top: 7px;
}

/* ---------- 平板 / 横屏增强 ---------- */
@media (min-width: 640px) {
  :root { --app-max: 780px; }
  body { font-size: 18px; }
  .q-text { font-size: 29px; padding: 34px 30px; }
  .opt { font-size: 23px; min-height: 78px; }
  .subject-card { min-height: 110px; }
  .subject-grid { grid-template-columns: 1fr 1fr; }
  .subject-card:first-child { grid-column: 1 / -1; }
  .hero h2 { font-size: 25px; }
  .hero { padding: 28px 26px; }
  .report-grid { grid-template-columns: repeat(4, 1fr); }
  .level-list { grid-template-columns: 1fr 1fr; }
}

/* 横屏矮屏：压缩纵向留白，避免滚动 */
@media (orientation: landscape) and (max-height: 580px) {
  .topbar { padding: calc(8px + var(--safe-top)) 18px 8px; min-height: 54px; }
  .topbar h1 { font-size: 18px; }
  .icon-btn { width: 42px; height: 42px; font-size: 18px; border-radius: 13px; }
  .qprogress { padding: 9px 0 7px; }
  .qcard { gap: 12px; }
  .q-text { font-size: 21px; padding: 18px 20px; border-radius: 18px; }
  .opts { gap: 10px; }
  .opt { min-height: 58px; padding: 13px 14px; font-size: 18px; }
  .qfoot { padding: 9px 0 calc(11px + var(--safe-bottom)); min-height: 62px; }
  .btn-next { min-height: 54px; padding: 15px 25px; font-size: 17px; }
  .result-emoji { font-size: 52px; }
  .result-title { font-size: 22px; }
  .result-stars { font-size: 34px; margin: 3px 0 7px; }
  .result-stats { margin: 9px 0 13px; }
  .result-actions { flex-direction: row; max-width: 540px; }
  .result-actions .btn { flex: 1; }
  .scroll { padding-top: 13px; }
  .hero { padding: 18px 20px; margin-bottom: 15px; }
  .hero h2 { font-size: 19px; }
  .subject-card { min-height: 82px; padding: 16px; }
  .subject-card .ico { width: 50px; height: 50px; font-size: 26px; }
  .level-card { min-height: 76px; padding: 13px; }
  /* 横屏时吉祥物缩小，把空间让给题目本身 */
  .q-head .mascot-slot svg { width: 52px; height: 52px; }
  .mascot-hero { padding: 12px 14px; margin-bottom: 13px; gap: 11px; }
  .mascot-hero .txt b { font-size: 15px; }
  .mascot-hero .txt span { font-size: 12.5px; }
  .mascot-hero > div:first-child svg { width: 48px; height: 48px; }
  .quiz-decor i:nth-child(1) { font-size: 26px; }
  .quiz-decor i:nth-child(2) { font-size: 22px; }
  .quiz-decor i:nth-child(3) { font-size: 24px; }
  .quiz-decor i:nth-child(4) { font-size: 20px; }
  .quiz-decor i:nth-child(5) { display: none; }
  .quiz-decor i:nth-child(6) { display: none; }
}

/* 宽屏横屏：答题区居中 */
@media (min-width: 900px) and (orientation: landscape) {
  :root { --app-max: 920px; }
  .quiz-wrap { max-width: 800px; margin: 0 auto; width: 100%; }
  .subject-grid { grid-template-columns: repeat(3, 1fr); }
  .subject-card:first-child { grid-column: auto; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.sound-off { opacity: .42; }

/* ---------- 吉祥物 ---------- */
.mascot {
  display: block;
  filter: drop-shadow(0 4px 10px rgba(232,154,24,.28));
  transition: filter .3s;
}
.mascot-happy, .mascot-cheer {
  filter: drop-shadow(0 6px 16px rgba(255,193,61,.55));
  animation: mascotBob 1.6s ease-in-out infinite;
}
.mascot-sad {
  filter: drop-shadow(0 4px 10px rgba(143,163,207,.30));
}
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.mascot-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.mascot-bubble {
  background: #fff;
  border-radius: 14px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  box-shadow: var(--sh-2);
  margin-bottom: 7px;
  white-space: nowrap;
  position: relative;
  animation: bubblePop .32s cubic-bezier(.34,1.5,.64,1);
}
.mascot-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
@keyframes bubblePop {
  from { opacity: 0; transform: scale(.7) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 首页吉祥物展示位 */
.mascot-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #FFF9E8 0%, #FFF3D4 100%);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.8);
  border: 1.5px solid rgba(255,255,255,.9);
}
.mascot-hero .txt { flex: 1; min-width: 0; }
.mascot-hero .txt b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 3px;
  color: #9A6B00;
}
.mascot-hero .txt span {
  display: block;
  font-size: 13.5px;
  color: #B08033;
  line-height: 1.45;
}

/* ============================================================
 * 互动游戏模块
 *
 * 与主应用共用设计语言：三层阴影、柔和渐变、≥60px 触摸目标
 * 游戏特有的部分：
 *  - HUD（分数/连击/时间/生命）常驻顶部，读状态不用找
 *  - 卡牌有"碎裂/爆开/抖动/提示"四类反馈动画
 *  - 结束浮层带入场缩放，给收尾仪式感
 * ============================================================ */

/* ---------- 游戏外壳 ---------- */
.game-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 16px;
  position: relative;
}
.game-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.game-decor::before,
.game-decor::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .38;
}
.game-decor::before {
  width: 190px; height: 190px;
  background: rgba(120,155,255,.40);
  top: 6%; left: -70px;
  animation: drift 19s ease-in-out infinite;
}
.game-decor::after {
  width: 160px; height: 160px;
  background: rgba(255,180,120,.36);
  bottom: 8%; right: -66px;
  animation: drift 24s ease-in-out infinite reverse;
}

/* ---------- HUD ---------- */
.game-hud {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 14px 0 10px;
  position: relative;
  z-index: 2;
}
.hud-item {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 8px 6px 9px;
  text-align: center;
  box-shadow: var(--sh-2), var(--sh-in);
  border: 1.5px solid rgba(255,255,255,.9);
  transition: transform .18s cubic-bezier(.34,1.5,.64,1), box-shadow .18s;
}
.hud-item .k {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .4px;
  margin-bottom: 1px;
}
.hud-item b {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.hud-item.combo b { color: #FF8A3D; }
.hud-item.time b { color: #4E8DF5; }
.hud-item.time.urgent b { color: var(--no); }
.hud-item.time.urgent { animation: urgentPulse .7s ease-in-out infinite; }
.hud-item.lives b { font-size: 17px; letter-spacing: 1px; }
.hud-item.combo.flash {
  transform: scale(1.10);
  box-shadow: 0 0 0 3px rgba(255,138,61,.34), var(--sh-2);
}
@keyframes urgentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---------- 时间条 ---------- */
.time-bar {
  flex: 0 0 auto;
  height: 11px;
  border-radius: 6px;
  background: #E5EBF8;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(70,85,120,.10);
  position: relative;
  z-index: 2;
}
.time-bar > i {
  display: block;
  height: 100%;
  border-radius: 6px;
  width: 100%;
  background: linear-gradient(90deg, #4EC3A8, #7FE0C8);
  box-shadow: 0 0 10px rgba(78,195,168,.5);
  transition: width .1s linear, background .3s;
}
.time-bar > i.low {
  background: linear-gradient(90deg, #F2686C, #FF9E9E);
  box-shadow: 0 0 12px rgba(242,104,108,.6);
}

/* ---------- 题目区 ---------- */
.gm-question {
  flex: 0 0 auto;
  text-align: center;
  padding: 20px 12px 6px;
  position: relative;
  z-index: 2;
}
.gm-qtext {
  font-size: 40px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 1px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.gm-qtext.pop { animation: qPop .42s cubic-bezier(.34,1.5,.64,1); }
@keyframes qPop {
  0% { transform: scale(.62); opacity: .3; }
  62% { transform: scale(1.10); opacity: 1; }
  100% { transform: scale(1); }
}
.gm-qsub {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ---------- 数学：答案卡牌 ---------- */
.gm-slots {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 11px;
  padding: 12px 0 16px;
  min-height: 0;
  position: relative;
  z-index: 2;
}
.gm-slot {
  position: relative;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #FFFFFF 0%, #F3F7FF 100%);
  box-shadow: var(--sh-2), var(--sh-in);
  font-family: inherit;
  font-size: 34px;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  min-height: 66px;
  transition: transform .14s cubic-bezier(.34,1.5,.64,1), box-shadow .14s, opacity .2s;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.gm-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent 55%);
  border-radius: var(--radius);
  pointer-events: none;
}
.gm-slot:active {
  transform: scale(.94);
  box-shadow: var(--sh-1);
}
.gm-slot.boom {
  animation: slotBoom .34s cubic-bezier(.34,1.5,.64,1);
  background: linear-gradient(160deg, #5FD3B0, #3FC08A);
  color: #fff;
}
@keyframes slotBoom {
  0% { transform: scale(1); }
  40% { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(.9); opacity: 0; }
}
.gm-slot.hint {
  box-shadow: 0 0 0 4px rgba(63,192,138,.5), var(--sh-2);
  background: linear-gradient(160deg, #E6FBF3, #CFF5E7);
}
.gm-slot.shake { animation: gsShake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes gsShake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-8px) rotate(-2deg); }
  38% { transform: translateX(8px) rotate(2deg); }
  58% { transform: translateX(-5px); }
  78% { transform: translateX(5px); }
}
.gm-slot.dead {
  opacity: .34;
  pointer-events: none;
  filter: grayscale(.7);
}

/* ---------- 语文：连连看牌面 ---------- */
.wm-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 0 16px;
  min-height: 0;
  position: relative;
  z-index: 2;
}
.wm-card {
  position: relative;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F5FF 100%);
  box-shadow: var(--sh-2), var(--sh-in);
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1.25;
  word-break: break-all;
  min-height: 62px;
  opacity: 0;
  animation: wmIn .38s cubic-bezier(.34,1.5,.64,1) forwards;
  transition: transform .14s cubic-bezier(.34,1.5,.64,1), box-shadow .14s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.wm-card.long { font-size: 15px; }
@keyframes wmIn {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to { opacity: 1; transform: none; }
}
.wm-card:active { transform: scale(.95); }
.wm-card.sel {
  background: linear-gradient(160deg, #FFF3D4, #FFE8AE);
  box-shadow: 0 0 0 4px rgba(255,197,61,.55), var(--sh-2);
  transform: translateY(-3px) scale(1.03);
}
/* .done 写在 .sel 之后并显式清掉 transform，确保配对成功的牌不会残留选中态的位移/高亮 */
.wm-card.done {
  background: linear-gradient(160deg, #5FD3B0, #3FC08A);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(63,192,138,.34), var(--sh-1);
  transform: none;
  animation: wmDone .42s cubic-bezier(.34,1.5,.64,1);
}
@keyframes wmDone {
  0% { transform: scale(1); }
  45% { transform: scale(1.16) rotate(-3deg); }
  100% { transform: scale(1); }
}
.wm-card.bad {
  background: linear-gradient(160deg, #FFD9DA, #FFC2C4);
  box-shadow: 0 0 0 4px rgba(242,104,108,.42), var(--sh-2);
  animation: gsShake .38s cubic-bezier(.36,.07,.19,.97);
}

/* ---------- 英语：听音摘果 ---------- */
.lp-play {
  flex: 0 0 auto;
  text-align: center;
  padding: 16px 0 6px;
  position: relative;
  z-index: 2;
}
.lp-speaker {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, #6B8AFF 0%, #4E6FE8 100%);
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(78,111,232,.42), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .14s cubic-bezier(.34,1.5,.64,1), box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
  animation: speakerPulse 2.4s ease-in-out infinite;
}
.lp-speaker:active {
  transform: scale(.92);
  box-shadow: 0 3px 10px rgba(78,111,232,.4);
}
@keyframes speakerPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(78,111,232,.42), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 0 rgba(107,138,255,.5); }
  50% { box-shadow: 0 6px 20px rgba(78,111,232,.42), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 14px rgba(107,138,255,0); }
}
.lp-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 11px;
}
.lp-cn {
  font-size: 20px;
  font-weight: 900;
  color: #4E6FE8;
  margin-top: 3px;
  min-height: 28px;
}
.lp-cn.pop { animation: qPop .42s cubic-bezier(.34,1.5,.64,1); }
.lp-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 11px;
  padding: 10px 0 16px;
  min-height: 0;
  position: relative;
  z-index: 2;
}
.lp-card {
  position: relative;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #FFFFFF 0%, #F1FBF8 100%);
  box-shadow: var(--sh-2), var(--sh-in);
  font-family: inherit;
  font-size: 27px;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  min-height: 62px;
  letter-spacing: .5px;
  opacity: 0;
  animation: wmIn .36s cubic-bezier(.34,1.5,.64,1) forwards;
  transition: transform .14s cubic-bezier(.34,1.5,.64,1), box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.lp-card:active { transform: scale(.94); }
.lp-card.done {
  background: linear-gradient(160deg, #5FD3B0, #3FC08A);
  color: #fff;
  animation: wmDone .42s cubic-bezier(.34,1.5,.64,1);
}
.lp-card.bad {
  background: linear-gradient(160deg, #FFD9DA, #FFC2C4);
  box-shadow: 0 0 0 4px rgba(242,104,108,.42), var(--sh-2);
  animation: gsShake .38s cubic-bezier(.36,.07,.19,.97);
}
.lp-card.hint {
  box-shadow: 0 0 0 4px rgba(63,192,138,.5), var(--sh-2);
  background: linear-gradient(160deg, #E6FBF3, #CFF5E7);
}

/* ---------- 游戏结束浮层 ---------- */
.gm-over {
  position: absolute;
  inset: 0;
  background: rgba(42,51,80,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}
.gm-over.show { display: flex; animation: overFade .26s ease-out; }
@keyframes overFade { from { opacity: 0; } to { opacity: 1; } }
.gm-over-card {
  width: 100%;
  max-width: 340px;
  background: var(--card);
  border-radius: 26px;
  padding: 26px 22px 20px;
  text-align: center;
  box-shadow: 0 12px 44px rgba(30,40,70,.34);
  animation: overPop .42s cubic-bezier(.34,1.5,.64,1);
}
@keyframes overPop {
  from { opacity: 0; transform: scale(.82) translateY(20px); }
  to { opacity: 1; transform: none; }
}
.gm-over-emoji { font-size: 58px; line-height: 1; }
.gm-over-title {
  font-size: 21px;
  font-weight: 900;
  margin-top: 8px;
  color: var(--text);
}
.gm-over-score {
  font-size: 52px;
  font-weight: 900;
  color: #FF8A3D;
  line-height: 1.1;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.gm-over-score span {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-sub);
  margin-left: 4px;
}
.gm-over-stats {
  display: flex;
  gap: 8px;
  margin: 16px 0 12px;
}
.gm-over-stats > div {
  flex: 1;
  background: #F5F8FF;
  border-radius: var(--radius-xs);
  padding: 9px 4px;
}
.gm-over-stats > div b {
  display: block;
  font-size: 19px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gm-over-stats > div span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 1px;
}
.gm-over-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.gm-over-stars i {
  font-size: 32px;
  font-style: normal;
  opacity: .22;
  filter: grayscale(1);
  transform: scale(.86);
}
.gm-over-stars i.on {
  opacity: 1;
  filter: none;
  transform: none;
  animation: starPop .46s cubic-bezier(.34,1.6,.64,1) backwards;
}
.gm-over-stars i.on:nth-child(1) { animation-delay: .12s; }
.gm-over-stars i.on:nth-child(2) { animation-delay: .26s; }
.gm-over-stars i.on:nth-child(3) { animation-delay: .40s; }
@keyframes starPop {
  from { transform: scale(0) rotate(-90deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.gm-over-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* ---------- 游戏列表页 ---------- */
.game-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.game-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--sh-3);
  position: relative;
  overflow: hidden;
  transition: transform .16s cubic-bezier(.34,1.5,.64,1), box-shadow .16s;
}
.game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent 55%);
  pointer-events: none;
}
.game-card:active {
  transform: scale(.975);
  box-shadow: var(--sh-2);
}
.gc-ico {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255,255,255,.24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.gc-info { flex: 1; min-width: 0; }
.gc-info b {
  display: block;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.gc-info span {
  display: block;
  font-size: 13px;
  opacity: .92;
  font-weight: 600;
}
.gc-right { flex: 0 0 auto; text-align: right; }
.gc-stars { font-size: 14px; letter-spacing: 1px; margin-bottom: 3px; }
.gc-stars i { font-style: normal; opacity: .38; filter: grayscale(1); }
.gc-stars i.on { opacity: 1; filter: none; }
.gc-best {
  font-size: 11.5px;
  font-weight: 800;
  opacity: .9;
  white-space: nowrap;
}

/* ---------- 横屏适配：平板横放时压缩纵向留白 ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .gm-question { padding: 10px 12px 2px; }
  .gm-qtext { font-size: 30px; }
  .gm-slots { gap: 9px; padding: 8px 0 12px; }
  .gm-slot { font-size: 28px; min-height: 54px; }
  .wm-grid { gap: 8px; padding: 8px 0 12px; }
  .wm-card { min-height: 52px; font-size: 17px; }
  .wm-card.long { font-size: 13.5px; }
  .lp-speaker { width: 74px; height: 74px; font-size: 32px; }
  .lp-grid { gap: 9px; padding: 6px 0 12px; }
  .lp-card { font-size: 23px; min-height: 54px; }
  .game-hud { padding: 9px 0 7px; }
  .hud-item b { font-size: 19px; }
}


/* ============================================================
 *  玩偶宠物「小兔」—— 在页面里到处跑的可爱小玩偶
 *  灵感：小朋友的睡衣照（粉睡衣 + 白兔图案 + 双马尾 + 举高手比心）
 * ============================================================ */

.pet-layer {
  position: fixed;
  left: 0; top: 0;
  width: 74px; height: 74px;
  z-index: 60;
  pointer-events: none;          /* 默认不拦截点击，只有本体可点 */
  will-change: transform;
  contain: layout style;
}

.pet-body {
  width: 74px; height: 74px;
  pointer-events: auto;
  cursor: grab;
  transform-origin: 50% 50%;
  transition: transform .18s ease;
  filter: drop-shadow(0 4px 8px rgba(160,110,130,.22));
}
.pet-body:active { cursor: grabbing; }
.pet-svg { display: block; width: 100%; height: 100%; }

/* 走动时轻微上下颠 */
.pet-walk .pet-svg { animation: petBob .3s ease-in-out infinite alternate; }
@keyframes petBob {
  from { transform: translateY(0) rotate(-1.2deg); }
  to   { transform: translateY(-3px) rotate(1.2deg); }
}

/* 举高手比心时弹一下 */
.pet-cheer .pet-svg { animation: petCheer .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes petCheer {
  0%   { transform: scale(1) translateY(0); }
  45%  { transform: scale(1.16) translateY(-6px); }
  100% { transform: scale(1) translateY(0); }
}

/* 开心时轻轻摇 */
.pet-happy .pet-svg { animation: petHappy .45s ease-in-out 2; }
@keyframes petHappy {
  0%,100% { transform: rotate(0); }
  30%     { transform: rotate(-7deg); }
  70%     { transform: rotate(7deg); }
}

/* 打盹时呼吸感 */
.pet-sleep .pet-svg { animation: petBreath 2.2s ease-in-out infinite; }
@keyframes petBreath {
  0%,100% { transform: scale(1) translateY(0); }
  50%     { transform: scale(1.04) translateY(1px); }
}

/* 拖动中 */
.pet-layer.dragging .pet-body { cursor: grabbing; filter: drop-shadow(0 10px 16px rgba(160,110,130,.34)); }
.pet-layer.dragging .pet-svg { animation: none; }

/* 收起状态：只留一个小圆点把手 */
.pet-layer.collapsed .pet-body,
.pet-layer.collapsed .pet-bubble { display: none; }
.pet-layer.collapsed { width: 34px; height: 34px; }

/* ---------- 收起/召唤按钮 ---------- */
.pet-toggle {
  position: absolute;
  right: -2px; top: -2px;
  width: 26px; height: 26px;
  min-width: 26px; min-height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(160deg, #FFC2D6, #FF9FBA);
  box-shadow: 0 3px 8px rgba(200,120,150,.35);
  cursor: pointer;
  padding: 0;
  display: none;                  /* 悬停/触摸时出现 */
  align-items: center; justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.pet-layer:hover .pet-toggle,
.pet-layer.collapsed .pet-toggle { display: flex; }
.pet-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; opacity: .95;
  box-shadow: inset 0 -1px 2px rgba(180,90,120,.4);
}
.pet-layer.collapsed .pet-toggle {
  position: static; display: flex; width: 34px; height: 34px;
  animation: petPulse 2.4s ease-in-out infinite;
}
@keyframes petPulse {
  0%,100% { transform: scale(1); box-shadow: 0 3px 8px rgba(200,120,150,.35); }
  50%     { transform: scale(1.12); box-shadow: 0 5px 14px rgba(200,120,150,.5); }
}

/* ---------- 对话气泡 ---------- */
.pet-bubble {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translate(-50%, -6px) scale(.85);
  transform-origin: 50% 100%;
  background: #fff;
  color: #5B4A52;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  padding: 7px 11px;
  border-radius: 13px;
  border: 2px solid #FFD6E2;
  box-shadow: 0 4px 12px rgba(180,120,145,.22);
  white-space: nowrap;
  max-width: 190px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .24s cubic-bezier(.34,1.56,.64,1);
}
.pet-bubble.show { opacity: 1; transform: translate(-50%, -6px) scale(1); }
.pet-bubble::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #FFD6E2;
}

/* ---------- 脚印 ---------- */
.pet-foot {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(200,150,170,.42);
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  transition: opacity .35s ease;
  animation: footIn .3s ease forwards;
}
@keyframes footIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.pet-foot.fade { opacity: 0; }

/* ---------- 爱心 / 星星粒子 ---------- */
.pet-heart, .pet-spark {
  position: fixed;
  font-size: 15px;
  pointer-events: none;
  z-index: 61;
  animation: petFloat 1.2s ease-out forwards;
  text-shadow: 0 1px 3px rgba(255,255,255,.9);
}
.pet-spark { font-size: 13px; color: #FFC53D; animation-duration: 1s; }
@keyframes petFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.5) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.15) rotate(14deg); }
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 420px) {
  .pet-layer, .pet-body { width: 62px; height: 62px; }
  .pet-bubble { font-size: 12px; padding: 6px 9px; max-width: 160px; }
}

/* ---------- 无操作偏好：减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pet-walk .pet-svg, .pet-cheer .pet-svg, .pet-happy .pet-svg,
  .pet-sleep .pet-svg, .pet-layer.collapsed .pet-toggle { animation: none; }
  .pet-heart, .pet-spark { animation-duration: .5s; }
}

/* ============================================================
 * 2026-10-31 新增：先学一学 / 积分商店 / 兑换券 / 家长奖励编辑
 * ============================================================ */

/* 顶栏积分胶囊 */
.coin-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #FFF3C9, #FFE08A);
  border: 2px solid #FFD25E; border-radius: 999px;
  padding: 5px 14px; margin-right: 8px;
  font-size: 15px; font-weight: 900; color: #9A6B00;
  cursor: pointer; user-select: none;
  box-shadow: 0 2px 8px rgba(255, 200, 60, .35);
  transition: transform .15s;
}
.coin-chip:active { transform: scale(.92); }

/* ---------- 先学一学 ---------- */
.teach-wrap { display: flex; flex-direction: column; min-height: calc(100dvh - 68px); }
.teach-head { background: linear-gradient(135deg, #6D8BFF, #9DB5FF); color: #fff; border-radius: 22px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(90, 120, 230, .25); }
.teach-head b { display: block; font-size: 20px; }
.teach-head span { display: block; font-size: 13px; opacity: .9; margin-top: 4px; }
.teach-card { background: #fff; border-radius: 20px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 3px 14px rgba(70,85,120,.08); border: 1.5px solid rgba(0,0,0,.04); animation: teachIn .5s both; }
@keyframes teachIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tc-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #6D8BFF; background: #EEF2FF; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.tc-title { display: block; font-size: 17px; color: #2A3550; margin-bottom: 6px; }
.tc-body { font-size: 15px; line-height: 1.75; color: #4A5570; margin: 0; }
.teach-foot { display: flex; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #F6F8FF 70%, rgba(246,248,255,0)); position: sticky; bottom: 0; }
.teach-foot .btn { flex: 1; }

/* ---------- 积分商店 ---------- */
.coin-wallet { background: linear-gradient(135deg, #FFD25E, #FFB84D); border-radius: 24px; padding: 22px; text-align: center; color: #7A4E00; box-shadow: 0 8px 22px rgba(255, 190, 70, .4); margin-bottom: 16px; position: relative; overflow: hidden; }
.coin-wallet::after { content: '✨'; position: absolute; right: 14px; top: 10px; font-size: 22px; opacity: .6; }
.cw-coin { font-size: 34px; }
.cw-num { font-size: 40px; font-weight: 900; line-height: 1.1; }
.cw-sub { font-size: 12px; opacity: .85; margin-top: 4px; font-weight: 700; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-card { background: #fff; border-radius: 20px; padding: 16px 12px; text-align: center; box-shadow: 0 3px 12px rgba(70,85,120,.08); border: 2px solid transparent; transition: transform .15s; }
.shop-card:active { transform: scale(.96); }
.shop-card.poor { opacity: .75; }
.sc-emoji { font-size: 38px; margin-bottom: 6px; }
.sc-name { font-size: 14px; font-weight: 800; color: #2A3550; line-height: 1.35; min-height: 38px; display: flex; align-items: center; justify-content: center; }
.sc-cost { font-size: 15px; font-weight: 900; color: #E0810C; margin: 4px 0 8px; }
.sc-cost s { color: #B0B8C8; font-weight: 700; }
.sc-btn { width: 100%; font-size: 13px; padding: 9px 0; border-radius: 12px; }

/* 兑换券 */
.voucher-list { display: flex; flex-direction: column; gap: 10px; }
.voucher-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px dashed #FFCF5E; border-radius: 16px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(70,85,120,.06); }
.voucher-item.done { opacity: .55; border-style: solid; border-color: #C8D2E0; }
.v-emoji { font-size: 30px; }
.v-info { flex: 1; min-width: 0; }
.v-info b { display: block; font-size: 15px; color: #2A3550; }
.v-info span { font-size: 12px; color: #8A94A8; }
.v-badge { font-size: 11px; font-weight: 900; color: #E0810C; background: #FFF3DC; border-radius: 999px; padding: 4px 10px; }
.v-op { font-size: 13px; padding: 8px 14px; border-radius: 12px; }

/* 积分明细 */
.coinlog-list { display: flex; flex-direction: column; gap: 6px; }
.coinlog-item { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 10px 14px; font-size: 13px; box-shadow: 0 1px 6px rgba(70,85,120,.05); }
.cl-why { flex: 1; font-weight: 700; color: #3A4560; }
.cl-time { color: #9AA4B8; font-size: 11px; }
.coinlog-item .plus { color: #1FA26A; }
.coinlog-item .minus { color: #D8663C; }

/* 家长端奖励编辑 */
.reward-editor { display: flex; flex-direction: column; gap: 10px; }
.re-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(70,85,120,.06); }
.re-emoji { width: 52px; text-align: center; font-size: 22px; border: 1.5px solid #E4E8F2; border-radius: 10px; padding: 8px 0; background: #FAFBFF; }
.re-name { flex: 1; min-width: 0; border: 1.5px solid #E4E8F2; border-radius: 10px; padding: 9px 10px; font-size: 14px; background: #FAFBFF; }
.re-cost { width: 76px; border: 1.5px solid #E4E8F2; border-radius: 10px; padding: 9px 6px; font-size: 14px; text-align: center; background: #FAFBFF; }
.re-unit { font-size: 14px; }
.re-del { width: 34px; height: 34px; border-radius: 10px; background: #FFECEC; color: #D8663C; font-size: 15px; font-weight: 900; border: none; cursor: pointer; }
.re-add { margin-top: 2px; }
.re-save { margin-top: 4px; }

/* ============================================================
 * 2026-10-31 二次增强：读题喇叭 / 小老师讲堂 / 错题重练
 * ============================================================ */

/* 题干区：文字 + 喇叭 */
.q-text-wrap { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; }
.q-text-wrap .q-text { flex: 1; }
.q-speak {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #E4E8F2; background: #fff; font-size: 19px;
  cursor: pointer; transition: transform .15s; box-shadow: 0 2px 8px rgba(70,85,120,.1);
}
.q-speak:active { transform: scale(.88); }
.q-speak.pulse { animation: speakPulse .6s; }
@keyframes speakPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(109,139,255,.5); } 70% { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(109,139,255,0); } 100% { transform: scale(1); } }

/* 重练题干标识 */
.retry-flag::before { content: '🔁 再试一次：'; color: #E0810C; font-weight: 900; }

/* 错题重练横幅 */
.retry-banner {
  background: linear-gradient(135deg, #FFE9C9, #FFD79B);
  border-radius: 14px; padding: 10px 16px; margin-bottom: 10px;
  font-size: 14px; font-weight: 900; color: #9A6B00; text-align: center;
  animation: teachIn .4s both; transition: opacity .5s;
}
.retry-banner.fade { opacity: 0; }

/* ---------- 小老师讲堂弹层 ---------- */
.teacher-layer {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(30, 38, 60, .45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s;
  padding: 16px;
}
.teacher-layer.show { opacity: 1; }
.teacher-card {
  width: 100%; max-width: 420px; max-height: 86dvh; overflow-y: auto;
  background: linear-gradient(180deg, #FFFDF6, #FFF9EC);
  border-radius: 26px; padding: 18px;
  box-shadow: 0 18px 50px rgba(20, 30, 60, .35);
  transform: translateY(24px) scale(.96); transition: transform .25s;
}
.teacher-layer.show .teacher-card { transform: none; }
.teacher-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.th-title { flex: 1; }
.th-title b { display: block; font-size: 18px; color: #7A4E00; }
.th-title span { font-size: 12px; color: #B08A45; font-weight: 700; }
.th-close {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(154, 107, 0, .12); color: #9A6B00; font-size: 15px; font-weight: 900;
  cursor: pointer;
}
.teacher-q {
  background: #fff; border-radius: 16px; padding: 12px 14px;
  font-size: 16px; font-weight: 800; color: #2A3550; margin-bottom: 12px;
  border: 1.5px dashed #E8D9A8;
}
.teacher-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tstep {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border-radius: 14px; padding: 11px 13px;
  box-shadow: 0 2px 8px rgba(154, 107, 0, .08);
  animation: teachIn .45s both;
}
.ts-no {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD25E, #FFB84D); color: #7A4E00;
  font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.ts-body { font-size: 14px; line-height: 1.65; color: #4A5570; }
.ts-body b { color: #C97B10; }
.teacher-answer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #EAF7EF; border-radius: 14px; padding: 11px 13px;
  font-size: 15px; color: #1F7A4D; font-weight: 800; margin-bottom: 12px;
}
.teacher-answer b { color: #14532D; font-size: 17px; }
.ta-speak {
  border: none; background: #fff; border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 800; color: #1F7A4D; cursor: pointer;
  box-shadow: 0 1px 4px rgba(31, 122, 77, .2);
}
.teacher-ok { width: 100%; font-size: 16px; padding: 13px 0; }

/* 知识卡读给我听 */
.tc-speak {
  margin-top: 10px; border: 1.5px solid #DCE3F5; background: #F6F8FF;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 800;
  color: #5A7BE0; cursor: pointer; transition: transform .15s;
}
.tc-speak:active { transform: scale(.93); }
.tc-speak.pulse { animation: speakPulse .6s; }

/* ============================================================
 * 知识卡翻页式（一张一张点开学）
 * ============================================================ */
.teach-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 6px; }
.teach-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #D5DDF0; cursor: pointer; transition: all .25s;
}
.teach-dots i.done { background: #9DB5FF; }
.teach-dots i.cur { background: #6D8BFF; transform: scale(1.5); box-shadow: 0 0 0 5px rgba(109,139,255,.18); }

.teach-card.big {
  flex: 0 0 auto; margin: 10px 4px 0; padding: 26px 22px;
  border-radius: 28px; text-align: left;
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-start;
  animation: cardFlip .45s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes cardFlip {
  from { opacity: 0; transform: translateX(60px) rotate(2deg) scale(.94); }
  to { opacity: 1; transform: none; }
}
.teach-card.big .tc-badge { align-self: flex-start; font-size: 12px; padding: 5px 12px; }
.teach-card.big .tc-title { font-size: 24px; margin: 12px 0 10px; }
.teach-card.big .tc-body { font-size: 18px; line-height: 1.95; flex: 1; }
.teach-card.big .tc-actions { margin-top: 14px; }
.tc-actions { display: flex; gap: 10px; }
.tc-actions .tc-speak { margin-top: 0; }

.teach-mascot {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 4px 0; animation: teachIn .5s .15s both;
}
.tm-avatar { flex: 0 0 auto; }
.tm-bubble {
  background: #fff; border-radius: 18px 18px 18px 4px;
  padding: 10px 16px; font-size: 14px; font-weight: 800; color: #5A6B8C;
  box-shadow: 0 3px 10px rgba(70,85,120,.08);
  line-height: 1.5;
}
.teach-spacer { flex: 1; }
.teach-wrap { display: flex; flex-direction: column; min-height: calc(100dvh - 68px); }

/* ============================================================
 * 逐字教学舞台（老师范读 → 跟读 → 连读）
 * ============================================================ */
.char-stage {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #F4F7FF, #EDF2FF);
  border-radius: 22px; padding: 20px 16px 16px; margin-top: 6px;
  border: 2px solid #DEE7FA; position: relative; overflow: hidden;
}
.cs-hint {
  font-size: 15px; font-weight: 900; color: #6D8BFF;
  min-height: 22px; margin-bottom: 4px; letter-spacing: .5px;
}
.cs-hint.go { animation: hintBlink 1.2s ease infinite; }
@keyframes hintBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.cs-big {
  font-size: 110px; font-weight: 900; line-height: 1.15;
  color: #2A3550; min-height: 130px;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 4px 0 rgba(109,139,255,.12);
}
.cs-big.pop { animation: charPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes charPop {
  from { transform: scale(.2) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(2deg); }
  to { transform: none; opacity: 1; }
}
.cs-sub {
  font-size: 17px; font-weight: 800; color: #E0810C;
  min-height: 24px; margin-top: 2px;
}
.char-track {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 12px;
}
.char-track i {
  min-width: 44px; padding: 8px 10px; border-radius: 12px;
  background: #fff; border: 2px solid #E0E7F5;
  font-style: normal; font-size: 19px; font-weight: 900; color: #8A94A8;
  text-align: center; transition: all .25s;
}
.char-track i.cur {
  border-color: #6D8BFF; color: #2A3550; transform: scale(1.14);
  box-shadow: 0 0 0 4px rgba(109,139,255,.18); background: #EEF3FF;
}
.char-track i.done {
  border-color: #B7E4C7; background: #EDF9F1; color: #1F7A4D;
}

/* 字表可点击重学 */
.char-track i { cursor: pointer; position: relative; }
.char-track i:active { transform: scale(.9); }
.char-track i.done::after {
  content: '↻'; position: absolute; right: -6px; top: -8px;
  font-size: 12px; color: #6D8BFF; font-weight: 900;
  background: #fff; border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(70,85,120,.25);
}
.tc-actions .tc-speak {
  background: linear-gradient(135deg, #6D8BFF, #9DB5FF); color: #fff;
  border: none; box-shadow: 0 4px 12px rgba(109,139,255,.35);
}