: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: 46px; height: 40px; border-radius: 13px;
  background: var(--mint); color: white; transform: rotate(-5deg); box-shadow: 0 4px 0 #3da994;
  font-size: 14px;
}
.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; }
.activity-menu { animation: reveal .45s ease-out; }
.menu-heading { max-width: 680px; margin: 18px auto 28px; text-align: center; }
.menu-kicker {
  margin: 0 0 5px; color: var(--mint-dark); font-size: 15px; font-weight: 1000;
  letter-spacing: .08em; text-transform: uppercase;
}
.menu-heading h1 { margin: 0; font-size: clamp(34px, 7vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
.menu-heading p:not(.menu-kicker) { margin: 13px auto; color: #687086; font-size: 18px; font-weight: 750; }
.wallet-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.star-wallet, .studio-star-count {
  width: fit-content; margin: 15px auto 0; padding: 9px 18px; border: 2px solid #f0c64e;
  border-radius: 99px; color: #835d00; background: #fff5c9; font-size: 18px; font-weight: 1000;
  box-shadow: 0 4px 0 #e3bd4d;
}
.star-wallet span, .studio-star-count { color: #e59d00; }
.diamond-wallet {
  border-color: #7ec8f3;
  color: #14547b;
  background: #e9f8ff;
  box-shadow: 0 4px 0 #8ecbe8;
}
.diamond-wallet span { color: #2aa3dc; }
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.activity-card {
  min-height: 170px; padding: 20px; display: grid; grid-template-columns: 86px 1fr auto;
  align-items: center; gap: 18px; border: 2px solid rgba(39,50,72,.08); border-radius: 28px;
  color: var(--ink); background: rgba(255,255,255,.94); text-align: left;
  box-shadow: 0 12px 30px rgba(53,58,74,.09); transition: transform .18s, box-shadow .18s;
}
.activity-card:active { transform: translateY(4px); box-shadow: 0 5px 15px rgba(53,58,74,.1); }
.activity-icon {
  position: relative; width: 82px; height: 82px; display: grid; place-items: center; border-radius: 24px;
  color: white; background: var(--blue); font-size: 27px; font-weight: 1000; transform: rotate(-3deg);
  box-shadow: 0 6px 0 rgba(31,43,112,.25);
}
.activity-star-badge {
  position: absolute; top: -12px; right: -12px; min-width: 43px; height: 31px; padding: 0 9px;
  display: inline-grid; place-items: center; border: 3px solid white; border-radius: 999px;
  color: #835d00; background: #ffd95f; font-size: 15px; line-height: 1; font-weight: 1000;
  box-shadow: 0 4px 0 rgba(131,93,0,.18), 0 6px 18px rgba(53,58,74,.16);
  transform: rotate(7deg);
}
.diamond-badge {
  color: #14547b;
  background: #bff1ff;
  box-shadow: 0 4px 0 rgba(20,84,123,.18), 0 6px 18px rgba(53,58,74,.16);
}
.reward-badge {
  min-width: 52px;
  padding: 0 8px 0 7px;
  gap: 4px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}
.reward-badge-count {
  font-size: 15px;
  line-height: 1;
}
.reward-badge-art {
  width: 26px;
  height: 12px;
  display: block;
}
.level-two .activity-icon { background: var(--mint-dark); box-shadow-color: #176e60; }
.money-card .activity-icon { background: #e69b00; box-shadow-color: #b97c00; font-size: 42px; }
.quiz-card .activity-icon { background: #d85f54; box-shadow-color: #a9473f; font-size: 45px; }
.multiply-card .activity-icon { background: #218b79; box-shadow-color: #176e60; font-size: 48px; }
.timetell-card .activity-icon { background: #556ee6; box-shadow-color: #394cae; font-size: 42px; }
.dress-card {
  border-color: #f0c3df; background: linear-gradient(145deg, #fff, #fff0f8);
}
.dress-card .activity-icon {
  background: linear-gradient(145deg, #ee72b9, #9165dd); box-shadow-color: #7544b2; font-size: 42px;
}
.shop-card {
  border-color: #bde9da; background: linear-gradient(145deg, #fffef7, #eefbf6);
}
.shop-card .activity-icon {
  background: linear-gradient(145deg, #2bb59d, #5b7ee5); box-shadow-color: #2e5bb9; font-size: 38px;
}
.activity-copy { display: grid; gap: 3px; }
.activity-copy b { color: #788096; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.activity-copy strong { font-size: 23px; line-height: 1.1; }
.activity-copy small { color: #72798b; font-size: 14px; line-height: 1.35; }
.activity-arrow { color: #a1a6b2; font-size: 40px; font-weight: 700; }
.game-view { animation: reveal .35s ease-out; }
.activities-button {
  min-height: 42px; margin: 0 0 10px; padding: 0 16px; border: 0; border-radius: 14px;
  color: #536078; background: #e8e4da; font-weight: 900;
}
.star-reward {
  width: fit-content; margin: 8px auto 0; padding: 4px 10px; display: block; border-radius: 99px;
  color: #835d00; background: #fff; font-size: 14px; font-weight: 1000;
}
.diamond-reward {
  color: #14547b;
  background: #eefbff;
}
.level-picker {
  width: min(440px, 100%); margin: 0 auto 12px; padding: 7px 9px 7px 16px;
  display: flex; align-items: center; gap: 12px; border: 2px solid #cce2dc;
  border-radius: 18px; background: #eef8f5; color: #176e60; font-weight: 1000;
}
.level-picker label {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
}
.level-picker select {
  min-width: 0; min-height: 44px; flex: 1; padding: 0 38px 0 13px;
  border: 0; border-radius: 12px; outline: 0; color: #304b47; background: white;
  font: inherit; font-size: 16px; font-weight: 1000; cursor: pointer;
  box-shadow: 0 3px 10px rgba(33,139,121,.1);
}
.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(38px, 10vw, 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;
}
.shop-view .playground {
  display: block;
  min-height: 520px;
  padding: 24px;
  background: linear-gradient(180deg, #f7fffc, #f3f7ff);
}
.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr);
  gap: 18px;
  align-items: start;
}
.shop-stage, .shop-panel {
  border: 2px solid rgba(39,50,72,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 24px rgba(53,58,74,.08);
}
.shop-stage { padding: 18px; }
.shop-sidebar { display: grid; gap: 14px; }
.shop-panel { padding: 16px; text-align: left; }
.shop-panel-highlight {
  border-color: rgba(43,181,157,.28);
  box-shadow: 0 14px 30px rgba(43,181,157,.14);
}
.shop-kicker {
  margin: 0 0 4px;
  color: var(--mint-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shop-panel h3 { margin: 0 0 10px; font-size: 22px; }
.shop-panel p { margin: 0 0 12px; color: #677287; font-size: 14px; line-height: 1.4; }
.shop-step-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.shop-step-tabs button, .shop-primary-btn, .shop-secondary-btn, .shop-mini-btn {
  border: 0;
  border-radius: 16px;
  font-weight: 900;
}
.shop-step-tabs button {
  min-height: 42px;
  padding: 0 14px;
  color: #687086;
  background: #eef2fb;
}
.shop-step-tabs button.active {
  color: white;
  background: linear-gradient(145deg, #2bb59d, #5b7ee5);
  box-shadow: 0 8px 16px rgba(91,126,229,.22);
}
.shop-step-tabs button:disabled, .shop-primary-btn:disabled, .shop-secondary-btn:disabled, .shop-mini-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.shop-item-grid { display: grid; gap: 12px; }
.shop-item-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 2px solid rgba(39,50,72,.08);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #f7fffd);
  text-align: left;
}
.shop-item-icon {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #2bb59d, #74d1f0);
  color: white;
  font-size: 30px;
  box-shadow: 0 6px 0 rgba(33,139,121,.18);
  overflow: hidden;
  align-self: center;
}
.shop-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.shop-item-thumb-fit {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,.82);
}
.shop-item-copy { display: grid; gap: 4px; }
.shop-item-copy strong { font-size: 20px; }
.shop-item-copy small { color: #72798b; font-size: 14px; line-height: 1.35; }
.shop-item-price {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 900;
  color: #4d5c73;
}
.shop-item-actions {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 74px;
  align-self: center;
}
.shop-mini-btn {
  width: 36px;
  height: 36px;
  color: #314255;
  background: #edf2fa;
  font-size: 24px;
  line-height: 1;
}
.shop-cart-lines { display: grid; gap: 10px; }
.shop-cart-line, .shop-wallet-line, .shop-review-box, .shop-confirm-box, .shop-total-box {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: #f7f9fc;
  font-size: 14px;
}
.shop-cart-line span, .shop-review-box span, .shop-confirm-box span { text-align: left; }
.shop-total-box, .shop-review-box, .shop-confirm-box {
  margin-top: 12px;
  background: #edf9f6;
  font-weight: 900;
}
.shop-comment-field {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.shop-comment-field span {
  font-size: 13px;
  font-weight: 800;
  color: #455468;
}
.shop-comment-field textarea {
  min-height: 92px;
  width: 100%;
  resize: vertical;
  border: 2px solid #d7e3ea;
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  color: #2d3642;
  background: #fbfcfe;
}
.shop-comment-field textarea:focus {
  outline: none;
  border-color: #5b7ee5;
  box-shadow: 0 0 0 4px rgba(91,126,229,.12);
}
.shop-wallet-ok { color: #18705f; background: #e9fbf6; }
.shop-wallet-warning { color: #9b5f00; background: #fff6d8; }
.shop-primary-btn, .shop-secondary-btn {
  min-height: 48px;
  padding: 0 18px;
}
.shop-primary-btn {
  color: white;
  background: linear-gradient(145deg, #2bb59d, #5b7ee5);
  box-shadow: 0 10px 18px rgba(91,126,229,.2);
}
.shop-secondary-btn { color: #455468; background: #edf2fa; }
.shop-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.shop-empty {
  padding: 20px 16px;
  border: 2px dashed #d7e3ea;
  border-radius: 18px;
  color: #6f7788;
  text-align: center;
  background: #fbfcfe;
}
.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.combined {
  border-color: var(--mint-dark);
  background: #dcfaf3;
  box-shadow: 0 0 0 8px rgba(117,213,194,.14), 0 8px 0 #a5ddd1;
  animation: fullTen .8s ease-in-out;
}
.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.wrong-next, .step-button.wrong-next {
  animation: wrongNext .48s ease-out; background: #d64c58; box-shadow: 0 5px 0 #a62e3a;
}
.next:active { transform: translateY(3px); box-shadow: 0 2px 0 #394cae; }
.quick-quiz-panel {
  width: min(820px, 100%); margin: 0 auto; padding: 28px; display: grid; gap: 24px;
  border: 2px solid rgba(39,50,72,.08); border-radius: 24px; background: rgba(255,255,255,.94);
  box-shadow: 0 16px 36px rgba(53,58,74,.1);
}
.quick-quiz-view .play-card { max-width: 980px; min-height: 680px; }
.quick-quiz-view .playground { min-height: 360px; display: block; }
.quick-quiz-view .equation {
  max-width: 820px; margin-left: auto; margin-right: auto; font-size: clamp(30px, 5vw, 58px);
  line-height: 1.15;
}
.quick-quiz-view .instruction { max-width: 820px; margin-left: auto; margin-right: auto; }
.multiply-view .playground { min-height: 360px; display: block; }
.time-telling-view .play-card {
  max-width: 980px; min-height: 650px; border-color: #f0a3dc;
  background: linear-gradient(180deg, #fff 0%, #fff7fd 100%);
}
.time-telling-view .playground { min-height: 420px; display: block; }
.time-telling-view .equation {
  width: fit-content; min-width: 116px; margin-left: auto; margin-right: auto; padding: 8px 18px;
  border-radius: 999px; background: #eef2ff; color: #394cae; font-size: 30px;
}
.quick-quiz-status {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  color: #687086; font-size: 18px; font-weight: 950;
}
.quick-quiz-status span:last-child { text-align: right; }
.quick-quiz-status b {
  min-width: 170px; padding: 10px 18px; border-radius: 999px; color: #176e60; background: #dff8f1;
  text-align: center; font-size: 20px;
}
.quick-quiz-formula {
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff8dd;
  color: #735914;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.quick-quiz-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-choice {
  min-height: 118px; padding: 14px; border: 0; border-radius: 18px; color: white; background: var(--blue);
  box-shadow: 0 6px 0 #394cae; font-size: clamp(22px, 3.2vw, 34px); font-weight: 1000;
  line-height: 1.08; overflow-wrap: anywhere;
}
.quick-choice.correct, .quick-digit-input.correct {
  background: var(--mint-dark); box-shadow: 0 6px 0 #176e60; color: white;
}
.quick-choice.wrong, .quick-digit-input.wrong {
  background: #d64c58; box-shadow: 0 6px 0 #a62e3a; color: white;
}
.quick-choice.answered, .quick-digit-input.answered {
  background: #eef2ff; color: #394cae; box-shadow: 0 6px 0 #c8d0ff;
}
.quick-choice:disabled { opacity: .92; cursor: default; }
.time-tell-panel {
  position: relative; max-width: 820px; min-height: 420px; gap: 12px; overflow: hidden;
  border: 12px solid #b93be8; border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(139,48,214,.12) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(135deg, transparent 75%, rgba(139,48,214,.12) 75%) 0 0 / 12px 12px,
    #fffaf1;
  box-shadow: 0 18px 0 #eb9ed5, 0 24px 40px rgba(53,58,74,.18);
}
.time-tell-title {
  display: flex; align-items: end; justify-content: center; gap: 3px;
  margin-top: -4px; line-height: .88; color: #2b3148; font-size: clamp(40px, 8vw, 88px);
  font-weight: 1000; letter-spacing: 0; text-transform: uppercase;
}
.time-tell-title span { display: inline-block; text-shadow: 0 3px 0 rgba(39,50,72,.08); }
.time-tell-title small {
  align-self: center; margin: 0 10px; color: #2b3148; font-size: clamp(26px, 4vw, 44px);
  font-weight: 500; text-transform: lowercase;
}
.tt-pink { color: #ec21d4; }
.tt-orange { color: #f6a51e; }
.tt-teal { color: #20c5d4; }
.tt-green { color: #19df50; }
.time-tell-panel .quick-quiz-status {
  order: 4; max-width: 540px; margin: 2px auto 0; padding: 7px 12px;
  border-radius: 999px; background: rgba(255,255,255,.78); font-size: 14px;
}
.time-tell-panel .quick-quiz-status b { min-width: 130px; padding: 6px 12px; font-size: 15px; }
.time-tell-stage {
  position: relative; display: grid; place-items: center; min-height: 215px; margin-top: -4px;
}
.time-tell-correct-sticker {
  position: absolute; z-index: 3; right: 28px; top: 112px; width: min(160px, 23vw);
  pointer-events: none; filter: drop-shadow(0 12px 16px rgba(53,58,74,.18));
  animation: timeTellStickerPop .46s cubic-bezier(.2,1.55,.38,1) both;
}
.time-tell-correct-sticker svg { display: block; width: 100%; overflow: visible; }
.time-tell-correct-sticker circle { fill: #ffdf65; stroke: #2b3148; stroke-width: 5; }
.time-tell-correct-sticker text {
  fill: #2b3148; font-size: 21px; font-weight: 1000; font-family: inherit;
}
.tt-star-burst { fill: #6be6cf; stroke: #2b3148; stroke-width: 4; stroke-linejoin: round; }
.tt-smile { fill: none; stroke: #2b3148; stroke-width: 6; stroke-linecap: round; }
.tt-eye { fill: #2b3148; }
.tt-ribbon { fill: #ff7aa7; stroke: #2b3148; stroke-width: 4; stroke-linejoin: round; }
.tt-confetti { stroke: #2b3148; stroke-width: 3; stroke-linejoin: round; }
.tt-confetti.c1 { fill: #ec21d4; }
.tt-confetti.c2 { fill: #19df50; }
.tt-confetti.c3 { fill: #f6a51e; }
.tt-confetti.c4 { fill: #20c5d4; }
.time-tell-panel.answered-correct .time-tell-clock {
  animation: timeTellClockHappy .48s ease both;
}
.time-tell-clock-wrap { display: grid; place-items: center; padding: 0; }
.time-tell-clock {
  width: min(255px, 56vw); max-width: 100%; filter: drop-shadow(0 14px 20px rgba(53,58,74,.16));
}
.time-tell-star {
  position: absolute; color: #f3d84a; font-size: clamp(48px, 8vw, 82px);
  line-height: 1; text-shadow: 0 4px 0 rgba(218,176,30,.18), 0 0 18px rgba(255,229,76,.48);
}
.time-tell-star::after {
  content: "✦"; position: absolute; right: -18px; top: 10px; font-size: .3em; color: #f7e86d;
}
.star-left { left: 7%; top: 20%; transform: rotate(-11deg); }
.star-right { right: 9%; top: 32%; transform: rotate(12deg) scale(1.12); }
.time-tell-choice-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 18px; margin-top: -4px;
}
.time-tell-choice {
  min-height: 82px; padding: 8px 12px 12px; border: 4px solid #2b3148; border-radius: 18px;
  color: #202437; background: #ffffff; box-shadow: 0 8px 0 #842ee5, 0 14px 18px rgba(53,58,74,.16);
  font-size: clamp(36px, 6.2vw, 62px); font-weight: 1000; line-height: 1;
}
.time-tell-choice:active { transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 #842ee5; }
.time-tell-choice.correct {
  color: #ffffff; background: #18a86c; border-color: #176e60; box-shadow: 0 8px 0 #176e60;
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.time-tell-choice.wrong {
  color: #ffffff; background: #d64c58; border-color: #a62e3a; box-shadow: 0 8px 0 #a62e3a;
  text-decoration: line-through; text-decoration-thickness: 5px;
}
.time-tell-choice:disabled { cursor: default; opacity: .92; }
.time-tell-or {
  color: #842ee5; font-size: clamp(26px, 4.5vw, 46px);
  font-weight: 1000; line-height: 1;
}
@keyframes timeTellStickerPop {
  0% { opacity: 0; transform: translateY(12px) rotate(8deg) scale(.5); }
  70% { opacity: 1; transform: translateY(-4px) rotate(-4deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
}
@keyframes timeTellClockHappy {
  0%, 100% { transform: rotate(0) scale(1); }
  32% { transform: rotate(-2deg) scale(1.04); }
  66% { transform: rotate(2deg) scale(1.04); }
}
.quick-column-wrap { display: grid; justify-content: center; gap: 14px; }
.quick-column, .quick-column-answer, .quick-place-labels {
  display: grid; align-items: center; gap: 10px;
}
.quick-place-labels { color: #687086; font-size: 14px; font-weight: 1000; text-align: center; }
.quick-column > .quick-place-labels { grid-column: 1 / -1; }
.quick-column {
  padding: 18px 20px 14px; border-radius: 18px; background: #f8fafc; border: 2px solid #e4e9f3;
}
.quick-work-row {
  display: grid;
  grid-column: 1 / -1;
}
.quick-work-row > span { min-height: 42px; }
.quick-work-button {
  min-height: 42px; padding: 6px 12px; border: 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #394cae; background: #e9edff; box-shadow: 0 4px 0 #c8d0ff;
  font-size: 13px; font-weight: 1000; cursor: pointer;
}
.work-btn-icon { font-size: 16px; line-height: 1; }
.work-btn-label { font-size: 11px; }
.work-btn-count {
  font-size: 14px; font-weight: 1000;
  min-width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,.5);
}
.work-btn-count:empty { display: none; }
.quick-borrow-row .quick-work-button {
  color: #9b3a2f; background: #ffe8df; box-shadow: 0 4px 0 #ffc7b5;
}
.quick-work-button.used { color: white; background: var(--blue); box-shadow: 0 4px 0 #394cae; }
.quick-borrow-row .quick-work-button.used { background: var(--coral); box-shadow: 0 4px 0 #d95443; }
.quick-work-button.wrong { background: #d64c58; box-shadow: 0 4px 0 #a62e3a; color: white; }
.quick-column-row {
  display: grid;
  grid-column: 1 / -1;
}
.quick-column-row span:not(.quick-column-op), .quick-digit-input {
  height: 82px; border-radius: 14px; display: grid; place-items: center; background: white;
  color: var(--ink); font-size: 46px; font-weight: 1000; box-shadow: inset 0 -4px 0 rgba(39,50,72,.08);
}
.quick-column-row span.changed {
  color: #9b3a2f; background: #fff2e8; box-shadow: inset 0 -4px 0 rgba(217,84,67,.18), 0 0 0 3px rgba(217,84,67,.16);
}
.quick-column-row .blank-digit { background: transparent; box-shadow: none; }
.quick-column-op { color: var(--coral); font-size: 38px; font-weight: 1000; text-align: center; }
.quick-column-answer {
  padding-top: 14px; border-top: 5px solid var(--ink);
}
.quick-digit-slot {
  width: 86px; height: 82px; border: 3px solid #cfd8f5; border-radius: 14px;
  background: white; color: var(--ink); font-size: 46px; font-weight: 1000;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(39,50,72,.08);
  transition: all .15s;
}
.slot-placeholder {
  color: #c0c8d8; font-weight: 700;
}
.quick-digit-slot.active {
  border-color: var(--blue); background: #f0f4ff;
  box-shadow: 0 0 0 7px rgba(82,103,217,.13), inset 0 -4px 0 rgba(39,50,72,.08);
}
.quick-digit-slot.filled {
  background: #e8f8f3; border-color: var(--mint-dark);
}
.quick-digit-slot.answered {
  background: #eef2ff; color: #394cae; border-color: #c8d0ff;
}
.quick-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
  padding: 12px;
  background: #d1d5db;
  border-radius: 20px;
}
.quick-numpad-btn {
  height: 68px;
  border: 0;
  border-radius: 14px;
  color: #1c1c1e;
  background: #f2f2f7;
  font-size: 32px;
  font-weight: 400;
  cursor: pointer;
  transition: background .1s, transform .1s;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.quick-numpad-btn:active {
  background: #c7c7cc;
  transform: scale(0.96);
}
.quick-numpad-del {
  font-size: 22px;
}
.quick-numpad-zero {
  grid-column: span 1;
}
.quick-numpad-next {
  background: var(--mint-dark);
  color: white;
  font-size: 18px;
  font-weight: 700;
}
.quick-numpad-next:active {
  background: #145f52;
}
.multiply-game {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
.multiply-board, .multiply-entry, .multiply-result {
  display: grid;
  gap: 16px;
}
.multiply-equation {
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 14px 18px 18px;
  border-radius: 18px;
  background: #f8fafc;
  border: 2px solid #e4e9f3;
  box-shadow: inset 0 -4px 0 rgba(39,50,72,.05);
}
.multiply-row {
  display: grid;
  grid-template-columns: repeat(var(--multiply-columns, 3), 76px);
  justify-content: end;
  gap: 8px;
}
.multiply-row.bottom {
  grid-template-columns: 40px repeat(var(--multiply-columns, 3), 76px);
  margin-top: 8px;
  padding-bottom: 12px;
  border-bottom: 5px solid var(--ink);
}
.multiply-op {
  display: grid;
  place-items: center;
  color: var(--coral);
  font-size: 38px;
  font-weight: 1000;
}
.multiply-digit {
  height: 82px;
  display: grid;
  place-items: center;
  border: 3px solid transparent;
  border-radius: 16px;
  background: white;
  box-shadow: inset 0 -4px 0 rgba(39,50,72,.08);
}
.multiply-blank-digit {
  min-width: 0;
}
.multiply-digit b {
  font-size: 46px;
  line-height: .9;
}
.multiply-digit small {
  color: #687086;
  font-size: 12px;
  font-weight: 1000;
}
.multiply-digit.active {
  color: white;
  transform: translateY(-2px);
}
.multiply-digit.active small { color: rgba(255,255,255,.86); }
.multiply-digit.coral { background: var(--coral); border-color: #ffb2a8; box-shadow: 0 6px 0 #d95443; }
.multiply-digit.blue { background: var(--blue); border-color: #aebcff; box-shadow: 0 6px 0 #394cae; }
.multiply-digit.mint { background: var(--mint-dark); border-color: #75d5c2; box-shadow: 0 6px 0 #176e60; }
.multiply-digit.sun { background: var(--sun); border-color: #ffe08b; box-shadow: 0 6px 0 #cf8d00; color: #604304; }
.multiply-digit.sun small { color: rgba(96,67,4,.72); }
.multiply-work-grid {
  display: grid;
  grid-template-columns: 40px repeat(var(--multiply-columns, 3), 76px);
  justify-content: end;
  gap: 7px;
  margin-top: 10px;
}
.multiply-work-row {
  grid-column: 1 / -1;
  min-height: 38px;
  display: grid;
  grid-template-columns: 40px repeat(var(--multiply-columns, 3), 76px);
  gap: 7px;
  align-items: center;
  padding: 0;
  border: 2px solid #d7deeb;
  border-radius: 10px;
  background: white;
  color: #273248;
  font-size: 24px;
  font-weight: 1000;
}
.multiply-row-op {
  display: grid;
  place-items: center;
  color: var(--coral);
  font-size: 30px;
  font-weight: 1000;
}
.multiply-work-row.active {
  border-color: currentColor;
  background: #fffaf0;
  box-shadow: inset 0 -3px 0 rgba(39,50,72,.06);
}
.multiply-work-cell {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
}
.multiply-work-cell.blank {
  background: transparent;
}
button.multiply-work-cell {
  cursor: pointer;
  border-color: #cfd7e7;
  background: white;
  box-shadow: inset 0 -3px 0 rgba(39,50,72,.08);
}
.multiply-work-cell small {
  color: #99a3b6;
  font-size: 10px;
  font-weight: 1000;
}
.multiply-work-cell.active {
  border-color: currentColor;
  box-shadow: 0 0 0 4px rgba(82,103,217,.13), inset 0 -3px 0 rgba(39,50,72,.08);
}
.multiply-work-cell.lineup-active {
  background: #fff8dd;
}
.multiply-work-cell.fixed-zero {
  background: #eef2f8;
  color: #687086;
  border-color: #d7deeb;
}
.multiply-work-cell.wrong {
  border-color: #d64c58;
  animation: shake .25s linear;
}
.multiply-work-row.done {
  background: #e8f8f3;
  border-color: #bdeee2;
  color: var(--mint-dark);
}
.multiply-work-row.total {
  margin-top: 5px;
  border-top: 7px solid var(--ink);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.multiply-work-row.coral { color: #b94135; }
.multiply-work-row.blue { color: #394cae; }
.multiply-work-row.mint { color: #176e60; }
.multiply-work-row.sun { color: #8d6500; }
.multiply-steps {
  display: grid;
  gap: 9px;
}
.multiply-step {
  min-height: 78px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 7px 10px;
  align-items: center;
  border-radius: 14px;
  border: 2px solid #e4e9f3;
  background: white;
}
.multiply-step span {
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}
.multiply-step b {
  font-size: 21px;
  font-weight: 1000;
}
.multiply-step small {
  grid-column: 2 / 3;
  color: #687086;
  font-size: 12px;
  font-weight: 850;
}
.multiply-step strong {
  grid-row: 1 / span 2;
  grid-column: 3;
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f1f4fb;
  color: #7d8598;
  text-align: center;
  font-size: 20px;
  font-weight: 1000;
}
.multiply-step.active {
  border-color: currentColor;
  box-shadow: 0 0 0 5px rgba(82,103,217,.1);
}
.multiply-step.done strong {
  background: #e8f8f3;
  color: var(--mint-dark);
}
.multiply-step.coral { color: #b94135; }
.multiply-step.blue { color: #394cae; }
.multiply-step.mint { color: #176e60; }
.multiply-step.sun { color: #8d6500; }
.multiply-step.final { color: #273248; }
.multiply-current {
  min-height: 98px;
  padding: 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff8dd;
  border: 2px solid #efd28e;
  text-align: center;
}
.multiply-current small {
  color: #687086;
  font-size: 13px;
  font-weight: 850;
}
.multiply-current span {
  color: #8d6500;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}
.multiply-current b {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 1000;
}
.multiply-actions {
  display: flex;
  justify-content: center;
}
.multiply-hint-btn {
  min-width: 148px;
  color: white;
  background: linear-gradient(135deg, #4f7fd6, #3559af);
  box-shadow: 0 6px 0 #27468d;
}
.multiply-hint-btn:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #27468d;
}
.multiply-slots {
  display: grid;
  justify-content: center;
  gap: 8px;
}
.multiply-slot {
  position: relative;
}
.multiply-slot small {
  position: absolute;
  bottom: 6px;
  color: #99a3b6;
  font-size: 10px;
  font-weight: 1000;
}
.multiply-slot.filled small,
.multiply-slot.active small {
  color: #6d7ecf;
}
.multiply-slot.wrong {
  border-color: #d64c58;
  animation: shake .25s linear;
}
.multiply-result {
  width: min(620px, 100%);
  margin: 0 auto;
}
.multiply-result > strong {
  width: fit-content;
  margin: 0 auto;
  padding: 14px 28px;
  border-radius: 22px;
  color: white;
  background: var(--mint-dark);
  box-shadow: 0 7px 0 #176e60;
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
}

@media (max-width: 900px) {
  .multiply-view .play-card {
    padding-left: 18px;
    padding-right: 18px;
  }
  .multiply-view .playground {
    padding-left: 14px;
    padding-right: 14px;
  }
  .multiply-game {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .multiply-board {
    display: contents;
  }
  .multiply-equation {
    order: 1;
  }
  .multiply-entry {
    order: 2;
    width: min(430px, 100%);
    justify-items: center;
  }
  .multiply-current,
  .multiply-numpad {
    width: min(100%, 360px);
  }
}
@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  main {
    width: min(1000px, calc(100% - 16px));
    padding: 10px 0 16px;
  }
  .multiply-view .activities-button {
    display: none;
  }
  .multiply-view .play-card {
    min-height: 0;
    padding: 12px 14px;
  }
  .multiply-view .top-copy {
    display: grid;
    gap: 2px;
  }
  .multiply-view .cheer {
    font-size: 17px;
  }
  .multiply-view .equation {
    margin: 0;
    font-size: clamp(38px, 5vw, 50px);
  }
  .multiply-view .instruction {
    min-height: 22px;
    margin: 0 0 6px;
    font-size: 16px;
  }
  .multiply-view .playground {
    min-height: 0;
    padding: 10px;
    overflow: visible;
  }
  .multiply-view .story {
    min-height: 0;
    margin: 8px auto 0;
    padding: 8px 14px;
    font-size: 16px;
  }
  .multiply-view .parent-note {
    display: none;
  }
  .multiply-game {
    grid-template-columns: minmax(330px, .95fr) minmax(286px, .75fr);
    gap: 12px;
    align-items: start;
  }
  .multiply-entry {
    gap: 10px;
    align-self: start;
  }
  .multiply-current,
  .multiply-numpad {
    width: min(100%, 300px);
  }
  .multiply-current {
    min-height: 72px;
    padding: 10px;
    border-radius: 15px;
  }
  .multiply-current b {
    font-size: 28px;
  }
  .multiply-current small {
    font-size: 11px;
  }
  .multiply-numpad {
    max-width: 300px;
    padding: 9px;
    gap: 6px;
    border-radius: 16px;
  }
  .multiply-numpad .quick-numpad-btn {
    height: 56px;
    border-radius: 12px;
    font-size: 26px;
  }
  .multiply-numpad .quick-numpad-del,
  .multiply-numpad .quick-numpad-next {
    font-size: 16px;
  }
  .multiply-equation {
    width: min(340px, 100%);
    padding: 10px 12px 14px;
  }
  .multiply-row {
    grid-template-columns: repeat(var(--multiply-columns, 3), 58px);
    gap: 5px;
  }
  .multiply-row.bottom {
    grid-template-columns: 32px repeat(var(--multiply-columns, 3), 58px);
    padding-bottom: 9px;
  }
  .multiply-op {
    font-size: 29px;
  }
  .multiply-digit {
    height: 58px;
    border-radius: 13px;
  }
  .multiply-digit b {
    font-size: 32px;
  }
  .multiply-work-grid {
    grid-template-columns: 32px repeat(var(--multiply-columns, 3), 58px);
    gap: 5px;
    margin-top: 8px;
  }
  .multiply-work-row {
    min-height: 32px;
    grid-template-columns: 32px repeat(var(--multiply-columns, 3), 58px);
    gap: 5px;
    border-radius: 8px;
    font-size: 20px;
  }
  .multiply-row-op {
    font-size: 24px;
  }
  .multiply-work-cell {
    min-height: 36px;
    border-radius: 8px;
  }
}
.quick-quiz-result strong { color: var(--mint-dark); font-size: 36px; font-weight: 1000; }
.quick-quiz-result p { margin: 0; color: #687086; font-size: 20px; font-weight: 850; }
@media (min-width: 760px) {
  .quick-quiz-view .quick-numpad,
  .multiply-view .multiply-numpad {
    width: min(100%, 760px);
    max-width: none;
    grid-template-columns: repeat(10, minmax(40px, 1fr));
    gap: 6px;
    padding: 8px;
  }
  .quick-quiz-view .quick-numpad .quick-numpad-btn,
  .multiply-view .multiply-numpad .quick-numpad-btn {
    height: 48px;
    border-radius: 10px;
    font-size: 22px;
  }
  .quick-quiz-view .quick-numpad [data-num="0"],
  .multiply-view .multiply-numpad [data-num="0"] { order: 1; }
  .quick-quiz-view .quick-numpad [data-num="1"],
  .multiply-view .multiply-numpad [data-num="1"] { order: 2; }
  .quick-quiz-view .quick-numpad [data-num="2"],
  .multiply-view .multiply-numpad [data-num="2"] { order: 3; }
  .quick-quiz-view .quick-numpad [data-num="3"],
  .multiply-view .multiply-numpad [data-num="3"] { order: 4; }
  .quick-quiz-view .quick-numpad [data-num="4"],
  .multiply-view .multiply-numpad [data-num="4"] { order: 5; }
  .quick-quiz-view .quick-numpad [data-num="5"],
  .multiply-view .multiply-numpad [data-num="5"] { order: 6; }
  .quick-quiz-view .quick-numpad [data-num="6"],
  .multiply-view .multiply-numpad [data-num="6"] { order: 7; }
  .quick-quiz-view .quick-numpad [data-num="7"],
  .multiply-view .multiply-numpad [data-num="7"] { order: 8; }
  .quick-quiz-view .quick-numpad [data-num="8"],
  .multiply-view .multiply-numpad [data-num="8"] { order: 9; }
  .quick-quiz-view .quick-numpad [data-num="9"],
  .multiply-view .multiply-numpad [data-num="9"] { order: 10; }
  .quick-quiz-view .quick-numpad .quick-numpad-del,
  .multiply-view .multiply-numpad .quick-numpad-del {
    order: 11;
    grid-column: 1 / span 3;
    font-size: 19px;
  }
  .quick-quiz-view .quick-numpad .quick-numpad-next,
  .multiply-view .multiply-numpad .quick-numpad-next {
    order: 12;
    grid-column: 4 / span 7;
    font-size: 16px;
  }
}
.quick-review-list { display: grid; gap: 10px; text-align: left; }
.quick-review-item {
  display: grid; gap: 5px; padding: 12px 14px; border-radius: 14px; background: #fff6ed;
  border: 2px solid #ffd8bd; color: #735914;
}
.quick-review-item.correct { background: #e8f8f3; border-color: #bdeee2; color: #176e60; }
.quick-review-item b { color: var(--ink); font-size: 20px; font-weight: 1000; }
.quick-review-item span, .quick-review-item em { font-size: 14px; font-style: normal; font-weight: 850; }
.quick-review-item strong { color: #9b3a2f; font-size: 16px; font-weight: 1000; }
.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;
  isolation: isolate;
  transform: scale(.94);
  filter: saturate(.65) brightness(.88);
  transition: .25s;
}
.crossed::before, .crossed::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 10px;
  height: calc(100% + 24px);
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef3d4d;
  box-shadow: 0 2px 5px rgba(91,0,10,.5);
  transform-origin: center;
  pointer-events: none;
}
.crossed::before { transform: translate(-50%, -50%) rotate(32deg); }
.crossed::after { transform: translate(-50%, -50%) rotate(-32deg); }
.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;
}

.three-digit-world, .three-digit-result {
  grid-column: 1 / -1; width: 100%; display: grid; justify-items: center; gap: 14px;
  animation: reveal .45s ease-out;
}
.column-equation {
  width: 170px; padding: 10px 15px 12px; border-radius: 18px; background: white;
  box-shadow: 0 5px 16px rgba(43,50,75,.1); font-size: 25px; font-weight: 1000;
}
.column-equation > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.column-equation.two-column-equation { width: 132px; }
.column-equation.two-column-equation > div { grid-template-columns: repeat(2, 1fr); }
.column-equation.four-column-equation { width: 220px; }
.column-equation.four-column-equation > div { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.column-equation .column-first { min-height: 48px; align-items: end; }
.column-digit {
  position: relative; min-width: 0; min-height: 30px; display: flex; align-items: end;
  justify-content: center;
}
.regrouped-digit { padding-top: 18px; padding-right: 8px; }
.regrouped-digit small {
  position: absolute; top: -5px; right: -2px; color: #1e7f67; font-size: 12px;
  font-weight: 1000; line-height: 1; transform: none;
}
.regrouped-digit s {
  position: relative; color: #788096; text-decoration: none;
}
.regrouped-digit s::before, .regrouped-digit s::after {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 3px;
  height: 31px; border-radius: 99px; background: var(--coral); transform-origin: center;
}
.regrouped-digit s::before { transform: translate(-50%, -50%) rotate(48deg); }
.regrouped-digit s::after { transform: translate(-50%, -50%) rotate(-48deg); }
.regrouped-digit em {
  position: absolute; left: 50%; bottom: -13px; color: #9a5b00; font-size: 8px;
  font-style: normal; font-weight: 1000; line-height: 1; white-space: nowrap;
  transform: translateX(-50%);
}
.column-equation .column-place-labels {
  margin: 10px 0 3px; color: #8991a4; font-size: 10px; letter-spacing: .08em;
}
.column-equation .column-second {
  position: relative; padding-bottom: 5px; border-bottom: 3px solid var(--ink);
}
.column-equation .column-second b { position: absolute; left: -9px; color: var(--coral); }
.column-equation .borrow-explanation {
  margin: 9px -5px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
}
.borrow-explanation span {
  padding: 4px 7px; display: flex; align-items: center; gap: 4px; border-radius: 8px;
  color: #176e60; background: #e2faf4; font-size: 9px; line-height: 1.2;
}
.borrow-explanation i { color: var(--coral); font-size: 12px; font-style: normal; }
.place-progress { display: flex; justify-content: center; gap: 8px; }
.place-chip {
  min-width: 82px; padding: 6px 9px; border: 2px solid #d9dfeb; border-radius: 14px;
  background: rgba(255,255,255,.7); color: #8991a4;
}
.place-chip span { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.place-chip b { display: block; font-size: 20px; line-height: 1; white-space: nowrap; }
.place-chip.value-change { animation: progressChange .42s cubic-bezier(.2,1.5,.5,1); }
.progress-note {
  display: block; margin-top: 1px; color: var(--mint-dark); font-size: 9px;
  font-weight: 1000; line-height: 1; white-space: nowrap;
}
.place-chip.active { border-color: var(--sun); background: #fff5ce; color: #8d6500; }
.place-chip.done { border-color: var(--mint); background: #e2faf4; color: var(--mint-dark); }
.place-title {
  padding: 5px 18px; border-radius: 99px; color: white; background: var(--blue);
  font-size: 15px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase;
}
.place-workbench, .exchange-workbench {
  width: min(680px, 100%); min-height: 150px; display: grid;
  grid-template-columns: 1fr 72px 1fr; align-items: center; gap: 10px;
}
.cross-out-workbench {
  width: min(680px, 100%); min-height: 150px; display: grid;
  justify-items: center; align-content: center; gap: 12px;
}
.cross-out-workbench .place-side { width: 100%; }
.cross-out-workbench .place-source { width: min(540px, 100%); }
.cross-out-prompt {
  padding: 7px 16px; border-radius: 99px; color: #a52c38; background: #ffe3e0;
  font-size: 16px;
}
.place-side { min-width: 0; display: grid; justify-items: center; gap: 9px; }
.place-side small { color: #687086; font-size: 14px; font-weight: 900; }
.place-drop, .place-source, .remove-drop, .exchange-drop, .exchange-source-wrap {
  min-width: 210px; min-height: 124px; padding: 12px; display: flex; align-items: center;
  justify-content: center; align-content: center; gap: 7px; flex-wrap: wrap;
  border: 3px dashed #b8c3e9; border-radius: 22px; background: rgba(255,255,255,.76);
  transition: .22s;
}
.place-source, .exchange-source-wrap { border-color: #efd28e; background: #fff8dd; }
.place-drop.drop-ready, .remove-drop.drop-ready, .exchange-drop.drop-ready {
  border-color: var(--mint-dark); background: #d5fff5; transform: scale(1.04);
  box-shadow: 0 0 0 9px rgba(117,213,194,.17);
}
.place-drop.place-complete { border-style: solid; border-color: var(--mint); background: #e4faf5; }
.place-drop.bundle-ready {
  border-style: solid; border-color: var(--coral); background: #fff0ec; cursor: pointer;
  animation: bundleReady 1.15s ease-in-out infinite;
}
.place-drop.bundled { border-style: solid; border-color: var(--mint); background: #e4faf5; }
.bundle-result { display: grid; justify-items: center; gap: 6px; font-size: 13px; }
.bundle-plus { color: var(--coral); font-size: 28px; font-weight: 1000; }
.pv-piece {
  position: relative; flex: 0 0 auto; margin: 0; padding: 0; border: 0; user-select: none;
  -webkit-user-select: none; touch-action: none; cursor: grab;
}
.pv-piece:active { cursor: grabbing; }
.pv-one {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 3px 5px rgba(40,52,120,.18);
}
.pv-ten {
  width: 24px; height: 94px; border: 3px solid #3c50bd; border-radius: 7px;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(60,80,189,.28) 8px 9px), var(--blue-light);
  box-shadow: 0 4px 0 rgba(60,80,189,.18);
}

.pv-piece.gold.pv-one { background: var(--sun); }
.pv-piece.gold.pv-ten {
  border-color: #ce8700;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(206,135,0,.28) 8px 9px), var(--sun-light);
  box-shadow: 0 4px 0 rgba(206,135,0,.18);
}
.pv-piece.gold.pv-hundred {
  border-color: #ce8700;
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(206,135,0,.24) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(206,135,0,.24) 7px 8px),
    var(--sun-light);
  box-shadow: 0 4px 0 rgba(206,135,0,.18);
}
.pv-piece.mint.pv-one { background: var(--mint); }
.pv-piece.mint.pv-ten {
  border-color: var(--mint-dark);
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(33,139,121,.25) 8px 9px), #c9f2e8;
  box-shadow: 0 4px 0 rgba(33,139,121,.22);
}
.pv-piece.mint.pv-hundred {
  border-color: var(--mint-dark);
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(33,139,121,.22) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(33,139,121,.22) 7px 8px),
    #c9f2e8;
  box-shadow: 0 4px 0 rgba(33,139,121,.22);
}
.pv-piece.lent.pv-one { background: var(--coral); }
.pv-piece.lent.pv-ten {
  border-color: #b84e5b;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(150,56,70,.25) 8px 9px), #ffd2cc;
  box-shadow: 0 4px 0 rgba(150,56,70,.18);
}
.pv-piece.lent.pv-hundred {
  border-color: #b84e5b;
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(150,56,70,.22) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(150,56,70,.22) 7px 8px),
    #ffd2cc;
  box-shadow: 0 4px 0 rgba(150,56,70,.18);
}
.pv-piece.carry.pv-one { background: var(--mint); }
.pv-piece.carry.pv-ten {
  border-color: #16806d;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(23,110,96,.28) 8px 9px), #64d5bd;
  box-shadow: 0 4px 0 rgba(33,139,121,.22);
}
.pv-piece.carry.pv-hundred {
  border-color: #16806d;
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(23,110,96,.25) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(23,110,96,.25) 7px 8px),
    #64d5bd;
  box-shadow: 0 4px 0 rgba(33,139,121,.22);
}

.pv-hundred {
  width: 82px; height: 82px; border: 3px solid #3c50bd; border-radius: 9px;
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(60,80,189,.24) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(60,80,189,.24) 7px 8px),
    var(--blue-light);
  box-shadow: 0 5px 0 rgba(60,80,189,.18);
}

.pv-thousand {
  width: 100px; height: 100px;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pv-thousand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pv-piece.gold.pv-thousand { filter: hue-rotate(-30deg) saturate(1.3); }
.pv-piece.mint.pv-thousand { filter: hue-rotate(90deg) saturate(0.9); }
.pv-piece.lent.pv-thousand { filter: hue-rotate(-60deg) saturate(1.2) brightness(0.95); }
.pv-piece.carry.pv-thousand { filter: hue-rotate(60deg) saturate(1.1); }

.pv-piece.gold.pv-one { background: var(--sun); }
.pv-piece.gold.pv-ten {
  border-color: #ce8700;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(206,135,0,.28) 8px 9px), var(--sun-light);
  box-shadow: 0 4px 0 rgba(206,135,0,.18);
}
.pv-piece.gold.pv-hundred {
  border-color: #ce8700;
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(206,135,0,.24) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(206,135,0,.24) 7px 8px),
    var(--sun-light);
  box-shadow: 0 4px 0 rgba(206,135,0,.18);
}
.pv-piece.gold.pv-piece.mint.pv-one { background: var(--mint); }
.pv-piece.mint.pv-ten {
  border-color: var(--mint-dark);
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(33,139,121,.25) 8px 9px), #c9f2e8;
}
.pv-piece.mint.pv-hundred {
  border-color: var(--mint-dark);
  background:
    repeating-linear-gradient(to right, transparent 0 7px, rgba(33,139,121,.22) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(33,139,121,.22) 7px 8px),
    #c9f2e8;
}
.pv-piece.mint.pv-piece.lent.pv-piece.carry.pv-piece.carry {
  border-color: #16806d;
  background-color: #64d5bd;
  box-shadow: 0 0 0 4px white, 0 0 0 7px rgba(33,139,121,.3), 0 5px 0 rgba(33,139,121,.22);
}
.pv-piece.carry.pv-one { background: #64d5bd; }
.pv-piece.carry::after {
  content: "carry"; position: absolute; z-index: 3; left: 50%; top: 50%;
  padding: 2px 4px; border-radius: 5px; color: white; background: #176e60;
  font-size: 8px; font-weight: 1000; line-height: 1; text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-8deg);
}
.pv-piece.used { opacity: 0; transform: scale(.25); pointer-events: none; transition: .3s; }
.pv-piece.waiting { opacity: .42; cursor: default; }
.pv-piece.remainder {
  opacity: 1; cursor: default; filter: none;
  box-shadow: 0 0 0 4px rgba(255,189,62,.18);
}
.pv-piece.landed { animation: land .45s cubic-bezier(.2,1.5,.5,1); }
.pv-drag-ghost {
  position: fixed; z-index: 1100; pointer-events: none; opacity: .9; transform: scale(1.08);
  filter: drop-shadow(0 12px 10px rgba(39,50,72,.25));
}
.exchange-drop {
  color: #73809c; font-size: 17px; font-weight: 1000; border-color: var(--mint);
  background: #edfaf7;
}
.exchange-drop.exchange-complete { border-style: solid; color: var(--mint-dark); }
.exchange-source-wrap.borrowed-source {
  border-style: solid; border-color: #efb8b1; background: #fff3f1;
  animation: exchangeSettle .65s ease-out;
}
.borrowed-higher-pieces {
  display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
}
.combined-exchange-pieces {
  width: 100%; display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 9px;
}
.original-place-pieces, .borrowed-place-pieces {
  min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
}
.combined-exchange-pieces small {
  flex-basis: 100%; color: #687086; font-size: 11px; font-weight: 1000;
}
.borrowed-place-pieces {
  padding: 7px; border-radius: 14px; background: rgba(117,213,194,.18);
  animation: borrowedPiecesArrive .9s cubic-bezier(.2,1.25,.5,1);
}
.removal-source.mixed-borrowed-source {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px;
}
.removal-piece-group {
  min-width: 0; display: grid; place-content: center; justify-items: center;
}
.removal-source.removal-ones .original-place-pieces.removal-piece-group {
  grid-template-columns: repeat(2, auto); gap: 8px;
}
.removal-source.removal-tens .original-place-pieces.removal-piece-group {
  grid-template-columns: repeat(4, auto); column-gap: 12px; row-gap: 10px;
}
.removal-source .borrowed-place-pieces {
  width: max-content; max-width: 100%; grid-template-columns: repeat(5, auto);
  gap: 10px; padding: 9px;
}
.removal-source.removal-tens .borrowed-place-pieces {
  column-gap: 12px; row-gap: 10px;
}
.removal-source .pv-piece, .exchange-source { cursor: pointer; }
.removal-source .pv-piece.crossed { opacity: .62; }
.borrow-record {
  min-height: 92px; padding: 8px 15px; display: flex; align-items: center; justify-content: center;
  gap: 11px; border: 2px solid #efb8b1; border-radius: 18px; background: #fff3f1;
  color: #8b3740; font-size: 13px;
}
.borrow-record > span { font-weight: 1000; }
.borrow-record .pv-piece { cursor: default; }
.mixed-borrowed-source {
  background: linear-gradient(90deg, #fff8dd 0 38%, #e8faf5 38% 100%);
}
.piece-key { display: flex; gap: 8px; font-size: 12px; font-weight: 1000; }
.piece-key span { padding: 4px 9px; border-radius: 99px; }
.blue-key { color: #3c50bd; background: var(--blue-light); }
.mint-key { color: #176e60; background: #d8f7ef; }
.lent-key { color: #963846; background: #ffe0dc; }
.borrowed-small-piece { box-shadow: 0 0 0 3px white, 0 0 0 5px rgba(33,139,121,.25); }
.remove-drop { border-color: #efb8b1; background: #fff3f1; }
.crossed-piece { opacity: .55; filter: grayscale(.5); }
.removal-source .lent-piece {
  cursor: default; opacity: .78; filter: none; pointer-events: none;
}
.pv-piece.lent.pv-one { background: #f4a49b; }
.pv-piece.lent.pv-ten, .pv-piece.lent
.pv-piece.gold.pv-piece.mint.pv-piece.lent.pv-piece.carry
.pv-hundred {
  border-color: #b84e5b;
  background-color: #ffd2cc;
  box-shadow: 0 4px 0 rgba(150,56,70,.18);
}
.crossed-piece::before, .crossed-piece::after {
  content: ""; position: absolute; z-index: 4; left: 50%; top: 50%; width: 6px;
  height: calc(100% + 12px); border: 1px solid white; border-radius: 99px;
  background: #ef3d4d; transform-origin: center;
}
.crossed-piece::before { transform: translate(-50%,-50%) rotate(35deg); }
.crossed-piece::after { transform: translate(-50%,-50%) rotate(-35deg); }
.three-digit-result {
  grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center;
}
.result-place { min-width: 0; display: grid; justify-items: center; gap: 10px; }
.result-piece-box {
  min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
}
.three-digit-result .result-label { grid-column: 1 / -1; }
.money-equation { color: #176e60; font-size: .8em; letter-spacing: -.03em; }
.money-game {
  grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
  gap: 18px; align-items: stretch; animation: reveal .45s ease-out;
}
.money-shop, .wallet-panel {
  min-width: 0; padding: 14px; border-radius: 23px; background: rgba(255,255,255,.78);
  border: 2px solid #dce5ec;
}
.money-shop { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.price-board { display: grid; grid-template-columns: 1fr; gap: 8px; }
.price-board > div {
  padding: 8px; border-radius: 14px; background: #eef1f8; color: #657086;
}
.price-board span { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 1000; text-transform: uppercase; }
.price-board b { display: block; color: var(--ink); font-size: 19px; }
.price-board .remaining-price { background: #fff1c7; }
.price-board .remaining-price b { color: #9a6200; font-size: 23px; }
.money-value-change { animation: moneyValueChange .5s cubic-bezier(.2,1.5,.5,1); }
.toy-target {
  position: relative; min-height: 245px; padding: 25px 12px 12px; display: grid;
  place-items: center; align-content: center; gap: 4px; overflow: hidden;
  border: 4px dashed #efb063; border-radius: 25px;
  background: radial-gradient(circle at 50% 35%, #fff 0 18%, transparent 46%), #fff4d6;
  transition: .25s;
}
.target-hint {
  position: absolute; top: 9px; padding: 4px 9px; border-radius: 99px;
  color: #9a6200; background: rgba(255,255,255,.85); font-size: 9px; font-weight: 1000;
  letter-spacing: .06em;
}
.toy-icon {
  font-size: 82px; line-height: 1; filter: drop-shadow(0 8px 5px rgba(77,55,12,.17));
  animation: toyFloat 2.4s ease-in-out infinite;
}
.toy-icon.art-set, .toy-icon.bracelet-kit, .toy-icon.microphone,
.toy-icon.roller-skates, .toy-icon.baking-set {
  filter: drop-shadow(0 8px 5px rgba(131,43,103,.18));
}
.toy-target > b { font-size: 19px; }
.toy-target.money-drop-ready {
  transform: scale(1.025); border-color: var(--mint-dark); background-color: #dffaf3;
  box-shadow: 0 0 0 9px rgba(117,213,194,.17);
}
.toy-target.money-paid-hit { animation: moneyHit .42s ease-out; }
.toy-target.money-wrong-hit { animation: moneyWrongHit .55s ease-out; }
.toy-target.ready-to-buy { border-style: solid; border-color: var(--mint-dark); background-color: #def8f1; }
.toy-target.toy-bought .toy-icon { animation: toyBought .8s cubic-bezier(.2,1.5,.5,1) both; }
.paid-money {
  min-height: 28px; max-width: 100%; margin-top: 5px; display: flex; justify-content: center;
  gap: 3px; flex-wrap: wrap;
}
.wallet-panel { display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.wallet-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wallet-heading span { font-weight: 1000; }
.wallet-heading small { color: #778095; font-size: 11px; font-weight: 800; }
.money-wallet {
  min-height: 286px; display: flex; align-content: center; justify-content: center;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.money-piece {
  position: relative; flex: 0 0 auto; margin: 0; padding: 0; display: grid; place-items: center;
  border: 2px solid rgba(39,50,72,.25); color: #1f2940; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 4px 0 rgba(39,50,72,.16);
}
.money-piece:active { cursor: grabbing; }
.money-piece b { position: relative; z-index: 2; font-size: 16px; line-height: 1; }
.money-piece small { position: relative; z-index: 2; font-size: 6px; letter-spacing: .05em; }
.money-mark {
  position: absolute; left: 4px; top: 3px; opacity: .45; font-size: 6px; font-weight: 1000;
}
.money-note { width: 94px; height: 48px; border-radius: 7px; }
.money-note::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.65); border-radius: 4px;
}
.money-coin, .money-cent { width: 52px; height: 52px; border-radius: 50%; }
.money-coin::after, .money-cent::after {
  content: ""; position: absolute; inset: 5px; border: 2px dotted rgba(39,50,72,.28); border-radius: 50%;
}
.money-amber { background: linear-gradient(135deg, #f8dd84, #d9a93e); }
.money-brown { background: linear-gradient(135deg, #e7c7a9, #b98256); }
.money-red { background: linear-gradient(135deg, #ffc4bf, #e8776d); }
.money-green { background: linear-gradient(135deg, #bfe8c9, #65ae7b); }
.money-blue { background: linear-gradient(135deg, #c4dcff, #739cda); }
.money-violet { background: linear-gradient(135deg, #e2d0fa, #a47acb); }
.money-silver { background: radial-gradient(circle at 35% 30%, #fff, #c7ced5 48%, #8e9aa5); }
.money-gold { background: radial-gradient(circle at 35% 30%, #fff0a8, #dfbd4f 48%, #a67b13); }
.money-piece.used {
  opacity: .12; transform: scale(.72); filter: grayscale(1); pointer-events: none; transition: .35s;
}
.money-piece.money-no-fit { animation: moneyReject .45s ease-out; }
.money-bomb-effect {
  position: absolute; z-index: 20; inset: 0; display: grid; place-content: center;
  justify-items: center; pointer-events: none;
  background: radial-gradient(circle, rgba(255,245,160,.96) 0 21%, rgba(255,151,89,.9) 22% 38%, transparent 65%);
  animation: moneyBombPop .9s cubic-bezier(.2,1.25,.4,1) forwards;
}
.money-bomb-effect::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 175px; height: 175px;
  background: #fff2a8; clip-path: polygon(50% 0, 59% 30%, 79% 8%, 76% 37%, 100% 29%, 80% 51%, 100% 67%, 71% 65%, 78% 96%, 56% 73%, 45% 100%, 39% 71%, 10% 91%, 27% 61%, 0 53%, 30% 43%, 7% 20%, 39% 31%);
  transform: translate(-50%, -50%);
}
.money-bomb-effect > * { position: relative; z-index: 2; }
.cartoon-bomb {
  font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 3px rgba(80,25,20,.28));
  animation: cartoonBombSpin .55s ease-out;
}
.money-bomb-effect strong {
  margin-top: -5px; color: #bd2735; font-size: 32px; font-weight: 1000;
  letter-spacing: -.04em; text-shadow: 0 3px white, 2px 0 white, -2px 0 white;
  transform: rotate(-5deg);
}
.money-bomb-effect small {
  padding: 3px 8px; border-radius: 99px; color: white; background: #bd2735;
  font-size: 9px; font-weight: 1000; letter-spacing: .08em;
}
.money-drag-ghost {
  position: fixed; z-index: 1200; pointer-events: none; opacity: .92; transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 12px 8px rgba(39,50,72,.28));
}
.money-flying {
  position: fixed; z-index: 1250; pointer-events: none;
  animation: throwMoney .55s cubic-bezier(.25,.75,.35,1) forwards;
}
.paid-piece {
  width: 36px; height: 21px; min-width: 0; pointer-events: none; box-shadow: none;
  transform: rotate(-5deg);
}
.paid-piece.money-coin, .paid-piece.money-cent { width: 25px; height: 25px; }
.paid-piece b { font-size: 8px; }
.paid-piece small, .paid-piece .money-mark { display: none; }
.buy-toy-button {
  min-height: 46px; margin-top: 5px; padding: 0 20px; border: 0; border-radius: 15px;
  color: white; background: var(--mint-dark); box-shadow: 0 4px 0 #176e60;
  font-weight: 1000; animation: stepReady .5s ease-out;
}

.playground:has(.dressup-game) { min-height: 650px; display: block; padding: 16px; overflow: visible; }
.dressup-game { width: 100%; display: grid; grid-template-columns: minmax(290px, .82fr) 1.5fr; gap: 16px; }
.dress-stage {
  position: sticky; top: 12px; height: 600px; min-height: 600px; align-self: start; display: grid; place-items: center;
  overflow: hidden; border: 2px solid #c9bbc2; border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 31px, rgba(182,100,112,.13) 32px, transparent 33px),
    repeating-linear-gradient(#f7f2e9 0 27px, #ddd3c8 28px, #f7f2e9 29px);
  box-shadow: inset 0 0 45px rgba(112,82,72,.06);
}
.dress-stage::before {
  content: ""; position: absolute; inset: 8% 10% 12%;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(200,92,111,.13), transparent 36%),
    radial-gradient(ellipse at 72% 44%, rgba(73,114,153,.1), transparent 42%);
  filter: blur(2px); transform: rotate(-3deg);
}
.dress-stage::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 42px; height: 28px;
  border-radius: 50%; background: rgba(75,61,69,.13); filter: blur(6px);
}
.base-model-preview {
  position: relative; z-index: 2; width: 100%; height: 100%; display: block;
  object-fit: contain; padding: 16px; filter: saturate(.95) contrast(.98);
}
.base-model-preview.voice-ready { cursor: pointer; }
.designer-notes {
  position: absolute; inset: 48px 22px 24px; z-index: 4; pointer-events: none;
  color: #4d4a55; mix-blend-mode: multiply;
}
.designer-note {
  position: absolute; top: calc(var(--note-row) * 28px);
  transform: rotate(var(--note-rotate));
  display: inline-flex; width: fit-content; max-width: 104px;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 0;
  text-align: left; text-shadow: 0 1px rgba(255,255,255,.7);
  animation: noteInk .28s ease-out both;
  animation-delay: calc(var(--note-index) * 35ms);
}
.designer-note.note-left { left: 0; }
.designer-note.note-right { right: 0; text-align: right; }
.designer-note b {
  padding: 2px 4px; background: rgba(247,242,233,.64); font-weight: 700;
}
.sparkle { position: absolute; color: #8f7582; font-size: 24px; animation: toyFloat 2.8s ease-in-out infinite; opacity: .52; }
.sparkle.s1 { left: 13%; top: 18%; }.sparkle.s2 { right: 13%; top: 31%; animation-delay: -.8s; }
.avatar-svg {
  position: relative; z-index: 2; width: min(280px, 92%); height: 570px; overflow: visible;
  shape-rendering: geometricPrecision; filter: saturate(.88) contrast(.98);
}
.fashion-figure { filter: url(#roughInk); }
.fashion-garment { filter: url(#watercolour); }
.garment-scribble {
  fill: none; stroke: rgba(59,49,54,.52); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.avatar-svg text { font-family: "Avenir Next", "Nunito", ui-rounded, system-ui, sans-serif; }
.avatar-jewel { fill: #e34887; font-size: 25px; font-weight: 1000; }
.avatar-earring { fill: #e1ab27; font-size: 20px; font-weight: 1000; }
.avatar-headwear { fill: #ef70b7; font-size: 22px; font-weight: 1000; }
.avatar-necklace { fill: #df4d91; font-size: 17px; font-weight: 1000; }
.avatar-belt { fill: white; font-size: 18px; font-weight: 1000; }
.avatar-bracelet { fill: #d74488; font-size: 15px; font-weight: 1000; }
.design-name {
  position: absolute; z-index: 5; top: 14px; right: 14px; padding: 6px 12px;
  border: 1px solid #bcaeb4; border-radius: 3px; transform: rotate(1.5deg);
  color: #5e5158; background: rgba(255,255,255,.84); font-family: Georgia, serif;
  font-size: 12px; font-style: italic; font-weight: 700; letter-spacing: .04em;
  box-shadow: 3px 4px 0 rgba(97,76,85,.08);
}
.fashion-doll {
  --skin: #f4bd9f; --eye-colour: #5a342d; --lip-colour: #b84e72; --hair-colour: #56342e;
  position: relative; z-index: 2; width: 210px; height: 500px; margin-top: -22px;
  filter: drop-shadow(0 8px 3px rgba(91,51,82,.08));
}
.doll-head {
  position: absolute; z-index: 5; left: 55px; top: 51px; width: 100px; height: 116px;
  border: 2px solid color-mix(in srgb, var(--skin), #633 40%); border-radius: 48% 48% 45% 45%;
  background: var(--skin); box-shadow: inset 8px 0 rgba(255,255,255,.1);
}
.doll-eye {
  position: absolute; top: 42px; width: 27px; height: 32px; overflow: hidden;
  border: 3px solid #352535; border-radius: 48% 48% 52% 52%; background: white;
  box-shadow: 0 -2px 0 #352535;
}
.doll-eye.left { left: 17px; }.doll-eye.right { right: 17px; }
.doll-eye::before {
  content: ""; position: absolute; left: 5px; top: 6px; width: 15px; height: 22px;
  border-radius: 50%; background: var(--eye-colour); box-shadow: inset 0 -7px rgba(0,0,0,.2);
}
.doll-eye::after {
  content: ""; position: absolute; left: 9px; top: 8px; width: 6px; height: 8px;
  border-radius: 50%; background: white; box-shadow: 7px 11px 0 -2px rgba(255,255,255,.9);
}
.doll-eye i { position: absolute; z-index: 2; left: 10px; top: 13px; width: 7px; height: 10px; border-radius: 50%; background: #211726; }
.doll-brow { position: absolute; top: 31px; width: 25px; height: 7px; border-top: 3px solid var(--hair-colour); border-radius: 50%; }
.doll-brow.left { left: 18px; transform: rotate(-5deg); }.doll-brow.right { right: 18px; transform: rotate(5deg); }
.doll-nose { position: absolute; left: 48px; top: 76px; width: 6px; height: 7px; border-right: 1px solid rgba(110,56,50,.5); border-bottom: 1px solid rgba(110,56,50,.5); border-radius: 50%; }
.doll-lips {
  position: absolute; left: 39px; top: 91px; width: 23px; height: 10px;
  border-bottom: 3px solid var(--lip-colour); border-radius: 50%;
}
.eyes-sweet .doll-eye { width: 24px; height: 29px; top: 44px; }
.eyes-star .doll-eye::before { background: var(--eye-colour); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 71%,21% 94%,32% 57%,2% 35%,39% 35%); border-radius: 0; }
.eyes-cat .doll-eye { height: 23px; top: 48px; border-radius: 70% 30% 65% 35%; transform: rotate(-5deg); }
.eyes-cat .doll-eye.right { transform: rotate(5deg) scaleX(-1); }
.eyes-happy .doll-eye { height: 14px; top: 53px; border: 0; border-top: 4px solid #352535; border-radius: 50%; background: transparent; }
.eyes-happy .doll-eye::before, .eyes-happy .doll-eye::after, .eyes-happy .doll-eye i { display: none; }
.eyes-dreamy .doll-eye { height: 25px; top: 48px; transform: rotate(-4deg); opacity: .88; }
.lips-cute .doll-lips { width: 18px; left: 42px; border-bottom-width: 4px; }
.lips-heart .doll-lips { width: 17px; height: 12px; left: 42px; border: 0; background: var(--lip-colour); clip-path: polygon(50% 100%,0 38%,14% 8%,38% 5%,50% 24%,62% 5%,86% 8%,100% 38%); }
.lips-glossy .doll-lips { width: 25px; height: 8px; left: 38px; border: 2px solid var(--lip-colour); border-radius: 50%; background: color-mix(in srgb, var(--lip-colour), white 35%); }
.lips-open .doll-lips { width: 21px; height: 13px; left: 40px; border: 2px solid var(--lip-colour); border-radius: 20% 20% 50% 50%; background: #7e3047; }
.lips-wink .doll-lips { transform: rotate(-8deg); width: 25px; }
.doll-hair-back {
  position: absolute; z-index: 1; left: 42px; top: 29px; width: 126px; height: 184px;
  border-radius: 62px 62px 44px 44px; background: var(--hair-colour);
}
.doll-hair-front {
  position: absolute; z-index: 6; left: 49px; top: 28px; width: 112px; height: 69px;
  border-radius: 60px 60px 18px 18px; border-bottom: 12px solid var(--hair-colour);
}
.doll-hair-front::before {
  content: ""; position: absolute; left: 38px; top: 36px; width: 20px; height: 43px;
  border-radius: 0 0 80% 20%; background: var(--hair-colour); transform: rotate(14deg);
}
.hair-ponytail .doll-hair-back::after {
  content: ""; position: absolute; right: -48px; top: 32px; width: 59px; height: 155px;
  border-radius: 50%; background: var(--hair-colour); transform: rotate(-13deg);
}
.hair-buns .doll-hair-back::before, .hair-buns .doll-hair-back::after {
  content: ""; position: absolute; top: -22px; width: 52px; height: 52px; border-radius: 50%; background: var(--hair-colour);
}
.hair-buns .doll-hair-back::before { left: -11px; }.hair-buns .doll-hair-back::after { right: -11px; }
.hair-waves .doll-hair-back, .hair-princess .doll-hair-back { height: 292px; width: 145px; left: 32px; border-radius: 64px 64px 45% 45%; }
.hair-twintails .doll-hair-back::before, .hair-twintails .doll-hair-back::after {
  content: ""; position: absolute; top: 75px; width: 58px; height: 190px; border-radius: 50%; background: var(--hair-colour);
}
.hair-twintails .doll-hair-back::before { left: -44px; transform: rotate(8deg); }
.hair-twintails .doll-hair-back::after { right: -44px; transform: rotate(-8deg); }
.hair-princess .doll-hair-back { background: repeating-radial-gradient(ellipse at 50% 0, var(--hair-colour) 0 22px, color-mix(in srgb, var(--hair-colour), white 12%) 23px 28px); }
.doll-neck { position: absolute; z-index: 3; left: 92px; top: 158px; width: 27px; height: 33px; background: var(--skin); }
.doll-body {
  position: absolute; z-index: 4; left: 66px; top: 181px; width: 78px; height: 123px;
  border: 2px solid #9d427a; border-radius: 24px 24px 8px 8px; background: #ef82bb;
}
.doll-arm {
  position: absolute; top: 12px; width: 23px; height: 148px;
  border: 2px solid color-mix(in srgb, var(--skin), #633 40%);
  border-radius: 18px; background: var(--skin); transform-origin: top;
}
.doll-arm.left { left: -21px; transform: rotate(7deg); }.doll-arm.right { right: -21px; transform: rotate(-7deg); }
.doll-gem { position: absolute; z-index: 7; left: 28px; top: 13px; font-size: 23px; line-height: 1; color: #e82d68; }
.gem-heart .doll-gem::after { content: "♥"; }.gem-diamond .doll-gem::after { content: "♦"; color: #35a9dc; }
.gem-star .doll-gem::after { content: "★"; color: #f5c137; }.gem-moon .doll-gem::after { content: "☾"; color: #8060d3; }
.gem-crown .doll-gem::after { content: "♛"; color: #e3a400; font-size: 27px; }
.doll-skirt {
  position: absolute; z-index: 4; left: 37px; top: 283px; width: 136px; height: 120px;
  border: 2px solid #9d427a; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
  background: #f49ac9;
}
.clothing-sailor .doll-body { background: #f8f8ff; border-color: #425caa; box-shadow: inset 0 -25px #425caa; }
.clothing-sailor .doll-body::after { content: "▼"; position: absolute; left: 26px; top: 5px; color: #425caa; font-size: 24px; }
.clothing-rainbow .doll-body, .clothing-rainbow .doll-skirt {
  background: linear-gradient(135deg, #ff7d9f 0 24%, #ffca54 24% 48%, #6fd6bc 48% 72%, #7b81e8 72%);
}
.clothing-star .doll-body, .clothing-star .doll-skirt {
  background-color: #3d3b8e; background-image: radial-gradient(circle, #fff 0 2px, transparent 3px);
  background-size: 18px 18px;
}
.clothing-princess .doll-body, .clothing-princess .doll-skirt {
  border-color: #6843aa; background: linear-gradient(145deg, #b88bf0, #f38bc4);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.25);
}
.clothing-kimono .doll-body { width: 92px; left: 59px; background: radial-gradient(circle, #fff 0 3px, transparent 4px), #e5658e; background-size: 23px 23px; }
.clothing-kimono .doll-skirt { background: linear-gradient(90deg, #e5658e, #f29ab6, #e5658e); clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); }
.doll-legs { position: absolute; z-index: 3; left: 69px; top: 393px; display: flex; gap: 20px; }
.doll-legs span {
  width: 25px; height: 83px; border: 2px solid #a44e77; border-radius: 0 0 13px 13px; background: #ef9bc2;
}
.leggings-white .doll-legs span { background: #fff; border-color: #a5a0b8; }
.leggings-stripe .doll-legs span { background: repeating-linear-gradient(#825dcc 0 10px, #f7a8ce 10px 20px); }
.leggings-sparkle .doll-legs span { background: radial-gradient(circle, #fff 0 2px, transparent 3px), #735aca; background-size: 13px 13px; }
.leggings-rainbow .doll-legs span { background: linear-gradient(#ff7d9f, #ffca54, #6fd6bc, #7b81e8); }
.leggings-lace .doll-legs span { background: repeating-radial-gradient(circle, #fff 0 4px, #d768a8 5px 7px); }
.doll-shoes { position: absolute; z-index: 5; left: 62px; top: 467px; display: flex; gap: 14px; }
.doll-shoes span { width: 39px; height: 20px; border-radius: 16px 16px 8px 8px; background: #6e4aa4; }
.shoes-pink .doll-shoes span { background: #ed70a9; box-shadow: inset 0 5px white; }
.shoes-boots .doll-shoes { top: 444px; }.shoes-boots .doll-shoes span { height: 43px; border-radius: 8px 8px 12px 12px; background: #394898; }
.shoes-heels .doll-shoes span { background: #d8498b; clip-path: polygon(0 10%,75% 10%,100% 60%,73% 67%,73% 100%,59% 100%,55% 70%,0 75%); }
.shoes-rainbow .doll-shoes span { background: linear-gradient(90deg,#ff718f,#ffc850,#5dd2b4,#7776df); }
.shoes-winged .doll-shoes span { background: white; border: 2px solid #7657c3; box-shadow: -10px -4px 0 -4px white, 10px -4px 0 -4px white; }
.doll-earring { position: absolute; z-index: 8; top: 65px; width: 12px; height: 18px; color: #e9b62a; }
.doll-earring.left { left: -7px; }.doll-earring.right { right: -7px; }
.earrings-pearls .doll-earring::after { content: "●"; color: white; text-shadow: 0 1px 2px #777; }
.earrings-hearts .doll-earring::after { content: "♥"; color: #e7548c; }
.earrings-stars .doll-earring::after { content: "★"; color: #e6b429; }
.earrings-hoops .doll-earring::after { content: "○"; color: #d49c16; font-size: 20px; }
.earrings-ribbons .doll-earring::after { content: "⋈"; color: #b659c8; font-size: 19px; }
.doll-bracelet { position: absolute; left: 1px; bottom: 26px; width: 18px; height: 8px; border-radius: 5px; }
.bracelet-beads .doll-bracelet { background: repeating-linear-gradient(90deg,#ef5d91 0 4px,#f4c143 4px 8px,#4fc5b5 8px 12px); }
.bracelet-heart .doll-bracelet::after { content: "♥"; color: #e43f75; font-style: normal; }
.bracelet-stars .doll-bracelet::after { content: "★"; color: #e9b62a; font-style: normal; }
.bracelet-pearls .doll-bracelet { border: 3px dotted white; box-shadow: 0 1px 2px #777; }
.bracelet-magic .doll-bracelet { border-top: 3px double #7d59d1; border-bottom: 3px double #e65b9d; }
.doll-belt { position: absolute; z-index: 9; left: -1px; bottom: 2px; width: 76px; height: 13px; }
.belt-ribbon .doll-belt { background: #713f9b; }.belt-ribbon .doll-belt::after { content: "⋈"; position: absolute; right: -7px; top: -9px; color: #713f9b; font-size: 27px; }
.belt-heart .doll-belt { border-top: 4px solid #ec74a8; }.belt-heart .doll-belt::after { content: "♥"; color: #d83d79; }
.belt-gold .doll-belt { background: #e1ac2b; box-shadow: inset 0 0 0 2px #fff0a2; }
.belt-gem .doll-belt { background: #7952bd; }.belt-gem .doll-belt::after { content: "♦"; color: #51d5e7; }
.belt-flower .doll-belt { background: #ee85ad; }.belt-flower .doll-belt::after { content: "✿"; color: white; font-size: 19px; }
.style-picker { min-width: 0; display: grid; align-content: start; gap: 11px; }
.base-model-section {
  min-width: 0; padding: 12px; border: 1px solid #d2c6c5; border-radius: 10px;
  background: rgba(255,253,249,.92); box-shadow: 0 8px 20px rgba(75,61,69,.06);
}
.base-model-options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 9px;
}
.base-model-option {
  position: relative; min-width: 0; padding: 5px 5px 8px; display: grid; gap: 5px;
  border: 1px solid #d8ced1; border-radius: 9px; color: #51464c; background: #fffefa;
  text-align: left;
}
.base-model-option img {
  width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: contain; object-position: center;
  border-radius: 6px; background: #f4eee7; padding: 4px;
}
.base-model-option span { padding: 0 3px; font-size: 11px; font-weight: 1000; line-height: 1.15; }
.base-model-option small { padding: 0 3px; color: #92838a; font-size: 9px; font-weight: 900; }
.base-model-option.selected {
  border-color: #51464c; background: #f1e8e6; box-shadow: 0 0 0 2px rgba(81,70,76,.16);
}
.base-model-option.selected::after {
  content: "✓"; position: absolute; top: 10px; right: 10px; width: 25px; height: 25px;
  display: grid; place-items: center; border-radius: 50%; color: white; background: #51464c;
  font-size: 14px; font-weight: 1000; box-shadow: 0 2px 7px rgba(52,43,48,.22);
}
.picker-step { display: flex; align-items: center; gap: 8px; color: #6d5a87; font-size: 12px; font-weight: 1000; }
.picker-step-actions { justify-content: space-between; }
.picker-step-label { display: flex; align-items: center; gap: 8px; }
.picker-step b, .active-style-section h3 > span > b {
  width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%;
  color: white; background: #c94e9a; font-size: 12px;
}
.reset-styles-button {
  min-height: 36px; padding: 0 12px; border: 1px solid #c99aac; border-radius: 8px;
  color: #8d365c; background: #fff2f6; cursor: pointer; font-size: 10px; font-weight: 1000;
}
.reset-styles-button:hover { background: #ffe5ee; }
.reset-styles-button:active { transform: translateY(1px); }
.dress-group-tabs, .dress-category-tabs {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 7px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dress-group-tabs::-webkit-scrollbar, .dress-category-tabs::-webkit-scrollbar { display: none; }
.dress-group-tabs button, .dress-category-tabs button {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1px solid #d5cbd0;
  border-radius: 7px; color: #665d62; background: #fffdf9; font-size: 12px; font-weight: 900;
}
.dress-group-tabs button.active {
  border-color: #51464c; color: white; background: linear-gradient(135deg, #74626b, #3f373b);
}
.dress-group-tabs button.has-selection:not(.active),
.dress-category-tabs button.has-selection:not(.active) {
  border-color: #77a890; color: #326a50; background: #eaf7f0;
}
.dress-category-tabs button.active { border-color: #8e727e; color: #5d4650; background: #f2e9e8; }
.dress-category-tabs button.active.has-selection { box-shadow: inset 0 -3px #66a081; }
.style-section { min-width: 0; padding: 12px; border-radius: 10px; background: rgba(255,253,249,.9); }
.style-section h3 { margin: 0 0 8px; display: flex; justify-content: space-between; color: #594b52; font-size: 15px; }
.active-style-section { border: 1px solid #d2c6c5; box-shadow: 0 8px 20px rgba(75,61,69,.06); }
.active-style-section h3 > span { display: flex; align-items: center; gap: 7px; }
.style-section h3 small { color: #a18aa8; font-size: 9px; font-weight: 900; }
.style-options {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 3px 8px;
  scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
  scrollbar-width: thin; scrollbar-color: #dfa4cb transparent; -webkit-overflow-scrolling: touch;
}
.style-option {
  position: relative; flex: 0 0 104px; min-height: 132px; padding: 7px 4px; display: grid; place-items: center; align-content: center; gap: 4px;
  border: 1px solid #ded5d4; border-radius: 7px; color: #4f484c; background: #fffefa;
  scroll-snap-align: start;
}
.style-option .option-icon { color: #806773; font-size: 24px; line-height: 1; white-space: nowrap; }
.option-swatch {
  width: 33px; height: 33px; display: block; border: 3px solid white; border-radius: 50%;
  background: var(--option-colour); box-shadow: 0 0 0 2px #ddd3df, inset 0 -5px rgba(0,0,0,.09);
}
.style-option b { font-size: 10px; line-height: 1.15; text-align: center; }
.style-option small { color: #93899b; font-size: 8px; font-weight: 900; }
.style-option .mini-thumb {
  width: 76px; height: 76px; object-fit: contain; border-radius: 7px; margin: 0 auto 2px;
  border: 1px solid #d4c9c6; background: #fffdf9; display: block;
}
.style-option.selected { border-color: #614f58; background: #f1e8e6; box-shadow: 0 0 0 2px rgba(97,79,88,.12); }
.generate-look-section {
  display: grid; gap: 8px; padding: 12px; border: 1px solid #d2c6c5; border-radius: 10px;
  background: rgba(255,253,249,.92); box-shadow: 0 8px 20px rgba(75,61,69,.06);
}
.generate-look-button {
  min-height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 9px; color: white; background: linear-gradient(135deg, #8e4c75, #4e3f59);
  box-shadow: 0 5px 0 #382f40; font-size: 14px; font-weight: 1000;
}
.generate-look-button span {
  padding: 4px 8px; border-radius: 999px; color: #4f3d20; background: #f5d270; font-size: 12px;
}
.generate-look-button:disabled {
  color: #81777c; background: #ded7d7; box-shadow: 0 4px 0 #beb5b8; cursor: not-allowed;
}
.generate-look-button:disabled span { color: #766543; background: #eee1b8; }
.generate-look-button.generating { opacity: .72; }
.generate-look-section > small { color: #786c72; font-size: 10px; font-weight: 800; text-align: center; }
.generate-look-section > p {
  display: grid; gap: 7px; min-height: 16px; margin: 0; color: #8a536b;
  font-size: 10px; font-weight: 900; text-align: center;
}
.generate-look-section > p small { color: #786c72; font-size: 9px; }
.dress-profiles-section {
  display: grid; gap: 10px; padding: 13px; border: 1px solid #d8cbd2; border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.secret-star-word {
  display: inline; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent;
  font: inherit; text-decoration: none; box-shadow: none;
}
.secret-star-word:focus-visible { outline: 1px dotted rgba(123,125,135,.5); outline-offset: 2px; }
.secret-star-editor {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px;
  color: #5f535a; font-weight: 900;
}
.secret-star-editor input {
  width: 86px; min-height: 34px; padding: 4px 8px; border: 1px solid #cdbfc6; border-radius: 7px;
  color: #3f353b; background: #fffdf9; font: inherit; text-align: center;
}
.secret-star-editor button {
  min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; color: white;
  background: #8e4c75; box-shadow: 0 3px 0 #4e3f59; font: inherit;
}
.secret-star-editor button[type="button"] { color: #5f535a; background: #ede4e8; box-shadow: 0 3px 0 #cdbfc6; }
.secret-star-editor span { min-width: 84px; color: #176e60; font-size: 12px; }
.profile-empty {
  margin: 0; padding: 18px; border: 1px dashed #cbbbc4; border-radius: 9px;
  color: #786c72; text-align: center; font-size: 12px; font-weight: 800;
}
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.dress-profile {
  position: relative; overflow: hidden; border: 1px solid #cbbbc4; border-radius: 9px; background: white;
}
.profile-open {
  width: 100%; padding: 0; border: 0; color: #51444b; background: transparent; cursor: pointer; text-align: left;
}
.profile-open.has-voice img { box-shadow: inset 0 0 0 3px rgba(36,95,88,.22); }
.profile-open img { width: 100%; aspect-ratio: 2 / 3; display: block; object-fit: cover; background: #f5eef1; }
.profile-open span { display: grid; gap: 2px; padding: 8px; }
.profile-open b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-open small { color: #88777f; font-size: 9px; }
.profile-actions { display: grid; gap: 5px; padding: 0 6px 6px; }
.profile-remove {
  width: calc(100% - 12px); min-height: 29px; margin: 0 6px 6px; border: 1px solid #d8b4c4; border-radius: 7px;
  color: #9a365f; background: #fff3f7; cursor: pointer; font-size: 9px; font-weight: 900;
}
.profile-actions .profile-remove { width: 100%; margin: 0; }
.profile-remove:hover { background: #ffe4ee; }
.profile-confirm {
  display: grid; gap: 6px; padding: 7px 6px 8px; border-top: 1px solid #eadbe1;
  color: #6f5661; background: #fff8fb; font-size: 9px; font-weight: 900; text-align: center;
}
.profile-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.profile-confirm button {
  min-height: 28px; border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 900;
}
.profile-cancel { border: 1px solid #d4c7cd; color: #665a61; background: #fffefa; }
.profile-remove.danger { width: 100%; margin: 0; border-color: #ca7895; color: white; background: #b84069; }
.profile-remove.danger:hover { background: #9f2e57; }
@keyframes bundleReady {
  50% { transform: scale(1.035); box-shadow: 0 0 0 10px rgba(255,125,107,.14); }
}
@keyframes exchangeSettle {
  from { transform: scale(1.06); }
}
@keyframes borrowedPiecesArrive {
  from { opacity: 0; transform: translateX(-35px) scale(.7); }
}
@keyframes moneyValueChange {
  45% { transform: scale(1.22); color: var(--mint-dark); }
}
@keyframes toyFloat {
  50% { transform: translateY(-7px) rotate(2deg); }
}
@keyframes noteInk {
  from { opacity: 0; filter: blur(1px); }
  to { opacity: .86; filter: blur(0); }
}
@keyframes moneyHit {
  45% { transform: scale(.97) rotate(-1deg); }
}
@keyframes moneyWrongHit {
  25% { transform: translateX(-5px) rotate(-1deg); }
  50% { transform: translateX(5px) rotate(1deg); }
}
@keyframes moneyReject {
  20%, 60% { transform: translateX(-7px) rotate(-3deg); }
  40%, 80% { transform: translateX(7px) rotate(3deg); }
}
@keyframes wrongNext {
  20%, 60% { transform: translateX(-8px) rotate(-2deg); }
  40%, 80% { transform: translateX(8px) rotate(2deg); }
}
@keyframes moneyBombPop {
  0% { opacity: 0; transform: scale(.15) rotate(-12deg); }
  38% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  68% { opacity: 1; transform: scale(.98); }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes cartoonBombSpin {
  from { transform: rotate(-35deg) scale(.45); }
  70% { transform: rotate(12deg) scale(1.15); }
}
@keyframes throwMoney {
  35% { transform: translate(calc(var(--throw-x) * .45), calc(var(--throw-y) * .18 - 70px)) rotate(130deg) scale(1.05); }
  100% { transform: translate(var(--throw-x), var(--throw-y)) rotate(300deg) scale(.35); opacity: .2; }
}
@keyframes toyBought {
  55% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1.12) rotate(3deg); }
}
@keyframes progressChange {
  45% { transform: scale(1.13); background: #fff; }
}
@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; }
  .menu-heading { margin: 8px auto 18px; }
  .menu-heading p:not(.menu-kicker) { font-size: 15px; }
  .activity-grid { grid-template-columns: 1fr; gap: 11px; }
  .activity-card {
    min-height: 126px; padding: 14px; grid-template-columns: 66px 1fr auto; gap: 12px; border-radius: 23px;
  }
  .activity-icon { width: 64px; height: 64px; border-radius: 19px; font-size: 22px; }
  .activity-star-badge { top: -10px; right: -10px; min-width: 37px; height: 27px; padding: 0 7px; font-size: 13px; border-width: 2px; }
  .reward-badge { min-width: 46px; padding: 0 6px; gap: 3px; }
  .reward-badge-count { font-size: 13px; }
  .reward-badge-art { width: 22px; height: 10px; }
  .money-card .activity-icon, .dress-card .activity-icon, .quiz-card .activity-icon { font-size: 34px; }
  .activity-copy strong { font-size: 20px; }
  .activity-copy small { font-size: 12px; }
  .activities-button { margin-left: 2px; }
  main { padding-top: 14px; }.mode-switch { width: 100%; }.mode-switch button { flex: 1; padding: 0 8px; }
  .level-picker { padding-left: 11px; gap: 7px; }.level-picker label { font-size: 9px; }.level-picker select { font-size: 14px; }
  .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; }
  .shop-view .playground { min-height: 460px; padding: 14px; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-item-card {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
    text-align: center;
  }
  .shop-item-icon {
    width: min(100%, 220px);
    height: auto;
    aspect-ratio: 16 / 10;
    font-size: 26px;
    justify-self: center;
  }
  .shop-item-copy {
    width: 100%;
    justify-items: center;
  }
  .shop-item-copy strong,
  .shop-item-copy small {
    max-width: 100%;
    text-wrap: balance;
  }
  .shop-item-price {
    justify-content: center;
  }
  .shop-item-actions {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
  }
  .shop-cart-line, .shop-wallet-line, .shop-review-box, .shop-confirm-box, .shop-total-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .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; }
  .quick-quiz-panel { padding: 16px 12px; gap: 15px; border-radius: 22px; }
  .quick-quiz-view .play-card { min-height: 650px; padding-left: 12px; padding-right: 12px; }
  .quick-quiz-view .playground { min-height: 330px; padding-left: 0; padding-right: 0; }
  .quick-quiz-status { grid-template-columns: 1fr; gap: 7px; text-align: center; font-size: 15px; }
  .quick-quiz-status span:last-child { text-align: center; }
  .quick-quiz-status b { min-width: 0; width: 100%; padding: 8px 12px; font-size: 17px; }
  .quick-quiz-choices { grid-template-columns: 1fr; gap: 8px; }
  .quick-choice { min-height: 64px; border-radius: 17px; font-size: 26px; }
  .time-telling-view .play-card { min-height: 640px; padding-left: 10px; padding-right: 10px; }
  .time-telling-view .playground { min-height: 390px; padding-left: 0; padding-right: 0; }
  .time-telling-view .equation { min-width: 92px; padding: 6px 14px; font-size: 24px; }
  .time-tell-panel {
    min-height: 382px; padding: 12px 8px 14px; gap: 8px; border-width: 8px;
    box-shadow: 0 10px 0 #eb9ed5, 0 16px 28px rgba(53,58,74,.16);
  }
  .time-tell-title { font-size: clamp(32px, 10.8vw, 48px); gap: 1px; }
  .time-tell-title small { margin: 0 4px; font-size: clamp(21px, 6.2vw, 30px); }
  .time-tell-panel .quick-quiz-status {
    grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 6px 8px; font-size: 11px;
  }
  .time-tell-panel .quick-quiz-status span:last-child { text-align: right; }
  .time-tell-panel .quick-quiz-status b { min-width: 86px; width: auto; padding: 5px 7px; font-size: 12px; }
  .time-tell-stage { min-height: 178px; margin-top: 0; }
  .time-tell-correct-sticker { right: 4px; top: 104px; width: min(104px, 28vw); }
  .time-tell-clock { width: min(205px, 58vw); }
  .time-tell-star { font-size: clamp(38px, 12vw, 55px); }
  .star-left { left: 4%; top: 23%; }
  .star-right { right: 4%; top: 36%; }
  .time-tell-choice-row { gap: 6px; margin-top: 0; }
  .time-tell-choice {
    min-height: 64px; padding: 5px 4px 9px; border-width: 3px; border-radius: 14px;
    box-shadow: 0 6px 0 #842ee5, 0 10px 14px rgba(53,58,74,.14);
    font-size: clamp(28px, 9.8vw, 42px);
  }
  .time-tell-choice.correct { box-shadow: 0 6px 0 #176e60; }
  .time-tell-choice.wrong { box-shadow: 0 6px 0 #a62e3a; }
  .time-tell-or { font-size: clamp(17px, 5.2vw, 25px); }
  .quick-column, .quick-column-answer, .quick-place-labels { grid-template-columns: 28px repeat(3, minmax(54px, 1fr)); gap: 6px; }
  .quick-column { padding: 12px 10px 10px; }
  .quick-digit-slot { width: auto; height: 64px; font-size: 36px; }
  .quick-numpad { max-width: 280px; padding: 10px; gap: 6px; border-radius: 16px; }
  .quick-numpad-btn { height: 58px; font-size: 26px; border-radius: 12px; }
  .quick-numpad-next { font-size: 16px; }
  .multiply-game { grid-template-columns: 1fr; gap: 12px; }
  .multiply-board { display: contents; }
  .multiply-equation { order: 1; }
  .multiply-entry { order: 2; }
  .multiply-entry { gap: 10px; }
  .multiply-equation { width: min(360px, 100%); padding: 10px 10px 14px; }
  .multiply-row { grid-template-columns: repeat(var(--multiply-columns, 3), 62px); gap: 6px; }
  .multiply-row.bottom { grid-template-columns: 30px repeat(var(--multiply-columns, 3), 62px); }
  .multiply-row.bottom { padding-bottom: 9px; }
  .multiply-digit { height: 62px; border-radius: 13px; }
  .multiply-digit b { font-size: 34px; }
  .multiply-op { font-size: 29px; }
  .multiply-work-grid { grid-template-columns: 30px repeat(var(--multiply-columns, 3), 62px); gap: 5px; margin-top: 8px; }
  .multiply-work-row { min-height: 32px; grid-template-columns: 30px repeat(var(--multiply-columns, 3), 62px); gap: 5px; border-radius: 8px; font-size: 20px; }
  .multiply-row-op { font-size: 24px; }
  .multiply-work-cell { min-height: 38px; border-radius: 8px; }
  .multiply-current { min-height: 76px; padding: 10px; border-radius: 15px; }
  .multiply-current b { font-size: 30px; }
  .multiply-current small { font-size: 11px; }
  .multiply-slots { grid-template-columns: repeat(var(--multiply-slots, 3), minmax(54px, 64px)) !important; gap: 6px; }
  .multiply-result > strong { font-size: 44px; border-radius: 18px; }
  .quick-work-row > span, .quick-work-button { min-height: 36px; }
  .quick-work-button { border-radius: 10px; font-size: 11px; padding: 4px 8px; }
  .work-btn-icon { font-size: 14px; }
  .work-btn-label { font-size: 10px; }
  .quick-column-row span:not(.quick-column-op), .quick-digit-input { height: 62px; font-size: 34px; border-radius: 12px; }
  .quick-digit-input { width: 100%; }
  .quick-column-op { font-size: 28px; }
  .quick-answer-actions { gap: 9px; }
  .quick-answer-actions button { min-height: 58px; min-width: 0; flex: 1; border-radius: 16px; font-size: 18px; }
  .quick-quiz-result strong { font-size: 30px; }
  .quick-quiz-result p { font-size: 17px; }
  .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; }
  .three-digit-world { gap: 10px; }
  .column-equation { width: 146px; padding: 7px 12px 9px; font-size: 21px; }
  .place-chip { min-width: 70px; padding: 4px 6px; }
  .place-workbench, .exchange-workbench { grid-template-columns: 1fr 36px 1fr; gap: 3px; }
  .place-workbench .machine, .exchange-workbench .machine { width: 36px; }
  .place-drop, .place-source, .remove-drop, .exchange-drop, .exchange-source-wrap {
    min-width: 0; width: 100%; min-height: 122px; padding: 8px 4px; gap: 4px;
  }
  .pv-one { width: 28px; height: 28px; }
  .pv-ten { width: 20px; height: 78px; }
  
.pv-piece.gold.pv-piece.mint.pv-piece.lent.pv-piece.carry
.pv-hundred { width: 65px; height: 65px; }
    .three-digit-result {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
    gap: 3px;
  }
  .three-digit-result .result-place { gap: 5px; font-size: 12px; }
  .three-digit-result .equals { display: block; font-size: 24px; }
  .three-digit-result .result-piece-box {
    min-height: 76px; max-width: 100%; gap: 3px; align-content: center;
  }
  .three-digit-result 
.pv-piece.gold.pv-piece.mint.pv-piece.lent.pv-piece.carry
.pv-hundred { width: 24px; height: 24px; border-width: 2px; border-radius: 4px; }
  .three-digit-result .pv-ten { width: 8px; height: 38px; border-width: 2px; border-radius: 4px; }
  .three-digit-result .pv-one { width: 16px; height: 16px; }
  .three-digit-result .result-label {
    margin-top: 8px; font-size: 23px; white-space: nowrap;
  }
  .three-digit-result .result-label b { font-size: 34px; }
  .money-game { grid-template-columns: 1fr; gap: 10px; }
  .money-shop, .wallet-panel { padding: 10px; }
  .toy-target { min-height: 210px; }
  .toy-icon { font-size: 68px; }
  .money-wallet { min-height: 220px; gap: 6px; }
  .money-note { width: 79px; height: 42px; }
  .money-coin, .money-cent { width: 45px; height: 45px; }
  .money-piece b { font-size: 14px; }
  .wallet-heading { display: grid; justify-content: center; }
  .playground:has(.dressup-game) { min-height: 0; padding: 8px; }
  .dressup-game { display: block; }
  .dress-stage {
    position: sticky; z-index: 20; top: 6px; height: 362px; min-height: 362px;
    border-radius: 22px; box-shadow: 0 10px 24px rgba(79,54,91,.14);
  }
  .dress-stage::after { bottom: 12px; height: 18px; }
  .dress-stage .sparkle { font-size: 24px; }
  .base-model-preview { padding: 8px; }
  .designer-notes { inset: 38px 14px 18px; }
  .designer-note { top: calc(var(--note-row) * 22px); max-width: 78px; font-size: 10px; }
  .avatar-svg { width: 190px; height: 350px; margin-top: 4px; }
  .design-name { top: 8px; right: 8px; padding: 4px 10px; font-size: 10px; }
  .style-picker { gap: 8px; margin-top: 10px; }
  .base-model-section { padding: 9px; }
  .base-model-options { gap: 6px; }
  .base-model-option { padding: 4px 4px 7px; }
  .base-model-option span { font-size: 9px; }
  .base-model-option small { font-size: 8px; }
  .base-model-option.selected::after { top: 7px; right: 7px; width: 22px; height: 22px; }
  .reset-styles-button { min-height: 34px; padding: 0 10px; }
  .dress-group-tabs button, .dress-category-tabs button { min-height: 42px; padding: 0 12px; }
  .style-section { padding: 9px; }
  .style-options { gap: 6px; margin-right: -9px; padding-right: 16px; }
  .style-option { flex-basis: 96px; min-height: 124px; padding: 5px 2px; }
  .style-option .mini-thumb { width: 70px; height: 70px; }
  .generate-look-section { padding: 10px; }
  .generate-look-button { min-height: 50px; }
  .dress-profiles-section { padding: 10px; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Keep the full subtraction step and its action button visible above
     mobile browser chrome, without shrinking the tap targets too far. */
  .playground:has(.subtraction-three) {
    min-height: 0;
    padding: 8px 6px;
  }
  .subtraction-three { gap: 5px; }
  .subtraction-three .column-equation {
    width: 132px;
    padding: 4px 10px 6px;
    font-size: 19px;
    border-radius: 14px;
  }
  .subtraction-three .column-equation.two-column-equation { width: 108px; }
  .subtraction-three .column-equation .column-first { min-height: 40px; }
  .subtraction-three .column-equation .column-place-labels { margin: 6px 0 1px; }
  .subtraction-three .place-progress { gap: 5px; }
  .subtraction-three .place-chip {
    min-width: 66px;
    padding: 3px 5px;
  }
  .subtraction-three .place-chip b { font-size: 17px; }
  .subtraction-three .place-title { padding: 3px 14px; font-size: 13px; }
  .subtraction-three .cross-out-workbench {
    min-height: 112px;
    gap: 6px;
  }
  .subtraction-three .cross-out-workbench .place-side { gap: 5px; }
  .subtraction-three .cross-out-workbench .place-source {
    min-height: 102px;
    padding: 7px 5px;
  }
  .subtraction-three .removal-source.mixed-borrowed-source,
  .subtraction-three .removal-source.mixed-borrowed-source.has-lent-piece {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 8px;
  }
  .subtraction-three .removal-source .borrowed-place-pieces {
    grid-template-columns: repeat(5, 28px);
    gap: 10px;
    padding: 9px;
  }
  .subtraction-three .removal-source.removal-ones .original-place-pieces.removal-piece-group {
    grid-template-columns: repeat(2, 28px);
  }
  .subtraction-three .removal-source.removal-tens .original-place-pieces.removal-piece-group {
    grid-template-columns: repeat(4, 18px);
    column-gap: 10px;
    row-gap: 9px;
  }
  .subtraction-three .removal-source.removal-tens .borrowed-place-pieces {
    grid-template-columns: repeat(5, 18px);
    column-gap: 9px;
    row-gap: 9px;
    padding: 8px;
  }
  .subtraction-three .removal-source.removal-tens .pv-ten {
    width: 18px;
    height: 62px;
    border-width: 2px;
    border-radius: 6px;
    background-size: auto;
  }
  .subtraction-three .cross-out-prompt { padding: 5px 13px; font-size: 14px; }
  .play-card:has(.subtraction-three) .story {
    min-height: 54px;
    margin: 9px auto 7px;
    padding: 9px 14px;
    font-size: 16px;
    line-height: 1.3;
  }
  .play-card:has(.subtraction-three) .step-button {
    min-height: 52px;
    margin-bottom: 7px;
  }

  /* A crossed ten needs enough room for its own X. */
  .subtraction-three .removal-source .pv-ten.crossed::before,
  .subtraction-three .removal-source .pv-ten.crossed::after,
  .subtraction-three .removal-source .pv-ten.crossed-piece::before,
  .subtraction-three .removal-source .pv-ten.crossed-piece::after {
    width: 4px;
    height: calc(100% - 5px);
    border-width: 1px;
    box-shadow: none;
  }
  .subtraction-three .removal-source .pv-ten.crossed::before,
  .subtraction-three .removal-source .pv-ten.crossed-piece::before {
    transform: translate(-50%, -50%) rotate(15deg);
  }
  .subtraction-three .removal-source .pv-ten.crossed::after,
  .subtraction-three .removal-source .pv-ten.crossed-piece::after {
    transform: translate(-50%, -50%) rotate(-15deg);
  }
}

@media (max-width: 430px) {
  .quick-quiz-view .play-card {
    min-height: 560px; padding: 14px 7px; border-radius: 20px;
  }
  .quick-quiz-view .playground {
    min-height: 280px; padding-top: 10px;
  }
  .quick-quiz-view .top-copy { gap: 5px; }
  .quick-quiz-view .cheer { font-size: 17px; }
  .quick-quiz-view .equation {
    font-size: 24px; line-height: 1.12;
  }
  .quick-quiz-view .instruction {
    font-size: 16px; line-height: 1.22;
  }
  .quick-quiz-panel {
    padding: 12px 8px; gap: 10px; border-radius: 18px;
  }
  .quick-quiz-status {
    gap: 5px; font-size: 13px;
  }
  .quick-quiz-status b {
    padding: 6px 8px; font-size: 14px;
  }
  .quick-quiz-formula {
    padding: 6px 8px;
    border-radius: 12px;
    font-size: 15px;
  }
  .quick-choice {
    min-height: 56px; padding: 9px; border-radius: 14px; font-size: 19px;
  }
  .quick-column-wrap { gap: 8px; }
  .quick-column, .quick-column-answer, .quick-place-labels {
    grid-template-columns: 22px repeat(3, minmax(43px, 1fr)); gap: 4px;
  }
  .quick-place-labels { font-size: 11px; }
  .quick-column {
    padding: 9px 7px 8px; border-radius: 14px;
  }
  .quick-work-row > span, .quick-work-button { min-height: 30px; }
  .quick-work-button {
    padding: 0 3px; border-radius: 8px; box-shadow: 0 3px 0 #c8d0ff; font-size: 11px;
  }
  .quick-borrow-row .quick-work-button {
    font-size: 9px; letter-spacing: 0;
  }
  .quick-work-button.used { box-shadow: 0 3px 0 #394cae; }
  .quick-borrow-row .quick-work-button.used { box-shadow: 0 3px 0 #d95443; }
  .quick-column-row span:not(.quick-column-op), .quick-digit-input {
    height: 48px; border-radius: 10px; font-size: 26px;
  }
  .quick-column-op { font-size: 22px; }
  .quick-column-answer {
    padding-top: 9px; border-top-width: 4px;
  }
  .quick-digit-input {
    border-width: 2px;
  }
  .quick-digit-input:focus {
    box-shadow: 0 0 0 4px rgba(82,103,217,.13), inset 0 -4px 0 rgba(39,50,72,.08);
  }
  .quick-answer-actions {
    gap: 7px;
  }
  .quick-answer-actions button {
    min-height: 48px; padding: 0 10px; border-radius: 13px; font-size: 15px;
  }
  .quick-quiz-view .story {
    min-height: 54px; margin-top: 12px; padding: 10px 12px; border-radius: 15px; font-size: 15px;
  }
  .quick-quiz-view .next {
    min-height: 48px; padding: 0 18px; border-radius: 14px; font-size: 16px;
  }
  .quick-quiz-result strong { font-size: 25px; }
  .quick-quiz-result p { font-size: 15px; }
  .quick-review-list { gap: 7px; }
  .quick-review-item { padding: 9px 10px; border-radius: 12px; }
  .quick-review-item b { font-size: 16px; }
  .quick-review-item span, .quick-review-item em { font-size: 12px; }
  .quick-review-item strong { font-size: 13px; }
}
@media (min-width: 681px) and (max-width: 900px) and (max-height: 1100px) {
  header { height: 56px; }
  main { padding: 10px 0 18px; }
  .level-picker { margin-bottom: 6px; padding-top: 4px; padding-bottom: 4px; }
  .level-picker select { min-height: 38px; }
  .mode-switch { margin-bottom: 8px; }
  .mode-switch button { min-height: 42px; }
  .play-card { min-height: 0; padding: 14px 20px 16px; }
  .equation { font-size: clamp(38px, 10vw, 52px); }
  .instruction { margin: 2px 0 8px; font-size: 17px; }
  .playground { min-height: 280px; padding: 8px 18px; }
  .three-digit-world { gap: 5px; }
  .column-equation {
    width: 150px; padding: 4px 12px 6px; font-size: 22px; border-radius: 15px;
  }
  .column-equation.two-column-equation { width: 116px; }
  .column-equation.four-column-equation { width: 190px; }
  .column-equation .column-first { min-height: 42px; }
  .regrouped-digit { padding-top: 15px; padding-right: 7px; }
  .regrouped-digit small { top: -4px; right: -1px; font-size: 10px; }
  .regrouped-digit s::before, .regrouped-digit s::after { height: 27px; }
  .regrouped-digit em { bottom: -11px; font-size: 7px; }
  .column-equation .column-place-labels { margin-top: 8px; }
  .column-equation .borrow-explanation { margin-top: 6px; gap: 3px; }
  .borrow-explanation span { padding: 3px 5px; font-size: 8px; }
  .place-progress { gap: 6px; }
  .place-chip { padding-top: 3px; padding-bottom: 3px; min-width: 60px; padding-left: 2px; padding-right: 2px; }
  .place-chip span { font-size: 9px; letter-spacing: -0.02em; }
  .place-chip b { font-size: 17px; }
  .place-title { padding: 3px 15px; font-size: 13px; }
  .place-workbench, .exchange-workbench, .cross-out-workbench { min-height: 112px; }
  .cross-out-workbench { gap: 6px; }
  .cross-out-workbench .place-side { gap: 5px; }
  .place-drop, .place-source, .remove-drop, .exchange-drop, .exchange-source-wrap {
    min-height: 88px; padding-top: 6px; padding-bottom: 6px;
  }
  .pv-ten { width: 20px; height: 76px; }
  
.pv-piece.gold.pv-piece.mint.pv-piece.lent.pv-piece.carry
.pv-hundred { width: 68px; height: 68px; }
    .borrow-record { min-height: 72px; padding: 5px 10px; }
  .piece-key { gap: 5px; font-size: 10px; }
  .piece-key span { padding: 3px 7px; }
  .cross-out-prompt { padding: 5px 13px; font-size: 14px; }
  .story { min-height: 54px; margin: 9px auto 7px; padding: 9px 16px; font-size: 17px; }
  .next { min-height: 50px; }
  .step-button { min-height: 52px; margin-bottom: 8px; }
  .parent-note { display: none; }
  .parent-note:has(.secret-star-word) { display: block; margin-top: 10px; padding: 0 12px; }
}
@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: clamp(34px, 9vw, 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; }
  .parent-note:has(.secret-star-word) { display: block; margin-top: 8px; padding: 0 12px; }
}

.four-digit-result {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 4px;
}
.four-digit-result .result-place { min-width: 0; display: grid; justify-items: center; gap: 8px; }
.four-digit-result .equals { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--ink-light); font-weight: 500; }
.four-digit-result .result-piece-box {
  min-height: 100px; display: flex; flex-wrap: wrap-reverse; justify-content: center;
  align-content: end; gap: 5px; max-width: 140px; margin: 0 auto;
}
.four-digit-result .four-digit-result .pv-hundred { width: 34px; height: 34px; }
.four-digit-result .pv-ten { width: 14px; height: 58px; }
.four-digit-result .pv-one { width: 18px; height: 18px; }
.four-digit-result .result-label {
  grid-column: 1 / -1; margin-top: 15px; font-size: 28px; font-weight: 600; text-align: center;
}
.four-digit-result .result-label b { font-size: 44px; color: var(--blue); }

@media (max-width: 600px) {
  .four-digit-result {
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr);
    gap: 2px;
  }
  .four-digit-result .result-place { gap: 4px; font-size: 10px; }
  .four-digit-result .equals { font-size: 18px; }
  .four-digit-result   .four-digit-result .pv-hundred { width: 16px; height: 16px; border-width: 2px; border-radius: 3px; }
  .four-digit-result .pv-ten { width: 6px; height: 24px; border-width: 2px; border-radius: 3px; }
  .four-digit-result .pv-one { width: 10px; height: 10px; }
  .four-digit-result .result-label { font-size: 18px; }
  .four-digit-result .result-label b { font-size: 24px; }
}

.pv-piece.pv-piece.pv-thousand:not(.crossed):not(.crossed-piece)::before,

.digit-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.digit-stack small {
  position: absolute;
  top: -0.42em;
  right: -0.72em;
  font-size: 0.4em;
  color: #1e7f67;
  margin: 0;
  font-weight: 1000;
  white-space: nowrap;
}
.digit-stack del {
  color: #a0a8b8;
  text-decoration-color: #d95443;
  text-decoration-thickness: 3px;
}
.quick-column-row span.changed .digit-stack small {
  color: #1e7f67;
}
.quick-column-row span.changed .digit-stack del {
  color: #c1a7a4;
}