/* ============================================================
 * style.css —— 拼音小导师 全局样式
 * 风格：明亮活泼（橙黄 + 天蓝 + 草绿），圆润可爱，大字号
 * ============================================================ */

:root {
  --orange: #ff8f3f;
  --yellow: #ffb400;
  --blue: #3fa9f5;
  --green: #7ec850;
  --pink: #ff5f7e;
  --purple: #9b59d0;
  --bg: #fff8ec;
  --ink: #4a3b2a;
  --radius: 26px;
  --kaiti: "Kaiti SC", "KaiTi", "STKaiti", "楷体", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* 拼音统一使用楷体回退链 */
.py { font-family: var(--kaiti); }

/* ---------- 布局骨架 ---------- */
#app { max-width: 1100px; margin: 0 auto; padding: 18px 22px 60px; }

.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius);
  padding: 12px 20px; margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(255, 143, 63, .18);
}
.topbar .spacer { flex: 1; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff3d9; border: 2px solid var(--yellow);
  border-radius: 999px; padding: 6px 16px;
  font-size: 18px; font-weight: 700;
}
.pill.blue { background: #e3f2ff; border-color: var(--blue); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; user-select: none;
  font-family: inherit; font-weight: 700; color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 14px 30px; font-size: 20px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .15);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.btn.blue { background: var(--blue); }
.btn.green { background: var(--green); }
.btn.pink { background: var(--pink); }
.btn.ghost {
  background: #fff; color: var(--ink);
  border: 3px solid #ffd9a8; box-shadow: 0 4px 0 #ffd9a8;
}
.btn.big { font-size: 26px; padding: 18px 42px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 首页 ---------- */
.hero { text-align: center; margin: 10px 0 24px; }
.hero h1 {
  font-size: 46px; letter-spacing: 4px;
  color: var(--orange);
  text-shadow: 0 3px 0 #ffe1c2;
}
.hero p { font-size: 20px; color: #8a7358; margin-top: 6px; }

.unit-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.unit-card {
  background: #fff; border-radius: var(--radius);
  padding: 20px; cursor: pointer; position: relative;
  border: 4px solid transparent;
  box-shadow: 0 6px 16px rgba(74, 59, 42, .1);
  transition: transform .2s ease, border-color .2s ease;
}
.unit-card:hover { transform: translateY(-5px) scale(1.02); }
.unit-card .u-icon { font-size: 44px; }
.unit-card h3 { font-size: 24px; margin: 6px 0 2px; }
.unit-card .u-desc { color: #9a8468; font-size: 15px; }
.unit-card .u-progress { margin-top: 10px; font-size: 16px; color: #b0894f; }
.unit-card .u-stars { color: var(--yellow); font-size: 18px; letter-spacing: 2px; }

/* ---------- 单元页 ---------- */
.lesson-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.lesson-card {
  background: #fff; border-radius: 22px; padding: 16px 8px;
  text-align: center; cursor: pointer;
  border: 3px solid #ffe4c2;
  box-shadow: 0 4px 10px rgba(74, 59, 42, .08);
  transition: transform .18s ease, border-color .18s ease;
}
.lesson-card:hover { transform: scale(1.06); border-color: var(--orange); }
.lesson-card .lc-py { font-size: 40px; font-weight: 700; }

/* ---------- 单元页：发音总结 ---------- */
.unit-summary {
  margin-top: 26px; background: #fff; border-radius: 22px;
  border: 3px solid #ffe4c2; box-shadow: 0 4px 10px rgba(74, 59, 42, .08);
  padding: 18px 20px; text-align: center;
}
.unit-summary h2 { font-size: 24px; color: var(--orange); margin: 0; }
.unit-summary.locked { opacity: .8; border-style: dashed; }
.unit-summary.locked h2 { color: #b0894f; }
.sum-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 12px;
}
.sum-chip {
  font-family: inherit; font-size: 24px; font-weight: 700;
  background: #fff7ea; color: #6b543a; cursor: pointer;
  border: 2px solid #ecd9b8; border-radius: 999px; padding: 8px 18px;
  transition: transform .15s ease, border-color .15s ease;
}
.sum-chip:hover { transform: scale(1.1); border-color: var(--orange); }
.lesson-card .lc-emoji { font-size: 34px; }
.lesson-card .lc-state { font-size: 15px; margin-top: 4px; }
.lesson-card.done { border-color: var(--green); background: #f2ffe9; }

/* ---------- 学习页 / 小老师页 ---------- */
.stage {
  background: #fff; border-radius: 30px;
  padding: 30px 26px; text-align: center;
  box-shadow: 0 8px 20px rgba(74, 59, 42, .1);
}
.role {
  display: inline-flex; align-items: center; gap: 12px;
  background: #e3f2ff; border-radius: 999px; padding: 10px 24px;
  font-size: 20px; font-weight: 700; color: #20689e;
}
.role .face { font-size: 36px; display: inline-block; }
.big-py {
  font-size: 130px; line-height: 1.2; margin: 14px 0 4px;
  color: var(--orange); font-weight: 700;
  text-shadow: 0 4px 0 #ffe1c2;
}
.koujue {
  font-size: 26px; color: #6b5537; margin: 6px 0;
  background: #fff3d9; border-radius: 18px; padding: 10px 18px;
  display: inline-block;
}
.mouth-tip { font-size: 18px; color: #9a8468; margin-top: 8px; }
.tone-hint { font-size: 22px; margin-top: 6px; }
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* 角色弹跳动画 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-18px); }
  70% { transform: translateY(-6px); }
}
.bounce { animation: bounce .55s ease; }

/* ---------- 测验页 ---------- */
.quiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.q-progress { font-size: 18px; font-weight: 700; color: #9a8468; }
.q-title { font-size: 26px; font-weight: 800; margin: 8px 0 18px; text-align: center; }

.option-grid {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.opt {
  background: #fff; border: 4px solid #e8dcc8; border-radius: 24px;
  padding: 18px 22px; cursor: pointer; min-width: 120px;
  font-size: 56px; text-align: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.opt .opt-label { font-size: 18px; color: #9a8468; margin-top: 4px; }
.opt:hover { transform: scale(1.06); border-color: var(--blue); }
.opt.sel { border-color: var(--orange); background: #fff3d9; transform: scale(1.06); }
.opt.right { border-color: var(--green); background: #efffe6; }
.opt.wrong { border-color: var(--pink); background: #fff0f2; }

/* 答错轻摇动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
.shake { animation: shake .3s ease; }

/* 连连看 */
.match-wrap { display: flex; gap: 60px; justify-content: center; }
.match-col { display: flex; flex-direction: column; gap: 12px; }
.match-item {
  background: #fff; border: 3px solid #e8dcc8; border-radius: 18px;
  padding: 10px 22px; font-size: 30px; cursor: pointer; text-align: center;
  min-width: 110px;
  transition: transform .15s ease, border-color .15s ease, opacity .2s ease;
}
.match-item.sel { border-color: var(--orange); background: #fff3d9; transform: scale(1.06); }
.match-item.done { border-color: var(--green); background: #efffe6; opacity: .55; pointer-events: none; }

/* 声调过山车 */
.tone-track {
  font-size: 70px; margin: 10px 0 4px;
  background: #e3f2ff; border-radius: 24px; padding: 14px;
}
.tone-btns { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.tone-btn {
  font-size: 40px; padding: 10px 22px; border-radius: 20px;
  border: 4px solid #e8dcc8; background: #fff; cursor: pointer;
  font-family: var(--kaiti);
  transition: transform .15s ease, border-color .15s ease;
}
.tone-btn:hover { transform: scale(1.08); border-color: var(--pink); }
.tone-btn.right { border-color: var(--green); background: #efffe6; }
.tone-btn.wrong { border-color: var(--pink); background: #fff0f2; }
.tone-metaphor { display: flex; gap: 18px; justify-content: center; margin-top: 14px; font-size: 17px; color: #9a8468; flex-wrap: wrap; }

/* 发音打分 */
.speak-target { font-size: 84px; color: var(--orange); margin: 8px 0; }
.mic-status { font-size: 20px; margin-top: 10px; min-height: 30px; }
.mic-settings { font-size: 16px; color: #9a8468; margin-top: 10px; }
.mic-settings select {
  font-size: 16px; font-family: inherit; color: #6b543a;
  padding: 6px 10px; border: 2px solid #ecd9b8; border-radius: 10px;
  background: #fffdf7; max-width: 320px;
}
.mic-settings .mic-note { margin-left: 8px; color: #b0894f; }
.score-badge {
  display: inline-block; font-size: 26px; font-weight: 800;
  padding: 10px 30px; border-radius: 999px; margin-top: 10px;
}
.score-badge.great { background: #efffe6; color: #3c8a1e; border: 3px solid var(--green); }
.score-badge.good { background: #e3f2ff; color: #20689e; border: 3px solid var(--blue); }
.score-badge.retry { background: #fff0f2; color: #c2324c; border: 3px solid var(--pink); }

/* ---------- 反馈浮层（星星飞入 / 提示条） ---------- */
#toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-90px);
  background: #fff; border-radius: 999px; padding: 12px 30px;
  font-size: 22px; font-weight: 800; color: var(--orange);
  border: 3px solid var(--yellow);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .25s ease; z-index: 99; pointer-events: none;
  max-width: 88vw; text-align: center;
}
#toast.show { transform: translateX(-50%) translateY(0); }

@keyframes starFly {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: translate(0, -140px) scale(1.6) rotate(20deg); }
  100% { transform: translate(0, -240px) scale(.9) rotate(40deg); opacity: 0; }
}
.star-fly {
  position: fixed; font-size: 44px; z-index: 98; pointer-events: none;
  animation: starFly 1s ease forwards;
}

/* 完美连击：全屏彩带 */
#combo {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(255, 180, 0, .92);
}
#combo.show { display: flex; }
#combo .combo-text {
  font-size: 72px; font-weight: 900; color: #fff;
  text-shadow: 0 5px 0 rgba(0, 0, 0, .15);
  animation: bounce .8s ease infinite;
}
.confetti {
  position: absolute; top: -20px; width: 14px; height: 22px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* ---------- 证书卡片 ---------- */
.cert {
  background: linear-gradient(160deg, #fffdf5, #fff3d9);
  border: 6px solid var(--yellow); border-radius: 28px;
  padding: 30px 36px; margin: 20px auto; max-width: 520px;
  box-shadow: 0 0 0 6px #fff, 0 0 0 10px var(--yellow),
    0 12px 30px rgba(255, 180, 0, .35);
  position: relative;
}
.cert h2 { color: var(--orange); font-size: 32px; letter-spacing: 4px; }
.cert .cert-py { font-size: 84px; color: var(--pink); margin: 10px 0; }
.cert p { font-size: 19px; line-height: 1.7; }
.cert .cert-deco { position: absolute; font-size: 30px; }

/* ---------- 收集册 ---------- */
.album-section { margin-top: 26px; }
.album-section h2 { font-size: 26px; margin-bottom: 12px; }
.card-wall {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.role-card {
  background: #fff; border-radius: 20px; padding: 14px 6px; text-align: center;
  border: 3px solid #ffe4c2; cursor: pointer;
  transition: transform .18s ease;
}
.role-card:hover { transform: scale(1.05); }
.role-card .rc-emoji { font-size: 36px; }
.role-card .rc-py { font-size: 30px; font-weight: 700; }
.role-card .rc-role { font-size: 13px; color: #9a8468; }
.badge-row { display: flex; gap: 14px; flex-wrap: wrap; }
.badge {
  background: #fff; border-radius: 20px; padding: 14px 20px; text-align: center;
  border: 3px solid var(--yellow); min-width: 130px;
}
.badge.locked { filter: grayscale(1); opacity: .45; border-color: #d8cbb4; }
.badge .b-icon { font-size: 38px; }
.badge .b-name { font-weight: 700; margin-top: 4px; }
.badge .b-desc { font-size: 13px; color: #9a8468; }
.report {
  background: #eef7ff; border: 3px solid var(--blue); border-radius: 22px;
  padding: 18px 22px; font-size: 18px; line-height: 2;
}
.report .weak { color: var(--pink); font-weight: 700; }

/* ---------- 护眼提醒 ---------- */
#eye-modal {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(0, 0, 0, .45);
  align-items: center; justify-content: center;
}
#eye-modal.show { display: flex; }
.eye-box {
  background: #fff; border-radius: 30px; padding: 36px 40px; text-align: center;
  max-width: 420px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.eye-box .eye-icon { font-size: 60px; }
.eye-box h2 { margin: 10px 0; color: var(--green); }
.eye-box p { color: #9a8468; font-size: 18px; margin-bottom: 18px; }

/* ---------- 横屏提示（宽 < 900px 显示） ---------- */
#rotate-tip {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: var(--pink); color: #fff; text-align: center;
  font-size: 16px; padding: 8px; font-weight: 700;
}
@media (max-width: 899px) {
  #rotate-tip { display: block; }
  #app { padding-top: 44px; }
}

/* ---------- 屏幕淡入 ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen { animation: fadeIn .25s ease; }

/* 录音中闪烁 */
@keyframes blink { 50% { opacity: .35; } }
.rec-blink { animation: blink 1s ease infinite; color: var(--pink); }

audio { margin-top: 14px; width: 100%; max-width: 380px; }

/* ---------- 拼写页（写：笔划示范 + 空气书写） ---------- */
.write-wrap {
  display: flex; gap: 24px; justify-content: center;
  align-items: flex-start; flex-wrap: wrap;
}
.write-panel {
  background: #fff; border-radius: var(--radius);
  padding: 18px 20px; box-shadow: 0 4px 0 rgba(0, 0, 0, .06);
  text-align: center;
}
.write-panel h2 { font-size: 22px; color: #8a7358; margin-bottom: 12px; }
#demo-canvas { border-radius: 18px; background: #fffdf6; display: block; }

/* 空气书写区：摄像头画面 + 覆盖描红画布 */
.air-box {
  position: relative; width: 520px; max-width: 100%;
  border-radius: 18px; overflow: hidden; background: #f7ecd8;
}
.air-box video {
  display: block; width: 100%;
  transform: scaleX(-1); /* 镜像，孩子抬右手画面里也是右手 */
}
.air-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.write-hint { font-size: 18px; color: #9a8468; margin-top: 10px; }
.write-status {
  min-height: 28px; margin-top: 6px;
  font-size: 20px; font-weight: 700; color: var(--orange);
}

/* 写完啦：「继续」按钮呼吸发光 */
@keyframes glowPulse {
  from { box-shadow: 0 4px 0 rgba(0, 0, 0, .15), 0 0 0 0 rgba(255, 180, 0, .5); }
  to   { box-shadow: 0 4px 0 rgba(0, 0, 0, .15), 0 0 22px 8px rgba(255, 180, 0, .75); }
}
.btn.glow { animation: glowPulse .8s ease-in-out infinite alternate; }

/* ---------- 嘴型示范（学习页卡通嘴巴） ---------- */
.mouth-demo { text-align: center; margin: 4px 0 2px; }
.mouth-svg { width: 200px; height: 146px; background: #fff8ee; border-radius: 14px; }
.mouth-svg #ms-jaw {
  transition: transform .16s ease;
}
.mouth-caption { font-size: 16px; color: #9a8468; margin-top: 2px; }
/* 口型素材图（assets/mouth/）：与 SVG 同尺寸框，保持比例完整显示 */
.mouth-img { max-width: 220px; max-height: 190px; object-fit: contain; background: #fff8ee; border-radius: 14px; }
/* 发音时素材图的"说话"脉动（与 SVG 下颌动画同 180ms 节拍） */
.mouth-img.mouth-talking { animation: mouthTalkPulse .36s ease-in-out infinite; }
@keyframes mouthTalkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}