:root{
  --navy:#16335c; --navy2:#1e4a86; --navy3:#245a9e;
  --gold:#f3c74b; --gold-d:#c79a2e; --gold-l:#ffe39a;
  --white:#ffffff; --ink:#22324f; --ink-soft:#5f6f8a;
  --green:#2ecc8f; --green-d:#16a673; --green-ink:#0f6b4d;
  --blue:#4aa3ff; --blue-d:#2f86e6;
  --amber:#ffb03c; --amber-d:#f08e1c;
  --red:#ff6b6b; --red-d:#e03131;
  --soft:#eef3fb; --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a5fa8 0%, rgba(42,95,168,0) 55%),
    linear-gradient(165deg,#1e4a86 0%,#16335c 55%,#0f2244 100%);
  color:var(--white); overflow-x:hidden; overflow-y:auto; user-select:none;
  -webkit-font-smoothing:antialiased;
}
#app{position:relative;max-width:480px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;padding:14px 16px 18px;}
.brand{position:absolute;top:14px;right:14px;opacity:.95;z-index:5;}
.logo-img{display:block;object-fit:contain;border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.35);}
.parent-btn{position:absolute;top:14px;right:84px;z-index:5;background:rgba(255,255,255,.14);
  border:none;color:#dbe8fb;font-size:12px;padding:5px 12px;border-radius:13px;cursor:pointer;
  letter-spacing:1px;}
.parent-btn:active{background:rgba(255,255,255,.28);}

/* ===== 屏幕切换 ===== */
.screen{display:none;flex:1;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;animation:fade .35s ease;padding:50px 0 6px;}
.screen.active{display:flex;}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== 开场 / 结束 通用 ===== */
.mascot-stage{margin-bottom:4px;}
.mascot-leaf.big{width:152px;height:152px;animation:bob 2.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));}
.mascot-leaf.big.happy{animation:happy .9s ease;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes happy{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.12) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
.title{font-size:40px;margin:8px 0 2px;letter-spacing:3px;text-shadow:0 3px 0 rgba(0,0,0,.28);
  font-weight:800;}
.subtitle{font-size:16px;color:#c2d6f6;margin:0 0 24px;line-height:1.6;}
.hint-sm{font-size:13px;color:#9fb6e0;margin-top:20px;letter-spacing:.5px;}

/* 开场一句话卖点 */
.slogan{font-size:20px;font-weight:800;color:#fff;margin:12px 0 8px;line-height:1.5;
  text-shadow:0 2px 0 rgba(0,0,0,.22);}
.slogan b{color:var(--gold-l);}
.slogan-sub{font-size:14px;color:#bcd2f5;margin:0 0 26px;line-height:1.75;}
.slogan-sub b{color:#ffe9b0;}
.btn-why{margin-top:16px;background:none;border:1.6px dashed rgba(255,255,255,.42);color:#cfe0ff;
  font-size:13px;padding:9px 18px;border-radius:20px;cursor:pointer;text-underline-offset:3px;
  text-decoration:underline;}
.btn-why:active{background:rgba(255,255,255,.12);}

/* 为什么弹窗 */
.modal-box h2 + .why-step{margin-top:6px;}
.why-step{display:flex;gap:12px;background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;
  align-items:flex-start;border-left:4px solid var(--red);}
.ws-no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;}
.ws-body{flex:1;min-width:0;}
.ws-t{font-weight:800;color:var(--navy);font-size:15px;margin-bottom:4px;}
.ws-d{font-size:13px;color:var(--ink-soft);line-height:1.65;}
.why-cure{background:linear-gradient(180deg,#eafaf3,#d8f0e4);border:2px solid var(--green);
  border-radius:14px;padding:14px 16px;margin:14px 0 12px;}
.wc-t{font-weight:800;color:var(--green-d);font-size:16px;margin-bottom:6px;}
.wc-d{font-size:13.5px;color:var(--green-ink);line-height:1.7;}
.wc-em{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed #9fd8bd;
  font-weight:700;color:#0f5132;}
.why-note{background:#fff8e6;border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;
  font-size:13px;color:#7a6432;line-height:1.7;}
.why-note b{color:#5c4a1e;}

/* 结束页 */
.end-score{font-size:17px;color:#ffe9b0;font-weight:700;margin:6px 0 4px;letter-spacing:.5px;}
.end-score span{font-size:24px;color:var(--gold);font-weight:800;}
.end-wrong{width:100%;background:#fff;border-radius:16px;padding:12px 14px;margin:12px 0 10px;
  text-align:left;}
.end-wrong.hidden{display:none;}
.ew-t{font-weight:800;color:var(--navy);font-size:14px;margin-bottom:8px;}
.ew-t span{color:var(--red);}
.ew-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.ew-list span{background:#fff0f0;color:#c0392b;font-weight:800;font-size:15px;
  padding:3px 10px;border-radius:9px;}
.ew-d{font-size:12.5px;color:var(--ink-soft);line-height:1.6;}
.end-next{width:100%;background:rgba(255,255,255,.10);border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;text-align:left;margin-bottom:16px;}
.en-t{font-weight:800;color:var(--gold-l);font-size:14px;margin-bottom:8px;}
.en-i{font-size:12.5px;color:#d5e3f8;line-height:1.75;margin-bottom:5px;}
.en-i i{display:inline-block;width:17px;height:17px;line-height:17px;text-align:center;
  border-radius:50%;background:rgba(255,255,255,.22);font-style:normal;font-size:11px;
  margin-right:6px;font-weight:700;}
.end-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.6px solid rgba(255,255,255,.42);
  font-size:16px;font-weight:700;padding:13px 24px;border-radius:30px;cursor:pointer;}
.btn-ghost:active{background:rgba(255,255,255,.26);}
.btn-ghost.hidden{display:none;}

/* 主按钮（橙→金渐变，立体按压） */
.btn-primary{background:linear-gradient(180deg,var(--amber),#ff7e1c);color:#fff;border:none;
  font-size:20px;font-weight:800;padding:14px 36px;border-radius:40px;cursor:pointer;
  box-shadow:0 6px 0 #d9651a,0 10px 20px rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s;}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 #d9651a,0 4px 10px rgba(0,0,0,.2);}
.btn-primary.big{font-size:24px;padding:18px 50px;}

/* ===== 顶栏 ===== */
.topbar{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.grp-no{font-size:14px;color:#bcd2f5;white-space:nowrap;flex:none;}
.grp-no span{color:#fff;font-weight:800;}
.progress{flex:1;min-width:0;height:14px;background:rgba(255,255,255,.18);border-radius:10px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-l));
  border-radius:10px;transition:width .4s ease;}
.quit-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.12);color:#dbe8fb;font-size:15px;line-height:1;cursor:pointer;
  padding:0;display:flex;align-items:center;justify-content:center;}
.quit-btn:active{background:rgba(255,255,255,.3);}
/* 左上角返回聆梧云（与右上角 .brand 徽标对称；定位参照 #app 的 relative） */
.game-back{position:absolute;top:14px;left:14px;z-index:5;width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#eaf2ff;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding-bottom:4px;box-sizing:border-box;}
.game-back:active{background:rgba(255,255,255,.3);}

/* ===== 四步路线图（纯展示） ===== */
.flow-guide{width:100%;display:flex;align-items:center;justify-content:center;gap:4px;
  margin:0 0 10px;flex-wrap:nowrap;overflow:hidden;}
.flow-chip{flex:none;font-size:12.5px;font-weight:800;color:#cfe0ff;
  background:rgba(255,255,255,.12);border:1px solid var(--line);
  padding:5px 11px;border-radius:20px;white-space:nowrap;}
.flow-chip.cur{color:#5c4410;background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border-color:var(--gold-d);box-shadow:0 2px 8px rgba(243,199,75,.4);}
.flow-arrow{color:#7e95be;font-size:13px;font-weight:700;flex:none;}

/* ===== 角色 + 引导语 ===== */
.stage{position:relative;margin:2px 0 8px;min-height:62px;display:flex;flex-direction:row;
  align-items:center;gap:10px;width:100%;}
.mascot-leaf{width:96px;height:96px;animation:bob 2.6s ease-in-out infinite;}
.stage .mascot-leaf{width:52px;height:52px;flex:none;animation:bob 2.6s ease-in-out infinite;}
.stage .speech{font-size:13.5px;font-weight:600;padding:9px 14px;margin-top:0;max-width:none;
  flex:1;text-align:left;border-radius:14px;line-height:1.5;}
.stage .speech:after{top:50%;left:-9px;transform:translateY(-50%);
  border:9px solid transparent;border-right-color:var(--white);}
.speech{margin-top:6px;background:var(--white);color:var(--ink);font-size:18px;font-weight:600;
  padding:12px 20px;border-radius:18px;max-width:300px;position:relative;line-height:1.45;}
.speech:after{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  border:10px solid transparent;border-bottom-color:var(--white);}

/* ===== 分区标签 ===== */
.zone-label{width:100%;display:flex;align-items:center;gap:7px;margin:12px 0 7px;
  text-align:left;font-size:14px;font-weight:800;color:#fff;letter-spacing:.5px;}
.zone-label:first-of-type{margin-top:6px;}
.zl-ico{font-size:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}

/* ===== ① 口型对比卡片 ===== */
/* 2026-09-22 老板定：删掉分区上方解释小标题后，把间距补回来 */
.how-row{display:flex;gap:10px;width:100%;margin-top:14px;}
.how-card{flex:1;min-width:0;background:#fff;border-radius:18px;padding:9px 9px 11px;
  box-shadow:0 6px 16px rgba(0,0,0,.22);position:relative;overflow:hidden;}
.how-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;}
.how-card.en:before{background:linear-gradient(90deg,var(--blue),var(--blue-d));}
.how-card.py:before{background:linear-gradient(90deg,var(--green),var(--green-d));}
.how-card.hidden{display:none;}
.how-row:has(.how-card.hidden) .how-card{flex:1;max-width:none;}
.how-sym{font-size:38px;font-weight:800;color:var(--navy);letter-spacing:.5px;line-height:1.1;margin:8px 0 2px;}
.how-card.py .how-sym{color:var(--green-d);}
.how-tag{font-size:12px;font-weight:800;color:#fff;background:var(--navy3);
  padding:4px 12px;border-radius:10px;letter-spacing:1px;}
.how-card.py .how-tag{background:var(--green-d);}
.how-card.en .how-tag{background:var(--blue-d);}
.how-anchor{font-size:15px;font-weight:700;line-height:1.4;margin:2px 0 4px;}
.how-card.en .how-anchor{color:var(--blue-d);}
.how-card.py .how-anchor{color:var(--green-d);}
.how-vs{flex:none;align-self:center;font-size:30px;font-weight:800;color:var(--red);padding:0 2px;}
.how-tip{font-size:11.5px;line-height:1.5;color:var(--ink-soft);margin:6px 2px 0;text-align:center;}

/* ===== ② 听：点哪个听哪个 ===== */
/* 2026-09-22：「听英语」拆成两个按钮。前两个（英式/美式）并排各占一半；
   「听拼音」换行独占整行——它是对照组，视觉上要和英语那对拉开层次。 */
.listen-row{display:flex;gap:8px;width:100%;flex-wrap:wrap;margin-top:14px;}
.listen-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:11px 0;border:none;border-radius:15px;cursor:pointer;font-size:13px;font-weight:800;color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.20);transition:transform .08s,box-shadow .08s;}
.listen-btn.hidden{display:none;}
.listen-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.2);}
.listen-btn.en{background:linear-gradient(180deg,var(--blue),var(--blue-d));box-shadow:0 5px 0 #1f63b0;}
.listen-btn.py{background:linear-gradient(180deg,var(--green),var(--green-d));box-shadow:0 5px 0 #0f8a5f;}
.listen-btn.slow{background:linear-gradient(180deg,var(--amber),var(--amber-d));box-shadow:0 5px 0 #c06a10;}
.lb-ico{font-size:20px;line-height:1;}

/* 口音切换：英式 / 美式（仅影响“听英语”与打分参考音） */
.accent-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 9px;}
.ab-label{font-size:12px;font-weight:700;color:var(--ink-soft);}
.accent-switch{display:inline-flex;background:#eef2f8;border:1px solid var(--line);border-radius:999px;padding:3px;}
.acc-opt{border:none;background:transparent;color:#5b6b86;font-size:12px;font-weight:700;
  padding:6px 14px;border-radius:999px;cursor:pointer;transition:all .15s;line-height:1;white-space:nowrap;}
.acc-opt.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(15,80,160,.18);}

/* ===== ③ 读 + ④ 评分 ===== */
.rec-area{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:14px;}
.btn-rec{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,var(--amber),#ff8a00);color:#fff;border:none;font-size:19px;
  font-weight:800;padding:15px 16px;border-radius:20px;cursor:pointer;
  box-shadow:0 6px 0 #d9651a,0 10px 18px rgba(0,0,0,.22);transition:transform .08s,background .2s,box-shadow .2s;}
.btn-rec:active{transform:translateY(4px);box-shadow:0 2px 0 #d9651a,0 4px 10px rgba(0,0,0,.2);}
.btn-rec.recording{background:linear-gradient(180deg,var(--red),var(--red-d));
  box-shadow:0 6px 0 #a81e1e,0 0 22px rgba(255,107,107,.55);
  animation:rec-pulse 1.1s ease-in-out infinite;}
@keyframes rec-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.btn-rec:disabled{opacity:.5;cursor:not-allowed;}
.br-ico{font-size:23px;}

.rec-meter{width:100%;margin-top:12px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.10);border:1px solid var(--line);border-radius:14px;padding:9px 13px;}
.rec-meter.hidden{display:none;}
.rm-txt{font-size:13px;color:#ffe9b0;white-space:nowrap;font-weight:700;}
.rm-bar{flex:1;height:10px;background:rgba(255,255,255,.18);border-radius:6px;overflow:hidden;}
.rm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#7fe0a8);
  transition:width .08s linear;}

/* 评分框 */
.score-box{width:100%;margin-top:12px;background:rgba(255,255,255,.14);border:1px solid var(--line);
  border-radius:20px;padding:14px 15px;animation:pop .3s ease;}
.score-box.hidden{display:none;}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
.sc-top{display:flex;align-items:center;gap:12px;}
.sc-num{font-size:42px;font-weight:800;line-height:1;color:#fff;flex:none;
  text-shadow:0 2px 8px rgba(0,0,0,.3);}
.sc-num small{font-size:14px;font-weight:700;margin-left:2px;color:#ffe9b0;}
.sc-right{flex:1;min-width:0;text-align:left;}
.sc-verdict{font-size:17px;font-weight:800;color:var(--green);}
.sc-verdict.fail{color:var(--gold-l);}
.sc-reason{font-size:12.5px;color:#dbe8fb;margin-top:3px;line-height:1.5;}
.sc-bar{position:relative;height:9px;background:rgba(0,0,0,.26);border-radius:6px;margin:10px 0 10px;}
.sc-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--green),#7fe0a8);
  transition:width .5s ease;}
.sc-bar i.fail{background:linear-gradient(90deg,var(--gold),var(--gold-l));}
.sc-bar b{position:absolute;top:-3px;width:2px;height:15px;background:#fff;opacity:.9;}
.sc-bar b:after{content:"合格";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  font-size:9px;color:#fff;opacity:.75;white-space:nowrap;}
.sc-btns{display:flex;gap:8px;}
.sc-btn{flex:1;background:rgba(255,255,255,.16);border:1.6px solid rgba(255,255,255,.3);
  color:#fff;font-size:13px;font-weight:800;padding:9px 0;border-radius:13px;cursor:pointer;}
.sc-btn:active{background:rgba(255,255,255,.3);}
.sc-btn:disabled{opacity:.4;cursor:not-allowed;}

.mic-warn{width:100%;margin-top:12px;background:#fff;color:var(--ink);border-radius:14px;
  padding:12px 14px;font-size:12.5px;line-height:1.65;text-align:left;
  border-left:4px solid var(--red);box-shadow:0 4px 12px rgba(0,0,0,.18);}
.mic-warn.hidden{display:none;}
.mic-warn b{color:var(--navy);}
.mic-warn code{background:#e3ebf7;padding:1px 5px;border-radius:4px;font-size:11.5px;}

/* 下一组 */
.btn-go{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#5c4410;border:none;
  font-size:18px;font-weight:800;padding:14px 32px;border-radius:30px;cursor:pointer;
  box-shadow:0 5px 0 var(--gold-d),0 8px 16px rgba(0,0,0,.2);transition:transform .08s,box-shadow .08s;}
.btn-go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-d),0 3px 8px rgba(0,0,0,.18);}
.btn-go.wide{width:100%;margin-top:14px;}
.btn-go.wait{background:linear-gradient(180deg,#9fb0cc,#7a8ba8);color:#eef3fb;box-shadow:0 5px 0 #5d6b83;}
.btn-go:disabled{opacity:.8;cursor:not-allowed;}
.btn-go:disabled:active{transform:none;box-shadow:0 5px 0 var(--gold-d);}

/* 上 / 下一组 导航行 */
.nav-row{display:flex;gap:10px;width:100%;margin-top:14px;}
.nav-prev{flex:0 0 auto;padding:14px 18px;}
.nav-next{flex:1 1 auto;}
.btn-go.done{background:linear-gradient(180deg,#4fd6a0,var(--green));color:#fff;box-shadow:0 5px 0 #1ba974,0 8px 16px rgba(0,0,0,.2);}
.btn-go.done:active{box-shadow:0 2px 0 #1ba974,0 3px 8px rgba(0,0,0,.18);}

/* ===== 家长弹窗 ===== */
.modal{position:fixed;inset:0;background:rgba(10,20,40,.72);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:50;backdrop-filter:blur(2px);}
.modal.hidden{display:none;}
.modal-box{background:var(--soft);color:var(--ink);border-radius:20px;max-width:440px;width:100%;
  max-height:86vh;overflow:auto;padding:24px;position:relative;
  box-shadow:0 18px 50px rgba(0,0,0,.4);}
.modal-box h2{margin:0 0 6px;font-size:21px;color:var(--navy);}
.ref-note{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:23px;
  color:#9fb0c9;cursor:pointer;line-height:1;}
.modal-close:active{color:var(--navy);}
/* 页签 */
.ref-tabs{display:flex;gap:8px;margin-bottom:14px;}
.ref-tab{flex:1;padding:10px 0;border:none;border-radius:13px;background:#d9e4f5;color:var(--navy);
  font-size:15px;font-weight:800;cursor:pointer;transition:background .15s,color .15s;}
.ref-tab.active{background:var(--navy);color:#fff;}
.ref-pane.hidden{display:none;}

/* 怎么学 */
.step{display:flex;gap:12px;background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;
  align-items:flex-start;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.step-no{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--navy);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;}
.step-t{font-weight:800;color:var(--navy);font-size:15px;margin-bottom:3px;}
.step-d{font-size:13px;color:var(--ink-soft);line-height:1.55;}
.tips{background:#fff8e6;border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;
  font-size:13px;color:#7a6432;line-height:1.7;margin-top:4px;}
.tips b{color:#5c4a1e;}

/* 全部区别总览 */
.grp{margin-bottom:14px;}
.grp-h{font-size:14px;font-weight:800;color:#fff;background:var(--navy);display:inline-block;
  padding:5px 14px;border-radius:12px;margin-bottom:8px;}
.ref-item{background:#fff;border-radius:12px;padding:9px 12px;font-size:13px;display:flex;
  gap:10px;align-items:center;margin-bottom:6px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.ref-item .rf{font-weight:800;color:var(--navy);font-size:17px;min-width:50px;}
.ref-item .rp{font-weight:800;color:#2f7a55;font-size:17px;min-width:44px;
  background:#eafff4;border-radius:8px;padding:2px 8px;text-align:center;}
.ref-item .rh{color:var(--ink-soft);font-size:12.5px;line-height:1.45;flex:1;}
.ref-vs{color:#c6d2e6;font-size:12px;}

.hidden{display:none !important;}