/* =====================================================
   书山有路 · 五年级上册语文随堂闯关
   styles.css —— 全部样式
===================================================== */

/* ============ 基础与变量 ============ */
:root{
  --paper:#F4EFE3;        /* 宣纸底 */
  --paper-2:#FBF8F0;      /* 卡片纸 */
  --paper-3:#ECE4D2;      /* 深一档纸 */
  --ink:#3B3429;          /* 墨色 */
  --ink-soft:#6E6555;     /* 淡墨 */
  --ink-faint:#A89F8C;
  --cinnabar:#B5432E;     /* 朱砂 */
  --cinnabar-deep:#8E3422;
  --teal:#2F6B5F;         /* 黛青 */
  --teal-soft:#4E8578;
  --gold:#DFA32A;         /* 金 */
  --gold-soft:#F2D78C;
  --jade:#7FA96B;         /* 竹绿 */
  --shadow:0 10px 30px rgba(59,52,41,.10);
  --radius:18px;
  --serif:"Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{height:100%}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(223,163,42,.14), transparent 60%),
    radial-gradient(ellipse 70% 30% at 90% 105%, rgba(47,107,95,.10), transparent 65%);
  min-height:100vh;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}

#app{
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
  padding-bottom:96px;
  position:relative;
}

button{
  font-family:inherit;
  border:none;
  cursor:pointer;
  color:inherit;
  background:none;
}

button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

img{display:block;max-width:100%}

/* ============ 通用组件 ============ */
.card{
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 22px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:active{transform:scale(.96)}

.btn-primary{
  background:var(--cinnabar);
  color:#FFF6EC;
  box-shadow:0 6px 0 var(--cinnabar-deep), 0 10px 18px rgba(181,67,46,.28);
}
.btn-primary:active{box-shadow:0 2px 0 var(--cinnabar-deep)}

.btn-teal{
  background:var(--teal);
  color:#F4FBF8;
  box-shadow:0 6px 0 #20483F, 0 10px 18px rgba(47,107,95,.25);
}
.btn-teal:active{box-shadow:0 2px 0 #20483F}

.btn-ghost{
  background:var(--paper-3);
  color:var(--ink);
  border:1px solid rgba(110,101,85,.25);
}

.btn-gold{
  background:var(--gold);
  color:#4A3408;
  box-shadow:0 6px 0 #B57F1D;
}
.btn-gold:active{box-shadow:0 2px 0 #B57F1D}

.btn-block{width:100%}

.btn[disabled]{
  opacity:.45;
  pointer-events:none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--paper-3);
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
}

.ico{
  width:1em;
  height:1em;
  flex:none;
  vertical-align:-.12em;
  fill:currentColor;
}

.page{animation:pageIn .35s ease both}

@keyframes pageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.section-title{
  font-family:var(--serif);
  font-weight:900;
  font-size:22px;
  display:flex;
  align-items:center;
  gap:10px;
}

.section-title .seal{
  width:34px;
  height:34px;
  border-radius:8px;
  background:var(--cinnabar);
  color:#FFF6EC;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:inset 0 0 0 2px rgba(255,246,236,.5);
}

.muted{
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.6;
}

.hr{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,101,85,.25),transparent);
  margin:14px 0;
}

/* 顶部墨山装饰 */
.ink-mountain{
  position:fixed;
  left:0;right:0;top:0;
  height:140px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 40% 60% at 8% 100%, rgba(47,107,95,.16), transparent 70%),
    radial-gradient(ellipse 45% 70% at 55% 100%, rgba(47,107,95,.12), transparent 70%),
    radial-gradient(ellipse 35% 55% at 90% 100%, rgba(47,107,95,.15), transparent 70%);
}

main{
  position:relative;
  z-index:1;
  padding:18px 16px 8px;
}

/* ============ 顶部状态条 ============ */
.topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px 6px;
  flex-wrap:wrap;
}

.topbar .brand{
  font-family:var(--serif);
  font-weight:900;
  font-size:19px;
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(251,248,240,.9);
  border:1px solid rgba(110,101,85,.2);
  border-radius:999px;
  padding:5px 11px;
  font-size:13px;
  font-weight:700;
}

.chip .ico{color:var(--gold)}
.chip.red .ico{color:var(--cinnabar)}
.chip.teal .ico{color:var(--teal)}

/* ============ 首页 ============ */
.hero{
  text-align:center;
  padding:10px 0 4px;
}

.hero .hero-img{
  width:180px;
  height:180px;
  margin:6px auto 10px;
  border-radius:50%;
  overflow:hidden;
  border:5px solid var(--paper-2);
  box-shadow:0 12px 30px rgba(59,52,41,.18), 0 0 0 2px rgba(181,67,46,.25);
  background:var(--paper-2);
}

.hero .hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero h1{
  font-family:var(--serif);
  font-weight:900;
  font-size:34px;
  letter-spacing:.08em;
  background:linear-gradient(180deg,#3B3429 60%,#8E3422);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero .sub{
  font-size:15px;
  color:var(--ink-soft);
  margin-top:6px;
  letter-spacing:.14em;
}

.hero .stamp{
  display:inline-block;
  margin-top:10px;
  border:2px solid var(--cinnabar);
  color:var(--cinnabar);
  border-radius:8px;
  padding:4px 12px;
  font-family:var(--serif);
  font-weight:700;
  font-size:13px;
  transform:rotate(-3deg);
}

.hero-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
  max-width:340px;
  margin-left:auto;
  margin-right:auto;
}

.daily-card{margin-top:18px}

.daily-card .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  font-size:14px;
}

.progress{
  height:10px;
  border-radius:999px;
  background:var(--paper-3);
  overflow:hidden;
  margin-top:8px;
}

.progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#E8BC5A);
  transition:width .4s ease;
}

.task-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-soft);
  margin-top:8px;
}

.task-line.done{
  color:var(--teal);
  font-weight:700;
}

.task-line .check{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--ink-faint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}

.task-line.done .check{
  border-color:var(--teal);
  background:var(--teal);
  color:#fff;
}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:16px;
}

.mini-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:14px;
  padding:12px;
  font-weight:700;
  font-size:14px;
  text-align:left;
  box-shadow:0 4px 12px rgba(59,52,41,.06);
}

.mini-item .m-ico{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--paper-3);
  color:var(--teal);
  font-size:20px;
}

.mini-item .m-ico.red{color:var(--cinnabar)}
.mini-item .m-ico.gold{color:var(--gold)}

.mini-item small{
  display:block;
  font-weight:500;
  color:var(--ink-soft);
  font-size:11px;
}

/* ============ 关卡地图（书签） ============ */
.map-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.bookmark-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bookmark{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.18);
  border-radius:14px;
  padding:14px 16px 14px 22px;
  box-shadow:var(--shadow);
  text-align:left;
  min-height:76px;
  overflow:hidden;
  transition:transform .12s ease;
}

.bookmark:active{transform:scale(.98)}

.bookmark .tag{
  position:absolute;
  left:0;top:0;bottom:0;
  width:8px;
}

.bookmark .lv-num{
  width:46px;
  height:46px;
  border-radius:12px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-weight:900;
  font-size:18px;
  color:#FFF6EC;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
}

.bookmark .lv-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:16px;
}

.bookmark .lv-sub{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:3px;
}

.bookmark .lv-right{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
}

.stars{
  display:inline-flex;
  gap:2px;
  color:var(--ink-faint);
}

.stars .ico{
  width:16px;
  height:16px;
}

.stars .on{color:var(--gold)}

.bookmark.locked{
  opacity:.62;
  filter:grayscale(.4);
}

.bookmark.locked .lv-num{background:var(--ink-faint)!important}

.lock-tip{
  font-size:12px;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:4px;
}

/* 关卡分组标题 */
.level-group-title{
  font-family:var(--serif);
  font-weight:900;
  font-size:15px;
  color:var(--ink-soft);
  letter-spacing:.1em;
  margin:16px 0 8px;
  padding-left:6px;
  border-left:4px solid var(--cinnabar);
}

/* ============ 答题页 ============ */
.play-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.play-progress{
  height:8px;
  border-radius:999px;
  background:var(--paper-3);
  overflow:hidden;
  margin-bottom:16px;
}

.play-progress i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--cinnabar),#D9684F);
  transition:width .3s ease;
}

.q-card{
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 18px;
  position:relative;
}

.q-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.q-no{
  font-family:var(--serif);
  font-weight:700;
  color:var(--cinnabar);
  font-size:14px;
}

.timer{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
}

.timer .bar{
  width:120px;
  height:8px;
  border-radius:999px;
  background:var(--paper-3);
  overflow:hidden;
}

.timer .bar i{
  display:block;
  height:100%;
  width:100%;
  background:var(--teal);
  border-radius:999px;
}

.timer .bar i.danger{background:var(--cinnabar)}

.q-text{
  font-family:var(--serif);
  font-weight:700;
  font-size:19px;
  line-height:1.75;
  min-height:64px;
}

.options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:52px;
  border:2px solid rgba(110,101,85,.25);
  border-radius:14px;
  background:var(--paper-2);
  padding:12px 14px;
  font-size:15px;
  line-height:1.55;
  text-align:left;
  transition:all .15s ease;
}

.opt .o-key{
  width:28px;
  height:28px;
  border-radius:8px;
  flex:none;
  background:var(--paper-3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
  color:var(--ink-soft);
}

.opt.correct{
  border-color:var(--teal);
  background:rgba(47,107,95,.08);
}
.opt.correct .o-key{
  background:var(--teal);
  color:#fff;
}

.opt.wrong{
  border-color:var(--cinnabar);
  background:rgba(181,67,46,.08);
}
.opt.wrong .o-key{
  background:var(--cinnabar);
  color:#fff;
}

.opt.dim{opacity:.5}

.opt[disabled]{cursor:default}

/* 印章反馈 */
.seal-fx{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%) scale(0) rotate(-14deg);
  z-index:5;
  pointer-events:none;
  opacity:0;
}

.seal-fx.show{
  animation:sealIn .5s cubic-bezier(.2,1.6,.4,1) forwards;
}

.seal-fx .ring{
  width:120px;
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-weight:900;
  font-size:46px;
  color:var(--cinnabar);
  border:5px solid var(--cinnabar);
  background:rgba(251,248,240,.55);
}

.seal-fx.sq .ring{
  border-radius:16px;
  width:110px;
  height:110px;
  font-size:38px;
}

@keyframes sealIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-24deg)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(-10deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-12deg)}
}

.explain{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.7;
  background:rgba(223,163,42,.12);
  border:1px dashed rgba(181,67,46,.35);
  display:none;
}

.explain.show{
  display:block;
  animation:pageIn .3s ease;
}

.explain b{color:var(--cinnabar)}

.reward-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  font-size:14px;
  font-weight:700;
  color:var(--gold);
  opacity:0;
}

.reward-line.show{
  opacity:1;
  transition:opacity .3s;
}

.streak-badge{
  position:fixed;
  top:120px;
  left:50%;
  transform:translateX(-50%) scale(0);
  z-index:20;
  background:var(--gold);
  color:#4A3408;
  font-weight:900;
  border-radius:999px;
  padding:10px 22px;
  box-shadow:0 8px 24px rgba(223,163,42,.5);
  font-size:16px;
}

.streak-badge.show{
  animation:streakPop .8s ease forwards;
}

@keyframes streakPop{
  0%{transform:translateX(-50%) scale(0)}
  45%{transform:translateX(-50%) scale(1.15)}
  70%{transform:translateX(-50%) scale(1)}
  100%{transform:translateX(-50%) scale(1);opacity:1}
}

/* ============ 结算页 ============ */
.result-hero{
  text-align:center;
  padding:16px 0 6px;
}

.result-hero .r-img{
  width:140px;
  height:140px;
  margin:0 auto 8px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--paper-2);
  box-shadow:0 10px 26px rgba(59,52,41,.16);
}

.result-hero .r-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.result-hero h2{
  font-family:var(--serif);
  font-weight:900;
  font-size:28px;
  letter-spacing:.06em;
}

.big-stars{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:12px 0 4px;
}

.big-stars .ico{
  width:44px;
  height:44px;
  color:var(--ink-faint);
  transition:all .4s ease;
  transform:scale(.4);
  opacity:0;
}

.big-stars .ico.pop{
  color:var(--gold);
  transform:scale(1);
  opacity:1;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}

.stat-box{
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:14px;
  padding:12px 8px;
  text-align:center;
}

.stat-box .n{
  font-family:var(--serif);
  font-weight:900;
  font-size:22px;
}

.stat-box .l{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
}

.stat-box.gold .n{color:var(--gold)}
.stat-box.teal .n{color:var(--teal)}
.stat-box.red .n{color:var(--cinnabar)}

.result-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.fail-note{
  margin-top:14px;
  background:rgba(181,67,46,.07);
  border:1px solid rgba(181,67,46,.25);
  border-radius:14px;
  padding:12px 14px;
  font-size:13px;
  color:var(--cinnabar-deep);
  line-height:1.7;
}

.new-badge{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  background:rgba(223,163,42,.12);
  border:1px solid rgba(223,163,42,.5);
  border-radius:14px;
  padding:12px 14px;
}

.new-badge .b-ico{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--gold);
  color:#4A3408;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex:none;
}

.new-badge b{
  font-family:var(--serif);
  font-size:15px;
}

.new-badge p{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ============ 商店 ============ */
.shop-balance{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(223,163,42,.14);
  border:1px solid rgba(223,163,42,.45);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;
}

.shop-balance .big{
  font-family:var(--serif);
  font-weight:900;
  font-size:26px;
  color:#8E6420;
}

.reward-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
}

.reward-item .r-ico{
  width:44px;
  height:44px;
  border-radius:12px;
  flex:none;
  background:var(--paper-3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:var(--cinnabar);
}

.reward-item .r-info{flex:1}

.reward-item .r-name{
  font-weight:700;
  font-size:15px;
}

.reward-item .r-desc{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
}

.reward-item .r-cost{
  font-weight:900;
  color:var(--gold);
  font-size:15px;
}

.claims-list{margin-top:8px}

.claim-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--paper-2);
  border:1px dashed rgba(47,107,95,.4);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:8px;
}

.claim-item .c-info{
  flex:1;
  font-size:13px;
}

.claim-item .c-info b{
  font-family:var(--serif);
  font-size:15px;
}

.claim-item .c-time{
  font-size:11px;
  color:var(--ink-faint);
}

/* ============ 勋章 ============ */
.badge-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:14px;
}

.badge-item{
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:14px;
  padding:16px 12px;
  text-align:center;
}

.badge-item .b-ico{
  width:56px;
  height:56px;
  margin:0 auto 8px;
  border-radius:50%;
  background:var(--paper-3);
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

.badge-item.got .b-ico{
  background:linear-gradient(160deg,#F2D78C,#DFA32A);
  color:#4A3408;
  box-shadow:0 6px 16px rgba(223,163,42,.4);
}

.badge-item .b-name{
  font-family:var(--serif);
  font-weight:700;
  font-size:14px;
}

.badge-item .b-desc{
  font-size:11px;
  color:var(--ink-soft);
  margin-top:4px;
  line-height:1.5;
}

.badge-item.got .b-desc{color:var(--teal)}

/* ============ 列表页（每日 / 错题 / 我的 / 设置） ============ */
.list-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
  text-align:left;
  width:100%;
  min-height:52px;
}

.list-item .l-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  flex:none;
  background:var(--paper-3);
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.list-item .l-ico.red{color:var(--cinnabar)}
.list-item .l-ico.gold{color:var(--gold)}

.list-item .l-info{flex:1}

.list-item .l-title{
  font-weight:700;
  font-size:15px;
}

.list-item .l-sub{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
}

.list-item .arrow{
  color:var(--ink-faint);
  font-size:18px;
}

.time-ring{
  text-align:center;
  padding:10px 0 4px;
}

.time-ring .big{
  font-family:var(--serif);
  font-weight:900;
  font-size:44px;
  letter-spacing:.05em;
}

.time-ring .big small{
  font-size:18px;
  color:var(--ink-soft);
}

.time-ring .lbl{
  color:var(--ink-soft);
  font-size:13px;
  margin-top:4px;
}

.daily-goal{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.16);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
}

.daily-goal .g-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  flex:none;
  background:var(--paper-3);
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.daily-goal .g-info{flex:1}

.daily-goal .g-name{
  font-weight:700;
  font-size:14px;
}

.daily-goal .g-state{
  font-size:12px;
  color:var(--ink-faint);
  margin-top:2px;
}

.daily-goal.done{
  border-color:rgba(47,107,95,.4);
  background:rgba(47,107,95,.06);
}

.daily-goal.done .g-state{
  color:var(--teal);
  font-weight:700;
}

.mistake-item{
  background:var(--paper-2);
  border:1px solid rgba(181,67,46,.25);
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
}

.mistake-item .m-q{
  font-family:var(--serif);
  font-weight:700;
  font-size:15px;
  line-height:1.7;
}

.mistake-item .m-from{
  font-size:11px;
  color:var(--ink-faint);
  margin-bottom:6px;
}

.mistake-item .m-ans{
  font-size:13px;
  margin-top:8px;
  line-height:1.7;
}

.mistake-item .m-ans .ok{
  color:var(--teal);
  font-weight:700;
}

.mistake-item .m-ans .no{
  color:var(--cinnabar);
  font-weight:700;
  text-decoration:line-through;
}

/* ============ 模态框 ============ */
.modal-mask{
  position:fixed;
  inset:0;
  background:rgba(59,52,41,.5);
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  animation:fadeIn .2s ease;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.modal{
  background:var(--paper-2);
  border-radius:20px;
  max-width:400px;
  width:100%;
  padding:24px;
  box-shadow:0 20px 60px rgba(59,52,41,.35);
  animation:pageIn .3s ease;
  text-align:center;
}

.modal h3{
  font-family:var(--serif);
  font-weight:900;
  font-size:22px;
  margin-bottom:8px;
}

.modal p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.7;
}

.modal .m-ico{
  width:64px;
  height:64px;
  border-radius:50%;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
}

.modal .m-ico.gold{
  background:rgba(223,163,42,.18);
  color:var(--gold);
}

.modal .m-ico.teal{
  background:rgba(47,107,95,.14);
  color:var(--teal);
}

.modal .m-ico.red{
  background:rgba(181,67,46,.12);
  color:var(--cinnabar);
}

.modal .m-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

/* ============ 底部导航 ============ */
.tabbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  z-index:30;
  width:100%;
  max-width:640px;
  background:rgba(251,248,240,.96);
  border-top:1px solid rgba(110,101,85,.18);
  display:flex;
  padding:6px 8px calc(8px + env(safe-area-inset-bottom));
  backdrop-filter:blur(8px);
}

.tabbar button{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:8px 0;
  font-size:11px;
  font-weight:700;
  color:var(--ink-faint);
  min-height:52px;
  border-radius:12px;
}

.tabbar button .ico{
  width:22px;
  height:22px;
}

.tabbar button.on{
  color:var(--cinnabar);
  background:rgba(181,67,46,.07);
}

/* ============ 其它 ============ */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--ink-soft);
  font-size:14px;
  font-weight:700;
  min-height:44px;
  padding:0 6px;
}

.quest-num{
  font-family:var(--serif);
  font-weight:900;
}

.hint{
  font-size:12px;
  color:var(--ink-faint);
  text-align:center;
  margin-top:12px;
  line-height:1.7;
}

.nav-jump{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  color:#fff;
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(79,172,254,.35);
  transition:transform .15s;
}
.nav-jump:active{transform:scale(.95)}

/* ============ 数学跳转按钮 ============ */
.nav-jump{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg,#4facfe,#00c6ff);
  color:#fff;
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(79,172,254,.4);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.nav-jump:hover{box-shadow:0 6px 18px rgba(79,172,254,.55)}
.nav-jump:active{transform:scale(.95)}

/* 首页小卡片里数学卡片的强调色 */
.mini-item .m-ico.blue{color:#2E86C1}

/* 首页 mini-grid 改为三列，容纳更多入口 */
.mini-grid{grid-template-columns:repeat(3,1fr)}

/* 数学闯关按钮 */
.btn-blue{
  background:#2E86C1;
  color:#fff;
  box-shadow:0 6px 0 #1B4F72, 0 10px 18px rgba(46,134,193,.3);
}
.btn-blue:active{box-shadow:0 2px 0 #1B4F72}

/* 顶栏数学跳转 */
.nav-jump{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#4facfe,#00c6ff);color:#fff;
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;
  text-decoration:none;box-shadow:0 4px 12px rgba(79,172,254,.4);
}
.nav-jump:active{transform:scale(.95)}

@media (max-width:420px){
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .nav-jump{font-size:12px;padding:5px 10px}
}

/* ============ 响应式微调 ============ */
@media (max-width:420px){
  .hero h1{font-size:28px}
  .hero .hero-img{width:150px;height:150px}
  .q-text{font-size:17px}
  .opt{font-size:14px;padding:10px 12px}
  .bookmark .lv-title{font-size:15px}
  .timer .bar{width:90px}
  .result-hero h2{font-size:22px}
  .time-ring .big{font-size:36px}
  .section-title{font-size:19px}
  .stat-box .n{font-size:19px}
}

/* =====================================================
   移动端适配补丁 —— 追加到 styles.css 末尾
   覆盖 iOS / Android / 微信内置浏览器
===================================================== */

/* ---------- 1. 基础：防止横向溢出 & iOS 输入框缩放 ---------- */
html, body{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-y:none;
}
body{ -webkit-overflow-scrolling:touch; }
#app{ overflow-x:hidden; }
img, svg{ max-width:100%; }

/* iOS 下输入框 font-size < 16px 会自动放大页面 */
input, textarea, select{
  font-size:16px !important;
}

/* ---------- 2. 触摸优化 ---------- */
button, a, .opt, .bookmark, .mini-item, .list-item,
.reward-item, .level-card, .nav-jump, .tabbar button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 3. 顶栏：窄屏紧凑排布 ---------- */
@media (max-width:480px){
  .topbar{ padding:10px 12px 6px; gap:6px; }
  .topbar .brand{ font-size:16px; gap:5px; }
  .topbar .brand .ico{ width:18px; height:18px; }
  .nav-jump{ padding:5px 10px; font-size:12px; }
  .chip{ padding:4px 9px; font-size:12px; }
  .chip .ico{ width:14px; height:14px; }
}
@media (max-width:360px){
  .topbar .brand{
    font-size:14px;
    flex:1 1 100%;
    margin-right:0;
    margin-bottom:4px;
  }
  .nav-jump, .chip{ font-size:11px; padding:4px 8px; }
}

/* ---------- 4. 首页 hero ---------- */
@media (max-width:480px){
  .hero{ padding:6px 0 2px; }
  .hero .hero-img{
    width:130px; height:130px;
    margin:4px auto 8px;
    border-width:4px;
  }
  .hero h1{ font-size:28px; letter-spacing:.06em; }
  .hero .sub{ font-size:13px; letter-spacing:.1em; }
  .hero .stamp{ font-size:12px; padding:3px 10px; }
  .hero-actions{ gap:10px; margin-top:14px; max-width:100%; }
  .btn{ min-height:46px; font-size:15px; padding:0 18px; }
}
@media (max-width:360px){
  .hero .hero-img{ width:110px; height:110px; }
  .hero h1{ font-size:24px; }
}

/* ---------- 5. mini-grid ---------- */
@media (max-width:480px){
  .mini-grid{ grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; }
  .mini-item{ padding:10px; font-size:13px; gap:8px; }
  .mini-item .m-ico{ width:34px; height:34px; font-size:17px; }
  .mini-item small{ font-size:10px; }
}
@media (max-width:320px){
  .mini-grid{ grid-template-columns:1fr; }
}

/* ---------- 6. 答题页 ---------- */
@media (max-width:480px){
  main{ padding:14px 12px 8px; }
  .play-top{ gap:6px; margin-bottom:10px; }
  .play-top .pill{ padding:4px 10px; font-size:12px; }
  .back-btn{ font-size:13px; min-height:40px; padding:0 4px; }
  .play-progress{ margin-bottom:12px; }
  .q-card{ padding:16px 14px; border-radius:16px; }
  .q-meta{ margin-bottom:10px; }
  .q-no{ font-size:13px; }
  .timer{ font-size:12px; }
  .timer .bar{ width:80px; height:6px; }
  .q-text{ font-size:16px; line-height:1.65; min-height:52px; }
  .options{ gap:8px; margin-top:12px; }
  .opt{
    min-height:48px;
    padding:11px 12px;
    font-size:14px;
    border-radius:12px;
    gap:10px;
  }
  .opt .o-key{ width:24px; height:24px; font-size:13px; border-radius:6px; }
  .explain{ margin-top:12px; padding:10px 12px; font-size:13px; }
  .seal-fx .ring{ width:100px; height:100px; font-size:38px; border-width:4px; }
  .seal-fx.sq .ring{ width:90px; height:90px; font-size:32px; }
}

/* ---------- 7. 结算页 ---------- */
@media (max-width:480px){
  .result-hero{ padding:10px 0 4px; }
  .result-hero .r-img{ width:110px; height:110px; border-width:3px; }
  .result-hero h2{ font-size:22px; }
  .big-stars .ico{ width:36px; height:36px; }
  .stat-grid{ gap:6px; margin-top:12px; }
  .stat-box{ padding:10px 6px; border-radius:12px; }
  .stat-box .n{ font-size:18px; }
  .stat-box .l{ font-size:11px; }
  .result-actions{ gap:8px; margin-top:14px; }
  .new-badge{ padding:10px 12px; gap:10px; }
  .new-badge .b-ico{ width:38px; height:38px; font-size:20px; }
  .new-badge b{ font-size:14px; }
  .new-badge p{ font-size:11px; }
}

/* ---------- 8. 关卡地图 ---------- */
@media (max-width:480px){
  .bookmark{
    padding:12px 12px 12px 18px;
    gap:10px;
    min-height:68px;
    border-radius:12px;
  }
  .bookmark .lv-num{ width:40px; height:40px; font-size:16px; border-radius:10px; }
  .bookmark .lv-title{ font-size:15px; }
  .bookmark .lv-sub{ font-size:11px; }
  .bookmark .tag{ width:6px; }
  .lock-tip{ font-size:11px; }
  .level-group-title{ font-size:13px; margin:14px 0 6px; padding-left:5px; }
}

/* ---------- 9. 底部 tabbar ---------- */
@media (max-width:480px){
  .tabbar{ padding:4px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar button{ min-height:48px; padding:6px 0; font-size:10px; gap:2px; }
  .tabbar button .ico{ width:20px; height:20px; }
}

/* ---------- 10. 模态框 ---------- */
@media (max-width:480px){
  .modal-mask{ padding:18px; }
  .modal{ padding:20px 18px; border-radius:18px; }
  .modal h3{ font-size:19px; }
  .modal p{ font-size:13px; }
  .modal .m-ico{ width:54px; height:54px; font-size:26px; margin-bottom:10px; }
  .modal .m-actions{ gap:8px; margin-top:14px; }
}

/* ---------- 11. 商店 / 勋章 / 我的 / 设置 ---------- */
@media (max-width:480px){
  .reward-item{ padding:12px; gap:10px; border-radius:12px; }
  .reward-item .r-ico{ width:38px; height:38px; font-size:19px; }
  .reward-item .r-name{ font-size:14px; }
  .reward-item .r-desc{ font-size:11px; }
  .reward-item .r-cost{ font-size:14px; }
  .shop-balance{ padding:12px 14px; gap:8px; }
  .shop-balance .big{ font-size:22px; }
  .claim-item{ padding:10px 12px; gap:8px; }
  .claim-item .c-info b{ font-size:14px; }
  .claim-item .c-time{ font-size:10px; }

  .badge-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .badge-item{ padding:12px 8px; border-radius:12px; }
  .badge-item .b-ico{ width:46px; height:46px; font-size:22px; margin-bottom:6px; }
  .badge-item .b-name{ font-size:13px; }
  .badge-item .b-desc{ font-size:10px; }

  .list-item{ padding:12px 14px; gap:10px; border-radius:12px; min-height:48px; }
  .list-item .l-ico{ width:36px; height:36px; font-size:18px; border-radius:9px; }
  .list-item .l-title{ font-size:14px; }
  .list-item .l-sub{ font-size:11px; }
  .list-item .arrow{ font-size:16px; }

  .daily-goal{ padding:12px 14px; gap:10px; border-radius:12px; }
  .daily-goal .g-ico{ width:36px; height:36px; font-size:18px; }
  .daily-goal .g-name{ font-size:13px; }
  .daily-goal .g-state{ font-size:11px; }

  .mistake-item{ padding:12px; border-radius:12px; }
  .mistake-item .m-q{ font-size:14px; }
  .mistake-item .m-from{ font-size:10px; }
  .mistake-item .m-ans{ font-size:12px; }

  .time-ring .big{ font-size:36px; }
  .time-ring .big small{ font-size:15px; }
  .time-ring .lbl{ font-size:12px; }

  .section-title{ font-size:19px; }
  .section-title .seal{ width:28px; height:28px; font-size:15px; }
  .map-head{ margin-bottom:12px; }
  .card{ padding:14px; border-radius:16px; }
}
@media (max-width:360px){
  main{ padding:12px 10px 6px; }
  .q-card{ padding:14px 12px; }
  .opt{ padding:10px; font-size:13px; }
  .q-text{ font-size:15px; }
  .stat-box .n{ font-size:16px; }
  .btn{ font-size:14px; min-height:44px; }
  .big-stars .ico{ width:32px; height:32px; }
}

/* ---------- 12. 横屏 / 大屏 ---------- */
@media (min-width:641px){
  #app{ box-shadow:0 0 60px rgba(59,52,41,.12); }
}

/* ---------- 13. iOS 刘海屏底部遮挡 ---------- */
@supports(padding:max(0px)){
  #app{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- 14. iOS 100vh 问题（用 dvh） ---------- */
@supports(height:100dvh){
  #app{ min-height:100dvh; }
  body{ min-height:100dvh; }
}

/* ---------- 15. 减少动画（无障碍） ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =====================================================
   数学闯关（扩展样式）—— 与语文水墨风格统一
===================================================== */

/* 单元卡片 */
.math-unit{
  position:relative;
  background:var(--paper-2);
  border:1px solid rgba(110,101,85,.18);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}
.math-unit .u-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.math-unit .u-badge{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:18px;color:#FFF6EC;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
}
.math-unit .u-title{font-family:var(--serif);font-weight:900;font-size:15px}
.math-unit .u-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.math-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.math-stage{
  border-radius:12px;padding:10px 6px;text-align:center;
  background:var(--paper-3);color:var(--ink-faint);
  border:2px dashed rgba(110,101,85,.2);
  font-size:13px;font-weight:700;cursor:not-allowed;
  font-family:inherit;
}
.math-stage.open{
  background:linear-gradient(160deg,#F2D78C,#DFA32A);color:#4A3408;
  border:2px solid #B57F1D;box-shadow:0 3px 0 #B57F1D;cursor:pointer;
}
.math-stage.open:active{transform:translateY(2px);box-shadow:0 1px 0 #B57F1D}
.math-stage.done{
  background:linear-gradient(160deg,#B8E6C5,#7FD39A);color:#1B5E36;
  border:2px solid #4E8578;box-shadow:0 3px 0 #4E8578;
}
.math-stage .st-no{font-size:11px;opacity:.85;display:block}
.math-stage .st-lbl{font-size:14px;margin-top:2px;display:block;min-height:18px}

/* 数学答题页 */
.q-box{
  background:var(--paper-2);border:1px solid rgba(110,101,85,.16);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 18px;margin-bottom:14px;
}
.q-text-math{
  font-family:var(--serif);font-weight:700;
  font-size:19px;line-height:1.75;min-height:64px;margin-bottom:14px;
}
.q-text-math svg{max-width:100%;height:auto;display:block;margin:10px auto 0}

.blank-row{display:flex;gap:10px;align-items:center;margin-bottom:14px}
input.q-input{
  flex:1;font-size:20px;font-weight:900;text-align:center;
  padding:12px;border-radius:14px;
  border:2px solid rgba(110,101,85,.28);
  background:var(--paper-2);color:var(--ink);font-family:inherit;
}
input.q-input:focus{outline:none;border-color:var(--cinnabar);background:rgba(181,67,46,.04)}

.fb{
  border-radius:12px;padding:12px 14px;
  font-weight:700;font-size:14px;margin-bottom:12px;
  display:none;line-height:1.65;
}
.fb.ok{background:rgba(47,107,95,.1);border:1px dashed rgba(47,107,95,.4);color:#20483F;display:block}
.fb.no{background:rgba(181,67,46,.08);border:1px dashed rgba(181,67,46,.4);color:var(--cinnabar-deep);display:block}
.fb .explain{font-weight:500;font-size:13px;margin-top:6px;color:var(--ink-soft)}

/* 连击弹窗 */
.combo-fx{
  position:fixed;left:50%;top:22%;transform:translateX(-50%) scale(0);
  z-index:60;font-family:var(--serif);font-size:36px;font-weight:900;
  color:var(--gold);text-shadow:0 3px 0 #fff,0 0 24px rgba(223,163,42,.6);
  pointer-events:none;opacity:0;
}
.combo-fx.show{animation:comboPop 1s ease-out}
@keyframes comboPop{
  0%{opacity:0;transform:translateX(-50%) scale(.4)}
  30%{opacity:1;transform:translateX(-50%) scale(1.15)}
  70%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) scale(1.1) translateY(-30px)}
}

/* 数学结算页 */
.math-score{
  font-family:var(--serif);font-weight:900;font-size:44px;
  color:var(--gold);text-align:center;line-height:1.1;
}
.math-stars-row{
  text-align:center;font-size:30px;letter-spacing:6px;
  color:var(--gold);margin:8px 0;
}

/* 心（本关心数） */
.hearts-line{display:flex;gap:3px;font-size:16px;letter-spacing:1px}
.hearts-line .h-on{color:var(--cinnabar)}
.hearts-line .h-off{color:rgba(110,101,85,.25)}

@media (max-width:480px){
  .math-unit{padding:12px}
  .math-unit .u-badge{width:36px;height:36px;font-size:16px}
  .math-stages{gap:6px}
  .math-stage{font-size:12px;padding:8px 4px}
  .q-text-math{font-size:16px}
  .math-score{font-size:36px}
  .math-stars-row{font-size:26px;letter-spacing:4px}
  input.q-input{font-size:18px;padding:10px}
  .combo-fx{font-size:28px}
}