:root{
  --bg:#faf6ef; --card:#fffdf8; --ink:#4a3f35; --muted:#9a8b7a;
  --terra:#c96f4a; --terra-d:#a8562f; --terra-l:#f3ddd0;
  --green:#7fb069; --red:#d1604d; --gold:#e0a458;
  --radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;padding:0 16px 40px;}
header.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0 6px;}
header.topbar h1{font-size:22px;margin:0;letter-spacing:1px;}
.iconbtn{background:var(--card);border:1px solid #eadfc9;border-radius:50%;width:40px;height:40px;
  font-size:18px;cursor:pointer;color:var(--ink);}
.streak-pill{background:var(--card);border:1px solid #eadfc9;border-radius:999px;
  padding:6px 14px;font-size:14px;color:var(--terra-d);}
.card{background:var(--card);border:1px solid #eadfc9;border-radius:var(--radius);
  padding:18px;margin:14px 0;box-shadow:0 2px 8px rgba(160,110,70,.06);}
.card h2{margin:0 0 4px;font-size:18px;}
.card .sub{color:var(--muted);font-size:13px;margin:0 0 8px;}
.btn{display:block;width:100%;border:none;border-radius:12px;padding:14px;font-size:16px;
  cursor:pointer;background:var(--terra);color:#fff;font-weight:600;margin-top:10px;}
.btn:active{transform:scale(.98);}
.btn.secondary{background:#fff;color:var(--terra-d);border:1px solid var(--terra);}
.btn:disabled{opacity:.45;cursor:default;}
.root-hero{text-align:center;padding:26px 0 10px;}
.root-hero .root{font-size:44px;font-weight:800;letter-spacing:2px;color:var(--terra-d);}
.root-hero .meaning{font-size:17px;color:var(--muted);margin-top:6px;}
.word-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;}
.word-card{background:var(--card);border:2px solid #eadfc9;border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:border-color .2s;}
.word-card.seen{border-color:var(--green);}
.word-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#f3ece0;}
.word-card .w{padding:8px 10px;}
.word-card .w .word{font-weight:700;font-size:16px;}
.word-card .w .pos{font-size:11px;color:var(--muted);}
.word-card .w .mean{font-size:13px;color:var(--terra-d);margin-top:2px;}
.word-card .w .ex{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5;}
.timerbar{height:8px;background:#eadfc9;border-radius:99px;overflow:hidden;margin:10px 0;}
.timerbar>div{height:100%;background:var(--terra);width:100%;transition:width 1s linear;}
.challenge-q{font-size:22px;font-weight:700;text-align:center;margin:18px 0 6px;min-height:64px;}
.challenge-q .imgq{width:120px;height:120px;object-fit:cover;border-radius:12px;margin:0 auto;display:block;}
.opt{display:block;width:100%;text-align:left;background:var(--card);border:2px solid #eadfc9;
  border-radius:12px;padding:13px 14px;font-size:16px;margin:8px 0;cursor:pointer;color:var(--ink);}
.opt.correct{border-color:var(--green);background:#f0f7ec;}
.opt.wrong{border-color:var(--red);background:#faefec;}
.explain{background:#fdf6ec;border:1px dashed var(--gold);border-radius:12px;
  padding:12px 14px;font-size:14px;line-height:1.7;margin:10px 0;}
.explain b{color:var(--terra-d);}
.score-line{display:flex;justify-content:space-between;align-items:center;margin:8px 0;}
.score-line .score{font-size:26px;font-weight:800;color:var(--terra-d);}
.combo{font-size:13px;color:var(--gold);font-weight:700;min-height:18px;text-align:center;}
.quiz-img{width:150px;height:150px;object-fit:cover;border-radius:14px;margin:6px auto;display:block;}
.review-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:12px 0;}
.review-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;cursor:pointer;
  border:2px solid #eadfc9;}
.stat-row{display:flex;gap:10px;margin:12px 0;}
.stat{flex:1;background:#fdf8f0;border:1px solid #eadfc9;border-radius:12px;padding:10px;text-align:center;}
.stat .n{font-size:22px;font-weight:800;color:var(--terra-d);}
.stat .l{font-size:12px;color:var(--muted);}
.ep-card{display:flex;gap:14px;align-items:center;cursor:pointer;}
.ep-thumb{width:76px;height:76px;border-radius:14px;object-fit:cover;flex-shrink:0;background:#f3ece0;}
.ep-info{flex:1;}
.ep-info .r{font-weight:800;font-size:18px;}
.ep-info .m{font-size:13px;color:var(--muted);}
.ep-info .s{font-size:12px;color:var(--green);margin-top:4px;}
.ep-go{font-size:22px;color:var(--terra);}
.flash-img{width:200px;height:200px;object-fit:cover;border-radius:18px;margin:10px auto;display:block;}
.flash-word{text-align:center;font-size:30px;font-weight:800;margin:8px 0;}
.flash-mean{text-align:center;font-size:16px;color:var(--terra-d);}
.flash-ex{text-align:center;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.7;}
.grade-row{display:flex;gap:10px;margin-top:16px;}
.grade-row .btn{margin-top:0;}
.grade-row .btn.forgot{background:var(--red);}
.grade-row .btn.remembered{background:var(--green);}
.center{text-align:center;color:var(--muted);padding:40px 0;}
.loading{text-align:center;padding:60px 0;color:var(--muted);}
.hidden{display:none!important;}
.progress-dots{display:flex;gap:6px;justify-content:center;margin:10px 0;}
.progress-dots span{width:8px;height:8px;border-radius:50%;background:#eadfc9;}
.progress-dots span.done{background:var(--terra);}


/* ---------- flip match 翻牌配对 ---------- */
.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0;}
.mcard{aspect-ratio:3/3.6;perspective:600px;cursor:pointer;}
.mcard-inner{position:relative;width:100%;height:100%;transition:transform .45s;
  transform-style:preserve-3d;}
.mcard.flipped .mcard-inner{transform:rotateY(180deg);}
.mcard-front,.mcard-back{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:12px;display:flex;align-items:center;
  justify-content:center;padding:6px;text-align:center;overflow:hidden;}
.mcard-front{background:var(--terra);color:#fff;font-size:30px;font-weight:800;}
.mcard-back{background:var(--card);border:2px solid #eadfc9;transform:rotateY(180deg);
  font-weight:700;color:var(--ink);line-height:1.3;word-break:break-all;}
.mcard.matched{pointer-events:none;}
.mcard.matched .mcard-back{border-color:var(--green);background:#f0f7ec;}
.mcard.matched .mcard-front{background:var(--green);}
.stat-row{flex-wrap:wrap;}
.stat{flex:1 1 26%;}