:root {
            --candy-pink-1: #FFD7E7;
            --candy-pink-2: #FFAEC9;
            --candy-pink-3: #FF6FA8;
            --candy-pink-deep: #D63384;
            --candy-pink-shadow: #B12063;
            --candy-cream: #FFF4F8;
            --candy-ink: #5C1734;
            --candy-gold-1: #FFE07A;
            --candy-gold-2: #FFB23A;
            --candy-gold-deep: #D78505;
            --candy-frame: #FFEAF1;
            --candy-cell: rgba(255, 200, 220, 0.45);
            --candy-cell-border: rgba(214, 51, 132, 0.18);

            --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
            --font-pop: 'Bangers', 'Fredoka', cursive;

            --ui-scale: 1;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

        body {
            color: var(--candy-ink);
            font-family: var(--font-display);
            font-weight: 700;
            overflow: hidden;
            overscroll-behavior: none;
            touch-action: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh; height: 100dvh; width: 100vw;
            position: relative;
            /* === BG === Custom artwork (place bg-clouds.png next to Smush.html) */
            background:
              url('backdrop.jpg') center/cover no-repeat,
              linear-gradient(180deg, #FFDFEC 0%, #FFC2D9 100%);
        }
        /* === iOS SAFE AREA === with viewport-fit=cover the page goes edge-to-edge, so the
           top controls would sit under the notch/status bar (and the side under a landscape
           notch). Push them in by the safe-area insets; env() is 0 on devices without one, so
           non-notch screens are unchanged. The bottom DROP button is JS-positioned and reads
           the inset via safeAreaInsets() so it clears the home indicator. */
        #dev-menu-btn { top: calc(8px + env(safe-area-inset-top, 0px)) !important; right: calc(72px + env(safe-area-inset-right, 0px)) !important; }
        #igottago-btn { top: calc(4px + env(safe-area-inset-top, 0px)) !important; right: calc(10px + env(safe-area-inset-right, 0px)) !important; }

        /* === JUICE === Aurora blobs drifting in background */
        body::before, body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.35;
            pointer-events: none;
            z-index: 0;
        }
        body::before {
            width: 60vw; height: 60vw;
            background: radial-gradient(circle, #FFE07A 0%, transparent 70%);
            top: -10vw; left: -15vw;
            animation: auroraDrift1 22s ease-in-out infinite;
        }
        /* === CARMACK === kill aurora on low tier */
        html.q-low body::before, html.q-low body::after { display: none !important; }
        /* === PERF === kill heavy menu effects on low tier */
        html.q-low #rainbow-arc { display: none !important; }
        html.q-low #menu-screen .play-btn-big::before { display: none !important; }
        html.q-low .fj:nth-child(n+3) { display: none !important; }
        html.q-mid .fj:nth-child(n+4) { display: none !important; }

        /* === CHROMEBOOK LOW TIER === avoid compositor-heavy blur/filter work and
           long-running decorative animations on managed/budget ChromeOS devices. */
        html.q-low #quiz-overlay,
        html.q-low #round-end,
        html.q-low #teacher-overlay,
        html.q-low #tutorial-overlay,
        html.q-low #tweaks,
        html.q-low #layout-tuner {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        html.q-low #smush-logo,
        html.q-low .tut-tile,
        html.q-low .tut-hand,
        html.q-low .tut-pop-burst,
        html.q-low .tut-pen-burst,
        html.q-low .tut-star,
        html.q-low .tut-slide.tut-active,
        html.q-low #screen-wipe-inner,
        html.q-low #round-end:not(.hidden),
        html.q-low #round-end:not(.hidden) #round-end-card {
            animation: none !important;
        }
        html.q-low #smush-logo { filter: none; }
        html.q-low #screen-wipe.wipe-cover #screen-wipe-inner { transform: translateY(0%) skewY(-4deg); }
        html.q-low #screen-wipe.wipe-reveal #screen-wipe-inner { transform: translateY(-110%) skewY(-4deg); }
        @media (prefers-reduced-motion: reduce) {
            body::before, body::after, .fj, .play-btn-big, .ch, .tcrit { animation: none !important; }
            .play-btn-big::before { display: none; }
            #title-sparkles { display: none; }
        }
        body::after {
            width: 50vw; height: 50vw;
            background: radial-gradient(circle, #FF6FA8 0%, transparent 70%);
            bottom: -10vw; right: -10vw;
            animation: auroraDrift2 28s ease-in-out infinite;
        }
        @keyframes auroraDrift1 {
            0%,100% { transform: translate(0,0) scale(1); }
            50% { transform: translate(15vw, 10vw) scale(1.15); }
        }
        @keyframes auroraDrift2 {
            0%,100% { transform: translate(0,0) scale(1); }
            50% { transform: translate(-12vw, -8vw) scale(1.1); }
        }
        /* Make UI sit ABOVE aurora */
        #ui-top, #ui-bottom, #game-container, .screen, #igottago-btn, #dev-menu-btn { position: relative; z-index: 2; }
        .screen { z-index: 100; }

        /* Cloud accents */
        body::before, body::after {
            content: "";
            position: absolute; pointer-events: none;
            width: 320px; height: 140px;
            background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(255,255,255,0.7), transparent 70%),
                        radial-gradient(ellipse 50% 70% at 70% 60%, rgba(255,255,255,0.55), transparent 70%);
            filter: blur(6px);
            z-index: 0;
        }
        body::before { top: -20px; left: -80px; transform: rotate(-6deg); }
        body::after  { bottom: 60px; right: -100px; transform: rotate(8deg); opacity: 0.7; }

        #ui-top {
            width: 100%; max-width: calc(560px * var(--ui-scale));
            padding: 18px 20px 0;
            display: flex; flex-direction: column; align-items: center;
            z-index: 10; position: relative;
        }
        /* === ROUND COUNTER === compact pill pinned top-left during play; hidden on
           menus. It gets its own strip above the stats row (body.playing pads
           #ui-top) so it never collides with the SCORE card on narrow screens. */
        #round-badge {
            position: absolute; top: 12px; left: 14px; z-index: 55;
            display: none; align-items: baseline; gap: 6px;
            padding: 6px 14px 7px;
            background: radial-gradient(ellipse 90% 80% at 50% 20%, #FFE7A0 0%, var(--candy-gold-2, #FFB23A) 60%, var(--candy-gold-deep, #D78505) 100%);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(167, 84, 0, 0.35);
            border-radius: 999px;
            box-shadow: inset 0 2px 0 rgba(255,255,255,0.7), inset 0 -3px 6px rgba(167,84,0,0.4), 0 5px 14px rgba(255,153,0,0.4);
            font-family: var(--font-display); font-weight: 800;
            line-height: 1; pointer-events: none;
        }
        body.playing #round-badge { display: flex; }
        body.playing #ui-top { padding-top: 58px; } /* reserve a strip for the badge */
        #round-badge .rb-label {
            font-size: 0.72rem; letter-spacing: 2px; color: #7A4400;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }
        #round-badge #round-badge-num {
            font-size: 1.4rem; color: #FFFFFF;
            text-shadow: 0 2px 0 #B5670A, 0 3px 6px rgba(167,84,0,0.5);
        }
        /* Pop animation when the round number changes. */
        #round-badge.bump { animation: roundBadgeBump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes roundBadgeBump {
            0%   { transform: scale(1) rotate(0deg); }
            35%  { transform: scale(1.32) rotate(-6deg); }
            65%  { transform: scale(0.94) rotate(4deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        #game-container {
            position: relative; flex-grow: 1; flex-shrink: 1; width: 100%; max-width: calc(560px * var(--ui-scale));
            display: flex; justify-content: center; align-items: center;
            z-index: 1; padding: 8px;
            /* min-height:0 lets this flex child shrink to the true leftover space below
               #ui-top. Without it the default min-height:auto pins the child to its canvas
               content height, so it (and the board) overflow the bottom of short screens. */
            min-height: 0;
        }

        /* === COACH === friendly, auto-fading "how to play" reminder pinned near the top
           of the board at the start of the first level. Big, rounded, readable for little
           kids; pointer-events:none so it never blocks a drag; fades via .show. */
        #coach-banner {
            position: absolute; top: 4px; left: 50%;
            transform: translateX(-50%) translateY(-10px);
            z-index: 5; pointer-events: none;
            max-width: 92%; text-align: center;
            padding: 10px 22px;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F6 100%);
            border: 3px solid #FFFFFF; outline: 3px solid rgba(214, 51, 132, 0.35);
            border-radius: 999px;
            font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
            font-size: clamp(15px, 2.6vw, 22px); line-height: 1.2; color: #C2185B;
            box-shadow: inset 0 2px 0 rgba(255,255,255,1), 0 12px 30px rgba(167, 24, 92, 0.35);
            opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
        }
        #coach-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* ---------- Default: portrait UI centered, lots of breathing room on wide screens ---------- */
        /* (No body changes — keep its viewport-full flex centering.) */
        /* Cap each UI element's max-width and let body flex-center them. */
        #ui-top, #game-container, #ui-bottom {
            max-width: 540px;
            width: 100%;
        }
        #game-container {
            max-width: 540px;
        }
        /* Mobile toggle: edge-to-edge, no caps */
        body[data-layout="mobile"] #ui-top,
        body[data-layout="mobile"] #game-container,
        body[data-layout="mobile"] #ui-bottom {
            max-width: none;
        }
        /* === MOBILE BALANCE === On a tall portrait phone the square board is width-bound
           (it can't grow past the screen width), so vertically centering it in the big
           leftover space below the HUD left a large dead gap directly under the (tall,
           2-row-ZOO) stats row — the board floated low-center and read as unbalanced.
           Anchor the board to the TOP of the container instead, so the HUD + board read as
           one connected unit; the unavoidable surplus vertical space then pools at the
           bottom, where the DROP button is centered (see positionHurryBtn). In landscape
           the board is height-bound and fills the column, so flex-start == center there. */
        @media (orientation: portrait) {
            #game-container { align-items: flex-start; }
        }

        /* ---------- Stats row ---------- */
        #stats-row {
            width: 100%; display: flex;
            justify-content: center; align-items: stretch;
            gap: clamp(8px, 2vw, 22px); margin-bottom: 14px;
        }
        /* === WIDE STATS === Score and Pops are wide rectangles flanking the goal */
        /* === POPS ABSORB === sparks that fly from a popped pair up into the Pops card */
        .pop-spark {
            position: fixed; top: 0; left: 0;
            border-radius: 50%;
            pointer-events: none;
            z-index: 90;
            will-change: transform, opacity;
        }
        .stat-card {
            position: relative;
            transform-origin: center center;
            box-sizing: border-box;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F6 100%);
            border-radius: 18px;
            padding: 8px 16px 10px;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -3px 0 rgba(214, 51, 132, 0.10),
              0 4px 12px rgba(214, 51, 132, 0.18);
            border: 2px solid rgba(255, 255, 255, 0.9);
            text-align: center;
            display: flex; flex-direction: column; justify-content: center;
            width: clamp(108px, 15vw, 170px);
            min-width: clamp(108px, 15vw, 170px);
            max-width: clamp(108px, 15vw, 170px);
        }
        .stat-card::after {
            /* glossy sheen */
            content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 30%;
            background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
            border-radius: 18px 18px 30px 30px / 18px 18px 50px 50px;
            pointer-events: none;
        }
        .stat-label {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--candy-pink-deep);
            letter-spacing: 2px;
        }
        .stat-val {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.75rem;
            color: var(--candy-pink-shadow);
            line-height: 1;
            margin-top: 2px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.8);
        }
        /* === POPS METER === progress fill inside the Pops card, under the count */
        #pops-meter {
            width: 100%; height: 8px; margin-top: 7px;
            background: rgba(214, 51, 132, 0.18);
            border-radius: 999px; overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(167, 24, 92, 0.35);
        }
        #pops-meter-fill {
            width: 100%; height: 100%;
            background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 50%, #FF8C28 100%);
            border-radius: 999px;
            transform-origin: left; transform: scaleX(0);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
            transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
        }
        /* === BUILD-A-ZOO ZOO BOX === in zoo mode the ZOO card shows a row of blank animal
           silhouette slots that fill with the rescued animal's mini icon (one per quota), so
           progress reads at a glance. The candy POPS count + meter take over when zoo is off. */
        #zoo-slots { display: none; }
        body.build-a-zoo #best-card #best,
        body.build-a-zoo #best-card #pops-meter { display: none; }
        /* === MATCHED CARDS === SCORE and ZOO must be ONE identical box (same width AND height)
           so they symmetrically flank the centered GOAL bubble. The ZOO card no longer grows to
           its slot grid; instead the paw slots are sized to fit INSIDE this fixed box (see below).
           The SCORE card just vertically centers its label+number in the shared height. */
        body.build-a-zoo #score-card, body.build-a-zoo #best-card {
            width: clamp(108px, 15vw, 170px);
            min-width: clamp(108px, 15vw, 170px);
            max-width: clamp(108px, 15vw, 170px);
            height: 74px; min-height: 74px;
        }
        body.build-a-zoo #best-card {
            padding-left: 9px; padding-right: 9px;
            overflow: hidden; /* the paw grid can never spill past the fixed box */
        }
        /* Max 5 icons per row, up to 2 rows (quota tops out at 9). Fixed-width slots + a max-width
           sized to exactly 5 forces the wrap at 5 regardless of the card's flex width. Slots are
           small enough that label + 2 rows fit the shared 74px card height. */
        body.build-a-zoo #zoo-slots {
            display: flex; flex-wrap: wrap; gap: 3px;
            justify-content: center; align-items: center;
            margin-top: 4px;
            max-width: calc(5 * 16px + 4 * 3px);
        }
        .zoo-mini {
            flex: 0 0 auto;
            width: 16px; height: 16px; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; line-height: 1;
            background: rgba(214, 51, 132, 0.10);
            box-shadow: inset 0 0 0 1.5px rgba(214, 51, 132, 0.22);
            filter: grayscale(1) opacity(0.45);
            transition: filter 0.2s ease;
        }
        /* A quota of 8-9 still wraps to two rows of <=5; trim the slots a hair so they fit. */
        #zoo-slots.zoo-compact .zoo-mini { width: 15px; height: 15px; font-size: 11px; border-radius: 5px; }
        #zoo-slots.zoo-compact { max-width: calc(5 * 15px + 4 * 3px); }
        /* Use background-COLOR (longhand) so a filled slot's animal still shows: setAnimalIconEl
           paints the sheet frame via background-IMAGE (.sprite-animal), which a `background`
           shorthand here would wipe out — leaving blank gold boxes. The cream tint sits behind
           the sprite frame / emoji glyph; the gold ring marks the slot as "rescued". */
        .zoo-mini.filled {
            filter: none;
            background-color: #FFF4CC;
            box-shadow: inset 0 0 0 1.5px #FFC700, inset 0 -2px 0 rgba(0, 0, 0, 0.08);
        }
        .zoo-mini.filled.sprite-animal { font-size: 0; }
        /* === ZOO BOX JUICE === the freed animal lands and the slot SPROINGS into place — a juicy
           bounce-in on the slot itself (transform-origin bottom so it "settles" onto the row), NOT a
           jarring scale on the whole card. The card no longer jumps; only the icons animate. */
        .zoo-mini { transform-origin: 50% 100%; }
        .zoo-mini.pop { animation: zooSproing 0.5s cubic-bezier(0.34, 1.7, 0.5, 1); }
        @keyframes zooSproing {
            0%   { transform: scale(0.1) translateY(-14px); }
            45%  { transform: scale(1.32) translateY(0); }
            68%  { transform: scale(0.9); }
            84%  { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        /* The last slot filling (quota complete) gets a soft, NON-moving gold glow on the card — a
           gentle celebration that never makes the button spaz/jump. */
        #best-card.zoo-card-complete { animation: zooCardGlow 0.9s ease-out; }
        @keyframes zooCardGlow {
            0%   { box-shadow: inset 0 2px 0 rgba(255,255,255,1), 0 4px 12px rgba(214, 51, 132, 0.18); }
            40%  { box-shadow: inset 0 2px 0 rgba(255,255,255,1), 0 0 22px 5px rgba(255, 224, 122, 0.95), 0 4px 12px rgba(214, 51, 132, 0.18); }
            100% { box-shadow: inset 0 2px 0 rgba(255,255,255,1), 0 4px 12px rgba(214, 51, 132, 0.18); }
        }
        html.q-low .zoo-mini.pop { animation: none; }
        html.q-low #best-card.zoo-card-complete { animation: none; }
        /* ---------- Goal bubble ---------- */
        #goal-container {
            position: relative;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 10px 16px 14px;
            border-radius: 26px;
            background:
              radial-gradient(ellipse 80% 70% at 50% 30%, #FF85B5 0%, var(--candy-pink-3) 55%, var(--candy-pink-deep) 100%);
            box-shadow:
              inset 0 3px 0 rgba(255,255,255,0.6),
              inset 0 -6px 12px rgba(167, 24, 92, 0.5),
              0 6px 18px rgba(214, 51, 132, 0.45);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.4);
            min-width: 96px;
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
        }
        #goal-container::before {
            content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 40%;
            background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
            border-radius: 20px 20px 30px 30px / 20px 20px 60px 60px;
            pointer-events: none;
        }
        #goal-container {
            will-change: transform;
        }
        #goal-container.pop {
            animation: goalBouncePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow:
              inset 0 3px 0 rgba(255,255,255,0.7),
              inset 0 -6px 12px rgba(167, 24, 92, 0.5),
              0 0 50px rgba(255, 200, 220, 0.9),
              0 8px 24px rgba(214, 51, 132, 0.5);
        }
        @keyframes goalBouncePop {
            0%   { transform: scale(1) rotate(0deg); }
            30%  { transform: scale(1.30) rotate(-7deg); }
            55%  { transform: scale(0.92) rotate(5deg); }
            75%  { transform: scale(1.10) rotate(-2deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        /* === GOAL CELEBRATION === the goal bubble lights up gold and bounces on
           every goal-making pop (see celebrateGoal in smush-rounds.js). */
        #goal-container.goal-celebrate {
            animation: goalCelebrate 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes goalCelebrate {
            0% {
                transform: scale(1) rotate(0deg); filter: none;
                box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), inset 0 -6px 12px rgba(167,24,92,0.5), 0 6px 18px rgba(214,51,132,0.45);
            }
            22% {
                transform: scale(1.34) rotate(-6deg); filter: brightness(1.5) saturate(1.18);
                box-shadow: inset 0 3px 0 rgba(255,255,255,0.9), 0 0 26px 6px rgba(255,224,122,0.95), 0 0 64px 16px rgba(255,180,90,0.65), 0 8px 24px rgba(214,51,132,0.5);
            }
            48% { transform: scale(0.92) rotate(4deg); filter: brightness(1.22) saturate(1.1); }
            72% { transform: scale(1.13) rotate(-2deg); filter: brightness(1.08); }
            100% {
                transform: scale(1) rotate(0deg); filter: none;
                box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), inset 0 -6px 12px rgba(167,24,92,0.5), 0 6px 18px rgba(214,51,132,0.45);
            }
        }
        /* Gold shock-ring that flashes outward from the goal on a pop. */
        .goal-ring-fx {
            position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px;
            border-radius: 30px;
            border: 4px solid rgba(255, 224, 122, 0.95);
            box-shadow: 0 0 18px rgba(255, 210, 120, 0.85);
            pointer-events: none;
            animation: goalRingFx 0.6s ease-out forwards;
        }
        @keyframes goalRingFx {
            0%   { opacity: 0.95; transform: scale(0.72); }
            100% { opacity: 0;    transform: scale(1.75); }
        }
        /* === TOO-BIG EXPLODE === the goal bubble jolts side-to-side and flares angry red
           for ~1s when the player overflows the target (see goalAlarm in smush-rounds.js). */
        #goal-container.goal-alarm {
            animation: goalAlarm 1s ease-in-out;
        }
        @keyframes goalAlarm {
            0%   { transform: translateX(0) rotate(0deg); background: radial-gradient(ellipse 80% 70% at 50% 30%, #FF85B5 0%, var(--candy-pink-3) 55%, var(--candy-pink-deep) 100%); }
            8%   { transform: translateX(-9px) rotate(-4deg); background: radial-gradient(ellipse 80% 70% at 50% 30%, #FF6A6A 0%, #E81F3A 55%, #9E0F22 100%); }
            16%  { transform: translateX(9px) rotate(4deg); }
            24%  { transform: translateX(-8px) rotate(-3deg); }
            32%  { transform: translateX(8px) rotate(3deg); }
            42%  { transform: translateX(-6px) rotate(-2deg); background: radial-gradient(ellipse 80% 70% at 50% 30%, #FF6A6A 0%, #E81F3A 55%, #9E0F22 100%); }
            52%  { transform: translateX(6px) rotate(2deg); }
            64%  { transform: translateX(-4px) rotate(0deg); }
            76%  { transform: translateX(3px); background: radial-gradient(ellipse 80% 70% at 50% 30%, #FF85B5 0%, var(--candy-pink-3) 55%, var(--candy-pink-deep) 100%); }
            100% { transform: translateX(0); }
        }

        /* === ROUND-END TRANSITION === when the final pop completes the quota the card
           doesn't snap in: the backdrop fades up and the card springs in from below.
           Animations replay each time .hidden is removed (display:none resets them). */
        #round-end:not(.hidden) {
            animation: roundEndBackdropIn 0.45s ease both;
        }
        #round-end:not(.hidden) #round-end-card {
            animation: roundEndCardIn 0.6s cubic-bezier(0.18, 1.3, 0.43, 1) both;
        }
        @keyframes roundEndBackdropIn {
            0%   { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
            100% { opacity: 1; }
        }
        @keyframes roundEndCardIn {
            0%   { opacity: 0; transform: translateY(38px) scale(0.82); }
            60%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            #round-end:not(.hidden),
            #round-end:not(.hidden) #round-end-card { animation-duration: 0.01s; }
        }
        #goal-label {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.85rem;
            color: #fff;
            letter-spacing: 3px;
            text-shadow: 0 1px 2px rgba(167, 24, 92, 0.5);
            display: flex; align-items: center; gap: 6px;
            margin-bottom: 2px;
        }
        #goal-label .star { font-size: 0.7rem; color: #FFE07A; text-shadow: 0 1px 0 rgba(167, 24, 92, 0.5); }
        /* === NUMBERZOO === in animal mode the goal label shows only a BIG animal emoji;
           the numeric goal remains in #goal-val so the bubble stays compact. */
        #goal-label.is-animal {
            flex-direction: column; gap: 0; letter-spacing: 0; margin-bottom: 1px;
        }
        #goal-label .goal-animal-emoji {
            font-size: clamp(2.35rem, 6vw, 3.35rem);
            line-height: 1;
            filter: drop-shadow(0 2px 3px rgba(167, 24, 92, 0.45));
        }
        /* === SPRITE ANIMALS === (test toggle) a DOM node showing one frame of the
           animals.png sheet (5x4 grid of 128px cells). background-size is in % so ANY
           element size shows exactly one cell; JS (setAnimalIconEl / renderGoalAnimal)
           sets the per-animal background-position. Em-sized boxes track the font-size
           the emoji glyph would have had, so the swap is layout-neutral. */
        .sprite-animal {
            background-image: url('animals.png');
            background-repeat: no-repeat;
            background-size: 500% 400%;
        }
        #goal-label .goal-animal-emoji.sprite-animal { display: inline-block; width: 1.05em; height: 1.05em; }
        /* inline icon inside a text line (round-end subtitle, NEW STICKER pill, makeAnimalIconEl);
           only needs a box when showing a sheet frame — as emoji it's an ordinary text span. */
        .inline-animal.sprite-animal { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
        .zoo-sticker-emoji.sprite-animal { display: inline-block; width: 1em; height: 1em; }
        #tutorial-card.is-zoo .tut-tile-emoji.sprite-animal { width: 1em; height: 1em; margin: 0 auto; }
        #goal-val {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 3rem;
            color: #fff;
            line-height: 1;
            text-shadow:
              0 2px 0 #B12063,
              0 4px 0 rgba(167, 24, 92, 0.4),
              0 5px 10px rgba(167, 24, 92, 0.5);
        }

        /* ---------- Progress bar (arcade) ---------- */
        #spawn-progress-container {
            position: relative;
            width: calc(100% - 24px); height: 14px;
            background: linear-gradient(180deg, rgba(214,51,132,0.18), rgba(214,51,132,0.28));
            border-radius: 999px;
            margin-top: 14px;
            overflow: visible;
            display: none;
            box-shadow:
              inset 0 2px 4px rgba(167, 24, 92, 0.35),
              0 1px 0 rgba(255,255,255,0.7);
        }
        #spawn-progress-fill {
            width: 100%; height: 100%;
            background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 50%, #FF8C28 100%);
            border-radius: 999px;
            transform-origin: left; transform: scaleX(0);
            box-shadow:
              inset 0 1px 0 rgba(255,255,255,0.7),
              inset 0 -2px 0 rgba(167, 84, 0, 0.3);
            position: relative;
        }
        #spawn-progress-fill::after {
            content: "★";
            position: absolute; right: -10px; top: 50%;
            transform: translateY(-50%);
            font-size: 1.4rem; color: #FFE07A;
            text-shadow: 0 1px 0 #D78505, 0 2px 4px rgba(167, 84, 0, 0.5);
            filter: drop-shadow(0 0 4px rgba(255, 224, 122, 0.6));
            animation: starPulse 1.2s ease-in-out infinite;
        }
        @keyframes starPulse {
            0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
            50% { transform: translateY(-50%) scale(1.18) rotate(8deg); }
        }

        /* ---------- Combo ---------- */
        #combo-container {
            height: 26px; display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.2s; margin-top: 8px; gap: 10px;
        }
        #combo-container.visible { opacity: 1; }
        #combo-text {
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 1.05rem;
            color: #FFFFFF;
            letter-spacing: 2px;
            transform: scale(0.85);
            /* springy overshoot so each CHAIN step pops in instead of linearly easing */
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* === CHAIN READABILITY === white fill always sits on a dark contrasting outline */
            -webkit-text-stroke: 3px var(--candy-pink-shadow);
            paint-order: stroke fill;
            text-shadow:
              0 1px 0 var(--candy-pink-shadow),
              0 2px 0 var(--candy-pink-shadow),
              0 0 6px rgba(91, 11, 46, 0.9),
              0 4px 10px rgba(167, 24, 92, 0.5);
        }
        #combo-text.active { transform: scale(1.05); }
        #combo-bar-bg {
            width: 100px; height: 8px;
            background: rgba(214, 51, 132, 0.2);
            border-radius: 999px; overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(167, 24, 92, 0.4);
        }
        #combo-bar-fill {
            width: 100%; height: 100%;
            background: linear-gradient(180deg, #FFE07A, #FFB23A);
            transform-origin: left;
            border-radius: 999px;
        }

        /* ---------- Discovered combos (ways to make the target), shown left of the board ---------- */
        #bonds-found {
            position: absolute;
            right: 60%;            /* pre-JS fallback; positionBondsPanel() pins it to the board's left edge */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: flex-end; /* chips hug the right side of the panel, nearest the grid */
            gap: 9px;
            z-index: 3;
            pointer-events: none;
            max-height: 96%;
            overflow: hidden;
        }
        .bond-chip {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.25rem;
            letter-spacing: 1px;
            color: #FFFFFF;
            background: linear-gradient(180deg, var(--candy-pink-3) 0%, var(--candy-pink-deep) 100%);
            border: 2px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.35);
            border-radius: 999px;
            padding: 6px 15px;
            text-align: center;
            text-shadow: 0 1px 0 var(--candy-pink-shadow), 0 2px 4px rgba(167, 24, 92, 0.5);
            box-shadow: 0 3px 8px rgba(214, 51, 132, 0.35);
            animation: bond-pop 0.45s cubic-bezier(0.18, 1.4, 0.4, 1) both;
        }
        @keyframes bond-pop {
            0%   { opacity: 0; transform: scale(0.4) translateX(-12px); }
            60%  { opacity: 1; transform: scale(1.12) translateX(0); }
            100% { opacity: 1; transform: scale(1) translateX(0); }
        }
        /* === PEDAGOGY: live bond checklist === unfound partitions show as dimmed "a+?"
           question chips from round start; finding one strips these classes so the chip
           flips to the filled style (and .no-anim removal re-triggers bond-pop). */
        .bond-chip.no-anim { animation: none; }
        .bond-chip.bond-unfound {
            background: transparent;
            color: var(--candy-pink-shadow);
            border: 2px dashed rgba(214, 51, 132, 0.40);
            outline: none;
            text-shadow: none;
            box-shadow: none;
            opacity: 0.65;
        }
        /* Big goals (7-10 partitions) get compact chips so the whole checklist fits the board height. */
        #bonds-found.bonds-compact { gap: 4px; }
        #bonds-found.bonds-compact .bond-chip { font-size: 0.9rem; padding: 3px 10px; }

        /* ---------- Mobile bond bubbles (portrait-only; replaces the DROP button) ---------- */
        /* A mini of the desktop bonds checklist: the top 5 partitions as "a+?" question chips
           that flip to "a+b" when made. Pinned under the board by positionBondBubbles(). */
        #bond-bubbles {
            position: absolute;
            left: 50%; bottom: 24px;   /* pre-JS fallback; positionBondBubbles() pins it */
            display: none;
            flex-direction: row;
            flex-wrap: wrap;           /* safety: wrap rather than overflow on a tiny phone */
            align-items: center;
            justify-content: center;
            gap: 6px;
            max-width: 96vw;
            z-index: 60;               /* same layer as the DROP button it replaces */
            pointer-events: none;      /* display-only — never blocks a drag */
            transform-origin: center top;
        }
        /* Compact enough that 5 chips fit a ~360px-wide phone. */
        #bond-bubbles .bond-chip { font-size: 0.95rem; padding: 4px 10px; letter-spacing: 0; }

        /* ---------- Draw button (calm) ---------- */
        #draw-btn {
            position: relative;
            background: linear-gradient(180deg, #FF9DC4 0%, var(--candy-pink-3) 60%, var(--candy-pink-deep) 100%);
            color: #FFF;
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.45);
            padding: 14px 38px;
            font-family: var(--font-display);
            font-size: 1.2rem; font-weight: 700;
            letter-spacing: 2px;
            border-radius: 999px;
            cursor: pointer;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.6),
              inset 0 -4px 0 rgba(167, 24, 92, 0.45),
              0 6px 0 var(--candy-pink-shadow),
              0 10px 22px rgba(214, 51, 132, 0.4);
            transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
            text-transform: uppercase;
            display: none;
            text-shadow: 0 2px 0 rgba(167, 24, 92, 0.4);
        }
        #draw-btn:active {
            transform: translateY(6px);
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.6),
              inset 0 -2px 0 rgba(167, 24, 92, 0.45),
              0 0 0 var(--candy-pink-shadow),
              0 4px 10px rgba(214, 51, 132, 0.4);
            animation: none;
        }
        #draw-btn.disabled { filter: grayscale(60%) brightness(0.85); opacity: 0.6; pointer-events: none; }
        @keyframes drawPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        #draw-btn.pulse-attn { animation: drawPulse 1.2s infinite; }

        /* ---------- Bottom corner buttons ---------- */
        .corner-btn {
            width: 56px; height: 56px;
            border-radius: 50%;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFEAF2 100%);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.3);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -3px 6px rgba(214, 51, 132, 0.18),
              0 4px 12px rgba(214, 51, 132, 0.3);
            font-size: 1.6rem;
            color: var(--candy-pink-deep);
            position: relative;
            transition: transform 0.08s;
        }
        .corner-btn:active { transform: translateY(2px); }
        .corner-btn.menu-btn { font-size: 1.5rem; }

        /* Floating fruit decoration at bottom */
        #fruit-bar {
            position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 14px; align-items: flex-end;
            font-size: 1.5rem;
            opacity: 0.85;
            pointer-events: none;
            filter: drop-shadow(0 3px 4px rgba(214, 51, 132, 0.3));
            z-index: 5;
        }
        #fruit-bar span:nth-child(2n) { transform: translateY(-3px) rotate(-8deg); }
        #fruit-bar span:nth-child(2n+1) { transform: translateY(2px) rotate(6deg); }

        /* ---------- Screens (menu/gameover/dev) ---------- */
        .screen {
            position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
            background:
              radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,229,239,0.95) 0%, transparent 70%),
              linear-gradient(180deg, rgba(255,223,236,0.95) 0%, rgba(255,194,217,0.95) 100%);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 100; transition: opacity 0.3s ease;
        }
        .hidden { display: none !important; opacity: 0; pointer-events: none; }

        /* === SCREEN TRANSITIONS === every screen now eases in when shown and eases
           out when dismissed (JS adds .screen-out for ~260ms before hiding). The
           menu's inner children stagger in for a lively title reveal. */
        .screen:not(.hidden) {
            animation: screenIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .screen.screen-out {
            animation: screenOut 0.26s ease-in both !important;
            pointer-events: none;
        }
        @keyframes screenIn {
            0%   { opacity: 0; transform: scale(1.04); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes screenOut {
            0%   { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.96); }
        }
        /* Staggered entrance for the title's stacked elements. */
        #menu-screen:not(.hidden) > .title,
        #menu-screen:not(.hidden) > .subtitle,
        #menu-screen:not(.hidden) > #grade-select,
        #menu-screen:not(.hidden) > .play-btn-big {
            animation: menuItemIn 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) both;
        }
        #menu-screen:not(.hidden) > .title       { animation-delay: 0.05s; }
        #menu-screen:not(.hidden) > .subtitle    { animation-delay: 0.14s; }
        #menu-screen:not(.hidden) > #grade-select{ animation-delay: 0.22s; }
        #menu-screen:not(.hidden) > .play-btn-big{ animation-delay: 0.30s; }
        @keyframes menuItemIn {
            0%   { opacity: 0; transform: translateY(22px) scale(0.96); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* === SCREEN WIPE === a candy-pink diagonal sweep used for play<->round
           transitions. JS toggles .wipe-in (cover) then .wipe-out (reveal). */
        #screen-wipe {
            position: fixed; inset: 0; z-index: 400;
            pointer-events: none; opacity: 0;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        #screen-wipe-inner {
            position: absolute; inset: -20% -10%;
            background:
              radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 45%),
              linear-gradient(135deg, #FF9DC4 0%, var(--candy-pink-3) 55%, var(--candy-pink-deep) 100%);
            transform: translateY(110%) skewY(-4deg);
        }
        #screen-wipe.wipe-cover { opacity: 1; pointer-events: all; }
        #screen-wipe.wipe-cover #screen-wipe-inner {
            animation: wipeCover 0.32s cubic-bezier(0.5, 0, 0.75, 0) forwards;
        }
        #screen-wipe.wipe-reveal #screen-wipe-inner {
            animation: wipeReveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        @keyframes wipeCover {
            0%   { transform: translateY(110%) skewY(-4deg); }
            100% { transform: translateY(0%)   skewY(-4deg); }
        }
        @keyframes wipeReveal {
            0%   { transform: translateY(0%)    skewY(-4deg); }
            100% { transform: translateY(-110%) skewY(-4deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .screen:not(.hidden), .screen.screen-out,
            #menu-screen:not(.hidden) > .title,
            #menu-screen:not(.hidden) > .subtitle,
            #menu-screen:not(.hidden) > #grade-select,
            #menu-screen:not(.hidden) > .play-btn-big,
            #screen-wipe.wipe-cover #screen-wipe-inner,
            #screen-wipe.wipe-reveal #screen-wipe-inner { animation-duration: 0.01s !important; }
        }

        .title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 5rem;
            margin-bottom: 8px;
            letter-spacing: 6px;
            color: #FFF;
            text-shadow:
              0 3px 0 var(--candy-pink-deep),
              0 6px 0 var(--candy-pink-shadow),
              0 9px 20px rgba(167, 24, 92, 0.5);
            text-align: center;
        }
        .kid-title { display: flex; gap: 4px; justify-content: center; }
        .kid-title .ch {
            display: inline-block;
            animation: chEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, chWiggle 3.5s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.08s), calc(var(--i) * 0.25s + 0.7s);
        }
        @keyframes chEnter {
            0%   { transform: translateY(-90px) scale(0.4) rotate(-25deg); opacity: 0; }
            70%  { transform: translateY(8px) scale(1.1) rotate(4deg); opacity: 1; }
            100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
        }
        @keyframes chWiggle {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-6px) rotate(-3deg); }
        }
        /* === FALLING JELLIES === backdrop animation on the menu */
        #falling-jellies {
            position: absolute; inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }
        .fj {
            position: absolute;
            top: -120px;
            left: var(--l);
            width: var(--sz); height: var(--sz);
            background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
            border-radius: 16%;
            color: #FFFFFF;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: calc(var(--sz) * 0.5);
            display: flex; align-items: center; justify-content: center;
            /* === PERF === single outer shadow only (insets are paint-heavy) */
            box-shadow: 0 6px 12px rgba(214,51,132,0.22);
            border: 2px solid rgba(255,255,255,0.5);
            text-shadow: 0 2px 0 var(--out);
            opacity: 0;
            animation: jellyFall var(--dur) linear infinite;
            animation-delay: var(--d);
            will-change: transform;
            transform: translateZ(0); /* force own compositor layer */
        }
        @keyframes jellyFall {
            /* === TITLE LIFE === fade out as they near the bottom now that the candy pile
               no longer occludes them (the animals lounge along the lower edge instead). */
            0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
            7%   { opacity: 0.92; }
            80%  { opacity: 0.92; }
            100% { transform: translateY(96vh) rotate(540deg); opacity: 0; }
        }
        /* === TITLE FUN === clickable jellies */
        .fj { cursor: pointer; pointer-events: auto; transition: filter 0.15s; }
        .fj:hover { filter: brightness(1.15) saturate(1.3); }
        .fj.popping {
            animation: jellyPopBurst 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        }
        @keyframes jellyPopBurst {
            0%   { transform: scale(1) rotate(0deg); opacity: 1; }
            40%  { transform: scale(1.7) rotate(20deg); opacity: 1; }
            100% { transform: scale(0) rotate(180deg); opacity: 0; }
        }
        /* === TITLE LIFE === drifting jungle fireflies. Pure transform/opacity so they ride
           the compositor (no filter/blur, glow comes from a self-contained radial gradient). */
        #title-sparkles {
            position: absolute; inset: 0;
            pointer-events: none; overflow: hidden;
            z-index: 1;
        }
        .spark {
            position: absolute;
            left: var(--l); bottom: var(--b);
            width: var(--sz); height: var(--sz);
            border-radius: 50%;
            background: radial-gradient(circle, #FFF6C8 0%, rgba(255,224,122,0.9) 38%, rgba(255,200,90,0) 72%);
            opacity: 0;
            animation: firefly var(--dur) ease-in-out var(--d) infinite;
            will-change: transform, opacity;
        }
        @keyframes firefly {
            0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
            12%  { opacity: 0.95; }
            50%  { transform: translate(var(--dx), -42vh) scale(1); opacity: 0.85; }
            82%  { opacity: 0.5; }
            100% { transform: translate(calc(var(--dx) * -0.6), -82vh) scale(0.6); opacity: 0; }
        }

        /* === TITLE LIFE === animal friends lounging along the bottom of the jungle (replaces
           the old candy pile). They sit behind the PLAY button (z4) and idle on staggered
           phases; tap one for a happy hop (wired in smush-ui.js). */
        #title-critters {
            position: absolute; left: 0; right: 0;
            bottom: clamp(2px, 1.2vh, 18px);
            display: flex; align-items: flex-end; justify-content: space-around;
            padding: 0 clamp(56px, 11vw, 150px);
            pointer-events: none;
            z-index: 2;
        }
        .tcrit {
            position: relative;
            font-size: calc(var(--s, 1) * clamp(36px, 6.5vw, 84px));
            line-height: 1;
            pointer-events: auto;
            cursor: pointer;
            transform-origin: 50% 100%;
            filter: drop-shadow(0 6px 10px rgba(83, 18, 58, 0.4));
            animation: critterBob var(--dur) ease-in-out var(--d) infinite;
            will-change: transform;
            -webkit-user-select: none; user-select: none;
        }
        @keyframes critterBob {
            0%, 100% { transform: translateY(0) rotate(var(--r)) scale(1); }
            30%      { transform: translateY(-16px) rotate(calc(var(--r) + 5deg)) scale(1.05); }
            62%      { transform: translateY(-4px)  rotate(calc(var(--r) - 4deg)) scale(0.99); }
        }
        /* === SPRITE ANIMALS === when the hand-drawn sheet is on, the lounging title animals use the
           SAME art as the in-game critters (applyTitleCritters -> setAnimalIconEl). The .sprite-animal
           class paints one animals.png frame as a background, so give it a box sized off the font (so
           it tracks the same clamp the emoji glyph used) and let the bob transform-origin still work. */
        .tcrit.sprite-animal {
            display: inline-block;
            width: 1.35em; height: 1.35em;
            font-size: calc(var(--s, 1) * clamp(36px, 6.5vw, 84px));
        }
        .tcrit:hover { filter: drop-shadow(0 8px 14px rgba(83,18,58,0.5)) brightness(1.08); }
        .tcrit.hop { animation: critterHop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes critterHop {
            0%   { transform: translateY(0) scale(1) rotate(0deg); }
            35%  { transform: translateY(-50px) rotate(8deg) scale(1.2); }
            70%  { transform: translateY(4px) scale(0.9); }
            100% { transform: translateY(0) scale(1) rotate(0deg); }
        }
        /* On narrow/portrait screens drop the last critter and tuck the row in so the
           animals stay evenly spread instead of crowding the corner buttons. */
        @media (max-width: 620px) {
            #title-critters { padding: 0 clamp(40px, 13vw, 90px); }
            .tcrit:nth-child(n+6) { display: none; }
        }
        /* === PERF === trim the new title life on weak devices */
        html.q-mid .spark:nth-child(n+9) { display: none; }
        html.q-low #title-sparkles { display: none; }
        html.q-low .tcrit:nth-child(n+5) { display: none; }
        html.q-low .tcrit { animation: none !important; }
        /* === TITLE FUN === hover-reactive title letters (jump up like a wave) */
        .kid-title .ch { cursor: pointer; }
        .kid-title .ch:hover {
            animation-play-state: paused !important;
            transform: scale(1.35) translateY(-30px) rotate(0deg) !important;
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: brightness(1.15) drop-shadow(0 8px 20px rgba(255,255,255,0.5));
        }
        /* === TITLE FUN === rainbow halo + ring around PLAY */
        #menu-screen .play-btn-big {
            position: relative !important;
            isolation: isolate;
        }
        /* === PERF === PLAY halo: a fixed pill hugging the button. We rotate only the
           conic-gradient's color angle (via @property), NOT the element geometry — a wide
           pill spun with transform:rotate sweeps a huge off-center circle, so keep it still. */
        @property --play-halo-angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }
        #menu-screen .play-btn-big::before {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 999px;
            background: conic-gradient(from var(--play-halo-angle), #FF4A6A, #FFB23A, #FFE07A, #6FE0A8, #6FB8FF, #B478FF, #FF4A6A);
            z-index: -2;
            opacity: 0.6;
            animation: playRainbow 6s linear infinite;
            will-change: background;
        }
        @keyframes playRainbow {
            0%   { --play-halo-angle: 0deg; }
            100% { --play-halo-angle: 360deg; }
        }
        /* === TITLE FUN === DOM confetti burst from menu on appear */
        #welcome-burst {
            position: absolute;
            top: 50%; left: 50%;
            pointer-events: none;
            z-index: 5;
            width: 0; height: 0;
        }
        .wb {
            position: absolute;
            width: var(--sz, 14px); height: var(--sz, 14px);
            background: var(--c);
            border-radius: var(--rr, 4px);
            top: 0; left: 0;
            opacity: 0;
            animation: wbShoot 1.6s cubic-bezier(0.4, 0.7, 0.55, 1) forwards;
            animation-delay: var(--d);
        }
        @keyframes wbShoot {
            0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
            5%   { opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) rotate(720deg); opacity: 0; }
        }
        /* Title and CTAs sit above the jellies too */
        #menu-screen .title, #menu-screen .subtitle, #menu-screen .mode-btn,
        #menu-screen .mode-desc, #menu-screen .link-btn, #menu-screen #menu-bonds-meta {
            position: relative;
            z-index: 3;
        }
        /* === TITLE ART === photographic jungle backdrop behind the title screen. A soft
           top-center light wash lifts the logo + subtitle for legibility while leaving the
           lower jungle vivid; the candy gradient stays as a fallback if the image fails. */
        #menu-screen {
            background:
              radial-gradient(ellipse 90% 55% at 50% 28%, rgba(255,244,250,0.5) 0%, rgba(255,244,250,0) 60%),
              url('attached_assets/zoonumber_backdrop_1781148760536.jpg') center/cover no-repeat,
              linear-gradient(180deg, #FFDFEC 0%, #FFC2D9 100%);
            background-color: #c98ec4;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        /* === CRANK === GIANT title with rainbow letters + arc */
        /* === TITLE ZEST === id-scoped so it outranks the generic `#menu-screen .title`
           z-index:3 rule above; the logo wrapper must sit BEHIND the foreground tile-stack
           (z-index 3) so the logo can rise up from behind it, yet stay above the falling
           tiles (z-index 1). */
        #menu-screen .kid-title {
            margin-bottom: clamp(8px, 1.6vh, 22px) !important;
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #smush-logo {
            width: clamp(260px, 50vw, 640px);
            height: auto;
            display: block;
            filter: drop-shadow(0 12px 24px rgba(167, 24, 92, 0.45));
            animation: logoIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, logoFloat 4s ease-in-out infinite;
            animation-delay: 0.2s, 1.6s;
        }
        @keyframes logoIn {
            /* === TITLE ZEST === rise up from down behind the tile-stack, then settle with
               a springy overshoot. Kept opaque so it reads as "emerging" (the stack hides
               its lower travel), rather than fading in. */
            0%   { transform: translateY(82vh) scale(0.5) rotate(-4deg); opacity: 1; }
            55%  { transform: translateY(-2vh) scale(1.12) rotate(2deg); opacity: 1; }
            72%  { transform: translateY(1vh) scale(0.96) rotate(-1deg); }
            88%  { transform: translateY(-0.4vh) scale(1.03) rotate(0.5deg); }
            100% { transform: translateY(0) scale(1) rotate(0deg); }
        }
        @keyframes logoFloat {
            0%, 100% { transform: translateY(0) rotate(-1.5deg) scale(1); }
            50%      { transform: translateY(-14px) rotate(1.5deg) scale(1.02); }
        }
        #smush-logo:hover {
            animation-play-state: paused;
            transform: scale(1.05) rotate(-2deg);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
        }
        /* Per-letter colors */
        .ch-r { color: #FF4A6A !important; text-shadow: 0 4px 0 #B0152E, 0 8px 0 #5A0813, 0 12px 24px rgba(255,74,106,0.5) !important; }
        .ch-o { color: #FFB23A !important; text-shadow: 0 4px 0 #B05E00, 0 8px 0 #5A2F00, 0 12px 24px rgba(255,178,58,0.5) !important; }
        .ch-y { color: #FFE07A !important; text-shadow: 0 4px 0 #B08800, 0 8px 0 #5A4500, 0 12px 24px rgba(255,224,122,0.5) !important; }
        .ch-g { color: #6FE0A8 !important; text-shadow: 0 4px 0 #1F8855, 0 8px 0 #0A4528, 0 12px 24px rgba(111,224,168,0.5) !important; }
        .ch-b { color: #6FB8FF !important; text-shadow: 0 4px 0 #1E5DB0, 0 8px 0 #0A2D5A, 0 12px 24px rgba(111,184,255,0.5) !important; }
        .kid-title .ch {
            animation: chEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, chWildBob 2.8s ease-in-out infinite !important;
            animation-delay: calc(var(--i) * 0.08s), calc(var(--i) * 0.22s + 0.7s) !important;
        }
        @keyframes chWildBob {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
            25% { transform: translateY(-14px) rotate(-7deg) scale(1.06); }
            50% { transform: translateY(2px) rotate(2deg) scale(0.97); }
            75% { transform: translateY(-8px) rotate(5deg) scale(1.04); }
        }
        /* === PERF === Soft rainbow wash via stacked radial gradients (no blur filter, no animation = no repaint) */
        #rainbow-arc {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background:
                radial-gradient(ellipse 60% 40% at 18% 25%, rgba(255, 74, 106, 0.32) 0%, transparent 70%),
                radial-gradient(ellipse 55% 35% at 50% 20%, rgba(255, 178, 58, 0.30) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 82% 28%, rgba(255, 224, 122, 0.32) 0%, transparent 70%),
                radial-gradient(ellipse 55% 35% at 75% 65%, rgba(111, 224, 168, 0.32) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 25% 70%, rgba(111, 184, 255, 0.32) 0%, transparent 70%),
                radial-gradient(ellipse 55% 35% at 50% 80%, rgba(180, 120, 255, 0.32) 0%, transparent 70%);
            pointer-events: none;
            z-index: 1;
        }
        /* === PERF === rainbow-stripe removed (was a 120vmax spinning bordered circle, expensive paint) */
        #rainbow-stripe { display: none; }
        /* Bigger fonts on everything else too */
        #menu-screen .subtitle {
            font-size: clamp(1.3rem, 3vw, 2rem);
            margin-bottom: clamp(18px, 3.5vh, 48px);
            position: relative; z-index: 4;
            /* === TITLE ZEST === white halo keeps the text legible over the jungle backdrop */
            text-shadow: 0 1px 2px #fff, 0 0 10px rgba(255,255,255,0.95), 0 2px 8px rgba(255,255,255,0.8);
        }
        #menu-screen .play-btn-big {
            font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
            padding: clamp(24px, 3.5vw, 40px) clamp(60px, 10vw, 120px) !important;
            letter-spacing: 0 !important;   /* no trailing-space centering bug */
            text-indent: 0 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;        /* flex centering ignores text-metrics quirks */
            position: relative; z-index: 4;
        }
        #menu-screen .mode-desc {
            font-size: clamp(1.1rem, 2.4vw, 1.6rem);
            margin-top: clamp(8px, 1.5vh, 14px);
            margin-bottom: clamp(12px, 1.8vh, 24px);
            position: relative; z-index: 4;
            /* === TITLE ZEST === legible over the foreground pile */
            text-shadow: 0 1px 2px #fff, 0 2px 6px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.7);
        }
        #menu-screen .link-btn {
            font-size: clamp(1.2rem, 2.2vw, 1.6rem);
            padding: 12px 28px;
            position: relative; z-index: 4;
            /* === TITLE ZEST === legible over the foreground pile */
            text-shadow: 0 1px 2px #fff, 0 2px 6px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.7);
        }
        #menu-screen #menu-bonds-meta {
            font-size: clamp(1.05rem, 1.9vw, 1.4rem) !important;
            letter-spacing: 1.5px;
            position: relative; z-index: 4;
        }
        .play-btn-big {
            font-size: 2rem !important;
            padding: 22px 60px !important;
            letter-spacing: 4px !important;
            /* === PERF === PLAY pulse killed; affordance comes from rainbow halo + size */
            transition: transform 0.15s ease;
        }
        .play-btn-big:hover { transform: scale(1.05); }
        .link-btn {
            background: transparent;
            border: none;
            color: var(--candy-pink-deep);
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            padding: 8px 18px;
            margin-top: 14px;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .link-btn { transition: color 0.12s, transform 0.12s; }
        @media (hover: hover) { .link-btn:hover { color: var(--candy-pink-shadow); transform: translateY(-1px) scale(1.04); } }
        .link-btn:active { transform: scale(0.96); }

        /* === TITLE CORNERS === pin How to Play (top-left) and For Teachers (top-right). */
        #menu-screen .menu-corner-link {
            position: absolute; top: clamp(10px, 2vh, 22px);
            margin: 0; z-index: 20;
            font-size: clamp(0.95rem, 1.7vw, 1.25rem);
        }
        #menu-screen #show-tutorial-btn.menu-corner-link { left: clamp(10px, 2.5vw, 28px); }
        #menu-screen #for-teachers-btn.menu-corner-link { right: clamp(10px, 2.5vw, 28px); }

        /* === VERSION === small build number pinned bottom-right; bumped on every push. */
        #app-version {
            position: absolute; bottom: 8px; right: 12px;
            z-index: 20; pointer-events: none;
            font-family: var(--font-display); font-weight: 700;
            font-size: clamp(0.7rem, 1.2vw, 0.9rem);
            letter-spacing: 1px;
            color: var(--candy-pink-shadow); opacity: 0.6;
            text-shadow: 0 1px 2px rgba(255,255,255,0.8);
        }
        /* ---------- Quiz overlay ---------- */
        #quiz-overlay {
            position: fixed; inset: 0;
            background: rgba(92, 23, 52, 0.45);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center;
            z-index: 300;
            padding: 24px;
            animation: quiz-fade-in 0.25s var(--easing-spring-gentle, ease-out);
        }
        #quiz-overlay.hidden { display: none; }
        @keyframes quiz-fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes quiz-pop-in {
            0%   { transform: scale(0.6) translateY(20px); opacity: 0; }
            70%  { transform: scale(1.04) translateY(-3px); opacity: 1; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }
        #quiz-card {
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F6 100%);
            border: 4px solid #FFFFFF;
            outline: 3px solid rgba(214, 51, 132, 0.45);
            border-radius: 32px;
            padding: 28px 32px 24px;
            width: min(440px, 100%);
            box-shadow:
              inset 0 3px 0 rgba(255,255,255,1),
              inset 0 -6px 0 rgba(214, 51, 132, 0.12),
              0 18px 50px rgba(167, 24, 92, 0.45);
            text-align: center;
            animation: quiz-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #quiz-badge {
            display: inline-block;
            background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 100%);
            color: #5C3000;
            padding: 6px 18px;
            border-radius: 999px;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 2px;
            border: 2px solid #FFF;
            outline: 2px solid rgba(255, 178, 58, 0.5);
            box-shadow:
              inset 0 1px 0 rgba(255,255,255,0.7),
              0 4px 10px rgba(255, 153, 0, 0.35);
            margin-bottom: 14px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }
        #quiz-prompt {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 2.2rem;
            color: var(--candy-pink-deep);
            line-height: 1.1;
            margin-bottom: 22px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.7);
        }
        #quiz-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px;
        }
        .quiz-opt {
            background: linear-gradient(180deg, #FFFFFF 0%, #FFEAF2 100%);
            color: var(--candy-pink-deep);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.3);
            padding: 16px 12px;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.5rem;
            border-radius: 18px;
            cursor: pointer;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -3px 0 rgba(214, 51, 132, 0.12),
              0 4px 0 #FFAEC9,
              0 8px 16px rgba(214, 51, 132, 0.25);
            transition: transform 0.08s, box-shadow 0.12s, background 0.2s, color 0.2s;
        }
        .quiz-opt:hover { filter: brightness(1.05); }
        .quiz-opt:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(214, 51, 132, 0.12), 0 0 0 #FFAEC9, 0 2px 8px rgba(214, 51, 132, 0.25); }
        .quiz-opt.correct {
            background: linear-gradient(180deg, #B8F0A0 0%, #73D94A 100%);
            color: #1A4D08;
            outline-color: rgba(58, 158, 28, 0.5);
            animation: quiz-correct-bounce 0.5s ease-out;
        }
        .quiz-opt.wrong {
            background: linear-gradient(180deg, #FFB0B6 0%, #E63757 100%);
            color: #FFF;
            outline-color: rgba(180, 24, 50, 0.5);
            animation: quiz-wrong-shake 0.4s ease-out;
        }
        .quiz-opt.dim { opacity: 0.4; pointer-events: none; }
        @keyframes quiz-correct-bounce {
            0%, 100% { transform: scale(1); }
            40% { transform: scale(1.15); }
            70% { transform: scale(0.95); }
        }
        @keyframes quiz-wrong-shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-8px); }
            40%, 80% { transform: translateX(8px); }
        }
        #quiz-foot {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 8px;
        }
        #quiz-reward {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--candy-gold-deep);
            letter-spacing: 1px;
        }
        #quiz-skip {
            background: transparent;
            border: none;
            color: var(--candy-pink-shadow);
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 999px;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        #quiz-skip:hover { color: var(--candy-pink-deep); }

        #quiz-streak {
            position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 100%);
            color: #5C3000;
            padding: 6px 16px;
            border-radius: 999px;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            letter-spacing: 1px;
            border: 2px solid #FFF;
            box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4);
            z-index: 90;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s, transform 0.3s;
        }
        #quiz-streak.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* === FOR TEACHERS === educator modal styling */
        #teacher-overlay {
            z-index: 260;
            background: rgba(40, 8, 24, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        #teacher-card {
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF7FB 100%);
            border: 4px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.25);
            border-radius: 28px;
            padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px);
            width: min(720px, 94%);
            max-height: 88vh;
            overflow-y: auto;
            box-shadow: 0 24px 60px rgba(167, 24, 92, 0.5), inset 0 3px 0 rgba(255,255,255,1);
            color: #3D1424;
            text-align: left;
            font-family: var(--font-display);
        }
        #teacher-header {
            text-align: center;
            border-bottom: 1px solid rgba(214, 51, 132, 0.2);
            padding-bottom: 18px;
            margin-bottom: 22px;
        }
        #teacher-eyebrow {
            font-size: 0.85rem; font-weight: 700; letter-spacing: 2.5px;
            color: var(--candy-pink-deep); margin-bottom: 8px;
        }
        #teacher-title {
            font-family: var(--font-display); font-weight: 700;
            font-size: clamp(1.4rem, 2.6vw, 2rem);
            color: #5C1734; line-height: 1.2;
        }
        #teacher-body {
            font-size: clamp(0.95rem, 1.6vw, 1.1rem);
            line-height: 1.55; font-weight: 500;
        }
        #teacher-body p { margin-bottom: 14px; }
        #teacher-body strong { color: var(--candy-pink-deep); font-weight: 700; }
        #teacher-standards {
            background: #FFEAF2; border-radius: 16px;
            padding: 16px 22px; margin: 18px 0 16px;
        }
        #teacher-standards .ts-heading {
            font-weight: 700; color: var(--candy-pink-deep);
            margin-bottom: 10px; font-size: 0.95rem;
            letter-spacing: 1px; text-transform: uppercase;
        }
        #teacher-standards ul {
            margin: 0; padding-left: 22px;
            font-size: 0.95rem; line-height: 1.55;
        }
        #teacher-standards li { margin-bottom: 6px; }
        #teacher-standards strong { color: #8F0F4C; font-weight: 800; }
        .teacher-note {
            font-style: italic; color: var(--candy-pink-shadow);
            font-size: 0.95rem; margin-top: 14px;
        }
        #teacher-footer { text-align: center; margin-top: 18px; }

        /* === ZOO ALBUM === "My Zoo" sticker book modal */
        #zoo-album-overlay {
            z-index: 260;
            background: rgba(40, 8, 24, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        #zoo-album-card {
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF7FB 100%);
            border: 4px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.25);
            border-radius: 28px;
            padding: clamp(20px, 3vw, 32px) clamp(22px, 3.5vw, 40px);
            width: min(680px, 94%);
            max-height: 88vh;
            overflow-y: auto;
            box-shadow: 0 24px 60px rgba(167, 24, 92, 0.5), inset 0 3px 0 rgba(255,255,255,1);
            color: #3D1424;
            text-align: center;
            font-family: var(--font-display);
        }
        #zoo-album-title {
            font-weight: 700;
            font-size: clamp(1.4rem, 2.6vw, 2rem);
            color: var(--candy-pink-deep);
            letter-spacing: 2px;
            margin-bottom: 6px;
        }
        #zoo-album-hint {
            font-size: 0.9rem; font-weight: 600;
            color: var(--candy-pink-shadow);
            opacity: 0.85;
            margin-bottom: 16px;
        }
        #zoo-album-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
            gap: 10px;
        }
        .zoo-sticker {
            position: relative;
            background: #FFEAF2;
            border: 2px solid rgba(214, 51, 132, 0.3);
            border-radius: 18px;
            padding: 10px 4px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .zoo-sticker-emoji { font-size: 2.1rem; line-height: 1.1; }
        .zoo-sticker-num {
            position: absolute; top: 5px; left: 7px;
            font-size: 0.8rem; font-weight: 800;
            color: var(--candy-pink-deep);
        }
        .zoo-sticker-name {
            font-size: 0.62rem; font-weight: 700;
            letter-spacing: 0.5px;
            color: #5C1734;
        }
        .zoo-sticker-count {
            font-size: 0.68rem; font-weight: 800;
            color: #1B4710;
            background: linear-gradient(180deg, #9BE86B 0%, #5BC23A 100%);
            border-radius: 999px;
            padding: 1px 8px;
        }
        .zoo-sticker.locked {
            background: rgba(214, 51, 132, 0.06);
            border-style: dashed;
        }
        .zoo-sticker.locked .zoo-sticker-emoji {
            filter: grayscale(1) opacity(0.35); /* faint silhouette tease */
        }
        html.q-low .zoo-sticker.locked .zoo-sticker-emoji { visibility: hidden; } /* skip the filter on weak GPUs */
        .zoo-sticker.locked .zoo-sticker-name { opacity: 0.5; }
        .zoo-sticker-q {
            position: absolute; top: 26%;
            font-size: 1.4rem; font-weight: 800;
            color: var(--candy-pink-shadow);
            opacity: 0.8;
        }
        #zoo-album-footer { text-align: center; margin-top: 18px; }
        /* Pinned bottom-left (like the top corner links) so it never shifts the centered
           menu column — the logo-rise title animation depends on that flow staying put.
           Solid white pill so it stays readable over the jungle backdrop + critters. */
        #menu-screen #my-zoo-btn {
            position: absolute; bottom: clamp(12px, 2.5vh, 26px); left: clamp(10px, 2.5vw, 28px);
            margin: 0; z-index: 20;
            font-size: clamp(1.05rem, 2vw, 1.4rem);
            background: rgba(255, 255, 255, 0.92);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.35);
            border-radius: 999px;
            padding: 10px 22px;
            text-decoration: none;
            box-shadow: 0 6px 16px rgba(167, 24, 92, 0.35), inset 0 2px 0 rgba(255,255,255,1);
        }
        #menu-screen #my-zoo-btn:hover { transform: scale(1.06); }

        /* === ZOO ALBUM === round-end "NEW STICKER!" callout */
        #round-end-sticker {
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 1rem;
            color: #1B4710;
            background: linear-gradient(180deg, #9BE86B 0%, #5BC23A 100%);
            border: 2px solid #FFFFFF;
            border-radius: 999px;
            padding: 6px 18px;
            margin: -8px auto 14px;
            width: fit-content;
            animation: stickerPop 0.55s cubic-bezier(0.18, 1.4, 0.4, 1) both;
        }
        @keyframes stickerPop {
            0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
            65%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }

        #tutorial-overlay {
            z-index: 250;
            background: rgba(60, 12, 36, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        #tutorial-card {
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F6 100%);
            border: 5px solid #FFFFFF;
            outline: 4px solid rgba(214, 51, 132, 0.4);
            border-radius: 40px;
            padding: clamp(28px, 4vw, 44px) clamp(32px, 5vw, 56px) clamp(22px, 3vw, 32px);
            width: min(620px, 94%);
            box-shadow:
              inset 0 4px 0 rgba(255,255,255,1),
              inset 0 -8px 0 rgba(214, 51, 132, 0.12),
              0 24px 60px rgba(167, 24, 92, 0.55);
            text-align: center;
        }
        #tutorial-progress {
            display: flex; justify-content: center; gap: 8px;
            margin-bottom: 18px;
        }
        .tut-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: rgba(214, 51, 132, 0.25);
            transition: all 0.3s ease;
        }
        .tut-dot.on {
            background: var(--candy-pink-deep);
            transform: scale(1.3);
        }
        .tut-slide { display: none; }
        .tut-slide.tut-active {
            display: block;
            animation: tutSlideIn 0.4s ease-out;
        }
        @keyframes tutSlideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .tut-heading {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            color: var(--candy-pink-deep);
            margin-bottom: 22px;
        }
        .tut-stage {
            position: relative;
            height: clamp(170px, 22vh, 220px);
            margin-bottom: 18px;
            display: flex; align-items: center; justify-content: center;
            gap: clamp(14px, 2vw, 22px);
        }
        .tut-tile {
            width: clamp(72px, 9vw, 100px); height: clamp(72px, 9vw, 100px);
            border-radius: 18px;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: clamp(2.4rem, 4vw, 3rem);
            color: #FFFFFF;
            text-shadow: 0 2px 0 rgba(0,0,0,0.2);
            box-shadow:
              inset 0 4px 0 rgba(255,255,255,0.5),
              inset 0 -5px 0 rgba(0,0,0,0.15),
              0 8px 18px rgba(214, 51, 132, 0.4);
            border: 3px solid rgba(255,255,255,0.4);
        }
        .t-yellow { background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 100%); color: #5C3000; }
        .t-pink   { background: linear-gradient(180deg, #FF9DC4 0%, #FF6FA8 100%); }
        .t-gold   { background: linear-gradient(180deg, #FFC700 0%, #FF8500 100%); }
        #tut-a { animation: tutDragA 2.5s ease-in-out infinite; }
        .tut-hand {
            position: absolute;
            font-size: 2rem;
            top: 60%; left: 40%;
            animation: tutHand 2.5s ease-in-out infinite;
        }
        @keyframes tutDragA {
            0%, 100% { transform: translateX(-30px); }
            45%, 55% { transform: translateX(30px); }
        }
        @keyframes tutHand {
            0%, 100% { transform: translate(-50px, 10px) rotate(-15deg); opacity: 0.9; }
            45%, 55% { transform: translate(10px, 10px) rotate(0deg); opacity: 1; }
        }
        .tut-goal-badge {
            position: absolute;
            top: -8px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 100%);
            color: #5C3000;
            padding: 6px 18px;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            border: 2px solid #FFF;
            box-shadow: 0 3px 8px rgba(255,153,0,0.4);
        }
        .tut-plus, .tut-equals {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 2rem;
            color: var(--candy-pink-deep);
        }
        .tut-pop-a, .tut-pop-b { animation: tutPopBeat 3s ease-in-out infinite; }
        @keyframes tutPopBeat {
            0%, 40% { transform: scale(1); opacity: 1; }
            48% { transform: scale(1.2); opacity: 1; }
            50%, 100% { transform: scale(0); opacity: 0; }
        }
        .tut-pop-c { animation: tutGoldPop 3s ease-in-out infinite; opacity: 0; }
        @keyframes tutGoldPop {
            0%, 49% { opacity: 0; transform: scale(0); }
            55% { opacity: 1; transform: scale(1.4); }
            70%, 95% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0); }
        }
        .tut-pop-burst {
            position: absolute;
            font-size: 4rem;
            animation: tutBurst 3s ease-in-out infinite;
            opacity: 0;
        }
        @keyframes tutBurst {
            0%, 50% { opacity: 0; transform: scale(0.3); }
            55% { opacity: 1; transform: scale(1.5); }
            70%, 100% { opacity: 0; transform: scale(2); }
        }
        /* === BUILD-A-ZOO TUTORIAL === each tile carries an animal glyph + a small number badge,
           mirroring the in-game drawTileAnimal look. Candy mode (no .is-zoo) hides the emoji and
           shows the number centered, so the original walkthrough is unchanged. */
        .tut-tile-emoji { display: none; }
        .tut-pen-burst { display: none; }
        #tutorial-card.is-zoo .tut-tile { position: relative; }
        #tutorial-card.is-zoo .tut-tile-emoji {
            display: block;
            font-size: clamp(2.6rem, 4.6vw, 3.4rem);
            line-height: 1;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.22));
        }
        #tutorial-card.is-zoo .tut-tile-num {
            position: absolute;
            right: 5px; bottom: 3px;
            font-size: clamp(0.8rem, 1.5vw, 1.05rem);
            font-weight: 700;
            background: rgba(255,255,255,0.95);
            color: var(--candy-pink-deep);
            border-radius: 8px;
            padding: 0 6px;
            text-shadow: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.28);
        }
        /* the result animal is COLLECTED, not popped: a green "penned/safe" ring + a 🎉 instead of ✨ */
        #tutorial-card.is-zoo .tut-pop-burst { display: none; }
        #tutorial-card.is-zoo .tut-pen-burst {
            display: block;
            position: absolute;
            font-size: 3.4rem;
            animation: tutBurst 3s ease-in-out infinite;
            opacity: 0;
        }
        #tutorial-card.is-zoo .tut-pop-c {
            background: linear-gradient(180deg, #EAFBE3 0%, #C9F2B7 100%);
            color: #1F6B12;
            box-shadow:
              0 0 0 4px rgba(115, 217, 74, 0.95),
              0 0 22px 6px rgba(115, 217, 74, 0.5),
              inset 0 4px 0 rgba(255,255,255,0.5);
        }
        .tut-stars { display: flex; gap: 18px; }
        .tut-star {
            font-size: 3.5rem;
            animation: tutStarPop 2.5s ease-out infinite;
            animation-delay: var(--d);
            opacity: 0;
        }
        @keyframes tutStarPop {
            0%, 100% { opacity: 0; transform: scale(0.3) rotate(-30deg); }
            20% { opacity: 1; transform: scale(1.4) rotate(10deg); }
            40%, 80% { opacity: 1; transform: scale(1) rotate(0deg); }
        }
        .tut-caption {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: clamp(1.2rem, 2.4vw, 1.6rem);
            color: var(--candy-pink-shadow);
            margin-bottom: 22px;
            min-height: 32px;
            line-height: 1.35;
        }
        #tutorial-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .subtitle {
            font-size: 1.05rem; color: var(--candy-pink-deep); font-weight: 700;
            margin-bottom: 38px; text-align: center; letter-spacing: 1px;
        }
        .mode-btn {
            background: linear-gradient(180deg, #FFFFFF 0%, #FFEAF2 100%);
            color: var(--candy-pink-deep);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.3);
            padding: 14px 36px;
            margin: 8px;
            font-family: var(--font-display);
            font-size: 1.5rem; font-weight: 700;
            border-radius: 999px;
            cursor: pointer;
            width: 260px;
            letter-spacing: 2px;
            text-indent: 2px; /* compensate trailing letter-spacing */
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -4px 0 rgba(214, 51, 132, 0.15),
              0 6px 0 #FFAEC9,
              0 10px 20px rgba(214, 51, 132, 0.3);
            transition: transform 0.08s, box-shadow 0.08s;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;        /* clip the sweeping shine */
        }
        /* === BUTTON POLISH === gentle lift + brighten on hover (devices with a pointer) */
        @media (hover: hover) {
            .mode-btn:hover { transform: translateY(-2px); filter: brightness(1.05) saturate(1.05); }
        }
        /* === BUTTON POLISH === a soft diagonal shine that sweeps across on hover. */
        .mode-btn::after {
            content: ""; position: absolute; top: 0; left: -60%;
            width: 45%; height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
            transform: skewX(-18deg);
            opacity: 0; pointer-events: none;
        }
        @media (hover: hover) {
            .mode-btn:hover::after { animation: btnShine 0.7s ease; }
        }
        @keyframes btnShine {
            0%   { left: -60%; opacity: 0; }
            20%  { opacity: 1; }
            100% { left: 140%; opacity: 0; }
        }
        .mode-btn:active {
            transform: translateY(6px) scale(0.98);
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -2px 0 rgba(214, 51, 132, 0.15),
              0 0 0 #FFAEC9,
              0 4px 10px rgba(214, 51, 132, 0.3);
        }
        .mode-desc { font-size: 0.85rem; color: var(--candy-pink-shadow); margin-bottom: 14px; font-weight: 700; letter-spacing: 1px; }
        /* === GRADE SELECT === title-page grade picker */
        #grade-select {
            display: flex; flex-direction: column; align-items: center;
            gap: 8px; margin-bottom: clamp(12px, 1.8vh, 20px);
            /* === TITLE ZEST === keep the grade picker above the foreground tile-stack (z3) */
            position: relative; z-index: 4;
        }
        #grade-select .grade-label {
            font-size: 0.8rem; font-weight: 800; letter-spacing: 2px;
            color: var(--candy-pink-deep); text-transform: uppercase;
        }
        #grade-select .grade-btns { display: flex; gap: 8px; }
        .grade-btn {
            width: 48px; height: 48px;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFEAF2 100%);
            color: var(--candy-pink-deep);
            border: 3px solid #FFFFFF;
            outline: 2px solid rgba(214, 51, 132, 0.3);
            border-radius: 999px;
            font-family: var(--font-display);
            font-size: 1.3rem; font-weight: 700;
            cursor: pointer;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -4px 0 rgba(214, 51, 132, 0.15),
              0 4px 0 #FFAEC9,
              0 6px 12px rgba(214, 51, 132, 0.25);
            transition: transform 0.08s, box-shadow 0.08s, background 0.12s, color 0.12s;
        }
        @media (hover: hover) { .grade-btn:hover:not(.active) { transform: translateY(-2px); filter: brightness(1.04); } }
        .grade-btn:active { transform: translateY(4px) scale(0.96); box-shadow: inset 0 2px 0 rgba(255,255,255,1), 0 0 0 #FFAEC9; }
        @keyframes gradePick {
            0% { transform: scale(1); } 45% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1); }
        }
        .grade-btn.active {
            background: linear-gradient(180deg, #FF8FB8 0%, var(--candy-pink-deep) 100%);
            color: #FFFFFF;
            border-color: #FFFFFF;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.6),
              0 4px 0 var(--candy-pink-shadow),
              0 8px 16px rgba(214, 51, 132, 0.4);
            animation: gradePick 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .btn-arcade {
            background: linear-gradient(180deg, #FFD27A 0%, var(--candy-gold-2) 100%);
            color: #FFFFFF;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.7),
              inset 0 -4px 0 rgba(167, 84, 0, 0.3),
              0 6px 0 var(--candy-gold-deep),
              0 10px 22px rgba(255, 153, 0, 0.4);
            text-shadow: 0 2px 0 rgba(167, 84, 0, 0.3);
        }
        .btn-arcade:active {
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.7),
              inset 0 -2px 0 rgba(167, 84, 0, 0.3),
              0 0 0 var(--candy-gold-deep),
              0 4px 10px rgba(255, 153, 0, 0.4);
        }
        .btn-calm {
            background: linear-gradient(180deg, #FF9DC4 0%, var(--candy-pink-3) 60%, var(--candy-pink-deep) 100%);
            color: #FFFFFF;
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.6),
              inset 0 -4px 0 rgba(167, 24, 92, 0.4),
              0 6px 0 var(--candy-pink-shadow),
              0 10px 22px rgba(214, 51, 132, 0.4);
            text-shadow: 0 2px 0 rgba(167, 24, 92, 0.3);
        }
        .btn-calm:active {
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.6),
              inset 0 -2px 0 rgba(167, 24, 92, 0.4),
              0 0 0 var(--candy-pink-shadow),
              0 4px 10px rgba(214, 51, 132, 0.4);
        }
        .sm-btn {
            font-size: 0.95rem;
            padding: 10px 22px;
            border-radius: 999px;
            width: auto;
            margin-top: 16px;
            background: linear-gradient(180deg, #FFEAF2 0%, #FFC2D9 100%);
            color: var(--candy-pink-shadow);
            box-shadow:
              inset 0 2px 0 rgba(255,255,255,0.9),
              0 4px 0 #FFAEC9,
              0 6px 12px rgba(214, 51, 132, 0.25);
        }
        .sm-btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.9), 0 0 0 #FFAEC9, 0 2px 4px rgba(214, 51, 132, 0.25); }

        /* ---------- Dev Menu ---------- */
        #dev-menu { overflow-y: auto; justify-content: flex-start; padding: 40px 20px; }
        .dev-panel {
            background: rgba(255,255,255,0.9);
            border: 2px solid #FFF;
            outline: 2px solid rgba(214, 51, 132, 0.2);
            padding: 20px;
            border-radius: 20px;
            margin-bottom: 20px;
            width: 100%; max-width: 500px;
            color: var(--candy-pink-shadow);
            box-shadow: 0 4px 14px rgba(214, 51, 132, 0.2);
        }
        .dev-panel h3 { color: var(--candy-pink-deep); font-family: var(--font-display); font-weight: 700; }
        .dev-label { font-size: 0.95rem; color: var(--candy-pink-shadow); margin-bottom: 5px; display: block; font-weight: 700; }
        .dev-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .dev-input { background: #FFF; border: 2px solid #FFC2D9; color: var(--candy-ink); padding: 5px 10px; border-radius: 8px; width: 90px; font-family: var(--font-display); font-weight: 700;}
        .dev-range { width: 100%; accent-color: var(--candy-pink-3); }
        .dev-preset { font-size: 0.8rem; padding: 6px 12px; background: #FFEAF2; border: 2px solid #FFC2D9; color: var(--candy-pink-shadow); border-radius: 999px; cursor: pointer; font-family: var(--font-display); font-weight: 700; }
        .dev-preset:hover { background: #FFC2D9; }
        #sim-readout { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--candy-pink-shadow); white-space: pre-wrap; word-wrap: break-word; line-height: 1.4; margin-top: 15px; background: #FFF7FB; padding: 10px; border-radius: 10px; }
        #sim-csv { background: #FFF7FB; color: var(--candy-pink-shadow); border: 1px solid #FFC2D9; font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 10px; border-radius: 10px; margin-top: 15px; width: 100%;}
        #dev-menu .title { color: #FFF; font-size: 3rem; text-shadow: 0 2px 0 var(--candy-pink-deep), 0 4px 0 var(--candy-pink-shadow), 0 6px 14px rgba(167, 24, 92, 0.4); }

        /* ---------- Tweaks panel (host protocol) ---------- */
        /* === OPTIONS === full-screen dimmed overlay; the card is the actual panel. */
        #tweaks {
            position: fixed; inset: 0;
            display: none;
            align-items: center; justify-content: center;
            background: rgba(91, 23, 52, 0.45);
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            z-index: 250;
        }
        #tweaks.open { display: flex; }
        #tweaks-card {
            width: min(360px, 92vw);
            max-height: 86vh; overflow-y: auto;
            background: rgba(255,255,255,0.98);
            border: 3px solid #FFF;
            outline: 2px solid rgba(214, 51, 132, 0.3);
            border-radius: 24px;
            padding: 20px 22px;
            box-shadow: 0 18px 50px rgba(167, 24, 92, 0.45);
            color: var(--candy-ink);
            font-family: var(--font-display);
        }
        #tweaks h4 {
            font-size: 1.3rem; font-weight: 700;
            color: var(--candy-pink-deep);
            margin-bottom: 10px;
            display: flex; justify-content: space-between; align-items: center;
            letter-spacing: 1.5px;
        }
        #tweaks h4 button {
            background: transparent; border: none; font-size: 1.3rem;
            cursor: pointer; color: var(--candy-pink-shadow); padding: 0 4px;
        }
        /* Section headers inside the Options panel (SOUND / DISPLAY / HELPERS). */
        .tweak-group {
            font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px;
            color: var(--candy-pink-deep); text-transform: uppercase;
            margin: 16px 0 8px; padding-bottom: 4px;
            border-bottom: 2px solid #FFE0EC;
        }
        .tweak-group:first-of-type { margin-top: 2px; }
        .tweak-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
        .tweak-row label { font-size: 0.75rem; color: var(--candy-pink-shadow); letter-spacing: 1px; font-weight: 700; }
        .tweak-segmented { display: flex; gap: 4px; background: #FFEAF2; padding: 3px; border-radius: 999px; flex-wrap: wrap; }
        .tweak-segmented button {
            flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
            padding: 6px 8px; border-radius: 999px; border: none; cursor: pointer;
            background: transparent; color: var(--candy-pink-shadow);
            transition: background 0.15s;
        }
        .tweak-segmented button.on {
            background: #FFF; color: var(--candy-pink-deep);
            box-shadow: 0 2px 6px rgba(214, 51, 132, 0.25);
        }
        .tweak-toggle { display: flex; align-items: center; justify-content: space-between; }
        .tweak-toggle input { width: 18px; height: 18px; accent-color: var(--candy-pink-3); }

        /* === LAYOUT TUNER === design-tool overlay with per-element sliders. */
        #layout-tuner {
            position: fixed; inset: 0;
            display: none;
            align-items: center; justify-content: center;
            background: rgba(91, 23, 52, 0.45);
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            z-index: 260;
        }
        #layout-tuner.open { display: flex; }
        #layout-tuner-card {
            width: min(420px, 94vw);
            max-height: 88vh; overflow-y: auto;
            background: rgba(255,255,255,0.98);
            border: 3px solid #FFF;
            outline: 2px solid rgba(214, 51, 132, 0.3);
            border-radius: 24px;
            padding: 18px 20px;
            box-shadow: 0 18px 50px rgba(167, 24, 92, 0.45);
            color: var(--candy-ink);
            font-family: var(--font-display);
        }
        #layout-tuner h4 {
            font-size: 1.25rem; font-weight: 700;
            color: var(--candy-pink-deep);
            margin-bottom: 6px;
            display: flex; justify-content: space-between; align-items: center;
            letter-spacing: 1.5px;
        }
        #layout-tuner h4 button {
            background: transparent; border: none; font-size: 1.3rem;
            cursor: pointer; color: var(--candy-pink-shadow); padding: 0 4px;
        }
        .lt-hint { font-size: 0.72rem; color: var(--candy-pink-shadow); line-height: 1.3; margin-bottom: 10px; }
        .lt-seg { display: flex; gap: 4px; background: #FFEAF2; padding: 3px; border-radius: 999px; align-items: center; margin-bottom: 12px; }
        .lt-seg button {
            flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
            padding: 6px 8px; border-radius: 999px; border: none; cursor: pointer;
            background: transparent; color: var(--candy-pink-shadow); transition: background 0.15s;
        }
        .lt-seg button.on { background: #FFF; color: var(--candy-pink-deep); box-shadow: 0 2px 6px rgba(214, 51, 132, 0.25); }
        #lt-prof-active { font-size: 0.62rem; font-weight: 800; letter-spacing: 1px; color: var(--candy-pink-deep); text-transform: uppercase; padding: 0 8px; }
        .lt-row { border: 2px solid #FFE0EC; border-radius: 14px; padding: 8px 10px; margin-bottom: 10px; }
        .lt-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .lt-name { font-size: 0.82rem; font-weight: 800; color: var(--candy-pink-deep); letter-spacing: 0.5px; }
        .lt-reset { background: #FFEAF2; border: none; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; color: var(--candy-pink-shadow); padding: 3px 10px; cursor: pointer; }
        .lt-line { display: grid; grid-template-columns: 30px 1fr 56px; align-items: center; gap: 8px; margin: 3px 0; }
        .lt-line label { font-size: 0.72rem; font-weight: 700; color: var(--candy-pink-shadow); }
        .lt-line input[type=range] { width: 100%; accent-color: var(--candy-pink-3); }
        .lt-val { font-size: 0.7rem; font-weight: 700; color: var(--candy-pink-deep); text-align: right; font-variant-numeric: tabular-nums; }
        .lt-actions { display: flex; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
        .lt-actions .mode-btn { flex: 1; min-width: 100px; }
        .lt-out-label { font-size: 0.68rem; font-weight: 700; color: var(--candy-pink-shadow); display: block; margin-bottom: 4px; }
        #layout-tuner-out { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.66rem; border: 2px solid #FFE0EC; border-radius: 10px; padding: 8px; resize: vertical; color: var(--candy-ink); background: #FFF8FB; }

#quiz-overlay.hidden { display: none; }
to { opacity: 1; } }
100% { transform: scale(1) translateY(0); opacity: 1; }
        }
#quiz-badge {
            display: inline-block;
            background: linear-gradient(180deg, #FFE07A 0%, #FFB23A 100%);
            color: #5C3000;
            padding: 6px 18px;
            border-radius: 999px;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 2px;
            border: 2px solid #FFF;
            outline: 2px solid rgba(255, 178, 58, 0.5);
            box-shadow:
              inset 0 1px 0 rgba(255,255,255,0.7),
              0 4px 10px rgba(255, 153, 0, 0.35);
            margin-bottom: 14px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }
#quiz-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px;
        }
.quiz-opt:hover { filter: brightness(1.05); }
.quiz-opt.correct {
            background: linear-gradient(180deg, #B8F0A0 0%, #73D94A 100%);
            color: #1A4D08;
            outline-color: rgba(58, 158, 28, 0.5);
            animation: quiz-correct-bounce 0.5s ease-out;
        }
.quiz-opt.dim { opacity: 0.4; pointer-events: none; }
}
}
#quiz-reward {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--candy-gold-deep);
            letter-spacing: 1px;
        }
#quiz-skip:hover { color: var(--candy-pink-deep); }

#quiz-streak.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === BUILD-A-ZOO === pen pinned at the bottom-center that fills with collected animals */
#zoo-pen {
    display: none;
    position: fixed;
    left: 50%;
    /* JS (positionZooPen) pins this into the gap above the board; this top is the
       pre-layout fallback so it sits up top rather than along the bottom edge. */
    top: 96px;
    transform: translateX(-50%);
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(214, 51, 132, 0.35);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(167, 24, 92, 0.25);
    z-index: 55;
    pointer-events: none;
    max-width: 92vw;
    flex-wrap: wrap;
    justify-content: center;
}
/* === ZOO PEN REMOVED === the on-board/side pen is hidden for now; the ZOO counter card
   next to the goal (relabeled POPS -> ZOO with the animal + tally) is progress enough. The
   slot styles below are kept so re-enabling is a one-line change. */
body.build-a-zoo.playing #zoo-pen { display: none; }
.zoo-slot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    background: rgba(214, 51, 132, 0.08);
    border: 2px dashed rgba(214, 51, 132, 0.35);
}
.zoo-slot.filled {
    background: linear-gradient(180deg, #FFF6BA 0%, #FFE07A 100%);
    border: 2px solid #FFC700;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.zoo-slot.pop { animation: zooPop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes zooPop {
    0% { transform: scale(0.2); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
/* === BUILD-A-ZOO PARADE === the comedic gallop/bob on the inner emoji of a victory parader.
   Drives only the bob (translateY + rotate); the outer node owns the off-screen slide transition
   (spawnParader in smush-render.js), so the two transforms don't fight. */
@keyframes paradeBob {
    0%, 100% { transform: translateY(7%) rotate(-8deg); }
    50%      { transform: translateY(-17%) rotate(8deg); }
}
/* === BUILD-A-ZOO SHOWER === petals/stars sway + spin on the inner emoji while the outer node
   falls top->bottom (spawnFlowerShower in smush-render.js). Transform-only so it composites
   cheaply on low-end Chromebooks; the count is already tier-scaled in JS, so no q-low override. */
@keyframes flutterFall {
    0%, 100% { transform: translateX(-35%) rotate(-30deg); }
    50%      { transform: translateX(35%)  rotate(30deg); }
}
/* === ZOO PEN JUICE === pen-pill reactions (all must keep translateX(-50%) since the pen is
   centered with it). The pen is display:none outside body.build-a-zoo.playing, so candy never sees these. */
#zoo-pen.bump { animation: zooPenBump 0.30s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes zooPenBump {
    0%   { transform: translateX(-50%) scale(1); }
    45%  { transform: translateX(-50%) scale(1.06); }
    100% { transform: translateX(-50%) scale(1); }
}
#zoo-pen.almost { animation: zooPenAlmost 1.1s ease-in-out infinite; }
@keyframes zooPenAlmost {
    0%, 100% { box-shadow: 0 6px 18px rgba(167, 24, 92, 0.25); border-color: rgba(214, 51, 132, 0.35); }
    50%      { box-shadow: 0 6px 22px rgba(255, 199, 0, 0.55), 0 0 16px rgba(255, 199, 0, 0.45); border-color: #FFC700; }
}
#zoo-pen.complete { animation: zooPenComplete 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes zooPenComplete {
    0%   { transform: translateX(-50%) scale(1); }
    30%  { transform: translateX(-50%) scale(1.12); box-shadow: 0 0 26px 6px rgba(255, 224, 122, 0.95); }
    100% { transform: translateX(-50%) scale(1); }
}
/* Keep the near-complete glow as a static highlight on the low quality tier (no continuous animation). */
html.q-low #zoo-pen.almost { animation: none; box-shadow: 0 6px 22px rgba(255, 199, 0, 0.45); border-color: #FFC700; }

/* === ZOO SCORE === round-end variety + clean-play bonus breakdown (Build-a-Zoo only). Kept compact
   (small chips, wraps to two lines) so it never overflows the round-end card on a narrow phone. */
.re-zoo-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.re-zoo-chip {
    font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(180deg, #FFF6BA 0%, #FFE07A 100%);
    color: #6B4A00; border: 2px solid #FFC700;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.10);
}
.re-zoo-perfect {
    font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: #2E8B22;
    animation: reZooPerfect 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes reZooPerfect {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
.re-zoo-note { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; opacity: 0.72; color: var(--candy-pink-shadow); }
@media (prefers-reduced-motion: reduce) { .re-zoo-perfect { animation: none; } }