/* ============ 英语小星球 · 样式 ============ */
:root {
  --sky1: #8ED9FF;
  --sky2: #E3F6FF;
  --sun: #FFD93D;
  --sun2: #FFB93D;
  --coral: #FF6B6B;
  --grass: #6BCB77;
  --blue: #4D96FF;
  --purple: #B983FF;
  --pink: #FF6B9D;
  --ink: #2A3A5C;
  --ink60: rgba(42, 58, 92, .62);
  --card: rgba(255, 255, 255, .92);
  --shadow: 0 8px 24px rgba(42, 58, 92, .16);
  --radius: 26px;
  --font-fun: "Chalkboard SE", "Comic Sans MS", "Baloo 2", "PingFang SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-fun);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, #D2F5E3 100%);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; touch-action: manipulation; }

/* ---------- 画布与层级 ---------- */
#fx-canvas { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
#top-cluster {
  position: fixed; top: 12px; right: 14px; z-index: 500;
  display: flex; gap: 10px; align-items: center;
}
#top-cluster.hidden { display: none; }
.star-counter {
  background: var(--card); border-radius: 999px; padding: 8px 16px;
  font-weight: 800; font-size: 18px; box-shadow: var(--shadow); border: 3px solid rgba(255, 217, 61, .8);
}
.star-counter.bump { animation: bumpA .5s cubic-bezier(.2, 1.6, .4, 1); }
.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; background: var(--card);
  font-size: 22px; box-shadow: var(--shadow); display: grid; place-items: center;
}

/* ---------- 屏幕切换 ---------- */
#app { height: 100dvh; position: relative; }
.screen { position: absolute; inset: 0; overflow-y: auto; display: none; padding-top: 68px; }
.screen.active { display: block; animation: fadeUp .35s ease both; }

/* ---------- 云朵背景 ---------- */
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; font-size: 56px; opacity: .8; animation: driftA 40s linear infinite; }
.cloud.c1 { top: 6%; left: -10%; }
.cloud.c2 { top: 24%; left: 60%; font-size: 40px; animation-duration: 55s; animation-delay: -20s; }
.cloud.c3 { top: 55%; left: 20%; font-size: 48px; animation-duration: 48s; animation-delay: -35s; }

/* ---------- 按钮 ---------- */
.btn {
  border-radius: 999px; font-weight: 800; letter-spacing: .5px;
  padding: 14px 30px; font-size: 20px;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 5px 0 rgba(42, 58, 92, .18);
}
.btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 2px 0 rgba(42, 58, 92, .18); }
.btn-primary { background: linear-gradient(180deg, var(--sun), var(--sun2)); color: #6B4A00; }
.btn-secondary { background: var(--card); color: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, .65); font-size: 16px; padding: 10px 22px; box-shadow: none; }
.btn-big { font-size: 26px; padding: 18px 44px; }
.btn-round {
  width: 52px; height: 52px; border-radius: 50%; background: var(--card);
  font-size: 24px; box-shadow: var(--shadow); display: grid; place-items: center; flex: none;
  transition: transform .12s;
}
.btn-round:active { transform: scale(.9); }
.replay-btn {
  background: #EAF4FF; border: 3px solid #BBD9F7; color: var(--ink);
  border-radius: 999px; padding: 10px 22px; font-size: 17px; font-weight: 700;
  transition: transform .12s;
}
.replay-btn:active { transform: scale(.94); }

/* ---------- 启动页 ---------- */
#screen-splash { display: none; }
#screen-splash.active { display: grid; place-items: center; }
#screen-splash { padding-top: 0; }
.splash-inner { text-align: center; padding: 24px; }
.splash-bobo { font-size: 110px; line-height: 1.1; filter: drop-shadow(0 10px 18px rgba(42,58,92,.25)); }
.splash-title {
  font-size: clamp(40px, 9vw, 64px); font-weight: 900; color: #fff; margin-top: 8px;
  text-shadow: 0 4px 0 rgba(42, 58, 92, .28), 0 10px 24px rgba(42, 58, 92, .3);
  letter-spacing: 4px;
}
.splash-sub { font-size: 18px; color: var(--ink); opacity: .85; margin: 10px 0 30px; font-weight: 700; }
.splash-tip { font-size: 13px; color: var(--ink60); margin-top: 26px; }

/* ---------- 主页：冒险地图 ---------- */
.home-header { text-align: center; }
.home-header h1 {
  font-size: clamp(26px, 6vw, 36px); color: #fff; letter-spacing: 2px;
  text-shadow: 0 3px 0 rgba(42, 58, 92, .25);
}
.map-path {
  position: relative; max-width: 560px; margin: 0 auto;
  padding: 26px 26px 30px;
  display: flex; flex-direction: column; gap: 30px;
}
.map-path::before {
  content: ''; position: absolute; left: 50%; top: 30px; bottom: 30px;
  border-left: 5px dashed rgba(255, 255, 255, .85); transform: translateX(-50%);
}
.island { width: 47%; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; }
.level-divider {
  width: 100%; text-align: center; font-size: 17px; font-weight: 900; color: #fff;
  background: rgba(42, 58, 92, .25); border-radius: 999px; padding: 8px 12px;
  text-shadow: 0 2px 0 rgba(42, 58, 92, .3); letter-spacing: 1px;
}
.island:nth-child(odd) { align-self: flex-start; }
.island:nth-child(even) { align-self: flex-end; }
.island-circle {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--card); border: 5px solid var(--c, var(--blue));
  display: grid; place-items: center; font-size: 54px;
  box-shadow: var(--shadow); position: relative;
  transition: transform .15s;
}
.island-circle:active { transform: scale(.93); }
.island.locked .island-circle { filter: grayscale(.9); opacity: .7; border-color: #B8C4D6; }
.island.done .island-circle { border-color: var(--sun); }
.lock-badge, .done-badge {
  position: absolute; right: -4px; top: -6px; font-size: 30px;
  filter: drop-shadow(0 3px 4px rgba(42, 58, 92, .3));
}
.island.locked .done-badge { display: none; }
.island-name { font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(42, 58, 92, .3); }
.island-stars { font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(42, 58, 92, .3); }
.home-footer { text-align: center; padding: 6px 0 30px; }
.voice-hint { font-size: 12px; color: var(--ink60); font-weight: 700; margin-top: 12px; padding: 0 20px; }

/* ---------- 单元页 ---------- */
.sub-header {
  display: flex; align-items: center; gap: 14px;
  max-width: 720px; margin: 0 auto; padding: 6px 18px 14px;
}
.sub-title { font-size: 24px; font-weight: 900; flex: 1; }
.sub-stars { font-size: 16px; font-weight: 800; color: var(--ink60); }
.unit-hero { text-align: center; padding: 6px 18px 4px; }
.hero-emoji { font-size: 76px; line-height: 1.1; filter: drop-shadow(0 8px 14px rgba(42,58,92,.22)); }
.hero-title { font-size: 28px; font-weight: 900; margin-top: 4px; }
.hero-sub { font-size: 15px; color: var(--ink60); margin-top: 4px; font-weight: 700; }
.act-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  max-width: 680px; margin: 18px auto 40px; padding: 0 18px;
}
.act-card {
  background: var(--card); border-radius: var(--radius); padding: 20px 14px 16px;
  text-align: center; box-shadow: var(--shadow);
  border-bottom: 6px solid var(--c, var(--blue));
  transition: transform .15s;
}
.act-card:active { transform: scale(.95); }
.act-icon { font-size: 46px; line-height: 1.1; }
.act-name { font-size: 21px; font-weight: 900; margin-top: 6px; }
.act-desc { font-size: 13px; color: var(--ink60); font-weight: 700; margin-top: 3px; }
.act-stars { font-size: 17px; margin-top: 8px; letter-spacing: 2px; }
.star.dim { opacity: .22; filter: grayscale(1); }

/* ---------- 游戏舞台公共 ---------- */
.act-stage { max-width: 720px; margin: 0 auto; padding: 4px 18px 46px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dot {
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .55);
  filter: grayscale(1); opacity: .6;
}
.dot.on { filter: none; opacity: 1; background: #fff; box-shadow: 0 2px 6px rgba(42,58,92,.15); }
.dot.cur { filter: none; opacity: 1; background: #FFF3C4; transform: scale(1.18); box-shadow: 0 2px 8px rgba(255,185,61,.5); }

/* ---------- 学一学（单词卡） ---------- */
.flash-card {
  background: var(--card); border-radius: 32px; padding: 18px 18px 22px;
  text-align: center; box-shadow: var(--shadow);
}
.flash-stage {
  min-height: clamp(220px, 36vmin, 320px);
  display: grid; place-items: center; border-radius: 24px; margin-bottom: 14px;
  background: radial-gradient(circle at 50% 42%, var(--tint, rgba(255,255,255,.9)), rgba(255, 255, 255, .35) 70%);
}
.flash-emoji { font-size: clamp(96px, 26vmin, 168px); line-height: 1.15; letter-spacing: .04em; }
.flash-emoji.long { font-size: clamp(64px, 17vmin, 110px); }
.flash-word { font-size: clamp(40px, 8vmin, 60px); font-weight: 900; letter-spacing: 1px; }
.flash-zh { font-size: 18px; color: var(--ink60); font-weight: 700; margin-top: 2px; }
.flash-phrase {
  margin-top: 14px; background: #EAF4FF; border: 3px solid #BBD9F7;
  border-radius: 999px; padding: 10px 20px; font-size: 19px; font-weight: 800;
  transition: transform .12s;
}
.flash-phrase:active { transform: scale(.95); }
.phrase-zh { font-size: 13px; color: var(--ink60); margin-top: 8px; font-weight: 700; }
.flash-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  max-width: 640px; margin: 16px auto 0;
}

/* ---------- 找一找（听音选图） ---------- */
.find-top {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.find-prompt { font-size: 21px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(42,58,92,.3); }
.find-progress { margin-bottom: 12px; }
.find-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.find-card {
  aspect-ratio: 1; border-radius: 26px; background: var(--card);
  display: grid; place-items: center; box-shadow: var(--shadow);
  border: 5px solid transparent; transition: transform .12s, border-color .2s, background .2s;
  font-size: clamp(64px, 17vmin, 104px); line-height: 1.1;
}
.find-card.small { font-size: clamp(40px, 11vmin, 66px); letter-spacing: .05em; }
.find-card:active { transform: scale(.95); }
.find-card.correct { border-color: var(--grass); background: #EAFBF0; animation: happyB .7s; }
.find-card.wrong { animation: shakeA .45s; border-color: #FFD1D1; }
.find-grid.locked { pointer-events: none; }

/* ---------- 说一说（跟读） ---------- */
.speak-card {
  background: var(--card); border-radius: 32px; padding: 18px;
  text-align: center; box-shadow: var(--shadow);
}
.speak-stage {
  min-height: clamp(160px, 26vmin, 240px);
  display: grid; place-items: center; border-radius: 24px;
  background: radial-gradient(circle at 50% 45%, var(--tint, rgba(255,255,255,.9)), rgba(255,255,255,.35) 70%);
}
.speak-emoji { font-size: clamp(80px, 21vmin, 140px); line-height: 1.15; }
.speak-word { font-size: clamp(34px, 7vmin, 52px); font-weight: 900; }
.speak-zh { font-size: 16px; color: var(--ink60); font-weight: 700; margin-top: 2px; }
.speak-controls {
  display: flex; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap;
}
.mic-btn.ready { animation: glowA 1.6s ease-in-out infinite; }
.mic-btn.listening { animation: micA .8s ease-in-out infinite; background: linear-gradient(180deg, #FF9F9F, var(--coral)); color: #fff; }
.mic-btn:disabled, .speak-controls .btn:disabled { opacity: .55; box-shadow: none; transform: none; }
.speak-status { text-align: center; font-size: 18px; font-weight: 800; min-height: 30px; margin-top: 16px; color: var(--ink); }
.speak-said { text-align: center; font-size: 14px; color: var(--ink60); font-weight: 700; min-height: 20px; margin-top: 4px; }
.stars-row { text-align: center; font-size: 38px; letter-spacing: 8px; margin-top: 6px; min-height: 48px; }
.fly-star { opacity: .18; filter: grayscale(1); display: inline-block; }
.fly-star.on { opacity: 1; filter: none; animation: starPopA .5s cubic-bezier(.2, 1.8, .4, 1) both; }
.speak-tip { text-align: center; font-size: 13px; color: var(--ink60); margin-top: 14px; font-weight: 700; }

/* ---------- 配对乐 ---------- */
.match-tip { text-align: center; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(42,58,92,.3); margin-bottom: 14px; }
.chips-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  background: var(--card); border: 3px solid rgba(42, 58, 92, .14);
  border-radius: 999px; padding: 12px 20px; font-size: 21px; font-weight: 900;
  box-shadow: 0 4px 0 rgba(42, 58, 92, .1); transition: transform .12s, background .15s, border-color .15s;
}
.chip:active { transform: scale(.94); }
.chip.selected { background: #FFF3C4; border-color: var(--sun2); transform: scale(1.07); }
.chip.matched { opacity: .45; pointer-events: none; border-color: var(--grass); background: #EAFBF0; }
.match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.match-card {
  aspect-ratio: 1; border-radius: 22px; background: var(--card);
  display: grid; place-items: center; font-size: clamp(40px, 11vmin, 64px); line-height: 1.1;
  box-shadow: var(--shadow); border: 4px solid transparent;
  transition: transform .12s, border-color .2s, background .2s, opacity .3s;
}
.match-card.few { font-size: clamp(26px, 7vmin, 42px); letter-spacing: .04em; }
.match-card:active { transform: scale(.94); }
.match-card.matched { border-color: var(--grass); background: #EAFBF0; opacity: .4; pointer-events: none; }
.match-card.wrong { animation: shakeA .45s; }

/* ---------- 庆祝弹层 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(42, 58, 92, .45); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.overlay.hidden { display: none; }
.celebrate-box {
  background: #fff; border-radius: 38px; padding: 30px 24px 26px;
  width: min(92vw, 430px); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  animation: popIn .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.celebrate-bobo { font-size: 88px; line-height: 1.1; }
.celebrate-title { font-size: 32px; font-weight: 900; margin-top: 6px; }
.celebrate-sub { font-size: 16px; color: var(--ink60); font-weight: 800; margin-top: 6px; }
.celebrate-stars { font-size: 56px; letter-spacing: 10px; margin: 12px 0 6px; min-height: 66px; }
.star-slot { display: inline-block; opacity: .18; filter: grayscale(1); }
.star-slot.lit { opacity: 1; filter: none; animation: starPopA .55s cubic-bezier(.2, 1.9, .4, 1) both; }
.celebrate-btns { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- 家长角 ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(42, 58, 92, .5); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: #fff; border-radius: 30px; padding: 26px 24px;
  width: min(92vw, 480px); max-height: 82vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); position: relative;
  animation: popIn .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
.close-x { position: absolute; top: 14px; right: 16px; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; background: #F1F4FA; }
.modal-title { font-size: 24px; font-weight: 900; margin-bottom: 14px; }
.parent-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.parent-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #F5F8FD; border-radius: 14px; padding: 10px 16px; font-weight: 800; font-size: 16px;
}
.parent-row.locked-row { opacity: .55; }
.p-stars { font-size: 14px; letter-spacing: 2px; }
.modal-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.modal-btns .btn { font-size: 15px; padding: 10px 18px; box-shadow: none; }
.tips-title { font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.tips-list { font-size: 14px; color: var(--ink); line-height: 1.8; padding-left: 20px; font-weight: 600; }

/* ---------- 单词语义动画（核心趣味） ---------- */
.fe { display: inline-block; will-change: transform; }
/* 轻轻弹跳 */
.fe.anim-bounce { animation: idleB 2.2s ease-in-out var(--d, 0s) infinite; }
/* 心跳放大（red / nose…） */
.fe.anim-pulse { animation: pulseA 1.8s ease-in-out var(--d, 0s) infinite; }
/* 上下漂浮（whale） */
.fe.anim-float { animation: floatA 3s ease-in-out var(--d, 0s) infinite; }
/* 左右摇摆（香蕉/小猫） */
.fe.anim-sway { animation: swayA 2.4s ease-in-out var(--d, 0s) infinite; }
/* 快速扭动（小狗/葡萄） */
.fe.anim-wiggle { animation: wiggleA .9s ease-in-out var(--d, 0s) infinite; }
/* 旋转（mango） */
.fe.anim-spin { animation: spinA 2.6s linear var(--d, 0s) infinite; }
/* 跳起来！带影子（frog/rabbit/jump） */
.fe.anim-jump { position: relative; animation: jumpA 1.3s cubic-bezier(.3, 0, .6, 1) var(--d, 0s) infinite; }
.fe.anim-jump::before {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: -10px; height: 12px;
  background: rgba(42, 58, 92, .16); border-radius: 50%;
  animation: shadowA 1.3s cubic-bezier(.3, 0, .6, 1) var(--d, 0s) infinite;
}
/* 飞（bird/butterfly） */
.fe.anim-fly { animation: flyA 2.8s ease-in-out var(--d, 0s) infinite; }
/* 游泳（fish/swim） */
.fe.anim-swim { animation: swimA 2.2s ease-in-out var(--d, 0s) infinite; }
/* 水面漂浮（duck） */
.fe.anim-bob { animation: bobA 1.9s ease-in-out var(--d, 0s) infinite; }
/* 跳舞（pig/dance） */
.fe.anim-dance { animation: danceA .85s ease-in-out var(--d, 0s) infinite; }
/* 大口吃（eat/mouth） */
.fe.anim-chomp { animation: chompA .6s ease-in-out var(--d, 0s) infinite; }
/* 睡觉 + Zzz（sleep） */
.fe.anim-sleep { animation: sleepA 3.2s ease-in-out var(--d, 0s) infinite; position: relative; }
.fe.anim-sleep::after {
  content: 'z z z'; position: absolute; top: -12%; right: -30%;
  font-size: .32em; font-weight: 900; color: #7E9BC9; white-space: nowrap;
  animation: zzzA 2.6s ease-in-out var(--d, 0s) infinite;
}
/* 跑（run）：前冲 + 身体前倾 */
.fe.anim-run { animation: runA .55s ease-in-out var(--d, 0s) infinite alternate; }
/* 拍手（clap）：快速缩放 */
.fe.anim-clap { animation: clapA .45s ease-in-out var(--d, 0s) infinite; }
/* 眨眼（eyes） */
.fe.anim-blink { animation: blinkA 3s ease-in-out var(--d, 0s) infinite; }
/* 跺脚（foot） */
.fe.anim-stomp { animation: stompA .9s cubic-bezier(.3, 0, .6, 1) var(--d, 0s) infinite; }
/* 手臂用力（arm） */
.fe.anim-flex { animation: flexA 1.6s ease-in-out var(--d, 0s) infinite; }
/* 数字逐个蹦出来（pop） */
.fe.anim-pop {
  animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) var(--d, 0s) both,
             idleB 2.4s ease-in-out calc(var(--d, 0s) + .55s) infinite;
}

/* ---------- 通用反馈动画 ---------- */
.shake { animation: shakeA .45s; }
.hidden { display: none !important; }

/* ---------- 关键帧 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.2) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes bumpA { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes shakeA { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(5px); } }
@keyframes happyB { 0% { transform: scale(1); } 35% { transform: scale(1.12) rotate(-3deg); } 70% { transform: scale(.96) rotate(2deg); } 100% { transform: scale(1); } }
@keyframes starPopA { 0% { opacity: 0; transform: scale(.1) rotate(-40deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes glowA { 0%, 100% { box-shadow: 0 5px 0 rgba(42,58,92,.18), 0 0 0 0 rgba(255, 217, 61, .8); } 50% { box-shadow: 0 5px 0 rgba(42,58,92,.18), 0 0 0 14px rgba(255, 217, 61, 0); } }
@keyframes micA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes driftA { from { transform: translateX(-12vw); } to { transform: translateX(115vw); } }

/* 单词语义关键帧 */
@keyframes idleB { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9%) scale(1.03); } }
@keyframes pulseA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes floatA { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16%) rotate(3deg); } }
@keyframes swayA { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes wiggleA { 0%, 100% { transform: rotate(-13deg) scale(1); } 50% { transform: rotate(13deg) scale(1.05); } }
@keyframes spinA { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes jumpA {
  0%, 100% { transform: translateY(0) scale(1.06, .92); }
  18% { transform: translateY(2%) scale(.92, 1.1); }
  50% { transform: translateY(-36%) scale(.96, 1.08); }
  82% { transform: translateY(2%) scale(.92, 1.1); }
}
@keyframes shadowA { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.55); opacity: .4; } }
@keyframes flyA {
  0%, 100% { transform: translate(-14%, 0) rotate(-8deg); }
  25% { transform: translate(0, -18%) rotate(4deg); }
  50% { transform: translate(14%, 0) rotate(8deg); }
  75% { transform: translate(0, 12%) rotate(-4deg); }
}
@keyframes swimA { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12%) rotate(8deg); } }
@keyframes bobA { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10%) rotate(5deg); } }
@keyframes danceA { 0%, 100% { transform: rotate(-13deg) translateY(0); } 50% { transform: rotate(13deg) translateY(-10%); } }
@keyframes chompA { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.16) rotate(-5deg); } }
@keyframes sleepA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes zzzA { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -22px) scale(1.15); } }
@keyframes runA { from { transform: translateX(-10%) rotate(-7deg); } to { transform: translateX(10%) rotate(-11deg); } }
@keyframes clapA { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(-8deg); } }
@keyframes blinkA { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes stompA { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(14%) scale(1.1, .85); } 55% { transform: translateY(0) scale(.94, 1.1); } }
@keyframes flexA { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.18) rotate(8deg); } }

/* ---------- 字母乐园 ---------- */
.dots-abc .dot { width: 30px; height: 30px; font-size: 13px; font-weight: 900; }
.abc-letter {
  font-size: clamp(90px, 22vmin, 150px); font-weight: 900; color: var(--ink);
  line-height: 1; letter-spacing: 2px;
}
.abc-lower { color: var(--coral); margin-left: 4px; }
.abc-emoji { font-size: clamp(64px, 16vmin, 110px); margin-top: 10px; }

/* ---------- 拼一拼（CVC） ---------- */
.phonic-card {
  background: var(--card); border-radius: 32px; padding: 24px 18px;
  text-align: center; box-shadow: var(--shadow);
}
.ph-reveal { min-height: 110px; font-size: clamp(56px, 14vmin, 90px); display: grid; place-items: center; }
.ph-tiles { display: flex; justify-content: center; gap: 22px; transition: gap .7s cubic-bezier(.2, 1.2, .4, 1); margin: 10px 0 14px; }
.ph-tiles.blend { gap: 2px; }
.ph-tile {
  width: 88px; height: 108px; border-radius: 20px; background: #fff;
  border: 4px solid rgba(42, 58, 92, .14); box-shadow: 0 5px 0 rgba(42, 58, 92, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform .12s, border-color .2s, background .2s;
}
.ph-tile:active { transform: scale(.93); }
.ph-tile .pt-l { font-size: 52px; font-weight: 900; line-height: 1; }
.ph-tile .pt-s { font-size: 13px; color: var(--ink60); font-weight: 800; }
.ph-tile.done { border-color: #2EC4B6; background: #E4FBF8; animation: happyB .6s; }
.ph-word { font-size: clamp(22px, 5vmin, 30px); font-weight: 900; min-height: 40px; }
.ph-word b { color: #2EC4B6; }

/* ---------- 说句子 ---------- */
.pattern-card {
  background: var(--card); border-radius: 32px; padding: 22px 18px;
  text-align: center; box-shadow: var(--shadow);
}
.pattern-emoji { font-size: clamp(56px, 14vmin, 92px); }
.pattern-sent { font-size: clamp(26px, 6vmin, 40px); font-weight: 900; line-height: 1.35; margin-top: 8px; }
.pattern-sent .hl { color: var(--blue); background: #EAF4FF; border-radius: 12px; padding: 2px 10px; }
.pattern-zh { font-size: 15px; color: var(--ink60); font-weight: 800; margin-top: 8px; }

/* ---------- 唱一唱 ---------- */
.chant-card {
  background: var(--card); border-radius: 32px; padding: 22px 18px;
  text-align: center; box-shadow: var(--shadow);
}
.chant-emoji { font-size: 74px; margin-bottom: 8px; }
.chant-lines { display: flex; flex-direction: column; gap: 10px; }
.chant-line {
  font-size: clamp(19px, 4.6vmin, 26px); font-weight: 900; padding: 12px 16px;
  border-radius: 18px; background: #F5F8FD; color: var(--ink);
  opacity: .55; transition: all .25s;
}
.chant-line.on {
  opacity: 1; background: #FFF3C4; border: 3px solid var(--sun2);
  transform: scale(1.05); box-shadow: 0 4px 14px rgba(255, 185, 61, .4);
}
.chant-line:active { transform: scale(.97); }

/* ---------- 主页：打卡 + 快捷入口 ---------- */
.home-header { position: relative; }
.streak-chip {
  display: inline-block; margin-top: 8px; background: #FF7849; color: #fff;
  border-radius: 999px; padding: 5px 16px; font-size: 15px; font-weight: 900;
  box-shadow: 0 3px 0 rgba(42, 58, 92, .2); animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.home-actions { display: flex; justify-content: center; gap: 12px; padding: 0 0 6px; flex-wrap: wrap; }
.home-actions .btn { box-shadow: 0 4px 0 rgba(42, 58, 92, .18); }

/* ---------- 贴纸册 ---------- */
.sticker-hero { text-align: center; padding: 10px 0 2px; }
.sticker-hero .hero-emoji { font-size: 64px; }
.sticker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 12px; max-width: 680px; margin: 14px auto 40px; padding: 0 18px;
}
.sticker {
  background: var(--card); border-radius: 20px; padding: 12px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: var(--shadow); transition: transform .12s;
}
.sticker:active { transform: scale(.92); }
.sticker .st-emoji { font-size: 40px; line-height: 1.15; position: relative; }
.sticker .st-stage {
  position: absolute; right: -8px; bottom: -4px; font-size: 16px;
  background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 1px 4px rgba(42,58,92,.3);
}
.sticker .st-word { font-size: 13px; font-weight: 900; color: var(--ink); }
.word-badge {
  position: absolute; top: 10px; right: 12px; font-size: 15px; font-weight: 900;
  background: #fff; border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 8px rgba(42,58,92,.18);
}
.flash-stage { position: relative; }
.risk-row { color: var(--ink60); padding: 2px 0; }
/* 错词重教卡 */
.reteach-box { width: min(92vw, 380px); }
.reteach-title { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.reteach-stage {
  min-height: 140px; display: grid; place-items: center;
  border-radius: 20px; background: #F5F8FD; margin-bottom: 10px;
}
/* 耳朵游戏：拍手按钮 */
.clap-row { display: flex; justify-content: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.clap-btn {
  background: var(--card); border: 3px solid rgba(42, 58, 92, .14); border-radius: 18px;
  padding: 14px 18px; font-size: 30px; line-height: 1.2; box-shadow: 0 4px 0 rgba(42, 58, 92, .12);
  transition: transform .12s;
}
.clap-btn:active { transform: scale(.93); }
.clap-btn.correct { border-color: var(--grass); background: #EAFBF0; animation: happyB .6s; }
.clap-btn.wrong { animation: shakeA .45s; }
/* 魔法小词 */
.sight-word { color: #9B59B6; }
.sight-quiz-grid { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.sight-tile {
  background: var(--card); border: 3px solid #D9C7EA; border-radius: 20px;
  min-width: 108px; padding: 18px 14px; font-size: 30px; font-weight: 900;
  box-shadow: 0 4px 0 rgba(42, 58, 92, .1); transition: transform .12s;
}
.sight-tile:active { transform: scale(.94); }
.sight-tile.correct { border-color: var(--grass); background: #EAFBF0; animation: happyB .6s; }
.sight-tile.wrong { animation: shakeA .45s; }
/* 多孩档案 */
.profile-chip {
  margin-top: 8px; background: rgba(255, 255, 255, .85); border-radius: 999px;
  padding: 6px 16px; font-size: 14px; font-weight: 900; color: var(--ink);
  box-shadow: 0 2px 8px rgba(42, 58, 92, .15);
}
.profile-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.profile-row {
  display: flex; align-items: center; gap: 10px; background: #F5F8FD;
  border-radius: 16px; padding: 12px 16px; font-size: 17px; font-weight: 900;
  border: 3px solid transparent;
}
.profile-row.cur { border-color: var(--sun2); background: #FFF3C4; }
.pr-emoji { font-size: 26px; }
/* 小小故事 */
.story-shelf { display: flex; justify-content: center; gap: 16px; margin: 14px 0 8px; flex-wrap: wrap; }
.story-book {
  background: #fff; border: 3px solid #BFE8DC; border-radius: 22px;
  width: 128px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 5px 0 rgba(42, 58, 92, .1); transition: transform .12s;
}
.story-book:active { transform: scale(.94); }
.sb-emoji { font-size: 52px; }
.sb-title { font-size: 17px; font-weight: 900; }
.sb-zh { font-size: 12px; color: var(--ink60); font-weight: 700; }
.story-text { font-size: clamp(22px, 5.4vmin, 32px); font-weight: 900; line-height: 1.6; margin-top: 8px; }
.st-word {
  display: inline-block; border-radius: 10px; padding: 2px 8px; cursor: pointer;
  transition: background .18s, color .18s;
}
.st-word.on { background: var(--sun); color: #6B4A00; }
/* 惊喜彩蛋文字 */
.egg-word {
  position: fixed; top: 24%; left: 50%; transform: translateX(-50%);
  font-size: 48px; font-weight: 900; color: #fff; z-index: 1250; pointer-events: none;
  text-shadow: 0 4px 0 rgba(42, 58, 92, .3), 0 10px 24px rgba(42, 58, 92, .35);
  animation: eggPop 2.6s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes eggPop {
  0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-8deg); }
  20% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(3deg); }
  32% { transform: translateX(-50%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(.9); }
}
.sticker.locked { filter: grayscale(1); opacity: .4; }
.sticker-group-title {
  max-width: 680px; margin: 18px auto 6px; padding: 0 18px;
  font-size: 16px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(42, 58, 92, .3);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .find-grid { gap: 18px; }
  .map-path { gap: 40px; }
}
@media (max-width: 420px) {
  .match-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip { font-size: 17px; padding: 10px 14px; }
  .btn-big { font-size: 22px; padding: 16px 34px; }
  .island-circle { width: 92px; height: 92px; font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
  .fe[class*="anim-"] { animation-duration: 4s !important; }
}

/* ============ 移动端（手机/平板）适配 ============ */
html, body { overscroll-behavior: none; }              /* 禁下拉刷新/橡皮筋 */
.screen {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(68px + env(safe-area-inset-top));  /* 刘海屏安全区 */
}
#top-cluster { top: calc(12px + env(safe-area-inset-top)); }
.home-footer, .flash-nav, .speak-controls, .celebrate-btns, .modal-btns {
  padding-bottom: max(10px, env(safe-area-inset-bottom)); /* 底部 Home 条 */
}
#app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* 触控目标加大（幼儿手指）：关键按钮 ≥52px */
.icon-btn { width: 52px; height: 52px; font-size: 24px; }
.btn-round { width: 56px; height: 56px; }
.replay-btn { padding: 13px 24px; }
.find-card, .match-card, .ph-tile, .chip, .flash-phrase, .chant-line { touch-action: manipulation; }

/* 手机竖屏（≤480px）：卡片单列化、按钮全宽化 */
@media (max-width: 480px) {
  .flash-nav { gap: 6px; }
  .flash-nav .btn-round { width: 64px; height: 64px; font-size: 28px; }
  .flash-nav .replay-btn { flex: 1; }
  .speak-controls .btn-big { flex: 1 1 42%; font-size: 20px; }
  .ph-tiles { gap: 14px; }
  .ph-tiles.blend { gap: 2px; }
  .ph-tile { width: clamp(78px, 26vw, 92px); height: 104px; }
  .celebrate-btns .btn { flex: 1; }
  .modal-btns .btn { flex: 1 1 40%; }
  .find-grid { gap: 10px; }
  .chant-line { padding: 14px 12px; }
}
/* 平板（481-1024px）：适度放大 */
@media (min-width: 481px) and (max-width: 1024px) {
  .flash-emoji { font-size: clamp(110px, 24vmin, 180px); }
  .find-card { font-size: clamp(70px, 19vmin, 120px); }
}
/* 横屏矮屏（手机横放）：压缩头部留白 */
@media (orientation: landscape) and (max-height: 480px) {
  .screen { padding-top: calc(56px + env(safe-area-inset-top)); }
  .unit-hero { padding: 0; }
  .hero-emoji { font-size: 48px; }
  .hero-title { font-size: 20px; }
  .flash-stage { min-height: 150px; }
  .flash-emoji { font-size: clamp(70px, 18vh, 120px); }
  .map-path { padding: 14px 20px 20px; gap: 18px; }
}

/* 定级测验跳过按钮 */
.pl-skip {
  float: right; font-size: 14px; font-weight: 800; color: var(--ink60);
  background: #F1F4FA; border-radius: 999px; padding: 4px 12px;
}