* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --pink:#ff7eb9;
  --pink-deep:#ff4d94;
  --blue:#5dc7ff;
  --blue-deep:#2b9fe8;
  --yellow:#ffd84d;
  --yellow-deep:#ffb800;
  --green:#5dde7f;
  --green-deep:#2bc16a;
  --purple:#b98cff;
  --orange:#ff9a3d;
  --cream:#fff8f0;
}

html,body { width:100%; height:100%; overflow:hidden; }

body {
  font-family:'ZCOOL KuaiLe','Baloo 2',system-ui,'Microsoft YaHei',sans-serif;
  background:linear-gradient(160deg,#a0e9ff 0%,#c8b6ff 40%,#ffd6f0 70%,#fff3c4 100%);
  user-select:none;
  -webkit-user-select:none;
  position:fixed;
  inset:0;
  touch-action:manipulation;
}

/* ===== 背景装饰 ===== */
.bg-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-img-layer {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center bottom;
  display:none;
}
.bg-img-layer.show { display:block; }
.cloud {
  position:absolute; background:rgba(255,255,255,.85); border-radius:100px;
  filter:blur(.5px);
  animation:float-cloud linear infinite;
}
.cloud:before,.cloud:after {
  content:''; position:absolute; background:rgba(255,255,255,.85); border-radius:50%;
}
@keyframes float-cloud { from{transform:translateX(-20vw)} to{transform:translateX(120vw)} }

.star-deco {
  position:absolute; font-size:28px; opacity:.5;
  animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{transform:scale(.8);opacity:.3} 50%{transform:scale(1.2);opacity:.7} }

.hill {
  position:absolute; bottom:-10%; width:140%; height:30%;
  border-radius:50% 50% 0 0;
}
.hill.l { left:-20%; background:linear-gradient(#9ee8a8,#7ddc8e); }
.hill.r { right:-20%; background:linear-gradient(#8bdfc9,#6dd0b0); height:24%; bottom:-5%; }

/* 草坪/地面 */
.ground {
  position:absolute; bottom:0; left:0; width:100%; height:22%; z-index:0;
}
.lawn-grid {
  position:absolute; bottom:0; left:0; width:100%; height:22%; z-index:0; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 14% 50%;
}

/* ===== 背景场景角色 ===== */
.scene-char {
  position:absolute; bottom:14%; z-index:2; pointer-events:none;
  transform-origin:bottom center;
}
.scene-char.on-ground { bottom:3%; }
.scene-char.sway { animation:char-sway 3s ease-in-out infinite; }
.scene-char.sway2 { animation:char-sway 2.4s ease-in-out infinite .3s; }
.scene-char.walk { animation:char-walk 18s linear infinite; }
.scene-char.walk2 { animation:char-walk 26s linear infinite -8s; }
.scene-char.bounce { animation:char-bounce 1.8s ease-in-out infinite; }
.scene-char.bounce2 { animation:char-bounce 2.2s ease-in-out infinite .5s; }
@keyframes char-sway { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes char-walk { 0%{transform:translateX(105vw)} 100%{transform:translateX(-20vw)} }
@keyframes char-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ===== 顶部栏 ===== */
.topbar {
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; gap:8px; flex-wrap:wrap;
}
.topbar .left,.topbar .right { display:flex; align-items:center; gap:8px; min-width:auto; }
.topbar .right { justify-content:flex-end; }

.icon-btn {
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.7);
  border:3px solid rgba(255,255,255,.9);
  font-size:21px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.12);
  transition:transform .15s;
}
.icon-btn:active { transform:scale(.88) translateY(2px); }

.score-box {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.75); padding:6px 16px; border-radius:30px;
  border:3px solid #fff; box-shadow:0 4px 0 rgba(0,0,0,.1);
  font-family:'Baloo 2',sans-serif; font-size:22px; font-weight:800;
  color:#ff4d94;
}
.score-box .label { font-size:14px; color:#888; font-family:'ZCOOL KuaiLe'; }

.hearts { display:flex; gap:2px; font-size:20px; }

/* ===== 主舞台 ===== */
.stage {
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  padding:110px 16px 16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;          /* Firefox: 隐藏滚动条 */
  -ms-overflow-style:none;       /* 旧版 Edge/IE */
}
.stage::-webkit-scrollbar { display:none; }  /* Chrome/Safari: 隐藏滚动条 */
/* 用 margin:auto 垂直居中：空间够时居中，空间不够时内容从顶部开始可滚动，按钮不会丢失 */
.stage > * { margin:auto 0; width:100%; }

/* ===== 开始页 ===== */
#screen-home { text-align:center; }
.mascot {
  font-size:clamp(72px,16vw,110px); line-height:1; margin-bottom:6px;
  animation:bounce-mascot 2s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(255,77,148,.4));
}
@keyframes bounce-mascot {
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-18px) rotate(3deg)}
}

.game-title {
  font-size:clamp(32px,6vw,56px); font-weight:800;
  color:#fff; letter-spacing:4px;
  text-shadow:
    -3px -3px 0 var(--pink-deep), 3px -3px 0 var(--pink-deep),
    -3px 3px 0 var(--pink-deep), 3px 3px 0 var(--pink-deep),
    0 6px 0 var(--yellow-deep), 0 9px 14px rgba(0,0,0,.25);
  margin:6px 0 4px;
  animation:title-pop 2.5s ease-in-out infinite;
}
@keyframes title-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

.subtitle { font-size:clamp(16px,2.6vw,22px); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.15); margin-bottom:14px; }

.play-mode-grid { display:flex; gap:12px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.play-mode {
  position:relative;
  background:rgba(255,255,255,.7); border-radius:22px; padding:12px 20px; cursor:pointer;
  border:4px solid rgba(255,255,255,.8); transition:transform .15s,border-color .15s,background .15s;
  box-shadow:0 5px 0 rgba(0,0,0,.1); text-align:center; width:170px;
}
.play-mode:active { transform:translateY(3px) scale(.97); }
.play-mode .pic { font-size:36px; line-height:1; margin-bottom:4px; }
.play-mode .ttl { font-size:20px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.15); }
.play-mode .dsc { font-size:12px; color:#fff; opacity:.95; text-shadow:0 1px 0 rgba(0,0,0,.15); margin-top:2px; }
.play-mode.sel-train { background:linear-gradient(var(--blue),var(--blue-deep)); border-color:#fff; }
.play-mode.sel-level { background:linear-gradient(var(--orange),#ff7a1a); border-color:#fff; }
.play-mode.selected {
  border-color:#fff; transform:scale(1.06);
  animation:mode-glow 1.6s ease-in-out infinite;
}
@keyframes mode-glow {
  0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.7),0 0 18px 3px rgba(255,77,148,.6),0 5px 0 rgba(0,0,0,.12)}
  50%{box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 32px 9px rgba(255,77,148,.9),0 5px 0 rgba(0,0,0,.12)}
}
.play-mode.selected::after {
  content:'✓'; position:absolute; top:-12px; right:-12px;
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(var(--green),var(--green-deep));
  color:#fff; font-size:24px; font-weight:800; font-family:'Baloo 2',sans-serif;
  display:flex; align-items:center; justify-content:center;
  border:3px solid #fff; box-shadow:0 3px 0 rgba(0,0,0,.15);
  animation:pop-in .4s ease;
}

/* ===== 主题背景切换栏 ===== */
.theme-bar {
  position:relative; z-index:10;
  display:flex; gap:8px; justify-content:center; align-items:center;
  padding:2px 12px 6px; flex-wrap:wrap;
}
.theme-btn {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.82); border:3px solid rgba(255,255,255,.95);
  border-radius:18px; padding:5px 12px; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.1);
  font-size:15px; color:#666; font-family:'ZCOOL KuaiLe',sans-serif;
  transition:transform .15s,box-shadow .15s;
}
.theme-btn .ti { font-size:22px; line-height:1; }
.theme-btn:active { transform:translateY(2px) scale(.96); }
.theme-btn.active {
  background:linear-gradient(var(--pink),var(--pink-deep)); color:#fff;
  border-color:#fff; transform:scale(1.05);
  box-shadow:0 0 0 3px rgba(255,255,255,.7),0 3px 0 #d63d7a,0 0 14px rgba(255,77,148,.6);
}

.mode-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(108px, 1fr));
  gap:12px;
  width:100%;
  max-width:660px;
  margin:28px auto 0;
}
.mode-card {
  background:rgba(255,255,255,.92); border-radius:24px;
  padding:14px 6px; width:auto; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.1);
  border:4px solid #fff; transition:transform .15s; text-align:center;
}
.mode-card:active { transform:translateY(4px) scale(.97); }
.mode-card .ic { font-size:44px; line-height:1; margin-bottom:6px; }
.mode-card .nm { font-size:17px; color:#555; }
.mode-card.m1 { background:linear-gradient(#fff,#ffe8f0); }
.mode-card.m2 { background:linear-gradient(#fff,#e8f4ff); }
.mode-card.m3 { background:linear-gradient(#fff,#fff8e0); }
.mode-card.m4 { background:linear-gradient(#fff,#e8fff0); }
.mode-card.m5 { background:linear-gradient(#fff,#f3e8ff); }
.mode-card.m5 .nm { color:#9a5cff; }

.big-btn {
  font-family:'ZCOOL KuaiLe',sans-serif; font-size:28px; color:#fff;
  background:linear-gradient(var(--pink),var(--pink-deep));
  border:none; border-radius:50px; padding:14px 44px; cursor:pointer;
  box-shadow:0 6px 0 #d63d7a, 0 10px 24px rgba(255,77,148,.5);
  text-shadow:0 2px 0 rgba(0,0,0,.15);
  transition:transform .15s, box-shadow .15s;
  margin-top:14px; letter-spacing:2px;
}
.big-btn:active { transform:translateY(5px); box-shadow:0 1px 0 #d63d7a,0 4px 12px rgba(255,77,148,.4); }

/* ===== 游戏页 ===== */
#screen-game { display:none; width:100%; max-width:720px; flex-direction:column; }
.q-card {
  background:rgba(255,255,255,.95); border-radius:32px;
  padding:24px 20px; width:100%; text-align:center;
  box-shadow:0 8px 0 rgba(0,0,0,.1), 0 14px 30px rgba(0,0,0,.15);
  border:5px solid #fff; position:relative; overflow:hidden;
}
.q-card .char {
  position:absolute; top:-10px; right:10px; font-size:50px; opacity:.3; transform:rotate(15deg);
}
.q-card .read-btn {
  position:absolute; top:10px; left:10px; z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(var(--yellow),var(--yellow-deep));
  border:3px solid #fff; color:#fff; font-size:20px; cursor:pointer;
  box-shadow:0 4px 0 #e0a200, 0 6px 12px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s; line-height:1;
}
.q-card .read-btn:active { transform:scale(.88) translateY(2px); }
.q-card .read-btn.speaking { animation:spk-pulse .6s ease-in-out infinite; }
@keyframes spk-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

.obj-row {
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px;
  font-size:40px; margin:10px 0 14px; line-height:1.1;
  min-height:50px;
}
.obj-item { display:inline-block; animation:pop-in .4s ease-out backwards; }
@keyframes pop-in { from{transform:scale(0) rotate(-180deg);opacity:0} to{transform:scale(1);opacity:1} }

.q-text {
  font-size:clamp(36px,7vw,52px); font-weight:800; color:#444;
  margin:6px 0; line-height:1.2;
}
.q-text .op { color:var(--blue-deep); margin:0 6px; }
.q-text .eq { color:var(--pink-deep); margin:0 6px; }
.q-text .qmark { color:var(--orange); }

.answer-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-top:20px; width:100%;
}
.answer-grid.solo { grid-template-columns:1fr 1fr 1fr; }
.ans-btn {
  font-family:'Baloo 2','ZCOOL KuaiLe',sans-serif; font-size:42px; font-weight:800; color:#fff;
  border:none; border-radius:24px; padding:22px 0; cursor:pointer;
  text-shadow:0 3px 0 rgba(0,0,0,.18);
  transition:transform .12s; position:relative; overflow:hidden;
}
.ans-btn:nth-child(1){background:linear-gradient(var(--blue),var(--blue-deep));box-shadow:0 6px 0 #1a7bc4}
.ans-btn:nth-child(2){background:linear-gradient(var(--green),var(--green-deep));box-shadow:0 6px 0 #1f9c54}
.ans-btn:nth-child(3){background:linear-gradient(var(--orange),#ff7a1a);box-shadow:0 6px 0 #cc6111}
.ans-btn:nth-child(4){background:linear-gradient(var(--purple),#9a5cff);box-shadow:0 6px 0 #753fc4}
.ans-btn:active { transform:translateY(5px) scale(.97); }
.ans-btn.correct { animation:correct-flash .6s ease; }
.ans-btn.wrong { animation:wrong-shake .5s ease; }
@keyframes correct-flash {
  0%{transform:scale(1)}
  30%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(93,222,127,.5),0 6px 0 #1f9c54}
  60%{transform:scale(1.1)}
  100%{transform:scale(1)}
}
@keyframes wrong-shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-10px)}
  40%{transform:translateX(10px)}
  60%{transform:translateX(-7px)}
  80%{transform:translateX(7px)}
}

/* ===== 反馈层 ===== */
.feedback {
  position:fixed; inset:0; z-index:50; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.feedback.show { opacity:1; }
.feedback .msg {
  font-size:clamp(44px,8vw,72px); font-weight:800; color:#fff;
  text-shadow:-3px -3px 0 var(--green-deep),3px -3px 0 var(--green-deep),-3px 3px 0 var(--green-deep),3px 3px 0 var(--green-deep),0 6px 0 var(--yellow-deep),0 10px 20px rgba(0,0,0,.3);
  transform:scale(0); animation:msg-pop .6s cubic-bezier(.18,.89,.32,1.28) forwards;
}
.feedback .sub { font-size:clamp(22px,4vw,32px); color:#fff; margin-top:8px; text-shadow:0 2px 4px rgba(0,0,0,.3); }
@keyframes msg-pop { 0%{transform:scale(0) rotate(-20deg)} 60%{transform:scale(1.2) rotate(8deg)} 100%{transform:scale(1) rotate(0)} }

.confetti { position:absolute; width:14px; height:14px; opacity:0; }
.star-burst { position:absolute; font-size:32px; opacity:0; }

/* ===== 结束页 ===== */
#screen-end { display:none; text-align:center; }
#screen-end .mascot { animation:bounce-mascot 1s ease-in-out infinite; }
.end-title { font-size:clamp(36px,6vw,56px); color:#fff; text-shadow:-2px -2px 0 var(--pink-deep),2px -2px 0 var(--pink-deep),-2px 2px 0 var(--pink-deep),2px 2px 0 var(--pink-deep),0 6px 0 var(--yellow-deep),0 8px 16px rgba(0,0,0,.2); margin:10px 0; }
.result-stars { font-size:50px; margin:12px 0; }
.result-info { background:rgba(255,255,255,.92); border-radius:24px; padding:16px 28px; margin:16px auto; display:inline-block; border:4px solid #fff; box-shadow:0 6px 0 rgba(0,0,0,.1); }
.result-info .row { font-size:24px; color:#666; margin:4px 0; }
.result-info .row b { color:var(--pink-deep); font-size:30px; }

/* 进度条 */
.progress-wrap { width:100%; max-width:400px; height:18px; background:rgba(255,255,255,.5); border-radius:20px; overflow:hidden; margin:0 auto 14px; border:2px solid #fff; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--green),var(--yellow),var(--pink)); border-radius:20px; transition:width .4s ease; width:0%; }

/* ===== 小屏适配 (平板/手机) ===== */
@media (max-width:760px){
  .stage { padding:96px 12px 14px; }
  .icon-btn { width:40px; height:40px; font-size:18px; border-width:2px; }
  .score-box { font-size:18px; padding:4px 12px; }
  .score-box .label { display:none; }
  .mascot { font-size:clamp(60px,15vw,88px); }
  .game-title { font-size:clamp(28px,5.5vw,44px); letter-spacing:2px; }
  .play-mode { width:140px; padding:10px 14px; }
  .play-mode .pic { font-size:32px; }
  .play-mode .ttl { font-size:18px; }
  .play-mode .dsc { font-size:11px; }
  .mode-card { padding:12px 6px; }
  .mode-card .ic { font-size:38px; }
  .mode-card .nm { font-size:15px; }
  .big-btn { font-size:24px; padding:13px 36px; }
  .q-card { padding:20px 16px; }
  .obj-row { font-size:32px; }
  .q-text { font-size:clamp(30px,8vw,42px); }
  .ans-btn { font-size:32px; padding:16px 0; }
  .result-stars { font-size:40px; }
  .end-title { font-size:clamp(30px,6vw,44px); }
}
@media (max-width:480px){
  .stage { padding:88px 10px 12px; }
  .topbar { padding:8px 10px; }
  .icon-btn { width:36px; height:36px; font-size:16px; }
  .hearts { font-size:16px; }
  .play-mode-grid { gap:10px; }
  .mode-grid { gap:10px; }
  .mode-card .ic { font-size:32px; }
  .mode-card .nm { font-size:13px; }
  .obj-row { font-size:28px; }
  .ans-btn { font-size:28px; padding:14px 0; }
  .result-info { padding:12px 20px; }
  .result-info .row { font-size:20px; }
  .result-info .row b { font-size:26px; }
}

/* ===== 横屏/矮屏适配 (平板横放) ===== */
@media (orientation:landscape) and (max-height:700px){
  .stage { padding:92px 14px 12px; }
  .mascot { font-size:clamp(44px,10vh,72px); margin-bottom:2px; }
  .game-title { font-size:clamp(24px,4.5vw,38px); margin:4px 0 2px; letter-spacing:2px; }
  .subtitle { margin-bottom:8px; font-size:clamp(14px,2.2vw,18px); }
  .play-mode-grid { margin-bottom:8px; gap:10px; }
  .play-mode { width:140px; padding:8px 12px; }
  .play-mode .pic { font-size:28px; }
  .play-mode .ttl { font-size:16px; }
  .play-mode .dsc { font-size:10px; }
  .mode-grid { gap:10px; }
  .mode-card { padding:8px 6px; }
  .mode-card .ic { font-size:32px; margin-bottom:3px; }
  .mode-card .nm { font-size:14px; }
  .big-btn { margin-top:8px; padding:10px 32px; font-size:22px; }
  .q-card { padding:18px 14px; }
  .obj-row { font-size:30px; margin:8px 0 10px; }
  .q-text { font-size:clamp(28px,6vh,40px); }
  .ans-btn { font-size:30px; padding:14px 0; }
  .progress-wrap { margin-bottom:10px; }
  .result-info { margin:10px auto; padding:12px 22px; }
  .result-stars { margin:8px 0; font-size:40px; }
}

/* ============================================================
   识字乐园
   ============================================================ */
/* ---- 单元选择 ---- */
#screen-lit-units { text-align:center; }
.lit-title {
  font-size:clamp(34px,6vw,52px); color:#fff; margin:8px 0 4px;
  text-shadow:-2px -2px 0 var(--pink-deep),2px -2px 0 var(--pink-deep),-2px 2px 0 var(--pink-deep),2px 2px 0 var(--pink-deep),0 5px 0 var(--yellow-deep),0 8px 14px rgba(0,0,0,.2);
}
.lit-sub { font-size:clamp(16px,2.6vw,22px); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.15); margin-bottom:16px; }
.lit-unit-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; width:100%; max-width:760px; margin:0 auto 18px;
}
.lit-unit-card {
  background:rgba(255,255,255,.94); border:4px solid #fff; border-radius:22px;
  padding:12px 10px 14px; cursor:pointer; text-align:center;
  box-shadow:0 6px 0 rgba(0,0,0,.12), 0 10px 18px rgba(0,0,0,.1);
  transition:transform .15s;
}
.lit-unit-card:active { transform:translateY(4px) scale(.97); }
.lit-unit-card .luc-prev {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:4px; margin-bottom:10px; min-height:34px;
}
.lit-unit-card .luc-prev-char {
  width:30px; height:30px; line-height:30px; border-radius:9px;
  font-size:19px; font-weight:800; text-align:center;
  border:2px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.09);
}
.lit-unit-card .luc-prev-char:nth-child(6n+1){ background:linear-gradient(#ffe8f0,#ffd6e6); color:#ff4d94; }
.lit-unit-card .luc-prev-char:nth-child(6n+2){ background:linear-gradient(#e8f4ff,#d6ecff); color:#2b9fe8; }
.lit-unit-card .luc-prev-char:nth-child(6n+3){ background:linear-gradient(#fff8e0,#fff0c4); color:#e67e22; }
.lit-unit-card .luc-prev-char:nth-child(6n+4){ background:linear-gradient(#e8fff0,#d6f7e0); color:#2bc16a; }
.lit-unit-card .luc-prev-char:nth-child(6n+5){ background:linear-gradient(#f3e8ff,#e6d6ff); color:#9a5cff; }
.lit-unit-card .luc-prev-char:nth-child(6n+6){ background:linear-gradient(#fff0f6,#ffe0ec); color:#ff7eb9; }
.lit-unit-card .luc-prev-empty { font-size:12px; color:#bbb; }
.lit-unit-card .luc-nm { font-size:19px; color:#555; }
.lit-unit-card .luc-ds { font-size:12px; color:#999; margin-top:2px; min-height:16px; }
.lit-unit-card .luc-cn { display:inline-block; margin-top:8px; background:#ffe8f0; color:var(--pink-deep); border-radius:10px; padding:2px 10px; font-size:12px; }
.lit-back { margin-top:0; }
.lit-load-err { color:#c0392b; background:#fff; border-radius:14px; padding:16px; box-shadow:0 4px 0 rgba(0,0,0,.1); }

/* ---- 学习页框架 ---- */
#screen-lit { display:none; width:100%; max-width:680px; flex-direction:column; align-items:center; }
.lit-head {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:10px;
}
.lit-close { width:42px; height:42px; font-size:18px; }
.lit-title-sm {
  font-size:clamp(18px,3vw,24px); color:#fff; font-weight:800;
  text-shadow:0 2px 0 rgba(0,0,0,.2); flex:1; text-align:center;
}
.lit-score {
  background:rgba(255,255,255,.85); border:3px solid #fff; border-radius:20px;
  padding:4px 12px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:18px; color:var(--yellow-deep);
  box-shadow:0 3px 0 rgba(0,0,0,.1); white-space:nowrap;
}
.lit-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; width:100%; }
.lit-tab {
  background:rgba(255,255,255,.85); border:3px solid #fff; border-radius:20px;
  padding:7px 14px; cursor:pointer; font-family:'ZCOOL KuaiLe',sans-serif; font-size:16px; color:#666;
  box-shadow:0 3px 0 rgba(0,0,0,.1); transition:transform .15s;
}
.lit-tab:active { transform:translateY(2px) scale(.96); }
.lit-tab.active {
  background:linear-gradient(var(--pink),var(--pink-deep)); color:#fff; border-color:#fff;
  box-shadow:0 3px 0 #d63d7a, 0 0 12px rgba(255,77,148,.5);
}
.lit-body { width:100%; }

.lit-qhead { font-size:clamp(17px,2.8vw,22px); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.2); margin-bottom:12px; text-align:center; }
.lit-qhead .lit-pg { font-size:14px; opacity:.85; margin-left:8px; }

/* ---- 认/听 展示区 ---- */
.lit-show {
  background:rgba(255,255,255,.95); border:5px solid #fff; border-radius:28px;
  padding:18px; text-align:center; box-shadow:0 8px 0 rgba(0,0,0,.1), 0 12px 24px rgba(0,0,0,.12);
  margin-bottom:16px;
}
.lits-em { font-size:clamp(64px,14vw,96px); line-height:1; margin-bottom:6px; }
.lits-em.small { font-size:clamp(40px,8vw,60px); }
.lits-py { font-size:clamp(22px,4vw,30px); color:var(--blue-deep); font-weight:800; letter-spacing:2px; }
.lits-ph { font-size:clamp(16px,3vw,22px); color:#888; margin-top:4px; }
.lit-big-sound {
  width:88px; height:88px; border-radius:50%; font-size:40px; cursor:pointer;
  background:linear-gradient(var(--yellow),var(--yellow-deep));
  border:4px solid #fff; box-shadow:0 5px 0 #e0a200, 0 10px 18px rgba(0,0,0,.15);
  animation:sound-pulse 1.6s ease-in-out infinite;
}
.lit-replay {
  width:52px; height:52px; font-size:26px; margin:0 auto 6px;
}
@keyframes sound-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ---- 选项按钮 ---- */
.lit-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; }
.lit-opt {
  font-family:'Baloo 2','ZCOOL KuaiLe',sans-serif;
  font-size:clamp(34px,8vw,46px); font-weight:800; color:#fff;
  background:linear-gradient(var(--blue),var(--blue-deep));
  border:4px solid #fff; border-radius:20px; padding:18px 0; cursor:pointer;
  box-shadow:0 6px 0 #1a7bc4; text-shadow:0 3px 0 rgba(0,0,0,.18);
  transition:transform .12s;
}
.lit-opt:active { transform:translateY(4px) scale(.97); }
.lit-opt:nth-child(2){ background:linear-gradient(var(--green),var(--green-deep)); box-shadow:0 6px 0 #1f9c54; }
.lit-opt:nth-child(3){ background:linear-gradient(var(--orange),#ff7a1a); box-shadow:0 6px 0 #cc6111; }
.lit-opt:nth-child(4){ background:linear-gradient(var(--purple),#9a5cff); box-shadow:0 6px 0 #753fc4; }
.lit-opt.ok { animation:lit-ok .6s ease; }
.lit-opt.bad { animation:lit-bad .5s ease; }
@keyframes lit-ok { 0%,100%{transform:scale(1)} 30%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(93,222,127,.5),0 6px 0 #1f9c54} 60%{transform:scale(1.08)} }
@keyframes lit-bad { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

/* ---- 读 ---- */
.lit-read-card {
  background:rgba(255,255,255,.95); border:5px solid #fff; border-radius:28px;
  padding:18px; text-align:center; box-shadow:0 8px 0 rgba(0,0,0,.1), 0 12px 24px rgba(0,0,0,.12);
  margin-bottom:14px;
}
.lrc-char {
  font-size:clamp(88px,22vw,140px); line-height:1.05; color:var(--pink-deep); font-weight:800;
  text-shadow:0 6px 0 rgba(0,0,0,.08);
}
.lrc-py { font-size:clamp(22px,4vw,30px); color:var(--blue-deep); font-weight:800; letter-spacing:3px; margin:4px 0 8px; }
.lrc-em { font-size:clamp(18px,3vw,24px); color:#666; }
.lrc-sent { font-size:clamp(15px,2.4vw,19px); color:#999; margin-top:8px; line-height:1.5; }
.lit-read-btns, .lit-write-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.lit-rbtn {
  font-family:'ZCOOL KuaiLe',sans-serif; font-size:19px; color:#fff; cursor:pointer;
  background:linear-gradient(var(--blue),var(--blue-deep));
  border:3px solid #fff; border-radius:40px; padding:11px 22px;
  box-shadow:0 5px 0 #1a7bc4, 0 8px 16px rgba(0,0,0,.12);
  transition:transform .12s;
}
.lit-rbtn:active { transform:translateY(3px) scale(.97); }
.lit-rbtn.green { background:linear-gradient(var(--green),var(--green-deep)); box-shadow:0 5px 0 #1f9c54, 0 8px 16px rgba(0,0,0,.12); }
.lit-rbtn.orange { background:linear-gradient(var(--orange),#ff7a1a); box-shadow:0 5px 0 #cc6111, 0 8px 16px rgba(0,0,0,.12); }
.lit-sr-status { text-align:center; margin-top:10px; font-size:15px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); min-height:20px; }
.lit-sr-status.listening { color:var(--yellow); animation:sound-pulse 1.2s ease-in-out infinite; }
.lit-sr-status.warn { color:#fff; }

/* ---- 写 ---- */
.lit-write-wrap { display:flex; gap:16px; align-items:center; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.lit-canvas {
  width:min(62vw,340px); height:min(62vw,340px);
  background:rgba(255,255,255,.95); border:5px solid #fff; border-radius:24px;
  box-shadow:0 8px 0 rgba(0,0,0,.1), 0 12px 24px rgba(0,0,0,.12);
  touch-action:none; cursor:crosshair;
}
.lit-write-info { text-align:center; }
.lwi-char { font-size:clamp(56px,12vw,88px); color:var(--pink-deep); font-weight:800; line-height:1; }
.lwi-py { font-size:22px; color:var(--blue-deep); font-weight:800; margin:4px 0; }
.lwi-em { font-size:17px; color:#888; }

/* ---- 单元完成 ---- */
.lit-complete { text-align:center; padding:20px 0; }
.lc-em { font-size:80px; margin-bottom:6px; animation:bounce-mascot 1.2s ease-in-out infinite; }
.lc-t { font-size:clamp(28px,5vw,42px); color:#fff; font-weight:800; text-shadow:0 3px 0 rgba(0,0,0,.2); }
.lc-info { font-size:18px; color:#fff; opacity:.9; margin-top:8px; }
.lc-score { font-size:26px; color:var(--yellow); margin:10px 0 16px; text-shadow:0 2px 0 rgba(0,0,0,.2); }
.lit-complete-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* 识字小屏适配 */
@media (max-width:520px){
  .lit-opts { gap:10px; }
  .lit-opt { padding:14px 0; }
  .lit-write-wrap { gap:10px; }
  .lit-canvas { width:min(74vw,320px); height:min(74vw,320px); }
  .lit-rbtn { font-size:16px; padding:9px 16px; }
}