/* ============================================================
   蛋仔学习乐园 · 全局样式
   风格：圆润、弹跳、糖果色（参考可爱的蛋仔风格）
   ============================================================ */

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

:root {
  --bg1: #aee7ff;
  --bg2: #fef3c7;
  --card: #ffffff;
  --ink: #4a3b52;
  --pink: #ff8fb2;
  --pink-d: #f06a96;
  --blue: #5db9ff;
  --blue-d: #3d8fd6;
  --yellow: #ffd93d;
  --yellow-d: #e0a800;
  --green: #7ed957;
  --green-d: #4fae2e;
  --purple: #b197fc;
  --purple-d: #8b6bd8;
  --orange: #ffa94d;
  --red: #ff6b6b;
  --shadow: 0 6px 0 rgba(74, 59, 82, .12);
  --radius: 24px;
}

body {
  font-family: "Comic Sans MS", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg1) 0%, #d6f3ff 45%, var(--bg2) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 漂浮装饰云朵 */
.cloud {
  position: fixed; z-index: 0; opacity: .8; pointer-events: none;
  font-size: 48px; animation: floaty 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.05));
}
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }

/* ============ 顶栏 ============ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-bottom: 4px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(74,59,82,.08);
}
.topbar .logo { font-size: 26px; font-weight: 900; display:flex; align-items:center; gap:8px; }
.topbar .spacer { flex: 1; }

.star-pill {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #ffe27a, #ffc93d);
  border: 3px solid #fff; border-radius: 999px;
  padding: 6px 16px; font-size: 20px; font-weight: 900;
  box-shadow: var(--shadow); cursor: default; user-select: none;
}
.star-pill.bump { animation: bump .4s; }
@keyframes bump { 0%{transform:scale(1);} 40%{transform:scale(1.25) rotate(-4deg);} 100%{transform:scale(1);} }

/* ============ 通用按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; user-select: none;
  font-family: inherit; font-weight: 900; color: #fff;
  font-size: 20px; padding: 12px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue), var(--blue-d));
  box-shadow: 0 5px 0 var(--blue-d), var(--shadow);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-d); }
.btn.pink   { background: linear-gradient(180deg, var(--pink), var(--pink-d));   box-shadow: 0 5px 0 var(--pink-d), var(--shadow); }
.btn.pink:active   { box-shadow: 0 2px 0 var(--pink-d); }
.btn.yellow { background: linear-gradient(180deg, var(--yellow), var(--yellow-d)); color:#7a5200; box-shadow: 0 5px 0 var(--yellow-d), var(--shadow); }
.btn.yellow:active { box-shadow: 0 2px 0 var(--yellow-d); }
.btn.green  { background: linear-gradient(180deg, var(--green), var(--green-d));  box-shadow: 0 5px 0 var(--green-d), var(--shadow); }
.btn.green:active  { box-shadow: 0 2px 0 var(--green-d); }
.btn.purple { background: linear-gradient(180deg, var(--purple), var(--purple-d)); box-shadow: 0 5px 0 var(--purple-d), var(--shadow); }
.btn.purple:active { box-shadow: 0 2px 0 var(--purple-d); }
.btn.ghost {
  background: #fff; color: var(--ink);
  box-shadow: 0 5px 0 #e5dff0, var(--shadow);
}
.btn.ghost:active { box-shadow: 0 2px 0 #e5dff0; }
.btn.small { font-size: 16px; padding: 8px 18px; }

/* ============ 页面容器 ============ */
.page {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: 20px 16px 80px;
}
.page-title {
  text-align: center; font-size: 34px; font-weight: 900;
  margin: 10px 0 4px; text-shadow: 0 3px 0 rgba(255,255,255,.8);
}
.page-sub { text-align: center; font-size: 17px; opacity: .75; margin-bottom: 18px; }

/* ============ 分区卡片 ============ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 4px solid #fff;
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 26px;
}
.card h2 {
  font-size: 24px; margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.card h2 .tag {
  font-size: 13px; background: var(--yellow); color: #7a5200;
  border-radius: 999px; padding: 3px 12px; font-weight: 900;
}
.card .desc { font-size: 15px; opacity: .7; margin-bottom: 14px; }

/* 分区标题配色 */
.card.english h2 { color: var(--blue-d); }
.card.math h2 { color: var(--pink-d); }
.card.chinese h2 { color: var(--green-d); }

/* ============ 标签页 ============ */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tab {
  border: 3px solid transparent; cursor: pointer;
  background: #f1ebf9; color: var(--ink);
  font-family: inherit; font-weight: 900; font-size: 17px;
  padding: 9px 20px; border-radius: 999px;
  transition: all .15s;
}
.tab:hover { transform: translateY(-2px); }
.tab.active { background: var(--ink); color: #fff; transform: scale(1.05); }

/* ============ 选项/答题按钮 ============ */
.options { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.opt {
  border: 4px solid #efe8f7; background: #fbf9ff;
  border-radius: 20px; cursor: pointer; user-select: none;
  font-family: inherit; font-weight: 900; color: var(--ink);
  font-size: 26px; padding: 16px 22px; min-width: 92px;
  text-align: center; transition: all .12s;
  box-shadow: 0 4px 0 #e3dcef;
}
.opt:hover { transform: translateY(-3px) scale(1.03); border-color: var(--purple); }
.opt:active { transform: translateY(1px); box-shadow: 0 2px 0 #e3dcef; }
.opt.correct { background: #e6ffdf; border-color: var(--green); animation: popok .4s; }
.opt.wrong { background: #ffe6e6; border-color: var(--red); animation: shake .4s; }
.opt:disabled { cursor: default; }
@keyframes popok { 0%{transform:scale(1);} 50%{transform:scale(1.15);} 100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }

/* 题目展示 */
.question-box {
  background: linear-gradient(180deg, #fff, #fdf7ff);
  border: 4px dashed #e3d3f5; border-radius: 20px;
  padding: 24px; margin-bottom: 18px; text-align: center;
  font-size: 34px; font-weight: 900; min-height: 90px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.question-box .emoji { font-size: 44px; }
.hint-row { text-align: center; margin-top: 14px; min-height: 30px; font-size: 19px; font-weight: 900; }
.hint-row.ok { color: var(--green-d); }
.hint-row.no { color: var(--red); }

/* 计分条 */
.score-row {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-bottom: 14px; font-size: 18px; font-weight: 900; flex-wrap: wrap;
}
.score-row .pill {
  background: #f4f0fb; border-radius: 999px; padding: 6px 18px;
  border: 3px solid #fff; box-shadow: 0 3px 0 #e3dcef;
}

/* 进度条 */
.progress {
  height: 18px; background: #eee7f7; border-radius: 999px; overflow: hidden;
  border: 3px solid #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}
.progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--green), var(--yellow));
  border-radius: 999px; transition: width .3s;
}

/* ============ 蛋仔角色 ============ */
.egg {
  position: relative;
  width: 96px; height: 118px; flex: none;
  border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
  background: var(--yellow);
  box-shadow: inset -8px -10px 0 rgba(0,0,0,.06), 0 8px 14px rgba(74,59,82,.18);
  display: inline-block;
}
.egg.small { width: 60px; height: 74px; }
.egg.big { width: 140px; height: 172px; }
.egg .eye {
  position: absolute; top: 38%; width: 12%; height: 13%;
  background: #3d3044; border-radius: 50%;
}
.egg .eye::after {
  content: ""; position: absolute; top: 18%; left: 18%;
  width: 34%; height: 34%; background: #fff; border-radius: 50%;
}
.egg .eye.l { left: 24%; } .egg .eye.r { right: 24%; }
.egg .blush {
  position: absolute; top: 54%; width: 16%; height: 8%;
  background: rgba(255,120,150,.55); border-radius: 50%;
}
.egg .blush.l { left: 12%; } .egg .blush.r { right: 12%; }
.egg .mouth {
  position: absolute; top: 52%; left: 50%; transform: translateX(-50%);
  width: 22%; height: 12%;
  border: 3px solid #3d3044; border-top: none;
  border-radius: 0 0 60px 60px;
}
.egg .acc {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  line-height: 1; z-index: 3;
}
/* 蛋仔的小手小脚（圆滚滚造型） */
.egg .hand {
  position: absolute; top: 54%; width: 17%; height: 25%;
  background: inherit; border-radius: 50%;
  box-shadow: inset -2px -3px 0 rgba(0,0,0,.08);
}
.egg .hand.l { left: -9%; transform: rotate(18deg); }
.egg .hand.r { right: -9%; transform: rotate(-18deg); }
.egg .foot {
  position: absolute; bottom: -6%; width: 24%; height: 13%;
  background: inherit; border-radius: 50%;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.1);
}
.egg .foot.l { left: 20%; }
.egg .foot.r { right: 20%; }
.egg.bounce { animation: eggbounce 1.2s ease-in-out infinite; }
@keyframes eggbounce {
  0%,100% { transform: translateY(0) scale(1,1); }
  30% { transform: translateY(-14px) scale(.96,1.05); }
  55% { transform: translateY(0) scale(1.05,.95); }
  70% { transform: translateY(-6px) scale(1,1.02); }
}
.egg.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);} }
.egg.locked { filter: grayscale(1) brightness(.75); }

/* 蛋仔 + 气泡 */
.mascot-row { display: flex; align-items: flex-end; gap: 14px; justify-content: center; margin: 8px 0 18px; }
.speech-bubble {
  position: relative; max-width: 460px;
  background: #fff; border: 4px solid var(--ink);
  border-radius: 20px; padding: 14px 18px;
  font-size: 18px; font-weight: 900; line-height: 1.5;
  animation: bubblein .3s;
}
.speech-bubble::before {
  content: ""; position: absolute; left: -14px; bottom: 20px;
  border: 8px solid transparent; border-right-color: var(--ink);
}
@keyframes bubblein { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============ 首页科目卡 ============ */
.subject-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; margin-top: 20px;
}
.subject-card {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: #fff; border-radius: 30px; border: 5px solid #fff;
  box-shadow: var(--shadow); padding: 26px 22px; text-align: center;
  transition: transform .15s;
  overflow: hidden;
}
.subject-card:hover { transform: translateY(-6px) rotate(-1deg); }
.subject-card .big-emoji { font-size: 66px; display: block; margin-bottom: 10px; }
.subject-card h3 { font-size: 27px; margin-bottom: 6px; }
.subject-card p { font-size: 15px; opacity: .7; line-height: 1.6; }
.subject-card .go {
  display: inline-block; margin-top: 14px;
  font-weight: 900; font-size: 17px; color: #fff;
  padding: 8px 26px; border-radius: 999px;
}
.subject-card.english { background: linear-gradient(180deg, #e3f4ff, #fff); }
.subject-card.english .go { background: var(--blue); }
.subject-card.math { background: linear-gradient(180deg, #ffe9f0, #fff); }
.subject-card.math .go { background: var(--pink); }
.subject-card.chinese { background: linear-gradient(180deg, #eaffe3, #fff); }
.subject-card.chinese .go { background: var(--green); }

/* ============ 蛋仔小屋（收集） ============ */
.egg-house { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.egg-slot {
  width: 130px; padding: 14px 8px 12px; text-align: center;
  background: #fbf8ff; border: 4px solid #efe8f7; border-radius: 22px;
  cursor: pointer; transition: all .15s; user-select: none;
}
.egg-slot:hover { transform: translateY(-4px); }
.egg-slot.selected { border-color: var(--yellow); background: #fffbe3; box-shadow: 0 0 0 4px rgba(255,217,61,.35); }
.egg-slot .ename { font-weight: 900; font-size: 15px; margin-top: 8px; }
.egg-slot .eneed { font-size: 12px; opacity: .65; margin-top: 2px; }
.egg-slot .euse {
  margin-top: 8px; font-size: 13px; font-weight: 900;
  border-radius: 999px; padding: 3px 10px; display: inline-block;
  background: var(--green); color: #fff;
}
.egg-slot .euse.using { background: var(--orange); }

/* ============ 字母 / 拼音 网格 ============ */
.letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.letter-cell {
  background: linear-gradient(180deg, #fff, #f2faff);
  border: 4px solid #d9ecff; border-radius: 18px;
  padding: 12px 6px; text-align: center; cursor: pointer;
  transition: all .12s; user-select: none;
  box-shadow: 0 4px 0 #d3e7f8;
}
.letter-cell:hover { transform: translateY(-3px) scale(1.04); border-color: var(--blue); }
.letter-cell:active { transform: translateY(1px); box-shadow: 0 2px 0 #d3e7f8; }
.letter-cell .pair { font-size: 30px; font-weight: 900; color: var(--blue-d); }
.letter-cell .mini { font-size: 15px; margin-top: 4px; }
.letter-cell .mini .em { font-size: 19px; }

/* 字母单词：格子比纯字母的宽一些，要放下图、单词和中文 */
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.word-cell { padding: 10px 6px 12px; }
.word-cell .lw-emoji { line-height: 1; }
.word-cell .lw-word {
  font-size: 19px; font-weight: 700; color: var(--blue-d);
  margin-top: 6px; letter-spacing: .3px; white-space: nowrap;
}
/* watermelon 这种长词折行会把格子撑歪，缩字号让它保持一行 */
.word-cell .lw-word.long { font-size: 15px; letter-spacing: 0; }
/* 这个词里正在学的那个字母 */
.word-cell .lw-word b { color: var(--pink-d); font-size: 23px; font-weight: 900; }
.word-cell .lw-word.long b { font-size: 18px; }
.word-cell .lw-cn { font-size: 14px; opacity: .68; margin-top: 2px; }

.pinyin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.pinyin-cell {
  background: linear-gradient(180deg, #fff, #f3ffe9);
  border: 3px solid #dcf3c8; border-radius: 16px;
  padding: 10px 4px; text-align: center; cursor: pointer;
  transition: all .12s; user-select: none; box-shadow: 0 3px 0 #d8ecc9;
}
.pinyin-cell:hover { transform: translateY(-3px); border-color: var(--green); }
.pinyin-cell .py { font-size: 23px; font-weight: 900; color: var(--green-d); }
.pinyin-cell .eg { font-size: 17px; margin-top: 2px; opacity: .8; }

/* 拼音例词：词语是主角，拼音退成小标签 */
.pw-cell .pw-py { font-size: 14px; font-weight: 800; color: var(--green-d); opacity: .85; letter-spacing: .5px; }
.pw-cell .pw-word { font-size: 21px; font-weight: 700; margin-top: 2px; white-space: nowrap; }

/* ============ 单词卡片（翻面） ============ */
.flashcard-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.flashcard {
  width: 280px; height: 300px; perspective: 900px; cursor: pointer;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .5s; transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 26px; border: 5px solid #fff; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
}
.flash-front { background: linear-gradient(160deg, #fff, #e8f6ff); }
.flash-front .femoji { font-size: 110px; }
.flash-front .fword { font-size: 36px; font-weight: 900; color: var(--blue-d); }
.flash-front .fsay { font-size: 14px; opacity: .6; }
.flash-back { background: linear-gradient(160deg, #fff7e0, #ffeef5); transform: rotateY(180deg); }
.flash-back .fcn { font-size: 44px; font-weight: 900; color: var(--pink-d); }
.flash-back .fspell { font-size: 22px; font-weight: 900; letter-spacing: 4px; }
.flash-back .femoji2 { font-size: 70px; }
.card-nav { display: flex; align-items: center; gap: 16px; }

/* ============ 记忆配对卡片 ============ */
.match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 12px; max-width: 640px; margin: 0 auto; }
.mcard {
  aspect-ratio: 3/4; perspective: 700px; cursor: pointer;
}
.mcard-inner { position: relative; width: 100%; height: 100%; transition: transform .4s; transform-style: preserve-3d; }
.mcard.open .mcard-inner, .mcard.done .mcard-inner { transform: rotateY(180deg); }
.mface {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; font-weight: 900;
}
.mface.front {
  background: linear-gradient(160deg, var(--purple), var(--blue));
  color: rgba(255,255,255,.9); font-size: 30px;
  border: 3px solid rgba(255,255,255,.5);
}
.mface.back {
  background: #fff; border: 4px solid var(--purple);
  transform: rotateY(180deg); font-size: 34px; color: var(--purple-d);
}
.mcard.done .mface.back { border-color: var(--green); color: var(--green-d); background: #f0ffe6; }
.mcard.done { animation: popok .4s; cursor: default; }

/* ============ 乘法口诀表 ============ */
.kj-table { display: grid; gap: 6px; overflow-x: auto; padding: 6px 2px; }
.kj-cell {
  min-width: 86px; text-align: center; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #fff, #fff3f6);
  border: 3px solid #ffd9e4; border-radius: 12px;
  padding: 8px 4px; font-weight: 900; font-size: 16px;
  transition: all .12s; color: var(--pink-d);
}
.kj-cell:hover { transform: scale(1.08); border-color: var(--pink); z-index: 2; }
.kj-cell .kj-zh { display: block; font-size: 13px; opacity: .75; margin-top: 2px; color: var(--ink); }
.kj-cell.hl { background: var(--pink); color: #fff; border-color: var(--pink); }
.kj-cell.hl .kj-zh { color: #fff; opacity: .9; }
.kj-cell.blank { background: transparent; border: none; cursor: default; box-shadow: none; }

/* ============ 拼音声调 ============ */
.tone-char { font-size: 78px; font-weight: 900; color: var(--green-d); }

/* ============ 古诗 ============ */
.poem-box { text-align: center; }
.poem-title { font-size: 28px; font-weight: 900; color: var(--green-d); }
.poem-author { font-size: 16px; opacity: .7; margin: 4px 0 14px; }
.poem-line { display: flex; justify-content: center; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.pzi { display: inline-flex; flex-direction: column; align-items: center; }
.pzi .py { font-size: 12px; color: #999; font-weight: 700; }
.pzi .hz { font-size: 30px; font-weight: 900; }
.pzi.punct .hz { color: #bbb; }
.poem-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }

.blank-slot {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 44px;
}
.blank-slot .hz.unknown {
  border-bottom: 4px solid var(--orange); color: var(--orange);
  position: relative;
}
.blank-slot .hz.unknown.revealed { color: var(--green-d); border-bottom-color: var(--green); }

/* ============ 造句输入 ============ */
.sentence-input {
  width: 100%; max-width: 560px; font-family: inherit; font-size: 22px;
  padding: 14px 18px; border-radius: 18px; border: 4px solid #d9ecff;
  outline: none; text-align: center; font-weight: 700; color: var(--ink);
}
.sentence-input:focus { border-color: var(--blue); }

.word-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 56px; }
.chip {
  font-size: 22px; font-weight: 900; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; user-select: none;
  background: #fff; border: 3px solid var(--orange); color: #b25b00;
  box-shadow: 0 3px 0 #f3d3ae; transition: all .1s;
}
.chip:hover { transform: translateY(-2px); }
.chip.used { opacity: .35; pointer-events: none; }
.answer-chips { min-height: 60px; border: 3px dashed #f0c890; border-radius: 18px; padding: 8px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-bottom: 12px; }
.answer-chips .chip { background: #fff7e8; }
.chip.wrong { animation: shake .4s; border-color: var(--red); color: var(--red); }

/* 拼写游戏的字母槽位 */
.spell-slot {
  min-width: 40px; height: 52px; text-align: center;
  font-size: 34px; font-weight: 900; color: var(--blue-d);
  border-bottom: 5px solid var(--blue); border-radius: 6px;
  background: #f4faff;
}

/* ============ 计时挑战 ============ */
.timer-ring {
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900; color: #fff;
  background: conic-gradient(var(--green) var(--pct, 100%), #e8e0f2 0);
  border: 5px solid #fff; box-shadow: var(--shadow);
  margin: 0 auto;
}
.timer-ring.danger { background: conic-gradient(var(--red) var(--pct, 100%), #e8e0f2 0); animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: scale(1);} to { transform: scale(1.06);} }

.answer-input {
  width: 150px; font-family: inherit; font-size: 34px; font-weight: 900;
  text-align: center; padding: 8px 12px; border-radius: 16px;
  border: 4px solid #ffd9e4; outline: none; color: var(--ink);
}
.answer-input:focus { border-color: var(--pink); }

/* ============ 弹窗 / 提示 ============ */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(74,59,82,.45);
  display: flex; align-items: center; justify-content: center;
  animation: fadein .25s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 30px; border: 5px solid #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 34px 40px; text-align: center; max-width: 420px;
  animation: modalin .35s cubic-bezier(.2,1.6,.4,1);
}
@keyframes modalin { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal h3 { font-size: 26px; margin-bottom: 10px; color: var(--pink-d); }
.modal p { font-size: 17px; margin: 8px 0 18px; line-height: 1.6; }

.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 120; background: var(--ink); color: #fff;
  font-size: 18px; font-weight: 900; padding: 12px 26px;
  border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  animation: toastin .3s; pointer-events: none; max-width: 90vw; text-align:center;
}
@keyframes toastin { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* 星星飞行动画 */
.fly-star {
  position: fixed; z-index: 110; font-size: 34px; pointer-events: none;
  transition: all .8s cubic-bezier(.4,-.2,.5,1.1);
}

/* 五彩纸屑 */
.confetti {
  position: fixed; top: -20px; z-index: 105; pointer-events: none;
  width: 12px; height: 18px; border-radius: 3px;
  animation: confall linear forwards;
}
@keyframes confall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* 连对火焰 */
.combo-fire { font-size: 22px; font-weight: 900; color: var(--orange); animation: bump .4s; }

/* 连词成句/通用列表 */
.example-list { display: flex; flex-direction: column; gap: 10px; }
.example-item {
  display: flex; align-items: center; gap: 10px;
  background: #f8fbff; border: 3px solid #e2f0ff; border-radius: 16px;
  padding: 10px 16px; font-size: 20px; font-weight: 700;
}
.example-item .say-btn { flex: none; }

/* 小喇叭按钮 */
.say-btn {
  border: none; cursor: pointer; border-radius: 50%;
  width: 46px; height: 46px; font-size: 22px; flex: none;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-d));
  box-shadow: 0 4px 0 var(--yellow-d);
  transition: transform .1s;
}
.say-btn:hover { transform: scale(1.1); }
.say-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--yellow-d); }
.say-btn.small { width: 38px; height: 38px; font-size: 17px; }

.footer-note { text-align: center; font-size: 14px; opacity: .6; margin-top: 30px; }

/* ============ v2：网络图片 / 姓名时间徽章 / 学习均衡 ============ */
.twimg { vertical-align: -0.12em; user-select: none; -webkit-user-drag: none; }

.name-pill { background: linear-gradient(180deg, #b3e0ff, #7cc4ff); }
.time-pill { background: linear-gradient(180deg, #d8f5c8, #a9e18a); }

/* 均衡学习提醒条 */
.balance-banner {
  display: flex; align-items: center; gap: 10px;
  background: #fff8dc; border: 3px solid #ffd93d; border-radius: 16px;
  padding: 10px 16px; font-size: 16px; font-weight: 900; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.balance-banner a { color: var(--blue-d); }

/* 首页学习时间均衡面板 */
.bal-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.bal-name { width: 86px; flex: none; font-weight: 900; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.bal-track { flex: 1; height: 20px; background: #f1ebf9; border-radius: 999px; overflow: hidden; border: 3px solid #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
.bal-track i { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.bal-min { width: 76px; flex: none; text-align: right; font-weight: 900; font-size: 15px; }
.bal-tip { margin-top: 12px; font-size: 16px; font-weight: 900; text-align: center; line-height: 1.6; }
.today-time { margin-top: 10px; font-size: 14px; font-weight: 900; color: var(--purple-d); min-height: 18px; }

/* 响应式 */
@media (max-width: 640px) {
  .page-title { font-size: 26px; }
  .question-box { font-size: 26px; }
  .opt { font-size: 21px; min-width: 76px; padding: 12px 14px; }
  .flashcard { width: 240px; height: 260px; }
  .topbar .logo { font-size: 20px; }
  .speech-bubble { font-size: 16px; }
  .pzi .hz { font-size: 25px; }
  .tone-char { font-size: 60px; }
}