/* ===========================================================================
 * 开心格 · 数学题型训练样式
 * 复用全站 :root 品牌色与按钮（.btn / .btn-primary / .btn-outline / .hidden）。
 * 全程无 emoji，图标走内联 SVG。遵循团队 preference：
 *   · 强调色边卡片 → 彩色边两角直角（topic-card 顶部色条）
 *   · 计数为 0 显示「—」（math.js 的 dash() 输出，含中文量词避歧义）
 *   · 手机端比电脑端更简：窄屏删修饰、放大点击区（见文末媒体查询）
 *   · 复用 game_layout 共享壳，顶栏稳定
 * =========================================================================== */

/* LegalSnap 同款标题字体：拉丁 Funnel Sans + 中文 阿里巴巴普惠体 3 Heavy（仅数学页用） */
@font-face {
  font-family: "Alibaba PuHuiTi 3";
  src: url("https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-105-heavy@1.0.0/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
:root {
  --math-title: "Funnel Sans", "Alibaba PuHuiTi 3", "HarmonyOS Sans SC",
    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}
/* 数学部分的标题统一用该字体（中文走阿里巴巴普惠体 Heavy，拉丁/数字走 Funnel Sans 700） */
.math-main .page-title,
.grade-card .g-badge, .grade-card .g-name,
.topic-name,
.trainer-topic-name,
.problem-prompt,
.math-celebrate-title {
  font-family: var(--math-title);
  font-weight: 700;
}

/* 整个数学区水平居中。width:100%：手机端外壳是竖排 flex，带 auto 外边距的子项不会自动撑满，内容窄时会缩成一小条 */
.math-main { width: 100%; max-width: 920px; margin: 0 auto; }
.math-intro { color: #6b7280; font-size: 0.92rem; font-weight: 600; margin: -4px 0 18px; }

/* 内联图标通用 */
.ic { display: inline-block; vertical-align: middle; width: 1em; height: 1em; line-height: 0; }

/* -------------------------------------------------------------- 年级选择 -- */
/* 重设计：大号分段卡，序号徽标 + 题型数，每个年级独立强调色，选中实心更醒目 */
.math-home .main-header-row { margin-bottom: 18px; }
.grade-pick { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.grade-card {
  --g: var(--blue);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 12px;
  background: var(--white); border: 2.5px solid #e9edf4; border-radius: 18px;
  cursor: pointer; font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.grade-card:hover { transform: translateY(-2px); border-color: var(--g); box-shadow: 0 8px 20px -10px var(--g); }
.grade-card .g-badge {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px;
  background: #eef2fb; background: color-mix(in oklab, var(--g) 14%, white);
  color: var(--g); display: grid; place-items: center;
  font-size: 1.45rem; font-weight: 900; transition: all 0.15s;
}
.grade-card .g-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.grade-card .g-name { font-size: 1.02rem; font-weight: 800; color: var(--dark); white-space: nowrap; }
.grade-card .g-sub { font-size: 0.72rem; font-weight: 700; color: #9aa3b2; margin-top: 2px; white-space: nowrap; }
.grade-card.active { background: var(--g); border-color: var(--g); box-shadow: 0 10px 24px -10px var(--g); }
.grade-card.active .g-badge { background: rgba(255, 255, 255, 0.22); color: var(--white); }
.grade-card.active .g-name { color: var(--white); }
.grade-card.active .g-sub { color: rgba(255, 255, 255, 0.85); }

/* -------------------------------------------------------------- 题型卡片 -- */
/* 重设计：图标进彩色方块 + 进度环（替代皇冠）+ 描述 + 细进度条 + 「开始 ›」 */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.topic-card {
  --accent: var(--blue);
  position: relative; display: flex; flex-direction: column; gap: 12px;
  text-align: left; font-family: inherit;
  background: var(--white); border: 2px solid #eef1f6; border-radius: 20px;
  padding: 18px 18px 16px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.topic-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 45%, white); box-shadow: 0 16px 30px -16px var(--accent); }
.topic-card:active { transform: translateY(-1px); }
.topic-head { display: flex; align-items: center; justify-content: space-between; }
.topic-ic-wrap {
  width: 54px; height: 54px; border-radius: 16px;
  background: #f1f4f9; background: color-mix(in oklab, var(--accent) 13%, white);
  display: grid; place-items: center; line-height: 0;
}
.topic-ic { width: 32px; height: 32px; }
.topic-ring { width: 38px; height: 38px; flex-shrink: 0; }
.topic-ring-num { font-size: 0.66rem; font-weight: 800; fill: #9aa3b2; }
.topic-name { font-size: 1.1rem; font-weight: 800; color: var(--dark); }
.topic-desc { font-size: 0.8rem; color: #8a93a3; font-weight: 600; line-height: 1.45; min-height: 2.3em; }
.topic-bar { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.topic-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s; }
.topic-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.topic-count { font-size: 0.74rem; color: #9aa3b2; font-weight: 700; }
.topic-count b { color: var(--dark); }
.topic-go { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 800; color: var(--accent); letter-spacing: 0.3px; }
.topic-go svg { width: 15px; height: 15px; }
.topic-card:hover .topic-go svg { transform: translateX(3px); transition: transform 0.15s; }

/* =============================================================== 训练区 == */
.math-trainer { max-width: 600px; margin: 0 auto; }
/* 标题在左、返回按钮在右上角（留在 math-trainer 容器内） */
.trainer-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.trainer-back { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: #5a6475; background: var(--light); border: 1.5px solid #e3e7ee; border-radius: 999px; padding: 6px 14px 6px 12px; cursor: pointer; flex-shrink: 0; align-self: flex-start; transition: all 0.15s; }
.trainer-back svg { width: 16px; height: 16px; }
.trainer-back:hover { color: var(--blue); border-color: var(--blue); background: #eef4ff; }
.trainer-title-group { flex: 1; min-width: 0; }
.trainer-topic-name { display: flex; align-items: center; gap: 8px; font-size: 1.45rem; font-weight: 800; color: var(--dark); }
.trainer-topic-ic { line-height: 0; }
.trainer-topic-ic .topic-ic { width: 28px; height: 28px; }
.trainer-grade-name { display: block; font-size: 0.8rem; font-weight: 700; color: #9aa3b2; margin-top: 1px; }

/* 难度条（缺砖数） */
.trainer-diff { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.trainer-diff .diff-label { font-size: 0.78rem; font-weight: 800; color: #6b7280; flex-shrink: 0; }
.diff-segs { display: flex; gap: 6px; flex-wrap: wrap; }
.diff-opt { font-family: inherit; font-size: 0.8rem; font-weight: 800; padding: 5px 13px; border: 2px solid #e3e7ee; border-radius: 999px; background: var(--white); color: #6b7280; cursor: pointer; transition: all 0.15s; }
.diff-opt:hover { border-color: var(--blue); color: var(--blue); }
.diff-opt.active { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }

.trainer-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.trainer-progress-track { flex: 1; height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.trainer-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green), #46d98a); transition: width 0.4s; }
.trainer-progress-label { font-size: 0.78rem; font-weight: 800; color: #6b7280; white-space: nowrap; }

/* 题卡 */
.problem-card { background: var(--white); border: 1.5px solid #eef1f6; border-radius: 18px; box-shadow: var(--shadow-sm); padding: 22px 20px; transition: box-shadow 0.2s; }
.problem-card.solved { box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.35), var(--shadow); }
.problem-prompt { font-size: 1.35rem; font-weight: 800; color: var(--dark); text-align: center; letter-spacing: 0.5px; margin-bottom: 14px; }

/* 知识点小卡（体现该题型的关键方法） */
.problem-knowledge { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
/* 标签即标签：只放要点名，干净的胶囊，不挂描述 */
.kp-chip { display: inline-flex; align-items: center; background: #eef4ff; border: 1.5px solid #d8e6ff; color: var(--blue); border-radius: 999px; padding: 4px 13px; font-size: 0.78rem; font-weight: 800; line-height: 1.3; }

.problem-visual { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 60px; margin-bottom: 16px; }
.problem-visual:empty { display: none; }

/* ------ 砖墙 ------ */
.brick-svg { width: 100%; max-width: 380px; height: auto; }
.row-hi { fill: none; stroke-width: 2.5; stroke-dasharray: 5 3; animation: holePulse 1s ease-in-out infinite; }
.hole-hi { fill: rgba(46, 184, 114, 0.16); stroke: #2EB872; stroke-width: 2; stroke-dasharray: 4 3; animation: holePulse 1s ease-in-out infinite; }
.half-tag { fill: #2C3E50; font-size: 11px; font-weight: 900; text-anchor: middle; }
@keyframes holePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.brick-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-size: 0.76rem; font-weight: 700; color: #6b7280; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; height: 15px; border: 1px solid #9A6B42; border-radius: 2px; }
.sw-whole { width: 26px; background: #B97E50; }
.sw-half { width: 13px; background: #D8A878; }

/* ------ 十格阵（凑十/破十） ------ */
.ten-frames { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ten-frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px; border: 2px solid #cfd6e4; border-radius: 8px; background: #fafbfd; }
.tf-cell { position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.tf-cell::after { content: ''; width: 17px; height: 17px; border-radius: 50%; }
.tf-blue::after { background: var(--blue); }
.tf-orange::after { background: var(--orange); }
.tf-cell.glow { box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.55); }
.tf-cell.crossed::before { content: '\00D7'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--red); font-weight: 900; font-size: 1.2rem; }

/* ------ 数一数（彩色形状） ------ */
.obj-grid { display: flex; flex-wrap: wrap; gap: 8px; max-width: 340px; justify-content: center; }
.obj-shape { line-height: 0; border-radius: 8px; padding: 2px; transition: all 0.15s; }
.obj-shape svg { width: 30px; height: 30px; display: block; }
.obj-shape.glow { background: rgba(0, 200, 83, 0.18); transform: scale(1.12); }
.obj-break { flex-basis: 100%; height: 0; }

/* ------ 竖式（100以内加减） ------ */
.vmath { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--dark); display: inline-block; }
.vrow { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.vop { width: 28px; text-align: center; font-size: 1.5rem; color: var(--blue); }
.vcell { width: 34px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border-radius: 6px; }
.vcell.glow { background: rgba(74, 144, 255, 0.16); box-shadow: 0 0 0 2px rgba(74, 144, 255, 0.4); }
.vline { height: 3px; background: var(--dark); border-radius: 2px; margin: 4px 0; }
.vans .vcell { color: var(--blue); }

/* ------ 点阵（乘法） ------ */
.dot-array { display: inline-flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 10px; }
.dot-row { display: flex; gap: 5px; padding: 2px 4px; border-radius: 6px; transition: background 0.15s; }
.dot-row.glow { background: rgba(255, 90, 90, 0.14); }
.array-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--red); }

/* ------ 数方块（立体） ------ */
.cube-svg { width: 100%; max-width: 280px; height: auto; }
.cube-hi-rect { fill: rgba(74, 144, 255, 0.14); stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 3; animation: holePulse 1s ease-in-out infinite; }

/* ------ 分类与整理（两级分类树） ------ */
/* 轻松一点的画法：框不画硬边，用柔和的底色；每个大组一个颜色，它下面的小组跟着同一个颜色 */
.math-trainer.wide { max-width: 780px; }
.tone-0 { --tone: #4A90FF; --ink: #2f6fd6; --tint: #eef4ff; --soft: #c3dafe; --mid: #94bdff; }
.tone-1 { --tone: #FF9234; --ink: #c2610c; --tint: #fff4ea; --soft: #ffd9b5; --mid: #ffbb80; }
.tone-2 { --tone: #2EB872; --ink: #1e8f58; --tint: #eaf8f1; --soft: #bfe9d3; --mid: #8fd9b3; }
.tone-3 { --tone: #A78BFA; --ink: #6d4fd1; --tint: #f3effe; --soft: #dcd0fb; --mid: #c4b1f7; }
/* grid minmax(0,1fr)：track 最小宽 = 0，里面有横向滚动的长金条时，不把整页撑宽 */
.sort-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; user-select: none; -webkit-user-select: none; }
/* 步骤行：序号小签比旁边的字小一档、四周留足内边距，和文字用 flex 居中对齐 */
.sort-step { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; line-height: 1.5; font-weight: 700; color: var(--dark); }
.sort-step-no { flex-shrink: 0; white-space: nowrap; font-size: 0.78rem; line-height: 1.5; letter-spacing: 0.5px; padding: 4px 12px; border-radius: 999px; background: #eaf2ff; color: var(--blue); }
.sort-redo { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-family: inherit; font-size: 0.8rem; font-weight: 700; height: 28px; padding: 0 12px; border: none; border-radius: 999px; background: #f1f4f9; color: #5a6475; cursor: pointer; }
.sort-redo:hover { background: #eaf2ff; color: var(--blue); }

/* 待分的一排 + 每一个要分的东西（数 / 国家 / 卡片） */
.sort-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; min-height: 56px; padding: 4px; border: 1.5px solid transparent; border-radius: 16px; }
.sort-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; white-space: nowrap; cursor: grab; touch-action: none; background: var(--white); border: 1.5px solid #dfe4ee; box-shadow: 0 1px 3px rgba(20, 28, 46, 0.08); color: var(--dark); font-weight: 700; transition: transform 0.12s, box-shadow 0.12s; }
.chip-num { width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.chip-country { gap: 6px; height: 38px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 0.95rem; }
.chip-country img { width: 26px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); pointer-events: none; }
.chip-card { flex-direction: column; gap: 2px; padding: 3px; border: none; border-radius: 10px; background: transparent; box-shadow: none; }
.chip-card svg { width: 50px; height: 50px; display: block; pointer-events: none; }
.chip-no { font-style: normal; font-size: 0.85rem; line-height: 1.1; color: #5a6475; }
.sort-chip.picked { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.6); }
.sort-chip.hint { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(46, 184, 114, 0.7); }
.sort-chip.bad { box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.65); animation: shakeX 0.45s; }
.sort-chip.dragging { opacity: 0.3; }
.sort-ghost { position: fixed; z-index: 1300; margin: 0; pointer-events: none; transform: scale(1.1); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); }
.sort-board.locked .sort-chip, .sort-board.locked .ball, .sort-board.locked .pack, .sort-board.locked .gold-chip { cursor: default; }

/* 框：第 1 步的大组框、第 2 步树上的大组（node）和小组框 */
.sort-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sort-bin, .sort-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 10px 6px 12px; border: 1.5px solid transparent; border-radius: 16px; background: var(--tint, #f5f7fa); transition: border-color 0.12s, background 0.12s; }
.sort-bin { min-height: 118px; }
.sort-bin-label { white-space: nowrap; font-size: 0.88rem; line-height: 1.4; font-weight: 700; color: var(--ink, #3a4660); }
.sort-bin-body { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: flex-start; width: 100%; }
.sort-board.picking [data-bin] { border-style: dashed; border-color: var(--tone, #b9c2d2); cursor: pointer; }
.sort-bin.over, .sort-node.over { border-style: solid; border-color: var(--tone, var(--blue)); }

/* 树：大组在上，小组在下，中间用线连起来（和卷子上的画法一样）。大组是白底描边，小组是同色的浅底 */
.sort-tree { display: flex; flex-wrap: wrap; gap: 18px 14px; }
.sort-parent { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.sort-tree.n4 .sort-parent { flex-basis: 300px; }   /* 四个大组：两个一排，小组框才放得下东西 */
.sort-tree.k4 .sort-parent { flex-basis: 100%; }    /* 每个大组下面有四个小组：一个大组占一整行 */
.sort-node { align-self: center; min-width: 62%; min-height: 62px; background: var(--white); border-color: var(--tone); }
.sort-kids { position: relative; display: flex; gap: 8px; padding-top: 28px; }
.sort-kids::before { content: ''; position: absolute; left: 50%; top: 0; height: 16px; border-left: 1.5px solid var(--tone); }
.sort-kids .sort-bin { flex: 1 1 0; min-height: 96px; padding: 8px 4px 10px; }
.sort-kids .sort-bin::before { content: ''; position: absolute; left: 50%; top: -15.5px; height: 14px; border-left: 1.5px solid var(--tone); }
.sort-kids .sort-bin::after { content: ''; position: absolute; top: -15.5px; left: -5.5px; right: -5.5px; border-top: 1.5px solid var(--tone); }
.sort-kids .sort-bin:first-child::after { left: 50%; }
.sort-kids .sort-bin:last-child::after { right: 50%; }

/* ------ 国家题的世界地图：大洲就是放国旗的地方 ------ */
.sort-map { display: block; width: 100%; height: auto; border-radius: 16px; background: #f4f8fd; }
.map-land { fill: #e7ebf2; }
.map-zone { fill: var(--soft); cursor: pointer; transition: fill 0.12s; }
.map-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.map-zone.over, .map-hit.over + .map-zone { fill: var(--mid); }
.sort-board.picking .map-zone { stroke: var(--tone); stroke-width: 1; stroke-dasharray: 4 3; }
.map-label { font-size: 15px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.map-pin { pointer-events: none; }
.map-pin circle { fill: var(--dark); }
.map-pin rect { fill: var(--white); stroke: rgba(20, 28, 46, 0.22); stroke-width: 0.6; }
.map-pin.pop { transform-box: fill-box; transform-origin: center; animation: pinPop 0.45s cubic-bezier(0.2, 1.5, 0.5, 1); }
@keyframes pinPop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sort-bins.under-map .sort-bin { min-height: 64px; padding: 8px 6px 10px; }

/* ------ 分金条 ------ */
.sort-step b { color: var(--red); font-size: 1.15em; }
.gold-who { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.gold-face { line-height: 0; }
.gold-face svg { width: 56px; height: 56px; display: block; }
/* 切金条：老虎在左、小兔子在右，中间是金条（太长时自己横向滚动） */
.gold-cutrow { display: flex; align-items: center; gap: 12px; }
.gold-cutrow .gold-scroll { flex: 1; min-width: 0; }
.gold-scroll { overflow-x: auto; padding: 8px 2px 2px; }
.gold-bar { display: flex; align-items: flex-start; width: max-content; margin: 0 auto; }
.gold-seg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gold-cells { display: flex; height: 46px; border-radius: 10px; background: linear-gradient(180deg, #ffe07a, #f5b921); box-shadow: inset 0 -3px 0 rgba(160, 110, 0, 0.16), 0 2px 5px rgba(160, 110, 0, 0.18); }
/* 格子里的小数字：每一段从 1 数起 */
.gold-cell { display: flex; align-items: center; justify-content: center; width: var(--u); font-size: min(0.78rem, calc(var(--u) * 0.5)); font-weight: 700; color: rgba(122, 82, 0, 0.5); font-variant-numeric: tabular-nums; }
/* 格线：看着是一条细线，能点的范围比线宽得多 */
.gold-seam { position: relative; z-index: 1; flex-shrink: 0; align-self: stretch; width: 16px; margin: 0 -8px; padding: 0; border: none; background: transparent; cursor: pointer; }
.gold-seam::before { content: ''; position: absolute; top: 7px; bottom: 7px; left: calc(50% - 0.75px); border-left: 1.5px solid rgba(140, 95, 0, 0.28); }
.gold-seam:hover::before { top: -5px; bottom: -5px; left: calc(50% - 1px); border-left: 2px dashed var(--red); }
.gold-seam.cut { align-self: flex-start; width: 14px; height: 46px; margin: 0; }
.gold-seam.cut::before { display: none; }
.gold-len { font-size: 1rem; line-height: 1.2; font-weight: 800; color: #a06e00; font-variant-numeric: tabular-nums; }
.gold-info { text-align: center; font-size: 0.9rem; font-weight: 700; color: #6b7280; }
.gold-info b { color: var(--dark); font-size: 1.15em; }
.gold-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gold-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; min-height: 168px; padding: 10px 8px 14px; border: 1.5px solid transparent; border-radius: 16px; background: var(--tint); transition: border-color 0.12s; }
.gold-zone.over { border-style: solid; border-color: var(--tone); }
.gold-zone-body { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.gold-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; max-width: 100%; height: 42px; border-radius: 10px; background: linear-gradient(180deg, #ffe07a, #f5b921); box-shadow: inset 0 -3px 0 rgba(160, 110, 0, 0.16), 0 2px 5px rgba(160, 110, 0, 0.18); color: #7a5200; font-size: 1.05rem; font-weight: 800; white-space: nowrap; cursor: pointer; touch-action: none; transition: transform 0.12s; }
.gold-chip.dragging { opacity: 0.3; }
/* 一排日子：付清的那天下面记着小兔子手里的那几段 */
.gold-days { display: flex; gap: 6px; }
/* 15 天、31 天：一排放不下，8 天一行往下排 */
.gold-days.many { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gold-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 8px; border-radius: 12px; background: #f5f7fa; }
.gold-day.now { background: #eaf2ff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.gold-day.done { background: #fff8e1; }
.gold-day-no { white-space: nowrap; font-size: 0.74rem; line-height: 1.3; font-weight: 700; color: #6b7280; }
.gold-day.now .gold-day-no { color: var(--blue); }
.gold-day-has { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 20px; }
.gold-day-has i { min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; background: linear-gradient(180deg, #ffe07a, #f5b921); color: #7a5200; font-size: 0.74rem; line-height: 20px; font-style: normal; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

/* 二进制入门（分金条发工资下面，默认收着） */
.bin-fold { display: flex; justify-content: center; }
.bin-box { display: grid; gap: 12px; padding: 14px 14px 16px; border-radius: 16px; background: #f5f7fa; }
.bin-head { display: flex; align-items: center; justify-content: space-between; }
.bin-switches { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bin-sw { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; padding: 10px 8px; border: none; border-radius: 14px; background: var(--white); cursor: pointer; font-family: inherit; transition: background 0.15s; }
.bin-sw.on { background: #eef4ff; }
.bin-bar { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 9px; background: #e3e7ee; color: #a3abb8; font-weight: 800; font-size: 1rem; transition: background 0.15s, transform 0.15s; }
.bin-sw.on .bin-bar { background: linear-gradient(180deg, #ffe07a, #f5b921); box-shadow: inset 0 -3px 0 rgba(160, 110, 0, 0.16), 0 2px 5px rgba(160, 110, 0, 0.18); color: #7a5200; transform: translateY(-2px); }
.bin-state { font-size: 0.82rem; line-height: 1.3; font-weight: 700; color: #9aa3b2; white-space: nowrap; }
.bin-sw.on .bin-state { color: var(--blue); }
.bin-bit { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #f5f7fa; font-family: var(--math-title); font-size: 1.2rem; color: #a3abb8; }
.bin-sw.on .bin-bit { color: var(--blue); }
.bin-readout { text-align: center; }
.bin-readout b { display: inline-block; padding: 4px 18px; border-radius: 12px; background: var(--white); font-family: var(--math-title); font-size: 1.6rem; line-height: 1.3; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: 3px; }
/* 每一天对应的 0 和 1：一列一天，亮的是「给」；没付到的日子先灰着 */
.bin-scroll { overflow-x: auto; padding-bottom: 2px; }
.bin-strip { display: grid; grid-template-columns: auto repeat(var(--n), minmax(18px, 1fr)); gap: 3px; align-items: center; min-width: max-content; width: 100%; }
.bin-h { font-size: 0.74rem; line-height: 1.3; font-weight: 700; color: #6b7280; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bin-h.cur { color: var(--blue); }
.bin-rowh { padding-right: 6px; text-align: right; }
.bin-cell { height: 26px; border: none; border-radius: 7px; background: #e6eaf1; cursor: pointer; padding: 0; }
.bin-cell.on { background: linear-gradient(180deg, #ffe07a, #f5b921); }
.bin-cell.off { background: #eef1f6; cursor: default; }
.bin-cell.sel { box-shadow: 0 0 0 2.5px var(--blue); }
.bin-bits { font-family: var(--math-title); font-size: 0.78rem; text-align: center; color: var(--dark); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; }
.bin-say { text-align: center; font-size: 0.95rem; font-weight: 700; color: var(--dark); }
.bin-say b { color: var(--blue); font-family: var(--math-title); font-size: 1.15em; letter-spacing: 1px; }
/* 鼠标框选 */
.sort-board { position: relative; }
.marquee { position: absolute; z-index: 5; pointer-events: none; border: 1.5px dashed var(--blue); border-radius: 6px; background: rgba(74, 144, 255, 0.1); }
.ball.boxed, .pack.boxed { box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.35); }

/* ------ 找轻球（天平） ------ */
.scale-packs { justify-content: center; margin-bottom: 0; }
.scale-rig { position: relative; padding: 8px 0 26px; }
/* 横梁带着两个盘子一起转，盘子绕着自己的挂点再转回来，所以盘子始终是平的 */
.scale-arm { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18%; padding-top: 46px; transform-origin: 50% 9px; transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1); }
.scale-beam { position: absolute; top: 4px; left: 20.5%; right: 20.5%; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #cdd8e9, #9aabc6); box-shadow: 0 2px 4px rgba(40, 60, 100, 0.18); }
/* 横梁正中的金色轴心 */
.scale-beam::after { content: ''; position: absolute; left: calc(50% - 12px); top: -7px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6cf, #ffc72c 58%, #e6a700); box-shadow: 0 2px 4px rgba(160, 110, 0, 0.35); }
/* 盘子：浅浅的碗，上沿一道深色的边；上面两根吊线连到横梁两头 */
.scale-pan { position: relative; flex: 1 1 0; min-width: 0; min-height: 86px; padding: 12px 10px 18px; border: 1.5px solid #d3deee; border-top: 3px solid #a9bad5; border-radius: 6px 6px 38px 38px; background: linear-gradient(180deg, #f7faff, #e4edfa); box-shadow: inset 0 -8px 12px rgba(110, 140, 190, 0.1), 0 4px 8px rgba(40, 60, 100, 0.08); transform-origin: 50% -35px; transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1), border-color 0.12s; }
.scale-pan::before { content: ''; position: absolute; left: -1.5px; right: -1.5px; bottom: 100%; height: 32px; margin-bottom: 3px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 32' preserveAspectRatio='none'%3E%3Cpath d='M50 0L1 32M50 0L99 32' fill='none' stroke='%23b3c0d6' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.scale-pan.over { border-style: solid; border-color: var(--blue); }
.scale-pan-body { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: flex-start; }
/* 立柱和底座 */
.scale-post { position: absolute; left: calc(50% - 5px); top: 16px; bottom: 12px; width: 10px; border-radius: 5px; background: linear-gradient(90deg, #c3cfe2, #9aabc6); }
.scale-post::after { content: ''; position: absolute; left: -45px; bottom: -12px; width: 100px; height: 14px; border-radius: 14px 14px 6px 6px; background: linear-gradient(180deg, #c3cfe2, #9aabc6); box-shadow: 0 3px 6px rgba(40, 60, 100, 0.14); }
.scale-rig[data-tilt="left"] .scale-arm { transform: rotate(4deg); }
.scale-rig[data-tilt="left"] .scale-pan { transform: rotate(-4deg); }
.scale-rig[data-tilt="right"] .scale-arm { transform: rotate(-4deg); }
.scale-rig[data-tilt="right"] .scale-pan { transform: rotate(4deg); }
.scale-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; min-height: 56px; padding: 4px; border: 1.5px solid transparent; border-radius: 16px; }
.ball { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #dbe8ff 72%); border: 1.5px solid #b9d0f7; color: #2f4d7e; font-size: 0.95rem; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; cursor: grab; touch-action: none; transition: transform 0.12s, box-shadow 0.12s; }
.ball.mini { width: 22px; height: 22px; border-width: 1px; font-size: 0.68rem; cursor: inherit; }
.ball.out { background: #eef0f4; border-color: #dfe3ea; color: #b3bac6; }
.pack { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 3px; flex-shrink: 0; padding: 6px; border: 1.5px solid #ffd4ad; border-radius: 14px; background: #fff4ea; cursor: grab; touch-action: none; transition: transform 0.12s, box-shadow 0.12s; }
.pack.p9 .ball.mini { width: 16px; height: 16px; }
.ball.picked, .pack.picked { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.6); }
.ball.found { cursor: pointer; box-shadow: 0 0 0 4px rgba(46, 184, 114, 0.7); animation: foundPulse 1s ease-in-out infinite; }
@keyframes foundPulse { 50% { transform: scale(1.15); } }
.ball.dragging, .pack.dragging { opacity: 0.3; }
/* 孩子自己标的记号：坏球（还有嫌疑）一圈橙色；标错了抖一下 */
.ball.sus, .pack.sus { box-shadow: 0 0 0 2.5px var(--orange); }
.ball.bad, .pack.bad { box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.65); animation: shakeX 0.45s; }
.scale-zones .sort-bin { min-height: 78px; }

/* 「还能怎样继续分」的选择、自己起名、家长裁判 */
.sort-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sort-ask-q { font-size: 1rem; font-weight: 700; color: var(--dark); text-align: center; }
.sort-opts, .sort-free { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.sort-opt { flex-shrink: 0; white-space: nowrap; font-family: inherit; font-size: 0.9rem; font-weight: 700; height: 38px; padding: 0 16px; border: 1.5px solid #d8deea; border-radius: 999px; background: var(--white); color: var(--dark); cursor: pointer; transition: all 0.12s; }
.sort-opt:hover { border-color: var(--blue); color: var(--blue); }
.sort-opt.own { border-style: dashed; }
.sort-opt.primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
.sort-opt:disabled { opacity: 0.45; cursor: default; }
.sort-opt:disabled:hover { border-color: #d8deea; color: var(--dark); }
.sort-opt.done, .sort-opt.done:hover { opacity: 1; border-color: transparent; background: #f1f4f9; color: #5a6475; }
.sort-free-in { font-family: inherit; font-size: 0.95rem; font-weight: 700; width: 168px; height: 38px; padding: 0 14px; border: 1.5px solid #d8deea; border-radius: 999px; background: var(--white); color: var(--dark); user-select: text; -webkit-user-select: text; }
.sort-free-in:focus { outline: none; border-color: var(--blue); }

/* ------------------------------------------------------------ 小老师讲解 -- */
/* 一次讲一步、带配音。固定在屏幕底部、对齐训练列（左右位置由 math.js 的 placeCoach 按训练列算），题目再长也看得见 */
.coach-panel { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fffdf3; border: 1.5px solid #ffe9a8; border-radius: 16px; box-shadow: 0 10px 28px rgba(20, 28, 46, 0.22); animation: stepIn 0.25s ease; }
.coach-panel[hidden] { display: none; }
.coach-panel-ic { flex-shrink: 0; line-height: 0; }
.coach-svg { width: 44px; height: 44px; display: block; }
.coach-panel-main { flex: 1; min-width: 0; }
.coach-panel-head { display: flex; align-items: center; justify-content: space-between; }
.coach-panel-no { font-size: 0.8rem; line-height: 1.5; font-weight: 800; color: #b8860b; font-variant-numeric: tabular-nums; }
.coach-panel-close { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: #9aa3b2; cursor: pointer; }
.coach-panel-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--dark); }
.coach-panel-close svg { width: 16px; height: 16px; }
.coach-panel-text { font-size: 1.05rem; font-weight: 700; color: var(--dark); line-height: 1.6; margin: 2px 0 12px; }
.coach-panel-text b { color: var(--red); }
.coach-panel-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.coach-panel-actions .btn { white-space: nowrap; flex-shrink: 0; gap: 6px; }
.coach-panel-actions .btn svg { width: 16px; height: 16px; }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- 答题 -- */
.answer-zone { margin-top: 4px; }
.answer-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.choice-btn { font-family: inherit; font-size: 1.3rem; font-weight: 800; min-height: 56px; border: 2.5px solid #e3e7ee; border-radius: 14px; background: var(--white); color: var(--dark); cursor: pointer; transition: all 0.12s; }
.choice-btn:hover { border-color: var(--blue); }
.choice-btn.picked { border-color: var(--blue); background: #eaf2ff; color: var(--blue); }

.answer-number { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.num-display { min-width: 120px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: var(--blue); background: var(--light); border: 2.5px solid #e3e7ee; border-radius: 14px; font-variant-numeric: tabular-nums; }
.num-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.num-key { font-family: inherit; font-size: 1.4rem; font-weight: 800; height: 52px; border: 2px solid #e3e7ee; border-radius: 12px; background: var(--white); color: var(--dark); cursor: pointer; transition: all 0.1s; }
.num-key:hover { border-color: var(--blue); background: #f4f8ff; }
.num-key:active { transform: scale(0.95); }
.num-clear { font-size: 0.85rem; color: var(--red); }
.num-back { font-size: 1.2rem; }

/* 反馈条 */
.answer-feedback { text-align: center; font-weight: 800; font-size: 0.95rem; min-height: 1.4em; margin-top: 14px; opacity: 0; transition: opacity 0.2s; }
.answer-feedback.show { opacity: 1; }
.fb-ok { color: var(--green); }
.fb-no { color: var(--red); }
.fb-hint { color: var(--orange); }

/* +1星 上浮 */
.float-star { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; font-size: 1.4rem; font-weight: 900; color: #E6A700; pointer-events: none; animation: floatUp 1.1s ease-out forwards; }
.float-star .ic { width: 22px; height: 22px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1.3); } }

@keyframes shakeX { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.problem-card.shake { animation: shakeX 0.45s; }

/* -------------------------------------------------------------- 工具条 -- */
.trainer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.trainer-toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; }
/* preference: stable-chrome-on-switch —— 检查/下一题同槽等宽，切换不抖；
 * 与左侧工具按钮同为 btn-small，尺寸一致，只靠红色突出主操作 */
.math-check-btn { min-width: 92px; }
/* 全站 .btn-outline 是「白字+半透明白边」，专给彩色页头用；浅色内容区会变隐形。重新着色。 */
.math-tool { color: var(--dark); background: var(--white); border-color: #d8deea; }
.math-tool:hover { color: var(--blue); border-color: var(--blue); }

/* ------------------------------------------------------------- 庆祝弹层 -- */
.math-celebrate { position: fixed; inset: 0; background: rgba(20, 28, 46, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.math-celebrate[hidden] { display: none; }
.math-celebrate-card { background: var(--white); border-radius: 22px; padding: 30px 28px; text-align: center; max-width: 340px; width: 100%; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); animation: popIn 0.3s cubic-bezier(0.2, 1.3, 0.5, 1); }
@keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.math-celebrate-emoji { line-height: 0; margin-bottom: 10px; }
.math-celebrate-emoji .ic { width: 64px; height: 64px; }
.math-celebrate-title { font-size: 1.3rem; font-weight: 800; color: var(--dark); margin-bottom: 6px; }
.math-celebrate-sub { font-size: 0.9rem; font-weight: 600; color: #6b7280; margin-bottom: 18px; line-height: 1.5; }

/* 答错提示弹层：遮罩 / 卡片沿用庆祝弹层 */
.math-oops-card { max-width: 380px; }
.math-oops-ic { line-height: 0; margin-bottom: 12px; }
.math-oops-ic .coach-svg { width: 64px; height: 64px; margin: 0 auto; }
.math-oops-msg { font-size: 1.05rem; font-weight: 800; color: var(--dark); line-height: 1.6; margin-bottom: 8px; }
.math-oops-ask { font-size: 0.9rem; font-weight: 600; color: #6b7280; margin-bottom: 18px; }
.math-oops-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.math-oops-actions .btn { white-space: nowrap; flex-shrink: 0; }

.math-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1200; opacity: 0; transition: opacity 0.3s; }

/* ===========================================================================
 * 手机端：比电脑端更简（preference: mobile-simpler-than-desktop）
 * 主动删修饰、收次要信息、放大点击区——不是等比缩小。与全站一致用 max-width。
 * =========================================================================== */
@media (max-width: 640px) {
  .math-intro { display: none; }              /* 删：引导语属修饰 */
  .grade-pick { gap: 8px; }
  /* 三栏并排放不下横排：徽标在上、名字在下，题型数收起来，名字不许被挤成竖排 */
  .grade-card { flex: 1; min-width: 0; flex-direction: column; gap: 6px; padding: 10px 6px; }
  .grade-card .g-badge { width: 38px; height: 38px; font-size: 1.2rem; }
  .grade-card .g-text { align-items: center; text-align: center; }
  .grade-card .g-name { font-size: 0.92rem; }
  .grade-card .g-sub { display: none; }
  .topic-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topic-card { padding: 14px 14px 12px; gap: 10px; }
  .topic-desc { display: none; }              /* 收：次要说明，手机端隐藏 */
  .topic-ic-wrap { width: 46px; height: 46px; }
  .topic-ic { width: 27px; height: 27px; }
  .topic-name { font-size: 0.98rem; }
  .problem-card { padding: 18px 14px; }
  .problem-prompt { font-size: 1.2rem; }
  .problem-knowledge { gap: 6px; }
  .kp-chip { font-size: 0.73rem; padding: 3px 11px; }
  .answer-choices { grid-template-columns: 1fr 1fr; }   /* 选项 2×2，更整齐 */
  /* 放大触控目标，键盘铺满 */
  .num-pad { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 280px; }
  .num-key { height: 56px; }
  .trainer-toolbar { justify-content: stretch; }
  .trainer-toolbar-left { flex: 1; }
  .trainer-toolbar-left .math-tool { flex: 1; }
  .trainer-toolbar-right { width: 100%; }
  .math-check-btn { width: 100%; }
  /* 分类题：每个大组的树各占一整行，输入框铺满 */
  .sort-bins { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .sort-parent { flex-basis: 100%; }
  .sort-free-in { width: 100%; }
  /* 一个大组下面四个小组：窄屏排成两行，连线只连到第一行 */
  /* 分金条：窄屏把金条放到两个头像下面一整行 */
  .gold-cutrow { flex-wrap: wrap; justify-content: space-between; }
  .gold-cutrow .gold-scroll { order: 3; flex-basis: 100%; }
  .gold-face svg { width: 46px; height: 46px; }
  .gold-day-no { font-size: 0.66rem; }
  .gold-days.many { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sort-tree.k4 .sort-kids { flex-wrap: wrap; }
  .sort-tree.k4 .sort-kids .sort-bin { flex: 1 1 40%; }
  .sort-tree.k4 .sort-kids .sort-bin:nth-child(2)::after { right: 50%; }
  .sort-tree.k4 .sort-kids .sort-bin:nth-child(n+3)::before, .sort-tree.k4 .sort-kids .sort-bin:nth-child(n+3)::after { display: none; }
  /* 窄屏的横梁短，歪得多一点才看得出来 */
  .scale-arm { gap: 14%; }
  .scale-beam { left: 21.5%; right: 21.5%; }
  .scale-rig[data-tilt="left"] .scale-arm { transform: rotate(7deg); }
  .scale-rig[data-tilt="left"] .scale-pan { transform: rotate(-7deg); }
  .scale-rig[data-tilt="right"] .scale-arm { transform: rotate(-7deg); }
  .scale-rig[data-tilt="right"] .scale-pan { transform: rotate(7deg); }
  .ball { width: 34px; height: 34px; }
}

@media (max-width: 380px) {
  .topic-grid { grid-template-columns: 1fr; }
}