/* ================= welcome ================= */
.welcome { padding-top: 0; overflow: hidden; }
.welcome > .toran { margin: 0 -16px; }
.welcome > .topbar { margin-top: -26px; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; position: relative; z-index: 1; }
.halo { position: relative; display: grid; place-items: center; width: min(62vw, 270px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 232, 184, 0.9) 45%, rgba(255, 232, 184, 0) 70%); }
.halo::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 2px dashed rgba(217, 164, 65, 0.55); }
.mascot { display: inline-block; }
.mascot .ic { width: 100%; height: 100%; }
.mascot.big { width: 78%; height: 88%; animation: sway 4s ease-in-out infinite; transform-origin: 50% 90%; }
.greet { margin: 4px 0 0; font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1.05; text-shadow: 0 3px 0 rgba(255, 181, 46, 0.35); }
.tagline { margin: 0 0 10px; color: var(--ink-soft); font-size: 1.15rem; font-weight: 700; }
.btn.go { padding-right: 26px; }
.btn.go .arrow { transform: rotate(180deg); width: 1.2em; height: 1.2em; }
.kolam { position: absolute; bottom: 0; width: min(36vw, 200px); height: min(36vw, 200px); opacity: 0.55; pointer-events: none; z-index: 0; }
.kolam .ic { width: 100%; height: 100%; }
.kolam.left { left: 0; }
.kolam.right { right: 0; transform: scaleX(-1); }
.notice { max-width: 420px; padding: 10px 16px; border-radius: 18px; background: var(--sky); font-size: 0.95rem; margin: 6px 0 0; }
.notice.warn { background: var(--lotus-soft); max-width: none; }

/* ================= map ================= */
.map-head { display: flex; align-items: center; gap: 10px; }
.map-head h1 { margin: 0; font-size: 1.9rem; }
.mascot.small { width: 64px; height: 72px; animation: sway 4s ease-in-out infinite; transform-origin: 50% 90%; }
.ribbon-title { display: inline-flex; margin: 8px 0 12px; padding: 4px 26px; font-size: 1.25rem; color: #fff; position: relative;
  background: linear-gradient(180deg, #2fa8a3, var(--peacock)); border-radius: 8px; box-shadow: var(--lift-sm); }
.ribbon-title .te { color: #fff; }
.ribbon-title::before, .ribbon-title::after { content: ''; position: absolute; top: 8px; bottom: -8px; width: 18px; background: var(--peacock-deep); z-index: -1; }
.ribbon-title::before { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon-title::after { right: -10px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tile { position: relative; min-height: 150px; border: 0; border-radius: 26px; padding: 14px 10px 12px;
  background: linear-gradient(180deg, var(--paper), var(--cream-2)); box-shadow: inset 0 0 0 2px var(--line), var(--lift);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; text-align: center; font-weight: 800; touch-action: manipulation;
  transition: transform 0.18s var(--spring); }
.tile:active { transform: scale(0.97); }
.tile .medal { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, var(--mango-soft) 70%); box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--gold-soft); }
.tile .medal .ic { width: 58px; height: 58px; }
.tile .lvl { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
  background: var(--ink); color: #fff; }
.tile .name { font-size: 1.05rem; line-height: 1.1; }
.tile .corner { position: absolute; top: 8px; right: 8px; }
.tile .corner .ic { width: 34px; height: 34px; }
.tile.open { background: linear-gradient(180deg, #fffaf0, #ffe7b3); box-shadow: inset 0 0 0 2.5px #ffcf73, var(--lift); }
.tile.done { background: linear-gradient(180deg, #fffdf2, #fff0c4); box-shadow: inset 0 0 0 3px var(--gold), var(--lift); }
.tile.done .lvl { background: var(--gold); }
.tile.locked .medal, .tile.soon .medal { filter: grayscale(0.85); opacity: 0.55; }
.tile.locked, .tile.soon { color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--line), var(--lift-sm); }
.tile.locked .lvl, .tile.soon .lvl { background: #c9b79c; }
.tile .ribbon { position: absolute; top: 12px; right: -4px; padding: 1px 10px; font-size: 0.68rem; line-height: 1.1; color: #fff; background: var(--lotus); border-radius: 6px 0 0 6px; box-shadow: var(--lift-sm); }
.tile .ribbon .te { color: #fff; font-size: 0.95em; }

/* ================= hub ================= */
.hub-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 24px; }
.hub-card h1 { margin: 0; font-size: 2.2rem; }
.medal.big { position: relative; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, var(--mango-soft) 72%); box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px var(--gold), var(--lift); }
.medal.big .ic { width: 84px; height: 84px; }
.medal.big .lvl { position: absolute; bottom: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 1.3rem; box-shadow: 0 0 0 3px #fff; }
.hub-actions { display: grid; gap: 12px; width: 100%; max-width: 440px; margin-top: 6px; }
.btn.action { justify-content: flex-start; gap: 14px; padding-left: 12px; text-align: left; }
.btn.action .bi { align-items: flex-start; flex: 1; }
.action-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: grid; place-items: center; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06); }
.action-ic .ic { width: 44px; height: 44px; }
.done-star { width: 32px; height: 32px; }
.mastered-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--peacock-deep); background: var(--gold-soft); padding: 4px 14px 4px 6px; border-radius: 999px; }
.mastered-tag .ic { width: 30px; height: 30px; }
.note summary { cursor: pointer; font-weight: 800; min-height: var(--tap); display: flex; align-items: center; }
.note p { margin: 8px 0 0; color: var(--ink-soft); max-width: 62ch; }

/* ================= run screen ================= */
.run .topbar { flex-wrap: nowrap; }
.run .topbar .spacer { display: none; }
.run .title { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; flex: 1; }
.run .title > .bi { max-width: 100%; }
.title-ic { display: none; }
.phase-tag { font-size: 0.8rem; padding: 0 10px; border-radius: 999px; background: var(--peacock-soft); color: var(--peacock-deep); margin-top: 2px; }
.phase-tag .bi { flex-direction: row; gap: 6px; }
.progress-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.progress-row.center { justify-content: center; }
.progress-row .label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; }
.progress-text { font-weight: 800; padding: 2px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }

/* last-6 mangoes hang on a vine */
.meter { position: relative; display: flex; gap: 8px; padding: 6px 12px 2px; }
.meter::before { content: ''; position: absolute; left: 4px; right: 4px; top: 8px; height: 10px; border-top: 3px solid #6aa96a; border-radius: 50%; }
.slot { position: relative; width: 36px; height: 36px; }
.slot .ic { width: 100%; height: 100%; }
.slot.empty .ic { filter: grayscale(1) brightness(1.25); opacity: 0.35; }
.slot.tried .ic { filter: saturate(0.55) brightness(1.08); opacity: 0.7; }
.slot.clean .ic { filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.9)); }

.run-body { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.stage-host { display: grid; align-content: start; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
.side.one-col { grid-template-columns: 1fr; }
.side .buddy { grid-column: 1 / -1; }
.side .pad { grid-column: 1 / -1; }
.pad-host { display: contents; }
.side > .btn { width: 100%; padding: 6px 12px; font-size: 1.05rem; }

/* Mamidi and her speech bubble */
.buddy { display: flex; align-items: center; gap: 8px; min-height: 76px; }
.mascot.mini { width: 62px; height: 72px; flex: none; transform-origin: 50% 90%; }
.mascot.mini.happy { animation: hop 0.7s var(--spring) 2; }
.mascot.mini.think { animation: tilt 0.9s ease-in-out 1; }
.bubble { position: relative; flex: 1; min-height: 58px; padding: 8px 16px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--line), var(--lift-sm);
  display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 1.2rem; }
.bubble::before { content: ''; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; background: var(--paper); transform: translateY(-50%) rotate(45deg); box-shadow: -2.5px 2.5px 0 var(--line); border-radius: 0 0 0 4px; }
.bubble .gentle { color: var(--peacock-deep); }
.praise { display: inline-flex; align-items: center; gap: 10px; color: var(--lotus-deep); animation: pop 0.45s var(--spring); }
.praise .ic { width: 40px; height: 40px; }
.caption { font-weight: 800; font-size: 1.15rem; text-align: center; color: var(--ink-soft); }
.btn.pulse { animation: pulse 1s ease-in-out infinite; }

.equation { display: flex; align-items: center; gap: 12px; font-size: clamp(2.3rem, 10vw, 3.6rem); font-weight: 800; line-height: 1;
  padding: 10px 26px 6px; border-radius: 26px; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--line), var(--lift-sm); }
.equation .op { color: var(--lotus); }
.equation span:last-child { color: var(--peacock); }

/* number pad */
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pad-6 { grid-template-columns: repeat(3, 1fr); }
.pad-btn { min-height: 70px; min-width: 64px; border: 0; border-radius: 22px; font-size: 2.1rem; font-weight: 800; color: var(--ink); touch-action: manipulation;
  background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 2.5px #f3dcae, inset 0 -5px 0 #f3dcae, var(--lift-sm); transition: transform 0.12s var(--ease); }
.pad-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2.5px #f3dcae, inset 0 -2px 0 #f3dcae; }
.pad-btn.muted { opacity: 0.35; }
.pad.off .pad-btn { opacity: 0.5; }
.pad-btn.nudge { animation: nudge 0.3s; }

/* ================= quick look ================= */
.flash-board { min-height: 270px; display: grid; place-items: center; }
.hidden-card { width: min(56vw, 220px); aspect-ratio: 1; border-radius: 30px; display: grid; place-items: center; font-size: 6rem; font-weight: 800; color: var(--mango-deep);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 10px, transparent 10px 20px), linear-gradient(180deg, #fff3d4, var(--mango-soft));
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px var(--gold), var(--lift); }
.pattern { display: grid; place-items: center; animation: pop 0.25s var(--ease); }
.die { width: min(56vw, 220px); aspect-ratio: 1; border-radius: 34px; padding: 16px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: linear-gradient(145deg, #fff, #f3e9db); box-shadow: inset 0 -8px 0 #e8dac6, inset 0 0 0 2px #efe2cf, 0 14px 26px rgba(61, 42, 63, 0.16); }
.cell { display: grid; place-items: center; }
.die .cell.pip::before { content: ''; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7b5a7e, var(--ink) 65%); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35); }
.thali { width: min(84vw, 320px); aspect-ratio: 4 / 3; border-radius: 50% / 46%; padding: 8% 10%; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  background: radial-gradient(ellipse at 40% 30%, #fff4c4, #f0c860 45%, #c9932a 100%); box-shadow: inset 0 0 0 7px #e9be5a, inset 0 0 0 9px #b8821f, inset 0 6px 18px rgba(255, 255, 255, 0.5), 0 14px 26px rgba(61, 42, 63, 0.18); }
.thali .cell { min-width: 0; min-height: 0; }
.thali .cell .ic { width: 92%; height: auto; aspect-ratio: 1; color: #ff9f1c; filter: drop-shadow(0 2px 1px rgba(120, 60, 0, 0.3)); }
.grouped .die .cell.pip.g0::before { background: radial-gradient(circle at 35% 30%, #4fc0bb, var(--peacock) 65%); }
.grouped .die .cell.pip.g1::before { background: radial-gradient(circle at 35% 30%, #f598b8, var(--lotus) 65%); }
.grouped .thali .cell.g0 .ic { color: #ffc531; }
.grouped .thali .cell.g1 .ic { color: var(--lotus); }
.grouped .die, .grouped .thali { box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--peacock-soft), 0 14px 26px rgba(61, 42, 63, 0.16); }
.hands { display: flex; gap: 6px; justify-content: center; align-items: flex-end; }
.hand-wrap { width: min(38vw, 160px); display: flex; flex-direction: column; align-items: center; }
.hand { display: block; width: 100%; }
.hand svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(61, 42, 63, 0.15)); }
.hand-wrap.left .hand svg { transform: scaleX(-1); }
.hand-label { font-size: 2.4rem; font-weight: 800; color: var(--peacock); }

/* ================= baskets & mangoes ================= */
.baskets { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-end; width: 100%; }
.plus { font-size: 2.4rem; font-weight: 800; color: var(--lotus); line-height: 1; align-self: center; }
.basket { position: relative; flex: 1 1 250px; max-width: 350px; padding-top: 4px; }
/* back wall of the basket: the fruit sits in front of it, the front wall covers the bottom */
.basket::before { content: ''; position: absolute; left: 3%; right: 3%; top: 0; bottom: 40px; border-radius: 26px 26px 6px 6px;
  background: linear-gradient(180deg, rgba(60, 30, 5, 0.42), rgba(60, 30, 5, 0.18)), conic-gradient(var(--cane) 25%, var(--cane-dark) 0 50%, var(--cane) 0 75%, var(--cane-dark) 0) 0 0 / 22px 14px;
  box-shadow: inset 0 0 0 5px var(--cane-deep), inset 0 14px 16px rgba(40, 20, 0, 0.35); }
.basket-fruit { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 0 2px; padding: 12px 12px 0; justify-items: center; min-height: 76px; }
.basket-front { position: relative; z-index: 2; margin-top: -22px; pointer-events: none; }
.basket-front .rim { height: 14px; border-radius: 10px; margin: 0 -2px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  background: repeating-linear-gradient(120deg, var(--cane-deep) 0 5px, var(--cane) 5px 11px); }
.basket-front .weave { height: 50px; clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); border-radius: 0 0 22px 22px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.14)),
    conic-gradient(var(--cane) 25%, var(--cane-dark) 0 50%, var(--cane) 0 75%, var(--cane-dark) 0) 0 0 / 22px 14px; }
.mango { position: relative; width: 64px; height: 64px; padding: 0; border: 0; background: none; display: block; touch-action: manipulation; transition: transform 0.15s var(--spring); }
.mango .ic { width: 64px; height: 64px; filter: drop-shadow(0 3px 2px rgba(120, 60, 0, 0.18)); }
.mango:active { transform: scale(0.92); }
.mango .badge { display: none; position: absolute; right: -2px; top: -4px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px; place-items: center;
  background: linear-gradient(180deg, #f27ba3, var(--lotus)); color: #fff; font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 2.5px #fff, var(--lift-sm); }
.mango.counted .badge { display: grid; animation: pop 0.3s var(--spring); }
.mango.counted .ic { filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.85)); }
.mango.pulse { animation: pulse 0.5s; }

.basket.closed { flex: 0 0 150px; width: 150px; cursor: pointer; padding-top: 12px; }
.basket.closed::before { display: none; }
.basket.closed .lid { position: relative; height: 70px; margin: 0 2px -6px; border-radius: 60% 60% 10px 10px / 90% 90% 10px 10px;
  background: radial-gradient(ellipse at 40% 20%, rgba(255, 255, 255, 0.35), transparent 50%), conic-gradient(var(--cane) 25%, var(--cane-dark) 0 50%, var(--cane) 0 75%, var(--cane-dark) 0) 0 0 / 22px 14px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.basket.closed .knob { position: absolute; left: 50%; top: -10px; width: 26px; height: 18px; transform: translateX(-50%); border-radius: 50% 50% 6px 6px; background: var(--cane-deep); }
.basket.closed .basket-front { margin-top: 0; }
.basket.closed .tag { position: absolute; z-index: 3; left: 50%; top: 40px; transform: translateX(-50%); width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, var(--cream-2)); box-shadow: 0 0 0 4px var(--lotus), 0 0 0 7px #fff, var(--lift-sm); }
.basket.closed .tag span { font-size: 2.8rem; font-weight: 800; color: var(--lotus-deep); line-height: 1; padding-top: 4px; }
.basket.closed.glow .tag { animation: pulse 0.8s ease-in-out 2; }
.basket.nudge { animation: nudge 0.3s; }

/* count-on keeps the closed basket and the open basket side by side */
.stage.on .baskets { flex-wrap: nowrap; gap: 6px; }
.stage.on .basket:not(.closed) { flex: 1 1 0; min-width: 0; }
.stage.on .plus { font-size: 2rem; }

/* ================= doubles: mirror-image baskets ================= */
.stage.mirror .baskets { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
.stage.mirror .basket { flex: 1 1 0; min-width: 0; }
.mirrored .basket-fruit { direction: rtl; }
.mirrored .mango .ic { transform: scaleX(-1); }
.mirror-line { flex: none; width: 8px; border-radius: 4px; margin-bottom: 30px;
  background: linear-gradient(180deg, #f4fbff, #bfe0f0 30%, #f4fbff 50%, #bfe0f0 70%, #f4fbff);
  box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(120, 190, 225, 0.8); }

/* ================= ten-frames ================= */
.tenframe { --cell: 64px; display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(2, var(--cell)); padding: 6px; border-radius: 20px;
  background: linear-gradient(180deg, #c98d3f, #a8702c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.2), var(--lift); }
.tf-cell { position: relative; width: var(--cell); height: var(--cell); display: grid; place-items: center; padding: 0; border: 0; background: none;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.18); }
.tf-cell::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff8e6, #f2ddb4); box-shadow: inset 0 3px 5px rgba(90, 50, 10, 0.3); }
.tf-cell > * { position: relative; }
.tf-cell .mango, .tf-cell .mango .ic { width: calc(var(--cell) - 4px); height: calc(var(--cell) - 4px); }
.tf-cell.empty .ghost-ic { width: 44px; height: 44px; opacity: 0; transition: opacity 0.2s; }
button.tf-cell.empty::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 2.5px dashed rgba(229, 89, 138, 0.55); }
.tf-cell.ghost .ghost-ic { opacity: 0.55; filter: saturate(0.6); }
.tf-cell.ghost::after { display: none; }
.tf-cell .badge { display: none; position: absolute; right: -2px; top: -2px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; place-items: center;
  background: linear-gradient(180deg, #2fa8a3, var(--peacock)); color: #fff; font-weight: 800; box-shadow: 0 0 0 2.5px #fff; }
.tf-cell.ghost .badge { display: grid; animation: pop 0.3s var(--spring); }
.equation .ask { color: var(--lotus); }
.equation .ten { color: var(--peacock); }
.stage.friends .equation span:last-child { color: var(--peacock); }

.frames { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; align-items: center; }
@media (max-width: 759px) { .frames { flex-direction: column; gap: 2px; } }
.mango.pair .ic { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 7px rgba(18, 128, 127, 0.9)); }
.mango.extra .ic { filter: drop-shadow(0 0 8px rgba(229, 89, 138, 1)); }
.mango.moving .ic { filter: drop-shadow(0 0 9px rgba(229, 89, 138, 1)); }
.mango.moved .ic { filter: drop-shadow(0 0 8px rgba(229, 89, 138, 0.95)); animation: pop 0.45s var(--spring); }
.tenframe.full { box-shadow: 0 0 0 4px var(--gold), inset 0 2px 0 rgba(255, 255, 255, 0.35), var(--lift); }

/* ================= World 1: numbers to 50 ================= */
.world-head { display: flex; align-items: center; gap: 12px; }
.unit-tag { font-size: 0.85rem; font-weight: 800; color: var(--ink-soft); padding: 2px 10px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.world-addition .ribbon-title { background: linear-gradient(180deg, #ffcf5c, #f2a12a); color: #4a2a12; }
.world-addition .ribbon-title .te { color: #4a2a12; }
.world-addition .ribbon-title::before, .world-addition .ribbon-title::after { background: #c9821a; }
.world-subtraction .ribbon-title, .world-term2 .ribbon-title { background: linear-gradient(180deg, #f27ba3, var(--lotus)); }
.world-subtraction .ribbon-title::before, .world-subtraction .ribbon-title::after, .world-term2 .ribbon-title::before, .world-term2 .ribbon-title::after { background: var(--lotus-deep); }
.soon-card { padding: 14px 20px; color: var(--ink-soft); font-weight: 800; text-align: center; }
.world-name { font-size: 0.9rem; font-weight: 800; color: var(--peacock-deep); background: var(--peacock-soft); padding: 2px 12px; border-radius: 999px; }
.world-name .bi { flex-direction: row; gap: 6px; }

/* quick look on a ten frame (dots, as in the book) */
.tf-quick { width: min(80vw, 320px); aspect-ratio: 5 / 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: 6px; border-radius: 18px; background: linear-gradient(180deg, #c98d3f, #a8702c); box-shadow: var(--lift); }
.tf-quick .cell { background: radial-gradient(circle at 50% 35%, #fff8e6, #f2ddb4); box-shadow: inset -1px 0 0 rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.18); }
.tf-quick .cell.pip::before { content: ''; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7b5a7e, var(--ink) 65%); }
.grouped .tf-quick .cell.pip.g0::before { background: radial-gradient(circle at 35% 30%, #4fc0bb, var(--peacock) 65%); }
.grouped .tf-quick .cell.pip.g1::before { background: radial-gradient(circle at 35% 30%, #f598b8, var(--lotus) 65%); }

/* ten and more */
.framed { position: relative; }
.frame-tag { position: absolute; top: -12px; left: -10px; z-index: 2; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gold); color: #fff; font-weight: 800; font-size: 1.3rem; box-shadow: 0 0 0 3px #fff, var(--lift-sm); }
.tenframe.glow { box-shadow: 0 0 0 5px var(--peacock), 0 0 22px rgba(18, 128, 127, 0.6); }

/* choices */
.choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.choice { min-width: 88px; min-height: 76px; padding: 6px 18px; border: 0; border-radius: 22px; font-size: 2.2rem; font-weight: 800; color: var(--ink); touch-action: manipulation;
  background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 2.5px #f3dcae, inset 0 -5px 0 #f3dcae, var(--lift-sm); transition: transform 0.12s var(--ease); }
.choice:active { transform: translateY(3px); }
.choice.muted { opacity: 0.35; }
.choice[disabled] { cursor: default; }

/* tens and ones */
.pv-row { display: flex; flex-wrap: wrap; gap: 6px 2px; justify-content: center; align-items: flex-end; max-width: 560px; }
.pv.bundle + .pv.stick { margin-left: 14px; }
.pv { position: relative; border: 0; background: none; padding: 0; touch-action: manipulation; }
.pv.bundle { width: 64px; height: 110px; }
.pv.stick { width: 64px; height: 110px; }
.pv .ic { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgba(120, 70, 10, 0.25)); }
.pv .badge { display: none; position: absolute; top: -6px; right: 0; min-width: 32px; height: 30px; padding: 0 7px; border-radius: 999px; place-items: center;
  background: linear-gradient(180deg, #f27ba3, var(--lotus)); color: #fff; font-weight: 800; box-shadow: 0 0 0 2.5px #fff; }
.pv.counted .badge { display: grid; animation: pop 0.3s var(--spring); }
.pv.counted .ic { filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.9)); }
.pv.pulse { animation: pulse 0.5s; }
.to-input { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.to-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 420px); border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--peacock), var(--lift-sm); }
/* each column: − digit + side by side, so the table stays short on a phone */
.to-col { display: grid; grid-template-columns: 64px minmax(36px, 1fr) 64px; grid-template-rows: auto 64px; align-items: center; padding-bottom: 6px; }
.to-col + .to-col { box-shadow: inset 2px 0 0 var(--peacock-soft); }
.to-head { grid-column: 1 / -1; background: var(--peacock); color: #fff; font-weight: 800; padding: 2px 0; text-align: center; font-size: 0.95rem; }
.to-head .te { color: #fff; }
.to-box { grid-column: 2; grid-row: 2; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.to-box.pop { animation: pop 0.25s var(--spring); }
.to-step { grid-row: 2; justify-self: center; width: 60px; height: 60px; border: 0; border-radius: 50%; font-size: 2rem; font-weight: 800; color: #fff; touch-action: manipulation; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), var(--lift-sm); }
.to-step.minus { grid-column: 1; background: linear-gradient(180deg, #f27ba3, var(--lotus)); }
.to-step.plus { grid-column: 3; background: linear-gradient(180deg, #2fa8a3, var(--peacock)); }
.to-step:active { transform: translateY(2px); }
.to-check { min-width: 200px; }
.to-check .ic { width: 1.4em; height: 1.4em; }

/* number strip */
.strip { display: grid; grid-template-columns: repeat(var(--n), 64px); border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2.5px var(--gold), var(--lift); background: var(--paper); margin-top: 16px; }
.strip-cell { height: 72px; display: grid; place-items: center; font-size: 2rem; font-weight: 800; box-shadow: inset -1.5px 0 0 var(--gold-soft); }
.strip-cell.gap { color: var(--lotus); background: repeating-linear-gradient(45deg, var(--lotus-soft) 0 8px, #fff 8px 16px); }
.strip-cell.revealed { color: #fff; background: linear-gradient(180deg, #f27ba3, var(--lotus)); animation: pop 0.35s var(--spring); }
.strip-cell.hop { animation: hop 0.6s var(--spring); background-color: var(--mango-soft); }
.strip-stage .choices { margin-top: 8px; }

/* bigger or smaller */
.num-card { min-width: 132px; min-height: 140px; }
.num-card-in { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 3rem; line-height: 1; }
.mini-to { display: grid; grid-template-columns: 34px 34px; font-size: 1.1rem; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.mini-to span { padding: 2px 0; text-align: center; }
.mini-to .t { background: var(--peacock-soft); color: var(--peacock-deep); }
.mini-to .o { background: var(--mango-soft); color: #8a4f0a; }
.look-tens .mini-to .t, .look-ones .mini-to .o { box-shadow: 0 0 0 3px var(--lotus); animation: pulse 0.8s ease-in-out 2; }
.compare { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.compare-row { display: flex; align-items: center; gap: 14px; }
.cmp-num { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 3.2rem; font-weight: 800; line-height: 1; padding: 10px 16px 8px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--line), var(--lift-sm); }
.sign-slot { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; color: var(--lotus); border: 3px dashed var(--lotus); }
.choice.sign { min-width: 96px; }
.sign-in { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1; }
.croc { display: block; width: 64px; height: 40px; }
.croc .ic { width: 100%; height: 100%; }
.croc.right .ic { transform: scaleX(-1); }
.order { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.order-slots { display: flex; gap: 8px; }
.order-slot { width: 70px; height: 70px; border-radius: 18px; border: 3px dashed var(--peacock); display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
.order-slot.filled { border-style: solid; background: var(--peacock-soft); animation: pop 0.3s var(--spring); }
.order-slot.shown { border-style: solid; background: var(--lotus-soft); color: var(--lotus-deep); }
.order-tile.used { opacity: 0.25; }

/* first, second, third */
.ord-line { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
.ord-start { font-weight: 800; color: var(--peacock-deep); display: inline-flex; align-items: center; gap: 6px; }
.ord-start .bi { flex-direction: row; gap: 6px; }
.kites { display: flex; gap: 2px; justify-content: flex-start; padding: 8px 0 0 0; border-bottom: 3px dotted var(--gold); width: 100%; }
.kite-btn, .kite-sm { position: relative; display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 0; touch-action: manipulation; }
.kite-btn { width: 64px; height: 104px; }
.kite-sm { width: 34px; }
.kite-ic { display: block; width: 100%; }
.kite-btn .kite-ic .ic { width: 56px; height: 90px; }
.kite-sm .kite-ic .ic { width: 32px; height: 52px; }
.kite-sm.shining .kite-ic .ic { filter: drop-shadow(0 0 6px #ffc531) drop-shadow(0 0 10px #ffc531); animation: pulse 1.4s ease-in-out infinite; }
.ord-tag { min-height: 22px; font-weight: 800; font-size: 0.9rem; color: var(--lotus-deep); }
.kite-btn.counted .kite-ic .ic, .kite-sm.counted .kite-ic .ic { transform: translateY(-6px); transition: transform 0.3s var(--spring); }
.kite-btn.muted { opacity: 0.35; }
.ord-choice { min-width: 104px; }
.ord-in { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ord-in b { font-size: 2rem; }
.ord-in .bi { font-size: 0.95rem; }

/* ================= World 2: adding to 50 ================= */
/* count on: number strip with jump arcs */
.jump-strip { display: grid; grid-template-columns: repeat(var(--n), 64px); margin-top: 34px; border-radius: 14px; box-shadow: inset 0 0 0 2.5px var(--gold), var(--lift); background: var(--paper); }
.jump-cell { position: relative; height: 72px; border: 0; background: none; font-size: 2rem; font-weight: 800; color: var(--ink); box-shadow: inset -1.5px 0 0 var(--gold-soft); touch-action: manipulation; }
.jump-cell.start { color: var(--peacock-deep); }
.jump-cell.start::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 3px solid var(--peacock); }
.jump-cell .arc { display: none; position: absolute; left: -32px; bottom: 62px; width: 64px; height: 30px; border: 3px solid var(--lotus); border-bottom: 0; border-radius: 40px 40px 0 0; pointer-events: none; }
.jump-cell.jumped .arc { display: block; animation: pop 0.3s var(--spring); }
.jump-cell.jumped { background: var(--lotus-soft); }
.jump-cell.here { background: linear-gradient(180deg, #f27ba3, var(--lotus)); color: #fff; }
.jump-cell.nudge { animation: nudge 0.3s; }
.jump-count { min-height: 28px; font-weight: 800; color: var(--lotus-deep); }

/* doubles above 5: mirror-image ten frames */
.mirror-frames { align-items: center; }
.mirror-frames .mirror-line { width: 8px; align-self: stretch; margin: 0; }
.mirror-frame { transform: scaleX(-1); }
.mirror-frame .mango { transform: scaleX(-1); }
@media (max-width: 759px) {
  .mirror-frames .mirror-line { width: auto; height: 8px; align-self: stretch; }
  .mirror-frame { transform: scaleY(-1); }
  .mirror-frame .mango { transform: scaleY(-1); }
}

/* facts: cells beyond a smaller target */
.tf-cell.off::before { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0 6px, transparent 6px 12px), #e9d7b5; box-shadow: none; opacity: 0.6; }
.equation .ask { color: var(--lotus); }

/* past ten: the mangoes being added */
.mango.new .ic { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px rgba(229, 89, 138, 0.9)); }

/* zero and swapping */
.zero-swap .baskets { flex-wrap: nowrap; gap: 8px; align-items: flex-end; }
.zero-swap .basket { flex: 1 1 0; min-width: 0; transition: transform 0.6s var(--ease); }
.basket.empty .basket-fruit::after { content: '0'; grid-column: 1 / -1; font-size: 2rem; font-weight: 800; color: var(--cane-deep); opacity: 0.6; }
.basket.glow { filter: drop-shadow(0 0 10px rgba(18, 128, 127, 0.8)); }
.swap-row { display: flex; }
.eq-row { display: flex; align-items: center; gap: 8px; }
.swap-btn { font-size: 1.8rem; color: var(--peacock-deep); }
.swap-row.swapped > .basket:first-child { order: 3; }
.swap-row.swapped > .basket:last-child { order: 1; }
.swap-row.swapped > .plus { order: 2; }
.swap-row.swapped .basket { animation: hop 0.6s var(--spring); }

/* tens and ones: column addition */
.col-add { display: grid; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--peacock), var(--lift-sm); }
.col-row { display: grid; grid-template-columns: 30px minmax(90px, auto) 70px 70px; align-items: center; min-height: 58px; }
.col-row + .col-row { box-shadow: inset 0 1.5px 0 var(--peacock-soft); }
.col-row.head { min-height: 0; background: var(--peacock); color: #fff; font-weight: 800; font-size: 0.9rem; }
.col-row.head .te { color: #fff; }
.col-row:last-child { box-shadow: inset 0 1.5px 0 var(--peacock-soft), inset 0 -4px 0 var(--peacock); }
.col-row.head .col-t, .col-row.head .col-o { font-size: 0.85rem; padding: 2px 0; }
.col-sign { text-align: center; font-size: 1.8rem; font-weight: 800; color: var(--lotus); }
.col-t, .col-o { text-align: center; font-size: 2.3rem; font-weight: 800; }
.col-t { box-shadow: inset 2px 0 0 var(--peacock-soft); }
.col-o { box-shadow: inset 2px 0 0 var(--peacock-soft); }
.look-ones .col-o, .look-tens .col-t { background: var(--mango-soft); }
.look-ones .col-row.head .col-o, .look-tens .col-row.head .col-t { background: var(--lotus); }
.blocks { display: flex; align-items: flex-end; gap: 3px; padding: 4px 6px; }
.blocks .rod { width: 8px; height: 44px; border-radius: 2px; background: repeating-linear-gradient(180deg, #2fa8a3 0 3.4px, #0b6463 3.4px 4.4px); }
.blocks .cubes { display: grid; grid-template-columns: repeat(3, 9px); gap: 2px; margin-left: 4px; }
.blocks .cube { width: 9px; height: 9px; border-radius: 2px; background: #ffb52e; box-shadow: inset 0 -2px 0 #e08a00; }

/* story sums */
.story-card { padding: 12px 16px; }
.story { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.35; text-align: left; align-items: flex-start; gap: 6px; }
.story .te { font-size: 1.05rem; }
.key-word { background: var(--mango-soft); color: inherit; padding: 0 4px; border-radius: 6px; box-shadow: inset 0 -3px 0 var(--mango); }
.story.look .key-word { animation: pulse 0.7s ease-in-out 2; background: var(--lotus-soft); box-shadow: inset 0 -3px 0 var(--lotus); }
.pics { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pic-group { display: grid; grid-template-columns: repeat(5, 30px); gap: 3px; padding: 6px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.pic-group.b { box-shadow: inset 0 0 0 2px var(--lotus-soft); }
.pic { position: relative; width: 30px; height: 30px; }
.pic .ic, .pic > span { display: block; width: 100%; height: 100%; }
.pic > span .ic { width: 100%; height: 100%; }
.pic.lit .ic { filter: drop-shadow(0 0 5px rgba(255, 181, 46, 1)); }
.pic[data-n]::after { content: attr(data-n); position: absolute; right: -6px; top: -8px; min-width: 18px; height: 18px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; background: var(--lotus); color: #fff; }

/* ================= World 3: taking away ================= */
.take-stage .basket { flex: none; width: 100%; }
.taken-plate { min-height: 82px; width: 100%; max-width: 350px; display: flex; flex-wrap: wrap; gap: 0 2px; justify-content: center; align-items: center; padding: 18px 8px 6px; position: relative;
  border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fffaf0, #f0d9a8 75%, #d9b46a); box-shadow: inset 0 0 0 4px #e9cf94, var(--lift-sm); }
.plate-label { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.plate-label .bi { flex-direction: row; gap: 6px; }
.mango.taken { animation: pop 0.35s var(--spring); }
.mango.taken .ic { opacity: 0.55; filter: grayscale(0.2); }
.jump-cell.arc-on .arc { display: block; border-color: var(--peacock); animation: pop 0.3s var(--spring); }
.jump-cell.visited { background: var(--peacock-soft); }
.back .jump-cell.here { background: linear-gradient(180deg, #2fa8a3, var(--peacock)); color: #fff; }
.mango.other .ic { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px rgba(229, 89, 138, 0.85)); }
.family { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 14px; padding: 10px 16px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line), var(--lift-sm); animation: pop 0.35s var(--spring); }
.fact { font-size: 1.4rem; font-weight: 800; text-align: center; }
.fact.asked { color: var(--lotus-deep); }
.blocks .gone { opacity: 0.25; box-shadow: none; outline: 1.5px dashed var(--lotus); outline-offset: 1px; }
.pic.gone { opacity: 0.28; }
.pic.gone::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px dashed var(--lotus); }

/* ================= modal content ================= */
.modal-body { display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 800; }
.big-star .ic { width: 110px; height: 110px; animation: hop 1s var(--spring) 1; filter: drop-shadow(0 6px 10px rgba(240, 150, 0, 0.35)); }
.score { font-size: 3rem; font-weight: 800; color: var(--peacock); }

/* ================= grown-up ================= */
.grownup .card h2 { margin-bottom: 4px; }
.tiles-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line), var(--lift-sm); }
.stat-value { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.stat-label { font-size: 0.9rem; color: var(--ink-soft); }
.inline-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0; font-weight: 800; }
.empty-note { padding: 14px; border-radius: 16px; background: var(--cream); color: var(--ink-soft); }

/* weekly "how she solves" chart */
.solve-chart { display: flex; flex-direction: column; gap: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; color: var(--ink); }
.legend span, .chart-tip span { display: inline-flex; align-items: center; gap: 6px; }
.legend i, .chart-tip i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.plot { position: relative; height: 200px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 4px; padding: 0 2px 34px; border-bottom: 1px solid var(--line); }
.gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #eadfcb; margin-bottom: 34px; pointer-events: none; }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border: 0; background: none; padding: 0; min-height: var(--tap); }
.stack { width: min(36px, 70%); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.seg { display: block; width: 100%; min-height: 3px; }
.stack .seg:first-child { border-radius: 4px 4px 0 0; }
.col-total { position: absolute; top: -2px; font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); }
.col-label { position: absolute; bottom: -30px; font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }
.col:hover .stack, .col:focus-visible .stack { filter: brightness(1.08); }
.chart-tip { position: absolute; top: 0; z-index: 3; width: 160px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line), var(--lift); font-size: 0.8rem; pointer-events: none; }
.chart-table summary, .grownup details summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; color: var(--ink-soft); }
.grownup table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.grownup th { text-align: left; font-size: 0.78rem; color: var(--ink-soft); font-weight: 800; padding: 4px 6px; border-bottom: 1.5px solid var(--line); }
.grownup td { padding: 6px; border-bottom: 1px solid #f3e8d6; vertical-align: middle; }
.grownup td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grownup .meter { padding: 4px 4px 0; gap: 3px; }
.grownup .slot { width: 20px; height: 20px; }
.world-block + .world-block { margin-top: 14px; }
.world-block h3 { margin: 6px 0; font-size: 1.05rem; color: var(--peacock-deep); }
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.pill.done { background: var(--gold-soft); color: #7a5410; }
.pill.open { background: var(--peacock-soft); color: var(--peacock-deep); }
.pill.locked { background: #efe7da; color: var(--ink-soft); }
.pill.clean { background: var(--peacock-soft); color: var(--peacock-deep); }
.pill.retried { background: var(--mango-soft); color: #8a4f0a; }
.pill.helped { background: var(--lotus-soft); color: var(--lotus-deep); }
.levels-table, .recent-table { display: block; overflow-x: auto; }
@media (max-width: 480px) {
  .levels-table th:nth-child(3), .levels-table td:nth-child(3) { display: none; }
  .plot { height: 170px; }
}

/* the grown-up's "how did she solve it?" bar on play screens */
.watch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 10px 12px; border-radius: 18px; background: #f4efe6; box-shadow: inset 0 0 0 2px #e5dccd; }
.watch-label { font-size: 0.9rem; font-weight: 800; color: var(--ink-soft); }
.watch-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.watch-btn { min-height: var(--tap); padding: 0 14px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2px #ddd2c0; font-weight: 800; color: var(--ink); }
.watch-btn[disabled] { opacity: 0.4; }

.grownup h1, .grownup h2 { margin: 0; }
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { font-weight: 800; margin-top: 6px; }
.form input, .form select { min-height: var(--tap); padding: 8px 14px; font: inherit; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2.5px var(--line); max-width: 360px; }
.form .lang { align-self: flex-start; }
.hint-text { color: var(--ink-soft); margin: 4px 0 0; font-size: 0.95rem; }
.mastery-list { margin: 8px 0; padding-left: 20px; }
.confirm { margin-top: 12px; padding: 12px; background: var(--lotus-soft); border-radius: 18px; }
.confirm .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= tablet landscape ================= */
@media (min-width: 720px) and (orientation: landscape) {
  .run-body { flex-direction: row; align-items: flex-start; gap: 28px; }
  .stage-host { flex: 1.5; }
  .side { flex: 1; max-width: 430px; }
  .pad-btn { min-height: 74px; }
  .baskets { flex-wrap: nowrap; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .title-ic { display: block; }
  .title-ic .ic { width: 40px; height: 40px; }
  .run .title { flex-direction: row; gap: 10px; }
}

/* ================= big tablets: use the space ================= */
@media (min-width: 900px) and (min-height: 600px) {
  .screen { max-width: 1240px; }
  .run-body { align-items: center; }
  .stage { gap: 18px; }
  .equation { font-size: 4.2rem; }
  .caption { font-size: 1.35rem; }
  .basket { max-width: 440px; }
  .basket-fruit { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); min-height: 96px; }
  .mango, .mango .ic { width: 84px; height: 84px; }
  .mango .badge { min-width: 36px; height: 36px; font-size: 1.25rem; }
  .basket-front .weave { height: 60px; }
  .basket.closed { flex-basis: 190px; width: 190px; }
  .basket.closed .lid { height: 90px; }
  .basket.closed .tag { width: 92px; height: 92px; top: 52px; }
  .basket.closed .tag span { font-size: 3.4rem; }
  .side { max-width: 470px; gap: 14px; }
  .pad-btn { min-height: 86px; font-size: 2.6rem; border-radius: 26px; }
  .mascot.mini { width: 84px; height: 96px; }
  .bubble { font-size: 1.4rem; min-height: 80px; }
  .die, .hidden-card { width: 280px; }
  .thali { width: 400px; }
  .hand-wrap { width: 200px; }
  .flash-board { min-height: 340px; }
  .slot { width: 42px; height: 42px; }
  .col-row { grid-template-columns: 40px minmax(130px, auto) 100px 100px; min-height: 84px; }
  .col-t, .col-o { font-size: 3.2rem; }
  .blocks .rod { width: 11px; height: 62px; }
  .blocks .cubes { grid-template-columns: repeat(3, 13px); }
  .blocks .cube { width: 13px; height: 13px; }
  .to-box { font-size: 3rem; }
  .story { font-size: 1.45rem; }
  .pic-group { grid-template-columns: repeat(5, 44px); }
  .pic { width: 44px; height: 44px; }
  .jump-strip { grid-template-columns: repeat(var(--n), 84px); }
  .jump-cell { height: 88px; font-size: 2.6rem; }
  .jump-cell .arc { left: -42px; width: 84px; bottom: 78px; height: 38px; }
}

/* ================= phones ================= */
@media (max-width: 480px) {
  .topbar .lang { order: 3; width: 100%; }
  .topbar .lang button { flex: 1; }
  .screen { padding: 10px 12px 20px; gap: 10px; }
  .welcome > .toran { margin: 0 -12px; }
  .equation { gap: 8px; padding: 8px 18px 4px; }
  .pad { gap: 5px; }
  .pad-btn { min-height: 64px; font-size: 1.9rem; }
  .basket { flex-basis: 100%; }
  .stage.on .basket { flex-basis: auto; }
  .basket.closed { flex: 0 0 116px; width: 116px; }
  .basket.closed .tag { width: 62px; height: 62px; }
  .basket.closed .tag span { font-size: 2.3rem; }
  .caption { font-size: 1rem; }
  .slot { width: 30px; height: 30px; }
  .phase-tag { display: none; }
  .btn.big { min-height: 72px; font-size: 1.35rem; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { min-height: 140px; }
  .mascot.mini { width: 48px; height: 56px; }
  .bubble { font-size: 1rem; min-height: 52px; padding: 6px 12px; }
  /* help / hear become round icon buttons beside Mamidi's bubble */
  .side, .side.one-col { grid-template-columns: 1fr auto auto; gap: 8px; }
  .side .buddy { grid-column: 1; min-height: 64px; }
  .side > .btn { width: 64px; height: 64px; padding: 0; border-radius: 50%; align-self: center; }
  .side > .btn .bi { display: none; }
  .side > .btn .ic { width: 30px; height: 30px; }
  .progress-row .label { display: none; }
  .meter { gap: 6px; padding-top: 4px; }
  .basket::before { bottom: 30px; }
  .basket-fruit { padding: 10px 2px 0; gap: 0; min-height: 70px; }
  .basket-front { margin-top: -18px; }
  .basket-front .weave { height: 28px; }
  .basket::before { bottom: 24px; }
  .baskets { gap: 2px; }
  .plus { font-size: 1.8rem; margin: -8px 0; }
  .equation { font-size: 2.2rem; }
  .tenframe { --cell: 62px; padding: 4px; }
  .pv-stage .caption { display: none; }
  .col-stage .caption, .jump-stage .caption, .mirror.frames .caption, .story-stage .equation, .zero-swap .caption { display: none; }
  .zero-swap .baskets { flex-wrap: wrap; }
  .take-stage .caption { font-size: 0.95rem; }
  .taken-plate { min-height: 72px; }
  .family-stage .equation { font-size: 2rem; }
  .fact { font-size: 1.15rem; }
  .zero-swap .basket { flex: 1 1 100%; }
  .col-row { grid-template-columns: 26px minmax(70px, auto) 60px 60px; }
  .story { font-size: 1.05rem; }
  .story .te { font-size: 0.95rem; }
  .jump-strip { margin-top: 30px; }
  .pv.bundle, .pv.stick { height: 70px; }
  .pv-row { max-width: 340px; }
  .frames-stage .caption { display: none; } /* counting is optional here; keep the pad on screen */
  .frames-stage { gap: 8px; }
  .mirror-line { width: 6px; }
}

/* ================= number names ================= */
.stage.names { gap: 16px; width: 100%; }
.name-card { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 200px; padding: 14px 28px; border-radius: 28px;
  background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 3px #f3dcae, var(--lift); }
.name-num { font-size: 4.2rem; font-weight: 800; line-height: 1; color: var(--lotus-deep); }
.name-word { font-size: clamp(2.2rem, 11vw, 3.4rem); font-weight: 800; line-height: 1.05; color: var(--peacock-deep); letter-spacing: 0.02em; }
.choices.words { flex-direction: column; align-items: center; width: 100%; }
.choice.word-choice { width: 100%; max-width: 420px; min-height: 72px; font-size: 1.8rem; letter-spacing: 0.02em; }
.choice.shine { box-shadow: inset 0 0 0 3px var(--mango), 0 0 0 5px rgba(255, 181, 46, 0.35), var(--lift-sm); animation: pulse 1s ease-in-out 2; }
@media (min-width: 720px) and (orientation: landscape) { .choices.words { max-width: 460px; } }

/* ================= build a number with bundles and sticks ================= */
.build-stage { gap: 12px; width: 100%; }
.build-target { min-width: 150px; padding: 6px 28px; text-align: center; font-size: 3.6rem; font-weight: 800; line-height: 1.1; color: var(--lotus-deep);
  border-radius: 24px; background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 3px #f3dcae, var(--lift-sm); }
.build-mat { width: 100%; max-width: 460px; min-height: 124px; padding: 8px; border-radius: 22px; align-items: flex-end; align-content: flex-end;
  background: repeating-linear-gradient(135deg, rgba(18, 128, 127, 0.07) 0 12px, transparent 12px 24px); border: 2.5px dashed var(--peacock); }
.build-mat .pv.bundle, .build-mat .pv.stick { width: 44px; height: 92px; }
.build-empty { align-self: center; color: var(--ink-soft); font-weight: 700; }
.build-sources { display: flex; gap: 12px; justify-content: center; width: 100%; }
.btn.build-src { flex: 1 1 0; max-width: 200px; min-height: 84px; gap: 10px; background: linear-gradient(180deg, #fffefb, #fff1d6); }
.build-src .src-ic { width: 38px; height: 64px; display: block; }
.build-src .src-ic .ic { width: 100%; height: 100%; }
.build-src .src-plus { font-size: 1.6rem; }
.build-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
@media (max-width: 759px) { .build-mat .pv.bundle, .build-mat .pv.stick { height: 64px; width: 36px; } .build-mat { min-height: 90px; } .build-target { font-size: 2.8rem; } .pv-stage .caption { display: none; } }

/* ================= face value and place value ================= */
.stage.value-stage { gap: 18px; width: 100%; }
.value-table { display: grid; grid-template-columns: 1fr 1fr; min-width: 240px; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 3px var(--peacock), var(--lift); }
.vt-col { display: flex; flex-direction: column; align-items: center; padding-bottom: 8px; }
.vt-col + .vt-col { box-shadow: inset 2px 0 0 var(--peacock-soft); }
.vt-head { width: 100%; text-align: center; padding: 4px 8px; background: var(--peacock); color: #fff; font-weight: 800; font-size: 1rem; }
.vt-head .te { color: #fff; opacity: 0.9; }
.vt-digit { font-size: 4.4rem; font-weight: 800; line-height: 1.1; color: var(--ink); padding: 4px 28px 0; }
.vt-col.target .vt-digit { color: var(--lotus-deep); text-decoration: underline 5px var(--lotus); text-underline-offset: 8px; }
.value-table.look .vt-col.target { background: var(--lotus-soft); animation: pulse 1s ease-in-out 2; }
.choice.num-pick { min-width: 104px; }

/* ================= Unit 4 · figures and patterns ================= */
.stage.fig-stage { gap: 16px; width: 100%; }
.fig-card { display: grid; place-items: center; padding: 12px 24px; border-radius: 28px; background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 3px #f3dcae, var(--lift); }
.fig { display: block; line-height: 0; }
.fig svg { display: block; }
.choice.fig-choice { min-width: 104px; min-height: 104px; padding: 6px; display: grid; place-items: center; }
.fig-stage .corner-dot { animation: pulse 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (max-width: 759px) { .fig-card > .fig > svg { width: 130px; height: 130px; } .choice.fig-choice { min-width: 96px; } }
.pos-sentence { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; font-size: 1.3rem; font-weight: 800; }
.pos-sentence .te { font-size: 1.05rem; color: var(--ink-soft); }
.fig-card.scene { padding: 8px; }
.fig-card.scene svg { width: min(100%, 320px); height: auto; }
.size-stage .choices { align-items: flex-end; gap: 12px; }
.size-word { font-size: 2rem; font-weight: 800; color: var(--peacock-deep); text-transform: capitalize; }
.choice.size-choice { min-width: 100px; min-height: 108px; }
.pat-row { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 330px; }
.pat-cell { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font-weight: 800; }
.pat-cell svg { display: block; }
.pat-cell.gap { color: var(--lotus); font-size: 1.7rem; background: repeating-linear-gradient(45deg, var(--lotus-soft) 0 6px, #fff 6px 12px); }
.pat-cell.unit { box-shadow: inset 0 0 0 3px var(--mango), 0 0 0 3px rgba(255, 181, 46, 0.35); }
.num-piece { display: inline-block; text-align: center; font-weight: 800; color: var(--ink); }
.unit-in { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.choice.unit-choice { width: 100%; max-width: 420px; min-height: 76px; }
.grow-row { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
.grow-group { position: relative; display: grid; place-items: end center; padding: 2px; border-radius: 12px; }
.grow-group.gap { min-width: 52px; height: 56px; place-items: center; color: var(--lotus); font-size: 2rem; font-weight: 800; background: repeating-linear-gradient(45deg, var(--lotus-soft) 0 6px, #fff 6px 12px); }
.grow-group.counted::after { content: attr(data-n); position: absolute; top: -10px; right: -4px; min-width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--lotus); color: #fff; font-weight: 800; font-size: 0.95rem; box-shadow: 0 0 0 2px #fff; }
.fig-card:has(.grow-row) { padding: 18px 12px 10px; }

/* ================= counting on with fingers ================= */
.fingers-stage { gap: 10px; width: 100%; }
.fingers-stage .hands { gap: 2px; }
.fingers-stage .hand-wrap { width: min(34vw, 150px); }
.finger-count { min-width: 84px; padding: 2px 22px; border-radius: 999px; text-align: center; font-size: 3rem; font-weight: 800; line-height: 1.15; color: var(--peacock-deep); background: var(--paper); box-shadow: inset 0 0 0 3px var(--peacock-soft); }
.finger-count.count-on { color: var(--lotus-deep); box-shadow: inset 0 0 0 3px var(--lotus); }
.finger-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.finger-step { min-height: 2.6em; display: grid; place-items: center; }
@media (max-width: 759px) { .finger-actions { flex-wrap: nowrap; width: 100%; } .finger-actions .finger-btn { flex: 1 1 auto; min-width: 0; padding: 6px 12px; } .finger-actions .btn.small { flex: 0 0 auto; padding: 4px 14px; } .fingers-stage { gap: 4px; } .fingers-stage .hand-wrap { width: 25vw; } .finger-count { font-size: 2rem; min-width: 72px; } .finger-step { min-height: 2.4em; font-size: 1rem; } .finger-btn { min-height: 72px; font-size: 1.3rem; } }

/* ================= draw it ================= */
.place-scene { position: relative; display: block; width: min(100%, 340px); padding: 8px; }
.place-art svg { width: 100%; height: auto; display: block; }
.place-zone { position: absolute; padding: 0; border: 3px dashed var(--peacock); border-radius: 18px; background: rgba(18, 128, 127, 0.07); min-width: 64px; min-height: 64px; display: grid; place-items: center; touch-action: manipulation; }
.place-scene .place-zone { margin: 8px 0 0 8px; }
.place-zone .ic { width: 82%; height: 82%; }
.place-zone.placed { border-style: solid; background: #fff; }
.place-zone.right { border-color: var(--leaf); box-shadow: 0 0 0 4px rgba(63, 157, 90, 0.25); animation: pop 0.35s var(--spring); }
.place-zone.try { border-color: var(--mango); opacity: 0.85; animation: nudge 0.3s; }
.place-zone.hint { border-color: var(--mango); animation: pulse 1s ease-in-out 2; }
.dot-board { position: relative; width: min(100%, 320px); aspect-ratio: 1; border-radius: 26px; background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 3px #f3dcae, var(--lift); }
.dot-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.db-line { stroke: var(--peacock); stroke-width: 9; stroke-linecap: round; }
.db-example { stroke: var(--mango); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0.95; }
.db-dot { position: absolute; width: 64px; height: 64px; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); display: grid; place-items: center; touch-action: manipulation; }
.db-pip { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px #fff; transition: transform 0.15s var(--spring); }
.db-dot.start .db-pip { background: var(--lotus); transform: scale(1.5); box-shadow: 0 0 0 5px var(--lotus-soft); }
.draw-stage { gap: 10px; }
@media (max-width: 759px) { .draw-stage .dot-board { width: min(100%, 300px); } }

/* ================= number clues (balloons) ================= */
.clue-card .story { margin: 0; font-size: 1.2rem; font-weight: 800; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.clue-card .story .te { font-size: 1rem; color: var(--ink-soft); }
.choices:not(.words) .choice.balloon, .choice.balloon { --b: #e5598a; width: 96px; height: 112px; min-width: 96px; padding: 0; border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; color: #fff;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.6), transparent 34%), var(--b); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.16), var(--lift-sm); position: relative; }
.choice.balloon::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 12px; background: var(--b); transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon-in { font-size: 2.4rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }

/* ================= number chart ================= */
.stage.chart-stage { gap: 12px; width: 100%; }
.num-chart { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: min(100%, 360px); padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--gold), var(--lift-sm); }
.chart-cell { display: grid; place-items: center; height: 34px; border-radius: 6px; background: #fff7e0; font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.chart-cell.gap { background: repeating-linear-gradient(45deg, var(--lotus-soft) 0 5px, #fff 5px 10px); color: var(--lotus); }
.chart-cell.hop { animation: hop 0.6s var(--spring); background-color: var(--mango-soft); }
.chart-cell.revealed { background: linear-gradient(180deg, #f27ba3, var(--lotus)); color: #fff; }
.cmp-num.cmp-text { font-size: 1.15rem; line-height: 1.2; text-align: center; max-width: 120px; padding: 12px 10px; }
.stage-host, .run-body > * { min-width: 0; }
.jump-stage { width: 100%; min-width: 0; }
.jump-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; padding: 40px 6px 4px; margin-top: -6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.jump-scroll .jump-strip { margin-top: 0; width: max-content; }
.tile.unit-tile { background: linear-gradient(180deg, #f5fbff, #d5efec); box-shadow: inset 0 0 0 2.5px var(--peacock), var(--lift); }
.tile.unit-tile .medal .ic { width: 52px; height: 52px; }
.letter-card .lt-straight { stroke: var(--peacock); stroke-width: 9; stroke-linecap: round; fill: none; }
.letter-card .lt-curved { stroke: var(--violet, #7a5cc2); stroke-width: 9; stroke-linecap: round; fill: none; }
.letter-card.look .lt-straight { stroke: var(--lotus); animation: pulse 0.9s ease-in-out 2; transform-box: fill-box; transform-origin: center; }