/* ============ 趣味记单词 · 全局样式 ============ */
/* 设计基调：明亮糖果色 + 圆润大圆角 + 大按钮，适合小学生 */

:root {
  /* 主色板 */
  --c-g1: #FF8A65;
  --c-g2: #4DB6AC;
  --c-g3: #5C9DFF;
  --c-g4: #9575CD;
  --c-g5: #F06292;
  --c-g6: #FFB300;

  --brand: #5C9DFF;
  --brand-dark: #3F7BE0;
  --accent: #FF8A65;
  --gold: #FFC107;
  --green: #4CAF50;
  --red: #F4511E;

  --ink: #2B3445;
  --ink-2: #5A6472;
  --ink-3: #8B96A8;
  --line: #E6EBF2;
  --bg: #F5F8FE;
  --card: #FFFFFF;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;

  --shadow-s: 0 2px 8px rgba(43, 52, 69, .06);
  --shadow-m: 0 6px 20px rgba(43, 52, 69, .10);
  --shadow-l: 0 14px 40px rgba(43, 52, 69, .16);

  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
}

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

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

/* 手机安全区（iPhone 刘海/Home 指示条） */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 8% 6%, rgba(92,157,255,.10), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(255,138,101,.10), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(77,182,172,.10), transparent 46%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 应用外壳 ---------- */
#app {
  max-width: 1020px;
  margin: 0 auto;
  padding: 14px 16px 96px;
  min-height: 100vh;
}

/* 顶栏 */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 16px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  user-select: none;
}

.logo-badge {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: linear-gradient(135deg, var(--brand), #7FB3FF);
  box-shadow: 0 6px 16px rgba(92,157,255,.36);
  transform: rotate(-6deg);
}

.topbar-spacer { flex: 1; }

/* 顶部小数据条 */
.stats-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  box-shadow: var(--shadow-s);
  white-space: nowrap;
}
.chip .em { font-size: 15px; }
.chip.gold { color: #A1710B; border-color: #FFE4A3; background: #FFF9EC; }
.chip.streak { color: #C4522B; border-color: #FFD6C7; background: #FFF4EF; }

/* ---------- 按钮 ---------- */
.btn {
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-s);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary {
  background: linear-gradient(135deg, var(--brand), #6FA9FF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(92,157,255,.34);
}
.btn.accent {
  background: linear-gradient(135deg, var(--accent), #FFA98C);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255,138,101,.34);
}
.btn.ghost { background: #fff; }
.btn.lg { padding: 15px 34px; font-size: 17px; }
.btn.sm { padding: 8px 16px; font-size: 13.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--r-l);
  padding: 22px;
  box-shadow: var(--shadow-m);
  border: 1.5px solid rgba(255,255,255,.9);
}

/* ---------- 页面切换动画 ---------- */
.page { animation: pageIn .32s cubic-bezier(.22,.9,.3,1); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 标题 ---------- */
.h1 { font-size: 27px; font-weight: 900; margin: 0 0 6px; letter-spacing: .3px; }
.h2 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 8px; }
.sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; margin: 0; }

/* ============ 首页 ============ */
.hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F6FF 100%);
  border-radius: var(--r-l);
  padding: 30px 28px;
  box-shadow: var(--shadow-m);
  border: 1.5px solid #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.hero::after {
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,101,.20), transparent 68%);
}
.hero-title {
  font-size: 34px;
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.28;
  letter-spacing: .4px;
}
.hero-title .grad {
  background: linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub { color: var(--ink-2); font-size: 15px; line-height: 1.8; margin: 0 0 18px; max-width: 640px; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tag {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  background: #EEF4FF;
  color: var(--brand-dark);
}
.tag.o { background: #FFF1EA; color: #C4522B; }
.tag.g { background: #E9F8F5; color: #2E8B7F; }

/* 年级卡片网格 */
.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 15px;
}
.grade-card {
  border-radius: var(--r-l);
  padding: 20px;
  background: #fff;
  box-shadow: var(--shadow-s);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s;
  position: relative;
  overflow: hidden;
}
.grade-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }
.grade-card .gc-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 13px;
}
.grade-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 27px;
  flex: 0 0 auto;
  box-shadow: var(--shadow-s);
}
.grade-name { font-size: 18px; font-weight: 900; line-height: 1.25; }
.grade-theme { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.grade-meta {
  display: flex; gap: 12px; font-size: 12.5px; color: var(--ink-2);
  font-weight: 700; margin-bottom: 12px;
}
.grade-meta b { color: var(--ink); font-size: 15px; }
.progress-bar {
  height: 9px; border-radius: 999px; background: #EDF1F7; overflow: hidden;
  margin-bottom: 8px;
}
.progress-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #8FC0FF);
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.grade-foot { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.gc-badge {
  position: absolute; top: 15px; right: 15px;
  font-size: 11.5px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  background: #FFF4E5; color: #C97A0A;
}

/* ============ 学习地图 ============ */
.lv-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.back-btn {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-size: 19px;
  background: #fff; border: 1.5px solid var(--line);
  cursor: pointer; box-shadow: var(--shadow-s);
  transition: transform .15s;
}
.back-btn:hover { transform: translateX(-3px); }

.unit-list { display: flex; flex-direction: column; gap: 12px; }
.unit-row {
  display: flex; align-items: center; gap: 15px;
  background: #fff; border-radius: var(--r-m);
  padding: 15px 18px;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: transform .16s, box-shadow .2s, border-color .2s;
}
.unit-row:hover { transform: translateX(5px); box-shadow: var(--shadow-m); }
.unit-row.done { border-color: #B7E4C7; background: #F6FFFA; }
.unit-row.locked { opacity: .55; cursor: not-allowed; }
.unit-row.locked:hover { transform: none; }
.unit-no {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 900; color: #fff;
  flex: 0 0 auto;
}
.unit-body { flex: 1; min-width: 0; }
.unit-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.unit-desc { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.unit-right { text-align: right; flex: 0 0 auto; }
.stars { font-size: 15px; letter-spacing: 1px; }
.unit-play { font-size: 12px; font-weight: 800; color: var(--brand); margin-top: 3px; }

/* ============ 玩法选择 ============ */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 13px;
  margin-top: 6px;
}
.mode-card {
  background: #fff; border-radius: var(--r-m);
  padding: 20px 18px;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform .16s, box-shadow .2s, border-color .2s;
  box-shadow: var(--shadow-s);
  text-align: center;
}
.mode-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: var(--brand); }
.mode-emoji { font-size: 36px; margin-bottom: 9px; display: block; }
.mode-name { font-size: 16px; font-weight: 900; margin-bottom: 5px; }
.mode-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; font-weight: 600; }

/* ============ 答题区通用 ============ */
.quiz-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.quiz-progress { flex: 1; min-width: 140px; }
.quiz-progress .progress-bar { margin: 0; height: 12px; }
.quiz-count { font-size: 13.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }

.q-stage {
  background: #fff; border-radius: var(--r-l);
  padding: 28px 24px;
  box-shadow: var(--shadow-m);
  border: 1.5px solid #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 大图/图标展示（看图选词的题干图） */
.q-visual {
  font-size: 96px; line-height: 1;
  margin: 6px 0 14px;
  filter: drop-shadow(0 8px 14px rgba(43,52,69,.14));
  animation: pop .38s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop {
  0% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.q-word { font-size: 44px; font-weight: 900; letter-spacing: 1px; margin: 4px 0 8px; }
.q-phon { font-size: 15px; color: var(--ink-3); font-weight: 700; margin-bottom: 6px; }
.q-zh { font-size: 21px; font-weight: 800; color: var(--ink-2); }
.q-hint { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; font-weight: 700; }

/* 喇叭按钮 */
.speaker {
  width: 62px; height: 62px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 27px; cursor: pointer;
  background: linear-gradient(135deg, #EAF2FF, #DCE9FF);
  border: 2px solid #C9DCFF;
  transition: transform .15s, box-shadow .2s;
  margin: 0 auto 8px;
  box-shadow: 0 5px 14px rgba(92,157,255,.22);
}
.speaker:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(92,157,255,.34); }
.speaker:active { transform: scale(.95); }
.speaker.playing { animation: pulse .8s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(92,157,255,.45); }
  50% { box-shadow: 0 0 0 12px rgba(92,157,255,0); }
}

/* 选项 */
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.opt {
  padding: 20px 18px;
  border-radius: var(--r-m);
  background: #fff;
  border: 2.5px solid var(--line);
  cursor: pointer;
  font-size: 24px;
  font-weight: 900;
  font-family: inherit;
  color: var(--ink);
  letter-spacing: .5px;
  transition: transform .14s, border-color .18s, background .18s, box-shadow .2s;
  box-shadow: var(--shadow-s);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 72px;
  word-break: break-word;
}
.opt .opt-text { line-height: 1.2; }
.opt:hover:not(.locked) { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-m); }
.opt.correct {
  background: #E8F8EF; border-color: var(--green); color: #1E7A45;
  animation: shake-yes .45s;
}
.opt.wrong {
  background: #FEECE8; border-color: var(--red); color: #C0392B;
  animation: shake-no .42s;
}
.opt.locked { cursor: default; }
.opt .opt-em { font-size: 24px; }
@keyframes shake-yes {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.06); }
}
@keyframes shake-no {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* 拼写区 */
.spell-area { margin-top: 22px; }
.slots {
  display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px;
}
.slot {
  width: 54px; height: 64px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 27px; font-weight: 900;
  background: #F2F6FC; border: 2.5px dashed #C9D6E8;
  color: var(--ink); transition: all .18s;
}
.slot.filled { background: #fff; border-style: solid; border-color: var(--brand); box-shadow: var(--shadow-s); }
.slot.current { border-color: var(--accent); background: #FFF7F3; animation: blink 1.2s infinite; }
.slot.right { border-color: var(--green); background: #E8F8EF; color: #1E7A45; }
.slot.err { border-color: var(--red); background: #FEECE8; color: #C0392B; }
@keyframes blink { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.letter-pool { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.letter {
  width: 50px; height: 56px; border-radius: 13px;
  display: grid; place-items: center;
  font-size: 23px; font-weight: 900;
  background: linear-gradient(180deg, #FFFFFF, #F0F5FD);
  border: 2px solid #CFDDF2;
  cursor: pointer; font-family: inherit; color: var(--ink);
  box-shadow: 0 4px 10px rgba(43,52,69,.08);
  transition: transform .12s, box-shadow .18s, opacity .2s;
  text-transform: lowercase;
}
.letter:hover:not(:disabled) { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--brand); }
.letter:disabled { opacity: .28; cursor: default; }

.spell-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* 翻牌配对 */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 8px;
}
@media (max-width: 560px) { .memory-grid { grid-template-columns: repeat(3, 1fr); } }
.mcard {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-m);
  display: grid; place-items: center;
  cursor: pointer;
  perspective: 700px;
  position: relative;
}
.mcard-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .48s cubic-bezier(.3,1.2,.4,1);
  transform-style: preserve-3d;
}
.mcard.flip .mcard-inner { transform: rotateY(180deg); }
.mface {
  position: absolute; inset: 0;
  border-radius: var(--r-m);
  display: grid; place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-s);
  border: 2px solid var(--line);
  padding: 6px; text-align: center;
}
.mface.back {
  background: linear-gradient(135deg, #6FA9FF, #9CC4FF);
  border-color: transparent;
  font-size: 27px;
  color: #fff;
}
.mface.front {
  background: #fff; transform: rotateY(180deg);
  font-weight: 900;
  border-color: #D8E5F8;
  overflow: hidden;
}
.mface.front .m-em { font-size: 30px; line-height: 1.1; }
.mface.front .m-tx { font-size: 12.5px; margin-top: 3px; color: var(--ink); word-break: break-word; line-height: 1.25; }
.mcard.matched .mface.front { background: #E8F8EF; border-color: var(--green); }
.mcard.matched { animation: pop .4s; }

/* ============ 结算页 ============ */
.result-wrap { text-align: center; padding: 12px 0; }
.result-emoji { font-size: 84px; line-height: 1; animation: pop .5s cubic-bezier(.2,1.5,.4,1); }
.result-score { font-size: 46px; font-weight: 900; margin: 12px 0 4px; }
.result-title { font-size: 19px; font-weight: 800; color: var(--ink-2); margin-bottom: 18px; }
.result-stars { font-size: 40px; letter-spacing: 6px; margin-bottom: 20px; }
.result-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 11px; margin: 20px 0;
}
.rs-item { background: #F7FAFF; border-radius: var(--r-m); padding: 15px 10px; }
.rs-big { font-size: 25px; font-weight: 900; color: var(--brand); }
.rs-label { font-size: 12.5px; color: var(--ink-2); font-weight: 700; margin-top: 3px; }

/* 错题回顾 */
.wrong-list { text-align: left; margin-top: 18px; }
.wrong-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: var(--r-m);
  background: #FFF7F5; border: 1.5px solid #FFDCCF;
  margin-bottom: 9px;
}
.wrong-item .wi-em { font-size: 26px; }
.wrong-item .wi-en { font-size: 17px; font-weight: 900; }
.wrong-item .wi-zh { font-size: 13px; color: var(--ink-2); font-weight: 700; }

/* ============ 单词表 ============ */
.list-tools {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;
}
.search-box {
  flex: 1; min-width: 180px;
  padding: 11px 17px;
  border-radius: 999px;
  border: 2px solid var(--line);
  font-family: inherit; font-size: 15px;
  background: #fff; outline: none;
  transition: border-color .2s;
  color: var(--ink);
}
.search-box:focus { border-color: var(--brand); }

.filter-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.fchip {
  padding: 7px 15px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 800; color: var(--ink-2);
  cursor: pointer; transition: all .18s; font-family: inherit;
}
.fchip:hover { border-color: var(--brand); color: var(--brand); }
.fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.word-table { display: flex; flex-direction: column; gap: 9px; }
.wrow {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 17px;
  background: #fff; border-radius: var(--r-m);
  border: 1.5px solid var(--line);
  transition: transform .15s, box-shadow .2s;
}
.wrow:hover { transform: translateX(4px); box-shadow: var(--shadow-m); }
.wrow .wr-em { font-size: 29px; flex: 0 0 auto; width: 40px; text-align: center; }
.wrow .wr-main { flex: 1; min-width: 0; }
.wrow .wr-en { font-size: 18px; font-weight: 900; }
.wrow .wr-en small { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-left: 7px; }
.wrow .wr-zh { font-size: 13.5px; color: var(--ink-2); font-weight: 700; margin-top: 2px; }
.wrow .wr-ex { font-size: 12px; color: var(--ink-3); margin-top: 3px; font-style: italic; }
.wrow .wr-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
}
.mini-speak {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 17px;
  background: #EEF4FF; border: 1.5px solid #D8E5F8;
  cursor: pointer; transition: transform .14s;
}
.mini-speak:hover { transform: scale(1.1); }
.lv-tag {
  font-size: 10.5px; font-weight: 800; padding: 3px 9px;
  border-radius: 999px; background: #F0F4FA; color: var(--ink-3);
  white-space: nowrap;
}

/* ============ 成就页 ============ */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 13px; }
.ach {
  background: #fff; border-radius: var(--r-m); padding: 18px 14px;
  text-align: center; border: 2px solid var(--line);
  transition: transform .16s, box-shadow .2s;
}
.ach:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.ach.got { border-color: var(--gold); background: linear-gradient(180deg,#FFFDF5,#FFF7E3); }
.ach-em { font-size: 38px; margin-bottom: 8px; filter: grayscale(1); opacity: .35; }
.ach.got .ach-em { filter: none; opacity: 1; }
.ach-name { font-size: 14.5px; font-weight: 900; margin-bottom: 4px; }
.ach-desc { font-size: 11.5px; color: var(--ink-3); font-weight: 700; line-height: 1.5; }

/* 掌握度热力条 */
.mastery-list { display: flex; flex-direction: column; gap: 13px; }
.mrow { display: flex; align-items: center; gap: 13px; }
.mrow .ml { width: 76px; font-size: 13.5px; font-weight: 800; flex: 0 0 auto; }
.mrow .mb { flex: 1; height: 20px; border-radius: 999px; background: #EDF1F7; overflow: hidden; position: relative; }
.mrow .mb > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7FD1A8, #4CAF50);
  transition: width .6s cubic-bezier(.2,.9,.3,1);
}
.mrow .mv { width: 82px; text-align: right; font-size: 13px; font-weight: 800; color: var(--ink-2); flex: 0 0 auto; }

/* ============ 趣味增强：HUD / 特效 ============ */
.hud {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border-radius: var(--r-m);
  padding: 10px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-s); border: 1.5px solid var(--line);
}
.hud-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 900; color: var(--ink);
  padding: 5px 13px; border-radius: 999px; background: #F4F8FF;
}
.hud-item .hud-em { font-size: 17px; }
.hud-item.combo { background: #FFF4E5; color: #C97A0A; transition: all .25s; }
.hud-item.combo.lv1 { background: #FFEED9; }
.hud-item.combo.lv2 { background: #FFE0B2; transform: scale(1.06); box-shadow: 0 4px 12px rgba(255,179,0,.35); }
.hud-item.combo.lv3 { background: linear-gradient(135deg,#FFB300,#FF8A65); color: #fff; transform: scale(1.1); box-shadow: 0 6px 18px rgba(255,138,101,.5); }
.hud-mult { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.75); color: #A1710B; }
.hud-item.lives { background: #FFF0F0; font-size: 14px; letter-spacing: 1px; }

/* 倒计时条 */
.time-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.time-bar {
  flex: 1; height: 11px; border-radius: 999px; background: #EDF1F7; overflow: hidden;
}
.time-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#4CAF50,#7FD1A8);
  transition: width .18s linear, background .3s;
}
.time-text { font-size: 13.5px; font-weight: 900; color: var(--ink-2); min-width: 36px; text-align: right; }

/* 连击弹出 */
.fx-combo {
  position: fixed; transform: translate(-50%,-50%);
  font-size: 40px; font-weight: 900; color: #FF8A3D;
  text-shadow: 0 3px 0 #fff, 0 6px 18px rgba(255,138,61,.5);
  pointer-events: none; z-index: 320;
  animation: comboPop 1.05s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-12deg); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(1.25) rotate(4deg); }
  70% { opacity: 1; transform: translate(-50%,-60%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%,-105%) scale(.9); }
}

/* 得分上浮 */
.fx-score {
  position: fixed; transform: translate(-50%,-50%);
  font-size: 32px; font-weight: 900; color: #4CAF50;
  text-shadow: 0 2px 0 #fff, 0 5px 14px rgba(76,175,80,.4);
  pointer-events: none; z-index: 310;
  animation: floatUp 1.05s cubic-bezier(.2,.9,.3,1) forwards;
}

/* 抖动 */
.fx-shake { animation: shakeNo .45s; }
@keyframes shakeNo {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  50% { transform: translateX(9px); }
  80% { transform: translateX(-5px); }
}

/* 闪光 */
.fx-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 300;
  animation: flashFade .42s ease-out forwards;
}
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }

/* ============ PK 对战 ============ */
.pk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pk-rule-name { font-size: 15px; font-weight: 900; color: var(--ink-2); }

.pk-board {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg,#EEF4FF,#F7F0FF);
  border-radius: var(--r-l); padding: 16px;
  border: 2px solid #fff; box-shadow: var(--shadow-m);
}
.pk-side {
  flex: 1; text-align: center; padding: 12px;
  border-radius: var(--r-m); background: rgba(255,255,255,.75);
  transition: all .3s; position: relative;
}
.pk-side.me { border: 2px solid var(--brand); }
.pk-side.foe { border: 2px solid #FFD6C7; }
.pk-side.winner { box-shadow: 0 0 0 3px #FFD54F, 0 8px 22px rgba(255,179,0,.35); }
.pk-avatar { font-size: 34px; line-height: 1; }
.pk-name { font-size: 13px; font-weight: 800; color: var(--ink-2); margin-top: 5px; }
.pk-score { font-size: 28px; font-weight: 900; color: var(--brand); line-height: 1.2; }
.pk-combo { font-size: 12.5px; font-weight: 900; color: #FF8A3D; margin-top: 2px; }
.pk-hp { font-size: 15px; letter-spacing: 2px; margin-top: 4px; }
.pk-vs { font-size: 20px; font-weight: 900; color: #8B96A8; letter-spacing: 1px; flex: 0 0 auto; }

.pk-turn-hint {
  font-size: 15px; font-weight: 900; color: var(--brand);
  background: #EEF4FF; border-radius: 999px; padding: 7px 18px;
  display: inline-block; margin-bottom: 8px;
}
.pk-msg {
  margin-top: 18px; padding: 13px 16px; border-radius: 16px;
  font-size: 15px; font-weight: 800; text-align: center;
}
.pk-msg.good { background: #E8F8EF; color: #1E7A45; }
.pk-msg.bad { background: #FFF4F1; color: #C0392B; }
.pk-log {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0;
}
.pk-log > span {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: #F4F7FC; padding: 5px 11px; border-radius: 999px;
}

.pk-result-board {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0; padding: 18px;
  background: #F7FAFF; border-radius: var(--r-l);
}
.pk-result-side { flex: 1; text-align: center; }
.pk-result-score { font-size: 34px; font-weight: 900; line-height: 1.15; }
.pk-result-detail { font-size: 12.5px; color: var(--ink-2); font-weight: 700; margin-top: 5px; line-height: 1.6; }

.mode-card.picked { border-color: var(--brand); background: #F4F9FF; box-shadow: 0 6px 18px rgba(92,157,255,.22); }
.mode-card.picked .mode-name { color: var(--brand-dark); }

/* ============ 每日任务 ============ */
.task-list { display: flex; flex-direction: column; gap: 12px; }
.task-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: var(--r-m);
  padding: 16px 18px; border: 1.5px solid var(--line);
  box-shadow: var(--shadow-s); transition: all .2s;
}
.task-card.done { border-color: #FFE0A3; background: linear-gradient(120deg,#FFFDF5,#FFF7E3); }
.task-em { font-size: 30px; flex: 0 0 auto; }
.task-body { flex: 1; min-width: 0; }
.task-name { font-size: 16px; font-weight: 900; }
.task-desc { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.task-right { flex: 0 0 auto; }
.task-btn {
  font-size: 13px; font-weight: 800; color: var(--ink-3);
  padding: 8px 14px; border-radius: 999px; background: #F4F7FC;
}
.task-btn.done { background: #E8F8EF; color: #1E7A45; }

/* ============ 设置 ============ */
.setting-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.setting-row:last-child { border-bottom: none; }
.setting-em { font-size: 25px; flex: 0 0 auto; }
.setting-body { flex: 1; min-width: 0; }
.setting-name { font-size: 15.5px; font-weight: 900; }
.setting-desc { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-top: 2px; line-height: 1.5; }
.switch {
  width: 50px; height: 29px; border-radius: 999px; background: #D9E0EB;
  position: relative; flex: 0 0 auto; transition: background .22s;
}
.switch > i {
  position: absolute; top: 3px; left: 3px;
  width: 23px; height: 23px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .22s;
}
.switch.on { background: linear-gradient(135deg,var(--brand),#6FA9FF); }
.switch.on > i { transform: translateX(21px); }

.rule-table { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.rule-table > div {
  display: flex; align-items: center; gap: 8px;
  background: #F4F8FF; border-radius: 999px; padding: 7px 15px;
  font-size: 13.5px; font-weight: 800;
}
.rule-table > div span { color: var(--brand); font-weight: 900; }

/* ============ 跟读练习 ============ */
.ra-tabs {
  display: flex; gap: 9px; margin-bottom: 16px; flex-wrap: wrap;
}
.ra-tab {
  flex: 1; min-width: 110px;
  padding: 13px 18px; border-radius: var(--r-m);
  background: #fff; border: 2px solid var(--line);
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ink-2);
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ra-tab:hover { border-color: var(--brand); color: var(--brand); }
.ra-tab.on {
  background: linear-gradient(135deg, var(--brand), #6FA9FF);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(92,157,255,.34);
}

.ra-stage {
  background: #fff; border-radius: var(--r-l); padding: 26px 22px;
  box-shadow: var(--shadow-m); border: 1.5px solid #fff;
  text-align: center;
}
.ra-progress { font-size: 13px; font-weight: 800; color: var(--ink-3); margin-bottom: 14px; }
.ra-big-icon { font-size: 84px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 8px 14px rgba(43,52,69,.14)); }
.ra-word { font-size: 46px; font-weight: 900; letter-spacing: 1px; }
.ra-phon { font-size: 15px; color: var(--ink-3); font-weight: 700; margin-top: 4px; }
.ra-zh { font-size: 19px; font-weight: 800; color: var(--ink-2); margin-top: 6px; }
.ra-sentence {
  font-size: 15px; font-weight: 700; color: var(--ink-2);
  margin-top: 14px; line-height: 1.7;
  background: #F7FAFF; border-radius: var(--r-m); padding: 12px 16px;
}
.ra-sentence-zh { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

.ra-sent-en { font-size: 27px; font-weight: 900; line-height: 1.45; margin: 6px 0 10px; letter-spacing: .3px; }
.ra-sent-zh { font-size: 15px; color: var(--ink-2); font-weight: 700; }
.ra-key { font-size: 13px; color: var(--ink-3); font-weight: 700; margin-top: 10px; }

.ra-controls {
  display: flex; gap: 11px; justify-content: center; flex-wrap: wrap;
  margin-top: 22px;
}
.ra-nav {
  display: flex; gap: 11px; justify-content: space-between;
  margin-top: 16px;
}
.ra-rec-stat { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-top: 12px; }

/* 录音中的脉冲提示 */
.ra-recording {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; color: #C0392B; margin-top: 12px;
}
.ra-recording::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: #F4511E; animation: recPulse 1s infinite;
}
@keyframes recPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}

/* 评分结果卡 */
.ra-result {
  margin-top: 22px; padding: 20px;
  border-radius: var(--r-l);
  background: linear-gradient(135deg, #F7FAFF, #EEF4FF);
  border: 1.5px solid #DCE7FA;
  animation: pageIn .3s;
}
.ra-result-top { text-align: center; }
.ra-result-score { font-size: 52px; font-weight: 900; color: var(--brand); line-height: 1.1; }
.ra-result-score small { font-size: 18px; margin-left: 3px; }
.ra-result-stars { font-size: 26px; letter-spacing: 5px; margin: 5px 0; }
.ra-result-level { font-size: 15px; font-weight: 900; color: var(--ink-2); }
.ra-details { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.ra-detail-row { display: flex; align-items: center; gap: 11px; }
.ra-detail-name { width: 54px; font-size: 13px; font-weight: 800; color: var(--ink-2); flex: 0 0 auto; }
.ra-detail-bar { flex: 1; height: 9px; border-radius: 999px; background: #E3EAF5; overflow: hidden; }
.ra-detail-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7FD1A8, #4CAF50);
  transition: width .6s cubic-bezier(.2,.9,.3,1);
}
.ra-detail-score { width: 34px; text-align: right; font-size: 13px; font-weight: 900; color: var(--ink); flex: 0 0 auto; }
.ra-note { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; text-align: center; }
.ra-playback { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ra-playback > span { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.ra-playback audio { height: 38px; max-width: 100%; }
.ra-actions { text-align: center; margin-top: 14px; }

.ra-warn {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--r-m);
  background: #FFF8E8; border: 1.5px solid #FFE0A3;
  font-size: 13.5px; font-weight: 700; color: #A1710B;
}

/* 对话跟读 */
.ra-book-tag {
  text-align: center; font-size: 12.5px; font-weight: 800;
  color: var(--brand-dark); background: #EEF4FF;
  border-radius: 999px; padding: 6px 16px;
  display: inline-block; margin: 0 auto 10px;
}
.ra-book-tag { display: block; width: fit-content; }

.ra-role-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0; padding: 10px 14px;
  background: #F7FAFF; border-radius: var(--r-m);
  font-size: 13px; font-weight: 800; color: var(--ink-2);
}
.ra-turns { display: flex; flex-direction: column; gap: 10px; }
.ra-turn {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-m);
  border: 1.5px solid var(--line); background: #fff;
}
.ra-turn.mine { border-color: var(--brand); background: #F4F9FF; }
.ra-turn.other { background: #FAFBFD; }
.ra-who {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff;
  background: var(--brand); flex: 0 0 auto;
}
.ra-turn.other .ra-who { background: #B0BEC5; }
.ra-turn-body { flex: 1; min-width: 0; }
.ra-turn-en { font-size: 16.5px; font-weight: 800; line-height: 1.5; }
.ra-turn-zh { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-top: 3px; }

/* 单词表里的 PEP 单元标签 */
.pep-tag {
  font-size: 10.5px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; background: #EEF4FF; color: var(--brand-dark);
  margin-left: 7px; white-space: nowrap;
}

/* ============ 底部导航 ============ */
.tabbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 16px;
  display: flex; gap: 6px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  padding: 7px;
  border-radius: 999px;
  box-shadow: var(--shadow-l);
  border: 1.5px solid rgba(230,235,242,.9);
  z-index: 60;
}
.tab {
  border: none; background: transparent;
  padding: 10px 20px; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  color: var(--ink-3); cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.tab:hover { color: var(--brand); }
.tab.on {
  background: linear-gradient(135deg, var(--brand), #6FA9FF);
  color: #fff;
  box-shadow: 0 6px 16px rgba(92,157,255,.34);
}

/* ============ 弹层 ============ */
.toast-host {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;
}
.toast {
  padding: 13px 26px; border-radius: 999px;
  background: rgba(43,52,69,.93);
  color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-l);
  animation: toastIn .3s cubic-bezier(.2,1.3,.4,1);
  display: flex; align-items: center; gap: 9px;
}
.toast.good { background: linear-gradient(135deg,#4CAF50,#6FCF7A); }
.toast.bad { background: linear-gradient(135deg,#F4511E,#FF7A4D); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 浮起奖励文字 */
.float-score {
  position: fixed;
  font-size: 30px; font-weight: 900;
  color: var(--green);
  pointer-events: none; z-index: 300;
  animation: floatUp 1.05s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(1); }
}

/* 撒花 */
.confetti {
  position: fixed; width: 11px; height: 11px;
  pointer-events: none; z-index: 250;
  animation: fall 2.2s linear forwards;
}
@keyframes fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(102vh) rotate(760deg); }
}

/* 每日打卡提示条 */
.daily-bar {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, #FFF8E8, #FFF1D6);
  border: 1.5px solid #FFE0A3;
  border-radius: var(--r-m);
  padding: 14px 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.daily-bar .db-em { font-size: 30px; }
.daily-bar .db-tx { flex: 1; min-width: 170px; }
.daily-bar .db-t { font-size: 15px; font-weight: 900; color: #A1710B; }
.daily-bar .db-s { font-size: 12.5px; color: #B98A2A; font-weight: 700; margin-top: 2px; }

/* 空状态 */
.empty {
  text-align: center; padding: 52px 20px; color: var(--ink-3);
}
.empty .e-em { font-size: 58px; margin-bottom: 14px; opacity: .7; }
.empty .e-tx { font-size: 15px; font-weight: 700; }

/* 响应式 —— 手机适配主层(≤640px) */
@media (max-width: 640px) {
  /* iOS 上 fixed 背景性能差且滚动发飘,手机改为随页滚动 */
  body { background-attachment: scroll; }

  /* 外壳:底部预留要含底部导航高度 + 安全区 */
  #app { padding: 12px 12px calc(96px + var(--safe-b)); }

  /* 顶栏与标题 */
  .topbar { gap: 8px; }
  .logo { font-size: 18px; }
  .logo-badge { width: 33px; height: 33px; font-size: 18px; }
  .chip { padding: 6px 11px; font-size: 12.5px; }
  .h1 { font-size: 23px; }
  .h2 { font-size: 18.5px; }

  /* 卡片密度 */
  .card { padding: 16px 14px; border-radius: var(--r-m); }
  .hero { padding: 20px 16px; }
  .hero-title { font-size: 24px; }

  /* 首页年级卡:手机改两列,更大更易点 */
  .grade-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 11px; }
  .grade-icon { font-size: 34px; }
  .grade-name { font-size: 16px; }

  /* 玩法/规则卡:两列 */
  .mode-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .mode-card { padding: 14px 10px; }
  .mode-emoji { font-size: 30px; }
  .mode-name { font-size: 15.5px; }
  .mode-desc { font-size: 11.5px; }

  /* 触控目标:筛选 chips 提到 ≈40px 高 */
  .fchip { padding: 9px 14px; font-size: 13.5px; }

  /* 全局按钮触控高度 ≥44px */
  .btn { min-height: 44px; }
  .btn.lg { padding: 13px 26px; }
  .btn.sm { min-height: 38px; }
  .back-btn { width: 44px; height: 44px; }

  /* 游戏区 */
  .q-word { font-size: 34px; }
  .q-visual { font-size: 72px; }
  .opt { font-size: 19px; min-height: 62px; padding: 16px 14px; }
  .slot { width: 40px; height: 52px; font-size: 20px; }
  .letter { width: 40px; height: 48px; font-size: 19px; }
  .memory-grid { gap: 9px; }

  /* 结果页 */
  .result-emoji { font-size: 64px; }
  .result-score { font-size: 36px; }
  .rs-big { font-size: 24px; }

  /* 单词表行:手机收紧行内空间 */
  .wrow { padding: 11px 12px; gap: 10px; }
  .wrow .wr-em { width: 30px; font-size: 24px; }
  .wrow .wr-en { font-size: 16.5px; }
  .wrow .wr-btn { gap: 6px; }
  .mini-speak { width: 42px; height: 42px; }
  .daily-bar { padding: 12px 14px; gap: 10px; }
  .daily-bar .db-tx { min-width: 0; }
  .daily-bar .db-em { font-size: 26px; }

  /* 成就/任务/设置 */
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .ach { padding: 14px 10px; }
  .task-card { padding: 13px 12px; gap: 10px; }
  .task-em { font-size: 25px; }
  .setting-em { font-size: 22px; }

  /* 跟读页:按钮平铺满行更好点 */
  .ra-word { font-size: 36px; }
  .ra-sent-en { font-size: 21px; }
  .ra-controls .btn { flex: 1 1 auto; }
  .ra-nav .btn { flex: 1; }
  .ra-detail-name { width: 64px; font-size: 12px; }

  /* PK 对战:计分牌密度 */
  .pk-board { padding: 12px 10px; gap: 8px; }
  .pk-side { padding: 9px 6px; }
  .pk-avatar { font-size: 27px; }
  .pk-score { font-size: 21px; }
  .pk-name { font-size: 12px; }
  .pk-rule-name { font-size: 13px; }
  .pk-msg { font-size: 13.5px; padding: 11px 12px; }
  .pk-log > span { font-size: 11px; }

  /* 弹层提示:防长文案溢出 */
  .toast { max-width: calc(100vw - 28px); padding: 11px 18px; font-size: 13.5px; }

  /* 底部导航:改为两端贴边自适应,任何屏宽都不溢出 */
  .tabbar {
    left: 10px; right: 10px; transform: none;
    bottom: calc(10px + var(--safe-b));
    padding: 6px; gap: 4px;
  }
  .tabbar .tab {
    flex: 1; min-width: 0; justify-content: center;
    padding: 10px 4px; font-size: 13px;
  }
  .tab .tab-label { display: none; }
  .tab.on .tab-label { display: inline; }

  /* ==========================================================
     一屏显示优化（跟读 / PK / 任务 / 挑战）
     目标：手机上不滚动即可看到全部内容
     ========================================================== */

  /* ---- 通用：缩小顶栏与区块间距 ---- */
  .topbar { padding: 6px 2px 10px; }
  .h2 { margin-bottom: 8px; }

  /* ---- 跟读页 ---- */
  /* 选课本卡片：说明文字隐藏,单元 chips 改为单行横向滑动 → 省大量高度 */
  .ra-scope { padding: 10px 12px; margin-bottom: 10px !important; }
  .ra-scope .h2 { margin-bottom: 6px; font-size: 16px; }
  .ra-scope-sub { display: none; }
  .ra-unit-row {
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 0 !important;
    padding-bottom: 2px;
  }
  .ra-unit-row::-webkit-scrollbar { display: none; }
  .ra-unit-row .fchip { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }

  /* 跟读类型切换：紧凑分段 */
  .ra-tabs { gap: 6px; margin: 8px 0 6px; }
  .ra-tab { padding: 8px 12px; font-size: 13px; border-radius: 12px; }

  /* 跟读主区域：图标/词/例句/按钮全面收紧 */
  .ra-stage { padding: 12px 12px 10px; }
  .ra-progress { margin-bottom: 2px; font-size: 12px; }
  .ra-big-icon { font-size: 44px; margin-bottom: 2px; line-height: 1.1; }
  .ra-word { font-size: 32px; margin: 2px 0 0; }
  .ra-phon { font-size: 13px; margin-top: 1px; }
  .ra-zh { font-size: 14px; margin-top: 2px; }
  .ra-sentence { font-size: 13px; margin: 6px 0 0; line-height: 1.45; }
  .ra-sentence-zh { font-size: 12px; margin-top: 1px; }
  .ra-controls { flex-wrap: nowrap; gap: 8px; margin-top: 10px; }
  .ra-controls .btn { flex: 1 1 0; min-width: 0; padding: 11px 8px; font-size: 14px; min-height: 46px; }
  .ra-nav { margin-top: 8px; gap: 8px; }
  .ra-nav .btn { flex: 1; min-height: 38px; padding: 8px 10px; font-size: 13px; }
  .ra-rec-stat { margin-top: 6px; font-size: 12px; }

  /* ---- PK 设置页 ---- */
  /* 战绩卡：5 项挤成一行小格 */
  .pk-stats { padding: 8px 10px 6px; margin-bottom: 6px !important; }
  .pk-stats .h2 { font-size: 14px; margin-bottom: 5px; display: inline-block; }
  .pk-stats .result-stats { grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; }
  .pk-stats .rs-item { padding: 5px 2px; border-radius: 9px; }
  .pk-stats .rs-big { font-size: 16px; }
  .pk-stats .rs-label { font-size: 10.5px; margin-top: 0; }

  /* 小节标题：紧凑成一行小标题 */
  .sec-h { font-size: 14px !important; margin: 7px 0 4px !important; }

  /* 选项卡片：emoji 与名称同行,高度从 80px 降到 ≈48px */
  .mode-grid { gap: 7px; margin-top: 3px; }
  .mode-card {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 5px; padding: 12px 6px; border-radius: 12px; text-align: center;
  }
  .mode-emoji { font-size: 20px; margin: 0; display: block; }
  .mode-name { font-size: 13.5px; line-height: 1.2; }
  .mode-desc { display: none; }
  .pk-start-wrap { margin-top: 10px !important; text-align: center; }
  /* 年级范围 chips：单行横向滑动 */
  .pk-stats ~ .filter-row,
  .filter-row.pk-grade-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-bottom: 0 !important; padding-bottom: 2px;
  }
  .pk-stats ~ .filter-row::-webkit-scrollbar { display: none; }
  .pk-stats ~ .filter-row .fchip { flex: 0 0 auto; }

  /* ---- 挑战：地图页 ---- */
  .lv-head { margin-bottom: 8px; gap: 10px; }
  .lv-head .h1 { font-size: 19px; }
  .lv-head .sub { display: none; }
  .unit-list { gap: 8px; }
  .unit-row { padding: 9px 12px; gap: 10px; border-radius: 14px; }
  .unit-no { width: 34px; height: 34px; font-size: 15px; border-radius: 11px; }
  .unit-title { font-size: 14px; }
  .unit-desc { display: none; }
  .unit-right { gap: 2px; }
  .stars { font-size: 12px; letter-spacing: 0; }
  .unit-play { font-size: 11px; }
  .map-head-card { padding: 10px 12px !important; margin-bottom: 10px !important; }

  /* ---- 挑战：玩法页 / 比赛页 ---- */
  .mode-card { min-height: 0; }
  .quiz-top { margin-bottom: 6px; }
  .q-stage { padding: 12px 12px 10px; }
  .q-visual { font-size: 56px; }
  .q-word { font-size: 30px; margin: 2px 0 4px; }
  .q-zh { font-size: 15px; }
  .q-hint { font-size: 12px; }
  .options { gap: 9px; margin-top: 12px; }
  .opt { min-height: 52px; }
  .spell-area { margin-top: 12px; }
  .slots { gap: 7px; margin-bottom: 12px; }
  .letter-pool { gap: 7px; }
  .spell-actions { margin-top: 12px; }
  .memory-grid { margin-top: 4px; }

  /* ---- 跟读：对话 tab（轮次多,需重压） ---- */
  .ra-book-tag { font-size: 11px; padding: 4px 9px; margin-bottom: 4px; }
  .ra-stage .h3 { font-size: 15px; margin: 2px 0 6px; }
  .ra-role-bar {
    padding: 6px 9px; margin: 6px 0; gap: 6px;
    font-size: 12px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ra-role-bar::-webkit-scrollbar { display: none; }
  .ra-role-bar > span { flex: 0 0 auto; }
  .ra-role-bar .fchip { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
  .ra-role-bar .btn.sm { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; min-height: 34px; }
  .ra-turns { gap: 6px; }
  .ra-turn { padding: 7px 10px; gap: 8px; border-radius: 12px; }
  .ra-who { width: 22px; height: 22px; font-size: 11px; }
  .ra-turn-en { font-size: 14px; line-height: 1.35; }
  .ra-turn-zh { font-size: 11px; margin-top: 1px; }
  .ra-turn .mini-speak { width: 34px; height: 34px; font-size: 14px; flex: 0 0 auto; }
  .ra-playback { margin-top: 8px; }
  .ra-actions { margin-top: 8px; }
  .ra-warn { margin-top: 10px; padding: 9px 12px; font-size: 12px; }

  /* ---- 任务页：已能一屏,仅再收紧 ---- */
  .task-list { gap: 9px; }
  .task-card { padding: 11px 12px; }
}


/* ===== PK 双人同屏：以「玩家1」「玩家2」为两列 ===== */
.duo-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 两列：左=玩家1，右=玩家2 */
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
.duo-col {
  border-radius: var(--r-l);
  padding: 10px 12px 12px;
  border: 2.5px solid var(--line);
  background: #FBFDFF;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.duo-col.duo-p1 { border-color: #BBD4FF; background: #F5F9FF; }
.duo-col.duo-p2 { border-color: #FFD9C4; background: #FFF8F4; }
.duo-col.used { opacity: .5; }

/* 列头标签：居中显示是哪位玩家 */
.duo-tag {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-2);
  margin-bottom: 9px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  letter-spacing: .5px;
  box-shadow: var(--shadow-s);
}
.duo-p1 .duo-tag { color: #1F5BC6; }
.duo-p2 .duo-tag { color: #D2581F; }

/* 列内 4 个候选答案：两行两列 */
.duo-options {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 0;
}
.duo-options .opt {
  font-size: 18px;
  min-height: 58px;
  padding: 11px 8px;
  border-radius: 13px;
}
.duo-options .opt:hover:not(.locked) { transform: translateY(-2px); }
/* 分区边框色：让每个玩家一眼看出自己的作答区 */
.duo-p1 .opt:not(.correct):not(.wrong) { border-color: #CFE0FF; }
.duo-p2 .opt:not(.correct):not(.wrong) { border-color: #FFE0CF; }
.duo-p1 .opt:hover:not(.locked) { border-color: #5C9DFF; }
.duo-p2 .opt:hover:not(.locked) { border-color: #FF8A3D; }

/* 手机上也保持「玩家1 | 玩家2」左右两列（符合两列布局需求）,仅缩小尺寸 */
@media (max-width: 560px) {
  .duo-panels { grid-template-columns: 1fr 1fr; gap: 9px; }
  .duo-options .opt { font-size: 15px; min-height: 44px; padding: 9px 6px; }
  .duo-col { padding: 8px 8px 9px; border-width: 2px; }
  .duo-tag { font-size: 12px; padding: 3px 9px; margin-bottom: 6px; }
}

/* 超窄屏第二层(≤400px, 常见小屏手机) */
@media (max-width: 400px) {
  #app { padding-left: 10px; padding-right: 10px; }
  .hero { padding: 18px 14px; }
  .hero-title { font-size: 22px; }
  .grade-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .grade-icon { font-size: 30px; }
  .grade-name { font-size: 15px; }
  .mode-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .q-visual { font-size: 62px; }
  .opt { font-size: 17.5px; min-height: 56px; padding: 13px 10px; }
  .slot { width: 36px; height: 48px; font-size: 18px; }
  .letter { width: 36px; height: 44px; font-size: 17px; }
  .memory-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wrow .wr-ex { display: none; }   /* 例句在极窄屏隐藏,保留主信息 */
  .pk-board { padding: 10px 8px; gap: 6px; }
  .pk-vs { font-size: 15px; }
  .duo-options .opt { font-size: 15px; min-height: 46px; }
  /* 320px 下 auto-fill(148px) 会退化成单列 → 强制两列,避免页面拉长 */
  .mode-grid { grid-template-columns: 1fr 1fr !important; }
}

/* 极窄屏第三层(≤340px, iPhone SE 1代/兜底) */
@media (max-width: 340px) {
  #app { padding-left: 8px; padding-right: 8px; }
  .grade-grid { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: 1fr; }
  .tabbar .tab { font-size: 12px; padding: 9px 2px; min-height: 42px; }
  .q-word { font-size: 28px; }
  .ra-word { font-size: 30px; }
  /* 对话页在极窄屏再压一层 */
  .ra-stage { padding: 9px 9px 7px; }
  .ra-turn { padding: 5px 7px; gap: 6px; }
  .ra-turn-en { font-size: 13px; line-height: 1.3; }
  .ra-turn-zh { font-size: 10.5px; }
  .ra-turns { gap: 4px; }
  .ra-turn .mini-speak { width: 30px; height: 30px; font-size: 13px; }
  .ra-role-bar { margin: 3px 0; padding: 4px 7px; }
  .ra-progress { font-size: 11px; }
  .ra-book-tag { font-size: 10px; padding: 3px 8px; margin-bottom: 2px; }
  .ra-controls { margin-top: 8px; }
  .ra-nav { margin-top: 6px; }
  /* 32 0×短屏最严苛组合：再紧一档 */
  .ra-turn { padding: 4px 6px; }
  .ra-turns { gap: 3px; }
  .ra-role-bar { margin: 2px 0; padding: 3px 6px; }
  .q-stage { padding: 8px 8px 6px; }
  .opt { min-height: 42px; padding: 9px 8px; }
  .options { margin-top: 8px; gap: 6px; }
}

/* 短屏手机（iPhone SE/8 类 667~720px 高）：按高度再压一档,保证一屏 */
@media (max-width: 640px) and (max-height: 740px) {
  #app { padding-top: 8px; padding-bottom: calc(80px + var(--safe-b)); }
  .topbar { padding: 2px 2px 6px; }
  .logo { font-size: 16px; }
  .logo-badge { width: 28px; height: 28px; font-size: 16px; border-radius: 9px; }
  .chip { padding: 4px 9px; font-size: 11.5px; }

  /* 跟读 */
  .ra-scope { padding: 7px 10px; margin-bottom: 6px !important; }
  .ra-scope .h2 { font-size: 14px; margin-bottom: 4px; }
  .ra-tabs { margin: 5px 0 4px; }
  .ra-tab { padding: 6px 10px; font-size: 12px; }
  .ra-stage { padding: 10px 10px 8px; }
  .ra-big-icon { font-size: 36px; }
  .ra-word { font-size: 28px; }
  .ra-sentence { margin-top: 4px; }
  .ra-controls { margin-top: 8px; }
  .ra-controls .btn { min-height: 42px; padding: 9px 8px; }
  .ra-nav { margin-top: 6px; }
  .ra-nav .btn { min-height: 34px; padding: 6px 10px; }
  /* 对话轮次 */
  .ra-book-tag { display: none; }
  .ra-stage .h3 { font-size: 14px; margin: 2px 0 4px; }
  .ra-role-bar { margin: 4px 0; padding: 4px 8px; }
  .ra-turn { padding: 5px 8px; }
  .ra-turn-en { font-size: 13px; line-height: 1.3; }
  .ra-turn-zh { font-size: 10.5px; }
  .ra-turns { gap: 5px; }

  /* PK 设置 */
  .pk-stats { padding: 6px 8px 5px; margin-bottom: 4px !important; }
  .pk-stats .h2 { font-size: 13px; margin-bottom: 4px; }
  .pk-stats .rs-big { font-size: 15px; }
  .sec-h { font-size: 13px !important; margin: 5px 0 3px !important; }
  .mode-card { padding: 9px 6px; }
  .mode-emoji { font-size: 18px; }
  .mode-name { font-size: 12.5px; }
  .mode-grid { gap: 6px; }
  .pk-start-wrap { margin-top: 8px !important; }
  .pk-start-wrap .btn { min-height: 42px; padding: 10px 24px; }

  /* PK 对战 */
  .pk-head { margin-bottom: 8px; }
  .pk-board { padding: 8px 8px; }
  .pk-avatar { font-size: 22px; }
  .pk-score { font-size: 18px; }
  .pk-name { font-size: 11px; }
  .q-visual { font-size: 46px; }
  .q-zh { font-size: 14px; }
  .duo-tag { font-size: 12px; padding: 3px 10px; margin-bottom: 6px; }
  .duo-options .opt { min-height: 42px; font-size: 15px; }
  .duo-col { padding: 8px 9px 9px; }

  /* 挑战：地图 */
  .lv-head { margin-bottom: 6px; }
  .lv-head .h1 { font-size: 17px; }
  .back-btn { width: 38px; height: 38px; }
  /* 掌握进度卡（紧跟 lv-head 的 .card） */
  .lv-head + .card { padding: 8px 10px !important; margin-bottom: 8px !important; }
  .lv-head + .card .h3 { font-size: 13px !important; }
  .lv-head + .card .chip { padding: 3px 8px; font-size: 11px; }
  .lv-head + .card .progress-bar { height: 9px !important; }
  .unit-list { gap: 5px; }
  .unit-row { padding: 6px 9px; gap: 8px; }
  .unit-no { width: 26px; height: 26px; font-size: 12.5px; border-radius: 9px; }
  .unit-title { font-size: 12.5px; }
  .unit-right .stars { font-size: 10.5px; }
  .unit-right .unit-play { font-size: 10px; }
  /* 地图底部两个按钮并排 */
  .unit-list + div[style*="margin-top"] { margin-top: 10px !important; }
  .unit-list + div .btn { flex: 1; min-width: 0; padding: 9px 8px; font-size: 12.5px; min-height: 38px; }

  /* 挑战：翻牌 → 4 列缩成 3 行,省高度 */
  .memory-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }

  /* 挑战：比赛 */
  .quiz-top { margin-bottom: 4px; }
  .q-stage { padding: 10px 10px 8px; }
  .q-word { font-size: 26px; }
  .options { margin-top: 10px; gap: 8px; }
  .opt { min-height: 46px; font-size: 16px; padding: 11px 10px; }
  .spell-area { margin-top: 8px; }
  .slots { margin-bottom: 8px; gap: 6px; }
  .slot { width: 34px; height: 44px; font-size: 17px; }
  .letter { width: 34px; height: 40px; font-size: 16px; }
  .spell-actions { margin-top: 8px; }
  .memory-grid { gap: 6px; }
  .result-emoji { font-size: 48px; }
  .result-score { font-size: 30px; }
  /* 短屏进一步压底部留白 */
  #app { padding-bottom: calc(72px + var(--safe-b)); }
}

/* 极窄 + 短屏（320×667 类）：最后一档保险 */
@media (max-width: 340px) and (max-height: 740px) {
  #app { padding-top: 6px; }
  .ra-stage { padding: 7px 8px 6px; }
  .ra-turn { padding: 4px 6px; gap: 5px; }
  .ra-turns { gap: 3px; }
  .ra-turn-en { font-size: 12px; line-height: 1.25; }
  .ra-turn-zh { font-size: 10px; }
  .ra-turn .mini-speak { width: 26px; height: 26px; font-size: 12px; }
  .ra-role-bar { margin: 2px 0; padding: 3px 6px; }
  .ra-role-bar .fchip { padding: 4px 8px; font-size: 11px; }
  .ra-stage .h3 { font-size: 13px; margin: 1px 0 3px; }
  .ra-controls { margin-top: 6px; }
  .ra-controls .btn { min-height: 40px; padding: 8px 6px; font-size: 13px; }
  .ra-nav { margin-top: 5px; }
  .ra-nav .btn { min-height: 32px; }
  .q-stage { padding: 7px 8px 6px; }
  .options { margin-top: 8px; gap: 6px; }
  .opt { min-height: 42px; padding: 9px 8px; font-size: 15px; }
  .q-visual { font-size: 40px; }
  .quiz-top { margin-bottom: 3px; }
}

/* 打印 */
@media print {
  .tabbar, .btn { display: none; }
}