/* 快乐学堂 · 小学生语数英闯关乐园 */
:root{
  --bg1:#aee3ff; --bg2:#e8f9ff;
  --ink:#2b3a4a; --ink-2:#5b6b7f; --muted:#7b8aa0;
  --brand:#1e6fd9; --brand-2:#4dabf7; --brand-soft:#e8f1fd;
  --chinese:#ff6b6b; --math:#4dabf7; --english:#51cf66;
  --std:#4dabf7; --adv:#ffa94d; --oly:#b197fc;
  --ok:#35b26b; --ok-soft:#e9f9ef; --bad:#ef5b5b; --bad-soft:#fdeeee;
  --gold-soft:#fff8e1; --gold-line:#ffe08a;
  --card:#ffffff; --shadow:0 8px 24px rgba(43,58,74,.10);
  --shadow-blue:0 8px 22px rgba(30,111,217,.32);
  --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:17px;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:20px;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:20px;font-weight:700;margin-top:6px;}
.subject-card .stars{font-size:15px;color:#f08c00;margin-top:4px;min-height:20px;}
.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:20px;font-weight:800;}
.level-card .lv-desc{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6;min-height:56px;}
.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:17px;font-size:20px;font-weight:800;margin:14px 0;min-height:60px;}
/* 主按钮：统一品牌蓝 */
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:var(--shadow-blue);}
.btn-primary:active{box-shadow:0 3px 10px rgba(30,111,217,.3);transform:translateY(2px) scale(.98);}
.btn-start{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:var(--shadow-blue);}
.btn-start:active{box-shadow:0 3px 10px rgba(30,111,217,.3);transform:translateY(2px) scale(.98);}
/* 次按钮：浅蓝底 + 品牌蓝字 */
.btn-secondary{background:var(--brand-soft);color:var(--brand);box-shadow:var(--shadow);}
.btn-secondary:active{transform:scale(.97);}
.tool-row{display:flex;gap:12px;margin:6px 0;}
.tool-row .btn{flex:1;}
.btn-tool{background:#fff;padding:16px 8px;font-size:17px;font-weight:700;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;line-height:1.4;}
.tool-emoji{font-size:34px;line-height:1;}
/* 朗读语音挑选 */
.voice-group{font-size:17px;font-weight:800;color:var(--ink);margin:18px 2px 10px;}
.voice-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;}
.voice-row.sel{outline:2.5px solid var(--brand);}
.voice-name{flex:1;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.voice-lang{display:block;font-size:12px;color:var(--muted);font-weight:400;}
.btn-mini{background:var(--brand-soft);color:var(--brand);border:none;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:700;flex-shrink:0;}
.empty-tip{color:var(--muted);font-size:14px;padding:6px 2px;}
.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:16px;color:var(--ink);font-weight:800;margin-bottom:6px;text-align:center;}
.progress-bar{background:#e3edf7;border-radius:999px;height:14px;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;}
/* 看图题：收紧吉祥物与标签间距 */
.quiz-card.pic-mode .coach{margin-bottom:4px;}
.quiz-card.pic-mode .mascot{font-size:38px;}
.quiz-card.pic-mode .q-pre{margin-bottom:8px;}
.q-pre{display:inline-block;background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:700;border-radius:999px;padding:6px 16px;margin-bottom:12px;}
.q-pre:empty{display:none;}
.q-pic{font-size:104px;line-height:1.15;margin:8px auto 12px;background:#f0f7ff;border-radius:28px;width:172px;height:172px;display:flex;align-items:center;justify-content:center;}
.q-pic:empty{display:none;}
.q-text{font-size:24px;font-weight:700;line-height:1.6;margin:8px 0 18px;word-break:break-word;color:var(--ink);}
.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,var(--brand-2),var(--brand));color:#fff;border:none;border-radius:16px;padding:20px;font-size:20px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-blue);}
.fill-input{font-size:24px;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:17px;line-height:1.7;text-align:left;}
.q-feedback.good{background:var(--ok-soft);border:2px solid var(--ok);}
.q-feedback.bad{background:var(--bad-soft);border:2px solid var(--bad);}
.q-feedback .fb-title{font-size:20px;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,var(--brand-2),var(--brand));color:#fff;margin-top:14px;box-shadow:var(--shadow-blue);}

/* ---- 单词卡片 ---- */
.flashcard{text-align:center;padding:40px 20px;min-height:340px;cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.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:15px;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:15px;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:20px;}
  .flash-word{font-size:36px;}
  .subject-card .emoji{font-size:32px;}
}

/* ---- v2: 综合挑战按钮（次级） ---- */
.btn-mix{background:var(--brand-soft);color:var(--brand);box-shadow:var(--shadow);}
.btn-mix:active{transform:scale(.97);}

/* ---- 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:#fffdf4;border:2px solid var(--gold-line);border-radius:4px 18px 18px 18px;padding:10px 14px;font-size:15px;line-height:1.7;color:#6b5a1e;animation:pop .3s;}
.btn-hint{width:100%;background:var(--gold-soft);border:2px solid var(--gold-line);border-radius:14px;padding:12px;font-size:16px;font-weight:700;margin:0 0 12px;color:#7a5b00;}
.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;position:sticky;top:0;z-index:5;background:rgba(232,249,255,.94);backdrop-filter:blur(4px);padding:10px 2px;}
.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{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#d0ebff,#a5d8ff);font-size:30px;margin:2px auto 16px;box-shadow:0 4px 14px rgba(30,111,217,.22);transition:transform .15s;padding:0;}
.btn-readline:active{transform:scale(.92);}