/* ===========================================================
   数学乐园 · 二年级上册
   =========================================================== */

:root{
  --bg1:#FFF7EE; --bg2:#EEF5FF; --bg3:#FDF0F6;
  --ink:#33383F; --ink2:#7A8391; --ink3:#AAB2BD;
  --card:#FFFFFF; --line:#F0E8DE;

  --coral:#FF7A59; --coral-d:#E45B39;
  --sun:#FFC93C;   --sun-d:#E0A916;
  --mint:#35CBAD;  --mint-d:#1FAD91;
  --sky:#4D96FF;   --sky-d:#2B77E4;
  --grape:#A78BFA; --grape-d:#8666F0;
  --pink:#FF8FB1;  --pink-d:#EE6A92;

  --accent:#FF7A59; --accent-d:#E45B39;
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:11px;
  --shadow:0 12px 28px rgba(120,90,50,.10), 0 2px 6px rgba(120,90,50,.05);
  --shadow-sm:0 4px 10px rgba(120,90,50,.08);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -8%, var(--bg3) 0%, transparent 60%),
    radial-gradient(1000px 700px at 92% 4%, var(--bg2) 0%, transparent 58%),
    var(--bg1);
  background-attachment:fixed;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
b,strong{font-weight:800}

/* ---------- 布局 ---------- */
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:12px;
  padding:14px 20px calc(14px);
  background:rgba(255,252,247,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(240,232,222,.9);
}
.topbar-title{flex:1;font-size:20px;font-weight:900;letter-spacing:.5px}
.icon-btn{
  width:44px;height:44px;border-radius:14px;font-size:21px;
  display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s;
}
.icon-btn:active{transform:scale(.92)}
.stars-badge{
  display:flex;align-items:center;gap:6px;background:#fff;
  padding:8px 15px;border-radius:999px;box-shadow:var(--shadow-sm);
  font-size:17px;font-weight:800;color:var(--sun-d);
}
.stars-badge span{font-size:18px}
.stars-badge.bump{animation:bump .5s}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

.screen{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:22px 20px 70px}

/* ---------- 首页 ---------- */
.hero{
  border-radius:var(--r-xl);padding:26px 28px;margin-bottom:26px;
  background:linear-gradient(120deg,#FFE9D6 0%,#FFD9E4 45%,#DDE9FF 100%);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero::after{
  content:"＋ − × ÷";position:absolute;right:-6px;bottom:-26px;
  font-size:104px;font-weight:900;color:rgba(255,255,255,.5);letter-spacing:-4px;
  pointer-events:none;
}
.hero h1{margin:0 0 8px;font-size:30px;letter-spacing:1px}
.hero p{margin:0;color:#6B6A78;font-weight:600;position:relative;z-index:1}
.hero-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
.pill{
  background:rgba(255,255,255,.82);border-radius:999px;padding:7px 16px;
  font-size:14px;font-weight:800;color:#5A5568;box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.unit-title{
  display:flex;align-items:center;gap:10px;margin:30px 4px 14px;
  font-size:16px;font-weight:900;color:var(--ink2);letter-spacing:1px;
}
.unit-title::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line),transparent)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}

.gcard{
  background:var(--card);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--shadow);text-align:left;position:relative;overflow:hidden;
  transition:transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s;
  display:flex;flex-direction:column;gap:6px;min-height:142px;
  border:1px solid rgba(255,255,255,.9);
}
.gcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--gc,#ddd);
}
.gcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(120,90,50,.14)}
.gcard:active{transform:translateY(-1px) scale(.99)}
.gcard .ge{font-size:34px;line-height:1}
.gcard .gn{font-size:19px;font-weight:900;margin-top:2px}
.gcard .gd{font-size:13.5px;color:var(--ink2);font-weight:600;flex:1}
.gcard .gs{margin-top:6px;font-size:15px;letter-spacing:2px}

/* ---------- 游戏页 ---------- */
.gamehead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.gamehead .ge{font-size:38px}
.gamehead h2{margin:0;font-size:22px}
.gamehead p{margin:0;font-size:13.5px;color:var(--ink2);font-weight:600}

.panel{
  background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:24px;position:relative;
}

.progress{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.progress .dots{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.dot{width:11px;height:11px;border-radius:50%;background:#EDE6DC;transition:all .25s}
.dot.now{background:var(--accent);transform:scale(1.35)}
.dot.ok{background:var(--mint)}
.dot.no{background:var(--pink)}
.progress .cnt{font-size:14px;font-weight:800;color:var(--ink2)}

.stem{font-size:23px;font-weight:900;line-height:1.5;margin:4px 0 16px}
.stem em{font-style:normal;color:var(--accent-d);border-bottom:3px solid var(--accent);padding-bottom:1px}
.stem small{font-size:15px;color:var(--ink2);font-weight:700;display:block;margin-top:6px}

.visual{margin:0 0 20px}
.vis-box{
  background:#FBF8F4;border-radius:var(--r-lg);padding:18px;text-align:center;
  border:1px dashed #E7DDD1;
}
.groups{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.group{
  background:#fff;border:2.5px solid var(--gc,#FFD9C7);border-radius:var(--r-md);
  padding:9px 12px;display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:170px;
  box-shadow:0 3px 0 rgba(0,0,0,.04);
}
.group i{font-style:normal;font-size:27px;line-height:1;display:block}
.emo-row{font-size:32px;letter-spacing:4px;line-height:1.4;word-break:break-all}
.big-num{font-size:44px;font-weight:900;letter-spacing:3px;color:var(--accent-d)}

.hintbar{
  display:flex;align-items:flex-start;gap:9px;background:#FFF7E4;border-radius:var(--r-md);
  padding:12px 15px;margin-bottom:16px;font-size:15.5px;font-weight:700;color:#8A6A1E;
  animation:fadeIn .3s;
}
.hintbar .hi{font-size:19px;line-height:1.3}

/* 答案区 */
.answer-area{margin-top:6px}
.fieldrow{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.field{
  min-width:96px;height:76px;border-radius:18px;background:#FBF8F4;
  border:3px solid #E9E0D4;display:grid;place-items:center;
  font-size:36px;font-weight:900;color:var(--accent-d);position:relative;cursor:pointer;
  transition:all .18s;padding:0 12px;
}
.field.on{border-color:var(--accent);background:#FFF4EE;box-shadow:0 0 0 5px rgba(255,122,89,.14)}
.field.ok{border-color:var(--mint);background:#EAFAF5;color:var(--mint-d)}
.field.no{border-color:var(--pink);background:#FFEEF3;color:var(--pink-d);animation:shake .4s}
.field .lb{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:#fff;padding:1px 9px;border-radius:999px;font-size:12.5px;color:var(--ink2);
  font-weight:800;border:2px solid #EFE6DA;white-space:nowrap}
.field.ph{color:#D9D0C4;font-weight:700;font-size:20px}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-width:390px;margin:0 auto}
.keypad.c4{grid-template-columns:repeat(4,1fr);max-width:470px}
.knum,.kfn{
  height:64px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #EDE4D9, 0 6px 14px rgba(120,90,50,.07);
  font-size:26px;font-weight:900;display:grid;place-items:center;
  transition:transform .1s, box-shadow .1s;user-select:none;
}
.knum{color:var(--ink)}
.kfn{font-size:18px;color:var(--ink2)}
.kfn.ok{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-d)}
.kfn.del{background:#F4EFE9}
.knum:active,.kfn:active{transform:translateY(4px);box-shadow:0 0 0 #EDE4D9}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:13px;max-width:640px;margin:0 auto}
.choice{
  min-height:70px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #EDE4D9, 0 6px 14px rgba(120,90,50,.07);
  font-size:24px;font-weight:900;display:grid;place-items:center;padding:10px 14px;
  transition:transform .1s, box-shadow .1s;user-select:none;line-height:1.3;
}
.choice:active{transform:translateY(4px);box-shadow:0 0 0 #EDE4D9}
.choice.ok{background:#E4F8F1;color:var(--mint-d);box-shadow:0 4px 0 #BEEBDD}
.choice.no{background:#FFEDF2;color:var(--pink-d);box-shadow:0 4px 0 #FBD3DF}

/* 反馈 */
.fb{
  display:flex;align-items:center;gap:12px;border-radius:var(--r-md);
  padding:15px 18px;margin-top:18px;font-weight:800;animation:fadeIn .28s;
}
.fb.good{background:#E8FAF3;color:#127C64}
.fb.bad{background:#FFEFF4;color:#C2416A}
.fb .fbi{font-size:26px}
.fb .fbt{flex:1;font-size:16px}

/* 结果页 */
.result{text-align:center;padding:22px 8px}
.result .re{font-size:74px;line-height:1;animation:pop .55s cubic-bezier(.2,1.6,.4,1)}
.result h2{margin:14px 0 6px;font-size:27px}
.result .rstars{font-size:44px;letter-spacing:8px;margin:14px 0;animation:fadeIn .5s .15s backwards}
.result .rsub{color:var(--ink2);font-weight:700;margin-bottom:24px}
.result .racts{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

.btn{
  height:60px;padding:0 32px;border-radius:20px;font-size:19px;font-weight:900;
  background:var(--accent);color:#fff;box-shadow:0 5px 0 var(--accent-d),0 8px 18px rgba(0,0,0,.10);
  display:inline-grid;place-items:center;transition:transform .1s,box-shadow .1s;
}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--accent-d)}
.btn.ghost{background:#fff;color:var(--ink2);box-shadow:0 5px 0 #EDE4D9,0 8px 18px rgba(0,0,0,.05)}
.btn.ghost:active{box-shadow:0 0 0 #EDE4D9}
.btn.sm{height:48px;padding:0 22px;font-size:16px;border-radius:16px}
.btn.mint{background:var(--mint);box-shadow:0 5px 0 var(--mint-d),0 8px 18px rgba(0,0,0,.10)}
.btn.sky{background:var(--sky);box-shadow:0 5px 0 var(--sky-d),0 8px 18px rgba(0,0,0,.10)}

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

/* ---------- 通用小组件 ---------- */
.basket-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.basket{
  width:112px;min-height:112px;border-radius:20px;background:#FFFDF9;
  border:3px dashed #E4D9CA;padding:9px;display:flex;flex-wrap:wrap;gap:4px;
  align-content:flex-start;justify-content:center;transition:all .18s;cursor:pointer;
}
.basket.hot{border-color:var(--accent);background:#FFF5EF}
.basket i{font-style:normal;font-size:24px;line-height:1;animation:pop .3s}
.basket .bl{width:100%;text-align:center;font-size:12.5px;color:var(--ink3);font-weight:800}

.pile{
  min-height:112px;background:#FFFDF9;border:3px dashed #E4D9CA;border-radius:20px;
  padding:12px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;justify-content:center;
  max-width:520px;margin:0 auto;cursor:pointer;transition:all .18s;
}
.pile i{font-style:normal;font-size:26px;line-height:1;transition:transform .2s}
.pile i.gone{transform:scale(0);opacity:0}
.pile:active{border-color:var(--accent)}

/* 竖式 */
.vcalc{
  display:inline-grid;gap:0;justify-content:center;
  font-size:40px;font-weight:900;padding:10px 26px;
  font-variant-numeric:tabular-nums;
}
.vcalc .vrow{display:grid;grid-template-columns:34px 42px 52px 52px;align-items:center;justify-items:center;height:58px}
.vcalc .vrow.carry{height:38px}
.vcalc .vrow.rule{height:14px}
.vcalc .vrule{height:5px;background:var(--ink);border-radius:3px;width:100%;grid-column:2/5}
.vcalc .cell{width:100%;height:100%;display:grid;place-items:center}
.vcalc .op{color:var(--accent-d)}
.vbox{
  width:46px;height:46px;border-radius:12px;background:#FBF8F4;border:3px solid #E9E0D4;
  display:grid;place-items:center;font-size:26px;font-weight:900;color:var(--accent-d);transition:all .18s;
}
.vbox.on{border-color:var(--accent);background:#FFF4EE;animation:pulse 1.1s infinite}
.vbox.ok{border-color:var(--mint);background:#EAFAF5;color:var(--mint-d);animation:none}
.vbox.no{border-color:var(--pink);background:#FFEEF3;color:var(--pink-d);animation:shake .4s}
.vbox.small{width:38px;height:38px;font-size:20px;border-radius:10px}
.vbox.carrybox{border-style:dashed}
.vbox.blank{visibility:hidden}

/* 计数器 */
.abacus{display:flex;gap:16px;justify-content:center;margin:8px 0 4px}
.rod{display:flex;flex-direction:column;align-items:center;gap:5px}
.rod .beads{display:flex;flex-direction:column;gap:4px;min-height:132px;justify-content:flex-end;
  padding:8px 7px;background:#FFFDF9;border:2.5px solid #EADFD2;border-radius:14px;width:52px}
.rod .beads b{width:36px;height:13px;border-radius:7px;background:var(--accent);display:block;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.rod .rl{font-size:13px;font-weight:900;color:var(--ink2)}
.rod .rd{font-size:20px;font-weight:900;color:var(--accent-d);min-height:24px}

/* 七巧板 */
.tangram-wrap{position:relative;width:100%}
.tangram-wrap svg{width:100%;height:auto;display:block;touch-action:none;user-select:none}
.tg-piece{cursor:grab;transition:filter .2s}
.tg-piece.locked{cursor:default}
.tg-piece.drag{cursor:grabbing;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.tg-frame{fill:#FBF8F4;stroke:#E3D6C6;stroke-width:3;stroke-dasharray:9 8}

/* 方向罗盘 */
.compass{width:230px;height:230px;margin:6px auto}

/* 购物 */
.shelf{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.item{
  background:#FFFDF9;border:3px solid #EFE6DA;border-radius:20px;padding:14px 18px;
  text-align:center;min-width:110px;
}
.item .ie{font-size:40px}
.item .in{font-size:14px;font-weight:800;color:var(--ink2)}
.item .ip{font-size:19px;font-weight:900;color:var(--coral-d)}

.money-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.money{
  min-width:74px;height:56px;border-radius:12px;display:grid;place-items:center;
  font-weight:900;font-size:16px;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.16);
  padding:0 12px;
}
.money.note{background:linear-gradient(135deg,#7BB7F7,#4D96FF)}
.money.coin{background:linear-gradient(135deg,#FFD86B,#E8AE1C);color:#7A5A00}

/* ---------- 动效 ---------- */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,89,.4)}50%{box-shadow:0 0 0 8px rgba(255,122,89,0)}}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.flyer{position:fixed;z-index:200;pointer-events:none;font-size:26px;animation:fly .45s ease-in forwards}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:150;display:none}

.toast{
  position:fixed;left:50%;bottom:44px;transform:translate(-50%,24px);
  background:rgba(51,56,63,.94);color:#fff;padding:12px 26px;border-radius:999px;
  font-weight:800;font-size:16px;opacity:0;pointer-events:none;transition:all .3s;z-index:180;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.modal-mask{
  position:fixed;inset:0;background:rgba(50,45,40,.42);z-index:170;
  display:none;place-items:center;padding:22px;backdrop-filter:blur(3px);
}
.modal-mask.show{display:grid;animation:fadeIn .2s}
.modal-box{
  background:#fff;border-radius:var(--r-xl);padding:26px;max-width:640px;width:100%;
  max-height:84vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.28);
}
.modal-box h3{margin:0 0 14px;font-size:21px}

/* 口诀表 */
.ttable{border-collapse:separate;border-spacing:5px;margin:0 auto;font-size:13.5px}
.ttable td{
  background:#FBF8F4;border-radius:9px;padding:7px 9px;text-align:center;
  font-weight:800;white-space:nowrap;color:var(--ink2);
}
.ttable td b{color:var(--coral-d)}
.ttable td.hl{background:#FFEFE7;color:var(--coral-d);transform:scale(1.06)}
.ttable td.empty{background:#F5F1EA;color:#D6CCBE}

@media (max-width:560px){
  body{font-size:16px}
  .screen{padding:16px 13px 60px}
  .hero{padding:20px}
  .hero h1{font-size:24px}
  .panel{padding:18px 16px;border-radius:24px}
  .stem{font-size:20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .gcard{min-height:120px;padding:15px}
  .gcard .ge{font-size:28px}
  .gcard .gn{font-size:16.5px}
  .gcard .gd{font-size:12px}
  .vcalc{font-size:32px;padding:6px 12px}
  .vcalc .vrow{grid-template-columns:28px 36px 44px 44px;height:50px}
  .vbox{width:40px;height:40px;font-size:22px}
  .basket{width:88px;min-height:96px}
  .keypad{max-width:none}
}

/* ===========================================================
   以下为 JS 游戏引擎配套的组件样式
   =========================================================== */
button,.field,.choice,.knum,.kfn,.mc,.lvl{touch-action:manipulation}
.screen{-webkit-user-select:none;user-select:none}
.c{text-align:center}
.small{font-size:14px;color:var(--ink2);font-weight:600}
.st-on{color:#F5B301}
.st-off{color:#E9E1D6}
.shake{animation:shake .4s}
.big-emo{font-size:72px;text-align:center;line-height:1.2}
.kou{font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif;font-weight:700;color:#8A4B12;letter-spacing:1px}
.qm{color:var(--accent-d)}

/* 首页 */
.hero-sub{font-size:15px;font-weight:800;background:rgba(255,255,255,.85);border-radius:999px;padding:3px 12px;vertical-align:middle;color:var(--coral-d);letter-spacing:0}
.gcard .gs{letter-spacing:1px}
.gnew{font-size:12.5px;font-weight:800;color:var(--ink3);letter-spacing:0}
.home-foot{text-align:center;margin:36px 0 10px}

/* 弹窗 */
.modal-box{position:relative}
.modal-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:12px;background:#F4EFE9;font-size:17px;font-weight:900;color:var(--ink2);z-index:2}
.pnote{font-size:15px;color:var(--ink2);font-weight:600;margin:8px 0}
.plist{margin-top:10px}
.pu{margin:14px 0}
.pu-t{font-weight:900;font-size:15px;margin-bottom:4px;color:var(--ink)}
.pg{font-size:14px;color:#5E5448;margin:4px 0 4px 10px;line-height:1.6}
.pfoot{text-align:right;margin-top:14px}

/* 游戏页头部 */
.gamehead .gh-t{flex:1;min-width:0}

/* 开始页 */
.intro{text-align:center}
.in-emo{font-size:76px;line-height:1;margin-top:4px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.in-name{margin:12px 0 14px;font-size:26px}
.in-points{text-align:left;background:#FFF8EC;border-radius:18px;padding:14px 18px;max-width:560px;margin:0 auto 16px}
.in-pt-t{font-weight:900;color:var(--accent-d);margin-bottom:4px}
.in-points ul{margin:0;padding-left:20px}
.in-points li{margin:5px 0;font-weight:700;color:#5E5448;font-size:16px}
.in-best{font-weight:800;color:var(--ink2);margin-bottom:12px}
.in-best .st-on,.in-best .st-off{font-size:22px}
.in-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.btn.big{height:66px;padding:0 34px;font-size:21px;border-radius:22px}
.btn.grape{background:var(--grape);box-shadow:0 5px 0 var(--grape-d),0 8px 18px rgba(0,0,0,.10)}
.btn.grape:active{box-shadow:0 0 0 var(--grape-d)}
.btn.mint:active{box-shadow:0 0 0 var(--mint-d)}
.btn.sky:active{box-shadow:0 0 0 var(--sky-d)}
.pulse{animation:pulseBtn 1.7s infinite}
@keyframes pulseBtn{0%,100%{box-shadow:0 5px 0 #EDE4D9,0 0 0 0 rgba(255,122,89,.35)}50%{box-shadow:0 5px 0 #EDE4D9,0 0 0 12px rgba(255,122,89,0)}}

/* 知识卡 */
.learn .lc-top{display:flex;align-items:center;gap:12px;margin-bottom:4px;padding-right:44px}
.panel.learn .lc-top{padding-right:0}
.lc-tag{background:#FFF1E8;color:var(--accent-d);font-weight:900;border-radius:999px;padding:4px 13px;font-size:14px;white-space:nowrap}
.lc-steps{flex:1;display:flex;gap:6px;align-items:center}
.lc-steps i{width:8px;height:8px;border-radius:5px;background:#EDE6DC;transition:all .25s}
.lc-steps i.on{background:var(--accent);width:22px}
.lc-title{font-size:24px;margin:12px 0 10px}
.lc-body{font-size:17.5px;font-weight:600;line-height:1.75}
.lc-body p{margin:8px 0}
.lc-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:10px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.kcard{background:#FFFDF9;border:2px solid #F1E8DC;border-radius:18px;padding:12px 14px}
.kcard p{margin:8px 0 0}
.kcard .vis-box{padding:10px}
.kcard .groups{gap:8px}
.kcard .group i{font-size:22px}
.bub{display:block;background:#EEF5FF;color:#2F5EA8;border-radius:16px;padding:10px 14px;margin:10px 0;font-weight:700}
.kp{background:#FFF7E4;border-left:6px solid var(--sun);border-radius:12px;padding:12px 14px;margin:14px 0 4px;color:#7A5B12;font-weight:700}
.eqbig{font-size:32px;font-weight:900;text-align:center;margin:12px 0;letter-spacing:1px}
.big-eq{display:inline-block;font-size:34px;margin-top:8px;letter-spacing:1px}
.parts{display:flex;justify-content:center;gap:10px;margin:12px 0;flex-wrap:wrap}
.parts>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.parts b{font-size:32px;line-height:1.2}
.parts span{font-size:12.5px;color:var(--accent-d);font-weight:800;background:#FFF1E8;border-radius:999px;padding:1px 8px;min-height:20px}
.parts span.e{background:none}
.fbx .parts b{font-size:24px}
.parts-inline{font-weight:800}
.plus-x{text-align:center;height:110px}
.plus-x span{display:inline-block;font-size:92px;font-weight:900;color:var(--accent);line-height:110px;animation:plusx 2.6s ease-in-out infinite}
@keyframes plusx{0%,25%{transform:rotate(0)}50%,80%{transform:rotate(45deg)}100%{transform:rotate(0)}}
.ktable{border-collapse:separate;border-spacing:0;margin:10px auto;background:#FFFDF9;border:2px solid #F1E8DC;border-radius:14px;overflow:hidden;font-size:16px}
.ktable td,.ktable th{padding:7px 11px;border-bottom:1px solid #F3EBDF;text-align:left}
.ktable tr:last-child td,.ktable tr:last-child th{border-bottom:0}
.ktable.c td{text-align:center}
.ktable th{color:var(--ink2);font-size:14px;background:#FBF6EF;white-space:nowrap}
.ktable .dim{color:var(--ink3)}
.kou-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.kou-list span{background:#FFF4E6;border-radius:10px;padding:5px 11px;font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif;font-weight:700;color:#8A4B12;font-size:17px}
.tt-wrap{overflow-x:auto;padding:4px 0}
.ttable td[data-a]{cursor:pointer;font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif;font-size:15px;transition:all .15s}
.ttable td.hl{background:var(--accent);color:#fff}
.tt-detail{text-align:center;font-size:18px;font-weight:800;min-height:34px;margin:10px 0}
.howto{padding-left:0;list-style:none;margin:6px 0}
.howto li{background:#FFFDF9;border-radius:14px;padding:10px 14px;margin:8px 0;border:2px solid #F1E8DC}

/* 题目 */
.qbox{animation:fadeIn .3s}
.qtag{display:inline-block;font-size:13px;font-weight:800;color:var(--accent-d);background:#FFF1E8;border-radius:999px;padding:3px 12px;margin-bottom:6px}
.stem-row{display:flex;gap:10px;align-items:flex-start}
.stem-row .stem{flex:1;margin-top:2px;min-width:0}
.speak{flex:none;width:46px;height:46px;border-radius:15px;background:#fff;box-shadow:var(--shadow-sm);font-size:20px;display:grid;place-items:center}
.speak.sm{width:38px;height:38px;font-size:17px;border-radius:12px}
.speak:active{transform:scale(.92)}
.answer-area.gated{display:none !important}
.ungate{animation:fadeIn .35s}
.qbox.locked .keypad{opacity:.4;pointer-events:none}
.qbox.locked .choice,.qbox.locked .mbtn,.qbox.locked .pm,.qbox.locked .mc.drop{pointer-events:none}
.dot.half{background:var(--sun)}
.fb{flex-wrap:wrap}
.fbx{font-weight:700;font-size:15.5px;margin-top:4px;line-height:1.75;opacity:.95}
.fb-next{margin-left:auto}
.eq{margin-bottom:4px}
.eq .fieldrow{margin-bottom:14px}
.eq.chain{width:max-content;max-width:100%;margin:0 auto 6px}
.eq.chain .fieldrow{justify-content:flex-start;margin-bottom:10px}
.eqt{font-size:30px;font-weight:900;color:var(--ink);white-space:nowrap}
.eqt .kou{font-size:32px}
.field .fv{pointer-events:none}
.field.sm{min-width:70px;height:62px;font-size:28px;border-radius:15px;padding:0 8px}
.field.opf{min-width:62px;width:62px;height:62px;border-radius:50%;padding:0;border-style:dashed;color:var(--sky-d);font-size:32px}
.field.opf.ph{font-size:24px;color:#B9C7DA}
.field.rv{border-color:var(--mint);border-style:dashed;background:#F0FBF7;color:var(--mint-d)}
.field .lb{top:-12px}
.choices.wide{grid-template-columns:1fr;max-width:540px}
.choices.wide .choice{font-size:20px;min-height:62px}
.choices.sym .choice{font-size:38px}
.choices.dir{grid-template-columns:repeat(4,1fr);max-width:540px}
.choices.dir .choice{font-size:30px}
.choice .kou{font-size:22px}
.choice:disabled{cursor:default}

/* 分组图 */
.arr{display:inline-grid;gap:6px 10px;font-size:28px;line-height:1}
.arr i{font-style:normal}
.groups.circled .group{border-radius:999px;border-style:dashed;padding:9px 16px}
.mini{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mini span{background:#FBF8F4;border:2px dashed #E5DACB;border-radius:12px;padding:4px 8px;font-size:22px;letter-spacing:1px;line-height:1.3}
.choice .mini span{font-size:20px}
.split-demo{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.sd{background:#fff;border:2px solid #EFE6DA;border-radius:16px;padding:10px;text-align:center}
.sd.ok{border-color:var(--mint);background:#EFFBF6}
.sd-t{font-size:14px;color:var(--ink2);margin-top:6px;font-weight:700}

/* 分一分组件 */
.share-tip{font-size:14.5px;color:var(--ink2);font-weight:800;margin-bottom:10px}
.share .pile{margin-bottom:14px;min-height:74px}
.pile.pick i{cursor:pointer;border-radius:10px;padding:2px}
.pile.pick i.sel{background:#FFE3D6;box-shadow:0 0 0 3px var(--accent) inset;transform:scale(1.1)}
.pile i.left{background:#FFE7EF;border-radius:10px;padding:2px;box-shadow:0 0 0 3px var(--pink) inset}
.bk{display:flex;flex-direction:column;align-items:center;gap:4px}
.bk .who{font-size:36px;cursor:pointer;line-height:1.1}
.bk .who.sm{font-size:13px;font-weight:800;color:var(--ink2);cursor:default}
.bk .basket{width:118px}
.basket.grp{border-style:solid;border-color:var(--accent);background:#FFF5EF;width:auto;min-width:80px;min-height:58px;cursor:default;border-radius:999px;padding:8px 14px;align-content:center}
.share-tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.share-status{margin-top:10px;font-weight:800;font-size:15.5px;color:var(--ink2)}
.share-status.good{color:#127C64}
.share-status.warn{color:#C2416A}
.share-done .share-tools{display:none}
.share-done .basket{cursor:default}
.demo-share{text-align:center}
.demo-share .pile{min-height:60px;margin-bottom:12px;cursor:default}
.left-over{display:inline-flex;flex-direction:column;align-items:center;margin-top:12px;font-size:27px;padding:8px 12px;border:2.5px dashed var(--pink);border-radius:16px;background:#FFF1F5}
.left-over small{font-size:12px;font-weight:800;color:var(--pink-d)}

/* 平面图、方向 */
.map{position:relative;display:inline-block;padding:28px 12px 8px}
.map-n{position:absolute;right:4px;top:0;font-weight:900;color:var(--sky-d);display:flex;flex-direction:column;align-items:center;line-height:1;font-size:15px}
.map-n span{font-size:18px}
.map-grid{display:grid;grid-template-columns:repeat(3,92px);grid-template-rows:repeat(3,92px);gap:8px}
.mc{background:#fff;border:2.5px solid #EFE6DA;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;line-height:1.1;transition:all .15s}
.mc small{font-size:12.5px;font-weight:800;color:var(--ink2);margin-top:4px}
.mc.center{background:#FFF4E6;border-color:#F5C79A}
.mc.void{background:transparent;border:2px dashed #F0E8DE}
.mc.drop{border-style:dashed;border-color:var(--sky);cursor:pointer;background:#F3F8FF}
.mc.drop .q{color:#9DBCEB;font-size:28px;font-weight:900}
.mc.good{border-style:solid;border-color:var(--mint);background:#EAFAF5}
.mc.bad{border-color:var(--pink);background:#FFEEF3;animation:shake .4s}
.route-grid{display:grid;grid-template-columns:repeat(5,54px);grid-template-rows:repeat(5,54px);border:2px solid #E3D6C6;border-radius:12px;overflow:hidden;background:#fff}
.route-grid div{border:1px solid #F0E8DE;display:grid;place-items:center;font-size:28px}
.route-grid .me{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.compass{display:block}
.cp-ring{fill:#FFFDF9;stroke:#E6DACB;stroke-width:3}
.cp-in{fill:none;stroke:#F1E8DC;stroke-width:2;stroke-dasharray:4 5}
.cp-line{stroke:#EFE5D8;stroke-width:2}
.cp-t{font-size:25px;font-weight:900;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.cp-t.on{fill:var(--accent-d)}
.cp-arrow{fill:var(--accent);opacity:.9}
.cp-me{font-size:34px;text-anchor:middle;dominant-baseline:central}
.sun-scene{position:relative;width:260px;height:236px;margin:0 auto}
.ss-sun{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:46px;text-align:center;line-height:1}
.ss-sun small{display:block;font-size:12px;font-weight:800;color:#D98A0B;margin-top:2px}
.ss-front{position:absolute;top:78px;left:50%;transform:translateX(-50%);font-weight:900;color:var(--coral-d);white-space:nowrap}
.ss-row{position:absolute;top:112px;left:0;right:0;display:flex;align-items:center;justify-content:space-between}
.ss-me{width:62px;height:62px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:22px;display:grid;place-items:center;box-shadow:0 4px 0 var(--accent-d)}
.ss-l,.ss-r{font-size:20px;font-weight:900;color:var(--sky-d);background:#EEF5FF;border-radius:12px;padding:6px 14px}
.ss-back{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-weight:900;color:var(--ink2);white-space:nowrap}
.turn-out{text-align:center;font-weight:800;margin:10px 0;font-size:17px}

/* 计数器、三位数 */
.rod .beads b{background:var(--bc,var(--accent))}
.abacus.edit .rod{gap:6px}
.abacus.edit .beads{cursor:pointer}
.pm{width:48px;height:40px;border-radius:12px;background:#fff;box-shadow:0 3px 0 #EDE4D9;font-size:22px;font-weight:900;color:var(--bc)}
.pm.minus{color:var(--ink2)}
.pm:active{transform:translateY(3px);box-shadow:none}
.cnt-read{margin-top:10px;font-size:20px;font-weight:800}
.nline{width:100%;max-width:440px;display:block;margin:0 auto}
.nl-axis{stroke:var(--ink);stroke-width:3}
.nl-tick{stroke:var(--ink2);stroke-width:2}
.nl-t{font-size:14px;font-weight:800;fill:var(--ink2);text-anchor:middle}
.nl-mark{fill:var(--accent)}
.nl-n{font-size:13px;font-weight:900;fill:var(--accent-d);text-anchor:middle}
.card-d{display:inline-grid;place-items:center;width:40px;height:50px;border-radius:10px;background:#fff;border:2.5px solid var(--accent);font-weight:900;font-size:26px;color:var(--accent-d);margin:0 2px;box-shadow:0 3px 0 rgba(0,0,0,.06);vertical-align:middle}
.cmp-demo{display:flex;justify-content:center;gap:14px;font-size:34px;font-weight:900;margin-top:10px}
.cmp-demo b{color:var(--accent-d)}

/* 小方块（口算） */
.blocks{display:flex;gap:4px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.bar10{width:14px;height:140px;border-radius:3px;background:repeating-linear-gradient(to bottom,#FF9E7A 0 12px,#fff 12px 14px);border:1px solid #E98A66;display:block}
.ones{display:grid;grid-template-columns:repeat(2,14px);gap:2px;align-content:end}
.ones i{width:14px;height:12px;background:#FFC27A;border:1px solid #E7A254;border-radius:2px;display:block}
.blk-eq{display:flex;align-items:flex-end;justify-content:center;gap:16px;flex-wrap:wrap}
.blk{display:flex;flex-direction:column;align-items:center;gap:6px}
.blk-n{font-size:22px;font-weight:900}
.blk-op{font-size:34px;font-weight:900;align-self:center;color:var(--accent-d)}
.chain-demo{font-size:24px;font-weight:800;line-height:1.7;width:max-content;margin:10px auto;background:#FFFDF9;border-radius:14px;padding:10px 20px;border:2px dashed #EADFD1}

/* 9 的口诀：手指 */
.hands{display:flex;justify-content:center;gap:26px}
.hand{display:flex;gap:6px;align-items:flex-end}
.fg{width:22px;height:74px;border-radius:12px 12px 8px 8px;background:#FFE1C6;border:2px solid #F0B98A;cursor:pointer;transition:all .2s;display:block}
.hand .fg:nth-child(1),.hand:last-child .fg:nth-child(5){height:56px}
.fg.down{height:30px !important;background:#FF9E7A;border-color:#E27552}
.fg.l{background:#CFE3FF;border-color:#8DB6F2}
.fg.r{background:#FFE7A8;border-color:#EFC45A}
.nine-out{text-align:center;font-weight:800;margin:10px 0;min-height:54px}
.tl{color:#2B77E4}
.tr{color:#D98A0B}

/* 人民币 */
.money.n100{background:linear-gradient(135deg,#F77B7B,#D93A3A)}
.money.n50{background:linear-gradient(135deg,#6FD3A8,#2E9E6E)}
.money.n20{background:linear-gradient(135deg,#D9A273,#A8683A)}
.money.n10{background:linear-gradient(135deg,#7BB7F7,#3D7FE0)}
.money.n5{background:linear-gradient(135deg,#C39BF0,#8E5ED8)}
.money.coin{border-radius:50%;min-width:56px;width:56px;padding:0;font-size:14px}
.money.c1y{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9CED6 60%,#9AA2AE);color:#4B5563}
.money.c5j{background:radial-gradient(circle at 35% 30%,#FFF3C4,#E8B730 60%,#B98A10);color:#6B4E00}
.money.c1j{width:46px;min-width:46px;height:46px;background:radial-gradient(circle at 35% 30%,#FFFFFF,#D5DAE1 60%,#A7AFBA);color:#4B5563;font-size:13px}
.money-row{align-items:center}
.money-row.big .money{transform:scale(1.4);margin:16px 26px}
.money-row.mini{gap:4px;margin:0;display:inline-flex}
.money-row.mini .money{min-width:46px;height:36px;font-size:12px;border-radius:9px;box-shadow:0 2px 0 rgba(0,0,0,.16);padding:0 6px}
.money-row.mini .money.coin{width:36px;min-width:36px;padding:0}
.money-row.mini .money.c1j{width:30px;min-width:30px;height:30px}
.mbtn{padding:0;border-radius:14px;transition:transform .1s}
.mbtn:active{transform:scale(.92)}
.tray{min-height:74px;background:#FFFDF9;border:3px dashed #E4D9CA;border-radius:18px;padding:8px;margin:6px 0 10px}
.tray-empty{color:var(--ink3);font-weight:800}
.pay-t{text-align:left;font-weight:900;color:var(--ink2);font-size:15px;margin-top:4px}
.pay-hint{font-weight:700;font-size:12.5px;color:var(--ink3)}
.eqs{font-size:28px;font-weight:900;align-self:center;color:var(--ink2)}
.ptag{display:inline-block;background:#FFF;border:2px solid #F2C94C;border-radius:8px;padding:0 10px;color:#C2410C;font-weight:900;box-shadow:0 2px 0 #F2C94C}
.itag{font-size:12px;font-weight:800;color:var(--ink3)}
.shelf{margin-bottom:4px}

/* 七巧板 */
.tg-map-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.tg-map-h h3{margin:0;font-size:21px}
.tg-map-c{font-weight:800;color:var(--ink2);font-size:14px}
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.lvl{background:#FFFDF9;border:2.5px solid #F0E6DA;border-radius:20px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .15s;color:#E3D7C6}
.lvl:active{transform:scale(.97)}
.lvl.done{border-color:#BFEBDD;background:#F5FDF9}
.lvl.next{border-color:var(--accent);animation:pulseLv 1.8s infinite}
@keyframes pulseLv{0%,100%{box-shadow:0 0 0 0 rgba(255,127,166,.35)}50%{box-shadow:0 0 0 9px rgba(255,127,166,0)}}
.lv-pic{height:76px;display:grid;place-items:center;width:100%}
.lv-svg{max-height:74px;max-width:100%;height:74px}
.lv-emo{font-size:46px}
.lv-n{font-weight:900;font-size:15px;color:var(--ink)}
.lv-p{font-size:13px;color:var(--ink2);font-weight:700}
.lv-s{font-size:14px;letter-spacing:1px}
.tg-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tg-title{flex:1;font-weight:900;font-size:19px}
.tg-pc{font-size:18px;letter-spacing:1px;color:var(--ink2)}
.tg-tip{font-weight:800;color:var(--ink2);margin-bottom:8px}
.tg-svg{width:100%;height:auto;max-height:calc(100vh - 280px);min-height:240px;display:block;touch-action:none;-webkit-user-select:none;user-select:none}
.tg-target polygon{fill:#E9DFD0;stroke:#E9DFD0;stroke-width:2;stroke-linejoin:round}
.tg-lines polygon{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:6 5}
.tg-tray-t{font-size:14px;font-weight:800;fill:#C9B9A4}
.tg-piece polygon{transform-box:fill-box;transform-origin:center}
.tg-piece.sel polygon{stroke-width:4;filter:drop-shadow(0 0 6px rgba(0,0,0,.25))}
.tg-piece.snap polygon{animation:snapIn .35s}
@keyframes snapIn{0%{transform:scale(1.1)}100%{transform:scale(1)}}
.tg-num{font-size:20px;font-weight:900;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:3px}
.tg-svg.won .tg-num{opacity:0;transition:opacity .4s}
.tg-tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.tg-help{text-align:center;font-size:13.5px;color:var(--ink2);font-weight:700;margin-top:10px}
.tg-win{text-align:center;font-size:24px;font-weight:900;margin-top:14px}
.tg-done .rstars{text-align:center;font-size:40px;letter-spacing:6px;margin:6px 0}
.tg-done .rsub{text-align:center;color:var(--ink2);font-weight:700;margin-bottom:10px}
.tg-done .racts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tg-sq{width:200px;display:block;margin:0 auto}
.tg-sq.big{width:230px}
.tg-qbox .tg-sq{width:160px}
.tg-n{font-size:.42px;font-weight:900;fill:#fff;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:.05px}
.tg-learn{margin:6px 0 12px}
.tg-combos{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.tg-combos>div{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:14px;color:var(--ink2)}
.tg-combo{height:70px;width:auto;max-width:130px}
.tg-combos .lv-svg{height:92px;max-height:92px}

@media (max-width:560px){
  .twocol{grid-template-columns:1fr}
  .eqt{font-size:24px}
  .eqt .kou{font-size:25px}
  .field{min-width:70px;height:62px;font-size:28px}
  .field.sm{min-width:54px;height:52px;font-size:22px;border-radius:13px}
  .field.opf{width:52px;min-width:52px;height:52px;font-size:26px}
  .fieldrow{gap:8px}
  .choices.dir{grid-template-columns:repeat(2,1fr)}
  .btn.big{height:58px;font-size:18px;padding:0 24px}
  .map-grid{grid-template-columns:repeat(3,76px);grid-template-rows:repeat(3,76px);gap:6px}
  .mc{font-size:28px;border-radius:15px}
  .mc small{font-size:11px}
  .route-grid{grid-template-columns:repeat(5,46px);grid-template-rows:repeat(5,46px)}
  .route-grid div{font-size:24px}
  .levels{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
  .bar10{height:112px;width:12px;background:repeating-linear-gradient(to bottom,#FF9E7A 0 9.6px,#fff 9.6px 11.2px)}
  .ones{grid-template-columns:repeat(2,12px)}
  .ones i{width:12px;height:9.6px}
  .money-row.big .money{transform:scale(1.2)}
  .lc-title{font-size:21px}
  .lc-body{font-size:16.5px}
  .in-emo{font-size:64px}
  .speak{width:40px;height:40px;font-size:18px}
  .sun-scene{transform:scale(.9);transform-origin:top center;margin-bottom:-20px}
  .chain-demo{font-size:20px}
  .big-eq{font-size:28px}
}
.rod .beads{min-height:172px}
@media (max-width:560px){ .rod .beads{min-height:160px;width:46px} .rod .beads b{width:32px;height:12px} }
/* 宽屏：算式在左，键盘在右 */
@media (min-width:900px){
  .answer-area.has-kp{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:center;gap:10px 22px}
  .answer-area.has-kp .keypad{max-width:310px;width:100%;margin:0}
  .answer-area.has-kp .eq{margin:0}
  .answer-area.has-kp .eq .fieldrow:last-child{margin-bottom:0}
  .answer-area.has-kp .keypad .knum,.answer-area.has-kp .keypad .kfn{height:58px}
}
.bar10{height:110px;background:repeating-linear-gradient(to bottom,#FF9E7A 0 9.5px,#fff 9.5px 11px)}
.ones i{height:9.5px}
@media (min-width:900px){ .answer-area.has-kp .eq.chain{margin:0 auto} }
.eqt .u{font-size:.66em;color:var(--ink2);font-weight:800;margin-left:2px}
.hero::after{white-space:nowrap}
@media (max-width:560px){ .hero::after{font-size:62px;bottom:-12px;right:-4px} }

/* ===========================================================
   第二版：账号 · 小伙伴 · 玩偶 · 扭蛋 · 思维挑战
   =========================================================== */
.btn.pink{background:var(--pink);box-shadow:0 5px 0 var(--pink-d),0 8px 18px rgba(0,0,0,.10)}
.btn.pink:active{box-shadow:0 0 0 var(--pink-d)}
.btn.sun{background:#F5A524;box-shadow:0 5px 0 #D98A0B,0 8px 18px rgba(0,0,0,.10)}
.btn.sun:active{box-shadow:0 0 0 #D98A0B}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pulse-s{animation:pulseS 1.8s infinite}
@keyframes pulseS{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* 顶栏 */
.topbar{gap:10px}
.sync-badge{font-size:12.5px;font-weight:800;color:#C2416A;white-space:nowrap}
.sync-badge:empty{display:none}
.ticket-badge{color:#C98A06}
.me-btn{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px 0 4px;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);font-weight:800;font-size:15px;color:var(--ink)}
.me-btn .me-fig{width:38px;height:38px;display:block}
.me-btn .me-fig svg{width:100%;height:100%;display:block}
.me-btn:active{transform:scale(.95)}
body:not(.logged) #btnHome,body:not(.logged) #btnDolls,body:not(.logged) .stars-badge,body:not(.logged) #btnMe{display:none!important}
@media (max-width:640px){ .me-btn .me-n{display:none} .me-btn{padding:0 3px} .tb-dolls{display:none} }

/* 登录 */
.login-wrap{min-height:calc(100vh - 150px);display:grid;place-items:center;padding:10px 0}
.login-card{background:#fff;border-radius:32px;box-shadow:var(--shadow);padding:26px 30px 24px;width:100%;max-width:520px;text-align:center;position:relative}
.login-art{display:flex;justify-content:center;gap:4px;margin:-6px 0 4px;height:112px}
.login-art .la{width:100px}
.login-art .la svg{width:100%;height:auto;display:block}
.la1{margin-top:-8px}
.la0 .pl-svg,.la2 .pl-svg{animation:laBob 2.4s ease-in-out infinite}
.la1 .pl-svg{animation:laBob 2.4s ease-in-out .6s infinite}
@keyframes laBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.login-card h1{margin:4px 0 2px;font-size:30px;letter-spacing:2px}
.login-sub{margin:0 0 16px;color:var(--ink2);font-weight:700}
.login-tabs{display:flex;background:#F6F0E8;border-radius:16px;padding:4px;margin-bottom:16px}
.lt{flex:1;height:44px;border-radius:12px;font-weight:900;font-size:16px;color:var(--ink2)}
.lt.on{background:#fff;color:var(--accent-d);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.login-form{text-align:left}
.login-form label,.pf-row{display:block;margin-bottom:12px}
.login-form label span,.pf-row span{display:block;font-size:14px;font-weight:800;color:var(--ink2);margin:0 0 5px 4px}
.login-form input,.pf-row input{width:100%;height:52px;border-radius:16px;border:2.5px solid #EDE3D6;background:#FFFCF8;padding:0 16px;font-size:18px;font-weight:700;font-family:inherit;color:var(--ink);outline:none;transition:border-color .15s;-webkit-user-select:text;user-select:text}
.login-form input:focus,.pf-row input:focus{border-color:var(--accent);background:#fff}
.login-form .btn{width:100%;margin-top:6px}
.login-err{min-height:22px;color:#C2416A;font-weight:800;font-size:15px;margin:2px 4px 8px}
.login-note{margin:14px 0 0;font-size:13.5px;color:var(--ink3);font-weight:700}
.starter{margin:4px 0 6px}
.starter-t{font-size:14px;font-weight:800;color:var(--ink2);margin:0 0 8px 4px}
.starter-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st-pick{background:#FFFCF8;border:3px solid #EFE6DA;border-radius:18px;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;transition:all .15s}
.st-pick svg{width:78px;height:auto}
.st-pick b{font-size:15px}
.st-pick small{font-size:12px;color:var(--ink3);font-weight:800}
.st-pick.on{border-color:var(--accent);background:#FFF4EE;transform:translateY(-3px);box-shadow:0 6px 14px rgba(255,122,89,.18)}

/* 玩偶动画 */
.pl-svg{overflow:visible}
.pl-svg .pl-body,.pl-svg .pl-eyes,.pl-svg .pl-arm,.pl-svg .pl-spout{transform-box:fill-box}
.pl-svg.idle .pl-body{animation:plBreathe 2.8s ease-in-out infinite;transform-origin:50% 100%}
.pl-svg.idle .pl-eyes{animation:plBlink 4.6s infinite;transform-origin:50% 50%}
.pl-svg.idle .pl-spout{animation:plSpout 1.6s ease-in-out infinite;transform-origin:50% 100%}
.pl-svg.sil{filter:brightness(0) opacity(.14)}
@keyframes plBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.035)}}
@keyframes plBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes plSpout{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
.hop{animation:plHop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes plHop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-22%) scale(.95,1.06)}60%{transform:translateY(0) scale(1.08,.92)}100%{transform:translateY(0) scale(1)}}
.shake{animation:plShake .55s}
@keyframes plShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.dance{animation:plDance 1.1s ease-in-out 2}
@keyframes plDance{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-10deg) translateY(-8%)}50%{transform:rotate(0) translateY(0)}75%{transform:rotate(10deg) translateY(-8%)}}
.field.shake{animation:shake .4s}

/* 小伙伴 + 对话气泡 */
.pal{position:relative;display:inline-block}
.pal-fig{width:64px;cursor:pointer;transform-origin:50% 100%}
.pal-fig svg{width:100%;height:auto;display:block}
.pal.big .pal-fig{width:150px}
.pal-bub{position:absolute;right:calc(100% + 8px);top:4px;background:#fff;border:2.5px solid #F1E3D3;color:var(--ink);font-weight:900;font-size:15px;line-height:1.35;padding:8px 13px;border-radius:16px;white-space:nowrap;box-shadow:0 6px 16px rgba(120,90,50,.12);opacity:0;transform:scale(.6) translateX(10px);transform-origin:100% 50%;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:5}
.pal-bub::after{content:"";position:absolute;right:-9px;top:14px;border:8px solid transparent;border-left-color:#fff;border-right:0}
.pal-bub.show{opacity:1;transform:none}
.pal.big .pal-bub{right:auto;left:50%;top:-12px;transform:translate(-50%,-100%) scale(.6);transform-origin:50% 100%;white-space:normal;width:max-content;max-width:230px;text-align:center}
.pal.big .pal-bub.show{transform:translate(-50%,-100%)}
.pal.big .pal-bub::after{right:auto;left:50%;top:auto;bottom:-9px;margin-left:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}

/* 首页 */
.hero2{display:flex;align-items:center;gap:18px}
.hero2 .hero-main{flex:1;min-width:0;position:relative;z-index:1}
.hero-pal{flex:none;width:170px;display:flex;justify-content:center;align-items:flex-end;padding-top:40px;position:relative;z-index:2}
.hero-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill.gold{background:#FFF3C4;color:#9A6A00}
.gchal{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:800;border-radius:999px;padding:1px 8px;vertical-align:middle;letter-spacing:0}
.gchal.open{background:#EFE9FF;color:#6D4FD8;animation:pulseS 1.8s infinite}
.gchal.done{background:#EFE9FF;color:#6D4FD8}
.gchal.done .st-on,.gchal.done .st-off{font-size:11px}
.gchal.lock{background:#F4F0EA;color:var(--ink3)}
@media (max-width:640px){ .hero2{flex-direction:column-reverse;align-items:stretch} .hero-pal{width:auto;padding-top:34px;margin-bottom:-6px} .pal.big .pal-fig{width:112px} }

/* 游戏开始页：思维挑战入口 */
.in-chal{max-width:560px;margin:20px auto 0;border-radius:22px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 16px;text-align:left;background:linear-gradient(120deg,#F3EEFF,#EAF3FF);border:2px solid #E2D8FF}
.in-chal .ic-t{font-weight:900;font-size:18px;color:#5B3FC4}
.in-chal .ic-d{grid-column:1;font-size:14px;font-weight:700;color:#6E6590}
.in-chal .btn{grid-column:2;grid-row:1/3}
.in-chal.lock{background:#F7F4EF;border-color:#EFE8DF}
.in-chal.lock .ic-t{color:var(--ink2)}
@media (max-width:560px){ .in-chal{grid-template-columns:1fr} .in-chal .btn{grid-column:1;grid-row:auto;width:100%;margin-top:6px} }

/* 思维锦囊 */
.tips{text-align:center}
.tp-emo{font-size:64px;line-height:1;animation:pop .5s}
.tips h2{margin:10px 0 6px}
.tp-lead{color:var(--ink2);font-weight:700;margin:0 0 16px}
.tp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;text-align:left;max-width:760px;margin:0 auto}
.tp{display:flex;gap:12px;align-items:flex-start;background:#F7F4FF;border:2px solid #E7E0FF;border-radius:18px;padding:12px 14px}
.tp-i{font-size:30px;line-height:1}
.tp b{font-size:17px;color:#5B3FC4}
.tp p{margin:2px 0 0;font-size:14.5px;font-weight:700;color:#6E6590;line-height:1.55}
.tp-acts{margin-top:20px}

/* 题目：标签、挑战模式、小伙伴位置 */
.progress{position:relative}
.qpal{flex:none;margin-left:6px;height:52px;display:flex;align-items:flex-end}
.qpal .pal-fig{width:56px;margin-top:-10px}
.chal-tag{flex:none;font-size:13px;font-weight:900;color:#fff;background:linear-gradient(120deg,#9B7BF7,#7C5CE8);border-radius:999px;padding:4px 11px}
.panel.quiz.chal{border:2.5px solid #E2D8FF}
.qtags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.qtags .qtag{margin:0}
.qtag.m{background:#EFE9FF;color:#6D4FD8}

/* 结果页 */
.res-pal{display:flex;justify-content:center;margin-top:34px;min-height:120px}
.res-pal .pal.big .pal-fig{width:130px}
.reward{max-width:520px;margin:4px auto 16px;background:linear-gradient(120deg,#FFF6D6,#FFEFD9);border:2px solid #FFE08A;border-radius:18px;padding:12px 16px;font-weight:800;color:#8A5A00;animation:pop .5s}
.reward small{color:#B08A3A;font-weight:700}
.reward.chal{background:linear-gradient(120deg,#F3EEFF,#EAF3FF);border-color:#E2D8FF;color:#5B3FC4;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.gacha-ready{max-width:520px;margin:0 auto 18px;background:#FFF0F5;border:2px solid #FFD0DF;border-radius:18px;padding:12px 16px;font-weight:800;color:#B03A62;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.gacha-bar{max-width:420px;margin:0 auto 18px}
.gb-t{font-size:14.5px;font-weight:800;color:var(--ink2);margin-bottom:6px}
.gb-track{height:12px;border-radius:999px;background:#F2EAE0;overflow:hidden}
.gb-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#FFC93C,#FF8FB1);transition:width .6s}

/* 玩偶屋 */
.dolls-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.dolls-h h2{margin:0}
.dolls-h p{margin:4px 0 0;color:var(--ink2);font-weight:700;font-size:14.5px}
.dolls-count{font-size:15px;font-weight:800;color:var(--ink2);background:#FFF1F5;border-radius:14px;padding:6px 12px;white-space:nowrap}
.dolls-count b{font-size:22px;color:var(--pink-d)}
.dolls-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dt{height:38px;padding:0 14px;border-radius:999px;background:#F6F0E8;font-weight:800;font-size:14px;color:var(--ink2)}
.dt.on{background:var(--accent);color:#fff}
.dolls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.doll{position:relative;border-radius:22px;padding:8px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid #F1E7DB;background:#FFFCF8;transition:transform .15s}
.doll:active{transform:scale(.97)}
.doll-fig{width:100%;max-width:120px}
.doll-fig svg{width:100%;height:auto;display:block}
.doll-n{font-weight:900;font-size:15px}
.doll-r{font-size:12px;font-weight:800;color:var(--ink3)}
.doll.r2{border-color:#CFE3FF;background:linear-gradient(180deg,#F4F9FF,#FFFFFF)}
.doll.r3{border-color:#FFE08A;background:linear-gradient(180deg,#FFF9E6,#FFFFFF)}
.doll.r3.own{box-shadow:0 0 0 3px rgba(255,209,102,.25),0 6px 16px rgba(224,168,0,.15)}
.doll.lock .doll-n{color:var(--ink3)}
.doll.pal-on{border-color:var(--pink)}
.doll-tag{position:absolute;top:6px;right:6px;background:var(--pink);color:#fff;font-size:11.5px;font-weight:900;border-radius:999px;padding:1px 7px}
.dolls-foot{text-align:center;margin-top:18px}
.doll-card{text-align:center}
.dc-fig{width:210px;margin:0 auto;cursor:pointer}
.dc-fig svg{width:100%;height:auto;display:block}
.dc-r{display:inline-block;font-weight:900;font-size:13px;border-radius:999px;padding:2px 12px;background:#F6F0E8;color:var(--ink2);margin-top:4px}
.doll-card.r2 .dc-r{background:#E3F0FF;color:#2B77E4}
.doll-card.r3 .dc-r{background:#FFF1BF;color:#9A6A00}
.doll-card h3{margin:8px 0 4px;font-size:24px}
.doll-card h3 small{font-size:15px;color:var(--ink2);font-weight:800}
.dc-intro{color:#5E5448;font-weight:700;margin:6px auto 14px;max-width:420px}
.dc-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* 扭蛋机 */
.gacha-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gacha-h h2{margin:0}
.gacha-tip{color:var(--ink2);font-weight:700;margin:8px 0 12px}
.gacha-main{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.gm{width:250px;flex:none}
.gm-svg{width:100%;height:auto;display:block;overflow:visible}
.gm .cap{transform-box:fill-box;transform-origin:50% 50%}
.gm.spin .cap{animation:capShake .12s linear 8 alternate}
@keyframes capShake{from{transform:translate(-3px,1px) rotate(-8deg)}to{transform:translate(3px,-2px) rotate(8deg)}}
.gm.spin .gm-knob{animation:knob .7s ease-in-out}
@keyframes knob{to{transform:rotate(360deg)}}
.cap-drop{animation:capDrop .5s cubic-bezier(.3,1.5,.6,1)}
@keyframes capDrop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
.gacha-side{flex:1;min-width:240px;max-width:340px;display:flex;flex-direction:column;gap:10px}
.gs-row{display:flex;justify-content:space-between;align-items:center;background:#FFFCF8;border:2px solid #F1E7DB;border-radius:14px;padding:10px 14px;font-weight:800;color:var(--ink2)}
.gs-row b{font-size:18px;color:var(--ink)}
.gs-need{margin:0;font-weight:800;color:var(--ink2);text-align:center}

/* 开扭蛋 */
.modal-box.reveal-box{background:transparent;box-shadow:none;overflow:visible}
.reveal{position:relative;text-align:center;padding:10px 0 0;min-height:420px}
.rv-rays{position:absolute;left:50%;top:150px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:repeating-conic-gradient(rgba(255,209,102,.35) 0 10deg,rgba(255,255,255,0) 10deg 20deg);animation:rays 8s linear infinite;opacity:0;transition:opacity .6s;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.reveal.r2 .rv-rays{background:repeating-conic-gradient(rgba(125,211,252,.4) 0 10deg,rgba(255,255,255,0) 10deg 20deg)}
.reveal.r3 .rv-rays{background:repeating-conic-gradient(rgba(255,158,199,.4) 0 8deg,rgba(255,209,102,.45) 8deg 16deg,rgba(167,139,250,.35) 16deg 24deg,rgba(255,255,255,0) 24deg 32deg)}
.reveal.open .rv-rays{opacity:1}
@keyframes rays{to{transform:rotate(360deg)}}
.rv-cap{position:absolute;left:50%;top:95px;width:120px;height:120px;margin-left:-60px;z-index:2}
.rv-top,.rv-bot{position:absolute;left:0;width:120px;height:60px;transition:transform .5s cubic-bezier(.3,1.4,.6,1),opacity .5s}
.rv-top{top:0;border-radius:60px 60px 0 0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.rv-bot{top:60px;border-radius:0 0 60px 60px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.rv-cap{animation:capWiggle .45s ease-in-out}
@keyframes capWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.reveal.open .rv-top{transform:translate(-40px,-70px) rotate(-35deg);opacity:0}
.reveal.open .rv-bot{transform:translate(30px,60px) rotate(20deg);opacity:0}
.rv-fig{position:relative;z-index:3;width:220px;margin:30px auto 0;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .15s}
.rv-fig svg{width:100%;height:auto;display:block}
.reveal.open .rv-fig{transform:scale(1)}
.rv-txt{position:relative;z-index:3;background:#fff;border-radius:26px;padding:16px 20px 18px;margin:8px auto 0;max-width:460px;box-shadow:0 20px 50px rgba(0,0,0,.25);opacity:0;transform:translateY(16px);transition:all .45s ease .55s}
.reveal.open .rv-txt{opacity:1;transform:none}
.rv-r{display:inline-block;font-weight:900;font-size:13.5px;border-radius:999px;padding:2px 12px;background:#F6F0E8;color:var(--ink2)}
.reveal.r2 .rv-r{background:#E3F0FF;color:#2B77E4}
.reveal.r3 .rv-r{background:linear-gradient(90deg,#FFE08A,#FFB3D0);color:#7A4A00}
.rv-txt h3{margin:8px 0 4px;font-size:22px}
.rv-txt p{margin:4px 0 12px;color:#5E5448;font-weight:700}
.rv-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* 菜单与设置 */
.menu-me{display:flex;align-items:center;gap:14px;margin:0 30px 14px 0}
.menu-fig{width:92px;flex:none}
.menu-fig svg{width:100%;height:auto;display:block}
.menu-me h3{margin:0 0 2px;font-size:22px}
.menu-me p{margin:2px 0;color:var(--ink2);font-weight:700;font-size:14px}
.menu-stat{color:var(--ink)!important}
.menu-list{display:grid;gap:10px}
.menu-list button{height:56px;border-radius:16px;background:#FBF8F4;border:2px solid #F1E8DC;text-align:left;padding:0 18px;font-size:17px;font-weight:800;color:var(--ink)}
.menu-list button:active{transform:scale(.98)}
.settings h3{margin:0 0 12px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 4px;border-bottom:1.5px solid #F3ECE3}
.set-row b{display:block;font-size:16.5px}
.set-row small{display:block;font-size:13px;color:var(--ink3);font-weight:700}
.sw{appearance:none;-webkit-appearance:none;width:56px;height:32px;border-radius:999px;background:#E8DFD4;position:relative;flex:none;cursor:pointer;transition:background .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.15);transition:transform .2s}
.sw:checked{background:var(--mint)}
.sw:checked::after{transform:translateX(24px)}
.vol{width:180px;accent-color:var(--accent)}
.set-t{font-weight:900;margin:16px 4px 8px;font-size:16px}
.set-t small{font-weight:700;color:var(--ink3);font-size:13px;margin-left:6px}
.teachers{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.teacher{position:relative;text-align:left;border-radius:16px;border:2.5px solid #F1E8DC;background:#FFFCF8;padding:10px 40px 10px 14px}
.teacher b{display:block;font-size:16px}
.teacher small{display:block;font-size:12.5px;color:var(--ink3);font-weight:700}
.teacher .t-play{position:absolute;right:12px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:50%;background:#F4EFE9;display:grid;place-items:center;font-size:12px;color:var(--ink2)}
.teacher.on{border-color:var(--accent);background:#FFF4EE}
.teacher.on .t-play{background:var(--accent);color:#fff}
.set-foot{text-align:center;margin-top:18px}
.pf .set-foot{margin-top:6px}
.pg-c{color:#6D4FD8;font-size:13px}

/* ========================================================
   错题本 / 已完成状态 / 游戏卡角标 v3
   ======================================================== */

/* 游戏卡：已完成（3星）角标 */
.gcard-done { position: relative; }
.gcard-done::after {
  content: '已学会';
  position: absolute; top: 8px; right: 8px;
  background: #22c55e; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  letter-spacing: .5px;
}
.gcard-check { display: none; }  /* 角标文字代替，保留 DOM 兼容 */

/* 游戏卡：已玩过（1-2星）进度色条 */
.gcard-played .ge { position: relative; }

/* 错题数角标 */
.gchal.wrong {
  background: #fee2e2; color: #dc2626;
  border: 1px solid #fca5a5;
  padding: 2px 7px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
}

/* 首页底部错题按钮颜色 */
.btn.red { background: #ef4444; color: #fff; }
.btn.red:hover { background: #dc2626; }

/* ---- 错题本页面 ---- */
.wrongs-page { padding: 0 0 32px; }
.wrongs-page h2 { margin: 0 0 4px; font-size: 22px; }
.wrongs-sub { color: var(--c-text-mute, #888); margin: 0 0 20px; font-size: 14px; }

.wrong-group {
  background: var(--c-surface, #fff);
  border: 1.5px solid var(--c-border, #f0e8e0);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.wg-title {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--c-raised, #fdf7f2);
  border-bottom: 1px solid var(--c-border, #f0e8e0);
  font-weight: 700; font-size: 15px;
}
.wg-cnt {
  font-size: 12px; font-weight: 500;
  color: var(--c-text-mute, #888);
  margin-left: 2px; flex: 1;
}
.wg-drill { margin-left: auto; }

.wrong-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-border, #f0e8e0);
}
.wrong-item:last-child { border-bottom: none; }
.wi-stem {
  font-size: 14px; color: var(--c-text, #333);
  line-height: 1.5;
  /* strip inline HTML entities visually */
}
.wi-meta {
  font-size: 12px; color: var(--c-text-mute, #999);
  margin-top: 3px;
}

.wrongs-foot {
  display: flex; gap: 10px; margin-top: 24px;
  justify-content: center;
}

/* 空错题本 */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 48px 24px; text-align: center;
}
.empty-state .es-ico { font-size: 56px; }
.empty-state h3 { margin: 0; font-size: 20px; }
.empty-state p { color: var(--c-text-mute, #888); margin: 0; line-height: 1.6; }

/* ========================================================
   🌌 探索星球主题 v3 — 星空主页
   ======================================================== */

/* 屏幕区域重置：允许星空占满 */
.screen { padding: 0 !important; background: transparent !important; }

/* ---- 星空容器 ---- */
.space-map {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at 30% 20%, #1a1040 0%, #0d0820 40%, #030308 100%);
  overflow: hidden;
  padding-bottom: 48px;
}

/* 星星背景粒子 */
.stars-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.star-dot {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: star-twinkle 3s ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  0%  { opacity: .15; transform: scale(1); }
  100%{ opacity: .9;  transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .star-dot { animation: none; opacity: .5; }
}

/* ---- 顶部 header ---- */
.space-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 20px 0;
}
.sh-left { flex: 1; }
.sh-left h1 {
  font-size: clamp(22px, 5vw, 32px); font-weight: 900;
  color: #fff; margin: 0;
  text-shadow: 0 0 24px rgba(160,120,255,.6);
}
.sh-left p { color: #c8b8f8; margin: 4px 0 0; font-size: 14px; }
.sh-right { width: 80px; flex-shrink: 0; }

/* ---- 状态胶囊行 ---- */
.space-stats {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 20px;
}
.space-stats .pill {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: #f0e8ff; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
  white-space: nowrap;
}
.space-stats .pill.gold { background: rgba(255,200,60,.2); border-color: rgba(255,200,60,.4); color: #ffe090; }
.space-stats .pill-btn {
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.space-stats .pill-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }
.space-stats .pill-btn.red { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.4); color: #fca5a5; }

/* ---- 星球滚动区 ---- */
.planets-scroll {
  position: relative; z-index: 2;
  overflow-x: auto; overflow-y: visible;
  padding: 24px 0 8px;
  scrollbar-width: none;
}
.planets-scroll::-webkit-scrollbar { display: none; }

.planets-row {
  display: flex; flex-wrap: wrap; gap: 28px 20px;
  padding: 0 20px 8px;
  justify-content: center;
  min-width: min-content;
}

/* ---- 单颗星球 ---- */
.planet-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: 130px;
  cursor: pointer;
}
.planet-btn {
  position: relative;
  background: none; border: none; padding: 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  animation: planet-float 5s ease-in-out infinite alternate;
}
.planet-btn:nth-child(2n)   { animation-duration: 6.5s; animation-delay: -.8s; }
.planet-btn:nth-child(3n)   { animation-duration: 7.2s; animation-delay: -1.6s; }
.planet-btn:nth-child(4n)   { animation-duration: 5.8s; animation-delay: -2.4s; }

@keyframes planet-float {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .planet-btn { animation: none; }
}

.planet-btn:hover { transform: translateY(-6px) scale(1.08) !important; }
.planet-btn:focus-visible {
  outline: 3px solid rgba(160,120,255,.7); outline-offset: 4px;
}
.planet-btn.p-active { transform: translateY(-8px) scale(1.12) !important; }
.planet-btn.p-active::after {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  animation: ring-pulse 1.2s ease-out infinite;
}
@keyframes ring-pulse {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.35); }
}

/* 完成王冠 */
.p-crown {
  position: absolute; top: -4px; right: 4px;
  font-size: 20px; line-height: 1;
  animation: crown-bob .8s ease-in-out infinite alternate;
}
@keyframes crown-bob {
  0%   { transform: translateY(0) rotate(-10deg); }
  100% { transform: translateY(-4px) rotate(10deg); }
}
/* 思维挑战小点 */
.p-chal-dot {
  position: absolute; bottom: 6px; right: 2px;
  font-size: 15px; line-height: 1;
}

.planet-svg { display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.5)); }

.p-name {
  color: #f0e8ff; font-size: 13px; font-weight: 700;
  text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.p-sub {
  color: #a090c8; font-size: 11px; text-align: center;
  line-height: 1.3; padding: 0 4px;
}
.p-bar {
  width: 100%; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.12); overflow: hidden; margin-top: 2px;
}
.p-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #a78bfa, #60a5fa);
  transition: width .5s ease;
}

/* ---- 关卡展开面板 ---- */
.planet-panel {
  position: relative; z-index: 3;
  margin: 12px 16px;
  background: rgba(20,12,50,.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(160,120,255,.25);
  border-radius: 20px;
  overflow: hidden;
  animation: pp-in .28s cubic-bezier(.34,1.4,.64,1);
}
.planet-panel[hidden] { display: none; }
@keyframes pp-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.pp-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pp-planet { flex-shrink: 0; }
.pp-planet .planet-svg { filter: drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
.pp-info { flex: 1; min-width: 0; }
.pp-info h2 { color: #f0e8ff; font-size: 18px; margin: 0 0 2px; }
.pp-info p  { color: #9080c0; font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-close {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #c8b8f8; border-radius: 50%; width: 32px; height: 32px;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.pp-close:hover { background: rgba(255,255,255,.2); }

.pp-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 14px;
}

/* 在面板里的游戏卡颜色适配暗背景 */
.pp-games .gcard {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #f0e8ff;
}
.pp-games .gcard .gn { color: #f0e8ff; }
.pp-games .gcard .gd { color: #9080c0; }
.pp-games .gcard:hover { background: rgba(255,255,255,.13); }

/* ---- 底部 ---- */
.home-foot2 {
  position: relative; z-index: 2;
  display: flex; justify-content: center; padding: 16px;
}

/* ---- 响应式 ---- */
@media (min-width: 600px) {
  .planets-row { gap: 32px 28px; }
  .planet-wrap  { width: 140px; }
}
@media (min-width: 900px) {
  .planets-row { gap: 40px 36px; max-width: 900px; margin: 0 auto; }
  .planet-wrap  { width: 150px; }
  .pp-games { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}