/* 快乐学堂 · 小学生语数英闯关乐园 */
:root{
  --bg1:#aee3ff; --bg2:#e8f9ff;
  --ink:#2b3a4a; --muted:#7b8aa0;
  --chinese:#ff6b6b; --math:#4dabf7; --english:#51cf66;
  --std:#51cf66; --adv:#ffa94d; --oly:#b197fc;
  --card:#ffffff; --shadow:0 8px 24px rgba(43,58,74,.10);
  --radius:20px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 60%,#fff);
  min-height:100vh;
}
#app{max-width:720px;margin:0 auto;padding:16px 16px 48px;}
.view.hidden,.hidden{display:none !important;}

/* ---- 首页 ---- */
.hero{text-align:center;padding:28px 12px 18px;}
.hero-emoji{font-size:44px;letter-spacing:6px;animation:bounce 2.4s infinite;}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1{font-size:44px;margin:8px 0 4px;letter-spacing:4px;color:#1e6fd9;text-shadow:0 2px 0 #fff;}
.subtitle{font-size:18px;color:var(--muted);margin:0 0 14px;}
.hero-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.stat{background:#fff;border-radius:999px;padding:8px 16px;font-size:15px;box-shadow:var(--shadow);}
.stat b{color:#f08c00;}
button.stat{border:none;cursor:pointer;font-family:inherit;color:var(--ink);}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:14px 0;}
.step h2{font-size:19px;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.step-num{background:#1e6fd9;color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;}
.pill{border:2px solid #dbe7f5;background:#f4f9ff;border-radius:999px;padding:12px 20px;font-size:17px;cursor:pointer;transition:.15s;color:var(--ink);}
.pill.active{background:#1e6fd9;border-color:#1e6fd9;color:#fff;transform:scale(1.05);}

.subject-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.subject-card{border:3px solid transparent;border-radius:var(--radius);padding:16px 8px;text-align:center;cursor:pointer;background:#f8fbff;transition:.15s;}
.subject-card .emoji{font-size:40px;}
.subject-card .name{font-size:18px;font-weight:700;margin-top:6px;}
.subject-card .stars{font-size:13px;color:#f08c00;margin-top:4px;min-height:18px;}
.subject-card[data-s="chinese"].active{border-color:var(--chinese);background:#fff5f5;}
.subject-card[data-s="math"].active{border-color:var(--math);background:#f0f7ff;}
.subject-card[data-s="english"].active{border-color:var(--english);background:#f0fff4;}

.level-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.level-card{border:3px solid #eef2f7;border-radius:var(--radius);padding:14px 8px;text-align:center;cursor:pointer;background:#fbfcfe;transition:.15s;}
.level-card .lv-name{font-size:19px;font-weight:800;}
.level-card .lv-desc{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;min-height:54px;}
.level-card .lv-stars{font-size:13px;color:#f08c00;min-height:18px;}
.level-card[data-lv="std"].active{border-color:var(--std);background:#f0fff4;}
.level-card[data-lv="adv"].active{border-color:var(--adv);background:#fff8f0;}
.level-card[data-lv="oly"].active{border-color:var(--oly);background:#f7f3ff;}

.btn{border:none;border-radius:16px;font-family:inherit;cursor:pointer;transition:.15s;color:var(--ink);}
.btn:active{transform:scale(.96);}
.btn-big{width:100%;padding:18px;font-size:22px;font-weight:800;margin:14px 0;}
.btn-start{background:linear-gradient(135deg,#ff922b,#ff6b6b);color:#fff;box-shadow:0 6px 0 #d9480f;}
.btn-start:active{box-shadow:0 2px 0 #d9480f;transform:translateY(3px);}
.tool-row{display:flex;gap:12px;margin:6px 0;}
.tool-row .btn{flex:1;}
.btn-tool{background:#fff;padding:14px;font-size:17px;font-weight:700;box-shadow:var(--shadow);position:relative;}
.badge{position:absolute;top:-8px;right:-6px;background:#ff6b6b;color:#fff;font-size:13px;border-radius:999px;padding:2px 9px;}
.parent-note{font-size:13px;color:var(--muted);line-height:1.7;background:#fffbe8;border-radius:14px;padding:12px 14px;}

/* ---- 答题页 ---- */
.quiz-top{display:flex;align-items:center;gap:10px;margin:6px 0 4px;}
.btn-back{background:#fff;box-shadow:var(--shadow);padding:10px 16px;font-size:16px;font-weight:700;}
.btn-sound{background:#fff;box-shadow:var(--shadow);padding:10px 14px;font-size:20px;}
.progress-wrap{flex:1;}
.progress-text{font-size:14px;color:var(--muted);margin-bottom:4px;text-align:center;}
.progress-bar{background:#e3edf7;border-radius:999px;height:12px;overflow:hidden;}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#4dabf7,#1e6fd9);border-radius:999px;transition:width .3s;}
.view-title{flex:1;text-align:center;margin:0;font-size:20px;}

.quiz-card{text-align:center;padding:26px 18px;}
.q-pre{display:inline-block;background:#e7f5ff;color:#1e6fd9;font-size:14px;font-weight:700;border-radius:999px;padding:6px 16px;margin-bottom:12px;}
.q-pre:empty{display:none;}
.q-pic{font-size:72px;margin:6px 0;}
.q-pic:empty{display:none;}
.q-text{font-size:26px;font-weight:700;line-height:1.6;margin:8px 0 18px;word-break:break-word;}
.q-body{display:flex;flex-direction:column;gap:12px;}
.opt-btn{background:#f4f9ff;border:3px solid #dbe7f5;border-radius:16px;padding:16px;font-size:20px;font-weight:700;cursor:pointer;transition:.15s;text-align:left;display:flex;gap:10px;align-items:center;}
.opt-letter{background:#1e6fd9;color:#fff;width:34px;height:34px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px;}
.opt-btn.correct{border-color:#51cf66;background:#ebfbee;animation:pop .35s;}
.opt-btn.wrong{border-color:#ff6b6b;background:#fff5f5;animation:shake .35s;}
.opt-btn:disabled{cursor:default;}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.listen-btn{background:linear-gradient(135deg,#4dabf7,#1e6fd9);color:#fff;border:none;border-radius:16px;padding:20px;font-size:22px;font-weight:800;cursor:pointer;}
.fill-input{font-size:26px;text-align:center;padding:16px;border:3px solid #dbe7f5;border-radius:16px;width:100%;font-family:inherit;}
.fill-input:focus{outline:none;border-color:#1e6fd9;}
.judge-row{display:flex;gap:12px;}
.judge-row .opt-btn{flex:1;justify-content:center;font-size:24px;}

.q-feedback{border-radius:16px;padding:16px;margin-top:16px;font-size:18px;line-height:1.7;text-align:left;}
.q-feedback.good{background:#ebfbee;border:2px solid #51cf66;}
.q-feedback.bad{background:#fff5f5;border:2px solid #ff6b6b;}
.q-feedback .fb-title{font-size:22px;font-weight:800;display:block;margin-bottom:6px;}
.q-feedback .fb-exp{color:#495057;}
.q-feedback .fb-answer{font-weight:800;color:#d9480f;}
.btn-next{background:linear-gradient(135deg,#51cf66,#2f9e44);color:#fff;margin-top:14px;}

/* ---- 单词卡片 ---- */
.flashcard{text-align:center;padding:40px 20px;min-height:340px;cursor:pointer;user-select:none;}
.flash-pic{font-size:88px;}
.flash-word{font-size:44px;font-weight:800;margin:14px 0;letter-spacing:2px;}
.flash-zh{font-size:32px;color:#1e6fd9;font-weight:700;margin:10px 0;animation:pop .3s;}
.flash-tip{font-size:14px;color:var(--muted);margin-top:16px;}

/* ---- 错题本 ---- */
.wrong-item{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;margin:10px 0;}
.wrong-item .wq{font-size:17px;font-weight:700;}
.wrong-item .wa{font-size:15px;color:#2f9e44;margin-top:6px;}
.wrong-item .wmy{font-size:15px;color:#e03131;margin-top:4px;}
.wrong-empty{text-align:center;color:var(--muted);padding:40px 0;font-size:17px;}

/* ---- 结算弹窗 ---- */
.modal{position:fixed;inset:0;background:rgba(43,58,74,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-card{background:#fff;border-radius:24px;padding:30px 24px;max-width:420px;width:100%;text-align:center;animation:pop .35s;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.result-emoji{font-size:64px;animation:bounce 1.6s infinite;}
.result-stars{font-size:44px;color:#fcc419;letter-spacing:6px;margin:8px 0;text-shadow:0 2px 0 #e8a100;}
.result-stars .dim{color:#e9ecef;text-shadow:none;}
.result-score{font-size:24px;font-weight:800;}
.result-points{font-size:17px;color:#f08c00;font-weight:700;margin:6px 0;}
.result-msg{font-size:16px;color:var(--muted);margin:8px 0 4px;line-height:1.6;}

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

@media (max-width:480px){
  .hero h1{font-size:36px;}
  .q-text{font-size:22px;}
  .flash-word{font-size:36px;}
  .subject-card .emoji{font-size:32px;}
}

/* ---- v2: 综合挑战按钮 ---- */
.btn-mix{background:linear-gradient(135deg,#b197fc,#7048e8);color:#fff;box-shadow:0 6px 0 #5f3dc4;}
.btn-mix:active{box-shadow:0 2px 0 #5f3dc4;transform:translateY(3px);}

/* ---- v2: 吉祥物乐乐 & 启发气泡 ---- */
.coach{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;text-align:left;}
.mascot{font-size:46px;flex:none;animation:bounce 2.4s infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));}
.bubble{flex:1;background:#fff8e1;border:2px solid #ffd43b;border-radius:4px 18px 18px 18px;padding:10px 14px;font-size:16px;line-height:1.7;color:#5c4a00;animation:pop .3s;}
.btn-hint{width:100%;background:#fff3bf;border:2px dashed #f08c00;border-radius:14px;padding:11px;font-size:16px;font-weight:700;margin:0 0 12px;}
.streak{color:#f03e3e;font-weight:800;}

/* ---- v2: 分步思路 & 方法标签 ---- */
.steps{background:#f0f7ff;border-radius:12px;padding:10px 14px;margin-top:10px;text-align:left;}
.steps-title{font-weight:800;font-size:16px;color:#1e6fd9;}
.steps ol{margin:6px 0 4px;padding-left:22px;}
.steps li{margin:6px 0;font-size:16px;line-height:1.7;}
.method-chip{display:inline-block;background:#fff3bf;border:2px solid #ffd43b;border-radius:999px;padding:7px 14px;margin-top:10px;font-size:15px;font-weight:700;color:#7a5b00;}

/* ---- v2: SVG 教具图 ---- */
.q-fig{margin:2px 0 10px;}
.q-fig:empty{display:none;}
.fig-svg{width:180px;height:auto;}
.fig-svg.pie{width:110px;}
.fig-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.fig-op{font-size:30px;font-weight:800;color:#1e6fd9;}
.fig-cap{text-align:center;font-weight:800;font-size:17px;margin-top:2px;}
.fig-note{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6;}

/* ---- v2: 方法小课堂 ---- */
.tips-intro{text-align:center;color:var(--muted);font-size:15px;margin:4px 0 10px;}
#tips-filter{margin-bottom:6px;}
.tip-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:12px 0;animation:pop .3s;}
.tip-head{display:flex;gap:12px;align-items:center;}
.tip-icon{font-size:42px;flex:none;}
.tip-title{font-size:19px;font-weight:800;}
.tip-meta{font-size:13px;color:var(--muted);margin-top:2px;}
.tip-body{margin:10px 0;padding-left:22px;font-size:16px;line-height:1.9;}
.tip-ex{background:#f8f9fa;border-left:4px solid #4dabf7;border-radius:0 12px 12px 0;padding:12px 14px;margin:8px 0;font-size:15px;line-height:1.8;}
.tip-ex-a{font-weight:800;color:#2f9e44;margin-top:4px;}
.tip-ex-exp{color:var(--muted);margin-top:4px;}
.tip-go{width:100%;margin-top:8px;background:linear-gradient(135deg,#4dabf7,#1e6fd9);color:#fff;}

/* ---- v2: 页面背景装饰 ---- */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.55) 0 46px, transparent 47px),
    radial-gradient(circle at 92% 20%, rgba(255,255,255,.45) 0 60px, transparent 61px),
    radial-gradient(circle at 15% 78%, rgba(255,255,255,.40) 0 52px, transparent 53px),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.50) 0 40px, transparent 41px);}
#app{position:relative;z-index:1;}

/* ---- 题目下方的大读题按钮 ---- */
.btn-readline{width:100%;background:#e7f5ff;border:2px solid #4dabf7;border-radius:14px;padding:12px;font-size:18px;font-weight:700;margin:0 0 14px;color:#1e6fd9;}
.btn-readline:active{background:#d0ebff;}