/* =====================================================================
   宝贝学习乐园 · CSS 架构地图
   ---------------------------------------------------------------------
   设计 Token   :root（品牌三阶色 / 墨色 / 背景 / 阴影 / 圆角）
   全局重置     * / html / body / button
   布局         #app / #sidebar / #main
   侧边栏       .logo .star-pill #side-nav .nav-btn .sync-chip .reset-btn
   页面与面包屑 .page .breadcrumb .page-head .sec-title .card .hidden
   按钮         .btn .btn-pink/blue/green/orange/yellow/purple/ghost
   模式 Tabs    .mode-tabs .tab（ltab/ptab/ntab）
   首页         .home-hero .hero-stars #hero-mascot .home-grid .task-card
   徽章         .badge-strip .badge-wall .badge
   字母(拼音共用) .letter-grid .letter-card
   古诗         .poem-grid .poem-card .poem-detail .poem-line .pchar
   数字         .num-display .number-grid .num-tile
   出题面板(通用) .quiz-card .start-wrap .q-* .choice
   闯关         .stage-list .stage-card
   移动端       #bottombar .btab（@media max-width:860px 显示）
   提示         #toast #confetti-layer .confetti
======================================================================= */

:root{
  --pink:#FF8FB8; --pink-soft:#FFE9F2; --pink-deep:#E86A9A;
  --blue:#5FB8F2; --blue-soft:#E3F3FF; --blue-deep:#3E93D6;
  --yellow:#FFC53D; --yellow-soft:#FFF4D9; --yellow-deep:#E0A416;
  --green:#5FCF8E; --green-soft:#E1F8EC; --green-deep:#3BAF6E;
  --purple:#A78BFA; --purple-soft:#EFEAFF; --purple-deep:#8465E8;
  --orange:#FF9E5E; --orange-soft:#FFEDDF; --orange-deep:#F07E33;
  --teal:#4ECDC4; --teal-soft:#DFF7F4; --teal-deep:#2BA8A0;
  --ink:#5A4B6E; --ink-soft:#9A8FB0;
  --bg:#FFF8EF; --card:#FFFFFF;
  --shadow:0 8px 20px rgba(90,75,110,.10);
  --r-lg:24px; --r-md:18px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,143,184,.14) 0 46px, transparent 47px),
    radial-gradient(circle at 88% 12%, rgba(95,184,242,.16) 0 56px, transparent 57px),
    radial-gradient(circle at 82% 82%, rgba(167,139,250,.14) 0 60px, transparent 61px),
    radial-gradient(circle at 18% 86%, rgba(255,197,61,.16) 0 44px, transparent 45px),
    var(--bg);
  color:var(--ink);
  font-size:16px; line-height:1.5;
  -webkit-user-select:none; user-select:none;
}
button{font-family:inherit; border:none; cursor:pointer; touch-action:manipulation;}

/* ===== 布局 ===== */
#app{display:flex; min-height:100vh; max-width:1280px; margin:0 auto;}
#sidebar{
  width:230px; flex-shrink:0; padding:20px 14px;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:14px;
}
#main{flex:1; padding:22px 26px 40px; min-width:0;}

/* ===== 侧边栏 ===== */
.logo{display:flex; align-items:center; gap:10px; padding:6px 8px;}
.logo svg{width:46px; height:46px; flex-shrink:0;}
.logo h1{font-size:19px; letter-spacing:1px;}
.logo p{font-size:12px; color:var(--ink-soft);}
.star-pill{
  background:var(--yellow-soft); border:2px solid var(--yellow);
  border-radius:999px; padding:10px 16px; text-align:center;
  font-size:18px; font-weight:800; color:var(--yellow-deep);
}
#side-nav{display:flex; flex-direction:column; gap:8px; flex:1;}
.nav-btn{
  display:flex; align-items:center; gap:12px;
  min-height:58px; padding:0 16px; border-radius:var(--r-md);
  background:#fff; color:var(--ink); font-size:16px; font-weight:700;
  box-shadow:0 4px 0 rgba(90,75,110,.06);
  transition:transform .12s;
}
.nav-btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(90,75,110,.06);}
.nav-btn svg{width:24px; height:24px; flex-shrink:0;}
.nav-btn .nicon{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.nav-btn.active{color:#fff;}
.nav-btn.active .nicon{background:rgba(255,255,255,.28);}
.nav-btn[data-page="home"].active{background:linear-gradient(135deg,var(--yellow),var(--orange)); box-shadow:0 4px 0 var(--orange-deep);}
.nav-btn[data-page="letters"].active{background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 4px 0 var(--pink-deep);}
.nav-btn[data-page="poems"].active{background:linear-gradient(135deg,var(--green),var(--blue)); box-shadow:0 4px 0 var(--green-deep);}
.nav-btn[data-page="numbers"].active{background:linear-gradient(135deg,var(--blue),var(--purple)); box-shadow:0 4px 0 var(--blue-deep);}
.nav-btn[data-page="logic"].active{background:linear-gradient(135deg,var(--orange),var(--yellow)); box-shadow:0 4px 0 var(--orange-deep);}
.nav-btn[data-page="adventure"].active{background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 4px 0 var(--purple-deep);}
.nav-btn[data-page="pinyin"].active{background:linear-gradient(135deg,var(--teal),var(--green)); box-shadow:0 4px 0 var(--teal-deep);}
.nav-btn[data-page="hanzi"].active{background:linear-gradient(135deg,#FF9A8B,#FF6B6B); box-shadow:0 4px 0 #E5533B;}
.sync-chip{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);
  background:#fff; border-radius:999px; padding:8px 14px; box-shadow:var(--shadow);
}
.sync-chip .dot{width:10px; height:10px; border-radius:50%; background:#C9C2D8; flex-shrink:0;}
.sync-chip.ok .dot{background:var(--green);}
.sync-chip.syncing .dot{background:var(--yellow); animation:blink 1s infinite;}
.sync-chip.err .dot{background:var(--pink-deep);}
.reset-btn{
  margin:0 16px 4px; padding:8px 14px; font-size:12px; font-weight:700;
  color:var(--ink-soft); background:transparent; border:2px dashed #D8CFE8; border-radius:999px;
}
.reset-btn[data-armed]{color:var(--pink-deep); border-color:var(--pink);}
@keyframes blink{50%{opacity:.35;}}

/* ===== 页面 ===== */
.page{display:none;}
.page.active{display:block; animation:pop .35s ease;}
@keyframes pop{0%{opacity:0; transform:translateY(14px) scale(.985);}100%{opacity:1; transform:none;}}
.breadcrumb{
  display:flex; align-items:center; gap:6px; width:fit-content;
  margin:0 0 16px; padding:8px 18px; background:#fff; border-radius:999px;
  box-shadow:var(--shadow); font-size:14px;
}
.breadcrumb .crumb{color:var(--ink-soft); font-weight:700; cursor:pointer; transition:color .2s;}
.breadcrumb .crumb:hover{color:var(--pink-deep);}
.breadcrumb .crumb-here{color:var(--ink); font-weight:800;}
.breadcrumb .sep{color:#CFC7DE; font-weight:700;}
.page-head{
  border-radius:var(--r-lg); padding:22px 26px; margin-bottom:18px;
  color:#fff; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.page-head::after{
  content:""; position:absolute; right:-24px; top:-24px; width:130px; height:130px;
  border-radius:50%; background:rgba(255,255,255,.16);
}
.page-head::before{
  content:""; position:absolute; right:34px; bottom:-38px; width:96px; height:96px;
  border-radius:50%; background:rgba(255,255,255,.12);
}
.page-head h1{font-size:28px; letter-spacing:2px; margin-bottom:4px; position:relative;}
.page-head p{font-size:15px; opacity:.92; position:relative;}
.page-head.pink{background:linear-gradient(135deg,var(--pink),var(--purple));}
.page-head.green{background:linear-gradient(135deg,var(--green),var(--blue));}
.page-head.blue{background:linear-gradient(135deg,var(--blue),var(--purple));}
.page-head.orange{background:linear-gradient(135deg,var(--orange),var(--yellow));}
.page-head.purple{background:linear-gradient(135deg,var(--purple),var(--pink));}
.page-head.teal{background:linear-gradient(135deg,var(--teal),var(--blue));}
.sec-title{font-size:20px; margin:24px 0 12px; display:flex; align-items:center; gap:8px;}
.card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px;}
.hidden{display:none !important;}

/* ===== 按钮 ===== */
.btn{
  min-height:54px; padding:0 28px; border-radius:16px;
  font-size:19px; font-weight:800; color:#fff; letter-spacing:1px;
  transition:transform .12s;
}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 transparent !important;}
.btn.big{min-height:62px; font-size:22px; padding:0 40px;}
.btn-pink{background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 5px 0 var(--pink-deep);}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--purple)); box-shadow:0 5px 0 var(--blue-deep);}
.btn-green{background:linear-gradient(135deg,var(--green),var(--blue)); box-shadow:0 5px 0 var(--green-deep);}
.btn-orange{background:linear-gradient(135deg,var(--orange),var(--yellow)); box-shadow:0 5px 0 var(--orange-deep);}
.btn-yellow{background:linear-gradient(135deg,var(--yellow),var(--orange)); box-shadow:0 5px 0 var(--yellow-deep);}
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 5px 0 var(--purple-deep);}
.btn-ghost{background:#fff; color:var(--ink); box-shadow:0 5px 0 rgba(90,75,110,.12); font-size:17px; min-height:50px;}

/* ===== 模式切换 tabs ===== */
.mode-tabs{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.tab{
  min-height:54px; padding:0 22px; border-radius:999px; font-size:17px; font-weight:800;
  background:#fff; color:var(--ink-soft); box-shadow:0 4px 0 rgba(90,75,110,.07);
}
.tab:active{transform:translateY(3px); box-shadow:none;}
.tab.active{color:#fff; background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 4px 0 var(--pink-deep);}
.tab.active[data-ntab]{background:linear-gradient(135deg,var(--blue),var(--purple)); box-shadow:0 4px 0 var(--blue-deep);}
.tab.active[data-atab]{background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 4px 0 var(--purple-deep);}
.tab.active[data-ltab]{background:linear-gradient(135deg,var(--pink),var(--orange)); box-shadow:0 4px 0 var(--pink-deep);}
.tab.active[data-ptab]{background:linear-gradient(135deg,var(--teal),var(--green)); box-shadow:0 4px 0 var(--teal-deep);}

/* ===== 首页 ===== */
.home-hero{
  background:linear-gradient(135deg,#FFF1F7,#EAF4FF 55%,#F1ECFF);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:2px dashed rgba(167,139,250,.4);
}
.home-hero h2{font-size:26px; margin-bottom:6px;}
.hero-stars{font-size:18px; font-weight:800; color:var(--yellow-deep); background:var(--yellow-soft); display:inline-block; padding:6px 16px; border-radius:999px; border:2px solid var(--yellow);}
#hero-mascot{width:110px; height:110px; flex-shrink:0; animation:bounce 2.4s ease-in-out infinite; will-change:transform;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.home-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.task-card{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:18px; cursor:pointer; border:3px solid transparent;
  transition:transform .12s, border-color .12s;
}
.task-card:active{transform:scale(.97);}
.task-card .ticon{width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:10px;}
.task-card h3{font-size:19px; margin-bottom:2px;}
.task-card p{font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.task-card .tpbar{height:12px; background:var(--pink-soft); border-radius:999px; overflow:hidden;}
.task-card .tpbar i{display:block; height:100%; border-radius:999px; transform:scaleX(0); transform-origin:left center; transition:transform .4s; will-change:transform;}

/* ===== 徽章 ===== */
.badge-strip{display:flex; gap:12px; flex-wrap:wrap;}
.badge-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.badge{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:16px 12px; text-align:center; position:relative;
}
.badge .bicon{font-size:44px; line-height:1.2; display:block;}
.badge .bname{font-size:16px; font-weight:800; margin-top:4px;}
.badge .bdesc{font-size:12px; color:var(--ink-soft);}
.badge.locked{filter:grayscale(1); opacity:.55;}
.badge .btag{
  position:absolute; top:10px; right:10px; background:var(--yellow); color:#fff;
  font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px;
}

/* ===== 字母 ===== */
.letter-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px;}
.letter-card{
  background:#fff; border-radius:20px; box-shadow:var(--shadow);
  padding:12px 8px; text-align:center; cursor:pointer; min-height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:transform .12s;
}
.letter-card:active{transform:scale(.92);}
.letter-card .lc-letter{font-size:38px; font-weight:900; line-height:1.1;}
.letter-card .lc-emoji{font-size:30px;}
.letter-card .lc-word{font-size:13px; font-weight:700; color:var(--ink-soft);}
.letter-card .lc-hint{font-size:12px; font-weight:600; color:var(--ink-soft);}
.letter-card .lc-tones{display:flex; gap:5px; justify-content:center; align-items:baseline; font-size:13px; font-weight:700; color:var(--ink-soft);}
.letter-card .lc-tones b.on{color:var(--teal-deep); font-size:16px;}
.letter-card .lc-tones b{cursor:pointer; padding:1px 3px; border-radius:6px; transition:transform .12s;}
.letter-card .lc-tones b:active{transform:scale(.82); color:var(--teal-deep);}
.letter-card:nth-child(5n+1){background:var(--pink-soft);}
.letter-card:nth-child(5n+2){background:var(--blue-soft);}
.letter-card:nth-child(5n+3){background:var(--yellow-soft);}
.letter-card:nth-child(5n+4){background:var(--green-soft);}
.letter-card:nth-child(5n+5){background:var(--purple-soft);}
.letter-card:nth-child(5n+1) .lc-letter{color:var(--pink-deep);}
.letter-card:nth-child(5n+2) .lc-letter{color:var(--blue-deep);}
.letter-card:nth-child(5n+3) .lc-letter{color:var(--yellow-deep);}
.letter-card:nth-child(5n+4) .lc-letter{color:var(--green-deep);}
.letter-card:nth-child(5n+5) .lc-letter{color:var(--purple-deep);}

/* ===== 古诗 ===== */
.poem-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;}
.poem-card{
  border-radius:var(--r-lg); padding:18px; cursor:pointer; color:#fff;
  box-shadow:var(--shadow); min-height:130px; position:relative; overflow:hidden;
  transition:transform .12s;
}
.poem-card:active{transform:scale(.97);}
.poem-card::after{content:""; position:absolute; right:-18px; bottom:-24px; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.18);}
.poem-card h3{font-size:21px; letter-spacing:2px;}
.poem-card .pauthor{font-size:13px; opacity:.9; margin:4px 0 10px;}
.poem-card .pfirst{font-size:14px; opacity:.95; position:relative;}
.poem-card .plearned{position:absolute; top:12px; right:12px; background:rgba(255,255,255,.9); color:var(--green-deep); font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px;}
.poem-card:nth-child(8n+1){background:linear-gradient(135deg,var(--green),var(--blue));}
.poem-card:nth-child(8n+2){background:linear-gradient(135deg,var(--blue),var(--purple));}
.poem-card:nth-child(8n+3){background:linear-gradient(135deg,var(--purple),var(--pink));}
.poem-card:nth-child(8n+4){background:linear-gradient(135deg,var(--pink),var(--orange));}
.poem-card:nth-child(8n+5){background:linear-gradient(135deg,var(--orange),var(--yellow));}
.poem-card:nth-child(8n+6){background:linear-gradient(135deg,var(--green),var(--yellow));}
.poem-card:nth-child(8n+7){background:linear-gradient(135deg,var(--blue),var(--green));}
.poem-card:nth-child(8n+8){background:linear-gradient(135deg,var(--pink),var(--purple));}
.poem-detail{margin-bottom:16px; border:3px solid var(--green);}
.poem-detail .pd-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:10px;}
.poem-detail .pd-title{font-size:24px; font-weight:900; letter-spacing:3px;}
.poem-detail .pd-author{font-size:14px; color:var(--ink-soft);}
.poem-line{
  display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; padding:12px 14px;
  background:var(--green-soft); border-radius:16px; cursor:pointer;
}
.poem-line:active{background:#D2F2E0;}
.pchar{display:inline-flex; flex-direction:column; align-items:center; min-width:40px;}
.pchar .py{font-size:13px; color:var(--green-deep); font-weight:600; line-height:1.2;}
.pchar .hz{font-size:32px; font-weight:800; line-height:1.25;}

/* ===== 数字 ===== */
.num-display{
  text-align:center; padding:26px 20px; margin-bottom:16px;
  background:linear-gradient(135deg,var(--blue-soft),var(--purple-soft));
  border:3px dashed var(--blue);
}
.num-display .nd-num{font-size:74px; font-weight:900; color:var(--blue-deep); line-height:1;}
.num-display .nd-emoji{font-size:26px; min-height:56px; margin-top:10px; line-height:1.4; word-break:break-all;}
.num-display .nd-hint{font-size:14px; color:var(--ink-soft); margin-top:6px;}
.number-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px;}
.num-tile{
  min-height:64px; border-radius:16px; font-size:26px; font-weight:900;
  color:#fff; box-shadow:0 4px 0 rgba(90,75,110,.15);
}
.num-tile:active{transform:translateY(3px); box-shadow:none;}
.num-tile:nth-child(10n+1){background:var(--pink);}
.num-tile:nth-child(10n+2){background:var(--blue);}
.num-tile:nth-child(10n+3){background:var(--green);}
.num-tile:nth-child(10n+4){background:var(--orange);}
.num-tile:nth-child(10n+5){background:var(--purple);}
.num-tile:nth-child(10n+6){background:var(--blue-deep);}
.num-tile:nth-child(10n+7){background:var(--pink-deep);}
.num-tile:nth-child(10n+8){background:var(--green-deep);}
.num-tile:nth-child(10n+9){background:var(--yellow-deep);}
.num-tile:nth-child(10n+10){background:var(--orange-deep);}

/* ===== 九九乘法表 ===== */
.panel-title{font-size:22px; margin-bottom:6px;}
.panel-sub{font-size:14px; color:var(--ink-soft); margin-bottom:14px;}
.mul-table{display:grid; grid-template-columns:repeat(10,1fr); gap:5px;}
.mul-table .mt-corner,.mul-table .mt-head{
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:var(--blue-deep);
}
.mul-table .mt-corner{color:var(--ink-soft); padding-bottom:2px;}
.mul-table .mt-cell{
  aspect-ratio:1/1; min-height:36px; border-radius:12px;
  font-size:17px; font-weight:800; color:var(--ink);
  box-shadow:0 3px 0 rgba(90,75,110,.10);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.05; padding:2px 0;
  transition:transform .12s, background .2s;
}
.mul-table .mt-cell .mt-expr{font-size:13px; font-weight:700; color:var(--ink-soft);}
.mul-table .mt-cell .mt-eq{font-size:16px; font-weight:800; color:var(--ink);}
.mul-table .mt-cell:active{transform:scale(.9);}
.mul-table .mt-cell.flash{background:var(--yellow) !important; color:#fff; transform:scale(1.1);}

/* ===== 出题面板（通用） ===== */
.quiz-card{text-align:center;}
.start-wrap{padding:26px 10px;}
.start-emoji{font-size:72px; line-height:1.2; animation:bounce 2s infinite; will-change:transform;}
.start-wrap p{font-size:17px; color:var(--ink-soft); margin:12px 0 20px;}
.q-progress{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.q-progress .qdot{width:14px; height:14px; border-radius:50%; background:#E8E2F2;}
.q-progress .qdot.done{background:var(--green);}
.q-progress .qdot.cur{background:var(--yellow); transform:scale(1.25);}
.q-count{font-size:15px; font-weight:800; color:var(--ink-soft); margin-left:8px;}
.q-main{padding:18px 8px; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;}
.q-letter{font-size:96px; font-weight:900; line-height:1;}
.q-letter.pink{color:var(--pink-deep);}
.q-prompt{font-size:20px; font-weight:800;}
.q-objects{font-size:34px; line-height:1.6; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:420px;}
.blend-box{display:inline-block; min-width:58px; padding:8px 16px; border-radius:16px; background:#fff; box-shadow:0 4px 0 rgba(0,0,0,.08); font-size:30px; font-weight:900; text-align:center;}
.blend-box.ini{color:var(--teal-deep);}
.blend-box.fin{color:var(--pink-deep);}
.blend-plus{font-size:26px; font-weight:900; color:var(--ink-soft);}
.q-math{font-size:52px; font-weight:900; display:flex; align-items:center; gap:12px;}
.q-math .qmark{color:var(--pink-deep);}
.q-dots{font-size:22px; letter-spacing:2px;}
.q-shape{width:110px; height:110px;}
.q-choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; padding:6px 4px 10px;}
.choice{
  min-height:76px; border-radius:20px; font-size:30px; font-weight:900;
  background:#fff; box-shadow:0 5px 0 rgba(90,75,110,.12); color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .12s; padding:8px;
}
.choice:active{transform:translateY(4px); box-shadow:none;}
.choice.right{background:var(--green); color:#fff; box-shadow:0 5px 0 var(--green-deep); animation:winpop .4s;}
.choice.wrong{background:var(--pink); color:#fff; box-shadow:0 5px 0 var(--pink-deep); animation:shake .4s;}
.choice .cshape{width:44px; height:44px;}
.choice:disabled{cursor:default; opacity:.75;}
.choice.right:disabled,.choice.wrong:disabled{opacity:1;}
@keyframes winpop{0%{transform:scale(1);}50%{transform:scale(1.14);}100%{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}
.q-feedback{min-height:56px; font-size:22px; font-weight:900; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 10px;}
.q-feedback.good{color:var(--green-deep);}
.q-feedback.bad{color:var(--pink-deep);}
.q-next{margin:10px auto 8px; display:block;}
.q-result{padding:30px 16px;}
.q-result .rstar{font-size:84px; animation:bounce 1.6s infinite; will-change:transform;}
.q-result h3{font-size:26px; margin:10px 0 4px;}
.q-result p{font-size:17px; color:var(--ink-soft); margin-bottom:20px;}
.q-result .rrow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ===== 闯关 ===== */
.stage-list{display:flex; flex-direction:column; gap:14px;}
.stage-card{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:18px 20px; display:flex; align-items:center; gap:16px;
  border:3px solid transparent;
}
.stage-card .snum{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:900; color:#fff;
}
.stage-card:nth-child(1) .snum{background:var(--pink);}
.stage-card:nth-child(2) .snum{background:var(--blue);}
.stage-card:nth-child(3) .snum{background:var(--green);}
.stage-card:nth-child(4) .snum{background:var(--orange);}
.stage-card:nth-child(5) .snum{background:var(--purple);}
.stage-card .sinfo{flex:1; min-width:0;}
.stage-card h3{font-size:20px;}
.stage-card p{font-size:13px; color:var(--ink-soft);}
.stage-card .sstars{color:var(--yellow-deep); font-size:15px; font-weight:800; margin-top:4px;}
.stage-card.locked{opacity:.6;}
.stage-card.locked .snum{background:#C9C2D8;}
.stage-card.done{border-color:var(--green); background:var(--green-soft);}

/* ===== 底部 Tab（移动端） ===== */
#bottombar{display:none;}

/* ===== 提示 ===== */
#toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font-size:17px; font-weight:700;
  padding:14px 26px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:99; max-width:86vw; text-align:center;
  box-shadow:0 10px 24px rgba(90,75,110,.3);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:98; overflow:hidden;}
.confetti{position:absolute; top:-40px; width:10px; height:10px; background:var(--pink); animation:fall linear forwards; will-change:transform;}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg); opacity:.7;}}

/* ===== 移动端 ===== */
/* ===== 汉字识字 ===== */
.page-head.hanzi{background:linear-gradient(120deg,#FF9A8B,#FF6B6B);}
.grade-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px;}
.grade-tab{padding:8px 14px; border:none; border-radius:999px; background:#fff; color:var(--ink); font-weight:700; font-size:14px; box-shadow:0 2px 0 rgba(90,75,110,.08); cursor:pointer; transition:transform .12s;}
.grade-tab.active{background:var(--orange-deep); color:#fff;}
.grade-tab:active{transform:scale(.95);}
.hanzi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:10px;}
.hanzi-tile{aspect-ratio:1/1; border:none; border-radius:14px; background:#fff; font-size:26px; font-weight:800; color:var(--ink); box-shadow:0 3px 0 rgba(90,75,110,.10); cursor:pointer; transition:transform .12s; display:flex; align-items:center; justify-content:center;}
.hanzi-tile:active{transform:scale(.9);}
.practice-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.btn-hanzi{background:var(--orange-deep); color:#fff;}
.btn-hanzi:hover{background:#E5533B;}
.q-char-big{font-size:64px; font-weight:800; color:var(--ink); margin:10px 0;}
.q-word-blank{font-size:34px; font-weight:800; color:var(--ink); letter-spacing:6px; margin:8px 0;}
.btn-ghost.on{background:var(--yellow); color:#fff; border-color:var(--yellow);}
.wrong-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
/* 汉字详情弹窗 */
.modal-mask{position:fixed; inset:0; background:rgba(40,30,60,.45); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px;}
.modal-mask.hidden{display:none;}
.hanzi-detail-card{background:#fff; border-radius:24px; padding:20px 18px; width:min(340px,92vw); text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25); position:relative;}
.hd-close{position:absolute; top:10px; right:12px; border:none; background:none; font-size:20px; cursor:pointer; color:var(--ink-soft); line-height:1;}
.hd-writer{width:200px; height:200px; margin:4px auto 2px;}
.hw-fallback{font-size:120px; font-weight:800; color:var(--ink); line-height:200px;}
.hd-char{font-size:28px; font-weight:800; color:var(--ink);}
.hd-pinyin{color:var(--orange-deep); font-weight:700; font-size:18px; margin-bottom:2px;}
.hd-meta{display:flex; gap:18px; justify-content:center; color:var(--ink-soft); font-size:14px; margin:4px 0;}
.hd-meta b{color:var(--ink);}
.hd-words{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0;}
.hd-word{background:var(--pink-soft); color:var(--pink-deep); padding:5px 12px; border-radius:999px; font-weight:700; cursor:pointer;}
.hd-mind,.hd-rhyme{margin:8px 0 0; padding:10px 12px; border-radius:14px; text-align:left; font-size:14px; line-height:1.7;}
.hd-mind{background:var(--green-soft); color:var(--ink);}
.hd-rhyme{background:var(--orange-soft); color:var(--ink);}
.hd-label{display:block; font-weight:800; font-size:13px; color:var(--orange-deep); margin-bottom:2px;}
.hd-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px;}

@media (max-width:860px){
  #sidebar{display:none;}
  #main{padding:14px 14px calc(96px + env(safe-area-inset-bottom));}
  #bottombar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
    border-top:2px solid #F0EAF7;
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .btab{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    min-width:56px; min-height:56px; justify-content:center;
    color:var(--ink-soft); font-size:11px; font-weight:700;
  }
  .btab svg{width:24px; height:24px;}
  .btab.active{color:var(--purple-deep);}
  .btab.active .bcirc{background:var(--purple-soft);}
  .btab .bcirc{width:42px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:transparent;}
  .btab{min-width:48px; font-size:10px;}
  .btab svg{width:20px; height:20px;}
  .btab .bcirc{width:38px; height:32px;}
  .q-letter{font-size:72px;}
  .q-math{font-size:40px;}
  .page-head h1{font-size:23px;}
  .pchar .hz{font-size:27px;}
  .letter-grid{grid-template-columns:repeat(3,1fr);}
  .number-grid{grid-template-columns:repeat(5,1fr);}
  .mul-table{gap:3px;}
  .mul-table .mt-cell{min-height:30px; border-radius:9px;}
  .mul-table .mt-cell .mt-expr{font-size:11px;}
  .mul-table .mt-cell .mt-eq{font-size:13px;}
  .mul-table .mt-corner,.mul-table .mt-head{font-size:13px;}
  .hanzi-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));}
  .hd-writer{width:170px; height:170px;}
  .hw-fallback{font-size:100px; line-height:170px;}
}