/* ============================================================================
 * base.css —— 全局基座
 * 对齐 iOS 的 LessonShell（隐藏系统导航栏 + 自绘返回键）、Motion 动效、
 * 以及 H5 必须补的两件事：响应式断点 + 少屏护眼（儿童向）。
 * ========================================================================= */

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

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--footer-ink);
  background: var(--sky-bottom);
  user-select: none;
  -webkit-user-select: none;
}

#app { position: relative; min-height: 100%; width: 100%; }

/* ---------- 屏幕容器：手机竖屏 / 平板横屏都居中不拉伸 ---------- */
.screen {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ---------- 关卡壳：顶部自绘返回键（对齐 iOS navigationBarHidden(true)） ---------- */
.lesson-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-s);
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-s)) var(--sp-m) var(--sp-s);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lesson-back {
  width: 44px; height: 44px; flex: none;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--el-rest-color) 0 var(--el-rest-r) var(--el-rest-y);
  font-size: 22px; line-height: 44px; color: var(--footer-ink);
  cursor: pointer; transition: transform var(--mo-tap) ease;
}
.lesson-back.is-pressed { transform: scale(0.9); }
.lesson-title { font-size: 17px; font-weight: 700; }
.lesson-counter {
  margin-left: auto; font-size: 15px; font-weight: 700;
  color: var(--star); background: rgba(255,199,38,0.16);
  padding: 4px 12px; border-radius: var(--r-chip);
}

/* ---------- 进度点（对齐 LessonShell 的阶段点） ---------- */
.stage-dots { display: flex; gap: 6px; padding: 0 var(--sp-m) var(--sp-s); }
.stage-dot {
  height: 7px; flex: 1; border-radius: 4px;
  background: rgba(36,51,88,0.12);
  transition: background var(--mo-quick) ease;
}
.stage-dot.is-done { background: var(--correct); }
.stage-dot.is-now { background: var(--star); }

/* ---------- 通用卡片 / 按钮 ---------- */
.card {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  padding: var(--sp-m);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 var(--sp-l);
  border: none; border-radius: var(--r-button);
  background: var(--nova-outfit); color: #fff;
  font-size: 18px; font-weight: 700;
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease, opacity var(--mo-quick) ease;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.is-pressed { transform: scale(0.94); }
.btn--ghost { background: #fff; color: var(--footer-ink); }
.btn--wide { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-chip);
  background: rgba(255,255,255,0.9);
  font-size: 14px; font-weight: 700;
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}

/* ---------- 大圆钮（对齐 iOS LessonRoundButton 直径 130） ---------- */
.round-btn {
  width: 130px; height: 130px; border: none; border-radius: 50%;
  background: linear-gradient(160deg, #a894f5, #7b62e0);
  color: #fff; font-size: 22px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 var(--el-float-color) var(--el-float-r) var(--el-float-y);
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease;
}
.round-btn.is-pressed { transform: scale(0.93); }

/* ---------- 语音气泡（对齐 SpeechBubble） ---------- */
.bubble {
  position: relative;
  background: #fff; border-radius: var(--r-bubble);
  padding: var(--sp-s) var(--sp-m);
  font-size: 19px; line-height: 1.5; font-weight: 600;
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
}
.bubble::after {
  content: ''; position: absolute; left: 28px; bottom: -11px;
  border: 12px solid transparent; border-top-color: #fff; border-bottom: 0;
}

/* ---------- 语音开关（右上角浮标） ---------- */
.voice-toggle {
  position: fixed; z-index: 60;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  width: 54px; height: 54px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 var(--el-float-color) var(--el-float-r) var(--el-float-y);
  font-size: 24px; cursor: pointer;
}
.voice-toggle.is-off { opacity: 0.5; }

/* ---------- 庆祝层（对齐 CelebrationOverlay，2.4s 后出现） ---------- */
.celebrate {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-m);
  background: linear-gradient(150deg, rgba(250,158,199,0.96), rgba(158,128,242,0.96), rgba(92,173,229,0.96));
  animation: pop var(--mo-enter) cubic-bezier(.2,.9,.3,1.3) both;
}
.celebrate-stars { font-size: 60px; letter-spacing: 8px; }
.celebrate-title { font-size: 28px; font-weight: 800; color: #fff; text-align: center; padding: 0 24px; }
.celebrate-badge {
  font-size: 20px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.22); padding: 12px 24px; border-radius: var(--r-button);
}

/* ---------- 彩屑（对齐 ConfettiBurst） ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i {
  position: absolute; top: -16px; width: 11px; height: 11px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(680deg); opacity: 0; }
}

/* ---------- 飘字特效（答对/答错） ---------- */
.float-word {
  position: fixed; z-index: 75; pointer-events: none;
  font-size: 40px; font-weight: 900;
  animation: floatUp 1.25s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -22px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -88px) scale(1); }
}

/* ---------- 场景背景（对齐 LessonBackdrop 的 27 场景，用渐变近似） ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; }
.backdrop--rainbow  { background: linear-gradient(180deg,#ffd9d9,#fff2e8 58%,#d8f3d0); }
.backdrop--dataCity { background: linear-gradient(180deg,#2e52a8,#5cade5 55%,#dff0ff); }
.backdrop--valley   { background: linear-gradient(180deg,#3b2f7a,#8570e6 55%,#e5dcff); }

/* ---------- 动效（对齐 Motion） ---------- */
@keyframes pop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes floatY {
  0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); }
}
@keyframes breathe {
  0%,100% { transform: scale(1); } 50% { transform: scale(1.07); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,199,38,0); }
  50% { box-shadow: 0 0 0 12px rgba(255,199,38,0.34); }
}
@keyframes shakeX {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); } 60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.is-float { animation: floatY 3.2s ease-in-out infinite; }
.is-breathe { animation: breathe 2.6s ease-in-out infinite; }
.is-spin { animation: spinSlow 7s linear infinite; }
.is-glow { animation: glowPulse 1.7s ease-in-out infinite; }
.is-shake { animation: shakeX 0.5s ease; }

/* ---------- 响应式：平板横屏放大舞台，手机竖屏收紧 ---------- */
@media (min-width: 820px) {
  .lesson-title { font-size: 20px; }
  .bubble { font-size: 22px; }
  .round-btn { width: 150px; height: 150px; font-size: 24px; }
}
@media (max-width: 400px) {
  .round-btn { width: 112px; height: 112px; font-size: 20px; }
  .bubble { font-size: 17px; }
}

/* 横屏矮屏：压缩上下留白 */
@media (orientation: landscape) and (max-height: 520px) {
  .lesson-topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .round-btn { width: 100px; height: 100px; font-size: 18px; }
}