/* ───────────────────────────────────────────────────────────────
       DESIGN TOKENS
       ─────────────────────────────────────────────────────────────── */
    :root {
      /* Surface */
      --navy:        #0F1B3A;
      --navy-deep:   #0A1228;
      --navy-soft:   #1A2A57;
      --cream:       #FAF6E9;
      --cream-soft:  #F2EBD3;
      --cream-edge:  #E8DFC2;
      --ink:         #1A1E2E;
      --ink-soft:    #4A526B;
      --ink-mute:    #8A8FA3;

      /* Rainbow rows (per-decade) */
      --row-1:  #E04848; --row-2:  #EC7A2C; --row-3:  #E8B324; --row-4:  #4FA85A; --row-5:  #2E8AC9;
      --row-6:  #5C5BCB; --row-7:  #9148BF; --row-8:  #C4438A; --row-9:  #2EA89A; --row-10: #B85C2C;

      /* Tier accents */
      --tier-1: var(--row-1);
      --tier-2: var(--row-2);
      --tier-3: var(--row-3);
      --tier-4: var(--row-4);
      --tier-5: var(--row-5);
      --tier-free: var(--row-6);
      --tier-c: var(--tier-1); /* dynamic, set by JS */

      /* Semantic */
      --correct: #2FA85F;
      --wrong:   #D8443A;
      --info:    #2E8AC9;

      /* CTA */
      --cta-from: #FFC73B;
      --cta-to:   #F08A1E;
      --cta-ink:  #2A1A05;

      /* Type */
      --font-display: "Fraunces", "Fredoka", system-ui, sans-serif;
      --font-ui:      "Fredoka", "Inter", system-ui, sans-serif;

      /* Spacing */
      --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px;

      /* Radii */
      --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

      /* Shadows */
      --sh-card:    0 4px 0 var(--cream-edge), 0 18px 40px -18px rgba(10, 18, 40, 0.55);
      --sh-circle:  0 3px 0 rgba(0, 0, 0, 0.10), 0 6px 14px -4px rgba(10, 18, 40, 0.35);
      --sh-button:  0 4px 0 var(--cta-ink), 0 10px 20px -8px rgba(240, 138, 30, 0.6);
      --sh-overlay: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; }
    body {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--navy);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow: hidden;
    }

    /* Soft dot texture behind everything */
    body::before {
      content: "";
      position: fixed; inset: 0;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
      background-size: 22px 22px;
      pointer-events: none;
      z-index: 0;
    }

    button { font: inherit; cursor: pointer; }

    /* ─── Game card (Spotter — warm late-afternoon sky) ─── */
    .game-container {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      width: 100%;
      background:
        radial-gradient(ellipse 130% 75% at 75% 5%, #FFE3A8 0%, #FFB97A 16%, #7DB4DE 50%, #3D72A8 100%);
      border-radius: var(--r-xl);
      box-shadow: var(--sh-card);
      overflow: hidden;
      padding: 0;
    }

    /* Tier accent stripe (was rainbow border) — softened to a subtle highlight */
    .decorative-border {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--tier-c) 0%, var(--tier-c) 30%, transparent 80%);
      opacity: 0.7;
      transition: background 0.4s ease;
      z-index: 10;
    }

    /* ════════════════════════════════════════════════════════════
       WELCOME SCREEN (full-page overlay)
       ════════════════════════════════════════════════════════════ */
    .welcome-screen {
      position: fixed; inset: 0;
      background: var(--navy);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
      animation: fadeIn 0.5s ease;
      padding: 20px;
    }
    .welcome-screen::before {
      content: "";
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
      background-size: 22px 22px;
      pointer-events: none;
    }
    .welcome-screen.hidden {
      animation: fadeOut 0.5s ease forwards;
      pointer-events: none;
    }

    .welcome-content {
      position: relative;
      background: var(--cream);
      padding: 56px 48px 48px;
      border-radius: var(--r-xl);
      box-shadow: var(--sh-card);
      max-width: 560px;
      width: 100%;
      text-align: center;
      animation: scaleIn 0.6s ease;
      overflow: hidden;
    }
    .welcome-content::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 6px;
      background: linear-gradient(90deg, var(--row-3) 0%, var(--row-3) 45%, transparent 100%);
    }

    .start-here-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--row-3);
      color: var(--ink);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 6px 14px 6px 10px;
      border-radius: var(--r-pill);
      box-shadow: 0 3px 0 rgba(140, 100, 10, 0.35);
      margin-bottom: 20px;
    }
    .start-here-badge svg { width: 14px; height: 14px; }

    .game-family {
      display: inline-flex; gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 16px;
    }
    .game-family b { color: var(--ink); font-weight: 700; }

    .welcome-content h1 {
      font-family: var(--font-display);
      font-size: clamp(40px, 6vw, 56px);
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .welcome-content h1 .accent { font-style: italic; color: var(--row-3); }
    .welcome-content .tagline {
      font-size: 17px;
      color: var(--ink-soft);
      max-width: 420px;
      margin: 0 auto 28px;
      text-wrap: pretty;
    }

    .welcome-mascot {
      position: relative;
      width: 180px; height: 180px;
      margin: 0 auto 28px;
    }
    .welcome-mascot::before {
      content: "";
      position: absolute;
      bottom: 6px; left: 50%;
      width: 160px; height: 14px;
      background: radial-gradient(ellipse at center, rgba(10,18,40,0.18), transparent 70%);
      transform: translateX(-50%);
      border-radius: 50%;
    }
    .welcome-mascot .floaters { position: absolute; inset: -10px -30px; pointer-events: none; }
    .welcome-mascot .f {
      position: absolute;
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      color: var(--cream);
      box-shadow: var(--sh-circle);
      border: 3px solid var(--cream);
    }
    .welcome-mascot .f.a { top: 12%;  left: -4%;  background: var(--row-3); transform: rotate(-8deg); }
    .welcome-mascot .f.b { top: 0%;   right: 0%;  background: var(--row-5); width: 46px; height: 46px; transform: rotate(6deg); }
    .welcome-mascot .f.c { bottom: 16%; left: 0%; background: var(--row-4); width: 32px; height: 32px; font-size: 14px; transform: rotate(10deg); }
    .welcome-mascot .f.d { bottom: 4%; right: -4%; background: var(--row-7); width: 36px; height: 36px; font-size: 16px; transform: rotate(-6deg); }
    .welcome-mascot .sun-mascot { position: relative; width: 100%; height: 100%; z-index: 1; }

    /* CTA */
    .welcome-btn, .cta-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: linear-gradient(180deg, var(--cta-from), var(--cta-to));
      color: var(--cta-ink);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.01em;
      padding: 16px 32px;
      border: none;
      border-radius: var(--r-pill);
      box-shadow: var(--sh-button);
      transition: transform 0.15s ease;
    }
    .welcome-btn:hover, .cta-btn:hover { transform: translateY(-2px); }
    .welcome-btn .arrow, .cta-btn .arrow {
      width: 26px; height: 26px;
      background: var(--cta-ink); color: var(--cta-from);
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
    }

    .siblings {
      display: flex; gap: 8px; justify-content: center;
      margin-top: 24px;
      flex-wrap: wrap;
    }
    .sibling {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--cream-soft);
      border: 1.5px solid var(--cream-edge);
      padding: 7px 12px 7px 9px;
      border-radius: var(--r-pill);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-soft);
      text-decoration: none;
      transition: transform 0.15s ease, background 0.2s ease;
    }
    a.sibling:hover { transform: translateY(-1px); background: var(--cream); }
    .sibling.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
    .sibling .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tier-1); }
    .sibling.active .dot { background: var(--cta-from); }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    /* ════════════════════════════════════════════════════════════
       IN-GAME LAYOUT
       ════════════════════════════════════════════════════════════ */
    .game-inner {
      padding: 16px;
      position: relative;
      z-index: 1;
    }

    /* HUD */
    .game-info {
      display: flex;
      gap: 8px;
      align-items: stretch;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .info-item {
      flex: 1 1 140px;
      min-width: 140px;
      background: var(--cream);
      border: 2px solid #1F2747;
      border-radius: var(--r-md);
      padding: 7px 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      text-align: left;
      box-shadow: 0 3px 0 rgba(31, 39, 71, 0.18);
    }
    .info-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 2px solid #1F2747;
      box-shadow: 0 2px 0 rgba(31, 39, 71, 0.22);
    }
    .info-icon svg { width: 16px; height: 16px; display: block; }
    .info-icon.icon-tier    { background: #FFC93C; color: #1F2747; }
    .info-icon.icon-level   { background: #4FA85A; color: #FFFFFF; }
    .info-icon.icon-range   { background: #2E8AC9; color: #FFFFFF; }
    .info-icon.icon-target  { background: #E04848; color: #FFFFFF; }
    .info-icon.icon-highest { background: #9148BF; color: #FFFFFF; }
    .info-icon.icon-score   { background: #FFE066; color: #1F2747; }
    .info-icon.icon-speed   { background: #EC7A2C; color: #FFFFFF; }
    .info-icon.icon-hearts  { background: #E04848; color: #FFFFFF; }
    .info-icon.icon-streak  { background: #E8B324; color: #1F2747; }
    .hearts-value { color: #E04848; letter-spacing: 3px; }
    .hearts-value .lost { color: rgba(250, 246, 233, 0.22); }
    .new-best-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #FFC93C;
      margin-top: 2px;
    }
    .info-stack {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      line-height: 1.1;
    }
    .info-item.tier-chip {
      background: var(--ink);
      border-color: var(--ink);
      flex: 0 0 auto;
      min-width: 158px;
    }
    .info-item.tier-chip .info-label { color: rgba(250, 246, 233, 0.55); }
    .info-item.tier-chip .info-value { color: var(--cream); }
    .info-item.tier-chip .info-value::before { display: none; }
    .info-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mute);
      white-space: nowrap;
    }
    .info-value {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.05;
      white-space: nowrap;
    }
    .info-value .sub {
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-mute);
      margin-left: 4px;
    }
    .speed-bars {
      display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; vertical-align: middle;
    }
    .speed-bars i {
      display: inline-block;
      width: 5px;
      border-radius: 2px;
      background: var(--cream-edge);
    }
    .speed-bars i.on { background: var(--ink); }
    .speed-bars i:nth-child(1) { height: 8px; }
    .speed-bars i:nth-child(2) { height: 13px; }
    .speed-bars i:nth-child(3) { height: 18px; }

    /* Pattern hint */
    .pattern-display {
      display: none; align-items: center; gap: 16px;
      background: var(--cream);
      border: 2px solid #1F2747;
      border-radius: var(--r-md);
      border-left: 8px solid var(--tier-c);
      padding: 14px 20px;
      margin-bottom: 14px;
      transition: border-color 0.4s ease;
      box-shadow: 0 3px 0 rgba(31, 39, 71, 0.18);
    }
    .pattern-icon {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--tier-c);
      color: var(--ink);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 17px;
      flex-shrink: 0;
      transition: background 0.4s ease;
    }
    .pattern-text {
      display: flex; flex-direction: column; gap: 2px;
      flex: 1;
      min-width: 0;
    }
    .pattern-title {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 600;
    }
    .pattern-hint {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      color: var(--ink);
    }
    .pattern-hint em {
      font-style: italic;
      color: var(--tier-c);
      filter: brightness(0.85);
      transition: color 0.4s ease;
    }
    .pattern-progress {
      display: flex; gap: 6px; flex-wrap: wrap;
      max-width: 50%;
      justify-content: flex-end;
    }
    .pattern-progress span {
      width: 20px; height: 8px;
      border-radius: var(--r-pill);
      background: var(--cream-edge);
    }
    .pattern-progress span.done { background: var(--tier-c); }
    .pattern-progress span.now {
      background: var(--ink);
      box-shadow: 0 0 0 3px rgba(26, 30, 46, 0.12);
    }

    /* Garland / play panel */
    /* Play track — transparent now; whole-card scenery shows through */
    .garland-container {
      background: transparent;
      box-shadow: none;
      padding: 32px 16px;
      margin-bottom: 14px;
      min-height: 400px;
      position: relative;
    }
    .garland-container::before { display: none; }
    .scenery {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
      border-radius: var(--r-xl);
    }
    .scenery .sky-sun,
    .scenery-front .sky-sun {
      position: absolute;
      top: 84px; right: 32px;
      width: 140px; height: 140px;
    }
    .scenery .sun-halo,
    .scenery-front .sun-halo {
      position: absolute;
      top: 60px; right: 18px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(255, 200, 120, 0.42) 0%, rgba(255, 200, 120, 0.14) 40%, transparent 65%);
      pointer-events: none;
      animation: haloPulse 6s ease-in-out infinite;
    }
    .scenery .god-rays,
    .scenery-front .god-rays {
      position: absolute;
      top: 140px; right: 50px;
      width: 360px; height: 320px;
      background:
        conic-gradient(
          from 200deg at 82% 16%,
          transparent 0deg,
          rgba(255, 220, 150, 0.20) 14deg,
          transparent 28deg,
          transparent 36deg,
          rgba(255, 220, 150, 0.16) 50deg,
          transparent 64deg,
          transparent 70deg,
          rgba(255, 220, 150, 0.18) 82deg,
          transparent 96deg,
          transparent 360deg
        );
      filter: blur(4px);
      pointer-events: none;
      mix-blend-mode: screen;
    }
    /* Foreground scenery layer — sits ABOVE balls so they pass behind */
    .scenery-front {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 5;
      border-radius: var(--r-xl);
    }
    @keyframes haloPulse {
      0%, 100% { opacity: 0.9; transform: scale(1); }
      50%      { opacity: 0.6; transform: scale(1.06); }
    }
    .scenery .bird {
      position: absolute;
      width: 24px; height: 14px;
      pointer-events: none;
    }
    .scenery .bird svg { display: block; width: 100%; height: 100%; }
    .scenery .bird.b1 { top: 130px; left: 12%;  animation: birdFly 14s ease-in-out infinite; }
    .scenery .bird.b2 { top: 112px; left: 28%;  animation: birdFly 18s ease-in-out infinite -4s; }
    .scenery .bird.b3 { top: 150px; left: 44%;  animation: birdFly 16s ease-in-out infinite -8s; }
    .scenery .bird.b4 { top: 96px;  left: 22%;  animation: birdFly 20s ease-in-out infinite -12s; }
    @keyframes birdFly {
      0%, 100% { transform: translate(0, 0); }
      50%      { transform: translate(-34px, -12px); }
    }
    .scenery .butterfly {
      position: absolute;
      width: 22px; height: 22px;
      pointer-events: none;
      bottom: 92px;
    }
    .scenery .butterfly.bf1 { left: 18%; animation: bfFlutter 5s ease-in-out infinite; }
    .scenery .butterfly.bf2 { left: 62%; animation: bfFlutter 6s ease-in-out infinite -2s; }
    @keyframes bfFlutter {
      0%   { transform: translate(0, 0) rotate(0); }
      25%  { transform: translate(14px, -10px) rotate(8deg); }
      50%  { transform: translate(8px,  -18px) rotate(-4deg); }
      75%  { transform: translate(-8px, -12px) rotate(6deg); }
      100% { transform: translate(0, 0) rotate(0); }
    }
    .scenery .cloud {
      position: absolute;
      pointer-events: none;
    }
    .scenery .cloud svg { display: block; }
    .scenery .cloud.c1 { top: 130px; left: 12%; width: 110px; opacity: 0.95; }
    .scenery .cloud.c2 { top: 92px;  left: 36%; width: 96px;  opacity: 0.92; }
    .scenery .cloud.c3 { top: 170px; left: 56%; width: 88px;  opacity: 0.88; }
    .scenery .hills {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      width: 100%;
      height: 230px;
      display: block;
    }
    @keyframes sunFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-5px); }
    }
    .scenery .sky-sun { animation: sunFloat 6s ease-in-out infinite; }
    @keyframes cloudDrift {
      from { transform: translateX(0); }
      to   { transform: translateX(40px); }
    }
    .scenery .cloud { animation: cloudDrift 18s ease-in-out infinite alternate; }
    .scenery .cloud.c2 { animation-duration: 22s; animation-delay: -6s; }
    .scenery .cloud.c3 { animation-duration: 26s; animation-delay: -12s; }

    .garland-title { display: none; }
    .garland-title { display: none; }

    .garland-track {
      position: relative;
      height: 260px;
      width: 100%;
      overflow: hidden;
    }
    /* Dashed track line hidden — horizon is implied by hills */
    .garland-string { display: none; }

    /* Horizontal travel lives on a positioning wrapper's transform (GPU-
       composited), set per-frame by a single JS requestAnimationFrame march —
       NOT a CSS animation on `left`. The old model gave each ball its own
       moveGarland animation spawned on a setTimeout cadence, so spacing was
       never enforced: timer drift, background-tab rAF throttling and speed
       changes let balls slide into each other (the founder-reported overlap
       bug). Now the whole "train" of balls is laid out at fixed spacing and
       marched by one rAF loop (see layOutPrefill()/trainTick() below, ported
       from Number Catcher), so overlap is impossible by construction.

       Positioning wrapper — carries the horizontal position (translateX). The
       visible ball nests inside and only handles its own vertical bob, so the
       two motions never fight over the `transform` property. */
    .number-circle-mover {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 2;
      will-change: transform;
    }

    /* Number circles */
    .number-circle {
      --c: var(--row-1);
      position: relative;
      width: 112px; height: 112px;
      background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 50%),
        var(--c);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 46px;
      color: var(--cream);
      cursor: pointer;
      transition: filter 0.2s ease;
      box-shadow:
        0 5px 0 rgba(31, 39, 71, 0.35),
        0 10px 22px -4px rgba(31, 39, 71, 0.5),
        inset 0 -5px 0 rgba(0,0,0,0.18),
        inset 0 3px 0 rgba(255,255,255,0.28);
      border: 3.5px solid #1F2747;
      animation: ballBob 2.4s ease-in-out infinite;
      user-select: none;
      text-shadow: 0 2px 0 rgba(0,0,0,0.22);
    }
    @keyframes ballBob {
      0%, 100% { transform: translateY(-50%) translateY(0); }
      50%      { transform: translateY(-50%) translateY(-10px); }
    }

    /* Hints rule (founder 2026-07-17): ONLY Tier 1 (levels 1-4) marks
       targets with the golden halo — training wheels while the kid learns
       what catching means, one hinted pass per skip pattern on slow gel
       balls. From Level 5 onward, and in Free Play, targets are visually
       IDENTICAL to distractors — no halo, no ring, no desaturation; the
       number on the ball is the only signal. The round-start code toggles
       .hints-on on the track per round. Never add per-ball styling that
       differs by target-ness outside the .hints-on scope. */
    .garland-track.hints-on .number-circle.target::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,199,59,0.45) 0%, rgba(255,199,59,0.12) 55%, transparent 75%);
      z-index: -1;
      pointer-events: none;
    }
    .garland-track.hints-on .number-circle.target::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid rgba(255, 199, 59, 0.85);
      box-shadow: 0 0 12px rgba(255, 199, 59, 0.35);
      pointer-events: none;
    }

    /* ── Ball-skin progression ──────────────────────────────────────────
       A reward for climbing the tier ladder: tier 1 (levels 1-4) owns the
       plain CSS gel ball above; tiers 2-5 own a richer glossy/jelly/
       crystal image skin (assigned per-ball in spawnNumber(), see
       applyLook()), each an upgrade over the last. Later levels also
       sprinkle in earlier levels' looks, and Free Play draws from all of
       them. The image already bakes in its own gloss + rim, so the
       inset highlight shadows are dropped here (they'd fight the art) and
       a plain drop shadow + colour glow takes their place. Numerals get a
       dark outline instead of a flat shadow so they stay readable against
       both dark and very bright/gold skins. */
    .number-circle.skin {
      background-image: var(--skin-url);
      background-size: 100% 100%;
      background-position: center;
      background-color: transparent;
      box-shadow:
        0 6px 14px -3px rgba(15, 23, 42, 0.55),
        0 12px 26px -8px var(--skin-glow, rgba(15, 23, 42, 0.4));
      color: #FFFFFF;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6);
      -webkit-text-stroke: 2px rgba(20, 12, 45, 0.55);
      paint-order: stroke fill;
    }
    .number-circle.skin:hover {
      box-shadow:
        0 8px 18px -3px rgba(15, 23, 42, 0.6),
        0 16px 32px -8px var(--skin-glow, rgba(15, 23, 42, 0.45));
    }

    .number-circle:hover {
      filter: brightness(1.12) saturate(1.15);
      box-shadow:
        0 6px 0 rgba(31, 39, 71, 0.45),
        0 14px 28px -4px rgba(31, 39, 71, 0.6),
        inset 0 -5px 0 rgba(0,0,0,0.18),
        inset 0 3px 0 rgba(255,255,255,0.32);
    }
    /* Tree sway — wind feel */
    .scenery .hills .tree-sway {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: treeSway 5.5s ease-in-out infinite;
    }
    .scenery .hills .tree-sway-mid {
      animation-duration: 6.5s;
      animation-delay: -2s;
    }
    @keyframes treeSway {
      0%, 100% { transform: rotate(0deg); }
      25%      { transform: rotate(-2deg); }
      75%      { transform: rotate(2deg); }
    }
    /* Sun blink */
    .scenery .sky-sun ellipse[fill="#FFFFFF"],
    .scenery .sky-sun circle[fill="#0A1226"] {
      transform-box: fill-box;
      transform-origin: center;
      animation: sunBlink 5.5s ease-in-out infinite;
    }
    @keyframes sunBlink {
      0%, 92%, 100% { transform: scaleY(1); }
      95%, 97%      { transform: scaleY(0.05); }
    }
    /* Score chip bump */
    .info-icon.icon-score.bump { animation: chipBump 0.5s ease-out; }
    @keyframes chipBump {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.32) rotate(-8deg); }
      70%  { transform: scale(0.94) rotate(4deg); }
      100% { transform: scale(1) rotate(0); }
    }
    /* Confetti pop particles */
    .pop-particle {
      position: fixed;
      width: 8px; height: 8px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      border: 1.5px solid #1F2747;
      animation: popOut 0.7s ease-out forwards;
    }
    @keyframes popOut {
      0%   { transform: translate(0, 0) scale(0.6); opacity: 1; }
      30%  { transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.1); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
    }

    .number-circle.correct {
      background: var(--correct) !important;
      border-color: var(--cream);
      animation: correctPop 0.5s ease forwards;
    }
    .number-circle.correct::before, .number-circle.correct::after { display: none; }
    .number-circle.wrong {
      background: var(--wrong) !important;
      animation: shake 0.4s ease;
    }
    .number-circle.missed {
      background: #555 !important;
      opacity: 0.5;
      filter: saturate(0);
    }

    @keyframes correctPop {
      0%   { transform: translateY(-50%) scale(1); }
      50%  { transform: translateY(-50%) scale(1.35); }
      100% { transform: translateY(-50%) scale(0); opacity: 0; }
    }
    @keyframes shake {
      0%, 100% { transform: translateY(-50%) translateX(0); }
      25% { transform: translateY(-50%) translateX(-8px); }
      75% { transform: translateY(-50%) translateX(8px); }
    }

    /* Mascot peeking from bottom-right */
    .mascot-peek {
      position: absolute;
      right: -10px; bottom: -22px;
      width: 120px; height: 120px;
      transform: rotate(-6deg);
      pointer-events: none;
      z-index: 3;
    }
    .mascot-peek .sun-mascot { width: 100%; height: 100%; }

    /* Controls */
    .controls {
      display: flex; gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      padding-top: 4px;
    }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 24px;
      font-size: 15px;
      font-weight: 600;
      border: 2px solid var(--cream-edge);
      background: var(--cream);
      color: var(--ink);
      border-radius: var(--r-pill);
      box-shadow: 0 3px 0 var(--cream-edge);
      transition: transform 0.15s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      background: linear-gradient(180deg, var(--cta-from), var(--cta-to));
      color: var(--cta-ink);
      border: none;
      box-shadow: var(--sh-button);
    }
    .btn-primary .arrow {
      width: 22px; height: 22px;
      background: var(--cta-ink); color: var(--cta-from);
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* ════════════════════════════════════════════════════════════
       OVERLAYS (game over / feedback / tier banner / mastery)
       ════════════════════════════════════════════════════════════ */
    .game-over-screen {
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0);
      background: var(--cream);
      padding: 22px 24px 22px;
      border-radius: var(--r-lg);
      box-shadow: var(--sh-overlay);
      text-align: center;
      z-index: 9700;
      transition: transform 0.3s ease;
      max-width: 360px;
      width: calc(100% - 32px);
      overflow: hidden;
    }
    .game-over-screen::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 95px;
      background: linear-gradient(180deg, #C3E2FF 0%, #9ACBF6 60%, transparent 100%);
      z-index: 0;
    }
    .game-over-screen > * { position: relative; z-index: 1; }
    .game-over-screen.show { transform: translate(-50%, -50%) scale(1); }
    .go-illust {
      width: 92px; height: 92px;
      margin: 0 auto 4px;
      display: block;
    }
    .game-over-screen h2 {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .game-over-screen p {
      font-size: 13px;
      color: var(--ink-soft);
      margin-bottom: 14px;
      text-wrap: pretty;
    }
    .go-stats {
      display: flex;
      gap: 8px;
      margin: 0 auto 12px;
      justify-content: center;
    }
    .go-stat {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      background: var(--cream);
      border: 2px solid #1F2747;
      border-radius: var(--r-md);
      box-shadow: 0 3px 0 rgba(31, 39, 71, 0.18);
      text-align: left;
    }
    .go-stat .info-icon { width: 26px; height: 26px; }
    .go-stat .info-icon svg { width: 14px; height: 14px; }
    .go-stat-l {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .go-stat-v {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
    .go-tip {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-start;
      background: rgba(255, 199, 59, 0.14);
      border: 1.5px solid rgba(231, 152, 24, 0.45);
      color: var(--ink-soft);
      padding: 8px 12px;
      border-radius: var(--r-md);
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 16px;
      text-align: left;
      text-wrap: pretty;
      line-height: 1.35;
    }
    .go-tip svg {
      flex-shrink: 0;
      width: 16px; height: 16px;
      color: #E69518;
    }
    .game-over-screen .icon-mark { display: none; }
    .game-over-screen .btn {
      padding: 10px 22px;
      font-size: 14px;
    }
    .game-over-screen .btn .arrow {
      width: 20px; height: 20px;
    }

    /* Feedback toast (small, top-center) */
    .feedback {
      position: fixed; top: 32px; left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: var(--cream);
      padding: 12px 22px;
      border-radius: var(--r-pill);
      box-shadow: var(--sh-overlay);
      z-index: 9500;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      display: inline-flex; align-items: center; gap: 10px;
      max-width: 90vw;
      border: 1px solid var(--cream-edge);
    }
    .feedback.show {
      opacity: 1; transform: translateX(-50%) translateY(0);
    }
    .feedback .feedback-mark {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      color: var(--cream);
      flex-shrink: 0;
    }
    .feedback.ok .feedback-mark { background: var(--correct); }
    .feedback.bad .feedback-mark { background: var(--wrong); }
    .feedback .message {
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
    }

    /* Celebration confetti container */
    .celebration {
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 9400;
      overflow: hidden;
    }
    .confetti {
      position: absolute;
      width: 10px; height: 10px;
      border-radius: 2px;
      animation: fall linear forwards;
    }
    @keyframes fall {
      0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
      100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
    }

    /* Tier banner */
    .tier-banner {
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0.92);
      background: var(--cream);
      color: var(--ink);
      padding: 36px 56px;
      border-radius: var(--r-xl);
      min-width: 420px;
      max-width: 90vw;
      text-align: center;
      box-shadow: var(--sh-overlay);
      border-top: 8px solid var(--tier-c);
      opacity: 0;
      pointer-events: none;
      z-index: 9600;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .tier-banner.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .tier-banner .tier-tag {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tier-c);
      filter: brightness(0.7);
      margin-bottom: 10px;
    }
    .tier-banner .tier-tag .pill {
      background: var(--tier-c);
      color: var(--ink);
      padding: 3px 10px;
      border-radius: var(--r-pill);
      filter: brightness(1.42);
    }
    .tier-banner h2 {
      font-family: var(--font-display);
      font-size: 40px;
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .tier-banner h2 em { font-style: italic; color: var(--tier-c); filter: brightness(0.85); }
    .tier-banner .lvl { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
    .tier-banner .lvl b { color: var(--ink); font-weight: 600; }
    .tier-banner .skip-row {
      display: inline-flex; gap: 8px;
      padding: 8px;
      background: var(--cream-soft);
      border-radius: var(--r-pill);
    }
    .tier-banner .skip-row .skip {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--cream);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 17px;
      color: var(--ink-mute);
      border: 2px solid var(--cream-edge);
    }
    .tier-banner .skip-row .skip.now {
      background: var(--ink); color: var(--cream); border-color: var(--ink);
      transform: scale(1.1);
      box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    }

    /* Mastery / Free Play unlock */
    .level-complete-screen {
      position: fixed; inset: 0;
      background: rgba(10, 18, 40, 0.78);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      z-index: 9800;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      padding: 20px;
    }
    .level-complete-screen.show { opacity: 1; pointer-events: auto; }
    .level-complete-content {
      position: relative;
      background: var(--cream);
      padding: 48px 40px;
      border-radius: var(--r-xl);
      max-width: 560px;
      width: 100%;
      box-shadow: var(--sh-overlay);
      text-align: center;
      overflow: hidden;
    }
    .level-complete-content::before {
      content: "";
      position: absolute; top: 0; left: 0; right: 0; height: 6px;
      background: var(--tier-free);
    }
    .level-complete-content .mastery-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tier-free);
      font-weight: 700;
      padding: 6px 14px;
      background: rgba(92, 91, 203, 0.10);
      border-radius: var(--r-pill);
      margin-bottom: 14px;
    }
    .level-complete-content .mascot-cele {
      width: 130px; height: 130px;
      margin: 0 auto 14px;
    }
    .level-complete-content h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 44px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .level-complete-content h2 em { font-style: italic; color: var(--tier-free); }
    .level-complete-content p {
      font-size: 16px;
      color: var(--ink-soft);
      margin-bottom: 24px;
    }
    .level-complete-content p b { color: var(--ink); font-weight: 600; }
    .level-complete-content .actions {
      display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    }

    /* ════════════════════════════════════════════════════════════
       GEAR PANEL (re-skinned)
       ════════════════════════════════════════════════════════════ */
    .gear-panel { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
    .gear-button {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--cream);
      border: none;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 20px -6px rgba(0,0,0,0.5);
      transition: transform 0.3s ease;
    }
    .gear-button:hover { transform: rotate(60deg); }
    .gear-button svg { width: 24px; height: 24px; }

    .gear-content {
      position: absolute;
      bottom: 70px; right: 0;
      width: 340px;
      max-width: calc(100vw - 40px);
      max-height: 70vh;
      background: var(--cream);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-overlay);
      overflow: hidden;
      transform: translateY(20px) scale(0.95);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s ease, opacity 0.25s ease;
      border: 1px solid var(--cream-edge);
      display: flex; flex-direction: column;
    }
    .gear-content.active {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    .gear-header {
      background: var(--ink);
      color: var(--cream);
      padding: 16px 20px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .gear-header h3 {
      font-family: var(--font-display);
      font-size: 18px; font-weight: 600;
    }
    .gear-close {
      background: rgba(255, 255, 255, 0.12);
      border: none;
      color: var(--cream);
      width: 32px; height: 32px;
      border-radius: 50%;
      font-size: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      line-height: 1;
    }
    .gear-close:hover { background: rgba(255, 255, 255, 0.22); }

    .gear-tabs {
      display: flex;
      background: var(--cream-soft);
      border-bottom: 1px solid var(--cream-edge);
    }
    .gear-tab {
      flex: 1;
      padding: 10px 6px;
      border: none;
      background: transparent;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-mute);
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
    }
    .gear-tab.active {
      background: var(--cream);
      color: var(--ink);
      border-bottom-color: var(--tier-c);
    }
    .gear-tab:hover { color: var(--ink); }

    .gear-pages {
      overflow-y: auto;
      padding: 16px;
      flex: 1;
    }
    .gear-page { display: none; }
    .gear-page.active { display: block; }
    .gear-page h3 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--ink);
    }
    .gear-page ol, .gear-page p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 10px; }
    .gear-page ol { padding-left: 18px; }
    .gear-page li { margin-bottom: 6px; }
    .gear-page p b, .gear-page p strong { color: var(--ink); font-weight: 600; }

    .stat-box {
      background: var(--cream-soft);
      border: 1px solid var(--cream-edge);
      padding: 12px 14px;
      border-radius: var(--r-md);
      margin-bottom: 8px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .stat-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
    .stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); }

    .setting-item {
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--cream-edge);
    }
    .setting-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .setting-item label {
      display: flex; align-items: center; gap: 10px;
      font-size: 14px;
      color: var(--ink);
      cursor: pointer;
    }
    .setting-item strong { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 600; font-size: 14px; }
    .setting-item input[type="checkbox"] {
      width: 18px; height: 18px;
      accent-color: var(--ink);
    }

    .skip-btn {
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-display);
      border: 2px solid var(--cream-edge);
      background: var(--cream);
      color: var(--ink-soft);
      border-radius: var(--r-pill);
      transition: all 0.2s ease;
      min-width: 56px;
    }
    .skip-btn:hover { transform: translateY(-1px); }
    .skip-btn.active {
      background: var(--ink); color: var(--cream); border-color: var(--ink);
    }
    /* Skip-count picker hidden during levelled play; revealed in Free Play */
    .skip-btn { display: none; }
    body.free-play-mode .skip-btn { display: inline-flex; }
    body.free-play-mode .skip-picker-row { display: flex !important; }
    .skip-picker-row { display: none; }

    /* ════════════════════════════════════════════════════════════
       RESPONSIVE
       ════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      body { padding: 12px; }
      .game-inner { padding: 12px; }
      .game-info { gap: 6px; }
      .info-item { flex: 1 1 calc(50% - 4px); padding: 8px 12px; }
      .info-item.tier-chip { flex: 1 1 100%; }
      .info-value { font-size: 19px; }
      .pattern-display { padding: 12px 14px; gap: 12px; }
      .pattern-hint { font-size: 19px; }
      .pattern-progress { max-width: 100%; margin-top: 4px; }
      .garland-container { padding: 28px 8px; min-height: 220px; }
      .number-circle { width: 92px; height: 92px; font-size: 36px; border-width: 3.5px; }
      .mascot-peek { width: 90px; height: 90px; right: -8px; bottom: -14px; }
      .welcome-content { padding: 40px 24px 32px; }
      .welcome-content h1 { font-size: 36px; }
      .welcome-mascot { width: 150px; height: 150px; }
      .game-over-screen { padding: 32px 24px; }
      .game-over-screen h2 { font-size: 28px; }
      .tier-banner { min-width: 0; width: calc(100% - 32px); padding: 28px 24px; }
      .tier-banner h2 { font-size: 30px; }
      .level-complete-content { padding: 36px 24px; }
      .gear-button { width: 50px; height: 50px; }
      .gear-content { width: calc(100vw - 40px); }
    }

    @media (max-width: 420px) {
      .number-circle { width: 80px; height: 80px; font-size: 30px; }
      .info-value { font-size: 17px; }
      .info-label { font-size: 10px; }
      .pattern-icon { width: 36px; height: 36px; font-size: 15px; }
    }
  
    /* ──────────────────────────────────────────────────────────
       Universal MathGuru Sun mascot CSS (per MASCOT-SYSTEM.md)
       ────────────────────────────────────────────────────────── */
    .hero-sun {
      overflow: visible;
      filter: drop-shadow(0 6px 10px rgba(245, 180, 0, 0.32));
      animation: sun-breathe 5.5s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes sun-breathe {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.035); }
    }
    .hero-sun .sun-rays {
      transform-origin: 100px 100px;
      animation: sun-rays-spin 28s linear infinite;
    }
    @keyframes sun-rays-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .hero-sun .sun-eyes {
      transform-origin: 100px 100px;
      animation: sun-blink 4.5s ease-in-out infinite;
    }
    @keyframes sun-blink {
      0%, 92%, 100% { transform: scaleY(1); }
      94%, 96%      { transform: scaleY(0.08); }
    }
    .hero-sun .sun-mouth {
      transform-origin: 100px 134px;
      animation: sun-mouth-pulse 5.5s ease-in-out infinite;
    }
    @keyframes sun-mouth-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.04); }
    }
    .hero-sun .sun-eyebrows {
      animation: sun-brow-lift 5.5s ease-in-out infinite;
      transform-origin: 100px 80px;
    }
    @keyframes sun-brow-lift {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-1.8px); }
    }
    .hero-sun:not(.expr-cheer):not(.expr-sad) .sun-iris-left,
    .hero-sun:not(.expr-cheer):not(.expr-sad) .sun-iris-right {
      animation: sun-ambient-gaze 9s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes sun-ambient-gaze {
      0%, 100% { transform: translate(0, 0); }
      22%      { transform: translate(-1.5px, -0.4px); }
      44%      { transform: translate(0.6px, 0.4px); }
      66%      { transform: translate(1.5px, -0.4px); }
      88%      { transform: translate(-0.5px, 0.4px); }
    }

    /* Hidden state overlays — shown only by the matching expr-* class below */
    .hero-sun .sun-eyes-happy,
    .hero-sun .sun-mouth-o,
    .hero-sun .sun-mouth-sad,
    .hero-sun .sun-eyebrows-sad { display: none; }

    /* CHEER — single correct catch */
    .hero-sun.expr-cheer {
      animation: sun-cheer-bounce 0.6s ease-out, sun-breathe 5.5s ease-in-out infinite 0.6s;
    }
    @keyframes sun-cheer-bounce {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.15) translateY(-6px); }
      70%  { transform: scale(0.95) translateY(2px); }
      100% { transform: scale(1.035) translateY(0); }
    }
    .hero-sun.expr-cheer .sun-eyes {
      animation: none;
      transform-origin: 100px 100px;
      transform: scaleY(0);
    }
    .hero-sun.expr-cheer .sun-eyes-happy { display: block; }
    .hero-sun.expr-cheer .sun-mouth {
      animation: none;
      transform-origin: 100px 134px;
      transform: scale(1.18);
    }

    /* SURPRISED — held while a catch is "almost there" */
    .hero-sun.expr-surprised .sun-eyes {
      animation: sun-surprised-blink 4.5s ease-in-out infinite;
      transform-origin: 100px 100px;
    }
    @keyframes sun-surprised-blink {
      0%, 92%, 100% { transform: scale(1.25); }
      94%, 96%, 98% { transform: scaleX(1.25) scaleY(0.06); }
    }
    .hero-sun.expr-surprised .sun-mouth { animation: none; display: none; }
    .hero-sun.expr-surprised .sun-mouth-o { display: block; }
    .hero-sun.expr-surprised .sun-eyebrows {
      animation: none;
      transform: translateY(-4px);
    }

    /* SAD — wrong tap */
    .hero-sun.expr-sad .sun-mouth { animation: none; display: none; }
    .hero-sun.expr-sad .sun-mouth-sad { display: block; }
    .hero-sun.expr-sad .sun-eyebrows { display: none; }
    .hero-sun.expr-sad .sun-eyebrows-sad { display: block; }
    .hero-sun.expr-sad .sun-iris-left,
    .hero-sun.expr-sad .sun-iris-right {
      animation: none;
      transform: translateY(3px);
    }

    /* THINK — idle too long */
    .hero-sun.expr-think .sun-iris-left,
    .hero-sun.expr-think .sun-iris-right {
      animation: none;
      transform: translateY(-3px);
    }
    .hero-sun.expr-think .sun-eyebrows {
      animation: none;
      transform: translateY(-3px);
    }

    /* Excited (winStreak >= 2 / Free Play unlocked screen): a touch bigger smile + extra bounce */
    .hero-sun.expr-excited {
      animation: sun-excited-bounce 1.2s ease-in-out infinite;
    }
    @keyframes sun-excited-bounce {
      0%, 100% { transform: translateY(0) scale(1.02); }
      50%      { transform: translateY(-6px) scale(1.06); }
    }
    .hero-sun.expr-excited .sun-mouth {
      animation: sun-mouth-excited 0.9s ease-in-out infinite;
    }
    @keyframes sun-mouth-excited {
      0%, 100% { transform: scale(1.08); }
      50%      { transform: scale(1.18); }
    }

    /* WINK — left eye blinks alone, personality flourish */
    .hero-sun.expr-wink .sun-eyes { animation: none; }
    .hero-sun.expr-wink .sun-eye-left {
      animation: sun-wink-left 6s ease-in-out infinite;
      transform-origin: 82px 100px;
    }
    @keyframes sun-wink-left {
      0%, 94%, 100% { transform: scaleY(1); }
      96%, 98%      { transform: scaleY(0.08); }
    }

    .sibling.disabled { cursor: not-allowed; opacity: 0.55; }
    .sibling.disabled:hover { transform: none; background: inherit; }
  
    /* ──────────────────────────────────────────────────────────
       About this game modal (4-tab SEO pedagogy panel)
       ────────────────────────────────────────────────────────── */
    .welcome-about-link {
      display: inline-flex; align-items: center; gap: 4px;
      background: transparent; border: 0;
      color: var(--ink-soft); font-family: 'Fredoka', sans-serif;
      font-size: 13px; font-weight: 600;
      cursor: pointer; margin: 6px auto 14px;
      padding: 4px 8px; border-radius: 8px;
      transition: color 0.15s, background 0.15s;
    }
    .welcome-about-link:hover { color: var(--ink); background: rgba(31, 39, 71, 0.06); }
    .welcome-about-link span { font-size: 15px; }

    .about-overlay {
      position: fixed; inset: 0;
      background: rgba(15, 23, 41, 0.78);
      display: none; align-items: center; justify-content: center;
      z-index: 10000; padding: 20px;  /* above .welcome-screen (9999) — the About button lives ON the welcome screen */
      font-family: 'Fredoka', sans-serif;
    }
    .about-overlay.active { display: flex; }
    .about-modal {
      background: var(--cream, #FFF6E6);
      border: 3px solid var(--ink, #1F2747);
      border-radius: 20px;
      max-width: 700px; width: 100%;
      max-height: 90vh; overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
      position: relative;
    }
    .about-close {
      position: absolute; top: 20px; right: 24px;
      background: var(--ink, #1F2747); color: #FFFFFF;
      border: 2px solid #FFFFFF; border-radius: 999px;
      width: 32px; height: 32px; font-size: 14px;
      cursor: pointer; z-index: 2;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .about-tabs {
      display: flex; background: var(--ink, #1F2747);
      padding: 12px 16px 0; gap: 4px; flex-wrap: wrap;
    }
    .about-tab {
      background: transparent; color: rgba(255, 255, 255, 0.65);
      border: 0; padding: 8px 14px;
      font-size: 13px; font-weight: 700;
      font-family: 'Fredoka', sans-serif; cursor: pointer;
      border-radius: 10px 10px 0 0;
      letter-spacing: 0.02em;
      transition: background 0.15s, color 0.15s;
    }
    .about-tab:hover { color: #FFFFFF; }
    .about-tab.active {
      background: var(--cream, #FFF6E6);
      color: var(--ink, #1F2747);
    }
    .about-body {
      padding: 24px 32px 28px;
      overflow-y: auto;
      color: var(--ink, #1F2747);
      line-height: 1.55;
    }
    .about-pane { display: none; }
    .about-pane.active { display: block; }
    .about-pane h2 {
      font-family: 'Fraunces', serif;
      font-size: 24px; margin: 0 0 14px;
      color: var(--ink, #1F2747); font-weight: 700;
    }
    .about-pane h3 {
      font-size: 16px; margin: 18px 0 6px;
      color: var(--ink, #1F2747); font-weight: 700;
    }
    .about-pane p, .about-pane li {
      font-size: 14.5px; margin-bottom: 10px;
    }
    .about-pane ul { padding-left: 22px; margin: 8px 0 12px; }
    .about-pane strong { color: var(--ink, #1F2747); }
    .about-pane a { color: #db2777; font-weight: 600; }
    @media (max-width: 540px) {
      .about-tabs { padding: 8px 10px 0; }
      .about-tab { padding: 7px 10px; font-size: 12px; }
      .about-body { padding: 20px 22px 24px; }
      .about-pane h2 { font-size: 20px; }
      .about-pane p, .about-pane li { font-size: 14px; }
    }