:root {
  --ink: #273248;
  --blue: #5267d9;
  --blue-light: #dfe5ff;
  --sun: #ffbd3e;
  --sun-light: #fff0b6;
  --mint: #75d5c2;
  --mint-dark: #218b79;
  --coral: #ff7d6b;
  font-family: "Avenir Next", "Nunito", ui-rounded, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, #fff4c8 0 12%, transparent 34%),
    radial-gradient(circle at 90% 35%, #dff8ef 0 10%, transparent 31%),
    #f7f5ee;
}
button { font: inherit; cursor: pointer; touch-action: manipulation; }
.hidden { display: none !important; }
header {
  height: 68px; padding: 0 max(18px, calc((100vw - 980px) / 2)); display: flex;
  align-items: center; justify-content: space-between; background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(39,50,72,.08);
}
.home { color: #687086; text-decoration: none; font-weight: 800; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 1000; font-size: 19px; }
.logo span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: var(--mint); color: white; transform: rotate(-5deg); box-shadow: 0 4px 0 #3da994;
}
.round-button {
  width: 42px; height: 42px; border: 0; border-radius: 50%; background: #e8e4da;
  color: #555f72; font-size: 21px; font-weight: 900;
}
main { width: min(940px, calc(100% - 24px)); margin: 0 auto; padding: 24px 0 48px; }
.mode-switch {
  width: fit-content; margin: 0 auto 18px; padding: 5px; display: flex; gap: 4px;
  border-radius: 18px; background: #e7e2d8;
}
.mode-switch button {
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 14px;
  background: transparent; color: #6d7180; font-weight: 900;
}
.mode-switch button.active { background: white; color: var(--blue); box-shadow: 0 3px 12px rgba(43,50,75,.1); }
.play-card {
  min-height: 660px; padding: 26px; border: 1px solid #e3ded3; border-radius: 34px;
  background: rgba(255,255,255,.94); box-shadow: 0 22px 70px rgba(53,58,74,.1); text-align: center;
}
.cheer { margin: 0; color: var(--mint-dark); font-weight: 1000; font-size: 18px; }
.equation { margin: 2px 0; font-size: clamp(48px, 9vw, 72px); font-weight: 1000; letter-spacing: -.05em; }
.equation .sign { color: var(--coral); }
.instruction { min-height: 29px; margin: 4px 0 16px; color: #687086; font-size: 19px; font-weight: 800; }
.playground {
  position: relative; min-height: 350px; padding: 22px; display: grid; grid-template-columns: 1fr 86px 1fr;
  align-items: center; gap: 12px; border-radius: 27px; overflow: hidden;
  background: linear-gradient(180deg, #f4f7ff, #eef8f4);
  border: 2px solid #e1e9ee;
}
.number-world { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.world-label {
  min-width: 78px; padding: 6px 13px; border-radius: 99px; color: white;
  background: var(--blue); font-size: 16px; font-weight: 1000;
}
.number-world.second .world-label { background: #e69b00; }
.world-label.number-change { animation: numberChange .55s cubic-bezier(.2,1.5,.5,1); }
.tens-row, .ones-pool { min-height: 84px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ten-stick {
  width: 30px; height: 112px; display: grid; grid-template-rows: repeat(10,1fr);
  border: 3px solid #3c50bd; border-radius: 9px; overflow: hidden; background: var(--blue-light);
  box-shadow: 0 5px 0 rgba(60,80,189,.18);
}
.ten-stick i { border-bottom: 1px solid rgba(60,80,189,.24); }
.ten-stick.gold { border-color: #ce8700; background: var(--sun-light); box-shadow: 0 5px 0 rgba(206,135,0,.18); }
.ten-stick.magic { animation: pop 1.15s cubic-bezier(.2,1.35,.5,1); border-color: var(--mint-dark); background: #c9f2e8; }
.ten-stick.mixed-stick {
  border-color: #3c50bd; background: transparent; animation: pop 1.15s cubic-bezier(.2,1.35,.5,1);
}
.ten-stick.mixed-stick i { border-bottom: 1px solid rgba(31,43,112,.2); }
.ten-stick.mixed-stick .blue-part { background: var(--blue); }
.ten-stick.mixed-stick .gold-part { background: var(--sun); }
.machine {
  position: relative; width: 74px; height: 170px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--mint-dark); font-weight: 1000;
}
.machine-arrow { font-size: 48px; animation: nudge 1.2s infinite; }
.machine small { font-size: 12px; }
.ten-frame {
  width: 184px; padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  border: 4px solid #465ad0; border-radius: 18px; background: white; box-shadow: 0 8px 0 #c9d0f4;
}
.slot {
  aspect-ratio: 1; display: grid; place-items: center; border: 2px dashed #bbc4ef;
  border-radius: 50%; background: #f0f3ff;
}
.counter {
  width: 100%; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--blue);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.13), 0 3px 5px rgba(40,52,120,.18);
}
.counter.gold { background: var(--sun); }
.counter.takeable { cursor: pointer; }
.slot.empty { animation: glow 1.1s infinite; }
.ten-frame.complete {
  animation: fullTen 1.6s ease-in-out; border-color: var(--mint-dark);
  background: #dcfaf3; box-shadow: 0 0 0 10px rgba(117,213,194,.18), 0 8px 0 #a5ddd1;
  cursor: pointer;
}
.ten-frame.complete .slot { border-color: transparent; background: transparent; }
.ten-frame.becoming-bar {
  pointer-events: none; overflow: hidden; animation: frameToBar 2.2s cubic-bezier(.55,0,.2,1) forwards;
}
.ten-frame.becoming-bar .slot {
  border: 0; border-radius: 3px; background: transparent; transition: background .5s;
}
.ten-frame.becoming-bar .counter {
  border-radius: 3px; box-shadow: none; animation: flattenDots 2.2s cubic-bezier(.55,0,.2,1) forwards;
}
.ten-frame.drop-ready {
  transform: scale(1.06); border-color: var(--mint-dark); background: #d5fff5;
  box-shadow: 0 0 0 12px rgba(117,213,194,.22), 0 8px 0 #a5ddd1;
}
.loose-counter {
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--sun);
  box-shadow: inset 0 -6px 0 rgba(180,112,0,.2), 0 4px 7px rgba(111,85,23,.18);
  transition: filter .2s, box-shadow .2s; user-select: none; -webkit-user-select: none; touch-action: none;
}
.loose-counter.blue {
  background: var(--blue);
  box-shadow: inset 0 -6px 0 rgba(31,43,112,.2), 0 4px 7px rgba(40,52,120,.18);
}
.original-ones { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.exchanged-ones {
  padding: 9px 12px 12px; border: 2px solid rgba(60,80,189,.2); border-radius: 18px;
  background: rgba(230,235,255,.62);
}
.exchanged-ones > span {
  display: block; margin-bottom: 7px; color: #5e6aa9; font-size: 12px;
  font-weight: 900; letter-spacing: .03em; text-align: center;
}
.exchanged-ones > div {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.loose-counter.exchanged-ball {
  background: #8194ef;
  box-shadow: inset 0 -6px 0 rgba(49,65,154,.18), 0 4px 7px rgba(40,52,120,.13);
}
.loose-counter.takeable { filter: saturate(1.15); }
.loose-counter.takeable:active { filter: brightness(1.08); box-shadow: inset 0 -2px 0 rgba(180,112,0,.2); }
.drag-source { opacity: .25; }
.drag-counter {
  position: fixed; z-index: 1000; width: 48px; height: 48px; border-radius: 50%;
  pointer-events: none; background: var(--sun); transform: scale(1.12);
  box-shadow: inset 0 -6px 0 rgba(180,112,0,.2), 0 12px 24px rgba(72,55,16,.25);
}
.counter.landed { animation: land .5s cubic-bezier(.2,1.5,.5,1); }
.loose-counter.used { opacity: 0; transform: scale(.3) translateX(-70px); transition: .35s; pointer-events: none; }
.equals { font-size: 48px; color: var(--coral); font-weight: 1000; }
.result-world { grid-column: 1 / -1; animation: reveal .5s ease-out; }
.magic-step {
  grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 22px; animation: reveal .8s ease-out;
}
.friendly-group { display: grid; justify-items: center; gap: 12px; }
.mixed-number { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.big-number {
  min-width: 96px; padding: 8px 18px; border-radius: 18px; color: white;
  background: var(--mint-dark); font-size: 36px; font-weight: 1000; box-shadow: 0 5px 0 #176e60;
}
.gold-number { background: #e69b00; box-shadow: 0 5px 0 #b97c00; }
.same-as {
  grid-column: 1 / -1; padding: 12px 18px; border-radius: 16px;
  background: white; color: #536078; font-size: 19px; font-weight: 1000;
}
.result-groups { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.result-tens { display: flex; gap: 7px; }
.result-ones { display: flex; gap: 7px; }
.result-ones { max-width: 220px; justify-content: center; flex-wrap: wrap; gap: 5px; }
.result-ones .loose-counter { width: 32px; height: 32px; animation: none; box-shadow: inset 0 -4px 0 rgba(180,112,0,.2), 0 2px 4px rgba(111,85,23,.15); }
.result-label { margin-top: 16px; font-size: 28px; font-weight: 1000; }
.result-label b { color: var(--blue); font-size: 42px; }
.story {
  max-width: 680px; min-height: 76px; margin: 20px auto 10px; padding: 15px 20px;
  border-radius: 20px; background: #fff5ce; color: #735914; font-size: 20px; line-height: 1.4; font-weight: 850;
}
.story:empty { visibility: hidden; }
.next {
  min-height: 58px; padding: 0 30px; border: 0; border-radius: 18px; color: white;
  background: var(--blue); box-shadow: 0 5px 0 #394cae; font-size: 19px; font-weight: 1000;
}
.next:active { transform: translateY(3px); box-shadow: 0 2px 0 #394cae; }
.step-button {
  min-width: min(310px, 90%); min-height: 62px; margin: 4px auto 16px; padding: 0 28px;
  border: 0; border-radius: 20px; color: white; background: var(--coral);
  box-shadow: 0 6px 0 #d95443; font-size: 20px; font-weight: 1000;
  animation: stepReady .7s ease-out;
}
.step-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #d95443; }
.parent-note { text-align: center; color: #7b7d87; font-size: 14px; }
.confetti { position: absolute; font-size: 28px; animation: fall 1.4s ease-out forwards; pointer-events: none; }
.removed { opacity: .14; filter: grayscale(1); transform: scale(.8); transition: .35s; }
.crossed { position: relative; transform: scale(.94); transition: .25s; }
.crossed::before, .crossed::after {
  content: ""; position: absolute; z-index: 5; left: 46%; top: -7px; width: 7px; height: calc(100% + 14px);
  border-radius: 5px; background: #e13d3d; box-shadow: 0 1px 2px rgba(90,0,0,.25);
}
.crossed::before { transform: rotate(45deg); }
.crossed::after { transform: rotate(-45deg); }
.subtract-work {
  width: fit-content; margin: 18px auto 0; padding: 10px 22px; border-radius: 16px;
  background: white; color: var(--blue); font-size: 30px; font-weight: 1000;
  box-shadow: 0 4px 14px rgba(59,74,150,.12);
}
.subtract-work.work-change { animation: numberChange .55s cubic-bezier(.2,1.5,.5,1); }
.ten-stick.openable {
  cursor: pointer; outline: 6px solid rgba(255,189,62,.32); animation: openReady 1.2s ease-in-out infinite;
}
.ten-stick.opening-to-balls {
  --exchange-ball-size: 48px;
  position: relative; z-index: 4; overflow: visible;
  animation: barToBalls 1.8s cubic-bezier(.55,0,.2,1) forwards;
}
.ten-stick.opening-to-balls i { animation: barPieceToBall 1.8s cubic-bezier(.55,0,.2,1) forwards; }
.exchange-lesson {
  width: min(520px, 94%); margin: 12px auto; padding: 14px; display: grid;
  grid-template-columns: auto auto auto auto auto; align-items: center; justify-content: center; gap: 10px;
  border-radius: 18px; background: #fff4c8; color: #66501b; animation: reveal .45s ease-out;
}
.retained-crossed { cursor: pointer; }
.subtraction-remaining {
  display: grid; grid-template-columns: repeat(var(--bar-count), 30px);
  justify-content: center; align-items: center; gap: 8px;
}
.exchange-lesson strong { color: var(--coral); font-size: 30px; }
.mini-stick {
  width: 22px; height: 80px; display: grid; grid-template-rows: repeat(10,1fr);
  overflow: hidden; border: 2px solid #3c50bd; border-radius: 6px; background: var(--blue);
}
.mini-stick i { border-bottom: 1px solid rgba(255,255,255,.25); }
.mini-balls { width: 92px; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.mini-balls i { aspect-ratio: 1; border-radius: 50%; background: #8194ef; }
.break-button {
  padding: 14px 18px; border: 0; border-radius: 16px; color: white; background: var(--coral);
  box-shadow: 0 4px 0 #d95443; font-weight: 1000; font-size: 17px;
}
@keyframes glow { 50% { background: #d5fff5; border-color: var(--mint-dark); transform: scale(1.07); } }
@keyframes fullTen {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.09) rotate(-2deg); }
  70% { transform: scale(1.05) rotate(2deg); }
}
@keyframes frameToBar {
  0% { width: 184px; height: auto; padding: 8px; grid-template-columns: repeat(5,1fr); transform: rotate(0) scale(1); border-color: #465ad0; }
  35% { transform: rotate(-4deg) scale(1.08); border-color: var(--mint-dark); background: #d5fff5; }
  70% { width: 42px; height: 145px; padding: 4px; grid-template-columns: 1fr; grid-template-rows: repeat(10,1fr); transform: rotate(0) scale(1.05); }
  100% { width: 30px; height: 112px; padding: 0; gap: 0; grid-template-columns: 1fr; grid-template-rows: repeat(10,1fr); transform: rotate(0) scale(1); border: 3px solid var(--mint-dark); border-radius: 9px; background: #c9f2e8; box-shadow: 0 5px 0 rgba(33,139,121,.2); }
}
@keyframes flattenDots {
  0%, 40% { border-radius: 50%; }
  75%, 100% { border-radius: 0; width: 100%; height: 100%; border-bottom: 1px solid rgba(31,43,112,.22); }
}
@keyframes nudge { 50% { transform: translateX(-7px); } }
@keyframes pop { 0% { transform: scale(.4) rotate(-12deg); } 70% { transform: scale(1.12) rotate(3deg); } }
@keyframes reveal { from { opacity: 0; transform: scale(.9); } }
@keyframes land { from { transform: scale(.35); } 65% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes numberChange {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); filter: brightness(1.18); }
  100% { transform: scale(1); }
}
@keyframes openReady { 50% { outline-color: rgba(255,189,62,.82); filter: brightness(1.12); } }
@keyframes barToBalls {
  0% { width: 30px; height: 112px; grid-template-columns: 1fr; grid-template-rows: repeat(10,1fr); gap: 0; }
  35% { transform: scale(1.13) rotate(3deg); }
  100% {
    width: calc(var(--exchange-ball-size) * 5 + 24px);
    height: calc(var(--exchange-ball-size) * 2 + 6px);
    grid-template-columns: repeat(5,var(--exchange-ball-size));
    grid-template-rows: repeat(2,var(--exchange-ball-size));
    gap: 6px; border-color: transparent; background: transparent; box-shadow: none;
  }
}
@keyframes barPieceToBall {
  0%, 35% { border-radius: 0; background: var(--blue-light); }
  100% {
    width: var(--exchange-ball-size); height: var(--exchange-ball-size);
    border-radius: 50%; background: #8194ef;
    box-shadow: inset 0 -6px 0 rgba(49,65,154,.18), 0 4px 7px rgba(40,52,120,.13);
  }
}
@keyframes stepReady {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fall { to { transform: translateY(250px) rotate(240deg); opacity: 0; } }
@media (max-width: 680px) {
  header { padding: 0 12px; }.logo { font-size: 15px; }.home { font-size: 14px; }
  main { padding-top: 14px; }.mode-switch { width: 100%; }.mode-switch button { flex: 1; padding: 0 8px; }
  .play-card { min-height: 700px; padding: 20px 10px; border-radius: 26px; }
  .playground { min-height: 390px; padding: 18px 8px; grid-template-columns: 1fr 44px 1fr; gap: 3px; }
  .machine { width: 42px; }.machine-arrow { font-size: 34px; }.machine small { display: none; }
  .ten-frame { width: 146px; gap: 4px; padding: 6px; border-width: 3px; }
  .ten-stick { width: 23px; height: 92px; }.ten-stick.opening-to-balls { --exchange-ball-size: 38px; }.subtraction-remaining { grid-template-columns: repeat(var(--bar-count), 23px); gap: 5px; }.loose-counter { width: 38px; height: 38px; }
  .drag-counter { width: 42px; height: 42px; }
  .tens-row, .ones-pool { min-height: 70px; gap: 5px; }.world-label { font-size: 14px; }
  .story { font-size: 18px; }.result-groups { gap: 12px; }.result-ones { max-width: 150px; }.result-ones .loose-counter { width: 27px; height: 27px; }
  .magic-step { gap: 8px; }.big-number { min-width: 76px; font-size: 29px; padding: 7px 12px; }
  .same-as { font-size: 16px; padding: 10px; }.mixed-number { gap: 6px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  header { height: 54px; }
  main { padding-top: 8px; }
  .mode-switch { margin-bottom: 8px; }
  .mode-switch button { min-height: 40px; }
  .play-card { min-height: 0; padding: 14px 18px; }
  .equation { font-size: 48px; }
  .instruction { margin-bottom: 8px; font-size: 17px; }
  .playground { min-height: 270px; padding: 12px; }
  .ten-stick { height: 82px; width: 22px; }
  .loose-counter { width: 34px; height: 34px; }
  .story { min-height: 54px; margin-top: 10px; padding: 10px 16px; font-size: 17px; }
  .parent-note { display: none; }
}