:root{
/* 重做令牌 2026-07-28 */
--badge-size:38px;--badge-size-sm:34px;--badge-bg:var(--blue);--badge-fg:#FFF;
--badge-offset:10px;--radius-badge:12px;
--glow-speak:0 0 0 4px rgba(30,155,240,.30),0 0 22px rgba(30,155,240,.45);
--speak-scale:1.03;--speak-dur:240ms;
--tree-max-h:70vh;--tree-pad:16px;--unit-gap:16px;--unit-w-land:242px;--unit-h-land:140px;

  /* ——— §3 色彩令牌（丛林秘境·定稿） ——— */
  --red:#C2562B;
  --yellow:#E8A33D;
  --blue:#2F9E57;
  --green:#4FB477;
  --orange:#DD8A3A;
  --purple:#9B5BA6;
  --pink:#D98FA0;
  --cyan:#4FAE9C;
  --bg:#F4ECD7;
  --surface:#FBF4E4;
  --ink:#3A2A18;
  --ink-soft:#6B5436;
  --stroke:#6B5436;
  --stroke-soft:#C7B393;
  --success:#2F9E57;
  --error:#C2562B;
  --error-strong:#A23E1C;
  --reveal-blue:#1E6B3C;
  --complete:#E8A33D;
  --unlock:#2F9E57;
  --surprise:#9B5BA6;
  --green-soft:#DDEBD6;   /* 已完成单元浅绿背景（补全旧版缺失变量） */
  --env-1:#E9EFD6;
  --env-2:#DFEAC2;
  --env-3:#ECE4CC;
  --env-deco:#DFEAC2;
  --font-round:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,system-ui,sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-lg:22px; --radius-md:16px;
  --shadow-soft:0 6px 0 rgba(58,42,24,.14),0 10px 24px rgba(58,42,24,.12);
  --shadow-press:0 2px 0 rgba(58,42,24,.14);
  --glow-success:0 0 0 4px rgba(47,158,87,.45),0 0 24px rgba(47,158,87,.6);
  --glow-unlock:0 0 0 4px rgba(30,107,60,.45),0 0 28px rgba(30,107,60,.7);
  --glow-error:0 0 0 4px rgba(194,86,43,.42),0 0 22px rgba(194,86,43,.55);
  --glow-surprise:0 0 0 4px rgba(155,91,166,.45),0 0 30px rgba(155,91,166,.7);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms; --dur-celebrate:700ms;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  /* R3 虚线框（已用空位） */
  --drag-empty-border: 3px dashed var(--stroke-soft);
  --drag-empty-bg: rgba(244,236,215,.42);
  /* R2 引导（拖拽目标绿，绝不用红） */
  --guide-ring: 0 0 0 5px rgba(47,158,87,.45), 0 0 22px rgba(47,158,87,.55);
  /* R5 中性淡出（未参与干扰项，非红非虚线） */
  --reveal-dim-opacity: .45;
  --reveal-dim-filter: grayscale(.3);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-round);
  background:var(--bg);
  color:var(--ink);
  font-weight:700;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;          /* 禁文本选中（含 Safari/iOS） */
  -webkit-touch-callout:none;         /* 禁长按弹出/选中高亮（拖图蓝色覆盖的根因） */
}
/* 禁图片原生拖拽：长按拖动选项图时，浏览器默认会把图片当拖拽源并显示蓝色选中覆盖，这里彻底关掉 */
img,.pic-img{ -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }
#app{position:relative;min-height:100%;max-width:520px;margin:0 auto;}

/* ====== 背景静物装饰 (env-deco) ====== */
.bg-deco{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.bg-deco .deco{position:absolute;pointer-events:auto;cursor:pointer;font-size:30px;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.08));opacity:.85;transition:transform var(--dur-fast) var(--ease-spring);}
.bg-deco .deco:active{transform:scale(.85);}
#app > .screen{position:relative;z-index:2;min-height:100dvh;padding:calc(64px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));}

/* ====== 顶部 sticky bar ====== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-top));
  background:linear-gradient(var(--bg),rgba(255,249,240,.0));}
.topbar .home{width:44px;height:44px;border-radius:50%;border:3px solid var(--stroke);
  background:var(--surface);font-size:22px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-press);cursor:pointer;}
.stars-pill{display:flex;align-items:center;gap:4px;background:var(--surface);border:3px solid var(--stroke);
  border-radius:999px;padding:6px 12px;font-size:18px;box-shadow:var(--shadow-soft);}
.stars-pill .s{color:var(--complete);}

/* ====== 通用按钮 ====== */
.btn{border:3px solid var(--stroke);border-radius:var(--radius-lg);background:var(--red);color:#fff;
  font-family:inherit;font-weight:800;font-size:24px;padding:18px 28px;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast);}
.btn:active{transform:translateY(4px) scale(.97);box-shadow:var(--shadow-press);}
.btn.blue{background:var(--blue);} .btn.green{background:var(--green);}
.btn.yellow{background:var(--yellow);color:var(--ink);} .btn.ghost{background:var(--surface);color:var(--ink);}

/* ====== 开始页 ====== */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-top:8px;}
.mascot{font-size:74px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12));animation:bob 2.4s var(--ease-in-out) infinite;}
.hero h1{font-size:34px;margin:0;font-weight:800;line-height:1.2;}
.hero p{font-size:20px;color:var(--ink-soft);margin:0;line-height:1.35;}
.hint{font-size:15px;color:var(--ink-soft);margin-top:6px;line-height:1.4;}

/* 登录占位屏：昵称输入框（儿童隐私友好，选填、仅存本机） */
.login-input{width:100%;margin-top:6px;padding:12px 14px;font-family:inherit;font-size:18px;
  border:3px solid var(--stroke);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);
  text-align:center;outline:none;}
.login-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,141,239,.25);}

/* ====== 关卡地图 ====== */
/* 关卡页：左侧竖排标题(spine) + 右侧关卡地图(可滚动；Safari 用 dvh 自适应不裁切) */
#app > #screen-tree{display:flex;flex-direction:row;align-items:stretch;
  height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 56px) env(safe-area-inset-right) env(safe-area-inset-bottom) calc(env(safe-area-inset-left) + 2px);}
.tree-spine{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:38px;padding:10px 4px;
  border-right:rgba(107,84,54,.15);background:rgba(255,241,214,.30);}
.tree-spine .spine-ico{width:22px;height:22px;flex:none;}
.tree-spine .spine-ico svg{width:100%;height:100%;display:block;}
.tree-spine .spine-txt{writing-mode:vertical-rl;text-orientation:upright;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:2px;}
.tree-spine .spine-sub{writing-mode:vertical-rl;text-orientation:upright;font-size:10px;font-weight:700;color:var(--ink-soft);letter-spacing:1px;}
.unit-node{position:relative;border:3px solid var(--stroke);border-radius:var(--radius-lg);
  padding:14px;margin-bottom:12px;box-shadow:var(--shadow-soft);background:var(--surface);transition:box-shadow var(--dur-base) var(--ease-spring);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.unit-node.current{background:var(--yellow);box-shadow:inset 4px 0 0 var(--ink),0 0 0 2px var(--ink),var(--shadow-soft);}
.unit-node.locked{opacity:.6;filter:grayscale(.4);}
/* 已完成：浅绿背景 + 右上角勾选（状态用颜色+边框，不用 scale） */
.unit-node.completed{background:var(--green-soft);border-color:var(--complete);box-shadow:var(--shadow-soft);}
.unit-node.completed::after{content:'✓';position:absolute;top:8px;right:10px;width:26px;height:26px;background:var(--complete);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;border:2.5px solid var(--stroke);}
.unit-node.completed .enter{background:var(--green);color:#fff;}
/* .u-top 横排已废除，统一竖向列布局 */
.unit-node .u-badge{width:48px;height:48px;flex:none;border-radius:14px;border:2.5px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--surface);}
.unit-node.current .u-badge{background:#fff;}
/* 单元名两行：第一行「第 N 单元」（小字、弱色），第二行主题（可自然换行，避免被截断） */
.unit-node .u-name{display:flex;flex-direction:column;gap:2px;line-height:1.2;}
.unit-node .u-name .u-num{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:0;white-space:nowrap;}
.unit-node .u-name .u-title{font-size:18px;font-weight:800;white-space:normal;overflow-wrap:anywhere;}
.unit-node .u-sub{font-size:15px;color:var(--ink-soft);font-weight:700;}
.unit-node .u-stars{margin-left:auto;font-size:18px;color:var(--complete);font-weight:800;display:flex;align-items:center;gap:4px;}
.sub-stars{display:flex;gap:3px;margin-top:8px;flex-wrap:nowrap;justify-content:center;}
.sub-star{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--stroke);display:flex;
  align-items:center;justify-content:center;font-size:22px;background:var(--surface);}
.sub-star.locked{color:var(--ink-soft);background:#f0e9dc;}
.sub-star.unlocked{color:var(--ink-soft);}
.sub-star.done{background:var(--complete);color:#fff;box-shadow:var(--shadow-soft);}
.sub-star.current{box-shadow:var(--glow-unlock);transform:scale(1.06);}
.unit-node .enter{margin-top:14px;width:100%;}

/* ====== 练习页 ====== */
.game-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.game-title{font-size:22px;font-weight:800;}
.game-sub{font-size:15px;color:var(--ink-soft);font-weight:700;}
.progress-wrap{height:16px;border-radius:var(--radius-md);background:var(--stroke-soft);
  border:2px solid var(--stroke);overflow:hidden;margin-bottom:14px;}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--green),var(--cyan));
  border-radius:var(--radius-md);transition:width var(--dur-slow) var(--ease-spring);}
/* 顶部题目区 = 单词卡 / 闪卡：与下方选项卡同款磁卡质感 */
.word-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:6px 0 16px;padding:22px 18px 14px;overflow:hidden;
  border:3px solid var(--stroke);border-radius:28px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF7EC 100%);
  box-shadow:0 8px 0 rgba(43,43,43,.12),0 16px 28px rgba(43,43,43,.18);}
.word-card::before{content:"";position:absolute;top:8px;left:12px;right:12px;height:36%;
  border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0));
  pointer-events:none;}
/* 答错气泡内的"再试一次"循环箭头图标 */
.bubble svg{width:34px;height:34px;display:block;}
/* 拖拽槽：用"手把图拖进框"动画图标引导（替代文字） */
.slot-hint{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.slot-hint svg{width:104px;height:70px;display:block;}
.slot-hint .dh-card{animation:dh-move 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes dh-move{0%,100%{transform:translateX(0);}50%{transform:translateX(40px);}}

/* 发呆轻提示：单词卡轻晃（替代"长时间不用突然弹脸"） */
.word-card.idle{animation:card-nudge 1.1s ease-in-out 2;}
@keyframes card-nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
/* 第三级：轻轻点出"正确答案是哪张"（柔光脉冲，不显眼、不替孩子选） */
.option.idle-correct{animation:correct-glow 1.3s ease-in-out infinite;
  box-shadow:0 0 0 4px rgba(47,158,87,.55),0 7px 0 rgba(43,43,43,.12),0 13px 24px rgba(43,43,43,.18);}
@keyframes correct-glow{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.03);}}
@media (prefers-reduced-motion:reduce){
  .word-card.idle{animation:none;}
  .option.idle-correct{animation:none;}
  .word-pic-slot.err1,.word-pic-slot.err2{animation:none;}
}

/* 5~8「组装词卡」：单词卡内嵌图片位，把图拖进来拼成完整词卡（替代独立的拖图槽） */
.word-pic-slot{width:128px;height:108px;margin:12px auto 2px;border-radius:18px;
  border:3px dashed var(--stroke);background:rgba(43,43,43,.05);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);}
.word-pic-slot .ph{width:54px;height:54px;opacity:.32;}
.word-pic-slot .ph svg{width:100%;height:100%;display:block;}
.word-pic-slot.over{border-color:var(--blue);background:#E9EFD6;box-shadow:var(--glow-unlock);border-style:solid;}
.word-pic-slot.filled{border-style:solid;border-color:var(--success);box-shadow:var(--glow-success);background:#fff;}
.word-pic-slot.filled .pic{width:100%;height:100%;padding:10px;}
.word-pic-slot.filled .pic svg,.word-pic-slot.filled .pic img,.word-pic-slot.filled>img,.word-pic-slot.filled>svg{width:100%;height:100%;object-fit:contain;display:block;}
.word-pic-slot.filled::after{content:"";position:absolute;top:6px;right:6px;width:28px;height:28px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13 l5 5 L20 6' fill='none' stroke='%232F9E57' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  animation:pop-in var(--dur-slow) var(--ease-spring);}
/* 大孩子版：揭示答案时词卡图片位用蓝色"眼睛"，区别于拼对时的绿色对勾 */
.word-pic-slot.filled.reveal{border-color:var(--reveal-blue);box-shadow:var(--glow-unlock);background:#ECE4CC;}
.word-pic-slot.filled.reveal::after{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12 Q12 4 21 12 Q12 20 3 12 Z' fill='none' stroke='%231E6B3C' stroke-width='2.5' stroke-linejoin='round'/><circle cx='12' cy='12' r='3.5' fill='%231E6B3C'/></svg>") center/contain no-repeat;}
.word-pic-slot.err1{border-color:var(--error);animation:shake-sm var(--dur-base) var(--ease-out);}
.word-pic-slot.err2{border-color:var(--error-strong);border-width:4px;animation:shake-lg var(--dur-base) var(--ease-out);}
.word-pic-slot.wrong{border-color:var(--error);border-width:4px;box-shadow:var(--glow-error);background:#fff0ef;}

/* 揭示正确答案：飞起一张「上图下文」单词卡（替代单纯蓝眼/绿勾标记，更醒目） */
.reveal-card-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none;}
.reveal-card{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#FFF7EC 100%);
  border:6px solid var(--reveal-blue);border-radius:30px;padding:22px 30px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.30);text-align:center;
  transform:translateY(60px) scale(.3);opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;}
.reveal-card.show{transform:translateY(0) scale(1);opacity:1;}
.reveal-card .rc-pic{width:170px;height:170px;margin:0 auto 10px;}
.reveal-card .rc-pic svg,.reveal-card .rc-pic img{width:100%;height:100%;object-fit:contain;display:block;}
.reveal-card .rc-en{font-size:46px;font-weight:800;color:var(--ink);letter-spacing:.5px;line-height:1.05;}
.reveal-card .rc-zh{font-size:22px;color:var(--ink-soft);font-weight:700;margin-top:2px;}
.reveal-card .rc-tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:var(--reveal-blue);color:#fff;font-size:15px;font-weight:800;padding:4px 16px;border-radius:999px;white-space:nowrap;}
@media (prefers-reduced-motion:reduce){ .reveal-card{transition:none;transform:translateY(0) scale(1);opacity:1;} }

/* 5~8 答案槽 */
.slot{height:92px;border:3px dashed var(--stroke);border-radius:var(--radius-md);
  background:var(--env-2);display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;color:var(--ink-soft);font-weight:800;margin:0 0 14px;transition:all var(--dur-base);}
.slot.over{border-color:var(--blue);background:#E9EFD6;box-shadow:var(--glow-unlock);}
.slot .slot-emoji{font-size:44px;}

/* 选项网格 */
.grid{display:grid;gap:16px;}
.grid.g2{grid-template-columns:repeat(2,1fr);}
.grid.g3{grid-template-columns:repeat(3,1fr);gap:12px;}
/* 选项 = 磁卡 / 闪卡：白底渐变 + 厚黑边 + 多层阴影（悬浮磁吸感） */
.option{position:relative;border:3px solid var(--stroke);border-radius:26px;touch-action:none;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF7EC 100%);
  box-shadow:0 7px 0 rgba(43,43,43,.12),0 13px 24px rgba(43,43,43,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:12px 8px;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast),opacity var(--dur-base);}
.grid.g2 .option{min-height:200px;}
.grid.g3 .option{min-height:160px;}
.option:active{transform:translateY(5px) scale(.98);
  box-shadow:0 2px 0 rgba(43,43,43,.12),0 5px 12px rgba(43,43,43,.14);}
/* 卡内「图片窗口」：浅色圆角内嵌 + 内阴影，强化"贴纸卡"质感 */
.option .pic{width:100%;max-width:152px;height:auto;aspect-ratio:1/1;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  padding:8px;border-radius:18px;background:rgba(255,255,255,.6);
  box-shadow:inset 0 2px 7px rgba(43,43,43,.10);
  pointer-events:none; -webkit-user-drag:none; user-drag:none;}  /* 图片不接指针/不可原生拖走：整张卡才是唯一拖拽目标 */
.grid.g3 .option .pic{max-width:104px;padding:6px;border-radius:14px;}
.option .pic svg{width:100%;height:100%;display:block;-webkit-user-drag:none;user-drag:none;}
.option .pic img{width:100%;height:100%;object-fit:contain;border-radius:12px;-webkit-user-drag:none;user-drag:none;}

/* SVG 图标统一尺寸（替代 emoji） */
.topbar .home svg{width:26px;height:26px;display:block;}
.mascot{width:88px;height:88px;margin:0 auto 6px;}
.mascot svg{width:88px;height:88px;display:block;}
.unit-node .u-badge svg{width:100%;height:100%;display:block;}
.tree-ico{display:inline-flex;width:26px;height:26px;vertical-align:-6px;margin-right:6px;}
.tree-ico svg{width:26px;height:26px;}

.stars-pill .s{display:inline-flex;width:18px;height:18px;vertical-align:-3px;color:var(--complete);}
.stars-pill .s svg{width:18px;height:18px;}
.bg-deco .deco{position:absolute;pointer-events:auto;cursor:pointer;line-height:0;}
.bg-deco .deco svg{width:100%;height:100%;display:block;}
.egg .face{width:80px;height:80px;display:block;}
.egg .face svg{width:80px;height:80px;display:block;}
.sub-star svg{width:16px;height:16px;display:block;}
.modal .earned .s{width:46px;height:46px;display:inline-flex;color:var(--complete);}
.modal .earned .s svg{width:46px;height:46px;}
.word-show{position:relative;z-index:1;text-align:center;line-height:1.1;}
.word-show .ws-en{font-size:30px;font-weight:800;color:var(--ink);}
.word-show .ws-zh{font-size:14px;color:var(--ink-soft);font-weight:700;}
/* 题干文字均置于顶部高光渐变层之上，避免被白色渐变盖住发虚 */
.word-card > .listen-tip{position:relative;z-index:1;}
/* 句子场景图：透明底卡通插画，放在题干卡内、句子文字下方 */
.scene-pic{width:100%;max-width:260px;aspect-ratio:1/1;max-height:180px;margin:4px auto;display:none;align-items:center;justify-content:center;pointer-events:none;}
.scene-pic img{max-width:100%;max-height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.08));}
.scene-pic.show{display:flex;}
.u-stars .s{display:inline-flex;width:18px;height:18px;vertical-align:-3px;}
.u-stars .s svg{width:18px;height:18px;}
.modal .big svg{width:62px;height:62px;display:block;margin:0 auto;}
.option .lbl{font-size:18px;font-weight:800;text-align:center;line-height:1.15;}
/* 句子版选项：场景图(放大) + 中文音频；前端不显示中文文字（zh 标注留后台） */
.option.sent{min-height:210px;}
.option.sent .pic{width:150px;height:150px;}
/* 状态 */
.option.err1{border-color:var(--error);animation:shake-sm var(--dur-base) var(--ease-out);}
.option.err2{border-color:var(--error-strong);border-width:4px;animation:shake-lg var(--dur-base) var(--ease-out);}
/* 第3次错：明确标红"你选的这张是错的"（红X），与揭示正确答案的蓝眼区分 */
.option.wrong{border-color:var(--error-strong);border-width:4px;box-shadow:var(--glow-error);background:#fff0ef;animation:shake-lg var(--dur-base) var(--ease-out);opacity:1 !important;filter:none !important;}
.option.wrong::after{content:"";position:absolute;top:8px;left:8px;width:28px;height:28px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23C2562B'/><path d='M7 7 L17 17 M17 7 L7 17' stroke='%23FFFFFF' stroke-width='3.6' stroke-linecap='round'/></svg>") center/contain no-repeat;
  animation:pop-in var(--dur-slow) var(--ease-spring);}
/* 揭示答案（蓝色眼睛）：表示"系统给你看答案"，区别于绿色对勾"你答对了" */
.option.reveal{border-color:var(--reveal-blue);box-shadow:var(--glow-unlock);background:#ECE4CC;}
.option.reveal::after{content:"";position:absolute;top:8px;left:8px;width:28px;height:28px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12 Q12 4 21 12 Q12 20 3 12 Z' fill='none' stroke='%231E6B3C' stroke-width='2.5' stroke-linejoin='round'/><circle cx='12' cy='12' r='3.5' fill='%231E6B3C'/></svg>") center/contain no-repeat;
  animation:pop-in var(--dur-slow) var(--ease-spring);}
.option.correct{border-color:var(--success);box-shadow:var(--glow-success);}
.option.correct::after{content:"";position:absolute;top:8px;left:8px;width:28px;height:28px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13 l5 5 L20 6' fill='none' stroke='%232F9E57' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  animation:pop-in var(--dur-slow) var(--ease-spring);}
.option.disabled{opacity:.4;filter:grayscale(.6);pointer-events:none;}
/* 永久淘汰（排除法）：错卡变透明占位 + 红叉 + 不可再选，位置不挪动 */
.option.eliminated{opacity:.22;filter:grayscale(.7);pointer-events:none;border-color:var(--stroke);box-shadow:none;background:transparent;}
.option.eliminated .pic, .option.eliminated .lbl{opacity:0;}
.option.eliminated::after{content:'✗';position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;line-height:1;color:var(--error-strong);text-shadow:0 2px 0 rgba(255,255,255,.7);}
.option.dragging{opacity:.35;}
.drag-ghost{position:fixed;z-index:400;pointer-events:none;width:80px;height:80px;border-radius:var(--radius-md);
  border:3px solid var(--stroke);background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:46px;box-shadow:var(--shadow-soft);transform:translate(-50%,-50%) scale(.9);overflow:hidden;}
.drag-ghost img{width:100%;height:100%;object-fit:contain;display:block;}
/* 影子卡内的「文字卡」：ghost 挂在 body 下，拿不到 .option / .grid 上下文，
   .option .pic-txt(22px) / .grid.g3 .option .pic-txt(18px) 等规则会失效 → 文字会掉回 46px、
   框却是小的（即「只缩框不缩字」）。此处补齐结构样式；实际字号由 JS 按源卡片实测写入，
   再配合上面的 scale() 整体等比缩放，保证框与文字同步缩放。 */
.drag-ghost .pic{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.drag-ghost .pic.pic-text{padding:10px 8px;background:linear-gradient(180deg,#FFF3DA 0%,#FFE7B8 100%);border-radius:16px;}
.drag-ghost .pic-txt{display:block;font-weight:800;color:var(--ink);text-align:center;line-height:1.2;
  word-break:break-word;overflow-wrap:anywhere;}

/* ====== 拖拽重设计（拖错提示/误触引导/虚线空位/揭示淡出） ====== */
/* R4 拖错红叉显示位 */
.wx-wrap{ position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%); z-index:5; }
.wx-wrap svg{ width:100%; height:100%; display:block; }
.word-pic-slot.wrong{ border-color:var(--error); border-width:4px; box-shadow:var(--glow-error); background:#fff0ef; }

/* R2 误触引导 */
@keyframes option-lift{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-8px) rotate(-3deg);} }
.option.guide{ animation:option-lift var(--dur-slow) cubic-bezier(.34,1.56,.64,1) 2; }
@keyframes slot-pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,158,87,.5);} 70%{ box-shadow:0 0 0 12px rgba(47,158,87,0);} 100%{ box-shadow:0 0 0 0 rgba(47,158,87,0);} }
.word-pic-slot.guide{ border-color:var(--blue); border-style:solid; box-shadow:var(--guide-ring); animation:slot-pulse 1.2s ease-out 2; }
.drag-arrow{ position:absolute; left:50%; top:-6px; width:40px; height:40px; transform:translate(-50%,-100%); pointer-events:none; z-index:6; animation:arrow-bob 1s ease-in-out infinite; }
.drag-arrow svg{ width:100%; height:100%; display:block; }
@keyframes arrow-bob{ 0%,100%{ transform:translate(-50%,-100%) translateY(0);} 50%{ transform:translate(-50%,-100%) translateY(-10px);} }

/* R3 虚线框（已用空位） */
.option.dragged-empty{ border:var(--drag-empty-border); border-radius:26px; background:var(--drag-empty-bg); box-shadow:none; opacity:.6; pointer-events:none; }
.option.dragged-empty .pic, .option.dragged-empty .lbl{ opacity:0; }
/* J2: 点上去即缩小 */
.option.pressing{transform:scale(.93);transition:transform 120ms var(--ease-out);}
/* J2: 图片惯性抛入虚线槽 */
.word-pic-slot.filled .pic{animation:drop-in .28s var(--ease-out);}
@keyframes drop-in{0%{transform:scale(1.18);opacity:.6;}60%{transform:scale(.96);}100%{transform:scale(1);opacity:1;}}

/* R5 中性淡出 */
.option.reveal-dim{ opacity:var(--reveal-dim-opacity); filter:var(--reveal-dim-filter); box-shadow:none; pointer-events:none; }

@media (prefers-reduced-motion:reduce){ .option.guide,.word-pic-slot.guide,.drag-arrow,.wx-wrap{ animation:none; } }

/* 提示气泡 */
.bubble{position:absolute;left:50%;top:-14px;transform:translate(-50%,-100%);
  background:var(--error);color:#fff;font-size:18px;font-weight:800;padding:8px 16px;border-radius:999px;
  border:3px solid var(--stroke);white-space:nowrap;box-shadow:var(--shadow-soft);
  animation:pop-in var(--dur-slow) var(--ease-spring);z-index:5;}

/* ====== 完成弹层 / 光门 ====== */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.35);display:flex;align-items:center;
  justify-content:center;padding:16px;overflow-y:auto;}   /* 短屏可滚动，保证任何按钮都够得到 */
.modal{background:var(--surface);border:3px solid var(--stroke);border-radius:var(--radius-lg);
  box-shadow:var(--glow-success),var(--shadow-soft);padding:28px 24px;text-align:center;max-width:380px;width:100%;
  margin:auto;max-height:100%;overflow-y:auto;   /* 绝不超出可视高度；内容超高则内部滚动 */
  animation:pop-in var(--dur-celebrate) var(--ease-spring);}
.modal .big{font-size:72px;animation:bob 1.6s var(--ease-in-out) infinite;}
.modal h2{font-size:34px;margin:8px 0 6px;font-weight:800;}
.modal p{font-size:18px;color:var(--ink-soft);margin:0 0 18px;}
.modal .earned{font-size:40px;margin:6px 0 12px;}
.modal .earned .s{color:var(--complete);display:inline-block;animation:star-pop var(--dur-celebrate) var(--ease-spring);}

/* 短屏（手机横屏 / 内嵌浏览器工具栏占位）下压缩弹层：缩小图标/字号/内距，
   让「换一组再来 / 换个单元玩」都能一屏看到，不必滚动。 */
@media (max-height:640px){
  .overlay{padding:10px;}
  .modal{padding:14px 18px;}
  .modal .big{font-size:40px;}
  .modal .big svg{width:38px;height:38px;}
  .modal h2{font-size:22px;margin:4px 0 3px;}
  .modal p{font-size:13px;margin:0 0 10px;}
  .modal .earned{font-size:24px;margin:2px 0 8px;}
  .modal .earned .s{width:26px;height:26px;}
  .modal .earned .s svg{width:26px;height:26px;}
  .modal .btn{font-size:16px;padding:9px 12px;}
}
/* 极短屏（横屏 + 内嵌浏览器工具栏叠加）再压一档，尽量一屏放下两个按钮 */
@media (max-height:330px){
  .modal{padding:10px 14px;}
  .modal .big{font-size:28px;}
  .modal .big svg{width:28px;height:28px;}
  .modal h2{font-size:18px;margin:2px 0 2px;}
  .modal p{font-size:12px;margin:0 0 6px;}
  .modal .earned{font-size:18px;margin:0 0 6px;}
  .modal .earned .s{width:20px;height:20px;}
  .modal .earned .s svg{width:20px;height:20px;}
  .modal .btn{font-size:14px;padding:6px 10px;}
}

/* 光门 */
.lightdoor{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(30,155,240,.0);overflow:hidden;}
.lightdoor .door{width:10px;height:100%;background:linear-gradient(var(--blue),var(--cyan),var(--unlock));
  box-shadow:0 0 60px 20px rgba(47,158,87,.7);animation:door-open var(--dur-celebrate) var(--ease-out) forwards;}
.lightdoor .msg{position:absolute;font-size:30px;font-weight:800;color:var(--blue);
  text-shadow:0 2px 0 #fff;animation:pop-in var(--dur-base) var(--ease-spring);}

/* 彩屑 canvas */
#confetti{position:fixed;inset:0;z-index:200;pointer-events:none;}

/* 惊喜彩蛋 */
#surprise{position:fixed;inset:0;z-index:300;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.egg{position:absolute;font-size:90px;filter:drop-shadow(0 0 18px rgba(175,82,222,.8));
  animation:egg-pop 1200ms var(--ease-spring) forwards;text-shadow:0 0 0 #000;}
.egg .face{display:inline-block;}

/* ====== 关键帧 ====== */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop-in{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes star-pop{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.4) rotate(12deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shake-sm{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes shake-lg{0%,100%{transform:translateX(0)}15%{transform:translateX(-10px)}30%{transform:translateX(10px)}45%{transform:translateX(-10px)}60%{transform:translateX(10px)}}
@keyframes door-open{0%{width:8px;opacity:.2}40%{width:60vw;opacity:1}100%{width:120vw;opacity:0}}
@keyframes egg-pop{0%{transform:scale(0) rotate(-30deg);opacity:0}
  20%{transform:scale(1.15) rotate(8deg);opacity:1}
  80%{transform:scale(1) rotate(0);opacity:1}
  100%{transform:scale(.6) rotate(0);opacity:0}}

/* ====== §9.4 reduced-motion 降级 ====== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .option.err1,.option.err2{animation:none;}
  .option.reveal::after,.option.correct::after,.option.wrong::after{animation:none;}
  .mascot{animation:none;}
  .lightdoor{display:none !important;}
  .egg{animation:none;transition:opacity var(--dur-base);}
}
.hidden{display:none !important;}
/* 副标题为空时（练习模式已去掉「自由练习！」）不占位、不留空行 */
#gSub:empty{display:none;}
/* ====== iPhone 横屏（landscape）单屏适配 ====== */
@media (orientation:landscape) and (max-width:1000px){
  html,body{height:100%;}
  #app{ max-width:100%; }
  .topbar{ max-width:100%; }
  #app > .screen{
    min-height:100dvh; height:100dvh; max-height:100dvh; overflow:hidden;
    padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px)
             calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 16px);
  }
  #screen-game{
    display:flex; flex-direction:column; height:100%; gap:8px;
  }
  .game-head{ margin-bottom:0; }
  .progress-wrap{ margin-bottom:4px; }
  .word-card{
    flex:0 0 auto; margin:0; padding:8px 18px;
    flex-direction:row; align-items:center; justify-content:center; gap:22px;
  }
  .word-card .word-show{ margin-top:0; padding:0; }
  .word-card .ws-en{ font-size:30px; }
  .word-card .ws-zh{ font-size:13px; }
  .word-card .scene-pic{max-width:120px;max-height:120px;margin:0;flex:none;}
  .word-pic-slot{ width:104px; height:84px; margin:0; flex:none; }
  .grid{
    flex:1 1 auto; min-height:0;
    display:grid; gap:14px;
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; align-content:stretch;
  }
  .grid.g2{ grid-template-columns:none; }
  .grid.g3{ grid-template-columns:none; }
  /* 选项高度：基础样式 .grid.g2/.g3 .option 的 min-height(200/160px) 优先级更高，会压掉
     .option{min-height:0} → 横屏选项曾撑出网格、顶到题干。这里用同等优先级选择器清零，
     并配合 .grid 的 align-content:stretch 让选项填满可用高度（比例更协调，不再又扁又小）。 */
  .option,
  .grid.g2 .option,
  .grid.g3 .option{ min-height:0; padding:8px 6px; }
  /* 横屏：卡片是「宽而矮」，所以图片窗口按**卡片高度**撑满成正方形（文字占位卡同尺寸，
     不再是一个又宽又扁的长方形），图片更大、留白更少。 */
  .option .pic,
  .option .pic.pic-text,
  .grid.g3 .option .pic,
  .grid.g3 .option .pic.pic-text{ width:auto; height:100%; max-width:100%; aspect-ratio:1/1; }
  .mascot{ width:64px; height:64px; }
  .mascot svg{ width:64px; height:64px; }
  .hero{ gap:10px; }
  .hero h1{ font-size:26px; }
  .hero p{ font-size:16px; }
  .hint{ font-size:13px; }
}

/* ===== 重做 2026-07-28: 喇叭徽标 .speak-badge ===== */
.speak-badge{position:absolute;top:var(--badge-offset);right:var(--badge-offset);
  width:var(--badge-size);height:var(--badge-size);border-radius:50%;
  background:var(--badge-bg);color:var(--badge-fg);display:flex;align-items:center;justify-content:center;
  opacity:.92;pointer-events:none;z-index:3;border:none;box-shadow:none;outline:none;}
.speak-badge svg{width:62%;height:62%;display:block;}
.speak-badge.sm{width:var(--badge-size-sm);height:var(--badge-size-sm);border-radius:50%;}
.speak-badge.sm svg{width:75%;height:75%;}
/* C3: 喇叭与所属图片一体绑定——点喇叭时图片轻闪 */
.pic.bound-pic{animation:bound-pic .6s ease-out;}
@keyframes bound-pic{0%{transform:scale(1);}30%{transform:scale(1.06);filter:drop-shadow(0 0 8px rgba(19,181,199,.75));}100%{transform:scale(1);}}
.option{position:relative;}
.opt-confirm{position:absolute;right:6px;bottom:6px;width:38px;height:38px;border-radius:50%;
  border:2.5px solid var(--stroke);background:var(--green);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(20,50,58,.35);z-index:4;pointer-events:auto;
  transition:transform .12s var(--ease-spring);}
.opt-confirm:active{transform:translateY(2px);box-shadow:0 0 0 rgba(20,50,58,.35);}
.opt-confirm svg{width:60%;height:60%;display:block;}
.opt-confirm:hover{transform:scale(1.06);}
/* 点选项图后高亮（表示"已听过"），让小孩清楚状态 */
.option.listened{border-color:var(--green);box-shadow:0 0 0 3px rgba(83,196,122,.3),var(--shadow-soft);}
.option.listened .opt-confirm{animation:pulse-confirm 1.2s ease-in-out infinite;}
@keyframes pulse-confirm{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

.speak-badge.wc-badge{width:var(--badge-size);height:var(--badge-size);top:var(--badge-offset);right:var(--badge-offset);transform:none;}
.is-speaking{transform:scale(var(--speak-scale));box-shadow:var(--glow-speak),var(--shadow-soft);z-index:4;}
.option{transition:transform var(--speak-dur) var(--ease-spring),box-shadow var(--speak-dur) var(--ease-spring);}
.word-card{transition:transform var(--speak-dur) var(--ease-spring),box-shadow var(--speak-dur) var(--ease-spring);}
/* 关卡页: 竖屏纵向滚动容器 + 横屏横向滑动卡片行 */
#treeList.tree-wrap{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding:18px 16px;
  display:flex;flex-direction:column;gap:var(--unit-gap);
  background:rgba(255,241,214,.28);border-radius:var(--radius-md);}
#treeList.tree-wrap .unit-node{margin:0;}
@media (orientation:landscape){
  #treeList.tree-wrap{flex-direction:row;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;align-items:center;padding:10px 16px;gap:12px;}
  /* 横屏：单元卡改为「按地图区高度 80% 撑起」的竖向卡片（原来固定 140px，在 447px 高的地图区显得很小） */
  #treeList.tree-wrap .unit-node{width:var(--unit-w-land);height:80%;min-height:180px;max-height:344px;overflow:hidden;
    flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 16px;
    box-sizing:border-box;}
  #treeList.tree-wrap .unit-node.current{transform:none!important;box-shadow:var(--shadow-soft);}
  #treeList.tree-wrap .unit-node .u-top{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;min-width:0;width:100%;}
  #treeList.tree-wrap .unit-node .u-badge{width:68px;height:68px;border-radius:20px;border-width:2.5px;font-size:38px;flex-shrink:0;}
  #treeList.tree-wrap .unit-node .u-top>div:nth-child(2){width:100%;min-width:0;overflow:hidden;}
  #treeList.tree-wrap .unit-node .u-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;line-height:1.18;overflow:hidden;width:100%;}
  #treeList.tree-wrap .unit-node .u-name .u-num{font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #treeList.tree-wrap .unit-node .u-name .u-title{font-size:18px;font-weight:800;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  #treeList.tree-wrap .unit-node .u-sub{font-size:12px;line-height:1.2;color:var(--ink-soft);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #treeList.tree-wrap .unit-node .u-stars{font-size:14px;gap:2px;flex-shrink:0;margin-left:0;}
  #treeList.tree-wrap .unit-node .sub-stars{display:flex;gap:3px;margin-top:0;flex-shrink:0;}
  #treeList.tree-wrap .unit-node .sub-star{width:24px;height:24px;border-width:2px;font-size:12px;flex-shrink:0;}
  #treeList.tree-wrap .unit-node .enter{margin-top:0;font-size:16px;padding:11px 14px;flex-shrink:0;width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .is-speaking{transform:none;box-shadow:var(--glow-speak);}
  .slot-hint .dh-card{animation:none;}
  .drag-arrow.show{animation:none;}
}

/* 题干(单词卡)不显示中文释义，避免公布答案；听音选图以发音为准 */
.word-card .ws-zh{display:none !important;}

/* ===== 规范支柱三：右下角静默复制反馈徽标 ====== */
.silent-fb{position:fixed;right:14px;bottom:14px;z-index:500;width:42px;height:42px;border-radius:50%;
  background:var(--surprise);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:.5;transition:opacity .2s, transform .2s;}
.silent-fb:hover{opacity:.9;transform:scale(1.06);}
.silent-fb svg{width:60%;height:60%;display:block;}
.silent-fb.ok{opacity:1;background:var(--success);}
@media (prefers-reduced-motion:reduce){ .silent-fb{transition:none;} }

/* ===== TODO-17 错误码呈现骨架：顶部非阻塞提示横幅 ====== */
.err-banner{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:600;max-width:92%;
  background:#fff;border:3px solid var(--ink,#6B5436);border-radius:16px;padding:12px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);text-align:center;font-family:inherit;}
.err-banner .eb-title{font-size:16px;font-weight:700;margin-bottom:4px;}
.err-banner .eb-msg{font-size:13px;line-height:1.4;color:#5a4a36;margin-bottom:8px;}
.err-banner .btn{font-size:14px;padding:6px 16px;}
.err-warn{border-color:#E8A33D;}
.err-block{border-color:#E0556B;background:#fff5f7;}
.err-fallback{border-color:#7FB069;}
.err-server{border-color:#5B8DEF;}
.err-retry,.err-retry-once{border-color:#9B7BD8;}

/* ===== 无图降级：中文文字主视觉卡（CSV 无图 / 听音选义 / 拐棍模式） ===== */
/* 选项卡：图位改为圆角糖果色底 + 中文大字号，不破图 */
.option .pic.pic-text{
  width:100%;
  padding:14px 10px;
  box-sizing:border-box;
  background:linear-gradient(180deg,#FFF3DA 0%,#FFE7B8 100%);
  border-radius:16px;
}
.option .pic-txt{
  display:block;
  font-size:22px;font-weight:800;color:var(--ink);
  text-align:center;line-height:1.2;
  word-break:break-word;overflow-wrap:anywhere;
}
.grid.g3 .option .pic-txt{font-size:18px;}
.option.sent .pic-txt{font-size:20px;line-height:1.18;}

/* 揭示大卡里的无图中文（填满 170x170 圆角卡），连错后揭示答案连同中文义 */
.reveal-card .rc-pic .pic-txt--rc{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFF3DA 0%,#FFE7B8 100%);
  border-radius:18px;
  font-size:30px;font-weight:800;color:var(--ink);
  text-align:center;line-height:1.2;
  word-break:break-word;overflow-wrap:anywhere;
}