/* 单词小英雄 —— iPad 儿童拼写练习 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,#e8f4ff 0%,#fdf6e9 100%);
  color:#333; overflow:hidden;
}
#app { height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom); }
.screen { display:none; min-height:100%; padding:max(16px, env(safe-area-inset-top)) 20px 32px; }
.screen.active { display:block; }
.hidden { display:none !important; }

/* ---------- 主页 ---------- */
.home-header { text-align:center; padding:12px 0 4px; }
.logo { font-size:56px; }
.home-header h1 { font-size:30px; color:#2b6cb0; letter-spacing:2px; }
.subtitle { color:#8aa0b8; font-size:14px; margin-top:2px; }
.stats-row { display:flex; gap:10px; margin:16px 0; }
.stat-card { flex:1; background:#fff; border-radius:16px; padding:12px 4px; text-align:center; box-shadow:0 2px 8px rgba(60,100,160,.08); display:flex; flex-direction:column; }
.stat-emoji { font-size:22px; }
.stat-num { font-size:24px; font-weight:800; color:#2b6cb0; }
.stat-label { font-size:12px; color:#8aa0b8; }
.daily-banner { background:#fff7e0; border:2px dashed #f6c344; border-radius:14px; padding:10px 14px; text-align:center; font-size:15px; color:#9a6b00; margin-bottom:16px; }
.menu { display:flex; flex-direction:column; gap:12px; }
.menu-btn { display:flex; align-items:center; gap:14px; width:100%; border:none; border-radius:18px; padding:16px 18px; font-size:17px; color:#fff; text-align:left; box-shadow:0 4px 0 rgba(0,0,0,.12); position:relative; }
.menu-btn:active { transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.12); }
.menu-icon { font-size:30px; }
.menu-text { display:flex; flex-direction:column; line-height:1.3; }
.menu-text small { font-size:12.5px; opacity:.9; font-weight:400; }
.btn-blue { background:#4a9df0; } .btn-green { background:#43c57c; }
.btn-orange { background:#f5a13c; } .btn-gray { background:#9aa7b8; }
.review-badge { position:absolute; right:14px; top:-8px; background:#ff5a5f; color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.cloud-banner { margin-top:14px; font-size:12px; color:#8aa0b8; text-align:center; }

/* ---------- 练习页 ---------- */
.quiz-header { display:flex; align-items:center; gap:12px; padding-top:4px; }
.icon-btn { background:#fff; border:none; border-radius:12px; width:44px; height:44px; font-size:20px; box-shadow:0 2px 6px rgba(60,100,160,.12); }
.quiz-progress { flex:1; height:14px; background:#dceafa; border-radius:999px; overflow:hidden; }
.quiz-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#4a9df0,#43c57c); border-radius:999px; transition:width .4s; }
.quiz-session-stars { font-size:17px; font-weight:700; color:#e8a200; white-space:nowrap; }
.mode-tag { display:inline-block; margin:12px 0 6px; background:#e8f4ff; color:#2b6cb0; font-size:13px; padding:4px 12px; border-radius:999px; }
.word-card { background:#fff; border-radius:24px; padding:22px 18px; box-shadow:0 6px 20px rgba(60,100,160,.10); margin-top:8px; }
.listen-row { text-align:center; margin-bottom:14px; }
.speak-btn { display:inline-flex; flex-direction:column; align-items:center; gap:2px; border:none; background:linear-gradient(180deg,#5fb0ff,#3d8fe8); color:#fff; font-size:44px; border-radius:26px; padding:18px 46px; box-shadow:0 5px 0 #2f6fb5; }
.speak-btn span { font-size:15px; font-weight:700; letter-spacing:2px; }
.speak-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #2f6fb5; }
.speak-btn.playing { animation:pulse .6s infinite alternate; }
@keyframes pulse { from{transform:scale(1)} to{transform:scale(1.07)} }
.hint-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.hint-btn { border:none; background:#eef4fb; color:#2b6cb0; font-size:15px; padding:10px 16px; border-radius:12px; }
.hint-btn:disabled { opacity:.45; }
.hint-display { background:#f6faff; border-radius:14px; padding:12px 14px; margin-bottom:10px; font-size:18px; color:#2b6cb0; text-align:center; }
.hint-display .blank { letter-spacing:6px; color:#f0862c; font-weight:700; }
.answer-display { background:#fff2cc; border-radius:14px; padding:14px; text-align:center; font-size:34px; font-weight:800; color:#8a5a00; letter-spacing:8px; margin-bottom:10px; }
.answer-display .answer-note { display:block; font-size:14px; font-weight:400; letter-spacing:0; color:#9a7b2a; margin-top:6px; }
.input-row { display:flex; gap:10px; }
#answer-input { flex:1; font-size:24px; padding:14px 16px; border:3px solid #bcd8f5; border-radius:16px; outline:none; text-align:center; letter-spacing:2px; background:#fbfdff; min-width:0; }
#answer-input:focus { border-color:#4a9df0; }
.submit-btn { border:none; background:#43c57c; color:#fff; font-size:19px; font-weight:700; padding:0 26px; border-radius:16px; box-shadow:0 4px 0 #2f9a5d; }
.submit-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #2f9a5d; }
.feedback { min-height:56px; margin-top:12px; text-align:center; font-size:19px; font-weight:700; }
.feedback.good { color:#2f9a5d; animation:pop .35s; }
.feedback.bad { color:#e05656; animation:shake .4s; }
.feedback.reveal { color:#8a5a00; }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.word-counter { text-align:center; color:#8aa0b8; margin-top:14px; font-size:14px; }
.float-star { position:fixed; font-size:30px; pointer-events:none; z-index:99; animation:rise 1s forwards; }
@keyframes rise { from{transform:translateY(0);opacity:1} to{transform:translateY(-90px);opacity:0} }

/* ---------- 结果页 ---------- */
#screen-result { text-align:center; padding-top:48px; position:relative; }
.result-card { background:#fff; border-radius:26px; padding:30px 22px; max-width:420px; margin:0 auto; box-shadow:0 8px 30px rgba(60,100,160,.14); position:relative; z-index:2; }
.result-mascot { font-size:64px; }
.result-card h2 { color:#2b6cb0; margin:8px 0 6px; }
.result-praise { color:#f0862c; font-size:16px; margin-bottom:16px; }
.result-stats { display:flex; justify-content:space-around; margin-bottom:16px; }
.result-stat { display:flex; flex-direction:column; }
.result-stat b { font-size:26px; color:#2b6cb0; }
.result-stat span { font-size:12px; color:#8aa0b8; }
.badge-box { background:#fff7e0; border-radius:14px; padding:10px; margin-bottom:16px; font-size:15px; color:#9a6b00; }
.big-btn { width:100%; border:none; border-radius:18px; padding:16px; font-size:19px; font-weight:700; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.15); }
#confetti-box { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.confetti { position:absolute; width:10px; height:14px; top:-20px; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }

/* ---------- 错词本 / 家长看板 ---------- */
.sub-header { display:flex; align-items:center; gap:12px; padding-top:4px; margin-bottom:14px; }
.sub-header h2 { font-size:22px; color:#2b6cb0; }
.list { display:flex; flex-direction:column; gap:10px; }
.word-row { background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 2px 8px rgba(60,100,160,.08); }
.word-row .wr-top { display:flex; justify-content:space-between; align-items:center; }
.wr-word { font-size:20px; font-weight:800; color:#333; letter-spacing:1px; }
.wr-cn { color:#8aa0b8; font-size:14px; margin-top:2px; }
.wr-speak { border:none; background:#eef4fb; border-radius:10px; font-size:18px; padding:8px 12px; }
.wr-meta { display:flex; gap:14px; margin-top:8px; font-size:12.5px; color:#8aa0b8; flex-wrap:wrap; }
.wr-bar { height:8px; background:#eef2f7; border-radius:999px; margin-top:8px; overflow:hidden; }
.wr-bar i { display:block; height:100%; background:linear-gradient(90deg,#43c57c,#7ddf a6); }
.wr-due { color:#ff5a5f; font-weight:700; }
.wr-ok { color:#2f9a5d; font-weight:700; }
.empty-tip { text-align:center; color:#8aa0b8; padding:40px 0; font-size:15px; }
.parent-content h3 { color:#2b6cb0; margin:18px 0 8px; font-size:17px; }
.progress-row { background:#fff; border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:0 2px 6px rgba(60,100,160,.08); }
.progress-row .pr-top { display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.pr-track { height:12px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.pr-track i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#4a9df0,#43c57c); transition:width .5s; }
.lock-note { font-size:13px; color:#8aa0b8; margin-top:6px; }
.safe-btn { margin-top:12px; width:100%; border:none; background:#e8f4ff; color:#2b6cb0; border-radius:14px; padding:13px; font-size:15px; }
.danger-btn { margin-top:24px; width:100%; border:none; background:#ffe8e8; color:#d64545; border-radius:14px; padding:13px; font-size:15px; }
.parent-note { font-size:12.5px; color:#8aa0b8; margin-top:16px; line-height:1.7; }