/* ============ 汉字小勇士 · 卡通风格 ============ */
:root{
  --bg1:#FFE082; --bg2:#81D4FA; --card:#FFFFFF; --ink:#4E342E;
  --accent:#FF9800; --accent-dark:#E65100; --good:#66BB6A; --bad:#EF5350;
  --border:#4E342E; --radius:24px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; min-height:100%;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Arial Rounded MT Bold","Microsoft YaHei",sans-serif;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed; color:var(--ink);
  font-weight:600; overflow-x:hidden;
}
/* 主题皮肤 */
body.skin-sun{--bg1:#FFE082; --bg2:#81D4FA; --accent:#FF9800; --accent-dark:#E65100;}
body.skin-star{--bg1:#B39DDB; --bg2:#4A148C; --accent:#FFD54F; --accent-dark:#F57F17; color:#FFF8E1;}
body.skin-star .card,body.skin-star .quiz-card,body.skin-star .result-card,body.skin-star .set-card,body.skin-star .menu-card{--card:#FFF; color:var(--ink);}
body.skin-forest{--bg1:#A5D6A7; --bg2:#1B5E20; --accent:#FFCA28; --accent-dark:#E65100; color:#F1F8E9;}
body.skin-forest .card,body.skin-forest .quiz-card,body.skin-forest .result-card,body.skin-forest .set-card,body.skin-forest .menu-card{--card:#FFF; color:var(--ink);}
body.skin-ocean{--bg1:#80DEEA; --bg2:#01579B; --accent:#FFAB40; --accent-dark:#BF360C; color:#E0F7FA;}
body.skin-ocean .card,body.skin-ocean .quiz-card,body.skin-ocean .result-card,body.skin-ocean .set-card,body.skin-ocean .menu-card{--card:#FFF; color:var(--ink);}

.sky{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.cloud{position:absolute; font-size:3.2em; opacity:.55; animation:drift 26s linear infinite;}
.c1{top:8%; left:-10%;}
.c2{top:30%; left:70%; animation-duration:34s; animation-delay:-8s;}
.c3{top:70%; left:-14%; animation-duration:40s; animation-delay:-20s;}
.star{position:absolute; font-size:1.6em; opacity:.6; animation:twinkle 3s ease-in-out infinite;}
.s1{top:14%; left:16%;} .s2{top:60%; left:88%; animation-delay:1s;} .s3{top:44%; left:6%; animation-delay:2s;}
@keyframes drift{to{transform:translateX(120vw);}}
@keyframes twinkle{0%,100%{opacity:.2; transform:scale(.8);}50%{opacity:.9; transform:scale(1.15);}}

.view{display:none; position:relative; z-index:1; max-width:560px; margin:0 auto; padding:16px 16px 40px;}
.view.active{display:block; animation:pop .3s ease;}
@keyframes pop{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}

/* ---------- 首页 ---------- */
.hero{display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.85); border:3px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:0 6px 0 rgba(0,0,0,.12);}
.mascot{width:96px; height:96px; object-fit:contain; animation:bounce 2.4s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.hero h1{margin:0; font-size:1.55em; letter-spacing:1px;}
.slogan{margin:2px 0 6px; font-size:.95em; opacity:.8;}
.badges{display:flex; gap:6px; flex-wrap:wrap;}
.badge{background:var(--accent); color:#fff; border:2px solid var(--border); border-radius:999px; padding:2px 10px; font-size:.8em; box-shadow:0 2px 0 rgba(0,0,0,.2);}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0;}
.stat{background:rgba(255,255,255,.9); border:3px solid var(--border); border-radius:18px; padding:10px 4px; text-align:center; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.stat-emoji{font-size:1.5em; display:block;}
.stat b{font-size:1.25em; display:block; line-height:1.2;}
.stat small{opacity:.65; font-size:.72em;}

.btn{font-family:inherit; font-weight:700; border:3px solid var(--border); border-radius:18px; cursor:pointer; transition:transform .08s, box-shadow .08s; background:var(--card); color:var(--ink); font-size:1em;}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.2) !important;}
.btn-big{width:100%; padding:16px; font-size:1.25em; display:flex; flex-direction:column; align-items:center; gap:2px;}
.btn-big small{font-size:.62em; opacity:.75;}
.btn-start{background:linear-gradient(180deg,#FFB74D,#F57C00); color:#fff; box-shadow:0 5px 0 var(--accent-dark); text-shadow:0 1px 2px rgba(0,0,0,.25);}
.btn-soft{background:#FFF; box-shadow:0 4px 0 #BDBDBD;}
.btn-danger{background:#FFCDD2; color:#B71C1C; box-shadow:0 4px 0 #C62828;}
.btn-small{padding:8px 14px; font-size:.9em; margin-top:8px;}
.btn-next{width:100%; margin-top:14px; padding:14px; font-size:1.1em; background:linear-gradient(180deg,#81C784,#43A047); color:#fff; box-shadow:0 4px 0 #1B5E20;}

.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.menu-card{display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 8px; background:rgba(255,255,255,.92); border:3px solid var(--border); border-radius:20px; cursor:pointer; font-family:inherit; box-shadow:0 4px 0 rgba(0,0,0,.15); color:var(--ink); transition:transform .1s;}
.menu-card:active{transform:scale(.96);}
.mc-emoji{font-size:2em;}
.menu-card b{font-size:1em;}
.menu-card small{opacity:.65; font-size:.72em;}
.foot{text-align:center; margin-top:18px; font-size:.78em; opacity:.7;}

/* ---------- 练习 ---------- */
.quiz-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.btn-ghost{background:rgba(255,255,255,.7); border:2px solid var(--border); border-radius:999px; padding:6px 12px; font-family:inherit; font-weight:700; cursor:pointer;}
.quiz-progress{flex:1; height:18px; background:rgba(255,255,255,.7); border:2px solid var(--border); border-radius:999px; overflow:hidden;}
.quiz-progress-bar{height:100%; width:0%; background:linear-gradient(90deg,#66BB6A,#FFEB3B); transition:width .3s;}
.quiz-count{font-weight:800; background:#fff; border:2px solid var(--border); border-radius:999px; padding:3px 10px; font-size:.85em;}
.quiz-card{background:rgba(255,255,255,.96); border:3px solid var(--border); border-radius:var(--radius); padding:20px 18px; box-shadow:0 6px 0 rgba(0,0,0,.14); text-align:center; min-height:380px;}
.q-tag{display:inline-block; background:var(--accent); color:#fff; border:2px solid var(--border); border-radius:999px; padding:3px 14px; font-size:.82em; box-shadow:0 2px 0 rgba(0,0,0,.2);}
.q-prompt{margin:12px 0 4px; opacity:.7; font-size:.9em;}
.q-big{font-size:2em; font-weight:800; letter-spacing:2px; margin:6px 0; word-break:break-all; line-height:1.35;}
.q-sub{margin:0 0 16px; font-size:.9em; color:#8D6E63;}
.q-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.q-opt{padding:14px 8px; border:3px solid var(--border); border-radius:16px; background:#FFF3E0; font-size:1.15em; font-weight:700; font-family:inherit; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.15); transition:transform .08s; word-break:break-all;}
.q-opt:active{transform:translateY(2px);}
.q-opt.correct{background:#C8E6C9 !important; border-color:#2E7D32; box-shadow:0 3px 0 #2E7D32; animation:shake .3s;}
.q-opt.wrong{background:#FFCDD2 !important; border-color:#C62828; box-shadow:0 3px 0 #C62828; animation:shake .4s;}
.q-opt:disabled{cursor:default;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
.q-feedback{margin-top:14px; padding:10px 12px; border-radius:14px; font-size:.88em; text-align:left; line-height:1.6;}
.q-feedback.good{background:#E8F5E9; border:2px solid #66BB6A;}
.q-feedback.bad{background:#FFF3E0; border:2px solid #FFB74D;}
.quiz-coins{text-align:center; margin-top:12px; background:rgba(255,255,255,.8); border:2px solid var(--border); border-radius:999px; padding:6px; font-size:.9em;}

/* ---------- 结果 ---------- */
.result-card{background:rgba(255,255,255,.96); border:3px solid var(--border); border-radius:var(--radius); padding:28px 20px; text-align:center; box-shadow:0 6px 0 rgba(0,0,0,.14); margin-top:20px;}
.result-emoji{font-size:3.6em; animation:bounce 1s ease-in-out infinite;}
.result-card h2{margin:6px 0;}
.score-ring{width:130px; height:130px; margin:14px auto; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--score)*1%), #EEE 0); display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid var(--border); position:relative;}
.score-ring::before{content:""; position:absolute; inset:10px; background:#fff; border-radius:50%;}
.score-ring span,.score-ring small{position:relative; z-index:1;}
.score-ring span{font-size:2.2em; font-weight:800;}
.result-sub{margin:4px 0 10px; opacity:.8;}
.coin-reward{background:#FFF8E1; border:2px dashed #F9A825; border-radius:14px; padding:10px; font-size:.9em; text-align:left; margin-bottom:16px;}
.coin-reward div{display:flex; justify-content:space-between; padding:2px 8px;}
.result-btns{display:grid; gap:10px;}

/* ---------- 复习/词库/商店/设置 通用 ---------- */
.sub-head{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.85); border:3px solid var(--border); border-radius:18px; padding:8px 14px; margin-bottom:14px; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.sub-head h2{margin:0; font-size:1.15em;}
.btn-back{font-size:1.5em; background:none; border:none; cursor:pointer; font-family:inherit; color:var(--ink);}
.sec-title{margin:18px 0 8px; font-size:1em; background:var(--accent); color:#fff; display:inline-block; border:2px solid var(--border); border-radius:999px; padding:4px 14px; box-shadow:0 2px 0 rgba(0,0,0,.2);}

.review-today{display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.92); border:3px solid var(--border); border-radius:20px; padding:16px; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.rt-big{font-size:2.6em; font-weight:800; background:var(--accent); color:#fff; width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:3px solid var(--border); box-shadow:0 3px 0 rgba(0,0,0,.2);}
.rt-text{display:flex; flex-direction:column; align-items:flex-start;}
.rt-text b{font-size:1.05em;}
.rt-text small{opacity:.65; margin-top:2px;}
.week-bars{display:flex; gap:8px; align-items:flex-end; height:120px; background:rgba(255,255,255,.92); border:3px solid var(--border); border-radius:18px; padding:12px; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.wb{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.wb .bar{width:100%; max-width:34px; background:linear-gradient(180deg,#FFD54F,#F57C00); border:2px solid var(--border); border-radius:8px 8px 0 0; min-height:4px; transition:height .4s;}
.wb .lbl{font-size:.68em; margin-top:4px; opacity:.75;}
.wb.today .lbl{color:#E65100; font-weight:800;}
.box-dist{background:rgba(255,255,255,.92); border:3px solid var(--border); border-radius:18px; padding:12px; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.bd-row{display:flex; align-items:center; gap:8px; margin:6px 0;}
.bd-label{width:88px; font-size:.82em;}
.bd-bar{flex:1; height:16px; background:#ECEFF1; border:2px solid var(--border); border-radius:999px; overflow:hidden;}
.bd-fill{height:100%; background:linear-gradient(90deg,#81C784,#43A047); border-radius:999px; transition:width .5s;}
.bd-num{width:34px; text-align:right; font-size:.85em;}
.grade-mastery{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.gm{background:rgba(255,255,255,.92); border:3px solid var(--border); border-radius:16px; padding:10px; box-shadow:0 3px 0 rgba(0,0,0,.12);}
.gm .gm-top{display:flex; justify-content:space-between; font-size:.85em;}
.gm .bar{height:12px; background:#ECEFF1; border:2px solid var(--border); border-radius:999px; overflow:hidden; margin-top:6px;}
.gm .fill{height:100%; background:linear-gradient(90deg,#4FC3F7,#0288D1); border-radius:999px;}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
.chip{padding:8px 14px; border:3px solid var(--border); border-radius:999px; background:rgba(255,255,255,.85); font-family:inherit; font-weight:700; cursor:pointer; font-size:.9em; box-shadow:0 3px 0 rgba(0,0,0,.12);}
.chip.on{background:var(--accent); color:#fff;}
.search{width:100%; padding:12px 14px; border:3px solid var(--border); border-radius:16px; font-family:inherit; font-size:1em; font-weight:600; outline:none; background:#fff;}
.vocab-list{display:grid; gap:8px; margin-top:10px;}
.v-item{background:rgba(255,255,255,.93); border:3px solid var(--border); border-radius:16px; padding:10px 14px; box-shadow:0 3px 0 rgba(0,0,0,.12);}
.v-item .v-word{font-size:1.15em; font-weight:800;}
.v-item .v-py{color:#8D6E63; font-size:.85em; margin-left:8px;}
.v-item .v-def{font-size:.85em; opacity:.85; margin-top:3px;}
.v-item .v-sent{font-size:.8em; color:#6D4C41; margin-top:3px;}
.v-item .v-tag{font-size:.68em; background:#FFF3E0; border:1.5px solid var(--border); border-radius:999px; padding:1px 8px; margin-left:6px;}
.v-empty{text-align:center; opacity:.6; padding:30px;}

.shop-coins{background:var(--accent); color:#fff; border:3px solid var(--border); border-radius:16px; padding:10px 16px; font-size:1.05em; box-shadow:0 3px 0 rgba(0,0,0,.2); text-align:center;}
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.shop-item{background:rgba(255,255,255,.94); border:3px solid var(--border); border-radius:18px; padding:12px 6px; text-align:center; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.shop-item .si-emoji{font-size:2.2em;}
.shop-item b{display:block; font-size:.9em; margin:4px 0;}
.shop-item .si-price{font-size:.8em; color:#F57F17;}
.shop-item .si-btn{margin-top:6px; padding:6px 10px; border:2px solid var(--border); border-radius:999px; background:linear-gradient(180deg,#FFB74D,#F57C00); color:#fff; font-family:inherit; font-weight:700; cursor:pointer; font-size:.78em; box-shadow:0 2px 0 rgba(0,0,0,.2);}
.shop-item .si-btn.owned{background:#E0E0E0; color:#616161; box-shadow:none;}
.shop-item .si-btn.using{background:#66BB6A;}

.set-card{background:rgba(255,255,255,.94); border:3px solid var(--border); border-radius:20px; padding:16px; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.set-card label{display:block; margin:12px 0 4px; font-size:.9em;}
.set-card input[type=text]{width:100%; padding:10px; border:3px solid var(--border); border-radius:14px; font-family:inherit; font-size:1em; outline:none;}
.set-card select.select{width:100%; padding:10px; border:3px solid var(--border); border-radius:14px; font-family:inherit; font-size:1em; background:#fff; color:var(--ink);}
.set-card input[type=range]{width:100%; accent-color:var(--accent);}
.switch-row{display:flex !important; justify-content:space-between; align-items:center;}
.switch-row input{width:22px; height:22px; accent-color:var(--accent);}
.set-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.about{text-align:center; font-size:.76em; opacity:.65; margin-top:14px; line-height:1.7;}

.toast{position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:rgba(78,52,46,.92); color:#fff; padding:12px 22px; border-radius:999px; font-size:.95em; z-index:99; box-shadow:0 4px 0 rgba(0,0,0,.25);}

/* ---------- 听写 ---------- */
.btn-dictate{margin-top:12px; background:linear-gradient(180deg,#7E57C2,#5E35B1); color:#fff; box-shadow:0 5px 0 #311B92;}
.dictate-card{text-align:center;}
.dt-round-badge{display:inline-block; background:#7E57C2; color:#fff; border:3px solid var(--border); border-radius:999px; padding:4px 18px; font-size:.85em; box-shadow:0 2px 0 rgba(0,0,0,.2);}
.dt-count{margin:14px 0 6px; font-size:1em; opacity:.8;}
.dt-word-hidden{font-size:1.6em; font-weight:800; letter-spacing:2px; padding:26px 0 10px;}
.dt-sent-show{margin:0 0 6px; padding:12px 16px; background:#FFF8E1; border:3px dashed #F9A825; border-radius:14px; font-size:1.1em; font-weight:700; color:#5D4037; line-height:1.6;}
.dt-playing{min-height:1.6em; font-size:.95em; color:#7E57C2; margin-bottom:8px;}
.dt-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0;}
.dt-third{padding:12px 4px;}
.dt-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.dt-hint-btn{background:#FFF8E1; color:#B26A00;}
.dt-hint-result{margin:8px 0; padding:10px 14px; background:#FFF8E1; border:3px dashed #F9A825; border-radius:14px; font-size:1.15em; font-weight:800; color:#B26A00;}
.dt-hinted-info{margin-bottom:10px; padding:10px 12px; background:#FFE0B2; border:2px solid #F9A825; border-radius:12px; font-size:.88em; line-height:1.7;}
.dt-wide{width:100%; margin-top:12px; padding:14px; font-size:1.05em;}
.dt-half{padding:12px;}
.dt-preview{width:100%; max-height:340px; object-fit:contain; border:3px solid var(--border); border-radius:16px; margin-top:12px; background:#fff;}
.hidden-input{display:none;}
.dt-photo-btn{display:block; text-align:center; padding:14px; cursor:pointer;}
.dt-ocr-result{font-size:.82em; opacity:.7; margin-top:12px; line-height:1.6;}
.dt-align-warn{background:#FFF3E0; border:2px solid #F9A825; border-radius:12px; padding:8px 12px; font-size:.85em; margin-bottom:10px;}
.chk-row{display:grid; grid-template-columns:1fr 1.4fr auto; gap:8px; align-items:center; padding:10px 0; border-bottom:2px dashed #E0E0E0; text-align:left;}
.chk-ans{font-size:1.1em; font-weight:800;}
.chk-ans small{color:#8D6E63; font-weight:600; font-size:.7em; margin-left:4px;}
.chk-input{padding:8px 10px; border:3px solid var(--border); border-radius:12px; font-family:inherit; font-size:.95em; outline:none; width:100%;}
.chk-btns{display:flex; gap:6px;}
.chk-btn{padding:8px 10px; border:2.5px solid var(--border); border-radius:12px; background:#FFF; font-family:inherit; font-weight:700; font-size:.8em; cursor:pointer;}
.chk-btn.ok.sel{background:#C8E6C9;}
.chk-btn.no.sel{background:#FFCDD2;}
.dt-done{text-align:center; padding:30px 20px;}
.dt-done-emoji{font-size:3.6em; animation:bounce 1s ease-in-out infinite;}
.dt-done-title{font-size:1.4em; font-weight:800; margin:10px 0 4px;}
.dt-done-sub{opacity:.75; font-size:.9em;}
.dt-done-coins{margin:14px 0; background:#FFF8E1; border:2px dashed #F9A825; border-radius:999px; display:inline-block; padding:8px 26px; font-size:1.1em; font-weight:800; color:#F57F17;}
.dt-wrong-title{font-size:.9em; margin:12px 0 8px;}
.dt-wrong-words{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.dt-wrong-chip{background:#FFCDD2; color:#B71C1C;}
.sec-inline{display:block; margin:14px 0 4px; font-size:.9em;}
.hidden{display:none !important;}

.confetti{position:fixed; width:12px; height:12px; z-index:50; pointer-events:none; border-radius:3px; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg); opacity:.2;}}

@media (max-width:420px){
  .q-opts{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:repeat(2,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
}