/* =========================================================
   宝贝学习乐园 · 彩虹糖果主题
   ========================================================= */
:root{
  --pink:#FF6FB5;   --pink-l:#FFE3F1;
  --blue:#4FC3F7;   --blue-l:#DFF3FF;
  --yellow:#FFD93D; --yellow-l:#FFF6D1;
  --green:#5FD68A;  --green-l:#DCF7E5;
  --purple:#A66BFF; --purple-l:#EEE3FF;
  --orange:#FF9F43;

  --ink:#3B2F45;  --ink2:#7B6E88;  --ink3:#A79BB2;
  --card:#FFFFFF; --line:#F1E6F6;
  --bg1:#FFF7FC; --bg2:#F3F9FF; --bg3:#FBF7FF;

  --r-s:14px; --r:20px; --r-l:28px;
  --sh:0 6px 22px rgba(160,120,190,.13);
  --sh-s:0 3px 10px rgba(160,120,190,.10);
  --tap:52px;
  --safe: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Nunito","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 8% -10%, var(--pink-l), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--blue-l), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, var(--purple-l), transparent 60%),
    linear-gradient(160deg,var(--bg1),var(--bg2) 50%,var(--bg3));
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}

/* ---- 移动端抽屉菜单 ---- */
.sheet-wrap{position:fixed;inset:0;z-index:1000}
.sheet-mask{position:absolute;inset:0;background:rgba(59,47,69,.34);backdrop-filter:blur(3px);animation:tin .2s}
.sheet-box{
  position:absolute;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  background:#fff;border-radius:var(--r-l);padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 30px rgba(120,90,150,.22);animation:up .26s cubic-bezier(.2,.9,.3,1.2);
  display:flex;flex-direction:column;gap:8px
}
.sheet-box .sheet-tt{display:block;padding:4px 6px 10px;font-size:15px;color:var(--ink2)}
.sheet-box button{
  display:flex;align-items:center;gap:12px;min-height:54px;padding:0 16px;border-radius:16px;
  font-size:16px;font-weight:800;color:var(--ink2);background:#FAF7FD;transition:.15s
}
.sheet-box button i{font-style:normal;font-size:22px;width:28px;text-align:center}
.sheet-box button.on{color:#fff;background:linear-gradient(135deg,var(--pink),var(--purple))}
@keyframes up{from{transform:translateY(120%);opacity:.4}to{transform:none;opacity:1}}

/* ============ 布局 ============ */
.app{display:flex;min-height:100dvh;align-items:stretch}

/* ---- PC 侧边栏 ---- */
.sidebar{
  width:250px;flex:0 0 250px;padding:22px 16px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
  border-right:1px solid var(--line);
  position:sticky;top:0;height:100dvh;
  display:flex;flex-direction:column;gap:18px;
}
.brand{display:flex;align-items:center;gap:12px;padding:4px 6px}
.brand-ico{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:var(--sh-s);
}
.brand-txt b{display:block;font-size:16.5px;letter-spacing:.4px}
.brand-txt small{color:var(--ink3);font-size:11.5px}

.nav{display:flex;flex-direction:column;gap:8px;flex:1}
.nav button{
  display:flex;align-items:center;gap:11px;
  min-height:var(--tap);padding:0 14px;border-radius:var(--r-s);
  font-size:15px;font-weight:700;color:var(--ink2);
  transition:.18s;text-align:left;width:100%;
}
.nav button i{font-style:normal;font-size:20px;width:26px;text-align:center}
.nav button:hover{background:#fff;color:var(--ink);transform:translateX(3px)}
.nav button.on{color:#fff;box-shadow:var(--sh-s);transform:none}
.nav button.on[data-k="letters"]{background:linear-gradient(135deg,#FF8FC7,var(--pink))}
.nav button.on[data-k="poems"]{background:linear-gradient(135deg,#7ED0F7,var(--blue))}
.nav button.on[data-k="numbers"]{background:linear-gradient(135deg,#FFE066,var(--yellow));color:#7A5B00}
.nav button.on[data-k="logic"]{background:linear-gradient(135deg,#7FE3A4,var(--green))}
.nav button.on[data-k="adventure"]{background:linear-gradient(135deg,#BC93FF,var(--purple))}

.side-stat{background:#fff;border-radius:var(--r);padding:14px;box-shadow:var(--sh-s)}
.ss-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink2);padding:3px 0}
.ss-row b{font-size:17px;color:var(--pink)}
.ss-bar{height:8px;border-radius:8px;background:var(--line);margin:9px 0 7px;overflow:hidden}
.ss-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--yellow),var(--pink),var(--purple));transition:width .5s}
.ss-tip{font-size:11px;color:var(--ink3);text-align:center}

/* ---- 主区 ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:18px 26px 0}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tb-title{font-size:21px;margin:0;flex:1;letter-spacing:.5px}
.tb-right{display:flex;align-items:center;gap:9px}
.pill{
  height:40px;padding:0 15px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
  font-weight:800;font-size:14.5px;background:#fff;box-shadow:var(--sh-s)
}
.star-pill{color:#E0820B;background:linear-gradient(135deg,var(--yellow-l),#fff)}
.icon-btn{
  width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:var(--sh-s);
  font-size:19px;display:grid;place-items:center;transition:.15s
}
.icon-btn:active{transform:scale(.93)}
.icon-btn.off{opacity:.38;filter:grayscale(1)}

.screen{flex:1;padding-bottom:30px}
.foot{color:var(--ink3);font-size:11.5px;text-align:center;padding:18px 0 12px;border-top:1px dashed var(--line);margin-top:10px}

/* ---- 移动端底部 Tab ---- */
.tabbar{display:none}
.m-only{display:none}

/* ============ 通用组件 ============ */
.mod-head{margin-bottom:18px}
.mod-head h2{margin:0 0 4px;font-size:19px;display:flex;align-items:center;gap:8px}
.mod-head .sub{margin:0;color:var(--ink3);font-size:13px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;background:#fff;padding:6px;border-radius:var(--r-s);box-shadow:var(--sh-s);margin-top:14px;max-width:600px}
@media (max-width:880px){.seg{max-width:none}}
.seg button{
  min-width:0;min-height:44px;border-radius:11px;font-size:14.5px;font-weight:700;color:var(--ink2);transition:.16s;padding:0 10px
}
.seg button.on{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;box-shadow:var(--sh-s)}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.grid{display:grid;gap:14px}
.hint{color:var(--ink3);font-size:13px;margin:12px 0 0}
.center{text-align:center}

.btn{
  min-height:var(--tap);padding:0 24px;border-radius:var(--r-s);font-weight:800;font-size:15.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s
}
.btn:active{transform:scale(.96)}
.btn-p{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;box-shadow:var(--sh-s)}
.btn-b{background:#fff;color:var(--ink2);box-shadow:var(--sh-s)}
.btn-y{background:linear-gradient(135deg,#FFE066,var(--yellow));color:#7A5B00;box-shadow:var(--sh-s)}

.prog{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:13px;color:var(--ink2)}
.prog .bar{flex:1;height:10px;border-radius:10px;background:var(--line);overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .4s}

.scoreline{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.scoreline .sc{
  background:#fff;border-radius:var(--r-s);box-shadow:var(--sh-s);padding:9px 15px;font-size:13.5px;font-weight:700;color:var(--ink2)
}
.scoreline .sc b{color:var(--pink);font-size:16px}

/* ============ 1. 字母 ============ */
.letters{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
.lcard{
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:14px 8px 12px;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:.18s;min-height:118px;
  border:2px solid transparent
}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--pink-l)}
.lcard:active{transform:scale(.95)}
.lcard .big{font-size:34px;font-weight:900;line-height:1;letter-spacing:1px;background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.lcard .em{font-size:22px}
.lcard .wd{font-size:12.5px;font-weight:800;color:var(--ink2)}
.lcard .cn{font-size:10.5px;color:var(--ink3)}
.lcard.done{border-color:var(--green-l);background:linear-gradient(180deg,#fff,var(--green-l))}
.lcard.done::after{content:"✓";position:absolute;}

/* 配对游戏 */
.match-wrap{display:grid;gap:11px}
.match-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:11px}
.mcard{
  min-height:74px;border-radius:var(--r-s);background:#fff;box-shadow:var(--sh-s);
  font-size:30px;font-weight:900;display:grid;place-items:center;transition:.18s;border:2.5px solid transparent
}
.mcard.up{color:var(--pink)}
.mcard.low{color:var(--blue)}
.mcard:active{transform:scale(.94)}
.mcard.sel{border-color:var(--purple);background:var(--purple-l);transform:translateY(-3px)}
.mcard.ok{border-color:var(--green);background:var(--green-l);color:var(--green);opacity:.55;pointer-events:none;animation:pop .35s}
.mcard.bad{animation:shake .4s;border-color:#FF7B7B;background:#FFEDED}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ============ 2. 古诗 ============ */
.poems{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.poem{background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:18px 18px 14px;transition:.18s;border:2px solid transparent;position:relative;overflow:hidden}
.poem:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.poem.read{border-color:var(--green-l);background:linear-gradient(180deg,#fff, #F6FFF9)}
.poem-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.poem-hd .em{font-size:24px}
.poem-hd b{font-size:17px}
.poem-hd small{color:var(--ink3);font-size:12px}
.poem-hd .tick{margin-left:auto;color:var(--green);font-size:16px;font-weight:900}
.poem-body{display:flex;flex-direction:column;gap:9px}
.pline{display:flex;flex-wrap:wrap;gap:2px}
.pchar{display:flex;flex-direction:column;align-items:center;width:29px}
.pchar .py{font-size:9.5px;color:var(--pink);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:-.2px;height:12px;white-space:nowrap;transform:scale(.92)}
.pchar .zi{font-size:20px;font-weight:700;line-height:1.25}
.poem-ft{display:flex;align-items:center;gap:9px;margin-top:14px}
.poem-ft .btn{min-height:44px;padding:0 17px;font-size:14px}

/* ============ 3. 数字 ============ */
.numshow{
  background:linear-gradient(135deg,#fff,var(--blue-l));border-radius:var(--r);box-shadow:var(--sh);
  padding:22px;margin-bottom:16px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-height:150px
}
.numshow .n-big{font-size:76px;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;min-width:110px;text-align:center}
.numshow .n-info{display:flex;flex-direction:column;gap:7px}
.numshow .n-info .r{font-size:15px;color:var(--ink2)}
.numshow .n-info .r b{color:var(--ink);font-size:19px}
.numshow .n-dots{font-size:13px;color:var(--pink);letter-spacing:2px;line-height:1.5;max-width:340px;word-break:break-all}

.nums{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
.nchip{
  min-height:66px;border-radius:var(--r-s);background:#fff;box-shadow:var(--sh-s);
  font-size:24px;font-weight:900;color:var(--ink2);display:grid;place-items:center;transition:.16s;position:relative
}
.nchip:hover{transform:translateY(-3px);color:var(--pink)}
.nchip:active{transform:scale(.93)}
.nchip.on{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff}

.quiz{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px;text-align:center}
.quiz .qtag{display:inline-block;background:var(--yellow-l);color:#A87700;font-size:12px;font-weight:800;padding:5px 13px;border-radius:999px;margin-bottom:14px}
.quiz .qtext{font-size:44px;font-weight:900;letter-spacing:3px;margin:6px 0 6px;line-height:1.25}
.quiz .qtext.sml{font-size:30px;letter-spacing:1px}
.quiz .qsub{color:var(--ink3);font-size:13.5px;margin-bottom:18px}
.opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:6px}
.opt{
  min-height:64px;border-radius:var(--r-s);background:#fff;box-shadow:var(--sh-s);border:2.5px solid var(--line);
  font-size:28px;font-weight:900;display:grid;place-items:center;transition:.15s;padding:6px 10px
}
.opt:hover{border-color:var(--blue);transform:translateY(-3px)}
.opt:active{transform:scale(.95)}
.opt.ok{border-color:var(--green);background:var(--green-l);color:#2E9E5B;animation:pop .4s}
.opt.bad{border-color:#FF7B7B;background:#FFEDED;color:#D84343;animation:shake .4s}
.opt.small{font-size:19px}

/* 数数游戏 */
.count-area{
  background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:20px;margin-bottom:16px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:130px;align-items:center
}
.citem{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:30px;
  background:var(--yellow-l);transition:.18s;position:relative
}
.citem:active{transform:scale(.9)}
.citem.counted{background:var(--green-l);opacity:.62}
.citem.counted::after{content:attr(data-i);position:absolute;bottom:-2px;right:2px;font-size:11px;font-weight:900;color:var(--green)}

/* ============ 4. 逻辑 ============ */
.seqbox{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff,var(--purple-l));border-radius:var(--r);padding:24px 16px;box-shadow:var(--sh-s);margin-bottom:10px
}
.seqspan{font-size:38px;line-height:1}
.seqq{font-size:38px;width:62px;height:62px;border-radius:18px;border:3px dashed var(--purple);display:grid;place-items:center;color:var(--purple);font-weight:900}
.shpbox{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-bottom:10px}
.shp{width:78px;height:78px}

/* ============ 5. 闯关 ============ */
.levels{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.lv{
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:16px 12px;text-align:center;transition:.18s;
  min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px solid transparent
}
.lv:not(.lock):hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--yellow)}
.lv:active{transform:scale(.96)}
.lv .no{font-size:13px;font-weight:800;color:var(--ink3)}
.lv .ic{font-size:32px}
.lv .nm{font-size:13.5px;font-weight:800;color:var(--ink2)}
.lv .st{font-size:16px;letter-spacing:2px;color:var(--yellow);text-shadow:0 1px 0 #E3B400}
.lv .st .e{color:#E4DCEE;text-shadow:none}
.lv.lock{opacity:.55;background:#F8F5FA;cursor:not-allowed}
.lv.pass{background:linear-gradient(180deg,#fff,var(--green-l))}
.lv.now{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-l),var(--sh)}

.badges{grid-template-columns:repeat(auto-fill,minmax(134px,1fr))}
.badge{
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-s);padding:15px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:.18s;min-height:124px;justify-content:center
}
.badge .ic{font-size:32px;line-height:1}
.badge .nm{font-size:13px;font-weight:800}
.badge .ds{font-size:10.5px;color:var(--ink3);line-height:1.35}
.badge.got{background:linear-gradient(180deg,#fff,var(--yellow-l));border:2px solid var(--yellow);animation:pop .5s}
.badge.no{opacity:.5;filter:grayscale(.9)}
.badge:hover{transform:translateY(-3px)}

.result{text-align:center;padding:16px 0}
.result .big{font-size:56px;margin-bottom:6px}
.result h3{font-size:22px;margin:6px 0}
.result .stline{font-size:40px;letter-spacing:6px;color:var(--yellow);text-shadow:0 2px 0 #E3B400;margin:10px 0}
.result .stline .e{color:#E7E0F0;text-shadow:none}
.result .rbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ============ 提示 & 特效 ============ */
.toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.toast{
  background:rgba(59,47,69,.93);color:#fff;padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.2);animation:tin .3s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis
}
.toast.good{background:linear-gradient(135deg,#4FCB7F,#2E9E5B)}
.toast.bad{background:linear-gradient(135deg,#FF8B8B,#E85C5C)}
.toast.badge{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#5C3A00}
@keyframes tin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.fx{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
.spark{position:absolute;font-size:26px;animation:fall linear forwards}
@keyframes fall{
  0%{opacity:1;transform:translateY(-60px) rotate(0)}
  100%{opacity:0;transform:translateY(102vh) rotate(540deg)}
}
.burst{position:fixed;font-size:32px;pointer-events:none;animation:burst .9s ease-out forwards;z-index:9998}
@keyframes burst{0%{opacity:1;transform:scale(.4)}70%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2.2)}}

/* ============ 响应式：移动端 ============ */
@media (max-width:880px){
  .sidebar{display:none}
  .m-only{display:grid}
  .main{padding:12px 14px 0}
  .tb-title{font-size:18px}
  .star-pill{padding:0 12px;font-size:13.5px;height:38px}
  .icon-btn{width:42px;height:42px;font-size:17px}
  .screen{padding-bottom:calc(96px + var(--safe))}
  .foot{display:none}

  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + var(--safe));
  }
  .tabbar button{
    min-height:60px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:10.5px;font-weight:800;color:var(--ink3);transition:.16s
  }
  .tabbar button i{font-style:normal;font-size:21px;line-height:1}
  .tabbar button.on{color:var(--pink);background:var(--pink-l)}
  .tabbar button.on[data-k="poems"]{color:#1D9FD6;background:var(--blue-l)}
  .tabbar button.on[data-k="numbers"]{color:#C99A00;background:var(--yellow-l)}
  .tabbar button.on[data-k="logic"]{color:#2E9E5B;background:var(--green-l)}
  .tabbar button.on[data-k="adventure"]{color:#7B3FE4;background:var(--purple-l)}

  .letters{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
  .lcard{min-height:104px;padding:11px 5px}
  .lcard .big{font-size:29px}
  .poems{grid-template-columns:1fr}
  .pchar{width:27px}
  .pchar .zi{font-size:18.5px}
  .numshow{padding:16px;gap:14px}
  .numshow .n-big{font-size:60px;min-width:86px}
  .nums{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .nchip{min-height:60px;font-size:21px}
  .quiz{padding:18px 14px}
  .quiz .qtext{font-size:34px}
  .quiz .qtext.sml{font-size:23px}
  .opts{grid-template-columns:repeat(2,1fr);gap:10px}
  .opt{min-height:60px;font-size:24px}
  .seqspan{font-size:30px}
  .seqq{width:54px;height:54px;font-size:31px}
  .lv{min-height:116px;padding:12px 8px}
  .levels{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
  .badges{grid-template-columns:repeat(auto-fill,minmax(106px,1fr))}
  .badge{min-height:112px;padding:12px 7px}
}
@media (max-width:380px){
  .letters{grid-template-columns:repeat(3,1fr)}
  .nums{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:881px){
  .letters{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .mod-head:first-child h2{display:none}   /* PC 端顶栏已有标题，避免重复 */
  .mod-head{margin-bottom:12px}
}