/* =========================================================
   看图列式 · 数学小课堂  —  Responsive stylesheet
   Targets: phone / tablet / desktop, portrait + landscape
   ========================================================= */

:root {
  /* palette */
  --sky1: #a8e6ff;
  --sky2: #ffe3f3;
  --ink: #31425b;
  --ink-soft: #62748f;
  --accent: #ff9f43;
  --accent-2: #ff6b9d;
  --primary: #4fc3f7;
  --primary-deep: #2196f3;
  --ok: #2ecc71;
  --bad: #ff4757;
  --card: rgba(255, 255, 255, 0.82);
  --card-solid: #ffffff;
  --shadow: 0 10px 30px rgba(60, 90, 140, 0.18);
  --shadow-sm: 0 4px 14px rgba(60, 90, 140, 0.14);
  --radius: 22px;
  --radius-sm: 14px;

  /* dynamic viewport unit fallback */
  --vh: 1vh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--sky1) 0%, var(--sky2) 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* ---------- 3D background ---------- */
#bg3d {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   ICONS (offline SVG sprite)
   ========================================================= */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: 0 0 auto;
  pointer-events: none;
}

/* sound toggle icon sizing */
.sound-toggle .ico { width: 24px; height: 24px; }
.sound-toggle .ico-off { display: none; }
.sound-toggle.muted .ico-on { display: none; }
.sound-toggle.muted .ico-off { display: block; }

/* =========================================================
   HOME decorations & playful animations
   ========================================================= */
.home-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.home-decor .decor {
  position: absolute;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(120, 150, 200, 0.28));
}
/* spread the decorations toward the four corners, away from the middle content */
.decor-1 { width: 52px; height: 52px; color: #ffd54f; top: 12%; left: 9%; animation: floaty 4.2s ease-in-out infinite; }
.decor-2 { width: 34px; height: 34px; color: #ffb74d; top: 20%; right: 11%; animation: floaty 5.1s ease-in-out infinite 0.6s; }
.decor-3 { width: 46px; height: 46px; color: #4fc3f7; bottom: 16%; left: 12%; animation: floaty 4.7s ease-in-out infinite 0.3s, wiggle 3s ease-in-out infinite; transform-origin: bottom center; }
.decor-4 { width: 38px; height: 38px; color: #66bb6a; top: 13%; right: 26%; animation: floaty 3.8s ease-in-out infinite 1s; }
.decor-5 { width: 32px; height: 32px; color: #ff6b9d; bottom: 24%; right: 13%; animation: floaty 5.6s ease-in-out infinite 0.9s; }
.decor-6 { width: 40px; height: 40px; color: #ffd54f; top: 34%; left: 7%; animation: floaty 6s ease-in-out infinite 0.4s, twinkle 2.4s ease-in-out infinite; }

/* on small phones keep decorations nearer the edges but slightly smaller */
@media (max-width: 560px) {
  .decor-1 { width: 38px; height: 38px; left: 6%; top: 10%; }
  .decor-2 { width: 26px; height: 26px; right: 7%; top: 17%; }
  .decor-3 { width: 34px; height: 34px; left: 8%; bottom: 13%; }
  .decor-4 { width: 28px; height: 28px; right: 20%; top: 11%; }
  .decor-5 { width: 24px; height: 24px; right: 8%; bottom: 21%; }
  .decor-6 { width: 28px; height: 28px; left: 5%; top: 36%; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* subtitle icon */
.subtitle { display: inline-flex; align-items: center; gap: 8px; }
.subtitle-ico { width: 1.1em; height: 1.1em; color: var(--accent-2); }

/* home tip icon */
.home-tip { display: inline-flex; align-items: center; gap: 6px; }
.tip-ico { width: 1.1em; height: 1.1em; color: var(--primary-deep); opacity: 0.9; }

/* start button icon */
.play-ico { width: 1.15em; height: 1.15em; color: #7a3e00; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }

@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* settings sound choice icons */
.choice { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.choice-ico { width: 1.15em; height: 1.15em; }

/* answer tool icons */
.tool-btn { display: inline-flex; align-items: center; gap: 4px; }
.tool-ico { width: 1.05em; height: 1.05em; }

/* next button icon */
.next-ico { width: 1.2em; height: 1.2em; transition: transform 0.2s ease; }
.btn-next:hover .next-ico { transform: translateX(4px); }
.btn-next:active .next-ico { transform: translateX(2px); }

/* result action icons */
.result-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ico { width: 1.2em; height: 1.2em; }

/* score message stars */
#score-msg { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.msg-stars { display: inline-flex; gap: 3px; }
.msg-star { width: 1.4em; height: 1.4em; color: #cfe0f2; opacity: 1; transform: scale(1); }
.msg-star.lit { animation: starPop 0.5s cubic-bezier(0.18, 0.9, 0.32, 1.5) forwards; color: #ffb300; }
@keyframes starPop {
  0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  70% { opacity: 1; transform: scale(1.25) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* result mark icons */
.mark-ico { width: 1.5em; height: 1.5em; }
.mark-ico.ok { color: var(--ok); }
.mark-ico.bad { color: var(--bad); }

.sound-toggle {
  position: fixed;
  top: calc(12px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  z-index: 200;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
  font-size: 22px;
  display: grid;
  place-items: center;
  transition: transform 0.18s ease, background 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sound-toggle:active { transform: scale(0.9); }
.sound-toggle.muted { opacity: 0.75; }

/* ---------- screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}
.screen.active { display: flex; }

/* =========================================================
   HOME
   ========================================================= */
#screen-home { align-items: center; justify-content: center; }

.home-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  /* keep clear of the 3D munchkin which is placed to the sides on wide screens */
  max-width: 95vw;
}

/* =========================================================
   3D TITLE  「看图列式」—— 立体挤出 + 炫酷入场
   ========================================================= */
.title {
  margin: 0;
  font-size: clamp(46px, 13vw, 110px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 让 3D 倾斜与阴影有呼吸空间 */
  perspective: 900px;
}

.title-line1, .title-line2 {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  transform-style: preserve-3d;
  will-change: transform;
  animation: titleIdleFloat 3.4s ease-in-out infinite;
}
.title-line2 { animation-delay: 0.4s; }

/* 每个字做成真·立体字（多层 text-shadow 堆出厚度 + 斜向投影） */
.title .char {
  display: inline-block;
  position: relative;
  /* 每个字用各自的配色（--top 亮色 / --mid 主色 / --bot 深色） */
  background: linear-gradient(178deg, var(--top, #fff6d8) 0%, var(--mid, #ffcf5c) 38%, var(--bot, #ff6b9d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 挤出厚度：一列逐像素偏移的深色阴影，模拟 Z 轴拉伸 */
  text-shadow:
     1px  1px 0 var(--side1, #e08a2b),
     2px  2px 0 var(--side2, #d97f24),
     3px  3px 0 var(--side3, #cf7520),
     4px  4px 0 var(--side4, #c46b1c),
     5px  5px 0 var(--side5, #b86219),
     6px  6px 0 var(--side6, #ad5916),
     7px  7px 0 var(--side7, #a25013),
     8px  8px 0 var(--side8, #974711),
     9px  9px 0 var(--side9, #8c3e0e),
    10px 10px 0 var(--side10, #81350c),
    11px 11px 0 var(--side11, #762c0a),
    12px 12px 0 var(--side12, #6b2408),
    /* 柔和落地投影 */
    14px 20px 14px rgba(120, 50, 90, 0.42),
    20px 30px 30px rgba(120, 50, 90, 0.22);
  transform-origin: 50% 100%;
  /* 逐字入场 + 常驻动感（上下浮动 + 左右摇摆 + 高光呼吸） */
  animation:
    charDropIn 0.9s cubic-bezier(0.16, 1.28, 0.34, 1) both,
    charDance 2.4s ease-in-out infinite,
    charGlint 3.6s ease-in-out infinite;
  animation-delay:
    calc(var(--i) * 0.14s + 0.15s),
    calc(var(--i) * 0.14s + 1.05s),
    calc(var(--i) * 0.3s + 1.2s);
  will-change: transform, filter;
}

/* 每个字不同配色（--i 决定：0橙 1粉 2蓝 3绿） */
.title .char[style*="--i:0"] {
  --top: #fff2c2; --mid: #ffc93c; --bot: #ff8a1f;
  --side1: #f0a92a; --side2: #e39e22; --side3: #d7931b; --side4: #ca8815;
  --side5: #bd7d10; --side6: #b0720c; --side7: #a36709; --side8: #965c06;
  --side9: #895103; --side10: #7c4601; --side11: #6f3b00; --side12: #623000;
}
.title .char[style*="--i:1"] {
  --top: #ffd9e6; --mid: #ff7fb0; --bot: #e63f86;
  --side1: #e0508e; --side2: #d34984; --side3: #c6427a; --side4: #b93b70;
  --side5: #ac3466; --side6: #9f2d5c; --side7: #922652; --side8: #851f48;
  --side9: #78183e; --side10: #6b1134; --side11: #5e0a2a; --side12: #510320;
}
.title .char[style*="--i:2"] {
  --top: #d6f1ff; --mid: #4fc3f7; --bot: #1c7ed6;
  --side1: #2b9fdc; --side2: #2894cf; --side3: #2589c2; --side4: #227eb5;
  --side5: #1f73a8; --side6: #1c689b; --side7: #195d8e; --side8: #165281;
  --side9: #134774; --side10: #103c67; --side11: #0d315a; --side12: #0a264d;
}
.title .char[style*="--i:3"] {
  --top: #d6ffe0; --mid: #5fd68a; --bot: #22a559;
  --side1: #35b268; --side2: #32a761; --side3: #2f9c5a; --side4: #2c9153;
  --side5: #29864c; --side6: #267b45; --side7: #23703e; --side8: #206537;
  --side9: #1d5a30; --side10: #1a4f29; --side11: #174422; --side12: #143b1b;
}

/* 入场：从屏幕外上方砸下来，翻转 3D，带挤压回弹 */
@keyframes charDropIn {
  0% {
    opacity: 0;
    transform: translateY(-160%) rotateX(-95deg) rotateZ(-18deg) scale(0.4);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    transform: translateY(10%) rotateX(18deg) rotateZ(6deg) scale(1.08);
    filter: blur(0);
  }
  72% {
    transform: translateY(-4%) rotateX(-6deg) rotateZ(-2deg) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) rotateZ(0) scale(1);
    filter: blur(0);
  }
}

/* 常驻的立体呼吸浮动（比旧的左右摇更像"浮在空中转"） */
@keyframes titleIdleFloat {
  0%, 100% { transform: translateY(0) rotateX(6deg) rotateZ(0deg); }
  50%      { transform: translateY(-10px) rotateX(-4deg) rotateZ(1.5deg); }
}

/* 高光扫过（每个字错峰） */
@keyframes charGlint {
  0%, 82%, 100% { filter: brightness(1); }
  88%           { filter: brightness(1.35) saturate(1.15); }
  94%           { filter: brightness(1.05); }
}

/* 常驻动感：上下跳 + 左右摇 + 轻微 3D 翻，每个字错峰所以像在跳舞 */
@keyframes charDance {
  0%, 100% { transform: translateY(0)     rotateZ(0deg)   rotateX(0deg)   scale(1); }
  20%      { transform: translateY(-9px)  rotateZ(-3.5deg) rotateX(6deg)   scale(1.03); }
  45%      { transform: translateY(2px)   rotateZ(2deg)    rotateX(-3deg)  scale(0.985); }
  70%      { transform: translateY(-5px)  rotateZ(3.5deg)  rotateX(5deg)   scale(1.02); }
  85%      { transform: translateY(1px)   rotateZ(-1.5deg) rotateX(-2deg)  scale(0.995); }
}

/* gentle fade/slide-in for home text blocks */
.subtitle { animation: riseIn 0.7s cubic-bezier(0.18, 0.9, 0.32, 1.2) both; animation-delay: 0.15s; }
.btn-start { animation: btnPulse 2.6s ease-in-out infinite, riseIn 0.7s cubic-bezier(0.18, 0.9, 0.32, 1.2) both; animation-delay: 0s, 0.3s; }
.home-tip { animation: riseIn 0.7s cubic-bezier(0.18, 0.9, 0.32, 1.2) both; animation-delay: 0.5s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.subtitle {
  margin: 10px 0 clamp(70px, 13vw, 120px);
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 3px;
}

.btn-start {
  position: relative;
  border: none;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(180deg, #ffe06b, #ffa726);
  border-radius: 999px;
  box-shadow: 0 10px 0 #e8890a, 0 18px 30px rgba(255, 152, 0, 0.45);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ---------- 按钮上的 Lottie 动物（跑动循环） ---------- */
.btn-bunny {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: -18px;              /* 往下压，让猫的脚真正踩在按钮顶边上 */
  width: clamp(84px, 17vw, 112px);   /* 比按钮小，留出左右跑动空间 */
  height: clamp(56px, 11vw, 74px);
  pointer-events: none;
  z-index: 30;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 5px rgba(120, 90, 60, 0.30));
  animation: animalRunAcross 9s linear infinite;
}
.lottie-animal { display: block; width: 100%; height: 100%; overflow: hidden; }
/* 裁掉 Lottie 原画布四周大片空白，让猫撑满容器、脚贴底边 */
.lottie-animal svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* 在按钮顶边上左右跑：跑到一端迅速缩小淡出 → 隐身时换向 → 淡入继续。
   转身动作完全藏起来，看起来就是持续来回跑。 */
@keyframes animalRunAcross {
  0%    { transform: translateX(0)     scaleX(1)  scale(1);    opacity: 1; }
  41%   { transform: translateX(155%)  scaleX(1)  scale(1);    opacity: 1; }
  46%   { transform: translateX(170%)  scaleX(1)  scale(0.1);  opacity: 0; }  /* 右端缩小消失 */
  50%   { transform: translateX(170%)  scaleX(-1) scale(0.1);  opacity: 0; }  /* 隐身换向 */
  55%   { transform: translateX(155%)  scaleX(-1) scale(1);    opacity: 1; }  /* 淡入朝左跑 */
  96%   { transform: translateX(0)     scaleX(-1) scale(1);    opacity: 1; }
  98%   { transform: translateX(0)     scaleX(-1) scale(0.1);  opacity: 0; }  /* 左端缩小消失 */
  99%   { transform: translateX(0)     scaleX(1)  scale(0.1);  opacity: 0; }  /* 隐身换向 */
  100%  { transform: translateX(0)     scaleX(1)  scale(1);    opacity: 1; }
}

/* 点击开始：动物跳起 → 钻进时空漩涡 */
.btn-start.jumping .btn-bunny {
  animation: animalJumpIn 0.9s cubic-bezier(0.32, 0.7, 0.35, 1) forwards;
}
@keyframes animalJumpIn {
  0%   { transform: translateX(155%) translateY(0) scale(1) rotate(0); opacity: 1; }
  12%  { transform: translateX(155%) translateY(8px) scale(1.15, 0.82) rotate(0); opacity: 1; }
  35%  { transform: translateX(140%) translateY(-54px) scale(0.9, 1.14) rotate(-12deg); opacity: 1; }
  60%  { transform: translateX(110%) translateY(-26px) scale(0.8) rotate(160deg); opacity: 1; }
  100% { transform: translateX(85%)  translateY(-2px) scale(0.03) rotate(320deg); opacity: 0; }
}

/* ---------- 按钮变成"时空漩涡" ---------- */
/* 漩涡放在独立的裁切容器里，这样按钮本身保持 overflow:visible，兔子不被裁掉 */
.btn-portal {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.btn-portal::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      #0b0722 0%,
      #1e1160 22%,
      #4b3bb8 42%,
      #4fc3f7 60%,
      #bff0ff 76%,
      #ffffff 88%,
      rgba(255,255,255,0.2) 96%,
      transparent 100%);
  box-shadow:
    inset 0 0 34px 10px rgba(6, 2, 30, 0.9),
    inset 0 0 10px 3px rgba(120, 220, 255, 0.9),
    0 0 22px 6px rgba(130, 220, 255, 0.85),
    0 0 46px 14px rgba(150, 120, 255, 0.55);
  opacity: 0;
}
/* 漩涡的旋转纹理层 */
.btn-portal::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.0) 0deg,
    rgba(180,240,255,0.85) 12deg,
    rgba(120,180,255,0.0) 26deg,
    rgba(200,160,255,0.7) 40deg
  );
  opacity: 0;
  mix-blend-mode: screen;
}
.btn-start.jumping .btn-portal::before {
  animation: portalOpen 0.9s ease-in forwards;
}
.btn-start.jumping .btn-portal::after {
  animation: portalSpin 1.4s linear infinite, portalFade 0.9s ease-in forwards;
}
@keyframes portalOpen {
  0%   { width: 0; height: 0; opacity: 0; }
  55%  { width: 60px; height: 60px; opacity: 0.85; }
  85%  { width: 220px; height: 220px; opacity: 1; box-shadow: 0 0 0 0 rgba(120,220,255,0), inset 0 0 60px rgba(255,255,255,0.9); }
  100% { width: 520px; height: 520px; opacity: 0; }
}
@keyframes portalSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes portalFade {
  0%   { width: 0; height: 0; opacity: 0; }
  55%  { width: 70px; height: 70px; opacity: 0.9; }
  88%  { width: 260px; height: 260px; opacity: 0.8; }
  100% { width: 520px; height: 520px; opacity: 0; }
}
/* 漩涡时按钮文字被"吸"一下 */
.btn-start.jumping .btn-start-inner {
  animation: btnTextSuck 0.9s ease-in forwards;
}
@keyframes btnTextSuck {
  0%   { transform: scale(1); opacity: 1; }
  55%  { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* 按钮被"撞"一下 */
.btn-start.jumping {
  animation: btnSquish 0.9s ease both;
}
@keyframes btnSquish {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05, 0.93); }
  55%  { transform: scale(0.97, 1.04); }
  100% { transform: scale(1); }
}


.btn-start-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 4vw, 22px) clamp(34px, 10vw, 60px);
  font-size: clamp(20px, 5.5vw, 32px);
  font-weight: 900;
  color: #7a3e00;
  letter-spacing: 4px;
}
.btn-start:active {
  transform: translateY(7px) scale(0.98);
  box-shadow: 0 3px 0 #e8890a, 0 8px 16px rgba(255, 152, 0, 0.4);
  animation-play-state: paused;
}

.home-tip {
  margin-top: 22px;
  font-size: clamp(12px, 3.4vw, 16px);
  color: var(--ink-soft);
  opacity: 0.85;
}

/* =========================================================
   OVERLAY / SETTINGS
   ========================================================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: rgba(40, 60, 90, 0.36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.overlay.show {
  display: flex;
  animation: fadeIn 0.22s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card-solid);
  border-radius: var(--radius);
  padding: clamp(18px, 5vw, 30px);
  box-shadow: var(--shadow);
  animation: popIn 0.28s cubic-bezier(0.18, 0.9, 0.32, 1.3);
}
@keyframes popIn {
  from { transform: scale(0.86) translateY(18px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.panel-title {
  margin: 0 0 18px;
  font-size: clamp(20px, 5vw, 26px);
  text-align: center;
  color: var(--ink);
}

.setting-block { margin-bottom: 20px; }
.setting-label {
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.choice-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.choice-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.choice {
  border: 2px solid #dfe8f5;
  background: #f6f9ff;
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: clamp(10px, 3vw, 14px) 4px;
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.choice:active { transform: scale(0.94); }
.choice.selected {
  background: linear-gradient(180deg, #7ed0ff, #38a8f5);
  border-color: #2a93dd;
  color: #fff;
  box-shadow: 0 5px 14px rgba(56, 168, 245, 0.45);
}

.panel-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.panel-actions button { flex: 1; }

.btn-primary, .btn-secondary {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: clamp(12px, 3.4vw, 16px) 22px;
  font-size: clamp(15px, 4vw, 19px);
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 2px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-primary {
  background: linear-gradient(180deg, #63d6a3, #27b06a);
  color: #fff;
  box-shadow: 0 6px 0 #1d8d54, 0 10px 18px rgba(39, 176, 106, 0.35);
}
.btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #1d8d54; }
.btn-secondary {
  background: #eef3fb;
  color: var(--ink-soft);
  box-shadow: 0 4px 0 #d6e1f0;
}
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 #d6e1f0; }

/* =========================================================
   PLAY SCREEN
   ========================================================= */
#screen-play { padding-top: var(--safe-t); }

.play-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px calc(14px);
  flex: 0 0 auto;
}
.hud-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hud-label { font-size: clamp(11px, 3vw, 14px); color: var(--ink-soft); font-weight: 700; }
.hud-value { font-size: clamp(15px, 4vw, 19px); font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.hud-progress { flex: 1; max-width: 300px; }
.progress-track {
  flex: 1;
  min-width: 40px;
  height: 8px;
  border-radius: 99px;
  background: #dbe6f4;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 10%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7ed0ff, #38a8f5);
  transition: width 0.35s ease;
}
.hud-timer.low .hud-value { color: var(--bad); }
.hud-timer.low { animation: pulseLow 1s infinite; }
@keyframes pulseLow { 0%,100% { transform: scale(1);} 50% { transform: scale(1.06);} }

.play-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* 内容垂直居中，避免上方大片留白 */
  align-items: stretch;
  gap: clamp(6px, 1.4vh, 12px);
  padding: 6px clamp(10px, 3vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Question card — proportional height with a guaranteed 3D stage */
.question-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.question-text {
  flex: 0 0 auto;                 /* 题干固定高度，绝不被裁 */
  max-width: 100%;
}
.question-canvas-host {
  flex: 1 1 auto;
  min-height: 96px;
}
/* 图片题：舞台按 720x380 的比例吃满宽度，保证图完整显示 */
.question-canvas-host.has-image {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}
.question-canvas-host {
  flex: 1 1 auto;
  min-height: 84px;               /* 保证 3D 舞台有足够高度 */
  position: relative;
}
#question-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.question-text {
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(6px, 1.6vw, 10px) 16px;
  text-align: center;
  font-size: clamp(14px, 3.6vw, 20px);
  line-height: 1.35;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  border-top: 2px dashed #d8e6f7;
}

/* Answer card */
.answer-card {
  flex: 0 0 auto;
  background: var(--card-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(10px, 2.6vw, 16px) clamp(12px, 3vw, 20px);
}
.answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.answer-title {
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 800;
  color: var(--ink-soft);
}
.answer-tools { display: flex; gap: 8px; }
.tool-btn {
  border: 2px solid #dfe8f5;
  background: #f6f9ff;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s;
}
.tool-btn:active { transform: scale(0.92); }

/* equation area (dynamic) */
.equation-area {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.8vw, 12px);
  align-items: center;
}
.equation-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vw, 10px);
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;               /* 实在放不下就换行，绝不被裁掉 */
  row-gap: 8px;
}
/* compact 4-box row on narrow phones */
.equation-row .eq-box { flex: 0 1 auto; }
.eq-box {
  position: relative;
  width: clamp(46px, 11vw, 72px);
  height: clamp(46px, 11vw, 72px);
  border-radius: var(--radius-sm);
  border: 3px dashed #b9d4ee;
  background: #fbfdff;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.eq-box:active { transform: scale(0.96); }
.eq-box.focused {
  border-color: var(--primary-deep);
  border-style: solid;
  background: #f0f9ff;
  box-shadow: 0 0 0 4px rgba(79, 195, 247, 0.22);
}
/* filled state shows the entered number */
.eq-box.filled {
  border-style: solid;
  border-color: var(--primary-deep);
  background: #eaf7ff;
}
.eq-val {
  font-size: clamp(24px, 7vw, 46px);
  font-weight: 900;
  color: var(--primary-deep);
  line-height: 1;
  pointer-events: none;
}
.eq-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 5vw, 34px);
  color: #c7d8ea;
  font-weight: 800;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s;
}
.eq-box.filled .eq-ph,
.eq-box.has-ink .eq-ph { opacity: 0; }
.eq-box.readonly { opacity: 0.9; }


.eq-op {
  width: clamp(34px, 9vw, 62px);
  height: clamp(34px, 9vw, 62px);
  border-radius: 50%;
  border: 3px solid #dfe8f5;
  background: #f6f9ff;
  color: #b7c8dc;
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
  flex: 0 0 auto;
}
.eq-op:active { transform: scale(0.9); }
.eq-op.active-plus {
  background: linear-gradient(180deg, #63d6a3, #27b06a);
  border-color: #1d8d54;
  color: #fff;
  box-shadow: 0 5px 12px rgba(39,176,106,.4);
}
.eq-op.active-minus {
  background: linear-gradient(180deg, #ff9d8a, #ff6b52);
  border-color: #e24a30;
  color: #fff;
  box-shadow: 0 5px 12px rgba(255,107,82,.4);
}
/* fixed operator (when question kind prefills the op) */
.eq-op.fixed { cursor: default; }
.eq-op.fixed.active-plus, .eq-op.fixed.active-minus { cursor: default; }
.eq-eq {
  font-size: clamp(20px, 6vw, 40px);
  font-weight: 900;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

/* four-formula layout */
.equation-area.kind-four {
  gap: clamp(6px, 2vw, 10px);
}
.equation-area.kind-four .eq-box {
  width: clamp(46px, 12vw, 84px);
  height: clamp(46px, 12vw, 84px);
}
.equation-area.kind-four .eq-op {
  width: clamp(30px, 8vw, 48px);
  height: clamp(30px, 8vw, 48px);
  font-size: clamp(16px, 4.6vw, 26px);
}
.four-row-label {
  font-size: clamp(10px, 2.8vw, 12px);
  color: var(--ink-soft);
  font-weight: 700;
  width: clamp(16px, 4vw, 22px);
  text-align: center;
  flex: 0 0 auto;
}

.op-legend {
  margin-top: 10px;
  text-align: center;
  font-size: clamp(11px, 3vw, 13px);
  color: var(--ink-soft);
  opacity: 0.8;
}
.op-legend b { color: var(--primary-deep); font-size: 1.15em; }

/* footer next button */
/* =========================================================
   第三块：手写区
   ========================================================= */
.pad-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--card-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(12px, 2.6vw, 18px) clamp(14px, 3.2vw, 22px);
  border: 3px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.pad-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 5px rgba(79, 195, 247, 0.16), var(--shadow);
}
.pad-card.pulse { animation: padPulse 0.6s ease; }
@keyframes padPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.018); }
  100% { transform: scale(1); }
}
.pad-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pad-head .pad-title { flex: 0 0 auto; }
/* 中间的「识别到 X」徽章：占据剩余空间并居中 */
.pad-head .pad-live {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.pad-head .pad-tools { flex: 0 0 auto; }
.pad-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 800;
  color: var(--ink-soft);
}
.pad-ico { width: 1.1em; height: 1.1em; color: var(--primary-deep); }
.pad-canvas-host {
  position: relative;
  margin-top: 4px;
  margin-bottom: 4px;
  /* 手写板尽量大，但保持正方形 —— MNIST 模型依赖笔画长宽比正确，
     一旦被拉成扁长形，识别率会从 ~98% 掉到 13%。
     这里用可用空间的「短边」来决定边长，铺满整个区域。 */
  --pad-size: min(100%, var(--pad-avail-w, 100%), var(--pad-avail-h, 100%));
  width: var(--pad-size);
  height: var(--pad-size);
  flex: 0 0 auto;
  margin: 0 auto;
  border-radius: 16px;
  border: 2px dashed #b9d4ee;
  background: #fbfdff;          /* 不再画十字参考线 */
  overflow: hidden;
}
.pad-card.active .pad-canvas-host {
  border-color: var(--primary);
  border-style: solid;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(79, 195, 247, 0.14) 30px 31px),
    #f5fbff;
}
.pad-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.pad-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 700;
  color: #b6cadd;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pad-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.pad-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: clamp(7px, 1.8vw, 10px) clamp(16px, 4vw, 24px);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #66e08f, #2fbf68);
  box-shadow: 0 4px 0 #22a054, 0 8px 14px rgba(47, 191, 104, 0.3);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pad-ok:disabled {
  filter: grayscale(0.7) opacity(0.55);
  cursor: not-allowed;
  box-shadow: 0 3px 0 #b9cfc0;
}
.pad-ok:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #22a054; }

/* =========================================================
   下一题按钮 —— 糖果风立体按钮
   ========================================================= */
.play-footer {
  flex: 0 0 auto;
  padding: 8px 16px calc(10px + var(--safe-b));
  display: flex;
  justify-content: center;
}
.btn-next {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 2.4vw, 14px);
  min-width: clamp(190px, 44vw, 280px);
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: clamp(11px, 2.8vw, 16px) clamp(22px, 5vw, 36px);
  border-radius: 999px;
  background: linear-gradient(180deg, #7ee89f 0%, #34c46f 55%, #23a95c 100%);
  box-shadow:
    0 6px 0 #178f4a,
    0 12px 22px rgba(35, 169, 92, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: clamp(17px, 4.4vw, 23px);
  font-weight: 900;
  letter-spacing: 2px;
  overflow: hidden;
  transition: transform 0.09s ease, box-shadow 0.09s ease;
  -webkit-tap-highlight-color: transparent;
  animation: nextIdle 3s ease-in-out infinite;
}
.btn-next-text { position: relative; z-index: 2; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); }
.btn-next-arrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 6vw, 30px);
  height: clamp(24px, 6vw, 30px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.2s;
}
.next-ico { width: 60%; height: 60%; color: #fff; }
.btn-next::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: nextSheen 3.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes nextSheen {
  0%, 62% { left: -60%; }
  86%, 100% { left: 130%; }
}
@keyframes nextIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
.btn-next:hover {
  box-shadow: 0 7px 0 #178f4a, 0 16px 26px rgba(35, 169, 92, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.btn-next:hover .btn-next-arrow { transform: translateX(4px); }
.btn-next:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #178f4a, 0 6px 12px rgba(35, 169, 92, 0.36), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  animation: none;
}
.btn-next:active .btn-next-arrow { transform: translateX(2px); }

/* =========================================================
   RESULT SCREEN
   ========================================================= */
#screen-result {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--safe-t);
  padding-bottom: calc(16px + var(--safe-b));
}
.result-wrap {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 28px) clamp(12px, 3vw, 24px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vw, 22px);
}

.score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: popIn 0.5s cubic-bezier(0.18, 0.9, 0.32, 1.3);
}
.score-ring {
  width: clamp(130px, 34vw, 180px);
  height: clamp(130px, 34vw, 180px);
  border-radius: 50%;
  background: conic-gradient(var(--ok) 0deg, var(--ok) 0deg, #e6eef8 0deg);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: var(--shadow);
  transition: background 0.6s ease;
}
.score-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #fff;
}
.score-num {
  position: relative;
  font-size: clamp(40px, 11vw, 58px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-unit {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: -6px;
}
.score-msg {
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 900;
  color: var(--accent-2);
}

.result-stats {
  display: flex;
  gap: clamp(8px, 2.4vw, 16px);
  width: 100%;
  max-width: 520px;
}
.stat {
  flex: 1;
  background: var(--card-solid);
  border-radius: var(--radius-sm);
  padding: clamp(8px, 2.6vw, 14px) 6px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat span { font-size: clamp(20px, 5.5vw, 30px); font-weight: 900; line-height: 1.1; }
.stat em { font-style: normal; font-size: clamp(11px, 3vw, 13px); color: var(--ink-soft); font-weight: 700; }
.stat-ok span { color: var(--ok); }
.stat-bad span { color: var(--bad); }
.stat-total span { color: var(--primary-deep); }

.result-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.5vw, 14px);
  background: var(--card-solid);
  border-radius: var(--radius-sm);
  padding: clamp(8px, 2.4vw, 12px) clamp(10px, 3vw, 16px);
  box-shadow: var(--shadow-sm);
  border-left: 8px solid #dbe6f4;
  animation: slideIn 0.35s ease both;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px);} to { opacity: 1; transform: translateX(0);} }
.result-row.right { border-left-color: var(--ok); }
.result-row.wrong { border-left-color: var(--bad); }

.rr-index {
  width: clamp(26px, 7vw, 34px);
  height: clamp(26px, 7vw, 34px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #eef3fb;
  color: var(--ink-soft);
  font-weight: 900;
  font-size: clamp(12px, 3.4vw, 15px);
  display: grid;
  place-items: center;
}
.result-row.right .rr-index { background: #e6fbf0; color: var(--ok); }
.result-row.wrong .rr-index { background: #ffeaec; color: var(--bad); }

.rr-thumb {
  width: clamp(46px, 12vw, 64px);
  height: clamp(46px, 12vw, 64px);
  flex: 0 0 auto;
  border-radius: 10px;
  background: #f5f9ff;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 6vw, 30px);
  overflow: hidden;
}
.rr-thumb svg { width: 100%; height: 100%; }

.rr-body { flex: 1 1 auto; min-width: 0; }
.rr-q {
  font-size: clamp(12px, 3.3vw, 15px);
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 900;
}
.rr-yours { color: var(--bad); }
.rr-correct { color: var(--ok); }
.result-row.right .rr-yours { color: var(--ok); }
.rr-label { font-size: 0.72em; font-weight: 700; color: var(--ink-soft); margin-right: 3px; }
.rr-mark { font-size: clamp(18px, 5vw, 24px); flex: 0 0 auto; }

.result-actions {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-top: 4px;
}
.result-actions button { flex: 1; }

/* =========================================================
   LANDSCAPE PHONES / SHORT SCREENS
   ========================================================= */
@media (orientation: landscape) and (max-height: 560px) {
  .play-main {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
  }
  .question-card { flex: 1.35 1 0; }
  .answer-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .question-text { font-size: clamp(14px, 3.4vw, 18px); padding: 6px 10px; }
  .eq-box { width: clamp(48px, 11vw, 70px); height: clamp(48px, 11vw, 70px); }
  .eq-op { width: clamp(34px, 8vw, 44px); height: clamp(34px, 8vw, 44px); font-size: clamp(16px, 4vw, 22px); }
  .eq-eq { font-size: clamp(20px, 5vw, 28px); }
  .op-legend { display: none; }
  .answer-head { margin-bottom: 4px; }
  .play-footer { padding: 4px 14px calc(6px + var(--safe-b)); }
  .btn-next { min-width: 150px; }
  .home-wrap .home-tip { margin-top: 12px; }
}

/* =========================================================
   TABLET / DESKTOP
   ========================================================= */
@media (min-width: 820px) {
  /* ── PC 双栏：左 = 题目 ｜ 右 = 上答题 / 下书写 ── */
  .play-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 0.9fr);
    grid-template-areas:
      "question answer"
      "question pad";
    align-items: stretch;
    gap: 14px 18px;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  /* 左：题目卡占满整个高度 */
  .question-card {
    grid-area: question;
    height: 100%;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .question-canvas-host.has-image {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* 右上：答题（算式） */
  .answer-card {
    grid-area: answer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }
  .equation-area { gap: 8px; }
  .equation-row { row-gap: 6px; }

  /* 右下：手写板 */
  .pad-card {
    grid-area: pad;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pad-canvas-host {
    flex: 1 1 auto;
    height: auto;
    min-height: 86px;
  }

  /* 答题区放大：PC 有空间，框做得更大更好点 */
  .eq-box { width: 84px; height: 84px; font-size: 34px; }
  .eq-op { width: 54px; height: 54px; font-size: 27px; }
  .eq-eq { font-size: 40px; }
  .answer-card .answer-title { font-size: 16px; margin-bottom: 12px; }
  .answer-card { padding: 16px 20px; }

  .play-hud { padding: 14px 28px 6px; max-width: 1240px; width: 100%; margin: 0 auto; }
  .hud-progress { max-width: 420px; }
  .play-footer { padding-bottom: 16px; }
  .btn-next { min-width: 240px; }

  /* 一图四式：右栏更宽更高，题目仍完整显示 */
  .play-main.has-four {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: minmax(0, 1.45fr) minmax(0, 0.75fr);
  }
  .play-main.has-four .equation-area.kind-four .eq-box {
    width: 58px; height: 58px; font-size: 24px;
  }
  .play-main.has-four .equation-area.kind-four .eq-op {
    width: 38px; height: 38px; font-size: 18px;
  }
  .play-main.has-four .equation-area.kind-four .eq-eq { font-size: 28px; }
  .play-main.has-four .equation-row { margin-bottom: 2px; }

  .bracket-bar.show { height: 52px; }
  .bracket-svg { height: 52px; }
}

/* 宽屏再放宽一点 */
@media (min-width: 1280px) {
  .play-main { max-width: 1320px; }
  .eq-box { width: 70px; height: 70px; }
}

/* very large screens */
@media (min-width: 1200px) {
  .title { font-size: 120px; }
  .eq-box { width: 76px; height: 76px; }
}

/* tiny phones */
@media (max-height: 640px) and (orientation: portrait) {
  .home-tip { display: none; }
  .eq-box { width: clamp(54px, 15vw, 80px); height: clamp(54px, 15vw, 80px); }
  .play-main { gap: 6px; }
}

/* reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .title-line1, .title-line2 { animation: none; }
  .title .char { animation: none; opacity: 1; transform: none; }
  .hud-timer.low { animation: none; }
  .home-decor .decor { animation: none; }
  .btn-bunny { animation: none; }
  .btn-start.jumping, .btn-start.jumping .btn-bunny { animation: none; }
  .btn-start.jumping .btn-portal::before,
  .btn-start.jumping .btn-portal::after,
  .btn-start.jumping .btn-start-inner { animation: none; }
  .subtitle, .btn-start, .home-tip { animation: none; }
  .msg-star.lit { animation: none; opacity: 1; }
}

/* =========================================================
   实时识别徽章 + 数字纠正选择器
   ========================================================= */
.pad-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}
.pad-live.show { opacity: 1; transform: translateY(0) scale(1); }
.live-label {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 800;
  color: var(--ink-soft);
}
.live-digit {
  display: inline-grid;
  place-items: center;
  min-width: clamp(30px, 8vw, 40px);
  height: clamp(30px, 8vw, 40px);
  padding: 0 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, #d6f5e2, #a9e8c4);
  box-shadow: 0 2px 0 #7fcf9f, inset 0 1px 0 rgba(255,255,255,.7);
  color: #167a45;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  animation: liveDigitPop 0.32s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.live-digit.unsure {
  background: linear-gradient(180deg, #fff0d0, #ffdca0);
  box-shadow: 0 2px 0 #e0b46a, inset 0 1px 0 rgba(255,255,255,.7);
  color: #9a6410;
}
@keyframes liveDigitPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.live-conf {
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 800;
  color: #9fb6c9;
}
.live-tip {
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 800;
  color: #c98a2a;
}

/* ---- digit picker (correcting a filled box) ---- */
.digit-picker {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 48, 72, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  padding: 16px;
}
.digit-picker.show { opacity: 1; visibility: visible; }
.picker-card {
  width: min(340px, 92vw);
  background: #fff;
  border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 44px rgba(20, 60, 100, 0.34);
  transform: scale(0.9) translateY(10px);
  transition: transform 0.26s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.digit-picker.show .picker-card { transform: scale(1) translateY(0); }
.picker-title {
  text-align: center;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 900;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pick-key {
  border: none;
  border-radius: 14px;
  padding: clamp(10px, 3vw, 14px) 0;
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 900;
  color: #24506f;
  background: linear-gradient(180deg, #fbfdff, #e8f3fc);
  box-shadow: 0 3px 0 #cfe4f3;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.pick-key:active { transform: translateY(3px); box-shadow: 0 0 0 #cfe4f3; }
.picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pick-clear, .pick-cancel {
  border: none;
  border-radius: 14px;
  padding: clamp(9px, 2.4vw, 12px) 0;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.08s;
}
.pick-clear { background: #ffe9e6; color: #c04a3a; box-shadow: 0 3px 0 #f2c4bd; }
.pick-cancel { background: #eef4f9; color: #6b8299; box-shadow: 0 3px 0 #d9e6f0; }
.pick-clear:active, .pick-cancel:active { transform: translateY(3px); }

/* =========================================================
   下一题按钮：全部填完时的提示动画
   ========================================================= */
.btn-next.nudge {
  animation: nextNudge 0.7s cubic-bezier(0.3, 1.6, 0.4, 1) 3;
}
@keyframes nextNudge {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.06); }
  60% { transform: translateY(0) scale(0.98); }
}

/* =========================================================
   题干置顶 + 大括号条带（看图列式的标志性符号）
   ========================================================= */
.question-text {
  order: -1;                       /* 强制排到最上面 */
  border-top: none;
  border-bottom: 2px dashed #d8e6f7;
}

/* 大括号放在 3D 图下方单独一行，绝不与物件重叠 */
.bracket-bar {
  flex: 0 0 auto;
  height: 0;
  overflow: visible;
  position: relative;
  transition: height 0.2s ease;
}
.bracket-bar.show { height: 52px; }

/* 课本同款下大括号：横向贝塞尔路径，铺满卡片宽度 */
.bracket-svg {
  position: absolute;
  left: 10px;
  right: 10px;
  top: -4px;
  width: calc(100% - 20px);
  height: 52px;
  overflow: visible;
  display: block;
}
.bracket-svg path {
  fill: none;
  stroke: #7a5cc4;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* 大括号下方的数字 / 问号标签 */
.bracket-label {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  padding: 1px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(14px, 3.4vw, 18px);
  white-space: nowrap;
  background: #fff;
  border: 2.5px solid #7a5cc4;
  color: #5b3fa8;
  box-shadow: 0 3px 0 rgba(122, 92, 196, 0.25);
  z-index: 2;
}
.bracket-label.ask {
  color: #e0632c;
  border-color: #f08b4f;
  box-shadow: 0 3px 0 rgba(240, 139, 79, 0.3);
  font-size: clamp(17px, 4.2vw, 22px);
  animation: askPulse2 1.6s ease-in-out infinite;
}
@keyframes askPulse2 {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.1); }
}

/* 求部分题：未知那组显示一个大问号（叠在 3D 画布上该组位置） */
.group-ask {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 900;
  color: #f08b4f;
  text-shadow: 0 3px 0 rgba(240, 139, 79, 0.3);
  transform: translate(-50%, -50%);
  animation: askPulse2 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* =========================================================
   实时识别徽章 + 数字纠正选择器
   ========================================================= */
.pad-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}
.pad-live.show { opacity: 1; transform: translateY(0) scale(1); }
.live-label {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 800;
  color: var(--ink-soft);
}
.live-digit {
  display: inline-grid;
  place-items: center;
  min-width: clamp(30px, 8vw, 40px);
  height: clamp(30px, 8vw, 40px);
  padding: 0 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, #d6f5e2, #a9e8c4);
  box-shadow: 0 2px 0 #7fcf9f, inset 0 1px 0 rgba(255,255,255,.7);
  color: #167a45;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  animation: liveDigitPop 0.32s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.live-digit.unsure {
  background: linear-gradient(180deg, #fff0d0, #ffdca0);
  box-shadow: 0 2px 0 #e0b46a, inset 0 1px 0 rgba(255,255,255,.7);
  color: #9a6410;
}
@keyframes liveDigitPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.live-conf {
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 800;
  color: #9fb6c9;
}
.live-tip {
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 800;
  color: #c98a2a;
}

/* ---- digit picker (correcting a filled box) ---- */
.digit-picker {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 48, 72, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  padding: 16px;
}
.digit-picker.show { opacity: 1; visibility: visible; }
.picker-card {
  width: min(340px, 92vw);
  background: #fff;
  border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 44px rgba(20, 60, 100, 0.34);
  transform: scale(0.9) translateY(10px);
  transition: transform 0.26s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.digit-picker.show .picker-card { transform: scale(1) translateY(0); }
.picker-title {
  text-align: center;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 900;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pick-key {
  border: none;
  border-radius: 14px;
  padding: clamp(10px, 3vw, 14px) 0;
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 900;
  color: #24506f;
  background: linear-gradient(180deg, #fbfdff, #e8f3fc);
  box-shadow: 0 3px 0 #cfe4f3;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.pick-key:active { transform: translateY(3px); box-shadow: 0 0 0 #cfe4f3; }
.picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pick-clear, .pick-cancel {
  border: none;
  border-radius: 14px;
  padding: clamp(9px, 2.4vw, 12px) 0;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.08s;
}
.pick-clear { background: #ffe9e6; color: #c04a3a; box-shadow: 0 3px 0 #f2c4bd; }
.pick-cancel { background: #eef4f9; color: #6b8299; box-shadow: 0 3px 0 #d9e6f0; }
.pick-clear:active, .pick-cancel:active { transform: translateY(3px); }

/* =========================================================
   下一题按钮：全部填完时的提示动画
   ========================================================= */
.btn-next.nudge {
  animation: nextNudge 0.7s cubic-bezier(0.3, 1.6, 0.4, 1) 3;
}
@keyframes nextNudge {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.06); }
  60% { transform: translateY(0) scale(0.98); }
}

/* =========================================================
   题干置顶 + 大括号（看图列式的标志性符号）
   ========================================================= */
.question-card {
  /* 题干在上，图在下 */
  flex-direction: column;
}
.question-text {
  order: -1;                       /* 强制排到最上面 */
  border-top: none;
  border-bottom: 2px dashed #d8e6f7;
}

.bracket-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.bracket-overlay.show { display: block; }

/* 下大括号：用两条斜线 + 中间尖角拼出来 */
.bracket-arc {
  position: absolute;
  height: 22px;
  border: 3px solid #7a5cc4;
  border-top: none;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-sizing: border-box;
}
.bracket-arc.left  { border-right: none; }
.bracket-arc.right { border-left: none; }

.bracket-point {
  position: absolute;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid #7a5cc4;
  transform: translateX(-50%);
}

/* 大括号下方的数字 / 问号标签 */
.bracket-label {
  position: absolute;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(14px, 3.4vw, 19px);
  white-space: nowrap;
  background: #fff;
  border: 2.5px solid #7a5cc4;
  color: #5b3fa8;
  box-shadow: 0 3px 0 rgba(122, 92, 196, 0.28);
}
.bracket-label.ask {
  color: #e0632c;
  border-color: #f08b4f;
  box-shadow: 0 3px 0 rgba(240, 139, 79, 0.3);
  font-size: clamp(18px, 4.4vw, 24px);
  animation: askPulse 1.6s ease-in-out infinite;
}
@keyframes askPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.12); }
}

/* 单组问号（求部分时那组用问号代替数字） */
.group-ask {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 900;
  color: #f08b4f;
  text-shadow: 0 3px 0 rgba(240, 139, 79, 0.28);
  animation: askPulse 1.6s ease-in-out infinite;
}

/* =========================================================
   教材原图题（kind: "image"）
   ========================================================= */
.question-image {
  display: none;
  position: absolute;
  inset: 4px 6px;
  width: calc(100% - 12px);
  height: calc(100% - 8px);
  object-fit: contain;              /* 整张图完整可见，绝不裁切 */
  object-position: center center;
  background: #fff;
  border-radius: 10px;
}

/* 题目区兜底：任何题型下图片都必须完整显示
   —— 用 flex 让容器把图片的可用空间撑到最大 */
.question-canvas-host.has-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(110px, 22vh, 260px);
}
/* 四道算式时答题区更高，但题目图仍有保底高度，绝不压扁 */
.play-main.has-four .question-canvas-host.has-image {
  min-height: clamp(120px, 24vh, 280px);
}
.question-canvas-host.has-image .question-image { display: block; }
.question-canvas-host.has-image canvas { visibility: hidden; }

/* =========================================================
   分组标签：让 3D 场景里能看出「原来 / 又长出」是两组
   ========================================================= */
.group-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 8%;
  gap: 8px;
}
.group-label {
  padding: 1px 10px;
  border-radius: 999px;
  font-size: clamp(11px, 2.6vw, 14px);
  font-weight: 800;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid #7ec4f0;
  color: #2b6ea8;
  box-shadow: 0 2px 0 rgba(126, 196, 240, 0.35);
  white-space: nowrap;
}
.group-label.b {
  border-color: #f0a94f;
  color: #b5651a;
  box-shadow: 0 2px 0 rgba(240, 169, 79, 0.35);
}

/* 静音图标：进入答题页后隐藏（用户要求） */
body.screen-play .sound-toggle { display: none; }

/* 全图片题：题目区尽量大，右下角算式区紧凑 */
.question-canvas-host.has-image {
  flex: 1 1 auto;
  min-height: 140px;
}
.question-image {
  inset: 4px 6px;
  width: calc(100% - 12px);
  height: calc(100% - 8px);
}

/* =========================================================
   一图四式：4 行算式 -> 用更小的框，保证整块放得下
   ========================================================= */
.equation-area.kind-four { gap: 6px; width: 100%; }
.equation-area.kind-four .equation-row {
  gap: 5px; row-gap: 5px; flex-wrap: nowrap;
}
.equation-area.kind-four .eq-box {
  width: clamp(38px, 9vw, 52px);
  height: clamp(38px, 9vw, 52px);
  border-width: 2px;
  font-size: clamp(16px, 4vw, 22px);
}
.equation-area.kind-four .eq-op {
  width: clamp(26px, 6vw, 34px);
  height: clamp(26px, 6vw, 34px);
  font-size: clamp(13px, 3.4vw, 17px);
  border-width: 2px;
}
.equation-area.kind-four .eq-eq { font-size: clamp(18px, 4.6vw, 24px); padding: 0 2px; }
.equation-area.kind-four .four-row-label { width: 16px; font-size: 11px; }

/* 移动端通用：内容多时整页可滚动，绝不把题目压没 */
@media (max-width: 819px) {
  .play-main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .play-main:not(.pc-layout) .question-card {
    flex: 0 0 auto;              /* 移动端题目卡不被压缩 */
  }
  .play-main:not(.pc-layout) .answer-card,
  .play-main:not(.pc-layout) .pad-card {
    flex: 0 0 auto;
  }
  .play-main .question-canvas-host.has-image {
    min-height: clamp(130px, 30vw, 220px);
    flex: 0 0 auto;
  }
}

/* 四道算式：移动端题目图至少 120px，四行算式可滚动 */
@media (max-width: 819px) {
  .play-main.has-four .question-canvas-host.has-image {
    min-height: clamp(120px, 26vh, 200px);
  }
  .play-main.has-four .answer-card {
    max-height: 42vh;
  }
  .answer-card.kind-four { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

.answer-card.kind-four {
  justify-content: flex-start;
  overflow-y: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 题目类型按钮上的数量角标 */
#choice-range .choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#choice-range .choice-count {
  font-style: normal;
  font-size: 0.82em;
  font-weight: 700;
  opacity: 0.65;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 0 7px;
  line-height: 1.5;
}
#choice-range .choice.selected .choice-count {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.35);
}

/* 预览填入：识别到但还没点「写好了」——浅色+虚线边框，孩子可以继续写 */
.eq-box.preview {
  border-color: #ffbe5c !important;
  border-style: dashed !important;
  background: #fffdf5 !important;
}
.eq-box.preview .eq-val {
  color: #d99a2b !important;
  opacity: 0.85;
}

/* 等待孩子选择 ＋ / − 时，运算符按钮闪动提示 */
.eq-op-wrap.op-waiting,
div.op-waiting {
  animation: opPulse 0.9s ease-in-out infinite;
  border-radius: 999px;
}
div.op-waiting .eq-op {
  border-color: #ffb020 !important;
  color: #ff9d00 !important;
  background: #fff8e8 !important;
  box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.22);
}
@keyframes opPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* =========================================================
   结果页：逐题核对卡（题目文字 + 图片 + 答案对照）
   ========================================================= */
.result-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.result-card {
  background: #fff;
  border-radius: 16px;
  border: 2px solid #e2ecf7;
  box-shadow: 0 4px 14px rgba(31, 75, 120, 0.08);
  padding: 12px 14px;
  animation: rcIn 0.36s ease both;
}
.result-card.right { border-color: #bfe8cd; }
.result-card.wrong { border-color: #fbc9c9; }
@keyframes rcIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rc-no {
  font-size: 14px;
  font-weight: 900;
  color: #1f4b78;
}
.rc-tag {
  font-size: 11px;
  font-weight: 700;
  color: #4a6fa5;
  background: #eaf2fb;
  border-radius: 999px;
  padding: 2px 8px;
}
.rc-mark { margin-left: auto; display: inline-flex; }
.mark-ico { width: 22px; height: 22px; }
.mark-ico.ok { color: #35a860; }
.mark-ico.bad { color: #e05252; }

.rc-q {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
  color: #23446b;
  margin-bottom: 10px;
}

/* 题目图片：完整显示，不裁切 */
.rc-fig {
  position: relative;
  background: #fbfdff;
  border: 1px dashed #d3e3f5;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.18s;
}
.rc-img:hover { transform: scale(1.015); }
.rc-zoom {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 10px;
  color: #9db6d0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 1px 8px;
  pointer-events: none;
}

/* 答案对照 */
.rc-ans { display: flex; flex-direction: column; gap: 6px; }
.rc-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f6f9fd;
}
.rc-line .rc-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  color: #7d97b5;
  letter-spacing: 0.5px;
}
.rc-line .rc-val {
  font-weight: 800;
  color: #23446b;
  word-break: break-all;
}
.rc-yours.ok  { background: #eefaf1; }
.rc-yours.bad { background: #fdf0f0; }
.rc-yours.bad .rc-val { color: #c33; }
.rc-correct .rc-val { color: #1a7f4b; }

/* 全屏看图 */
.figure-viewer {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 52, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
  cursor: zoom-out;
}
.figure-viewer.show { display: flex; }
.fv-inner {
  max-width: 96vw;
  max-height: 92vh;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fv-img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
}
.fv-cap {
  font-size: 13px;
  font-weight: 700;
  color: #1f4b78;
  text-align: center;
  padding: 0 6px 4px;
}

/* 移动端 */
@media (max-width: 819px) {
  .rc-img { max-height: 180px; }
  .rc-q { font-size: 14px; }
  .rc-line { font-size: 13px; }
}

/* 首页：更新题库按钮 */
.btn-update-bank {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid #cfe0f2;
  background: rgba(255, 255, 255, 0.9);
  color: #4a6fa5;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
.btn-update-bank:hover {
  transform: translateY(-2px);
  border-color: #9dc6ea;
  background: #fff;
  box-shadow: 0 6px 16px rgba(31, 75, 120, 0.14);
}
.btn-update-bank:active { transform: translateY(0) scale(0.98); }
.btn-update-bank.busy {
  pointer-events: none;
  opacity: 0.8;
  border-color: #ffc93c;
  color: #b8860b;
}
.btn-update-bank.busy .upd-ico {
  animation: updSpin 0.9s linear infinite;
}
.upd-ico { width: 16px; height: 16px; }
@keyframes updSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   题库不足提示弹层
   ========================================================= */
.bank-warn {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 52, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.bank-warn.show { display: flex; }
.bw-box {
  background: #fff;
  border-radius: 20px;
  padding: 26px 24px 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(15, 32, 52, 0.28);
  animation: bwIn 0.28s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes bwIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bw-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fff5e0;
  display: grid;
  place-items: center;
}
.bw-ico { width: 30px; height: 30px; color: #f0a020; }
.bw-title {
  font-size: 19px;
  font-weight: 900;
  color: #1f4b78;
  margin-bottom: 12px;
}
.bw-detail {
  font-size: 14px;
  line-height: 1.7;
  color: #47617e;
  background: #f6f9fd;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.bw-advice {
  font-size: 13px;
  line-height: 1.7;
  color: #8a6d1f;
  background: #fffbe9;
  border: 1px solid #ffe9a8;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  text-align: left;
}
.bw-btn {
  padding: 11px 40px;
  border: none;
  border-radius: 999px;
  background: #4a9de0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.bw-btn:hover { background: #3a8dd0; transform: translateY(-1px); }
.bw-btn:active { transform: scale(0.97); }

/* =========================================================
   结果页庆祝 / 鼓励动画
   ========================================================= */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* 不挡点击 */
  overflow: hidden;
  z-index: 60;
}

/* ---------- 彩带雨（>=80 分） ---------- */
.fx-confetti {
  position: absolute;
  top: -24px;
  display: block;
  animation-name: confettiFall;
  animation-timing-function: linear;
  animation-fill-mode: both;
  will-change: transform, opacity;
}
@keyframes confettiFall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    opacity: 0;
  }
  8% { opacity: 1; }
  100% {
    transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(var(--rot, 360deg));
    opacity: 0.9;
  }
}

/* ---------- 星星迸发 ---------- */
.fx-star {
  position: absolute;
  color: #ffd93d;
  text-shadow: 0 0 10px rgba(255, 217, 61, 0.8);
  animation: starBurst 1.5s cubic-bezier(0.15, 0.85, 0.3, 1) both;
  will-change: transform, opacity;
}
@keyframes starBurst {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
               scale(1.15) rotate(200deg);
    opacity: 0;
  }
}

/* ---------- 奖杯弹出 ---------- */
.fx-trophy {
  position: absolute;
  left: 50%;
  top: 22vh;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: trophyPop 2.6s cubic-bezier(0.2, 1.3, 0.35, 1) both;
}
.fx-trophy-svg {
  width: clamp(74px, 16vw, 116px);
  height: clamp(74px, 16vw, 116px);
  filter: drop-shadow(0 8px 18px rgba(230, 173, 0, 0.45));
}
.fx-trophy-text {
  font-size: clamp(17px, 4.2vw, 24px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #e6ad00, 0 4px 14px rgba(230, 173, 0, 0.6);
  letter-spacing: 2px;
}
@keyframes trophyPop {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-18deg); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.18) rotate(6deg);  opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  75%  { transform: translate(-50%, -58%) scale(1.03) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* ---------- 温柔气泡（<80 分） ---------- */
.fx-bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  opacity: 0;
  animation-name: bubbleRise;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  will-change: transform, opacity;
}
@keyframes bubbleRise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% { opacity: 0.55; }
  70% { opacity: 0.45; }
  100% {
    transform: translateY(-105vh) scale(1.1);
    opacity: 0;
  }
}

/* ---------- 再接再厉气泡 ---------- */
.fx-encourage {
  position: absolute;
  left: 50%;
  top: 26vh;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 22px;
  padding: 16px 26px 16px;
  box-shadow: 0 14px 36px rgba(31, 75, 120, 0.18);
  border: 2px solid #ffe9a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: encIn 2.8s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.fx-enc-emoji { line-height: 0; }
.fx-enc-svg {
  width: clamp(48px, 11vw, 66px);
  height: clamp(48px, 11vw, 66px);
  animation: encWobble 2.2s ease-in-out infinite;
}
.fx-enc-title {
  font-size: clamp(16px, 4vw, 21px);
  font-weight: 900;
  color: #c99a00;
}
.fx-enc-sub {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 700;
  color: #a08a4a;
}
@keyframes encIn {
  0%   { transform: translate(-50%, -50%) scale(0.7) translateY(14px); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.04) translateY(0);    opacity: 1; }
  32%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes encWobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  .fx-confetti, .fx-star, .fx-bubble { display: none; }
  .fx-trophy, .fx-encourage { animation-duration: 0.4s; }
}