:root {
  --ink:#332a27;
  --muted:#756862;
  --line:#2e2825;
  --cream:#fffaf0;
  --yellow:#ffd45c;
  --green:#bfecc5;
  --red:#ffd0cd;
  --blue:#cfeaff;
  --purple:#e4dcff;
  --shadow:0 16px 34px rgba(75,55,42,.14);
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  color:var(--ink);
  font-family:"Nunito","Arial Rounded MT Bold","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(circle at 7% 5%,rgba(255,212,92,.38) 0 8rem,transparent 8.2rem),
    radial-gradient(circle at 94% 4%,rgba(189,219,255,.42) 0 9rem,transparent 9.2rem),
    linear-gradient(145deg,#f0faf5,#fff8e9);
}

button,select,a { font:inherit; color:inherit; }
a { text-decoration:none; }
button { touch-action:manipulation; }

.app {
  width:min(1080px,100%);
  min-height:100vh;
  margin:auto;
  padding:clamp(14px,3vw,30px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:16px;
}

.topbar,.hero,.statusbar,.game-actions { display:flex; align-items:center; gap:12px; }
.topbar { justify-content:space-between; }
.back-link,.pill,.secondary-btn,.primary-btn {
  border:3px solid var(--line);
  border-radius:16px;
  background:#fff;
  font-weight:1000;
  box-shadow:0 5px 0 rgba(51,42,39,.12);
}
.back-link { padding:9px 15px; }
.series { color:var(--muted); font-weight:900; }

.hero {
  justify-content:space-between;
  padding:18px 22px;
  border:3px solid rgba(255,255,255,.95);
  border-radius:26px;
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow);
}
.hero-copy { display:flex; align-items:center; gap:16px; min-width:0; }
.game-icon {
  width:72px;
  aspect-ratio:1;
  flex:none;
  display:grid;
  place-items:center;
  border:3px solid var(--line);
  border-radius:22px;
  background:var(--yellow);
  font-size:2.35rem;
}
h1 { margin:0; font-size:clamp(1.65rem,4vw,2.7rem); line-height:1.05; }
.subtitle { margin:6px 0 0; color:var(--muted); font-weight:800; }
.level-setting { display:grid; gap:5px; color:var(--muted); font-size:.82rem; font-weight:1000; }
.level-setting select { min-height:44px; padding:7px 34px 7px 12px; border:3px solid var(--line); border-radius:14px; background:#fff; font-weight:1000; }

.game-shell {
  min-height:620px;
  padding:clamp(16px,3vw,28px);
  border:3px solid var(--line);
  border-radius:30px;
  background:#fff;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:18px;
}
.statusbar { justify-content:space-between; }
.status-group { display:flex; gap:9px; flex-wrap:wrap; }
.pill { padding:8px 13px; box-shadow:none; border-width:2px; }
.pill.score { background:#fff2bb; }
.pill.streak { background:#e2f7e5; }
.rounds { display:flex; gap:5px; }
.round-dot { width:18px; height:10px; border-radius:999px; background:#e5dfda; }
.round-dot.done { background:#76c885; }
.round-dot.current { background:var(--line); }

.stage {
  min-height:440px;
  padding:clamp(18px,4vw,38px);
  border:3px dashed rgba(51,42,39,.2);
  border-radius:26px;
  background:var(--stage,#fffaf1);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.scene { width:min(760px,100%); text-align:center; }
.prompt { margin:0 0 22px; font-size:clamp(1.15rem,2.4vw,1.55rem); font-weight:1000; }
.equation { font-size:clamp(2.2rem,7vw,4.6rem); line-height:1.2; font-weight:1000; white-space:nowrap; }
.hint { margin:15px 0 0; color:var(--muted); font-weight:850; }
.answer-grid { margin-top:24px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.answer-btn,.number-chip,.door,.chart-cell {
  border:3px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
  transition:transform .12s ease,background .12s ease;
}
.answer-btn:hover,.number-chip:hover,.door:hover,.chart-cell:hover { transform:translateY(-2px); }
.answer-btn {
  min-width:76px;
  min-height:62px;
  padding:9px 18px;
  border-radius:18px;
  font-size:clamp(1.5rem,4vw,2.25rem);
  box-shadow:0 6px 0 rgba(51,42,39,.12);
}
.answer-btn.correct,.number-chip.correct,.door.correct,.chart-cell.correct { background:var(--green); }
.answer-btn.wrong,.number-chip.wrong,.door.wrong,.chart-cell.wrong { background:var(--red); animation:shake .22s linear 2; }
.answer-btn:disabled,.number-chip:disabled { cursor:default; }

.game-footer { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; }
.feedback { min-height:28px; margin:0; color:var(--muted); font-size:1.05rem; font-weight:1000; }
.feedback.good { color:#28783a; }
.feedback.bad { color:#c8443b; }
.game-actions { justify-content:flex-end; }
.secondary-btn,.primary-btn { min-height:46px; padding:9px 16px; cursor:pointer; }
.primary-btn { background:var(--yellow); }

/* 点数快闪 */
.flash-card { width:min(430px,90%); min-height:230px; padding:28px; display:grid; place-items:center; border:4px solid var(--line); border-radius:30px; background:#fff; box-shadow:0 10px 0 rgba(51,42,39,.1); }
.dot-field { width:min(290px,100%); display:grid; grid-template-columns:repeat(5,1fr); gap:18px; place-items:center; }
.count-dot { width:clamp(28px,6vw,48px); aspect-ratio:1; border-radius:50%; background:#f56c64; box-shadow:inset 0 -5px rgba(0,0,0,.09); }
.count-dot:nth-child(3n+2) { background:#5eb6ec; }
.count-dot:nth-child(3n) { background:#73c989; }
.flash-cover { color:var(--muted); font-size:1.35rem; font-weight:1000; }

/* 数字排队 */
.order-slots,.chip-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.order-slot { width:64px; height:64px; display:grid; place-items:center; border:3px dashed #aa9f98; border-radius:16px; background:rgba(255,255,255,.7); font-size:1.8rem; font-weight:1000; }
.order-slot.filled { border-style:solid; border-color:#4787ca; background:#dceeff; }
.number-chip { min-width:64px; min-height:58px; padding:8px 15px; border-radius:17px; font-size:1.7rem; box-shadow:0 5px 0 rgba(51,42,39,.12); }
.number-chip.selected { background:#fff0a8; transform:translateY(-5px); }

/* 数的组成 */
.split-tree { width:320px; height:205px; margin:auto; position:relative; }
.split-root,.split-child { position:absolute; display:grid; place-items:center; border:4px solid var(--line); background:#fff; font-size:2.3rem; font-weight:1000; }
.split-root { left:124px; top:0; width:72px; height:65px; border-radius:22px; background:var(--yellow); }
.split-child { bottom:0; width:92px; height:70px; border-radius:19px; }
.split-child.left { left:34px; }.split-child.right { right:34px; }
.split-tree:before,.split-tree:after { content:""; position:absolute; top:66px; width:105px; height:65px; border-top:4px solid var(--line); }
.split-tree:before { left:55px; border-left:4px solid var(--line); transform:skewY(-22deg); }
.split-tree:after { right:55px; border-right:4px solid var(--line); transform:skewY(22deg); }

/* 实物加减 */
.object-groups { display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; font-size:clamp(2.2rem,7vw,4.6rem); }
.object-group { padding:14px 18px; border-radius:22px; background:rgba(255,255,255,.75); }
.removed { opacity:.28; transform:translate(14px,-18px) rotate(8deg); }
.basket { margin:12px 0; font-size:5rem; }

/* 凑十、破十步骤 */
.step-flow { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
.step-card { min-width:150px; padding:16px; border:3px solid var(--line); border-radius:20px; background:#fff; font-size:clamp(1.5rem,4vw,2.4rem); font-weight:1000; }
.flow-arrow { color:#eb6a55; font-size:2.2rem; font-weight:1000; }
.step-card.pending { border-style:dashed; color:#968a83; }

/* 数轴 */
.number-line { width:min(760px,100%); display:grid; grid-template-columns:repeat(var(--line-count),1fr); border-bottom:5px solid var(--line); position:relative; padding-top:85px; }
.tick { position:relative; padding:15px 0 0; border:0; background:transparent; font-size:.9rem; font-weight:1000; cursor:pointer; }
.tick:before { content:""; position:absolute; left:50%; top:-2px; width:4px; height:16px; border-radius:4px; background:var(--line); transform:translateX(-50%); }
.tick.start { color:#2f80d0; }.tick.target { color:#269044; }
.jumper { position:absolute; top:6px; transform:translateX(-50%); font-size:3.7rem; transition:left .35s ease; }
.hop-arc { position:absolute; top:23px; height:54px; border:4px dashed #ef705b; border-bottom:0; border-radius:80px 80px 0 0; }

/* 天平 */
.balance { width:min(560px,95%); margin:auto; }
.balance-values { display:flex; justify-content:space-around; gap:20px; font-size:clamp(1.7rem,5vw,3rem); font-weight:1000; }
.balance-beam { height:8px; margin-top:18px; border-radius:999px; background:var(--line); position:relative; }
.balance-beam:after { content:""; position:absolute; left:50%; top:8px; border-left:26px solid transparent; border-right:26px solid transparent; border-bottom:115px solid #eea05b; transform:translateX(-50%); }

/* 迷宫 */
.doors { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.door { min-height:180px; border-radius:70px 70px 18px 18px; font-size:2.4rem; box-shadow:inset 0 0 0 8px rgba(255,255,255,.8); }
.door:after { content:"🚪"; display:block; margin-top:14px; font-size:3rem; }

/* 数字侦探 */
.detective { display:grid; grid-template-columns:auto minmax(220px,1fr); gap:22px; align-items:center; max-width:600px; margin:auto; }
.magnifier { font-size:7rem; }
.clue-list { display:grid; gap:10px; }
.clue { padding:11px 16px; border:3px solid rgba(51,42,39,.18); border-radius:15px; background:#fff; font-size:1.2rem; font-weight:1000; }

/* 数位积木 */
.blocks-scene { display:flex; justify-content:center; align-items:end; gap:32px; flex-wrap:wrap; }
.tens,.ones { display:flex; gap:8px; align-items:end; flex-wrap:wrap; justify-content:center; }
.ten-rod { width:34px; height:150px; border:3px solid #af742c; background:repeating-linear-gradient(#ffd164 0 12px,#bb792c 13px 15px); }
.one-cube { width:38px; height:38px; border:3px solid #4c7daf; background:#a9d7ff; }
.block-label { margin-top:12px; font-weight:1000; }

/* 百数表 */
.hundred-chart { width:min(590px,100%); display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.chart-cell { aspect-ratio:1.25; min-width:0; padding:0; border-width:2px; border-radius:7px; font-size:clamp(.58rem,1.5vw,.92rem); box-shadow:none; }
.chart-cell.start { background:var(--yellow); outline:4px solid rgba(239,112,91,.35); }

@keyframes shake { 25%{transform:translateX(-4px)}75%{transform:translateX(4px)} }

@media(max-width:700px) {
  .app { padding:10px; }
  .hero { align-items:flex-start; }
  .hero-copy { align-items:flex-start; }
  .game-icon { width:56px; border-radius:17px; font-size:1.8rem; }
  .level-setting span { display:none; }
  .game-shell { min-height:calc(100dvh - 180px); padding:12px; border-radius:22px; }
  .stage { min-height:420px; padding:14px; }
  .game-footer { grid-template-columns:1fr; }
  .game-actions { justify-content:stretch; }
  .game-actions button { flex:1; }
  .doors { gap:7px; }
  .door { min-height:145px; font-size:1.75rem; }
  .detective { grid-template-columns:1fr; gap:8px; }
  .magnifier { font-size:4.5rem; }
}