/* ==========================================================================
 * 数学小乐园 · 儿童界面样式
 * 约束：file:// 可用、无 @import、无远程字体、无外链、无构建。
 * 视觉基调：温暖高饱和（天蓝 / 阳光黄 / 草绿 / 珊瑚红）、大圆角、柔和阴影。
 *
 * 硬指标（SPEC 3.3 / C12 / C13 / C14）：
 *   - #answer-pad 按钮：桌面 >= 76 x 76 px，手机 >= 64 x 64 px
 *   - #question 字号：桌面 >= 56px，手机 >= 34px
 *   - 1280x800 桌面横屏 与 390x844 手机竖屏，均无横向滚动条
 *   - 桌面 #answer-pad 一行 11 个；手机 4 列多行且一屏内可见
 *   - 触摸优先：touch-action: manipulation，不依赖 :hover
 * ========================================================================== */

:root {
  --sky:        #4FC3F7;
  --sky-deep:   #1E88E5;
  --sun:        #FFD54F;
  --sun-deep:   #F9A825;
  --grass:      #66BB6A;
  --grass-deep: #388E3C;
  --coral:      #FF7043;
  --coral-deep: #E64A19;
  --cream:      #FFFDF6;
  --ink:        #3E2723;
  --ink-soft:   #795548;
  --radius:     28px;
  --radius-lg:  40px;
  --shadow:     0 10px 26px rgba(62, 39, 35, .18);
  --shadow-sm:  0 4px 12px rgba(62, 39, 35, .16);
  --font: "Trebuchet MS", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", sans-serif;
  --pad-x: 18px;
}

* { box-sizing: border-box; }

/* 注意：这里**不能**给 html/body 设 height:100%。
 * 一旦固定高度，body 会变成内部滚动容器，内容撑破后被裁死，
 * window.scrollTo() 也失效（verify/report.md #2 的根因）。
 * 改为只裁横向溢出（clip 不创建滚动容器），纵向由文档正常滚动到底。 */
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;            /* 老浏览器兜底 */
  overflow-x: clip;              /* 不出横向滚动条，但不锁死纵向滚动 */
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #9BDCFF 0%, #C4ECFF 42%, #E7F8FF 100%);
  background-attachment: fixed;
  width: 100%;
  overflow-x: hidden;            /* 老浏览器兜底 */
  overflow-x: clip;
  overscroll-behavior: none;     /* 手机连点时不要触发下拉刷新 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 统一的 hidden 切换规则（不用内联 display:none） */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 通用零件 */

/* 触摸优先：所有可点元素都用 manipulation，避免双击缩放延迟 */
button,
.mode-btn,
.answer-btn,
.pill-btn,
.big-btn,
.mute-btn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: inherit;
}

.pill-btn {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  background: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 76px;              /* C12：桌面热区 >= 76px */
  min-width: 76px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pill-btn:active { transform: translateY(1px) scale(.97); }

.noscript { text-align: center; font-size: 22px; padding: 24px; }

/* 图片占位容器：图片缺失/加载失败时显示 emoji 兜底，绝不出现破图图标 */
.pic { position: relative; display: block; }
.pic > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;                    /* 加载成功前不显示，避免裂图一闪 */
  transition: opacity .18s ease;
}
.pic > img.is-ok { opacity: 1; }
.pic-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  line-height: 1;
  user-select: none;
}
.pic.is-fallback > img { display: none; }
.pic.is-fallback > .pic-fallback { display: flex; }

/* ---------------------------------------------------------------- 静音开关 */

.mute-btn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border: 4px solid var(--sun);
  border-radius: 999px;
  padding: 6px 16px;
  min-height: 76px;              /* C12：桌面热区 >= 76px（原 56 不达标） */
  min-width: 76px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease;
}
.mute-btn:active { transform: translateY(1px) scale(.97); }
.mute-btn.is-muted { border-color: #B0BEC5; color: var(--ink-soft); background: rgba(255,255,255,.78); }
.mute-emoji { font-size: 26px; }

/* ---------------------------------------------------------------- 屏幕容器 */

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  padding: 24px var(--pad-x) 40px;
  padding-left: calc(var(--pad-x) + env(safe-area-inset-left));
  padding-right: calc(var(--pad-x) + env(safe-area-inset-right));
}

/* ---------------------------------------------------------------- 首页 */

.screen-home { justify-content: center; }

.home-bg, .play-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.play-bg { opacity: .3; }

.home-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 980px;
}

.game-title {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 4px;
  color: #FFFFFF;
  text-shadow: 0 4px 0 var(--sky-deep), 0 8px 18px rgba(21, 101, 192, .45);
}
.game-sub {
  margin: 0 0 4px;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}

.mascot-wrap {
  width: clamp(130px, 18vw, 230px);
  height: clamp(130px, 18vw, 230px);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #FFF6D8 0%, #FFE082 70%, #FFD54F 100%);
  border: 8px solid #FFFFFF;
  box-shadow: var(--shadow);
  animation: floaty 3.2s ease-in-out infinite;
}
.mascot-fallback { font-size: clamp(66px, 10vw, 120px); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

.mode-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  margin-top: 8px;
  width: 100%;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 180px;
  max-width: 260px;
  min-height: 180px;
  min-width: 96px;
  padding: 18px 12px;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.mode-btn:active { transform: translateY(2px) scale(.97); }
.mode-emoji { font-size: clamp(40px, 5vw, 62px); line-height: 1; }
.mode-label { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; letter-spacing: 2px; }

.mode-add    { background: linear-gradient(180deg, #7ED0FF 0%, var(--sky-deep) 100%);   border-bottom: 8px solid #1565C0; }
.mode-sub    { background: linear-gradient(180deg, #FFC46B 0%, var(--coral) 100%);      border-bottom: 8px solid var(--coral-deep); }
.mode-decomp { background: linear-gradient(180deg, #9BE38E 0%, var(--grass-deep) 100%); border-bottom: 8px solid #2E7D32; }

.mode-btn[disabled] { filter: grayscale(.6); opacity: .6; cursor: not-allowed; }

.home-hint {
  margin: 12px 0 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--sky-deep);
  background: rgba(255, 255, 255, .85);
  border-radius: 999px;
  padding: 10px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ---------------------------------------------------------------- 答题页 */

/* 纵向预算：桌面 1280x800 必须容纳「进度条 + 数数区 + 大字算式 + 11 个按钮 + 反馈行」，
 * 所以答题页压缩留白，并把数数区/吉祥物等装饰按视口高自适应（见下方 vh 上限）。
 * 若内容确实超出（系统字号放大 / 更矮的窗口），文档仍可整体滚动到达（见 html 注释）。 */
.screen-play { padding-top: 12px; padding-bottom: 12px; }

.play-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.play-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  padding-right: 128px;          /* 给右上角固定的静音按钮让位 */
}

.progress-text {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  background: #FFFFFF;
  border-radius: 999px;
  padding: 8px 20px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.stars-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 26px;
  font-weight: 800;
  color: var(--coral-deep);
  background: #FFF8E1;
  border: 4px solid var(--sun);
  border-radius: 999px;
  padding: 4px 18px;
  min-height: 52px;
  box-shadow: var(--shadow-sm);
}
.stars-text.is-pop { animation: starPop .45s ease; }
@keyframes starPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28) rotate(-6deg); }
  100% { transform: scale(1); }
}
.stars-emoji { font-size: 24px; }

.progress-dots { display: flex; gap: 8px; }
.progress-dots .dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #B3E5FC;
}
.progress-dots .dot.is-done { background: var(--sun); border-color: var(--sun-deep); }
.progress-dots .dot.is-now  { background: var(--coral); border-color: var(--coral-deep); transform: scale(1.25); }

.mascot-play-wrap {
  width: clamp(64px, min(9vw, 12vh), 118px);   /* 800px 高时约 96px，矮屏自动收 */
  height: clamp(64px, min(9vw, 12vh), 118px);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #FFF6D8 0%, #FFE082 100%);
  border: 6px solid #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.mascot-play-fallback { font-size: clamp(34px, min(4.6vw, 6vh), 62px); }
.mascot-play-wrap.is-bounce { animation: mascotBounce .6s ease; }
@keyframes mascotBounce {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-16px) scale(1.08) rotate(-5deg); }
  65%  { transform: translateY(-6px) scale(1.04) rotate(4deg); }
  100% { transform: translateY(0) scale(1); }
}
.mascot-play-wrap.is-shake { animation: mascotShake .55s ease; }
@keyframes mascotShake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-7deg); }
  75%      { transform: rotate(7deg); }
}

/* 数数区 */
.visual {
  width: 100%;
  min-height: clamp(96px, 17vh, 160px);   /* 800px 高时约 136px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .84);
  border: 6px dashed #A5D6A7;
  border-radius: var(--radius);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.visual.is-revealed { border-color: var(--sun); border-style: solid; animation: glowPulse .9s ease; }
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 213, 79, .9); }
  100% { box-shadow: 0 0 0 22px rgba(255, 213, 79, 0); }
}

.vis-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vis-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.vis-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: clamp(42px, 6.5vh, 56px);
  min-width: 56px;
  padding: 4px 9px;
  border-radius: 22px;
}
.vis-group.vis-a { background: #E3F2FD; }
.vis-group.vis-b { background: #FFF3E0; }
.vis-group.is-zero {
  background: repeating-linear-gradient(45deg, #FAFAFA, #FAFAFA 8px, #F0F0F0 8px, #F0F0F0 16px);
  border: 3px dashed #BDBDBD;
  color: #9E9E9E;
  font-size: 20px;
  font-weight: 700;
}
.vis-item {
  font-size: clamp(26px, min(3.4vw, 4.4vh), 42px);   /* 800px 高时约 35px */
  line-height: 1;
  display: inline-block;
  user-select: none;
  animation: itemIn .3s ease backwards;
}
.vis-item.is-part-b { filter: hue-rotate(140deg) saturate(1.2); }
.vis-item.is-removed { opacity: .28; transform: scale(.85) rotate(-14deg); position: relative; }
.vis-item.is-removed::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  color: var(--coral-deep);
  opacity: .95;
}
@keyframes itemIn {
  from { opacity: 0; transform: scale(.4) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.vis-op {
  font-size: clamp(28px, min(3.6vw, 4.6vh), 48px);
  font-weight: 800;
  color: var(--sky-deep);
  padding: 0 4px;
}

.vis-badge {
  font-size: clamp(15px, min(1.9vw, 2.4vh), 24px);
  font-weight: 800;
  color: var(--grass-deep);
  background: #E8F5E9;
  border: 3px solid var(--grass);
  border-radius: 999px;
  padding: 2px 16px;
}

/* 数字分解图形 */
.decomp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.decomp-total { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.decomp-caption { font-size: clamp(14px, min(1.8vw, 2.2vh), 22px); font-weight: 700; color: var(--ink-soft); }
.decomp-split { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.decomp-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  border-radius: 24px;
  background: #F1F8E9;
  border: 4px solid var(--grass);
}
.decomp-part.is-unknown {
  background: repeating-linear-gradient(45deg, #FFFDE7, #FFFDE7 10px, #FFF9C4 10px, #FFF9C4 20px);
  border: 4px dashed var(--sun-deep);
  min-width: 84px;
  min-height: 76px;
  justify-content: center;
}
.decomp-part.is-revealed { border-color: var(--coral); background: #FFF3E0; animation: starPop .5s ease; }
.decomp-unknown { font-size: clamp(30px, min(4.4vw, 5vh), 54px); font-weight: 800; color: var(--sun-deep); }
.decomp-num {
  font-size: clamp(20px, min(2.6vw, 3.2vh), 32px);
  font-weight: 800;
  color: #FFFFFF;
  background: var(--grass-deep);
  border-radius: 999px;
  padding: 0 14px;
  min-width: 48px;
  text-align: center;
}
.decomp-part.is-revealed .decomp-num { background: var(--coral-deep); }
.decomp-arrow { font-size: 26px; color: var(--ink-soft); padding-bottom: 18px; }

/* 题目算式：桌面 >= 56px，手机 >= 34px（C13） */
.question {
  font-size: 56px;                                   /* 兜底硬指标 */
  font-size: clamp(56px, 5.6vw, 80px);               /* 桌面 >= 56px */
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink);
  text-align: center;
  background: #FFFFFF;
  border-radius: var(--radius);
  padding: 4px 30px;
  box-shadow: var(--shadow);
  min-height: clamp(76px, 11.5vh, 96px);   /* 800px 高时约 92px；字号仍 >= 56px */
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;          /* 不横向溢出（C13：无横向滚动条） */
  line-height: 1.15;
  overflow-wrap: break-word;
}
.q-text { display: block; }

/* 算式里的未知格：真实方框字符 □（U+25A1），淡黄底做成"填空位"，
   揭示后被答案填上并转绿（.is-filled） */
.ans-box {
  display: inline-block;
  min-width: 1.02em;
  text-align: center;
  color: var(--sun-deep);
  background: #FFF8E1;
  border-radius: 16px;
  padding: 0 .06em;
  line-height: 1.08;
}
.ans-box.is-filled { color: var(--grass-deep); background: #E8F5E9; }
.question.is-revealed { color: var(--grass-deep); box-shadow: 0 0 0 6px var(--sun), var(--shadow); }

/* 数字按钮：桌面 >= 76 x 76 px（SPEC 3.3 / C12） */
.answer-pad {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(11, minmax(76px, 1fr));   /* 桌面一行 11 个（C14） */
  gap: 12px;
  padding: 4px 0;
}
.answer-btn {
  min-width: 76px;             /* 硬指标：桌面热区 >= 76px */
  min-height: 76px;            /* 硬指标：桌面热区 >= 76px */
  height: 96px;
  font-size: 38px;
  font-weight: 800;
  color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3C4 100%);
  border: 5px solid var(--sun);
  border-radius: 26px;
  cursor: pointer;
  box-shadow: 0 6px 0 #E0A800, var(--shadow-sm);
  transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
}
.answer-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #E0A800; }

.answer-btn.is-right {
  background: linear-gradient(180deg, #B9F6CA 0%, var(--grass) 100%);
  border-color: var(--grass-deep);
  box-shadow: 0 6px 0 #2E7D32, var(--shadow-sm);
  animation: starPop .5s ease;
}
/* 答错不惩罚：温和摇摆 + 中性蓝色，不用红色、不闪屏 */
.answer-btn.is-wobble {
  border-color: var(--sky);
  box-shadow: 0 6px 0 var(--sky-deep), var(--shadow-sm);
  animation: gentleWobble .5s ease;
}
@keyframes gentleWobble {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px) rotate(-2deg); }
  75%      { transform: translateX(6px) rotate(2deg); }
}
.answer-btn.is-dim { opacity: .5; }

.feedback {
  min-height: clamp(48px, 7vh, 60px);   /* 800px 高时约 56px */
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.feedback.is-correct { color: var(--grass-deep); background: #E8F5E9; animation: starPop .5s ease; }
.feedback.is-retry   { color: #EF6C00; background: #FFF8E1; }
.feedback .fb-emoji { font-size: 1.2em; }

/* 星星飞入动画 */
.fly-star {
  position: fixed;
  z-index: 90;
  font-size: 44px;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform .75s cubic-bezier(.35, -0.25, .6, 1.35), opacity .75s ease;
}

/* ---------------------------------------------------------------- 结算页 */

.screen-result { justify-content: center; }

.result-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  padding: 24px 28px 28px;
  background: var(--cream);
  border: 8px solid var(--sun);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: cardIn .45s ease;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sticker-wrap {
  width: clamp(120px, 16vw, 210px);
  height: clamp(120px, 16vw, 210px);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #FFFDE7 0%, #FFE082 100%);
  border: 8px solid #FFFFFF;
  box-shadow: var(--shadow);
  animation: floaty 3s ease-in-out infinite;
}
.sticker-fallback { font-size: clamp(60px, 9vw, 110px); }

.result-title {
  margin: 6px 0 0;
  font-size: clamp(22px, 3.2vw, 40px);
  color: var(--coral-deep);
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.25;
}
.result-line { margin: 0; font-size: clamp(16px, 1.9vw, 24px); font-weight: 700; color: var(--ink-soft); }
.result-stars { display: flex; align-items: baseline; gap: 10px; color: var(--sun-deep); }
#result-stars-num { font-size: clamp(48px, 7vw, 76px); font-weight: 800; line-height: 1; }
.result-star-emoji { font-size: clamp(28px, 4vw, 46px); }
.result-detail { margin: 0; font-size: clamp(16px, 1.9vw, 24px); font-weight: 700; color: var(--ink-soft); }

.result-btns { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }
.big-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 180px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  min-height: 76px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.big-btn:active { transform: translateY(2px) scale(.97); }
.big-btn-emoji { font-size: 1.1em; }
.btn-again { background: linear-gradient(180deg, #81C784 0%, var(--grass-deep) 100%); border-bottom: 7px solid #2E7D32; }
.btn-back  { background: linear-gradient(180deg, #64B5F6 0%, var(--sky-deep) 100%);   border-bottom: 7px solid #1565C0; }

/* ================================================================ 自适应
 * 原则：只压缩留白与装饰，不缩小 #question 下限(56/34) 与按钮热区(76/64)。
 * 断点来源：11 列需要 11*76 + 10*12 = 956px 内容宽。
 */

/* 桌面横屏且窗口不够宽时：11 列改 6 列，避免横向滚动 */
@media (max-width: 1100px) {
  .answer-pad { grid-template-columns: repeat(6, minmax(76px, 1fr)); gap: 12px; }
  .play-bar { padding-right: 118px; }
}

@media (max-width: 900px) {
  .answer-pad { grid-template-columns: repeat(6, minmax(76px, 1fr)); gap: 10px; }
  .visual { min-height: 132px; }
}

/* ---------- 手机竖屏（390x844 等）：一屏内看到题目 + 全部 11 个答案键 ---------- */
@media (max-width: 820px) {
  :root { --pad-x: 10px; }

  .screen { min-height: 100vh; padding-top: 8px; padding-bottom: 10px; }

  /* 首页：护住热区，靠留白收缩 */
  .screen-home { justify-content: center; gap: 4px; }
  .home-inner { gap: 8px; }
  .profile-none { display: none; }
  .mascot-wrap { border-width: 6px; }
  .mode-row { gap: 10px; }
  .mode-btn { flex: 1 1 96px; min-height: 118px; padding: 12px 6px; border-radius: 28px; border-bottom-width: 6px; }
  .mode-emoji { font-size: 40px; }
  .mode-label { font-size: 22px; letter-spacing: 1px; }
  .home-hint { font-size: 18px; padding: 8px 18px; margin-top: 6px; }

  /* 静音按钮：缩小并躲开答题栏 */
  .mute-btn { min-height: 64px; min-width: 64px; padding: 4px 12px; gap: 4px; }   /* C12：手机热区 >= 64px */
  .mute-emoji { font-size: 22px; }
  .mute-text { display: none; }

  /* 答题页：紧凑纵向布局；上下 auto 边距让内容在有余量时居中、不够时仍可滚动可达 */
  .screen-play { padding-top: 6px; }
  .screen-play .play-inner { margin-top: auto; margin-bottom: auto; }
  .play-inner { gap: 6px; }
  .play-bar { padding-right: 0; padding-top: 2px; }
  .pill-btn { font-size: 16px; min-height: 64px; padding: 8px 14px; }   /* C12：手机热区 >= 64px */
  .progress-text { font-size: 17px; min-height: 62px; padding: 6px 14px; }
  .stars-text { font-size: 18px; min-height: 62px; padding: 4px 12px; }
  .stars-emoji { font-size: 18px; }
  .progress-dots { gap: 6px; }
  .progress-dots .dot { width: 11px; height: 11px; border-width: 2px; }
  .mascot-play-wrap { width: 64px; height: 64px; border-width: 4px; }
  .mascot-play-fallback { font-size: 34px; }

  .visual { min-height: 96px; padding: 8px 10px; border-width: 4px; border-radius: 20px; }
  /* 竖屏窄：算式区改成「左组 | 符号 | 右组」三列，符号不会被挤到行尾 */
  .visual > .vis-wrap { width: 100%; }
  .vis-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    width: 100%;
    gap: 4px;
  }
  .vis-group { min-height: 42px; min-width: 42px; padding: 3px 7px; border-radius: 16px; }
  .vis-item { font-size: 26px; }
  .vis-op { font-size: 28px; }
  .vis-item.is-removed::after { font-size: .8em; }
  .decomp-part { padding: 4px 8px; border-width: 3px; border-radius: 18px; }
  .decomp-part.is-unknown { min-width: 62px; min-height: 62px; }
  .decomp-num { font-size: 20px; min-width: 40px; padding: 0 10px; }
  .decomp-arrow { font-size: 20px; padding-bottom: 16px; }
  .vis-badge { font-size: 14px; padding: 2px 12px; }

  .question {
    font-size: 34px;                            /* 兜底硬指标（手机 >= 34px） */
    font-size: clamp(34px, 9.5vw, 56px);        /* 390px 宽 -> 37px */
    min-height: 62px;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
  }

  /* 4 列多行，热区仍 >= 64px（C12 / C14） */
  .answer-pad { grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 8px; }
  .answer-btn {
    min-width: 64px;
    min-height: 64px;
    height: 66px;
    font-size: 28px;
    border-width: 4px;
    border-radius: 20px;
    box-shadow: 0 4px 0 #E0A800, var(--shadow-sm);
  }
  .answer-btn:active { box-shadow: 0 1px 0 #E0A800; }

  .feedback { min-height: 46px; font-size: 17px; padding: 4px 14px; }
  .fly-star { font-size: 32px; }

  /* 结算页 */
  .result-card { padding: 16px 16px 20px; gap: 4px; border-width: 6px; border-radius: 30px; }
  .big-btn { min-width: 140px; min-height: 64px; padding: 10px 20px; }
  .result-btns { gap: 10px; margin-top: 8px; }
}

/* 手机横屏 / 矮窗口：进一步压缩纵向装饰 */
@media (max-height: 620px) {
  .mascot-play-wrap { display: none; }
  .progress-dots { display: none; }
  .visual { min-height: 84px; }
  .screen-home { justify-content: flex-start; }
  .mascot-wrap { width: 110px; height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-wrap, .sticker-wrap, .home-hint, .vis-item { animation: none; }
}