:root {
  --ink: #183d35;
  --ink-soft: #4d665f;
  --cream: #fffaf0;
  --paper: #f5e6c7;
  --gold: #e7a93b;
  --gold-dark: #b87222;
  --leaf: #3f865f;
  --leaf-light: #8bc27b;
  --night: #153c37;
  --coral: #dc765b;
  --shadow: 0 18px 55px rgba(24, 61, 53, .16);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: #dce8d8;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.76) 0 5%, transparent 24%),
    linear-gradient(155deg, #eaf1dc 0%, #cddfc9 45%, #a8c9b8 100%);
  overflow-x: hidden;
}

button { font: inherit; }
button:focus-visible { outline: 4px solid rgba(231, 169, 59, .42); outline-offset: 3px; }

.app-shell {
  width: 100%;
  max-width: 1080px;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(255, 250, 240, .78);
  box-shadow: 0 0 80px rgba(18, 58, 49, .14);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.topbar {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) 18px 10px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 5;
}

.brand { display: flex; justify-content: center; align-items: center; gap: 9px; text-align: left; }
.brand, .brand > div { min-width: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, "STSong", serif; font-size: 19px; letter-spacing: .12em; }
.brand small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.brand-leaf { color: var(--leaf); transform: rotate(45deg); font-size: 15px; }

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(24,61,53,.14);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 21px;
  transition: transform .2s, background .2s;
}
.icon-button:hover { transform: translateY(-2px); background: white; }

.game {
  width: 100%;
  min-height: 0;
  min-width: 0;
  display: grid;
  align-items: stretch;
  padding: 6px 18px 16px;
}

.scene {
  min-height: min(720px, calc(100dvh - 145px));
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  background: var(--cream);
  box-shadow: var(--shadow);
  animation: scene-in .48s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes scene-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }

.hero-scene {
  display: grid;
  place-items: center;
  padding: 34px 22px;
  text-align: center;
  background:
    linear-gradient(rgba(21,60,55,.08), rgba(21,60,55,.44)),
    radial-gradient(circle at 50% 16%, #f8e9a6 0 4%, transparent 25%),
    linear-gradient(#78a58c 0 58%, #54745d 58% 100%);
}

.stars { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 45px 45px; }
.hero-card { position: relative; z-index: 1; max-width: 590px; color: white; }
.hero-card { min-width: 0; width: 100%; }
.eyebrow { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 800; color: #ffe6a1; }
.hero-card h1 { margin: 0; font: 700 clamp(38px, 8vw, 68px)/1.08 Georgia, "STSong", serif; letter-spacing: .05em; }
.hero-card .subtitle { margin: 17px auto 0; max-width: 480px; font-size: clamp(16px, 3.8vw, 20px); line-height: 1.8; color: rgba(255,255,255,.9); overflow-wrap: anywhere; }

.seed-visual { height: 165px; position: relative; margin: 16px auto 2px; width: 220px; }
.seed { position: absolute; left: 91px; bottom: 25px; width: 40px; height: 26px; border-radius: 70% 35% 70% 35%; background: #6e421f; transform: rotate(20deg); box-shadow: inset -6px -5px rgba(0,0,0,.16); }
.sprout { position: absolute; left: 109px; bottom: 48px; width: 4px; height: 72px; background: #d6e793; border-radius: 5px; }
.sprout::before, .sprout::after { content:""; position:absolute; width:40px; height:22px; background:#a8d378; border-radius:100% 10% 100% 10%; }
.sprout::before { right: 2px; top: 10px; transform: rotate(20deg); }
.sprout::after { left: 3px; top: 34px; transform: scaleX(-1) rotate(20deg); }
.earth { position:absolute; bottom:6px; left:18px; width:185px; height:45px; border-radius:50%; background:rgba(29,56,37,.45); }

.primary-button, .secondary-button {
  min-height: 52px;
  border-radius: 999px;
  padding: 13px 28px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  transition: transform .18s, box-shadow .18s, opacity .18s;
}
.primary-button { color: #173d35; background: #ffdc78; box-shadow: 0 9px 0 #bd8734, 0 15px 30px rgba(0,0,0,.16); }
.primary-button:hover { transform: translateY(-2px); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 4px 0 #bd8734; }
.primary-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.secondary-button { color: var(--ink); background: rgba(255,255,255,.8); border: 1px solid rgba(24,61,53,.15); }

.story-scene { display: grid; grid-template-rows: auto 1fr auto; background: #fff9ea; }
.scene-heading { padding: 26px 26px 10px; text-align: center; }
.scene-heading h2 { margin: 5px 0 6px; font: 700 clamp(26px, 5vw, 39px)/1.2 Georgia, "STSong", serif; }
.scene-heading p { margin: 0 auto; max-width: 620px; color: var(--ink-soft); line-height: 1.6; }
.task-pill { display: inline-flex; gap: 7px; align-items: center; border-radius: 999px; background: #e2efdc; padding: 6px 12px; color: #376c50; font-size: 12px; font-weight: 800; }

.counting-area { display:grid; grid-template-columns: minmax(0,1fr) minmax(170px, .42fr); gap:18px; padding:18px 26px; align-items:stretch; }
.meadow { min-height: 345px; border-radius:24px; padding:20px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:8px; background: linear-gradient(#dcebd5 0 64%, #bbd39d 64%); border:1px solid #d4dfc9; position:relative; overflow:hidden; }
.meadow::before { content:""; position:absolute; width:80px; height:80px; border-radius:50%; background:#ffe59a; top:-24px; right:18px; opacity:.8; }
.meadow::after { content:""; position:absolute; left:0; right:0; bottom:18%; height:32%; background:linear-gradient(160deg, transparent 45%, rgba(75,125,78,.18) 46%); }

.rabbit { width:clamp(60px, 12vw, 87px); aspect-ratio:.9; padding:0; border:0; background:transparent; cursor:pointer; position:relative; z-index:1; transition:transform .22s, filter .22s, opacity .22s; animation: bunny-in .4s both; }
.rabbit:nth-child(even) { animation-delay:.08s; }
.rabbit:hover { transform:translateY(-5px) rotate(-2deg); }
.rabbit.counted { opacity:.58; filter:saturate(.65); transform:scale(.88); pointer-events:none; }
.rabbit svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 7px 5px rgba(48,73,52,.18)); }
.rabbit-ear,.rabbit-body { fill:#f5efe2; stroke:#865b4b; stroke-width:2; }
.rabbit-ear-inner { fill:#e9a9a0; }
.rabbit-eye { fill:#263c39; }
.rabbit-nose { fill:#d87972; }
.rabbit-mouth { fill:none; stroke:#80564c; stroke-width:2; stroke-linecap:round; }
.counted-mark { position:absolute; top:1px; right:5px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--leaf); font-weight:900; transform:scale(0); transition:transform .25s cubic-bezier(.3,1.7,.5,1); }
.rabbit.counted .counted-mark { transform:scale(1); }
@keyframes bunny-in { from { opacity:0; transform:translateY(12px) scale(.8); } }

.tally-board { border-radius:24px; color:#f8e8c4; background:linear-gradient(145deg,#80512d,#5d351e); box-shadow:inset 0 0 0 7px rgba(255,255,255,.08), 0 12px 25px rgba(76,44,22,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; min-height:260px; text-align:center; }
.tally-board h3 { margin:0; font-size:14px; letter-spacing:.12em; color:#ebc986; }
.tally-count { font:700 58px/1 Georgia,serif; margin:16px 0 4px; }
.tally-marks { min-height:80px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; font:700 42px/1 "Times New Roman",serif; }
.tally-help { font-size:12px; color:#d8ba91; line-height:1.5; }

.scene-actions { padding:14px 26px 28px; display:flex; justify-content:center; align-items:center; gap:12px; min-height:88px; }
.hint { color:var(--ink-soft); font-size:14px; text-align:center; }

.pens-area { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding:20px 26px; align-items:stretch; }
.pen-card { min-width:0; border:2px solid #d8c9a9; border-radius:22px; background:#f6ecd7; padding:14px 10px; display:grid; grid-template-rows:auto 1fr auto; text-align:center; transition:transform .2s, border-color .2s; }
.pen-card.active { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 10px 25px rgba(122,80,34,.12); }
.pen-card h3 { margin:0; font-size:14px; }
.mini-rabbits { min-height:160px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; }
.mini-rabbits .rabbit { width:clamp(42px, 8vw, 68px); pointer-events:none; }
.wood-tag { min-height:60px; border:0; border-radius:10px; background:linear-gradient(160deg,#a66a37,#7a4628); box-shadow:inset 0 0 0 4px rgba(255,255,255,.07); color:#f7e4bd; display:grid; place-items:center; font:700 32px/1 Georgia,serif; cursor:pointer; position:relative; }
.wood-tag.display-tag { cursor:default; }
.wood-tag.editable::after { content:"选择木牌"; font:700 11px/1 sans-serif; letter-spacing:.05em; opacity:.62; }
.wood-tag.selected { outline:4px solid #efb84f; }
.wood-tag.ambiguous { animation:shake .45s; background:linear-gradient(160deg,#a9573d,#763321); }
@keyframes shake { 25% {transform:translateX(-7px)} 50% {transform:translateX(7px)} 75% {transform:translateX(-4px)} }

.symbol-tray { padding:0 26px 18px; display:flex; justify-content:center; gap:10px; }
.symbol-button { width:58px; height:58px; border-radius:15px; border:2px solid #dac9a6; background:white; color:var(--ink); font:700 25px/1 Georgia,serif; cursor:pointer; box-shadow:0 5px 0 #d2c19f; }
.symbol-button:active { transform:translateY(4px); box-shadow:0 1px 0 #d2c19f; }

.discovery-scene { display:grid; place-items:center; padding:25px; text-align:center; color:white; background:radial-gradient(circle at 50% 36%,#486f62 0,#193e38 60%,#102c29 100%); }
.discovery-card { width:min(100%,620px); position:relative; }
.zero-orbit { width:190px; height:190px; margin:16px auto 22px; border:6px solid #ffdb76; border-radius:50%; display:grid; place-items:center; font:700 92px/1 Georgia,serif; color:#ffdf83; box-shadow:0 0 0 16px rgba(255,219,118,.08),0 0 70px rgba(255,219,118,.2); animation:zero-pulse 2.4s infinite; }
@keyframes zero-pulse { 50% { transform:scale(1.035); box-shadow:0 0 0 23px rgba(255,219,118,.04),0 0 90px rgba(255,219,118,.3); } }
.discovery-card h2 { margin:0; font:700 clamp(31px,7vw,52px)/1.18 Georgia,"STSong",serif; }
.discovery-card p { max-width:520px; margin:14px auto 24px; line-height:1.8; color:rgba(255,255,255,.82); }

.ending-scene { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:25px; padding:35px; background:linear-gradient(145deg,#fff9e9,#e5efd7); }
.tree-visual { height:430px; position:relative; display:grid; place-items:end center; }
.tree-crown { position:absolute; left:50%; bottom:130px; transform:translateX(-50%); width:270px; height:250px; }
.leaf-cloud { position:absolute; border-radius:50%; background:linear-gradient(145deg,#6dac6f,#397956); box-shadow:inset -10px -10px rgba(24,78,51,.12); animation:leaf-in .6s both; }
.leaf-cloud:nth-child(1){width:150px;height:140px;left:58px;top:5px}.leaf-cloud:nth-child(2){width:130px;height:120px;left:0;top:75px;animation-delay:.15s}.leaf-cloud:nth-child(3){width:140px;height:130px;right:0;top:67px;animation-delay:.25s}.leaf-cloud:nth-child(4){width:170px;height:125px;left:45px;bottom:0;animation-delay:.35s}
@keyframes leaf-in { from {transform:scale(0);opacity:0} }
.tree-trunk { width:52px; height:230px; background:linear-gradient(90deg,#77502d,#9a7140,#684327); border-radius:45% 45% 10px 10px; clip-path:polygon(34% 0,66% 0,76% 65%,100% 100%,59% 87%,48% 100%,0 100%,28% 64%); }
.tree-ground { position:absolute; width:90%; height:70px; bottom:8px; border-radius:50%; background:rgba(78,126,70,.2); }
.zero-fruit { position:absolute; z-index:2; left:50%; top:95px; transform:translateX(-50%); width:72px; height:72px; border-radius:50%; display:grid; place-items:center; color:#503711; background:#ffcf5a; border:5px solid #fff0ad; font:700 42px/1 Georgia,serif; box-shadow:0 8px 24px rgba(105,76,22,.24); animation:fruit-in .7s .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes fruit-in { from {transform:translateX(-50%) scale(0)} }
.ending-copy h2 { margin:0 0 12px; font:700 clamp(30px,6vw,48px)/1.2 Georgia,"STSong",serif; }
.ending-copy p { color:var(--ink-soft); line-height:1.8; }
.insight-card { margin:20px 0; padding:17px 18px; border-left:5px solid var(--gold); border-radius:0 14px 14px 0; background:rgba(255,255,255,.72); font-size:14px; line-height:1.7; }
.next-chip { display:inline-block; margin-bottom:14px; padding:6px 10px; border-radius:999px; background:#d9eaca; color:#39714f; font-size:12px; font-weight:800; }

/* Chapter map */
.map-scene { padding-bottom:26px; background:linear-gradient(150deg,#fffaf0,#e8f1df); }
.chapter-grid { width:min(100%,900px); margin:0 auto; padding:15px 28px 32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.chapter-card { min-width:0; min-height:225px; padding:18px; border:2px solid color-mix(in srgb,var(--chapter-color),white 55%); border-radius:24px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; color:var(--ink); background:linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--chapter-color),white 86%)); box-shadow:0 9px 0 color-mix(in srgb,var(--chapter-color),#6c5532 30%),0 16px 30px rgba(31,66,52,.09); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.chapter-card:hover { transform:translateY(-5px); box-shadow:0 12px 0 color-mix(in srgb,var(--chapter-color),#6c5532 30%),0 21px 35px rgba(31,66,52,.12); }
.chapter-card.completed { border-color:var(--chapter-color); }
.chapter-number { text-transform:uppercase; font-size:11px; font-weight:900; letter-spacing:.08em; color:var(--chapter-color); }
.chapter-symbol { width:55px; height:55px; margin:12px 0 9px; border-radius:18px; display:grid; place-items:center; color:white; background:var(--chapter-color); font:700 30px/1 Georgia,serif; box-shadow:inset 0 -5px rgba(0,0,0,.1); }
.chapter-card strong { font:700 21px/1.2 Georgia,"STSong",serif; }
.chapter-card small { margin-top:7px; min-height:35px; color:var(--ink-soft); line-height:1.45; }
.chapter-status { margin-top:auto; padding-top:14px; font-size:11px; font-weight:800; color:color-mix(in srgb,var(--chapter-color),#173d35 38%); }

/* Shared lesson scenes */
.lesson-intro { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:35px; padding:55px; background:radial-gradient(circle at 20% 35%,color-mix(in srgb,var(--chapter-color),white 35%),transparent 28%),linear-gradient(145deg,#244f45,#163a34); color:white; }
.lesson-emblem { width:min(30vw,260px); aspect-ratio:1; border-radius:35%; display:grid; place-items:center; background:var(--chapter-color); color:white; font:700 clamp(75px,15vw,145px)/1 Georgia,serif; box-shadow:0 22px 0 color-mix(in srgb,var(--chapter-color),black 25%),0 35px 70px rgba(0,0,0,.25); transform:rotate(-4deg); }
.lesson-intro-copy h2 { margin:0; font:700 clamp(34px,6vw,58px)/1.12 Georgia,"STSong",serif; }
.lesson-intro-copy > p:not(.eyebrow) { max-width:570px; margin:17px 0 22px; color:rgba(255,255,255,.82); line-height:1.85; }
.lesson-route { margin:0 0 28px; display:flex; flex-wrap:wrap; gap:8px; }
.lesson-route span { padding:7px 11px; border-radius:99px; background:rgba(255,255,255,.1); font-size:12px; }
.activity-scene,.practice-scene,.sandbox-scene { display:grid; grid-template-rows:auto 1fr auto; background:linear-gradient(145deg,#fffaf0,#eef3e4); }
.guide-stage,.practice-visual,.sandbox-visual { min-height:300px; margin:12px 28px; border:1px solid rgba(24,61,53,.12); border-radius:25px; padding:22px; display:grid; place-items:center; background:rgba(255,255,255,.68); overflow:auto; }

/* Base-ten materials */
.place-workbench { padding:15px 28px 5px; display:grid; grid-template-columns:1.35fr .65fr; gap:18px; align-items:stretch; }
.loose-sticks { min-height:310px; padding:24px; border-radius:24px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:7px; background:#edf3df; border:2px dashed #aabd8f; }
.loose-stick { width:8px; height:78px; border-radius:5px; background:linear-gradient(90deg,#c48743,#f0bd67,#9f662e); box-shadow:0 3px 2px rgba(76,50,22,.18); transform:rotate(var(--tilt)); animation:stick-in .25s both; }
@keyframes stick-in { from {opacity:0;transform:translateY(9px) rotate(var(--tilt))} }
.place-slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.place-slot { border-radius:22px; padding:18px 8px; display:flex; flex-direction:column; align-items:center; text-align:center; background:#f3e1bb; border:2px solid #d9bd86; }
.place-slot strong { font:700 48px/1 Georgia,serif; }
.place-slot span { margin:7px 0 16px; color:#755a38; font-size:12px; }
.bundle-row { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.stick-bundle { width:26px; height:82px; border-radius:6px; background:repeating-linear-gradient(90deg,#b87336 0 3px,#e1a653 3px 6px); border:3px solid #9c4e3b; box-shadow:0 4px 4px rgba(73,44,25,.16); position:relative; }
.stick-bundle::after { content:""; position:absolute; left:-4px; right:-4px; top:37px; height:6px; border-radius:3px; background:#da6f56; }
.base-blocks { max-width:380px; display:flex; justify-content:center; align-items:flex-end; gap:10px; padding:7px; }
.hundreds-blocks,.tens-blocks,.ones-blocks { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:4px; }
.hundred-flat { width:62px; height:62px; border-radius:6px; border:2px solid #c8833f; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(130,77,30,.18) 5px 6px),repeating-linear-gradient(90deg,#efbf72 0 5px,#dba45a 5px 6px); }
.ten-rod { width:10px; height:62px; border-radius:3px; background:repeating-linear-gradient(0deg,#d98d49 0 5px,#f0b766 5px 6px); border:1px solid #bc7136; }
.one-cube { width:13px; height:13px; border-radius:3px; display:inline-block; background:#efb966; border:1px solid #c77b37; box-shadow:inset -2px -2px rgba(137,77,28,.12); }

/* Guided operation scenes */
.merge-trays { width:100%; display:grid; grid-template-columns:1fr auto 1fr; gap:15px; align-items:center; }
.number-tray { min-height:170px; border-radius:20px; padding:14px; display:grid; place-items:center; background:#f6ead0; }
.number-tray > span { font-weight:800; color:#805c34; }
.operator-medallion { width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:white;font:700 30px/1 Georgia,serif; }
.result-workspace { width:100%; min-height:190px; margin-top:14px; border-radius:20px; padding:16px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px; background:#e3eedc; border:2px dashed #9db594; text-align:center; }
.empty-message { color:var(--ink-soft); }
.result-workspace > div { display:grid; place-items:center; gap:7px; }
.ones-spill { max-width:270px; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.equation-reveal { display:grid; place-items:center; gap:7px; }
.equation-reveal > strong { font:700 29px/1.2 Georgia,serif; }
.equation-reveal > small { color:var(--ink-soft); }
.subtraction-space { margin-top:0; }
.multiplication-stage { width:100%; min-height:275px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.repeat-group { padding:8px; border-radius:12px; display:grid; grid-template-columns:1fr; gap:5px; background:#eff0d8; text-align:center; font-size:10px; }
.repeat-group .math-dot { width:16px;height:16px; }
.dot-array { --cols:7; display:grid; grid-template-columns:repeat(var(--cols),minmax(8px,24px)); gap:5px; justify-content:center; align-content:center; transition:transform .4s; }
.math-dot { width:clamp(10px,2.4vw,22px); aspect-ratio:1; display:inline-block; border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 35% 30%,#fff 0 7%,transparent 8%),linear-gradient(145deg,#efc07a,#d77b55); border:1px solid #b96749; box-shadow:0 2px 3px rgba(77,54,30,.16); animation:dot-in .25s both; }
@keyframes dot-in { from {opacity:0;transform:scale(.3)} }
.array-label { padding:9px 15px; border-radius:99px; background:#173d35; color:white; font:700 20px/1 Georgia,serif; }
.division-stage { width:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:9px; align-items:stretch; }
.division-pen { min-height:200px; padding:9px 5px; border:2px solid #d1b989; border-radius:16px; display:grid; grid-template-rows:auto 1fr auto; place-items:center; background:#f4e6c8; text-align:center; }
.division-pen > span { font-size:11px;font-weight:800; }
.division-pen > strong { font:700 25px/1 Georgia,serif; }
.pen-dots { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:4px; }
.pen-dots .math-dot { width:18px; }
.full-row { grid-column:1/-1; justify-self:center; }

/* Practice */
.practice-scene { grid-template-rows:auto auto auto auto; }
.practice-top { padding:24px 22px 5px; text-align:center; }
.practice-top h2 { margin:10px 0 4px; font:700 clamp(30px,6vw,46px)/1.15 Georgia,serif; }
.practice-top p { margin:0;color:var(--ink-soft); }
.practice-dots { margin:11px auto 2px; display:flex; justify-content:center; gap:5px; }
.practice-dots i { width:22px;height:6px;border-radius:9px;background:rgba(24,61,53,.12); }
.practice-dots i.done { background:var(--leaf); }
.practice-dots i.current { background:var(--gold); transform:scaleY(1.45); }
.practice-visual { min-height:210px; margin-top:8px; }
.visual-pair { width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; text-align:center; }
.visual-pair > div { min-width:0; display:grid; place-items:center; }
.visual-pair > div > span { font-weight:900;font-size:18px; }
.visual-pair > b { font:700 30px/1 Georgia,serif; }
.subtraction-preview { grid-template-columns:1fr auto; }
.place-answer { padding:10px 20px; display:flex; justify-content:center; align-items:center; gap:15px; }
.number-stepper { display:grid; grid-template-columns:48px 70px 48px; gap:5px; align-items:center; }
.number-stepper > span { grid-column:1/-1;text-align:center;font-size:12px;font-weight:800;color:var(--ink-soft); }
.number-stepper input { width:70px;height:56px;border:2px solid #cdbb94;border-radius:14px;text-align:center;color:var(--ink);background:white;font:700 29px/1 Georgia,serif; }
.stepper-button { width:48px;height:48px;border:0;border-radius:50%;background:var(--leaf);color:white;font-size:26px;cursor:pointer; }
.big-plus { font-size:30px;font-weight:900; }
.equation-strip { width:max-content;max-width:calc(100% - 30px);margin:8px auto;padding:9px 16px;border-radius:99px;background:#e4eedb;font-weight:800; }
.answer-zone { padding:10px 20px; display:flex; justify-content:center;gap:12px; }
.answer-zone label { display:grid;gap:5px;text-align:center;font-size:12px;font-weight:800;color:var(--ink-soft); }
.number-answer { width:145px;height:60px;border:3px solid #d6c49f;border-radius:17px;background:white;text-align:center;color:var(--ink);font:700 30px/1 Georgia,serif; }
.number-answer.small { width:90px; }
.practice-feedback { min-height:45px;padding:10px 18px;text-align:center;color:var(--ink-soft); }
.practice-scene .scene-actions { padding-top:5px; }
.practice-array { max-width:100%; }
.area-model { width:min(100%,560px);min-height:145px;display:flex;border:4px solid #775a3b;background:#f0c578; }
.area-model > div { min-width:65px;display:grid;place-items:center;border-right:3px dashed rgba(94,59,26,.5);background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(111,72,35,.14) 22px 24px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(111,72,35,.14) 22px 24px); }
.area-model > div:last-child { border-right:0;background-color:#dda060; }
.visual-note { display:block;text-align:center;color:var(--ink-soft); }
.division-preview { display:flex;flex-wrap:wrap;justify-content:center;gap:6px; }
.division-preview > div { max-width:105px;padding:7px;border-radius:11px;background:#f0e4c9;text-align:center; }
.division-preview span { display:block;font-size:9px;margin-bottom:4px; }
.division-preview .math-dot,.remainder-preview .math-dot { width:10px;margin:1px; }
.remainder-preview { margin-top:8px;padding:8px 12px;border-radius:12px;background:#f4d4c2; }

/* Sandbox */
.sandbox-controls { padding:5px 28px 10px; }
.dual-range { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.range-control { padding:12px 16px;border-radius:17px;display:grid;grid-template-columns:1fr auto;gap:8px;background:rgba(255,255,255,.75);font-weight:800; }
.range-control input { grid-column:1/-1;width:100%;accent-color:var(--leaf); }
.range-control output { min-width:60px;text-align:right;color:var(--gold-dark);font:700 23px/1 Georgia,serif; }
.sandbox-visual { min-height:280px;align-content:center; }
.place-table { width:min(100%,660px);display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #8c6841;border-radius:18px;overflow:hidden;background:#f6e7c9; }
.place-table > div { min-width:0;min-height:180px;padding:14px 7px;border-right:2px solid #b89366;display:flex;flex-direction:column;align-items:center;text-align:center; }
.place-table > div:last-child { border:0; }
.place-table strong { font:700 43px/1 Georgia,serif; }
.place-table span { margin:5px 0 12px;color:#73593b;font-size:12px; }
.hundreds-mini { font-size:30px;color:#d9984d;letter-spacing:-4px;overflow-wrap:anywhere; }
.sandbox-ones { display:flex;flex-wrap:wrap;justify-content:center;gap:3px; }
.sandbox-equation { margin:14px auto 0;text-align:center;font:700 18px/1.5 Georgia,serif; }
.sandbox-equation.huge { font-size:clamp(25px,5vw,41px); }
.result-blocks { margin-top:14px; }
.sandbox-array { max-width:100%; }
.sandbox-groups { max-width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:7px; }
.sandbox-groups > div { min-width:57px;padding:8px;border-radius:13px;display:grid;place-items:center;background:#e8e1bd;border:1px solid #cbbd88; }
.sandbox-groups span,.sandbox-groups small { font-size:9px;color:var(--ink-soft); }
.sandbox-groups strong { font:700 25px/1 Georgia,serif; }
.remainder-bowl { margin:12px auto 0;padding:8px 14px;border-radius:99px;background:#f3d0bc;display:flex;align-items:center;gap:5px; }
.remainder-bowl span { font-size:11px;font-weight:800; }
.remainder-bowl .math-dot { width:14px; }

/* Completion */
.mastery-scene { display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:35px;padding:45px;background:linear-gradient(145deg,color-mix(in srgb,var(--chapter-color),white 88%),#f9f5e7); }
.mastery-branch { min-height:390px;position:relative;display:grid;place-items:center; }
.mastery-branch::before { content:"";position:absolute;width:42px;height:330px;border-radius:50%;background:linear-gradient(90deg,#68452b,#a47545,#603d27);transform:rotate(18deg); }
.mastery-leaves { position:absolute;width:260px;height:230px;border-radius:48% 52% 45% 55%;background:radial-gradient(circle at 25% 30%,#91c774 0 17%,transparent 18%),radial-gradient(circle at 70% 25%,#65a86b 0 22%,transparent 23%),radial-gradient(circle at 30% 75%,#4e9764 0 25%,transparent 26%),radial-gradient(circle at 70% 72%,#75b66f 0 27%,transparent 28%); }
.mastery-fruit { position:relative;z-index:2;width:105px;height:105px;border-radius:50%;display:grid;place-items:center;color:white;background:var(--chapter-color);border:7px solid rgba(255,255,255,.65);box-shadow:0 13px 30px rgba(56,59,29,.2);font:700 53px/1 Georgia,serif;animation:fruit-in .7s .25s cubic-bezier(.2,1.6,.4,1) both; }
.mastery-copy h2 { margin:0;font:700 clamp(31px,6vw,49px)/1.2 Georgia,"STSong",serif; }
.mastery-copy > p { line-height:1.8;color:var(--ink-soft); }
.mastery-stats { margin:20px 0;padding:15px;border-radius:16px;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;align-items:center;background:rgba(255,255,255,.72); }
.mastery-stats strong { font:700 30px/1 Georgia,serif;color:var(--chapter-color); }
.mastery-stats span { font-size:12px;color:var(--ink-soft); }
.mastery-actions { display:flex;flex-wrap:wrap;gap:10px; }

.toast { position:absolute; z-index:10; left:50%; bottom:22px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 36px); border-radius:14px; padding:12px 16px; background:#173d35; color:white; box-shadow:0 10px 30px rgba(0,0,0,.2); text-align:center; font-size:14px; animation:toast-in .3s both; }
@keyframes toast-in { from {opacity:0;transform:translate(-50%,10px)} }

.progress-wrap { min-height:58px; padding:10px 22px max(12px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; color:var(--ink-soft); font-size:11px; }
.progress-track { height:7px; border-radius:99px; background:rgba(24,61,53,.1); overflow:hidden; }
.progress-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--leaf),#e8b94d); transition:width .6s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 700px) {
  .topbar { min-height:64px; padding-left:12px; padding-right:12px; }
  .game { padding:2px 9px 8px; }
  .scene { min-height:calc(100dvh - 129px); border-radius:22px; }
  .counting-area { grid-template-columns:1fr; padding:12px 15px; }
  .meadow { min-height:300px; }
  .tally-board { min-height:150px; display:grid; grid-template-columns:auto 1fr; gap:8px 18px; }
  .tally-board h3,.tally-help { grid-column:1/-1; }
  .tally-count { margin:0; }
  .tally-marks { min-height:50px; font-size:34px; justify-content:flex-start; }
  .scene-heading { padding:20px 17px 6px; }
  .scene-actions { padding:12px 16px 22px; }
  .pens-area { padding:14px 12px; gap:7px; }
  .pen-card { padding:11px 5px; border-radius:16px; }
  .mini-rabbits { min-height:195px; }
  .mini-rabbits .rabbit { width:45px; }
  .wood-tag { min-height:52px; font-size:26px; }
  .symbol-tray { padding:0 12px 12px; }
  .ending-scene { grid-template-columns:1fr; padding:24px; text-align:center; }
  .tree-visual { height:300px; }
  .tree-crown { transform:translateX(-50%) scale(.72); transform-origin:bottom center; bottom:83px; }
  .tree-trunk { height:170px; width:42px; }
  .zero-fruit { top:46px; }
  .insight-card { text-align:left; }
  .chapter-grid { grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 12px 26px;gap:10px; }
  .chapter-card { min-height:205px;padding:14px;border-radius:18px; }
  .chapter-symbol { width:46px;height:46px;font-size:25px;border-radius:14px; }
  .lesson-intro { grid-template-columns:1fr;padding:28px 22px;text-align:center;gap:28px; }
  .lesson-emblem { width:125px;margin:0 auto;font-size:72px; }
  .lesson-intro-copy > p:not(.eyebrow) { margin-left:auto;margin-right:auto; }
  .lesson-route { justify-content:center; }
  .guide-stage,.practice-visual,.sandbox-visual { margin:8px 12px;padding:13px;border-radius:18px;min-height:230px; }
  .place-workbench { grid-template-columns:1fr;padding:10px 12px; }
  .loose-sticks { min-height:230px;padding:15px; }
  .place-slots { min-height:150px; }
  .place-slot { padding:12px 5px; }
  .place-slot strong { font-size:36px; }
  .loose-stick { height:62px; }
  .stick-bundle { height:66px; }
  .stick-bundle::after { top:29px; }
  .merge-trays { grid-template-columns:1fr;gap:7px; }
  .operator-medallion { width:38px;height:38px;font-size:24px; }
  .number-tray { min-height:110px;padding:7px; }
  .base-blocks { transform:scale(.88);transform-origin:center; }
  .result-workspace { min-height:150px; }
  .division-stage { grid-template-columns:repeat(5,minmax(0,1fr));gap:4px; }
  .division-pen { min-height:165px;padding:7px 2px;border-radius:10px; }
  .division-pen > span { font-size:8px; }
  .pen-dots .math-dot { width:13px; }
  .practice-top { padding:18px 13px 3px; }
  .practice-dots i { width:17px; }
  .visual-pair { gap:3px; }
  .visual-pair .base-blocks { transform:scale(.72); }
  .place-answer { gap:6px;padding:7px; }
  .number-stepper { grid-template-columns:40px 55px 40px; }
  .number-stepper input { width:55px;height:49px; }
  .stepper-button { width:40px;height:40px; }
  .big-plus { font-size:23px; }
  .number-answer { width:120px;height:54px; }
  .practice-feedback { font-size:13px; }
  .practice-scene .scene-actions { flex-wrap:wrap; }
  .sandbox-controls { padding:3px 12px 8px; }
  .dual-range { grid-template-columns:1fr;gap:8px; }
  .place-table > div { min-height:145px;padding:10px 3px; }
  .place-table strong { font-size:34px; }
  .mastery-scene { grid-template-columns:1fr;padding:24px;text-align:center;gap:10px; }
  .mastery-branch { min-height:235px; }
  .mastery-branch::before { height:210px;width:34px; }
  .mastery-leaves { width:210px;height:190px; }
  .mastery-fruit { width:84px;height:84px;font-size:42px; }
  .mastery-stats { grid-template-columns:auto 1fr;text-align:left; }
  .mastery-actions { justify-content:center; }
}

@media (max-width: 390px) {
  .chapter-grid { grid-template-columns:1fr; }
  .chapter-card { min-height:170px; }
  .chapter-symbol { margin:8px 0 6px; }
  .scene-actions { flex-wrap:wrap; }
}

@media (max-height: 680px) and (orientation: landscape) {
  .topbar { min-height:56px; padding-top:7px; }
  .scene { min-height:calc(100dvh - 114px); }
  .hero-scene { padding:18px; }
  .seed-visual { height:105px; transform:scale(.72); margin:-5px auto; }
  .counting-area { grid-template-columns:1fr .45fr; padding-top:5px; }
  .meadow { min-height:220px; }
  .tally-board { min-height:200px; display:flex; }
  .scene-heading { padding-top:12px; }
  .ending-scene { grid-template-columns:1fr 1fr; }
  .tree-visual { height:300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}