:root{--bg:#f4f1ea;--panel:#fffdf8;--ink:#223044;--muted:#667085;--line:#26374f;--blue:#b9dfe6;--yellow:#f3d77b;--pink:#eeb0a6;--green:#c8dda6;--focus:#1d4ed8;--good:#18723a;--bad:#a92828}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;min-height:100vh;background:url("../site/letterbck.jpg") center/cover fixed no-repeat;color:var(--ink);font-family:"Century Gothic","Tw Cen MT","Aptos","Segoe UI",sans-serif}
button,a{font:inherit}.menu-shell,.app-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0}.menu-panel,.activity-panel{position:relative;min-height:calc(100vh - 56px);padding:clamp(18px,3vw,34px);border:4px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:10px 10px 0 rgba(32,48,71,.18)}
.menu-header{margin-bottom:clamp(20px,3vw,34px)}h1,p{margin-top:0}h1{margin:8px 0 0;font-size:clamp(2.8rem,7vw,6rem);font-weight:800;line-height:1.02;text-shadow:3px 3px 0 rgba(242,201,76,.9)}.menu-note{margin:10px 0 0;color:rgba(34,48,68,.56);font-weight:700}.back-link,.back-button{display:inline-flex;padding:9px 14px;border:3px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:800;text-decoration:none;box-shadow:3px 3px 0 rgba(32,48,71,.2)}
.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:18px;border:4px solid var(--line);border-radius:8px;background:linear-gradient(90deg,rgba(34,211,238,.18) 0 25%,rgba(250,204,21,.18) 25% 50%,rgba(251,113,133,.14) 50% 75%,rgba(134,239,172,.18) 75%),#fff}.activity-link{display:grid;gap:8px;align-content:center;min-height:164px;padding:10px;border:3px solid var(--line);border-radius:8px;color:var(--ink);box-shadow:4px 4px 0 rgba(32,48,71,.25);text-decoration:none;transition:.15s}.activity-link:nth-child(4n+1){background:var(--blue)}.activity-link:nth-child(4n+2){background:var(--yellow)}.activity-link:nth-child(4n+3){background:var(--pink)}.activity-link:nth-child(4n){background:var(--green)}.activity-link:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(32,48,71,.32)}.activity-picture{display:grid;place-items:center;height:112px;overflow:hidden;border:0;border-radius:8px;background:rgba(255,255,255,.58)}.activity-picture img{display:block;width:100%;height:100%;padding:4px;object-fit:contain;transition:transform .18s ease}.activity-link:hover .activity-picture img{transform:scale(1.055)}.activity-detail{text-align:center;color:rgba(34,48,68,.72);font-size:.9rem;font-weight:800}.money-picture{color:#166534}
.activity-header{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:20px;margin-bottom:22px}.activity-header h1{font-size:clamp(2rem,5vw,4.5rem);margin:0}.activity-header p{margin:8px 0 0;color:var(--muted);font-weight:800}.score{min-width:90px;padding:10px;text-align:right;font-weight:900}.activity-area{display:grid;gap:18px;align-content:start;min-height:430px;padding:clamp(14px,2.5vw,28px);border:4px solid var(--line);border-radius:8px;background:#fff}.feedback{min-height:70px;margin:14px 0 0;text-align:center;font-size:1.25rem;font-weight:900}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}
.class-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}.class-grid .activity-link{min-height:230px}.class-grid .activity-detail strong,.class-grid .activity-detail small{display:block}.class-grid .activity-detail strong{font-size:1.35rem}.class-grid .activity-detail small{margin-top:5px;font-size:.9rem}
.progress-score{width:clamp(120px,16vw,190px);padding-top:15px}.progress-track{display:block;width:100%;height:22px;overflow:hidden;border:3px solid var(--line);border-radius:999px;background:#e5e7eb;box-shadow:2px 2px 0 rgba(32,48,71,.18)}.progress-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#42ed68);transition:width .45s ease}
.feedback.number-word{min-height:64px;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.1}
.feedback.symbol-feedback{min-height:70px;font-size:clamp(3rem,7vw,5rem);line-height:1}#running-total{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900}
.amount-visual{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,54px);width:100%}.amount-visual span,.amount-visual strong,.amount-visual #running-total{font-size:clamp(2.8rem,7vw,5rem);font-weight:900}.amount-visual #running-total{color:#166534}.amount-visual strong{color:#1d4ed8}.comparison-symbol{color:#1d4ed8}.comparison-symbol.equal{color:#16a34a}.amount-help{color:var(--muted);font-size:clamp(.95rem,1.7vw,1.15rem);font-weight:800}
.answer-chart{width:min(850px,100%);margin:10px auto 0}.answer-chart .tile{min-height:92px}
#current-equation{cursor:pointer;border-radius:8px}#current-equation:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.learn-rows{display:grid;gap:10px}.learn-row{width:100%}
.ordered-chip{cursor:pointer}.ordered-chip:hover{transform:translateY(-2px);filter:brightness(1.04)}
.money-order-visual>span:first-child,.money-order-visual>span:last-child{white-space:nowrap}
.money-answer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.money-answer{display:grid;place-items:center;min-height:150px;padding:10px}.answer-money-images{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px}.answer-money-images img{width:clamp(42px,6vw,72px);height:62px;object-fit:contain}@media(max-width:720px){.money-answer-grid{grid-template-columns:repeat(2,1fr)}}
.money-card.correct[disabled]{opacity:1}.money-card.wrong{background:#fca5a5}
.money-card.image-only .money-image,.money-card.image-only.coin-card .money-image{height:150px}
.money-card.image-only:not(.coin-card){grid-column:span 2;min-width:0}.money-card.image-only:not(.coin-card) .money-image{width:100%;max-width:280px;height:150px}
.money-card.coin-card .money-image{width:min(150px,100%);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;clip-path:circle(49% at 50% 50%)}.answer-money-images img.answer-coin{aspect-ratio:1/1;object-fit:cover;border-radius:50%;clip-path:circle(49% at 50% 50%)}
.answer-money-images img.answer-note{width:clamp(82px,9vw,118px);height:68px}
.picked-money-button{position:relative;display:grid;place-items:center;width:100px;height:68px;padding:4px;border:3px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.picked-money-button img{width:88px;height:56px;object-fit:contain}.picked-money-button:hover{transform:translateY(-2px);border-color:var(--focus);background:#eff6ff}
.picked-money-button img.picked-coin{width:56px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;clip-path:circle(49% at 50% 50%)}
.number-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:14px}.tile,.answer,.action-button{min-height:72px;padding:10px;border:3px solid var(--line);border-radius:8px;background:var(--blue);color:var(--ink);font-size:clamp(1.35rem,3vw,2.25rem);font-weight:900;box-shadow:3px 3px 0 rgba(32,48,71,.22);cursor:pointer}.tile:nth-child(4n+2),.answer:nth-child(4n+2){background:var(--yellow)}.tile:nth-child(4n+3),.answer:nth-child(4n+3){background:var(--pink)}.tile:nth-child(4n),.answer:nth-child(4n){background:var(--green)}button:focus-visible,a:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.tile.correct,.answer.correct{background:#42ed68}.tile.wrong,.answer.wrong{background:#fca5a5}.tile[disabled]{opacity:.35;box-shadow:none}.tile.correct[disabled],.answer.correct[disabled]{opacity:1;box-shadow:3px 3px 0 rgba(32,48,71,.22);color:var(--ink)}.listen-row{display:flex;justify-content:center;align-items:center;gap:15px}.listen-button{width:110px;height:110px;border:4px solid var(--line);border-radius:50%;background:var(--yellow);font-size:3.5rem;cursor:pointer}.prompt-big{text-align:center;font-size:clamp(3rem,10vw,7rem);font-weight:900}.word-label{display:block;margin-top:6px;color:var(--muted);font-size:1rem}.ordered-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:84px;padding:12px;border:3px dashed #94a3b8;border-radius:8px}.ordered-chip{display:grid;place-items:center;min-width:70px;padding:10px;border:3px solid var(--line);border-radius:8px;background:#dcfce7;font-size:1.7rem;font-weight:900}.equation{text-align:center;font-size:clamp(3rem,9vw,6rem);font-weight:900}.objects{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:2.2rem}.money-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:16px}.money-card{display:grid;place-items:center;gap:8px;min-height:145px;padding:12px;border:3px solid var(--line);border-radius:8px;background:#eef6ff;cursor:pointer}.coin{display:grid;place-items:center;width:76px;height:76px;border:4px solid #6b5a20;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff6a6,#c79b27 70%);font-weight:900}.coin.silver{border-color:#667085;background:radial-gradient(circle at 35% 28%,#fff,#aeb7c6 72%)}.note{display:grid;place-items:center;width:118px;height:62px;border:4px solid #35563d;border-radius:5px;background:linear-gradient(135deg,#b8e2c2,#72b487);font-size:1.4rem;font-weight:900}.money-name{text-align:center;font-weight:900}.catalogue{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:22px;align-items:center}.product{padding:20px;border:4px solid var(--line);border-radius:8px;background:#fff8dc;text-align:center}.product-icon{font-size:6rem}.product-name{margin:8px 0;font-size:1.6rem;font-weight:900}.price-tag{display:inline-block;padding:8px 14px;border:3px solid var(--line);background:var(--yellow);font-size:2rem;font-weight:900;transform:rotate(-2deg)}
.listen-button.speaking{background:#42ed68;box-shadow:0 0 0 8px rgba(66,237,104,.25),0 0 28px rgba(34,197,94,.55);animation:listen-pulse .7s ease-in-out infinite alternate}@keyframes listen-pulse{to{transform:scale(1.08)}}
.money-image{display:block;width:100%;height:105px;object-fit:contain;border-radius:5px}.money-card.coin-card .money-image{height:120px}.money-card[disabled]{opacity:.45}.ordered-chip.correct{background:#42ed68}.ordered-chip.wrong{background:#fca5a5}.example-note{display:grid;justify-items:center;gap:5px;min-height:90px;color:var(--ink);font-weight:900}.order-visual{display:flex;align-items:center;gap:18px;font-size:clamp(2rem,5vw,3.3rem)}.order-visual>span:first-child{color:#166534}.order-visual>span:last-child{color:#9f1239}.order-help{color:var(--muted);font-size:clamp(.82rem,1.5vw,1rem);font-weight:800;text-align:center}.demo-arrow{color:var(--focus);animation:arrow-nudge .8s ease-in-out infinite alternate}.demo-target{border-color:#2563eb;background:#eff6ff}.demo-highlight{opacity:1!important;background:#42ed68!important;outline:7px solid #facc15;transform:scale(1.12);transition:.3s}.demo-flyer{position:fixed;z-index:30;margin:0;pointer-events:none;opacity:1!important;box-shadow:0 10px 24px rgba(0,0,0,.3)!important}.problem-layout{display:grid;grid-template-columns:minmax(250px,1fr) minmax(300px,1.4fr);gap:20px}.problem-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.problem-row{padding:10px;border:3px solid #94a3b8;border-radius:8px;background:#fff;font-size:1.35rem;font-weight:900;text-align:center}.problem-row.current{border-color:var(--focus);background:#dbeafe}.problem-row.correct{border-color:var(--good);background:#86efac}.total-display{display:grid;gap:8px;justify-items:center;padding:16px;border:3px solid var(--line);border-radius:8px;background:#fff8dc}.total-display strong{font-size:clamp(2.5rem,7vw,5rem)}.picked-money{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:60px}.picked-money img{width:90px;height:55px;object-fit:contain}.reset-note{color:var(--bad);font-weight:900;text-align:center}@keyframes arrow-nudge{to{transform:translateX(10px)}}
.money-image{display:block;width:100%;height:105px;object-fit:contain;border-radius:5px}.money-card.coin-card .money-image{height:120px}.money-card.correct{background:#42ed68;box-shadow:3px 3px 0 rgba(32,48,71,.22)}.money-card[disabled]{opacity:.45}.ordered-chip.correct{background:#42ed68}.ordered-chip.wrong{background:#fca5a5}.example-note{display:grid;justify-items:center;gap:5px;min-height:90px;color:var(--ink);font-weight:900}.order-visual{display:flex;align-items:center;gap:18px;font-size:clamp(2rem,5vw,3.3rem)}.order-visual>span:first-child{color:#166534}.order-visual>span:last-child{color:#9f1239}.order-help{color:var(--muted);font-size:clamp(.82rem,1.5vw,1rem);font-weight:800;text-align:center}.demo-arrow{color:var(--focus);animation:arrow-nudge .8s ease-in-out infinite alternate}.demo-target{border-color:#2563eb;background:#eff6ff}.demo-highlight{opacity:1!important;background:#42ed68!important;outline:7px solid #facc15;transform:scale(1.12);transition:.3s}.demo-flyer{position:fixed;z-index:30;margin:0;pointer-events:none;opacity:1!important;box-shadow:0 10px 24px rgba(0,0,0,.3)!important}.problem-layout{display:grid;grid-template-columns:minmax(250px,1fr) minmax(300px,1.4fr);gap:20px}.problem-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.problem-row{padding:10px;border:3px solid #94a3b8;border-radius:8px;background:#fff;font-size:1.35rem;font-weight:900;text-align:center}.problem-row.current{border-color:var(--focus);background:#dbeafe}.problem-row.correct{border-color:var(--good);background:#86efac}.total-display{display:grid;gap:8px;justify-items:center;padding:16px;border:3px solid var(--line);border-radius:8px;background:#fff8dc}.total-display strong{font-size:clamp(2.5rem,7vw,5rem)}.picked-money{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:60px}.picked-money img{width:90px;height:55px;object-fit:contain}.reset-note{color:var(--bad);font-weight:900;text-align:center}@keyframes arrow-nudge{to{transform:translateX(10px)}}
.finish-box{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:rgba(24,35,52,.7);overflow:hidden}.finish-box[hidden]{display:none}.finish-card{position:relative;display:grid;place-items:center;width:min(430px,80vw);height:min(330px,60vh);padding:30px;border:4px solid var(--line);border-radius:18px;background:#fff;box-shadow:10px 10px 0 rgba(0,0,0,.25);cursor:pointer;overflow:hidden}.finish-card:hover,.finish-card:focus-visible{outline:8px solid #f6d84a;outline-offset:5px}.finish-tick{position:relative;z-index:2;display:grid;place-items:center;width:190px;height:190px;border-radius:50%;background:#42ed68;color:#fff;font:900 9rem/1 Arial,sans-serif;box-shadow:0 10px 0 #269d49,0 14px 25px rgba(0,0,0,.22);animation:finish-pop .55s cubic-bezier(.2,1.5,.5,1)}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;left:var(--x);top:-25px;width:12px;height:24px;border-radius:3px;animation:confetti-fall 2.3s var(--delay) ease-in infinite}@keyframes finish-pop{from{transform:scale(.2) rotate(-15deg)}to{transform:scale(1) rotate(0)}}@keyframes confetti-fall{0%{transform:translate(0,-30px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--drift),380px) rotate(var(--spin));opacity:.9}}
@media(max-width:720px){.menu-shell,.app-shell{width:calc(100% - 16px);padding:8px 0}.menu-panel,.activity-panel{min-height:calc(100vh - 16px);padding:12px}.activity-header{grid-template-columns:1fr auto}.activity-header>div:nth-child(2){grid-row:2;grid-column:1/-1}.number-grid{grid-template-columns:repeat(5,1fr);gap:5px}.number-grid .tile{min-height:52px;padding:4px;font-size:1.25rem}.catalogue,.problem-layout{grid-template-columns:1fr}.activity-area{padding:12px}.activity-grid{grid-template-columns:1fr;padding:10px}.score{padding:6px}}
/* Keep generated menu artwork fully visible inside its frame. */
.activity-picture img {
  width: calc(100% - 8px) !important;
  height: 96px !important;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
}

/* Fill the class-selection screen with four large, touch-friendly cards. */
.class-menu-panel {
  display: flex;
  flex-direction: column;
}

.class-menu-panel .menu-header {
  flex: none;
}

.class-grid {
  flex: 1;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: max(520px, calc(100vh - 310px));
}

.class-grid .activity-link {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  padding: clamp(12px, 1.5vw, 22px);
}

.class-grid .activity-picture {
  height: auto;
  min-height: 0;
}

.class-grid .activity-picture img {
  width: auto !important;
  height: auto !important;
  max-width: 92% !important;
  max-height: 92% !important;
  padding: 0;
  object-fit: contain !important;
}

.class-grid .activity-detail strong {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.class-grid .activity-detail small {
  font-size: clamp(.95rem, 1.25vw, 1.15rem);
}

@media (max-width: 720px) {
  .class-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }

  .class-grid .activity-link {
    min-height: 250px;
  }
}

/* The four-class menu always fits inside the current browser viewport. */
.class-menu-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.class-menu-page .menu-shell {
  width: min(1180px, calc(100% - 16px));
  height: 100vh;
  height: 100dvh;
  padding: clamp(6px, 1.5vh, 18px) 0;
}

.class-menu-page .class-menu-panel {
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 2vh, 24px) clamp(10px, 2vw, 28px);
  overflow: hidden;
}

.class-menu-page .menu-header {
  margin-bottom: clamp(8px, 1.5vh, 18px);
}

.class-menu-page .menu-header h1 {
  margin-top: clamp(4px, 1vh, 10px);
  font-size: clamp(2.2rem, min(7vw, 9vh), 6rem);
}

.class-menu-page .menu-note {
  margin-top: clamp(3px, .8vh, 10px);
}

.class-menu-page .class-grid {
  flex: 1 1 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 0;
  padding: clamp(7px, 1.5vh, 16px);
  gap: clamp(7px, 1.5vh, 16px);
  overflow: hidden;
}

.class-menu-page .class-grid .activity-link {
  min-width: 0;
  min-height: 0;
  padding: clamp(5px, 1vh, 12px);
  overflow: hidden;
}

.class-menu-page .class-grid .activity-picture {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.class-menu-page .class-grid .activity-picture img {
  position: absolute;
  inset: 4%;
  width: 92% !important;
  height: 92% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.class-menu-page .class-grid .activity-detail {
  line-height: 1.05;
}

.class-menu-page .class-grid .activity-detail strong {
  font-size: clamp(1rem, min(2.2vw, 3.2vh), 2rem);
}

.class-menu-page .class-grid .activity-detail small {
  margin-top: clamp(2px, .5vh, 5px);
  font-size: clamp(.7rem, min(1.25vw, 1.8vh), 1.15rem);
}

/* A real portrait phone can scroll its single-column version; desktop zoom stays 2×2. */
@media (max-width: 720px) and (orientation: portrait) {
  .class-menu-page {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }

  .class-menu-page .menu-shell,
  .class-menu-page .class-menu-panel {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .class-menu-page .class-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: visible;
  }

  .class-menu-page .class-grid .activity-link {
    min-height: 230px;
  }
}

/* Sequenced counting, comparison, catalogue and guessing activities. */
.emoji-group{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(7px,1.2vw,16px);padding:12px;font-size:clamp(2.5rem,6vw,5.2rem);line-height:1.05}.count-question,.comparison-question{font-size:clamp(2rem,5vw,4rem)}.emoji-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.emoji-answer{min-height:150px}.emoji-answer .emoji-group{font-size:clamp(1.8rem,3.5vw,3.2rem);padding:4px}.comparison-question strong{display:inline-block;padding:.08em .25em;border-radius:8px;background:#fef08a}.guess-card{display:grid;justify-items:center;gap:18px;width:min(760px,100%);margin:auto;padding:clamp(20px,4vw,42px);border:4px solid var(--line);border-radius:14px;background:#fff8dc;text-align:center}.guess-card p{margin:0;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800}.guess-card label{font-weight:900}.guess-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.guess-row input{width:min(260px,45vw);height:76px;padding:8px 14px;border:4px solid var(--line);border-radius:9px;background:#fff;font:900 2.2rem/1 inherit;text-align:center}.guess-clue{min-height:70px;font-size:clamp(1.6rem,4vw,3rem);font-weight:900}.guess-hint{color:#1d4ed8}.guess-product{font-size:6rem}.currency-prefix{font-size:2.5rem;font-weight:900}.mini-catalogue{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.mini-catalogue>div{display:grid;place-items:center;gap:5px;padding:10px;border:3px solid var(--line);border-radius:9px;background:#fff8dc;text-align:center}.mini-catalogue span{font-size:3.3rem}.mini-catalogue strong{font-size:1rem}.mini-catalogue b{padding:4px 8px;border-radius:5px;background:var(--yellow);font-size:1.25rem}.catalogue-question{font-size:clamp(1.5rem,3vw,2.7rem)}
@media(max-width:720px){.emoji-choice-grid{grid-template-columns:1fr}.emoji-answer{min-height:120px}.guess-row{flex-wrap:wrap}.mini-catalogue{grid-template-columns:repeat(2,1fr)}}
.guess-range{padding:.12em .5em;border-radius:10px;background:#fef08a;font-size:clamp(3rem,8vw,6rem);font-weight:900;line-height:1}.guess-name{font-size:clamp(1.6rem,3vw,2.5rem)}

/* Low-literacy guessing games: quiet instructions, dominant number and clue. */
.activity-header #task-note {
  color: rgba(34,48,68,.5);
  font-size: clamp(.72rem, .9vw, .88rem);
  font-weight: 650;
}

.guess-row input {
  width: min(340px, 55vw) !important;
  height: 120px !important;
  font-family: "Century Gothic", "Aptos", "Segoe UI", sans-serif !important;
  font-size: clamp(3.5rem, 7vw, 5.5rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.guess-clue {
  min-height: 120px;
  font-size: clamp(4.5rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 1;
}

.guess-row .action-button {
  min-height: 90px;
  padding: 12px 22px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.guess-row input::-webkit-inner-spin-button,
.guess-row input::-webkit-outer-spin-button {
  margin: 0;
  opacity: .35;
}

.number-sequence-slots {
  align-items: center;
  min-height: 112px;
  border-style: solid;
  background: #f8fbff;
}

.number-order-example {
  gap: 8px;
  min-height: 120px;
  padding: 10px;
  border: 3px solid #b8c4d6;
  border-radius: 12px;
  background: #f8fbff;
}

.number-order-example .order-visual {
  gap: clamp(9px, 1.5vw, 20px);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.sequence-preview-blanks {
  display: flex;
  gap: clamp(5px, .8vw, 11px);
  color: #64748b;
}

.sequence-preview-blanks span {
  display: inline-block;
  min-width: .42em;
  text-align: center;
}

.number-order-example .order-help {
  font-size: clamp(.9rem, 1.3vw, 1.1rem);
}

.money-sequence-slots .ordered-chip,
.money-sequence-slots .sequence-endpoint,
.money-sequence-slots .sequence-blank {
  width: clamp(62px, 7vw, 90px);
  font-size: clamp(1.25rem, 2.3vw, 1.8rem);
}

.money-order-example .money-order-visual {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
}

.number-sequence-slots .ordered-chip,
.sequence-endpoint,
.sequence-blank {
  display: grid;
  place-items: center;
  width: clamp(54px, 6vw, 76px);
  min-width: 0;
  min-height: 68px;
  padding: 7px;
  border: 3px solid var(--line);
  border-radius: 8px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 900;
}

.sequence-endpoint {
  background: #fef08a;
}

.sequence-start { color: #166534; }
.sequence-end { color: #9f1239; }

.sequence-blank {
  border-style: dashed;
  border-color: #94a3b8;
  background: #fff;
  color: #94a3b8;
}

.sequence-arrow {
  color: var(--focus);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
}

@media(max-width:720px){
  .number-sequence-slots{gap:5px;padding:8px}
  .number-sequence-slots .ordered-chip,.sequence-endpoint,.sequence-blank{width:42px;min-height:54px;padding:3px;font-size:1.2rem}
  .money-sequence-slots .ordered-chip,.money-sequence-slots .sequence-endpoint,.money-sequence-slots .sequence-blank{width:48px;font-size:1rem}
  .sequence-arrow{font-size:1.35rem}
}

/* Numbers: teacher-led Smartboard sequence. */
.smartboard-mode .smart-number-grid { grid-template-columns:repeat(10,minmax(0,1fr));gap:7px; }
.smartboard-mode .smart-number-grid .tile { min-height:58px;padding:5px;font-size:clamp(1.35rem,2.3vw,2rem); }
.smartboard-mode .smart-number-grid .tile:active {
  transform: translate(3px, 3px);
  filter: brightness(.88);
  box-shadow: inset 3px 4px 0 rgb(32 52 78 / 25%);
}
.smart-writing-wrap { width:min(920px,100%);height:clamp(210px,32vh,330px);margin:auto;border:4px solid var(--line);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px #dbeafe; }
.smart-writing-canvas { display:block;width:100%;height:100%;border-radius:10px;touch-action:none;cursor:crosshair; }
.money-ranking { width:min(1100px,100%);margin:auto; }
.money-ranking-pictures,.money-ranking-lines,.money-ranking-answers { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px; }
.money-ranking-picture { display:flex;align-items:center;justify-content:center;height:clamp(100px,23vh,190px);padding:6px; }
.money-ranking-picture .money-image { width:100%;height:100%;object-fit:contain; }
.money-ranking-picture.ranking-coin .money-image { max-width:120px;max-height:120px; }
.money-ranking-writing { position:relative;height:clamp(120px,23vh,200px);background:#fff;border-radius:12px; }
.money-ranking-writing canvas { position:absolute;inset:0; }
.money-ranking-lines { position:absolute;inset:0;pointer-events:none; }
.money-ranking-lines span { margin:12px 12px 25px;border-bottom:3px solid var(--line);border-right:1px dashed #cbd5e1; }
.money-ranking-answers { text-align:center;font-size:clamp(1.5rem,3vw,2.5rem);color:#166534; }
.money-ranking-answers[hidden] { display:none; }
.money-ranking-drops { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px; }
.money-rank-slot,.money-rank-chip { min-height:74px;border:3px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:900 2.5rem/1 sans-serif;cursor:pointer; }
.money-rank-bank { display:flex;justify-content:center;gap:16px;flex-wrap:wrap; }
.money-rank-chip { width:80px;background:var(--yellow);touch-action:none;user-select:none; }
.money-rank-chip:disabled { opacity:.25; }
.money-rank-chip.selected { outline:4px solid #2563eb;outline-offset:3px; }
.money-rank-slot.correct { background:#bbf7d0;border-color:#166534; }
.money-rank-slot.wrong { background:#fee2e2;border-color:#b91c1c; }
.money-rank-ghost { position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);opacity:.9; }
.smart-writing-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:12px; }
.smart-tool,.bingo-call { min-height:58px;padding:9px 20px;border:3px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:clamp(1rem,2vw,1.35rem);font-weight:900;box-shadow:3px 3px 0 #20344738;cursor:pointer; }
.smart-next,.bingo-call { background:var(--yellow); }
.smart-listen { margin:auto; }
.bingo-caller { position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;width:min(1000px,100%);margin:auto;overflow:hidden;border-radius:18px; }
.bingo-buttons { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.bingo-call { background:#86efac; }
.bingo-action { display:flex;min-height:112px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 14px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.bingo-action:hover:not(:disabled) { transform:translateY(-4px) rotate(-1deg);filter:brightness(1.05); }
.bingo-action:active:not(:disabled) { transform:translate(3px,3px) scale(.97); }
.bingo-action-icon { font-size:clamp(2.8rem,5vw,4.2rem);line-height:1;filter:drop-shadow(2px 3px 0 #20344725); }
.bingo-action-text { font-size:clamp(.82rem,1.5vw,1.05rem);line-height:1.05; }
.bingo-call.speaking .bingo-action-icon { animation:bingoSpeaker .55s ease-in-out infinite alternate; }
.bingo-reveal { background:var(--yellow); }
.bingo-reveal:disabled { opacity:.45;cursor:not-allowed;box-shadow:none; }
.bingo-print { background:var(--blue); }
.bingo-print-dialog { width:min(470px,calc(100% - 30px));padding:0;border:4px solid var(--line);border-radius:20px;background:#fffdf3;color:var(--ink);box-shadow:0 22px 60px #102f4d66; }
.bingo-print-dialog::backdrop { background:#102f4d99;backdrop-filter:blur(4px); }
.bingo-print-dialog form { display:grid;justify-items:center;gap:18px;padding:28px; }
.bingo-dialog-icon { font-size:4.5rem;line-height:1; }
.bingo-print-dialog h2 { margin:0;font-size:clamp(2rem,5vw,3rem); }
.bingo-print-dialog label { display:grid;gap:7px;width:min(270px,100%);text-align:center;font-weight:800; }
.bingo-print-count { width:100%;min-height:72px;border:3px solid var(--line);border-radius:12px;color:var(--ink);font-family:inherit;font-size:2.2rem;font-weight:900;line-height:1;text-align:center; }
.bingo-dialog-actions { display:flex;gap:12px; }
.bingo-history { grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(10,clamp(72px,8vw,88px));align-content:end;justify-content:center;gap:8px;min-height:clamp(420px,48vh,460px);padding:20px 2% 82px;overflow:hidden;border:0;border-radius:18px;background:transparent url("assets/bingo-ball-tub-overhead.png") center/100% 100% no-repeat;isolation:isolate; }
.bingo-history::after { content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url("assets/bingo-ball-tub-overhead.png") center/100% 100% no-repeat;opacity:.16; }
.bingo-history .bingo-ball { position:relative;z-index:3;display:grid;place-items:center;justify-self:center;width:clamp(75px,9vw,95px);aspect-ratio:1;border:5px solid hsl(var(--ball-hue) 68% 22%);border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff 0 8%,hsl(var(--ball-hue) 96% 82%) 23%,hsl(var(--ball-hue) 88% 52%) 70%,hsl(var(--ball-hue) 72% 32%) 100%);color:#102f4d;box-shadow:inset -10px -13px 14px #102f4d40,5px 8px 8px #102f4d66;font-size:clamp(1.9rem,3.5vw,2.6rem);font-weight:1000;opacity:1; }
.bingo-history .bingo-chip-enter { animation:bingoRollIn .7s cubic-bezier(.2,.9,.25,1.25) both; }
.bingo-finish { grid-column:1/-1;justify-self:center;min-width:min(520px,90%);min-height:105px;padding:10px 38px;background:var(--yellow);font-size:clamp(3rem,7vw,5.5rem);line-height:1;letter-spacing:.06em; }
.bingo-finish:hover { animation:bingoWiggle .45s ease-in-out; }
.bingo-celebration { position:absolute;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#fff7a8 0,#a7f3d0 46%,#60a5fa 100%);animation:bingoCelebrateIn .42s ease-out both; }
.bingo-celebration-word { position:relative;z-index:2;color:var(--ink);font-size:clamp(5rem,14vw,10rem);font-weight:1000;letter-spacing:.04em;text-shadow:0 7px 0 #fff,0 13px 0 #20344735;animation:bingoWord 1s ease-in-out infinite alternate; }
.bingo-confetti { position:absolute;inset:0; }
.bingo-confetti i { --delay:calc(var(--i) * -45ms);position:absolute;left:50%;top:45%;font-style:normal;font-size:clamp(1rem,2.5vw,2rem);animation:bingoBurst 1.45s var(--delay) ease-out both; }
@keyframes bingoSpeaker{to{transform:scale(1.16) rotate(-8deg)}}
@keyframes bingoRollIn{0%{opacity:0;transform:translate(380px,-210px) rotate(900deg) scale(.45)}58%{opacity:1;transform:translate(-18px,-8px) rotate(140deg) scale(1.08)}78%{transform:translate(9px,-22px) rotate(35deg)}100%{transform:none}}
@keyframes bingoWiggle{25%{transform:rotate(-2deg) scale(1.03)}75%{transform:rotate(2deg) scale(1.03)}}
@keyframes bingoCelebrateIn{from{opacity:0;transform:scale(.65) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes bingoWord{to{transform:scale(1.08) rotate(1deg)}}
@keyframes bingoBurst{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.2) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){.bingo-action,.bingo-call.speaking .bingo-action-icon,.bingo-history .bingo-chip-enter,.bingo-finish:hover,.bingo-celebration,.bingo-celebration-word,.bingo-confetti i{animation:none;transition:none}}
.smart-sequence-write { position:relative;width:min(1050px,100%);min-height:180px;margin:auto; }
.smart-sequence,.smart-equation { display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,22px);min-height:95px;font-size:clamp(2.5rem,6vw,5rem);font-weight:900; }
.smart-sequence-write .smart-sequence { position:absolute;inset:0;z-index:1; }
.smart-sequence-canvas { position:absolute;inset:0;z-index:2; }
.smart-sequence b { color:var(--focus); }
.smart-sequence-blank { width:clamp(80px,10vw,130px);height:1.2em;border-bottom:5px solid #94a3b8; }
.smart-sum-series { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;width:min(850px,100%);margin:auto; }
.smart-sum { display:grid;place-items:center;min-height:76px;padding:8px;border:3px solid var(--line);border-radius:12px;background:#fff8dc;color:var(--ink);box-shadow:3px 3px 0 #2034472e;font:inherit;font-size:clamp(2rem,4vw,3.25rem);font-weight:900;cursor:pointer; }
.smart-sum:active,.smart-sum.speaking { transform:translate(3px,3px);background:var(--yellow);box-shadow:inset 3px 4px 0 #20344738; }
.smart-cloze-write { position:relative;width:min(1000px,100%);min-height:150px;margin:auto; }
.smart-cloze-write .smart-sentence-frame { position:absolute;inset:0;z-index:1; }
.smart-cloze-canvas { position:absolute;inset:0;z-index:2; }
.smart-sentence-frame { display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,16px);padding:12px;text-align:center;font-size:clamp(2rem,4vw,3.5rem);font-weight:900;white-space:nowrap; }
.smart-cloze-blank { display:inline-block;width:clamp(120px,14vw,190px);height:1.15em;border-bottom:5px solid var(--line); }
.smart-cloze-blank.short { width:clamp(85px,9vw,125px); }
.smart-cloze-blank.number { width:clamp(115px,12vw,165px); }
.smart-cloze-blank.sentence { width:min(820px,85vw); }
.smart-two-choices,.smart-quiz-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:min(850px,100%);margin:auto; }
.smart-two-choices .answer { min-height:170px;font-size:clamp(4rem,9vw,7rem); }
.smart-quiz-question { min-height:120px;text-align:center;font-size:clamp(2.4rem,5vw,4.5rem);font-weight:900; }
.smart-quiz-question .emoji-group { font-size:clamp(3rem,7vw,5.5rem); }
.smart-quiz-options .answer { min-height:100px;font-size:clamp(2.2rem,5vw,4rem); }
.atm-guess { position:relative;display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,.75fr);gap:14px 24px;width:min(900px,100%);margin:auto;padding:18px;overflow:hidden;border:7px solid #365267;border-radius:24px;background:linear-gradient(145deg,#dce5e8,#91a5ad);box-shadow:inset 5px 5px 0 #fff8,inset -8px -8px 0 #2034472e,8px 10px 0 #20344735; }
.atm-brand { grid-column:1/-1;padding:5px 14px;border-radius:8px;background:#29495f;color:#fff;font-size:clamp(1rem,2vw,1.4rem);font-weight:1000;letter-spacing:.12em;text-align:center; }
.atm-guess.warm .atm-screen { animation:atmScreenTension 1.3s ease-in-out infinite alternate; }
.atm-guess.hot .atm-screen { animation:atmScreenTension .48s ease-in-out infinite alternate; }
.atm-screen { display:grid;align-content:center;min-height:310px;padding:20px;border:10px solid #263e50;border-radius:15px;background:radial-gradient(circle at 50% 20%,#d9ffe0,#91d6a6 75%);box-shadow:inset 0 0 24px #173e5b55; }
.atm-display { min-height:120px;text-align:center;color:#142f42;font-family:ui-monospace,Consolas,monospace;font-size:clamp(5rem,11vw,8.5rem);font-weight:1000;line-height:1;letter-spacing:.08em;text-shadow:0 4px 0 #fff8; }
.atm-message { min-height:65px;text-align:center;color:#29495f;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:1000; }
.atm-message.higher { color:#166534;animation:atmNudgeUp .5s ease; }
.atm-message.lower { color:#9f1239;animation:atmNudgeDown .5s ease; }
.atm-controls { display:grid;grid-template-columns:1fr 88px;gap:12px; }
.atm-keypad { display:grid;grid-template-columns:repeat(3,1fr);gap:9px; }
.atm-keypad button,.atm-enter { border:3px solid #263e50;border-radius:11px;background:linear-gradient(#fff,#dbe4e8);color:var(--ink);box-shadow:0 5px 0 #536b78;font-family:inherit;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:1000;cursor:pointer; }
.atm-keypad button:active,.atm-enter:active { transform:translateY(5px);box-shadow:none; }
.atm-enter { display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#b9ef72,#7fbd32); }
.atm-enter span { font-size:3.2rem; }
.atm-enter small { font-size:.85rem; }
.atm-bounds { grid-column:1/-1;display:grid;gap:7px;padding:8px;border-radius:10px;background:#eef3f4; }
.atm-bound { display:grid;grid-template-columns:1fr 100px;align-items:center;min-height:52px;padding:5px 10px 5px 18px;border:2px solid #536b78;border-radius:8px;background:#fff;font-size:1.05rem;font-weight:900; }
.atm-bound.highest { border-left:12px solid #be3157; }
.atm-bound.lowest { border-left:12px solid #279b62; }
.atm-bound strong { display:grid;place-items:center;min-height:38px;border-radius:6px;background:#dce8ec;font-size:1.65rem; }
.atm-bound strong.changed { animation:atmReceipt .45s ease-out; }
@keyframes atmNudgeUp{50%{transform:translateY(-9px) scale(1.08)}}
@keyframes atmNudgeDown{50%{transform:translateY(9px) scale(1.08)}}
@keyframes atmReceipt{from{opacity:0;transform:translateY(-18px)}}
.atm-celebration { position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden;background:radial-gradient(circle,#fff9a8 0 12%,#9cf2bd 42%,#52a8ee 72%,#7652d8 100%);animation:atmWinIn .55s cubic-bezier(.2,.9,.25,1.2) both; }
.atm-rays { position:absolute;width:125%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#fff9 0 9deg,transparent 9deg 19deg);animation:atmRays 9s linear infinite; }
.atm-win-number,.atm-win-title,.atm-win-actions { position:relative;z-index:3; }
.atm-win-number { display:grid;place-items:center;width:clamp(150px,23vw,230px);aspect-ratio:1;border:8px solid #fff;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff 0 7%,#ffe861 25%,#ff9e2f 72%,#dd4d2b 100%);color:#173e5b;box-shadow:0 12px 0 #173e5b55,0 0 45px #fff;font-size:clamp(5rem,12vw,9rem);font-weight:1000;line-height:1;animation:atmNumberBounce .8s .2s cubic-bezier(.15,.9,.3,1.35) both; }
.atm-win-title { color:#173e5b;font-size:clamp(2.5rem,6vw,5rem);font-weight:1000;letter-spacing:.05em;text-shadow:0 5px 0 #fff;animation:atmTitleFlash .7s ease-in-out infinite alternate; }
.atm-win-actions { display:flex;gap:14px;margin-top:12px;animation:atmButtonIn .45s 1.05s ease-out both; }
.atm-win-actions button { min-width:clamp(160px,24vw,280px);min-height:70px;padding:10px 24px;border:4px solid #173e5b;border-radius:14px;color:#173e5b;box-shadow:0 7px 0 #173e5b66;font-family:inherit;font-size:clamp(1.2rem,2.4vw,1.8rem);font-weight:1000;cursor:pointer; }
.atm-again { background:#fff4a8; }
.atm-next-activity { background:#b9e769; }
.atm-win-actions button:active { transform:translateY(7px);box-shadow:none; }
.smart-money-explore { grid-template-columns:repeat(6,minmax(105px,1fr)); }
.smart-money-explore .money-card { transition:transform .18s ease,filter .18s ease; }
.smart-money-explore .money-card:hover,.smart-money-explore .money-card.speaking { transform:scale(1.08) rotate(-1deg);filter:brightness(1.08); }
.smart-money-bins { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.smart-money-bin { min-height:180px;padding:12px;border:4px dashed #64748b;border-radius:16px;background:#fff;transition:.2s; }
.smart-money-bin:first-child { background:#fff8dc; }
.smart-money-bin:last-child { background:#dcfce7; }
.smart-money-bin.drag-over { transform:scale(1.025);border-color:var(--focus);box-shadow:0 0 25px #2563eb55; }
.smart-money-bin>strong { display:block;margin-bottom:8px;text-align:center;font-size:clamp(1.5rem,3vw,2.3rem); }
.smart-money-bin>div { display:flex;flex-wrap:wrap;justify-content:center;gap:7px; }
.smart-money-bin .money-card { width:110px;min-height:90px;padding:5px;background:#fff; }
.smart-money-bin .money-image { height:72px; }
.smart-money-sort { grid-template-columns:repeat(6,minmax(100px,1fr));gap:9px; }
.smart-money-sort .money-card { min-height:100px;padding:6px; }
.smart-money-sort .money-image { height:80px; }
.smart-money-write { position:relative;display:grid;grid-template-columns:130px 55px minmax(260px,560px);align-items:center;justify-content:center;min-height:135px;margin:auto; }
.smart-money-write .price-question-listen { position:relative;z-index:4;width:105px;height:105px;border-radius:50%;font-size:3.2rem; }
.smart-dollar { font-size:clamp(3rem,7vw,5.5rem);font-weight:1000; }
.smart-price-line { height:90px;border-bottom:6px solid var(--line); }
.smart-price-canvas { position:absolute;inset:0;z-index:2; }
.smart-shop-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(850px,100%);margin:auto; }
.smart-shop-summary>div { display:grid;justify-items:center;gap:3px;padding:10px;border:3px solid var(--line);border-radius:12px;background:#fff8dc; }
.smart-shop-summary small { font-weight:900;letter-spacing:.08em; }
.smart-shop-summary strong { font-size:clamp(2rem,4vw,3rem); }
.smart-shop-change.too-much { color:var(--bad); }
.smart-shop-products { display:grid;grid-template-columns:repeat(5,1fr);gap:10px; }
.smart-shop-product { position:relative;display:grid;place-items:center;gap:2px;min-height:120px;padding:7px;border:3px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 #20344735;font-family:inherit;cursor:pointer; }
.smart-shop-product span { font-size:2.7rem; }
.smart-shop-product strong { font-size:1rem; }
.smart-shop-product b { padding:3px 7px;border-radius:5px;background:var(--yellow);font-size:1.15rem; }
.smart-shop-product .shop-product-quantity { position:absolute;top:6px;right:7px;display:grid;place-items:center;min-width:35px;height:35px;padding:0 7px;border:3px solid #fff;border-radius:999px;background:#173e5b;color:#fff;box-shadow:2px 3px 0 #173e5b44;font-size:1.15rem;font-style:normal;font-weight:1000; }
.smart-shop-product .shop-product-quantity[hidden] { display:none; }
.smart-shop-product.selected { transform:translate(3px,3px);background:#86efac;box-shadow:inset 3px 4px 0 #20344735; }
.price-atm-product { display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(1.6rem,3vw,2.5rem); }
.price-atm-product span { font-size:3.7rem; }
.money-atm .atm-display { min-height:90px;font-size:clamp(3.8rem,8vw,6rem); }
.atm-win-number.price-win { width:auto;min-width:260px;aspect-ratio:auto;padding:28px;border-radius:28px;font-size:clamp(3.5rem,8vw,6rem); }
.coin-animal-prompt { display:grid;justify-items:center;gap:5px;width:min(500px,90%);margin:auto;padding:14px;border:4px solid var(--line);border-radius:18px;background:#fff8dc; }
.coin-animal-prompt img { width:100%;height:clamp(180px,25vh,270px);border-radius:12px;object-fit:cover; }
.coin-animal-prompt strong { font-size:clamp(1.8rem,4vw,3rem); }
.coin-animal-choices { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(900px,100%);margin:auto; }
.coin-animal-choices .money-card { min-height:190px; }
.money-bingo { width:min(1000px,100%);margin:auto; }
.money-bingo-history { grid-template-columns:repeat(10,clamp(72px,8vw,84px)); }
.bingo-history .money-bingo-ball { width:clamp(80px,9.75vw,102px);font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.05em; }
.how-much-product { display:flex;align-items:center;justify-content:center;gap:16px;margin:auto;padding:12px 24px;border:4px solid var(--line);border-radius:16px;background:#fff8dc; }
.how-much-product span { white-space:nowrap;font-size:4rem;letter-spacing:.05em; }
.how-much-product b { padding:7px 12px;border-radius:7px;background:var(--yellow);font-size:1.7rem; }
.shop-register { display:grid;grid-template-columns:310px 1fr;gap:12px; }
.shop-register-screen { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px 10px;padding:12px;border:7px solid #29495f;border-radius:14px;background:#c9f4cf;box-shadow:inset 0 0 20px #173e5b44; }
.shop-register-screen span { font-size:.85rem;font-weight:900; }
.shop-register-screen strong { text-align:right;font-size:1.7rem; }
.shop-register-screen b { grid-column:1/-1;text-align:center;font-size:1rem; }
.shop-register-screen b.paid { color:#166534; }
.shop-basket { display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;min-height:110px;padding:10px;border:3px dashed #94a3b8;border-radius:12px;background:#fff; }
.shop-basket span { height:max-content;padding:6px 9px;border:2px solid var(--line);border-radius:7px;background:#fff8dc;font-weight:800; }
.shop-counter-product b[hidden] { display:none; }
.shop-payment-heading { text-align:center;font-size:1.25rem;font-weight:1000; }
.shop-payment { grid-template-columns:repeat(9,1fr);gap:7px; }
.shop-payment .money-card { min-height:85px;padding:4px; }
.shop-payment .money-image,.shop-payment .money-card.coin-card .money-image { height:72px; }
.shop-choose-phase,.shop-pay-phase { display:grid;gap:18px;width:min(1050px,100%);margin:auto; }
.shop-order-total { display:flex;align-items:center;justify-content:center;gap:18px;width:max-content;margin:auto;padding:10px 24px;border:5px solid #29495f;border-radius:14px;background:#c9f4cf;box-shadow:inset 0 0 20px #173e5b33; }
.shop-order-total span { font-weight:900; }
.shop-order-total strong { font-size:2rem; }
.shop-payment-screen { width:min(600px,100%);margin:auto;padding:18px 22px; }
.shop-payment-screen strong { font-size:clamp(2.7rem,5vw,4rem);line-height:1; }
.shop-payment-screen span { font-size:1rem; }
.shop-payment-screen b { margin-top:8px;font-size:1.25rem; }
.shop-pay-phase .shop-payment { grid-template-columns:repeat(10,1fr); }
.shop-pay-phase { position:relative; }
.shop-celebration { position:absolute;inset:-12px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;border:5px solid var(--line);border-radius:22px;background:radial-gradient(circle,#fff9a8 0 15%,#9cf2bd 45%,#60a5fa 100%);animation:bingoCelebrateIn .48s cubic-bezier(.2,.9,.25,1.2) both; }
.shop-celebration-items { position:relative;z-index:2;width:min(900px,92%);text-align:center;font-size:clamp(3.2rem,7vw,5.6rem);line-height:1.18;letter-spacing:.03em;filter:drop-shadow(2px 4px 0 #20344735); }
.shop-celebration-total { position:relative;z-index:2;padding:8px 25px;border:5px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);font-size:clamp(4rem,9vw,7rem);font-weight:1000;box-shadow:0 8px 0 #20344744;animation:bingoWord .8s ease-in-out infinite alternate; }
.shop-next-customer { position:relative;z-index:3;min-width:min(420px,85%);min-height:78px;background:var(--yellow);font-size:clamp(1.5rem,3vw,2.2rem); }
.atm-win-confetti { position:absolute;inset:0;z-index:2;pointer-events:none; }
.atm-win-confetti i { --delay:calc(var(--i) * -35ms);position:absolute;left:50%;top:48%;color:hsl(calc(var(--i) * 43) 85% 48%);font-style:normal;font-size:clamp(1rem,2.6vw,2rem);text-shadow:0 2px 0 #fff;animation:atmConfetti 1.7s var(--delay) ease-out infinite; }
@keyframes atmWinIn{from{opacity:0;transform:scale(.45) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes atmRays{to{transform:rotate(360deg)}}
@keyframes atmNumberBounce{from{opacity:0;transform:translateY(-220px) scale(.2) rotate(-360deg)}70%{opacity:1;transform:translateY(18px) scale(1.12) rotate(12deg)}to{transform:none}}
@keyframes atmTitleFlash{to{transform:scale(1.07);filter:brightness(1.25)}}
@keyframes atmButtonIn{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
@keyframes atmConfetti{0%{opacity:0;transform:translate(0,0) scale(.2)}12%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.2)}}
@keyframes atmScreenTension{to{box-shadow:inset 0 0 35px #ff315588,0 0 22px #ff315566}}
@media(prefers-reduced-motion:reduce){.atm-celebration,.atm-rays,.atm-win-number,.atm-win-title,.atm-win-actions,.atm-win-confetti i,.atm-screen{animation:none!important}}
@media(max-width:720px){
  .smartboard-mode .smart-number-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
  .smartboard-mode .smart-number-grid .tile{min-height:45px;font-size:1rem}
  .bingo-caller{grid-template-columns:1fr}.bingo-buttons{grid-template-columns:1fr}.bingo-call{min-height:65px}.bingo-history{grid-column:1;grid-template-columns:repeat(10,52px);gap:7px;min-height:330px;padding:25px 3% 68px;background-size:100% 100%}.bingo-history::after{background-size:100% 100%}.bingo-history .bingo-ball{width:57px;font-size:1.35rem}.bingo-history .money-bingo-ball{width:62px;font-size:.82rem}
  .smart-sum-series{grid-template-columns:1fr 1fr;gap:7px}.smart-sum{min-height:58px;font-size:1.65rem}
  .atm-guess{grid-template-columns:1fr}.atm-brand,.atm-bounds{grid-column:1}.atm-screen{min-height:220px}.atm-controls{min-height:310px}
  .atm-win-actions{flex-direction:column}.atm-win-actions button{min-height:58px}
  .smart-money-explore,.smart-money-sort{grid-template-columns:repeat(3,1fr)}.smart-money-bins{grid-template-columns:1fr}.smart-money-write{grid-template-columns:90px 40px 1fr}.smart-money-write .price-question-listen{width:78px;height:78px;font-size:2.4rem}.smart-shop-products{grid-template-columns:repeat(2,1fr)}
  .coin-animal-choices{grid-template-columns:repeat(2,1fr)}.money-bingo-history{grid-template-columns:repeat(3,1fr)}.shop-register{grid-template-columns:1fr}.shop-payment{grid-template-columns:repeat(3,1fr)}
}

.guess-start-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 16px);
  width: 100%;
}

.guess-start-heading {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900;
}
.guess-start-heading[hidden] { display: none; }

.guess-start-options[hidden],
.guess-entry[hidden] {
  display: none;
}

.guess-start-option {
  min-height: clamp(88px, 11vw, 125px);
  padding: 8px;
  border: 4px solid var(--line);
  border-radius: 10px;
  box-shadow: 4px 5px 0 rgb(32 52 78 / 22%);
  background: var(--blue);
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.guess-start-option:nth-child(2n) { background: var(--lime); }
.guess-start-option:nth-child(3n) { background: var(--purple); }
.guess-start-option:hover,
.guess-start-option:focus-visible { transform: translateY(-3px); }

.guess-entry {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}

.guess-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3vw, 32px);
}

.guess-key span {
  min-width: 150px;
  padding: 9px 16px;
  border: 3px solid #94a3b8;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 900;
}

.number-guess-card .guess-clue:empty {
  display: none;
}

/* Make the amount: show a target, a wallet and the amount still needed. */
.make-money-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  width: min(850px, 100%);
  margin-inline: auto;
  padding: clamp(14px, 2vw, 22px);
}

.money-target,
.money-wallet {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
}

.money-target { background: #fef08a; }
.money-wallet { background: #dcfce7; }
.money-target span,
.money-wallet span { color: #475569; font-size: clamp(.8rem, 1.3vw, 1rem); font-weight: 900; letter-spacing: .08em; }
.money-target strong,
.money-wallet strong { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; }
.money-target strong { color: #1d4ed8; }
.money-wallet strong { color: #166534; }

.money-needed {
  grid-column: 1 / -1;
  min-height: 56px;
  color: #1d4ed8;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
}
.money-needed.too-much { color: var(--bad); }
.money-needed.good { color: var(--good); }
.money-needed:empty { display: none; }

.make-money-board .picked-money {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 82px;
  padding: 7px;
  border: 3px dashed #94a3b8;
  border-radius: 9px;
  background: #fff;
}
.make-money-board .picked-money:empty::after {
  content: 'Your money';
  align-self: center;
  color: #94a3b8;
  font-weight: 800;
}

.money-choice-heading {
  margin-bottom: -8px;
  text-align: center;
  color: #475569;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 900;
}

.catalogue-listen-question {
  justify-self: center;
  width: auto;
  padding: 6px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.catalogue-listen-question:hover,
.catalogue-listen-question:focus-visible { background: #eff6ff; }
.catalogue-listen-question.speaking { background: #dcfce7; }

.price-comparison-question {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
}
.price-question-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
}
.price-question-listen {
  flex: 0 0 auto;
  width: clamp(62px, 7vw, 84px);
  height: clamp(62px, 7vw, 84px);
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--yellow);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  box-shadow: 3px 3px 0 rgb(32 52 78 / 22%);
  cursor: pointer;
}
.price-question-listen.speaking { background: #86efac; }
.price-comparison-question strong {
  display: inline-block;
  padding: .08em .28em;
  border-radius: 10px;
  background: #fef08a;
}
.price-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 34px);
  width: min(900px, 100%);
  margin-inline: auto;
}
.price-comparison-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  padding: 22px;
  border: 4px solid var(--line);
  border-radius: 14px;
  background: var(--blue);
  color: var(--ink);
  box-shadow: 5px 6px 0 rgb(32 52 78 / 22%);
  cursor: pointer;
}
.price-comparison-card:nth-child(2) { background: var(--green); }
.price-comparison-icon { font-size: clamp(4.5rem, 9vw, 7rem); line-height: 1; }
.price-comparison-card strong { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.price-comparison-card b { padding: 7px 14px; border-radius: 8px; background: #fef08a; font-size: clamp(2rem, 4vw, 3.2rem); }
.price-comparison-card.correct { background: #42ed68; }
.price-comparison-card.wrong { background: #fca5a5; }
.price-comparison-card[disabled] { opacity: .5; }
.price-comparison-card.correct[disabled] { opacity: 1; }

@media(max-width:720px){
  .guess-start-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .make-money-board{grid-template-columns:1fr 1fr;gap:8px}
  .money-target strong,.money-wallet strong{font-size:2.3rem}
  .price-comparison-grid{gap:10px}
  .price-comparison-card{min-height:210px;padding:12px}
  .price-question-row{align-items:flex-start}
}

.money-ranking-direction { text-align:center;font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;line-height:1.15;margin:0 0 16px;color:var(--ink); }