*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  :root {
    --font-ui: "Poppins", system-ui, sans-serif;
    --font-display: "Fredoka", "Poppins", system-ui, sans-serif;

    --bg-from: #0F1729; --bg-mid: #1A2440; --bg-to: #0F1729;
    --navy: #1F2747; --navy-soft: #4B547A;
    --cream: #FFF6E6; --cream-deep: #FFEFD5; --cream-edge: #EADFC4;

    --top: #FF6B6B;  --top-d: #C13D3D;
    --bot: #4A90E2;  --bot-d: #2A6BB8;
    --good: #4ADE80; --good-d: #27A357;

    --tile: 120px;          /* width + height of a number tile */

    --ease: cubic-bezier(.34, 1.56, .64, 1);
  }

  html, body { height: 100%; }
  body {
    font-family: var(--font-ui); color: var(--navy);
    background:
      radial-gradient(900px 600px at 50% -8%, #233055 0%, transparent 60%),
      linear-gradient(135deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px;
  }

  /* ---------- the cream game card ---------- */
  .card {
    position: relative;
    margin: auto 0 0;                  /* card+explainer centre as a pair; overflow stays scrollable */
    background: var(--cream);
    border: 1px solid var(--cream-edge);
    border-radius: 34px;
    padding: 40px 52px 30px;
    box-shadow: 0 4px 0 var(--cream-edge), 0 26px 60px -22px rgba(8, 14, 32, .7);
    text-align: center;
    min-width: 640px;
  }
  .eyebrow {
    font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--navy-soft); margin-bottom: 6px;
  }
  .heading {
    font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--navy);
    letter-spacing: -.01em; margin-bottom: 18px; min-height: 1.25em;
  }

  /* ---------- the act marker: count ALL → count ON ---------- */
  .acts {
    position: absolute; top: 20px; right: 24px; z-index: 7;
    display: flex; align-items: center; gap: 7px;
    background: var(--cream-deep); border: 1px solid var(--cream-edge);
    border-radius: 999px; padding: 6px 13px;
  }
  .acts span {
    font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--navy-soft); opacity: .55; transition: opacity .3s, color .3s;
  }
  .acts .arrow { opacity: .4; font-size: 12px; }
  .acts span.live { opacity: 1; color: var(--navy); }
  .acts span.won { opacity: 1; color: var(--good-d); }

  /* ---------- the sum: written across, balls below ---------- */
  .equation {
    display: inline-flex; align-items: center; gap: 16px;
    margin: 2px 0 18px;
  }

  .stage {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 30px; width: 100%; min-height: calc(var(--tile) + 16px);
  }

  .op {
    width: 56px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 58px; line-height: 1;
    color: var(--navy);
  }
  .op.addable {
    cursor: pointer; color: #fff;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(180deg, #4ADE80, #27A357);
    font-size: 40px;
    animation: plusPulse 1.3s ease-in-out infinite;
    transition: transform .1s var(--ease);
  }
  .op.addable:hover { transform: scale(1.08); }
  .op.addable:active { transform: scale(.93); }
  @keyframes plusPulse {
    0%, 100% { box-shadow: 0 5px 0 #1B7D40, 0 12px 22px -8px rgba(39, 163, 87, .7), 0 0 0 0 rgba(39, 163, 87, .5), inset 0 2px 0 rgba(255, 255, 255, .5); }
    50%      { box-shadow: 0 5px 0 #1B7D40, 0 12px 22px -8px rgba(39, 163, 87, .7), 0 0 0 13px rgba(39, 163, 87, 0), inset 0 2px 0 rgba(255, 255, 255, .5); }
  }

  /* ---------- glossy gel number tile ---------- */
  .tile {
    width: var(--tile); height: var(--tile); border-radius: 28px;
    position: relative; border: none; cursor: default; isolation: isolate;
    font-family: var(--font-display); font-weight: 700; font-size: 74px; line-height: 1; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(155deg, var(--c) 0%, var(--cd) 100%);
    box-shadow:
      0 7px 0 var(--cd),
      0 18px 28px -10px rgba(8, 14, 32, .5),
      inset 0 3px 0 rgba(255, 255, 255, .55),
      inset 0 -8px 14px rgba(0, 0, 0, .22);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
    transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  }
  .tile::before {
    content: ""; position: absolute; left: 12%; right: 12%; top: 9%; height: 34%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    filter: blur(.4px); pointer-events: none; z-index: 1;
  }
  .tile > span { position: relative; z-index: 2; }
  .tile.top { --c: var(--top); --cd: var(--top-d); }
  .tile.bot { --c: var(--bot); --cd: var(--bot-d); }

  .tile.active { cursor: pointer; animation: tilePulse 1.15s ease-in-out infinite; }
  .tile.active::after {
    content: ""; position: absolute; inset: -11px; border-radius: 38px;
    border: 3px dashed var(--cd); opacity: .9;
    animation: ring 1.15s ease-in-out infinite;
  }
  @keyframes tilePulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-7px) scale(1.045); }
  }
  @keyframes ring {
    0%, 100% { transform: scale(1); opacity: .55; }
    50%      { transform: scale(1.07); opacity: 1; }
  }
  .tile.active:hover { transform: translateY(-7px) scale(1.06); }
  .tile.active:active { transform: translateY(4px) scale(.99); }
  .tile.done { opacity: .92; }

  /* ---------- answer slot ---------- */
  .answer {
    width: var(--tile); height: var(--tile); border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 74px; color: var(--navy-soft);
    background:
      repeating-linear-gradient(45deg, rgba(31,39,71,.035) 0 10px, transparent 10px 20px),
      var(--cream-deep);
    border: 3px dashed rgba(31, 39, 71, .28);
  }
  .answer .qm { opacity: .5; }
  .answer.filled {
    color: #fff; border: none;
    background: linear-gradient(155deg, var(--good), var(--good-d));
    box-shadow: 0 7px 0 var(--good-d), 0 18px 28px -10px rgba(8, 14, 32, .5),
                inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -8px 14px rgba(0, 0, 0, .18);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
    animation: ansPop .5s var(--ease);
  }
  @keyframes ansPop { 0% { transform: scale(.5); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }

  /* confetti */
  .confetti-pc { position: fixed; top: 0; width: 12px; height: 16px; z-index: 60; pointer-events: none; will-change: transform; }

  /* ---------- ball groups ---------- */
  .ballrow {
    width: fit-content; max-width: 320px; min-height: var(--tile);
    display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center;
    gap: 13px 14px;
  }
  .ballrow:empty { display: none; }

  /* each group fills its own box, then the boxes fuse into one pile */
  .ballrow.boxed {
    box-sizing: border-box;
    width: 196px; height: 156px;
    max-width: none; min-height: 0;
    gap: 10px; padding: 14px; border-radius: 18px; position: relative;
    border: 2.5px dashed rgba(31, 39, 71, .28);
    background: rgba(31, 39, 71, .05);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1), background .3s ease, box-shadow .3s ease, border-color .3s ease, border-radius .3s ease;
    animation: boxIn .35s var(--ease);
  }
  @keyframes boxIn { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

  /* the fused pile — both groups poured together, colour-SORTED (big colour first) */
  .pot {
    display: none;
    position: relative;
    box-sizing: border-box;
    flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 10px;
    max-width: 380px; padding: 16px 20px; border-radius: 24px; border: none;
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--top) 22%, #FFF6E6) 0%,
      #F1ECFA 50%,
      color-mix(in srgb, var(--bot) 22%, #FFF6E6) 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65), 0 12px 26px -16px rgba(31, 39, 71, .55);
  }
  .pot.on { display: flex; }
  .pot.pop { animation: lockPulse .5s var(--ease); }
  @keyframes lockPulse { 0% { transform: scale(1); } 45% { transform: scale(1.055); } 100% { transform: scale(1); } }
  /* keeps the two colour blocks on separate rows inside the pot */
  .pot .rowbreak { flex-basis: 100%; height: 10px; margin: 0; pointer-events: none; }

  /* the GRAND cover — sweeps over the counted bunch, announces its number, then pops away */
  .grandcover {
    position: absolute; z-index: 6; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px;
    background: linear-gradient(155deg, var(--bigc, #4A90E2), var(--bigc-d, #2A6BB8));
    box-shadow: 0 14px 34px -10px rgba(8, 14, 32, .6), inset 0 3px 0 rgba(255, 255, 255, .45);
    font-family: var(--font-display); font-weight: 700; font-size: 84px; line-height: 1; color: #fff;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
    animation: grandIn .5s var(--ease) both;
  }
  .grandcover::after {
    content: ""; position: absolute; inset: -10px; border-radius: 28px;
    border: 4px solid rgba(255, 205, 60, .9);
    animation: grandRing 1s ease-out .2s infinite;
  }
  @keyframes grandIn { 0% { transform: scale(.25); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes grandRing { 0% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1.14); opacity: 0; } }
  .grandcover.out { animation: grandOut .45s ease both; }
  @keyframes grandOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }

  /* later rungs: the big bunch fades away, rung by rung */
  .pot .ball { transition: opacity .45s ease; }
  .pot .ball.fade1 { opacity: .45; }
  .pot .ball.fade2 { opacity: .15; }
  .pot .ball.fade3 { opacity: 0; }

  /* the covering box that remembers the number — tappable */
  .coverbox {
    position: absolute; z-index: 5; cursor: pointer; border: 3px dashed rgba(31, 39, 71, .35);
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px;
    background: rgba(255, 246, 230, .55);
    font-family: var(--font-display); font-weight: 700; font-size: 70px; line-height: 1; color: var(--navy);
    animation: grandIn .45s var(--ease) both;
  }
  .coverbox.numfree { background: transparent; border-color: transparent; }   /* only the number remains */
  .coverbox.invite { animation: cbPulse 1.1s ease-in-out infinite; }
  @keyframes cbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  .coverbox.bump { animation: bump .34s var(--ease); }
  .coverbox.said { cursor: default; color: var(--good-d); }


  .ball {
    width: var(--bs, 56px); height: var(--bs, 56px); border-radius: 50%; flex: none; position: relative;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: drop-shadow(0 5px 7px rgba(8, 14, 32, .4));
    animation: flyIn .6s var(--ease) both;
    transform-origin: center;
  }
  .ball.idle { animation: bob 2.9s ease-in-out infinite; }
  @keyframes flyIn {
    0%   { transform: translate(var(--fx, -120px), var(--fy, -10px)) scale(.2) rotate(var(--fr, -40deg)); opacity: 0; }
    55%  { opacity: 1; }
    72%  { transform: translate(0, 0) scale(1.14) rotate(0deg); }
    86%  { transform: translate(0, 3px) scaleY(.86) scaleX(1.12); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-4px) scaleY(1.04) scaleX(.97); }
    60% { transform: translateY(-5px) scale(1); }
    80% { transform: translateY(-2px) scaleY(.97) scaleX(1.03); }
  }

  /* the counting number stamped on a ball */
  .ball .num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: calc(var(--bs, 56px) * .54); color: #fff;
    -webkit-text-stroke: 3px rgba(20, 12, 45, .55); paint-order: stroke fill;
    opacity: 0; transform: scale(.3); transition: opacity .14s, transform .26s var(--ease); pointer-events: none;
  }
  .ball.counted .num { opacity: 1; transform: scale(1); }
  .ball.counted { filter: drop-shadow(0 0 6px rgba(74, 222, 128, .9)) drop-shadow(0 5px 7px rgba(8, 14, 32, .4)); }
  /* the LAST counted ball — its number survives the wipe and grows: “the last number says it all” */
  .ball.lastnum { filter: drop-shadow(0 0 10px rgba(255, 205, 60, .95)) drop-shadow(0 5px 7px rgba(8, 14, 32, .4)); z-index: 4; }
  .ball.lastnum .num { transform: scale(1.42); transition: transform .4s var(--ease); }

  /* the ball waiting to be counted: pulses + golden glow + clickable */
  .ball.next {
    cursor: pointer; z-index: 3;
    filter: drop-shadow(0 0 9px rgba(255, 205, 60, .95)) drop-shadow(0 5px 7px rgba(8, 14, 32, .4));
    animation: ballPulse .85s ease-in-out infinite;
  }
  @keyframes ballPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
  .ball.bump { animation: bump .34s var(--ease); }
  @keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.34) translateY(-5px); } 100% { transform: scale(1); } }

  /* ---------- the ONE BIG BALL the big group fuses into ---------- */
  .ball.bigball {
    width: 104px; height: 104px;
    animation: none;
  }
  .ball.bigball .num { font-size: 52px; -webkit-text-stroke: 4px rgba(20, 12, 45, .55); }
  .ball.bigball.bump { animation: bump .34s var(--ease); }
  .ball.bigball.counted {
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, .9)) drop-shadow(0 6px 9px rgba(8, 14, 32, .4));
  }

  /* ---------- the number track — the count made visible as a line ---------- */
  .track { display: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 20px auto 0; }
  .track.on { display: flex; animation: boxIn .35s var(--ease); }
  .tcell {
    width: 44px; height: 48px; border-radius: 12px; position: relative; border: 2px solid var(--cream-edge);
    font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-soft);
    background: var(--cream-deep);
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s var(--ease), background .15s, color .15s, border-color .15s;
  }
  .tcell.blank { color: transparent; border-style: dashed; background: transparent; }
  .tcell.lit { background: linear-gradient(155deg, var(--good), var(--good-d)); color: #fff; border-color: var(--good-d); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
  .tcell.hit { animation: tcellHit .34s var(--ease); }
  @keyframes tcellHit { 0% { transform: scale(1); } 45% { transform: scale(1.28) translateY(-4px); } 100% { transform: scale(1); } }
  .tcell.pulse {
    cursor: pointer; color: var(--navy); border-color: #FFB020;
    box-shadow: 0 0 0 3px rgba(255, 205, 60, .5); animation: tcellPulse .9s ease-in-out infinite;
  }
  @keyframes tcellPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  /* the fused capsule: cells 1…N collapse into one block — “all of these just ARE N” */
  .tcell.fusedcap {
    width: auto; min-width: 64px; padding: 0 16px; gap: 7px;
    background: linear-gradient(155deg, var(--bigc, #4A90E2), var(--bigc-d, #2A6BB8));
    color: #fff; border-color: transparent;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 10px -4px rgba(8,14,32,.4);
    animation: capIn .45s var(--ease) both;
  }
  @keyframes capIn { 0% { transform: scaleX(.4); opacity: 0; } 60% { transform: scaleX(1.06); opacity: 1; } 100% { transform: scaleX(1); } }
  .tcell.fusedcap .cap-check {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    background: var(--good); color: #fff; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }

  /* the shared "no, not that" wiggle */
  @keyframes chipNudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

  /* ghost numbers that rise out of the big ball: “1…7 are already inside!” */
  .ghostnum {
    position: absolute; z-index: 8; pointer-events: none;
    font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff;
    -webkit-text-stroke: 3px rgba(20, 12, 45, .55); paint-order: stroke fill;
    animation: ghostUp 1.1s ease-out both;
  }
  @keyframes ghostUp {
    0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
    22%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--gx, 0px), -78px) scale(1.05); }
  }

  .ball.shakeb { animation: chipNudge .42s; }
  .tile.nudge { animation: chipNudge .42s; }
  .tcell.shakec { animation: chipNudge .42s; }
  /* the challenge: every uncounted ball is fair game */
  .pot.free .ball:not(.counted) { cursor: pointer; }
  /* tap counter — makes the cost of each strategy felt */
  .tapchip {
    position: absolute; top: 20px; left: 24px; z-index: 7;
    display: none; align-items: center; gap: 7px;
    background: var(--cream-deep); border: 1px solid var(--cream-edge);
    border-radius: 999px; padding: 6px 13px;
    font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--navy-soft);
  }
  .tapchip.on { display: flex; }
  /* the practice game: score + round stars */
  .scorechip { left: 24px; }
  .rstars {
    position: absolute; top: 20px; right: 24px; z-index: 7;
    display: none; align-items: center; gap: 3px;
    font-family: var(--font-display); font-size: 24px; line-height: 1;
  }
  .rstars.on { display: flex; }
  .rstars span { color: rgba(31, 39, 71, .22); transition: color .2s, transform .2s; }
  .rstars span.fill { color: #F0A81E; animation: starPop .45s var(--ease); }
  @keyframes starPop { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
  .ballrow.shakec { animation: chipNudge .42s; }
  .ballrow.pickable { cursor: pointer; }
  .ballrow.pickable:hover { background: rgba(31, 39, 71, .09); }

  /* "you say it" — the child produces the next number */
  .saychips {
    display: none; justify-content: center; align-items: center; gap: 16px;
    margin-top: 18px; min-height: 72px;
  }
  .saychips.on { display: flex; }
  .saychips .ask {
    font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--navy-soft);
  }
  .schip {
    width: 72px; height: 72px; border-radius: 22px; border: none; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; color: #fff;
    background: linear-gradient(155deg, var(--bot), var(--bot-d));
    box-shadow: 0 5px 0 var(--bot-d), 0 14px 22px -10px rgba(8, 14, 32, .45),
                inset 0 2px 0 rgba(255, 255, 255, .45);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
    transition: transform .1s var(--ease);
  }
  .schip:hover { transform: translateY(-3px) scale(1.05); }
  .schip:active { transform: translateY(2px) scale(.97); }
  .schip.shakec { animation: chipNudge .42s; }

  /* ---------- the answer keypad — the child PRODUCES the total, never picks it ---------- */
  .anspad {
    display: none; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 18px auto 0; max-width: 460px;
  }
  .anspad.on { display: flex; }
  .anspad .pkey { width: 60px; height: 60px; border-radius: 18px; font-size: 28px; }
  .anspad .pback {
    background: linear-gradient(155deg, #FFC73B, #F08A1E);
    box-shadow: 0 5px 0 #B26412, 0 14px 22px -10px rgba(8, 14, 32, .45), inset 0 2px 0 rgba(255, 255, 255, .45);
  }
  .anspad .pgo {
    background: linear-gradient(155deg, var(--good), var(--good-d));
    box-shadow: 0 5px 0 #1B7D40, 0 14px 22px -10px rgba(8, 14, 32, .45), inset 0 2px 0 rgba(255, 255, 255, .45);
  }
  .answer.shakec { animation: chipNudge .42s; }
  .answer.typing { color: var(--navy); }

  /* ---------- the crawlable course explainer below the game ---------- */
  .about {
    max-width: 760px; margin: 0 0 auto;
    background: var(--cream); border: 1px solid var(--cream-edge); border-radius: 26px;
    padding: 30px 38px 26px; color: var(--navy); text-align: left;
    box-shadow: 0 3px 0 var(--cream-edge), 0 20px 50px -24px rgba(8, 14, 32, .6);
  }
  .about h1 { font-family: var(--font-display); font-size: 26px; margin-bottom: 10px; }
  .about h2 { font-family: var(--font-display); font-size: 18px; margin: 18px 0 6px; }
  .about p, .about li { font-size: 15px; line-height: 1.65; color: #3A4366; }
  .about ol { padding-left: 22px; }
  .about a { color: #2A6BB8; font-weight: 600; }
  .breadcrumb { font-size: 13px; color: var(--navy-soft); margin-bottom: 12px; }
  .breadcrumb a { color: var(--navy-soft); }
  .tapchip b { font-family: var(--font-display); font-size: 16px; line-height: 1; color: var(--navy); letter-spacing: 0; }

  /* ---------- the inviting hand ---------- */
  .hand {
    position: absolute; left: 0; top: 0; width: 58px; height: 70px; display: none;
    pointer-events: none; z-index: 6; transform-origin: 14px 10px;
    filter: drop-shadow(0 6px 5px rgba(8, 14, 32, .35));
  }
  .hand svg { display: block; width: 100%; height: 100%; }
  .hand.on { display: block; }
  .hand.tapanim { animation: tap 1.02s ease-in-out infinite; }
  @keyframes tap {
    0%, 100% { transform: rotate(-26deg) translate(0, 0) scale(var(--hs, 1)); }
    45%      { transform: rotate(-26deg) translate(-7px, -15px) scale(var(--hs, 1)); }
  }

  /* ---------- footer control ---------- */
  .newbtn {
    margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: 18px;
    color: #2A1A05; border: none; cursor: pointer;
    padding: 14px 30px; border-radius: 16px;
    background: linear-gradient(180deg, #FFC73B, #F08A1E);
    box-shadow: 0 4px 0 #B26412, 0 12px 22px -8px rgba(240, 138, 30, .7), inset 0 2px 0 rgba(255,255,255,.5);
    transition: transform .1s var(--ease), box-shadow .1s var(--ease);
  }
  .newbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #B26412, 0 16px 26px -8px rgba(240,138,30,.75), inset 0 2px 0 rgba(255,255,255,.5); }
  .newbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #B26412, 0 8px 16px -8px rgba(240,138,30,.6), inset 0 2px 0 rgba(255,255,255,.5); }

  /* voice on/off — the game speaks every instruction */
  .voicebtn {
    position: absolute; bottom: 22px; right: 24px; z-index: 7;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cream-edge);
    background: var(--cream-deep); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 0 var(--cream-edge);
    transition: transform .1s var(--ease);
  }
  .voicebtn:hover { transform: scale(1.08); }
  .voicebtn:active { transform: scale(.94); }
  .voicebtn svg { display: block; }
  .voicebtn .waves { opacity: 1; transition: opacity .2s; }
  .voicebtn .slash { opacity: 0; transition: opacity .2s; }
  .voicebtn.off .waves { opacity: 0; }
  .voicebtn.off .slash { opacity: 1; }

  /* start over — a new child takes the seat */
  .resetbtn {
    position: absolute; bottom: 22px; left: 24px; z-index: 7;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cream-edge);
    background: var(--cream-deep); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 0 var(--cream-edge);
    transition: transform .1s var(--ease);
  }
  .resetbtn:hover { transform: scale(1.08) rotate(-30deg); }
  .resetbtn:active { transform: scale(.94); }

  /* phones: shrink the equation row so the card fits a 360px screen; the
     ball boxes simply wrap vertically (the stage already flex-wraps) */
  @media (max-width: 700px) {
    :root { --tile: 70px; }
    body { padding: 14px; }
    .card { min-width: 0; width: 100%; padding: 64px 16px 22px; }
    .heading { font-size: 20px; }
    .equation { gap: 6px; }
    .tile, .answer { font-size: 42px; border-radius: 18px; }
    .op { width: 30px; font-size: 34px; }
    .op.addable { width: 42px; height: 42px; font-size: 28px; }
    .stage { gap: 16px; }
    .pot { max-width: 100%; }
    .grandcover { font-size: 54px; }
    .coverbox { font-size: 44px; }
    .anspad .pkey { width: 50px; height: 50px; font-size: 24px; }
    .about { padding: 22px 18px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tile.active, .tile.active::after, .ball, .ball.idle, .ball.next, .hand.tapanim, .op.addable, .coverbox.invite, .grandcover::after { animation: none !important; }
    .tile, .newbtn { transition: none; }
  }

  /* ---------- welcome screen (shown first; the About SEO text stays visible below it) ---------- */
  .welcome { width: 100%; max-width: 640px; margin: auto 0 0; }
  .w-card {
    background: var(--cream); border: 1px solid var(--cream-edge); border-radius: 34px;
    padding: 40px 44px 32px; text-align: center;
    box-shadow: 0 4px 0 var(--cream-edge), 0 26px 60px -22px rgba(8, 14, 32, .7);
  }
  .w-eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy-soft); margin-bottom: 10px; }
  .w-title { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--navy); margin-bottom: 10px; }
  .w-tag { font-family: var(--font-ui); font-size: 17px; color: #3A4366; line-height: 1.5; max-width: 460px; margin: 0 auto 18px; }
  .w-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
  .w-chips span { font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--navy-soft); background: var(--cream-deep); border: 1px solid var(--cream-edge); border-radius: 999px; padding: 6px 14px; }
  .w-play {
    font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #2A1A05; border: none; cursor: pointer;
    padding: 18px 44px; border-radius: 18px; background: linear-gradient(180deg, #FFC73B, #F08A1E);
    box-shadow: 0 5px 0 #B26412, 0 14px 26px -8px rgba(240, 138, 30, .7), inset 0 2px 0 rgba(255, 255, 255, .5);
    transition: transform .1s var(--ease), box-shadow .1s var(--ease);
  }
  .w-play:hover { transform: translateY(-2px); }
  .w-play:active { transform: translateY(4px); }
  .w-skip { display: inline-block; margin-top: 16px; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--navy-soft); text-decoration: none; }
  .w-skip:hover { color: var(--navy); }

  /* ---------- play wrapper: whole-page on Start, true fullscreen if the browser allows ---------- */
  .playwrap { display: none; width: 100%; }
  .exitbtn {
    display: none; position: fixed; top: 14px; right: 16px; z-index: 60;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cream-edge);
    background: var(--cream-deep); color: var(--navy); cursor: pointer; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; box-shadow: 0 2px 0 var(--cream-edge);
  }
  body.playing { overflow: hidden; }
  body.playing .welcome, body.playing .about { display: none; }
  body.playing .playwrap {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 50; padding: 16px; overflow: auto;
    background:
      radial-gradient(900px 600px at 50% -8%, #233055 0%, transparent 60%),
      linear-gradient(135deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
  }
  body.playing .exitbtn { display: flex; }
  body.playing .card { margin: 0; }