/* ===== 小熊老师算术乐园 · 样式 ===== */

:root {
  --sky-1: #BFEFFF;
  --sky-2: #EAFAFF;
  --grass-1: #A8E063;
  --grass-2: #5FBF3A;
  --card: #FFFFFF;
  --card-warm: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%);
  --ink: #4A3B32;
  --ink-soft: #6E5E52;            /* 加深，保证小字 WCAG AA 对比度 */
  --orange: #FF8A5B;
  --orange-d: #EE6A33;
  --green: #4CD964;
  --green-d: #2FBF4E;
  --blue: #5BC8FF;
  --blue-d: #2FA8E8;
  --yellow: #FFD93D;
  --pink: #FF9FB2;
  --purple: #B39DDB;
  --red: #FF6B6B;
  --radius: 28px;
  --radius-lg: 32px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow: 0 10px 0 rgba(0, 0, 0, .07), 0 14px 28px rgba(0, 0, 0, .12);
  --press: 0 6px 0 rgba(0, 0, 0, .10), 0 10px 18px rgba(0, 0, 0, .12);
  --font: "YouYuan", "Yuanti SC", "HanziPen SC", "PingFang SC", "HarmonyOS Sans SC",
          "HYQiHei", "Microsoft YaHei", "Comic Sans MS", "Baloo 2",
          system-ui, -apple-system, sans-serif;
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;   /* 禁止下拉刷新与橡皮筋，全屏更像原生 App */
}

body {
  position: fixed; inset: 0;   /* 锁死视口：iOS 地址栏伸缩时不会露白、不会跳动 */
  width: 100%; height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, #D9F7C4 100%);
  user-select: none;
  touch-action: manipulation;
}

/* ---------- 背景装饰 ---------- */
.scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.sun {
  position: absolute; top: 4vh; right: 8vw;
  width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF3B0, #FFD93D 70%);
  box-shadow: 0 0 40px rgba(255, 217, 61, .7);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.cloud {
  position: absolute; top: 8vh;
  width: 120px; height: 42px;
  background: #fff; border-radius: 40px; opacity: .95;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.cloud::before { width: 52px; height: 52px; left: 18px; top: -24px; }
.cloud::after  { width: 40px; height: 40px; right: 20px; top: -18px; }
.cloud-1 { left: -140px; animation: drift 46s linear infinite; }
.cloud-2 { left: -180px; top: 20vh; transform: scale(.7); animation: drift 62s linear infinite 6s; }
.cloud-3 { left: -160px; top: 33vh; transform: scale(.5); animation: drift 78s linear infinite 14s; }
@keyframes drift { to { left: 120vw; } }

.hill {
  position: absolute; bottom: 46px; width: 60vw; height: 22vh;
  border-radius: 50% 50% 0 0; background: #8FD75A; opacity: .55;
}
.hill-left  { left: -14vw; }
.hill-right { right: -16vw; width: 52vw; height: 16vh; background: #7ECB4C; }

.grass {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(180deg, var(--grass-1), var(--grass-2));
  border-radius: 40% 40% 0 0 / 22px 22px 0 0;
}

/* ---------- 顶部工具条 ---------- */
.topbar {
  position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top)); right: 14px;
  display: flex; gap: 10px;
}
/* v39：topbar 只在首页显示——其他页面（答题/结算/抽奖/设置/家长/贴纸等）都隐藏，
   避免答题/转盘等"沉浸式"页面右上角被一堆按钮喧宾夺主。显隐在 app.js 的 goTo() 同步切换。 */
.topbar.is-hidden { display: none; }
.round-btn {
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: #fff; font-size: 23px; cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .10), 0 8px 14px rgba(0, 0, 0, .14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.round-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .12); }
.round-btn.small { width: 44px; height: 44px; font-size: 28px; color: var(--ink); }
.round-btn.is-off { opacity: .42; filter: grayscale(1); }
/* 全屏已开启：给个明确的"我在全屏里"状态，不只靠图标猜 */
.round-btn.is-on { background: #E4F5FF; box-shadow: 0 5px 0 var(--blue-d), 0 8px 14px rgba(0, 0, 0, .14); }
.round-btn.is-on > svg { color: var(--blue-d); }

/* ---------- 舞台 & 页面 ---------- */
.stage {
  position: relative; z-index: 10;
  height: 100vh; height: 100dvh;          /* dvh 处理移动端地址栏伸缩，锁死一屏 */
  width: 100vw;                            /* 防横向溢出 */
  display: flex; align-items: stretch; justify-content: center;
  /* v23：padding 完全归零——左/右/上/下都不留白；
        安全区交给各页面内部自己处理（避免预留一整圈空隙） */
  padding: 0;
  overflow: hidden;                        /* 外层不再滚动，长内容交给卡片内部 */
}
/* v22：彻底去掉 .page 的 max-width 限宽——之前 min(1280px, 99vw) 在宽屏会被 1280 卡住，左右永远留 320px+ 白边。现在让 .page 跟 stage 一样宽，.card 再跟着贴满。 */
.page { display: none; width: 100%; height: 100%; position: relative; animation: pop .32s cubic-bezier(.34, 1.56, .64, 1); }
.page.is-active { display: flex; flex-direction: column; overflow: hidden; max-height: 100%; }
/* 左上角返回按钮（所有非首页页面统一位置 + 统一尺寸，quiz 也在 v36 改回 page-back 体系）
   v27：把死贴边的 8/8 拉大到 18/20 — 别跟屏幕刘海/状态栏挤一起，看起来也透气。
   v33：放大到与 topbar 同尺寸（48×48）+ scale(1.15)，字号从 28 升到 32 — 之前 44px base + scale(1.1) 视觉偏小，
         跟右上角 round-btn 比一眼小半圈。
   v36：quiz 页返回按钮从 .round-btn.small 改回 page-back（绝对定位左上角），并给 .quiz-head 加 padding-left 让位。 */
.page-back {
  position: absolute; top: 18px; left: 20px; z-index: 8;
  transform: scale(1.15); transform-origin: top left;
}
.page-back.round-btn.small {
  background: #fff; border: 3px solid #FFE0CC; color: var(--orange-d);
  font-size: 32px; line-height: 1;
  width: 48px; height: 48px; padding: 0;
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

.card {
  flex: 1 1 auto; min-height: 0;            /* 关键：允许卡片内部滚动，外层保持一屏 */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* v23：白色背景 + 边框 + 阴影 + 圆角 全部撤掉——不要"中间贴一块白卡片"的视觉；
        padding 仅保留最小余量（横 10px、纵 12px）防贴边。 */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: clamp(8px, 1.6vh, 14px) clamp(8px, 1.2vw, 12px) !important;
  outline: 3px solid rgba(255, 255, 255, .6);
}

/* H5 单屏：游戏主流程页内容锁死一屏、卡片内部不滚动（绝不出现滚动条）。
   家长/设置/图鉴这类天然长内容页保留 .card 默认的 overflow-y:auto 作为内部滚动兜底。 */
#page-home .card,
#page-level .card,
#page-quiz .card,
#page-result .card,
#page-draw .card {
  overflow: hidden;
}

.card-center {
  text-align: center;
  display: flex; flex-direction: column;
  justify-content: safe center;          /* 内容溢出时回退到顶部，避免裁掉顶边 */
  align-items: center;
}

/* ---------- 首页 ---------- */
.bear-wrap { display: flex; justify-content: center; }
.bubble {
  position: relative; margin: clamp(14px, 2vh, 22px) auto 0; max-width: min(520px, 92%);
  background: #FFF8E7; border: 3px solid #FFE3A8; border-radius: 20px;
  padding: clamp(12px, 1.6vw, 16px) clamp(14px, 1.8vw, 24px); font-size: clamp(15px, 1.8vw, 19px); line-height: 1.6; font-weight: 600;
}
.bubble::before {
  content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom-color: #FFE3A8;
}
.bubble.small {
  margin: 0 0 0 12px; max-width: none; flex: 1; font-size: 16px;
  padding: 10px 14px; text-align: left;
}

.logo {
  margin: clamp(18px, 3vh, 34px) 0 clamp(8px, 1vw, 14px); font-size: clamp(40px, 5.2vw, 56px); letter-spacing: 3px;
  color: var(--orange-d);
  text-shadow: 0 3px 0 #FFE0CC, 0 6px 0 rgba(0, 0, 0, .06);
  animation: logo-bob 2.6s ease-in-out infinite;
}
@keyframes logo-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.logo-sub { margin: 0 0 clamp(16px, 2vh, 32px); color: var(--ink-soft); font-size: clamp(14px, 1.6vw, 18px); font-weight: 600; }

.home-links { display: flex; gap: clamp(10px, 1.4vw, 14px); justify-content: center; margin-top: clamp(16px, 2vh, 28px); flex-wrap: wrap; }
.chip-btn {
  border: 3px solid #FFD9C2; background: #FFF4EC; color: var(--orange-d);
  border-radius: 999px; padding: clamp(10px, 1.3vw, 14px) clamp(18px, 2.2vw, 26px); font-size: clamp(15px, 1.6vw, 19px); font-weight: 800;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 4px 0 rgba(238, 106, 51, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.chip-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(238, 106, 51, .18); }
.home-tip { margin: clamp(16px, 2.4vh, 26px) 0 4px; font-size: clamp(13px, 1.4vw, 15px); color: var(--ink-soft); font-weight: 800; line-height: 1.7; }

/* ---------- 通用大按钮 ---------- */
.big-btn {
  display: block; width: 100%; margin-top: clamp(16px, 2vh, 22px);
  border: none; border-radius: 999px; cursor: pointer;
  padding: clamp(15px, 1.8vw, 18px) clamp(18px, 2.2vw, 24px); font-size: clamp(19px, 2vw, 23px); font-weight: 800; color: #fff;
  font-family: var(--font); letter-spacing: 1px;
  transition: transform .1s ease, filter .2s ease;
}
.big-btn:active { transform: translateY(4px); filter: brightness(.96); }
.btn-orange { background: linear-gradient(180deg, var(--orange), var(--orange-d)); box-shadow: 0 6px 0 var(--orange-d); }
.btn-green  { background: linear-gradient(180deg, #6FE07F, var(--green-d)); box-shadow: 0 6px 0 var(--green-d); }
.btn-blue   { background: linear-gradient(180deg, #7FD6FF, var(--blue-d)); box-shadow: 0 6px 0 var(--blue-d); }
.btn-row { display: flex; gap: clamp(12px, 1.6vw, 16px); }
.btn-row .big-btn { flex: 1; font-size: clamp(17px, 1.9vw, 20px); padding: clamp(13px, 1.6vw, 16px) 10px; }
.big-btn:disabled { filter: grayscale(.8); opacity: .55; cursor: not-allowed; box-shadow: 0 6px 0 rgba(0, 0, 0, .12); }

.ghost-btn {
  border: none; background: transparent; color: var(--ink-soft);
  font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; padding: 12px;
}
.ghost-btn.block { display: block; width: 100%; margin-top: 10px; }
.ghost-btn.danger { color: #E4736B; }

.page-title { margin: clamp(6px, 1vh, 8px) 0 clamp(12px, 1.6vh, 18px); text-align: center; font-size: clamp(22px, 3vw, 30px); color: var(--ink); }
.section-label { margin: clamp(18px, 2.4vh, 26px) 0 clamp(10px, 1.4vw, 14px); font-size: clamp(15px, 1.7vw, 18px); color: var(--ink-soft); text-align: center; }
.hint { text-align: center; color: var(--ink-soft); font-size: clamp(15px, 1.7vw, 17px); margin: 0 0 clamp(14px, 1.8vh, 18px); font-weight: 700; line-height: 1.6; }

/* ---------- 选关 ---------- */
.group-label {
  display: flex; align-items: center; gap: clamp(8px, 1.1vw, 12px); margin: clamp(14px, 2vh, 18px) 0 clamp(8px, 1vw, 12px);
  font-size: 15px; color: var(--ink-soft);
}
.group-label::before, .group-label::after {
  content: ''; flex: 1; height: 2px; background: #FFE7D2; border-radius: 2px;
}
.group-label span { font-weight: 800; color: var(--orange-d); white-space: nowrap; }

/* v41：玩法选择页（mode-card / mode-grid / mode-emoji / mode-name / mode-desc）已删除，6 关改成"今日闯关"页 */
.mode-emoji { font-size: clamp(28px, 4vw, 42px); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .06)); }

/* v25：选玩法页难度 pill 已移除（默认固定 10 以内），.range-row 样式不再使用。.pill 仍在 settings 页用，保留 */
.pill {
  border: 3px solid #D9EEFF; background: #F3FAFF; border-radius: 999px;
  padding: clamp(11px, 1.4vw, 14px) clamp(20px, 2.4vw, 28px); font-size: clamp(15px, 1.6vw, 18px); font-weight: 800; cursor: pointer;
  font-family: var(--font); color: var(--ink-soft);
  box-shadow: 0 4px 0 rgba(47, 168, 232, .14);
  transition: transform .12s ease, box-shadow .12s ease, border-color .2s ease, background .2s ease;
}
.pill:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(47, 168, 232, .14); }
.pill.is-on { border-color: var(--blue); background: #E4F5FF; color: var(--blue-d); transform: translateY(-2px); }
/* v54：危险/次要 pill + 重置密码输入框 */
.pill-danger { border-color: #FFC4BA; background: #FFF1EE; color: #E2604F; box-shadow: 0 4px 0 rgba(226, 96, 79, .16); }
.pill-danger:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(226, 96, 79, .16); }
.pill-ghost { border-color: #E3E8ED; background: #F4F6F8; color: var(--ink-soft); box-shadow: 0 4px 0 rgba(120, 130, 140, .12); }
.pill-ghost:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(120, 130, 140, .12); }
/* v54：重置成功模态主按钮 + emoji + 标题居中（无关闭按钮，去掉默认右边距） */
.pill-primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 4px 0 rgba(47, 168, 232, .3); }
.pill-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(47, 168, 232, .3); }
.reset-success-emoji { font-size: clamp(48px, 8vw, 72px); text-align: center; line-height: 1; margin-bottom: 6px; }
#reset-success-modal .page-title { padding-right: 0; }
#reset-success-modal .modal-hint { margin-bottom: 18px; }
.reset-box { margin-top: 12px; padding: clamp(12px, 1.6vw, 16px); background: #FFF8F6; border: 2px dashed #FFD9D1; border-radius: 16px; }
.reset-pwd {
  width: clamp(120px, 32vw, 180px);
  padding: clamp(9px, 1.2vw, 12px) clamp(14px, 1.8vw, 18px);
  font-size: clamp(16px, 1.7vw, 19px); font-family: var(--font); font-weight: 800;
  border: 3px solid #FFD1A3; border-radius: 999px; text-align: center; letter-spacing: 4px;
  outline: none; color: var(--ink);
}
.reset-pwd:focus { border-color: var(--orange); }
.reset-pwd::placeholder { letter-spacing: 0; color: #C9B6A6; font-weight: 700; }
.reset-err { color: #E2604F !important; margin: 10px 0 0 !important; font-weight: 800; }

/* ---------- 答题页 ---------- */
.quiz-head {
  display: flex; align-items: center; gap: clamp(8px, 1.1vw, 12px); margin-bottom: clamp(12px, 1.6vh, 18px);
  /* v53：返回按钮绝对定位在 top:18px、高约55px，垂直中心≈45px；
     把进度条 padding-top 推到 40px，使其行中心(~46px)与返回按钮上下居中对齐 */
  padding: 40px 4px 0;
  /* v36：quiz 页返回按钮改成 page-back（绝对定位左上角），给左侧预留位置避免 progress 被挡 */
  padding-left: clamp(64px, 5.6vw, 86px);
  flex: none;                            /* 答题头不压缩，下方卡片占满剩余 */
}
.progress { flex: 1; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }   /* v66：圆点放大后 gap 同步放宽 */
.dot {
  width: 50px; height: 42px; border-radius: 8px; background: #fff;   /* v66 基础 50×25；v82 加高到 42 让交错脚印落在踏脚石内不外溢 */
  border: 2px solid #CFE8F5; transition: all .25s ease;
}
.dot.now { transform: scale(1.08); border-color: var(--orange); background: #FFF0E0; }    /* v66：缩放系数微调，避免溢出 */
.dot.right { background: var(--yellow); border-color: #EFC020; box-shadow: 0 0 8px rgba(255, 217, 61, .8); }
.dot.wrong { background: #F3D6D4; border-color: #E9B7B3; }

.quiz-card { padding: clamp(14px, 2vw, 26px) clamp(14px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; }
.teacher-row { display: flex; align-items: center; margin-bottom: clamp(12px, 1.6vh, 18px); }
.small-bear { width: clamp(70px, 9vw, 92px); height: clamp(70px, 9vw, 92px); flex: none; }

/* 答题页小喇叭：点击再读一遍当前题目
   ★ 尺寸：36~46px 对小朋友的手指太窄了（Apple HIG 44pt / Material 48dp 是下限，
     而且孩子手指的落点比成人散得多）。改成 52~72px，并加 touch-action: manipulation
     去掉移动端的双击缩放等待 —— 两个一起才是真的"好点"。
   ★ 放大不会撑高这一行：同一个 .teacher-row 里的小熊是 70~92px，永远比按钮高，
     行高由小熊决定，所以按钮从 46 长到 72 也不会把答题卡挤下去。 */
.voice-btn {
  flex: none; margin-left: 10px;
  width: clamp(52px, 7.2vw, 72px); height: clamp(52px, 7.2vw, 72px);
  border: 3px solid #FFD9A8; background: #FFF4E0;
  color: #E8932A; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  /* ★ 必须显式 padding:0：Chrome 对 <button> 有 UA 默认 padding（1px 6px），
     那 12px 横向内边距先吃掉内容盒，76% 的图标会被再缩一圈（52px 按钮里只剩 26px）。
     inline-flex + 居中本来就够，不需要任何内边距。 */
  padding: 0;
  box-shadow: 0 3px 0 rgba(232, 147, 42, .18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: voice-pulse 2.6s ease-in-out infinite;
}
.voice-btn:hover { background: #FFEAC8; transform: translateY(-1px); box-shadow: 0 4px 0 rgba(232, 147, 42, .22); }
.voice-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(232, 147, 42, .22); }
.voice-btn:focus-visible { outline: 3px solid #5BA8FF; outline-offset: 2px; }
.voice-btn.is-off { opacity: .45; animation: none; cursor: not-allowed; }
.voice-btn.is-speaking { background: #FFE0A8; }
/* 图标占按钮 76%：新图标自带描边和四周留白，比原来的单色字形要占得满一点才不显小 */
.voice-btn svg { width: 76%; height: 76%; display: block; }
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 3px 0 rgba(232, 147, 42, .18), 0 0 0 0 rgba(255, 200, 120, .55); }
  50%      { box-shadow: 0 3px 0 rgba(232, 147, 42, .18), 0 0 0 12px rgba(255, 200, 120, 0); }
}

.scene-tag {
  text-align: center;
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; color: var(--ink-soft);
  background: #FFF6E8; border-radius: 999px;
  padding: 8px 20px; margin: 0 auto clamp(16px, 2vh, 22px);
  display: inline-block; width: auto;
}

/* 图形计数区
   v80：align-content:center —— 容器万一被撑高（iPad Safari 实测会），多行/单行内容
   在虚线框内垂直居中，不再贴底 */
.shapes {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px;
  flex: 0 1 auto; min-height: 0;          /* 高度紧张时图形区可收缩，不撑爆卡片 */
  margin: 0 auto clamp(18px, 2vh, 26px); max-width: 640px;
  padding: 18px 14px; background: #FBFDFF; border: 3px dashed #DCEFF9; border-radius: 22px;
}
.shape { width: clamp(42px, 9vw, 56px); height: clamp(42px, 9vw, 56px); position: relative; animation: drop .35s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.shape svg { width: 100%; height: 100%; display: block; }
/* v68：算式题（加/减）图形初始先"藏起来"——孩子先思考，答题后才"揭晓"；
   animation:none 避免 .shape 自带的 drop 关键帧在 is-pending 状态下"砰一下又消失"；
   transition 负责答题后的"淡入 + 放大"长出动画。 */
.shape.is-pending {
  opacity: 0;
  transform: scale(.3);
  animation: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.shape.taken { opacity: .3; filter: grayscale(1); }
.shape.taken::after {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(to top left, transparent 45%, #FF5A5F 45%, #FF5A5F 55%, transparent 55%);
  border-radius: 8px;
}
.shape.pop { animation: bump .5s ease; }
.shape-sep { width: 14px; }

/* 分一分：还有一个问号框 */
.ask-box {
  width: clamp(54px, 15vw, 90px); height: clamp(30px, 8vw, 44px);
  border: 3px dashed var(--orange); border-radius: 14px; background: #FFF6EC;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: var(--orange);
  animation: blinkBox 1.6s ease-in-out infinite;
}
@keyframes blinkBox { 50% { background: #FFEEDA; } }

/* 凑十：十个格子 */
.slot {
  width: clamp(26px, 7vw, 38px); height: clamp(26px, 7vw, 38px);
  border: 3px dashed #CFE8F5; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  animation: drop .35s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.slot.filled { border: 3px solid #FFD98A; background: #FFF8E7; }
.slot svg { width: 78%; height: 78%; display: block; }

/* 凑十：2×5 矩阵布局（上下各 5 格），开局显示前几个、答对后填满剩余
   v80：justify-content 让格子群在框内垂直居中——iPad Safari 上 #shapes 被撑高时
   内容会贴底（框顶空出一大截），显式居中后两端表现一致 */
.ten-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vw, 12px); }
.ten-row { display: flex; gap: clamp(6px, 1.4vw, 12px); }

/* 比多少：左右两边 */
.side {
  flex: 1; display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; align-content: flex-start;
  padding: 8px 6px; border-radius: 16px; min-width: 0;
}
.side.left { background: #FFF6E8; }
.side.right { background: #EAF7FF; }
.side .shape { width: clamp(34px, 7.6vw, 50px); height: clamp(34px, 7.6vw, 50px); }    /* v67：比一比图形放大（20×30 → 34×50），与全局 .shape 视觉一致 */
.side-tag {
  width: 100%; text-align: center; margin-top: 4px;
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
}
.vs { flex: none; font-size: 17px; font-weight: 900; color: var(--orange); }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bump { 50% { transform: scale(1.25) rotate(-6deg); } }

/* 算式 */
.question {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex: 0 0 auto;                         /* 算式固定高度，不随内容挤压 */
  font-size: clamp(40px, 6vw + 1.8vh, 80px); font-weight: 900; margin: clamp(12px, 1.4vh, 18px) 0 clamp(22px, 2.6vh, 32px);
}
.question .num { min-width: 58px; text-align: center; color: var(--ink); }
.question .op { color: var(--orange); }
.question .q-mark { color: var(--blue-d); animation: qpulse 1.5s ease-in-out infinite; text-shadow: 0 4px 0 #E4F5FF; }
@keyframes qpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(-5deg); } }
.question.solved .q-mark { color: var(--green-d); animation: none; }
.question .q-word {
  font-size: clamp(22px, 3.6vw, 30px); color: var(--ink); font-weight: 800;
}

/* 选项 */
.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 18px);
  flex: 1 1 auto; min-height: 0; align-content: end;
  /* v59b：彻底撤销 v57/v58 的 translateY/margin-top 视觉位移——那种位移只挪动元素本身，
     不改变 quiz-card 内 flex 留下的空白，结果就是按钮浮在中段、下方仍是草地的空白挤在一起。
     改用 .options 自己的 padding-bottom + align-content:end，按钮自然贴 quiz-card 底部对齐，
     留白靠 .quiz-card 距屏幕底部的 padding 撑开，不挤压草地。 */
  padding-bottom: clamp(32px, 4vh, 56px);   /* v60b：通用加大底留白 */
}
.options.cols-3 { grid-template-columns: repeat(3, 1fr); }
.options.cols-3 .opt { font-size: clamp(16px, 3vw, 22px); padding: clamp(18px, 2.2vw, 22px) 2px; }
.opt {
  border: 4px solid #DCEFF9; background: #F7FCFF; border-radius: 24px;
  /* v80：flex 居中——iPad Safari 上按钮被撑高时数字会沉到按钮底部（截图实测），
     显式 flex + align-items:center 保证数字在按钮内永远垂直居中 */
  display: flex; align-items: center; justify-content: center; line-height: 1.2;
  padding: clamp(14px, 2.2vw, 24px) 8px; font-size: clamp(28px, 4vw + 1vh, 40px); font-weight: 900; color: var(--blue-d);
  font-family: var(--font); cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .07); transition: transform .12s ease, box-shadow .12s ease;
  min-height: 0;
}
.opt:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .07); }
.opt.correct {
  background: linear-gradient(180deg, #F1FFF3, #E2FBE6); border-color: var(--green); color: var(--green-d);
  animation: pop-correct .55s var(--spring);
  box-shadow: 0 0 0 4px rgba(76, 217, 100, .25), 0 6px 0 rgba(47, 191, 78, .4);
}
.opt.wrong { background: #FFEDED; border-color: #FFB3B3; color: #E4736B; animation: shake .45s ease; }
.opt:disabled { cursor: default; }
@keyframes pop-correct { 0% { transform: scale(.86); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

/* ---------- 结算 ---------- */
.result-title { margin: clamp(10px, 1.4vh, 14px) 0 clamp(4px, 0.6vh, 8px); font-size: clamp(24px, 3vw, 32px); color: var(--orange-d); }
.sticker-prize { background: #FFF8E7; border: 3px dashed #FFD98A; border-radius: 20px; padding: 14px; margin-bottom: 16px; }
/* 贴纸位的盒子固定成方块：里面装的是 AI 插画（delight.js upgradePrize 塞进来的 .sticker-wrap）。
   font-size 只为兜底 —— 出现不认识的 emoji 时仍按 emoji 显示，不会变成一个看不见的小点。 */
.sticker-new { width: clamp(96px, 11vw, 120px); height: clamp(96px, 11vw, 120px); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: clamp(40px, 5vw, 56px); animation: spin-in .7s cubic-bezier(.34, 1.56, .64, 1); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.sticker-new:active, .sticker-new.tap { transform: scale(1.18); }
.sticker-new:focus-visible { outline: 3px solid #FFB347; outline-offset: 4px; border-radius: 14px; }
@keyframes spin-in { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }

/* 结算页：三颗评价星（此前缺样式，已补齐） */
.grade-box { margin-top: 2px; }
.grade-stars { display: flex; justify-content: center; gap: clamp(5px, 0.7vw, 8px); font-size: clamp(34px, 4vw, 46px); line-height: 1; margin: clamp(4px, 0.6vh, 6px) 0 clamp(6px, 0.8vh, 10px); }
.grade-star { color: #E8E2D6; }
.grade-star.on {
  color: #FFC83D; text-shadow: 0 3px 0 #FFE08A, 0 6px 10px rgba(255, 200, 61, .4);
  animation: star-pop .5s var(--spring) backwards;
}
@keyframes star-pop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.grade-meta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.grade-item b { color: var(--ink); font-size: 19px; }
.grade-item.star-coin b { color: var(--orange-d); }
.unlock-tip {
  margin: 10px 0 2px; padding: 10px 12px; background: #EAF7FF;
  border: 3px dashed var(--blue); border-radius: 16px;
  font-size: 15px; font-weight: 800; color: var(--blue-d);
  animation: drop .4s var(--spring) backwards;
}

/* ---------- 贴纸板 ---------- */
/* v100：.sticker-board / .sticker-cell 随「最近获得的」模块一并移除 */
.empty-tip { text-align: center; color: var(--ink-soft); font-size: 15px; line-height: 1.8; padding: 24px 0; }

/* ---------- 家长页 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 14px); margin-bottom: 6px; }
.stat-box { background: #F5FBFF; border-radius: 18px; padding: clamp(12px, 1.6vw, 16px) 6px; text-align: center; }
.stat-num { font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; color: var(--blue-d); }
.stat-lab { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.wrong-list { max-height: 32vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.wrong-item {
  display: flex; justify-content: space-between; align-items: center;
  background: #FFF6F5; border-radius: 14px; padding: 10px 14px; font-size: 16px; font-weight: 700;
}
.wrong-item .ans { color: var(--green-d); }
.wrong-item .picked { color: #E4736B; font-size: 14px; text-decoration: line-through; }

/* ---------- 设置页 ---------- */
.set-row { display: flex; gap: clamp(10px, 1.4vw, 12px); justify-content: center; flex-wrap: wrap; }
.set-row .pill { padding: clamp(9px, 1.2vw, 12px) clamp(14px, 1.8vw, 18px); font-size: clamp(14px, 1.5vw, 16px); }

/* ---------- 撒花 / 飘字 ---------- */
.confetti-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -24px; font-size: 22px; animation: fall linear forwards; }
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .1; }
}

.float-msg {
  position: absolute; left: 50%; top: 40%; white-space: nowrap;
  font-size: clamp(26px, 7vw, 38px); font-weight: 900; color: var(--orange-d);
  text-shadow: 0 3px 0 #fff, 0 8px 16px rgba(0, 0, 0, .18);
  animation: floatUp 1.7s ease forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  65%  { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(.9); }
}

/* ---------- 小熊 ---------- */
.bear { width: clamp(108px, 13vw, 150px); height: clamp(108px, 13vw, 150px); }
.bear svg { width: 100%; height: 100%; display: block; }
.bear-wrap .bear { animation: bob 3s ease-in-out infinite; }
.bear.happy { animation: jump .6s ease infinite alternate; }
@keyframes jump { to { transform: translateY(-8px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }

/* ---------- 首页徽章 ---------- */
.home-badges { display: flex; gap: clamp(8px, 1.1vw, 14px); justify-content: center; margin-top: clamp(22px, 2.6vh, 34px); margin-bottom: clamp(6px, .8vh, 12px); flex-wrap: wrap; }
.badge {
  background: #FFF4EC; border: 2px solid #FFE0CC; color: var(--orange-d);
  border-radius: 999px; padding: clamp(6px, 0.8vw, 8px) clamp(14px, 1.8vw, 20px); font-size: clamp(15px, 1.5vw, 18px); font-weight: 800;
}

/* ---------- 今日关卡页（v41：6 关固定横向卡片 + emoji + 难度标签） ---------- */
/* v59 修订：宽屏下用 max-width 限制 grid 宽度，避免 6 个卡挤成一行；同时把卡片垂直居中，不再顶部贴边 */
.level-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin: 0 auto clamp(14px, 1.8vh, 22px);       /* 居中：上下间距保留，左右 auto 吃满剩余空间 */
  max-width: 920px;                              /* 限制总宽：约 3 列卡（260×3+16×2+padding≈ 880px） */
  width: 100%;
}
/* v59：让关卡页的内容整体垂直居中，避免 6 个卡片挤在顶部、下面一大片空白 */
#page-level .card {
  display: flex;
  flex-direction: column;
  justify-content: center;          /* 整体垂直居中 */
  align-items: center;                /* 标题/提示等块级元素居中 */
  text-align: center;
  gap: clamp(6px, .8vh, 10px);
}
#page-level .page-title,
#page-level .hint,
#page-level .level-footer { text-align: center; width: 100%; }
/* 关卡卡 grid 自己撑满（用 width:100% + max-width 配合左右 auto） */
#page-level .level-list { width: 100%; }
.level-card {
  display: flex; flex-direction: row; align-items: center; gap: clamp(10px, 1.2vw, 14px); text-align: left;
  border: 4px solid #FFE7D2; background: #FFF9F4; border-radius: 22px;
  padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 18px); cursor: pointer; font-family: var(--font); color: var(--ink);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .07);
  transition: transform .14s ease, border-color .2s ease, background .2s ease, box-shadow .14s ease;
}
.level-card.lv-tone-easy { border-color: #CDEBD0; background: #F2FBF1; }     /* 简单：浅绿 */
.level-card.lv-tone-mid { border-color: #FFD2A8; background: #FFF4EA; }
.level-card.lv-tone-hard { border-color: #FFB177; background: #FFE9D6; }
.level-card.lv-tone-hardest { border-color: #FF8E8E; background: #FFE0E0; }   /* 最难：浅红 */
.level-card.is-clear { box-shadow: 0 6px 0 rgba(76, 217, 100, .35), 0 0 0 3px rgba(76, 217, 100, .18); border-color: #8AD78F; }
.level-card:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .07); }
.level-card .lv-emoji {
  flex: 0 0 auto;
  font-size: clamp(34px, 4vw, 44px); line-height: 1;
  width: clamp(54px, 5.5vw, 64px); height: clamp(54px, 5.5vw, 64px);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 18px; box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
}
.level-card .lv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.level-card .lv-name {
  font-size: clamp(15px, 1.6vw, 18px); font-weight: 900; min-width: 0;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.level-card .lv-diff {
  display: inline-block; align-self: flex-start;
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 800;
  padding: 2px 10px; border-radius: 999px;
  background: #FFF1E0; color: var(--orange-d);
}
.level-card .lv-diff-easy { background: #E8F8E5; color: #2E8C36; }       /* 简单：绿色 */
.level-card .lv-diff-mid  { background: #FFF1E0; color: var(--orange-d); } /* 稍难：橙色 */
.level-card .lv-diff-hard { background: #FDDCDF; color: #C9334E; }     /* 较难：红色 */
.level-card .lv-diff-hardest { background: #FCD3D3; color: #B81E1E; }  /* 最难：深红 */
.level-card .lv-meta {
  display: flex; align-items: center; gap: clamp(8px, 1vw, 12px); margin-top: 4px;
  flex-wrap: wrap;
}
.level-card .lv-stars { font-size: clamp(18px, 2vw, 22px); color: #F0B429; letter-spacing: 2px; flex: 0 1 auto; }
/* v76：关卡卡上的「📕 再练 N」错题标记——有记住的错题时高亮提示，点卡片即进入错题练习 */
.level-card .lv-wrong {
  font-size: clamp(11px, 1.4vw, 13px); font-weight: 800; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
  background: #FFE9E9; color: #C9334E; border: 2px solid #FFB3B3;
  white-space: nowrap;
}
.level-card.has-wrong { box-shadow: 0 6px 0 rgba(201, 51, 78, .28), 0 0 0 3px rgba(201, 51, 78, .16); border-color: #FF9AA8; }
.level-card.has-wrong:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .07); }
.level-card.locked { filter: grayscale(.85); opacity: .55; cursor: not-allowed; }
.level-card.locked:active { transform: none; }
.level-card.locked .lv-stars { color: var(--ink-soft); }
/* v64b：轮次分页器 —— 下一轮「预览」置灰卡（比普通 locked 更灰，明确表达"还没解锁"） */
.level-card.is-preview { filter: grayscale(1); opacity: .42; cursor: not-allowed; }
.level-card.is-preview:active { transform: none; }
.level-card.is-preview .lv-stars { color: var(--ink-soft); }
.level-card.is-preview .lv-name::after { content: ' · 未解锁'; color: #B0B8C0; font-weight: 800; }

/* v64b：轮次左右切换器（分页器） */
.round-switcher {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 18px);
  margin: 4px auto clamp(12px, 1.6vh, 20px); width: 100%; max-width: 520px;
}
.round-nav {
  flex: 0 0 auto;
  width: clamp(44px, 6vw, 56px); height: clamp(44px, 6vw, 56px);
  border: 3px solid #FFD2A8; background: #FFF6EC; color: var(--orange-d);
  border-radius: 50%; font-size: clamp(24px, 3vw, 30px); font-weight: 900; line-height: 1;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 4px 0 rgba(255, 158, 92, .35);
  transition: transform .12s ease, background .2s ease, box-shadow .12s ease, opacity .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.round-nav:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255, 158, 92, .35); }
.round-nav:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }
.round-label {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: clamp(17px, 2vw, 22px); font-weight: 900; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.level-footer { margin-top: 14px; text-align: center; color: var(--orange-d); font-weight: 800; }

/* ---------- 紫色大按钮（抽奖用） ---------- */
.btn-purple { background: linear-gradient(180deg, #B39DDB, #8E6FD6); box-shadow: 0 6px 0 #7A5BC4; }
/* 够格转大奖时，按钮变成金色，跟大奖转盘呼应 */
.btn-gold {
  background: linear-gradient(180deg, #FFD54F, #FFA000) !important;
  box-shadow: 0 6px 0 #D98800 !important;
  color: #5A3A00 !important;
}

/* ---------- 结算页：抽奖券提示 ---------- */
.ticket-earned {
  margin: 12px auto 0; background: #EAF7FF; border: 3px dashed var(--blue);
  border-radius: 16px; padding: 10px 12px; font-size: 15px; font-weight: 800; color: var(--blue-d);
}
.ticket-progress { margin: 10px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
/* 攒够 5 张、够格抽大奖时，这条提示换成金色，是个明确的大目标达成信号 */
.ticket-earned.is-big {
  background: linear-gradient(180deg, #FFF6D8, #FFEFC0);
  border-color: #FFB300; color: #A56A00;
  animation: drop .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 幸运大转盘 ---------- */
.ticket-box {
  display: flex; justify-content: center; gap: 16px; margin-bottom: 14px;
  background: #FFF4EC; border-radius: 16px; padding: 10px 14px; font-weight: 800; color: var(--orange-d);
}
.ticket-box b { font-size: 20px; }
.ticket-stars { color: var(--ink-soft); }

/* v75：星币→抽奖券进度条（放在 ticket-box 下方） */
.draw-star-progress {
  width: min(100%, 420px);
  margin: 0 0 14px;
}
.draw-star-progress .dsp-track {
  height: 14px;
  border-radius: 999px;
  background: #F0E6DC;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
.draw-star-progress .dsp-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFD93D, #FF8A5B);
  transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.draw-star-progress .dsp-text {
  text-align: center;
  margin: 6px 0 0;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 800;
  color: var(--ink-soft);
  line-height: 1.4;
}
.draw-star-progress .dsp-text b { color: var(--orange-d); }

/* ---------- 两档转盘 Tab（🎈小奖 1 券 / 🏆大奖 5 券） ---------- */
.draw-tabs { display: flex; gap: 10px; justify-content: center; margin: 4px 0 14px; }
.draw-tab {
  flex: 1; max-width: 165px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px 9px; border: 3px solid #FFE0CC; border-radius: 18px;
  background: #FFF8F3; color: var(--orange-d);
  font-family: inherit; font-weight: 900;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, border-color .18s;
}
.draw-tab .tab-emoji { font-size: clamp(20px, 2.4vw, 28px); line-height: 1; }
.draw-tab .tab-name { font-size: clamp(14px, 1.6vw, 17px); }
.draw-tab .tab-cost {
  font-size: clamp(10px, 1.1vw, 13px); font-weight: 800; color: #fff; background: var(--orange);
  border-radius: 999px; padding: 1px 9px;
}
.draw-tab:active { transform: scale(.95); }
.draw-tab.is-on {
  border-color: var(--orange); background: #fff;
  box-shadow: 0 5px 14px rgba(255, 138, 91, .3);
  transform: translateY(-2px);
}
/* 大奖 Tab：金色皮肤 */
.draw-tab[data-tier="5"] { color: #B8860B; border-color: #FFE9A8; background: #FFFDF2; }
.draw-tab[data-tier="5"] .tab-cost { background: linear-gradient(180deg, #FFD54F, #FFA000); }
.draw-tab[data-tier="5"].is-on {
  border-color: #FFB300; box-shadow: 0 5px 14px rgba(255, 179, 0, .38);
}
/* 券不够的那一档：灰一点 + 锁，但不禁用——让孩子看得见目标 */
.draw-tab.is-locked { opacity: .62; filter: saturate(.65); }
.draw-tab.is-locked .tab-emoji { filter: grayscale(.5); }

/* v28：转盘页改 flex 列，圆盘占满中间剩余空间 → 直径 = min(剩余高, 剩余宽) */
#page-draw .card {
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;                              /* 关掉页面级滚动，让 wheel 自己管 */
}
#page-draw .wheel-outer {
  flex: 1 1 auto; min-height: 0;                 /* 吃掉 tabs/提示/按钮 留下的所有空间 */
  width: 100%; max-width: 100%;
  margin: clamp(2px, .6vh, 8px) 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;                               /* v32：去掉按钮后，整张转盘都是"按一下就转" */
  -webkit-tap-highlight-color: transparent;       /* 去掉移动端点击高亮 */
  user-select: none;
  touch-action: manipulation;
}
#page-draw .wheel-outer:active .wheel-frame { transform: scale(.985); transition: transform .15s ease; }
#page-draw .wheel-outer.is-locked { cursor: not-allowed; }    /* 券不够时显式禁用光标 */
/* 圆盘 frame：吃满父宽的同时按 max-size 上限收口，超出部分通过 aspect-ratio 推 height，剩余空间靠 margin:auto 上下居中。
   v34：加 max-size 上限 — 之前 height:100% 没上限，桌面宽屏 wheel-outer flex:1 会把 wheel-frame 撑到 500+px，
        把上方 tabs、下方 draw-tip 全压到看不见。clamp 让手机竖屏最低 320，横屏/桌面收口 ~420。*/
.wheel-frame {
  position: relative;
  width: min(100%, clamp(320px, 42vh, 420px));    /* v34：width 由父宽与上限的较小者决定，aspect-ratio 推 height */
  aspect-ratio: 1 / 1;                            /* 强制正方形 */
  margin: auto;                                   /* v34：wheel-outer 内垂直居中，上下多余空间均分 */
}
/* frame 内子元素继续吃满 frame（继承 .wheel-outer 时的相对关系） */
.wheel-frame > #wheel-wrap,
.wheel-frame > .wheel-pointer,
.wheel-frame > .wheel-center,
.wheel-frame > .wheel-lock { position: absolute; }
.wheel-frame > #wheel-wrap    { inset: 0; width: 100%; height: 100%; }
.wheel-frame > .wheel-pointer { top: -10px; left: 50%; transform: translateX(-50%); }
.wheel-frame > .wheel-center  { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wheel-frame > .wheel-lock    { inset: 0; }

/* 大奖转盘：金色外圈 + 柔光，一眼看出"这一盘更值钱" */
.wheel-outer.is-big #wheel-wrap {
  box-shadow: 0 0 0 8px #fff, 0 0 0 12px #FFD54F, 0 10px 26px rgba(255, 160, 0, .45);
}
.wheel-outer.is-big .wheel-center {
  color: #B8860B; font-size: 17px;
  box-shadow: 0 0 0 4px #FFE9A8, 0 2px 8px rgba(0, 0, 0, .18);
  animation: gold-pulse 1.8s ease-in-out infinite;
}
@keyframes gold-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}

/* 券不够时盖在转盘上的锁 */
.wheel-lock {
  position: absolute; inset: 0; z-index: 7; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px);
  animation: lock-in .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* BugFix v12：防止 CSS display:flex 屏蔽 HTML hidden —— 券够时真正隐藏转盘锁 */
.wheel-lock[hidden] { display: none !important; }
.wheel-lock .lock-inner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 3px dashed var(--orange); border-radius: 20px;
  padding: 12px 18px; font-weight: 900; color: var(--orange-d); font-size: 15px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}
.wheel-lock .lock-icon { font-size: 34px; line-height: 1; animation: lock-wiggle 2.2s ease-in-out infinite; }
@keyframes lock-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lock-wiggle {
  0%, 72%, 100% { transform: rotate(0); }
  78% { transform: rotate(-9deg); }
  86% { transform: rotate(9deg); }
  94% { transform: rotate(-5deg); }
}

/* 转盘下方的一句话提示 */
.draw-tip {
  margin: 0 0 clamp(10px, 1.3vh, 14px); font-size: clamp(13px, 1.5vw, 16px); font-weight: 700; color: var(--ink-soft);
  min-height: 20px; line-height: 1.5;
}
.draw-tip b { color: var(--orange-d); font-size: 16px; }

/* 换盘时的"唰"一下 */
.wheel-swap { animation: wheel-swap .42s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes wheel-swap {
  0%   { opacity: .25; }
  100% { opacity: 1; }
}

/* 这一档一个奖励都没有时 */
.wheel-empty {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; font-size: 14px; font-weight: 800; color: #9AA5B1; line-height: 1.6;
}
.wheel-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent;
  border-top: 30px solid var(--orange-d); z-index: 6; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
}
#wheel-wrap {
  width: 100%; height: 100%; border-radius: 50%;
  transition: transform 3.7s cubic-bezier(.16, .7, .27, 1);
  box-shadow: 0 0 0 8px #fff, 0 8px 22px rgba(0, 0, 0, .18);
}
#wheel { width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden; }
#wheel-labels { position: absolute; inset: 0; }
.wheel-label { position: absolute; left: 50%; top: 0; height: 50%; width: 0; transform-origin: bottom center; }
.wheel-label-inner {
  position: absolute; top: 26px; left: -50px; width: 100px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center;
}
.wheel-label-inner .lbl-emoji {
  font-size: 38px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.wheel-label-inner .lbl-name {
  font-size: 10px; font-weight: 800;
  color: #fff; letter-spacing: .5px;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .55),
     1px -1px 0 rgba(0, 0, 0, .55),
    -1px  1px 0 rgba(0, 0, 0, .55),
     1px  1px 0 rgba(0, 0, 0, .55),
     0 0 2px rgba(0, 0, 0, .35);
}
.wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: var(--orange-d); font-size: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2); z-index: 5;
}
.draw-result.is-big {
  background: linear-gradient(180deg, #FFF6D8, #FFEFC0);
  border-color: #FFB300; color: #A56A00;
  font-size: 18px;
  animation: drop .4s cubic-bezier(.34, 1.56, .64, 1) backwards, big-glow 1.4s ease-in-out .4s infinite;
}
@keyframes big-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, .35); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 179, 0, 0); }
}
.won-list { max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.won-list.in-modal { max-height: none; flex: 1 1 auto; min-height: 0; }
.won-item {
  display: flex; align-items: center; gap: 12px; background: #FFF6F0;
  border-radius: 14px; padding: 10px 14px; font-size: 16px; font-weight: 700;
  cursor: pointer; user-select: none; transition: transform .12s, background .2s;
}
.won-item:active { transform: scale(.97); }
.won-item.is-redeemed {
  background: #EFEFEF; opacity: .68; cursor: default;
}
.won-item.is-redeemed:active { transform: none; }   /* v55：已置换不再有按压反馈 */
.won-item.is-redeemed .won-name { text-decoration: line-through; color: #999; }
.won-item .won-mark {
  flex: none; font-size: 12px; font-weight: 900; color: #FF8A5B;
  background: #fff; border: 2px solid #FFE0B2; border-radius: 999px; padding: 2px 8px;
}
.won-item.is-redeemed .won-mark {
  background: var(--green-d); color: #fff; border-color: var(--green-d);
}
.won-emoji { font-size: 26px; }
.won-name { color: var(--ink); flex: 1; text-align: left; }
.won-badge { font-size: 18px; flex: none; }
.won-item.won-big {
  background: linear-gradient(90deg, #FFF6D8, #FFFDF2);
  box-shadow: inset 0 0 0 2px #FFE9A8;
}
.won-item.is-redeemed.won-big { opacity: .55; }

/* ---------- 抽到的奖励 modal（v28） ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(40, 80, 120, .42);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vh, 28px);
  animation: mask-fade .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.modal-mask[hidden] { display: none !important; }
@keyframes mask-fade { from { opacity: 0; } }
.modal-card {
  position: relative;
  width: min(94vw, 480px);
  max-height: min(82vh, 600px);
  background: linear-gradient(180deg, #FFFDF6 0%, #FFF6E8 100%);
  border: 4px solid #FFE0B2; border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  padding: 22px 18px 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modal-pop .26s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.modal-card .page-title { margin: 0 0 4px; padding-right: 36px; }
.modal-hint {
  margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; font-weight: 700;
}
.modal-card .modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
}
.modal-card .won-list { margin: 0; padding: 0 2px; }

/* ---------- 奖励清单（设置页，分两档） ---------- */
.prize-pool { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.1vw, 10px); justify-content: center; margin-bottom: 6px; }
.prize-chip {
  background: #FFF4EC; border: 2px solid #FFE0CC; border-radius: 999px;
  padding: clamp(6px, 0.8vw, 8px) clamp(14px, 1.8vw, 18px); font-size: clamp(13px, 1.4vw, 16px); font-weight: 700; color: var(--orange-d);
}
.prize-chip.is-big {
  background: linear-gradient(180deg, #FFF6D8, #FFEFCE); border-color: #FFD54F; color: #A56A00;
}
.prize-empty { font-size: 13px; font-weight: 700; color: #9AA5B1; padding: 4px 2px; }
.prize-group-title {
  margin: clamp(12px, 1.6vh, 14px) 0 clamp(8px, 1vh, 10px); font-size: clamp(13px, 1.5vw, 16px); font-weight: 800; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.prize-group-title.is-big { color: #A56A00; }

/* ================= 趣味增强：贴纸收集图鉴 ================= */
.album-head {
  display: flex; align-items: center; gap: clamp(8px, 1.1vw, 14px);
  margin: 0 0 clamp(12px, 1.6vh, 16px); font-size: clamp(14px, 1.7vw, 17px); font-weight: 800; color: var(--ink);
}
.album-head .album-bar {
  flex: 1; height: 10px; border-radius: 999px;
  background: #F0E6DC; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
.album-head .album-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #FFD93D, #FF8A5B);
  border-radius: 999px; transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.sticker-album {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(86px, 9vw, 118px), 1fr));
  gap: clamp(8px, 1.1vw, 12px);
  margin: 0 auto clamp(12px, 1.6vh, 18px);
  max-width: 720px;             /* 桌面宽屏下别再横向拉满，居中 6 列左右 */
}
.album-cell {
  position: relative;             /* v47：承载右上角数量角标 */
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(38px, 4.5vw, 56px); border-radius: 16px;
  background: #F4EEE8; border: 3px dashed #E0D3C6;
  animation: pop .3s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.album-cell.got {
  background: #FFF8E7; border: 3px solid #FFD98A;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .06);
}
/* v47：每个已收集贴纸右上角的小红圆牌计数。
   不抢主 emoji 视觉（小、圆形、半透亮黄），n=1 也显示以暗示"可重复获得"。 */
.album-cell .album-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; line-height: 1;
  color: #fff; background: linear-gradient(135deg, #FF8A5B, #FF5A77);
  border-radius: 999px; border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}
.album-cell.egg { border-color: #E8D9F5; background: #F8F2FF; }
.album-cell.egg.got {
  background: linear-gradient(180deg, #FFF8E7, #FFEFD0);
  border: 3px solid #FFC94D;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .06), 0 0 12px rgba(255, 201, 77, .55);
}
/* ==========================================================
   v79：故事模式 / BOSS 关 / 贴纸剪影 —— 追加样式，不覆盖任何既有规则
   ========================================================== */

/* v100：所有未获得的格子统一长相（普通虚线底 + 剪影），
   不再给"下一张"加米黄底/黄色描边/呼吸光晕（用户要求"全部统一，不加高亮"）。
   谁是下一张由下方的 .album-next-tip 文案说明。 */
.album-cell .album-silhouette {
  filter: grayscale(1) brightness(0) opacity(.28);   /* 只留轮廓，看得出是谁、看不清细节 */
  transform: scale(1.05);
}
.album-next-tip {
  text-align: center; font-size: 15px; font-weight: 700; color: var(--ink-soft);
  background: #FFF8E7; border: 2px dashed #FFE3A8; border-radius: 16px;
  padding: 10px 14px; margin: 12px 0 4px; line-height: 1.7;
}
.album-next-tip b { color: var(--orange-d); }

/* v79 ②原 BOSS 关（怪兽/弱点/💎）已改为「凑十·填格子」玩法，相关 .is-boss / .boss-* 样式作废删除。 */


@media (prefers-reduced-motion: reduce) {
  .level-card.is-boss .lv-emoji { animation: none; }
}

.album-done {
  background: linear-gradient(180deg, #FFF3C4, #FFE39A);
  border: 3px solid #FFD15C; border-radius: 18px;
  padding: 12px; margin-bottom: 14px; text-align: center;
  font-size: 16px; font-weight: 900; color: #A9761A;
  animation: bob 1.6s ease-in-out infinite;
}
.album-done[hidden] { display: none; }

/* v47：16 种全集齐 → 合成 1 张抽奖券（每种 -1） */
.synth-row {
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.synth-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px clamp(28px, 4vw, 44px); border-radius: 999px;
  border: 3px solid #E0D3C6;
  background: linear-gradient(180deg, #F4EEE8, #E6DDD2);
  color: #B4A493;
  font-size: clamp(15px, 1.9vw, 18px); font-weight: 900;
  cursor: not-allowed;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s, background .3s, border-color .3s, color .3s, box-shadow .3s;
  /* 让合成按钮跟转盘一样有点金红光，凑齐瞬间有点小兴奋 */
}
.synth-btn.is-ready {
  background: linear-gradient(180deg, #FFE07A, #FFB347);
  border-color: #FF9F1C;
  color: #6B3D0A;
  cursor: pointer;
  box-shadow: 0 4px 0 #C2771A, 0 8px 16px rgba(255, 159, 28, .35);
  animation: synth-ready-bob 1.4s ease-in-out infinite;
}
@keyframes synth-ready-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.03); }
}
.synth-btn.is-ready:hover  { transform: translateY(-1px) scale(1.04); }
.synth-btn.is-ready:active { transform: translateY(2px)  scale(.97); box-shadow: 0 1px 0 #C2771A; }
.synth-btn .synth-emoji { font-size: clamp(22px, 2.4vw, 28px); }
.synth-tip {
  margin: 0; font-size: clamp(12px, 1.5vw, 14px);
  color: var(--ink-soft); text-align: center; line-height: 1.4;
}
.synth-btn.is-ready + .synth-tip { color: #B97500; font-weight: 800; }

/* ================= 趣味增强：小熊彩蛋可点 ================= */
.bear { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bear.tapped { animation: bear-tap .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bear-tap {
  0% { transform: scale(1); }
  40% { transform: scale(.9) rotate(-7deg); }
  70% { transform: scale(1.06) rotate(5deg); }
  100% { transform: scale(1); }
}

/* ================= 趣味增强：答错时小熊"数给你看" ================= */
.shape.demo-pop { animation: demo-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes demo-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4) translateY(-6px); }
  100% { transform: scale(1); }
}
.shape.demo-new { animation: demo-appear .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes demo-appear {
  from { opacity: 0; transform: scale(.4) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}
.slot.demo-pop { animation: demo-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.slot.filled.demo-pop { border-color: #FFB347; }
.ask-box.solved {
  background: #E8FBEA; border-color: var(--green); color: var(--green-d);
  animation: demo-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.side.win {
  border-color: var(--green); background: #E8FBEA;
  box-shadow: 0 0 0 3px rgba(76, 217, 100, .25);
}

/* v41：玩法选择页（setup-card）已删除；6 关改成"今日闯关"页。 */

/* ---------- 小屏适配 ---------- */
@media (max-height: 680px) {
  .stage { padding: 0; }            /* v23：撤掉所有 stage padding 覆盖，归零贴边 */
  .card { padding: clamp(10px, 1.6vh, 16px) clamp(8px, 1.2vw, 12px); }
  .bear { width: 84px; height: 84px; }
  .bear-wrap { margin-bottom: 2px; }
  .shapes { min-height: 56px; margin-bottom: 14px; gap: 8px; }      /* v26：放大题目区 */
  .question { margin: 8px 0 14px; font-size: clamp(34px, 5vw + 1.4vh, 60px); gap: 12px; }
  .opt { padding: clamp(10px, 1.6vh, 18px) 6px; font-size: clamp(24px, 3.4vw + 0.8vh, 34px); }
  .options { gap: 10px; }
  .quiz-head { margin-bottom: 10px; }
  .scene-tag { margin-bottom: 12px; padding: 7px 18px; font-size: 14px; }
  .logo { font-size: 34px; margin: 8px 0 2px; }
  .logo-sub { margin: 0 0 14px; }
  .page-title { margin: 4px 0 10px; font-size: clamp(20px, 3vw, 26px); }
  .hint { margin: 0 0 10px; }
  .section-label { margin: 12px 0 8px; }
  /* v28：.wheel-outer 在 #page-draw 已是 flex+aspect-ratio 自适应；这里不再覆盖尺寸 */
  .draw-tip { margin: 0 0 8px; }
  .result-title { margin: 6px 0 4px; font-size: clamp(20px, 3vw, 26px); }
  .grade-stars { margin: 2px 0 6px; font-size: clamp(28px, 4vw, 40px); }
  .sticker-prize { padding: 10px; margin-bottom: 10px; }
  .big-btn { margin-top: 12px; padding: clamp(11px, 1.5vh, 16px) 16px; }
  .btn-row .big-btn { font-size: clamp(15px, 1.9vw, 18px); }
}
@media (max-width: 360px) {
  .opt { font-size: 28px; }
  .wheel-label-inner { top: 20px; }
  .wheel-label-inner .lbl-emoji { font-size: 30px; }
  .wheel-label-inner .lbl-name { font-size: 9px; }
}

/* 极矮屏兜底（手机横屏、桌面矮窗）：进一步压缩，确保零滚动条 */
@media (max-height: 560px) {
  .stage { padding: 0; }            /* v23：撤掉所有 stage padding 覆盖，归零贴边 */
  .card { padding: 8px 10px 10px; }
  .bear { width: 68px; height: 68px; }
  .logo { font-size: 28px; margin: 6px 0 2px; }
  .logo-sub { margin: 0 0 10px; font-size: 14px; }
  .bubble { font-size: 14px; padding: 8px 14px; }
  .quiz-card { padding: 8px 14px 10px; }
  .teacher-row { margin-bottom: 6px; }
  .small-bear { width: 56px; height: 56px; }
  .shapes { min-height: 48px; margin-bottom: 10px; gap: 6px; }      /* v26：放大题目区 */
  .shape { width: clamp(28px, 7vw, 40px); height: clamp(28px, 7vw, 40px); }
  .question { font-size: clamp(30px, 4.5vw + 1.2vh, 52px); margin: 4px 0 10px; gap: 10px; }
  .opt { padding: 8px 4px; font-size: clamp(20px, 3vw + 0.6vh, 28px); border-width: 3px; border-radius: 18px; }
  .options { gap: 8px; }
  .scene-tag { margin-bottom: 8px; font-size: 13px; padding: 5px 12px; }
  /* v28：见上行说明，wheel-outer 不再覆盖 */
  .draw-tabs .tab-emoji { font-size: 20px; }
  .result-title { font-size: 22px; margin: 4px 0 2px; }
  .grade-stars { font-size: clamp(24px, 3.4vw, 32px); margin: 2px 0 4px; }
  .sticker-prize { padding: 8px; margin-bottom: 8px; }
  .sticker-new { width: 84px; height: 84px; font-size: 40px; }
  .big-btn { margin-top: 8px; padding: 9px 12px; font-size: clamp(15px, 1.8vw, 18px); }
  .bear-wrap { margin-bottom: 0; }
  #page-draw .won-list, #page-parent .wrong-list { max-height: 18vh; }
}

/* ---------- 平板横屏通用：间距 + 内边距加大（解决"挨着太近、太挤"） ---------- */
/* 触发条件：横屏 + viewport ≥ 480 宽。覆盖 iPad 横屏、Safari 缩放、iPad split view、
   部分桌面浏览器窗口。只动间距与内边距，不动字号——避免小屏溢出 */
@media (min-width: 99999px) and (orientation: landscape) { /* 已停用：布局改由基础 clamp()/min()/auto-fit 流体规则自适应，不再依赖硬断点 */
  .stage { padding: 50px 24px 22px; }
  .card { padding: 28px 32px 34px; }
  .page-back { top: 14px; left: 16px; transform: scale(1.15); transform-origin: top left; }

  /* 首页：元素之间间距全部加大 */
  .bear-wrap { margin-bottom: 6px; }
  .bubble { margin: 20px auto 0; padding: 14px 22px; }
  .logo { margin: 30px 0 12px; }
  .logo-sub { margin: 0 0 30px; }
  .home-badges { gap: 12px; margin-top: 20px; }
  .home-links { gap: 14px; margin-top: 24px; }
  .home-tip {                                /* home 底部小标语，让下半部不空 */
    margin: 24px 0 4px; font-size: 14px; color: var(--ink-soft); font-weight: 800; line-height: 1.7;
  }

  /* 关卡页（v41：今日闯关 6 关改为 3 列网格） */
  .level-list { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .level-card { padding: 12px 14px; gap: 10px; }
  .level-card .lv-emoji { font-size: 32px; width: 48px; height: 48px; }
  .level-card .lv-name { font-size: 14px; }
  .level-card .lv-diff { font-size: 11px; padding: 2px 8px; }
  .level-card .lv-stars { font-size: 18px; letter-spacing: 2px; }
  .section-label { margin: 24px 0 14px; }
  .big-btn { margin-top: 20px; }
  .btn-row { gap: 14px; }
  .page-title { margin: 6px 0 16px; }
  .hint { margin: 0 0 16px; line-height: 1.7; }

  /* 关卡页 */
  .level-list { gap: 14px; margin-bottom: 14px; }
  .level-card { padding: 16px 12px; gap: 8px; }

  /* 答题 */
  .quiz-head { margin-bottom: 16px; }
  .progress { gap: 14px; }   /* v66：iPad 横屏圆点放大后 gap 加大 */
  .quiz-card { padding: 22px 26px 28px; }
  .teacher-row { margin-bottom: 16px; }
  .scene-tag { margin-bottom: 18px; }
  .shapes { min-height: 60px; padding: 12px 10px; margin-bottom: 18px; gap: 8px; }
  .question { margin: 10px 0 20px; gap: 12px; }
  .options { gap: 16px; }
  .opt { padding: 22px 12px; }

  /* 结算页 */
  .bear-wrap { margin: 4px 0 6px; }
  .result-title { margin: 14px 0 6px; }
  .grade-stars { margin: 4px 0 8px; }
  .sticker-prize { padding: 16px; margin: 12px 0 16px; }
  .won-list { gap: 10px; }
  .draw-tip { margin: 0 0 14px; }

  /* 家长/设置页 */
  .stat-grid { gap: 12px; margin-bottom: 8px; }
  .stat-box { padding: 16px 8px; }
  .prize-group-title { margin: 14px 0 10px; }
  .prize-pool { gap: 10px; margin-bottom: 8px; }
}

/* ---------- iPad 横屏专属：字号、网格、容器尺寸放大 ---------- */
/* 触发条件：720+ 宽 + 600+ 高（避开 iPhone 横屏 430 高） */
@media (min-width: 99999px) and (min-height: 600px) and (orientation: landscape) { /* 已停用：布局改由基础流体规则自适应 */
  .stage { padding: 60px 32px 28px; }
  .page { max-width: 980px; }
  .page-back { transform: scale(1.2); transform-origin: top left; }

  /* 首页放大 + 元素之间间距加大（核心：解决"挨着太近"问题） */
  .bear { width: 150px; height: 150px; }
  .bear-wrap { margin-bottom: 6px; }
  .bubble { font-size: 19px; padding: 16px 24px; max-width: 520px; margin: 22px auto 0; }
  .logo { font-size: 56px; letter-spacing: 4px; margin: 36px 0 14px; }
  .logo-sub { font-size: 18px; margin: 0 0 36px; }
  .home-badges { gap: 14px; margin-top: 22px; }
  .badge { font-size: 18px; padding: 8px 20px; }
  .home-links { gap: 14px; margin-top: 28px; }
  .chip-btn { font-size: 19px; padding: 14px 26px; }
  .home-tip {                                 /* home 底部小标语，让下半部不空 */
    margin: 26px 0 4px; font-size: 15px; color: var(--ink-soft); font-weight: 800; line-height: 1.7;
  }

  /* 关卡页（v41：横屏 6 关两列更松） */
  .level-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .level-card { padding: 14px; }

  /* 难度选择 / pill / 大按钮（间距加大、不挤） */
  .pill { padding: 14px 28px; font-size: 18px; }
  /* v25：.range-row 已移除（默认固定 10 以内） */
  .section-label { font-size: 18px; margin: 26px 0 14px; }
  .big-btn { padding: 18px 24px; font-size: 23px; margin-top: 22px; }
  .btn-row { gap: 16px; }
  .btn-row .big-btn { font-size: 20px; padding: 16px 12px; }

  /* 标题 / 段落 */
  .page-title { font-size: 30px; margin: 8px 0 18px; }
  .group-label { font-size: 17px; margin: 18px 0 12px; gap: 12px; }
  .hint { font-size: 17px; margin: 0 0 18px; line-height: 1.7; }

  /* 关卡页（v41：6 关 3 列网格，宽屏并列） */
  .level-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
  .level-card { padding: 14px; gap: 12px; }
  .level-card .lv-emoji { font-size: 36px; width: 52px; height: 52px; }

  /* 答题 */
  .quiz-head { padding: clamp(8px, 1.2vh, 14px) 8px 0; padding-left: clamp(60px, 5vw, 80px); margin-bottom: 18px; }    /* v48：顶部留呼吸距 */
  .progress { gap: 14px; }   /* v66：iPad 横屏圆点放大后 gap 加大 */
  .dot { width: 60px; height: 44px; }    /* v66 基础 60×28；v82 加高到 44 与基础方块同比例 */
  .quiz-card { padding: 26px 32px 32px; }
  .teacher-row { margin-bottom: 18px; gap: 12px; }
  .small-bear { width: 88px; height: 88px; }
  .bubble.small { font-size: 18px; padding: 12px 16px; }
  .scene-tag { font-size: 18px; padding: 10px 24px; margin-bottom: 24px; }                    /* v26：放大题目区 */
  .shapes { min-height: 88px; max-width: 720px; padding: 16px 14px; margin-bottom: 24px; gap: 12px; }
  .shape { width: 60px; height: 60px; }
  .ask-box { width: 88px; height: 48px; font-size: 32px; }
  .slot { width: 40px; height: 40px; }
  .side .shape { width: 56px; height: 56px; }    /* v67：iPad 横屏同步放大 */
  .question { font-size: clamp(56px, 7vw, 88px); margin: 16px 0 28px; gap: 18px; }
  .question .q-word { font-size: clamp(24px, 3vw, 34px); }
  .options { gap: 18px; padding-bottom: clamp(80px, 9vh, 120px); }    /* v60b：iPad 横屏再加大，按钮到屏幕底留出明显绿地 */
  .opt { padding: 24px 12px; font-size: 40px; border-radius: 26px; }
  .options.cols-3 .opt { font-size: 22px; padding: 22px 8px; }

  /* 结算页 */
  .bear-wrap { margin: 6px 0 4px; }
  .result-title { font-size: 32px; margin: 14px 0 8px; }
  .grade-stars { font-size: 46px; margin: 6px 0 10px; gap: 8px; }
  .grade-meta { font-size: 17px; gap: 22px; }
  .grade-item b { font-size: 22px; }
  .sticker-prize { padding: 18px; margin: 14px 0 18px; }
  .sticker-new { width: 120px; height: 120px; font-size: 56px; }

  /* 贴纸板：横屏 8 列 */
  .album-head { font-size: 17px; margin: 4px 0 16px; gap: 14px; }
  .sticker-album { grid-template-columns: repeat(8, 1fr); gap: 12px; margin-bottom: 18px; }
  .album-cell { font-size: 56px; border-radius: 14px; }
  .album-cell .album-count { font-size: 13px; min-width: 24px; height: 24px; top: 6px; right: 6px; }

  /* 转盘 */
  /* v28：.wheel-outer 改由 #page-draw 下 flex 列 + .wheel-frame aspect-ratio 自适应，此处不再写死 */
  .wheel-label-inner { top: 30px; }
  .wheel-label-inner .lbl-emoji { font-size: 42px; }
  .wheel-label-inner .lbl-name { font-size: 12px; }
  .wheel-center { width: 68px; height: 68px; font-size: 21px; }
  .draw-tab .tab-emoji { font-size: 28px; }
  .draw-tab .tab-name { font-size: 17px; }
  .draw-tab .tab-cost { font-size: 13px; padding: 2px 12px; }
  .draw-tip { font-size: 16px; margin: 0 0 14px; }
  .ticket-box { padding: 12px 18px; font-size: 18px; margin-bottom: 18px; }
  .ticket-box b { font-size: 22px; }
  .draw-result { font-size: 18px; padding: 16px; }
  .won-list { max-height: 24vh; gap: 10px; }

  /* 家长/设置页 */
  .stat-grid { gap: 14px; margin-bottom: 10px; }
  .stat-box { padding: 18px 10px; }
  .stat-num { font-size: 28px; }
  .stat-lab { font-size: 14px; margin-top: 4px; }
  .set-row { gap: 12px; }
  .set-row .pill { font-size: 16px; padding: 12px 18px; }
  .prize-group-title { font-size: 16px; margin: 14px 0 10px; }
  .prize-chip { font-size: 16px; padding: 8px 18px; }
  .prize-pool { gap: 10px; margin-bottom: 8px; }
}

/* ---------- 键盘焦点环（无障碍） ---------- */
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue-d);
  outline-offset: 3px;
  border-radius: 16px;
}
.round-btn:focus-visible { border-radius: 50%; }

/* ---------- 桌面端指针悬浮：卡片轻轻抬起，更有生命力 ---------- */
@media (hover: hover) and (pointer: fine) {
  .level-card:hover:not(.locked) { transform: translateY(-4px); border-color: var(--orange); }
  .pill:hover { transform: translateY(-3px); }
  .chip-btn:hover { transform: translateY(-3px); }
  .big-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
  .opt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--blue); }
  .draw-tab:hover { transform: translateY(-3px); border-color: var(--orange); }
  .draw-tab[data-tier="5"]:hover { border-color: #FFB300; }
}

/* ================= 全屏 & 横竖屏适配（v20） ================= */

/* 安全区变量：刘海屏 / 圆角 / 底部小横条 / 横屏左右圆角 */
:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
}

/* 工具条里的图标按钮（全屏键用 SVG，避免 emoji 字体缺字显示成方框） */
.round-btn > svg { width: 21px; height: 21px; display: block; margin: 0 auto; }

/* v23：撤掉"设计留白 + 安全区"覆写——已在 base .stage 中归零；.page 限宽也撤掉，永远 100% */
.page { width: 100%; }

/* 极窄竖屏：工具条收一点，5 个按钮也排得下 */
@media (max-width: 380px) {
  .topbar { gap: 6px; right: 8px; }
  .topbar > .round-btn { width: 40px; height: 40px; font-size: 19px; }
}

/* ---------- v23 修订：横屏保持单列，stage padding 0 贴边 ---------- */
@media (orientation: landscape) {
  .stage { padding: 0; }            /* v23：撤掉横屏 padding 覆盖 */
  .page { width: 100%; }            /* v23：撤掉横屏页面宽限 */
  .card { padding: clamp(8px, 1.4vh, 14px) clamp(8px, 1.2vw, 12px); }

  /* 工具条缩小，给内容让位 */
  .topbar { gap: 8px; top: max(8px, var(--sa-top, 0px)); right: max(8px, var(--sa-right, 0px)); }
  .topbar > .round-btn { width: 38px; height: 38px; font-size: 19px; }
  .topbar > .round-btn > svg { width: 17px; height: 17px; }
  .round-btn.small { width: 36px; height: 36px; font-size: 22px; }
  .page-back { top: 10px; left: 12px; transform: scale(1.15); transform-origin: top left; }
}


/* ---------- 尊重「减少动效」偏好（前庭敏感的小朋友） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 全局兜底：HTML hidden 属性规范等同 display:none；任何 class 的 display 都应让位 */
[hidden] { display: none !important; }
/* v93：奇偶数·袜子成双法（偶数=全成对，奇数=落单一只）
   v94：袜子放上面、数字居中当主角；落单那格默认与成对格同色（不提前泄题），
        答后加 .is-alone 才变橙 + 摇摆。 */
.oe-pairs { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 14px); justify-content: center; align-items: flex-end; }
.oe-pair { display: inline-flex; gap: 2px; padding: 6px 10px; border-radius: 14px; background: rgba(120, 200, 255, .18); }
.oe-alone { display: inline-flex; padding: 6px 10px; border-radius: 14px; background: rgba(120, 200, 255, .18); }
.oe-alone.is-alone { background: rgba(255, 184, 120, .32); box-shadow: 0 0 0 4px #FFB347; animation: alone-wiggle 1.5s ease-in-out infinite; }
.oe-pair .shape, .oe-alone .shape { width: clamp(34px, 7vw, 50px); height: clamp(34px, 7vw, 50px); }
/* v95：一双袜子里右边那只镜像 → 像真的左右脚一双（只翻 svg，"掉落/弹跳"的 transform 不受影响） */
.oe-pair .shape:nth-child(2) svg { transform: scaleX(-1); }
@keyframes alone-wiggle { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-4px) rotate(-6deg); } 75% { transform: translateY(-4px) rotate(6deg); } }
/* v94：奇偶数题面——大数字居中当主角，问法压成小字跟在旁边；答后变绿 */
.question .q-oe-word { font-size: clamp(20px, 3.2vw, 28px); }
.question.solved .q-oe-word { color: var(--green-d); }