/* ==========================================================================
   萌安我学 · 四上数学闯关岛
   视觉系统 v1.0  —— 浅色 / 圆润 / 游戏化
   ========================================================================== */

:root{
  --bg-a:#EEF3FF;
  --bg-b:#FFF4F8;
  --bg-c:#F3F0FF;

  --card:#FFFFFF;
  --card-2:#F8FAFF;

  --ink:#1B2144;
  --ink-2:#616A92;
  --ink-3:#A0A8C6;

  --line:#E7ECFA;
  --line-2:#F1F4FD;

  --brand:#5B7CFA;
  --brand-2:#8B5CF6;
  --brand-soft:#EBF0FF;

  --ok:#12B76A;
  --ok-soft:#E6F8F0;
  --no:#FF5A6E;
  --no-soft:#FFECEF;
  --gold:#FFB020;
  --gold-soft:#FFF6E3;
  --cyan:#12B5C9;
  --pink:#FF6B9D;
  --orange:#FF8A3D;

  --r-xs:8px;  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 2px 8px rgba(27,33,68,.05);
  --sh-2:0 8px 24px rgba(91,124,250,.10);
  --sh-3:0 16px 40px rgba(91,124,250,.16);
  --sh-in:inset 0 -3px 0 rgba(0,0,0,.08);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 12% -10%, var(--bg-a) 0%, transparent 58%),
    radial-gradient(900px 620px at 100% 8%, var(--bg-b) 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 120%, var(--bg-c) 0%, transparent 60%),
    #F7F9FF;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* ---------- 屏幕画布 ----------
   ⚠ 已去掉「手机外壳」：原先这里是一个 390×844 的圆角壳 + 双层白边阴影 +
   灵动岛 + 假状态栏（9:41 / 5G / 电池）。手机上打开时 = 手机里再套一个手机，
   观感很怪。现在改成直接铺满可用视口，顶部吃系统安全区。 */
.phone{
  position:relative;
  width:100%; max-width:430px;
  height:100vh; height:100dvh;
  background:#fff;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  display:flex; flex-direction:column;
  isolation:isolate;
  padding-top:calc(8px + env(safe-area-inset-top));
  box-sizing:border-box;
}
.phone::after{ /* 灵动岛：已随外壳一并去掉 */
  display:none;
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; border-radius:14px; background:#12162B; z-index:60;
}
.statusbar{ /* 假状态栏：已随外壳一并去掉（真实状态栏由系统绘制） */
  display:none;
  flex:0 0 46px; align-items:center; justify-content:space-between;
  padding:0 26px; font-size:12.5px; font-weight:700; color:var(--ink);
  letter-spacing:.3px; position:relative; z-index:50;
}
.statusbar .sb-right{display:flex;align-items:center;gap:5px;}
.sb-bat{width:20px;height:10px;border:1.5px solid var(--ink);border-radius:3px;position:relative;opacity:.85}
.sb-bat::before{content:"";position:absolute;inset:1.5px;width:11px;background:var(--ink);border-radius:1px}
.sb-bat::after{content:"";position:absolute;right:-3.5px;top:2.5px;width:2px;height:5px;background:var(--ink);border-radius:0 1px 1px 0}

/* ---------- 屏幕容器 ---------- */
#app{flex:1 1 auto; position:relative; overflow:hidden;}
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
}
.screen.active{display:flex;}

.scroll{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:0 18px 20px;
  scrollbar-width:none;
}
.scroll::-webkit-scrollbar{display:none}

/* ==========================================================================
   顶部栏 / 通用件
   ========================================================================== */
.topbar{
  flex:0 0 auto; padding:6px 18px 12px; display:flex; align-items:center; gap:12px;
}
.topbar .tb-title{font-size:19px; font-weight:800; letter-spacing:.4px;}
.topbar .tb-sub{font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}
.icon-btn{
  width:36px;height:36px;border-radius:12px;border:none;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-1);cursor:pointer;flex:0 0 auto;
  transition:transform .15s, box-shadow .15s;
}
.icon-btn:active{transform:scale(.92)}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  height:27px;padding:0 11px;border-radius:14px;
  font-size:11.5px;font-weight:800;background:#fff;color:var(--ink-2);
  box-shadow:var(--sh-1);white-space:nowrap;
}
.pill.gold{background:linear-gradient(135deg,#FFF3D6,#FFE7AD);color:#9A6600}
.pill.brand{background:var(--brand-soft);color:var(--brand)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.no{background:var(--no-soft);color:var(--no)}

.h1{font-size:22px;font-weight:900;letter-spacing:.2px;margin:0}
.h2{font-size:16px;font-weight:800;margin:0;letter-spacing:.2px}
.muted{color:var(--ink-3);font-size:12px;font-weight:600;line-height:1.6}

.card{
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--sh-2); padding:14px;
}
.sec-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 2px 10px;
}
.sec-title h3{margin:0;font-size:14.5px;font-weight:800;letter-spacing:.3px;}
.sec-title .more{font-size:11.5px;color:var(--ink-3);font-weight:700;cursor:pointer}

/* 主按钮 */
.btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:800;
  border-radius:16px; height:50px; padding:0 22px; font-size:15.5px;
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 0 #4356C9, 0 14px 24px rgba(91,124,250,.32);
  transition:transform .12s, box-shadow .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #4356C9, 0 6px 14px rgba(91,124,250,.3)}
.btn.ghost{
  background:#fff;color:var(--brand);box-shadow:0 4px 0 #DDE5FB, 0 10px 18px rgba(91,124,250,.14);
}
.btn.ghost:active{box-shadow:0 1px 0 #DDE5FB, 0 4px 10px rgba(91,124,250,.14)}
.btn.small{height:40px;font-size:13.5px;border-radius:13px;box-shadow:0 4px 0 #4356C9,0 10px 18px rgba(91,124,250,.26)}
.btn.small:active{box-shadow:0 1px 0 #4356C9}
.btn.green{background:linear-gradient(135deg,#22C58B,#0FA76B);box-shadow:0 6px 0 #0C8A57,0 14px 24px rgba(18,183,106,.3)}
.btn.green:active{box-shadow:0 2px 0 #0C8A57}
.btn[disabled]{opacity:.42;pointer-events:none;filter:saturate(.5)}

/* ==========================================================================
   首页 —— 学习地图
   ========================================================================== */
.hero{
  margin:0 0 4px; padding:16px 16px 14px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,#6C8BFF 0%,#8B5CF6 55%,#B15CF6 100%);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 18px 34px rgba(108,139,255,.34);
}
.hero::before{
  content:""; position:absolute; width:190px;height:190px;border-radius:50%;
  right:-62px; top:-78px; background:rgba(255,255,255,.16);
}
.hero::after{
  content:""; position:absolute; width:110px;height:110px;border-radius:50%;
  right:38px; bottom:-64px; background:rgba(255,255,255,.10);
}
.hero-top{position:relative;display:flex;align-items:center;gap:11px}
.avatar{
  width:46px;height:46px;border-radius:16px;flex:0 0 auto;
  background:linear-gradient(135deg,#FFE29A,#FFB020);
  display:grid;place-items:center;font-size:24px;
  box-shadow:0 6px 16px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.08);
}
.hero-name{font-size:15.5px;font-weight:900;letter-spacing:.3px}
.hero-lv{font-size:11px;opacity:.92;font-weight:700;margin-top:3px;display:flex;align-items:center;gap:6px}
.lv-bar{width:74px;height:5px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden}
.lv-bar i{display:block;height:100%;background:#FFD666;border-radius:3px;box-shadow:0 0 8px rgba(255,214,102,.9)}
.hero-stats{
  position:relative;margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.24);
  border-radius:16px;padding:10px 0;backdrop-filter:blur(6px);
}
.hero-stats .hs{text-align:center;position:relative}
.hero-stats .hs+.hs::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.28);
}
.hero-stats b{display:block;font-size:19px;font-weight:900;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.hero-stats span{display:block;font-size:10.5px;opacity:.9;font-weight:700;margin-top:2px}

/* 今日任务条 */
.today{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#FFF9EC,#FFF1D8);border:1.5px dashed #FFD98A;
  box-shadow:0 6px 18px rgba(255,176,32,.14);
}
.today .t-ico{
  width:40px;height:40px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:#fff;font-size:20px;box-shadow:0 4px 10px rgba(255,176,32,.22)
}
.today .t-txt{flex:1 1 auto;min-width:0}
.today .t-txt b{display:block;font-size:13.5px;font-weight:800;margin-bottom:3px}
.today .t-txt span{font-size:11.5px;color:#B07A17;font-weight:700}
.t-go{
  flex:0 0 auto;height:32px;padding:0 14px;border-radius:11px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#FFB020,#FF8A3D);color:#fff;font-weight:900;font-size:12.5px;
  font-family:inherit;box-shadow:0 3px 0 #D97A1F;
}
.t-go:active{transform:translateY(2px);box-shadow:0 1px 0 #D97A1F}

/* 地图 */
.map-wrap{position:relative;padding:6px 0 8px;}
.map-wrap svg.path-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.island{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:11px 12px;border-radius:20px;background:var(--card);
  box-shadow:var(--sh-2);margin-bottom:14px;cursor:pointer;
  transition:transform .16s;
  border:2px solid transparent;
}
.island:active{transform:scale(.975)}
.island.done{border-color:#D8F3E6}
.island.cur{border-color:#D6E0FF; box-shadow:0 12px 28px rgba(91,124,250,.2)}
.island.lock{opacity:.62;filter:saturate(.5);cursor:not-allowed}
.island .badge{
  width:52px;height:52px;border-radius:18px;flex:0 0 auto;display:grid;place-items:center;
  font-size:26px;position:relative;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09), 0 6px 14px rgba(27,33,68,.12);
}
.island .badge .lv{
  position:absolute;left:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#fff;color:var(--ink);font-size:10.5px;font-weight:900;display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(27,33,68,.16)
}
.island .info{flex:1 1 auto;min-width:0}
.island .info .t{font-size:14px;font-weight:800;letter-spacing:.2px;margin-bottom:4px}
.island .info .d{font-size:11px;color:var(--ink-3);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.island .right{flex:0 0 auto;text-align:right}
.stars{display:flex;gap:1.5px;justify-content:flex-end;font-size:12px;line-height:1}
.stars .s{color:#E3E8F7}
.stars .s.on{color:var(--gold);text-shadow:0 0 8px rgba(255,176,32,.5)}
.island .right .pct{font-size:10.5px;font-weight:800;color:var(--ink-3);margin-top:5px}
.island.lock .right .pct{display:none}
.island:not(:last-child)::after{
  content:"";position:absolute;left:37px;bottom:-14px;width:2px;height:14px;z-index:0;
  background:repeating-linear-gradient(to bottom,#CFDAF6 0 4px,transparent 4px 8px);
}
.lockchip{
  font-size:10.5px;font-weight:900;color:var(--ink-3);text-align:right
}

/* ==========================================================================
   知识点学习页
   ========================================================================== */
.ls{
  border-radius:var(--r-lg);padding:20px 18px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 16px 32px rgba(91,124,250,.26); margin-bottom:16px;
}
.ls::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-56px;top:-64px;background:rgba(255,255,255,.15)}
.ls .ls-tag{font-size:11px;font-weight:900;opacity:.9;letter-spacing:1.5px;position:relative}
.ls h2{position:relative;margin:8px 0 6px;font-size:21px;font-weight:900;letter-spacing:.4px}
.ls p{position:relative;margin:0;font-size:12.5px;opacity:.94;line-height:1.65;font-weight:600}

.kcard{
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-2);
  padding:15px;margin-bottom:12px;position:relative;overflow:hidden;
  border-left:4px solid var(--brand);
}
.kcard .k-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.kcard .k-n{
  width:24px;height:24px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#fff;background:var(--brand);
}
.kcard .k-t{font-size:14px;font-weight:800;letter-spacing:.2px}
.kcard .k-b{font-size:13px;line-height:1.85;color:var(--ink-2);font-weight:600}
.kcard .k-b b{color:var(--ink);font-weight:800}
.formula{
  display:block;margin:9px 0;padding:11px 13px;border-radius:13px;
  background:linear-gradient(135deg,#F2F6FF,#F7F3FF);
  border:1.5px solid #E4EAFF; font-size:14.5px;font-weight:900;color:var(--brand);
  letter-spacing:.6px;text-align:center;font-variant-numeric:tabular-nums;
}
.tip{
  display:flex;gap:8px;margin-top:10px;padding:10px 12px;border-radius:13px;
  background:var(--gold-soft);font-size:12px;line-height:1.7;color:#8A6410;font-weight:700;
}
.tip .i{flex:0 0 auto}
.tip.no{background:var(--no-soft);color:#B33245}
.tip.ok{background:var(--ok-soft);color:#0A7C4C}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.mini{
  padding:10px;border-radius:13px;background:var(--card-2);border:1.5px solid var(--line-2);
  text-align:center
}
.mini b{display:block;font-size:16px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.mini span{font-size:11px;color:var(--ink-3);font-weight:700}

/* ==========================================================================
   答题页
   ========================================================================== */
.quiz-top{
  flex:0 0 auto;padding:4px 18px 10px;display:flex;align-items:center;gap:10px;
}
.prog{flex:1 1 auto;height:11px;border-radius:6px;background:#E9EEFB;overflow:hidden;position:relative}
.prog i{
  display:block;height:100%;border-radius:6px;width:0%;
  background:linear-gradient(90deg,#6C8BFF,#A55CF6);
  transition:width .42s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;
}
.prog i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shine 1.6s infinite;
}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.hearts{display:flex;gap:3px;font-size:15px;flex:0 0 auto}
.hearts .h{transition:transform .3s, opacity .3s}
.hearts .h.gone{opacity:.22;transform:scale(.8)}

.combo{
  position:absolute;right:22px;top:96px;z-index:30;pointer-events:none;
  font-size:26px;font-weight:900;color:var(--orange);
  text-shadow:0 3px 0 #fff,0 6px 18px rgba(255,138,61,.5);
  opacity:0;transform:scale(.5) rotate(-8deg);
}
.combo.show{animation:pop 700ms cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{
  0%{opacity:0;transform:scale(.4) rotate(-10deg)}
  35%{opacity:1;transform:scale(1.18) rotate(3deg)}
  70%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(1.05) translateY(-24px)}
}

.qbox{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:18px 16px;margin-bottom:14px;position:relative;overflow:hidden;
}
.qbox .q-index{font-size:11px;font-weight:900;color:var(--brand);letter-spacing:1.4px;margin-bottom:9px}
.qbox .q-stem{font-size:16.5px;font-weight:800;line-height:1.72;letter-spacing:.2px}
.qbox .q-stem .blank{
  display:inline-block;min-width:52px;border-bottom:2.5px dashed var(--brand);
  vertical-align:baseline;margin:0 4px
}
.q-visual{
  margin-top:14px;padding:12px;border-radius:14px;background:var(--card-2);
  border:1.5px solid var(--line-2);display:flex;justify-content:center;overflow:hidden
}
.q-visual svg{max-width:100%;height:auto}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:12px;padding:15px 15px;border-radius:17px;
  background:#fff;border:2px solid var(--line);box-shadow:var(--sh-1);
  cursor:pointer;transition:transform .12s,border-color .18s,background .18s;
  font-family:inherit;text-align:left;width:100%;
}
.opt:active{transform:scale(.98)}
.opt .k{
  width:29px;height:29px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--card-2);color:var(--ink-2);font-size:13px;font-weight:900;
  border:1.5px solid var(--line)
}
.opt .v{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.opt.pick{border-color:var(--brand);background:#F6F8FF}
.opt.pick .k{background:var(--brand);color:#fff;border-color:var(--brand)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .k{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--no);background:var(--no-soft);animation:shake .42s}
.opt.wrong .k{background:var(--no);color:#fff;border-color:var(--no)}
@keyframes shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}38%{transform:translateX(7px)}58%{transform:translateX(-4px)}78%{transform:translateX(4px)}}
.opt:disabled{cursor:default}

/* 数字键盘 */
.padwrap{margin-top:2px}
.padview{
  height:60px;border-radius:16px;background:#fff;border:2.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin-bottom:12px;
  box-shadow:var(--sh-1);
}
.padview .pv{font-size:27px;font-weight:900;letter-spacing:2px;font-variant-numeric:tabular-nums;color:var(--ink)}
.padview .pv.empty{color:var(--ink-3);font-size:15px;letter-spacing:.3px}
.padview .unit{font-size:16px;font-weight:800;color:var(--ink-2)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pad button{
  height:52px;border-radius:15px;border:none;background:#fff;box-shadow:var(--sh-1);
  font-size:21px;font-weight:900;color:var(--ink);cursor:pointer;font-family:inherit;
  transition:transform .1s,background .15s;font-variant-numeric:tabular-nums;
}
.pad button:active{transform:scale(.94);background:#F2F5FF}
.pad button.fn{font-size:14px;font-weight:900;color:var(--ink-2);background:#F4F6FD}
.pad button.ok{background:linear-gradient(135deg,#22C58B,#0FA76B);color:#fff;box-shadow:0 4px 0 #0C8A57}

/* 解析条 */
.explain{
  margin-top:4px;border-radius:18px;padding:14px 15px;
  background:#fff;box-shadow:var(--sh-2);border-left:4px solid var(--brand);
  animation:slideUp .3s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.explain .ex-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;margin-bottom:8px}
.explain .ex-h .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;flex:0 0 auto}
.explain .ex-b{font-size:13px;line-height:1.85;color:var(--ink-2);font-weight:600}
.explain .ex-b b{color:var(--ink)}

/* 底部操作 */
.foot{
  flex:0 0 auto;padding:10px 18px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fff 62%,rgba(255,255,255,0));
}

/* ==========================================================================
   结算页
   ========================================================================== */
.result-wrap{flex:1 1 auto;overflow-y:auto;padding:8px 22px 20px;text-align:center;scrollbar-width:none}
.result-wrap::-webkit-scrollbar{display:none}
.ray{
  width:150px;height:150px;margin:14px auto 0;position:relative;display:grid;place-items:center;
}
.ray::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#FFF3C9,#FFE29A,#FFF3C9,#FFE29A,#FFF3C9);
  animation:spin 9s linear infinite;
  mask:radial-gradient(circle, transparent 46%, #000 47%);
  -webkit-mask:radial-gradient(circle, transparent 46%, #000 47%);
  opacity:.9;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ray .core{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-size:50px;
  background:linear-gradient(135deg,#FFF6DA,#FFD879);
  box-shadow:0 12px 30px rgba(255,176,32,.42), inset 0 -4px 0 rgba(0,0,0,.07);
  position:relative;z-index:2;
  animation:corePulse 2.2s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.star-row{display:flex;justify-content:center;gap:10px;margin:16px 0 6px}
.star-row .big{font-size:38px;color:#E3E8F7;transform:scale(.6);opacity:0;transition:all .45s cubic-bezier(.34,1.56,.64,1)}
.star-row .big.on{color:var(--gold);text-shadow:0 4px 16px rgba(255,176,32,.55);transform:scale(1);opacity:1}
.star-row .big.on:nth-child(2){transition-delay:.16s}
.star-row .big.on:nth-child(3){transition-delay:.32s}
.star-row .big:nth-child(2){transition-delay:.16s}
.star-row .big:nth-child(3){transition-delay:.32s}
.res-title{font-size:23px;font-weight:900;letter-spacing:.4px;margin:6px 0 4px}
.res-sub{font-size:12.5px;color:var(--ink-3);font-weight:700;line-height:1.7}
.reward{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.rw{
  background:#fff;border-radius:16px;padding:13px 6px;box-shadow:var(--sh-2);
}
.rw b{display:block;font-size:19px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.rw span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:800;margin-top:3px}

/* ==========================================================================
   错题本 / 报告
   ========================================================================== */
.wrong-item{
  background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-2);padding:14px;
  margin-bottom:11px;border-left:4px solid var(--no);
}
.wrong-item .wi-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wrong-item .wi-tag{font-size:10.5px;font-weight:900;color:var(--no);background:var(--no-soft);padding:3px 9px;border-radius:9px}
.wrong-item .wi-n{font-size:10.5px;font-weight:800;color:var(--ink-3)}
.wrong-item .wi-q{font-size:13.5px;font-weight:800;line-height:1.7;margin-bottom:9px}
.wrong-item .wi-a{font-size:12.5px;line-height:1.85;font-weight:700;color:var(--ink-2)}
.wrong-item .wi-a .bad{color:var(--no);text-decoration:line-through}
.wrong-item .wi-a .good{color:var(--ok)}
.wrong-item .wi-x{
  margin-top:9px;padding-top:9px;border-top:1.5px dashed var(--line);
  font-size:12px;line-height:1.75;color:var(--ink-2);font-weight:600
}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.stat{
  background:#fff;border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-2);position:relative;overflow:hidden
}
.stat .s-ico{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:16px;margin-bottom:9px
}
.stat b{display:block;font-size:22px;font-weight:900;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:11px;color:var(--ink-3);font-weight:800;margin-top:2px}

.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 4px;margin-top:6px}
.bar-c{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar{
  width:100%;border-radius:9px 9px 4px 4px;min-height:6px;
  background:linear-gradient(180deg,#8BA4FF,#5B7CFA);
  box-shadow:0 4px 10px rgba(91,124,250,.26);
  position:relative; transition:height .6s cubic-bezier(.34,1.4,.64,1)
}
.bar.hi{background:linear-gradient(180deg,#34D399,#12B76A);box-shadow:0 4px 10px rgba(18,183,106,.28)}
.bar.low{background:linear-gradient(180deg,#FFB1BB,#FF5A6E);box-shadow:0 4px 10px rgba(255,90,110,.26)}
.bar-c .bl{font-size:10.5px;font-weight:800;color:var(--ink-3);white-space:nowrap;transform:scale(.92)}
.bar-c .bv{font-size:10px;font-weight:900;color:var(--ink-2);position:absolute;top:-15px;left:0;right:0;text-align:center}

.ring-wrap{display:flex;align-items:center;gap:18px}
.ring-txt b{display:block;font-size:13.5px;font-weight:900;margin-bottom:3px}
.ring-txt span{font-size:11.5px;color:var(--ink-3);font-weight:700;line-height:1.6}

/* ==========================================================================
   底部导航
   ========================================================================== */
#tabbar{
  flex:0 0 auto;display:flex;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:7px 6px calc(9px + env(safe-area-inset-bottom));z-index:40;
}
#tabbar.hide{display:none}
.tab{
  flex:1 1 0;border:none;background:none;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;
  color:var(--ink-3);transition:color .18s, transform .18s;
}
.tab .ti{font-size:21px;line-height:1;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.tab .tt{font-size:9.5px;font-weight:800;letter-spacing:.2px}
.tab.on{color:var(--brand)}
.tab.on .ti{transform:translateY(-2px) scale(1.14)}
.tab .dot{
  position:absolute;transform:translate(15px,-3px);
  min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--no);
  color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center;line-height:1;
}

/* ==========================================================================
   特效层
   ========================================================================== */
#fx{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti{position:absolute;width:9px;height:14px;border-radius:2px;will-change:transform,opacity}
.float-xp{
  position:fixed;font-size:17px;font-weight:900;pointer-events:none;z-index:1000;
  animation:xpf 1.05s cubic-bezier(.2,.8,.3,1) forwards;text-shadow:0 2px 8px rgba(0,0,0,.18)
}
@keyframes xpf{
  0%{opacity:0;transform:translateY(0) scale(.7)}
  22%{opacity:1;transform:translateY(-16px) scale(1.12)}
  100%{opacity:0;transform:translateY(-72px) scale(.94)}
}

/* 通用动画 */
.fade-in{animation:fadeIn .34s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.stagger>*{animation:fadeIn .4s ease both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.07s}
.stagger>*:nth-child(3){animation-delay:.12s}
.stagger>*:nth-child(4){animation-delay:.17s}
.stagger>*:nth-child(5){animation-delay:.22s}
.stagger>*:nth-child(6){animation-delay:.27s}
.stagger>*:nth-child(7){animation-delay:.32s}
.stagger>*:nth-child(8){animation-delay:.37s}
.stagger>*:nth-child(9){animation-delay:.42s}

@media (max-height:900px){
  /* 去外壳后画布本身就是 100dvh，不再需要「缩小到放得下」那一步。
     原先这里 scale(.94) + 上下留 10px 白边，看起来又是一层框。 */
  body{align-items:flex-start;padding:0;overflow:hidden}
}

/* 截图模式：铺满视口、去掉外框 */
body.full{align-items:stretch;justify-content:flex-start;display:block;padding:0;overflow:hidden;background:#fff}
body.full .phone{width:100%;height:100%;border-radius:0;box-shadow:none;transform:none}

/* ── 教材条：首屏第一行告诉家长「这是哪一册」 ──────────────────────────
   文案由后台「主题设置 → H5 页头」统一维护（jl-hero.js 取 /wp-json/mx/v1/hero），
   这里写死的那句是断网/接口失败时的兜底，不是最终显示内容。            */
.bkbar{margin:2px 0 10px;padding:10px 13px;border-radius:14px;
  background:#fff;border:2px solid #EDE6DA;box-shadow:0 3px 0 rgba(74,64,56,.10)}
.bk-t{font-size:16.5px;font-weight:800;color:#4A4038;line-height:1.35;letter-spacing:.2px}
.bk-s{margin-top:4px;font-size:11.5px;color:#8A7F70;line-height:1.45}