/* ==========================================================================
   萌安我学 · 二上数学糖果屋
   视觉系统 v1.0 —— 奶油底 / 糖果纸艺贴纸 / 厚描边硬投影
   与四上「暖色闯关岛」、五上「米白档案」、六上「工程制图纸」、三上「深空星图」五方区隔
   设计语言：大面积纯白 + 高饱和糖果色小面积点缀 + 统一深紫描边 + 实色硬投影
   ========================================================================== */

:root{
  /* ---- 奶油底 ---- */
  --cream-0:#FFF8EE;
  --cream-1:#FFFDF9;
  --cream-2:#FFF1DE;

  /* ---- 贴纸卡 ---- */
  --card:#FFFFFF;
  --card-solid:#FFFFFF;
  --card-2:rgba(255,255,255,.82);

  /* ---- 文字（深紫墨，不用纯黑）---- */
  --ink:#3B2E58;
  --ink-2:#655A80;
  --ink-3:#9A90B3;

  --line:rgba(59,46,88,.12);
  --line-2:rgba(59,46,88,.07);

  /* ---- 糖果主色 ---- */
  --brand:#FF6B8A;
  --brand-2:#9B6BFF;
  --brand-soft:rgba(255,107,138,.13);

  --neon:#2ED3A8;
  --ok:#0E9B74;
  --ok-soft:rgba(46,211,168,.16);
  --no:#E8386E;
  --no-soft:rgba(232,56,110,.12);
  --gold:#F5A623;
  --gold-soft:rgba(245,166,35,.17);
  --cyan:#4DB8FF;
  --pink:#FF6B8A;
  --orange:#FF9F45;

  /* ---- 贴纸描边 / 硬投影 ---- */
  --stk:#3B2E58;
  --stk-2:rgba(59,46,88,.16);

  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px;
  --sh-1:0 2px 0 var(--stk-2), 0 3px 8px rgba(59,46,88,.06);
  --sh-2:0 3px 0 var(--stk-2), 0 10px 22px rgba(59,46,88,.09);
  --sh-3:0 5px 0 var(--stk-2), 0 18px 40px rgba(59,46,88,.13);
}

*{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(900px 640px at 12% -8%, rgba(255,107,138,.22) 0%, transparent 58%),
    radial-gradient(760px 560px at 102% 6%, rgba(77,184,255,.20) 0%, transparent 55%),
    radial-gradient(820px 640px at 44% 114%, rgba(255,201,60,.24) 0%, transparent 60%),
    #F4E9F6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* ---------- 手机外框 ---------- */
.phone{
  position:relative;
  width:390px; height:844px;
  border-radius:44px;
  overflow:hidden;
  display:flex; flex-direction:column;
  isolation:isolate;
  /* 奶油底 + 糖果纸屑 + 柔光：全部走 background 层，避免伪元素遮挡内容 */
  background-image:
    /* 糖果纸屑（细圆点） */
    radial-gradient(circle 3px at 12% 7%,  rgba(255,107,138,.26), transparent),
    radial-gradient(circle 2.5px at 27% 4%, rgba(77,184,255,.24), transparent),
    radial-gradient(circle 3.2px at 46% 9%, rgba(255,201,60,.28), transparent),
    radial-gradient(circle 2.4px at 63% 4%, rgba(46,211,168,.24), transparent),
    radial-gradient(circle 3px at 82% 11%, rgba(155,107,255,.24), transparent),
    radial-gradient(circle 2.6px at 94% 6%, rgba(255,107,138,.20), transparent),
    radial-gradient(circle 2.6px at 8% 22%, rgba(46,211,168,.20), transparent),
    radial-gradient(circle 2.4px at 88% 26%, rgba(255,159,69,.20), transparent),
    radial-gradient(circle 3px at 34% 34%, rgba(77,184,255,.16), transparent),
    radial-gradient(circle 2.4px at 71% 31%, rgba(255,107,138,.14), transparent),
    radial-gradient(circle 2.8px at 19% 47%, rgba(255,201,60,.16), transparent),
    radial-gradient(circle 2.4px at 90% 52%, rgba(155,107,255,.14), transparent),
    radial-gradient(circle 3px at 55% 58%, rgba(46,211,168,.12), transparent),
    radial-gradient(circle 2.4px at 6% 66%, rgba(255,159,69,.14), transparent),
    radial-gradient(circle 3.2px at 79% 71%, rgba(255,107,138,.13), transparent),
    radial-gradient(circle 2.6px at 30% 80%, rgba(77,184,255,.12), transparent),
    radial-gradient(circle 3px at 60% 88%, rgba(255,201,60,.12), transparent),
    radial-gradient(circle 2.4px at 15% 93%, rgba(155,107,255,.11), transparent),
    radial-gradient(circle 2.8px at 92% 95%, rgba(46,211,168,.10), transparent),
    /* 柔光 */
    radial-gradient(520px 380px at 88% -6%, rgba(255,107,138,.18) 0%, transparent 62%),
    radial-gradient(460px 340px at 2% 26%, rgba(77,184,255,.15) 0%, transparent 60%),
    radial-gradient(560px 420px at 50% 108%, rgba(255,201,60,.20) 0%, transparent 62%),
    linear-gradient(180deg,#FFF9F0 0%,#FFFDF9 46%,#FFF7EC 100%);
  background-repeat:no-repeat;
  box-shadow:
    0 0 0 9px #EFE2F4,
    0 0 0 11px rgba(255,107,138,.26),
    0 40px 100px rgba(59,46,88,.28),
    0 0 70px rgba(155,107,255,.12);
}
.phone::after{ /* 灵动岛 */
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; border-radius:14px; background:#3B2E58; z-index:60;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.statusbar{
  flex:0 0 46px; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; font-size:12.5px; font-weight:800; 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:.7}
.sb-bat::before{content:"";position:absolute;inset:1.5px;width:11px;background:var(--neon);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:900; letter-spacing:.4px;}
.topbar .tb-sub{font-size:11.5px; color:var(--ink-3); font-weight:700; margin-top:2px;}
.icon-btn{
  width:36px;height:36px;border-radius:13px;border:2px solid var(--stk-2);
  background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:0 2px 0 var(--stk-2);cursor:pointer;flex:0 0 auto;
  transition:transform .15s, box-shadow .15s;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--stk-2)}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  height:27px;padding:0 11px;border-radius:14px;
  font-size:11.5px;font-weight:900;background:#fff;color:var(--ink-2);
  border:2px solid var(--stk-2);white-space:nowrap;
}
.pill.gold{background:var(--gold-soft);color:#B26A00;border-color:rgba(245,166,35,.36)}
.pill.fire{background:var(--gold-soft);color:#B26A00;border-color:rgba(245,166,35,.38)}
.pill.brand{background:var(--brand-soft);color:#D22B5E;border-color:rgba(255,107,138,.36)}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(14,155,116,.32)}
.pill.no{background:var(--no-soft);color:var(--no);border-color:rgba(232,56,110,.32)}

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

.card{
  background:#fff; border-radius:var(--r-md);
  border:2.5px solid var(--stk-2);
  box-shadow:0 3px 0 var(--stk-2), 0 10px 22px rgba(59,46,88,.08);
  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:900;letter-spacing:.3px;
  display:flex;align-items:center;gap:7px;
}
.sec-title h3::before{
  content:"";width:4px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--gold));
  box-shadow:0 1px 0 rgba(59,46,88,.14);
}
.sec-title .more{font-size:11.5px;color:var(--ink-3);font-weight:800;cursor:pointer}

/* 主按钮（糖果贴纸按钮：厚底投影 + 按压下沉） */
.btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:900;
  border-radius:18px; height:50px; padding:0 22px; font-size:15.5px;
  color:#fff; background:linear-gradient(135deg,#FF8FA8,#FF5F80);
  box-shadow:0 5px 0 #D22B5E, 0 14px 26px rgba(255,107,138,.30);
  transition:transform .12s, box-shadow .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  letter-spacing:.3px;
}
.btn:active{transform:translateY(5px); box-shadow:0 0 0 #D22B5E, 0 6px 14px rgba(255,107,138,.22)}
.btn.primary{background:linear-gradient(135deg,#FF8FA8,#FF5F80);box-shadow:0 5px 0 #D22B5E,0 14px 26px rgba(255,107,138,.30)}
.btn.primary:active{box-shadow:0 0 0 #D22B5E}
.btn.ghost{
  background:#fff;color:#7A5CE0;
  border:2.5px solid var(--stk-2);
  box-shadow:0 4px 0 var(--stk-2);
}
.btn.ghost:active{box-shadow:0 0 0 var(--stk-2)}
.btn.small{height:42px;font-size:13.5px;border-radius:15px;box-shadow:0 4px 0 #D22B5E,0 10px 20px rgba(255,107,138,.22)}
.btn.small:active{box-shadow:0 0 0 #D22B5E}
.btn.ghost.small{box-shadow:0 4px 0 var(--stk-2)}
.btn.green{background:linear-gradient(135deg,#5FE0B8,#22C08F);box-shadow:0 5px 0 #0E9B74,0 14px 26px rgba(46,211,168,.28)}
.btn.green:active{box-shadow:0 0 0 #0E9B74}
.btn[disabled]{opacity:.40;pointer-events:none;filter:saturate(.5)}

/* ==========================================================================
   首页 —— 糖果屋 + 糖果罐
   ========================================================================== */
.hero{
  margin:0 0 4px; padding:16px 16px 14px; border-radius:var(--r-xl);
  background:linear-gradient(135deg,#FF9F45 0%,#FF6B8A 48%,#9B6BFF 100%);
  color:#fff; position:relative; overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 5px 0 #C93F6A, 0 18px 36px rgba(255,107,138,.30);
}
.hero::before{
  content:""; position:absolute; width:190px;height:190px;border-radius:50%;
  right:-62px; top:-78px;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.32), rgba(255,255,255,.04) 70%);
}
.hero::after{
  content:""; position:absolute; width:130px;height:130px;border-radius:50%;
  right:34px; bottom:-70px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), transparent 70%);
}
.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,#FFF3C4,#FFD75E);
  display:grid;place-items:center;font-size:24px;
  border:2.5px solid rgba(255,255,255,.92);
  box-shadow:0 3px 0 rgba(180,90,20,.22);
}
.hero-name{font-size:15.5px;font-weight:900;letter-spacing:.3px;text-shadow:0 1px 0 rgba(180,60,90,.22)}
.hero-lv{font-size:11px;opacity:.96;font-weight:800;margin-top:3px;display:flex;align-items:center;gap:6px}
.lv-bar{width:74px;height:6px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden}
.lv-bar i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#FFE9A8,#FFC93C);
  box-shadow:0 0 8px rgba(255,201,60,.85);
}
.hero-stats{
  position:relative;margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.20);border:2px solid rgba(255,255,255,.44);
  border-radius:18px;padding:10px 0;
}
.hero-stats .hs{text-align:center;position:relative}
.hero-stats .hs+.hs::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:2px;
  background:rgba(255,255,255,.36);border-radius:1px;
}
.hero-stats b{display:block;font-size:19px;font-weight:900;letter-spacing:.4px;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(180,60,90,.20)}
.hero-stats span{display:block;font-size:10.5px;opacity:.94;font-weight:800;margin-top:2px}

/* 今日挑战条 */
.today{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#FFF6DE,#FFEED2);
  border:3px dashed #FFD75E;
  box-shadow:0 4px 0 rgba(245,166,35,.22), 0 10px 22px rgba(245,166,35,.10);
}
.today .t-ico{
  width:42px;height:42px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
  background:#fff;font-size:21px;border:2.5px solid rgba(245,166,35,.36);
  box-shadow:0 2px 0 rgba(245,166,35,.20);
}
.today .t-txt{flex:1 1 auto;min-width:0}
.today .t-txt b{display:block;font-size:13.5px;font-weight:900;margin-bottom:3px;color:var(--ink)}
.today .t-txt span{font-size:11.5px;color:#C07A00;font-weight:800}
.t-go{
  flex:0 0 auto;height:34px;padding:0 15px;border-radius:13px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#FFD75E,#FF9F45);color:#5A3200;font-weight:900;font-size:12.5px;
  font-family:inherit;box-shadow:0 4px 0 #D07A18, 0 8px 16px rgba(255,159,69,.28);
}
.t-go:active{transform:translateY(3px);box-shadow:0 1px 0 #D07A18}

/* 新教材变动卡（营销钩子，产品内也告诉家长） */
.change-card{
  margin-top:14px;
  background:linear-gradient(135deg,#FFF0F4,#F4EFFF);
  border:2.5px solid rgba(155,107,255,.26);
  box-shadow:0 3px 0 rgba(155,107,255,.18), 0 10px 22px rgba(59,46,88,.07);
}
.change-card .cc-h{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:900;color:var(--ink);margin-bottom:7px;
}
.change-card .cc-tag{
  height:19px;padding:0 8px;border-radius:7px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,#FF8FA8,#FF5F80);color:#fff;font-size:10px;font-weight:900;
  letter-spacing:.5px;box-shadow:0 1.5px 0 rgba(210,43,94,.42);
}
.change-card .cc-b{font-size:11.5px;line-height:1.75;color:var(--ink-2);font-weight:700}
.change-card .cc-b b{color:#D22B5E}

/* ---------- 游戏角 ---------- */
.game-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.game-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:15px 8px 14px;border-radius:22px;cursor:pointer;font-family:inherit;
  background:#fff;border:3px solid var(--g1);
  box-shadow:0 5px 0 var(--g2), 0 12px 24px rgba(59,46,88,.10);
  transition:transform .14s, box-shadow .14s;
  overflow:hidden;
}
.game-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:56%;
  background:linear-gradient(180deg, var(--g1), transparent);opacity:.13;
}
.game-card:active{transform:translateY(4px);box-shadow:0 1px 0 var(--g2)}
.game-card .g-ico{font-size:30px;line-height:1;position:relative}
.game-card b{font-size:14px;font-weight:900;color:var(--ink);position:relative;letter-spacing:.3px}
.game-card .g-sub{font-size:10.5px;font-weight:800;color:var(--ink-3);position:relative;text-align:center;line-height:1.4}

/* ---------- 糖果罐（单元列表） ---------- */
.jar-map{position:relative;padding:6px 0 2px}
.jar{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  padding-bottom:15px;cursor:pointer;
}
.jar:active .j-body{transform:translateY(3px) scale(.99);box-shadow:0 0 0 var(--stk-2)}

/* 罐盖栏（图标 + 虚线连线） */
.j-lid{
  position:relative;flex:0 0 58px;display:flex;flex-direction:column;
  align-items:center;align-self:stretch;padding-top:2px;
}
.j-ico{
  position:relative;width:52px;height:52px;border-radius:19px;
  display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(158deg,var(--c1),var(--c2));
  border:3px solid #fff;
  box-shadow:0 4px 0 var(--c2), 0 10px 20px rgba(59,46,88,.20);
  z-index:2;
}
.j-ico b{font-size:24px;line-height:1;position:relative;z-index:2;filter:drop-shadow(0 1px 1px rgba(59,46,88,.30))}
.j-glow{
  position:absolute;inset:-6px;border-radius:24px;
  border:3px solid var(--c1);opacity:0;pointer-events:none;
}
.j-lip{
  width:36px;height:8px;border-radius:5px;margin-top:-4px;
  background:#fff;border:2.5px solid var(--stk-2);
  box-shadow:0 2px 0 rgba(59,46,88,.06);z-index:3;
}
.jar:not(:last-child) .j-lid::after{
  content:"";position:absolute;left:50%;top:62px;bottom:-15px;
  width:4px;transform:translateX(-50%);border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--c1) 0 7px,transparent 7px 14px);
  opacity:.35;
}
.jar.done:not(:last-child) .j-lid::after{opacity:.8}
.jar.lock .j-ico{filter:grayscale(.92) brightness(1.04)}
.jar.cur .j-glow{opacity:1;animation:jarPulse 1.9s ease-out infinite}
@keyframes jarPulse{
  0%{transform:scale(.9);opacity:1}
  70%{transform:scale(1.26);opacity:0}
  100%{transform:scale(1.26);opacity:0}
}
.jar.cur .j-ico{animation:jarFloat 3.2s ease-in-out infinite}
@keyframes jarFloat{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-5px) rotate(2.5deg)}}

/* 贴纸卡体 */
.j-body{
  flex:1 1 auto;min-width:0;position:relative;
  padding:12px 14px;border-radius:20px;
  background:#fff;
  border:2.5px solid var(--stk-2);
  box-shadow:0 4px 0 var(--stk-2), 0 12px 24px rgba(59,46,88,.09);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.jar.done .j-body{border-color:var(--c2);box-shadow:0 4px 0 var(--c2), 0 12px 24px rgba(59,46,88,.10)}
.jar.cur .j-body{
  border-color:var(--c1);
  box-shadow:0 5px 0 var(--c1), 0 16px 30px rgba(59,46,88,.14);
}
.jar.lock{cursor:not-allowed}
.jar.lock .j-body{opacity:.62;filter:saturate(.4)}
.jh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.j-no{
  font-size:10px;font-weight:900;letter-spacing:1.1px;
  color:#fff;background:var(--c1);
  padding:2.5px 8px;border-radius:8px;
  box-shadow:0 1.5px 0 var(--c2);
}
.j-stars{display:flex;gap:1.5px;font-size:12.5px;line-height:1}
.j-stars .s{color:rgba(59,46,88,.15);transition:color .25s}
.j-stars .s.on{color:#FFB020;text-shadow:0 1px 0 rgba(200,120,0,.20)}
.j-stars i{font-style:normal;color:var(--ink-3);letter-spacing:1px;font-size:11px}
.j-t{font-size:14.5px;font-weight:900;letter-spacing:.2px;margin-bottom:4px}
.j-d{
  font-size:11px;color:var(--ink-3);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.j-bar{
  height:7px;border-radius:4px;margin-top:9px;overflow:hidden;
  background:rgba(59,46,88,.08);
}
.j-bar i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}
.j-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:7px;font-size:10.5px;font-weight:800;color:var(--ink-3);
}
.j-foot .j-n{color:var(--ink-3);opacity:.85}
.lockchip{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  color:var(--ink-3);
}
.note-card{background:#FFFDF6;border-style:dashed}

/* ==========================================================================
   单元页
   ========================================================================== */
.ls{
  border-radius:var(--r-xl); padding:16px 18px; color:#fff; position:relative;
  overflow:hidden; margin-bottom:4px; border:3px solid #fff;
  box-shadow:0 5px 0 rgba(59,46,88,.20), 0 16px 34px rgba(59,46,88,.18);
}
.ls::after{
  content:""; position:absolute; width:170px;height:170px;border-radius:50%;
  right:-56px; top:-66px;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.32), rgba(255,255,255,.03) 72%);
}
.ls > *{position:relative; z-index:1}
.ls-tag{
  display:inline-flex;align-items:center;height:21px;padding:0 10px;border-radius:8px;
  background:rgba(255,255,255,.26);font-size:10.5px;font-weight:900;letter-spacing:1px;
  border:1.5px solid rgba(255,255,255,.50);
}
.ls h2{margin:8px 0 5px;font-size:21px;font-weight:900;letter-spacing:.3px;text-shadow:0 1px 0 rgba(59,46,88,.18)}
.ls p{margin:0;font-size:12px;font-weight:800;opacity:.95;line-height:1.55}

.kcard{
  position:relative;display:block;padding:13px 14px;border-radius:18px;
  background:#fff;border:2.5px solid var(--stk-2);border-left:5px solid var(--brand);
  box-shadow:0 3px 0 var(--stk-2), 0 10px 20px rgba(59,46,88,.08);
  margin-bottom:10px;transition:transform .14s, border-color .14s;
}
.kcard:active{transform:translateY(2px);box-shadow:0 1px 0 var(--stk-2)}
.kcard .k-h{display:flex;align-items:center;gap:11px;margin-bottom:3px}
.kcard .k-n{
  width:25px;height:25px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#fff;
}
.kcard .k-t{font-size:13.5px;font-weight:900;letter-spacing:.2px}
.kcard .muted{font-size:11px;font-weight:800}

/* 知识点正文 */
.k-b{font-size:13.5px;line-height:1.78;color:var(--ink-2)}
.k-b b{color:var(--ink);font-weight:900}
.formula{
  margin:9px 0;padding:10px 12px;border-radius:14px;
  background:rgba(46,211,168,.10);border:2px dashed rgba(46,211,168,.42);
  font-size:12.5px;font-weight:900;color:#0B7A5C;line-height:1.9;
  text-align:center;letter-spacing:.2px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}
.mini{
  padding:9px 10px;border-radius:14px;
  background:rgba(155,107,255,.09);border:1.5px solid rgba(155,107,255,.20);
}
.mini b{display:block;font-size:11.5px;font-weight:900;color:#7A5CE0;margin-bottom:3px}
.mini span{display:block;font-size:11px;font-weight:700;color:var(--ink-2);line-height:1.55}
.tip{
  display:flex;gap:8px;align-items:flex-start;
  margin:9px 0;padding:9px 11px;border-radius:14px;
  background:var(--gold-soft);border-left:4px solid var(--gold);
  font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.68;
}
.tip .i{flex:0 0 auto;font-size:12px;line-height:1.4}
.tip b{color:var(--ink);font-weight:900}
.tip.ok{background:rgba(46,211,168,.13);border-left-color:var(--neon)}
.tip.fun{background:rgba(255,107,138,.11);border-left-color:var(--brand)}

/* ==========================================================================
   答题页
   ========================================================================== */
.quiz-top{
  flex:0 0 auto;padding:8px 18px 12px;display:flex;align-items:center;gap:11px;
}
.prog{
  flex:1 1 auto;height:10px;border-radius:5px;overflow:hidden;
  background:#fff;border:2px solid var(--stk-2);
  box-shadow:inset 0 1px 3px rgba(59,46,88,.07);
}
.prog i{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#5FE0B8,#FFD75E);
  transition:width .35s cubic-bezier(.2,.8,.3,1);
}
.hearts{display:flex;gap:3px;flex:0 0 auto;font-size:14px;line-height:1}
.hearts .h{transition:opacity .3s, transform .3s}
.hearts .h.gone{opacity:.24;transform:scale(.86)}

.qbox{
  padding:15px 16px;border-radius:var(--r-lg);
  background:#fff;border:2.5px solid var(--stk-2);
  box-shadow:0 4px 0 var(--stk-2), 0 12px 26px rgba(59,46,88,.09);
}
.q-index{
  font-size:10.5px;font-weight:900;letter-spacing:1.2px;color:#0E9B74;
  margin-bottom:7px;text-transform:uppercase;
}
.q-stem{font-size:16px;font-weight:900;line-height:1.72;letter-spacing:.2px;color:var(--ink)}
.q-stem b{color:#D22B5E}

/* 选项 */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opt{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 14px;border-radius:17px;cursor:pointer;text-align:left;
  font-family:inherit;font-size:13.5px;font-weight:800;color:var(--ink);
  background:#fff;border:2.5px solid var(--stk-2);
  box-shadow:0 3px 0 var(--stk-2);
  transition:transform .13s, border-color .13s, box-shadow .13s, background .13s;
}
.opt:active{transform:translateY(3px);box-shadow:0 0 0 var(--stk-2)}
.opt .k{
  width:27px;height:27px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:900;letter-spacing:.5px;
  background:rgba(155,107,255,.14);color:#7A5CE0;
  border:1.5px solid rgba(155,107,255,.26);
}
.opt .v{flex:1 1 auto;min-width:0;line-height:1.5}
.opt.pick{border-color:var(--neon);background:rgba(46,211,168,.10);box-shadow:0 3px 0 #0E9B74}
.opt.pick .k{background:var(--neon);color:#fff;border-color:var(--neon)}
.opt.right{border-color:var(--ok);background:rgba(46,211,168,.16);box-shadow:0 3px 0 var(--ok)}
.opt.right .k{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{
  border-color:var(--no);background:rgba(232,56,110,.11);box-shadow:0 3px 0 var(--no);
  animation:shake .34s ease-in-out;
}
.opt.wrong .k{background:var(--no);color:#fff;border-color:var(--no)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-6px)}
  55%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
}
.opt[disabled]{cursor:default}
.opt[disabled]:not(.right):not(.wrong){opacity:.5}

/* 数字键盘 */
.padwrap{margin-top:14px}
.padview{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:58px;border-radius:17px;margin-bottom:11px;
  background:#fff;border:2.5px dashed rgba(46,211,168,.55);
  box-shadow:inset 0 2px 6px rgba(59,46,88,.05);
}
.padview .pv{
  font-size:24px;font-weight:900;letter-spacing:2px;color:#0B7A5C;
  font-variant-numeric:tabular-nums;
}
.padview .pv.empty{font-size:13px;letter-spacing:0;color:var(--ink-3);font-weight:800}
.padview .unit{font-size:14px;font-weight:900;color:var(--ink-2);margin-left:2px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pad button{
  height:50px;border-radius:16px;cursor:pointer;font-family:inherit;font-size:19px;font-weight:900;
  color:var(--ink);
  background:#fff;border:2.5px solid var(--stk-2);
  box-shadow:0 3px 0 var(--stk-2);
  transition:transform .1s, box-shadow .1s;
}
.pad button:active{transform:translateY(3px);box-shadow:0 0 0 var(--stk-2)}
.pad button.fn{font-size:13.5px;color:var(--no);border-color:rgba(232,56,110,.30)}
.pad button.ok{
  font-size:14.5px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#5FE0B8,#22C08F);
  border-color:#0E9B74;
  box-shadow:0 3px 0 #0E9B74;
}
.pad button.ok:active{box-shadow:0 0 0 #0E9B74}

/* 解析 */
.explain{
  margin-top:14px;padding:13px 14px;border-radius:17px;
  background:#fff;border:2.5px solid var(--stk-2);border-left:5px solid var(--neon);
  box-shadow:0 3px 0 var(--stk-2), 0 10px 22px rgba(59,46,88,.08);
  animation:riseIn .34s cubic-bezier(.2,.9,.3,1) both;
}
.ex-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;margin-bottom:8px}
.ex-h .dot{
  width:21px;height:21px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
}
.ex-b{font-size:12.5px;line-height:1.82;color:var(--ink-2);font-weight:700}
.ex-b b{color:var(--ink);font-weight:900}

/* 连击浮层 */
.combo{
  position:absolute;left:50%;top:30%;transform:translate(-50%,0) scale(.7);
  font-size:26px;font-weight:900;letter-spacing:1px;pointer-events:none;
  color:var(--gold);opacity:0;z-index:30;white-space:nowrap;
  text-shadow:0 2px 0 rgba(255,255,255,.85), 0 3px 12px rgba(245,166,35,.5);
}
.combo.show{animation:comboPop .95s cubic-bezier(.2,.9,.3,1) both}
@keyframes comboPop{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  28%{opacity:1;transform:translate(-50%,-6px) scale(1.16)}
  60%{opacity:1;transform:translate(-50%,-10px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(.96)}
}

/* ==========================================================================
   结算页
   ========================================================================== */
.result-wrap{
  flex:1 1 auto;overflow-y:auto;padding:8px 18px 26px;text-align:center;
  scrollbar-width:none;
}
.result-wrap::-webkit-scrollbar{display:none}
.ray{
  width:122px;height:122px;margin:8px auto 0;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 50%, rgba(255,107,138,.20), rgba(155,107,255,.08) 60%, transparent 72%);
}
.ray::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(255,107,138,.42);
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ray .core{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:34px;
  background:#fff;
  border:3px solid #fff;
  box-shadow:0 4px 0 rgba(59,46,88,.14), 0 0 30px rgba(255,107,138,.24);
}
.star-row{display:flex;justify-content:center;gap:6px;margin:12px 0 6px;font-size:36px;line-height:1}
.star-row .big{color:rgba(59,46,88,.14);transition:color .3s, text-shadow .3s, transform .3s;transform:scale(.86)}
.star-row .big.on{
  color:var(--gold);
  text-shadow:0 2px 0 rgba(200,120,0,.22);
  transform:scale(1.06);
}
.res-title{font-size:22px;font-weight:900;letter-spacing:.5px;margin-top:4px}
.res-sub{font-size:12.5px;color:var(--ink-3);font-weight:800;line-height:1.75;margin-top:5px}
.reward{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:16px 0;border-radius:18px;overflow:hidden;
  background:var(--stk-2);border:2.5px solid var(--stk-2);
  box-shadow:0 3px 0 var(--stk-2);
}
.reward .rw{padding:13px 0;background:#fff}
.reward .rw b{
  display:block;font-size:18px;font-weight:900;color:#B26A00;
  font-variant-numeric:tabular-nums;
}
.reward .rw span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:800;margin-top:3px}

/* ==========================================================================
   错题袋
   ========================================================================== */
.wrong-item{
  background:#fff;border:2.5px solid var(--stk-2);border-radius:var(--r-md);
  padding:13px 14px;margin-bottom:11px;
  box-shadow:0 3px 0 var(--stk-2), 0 8px 18px rgba(59,46,88,.07);
}
.wi-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wi-tag{
  height:20px;padding:0 9px;border-radius:8px;display:inline-grid;place-items:center;
  background:var(--brand-soft);color:#D22B5E;font-size:10px;font-weight:900;letter-spacing:.4px;
}
.wi-n{font-size:10.5px;font-weight:800;color:var(--ink-3)}
.wi-q{font-size:13.5px;font-weight:900;line-height:1.7;margin-bottom:9px;color:var(--ink)}
.wi-a{font-size:11.5px;font-weight:800;color:var(--ink-3);margin-bottom:8px;line-height:1.8}
.wi-a .bad{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:7px;
  background:var(--no-soft);color:var(--no);border:1.5px solid rgba(232,56,110,.30);
  text-decoration:line-through;text-decoration-thickness:1.5px;
}
.wi-a .good{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:7px;
  background:var(--ok-soft);color:var(--ok);border:1.5px solid rgba(14,155,116,.32);
}
.wi-x{
  font-size:11.5px;line-height:1.78;color:var(--ink-2);font-weight:700;
  padding:9px 11px;border-radius:13px;
  background:var(--gold-soft);border-left:4px solid rgba(245,166,35,.7);
}
.wi-x b{color:var(--ink)}

/* ==========================================================================
   成长记（报告）
   ========================================================================== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{
  background:#fff;border:2.5px solid var(--stk-2);border-radius:var(--r-md);
  padding:13px 12px;box-shadow:0 3px 0 var(--stk-2), 0 8px 18px rgba(59,46,88,.07);
}
.stat .s-ico{
  width:33px;height:33px;border-radius:12px;display:grid;place-items:center;
  font-size:16px;margin-bottom:9px;border:2px solid var(--stk-2);background:#FFFDF6;
}
.stat b{
  display:block;font-size:21px;font-weight:900;letter-spacing:.3px;
  font-variant-numeric:tabular-nums;margin-bottom:3px;
}
.stat span{font-size:11px;color:var(--ink-3);font-weight:800}
.bars{display:flex;align-items:flex-end;justify-content:space-between;height:118px;gap:8px;padding-top:8px}
.bar-c{flex:1 1 0;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}
.bar{
  width:100%;max-width:26px;border-radius:9px 9px 5px 5px;position:relative;
  background:linear-gradient(180deg,#A992FF,#7A5CE0);
  transition:height .5s cubic-bezier(.2,.8,.3,1);
}
.bar.hi{background:linear-gradient(180deg,#5FE0B8,#0E9B74)}
.bar.low{background:linear-gradient(180deg,rgba(154,144,179,.75),rgba(154,144,179,.35))}
.bar .bv{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:900;color:var(--ink-2);
}
.bar-c .bl{font-size:9.5px;font-weight:800;color:var(--ink-3);margin-top:7px;white-space:nowrap}
.ring-wrap{display:flex;align-items:center;gap:14px}
.ring-txt{flex:1 1 auto;min-width:0}
.ring-txt b{display:block;font-size:13.5px;font-weight:900;margin-bottom:5px}
.ring-txt span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;line-height:1.68}

/* ==========================================================================
   底部导航
   ========================================================================== */
#tabbar{
  flex:0 0 62px;display:flex;align-items:center;
  padding:0 8px 6px;
  background:rgba(255,255,255,.94);
  border-top:2.5px solid var(--stk-2);
  position:relative;z-index:40;
}
#tabbar.hide{display:none}
.tab{
  flex:1 1 0;border:none;background:transparent;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 0;border-radius:15px;color:var(--ink-3);
  transition:color .16s, background .16s;
}
.tab .ti{font-size:19px;line-height:1;position:relative;transition:transform .16s}
.tab .tt{font-size:10.5px;font-weight:900;letter-spacing:.3px}
.tab.on{color:#D22B5E;background:rgba(255,107,138,.11)}
.tab.on .ti{transform:translateY(-1px) scale(1.08)}
.tab .dot{
  position:absolute;top:-4px;right:-9px;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;box-shadow:0 1.5px 0 rgba(150,20,60,.4);
}

/* 底部操作条 */
.foot{
  flex:0 0 auto;padding:11px 18px 20px;
  background:linear-gradient(180deg, rgba(255,249,240,0), rgba(255,249,240,.94) 42%);
}

/* ==========================================================================
   游戏角 · 通用
   ========================================================================== */
.g-top{padding-top:8px}
.g-close{
  width:38px;height:38px;border-radius:14px;cursor:pointer;flex:0 0 auto;
  background:#fff;border:2.5px solid var(--stk-2);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 2px 0 var(--stk-2);
  transition:transform .14s, box-shadow .14s;
}
.g-close:active{transform:translateY(2px);box-shadow:0 0 0 var(--stk-2)}
.g-badge{
  flex:0 0 auto;height:30px;padding:0 12px;border-radius:15px;display:inline-flex;align-items:center;
  background:linear-gradient(135deg,#FFE9A8,#FFD75E);color:#7A4A00;
  font-size:12px;font-weight:900;border:2px solid #fff;
  box-shadow:0 2.5px 0 rgba(200,140,20,.35);
}
.g-hint{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:22px 18px;text-align:center;
  font-size:13px;font-weight:800;color:var(--ink-2);line-height:1.7;
}
.g-hint.small{padding:14px 16px;font-size:12px}
.g-hint .gh-ico{font-size:40px;line-height:1}
.g-hint b{color:var(--ink);font-weight:900}
.g-hint .btn{max-width:210px;margin-top:2px}

.g-ask{padding:2px 0 0;text-align:center}
.g-ask .ga-q{font-size:26px;font-weight:900;letter-spacing:1.5px;color:var(--ink);margin-bottom:10px}
.g-tip{font-size:12.5px;font-weight:800;color:var(--ink-3);margin-bottom:12px}
.g-tip.ok{color:var(--ok)}
.g-tip.no{color:var(--no)}
.g-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-opt{
  height:60px;border-radius:19px;cursor:pointer;font-family:inherit;
  font-size:21px;font-weight:900;color:var(--ink);
  background:#fff;border:2.5px solid var(--stk-2);
  box-shadow:0 4px 0 var(--stk-2);
  transition:transform .12s, box-shadow .12s, border-color .12s, background .12s;
  font-variant-numeric:tabular-nums;
}
.g-opt:active{transform:translateY(4px);box-shadow:0 0 0 var(--stk-2)}
.g-opt.right{border-color:var(--ok);background:rgba(46,211,168,.16);color:#0B7A5C;box-shadow:0 4px 0 var(--ok)}
.g-opt.wrong{border-color:var(--no);background:rgba(232,56,110,.12);color:var(--no);box-shadow:0 4px 0 var(--no);animation:shake .34s ease-in-out}
.g-opt.dim{opacity:.42}
.g-next{margin-top:14px}

/* 结算 */
.g-result{
  margin-top:16px;padding:20px 18px;border-radius:var(--r-lg);text-align:center;
  background:#fff;border:2.5px solid var(--stk-2);
  box-shadow:0 5px 0 var(--stk-2), 0 16px 32px rgba(59,46,88,.10);
}
.g-result .gr-ico{font-size:52px;line-height:1;margin-bottom:8px}
.g-result .gr-t{font-size:19px;font-weight:900;margin-bottom:14px;letter-spacing:.3px}
.g-result .gr-stat{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 4px;font-size:12.5px;font-weight:800;color:var(--ink-3);
  border-bottom:2px dashed var(--stk-2);
}
.g-result .gr-stat:last-of-type{border-bottom:none}
.g-result .gr-stat b{font-size:19px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.g-result .gr-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}

/* ① 口诀转盘 */
.wheel-stage{
  position:relative;width:266px;height:266px;margin:6px auto 20px;
  display:grid;place-items:center;
}
.wheel-pin{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  width:0;height:0;z-index:5;
  border-left:15px solid transparent;border-right:15px solid transparent;
  border-top:26px solid #E8386E;
  filter:drop-shadow(0 2px 0 rgba(150,20,60,.35));
}
.wheel{
  position:relative;width:250px;height:250px;border-radius:50%;
  transition:transform 1.25s cubic-bezier(.18,.72,.12,1);
  background:conic-gradient(
    #FF6B8A 0deg 45deg, #FF9F45 45deg 90deg, #FFC93C 90deg 135deg, #8ED400 135deg 180deg,
    #2ED3A8 180deg 225deg, #4DB8FF 225deg 270deg, #9B6BFF 270deg 315deg, #FF4D8D 315deg 360deg);
  border:6px solid #fff;
  box-shadow:0 6px 0 rgba(59,46,88,.20), 0 18px 36px rgba(59,46,88,.20);
}
.wheel-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;z-index:4;
  border:4px solid rgba(59,46,88,.12);
  box-shadow:0 3px 0 rgba(59,46,88,.14);
}
.wseg{
  position:absolute;transform:translate(-50%,-50%);
  font-size:12px;font-weight:900;color:#fff;letter-spacing:.2px;
  padding:3px 7px;border-radius:9px;white-space:nowrap;
  text-shadow:0 1px 1px rgba(59,46,88,.35);
  background:rgba(255,255,255,.22)!important;
  z-index:3;
}

/* ② 翻牌配对 */
.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:4px 0 6px}
.mcard{
  aspect-ratio:1/1;border-radius:16px;cursor:pointer;font-family:inherit;padding:0;
  background:linear-gradient(150deg,#FF8FA8,#FF5F80);
  border:3px solid #fff;
  box-shadow:0 4px 0 rgba(210,43,94,.55), 0 8px 16px rgba(59,46,88,.14);
  display:grid;place-items:center;
  transition:transform .16s, box-shadow .16s, background .16s;
}
.mcard:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(210,43,94,.55)}
.mcard .mc-in{
  font-size:16px;font-weight:900;color:#fff;
  transition:opacity .18s, transform .18s;
}
.mcard.flip{
  background:#fff;border-color:var(--stk-2);
  box-shadow:0 4px 0 var(--stk-2), 0 8px 16px rgba(59,46,88,.10);
}
.mcard.flip .mc-in{color:var(--ink);font-size:14.5px;animation:flipIn .3s cubic-bezier(.2,.9,.3,1) both}
.mcard.ok{
  background:linear-gradient(150deg,#B9F5E0,#8EE8C8);
  border-color:#0E9B74;
  box-shadow:0 4px 0 #0E9B74, 0 8px 16px rgba(14,155,116,.18);
  pointer-events:none;
}
.mcard.ok .mc-in{color:#0B7A5C}
@keyframes flipIn{
  from{opacity:0;transform:rotateY(70deg) scale(.9)}
  to{opacity:1;transform:rotateY(0) scale(1)}
}

/* ==========================================================================
   动效
   ========================================================================== */
.fade-in{animation:riseIn .48s cubic-bezier(.2,.9,.3,1) both}
@keyframes riseIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.stagger > *{animation:riseIn .46s cubic-bezier(.2,.9,.3,1) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}
.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}
.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s}
.stagger > *:nth-child(8){animation-delay:.30s}
.stagger > *:nth-child(9){animation-delay:.34s}
.stagger > *:nth-child(10){animation-delay:.38s}

#fx{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti{position:fixed;width:9px;height:9px;will-change:transform}
.float-xp{
  position:fixed;font-size:19px;font-weight:900;pointer-events:none;z-index:1000;
  animation:floatUp 1.05s cubic-bezier(.2,.9,.3,1) both;
  text-shadow:0 2px 0 rgba(255,255,255,.9), 0 3px 10px rgba(59,46,88,.28);
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,10px) scale(.8)}
  25%{opacity:1;transform:translate(-50%,-4px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-64px) scale(1)}
}

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

/* ==== SHELL-OFF:BEGIN 2026-09-19 ==== */
/* 去掉「手机外壳」：原先这里是 390×844 圆角壳 + 阴影 + 假状态栏
   （9:41 / 5G / 电池），真机上打开 = 手机里再套一个手机，观感很怪。
   现改为铺满可用视口、顶部吃系统安全区。与 9sx4 的方案保持一致。
   ⚠ 桌面预览(≥430px)下 .phone 居中显示，不再有圆角与阴影 —— 有意的。 */
.phone {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  padding-top: calc(8px + env(safe-area-inset-top));
  box-sizing: border-box;
}
.phone::after { display: none; }   /* 灵动岛（math-candy-grade2 为深色胶囊，隐藏） */
.statusbar { display: none; }   /* 假状态栏：真实状态栏由系统绘制，这里腾出来给顶部公告条 */
/* ==== SHELL-OFF:END ==== */

/* ── 教材条：首屏第一行告诉家长「这是哪一册」 ──────────────────────────
   文案由后台「主题设置 → 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}