@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Baloo+2:wght@600;700;800&family=Atkinson+Hyperlegible:wght@400;700&display=swap');

  /* 教学用字体：拼音用 Atkinson Hyperlegible（双层 a/g、专为清晰易读设计，贴近手写规范），
     汉字优先调用系统楷体（小学写字教学标准字体），逐平台回退覆盖 Win/Mac/iOS/安卓 */
  :root {
    --font-pinyin: 'Atkinson Hyperlegible', 'STKaiti', 'KaiTi', sans-serif;
    --font-hanzi: 'KaiTi', 'STKaiti', '楷体', 'Kaiti SC', 'AR PL UKai CN', serif;
  }

  :root {
    --night-deep: #1a1147;
    --night-mid: #2d1b69;
    --night-soft: #3d2a85;
    --moon: #ffe9a8;
    --moon-glow: #fff4cf;
    --star: #fff8e1;
    --shengmu: #ff6b9d;
    --shengmu-deep: #d64577;
    --danyunmu: #4ecdc4;
    --danyunmu-deep: #2a9d94;
    --yunmu: #4ecdc4;
    --yunmu-deep: #2a9d94;
    --fuyunmu: #ff9f43;
    --fuyunmu-deep: #e67e22;
    --jieyu: #54a0ff;
    --jieyu-deep: #2980b9;
    --shengdiao: #ffd23f;
    --shengdiao-deep: #e0a800;
    --zhengti: #b88bff;
    --zhengti-deep: #8b5ff0;
    --biyunmu: #a78bfa;
    --biyunmu-deep: #7c3aed;
    --card-back: #6c4ad6;
    --card-back-2: #8b5ff0;
    --success: #6bcf7f;
    --text-light: #fff8e1;
    --text-dim: #c4b8f0;
  }

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

  body {
    font-family: 'Baloo 2', 'ZCOOL KuaiLe', sans-serif;
    background: var(--night-deep);
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-light);
    user-select: none;
  }

  #sky {
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at 50% -20%, var(--night-soft) 0%, var(--night-mid) 40%, var(--night-deep) 80%);
    z-index: 0; transition: background 1.2s ease;
  }
  #sky.dawn {
    background: radial-gradient(ellipse at 50% 120%, #ff9a6b 0%, #ffb88c 12%, #a78bd6 38%, var(--night-mid) 70%, var(--night-deep) 100%);
  }

  .star { position: absolute; background: var(--star); border-radius: 50%; animation: twinkle 3s ease-in-out infinite; }
  @keyframes twinkle { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }

  #moon {
    position: fixed; top: 5vh; right: 7vw;
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--moon-glow), var(--moon));
    box-shadow: 0 0 40px 8px rgba(255,233,168,0.5), inset -8px -8px 0 rgba(0,0,0,0.06);
    z-index: 1; transition: opacity 1.2s ease;
  }

  .wrap {
    position: relative; z-index: 2; max-width: 820px; margin: 0 auto;
    padding: 18px 16px 40px; min-height: 100vh; display: flex; flex-direction: column;
  }

  header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
  .title {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.45rem; color: var(--moon);
    text-shadow: 0 2px 0 rgba(0,0,0,0.2); display: flex; align-items: center; gap: 6px;
  }
  .stats { display: flex; gap: 8px; align-items: center; }
  .pill {
    background: rgba(255,255,255,0.12); border: 2px solid rgba(255,210,63,0.5);
    border-radius: 999px; padding: 6px 14px; font-size: 1.05rem; font-weight: 800;
    color: var(--shengdiao); display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px);
  }
  .pill.combo { border-color: rgba(255,107,157,0.6); color: var(--shengmu); }
  .score-pop { animation: scorePop 0.5s ease; }
  @keyframes scorePop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

  .nav-row {
    display: flex; gap: 8px; background: rgba(0,0,0,0.22); padding: 5px;
    border-radius: 18px; margin: 0 auto 18px; width: fit-content; max-width: 100%;
    flex-wrap: wrap; justify-content: center;
  }
  .nav-btn {
    border: none; background: transparent; color: var(--text-dim);
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 0.95rem; padding: 9px 18px;
    border-radius: 14px; cursor: pointer; transition: all 0.25s; white-space: nowrap;
  }
  .nav-btn.active {
    background: linear-gradient(135deg, var(--card-back-2), var(--card-back));
    color: white; box-shadow: 0 3px 10px rgba(108,74,214,0.5);
  }

  .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 8px 0; }

  /* 学习墙 */
  .learn-wall { width: 100%; }
  .learn-intro { text-align: center; font-size: 1rem; color: var(--text-dim); margin-bottom: 16px; }
  .group-title {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.15rem; color: var(--moon);
    margin: 18px 0 10px; display: flex; align-items: center; gap: 8px;
  }
  .group-title::before { content: ''; width: 6px; height: 20px; border-radius: 3px; background: var(--accent, var(--shengmu)); }
  .letter-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
  .letter-tile {
    aspect-ratio: 1; border-radius: 16px; border: 2px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07); color: var(--text-light);
    font-family: var(--font-pinyin); font-size: 1.9rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.12s, background 0.2s, box-shadow 0.2s;
  }
  .letter-tile:active { transform: scale(0.9); }
  .letter-tile.playing {
    background: var(--accent, var(--shengmu)); color: #fff; transform: scale(1.18);
    box-shadow: 0 0 24px var(--accent, var(--shengmu)); z-index: 2;
  }
  .grp-shengmu { --accent: var(--shengmu); }
  .grp-yunmu { --accent: var(--yunmu); }
  .grp-zhengti { --accent: var(--zhengti); }

  .narrator {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.5rem; text-align: center;
    min-height: 2.2rem; color: var(--moon-glow); text-shadow: 0 0 20px rgba(255,233,168,0.6);
    letter-spacing: 2px; transition: opacity 0.4s;
  }
  .narrator.big { font-size: 2rem; }

  .cards { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; perspective: 1200px; }
  .card { width: 152px; height: 206px; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
  .card.flipped { transform: rotateY(180deg); }
  .card-face {
    position: absolute; inset: 0; backface-visibility: hidden; border-radius: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  }
  .card-back { background: repeating-linear-gradient(45deg, var(--card-back) 0 12px, var(--card-back-2) 12px 24px); border: 3px solid rgba(255,255,255,0.3); }
  .card-back::after { content: "🌙"; font-size: 3.6rem; filter: drop-shadow(0 0 8px rgba(255,233,168,0.8)); }
  .card-front { transform: rotateY(180deg); border: 3px solid rgba(255,255,255,0.85); }
  .card-front .big-letter { font-family: var(--font-pinyin); font-size: 4.4rem; font-weight: 700; line-height: 1; }
  .card-front .label { font-size: 0.88rem; font-weight: 700; margin-top: 12px; padding: 4px 16px; border-radius: 999px; background: rgba(255,255,255,0.3); }
  .card-shengmu .card-front { background: linear-gradient(160deg, var(--shengmu), var(--shengmu-deep)); }
  .card-yunmu .card-front, .card-danyunmu .card-front { background: linear-gradient(160deg, var(--danyunmu), var(--danyunmu-deep)); }
  .card-fuyunmu .card-front { background: linear-gradient(160deg, var(--fuyunmu), var(--fuyunmu-deep)); }
  .card-biyunmu .card-front { background: linear-gradient(160deg, var(--biyunmu), var(--biyunmu-deep)); }
  .card-shengdiao .card-front { background: linear-gradient(160deg, var(--shengdiao), var(--shengdiao-deep)); color: #5a4500; }

  .dealing { animation: dealIn 0.5s ease backwards; }
  @keyframes dealIn { 0%{transform:translateY(-200px) rotate(-20deg);opacity:0} 100%{transform:translateY(0) rotate(0);opacity:1} }

  /* 可亲手点击翻开的牌：呼吸光圈提示 */
  .card.tappable { cursor: pointer; animation: dealIn 0.5s ease backwards, cardBreathe 1.6s ease-in-out infinite 0.5s; }
  .card.tappable:active { transform: scale(0.93); }
  .card.tappable .card-back { box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,233,168,0.6); }
  @keyframes cardBreathe {
    0%,100% { box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,233,168,0.5); }
    50% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px 4px rgba(255,233,168,0.55); }
  }
  .tap-hint {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.05rem; color: var(--moon-glow);
    opacity: 0.85; animation: tapBob 1.2s ease-in-out infinite; letter-spacing: 1px;
  }
  @keyframes tapBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

  .btn-dawn {
    background: linear-gradient(135deg, #ffd98a, #ff9a4d); color: #6a3500;
    box-shadow: 0 6px 0 #cf7424, 0 10px 24px rgba(255,154,77,0.4); font-size: 1.35rem; padding: 15px 40px;
  }
  .btn-dawn:active { box-shadow: 0 2px 0 #cf7424; }
  .btn-dawn.pulse { animation: dawnPulse 1.1s ease-in-out infinite; }
  @keyframes dawnPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

  .result-box {
    text-align: center; background: rgba(255,255,255,0.1); border: 3px solid rgba(255,233,168,0.4);
    border-radius: 24px; padding: 20px 36px; backdrop-filter: blur(6px);
    animation: resultPop 0.5s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 0 40px rgba(255,233,168,0.2);
  }
  @keyframes resultPop { 0%{transform:scale(0.5);opacity:0} 100%{transform:scale(1);opacity:1} }
  .syllable { font-family: var(--font-pinyin); font-size: 4.4rem; font-weight: 700; color: var(--moon-glow); letter-spacing: 4px; text-shadow: 0 0 30px rgba(255,233,168,0.5); line-height: 1.1; }
  .hanzi-display { font-family: var(--font-hanzi); font-size: 3.8rem; color: var(--star); margin-top: 6px; text-shadow: 0 0 20px rgba(255,248,225,0.4); line-height: 1; }
  .syllable-breakdown { font-size: 0.95rem; color: var(--text-dim); margin-top: 8px; letter-spacing: 1px; }

  .btn { border: none; font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.2rem; padding: 14px 34px; border-radius: 999px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; letter-spacing: 2px; }
  .btn:active { transform: scale(0.94); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-primary { background: linear-gradient(135deg, #ffd23f, #ff8c42); color: #5a3000; box-shadow: 0 6px 0 #c96a1f, 0 10px 20px rgba(0,0,0,0.3); }
  .btn-primary:active { box-shadow: 0 2px 0 #c96a1f; }
  .btn-speak { background: linear-gradient(135deg, var(--yunmu), var(--yunmu-deep)); color: white; box-shadow: 0 5px 0 #1f7d75; font-size: 1.05rem; padding: 12px 26px; }
  .btn-speak:active { box-shadow: 0 2px 0 #1f7d75; }
  .btn-rec { background: linear-gradient(135deg, #ff8fb3, var(--shengmu-deep)); color: white; box-shadow: 0 5px 0 #a8305c; font-size: 1.05rem; padding: 12px 26px; }
  .btn-rec:active { box-shadow: 0 2px 0 #a8305c; }
  .btn-rec.recording { animation: recPulse 1s infinite; }
  @keyframes recPulse { 0%,100%{box-shadow:0 5px 0 #a8305c, 0 0 0 rgba(255,107,157,0.6)} 50%{box-shadow:0 5px 0 #a8305c, 0 0 0 14px rgba(255,107,157,0)} }
  .btn-replay { background: linear-gradient(135deg, #b88bff, var(--zhengti-deep)); color: white; box-shadow: 0 5px 0 #6a42c4; font-size: 1.05rem; padding: 12px 26px; }
  .btn-replay:active { box-shadow: 0 2px 0 #6a42c4; }
  .btn-success { background: linear-gradient(135deg, #7ee896, var(--success)); color: #11401d; box-shadow: 0 5px 0 #4a9e5c; font-size: 1.1rem; }
  .btn-success:active { box-shadow: 0 2px 0 #4a9e5c; }
  .color-pick-btn { display:flex; flex-direction:column; align-items:center; gap:6px; width:110px; padding:18px 12px; border-radius:20px; color:#fff; font-size:1rem; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.3); box-shadow:0 6px 0 rgba(0,0,0,0.25); letter-spacing:1px; }
  .color-pick-btn:active { transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,0.25); }

  .moon-letter { position:relative; display:flex; flex-direction:column; align-items:center; cursor:pointer; margin:16px auto; animation:letterFloat 2.6s ease-in-out infinite; user-select:none; }
  .moon-letter:active { transform:scale(0.92) !important; }
  .moon-letter-icon { font-size:6rem; filter:drop-shadow(0 0 22px rgba(255,233,168,0.95)) drop-shadow(0 0 8px rgba(255,233,168,0.6)); }
  .moon-letter-stars { color:var(--moon-glow); font-size:1.1rem; letter-spacing:10px; opacity:0.75; margin-bottom:6px; animation:starsShimmer 2.6s ease-in-out infinite; }
  .moon-letter-glow { position:absolute; width:130px; height:70px; background:radial-gradient(ellipse,rgba(255,233,168,0.28) 0%,transparent 72%); top:38px; border-radius:50%; animation:glowPulse 2.6s ease-in-out infinite; pointer-events:none; }
  @keyframes letterFloat { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-20px) rotate(5deg)} }
  @keyframes glowPulse { 0%,100%{transform:scale(1);opacity:0.55} 50%{transform:scale(1.5);opacity:1} }
  @keyframes starsShimmer { 0%,100%{opacity:0.4;letter-spacing:10px} 50%{opacity:1;letter-spacing:14px} }

  .moon-secret-label { font-size: 0.88rem; color: var(--moon-glow); opacity: 0.7; letter-spacing: 2px; margin-bottom: 4px; }

  .home-level-badge { font-size: 0.82rem; color: var(--shengdiao); background: rgba(255,210,63,0.12); border: 1px solid rgba(255,210,63,0.25); border-radius: 20px; padding: 5px 16px; margin-top: 4px; letter-spacing: 0.5px; }

  .levelup-overlay {
    position: fixed; inset: 0; z-index: 200; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(10,6,30,0.78); backdrop-filter: blur(10px);
    animation: fadeIn 0.4s ease; transition: opacity 0.5s;
  }
  .levelup-icon { font-size: 7rem; animation: levelBounce 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s both; }
  .levelup-title { font-family:'ZCOOL KuaiLe',cursive; font-size: 2.2rem; color: var(--shengdiao); text-shadow: 0 0 28px rgba(255,210,63,0.7); }
  .levelup-name  { font-family:'ZCOOL KuaiLe',cursive; font-size: 1.9rem; color: var(--moon-glow); }
  .levelup-next  { font-size: 0.85rem; color: var(--text-dim); margin-top: 6px; }
  @keyframes levelBounce { 0%{transform:scale(0) rotate(-20deg)} 100%{transform:scale(1) rotate(0deg)} }

  .action-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

  .reveal-overlay {
    position: fixed; inset: 0; z-index: 100; background: rgba(10,6,30,0.82); backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; animation: fadeIn 0.3s;
  }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  .reveal-title { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.6rem; color: var(--moon-glow); }
  .meter-stars { display: flex; gap: 18px; }
  .meter-star { font-size: 3.5rem; opacity: 0.25; transform: scale(0.7); transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); filter: grayscale(1); }
  .meter-star.lit { opacity: 1; transform: scale(1.1); filter: grayscale(0) drop-shadow(0 0 16px rgba(255,210,63,0.8)); }
  .reveal-verdict { font-family: 'ZCOOL KuaiLe', cursive; font-size: 2rem; color: var(--shengdiao); min-height: 2.4rem; text-shadow: 0 0 24px rgba(255,210,63,0.5); opacity: 0; transition: opacity 0.4s; transform: scale(0.8); }
  .reveal-verdict.show { opacity: 1; transform: scale(1); animation: scorePop 0.5s; }
  .combo-flash { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.3rem; color: var(--shengmu); opacity: 0; transition: opacity 0.3s; }
  .combo-flash.show { opacity: 1; }

  .char-prompt { font-size: 1.1rem; color: var(--text-dim); text-align: center; margin-bottom: 4px; }
  .char-grid { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .char-btn {
    width: 104px; height: 104px; border-radius: 22px; border: 3px solid rgba(255,255,255,0.5);
    background: linear-gradient(160deg, #5a4ad6, #4536a8); color: white; font-size: 3.4rem; font-weight: 700;
    font-family: var(--font-hanzi); cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; box-shadow: 0 5px 14px rgba(0,0,0,0.3);
  }
  .char-btn:active { transform: scale(0.92); }
  .char-btn.correct { background: linear-gradient(160deg, #7ee896, var(--success)); animation: scorePop 0.5s; }
  .char-btn.wrong { background: linear-gradient(160deg, #ff7a7a, #d64545); animation: shake 0.4s; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

  .feedback { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.4rem; min-height: 1.7rem; text-align: center; transition: opacity 0.3s; }
  .feedback.good { color: var(--success); text-shadow: 0 0 20px rgba(107,207,127,0.5); }

  .hint { font-size: 0.82rem; color: var(--text-dim); text-align: center; opacity: 0.7; margin-top: auto; padding-top: 16px; }

  .burst-star { position: fixed; font-size: 1.8rem; pointer-events: none; z-index: 110; animation: burstUp 1s ease forwards; }
  @keyframes burstUp { 0%{transform:translate(0,0) scale(0.4);opacity:1} 100%{transform:translate(var(--dx),-120px) scale(1.4);opacity:0} }

  /* ===== 拼音星图新分组颜色 ===== */
  .grp-danyunmu { --accent: var(--danyunmu); }
  .grp-fuyunmu  { --accent: var(--fuyunmu);  }
  .card-jieyu .card-front { background: linear-gradient(160deg, var(--jieyu), var(--jieyu-deep)); }

  /* 介母标记：i/u/ü 右上角小徽标 */
  .jie-tile { position: relative; }
  .jie-badge {
    position: absolute; top: 4px; right: 5px;
    font-size: 0.46rem; font-weight: 800; font-family: 'Baloo 2', sans-serif;
    background: var(--danyunmu); color: #fff;
    border-radius: 4px; padding: 1px 3px; line-height: 1.2;
    pointer-events: none; letter-spacing: 0;
  }

  /* ===== 元素选择器（月亮/星星/云朵）===== */
  /* ===== 返回按钮 ===== */
  .back-btn {
    display: none; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 999px; color: var(--text-dim);
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 0.88rem;
    padding: 6px 14px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  .back-btn:hover { background: rgba(255,255,255,0.2); color: var(--text-light); }
  .back-btn:active { transform: scale(0.93); }

  /* ===== 首页模块卡片 ===== */
  .home-hero {
    text-align: center; width: 100%; margin-bottom: 28px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .home-tagline {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.7rem;
    color: var(--moon-glow); letter-spacing: 3px;
    text-shadow: 0 0 28px rgba(255,233,168,0.5);
  }
  .home-subtitle {
    font-size: 0.9rem; color: var(--text-dim); letter-spacing: 1px; opacity: 0.9;
  }
  .home-how {
    font-size: 0.78rem; color: var(--text-dim); opacity: 0.55;
    background: rgba(255,255,255,0.05); border-radius: 20px;
    padding: 6px 18px; margin-top: 2px; letter-spacing: 0.5px;
  }
  .module-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 720px;
  }
  .module-card {
    background: rgba(255,255,255,0.07); border: 2px solid rgba(255,255,255,0.14);
    border-radius: 24px; padding: 20px 16px; cursor: pointer;
    transition: transform 0.18s, background 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column; gap: 5px; backdrop-filter: blur(6px);
  }
  .module-card:hover { background: rgba(255,255,255,0.13); transform: translateY(-3px); }
  .module-card:active { transform: scale(0.95); }
  .mod-learn  { border-color: rgba(255,210,63,0.35); }
  .mod-starter{ border-color: rgba(78,205,196,0.35); }
  .mod-play   { border-color: rgba(255,107,157,0.35); }
  .mod-tricky { border-color: rgba(184,139,255,0.35); }
  .mod-learn:hover  { box-shadow: 0 8px 28px rgba(255,210,63,0.22); }
  .mod-starter:hover{ box-shadow: 0 8px 28px rgba(78,205,196,0.22); }
  .mod-play:hover   { box-shadow: 0 8px 28px rgba(255,107,157,0.22); }
  .mod-tricky:hover { box-shadow: 0 8px 28px rgba(184,139,255,0.22); }
  .mod-icon  { font-size: 2.2rem; line-height: 1; }
  .mod-name  { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.25rem; color: var(--moon-glow); }
  .mod-sub   { font-size: 0.72rem; color: var(--text-dim); opacity: 0.75; }
  .mod-desc  { font-size: 0.84rem; color: var(--text-dim); line-height: 1.55; margin-top: 4px; }

  /* ===== 启蒙夜校 ===== */
  .starter-next {
    margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 18px; background: rgba(255,255,255,0.05); border-radius: 18px;
    border: 1.5px dashed rgba(255,255,255,0.15);
  }
  .starter-hint { font-size: 0.9rem; color: var(--text-dim); opacity: 0.8; text-align: center; }

  /* ===== 易错特训营 ===== */
  .tricky-page { width: 100%; display: flex; flex-direction: column; gap: 14px; }
  .tricky-intro { text-align: center; color: var(--text-dim); font-size: 0.92rem; }
  .tricky-group {
    background: rgba(255,255,255,0.05); border-radius: 18px; padding: 14px 16px;
    border: 1.5px solid rgba(255,255,255,0.1);
  }
  .tricky-group-title {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 1rem;
    color: var(--gaccent, var(--shengmu)); margin-bottom: 12px;
  }
  .tricky-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
  }
  .tricky-row:last-child { margin-bottom: 0; }
  .tricky-tile {
    display: flex; align-items: center; gap: 6px; padding: 9px 16px;
    border-radius: 13px; border: 2px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08); cursor: pointer;
    transition: transform 0.13s, background 0.18s; color: var(--text-light);
    font-family: var(--font-pinyin);
  }
  .tricky-tile:active { transform: scale(0.91); background: rgba(255,255,255,0.18); }
  .tricky-letter { font-size: 1.5rem; font-weight: 700; }
  .tricky-hear   { font-size: 1rem; opacity: 0.65; }
  .tricky-vs     { font-weight: 800; color: var(--text-dim); font-size: 0.85rem; flex-shrink: 0; }
  .tricky-note   { font-size: 0.76rem; color: var(--text-dim); opacity: 0.7; flex: 1; min-width: 110px; }

  .tricky-quiz   { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
  .tricky-options{ display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
  .tricky-opt-btn{
    width: 118px; height: 118px; border-radius: 24px;
    border: 3px solid rgba(255,255,255,0.5);
    background: linear-gradient(160deg, var(--card-back-2), var(--card-back));
    color: white; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 14px rgba(0,0,0,0.3);
  }
  .tricky-opt-btn:active { transform: scale(0.91); }
  .tricky-opt-letter { font-family: var(--font-pinyin); font-size: 2.4rem; font-weight: 700; }
  .tricky-opt-btn.correct { background: linear-gradient(160deg,#7ee896,var(--success)); animation: scorePop 0.5s; }
  .tricky-opt-btn.wrong   { background: linear-gradient(160deg,#ff7a7a,#d64545); animation: shake 0.4s; }
  .tricky-score { font-size: 0.82rem; color: var(--text-dim); opacity: 0.7; }

  /* 常见易错字对比 */
  .cp-section-title { font-family:'ZCOOL KuaiLe',cursive; font-size:1.1rem; color:var(--moon-glow); margin:20px 0 4px; letter-spacing:1px; }
  .cp-group { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-left:3px solid var(--gaccent); border-radius:16px; padding:14px 14px 10px; margin-bottom:12px; }
  .cp-group-title { font-family:'ZCOOL KuaiLe',cursive; font-size:0.95rem; color:var(--gaccent); margin-bottom:2px; }
  .cp-note { font-size:0.75rem; color:var(--text-dim); opacity:0.65; margin-bottom:10px; }
  .cp-pairs { display:flex; flex-direction:column; gap:10px; }
  .cp-row { display:flex; align-items:center; gap:10px; }
  .cp-card { display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:10px 16px; cursor:pointer; flex:1; transition:transform 0.15s,background 0.15s; }
  .cp-card:active { transform:scale(0.94); background:rgba(255,255,255,0.12); }
  .cp-left { border-top:2px solid var(--gaccent); }
  .cp-right { border-top:2px solid rgba(255,255,255,0.2); }
  .cp-char { font-family:var(--font-hanzi); font-size:2rem; color:var(--text-light); line-height:1; }
  .cp-word { font-size:0.72rem; color:var(--text-dim); letter-spacing:1px; }
  .cp-py   { font-family:var(--font-pinyin); font-size:0.85rem; color:var(--gaccent); font-weight:700; }
  .cp-vs   { font-size:0.72rem; color:var(--text-dim); opacity:0.5; flex-shrink:0; }

  @media (max-width: 480px) {
    .title { font-size: 1.15rem; }
    .syllable { font-size: 3.6rem; }
    .card { width: 128px; height: 174px; }
    .card-front .big-letter { font-size: 3.6rem; }
    .card-back::after { font-size: 3rem; }
    .narrator { font-size: 1.25rem; }
    .narrator.big { font-size: 1.6rem; }
    .char-btn { width: 88px; height: 88px; font-size: 2.8rem; }
    .btn { font-size: 1.05rem; padding: 12px 26px; }
    .letter-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
    .letter-tile { font-size: 1.6rem; }
    .meter-star { font-size: 2.8rem; }
    .module-grid { grid-template-columns: 1fr; gap: 10px; max-width: 100%; }
    .module-card { padding: 16px 14px; border-radius: 18px; flex-direction: row; align-items: center; gap: 12px; }
    .mod-icon { font-size: 2rem; flex-shrink: 0; }
    .mod-name { font-size: 1.1rem; }
    .mod-desc { font-size: 0.8rem; }
    .tricky-opt-btn { width: 100px; height: 100px; }
    .tricky-opt-letter { font-size: 2rem; }
  }