/* ============================================================
   WOW! English 复刻 · 2.0 前端
   结构：设计令牌 → 基础 → 顶栏 → 首页 → 卡片 → 单词 → 个人中心
        → 弹层/播放器 → 浮层安全区 → 响应式 → 动效与可访问性
   ============================================================ */

/* ---------- 0. 本地字体（不依赖第三方镜像） ---------- */
@font-face {
  font-family: "ZCOOL KuaiLe";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/zcool-kuaile.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/nunito-600.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/nunito-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/nunito-800.woff2") format("woff2");
}

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌色 */
  --c-brand: #f5c634;
  --c-brand-deep: #d99e00;
  --c-brand-ink: #4a3728;

  /* 中性色（文字对比度均 ≥ 4.5:1 on #fff） */
  --c-ink: #2b2118;        /* 主文字 13.4:1 */
  --c-ink-2: #5b4a39;      /* 次文字 7.9:1 */
  --c-ink-3: #6b6156;      /* 辅助文字 5.4:1 */
  --c-line: #e9e2d6;
  --c-canvas: #fbf7ee;
  --c-surface: #ffffff;
  --c-surface-2: #f7f2e7;

  /* 间距阶梯 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* 圆角 / 阴影 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;
  --sh-1: 0 2px 8px rgba(43, 33, 24, .06);
  --sh-2: 0 6px 20px rgba(43, 33, 24, .10);
  --sh-3: 0 16px 40px rgba(43, 33, 24, .18);
  --sh-focus: 0 0 0 3px rgba(20, 14, 8, .28), 0 0 0 6px rgba(245, 198, 52, .55);

  /* 字阶 */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;

  /* 字体：圆润显示体（中文）/ 界面正文 / 英文内容 */
  --font-display: "ZCOOL KuaiLe", "Yuanti SC", "YuanTi SC", "Hiragino Maru Gothic ProN", "YouYuan", "幼圆", "PingFang SC", sans-serif;
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-en: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", "PingFang SC", sans-serif;

  /* 级别主题（JS 按级别覆写） */
  --tp: #10B981;
  --tp-dark: #059669;
  /* 任务卡底色：比 --tp-dark 更深一档，保证白字对比度 ≥ 4.5:1 */
  --tp-deep: #047857;
  --soft: #d6f4e6;
  --bd: #a7f3d0;
  --txt: #065f46;
  --glow: rgba(16, 185, 129, .35);
  /* 主按钮底色：主题色压暗，保证白字对比度 ≥ 4.5:1 */
  --btn-bg: #0f7a58;
  --btn-bg-hover: #0b6347;

  /* 浮层安全区 */
  --pillbar-h: 72px;
  --bottom-safe: calc(var(--pillbar-h) + 28px + env(safe-area-inset-bottom, 0px));
  --fab-safe: 104px;
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-canvas);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.25; letter-spacing: .2px; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--c-brand); color: var(--c-ink); }

.sr-only {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 300;
  background: var(--c-ink); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* 通用按钮 */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 26px;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: #fff;
  font-size: var(--fs-16); font-weight: 700;
  box-shadow: 0 6px 18px var(--glow);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-primary:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-primary:disabled { background: #c9c1b5; color: #4b4339; box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  background: #fff; color: var(--c-ink-2);
  font-size: var(--fs-14); font-weight: 700;
  transition: border-color .16s, color .16s, background .16s;
}
.btn-ghost:hover { border-color: var(--c-brand-deep); color: var(--c-ink); background: #fffdf6; }

.btn-mini {
  flex: none; min-height: 34px; padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-ink); color: #ffe9a8;
  font-size: var(--fs-12); font-weight: 700;
  transition: background .16s ease;
}
.btn-mini:hover { background: #443528; }

.btn-block { width: 100%; }

.icon-x {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-ink-2);
  transition: background .16s ease;
}
.icon-x:hover { background: rgba(43, 33, 24, .08); }

.link-btn {
  color: var(--c-ink-2); font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--c-ink); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-12); font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ---------- 3. 顶栏 ---------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(43, 33, 24, .07);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 22px;
  max-width: 1440px; margin: 0 auto;
}
.avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 3px 12px rgba(217, 158, 0, .4);
  transition: transform .18s ease;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar:hover { transform: scale(1.05); }

/* 级别导航：可滚动 + 全尺寸箭头 + 双向遮罩 */
.lv-scroller {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center;
}
.lv-nav {
  display: flex; gap: 8px; align-items: center;
  flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 4px 2px;
  -webkit-mask-image: var(--nav-mask, none);
  mask-image: var(--nav-mask, none);
}
.lv-nav::-webkit-scrollbar { display: none; }
.lv-scroller.can-left .lv-nav {
  --nav-mask: linear-gradient(90deg, transparent 0, #000 36px);
}
.lv-scroller.can-right .lv-nav {
  --nav-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
}
.lv-scroller.can-left.can-right .lv-nav {
  --nav-mask: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--c-ink);
  box-shadow: 0 2px 8px rgba(43, 33, 24, .18), 0 0 0 1px rgba(43, 33, 24, .06);
}
.nav-arrow:hover { background: var(--c-brand); }
.nav-arrow.prev { left: 0; }
.nav-arrow.next { right: 0; }

.lv-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .86);
  border: 1.5px solid rgba(43, 33, 24, .07);
  color: var(--c-ink-2);
  font-size: var(--fs-14); font-weight: 700; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.lv-tab:hover { background: #fff; border-color: var(--c-brand-deep); color: var(--c-ink); }
.lv-tab .lv-badge {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lv, #999); color: #fff;
  font-family: var(--font-en); font-size: 10.5px; font-weight: 800;
}
.lv-tab .lv-title { font-size: 12.5px; font-weight: 700; color: var(--c-ink-3); }
.lv-tab[aria-current="true"] {
  background: var(--btn-bg); border-color: #fff; color: #fff;
  box-shadow: 0 6px 16px -4px var(--glow), 0 0 0 2px rgba(255, 255, 255, .9);
  transform: translateY(-1px);
}
.lv-tab[aria-current="true"] .lv-title { color: rgba(255, 255, 255, .95); }
.lv-tab[aria-current="true"] .lv-badge { background: #fff; color: var(--btn-bg); }
/* 箭头不压住级别胶囊 */
.lv-scroller.can-left .lv-nav { padding-left: 34px; }
.lv-scroller.can-right .lv-nav { padding-right: 34px; }

.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1.5px solid rgba(43, 33, 24, .08);
  display: grid; place-items: center; color: var(--c-ink-2);
  transition: background .16s, color .16s, border-color .16s;
}
.icon-btn:hover { background: var(--c-brand); color: var(--c-ink); border-color: var(--c-brand); }
.sfx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid rgba(43, 33, 24, .08);
  color: var(--c-ink-2); font-size: var(--fs-12); font-weight: 700;
}
.sfx-btn:hover { border-color: var(--c-brand-deep); color: var(--c-ink); }
.sfx-btn[aria-pressed="false"] { color: var(--c-ink-3); }
.sfx-btn[aria-pressed="false"] svg { opacity: .45; }
/* 剩余观看次数：全站常驻，点开即可输激活码 */
.view-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px;
  border-radius: var(--r-pill); background: #fff; color: #1d6b46;
  border: 1.5px solid rgba(47, 158, 110, .35);
  font-size: var(--fs-12); font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.view-pill:hover { background: #effaf4; border-color: var(--c-brand-deep); }
.view-pill.is-empty { color: #a2461d; border-color: #e9b79b; background: #fff6f0; }
.view-pill .view-unit { font-family: var(--font-ui); font-weight: 700; color: var(--c-ink-3); }
@media (max-width: 520px) {
  .view-pill { padding: 0 9px; gap: 4px; }
  .view-pill .view-unit { display: none; }
}
.brand {
  flex: none; background: #fff; border-radius: var(--r-md);
  padding: 5px 10px; display: grid; place-items: center;
  border: 1.5px solid rgba(43, 33, 24, .06);
  transition: transform .18s ease;
}
.brand img { height: 34px; width: auto; object-fit: contain; }
.brand:hover { transform: scale(1.04); }

/* ---------- 4. 首页 ---------- */
.view {
  max-width: 1320px; margin: 0 auto;
  /* 右侧为兑换 FAB 预留安全区，避免遮挡可点内容 */
  padding: var(--sp-6) calc(var(--sp-6) + var(--fab-safe)) calc(var(--bottom-safe) + 40px) var(--sp-6);
}
.view[hidden] { display: none; }

/* 免费试看提示条（不打断浏览） */
.free-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  background: #fffdf5;
  border: 1px solid #f2e3b8;
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-md);
  padding: 10px 12px 10px 16px;
  box-shadow: var(--sh-1);
  margin-bottom: var(--sp-5);
}
.free-banner p { flex: 1; min-width: 0; font-size: var(--fs-14); color: var(--c-ink-2); }
.free-banner b { color: var(--c-ink); }
.free-banner-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: #f0a500; box-shadow: 0 0 0 4px rgba(240, 165, 0, .18);
}

/* 标题 + 统计 */
.home-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.home-title { min-width: 0; }
.home-title h1 {
  font-size: clamp(28px, 3.2vw, var(--fs-44));
  color: var(--c-ink);
  margin-top: 2px;
}
.home-motto { margin-top: 6px; font-size: var(--fs-14); color: var(--c-ink-3); }
.home-stats { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.coin-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 8px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--sh-1);
  font-family: var(--font-en); font-weight: 800; color: var(--c-ink);
}
.coin-pill b { font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.coin-pill .coin-unit { font-family: var(--font-ui); font-size: var(--fs-12); color: var(--c-ink-3); }
.coin-pill.bounce { animation: coinBounce .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes coinBounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.16) rotate(-4deg); }
  70% { transform: scale(1.08) rotate(3deg); }
}

.lv-progress { min-width: 168px; }
.lv-progress-text {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-12); color: var(--c-ink-3); margin-bottom: 5px;
}
.lv-progress-text b { font-family: var(--font-en); font-size: var(--fs-14); color: var(--c-ink); }
.bar {
  display: block;
  height: 10px; border-radius: var(--r-pill);
  background: rgba(43, 33, 24, .09); overflow: hidden;
}
.bar > i {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: var(--tp);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

/* 继续学习主卡（唯一视觉重心） */
.continue-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
  min-height: 236px;
  border-radius: var(--r-2xl);
  background: #221a12;
  color: #fff;
  box-shadow: 0 22px 48px -18px rgba(43, 33, 24, .55);
}
.continue-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 130% at 4% 0%, var(--tp) 0%, transparent 58%),
    radial-gradient(100% 130% at 100% 100%, var(--tp-dark) 0%, transparent 62%);
}
.continue-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, rgba(20, 15, 9, .72) 0%, rgba(20, 15, 9, .42) 55%, rgba(20, 15, 9, .18) 100%);
}
.continue-media {
  position: relative; z-index: 2;
  margin: 18px; border-radius: var(--r-lg);
  overflow: hidden; background: rgba(255, 255, 255, .12);
  aspect-ratio: 16 / 10;
  min-height: 0;
}
.continue-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease;
}
.continue-media img.is-loaded { opacity: 1; }
.continue-body {
  position: relative; z-index: 2;
  padding: var(--sp-6) var(--sp-7) var(--sp-6) var(--sp-4);
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.continue-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 1.2px;
  color: #ffe9a8; text-transform: uppercase;
}
.continue-body h2 {
  margin-top: 8px;
  font-size: clamp(22px, 2.4vw, var(--fs-32));
  color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.continue-sub { margin-top: 8px; font-size: var(--fs-14); color: rgba(255, 255, 255, .82); }
.continue-sub .en { font-family: var(--font-en); }
.continue-progress {
  margin: 14px 0 18px;
  font-size: var(--fs-12); color: rgba(255, 255, 255, .78);
}
.continue-progress .bar { background: rgba(255, 255, 255, .22); max-width: 300px; margin-top: 6px; }
.continue-progress .bar > i { background: var(--c-brand); }
.continue-body .btn-primary {
  align-self: flex-start;
  background: #fff; color: var(--c-ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.continue-body .btn-primary:hover { background: #fff6d9; }

/* 内容筛选 + 分区 */
.content-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin: var(--sp-8) 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.content-title { font-size: var(--fs-24); }
.content-count { font-size: var(--fs-12); color: var(--c-ink-3); font-family: var(--font-en); font-weight: 700; }

.unit-section { margin-bottom: var(--sp-8); }
.unit-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.unit-head-l { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.unit-no {
  flex: none;
  font-family: var(--font-en); font-size: var(--fs-12); font-weight: 800;
  letter-spacing: .6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--soft); color: var(--txt);
  border: 1px solid var(--bd);
}
.unit-head h2 {
  font-size: var(--fs-20); color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.unit-head-r { display: flex; align-items: center; gap: 10px; flex: none; }
.unit-count { font-size: var(--fs-12); color: var(--c-ink-3); font-family: var(--font-en); }
.unit-progress { width: 96px; }
.unit-progress .bar { height: 6px; }

/* ---------- 4.1 关卡地图（游戏化首页） ---------- */
.level-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.level-id { min-width: 0; }
.level-id h1 { font-size: clamp(26px, 3vw, var(--fs-32)); margin-top: 2px; color: var(--c-ink); }

/* 当前任务：全页唯一视觉重心 */
.quest {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: center; gap: var(--sp-5);
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: var(--r-2xl);
  background: var(--tp-deep);
  color: #fff;
  box-shadow: 0 24px 50px -22px rgba(43, 33, 24, .6);
  margin-bottom: var(--sp-7);
}
.quest::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(95% 125% at 0% 0%, var(--tp) 0%, transparent 62%),
    radial-gradient(85% 125% at 100% 100%, var(--tp-deep) 0%, transparent 66%);
  opacity: .9;
}
.quest::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16, 12, 8, .7) 0%, rgba(16, 12, 8, .34) 56%, rgba(16, 12, 8, .04) 100%);
}
.quest > * { position: relative; z-index: 1; }
.quest-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.quest-deco i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.quest-deco i:nth-child(1) { width: 130px; height: 130px; right: 4%; top: -46px; }
.quest-deco i:nth-child(2) { width: 66px; height: 66px; right: 22%; bottom: -22px; background: rgba(255, 255, 255, .09); }
.quest-deco i:nth-child(3) { width: 22px; height: 22px; left: 46%; top: 22%; background: rgba(255, 255, 255, .18); }

.quest-mascot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.quest-mascot .mascot-svg { width: 104px; height: 104px; }
.quest-mascot .mascot-bubble { max-width: 280px; }

.mascot-svg { width: 88px; height: 88px; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }
.mascot-bubble {
  position: relative; background: #fff;
  border-radius: var(--r-lg);
  padding: 10px 14px;
  box-shadow: var(--sh-1);
  font-size: var(--fs-14); line-height: 1.55; color: var(--c-ink-2);
}
.mascot-bubble b { color: var(--c-ink); }
.mascot-bubble::before {
  content: ''; position: absolute;
  width: 12px; height: 12px; background: #fff; border-radius: 2px;
}
.quest-mascot .mascot-bubble::before { top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); }

.quest-kicker {
  display: inline-block;
  font-family: var(--font-en); font-size: var(--fs-12); font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #ffe9a8;
}
.quest-body h2 {
  margin-top: 6px;
  font-size: clamp(24px, 3vw, var(--fs-32));
  color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quest-sub { margin-top: 6px; font-size: var(--fs-14); color: #fff; }
.quest-goals {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--sp-3) 0 var(--sp-5);
}
.quest-goals li {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.qg-en { font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800; color: #fff; }
.qg-cn { font-size: var(--fs-12); color: rgba(255, 255, 255, .9); }
.quest-acts { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.quest-stars { display: inline-flex; gap: 2px; font-size: var(--fs-20); color: rgba(255, 255, 255, .86); }
.quest-stars i { font-style: normal; }
.quest-stars i.on { color: #f8c33a; text-shadow: 0 3px 10px rgba(248, 195, 58, .5); }

/* 首屏骨架：任务卡与路径用与真实结构同高度的占位，数据到达后原地替换 */
.quest .sk-line,
.quest .sk-chip,
.quest .sk-mascot {
  background: linear-gradient(100deg, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, .34) 44%, rgba(255, 255, 255, .16) 66%);
  background-size: 220% 100%;
  animation: sk-sheen 1.5s linear infinite;
}
@keyframes sk-sheen { to { background-position: -220% 0; } }
.sk-line { display: block; border-radius: 6px; }
.sk-mascot { display: block; width: 104px; height: 104px; border-radius: 50%; }
.sk-title { width: 70%; max-width: 320px; height: 1.25em; }
.sk-sub { width: 46%; max-width: 210px; height: 12px; margin: 0; }
.quest.is-loading .quest-sub { display: flex; align-items: center; min-height: 22px; }
.quest-mascot .mascot-bubble .sk-line { height: 12px; width: 88%; margin: 5px 0; }
.quest-goals li.sk-chip { width: 92px; height: 36px; padding: 0; border: 0; }
/* 路径骨架使用独立类名，避免测试/脚本把占位误当成真实站点 */
.skel-chapter {
  display: flex; align-items: center; gap: 8px;
  height: 35.6px; margin: var(--sp-4) 0 var(--sp-2); padding: 0 16px;
  background: var(--c-canvas); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); box-shadow: var(--sh-1);
}
.skel-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.skel-face { width: 72px; height: 72px; border-radius: 50%; background: #efe9de; animation: skelPulse 1.4s ease-in-out infinite; }
.skel-stop.is-cur .skel-face { width: 92px; height: 92px; }
.skel-stars { display: flex; gap: 1px; font-size: 11px; line-height: 1; color: #d8d0c2; }
.skel-label {
  width: 86px; height: 6px; margin-top: 2px; border-radius: 4px;
  background: linear-gradient(100deg, #eee7da 22%, #fffdf7 44%, #eee7da 66%);
  background-size: 220% 100%; animation: sk-sheen 1.5s linear infinite;
}
.skel-chapter .sk-chap {
  display: block; width: 110px; height: 14px; border-radius: 5px;
  background: linear-gradient(100deg, #eee7da 22%, #fffdf7 44%, #eee7da 66%);
  background-size: 220% 100%; animation: sk-sheen 1.5s linear infinite;
}
@media (max-width: 900px) { .sk-mascot { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .quest .sk-line, .quest .sk-chip, .quest .sk-mascot,
  .skel-face, .skel-label, .skel-chapter .sk-chap { animation: none; }
}

/* 主行动按钮：圆润、可按、有厚度 */
.btn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 28px;
  border-radius: var(--r-pill);
  background: var(--c-brand); color: #3a2a12;
  font-family: var(--font-display); font-size: var(--fs-20);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 -3px 0 rgba(0, 0, 0, .14);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-play:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-play:active { transform: translateY(0) scale(.98); }

/* 地图标题 */
.path-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.path-title { font-size: var(--fs-24); }
.path-count { font-size: var(--fs-12); color: var(--c-ink-3); font-family: var(--font-en); font-weight: 700; }
.path-legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--c-ink-3); }
.path-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 10px; }
.path-legend i:first-child { margin-left: 0; }
.lg-done { background: var(--tp); }
.lg-now { background: var(--c-brand); }
.lg-lock { background: #cfc6b8; }

/* 关卡路径：一条向前延伸的路 */
.path {
  position: relative; list-style: none;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) 0 var(--sp-7);
  --path-k: 1px;            /* 蛇形摆动幅度：窄屏保持紧凑，宽屏放大成真正的路线 */
}
@media (min-width: 900px) { .path { --path-k: 2.3px; } }
@media (min-width: 1200px) { .path { --path-k: 3.1px; } }
.path::before {
  content: ''; position: absolute;
  top: var(--sp-5); bottom: var(--sp-7);
  left: 50%; width: 4px; transform: translateX(-50%);
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--c-line) 0 10px, transparent 10px 20px);
}
.path-chapter {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 6px 16px;
  background: var(--c-canvas);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.path-chapter span {
  font-family: var(--font-en); font-size: 11px; font-weight: 800; letter-spacing: .6px;
  color: var(--txt); background: var(--soft);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.path-chapter b {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-14); color: var(--c-ink-2);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.stop {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translateX(calc(var(--x, 0) * var(--path-k, 1px)));
}
.stop-btn {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 6px 16px rgba(43, 33, 24, .16), 0 0 0 3px var(--bd);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stop-btn:hover { transform: translateY(-2px) scale(1.04); }
.stop-face {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--soft); color: var(--tp);
  font-family: var(--font-en); font-size: var(--fs-20); font-weight: 800;
}
.stop-face svg { fill: currentColor; }
.stop.is-done .stop-btn { box-shadow: 0 6px 16px rgba(43, 33, 24, .18), 0 0 0 3px var(--tp); }
.stop.is-done .stop-face { background: var(--tp); color: #fff; }
.stop.is-locked .stop-btn { background: #f4efe6; box-shadow: 0 4px 12px rgba(43, 33, 24, .1), 0 0 0 3px #e4ddd0; }
.stop.is-locked .stop-face { background: #efe9de; color: #8a8175; }
.stop.is-now .stop-btn { width: 92px; height: 92px; }
.stop.is-now .stop-face { background: var(--c-brand); color: #3a2a12; font-size: var(--fs-24); }
.stop.is-now .stop-btn::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 3px solid var(--c-brand);
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.94); opacity: .85; }
  70% { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
.stop-type {
  position: absolute; bottom: -4px; right: -8px;
  background: #fff; color: var(--txt);
  border: 1px solid var(--bd);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r-pill);
}
.stop-stars { display: flex; gap: 1px; font-size: 11px; line-height: 1; color: #d8d0c2; }
.stop-stars i { font-style: normal; }
.stop-stars i.on { color: #f0a500; }
.stop-label {
  max-width: 168px; text-align: center;
  font-family: var(--font-en); font-size: 11px; font-weight: 700;
  color: var(--c-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stop-here {
  position: absolute; left: calc(50% + 44px); top: 12px;
  white-space: nowrap;
  background: var(--c-brand); color: #3a2a12;
  font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
@keyframes skelPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.path-error { width: 100%; }

/* ---------- 4.2 关卡弹层（认识 → 挑战 → 动画 → 结算） ---------- */
.level-mask { z-index: 210; }
.level-sheet {
  width: min(760px, 100%);
  max-height: min(90dvh, 900px);
  display: flex; flex-direction: column;
  background: var(--c-canvas);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.level-top {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px var(--sp-5);
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.level-heading { flex: 1; min-width: 0; }
.level-kicker {
  display: block;
  font-family: var(--font-en); font-size: 11px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: var(--txt);
}
.level-heading h2 { font-size: var(--fs-20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level-steps { list-style: none; display: flex; gap: 16px; flex: none; }
.level-steps li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10px; color: var(--c-ink-3);
}
.level-steps i { width: 10px; height: 10px; border-radius: 50%; background: #e4ddd0; transition: background .2s, box-shadow .2s; }
.level-steps li.is-done i { background: var(--tp); }
.level-steps li.is-now i { background: var(--c-brand); box-shadow: 0 0 0 4px rgba(245, 198, 52, .3); }
.level-steps li.is-now { color: var(--c-ink); font-weight: 700; }
.level-stars { display: flex; gap: 1px; font-size: var(--fs-20); color: #cdbda1; flex: none; }
.level-stars i { font-style: normal; }
.level-stars i.on { color: #f0a500; }
.level-close { flex: none; }
.level-body { padding: var(--sp-5) clamp(14px, 3vw, 26px) var(--sp-6); overflow-y: auto; overscroll-behavior: contain; }

.lvl-lead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lvl-lead .mascot-svg { width: 64px; height: 64px; flex: none; }
.lvl-lead .mascot-bubble { max-width: 480px; }
.lvl-lead .mascot-bubble::before { left: -5px; top: 50%; transform: translateY(-50%) rotate(45deg); }

.goal-words {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-5);
}
.goal-word {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1.5px solid var(--c-line);
  border-radius: var(--r-lg); padding: 10px 8px;
  transition: border-color .15s ease, transform .15s ease;
}
.goal-word:hover { border-color: var(--c-brand); transform: translateY(-2px); }
.gw-pic {
  width: 64px; height: 64px; border-radius: var(--r-md);
  display: grid; place-items: center; overflow: hidden;
  background: var(--soft);
}
.gw-pic img { width: 100%; height: 100%; object-fit: contain; transform: scale(var(--wz, 1.04)); }
.gw-en { font-family: var(--font-en); font-size: var(--fs-16); font-weight: 800; }
.gw-cn { font-size: var(--fs-12); color: var(--c-ink-3); }
.gw-pic .letter-fallback, .go-pic .letter-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-en); font-size: var(--fs-24); font-weight: 800; color: #fff;
}
.lvl-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* 听音选图 */
.game-head { display: flex; align-items: center; gap: var(--sp-3); }
.game-hear {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill); padding: 8px 14px;
  font-size: var(--fs-14); font-weight: 700; color: var(--txt);
  transition: border-color .15s ease, background .15s ease;
}
.game-hear:hover { border-color: var(--tp); background: var(--soft); }
.game-dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.game-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e4ddd0; }
.game-dots i.on { background: var(--tp); }
.game-dots i.now { background: var(--c-brand); transform: scale(1.35); }
.game-count { font-family: var(--font-en); font-size: var(--fs-12); font-weight: 800; color: var(--c-ink-3); }
.game-body { display: flex; flex-direction: column; justify-content: center; min-height: 300px; }
.game-ask { margin: var(--sp-4) 0 var(--sp-3); text-align: center; font-family: var(--font-display); font-size: var(--fs-20); color: var(--c-ink); }
.game-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.game-opt {
  background: #fff; border: 2px solid var(--c-line);
  border-radius: var(--r-xl); padding: 10px;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.game-opt:hover { transform: translateY(-3px); border-color: var(--c-brand); box-shadow: var(--sh-2); }
.go-pic { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--soft); }
.go-pic img { width: 100%; height: 100%; object-fit: contain; transform: scale(var(--wz, 1.04)); }
.go-pic .letter-fallback { font-size: var(--fs-44); }
.game-opt.is-right {
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .22);
  animation: optPop .38s cubic-bezier(.34, 1.56, .64, 1);
}
.game-opt.is-wrong { border-color: #f0a500; animation: optShake .42s ease; }
@keyframes optPop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes optShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}
.game-fb {
  min-height: 26px; margin-top: var(--sp-3);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-family: var(--font-display); font-size: var(--fs-16); color: var(--txt);
}
.fb-owl { width: 34px; height: 34px; flex: none; }
.fb-owl .mascot-svg { width: 100%; height: 100%; }
/* 看图选词：大图 + 单词按钮 */
.game-picture {
  width: min(240px, 58vw); aspect-ratio: 1 / 1;
  margin: var(--sp-2) auto var(--sp-4);
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--soft); display: grid; place-items: center;
}
.game-picture img { width: 100%; height: 100%; object-fit: contain; transform: scale(var(--wz, 1.04)); }
.game-picture .letter-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-en); font-size: 72px; font-weight: 800; color: #fff; }
/* 无配图：用中性图标 + 中文提示，绝不拿首字母充当题目图片 */
.no-pic {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 100%; height: 100%;
  border-radius: 14px; background: rgba(47,158,110,.10); color: #2F9E6E;
}
.no-pic em { font-style: normal; font-size: var(--fs-12); font-weight: 700; color: #5b5546; }
.game-picture.has-none { background: transparent; }
.game-picture.has-none .no-pic { width: 128px; height: 128px; border-radius: 50%; }
.word-chip .no-pic { width: 34px; height: 34px; border-radius: 50%; }
.word-chip .no-pic svg { width: 17px; height: 17px; }
.word-media .no-pic { border-radius: var(--r-md); }
.word-media .no-pic svg { width: 22px; height: 22px; }
.qg-load { font-size: var(--fs-12); color: var(--c-ink-3); }
.game-opts.is-words { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.game-word {
  min-height: 56px; padding: 10px 12px;
  background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-lg);
  font-family: var(--font-en); font-size: var(--fs-20); font-weight: 800; color: var(--c-ink);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.game-word:hover { transform: translateY(-3px); border-color: var(--c-brand); box-shadow: var(--sh-2); }
.game-word.is-right { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .22); animation: optPop .38s cubic-bezier(.34, 1.56, .64, 1); }
.game-word.is-wrong { border-color: #f0a500; animation: optShake .42s ease; }
.level-sfx .sfx-off { display: none; }
.level-sfx .sfx-wave { transition: opacity .15s ease; }
.level-sfx.is-off .sfx-off { display: inline; }
.level-sfx.is-off .sfx-wave { opacity: 0; }

/* 看动画 */
.watch-card {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: var(--sp-4); align-items: center;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-xl); padding: 10px;
  margin: var(--sp-4) 0 var(--sp-5);
}
.watch-pic {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: hsl(var(--fb-h, 158) 44% 26%);
}
.watch-pic img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.watch-pic img.is-loaded { opacity: 1; }
.watch-pic .media-fallback {
  background:
    radial-gradient(70% 70% at 50% 42%, rgba(255, 255, 255, .2) 0%, transparent 68%),
    linear-gradient(135deg, hsl(var(--fb-h, 158) 44% 38%) 0%, hsl(var(--fb-h, 158) 52% 22%) 100%);
}
.watch-pic .fb-ico { background: rgba(255, 255, 255, .94); }
.watch-pic .fb-ico svg { fill: #23190f; }
.watch-info b { display: block; font-family: var(--font-en); font-size: var(--fs-16); font-weight: 800; color: var(--c-ink); }
.watch-info small { display: block; margin-top: 4px; font-size: var(--fs-12); color: var(--c-ink-3); }

/* 结算 */
.clear-box { text-align: center; padding: var(--sp-2) 0; }
.clear-stars { display: flex; justify-content: center; gap: 8px; font-size: 46px; line-height: 1; color: #e4ddd0; }
.clear-stars i { font-style: normal; }
.clear-stars i.on {
  color: #f0a500; text-shadow: 0 6px 16px rgba(240, 165, 0, .45);
  animation: starIn .45s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.clear-stars i.on:nth-child(2) { animation-delay: .1s; }
.clear-stars i.on:nth-child(3) { animation-delay: .2s; }
@keyframes starIn { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.clear-box h3 { margin-top: var(--sp-3); font-size: var(--fs-32); }
.clear-sub { margin-top: 6px; font-size: var(--fs-14); color: var(--c-ink-2); }
.clear-flag {
  margin: 10px auto 0; max-width: 480px; padding: 8px 14px; border-radius: var(--r-pill);
  background: #fff4d9; border: 1px solid #f2d79a; color: #7a5a12; font-size: var(--fs-13); font-weight: 700;
}
.clear-flag.is-good { background: #e8f6ee; border-color: #b7e2c9; color: #1d6b46; }
.clear-stars.is-off { color: #ded6c7; }
.clear-stars.is-off i { opacity: .75; }
.clear-box .lvl-lead { margin: var(--sp-5) auto var(--sp-4); max-width: 520px; text-align: left; }
.clear-box .lvl-actions { justify-content: center; }
.clear-box > .link-btn { margin-top: var(--sp-4); }

/* --- 五步关卡：步骤指示 / 词卡 / TPR / 描字 --- */
.step-tip {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 var(--sp-3);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--soft); color: var(--txt);
  font-size: var(--fs-12); font-weight: 700;
}
.step-tip b { font-family: var(--font-en); font-size: var(--fs-14); }

.watch-words { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.word-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid var(--c-line);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.word-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: var(--soft); }
.wc-letter {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800;
}
.word-chip b { font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800; }
.word-chip small { font-size: var(--fs-12); color: var(--c-ink-3); }
.word-chip:hover, .word-chip.is-on { border-color: var(--tp); box-shadow: 0 0 0 3px var(--glow); transform: translateY(-1px); }
.watch-note { margin: 0 0 var(--sp-4); font-size: var(--fs-12); color: var(--c-ink-3); }
.go-label { display: block; margin-top: 6px; font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800; color: var(--c-ink-2); }

/* 第 3 步：做动作 / 指颜色 / 摆实物 */
.tpr-stage { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-3); }
.tpr-stage .mascot-svg { width: 92px; height: 92px; flex: none; }
.tpr-stage .mascot-svg.is-hop { animation: owlHop .55s cubic-bezier(.34, 1.56, .64, 1) 2; }
@keyframes owlHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-10px) scale(1.04); } }
.tpr-big { display: flex; flex-direction: column; gap: 2px; }
.tpr-en { font-family: var(--font-en); font-size: var(--fs-32); font-weight: 800; color: var(--c-ink); }
.tpr-cn { font-size: var(--fs-14); color: var(--c-ink-3); }
.tpr-hint-pic { width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: var(--soft); display: grid; place-items: center; flex: none; }
.tpr-hint-pic img { width: 100%; height: 100%; object-fit: contain; }
.tpr-ask { margin: var(--sp-3) 0 var(--sp-4); text-align: center; font-family: var(--font-display); font-size: var(--fs-20); color: var(--c-ink); }
.tpr-ask b { color: var(--txt); }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.swatch {
  background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-xl);
  padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .14s ease, border-color .14s ease;
}
.swatch i { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.swatch span { font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800; }
.swatch:hover { transform: translateY(-3px); border-color: var(--c-brand); }
.swatch.is-right { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .22); animation: optPop .38s cubic-bezier(.34, 1.56, .64, 1); }
.swatch.is-wrong { border-color: #f0a500; animation: optShake .42s ease; }
.tpr-drop-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.tpr-drop {
  height: 170px; padding: 10px;
  border: 2px dashed var(--c-line); border-radius: var(--r-xl);
  background: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--txt); font-family: var(--font-display); font-size: var(--fs-16);
}
.tpr-drop:hover { border-color: var(--tp); }
.tpr-drop-owl .mascot-svg { width: 66px; height: 66px; }
.tpr-hand { font-family: var(--font-ui); font-size: var(--fs-12); color: var(--c-ink-3); }
.tpr-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.tpr-opt { background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: 8px; transition: transform .14s ease, border-color .14s ease; }
.tpr-opt:hover { transform: translateY(-3px); border-color: var(--c-brand); }
.tpr-opt.is-right { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .22); }
.tpr-opt.is-wrong { border-color: #f0a500; animation: optShake .42s ease; }
.tpr-opt.is-dragging { opacity: .35; }
.tpr-ghost { position: fixed; z-index: 340; pointer-events: none; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); transform: scale(.92); opacity: .95; }
.tpr-ghost .go-pic { width: 100%; height: 100%; }
.tpr-foot { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-4); }
.tpr-count { font-family: var(--font-en); font-size: var(--fs-12); font-weight: 800; color: var(--c-ink-3); }
/* 摄像头跟做 */
.tpr-stage-act { flex-direction: column; }
.tpr-cam { position: relative; width: min(420px, 100%); aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: #10151a; box-shadow: var(--sh-2); }
.tpr-cam video, .tpr-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.tpr-cam canvas { pointer-events: none; }
.tpr-cam-hud { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 8px; }
.tpr-cam-score { min-width: 58px; padding: 2px 10px; border-radius: 999px; background: rgba(16, 21, 26, .62); color: #fff; font-family: var(--font-en); font-size: var(--fs-24); font-weight: 800; text-align: center; }
.tpr-cam-tip { padding: 4px 10px; border-radius: 999px; background: rgba(16, 21, 26, .62); color: #fff; font-size: var(--fs-12); }
.tpr-cam-bar { position: absolute; left: 12px; right: 12px; bottom: 46px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.tpr-cam-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #34d399, #fbbf24); transition: width .2s linear; }
.tpr-cam-off { position: absolute; right: 10px; bottom: 10px; padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(16, 21, 26, .72); color: #fff; font-size: var(--fs-12); cursor: pointer; }
.tpr-cam-word { position: absolute; left: 12px; bottom: 10px; color: #fff; font-family: var(--font-en); font-size: var(--fs-20); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.tpr-cam-idle { display: flex; align-items: center; gap: var(--sp-4); }
.cam-priv { max-width: 460px; margin: var(--sp-2) auto 0; text-align: center; font-size: var(--fs-12); color: var(--c-ink-3); }
.tpr-cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.tpr-cta .cam-priv { margin: 0; }
.speak-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.speak-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--bd); border-radius: 999px; background: var(--soft); color: var(--c-ink); font-family: var(--font-ui); font-size: var(--fs-14); cursor: pointer; }
.speak-btn:hover { border-color: var(--tp); }
.speak-btn:disabled { opacity: .6; cursor: progress; }
.speak-btn b { font-family: var(--font-en); }
.speak-badge { font-size: var(--fs-12); color: var(--c-ink-3); }
.speak-badge b { font-family: var(--font-en); font-size: var(--fs-16); color: var(--txt); }
.clear-report { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.clear-report span { font-size: var(--fs-12); color: var(--c-ink-3); }
.clear-report b { font-family: var(--font-en); font-size: var(--fs-16); color: var(--txt); }

/* 第 4 步：描单词 */
.trace-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.trace-mode { font-size: var(--fs-14); color: var(--c-ink-2); }
.trace-mode b { font-family: var(--font-en); font-size: var(--fs-24); color: var(--c-ink); }
.trace-dots { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--c-ink-3); }
.trace-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--c-line); font-family: var(--font-en); font-weight: 800;
  font-size: var(--fs-12); color: var(--c-ink-3);
}
.trace-dot.is-now { border-color: var(--c-brand); color: var(--c-brand); background: #fff7ec; }
.trace-dot.is-done { border-color: transparent; background: var(--c-brand); color: #fff; }
.trace-dot-sep { color: var(--c-ink-3); font-size: 10px; }
.trace-stage {
  position: relative; width: min(300px, 70vw); aspect-ratio: 1 / 1;
  margin: var(--sp-3) auto;
  border-radius: var(--r-xl); background: #fff; border: 1px solid var(--c-line);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .035);
  overflow: hidden; touch-action: none;
}
.trace-stage canvas { position: absolute; inset: 0; }
#traceInk { cursor: crosshair; touch-action: none; }
.trace-tip {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  padding: 2px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9); color: var(--c-ink-3);
  font-size: 11px; pointer-events: none; white-space: nowrap;
}
.trace-actions { justify-content: center; }
.trace-note { margin-top: var(--sp-3); font-size: var(--fs-12); color: var(--c-ink-3); text-align: center; }

/* 结算里的错题回练与补充入口 */
.clear-wrong { margin: var(--sp-4) auto var(--sp-2); max-width: 520px; padding: var(--sp-3); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.cw-title { font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--sp-2); }
.cw-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--sp-2); }
.cw-chips .word-chip { padding: 4px 10px 4px 4px; }
.cw-chips .word-chip img, .cw-chips .wc-letter { width: 28px; height: 28px; }
.clear-links { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }

/* 星星粒子 */
.spark {
  position: fixed; z-index: 340; width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none;
  animation: sparkFly .85s ease-out forwards;
}
@keyframes sparkFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); }
}

/* ---------- 5. 课程卡片 ---------- */
.card-grid {
  display: grid;
  /* auto-fit：空轨道折叠，2 集的单元两张卡均分整行，不留空洞 */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-5);
}
/* 单集单元不至于拉成整行巨卡 */
.card-grid > .lesson-card { max-width: 560px; }
.lesson-card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: 10px 10px 12px;
  box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lesson-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--bd); }
.card-main {
  display: block; width: 100%; text-align: left;
  border-radius: var(--r-lg);
}
.media {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* 封面占位：主题渐变 + 骨架微光，避免白块空窗 */
  background:
    radial-gradient(120% 120% at 12% 8%, rgba(255, 255, 255, .85) 0%, transparent 55%),
    linear-gradient(135deg, var(--soft) 0%, #fff7e2 60%, #ffeec4 100%);
}
.media::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
  transition: opacity .3s ease;
}
/* 封面未加载 / 缺失时的统一占位（渐变 + 播放符），不留白块 */
.media-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 18% 8%, rgba(255, 255, 255, .9) 0%, transparent 58%),
    linear-gradient(135deg, hsl(var(--fb-h, 150) 66% 90%) 0%, hsl(var(--fb-h, 150) 58% 78%) 100%);
}
.media-fallback .fb-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 4px 14px rgba(43, 33, 24, .12);
}
.media-fallback .fb-ico svg { width: 18px; height: 18px; fill: #6b5b45; margin-left: 3px; }
.continue-media .media-fallback .fb-ico { width: 64px; height: 64px; }
.continue-media .media-fallback .fb-ico svg { width: 24px; height: 24px; }
/* 主卡占位做成“视频海报”质感，避免大面积浅色空白 */
.continue-media .media-fallback {
  background:
    radial-gradient(70% 70% at 50% 42%, rgba(255, 255, 255, .22) 0%, transparent 68%),
    linear-gradient(135deg, hsl(var(--fb-h, 150) 44% 38%) 0%, hsl(var(--fb-h, 150) 52% 22%) 100%);
}
.continue-media .media-fallback .fb-ico { background: rgba(255, 255, 255, .94); }
.continue-media .media-fallback .fb-ico svg { fill: #23190f; }
.media.is-loaded::before { opacity: 0; animation: none; }
.media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease, transform .3s ease;
}
.media img.is-loaded { opacity: 1; }
.lesson-card:hover .media img { transform: scale(1.03); }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

.media .dur {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-family: var(--font-en); font-size: 11px; font-weight: 800;
  color: #fff; background: rgba(20, 15, 9, .66);
  padding: 2px 8px; border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
}
.media .free-tag {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-size: 11px; font-weight: 800; color: var(--c-ink);
  background: var(--c-brand); padding: 3px 9px; border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(217, 158, 0, .4);
}
.card-body { display: block; padding: 10px 4px 0; }
.card-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-en); font-size: var(--fs-16); font-weight: 800;
  line-height: 1.4; color: var(--c-ink);
  min-height: 2.8em;
}
.card-meta {
  display: block; margin-top: 4px;
  font-size: var(--fs-12); color: var(--c-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 10px 4px 0;
  border-top: 1px dashed var(--c-line);
}
.status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-12); font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  color: var(--c-ink-3); background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  white-space: nowrap;
}
.status.is-watched { color: var(--txt); background: var(--soft); border-color: var(--bd); }
.status.is-done { color: var(--txt); background: var(--soft); border-color: var(--bd); font-weight: 800; }
.status svg { width: 11px; height: 11px; fill: currentColor; }
.btn-quiz {
  flex: none;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: #fff;
  font-size: var(--fs-12); font-weight: 700;
  transition: filter .16s ease;
}
.btn-quiz:hover { filter: brightness(1.08); }
.btn-quiz:disabled {
  background: #efece6; color: #6b6156; cursor: not-allowed; filter: none;
}

/* 空状态 */
.empty-state {
  text-align: center; padding: var(--sp-9) var(--sp-4);
  color: var(--c-ink-3);
}
.empty-state p { margin-bottom: var(--sp-4); }

.site-footer {
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  text-align: center;
  font-size: var(--fs-12); color: var(--c-ink-3);
  line-height: 2;
}

/* ---------- 6. 单词库 ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.page-head h1, .page-head .page-title { font-size: clamp(26px, 3vw, var(--fs-32)); margin-top: 2px; }
.page-sub { margin-top: 4px; font-size: var(--fs-14); color: var(--c-ink-3); }
.search-field {
  display: flex; align-items: center; gap: 8px;
  min-width: min(340px, 100%);
  padding: 0 16px; height: 46px;
  background: #fff; border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-ink-3);
}
.search-field:focus-within { border-color: var(--c-brand-deep); box-shadow: 0 0 0 3px rgba(245, 198, 52, .28); }
.search-field input {
  flex: 1; min-width: 0; border: none; outline: none;
  background: none; font: inherit; font-size: var(--fs-14); color: var(--c-ink);
}
.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--sp-4);
}
.word-card {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 12px 10px 14px;
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.word-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--c-brand); }
/* 统一视觉重量：固定方形图框 + contain + 轻裁边，避免"有的很小有的撑满" */
.word-media {
  width: 100%; max-width: 84px; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: radial-gradient(120% 120% at 30% 20%, #fff 0%, #fdf8ec 100%);
  overflow: hidden;
  margin-bottom: 8px;
}
.word-media img {
  width: 100%; height: 100%; object-fit: contain;
  /* --wz 由脚本按白边裁切比例写入，统一主体视觉大小 */
  transform: scale(var(--wz, 1.1));
  transition: transform .18s ease;
}
.word-card:hover .word-media img { transform: scale(calc(var(--wz, 1.1) + .06)); }
.word-media .letter-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-en); font-size: var(--fs-32); font-weight: 800; color: #fff;
}
.word-card .en {
  font-family: var(--font-en); font-size: var(--fs-16); font-weight: 800;
  color: var(--c-ink); line-height: 1.3; text-align: center;
  word-break: break-word;
}
.word-card .cn { font-size: var(--fs-12); color: var(--c-ink-3); margin-top: 2px; text-align: center; }
.list-note { margin-top: var(--sp-5); font-size: var(--fs-12); color: var(--c-ink-3); text-align: center; }
.list-more { display: flex; justify-content: center; margin-top: var(--sp-5); }

/* ---------- 7. 个人中心 ---------- */
.view-profile { max-width: none; padding: 0 0 calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); position: relative; }
.pf-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/qp/setting_bg.png') center / cover no-repeat;
  opacity: .9;
}
.pf-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251, 247, 238, .55), rgba(251, 247, 238, .92));
}
.pf-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-6); }
.pf-topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-2);
}
.pf-back {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--c-ink);
  background: rgba(255, 255, 255, .7);
}
.pf-back:hover { background: #fff; }
.pf-page-title { font-size: var(--fs-20); }
.pf-body {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-6); align-items: start;
  padding-top: var(--sp-3);
}
.pf-menu { display: flex; flex-direction: column; gap: 4px; }
.pf-mi {
  display: flex; align-items: center;
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: var(--fs-16); font-weight: 700; color: var(--c-ink-2);
  text-align: left;
  transition: background .16s ease, color .16s ease;
}
.pf-mi:hover { background: rgba(255, 255, 255, .75); color: var(--c-ink); }
.pf-mi.active {
  background: linear-gradient(120deg, #ffd75e, var(--c-brand));
  color: var(--c-ink);
  box-shadow: 0 6px 16px rgba(217, 158, 0, .35);
}
.pf-main { min-width: 0; }
.pf-panel { display: grid; gap: var(--sp-3); }
.pf-strip {
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(233, 226, 214, .9);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  text-align: center;
  font-size: var(--fs-16); font-weight: 700; color: var(--c-ink);
}
.pf-strip b { font-family: var(--font-en); font-size: var(--fs-24); padding: 0 4px; }
.pf-strip-tall { font-weight: 600; font-size: var(--fs-14); color: var(--c-ink-2); line-height: 2; }
.pf-big-num { display: block; font-size: var(--fs-32) !important; color: var(--c-ink); }
.pf-share-row { display: flex; justify-content: center; gap: clamp(24px, 8vw, 88px); }
.pf-share-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: var(--fs-14); font-weight: 600; color: var(--c-ink-2);
}
.pf-share-circle {
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: var(--sh-1);
  transition: transform .16s ease;
}
.pf-share-item:hover .pf-share-circle { transform: scale(1.06); }
.pf-share-circle img { width: 40px; height: 40px; object-fit: contain; }
.pf-uid-row {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex-wrap: wrap; font-size: var(--fs-14); color: var(--c-ink-2);
}
.pf-uid-row b { font-family: var(--font-en); color: var(--c-ink); }

.pf-card {
  background: #fff; border-radius: var(--r-xl);
  border: 1px solid var(--c-line);
  padding: var(--sp-6);
  box-shadow: var(--sh-1);
  text-align: center;
}
.field-label { display: block; font-size: var(--fs-14); font-weight: 700; color: var(--c-ink); margin-bottom: 10px; }
.text-input {
  width: 100%; height: 46px;
  padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  background: #fffdf9; color: var(--c-ink);
  font: inherit; font-size: var(--fs-14); letter-spacing: 1.5px;
  text-align: center; outline: none;
}
.text-input:focus { border-color: var(--c-brand-deep); box-shadow: 0 0 0 3px rgba(245, 198, 52, .28); }
.pf-card .btn-primary { margin-top: var(--sp-3); }
.field-hint { margin-top: 10px; font-size: var(--fs-12); color: var(--c-ink-3); }
.pf-wip { display: grid; place-items: center; gap: 6px; padding: var(--sp-8) var(--sp-5); }
.pf-wip-t { font-family: var(--font-display); font-size: var(--fs-20); }
.pf-wip-sub { font-size: var(--fs-14); color: var(--c-ink-3); }

/* 关于文档 */
.about-doc {
  background: #fff; border-radius: var(--r-xl); border: 1px solid var(--c-line);
  padding: clamp(20px, 4vw, 40px);
  box-shadow: var(--sh-1);
  font-size: var(--fs-14); line-height: 1.9; color: var(--c-ink-2);
}
.about-doc h2 { font-size: var(--fs-24); color: var(--c-ink); margin-bottom: var(--sp-3); }
.about-doc h3 {
  font-family: var(--font-ui); font-size: var(--fs-16); font-weight: 700;
  color: var(--c-ink); margin: var(--sp-5) 0 var(--sp-2);
}
.about-doc p { margin-bottom: var(--sp-2); }
.about-doc ul { padding-left: 1.2em; }
.about-doc li { margin-bottom: 4px; }
.about-doc a { color: #0b6a8f; text-decoration: underline; text-underline-offset: 2px; }
.about-meta { margin-top: var(--sp-4); font-size: var(--fs-12); color: var(--c-ink-3); }

/* ---------- 8. 弹层 / 播放器 ---------- */
.modal-mask, .player-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(30, 22, 12, .5);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 40px);
}
.unit-sheet {
  position: relative;
  width: min(1060px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--c-canvas);
  border-radius: var(--r-2xl);
  padding: var(--sp-6) clamp(16px, 3vw, 32px) var(--sp-7);
  box-shadow: var(--sh-3);
  overscroll-behavior: contain;
}
.sheet-close {
  position: sticky; top: 0; float: right; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--c-ink);
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
}
.sheet-close:hover { background: var(--c-brand); }
.unit-hero { display: flex; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-5); clear: both; }
.unit-hero .pic {
  width: 300px; flex: none; aspect-ratio: 16 / 9.4;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--soft);
  box-shadow: var(--sh-1);
}
.unit-hero .pic img, .unit-hero .pic svg { width: 100%; height: 100%; object-fit: cover; }
.unit-hero h2 { font-size: var(--fs-24); }
.unit-hero .sub { margin-top: 6px; font-size: var(--fs-14); color: var(--c-ink-3); }
.unit-stats { display: flex; gap: 8px; margin-top: var(--sp-3); flex-wrap: wrap; }
.stat-chip {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 5px 12px; font-size: var(--fs-12); font-weight: 600; color: var(--c-ink-2);
}
.sec-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: var(--fs-20);
  margin: var(--sp-5) 0 var(--sp-3);
}
.sec-title::before { content: ''; width: 5px; height: 18px; border-radius: 3px; background: var(--c-brand); }
.vid-list { display: grid; gap: 8px; }
.vid-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: #fff; border: 1.5px solid transparent;
  border-radius: var(--r-md); padding: 10px 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.vid-item:hover { border-color: var(--c-brand); transform: translateX(3px); }
.vid-item .vtype {
  flex: none; width: 52px; text-align: center;
  font-family: var(--font-en); font-size: 11px; font-weight: 800;
  border-radius: 8px; padding: 4px 0;
}
.vtype.story { background: #e8f1ff; color: #2a5db0; }
.vtype.song { background: #ffe9e0; color: #b03e18; }
.vtype.bonus { background: #efe7ff; color: #5b34ab; }
.vid-item .vname { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 700; }
.vid-item .vname small { font-weight: 600; font-size: var(--fs-12); color: var(--c-ink-3); }
.vid-item .vdur { font-family: var(--font-en); font-size: var(--fs-12); color: var(--c-ink-3); }
.vid-item .vplay {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-brand);
}
.word-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.wchip {
  flex: none; width: 112px; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 10px 8px; text-align: center;
}
.wchip .word-media { max-width: 64px; margin: 0 auto 6px; }
.wchip .en { font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800; }
.wchip .cn { font-size: var(--fs-12); color: var(--c-ink-3); }
.sent-list { display: grid; gap: 8px; }
.sent-item {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 10px 14px;
  font-family: var(--font-en); font-size: var(--fs-14); line-height: 1.6;
}
.sent-item b { color: var(--c-brand-deep); }

/* 播放器 */
.player-mask { padding: 0; background: #0b0806; display: block; }
.player-sheet {
  width: 100vw; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  background: #0d0a07; overflow: hidden;
}
.player-sheet.wide { grid-template-columns: 1fr 0; }
.player-sheet.wide .player-side { display: none; }
.player-main { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100dvh; }
.player-stage {
  position: relative; flex: 1; min-height: 0;
  display: grid; place-items: center; overflow: hidden; background: #000;
}
.player-stage:fullscreen { width: 100vw; height: 100vh; }
.player-stage video,
.player-stage > img.stage-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.big-play {
  position: relative; z-index: 4;
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(245, 198, 52, .96);
  display: grid; place-items: center;
  box-shadow: 0 10px 40px rgba(245, 198, 52, .45);
  transition: transform .2s ease;
}
.big-play:hover { transform: scale(1.06); }
.stage-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 40px 20px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  display: flex; flex-direction: column; gap: 8px;
}
.hud-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .26); position: relative; cursor: pointer; }
.hud-track:hover { height: 8px; }
.hud-done { position: absolute; inset: 0 auto 0 0; background: var(--c-brand); border-radius: 3px; }
.hud-knob {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.hud-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hud-btn {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: rgba(255, 255, 255, .1);
  transition: background .15s ease;
}
.hud-btn:hover { background: rgba(255, 255, 255, .24); }
.hud-time { color: #fff; font-family: var(--font-en); font-size: var(--fs-12); opacity: .92; }
.hud-flex { flex: 1; }
.hud-close {
  position: absolute; top: 14px; left: 14px; z-index: 9;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: rgba(0, 0, 0, .48); backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
.hud-close:hover { background: rgba(0, 0, 0, .7); }
.sub-line {
  display: block; width: calc(100% - 36px);
  margin: 10px 18px 16px;
  background: #241c15; border: 0; border-radius: var(--r-md);
  padding: 12px 16px; text-align: left; cursor: pointer;
  color: #ffe9a8; font-family: var(--font-en); font-size: var(--fs-14); line-height: 1.6;
}
.sub-line:hover { background: #2e241b; }
.sub-line small { display: block; margin-top: 4px; color: #cbbda6; font-size: var(--fs-12); }
.player-side {
  height: 100dvh; overflow-y: auto;
  background: #201913; border-left: 1px solid #2b2219;
  padding: 18px; overscroll-behavior: contain;
}
.side-head { padding: 4px 4px 8px; }
.side-title { color: #fff; font-family: var(--font-en); font-size: var(--fs-16); font-weight: 800; line-height: 1.5; }
.side-sub { color: #cbbda6; font-size: var(--fs-12); margin-top: 6px; }
.player-side .sec-title { color: #f5e6c8; font-size: var(--fs-16); }
.plist-item {
  display: flex; gap: 10px; align-items: center;
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: #e0d2ba; font-size: var(--fs-14);
}
.plist-item:hover { background: rgba(255, 255, 255, .06); }
.plist-item.is-target { background: rgba(245, 158, 11, .16); color: #ffe9a8; font-weight: 700; }
.plist-item .idx { color: #b7a68c; }
.plist-item .nm { flex: 1; min-width: 0; }
.plist-item .nm small { color: #c2b199; font-weight: 500; margin-left: 6px; }
.stage-load {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; align-content: center; gap: 12px;
  background: rgba(0, 0, 0, .4); color: #fff;
  font-size: var(--fs-14); font-weight: 600;
}
.stage-load .spin {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #ffd75e;
  animation: spin 0.8s linear infinite;
}
.stage-note {
  position: absolute; left: 50%; bottom: 34%; transform: translateX(-50%);
  z-index: 5; max-width: min(90%, 460px); text-align: center;
  color: #ffe9a8; font-size: var(--fs-14); line-height: 1.7;
  background: rgba(20, 15, 9, .72); border: 1px solid rgba(255, 233, 168, .28);
  border-radius: var(--r-md); padding: 8px 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 通用对话卡（兑换中心 / 激活） */
.dialog-card {
  position: relative;
  width: min(460px, 100%); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-2xl);
  padding: clamp(22px, 4vw, 32px);
  box-shadow: var(--sh-3);
  text-align: center;
  overscroll-behavior: contain;
}
.dialog-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--c-ink-2);
  background: var(--c-surface-2);
}
.dialog-close:hover { background: #ece4d5; }
.dialog-kicker { font-size: var(--fs-12); font-weight: 700; letter-spacing: 1.2px; color: var(--c-ink-3); text-transform: uppercase; }
.dialog-card h2 { font-size: var(--fs-24); margin-top: 4px; }
.dialog-sub { margin-top: 8px; font-size: var(--fs-14); color: var(--c-ink-3); line-height: 1.7; }
.qr-box {
  margin: var(--sp-4) auto var(--sp-3);
  width: 188px; height: 188px; padding: 8px;
  border-radius: var(--r-lg); background: #fff;
  border: 1px solid var(--c-line); box-shadow: var(--sh-1);
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }
.redeem-steps {
  text-align: left; margin: var(--sp-4) 0;
  padding: 14px 16px 14px 32px;
  background: var(--c-surface-2); border-radius: var(--r-md);
  font-size: var(--fs-14); color: var(--c-ink-2); line-height: 1.9;
}
.redeem-steps li::marker { color: var(--c-brand-deep); font-weight: 700; }
.redeem-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-14); color: var(--c-ink-2);
  margin-bottom: var(--sp-3);
}
.redeem-status b { font-family: var(--font-en); font-size: var(--fs-20); color: var(--c-ink); }
.redeem-form { display: grid; gap: 10px; }
.redeem-form .text-input { text-align: left; letter-spacing: 0; }
.redeem-form .btn-primary { width: 100%; }
.dialog-note { margin-top: 10px; font-size: var(--fs-12); color: var(--c-ink-3); }

/* ---------- 9. 浮层安全区 ---------- */
.pillbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 246, .94);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid rgba(43, 33, 24, .08);
  box-shadow: 0 -8px 28px rgba(43, 33, 24, .07);
}
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: var(--fs-14); font-weight: 700;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.pill-btn small {
  font-size: 11px; font-weight: 600; color: var(--c-ink-3);
}
.pill-btn:hover { background: rgba(245, 198, 52, .18); }
.pill-btn[aria-pressed="true"] {
  background: var(--btn-bg); color: #fff;
  box-shadow: 0 8px 20px -6px var(--glow);
}
.pill-btn[aria-pressed="true"] small { color: rgba(255, 255, 255, .88); }

.redeem-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 75;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px 12px 18px;
  background: linear-gradient(120deg, #ffd75e, var(--c-brand));
  color: var(--c-brand-ink);
  font-size: var(--fs-14); font-weight: 800;
  border-radius: var(--r-md) 0 0 var(--r-md);
  box-shadow: -4px 6px 20px rgba(217, 158, 0, .38);
  transition: filter .16s ease;
}
.redeem-fab:hover { filter: brightness(1.05); }
/* 个人中心有自己的返回与操作区，隐藏浮层避免遮挡 */
body[data-view="profile"] .redeem-fab,
body[data-view="profile"] .pillbar { display: none; }

/* toast */
.toast {
  position: fixed; left: 50%; top: 78px; z-index: 300;
  transform: translateX(-50%) translateY(-12px);
  max-width: calc(100vw - 32px);
  padding: 10px 20px; border-radius: var(--r-pill);
  background: rgba(23, 18, 15, .94); color: #ffe9a8;
  font-size: var(--fs-14); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 加币飘字 */
.float-coin {
  position: fixed; z-index: 320;
  transform: translate(-50%, -50%);
  font-family: var(--font-en); font-size: var(--fs-20); font-weight: 800;
  color: #b45309; text-shadow: 0 2px 0 #fff, 0 0 10px #fff;
  pointer-events: none;
  animation: coinFloat 1.15s ease-out forwards;
}
@keyframes coinFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  25% { opacity: 1; transform: translate(-50%, -90%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

/* ---------- 10. 响应式 ---------- */
@media (max-width: 1180px) {
  .continue-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (max-width: 1024px) {
  .view { padding-left: var(--sp-5); padding-right: calc(var(--sp-5) + var(--fab-safe)); }
  .brand img { height: 30px; }
  .sfx-btn span { display: none; }
  .sfx-btn { width: 42px; padding: 0; justify-content: center; border-radius: 50%; }
}
@media (max-width: 900px) {
  .lv-tab { padding: 7px 12px; }
  .lv-tab .lv-title { display: none; }
  /* 关卡路径：吉祥物与气泡改为横排，节省一屏空间 */
  .quest { grid-template-columns: 1fr; gap: var(--sp-4); }
  .quest-mascot { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .quest-mascot .mascot-svg { width: 76px; height: 76px; }
  .quest-mascot .mascot-bubble { max-width: none; flex: 1; }
  .quest-mascot .mascot-bubble::before { top: 50%; left: -5px; transform: translateY(-50%) rotate(45deg); }
  .continue-card { grid-template-columns: 1fr; }
  .continue-media { margin: 14px 14px 0; aspect-ratio: 16 / 8; }
  .continue-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .continue-progress { margin: 10px 0 14px; }
  .view-home { padding-right: var(--sp-5); }
  .view-words { padding-right: var(--sp-5); }
  /* 窄屏把兑换按钮收进底部导航，避免覆盖卡片 */
  .redeem-fab {
    top: auto; right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: 46px; height: 46px; padding: 0;
    border-radius: 50%; justify-content: center;
    box-shadow: 0 4px 14px rgba(217, 158, 0, .45);
  }
  .redeem-fab span { display: none; }
  .pillbar { padding-right: 62px; }
  .pf-body { grid-template-columns: 1fr; }
  .pf-menu { flex-direction: row; flex-wrap: wrap; }
  .pf-mi { padding: 10px 18px; font-size: var(--fs-14); }
  .player-sheet { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .player-main { height: auto; }
  .player-side { height: auto; max-height: 40dvh; border-left: none; border-top: 1px solid #2b2219; }
}
@media (max-width: 700px) {
  .header-inner { padding: 8px 14px; gap: 8px; }
  /* 为底部胶囊 + 兑换按钮预留安全区，任何视口不遮挡卡片 */
  .view { padding-bottom: calc(var(--pillbar-h) + 104px + env(safe-area-inset-bottom, 0px)); }
  .avatar { width: 40px; height: 40px; }
  .brand { display: none; }
  .icon-btn { width: 38px; height: 38px; }
  .home-head { align-items: flex-start; }
  .home-stats { width: 100%; justify-content: space-between; }
  .lv-progress { flex: 1; min-width: 140px; }
  /* 提示条保持单行，不制造大片空白 */
  .free-banner { flex-wrap: nowrap; gap: 8px; padding: 9px 8px 9px 12px; }
  .free-banner p { flex: 1; font-size: 13px; }
  .free-banner-sub { display: none; }
  .free-banner .btn-mini { flex: none; }
  .free-banner .icon-x { margin-left: 0; }
  .content-head { align-items: center; }
  .content-count { margin-left: auto; }
  .unit-progress { display: none; }
  .card-grid { gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view { padding-top: var(--sp-4); }
  .pillbar {
    padding: 8px 62px calc(8px + env(safe-area-inset-bottom, 0px)) 10px;
    justify-content: space-between;
    gap: 4px;
  }
  .pill-btn { flex: 1; justify-content: center; padding: 0 10px; font-size: 13px; gap: 5px; }
  .pill-btn small { display: none; }
  .word-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .unit-hero { flex-direction: column; align-items: stretch; }
  .unit-hero .pic { width: 100%; }
  .pf-wrap { padding: 0 var(--sp-4); }
  .pf-strip { padding: 14px 16px; font-size: var(--fs-14); }
  .pf-strip b { font-size: var(--fs-20); }
  .about-doc { padding: 20px 18px; }
  .player-sheet { height: 100dvh; overflow-y: auto; display: block; }
  .player-stage { height: 54vw; min-height: 200px; }
  .player-side { max-height: none; }
  /* 关卡弹层：小屏全屏，一步一屏 */
  .level-mask { padding: 0; }
  .level-sheet { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .level-steps { display: none; }
  .level-body { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
  /* 手机上结算内容较少，垂直居中避免下半屏大片留白 */
  .clear-box { min-height: calc(100dvh - 150px); display: flex; flex-direction: column; justify-content: center; }
  .game-opts { gap: 8px; }
  .game-opts.is-words { grid-template-columns: 1fr; gap: 10px; }
  .game-word { min-height: 64px; }
  .game-body { min-height: calc(100dvh - 220px); justify-content: center; }
  .game-ask { font-size: var(--fs-16); }
  .watch-card { grid-template-columns: 1fr; }
  .stop-label { max-width: 120px; }
  .path::before { background: repeating-linear-gradient(180deg, var(--c-line) 0 8px, transparent 8px 16px); }
  /* 五步关卡：动作与描字在小屏一屏一个任务 */
  .tpr-drop-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .tpr-drop { height: 118px; }
  .tpr-drop-owl .mascot-svg { width: 52px; height: 52px; }
  .tpr-stage .mascot-svg { width: 72px; height: 72px; }
  .tpr-en { font-size: var(--fs-24); }
  .trace-stage { width: min(280px, 78vw); }
  .watch-words { gap: 8px; }
  .tpr-cam { width: 100%; }
  .tpr-cam-score { font-size: var(--fs-20); min-width: 48px; }
  .tpr-cam-tip { font-size: 11px; }
  .cam-priv { max-width: 300px; }
  .speak-row { margin-top: var(--sp-3); }
}
@media (max-width: 420px) {
  .view { padding-left: 14px; padding-right: 14px; }
  .view-home { padding-right: 14px; }
  .home-title h1 { font-size: 26px; }
  .level-id h1 { font-size: 24px; }
  .home-motto { font-size: var(--fs-12); }
  .card-grid { grid-template-columns: 1fr; }
  .card-name { min-height: 0; }
  .free-banner { padding: 10px; }
  .free-banner-sub { display: none; }
  .dialog-card { padding: 22px 18px; }
  .qr-box { width: 160px; height: 160px; }
  .pill-btn { font-size: 12px; }
  .word-grid { grid-template-columns: repeat(3, 1fr); }
  .word-media { max-width: 64px; }
  /* 关卡路径：窄屏收小站点与偏移，避免 '你在这里' 越界 */
  .stop-btn { width: 64px; height: 64px; }
  .stop.is-now .stop-btn { width: 82px; height: 82px; }
  .stop-here { left: calc(50% + 36px); top: 8px; font-size: 10px; padding: 2px 7px; }
  .goal-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-top { padding: 10px 14px; }
  .level-heading h2 { font-size: var(--fs-16); }
  .level-body { padding: 14px 14px 28px; }
  .clear-stars { font-size: 38px; }
  .clear-box h3 { font-size: var(--fs-24); }
  .swatch i { width: 46px; height: 46px; }
  .swatch { padding: 8px 4px; }
  .trace-stage { width: 82vw; }
  .clear-links { gap: var(--sp-2); }
}

/* 横屏手机：底部浮层降高 */
@media (max-height: 480px) and (orientation: landscape) {
  .pillbar { display: none; }
  .redeem-fab { top: 50%; bottom: auto; transform: translateY(-50%); }
  .view { padding-bottom: 40px; }
}

/* ---------- 11. 动效偏好 & 高对比 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .lesson-card:hover { transform: none; }
  .media::before { display: none; }
}

@media (forced-colors: active) {
  .btn-primary, .btn-quiz, .pill-btn[aria-pressed="true"] { border: 1px solid ButtonText; }
  .media { outline: 1px solid CanvasText; }
}

/* 移动端触控目标补足：图标按钮与迷你按钮不小于 44px */
@media (max-width: 640px) {
  .icon-btn, .icon-x, .level-close { width: 44px; height: 44px; }
  .btn-mini { min-height: 40px; padding-block: 8px; }
  .link-btn { padding-block: 6px; }
}

/* ---------- 12. 听一听·选图全屏关卡页（原 games.js 运行时注入，静态化） ---------- */
.game-page { position: fixed; inset: 0; z-index: 300; background: linear-gradient(180deg,#123a30 0%,#0e2f27 45%,#0a231d 100%); overflow: hidden; font-family: inherit; display: flex; flex-direction: column; }
.gp-sky { position: absolute; inset: 0; pointer-events: none; }
.gp-aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3; }
.gp-aurora.a1 { width: 480px; height: 340px; background: #2F9E6E; top: -110px; left: 22%; }
.gp-aurora.a2 { width: 420px; height: 380px; background: #f0a500; top: 30%; right: -140px; opacity: .16; }
.gp-aurora.a3 { width: 380px; height: 280px; background: #ff72b1; bottom: -120px; left: -80px; opacity: .12; }
.gp-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px 6px; flex-wrap: wrap; }
.gp-tl { display: flex; align-items: center; gap: 10px; }
.gp-exit { border: none; background: rgba(255,255,255,.92); border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 900; color: #3e2d12; cursor: pointer; font-family: inherit; }
.gp-back-round { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fbbf24; background: #fff; color: #3e2d12; font-size: 20px; font-weight: 900; cursor: pointer; }
.gp-level-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 9px 16px; color: #e9e4f5; font-size: 13px; font-weight: 800; }
.gp-level-chip b { color: #fff; }
.gp-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; }
.gp-mid { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; }
.gp-listen { display: flex; align-items: center; gap: 12px; background: #fff; border: none; border-radius: 999px; padding: 9px 24px 9px 10px; cursor: pointer; box-shadow: 0 8px 0 0 #c7d4ea, 0 16px 24px -6px rgba(0,0,0,.35); font-family: inherit; transition: transform .15s; }
.gp-listen:hover { transform: translateY(-2px); }
.gp-listen:active { transform: translateY(1px); box-shadow: 0 2px 0 0 #c7d4ea; }
.gp-spk { width: 46px; height: 46px; border-radius: 50%; background: #10b981; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 0 0 #059669; }
.gp-listen-tx { display: flex; flex-direction: column; align-items: flex-start; }
.gp-listen-tx b { font-size: 20px; font-weight: 900; color: #1a1428; letter-spacing: 1px; line-height: 1.1; }
.gp-listen-tx small { font-size: 10px; font-weight: 800; color: #9a9186; letter-spacing: 1.5px; }
.gp-combo { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 16px; backdrop-filter: blur(6px); }
.gp-combo-badge { display: none; align-items: center; gap: 4px; background: #fef3c7; border: 1px solid rgba(254,166,25,.7); border-radius: 999px; padding: 3px 10px; color: #7a4a00; font-size: 11px; font-weight: 900; }
.gp-combo-badge.on { display: inline-flex; animation: gpbpop .3s; }
.gp-combo-badge.max { background: linear-gradient(90deg,#fbbf24,#fb7185); color: #fff; border-color: #fff; }
.gp-combo-badge b { font-size: 13px; }
@keyframes gpbpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gp-orbs { display: flex; align-items: center; gap: 5px; }
.gp-orb { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; transition: all .3s; opacity: .35; transform: scale(.8); }
.gp-orb.lit { opacity: 1; transform: scale(1); box-shadow: 0 0 16px rgba(111,251,190,.75); border-color: rgba(111,251,190,.6); }
.gp-combo-label { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.72); }
.gp-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gp-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 900; color: #fff; box-shadow: 0 4px 0 0 rgba(0,0,0,.3); }
.gp-pill.gold { background: linear-gradient(180deg,#fbbf24,#f59e0b); color: #7a4a00; }
.gp-pill.pink { background: linear-gradient(180deg,#f9a8d4,#f472b6); color: #7a1f4d; }
.gp-pill svg { width: 14px; height: 14px; }
.gp-star-row { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 5px 10px; }
.gp-star-row svg { width: 22px; height: 22px; }
.gp-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; max-width: 1020px; width: 96%; margin: auto; padding: 30px 0 20px; }
.gp-card { position: relative; aspect-ratio: 1 / 1.05; background: #fff; border: 4px solid transparent; border-radius: 24px; cursor: pointer; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 12px 0 0 #c9dfd2, 0 20px 28px rgba(0,0,0,.22); transition: all .18s; font-family: inherit; }
.gp-card:hover { transform: translateY(-6px); }
.gp-card:active { transform: translateY(3px); box-shadow: 0 2px 0 0 #c9dfd2; }
.gp-card.win { border-color: #fbbf24; box-shadow: 0 12px 0 0 #fbbf24, 0 20px 40px rgba(254,166,25,.45); }
.gp-card.bad { animation: gshake .4s; opacity: .6; }
.gp-glaze { position: absolute; top: 10px; left: 24px; right: 24px; height: 10px; border-radius: 999px; background: rgba(47,158,110,.16); pointer-events: none; }
.gp-stamp { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fbbf24; color: #fff; display: none; place-items: center; box-shadow: 0 3px 10px rgba(254,166,25,.5); }
.gp-stamp.show { display: grid; animation: gpbpop .4s; }
.gp-stamp svg { width: 18px; height: 18px; fill: #fff; }
.gp-card-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1; width: 100%; }
.gp-card-in img { width: 74%; height: 74%; object-fit: contain; }
.gp-wordcard { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gp-wordcard-en { font-size: 26px; font-weight: 900; color: #1f1b14; letter-spacing: 1px; }
.gp-wordcard-cn { font-size: 12.5px; font-weight: 700; color: #6b6152; }
.gp-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; font-weight: 900; color: #1f1b14; letter-spacing: .5px; }
.gp-card-in.nopic .gp-fallback { display: flex; }
.gp-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px 18px; flex-wrap: wrap; }
.gp-hint-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 800; color: #3e2d12; }
.gp-hint-pill .gp-dot.gold { background: #fbbf24; }
.gp-hint-pill.dim { color: rgba(255,255,255,.78); background: rgba(255,255,255,.08); font-size: 12px; }
.gp-magpie { position: absolute; right: 26px; bottom: 60px; z-index: 2; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.gp-win { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(15,11,28,.7); backdrop-filter: blur(8px); }
.gp-win[hidden] { display: none; }
.gp-win-card { background: #fff; border-radius: 28px; padding: 40px 60px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.gp-fly-coin { position: fixed; z-index: 999; pointer-events: none; transition: all .7s cubic-bezier(.3,.8,.4,1); filter: drop-shadow(0 3px 8px rgba(254,166,25,.6)); }
.gp-confetti-piece { position: fixed; pointer-events: none; transition: all 1s cubic-bezier(.12,.8,.32,1); z-index: 999; }

/* 加练页窄屏：两列卡片 + 说明上移，首屏能同时看到玩法与全部选项 */
@media (max-width: 560px) {
  .game-page { overflow-y: auto; }
  .gp-top { padding: 10px 12px 4px; gap: 8px; }
  .gp-tl { width: 100%; justify-content: space-between; }
  .gp-exit { padding: 8px 12px; font-size: 12px; }
  .gp-level-chip { padding: 7px 10px; font-size: 11px; }
  .gp-mid { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
  .gp-listen { padding: 6px 14px 6px 6px; gap: 8px; box-shadow: 0 5px 0 0 #c7d4ea, 0 10px 16px -6px rgba(0,0,0,.35); }
  .gp-spk { width: 34px; height: 34px; box-shadow: 0 3px 0 0 #059669; }
  .gp-spk svg { width: 19px; height: 19px; }
  .gp-listen-tx b { font-size: 15px; }
  .gp-listen-tx small { display: none; }
  .gp-combo { padding: 5px 10px; gap: 6px; }
  .gp-combo-label { display: none; }
  .gp-orb { width: 20px; height: 20px; }
  .gp-right { width: 100%; justify-content: space-between; gap: 6px; }
  .gp-star-row { display: none; }
  .gp-pill { padding: 5px 10px; font-size: 12px; }
  .gp-magpie { display: none; }
  .gp-foot { order: 2; padding: 6px 12px 6px; justify-content: center; }
  .gp-hint-pill { font-size: 11.5px; padding: 7px 12px; }
  .gp-hint-pill.dim { display: none; }
  .gp-cards { order: 3; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: none; padding: 10px 12px 16px; margin: 0; }
  .gp-card { aspect-ratio: 1 / 1; padding: 8px; border-radius: 16px; box-shadow: 0 6px 0 0 #c9dfd2, 0 10px 16px rgba(0,0,0,.2); }
  .gp-card-in img { width: 74%; height: 74%; }
  .gp-wordcard-en { font-size: 18px; }
  .gp-wordcard-cn { font-size: 10px; }
  .gp-stamp { width: 26px; height: 26px; top: 6px; right: 6px; }
  .gp-win-card { padding: 28px 22px; }
  .gp-win-card .w-t { font-size: 20px; }
}

/* ---------- 13. 关卡头部与地图：窄屏标题、平板步骤、桌面路宽 ---------- */
/* 701–900px：步骤条只留圆点，把宽度让给标题 */
@media (max-width: 900px) {
  .level-steps { gap: 12px; }
  .level-steps li span { display: none; }
}
/* 极窄屏：标题最多两行，不再截成 "Let's Walk and J…" */
@media (max-width: 480px) {
  .level-top { gap: 8px; padding: 10px 12px; }
  .level-heading h2 {
    font-size: var(--fs-16); line-height: 1.25;
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .level-kicker { font-size: 10px; letter-spacing: .4px; }
  .level-stars { font-size: 16px; }
  .level-body { padding: 14px 12px 26px; }
}
/* 桌面：路径变成一块宽画布，站点与文字放大，避免两侧大片留白 */
@media (min-width: 1100px) {
  .path {
    --path-k: 4.4px;
    width: min(1040px, 100%);
    margin: 0 auto;
    background: #fffdf8;
    border: 1px solid var(--c-line);
    border-radius: 32px;
    box-shadow: var(--sh-1);
    padding-top: 20px;
    padding-bottom: 44px;
  }
  .stop-btn { width: 80px; height: 80px; }
  .stop.is-now .stop-btn { width: 92px; height: 92px; }
  .stop-label { max-width: 220px; font-size: 12px; }
  .stop-here { left: calc(50% + 44px); }
  .path-chapter { margin-top: 26px; }
}
@media (min-width: 1500px) {
  .path { --path-k: 5.6px; width: min(1120px, 100%); }
}

/* 角色动效：固定悬浮层，不参与布局（不产生 CLS），层级压在弹层之上、金币飞散之下 */
.stk-burst {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: clamp(84px, 22vw, 124px);
  height: auto;
  z-index: 980;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(43, 33, 24, .18));
  animation: stkPop 1.5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes stkPop {
  0% { opacity: 0; transform: translateY(14px) scale(.86); }
  14% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .stk-burst { display: none; }
}

/* ---------- 学习模式切换（宝宝模式入口，0-3 岁资源按需加载） ---------- */
.mode-switch {
  display: flex;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 18px;
  padding: 5px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: 800;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.mode-btn svg { flex: none; }
.mode-btn.is-on {
  background: var(--tp);
  color: #fff;
  box-shadow: 0 4px 12px -4px var(--glow);
}
.mode-btn-baby.is-on {
  background: #d9558f;
  box-shadow: 0 4px 12px -4px rgba(217, 85, 143, .45);
}
.mode-btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.mode-btn:not(.is-on):hover { background: var(--c-surface-2); color: var(--c-ink); }

/* 宝宝模式开启时让位给 baby.js 渲染的四步首页；主线 DOM 保留，切回即恢复 */
body[data-baby="1"] .quest,
body[data-baby="1"] .path-head,
body[data-baby="1"] #pathList,
body[data-baby="1"] #homeEmpty,
body[data-baby="1"] .home-stats { display: none !important; }

@media (max-width: 560px) {
  .mode-switch { width: 100%; }
  .mode-btn { flex: 1 1 0; min-height: 48px; padding: 0 10px; }
}