:root {
    --pink: #ff6bb5; --ink: #2b1140;
    /* Garden palette — game.js sets html[data-garden] per level so
       each round's grass looks a little different. */
    --g-top: #7ec865; --g-mid: #6dbf52; --g-bot: #5fa844; --g-dot: #ffd166;
  }
  html[data-garden="summer"] { --g-top: #8fce53; --g-mid: #7cc243; --g-bot: #6cae39; --g-dot: #fff2a8; }
  html[data-garden="autumn"] { --g-top: #b9bb54; --g-mid: #a3a746; --g-bot: #8f943c; --g-dot: #ffd9a0; }
  html[data-garden="dusk"]   { --g-top: #5aa984; --g-mid: #4c9573; --g-bot: #3f8163; --g-dot: #cfe8ff; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100dvh;
    overflow: hidden;
    background:
      radial-gradient(circle at 14% 38%, var(--g-dot) 2.5px, transparent 3.5px),
      radial-gradient(circle at 78% 60%, #fff   2.5px, transparent 3.5px),
      linear-gradient(180deg, var(--g-top) 0%, var(--g-mid) 50%, var(--g-bot) 100%);
    background-size: 80px 80px, 100px 100px, auto;
    background-position: 50px 30px, 25px 18px, 0 0;
    font-family: "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
    color: var(--ink);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #stage {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    cursor: pointer;
  }

  /* ===== Veggies + bushes ===== */
  .veggie {
    position: absolute;
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
    transform: translate(-50%, -50%);
    animation: veggieBob 1.7s ease-in-out infinite;
    z-index: 4;
    width: 44px; height: 44px;
    display: grid; place-items: center;
  }
  .veggie img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .veggie.gone { animation: veggiePop 360ms ease-out forwards; }
  /* The one GOLDEN CARROT per level — glows gold and twinkles.
     Eating it is worth 5 points and heals a lost heart. */
  .veggie.golden {
    z-index: 5;
    animation: veggieBob 1.7s ease-in-out infinite, goldenTwinkle 0.9s ease-in-out infinite alternate;
  }
  @keyframes goldenTwinkle {
    from { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15)
                   drop-shadow(0 0 6px #ffd166)  drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
    to   { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.5)
                   drop-shadow(0 0 16px #ffe9a0) drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
  }
  /* Golden must still pop away when eaten (its animation shorthand
     above would otherwise out-rank the base .gone rule). */
  .veggie.golden.gone { animation: veggiePop 360ms ease-out forwards; }
  @keyframes veggieBob {
    0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); }
    50%      { transform: translate(-50%, -55%) rotate(6deg);  }
  }
  @keyframes veggiePop {
    0%   { transform: translate(-50%, -50%)  scale(1);   opacity: 1; }
    100% { transform: translate(-50%, -120%) scale(2);   opacity: 0; }
  }
  .bush {
    position: absolute;
    width: 60px; height: 60px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25));
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  /* ===== Critters — spawned by tap. Move toward target each frame. ===== */
  .critter {
    position: absolute;
    width: 80px; height: 80px;
    object-fit: contain;
    object-position: bottom center;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
    transform: translate(-50%, -50%);
    z-index: 5;
    /* GPU-composite hint — keeps movement smooth when 20+ critters
       are running at once after a horde tap. */
    will-change: transform, left, top;
    backface-visibility: hidden;
  }
  .critter.face-left { transform: translate(-50%, -50%) scaleX(-1); }

  /* Farmhouse — sitting in the top-left corner. Smaller + tucked
     up high so it stays out of the row layout. */
  #farmhouse {
    position: absolute;
    width: 110px; height: 110px;
    left: 8px; top: 50px;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 5px 3px rgba(0,0,0,0.3));
    z-index: 6;
  }

  /* Dirt plot — the brown rectangle behind the veggie rows. Pure CSS,
     no Gemini. Sized + positioned in JS to match the row layout. */
  #dirt-plot {
    position: absolute;
    background:
      repeating-linear-gradient(
        90deg,
        #8b6f47 0 6px, #7a5e3c 6px 12px),
      linear-gradient(180deg, #8b6f47 0%, #6f5535 100%);
    border-radius: 12px;
    box-shadow: inset 0 0 0 4px #5a4530, 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1;
  }

  /* The farmer — appears when too many critters are in the garden,
     chases them, and leaves once the field is calm again. */
  .farmer {
    position: absolute;
    width: 110px; height: 110px;
    object-fit: contain;
    object-position: bottom center;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 5px 4px rgba(0,0,0,0.35));
    transform: translate(-50%, -50%);
    z-index: 7;
    display: none;
  }
  .farmer.show { display: block; }
  .farmer.face-left { transform: translate(-50%, -50%) scaleX(-1); }

  /* Comic-style speech bubble that floats above the farmer. */
  #farmer-bubble {
    position: absolute;
    transform: translate(-50%, -100%);
    background: #fff;
    border: 4px solid #2b1140;
    border-radius: 16px;
    padding: 8px 14px;
    font-weight: 800;
    font-size: 18px;
    color: #2b1140;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;          /* above critters / hero / hedge / panic-burst */
    display: none;
    box-shadow: 0 4px 0 rgba(0,0,0,0.18);
  }
  #farmer-bubble.show { display: block; animation: bubblePop 280ms ease-out both; }
  @keyframes bubblePop {
    0%   { opacity: 0; transform: translate(-50%, -100%) scale(0.6); }
    80%  { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -100%) scale(1);   }
  }
  #farmer-bubble::after {
    content: "";
    position: absolute;
    bottom: -14px; left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #2b1140;
  }

  /* Tap-feedback ripple — quick burst at the tapped spot. */
  .tap-fx {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 4px solid #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: tapPing 480ms ease-out forwards;
    z-index: 4;
  }
  @keyframes tapPing {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.0); }
  }

  /* +1 / +2 score float-up */
  .score-pop {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    text-shadow: 0 2px 0 #c94d79, 0 0 6px rgba(0,0,0,0.4);
    z-index: 6;
    animation: scoreFly 700ms ease-out forwards;
  }
  @keyframes scoreFly {
    0%   { opacity: 1; transform: translate(-50%, -50%)  scale(0.8); }
    100% { opacity: 0; transform: translate(-50%, -200%) scale(1.4); }
  }

  /* ===== HUD + buttons ===== */
  #home-btn, #music-btn {
    position: absolute;
    top: 12px;
    z-index: 30;
    font-family: inherit;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 3px solid var(--pink);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 3px 0 var(--pink);
    cursor: pointer;
  }
  #home-btn  { left: 12px;  }
  #music-btn { right: 12px; }
  #hud {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    background: rgba(255,255,255,0.92);
    border: 3px solid #ff8a3c;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 3px 0 #c95a17;
  }
  #hud b { color: #d6336c; }
  /* Second-row HUD: active critter count + lost count + horde-uses. */
  #hud2 {
    position: absolute;
    top: 56px; left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    gap: 8px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.92);
    border: 3px solid #66d2ff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 3px 0 #2a86b3;
  }
  #hud2 b { color: #2a86b3; }
  #hud2 .hud2-cell { padding: 0 4px; }
  #hud2 .hud2-cell.full b { color: #d6336c; }
  #hud2 .hud2-cell.empty { opacity: 0.45; }

  /* ===== Prank buttons at the bottom — one per trick ===== */
  #pranks {
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    z-index: 26;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 10px;
    pointer-events: none;
  }
  /* Wave indicator pill, parked just above the prank-button row so
     the "next batch coming" count reads with the special attacks. */
  #wave-indicator {
    position: absolute;
    left: 50%; bottom: 84px;
    transform: translateX(-50%);
    z-index: 26;
    background: rgba(255, 255, 255, 0.92);
    border: 3px solid #66d2ff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #2b1140;
    box-shadow: 0 3px 0 #66d2ff;
    pointer-events: none;
    white-space: nowrap;
  }
  #wave-indicator b { color: #1976d2; }
  .prank-btn {
    pointer-events: auto;
    width: 64px; height: 64px;
    border-radius: 18px;
    border: 4px solid #fff;
    background: linear-gradient(135deg, #66a6ff, #4d8fd8);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    box-shadow: 0 4px 0 #2d6db8;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    font-family: inherit;
  }
  .prank-btn:active:not(:disabled) { translate: 0 3px; box-shadow: 0 1px 0 #2d6db8; }
  .prank-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: linear-gradient(135deg, #999, #666);
    box-shadow: 0 4px 0 #444;
  }
  .prank-btn .cooldown {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    pointer-events: none;
  }
  /* the Run (scatter) button shows the emoji + a small "Run" word
     below it so the kid knows what it does */
  .prank-btn[data-prank="scatter"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 28px;
    padding-bottom: 6px;
  }
  .prank-btn[data-prank="scatter"] .label {
    font-size: 11px;
    font-weight: 900;
    margin-top: 2px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  }
  /* Warning state: farmer is listening — pulse white outline */
  .prank-btn[data-prank="scatter"].warn:not(:disabled) {
    animation: runWarn 0.7s ease-in-out infinite alternate;
  }
  @keyframes runWarn {
    from { box-shadow: 0 4px 0 #2d6db8, 0 0 0 0   rgba(255,255,255,0.0); }
    to   { box-shadow: 0 4px 0 #2d6db8, 0 0 0 8px rgba(255,255,255,0.7); }
  }
  /* Danger state: farmer is coming — pulse red outline */
  .prank-btn[data-prank="scatter"].danger:not(:disabled) {
    animation: runDanger 0.45s ease-in-out infinite alternate;
    background: linear-gradient(135deg, #ff5d5d, #c92a2a);
    box-shadow: 0 4px 0 #7a1818;
  }
  @keyframes runDanger {
    from {
      box-shadow: 0 4px 0 #7a1818, 0 0 0 0   rgba(255, 60, 60, 0.0);
      transform: translate(0, 0);
    }
    to   {
      box-shadow: 0 4px 0 #7a1818, 0 0 0 10px rgba(255, 60, 60, 0.55);
      transform: translate(0, -2px);
    }
  }
  /* Red ‼️ pip floating above the Run button when farmer is coming */
  .prank-btn[data-prank="scatter"].danger::before {
    content: "‼️";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    pointer-events: none;
    animation: runPip 0.45s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  }
  @keyframes runPip {
    from { transform: translateX(-50%) scale(1)    translateY(0); }
    to   { transform: translateX(-50%) scale(1.18) translateY(-3px); }
  }
  /* Critter speech bubble when scattering / panicking */
  .panic-say {
    position: absolute;
    background: rgba(255,255,255,0.94);
    border: 2px solid #ff3030;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 800;
    color: #c91515;
    pointer-events: none;
    z-index: 22;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    animation: panicSay 1.1s ease-out forwards;
    box-shadow: 0 2px 0 #c91515;
  }
  @keyframes panicSay {
    from { opacity: 0; transform: translate(-50%, -90%)  scale(0.6); }
    25%  { opacity: 1; transform: translate(-50%, -110%) scale(1.05); }
    75%  { opacity: 1; transform: translate(-50%, -125%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -150%) scale(1); }
  }
  .panic-say.warn { border-color: #ff8a3c; color: #c95a17; box-shadow: 0 2px 0 #c95a17; }

  /* Projectiles — rocks, tossed veggies, falling watering cans. */
  .projectile {
    position: absolute;
    pointer-events: none;
    z-index: 9;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4));
  }

  /* Zombie sprite — bigger than the farmer + glowy green so he reads as scary. */
  .zombie {
    position: absolute;
    width: 168px; height: 168px;
    object-fit: contain;
    object-position: bottom center;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 0 14px #6dff6d) drop-shadow(0 6px 6px rgba(0,0,0,0.4));
    transform: translate(-50%, -50%);
    z-index: 12;
    animation: zombieSway 1.4s ease-in-out infinite alternate;
  }
  .zombie.face-left { transform: translate(-50%, -50%) scaleX(-1); }
  @keyframes zombieSway {
    from { filter: drop-shadow(0 0 10px #6dff6d) drop-shadow(0 6px 6px rgba(0,0,0,0.4)); }
    to   { filter: drop-shadow(0 0 22px #6dff6d) drop-shadow(0 6px 6px rgba(0,0,0,0.4)); }
  }
  /* Panic-emoji burst over the farmer when the zombie first appears. */
  #panic-burst {
    position: absolute;
    transform: translate(-50%, -120%);
    z-index: 15;
    font-size: 44px;
    line-height: 1;
    pointer-events: none;
    display: none;
    animation: panicBounce 240ms ease-out infinite alternate;
  }
  #panic-burst.show { display: block; }
  @keyframes panicBounce {
    from { transform: translate(-50%, -120%) scale(1)    rotate(-6deg); }
    to   { transform: translate(-50%, -150%) scale(1.2)  rotate(6deg);  }
  }
  /* Friendship-heart confetti when the zombie leaves. */
  .heart-puff {
    position: absolute;
    pointer-events: none;
    font-size: 26px;
    line-height: 1;
    z-index: 13;
    animation: heartFloat 1500ms ease-out forwards;
  }
  @keyframes heartFloat {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -200%) scale(1.4); }
  }

  /* Stars over a dizzy farmer. */
  #dizzy-stars {
    position: absolute;
    pointer-events: none;
    z-index: 11;
    font-size: 24px;
    transform: translate(-50%, -100%);
    display: none;
    animation: dizzySpin 0.8s linear infinite;
  }
  #dizzy-stars.show { display: block; }
  @keyframes dizzySpin {
    from { transform: translate(-50%, -100%) rotate(0); }
    to   { transform: translate(-50%, -100%) rotate(360deg); }
  }


  /* ===== Picker ===== */
  #picker {
    position: absolute; inset: 0;
    z-index: 60;
    background: linear-gradient(180deg, rgba(255,234,246,0.92), rgba(214,99,168,0.85));
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
  }
  #picker .panel {
    background: #fff;
    border: 6px solid var(--pink);
    border-radius: 28px;
    padding: 22px 24px 18px;
    text-align: center;
    box-shadow: 0 14px 32px rgba(0,0,0,0.3);
    max-width: 520px; width: 100%;
  }
  #picker h1 {
    background: linear-gradient(90deg, #ff6bb5, #ffd166, #66d2ff, #b36bff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: clamp(22px, 5vw, 32px); margin-bottom: 4px;
  }
  #picker .sub { color: #6a1b6a; font-size: clamp(13px, 2.5vw, 16px); margin-bottom: 12px; }
  #picker .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #picker .opt {
    background: #fff5fa;
    border: 4px solid #ffd9ec;
    border-radius: 18px;
    padding: 8px 4px 6px;
    cursor: pointer;
    font-family: inherit; color: var(--ink);
  }
  #picker .opt:hover, #picker .opt:active { transform: translateY(-3px); }
  #picker .opt img {
    width: 80px; height: 80px;
    object-fit: contain; display: block; margin: 0 auto;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.18));
  }
  #picker .opt .name { font-size: 13px; font-weight: bold; margin-top: 2px; }
  #picker .opt.selected {
    background: #ffd9ec; border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink);
  }
  #start-btn {
    margin-top: 12px;
    font: inherit;
    font-size: clamp(20px, 4.5vw, 26px);
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ff6bb5, #ffd166);
    border: 5px solid #fff;
    border-radius: 999px;
    padding: 12px 36px;
    cursor: pointer;
    box-shadow: 0 6px 0 #b558a8;
    text-shadow: 0 2px 2px rgba(0,0,0,0.25);
    letter-spacing: 1px;
  }
  #start-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  #start-btn:active:not(:disabled) { translate: 0 4px; box-shadow: 0 2px 0 #b558a8; }

  /* Alert pip that pops up when the farmer is about to come out. */
  #farmer-alert {
    position: absolute;
    top: 96px; left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    background: rgba(255,255,255,0.94);
    border: 3px solid #ff8a3c;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 800;
    color: #c95a17;
    box-shadow: 0 3px 0 #c95a17;
    pointer-events: none;
    display: none;
    white-space: nowrap;
  }
  #farmer-alert.show {
    display: block;
    animation: alertPulse 0.7s ease-in-out infinite alternate;
  }
  #farmer-alert.urgent {
    color: #fff;
    background: linear-gradient(135deg, #ff3030, #ff8a3c);
    border-color: #b03030;
    box-shadow: 0 3px 0 #b03030;
  }
  @keyframes alertPulse {
    from { transform: translateX(-50%) scale(1);    }
    to   { transform: translateX(-50%) scale(1.08); }
  }

  /* Combo banner — pops when a fast-eat streak hits a threshold. */
  #combo-banner {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    font-family: inherit;
    font-weight: 900;
    font-size: clamp(28px, 7vw, 56px);
    text-align: center;
    pointer-events: none;
    background: linear-gradient(90deg, #ff6bb5, #ffd166, #66d2ff, #b36bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 8px 16px rgba(0,0,0,0.4);
    display: none;
    white-space: nowrap;
  }
  #combo-banner.show { display: block; animation: comboPop 2400ms ease-out forwards; }
  @keyframes comboPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
    10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(4deg); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4)  rotate(0); }
  }
  /* Critter chomp speech bubble — short "Yummy!" / "Tasty!" lines. */
  .yum {
    position: absolute;
    background: #fff;
    border: 3px solid #2b1140;
    border-radius: 12px;
    padding: 4px 10px;
    font-weight: 800;
    font-size: 13px;
    color: #2b1140;
    white-space: nowrap;
    pointer-events: none;
    z-index: 7;
    transform: translate(-50%, -100%);
    box-shadow: 0 3px 0 rgba(0,0,0,0.18);
    animation: yumPop 1200ms ease-out forwards;
  }
  @keyframes yumPop {
    0%   { opacity: 0; transform: translate(-50%, -100%) scale(0.5); }
    25%  { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
    70%  { opacity: 1; transform: translate(-50%, -130%) scale(1);   }
    100% { opacity: 0; transform: translate(-50%, -180%) scale(1);   }
  }

  /* BIG game-title banner — matches the home-page cover style:
     chunky pixel-art font, top line WHITE, bottom line PINK, both
     with thick black outlines. */
  #intro-title {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(28px, 9vw, 64px);
    text-align: center;
    line-height: 1.25;
    letter-spacing: 2px;
    pointer-events: none;
    display: none;
  }
  #intro-title .row { display: block; }
  #intro-title .row.top  { color: #fff;     -webkit-text-stroke: 5px #2b1140; }
  #intro-title .row.bot  { color: #ff6bb5;  -webkit-text-stroke: 5px #2b1140; }
  /* Paint the stroke BEHIND the fill so the kid sees a clean letter
     with a thick chunky outline, not a hollow stroke + fill collision. */
  #intro-title .row { paint-order: stroke fill; }
  #intro-title.show {
    display: block;
    animation: introTitle 600ms ease-out both, titleBob 1.6s ease-in-out 600ms infinite alternate;
  }
  @keyframes introTitle {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-6deg); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(0); }
  }
  @keyframes titleBob {
    from { transform: translate(-50%, -50%) scale(1)    rotate(-2deg); }
    to   { transform: translate(-50%, -50%) scale(1.04) rotate(2deg);  }
  }

  /* Big "LEVEL X" banner — moved lower so it doesn't fight the title. */
  #level-banner {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    font-family: inherit;
    font-weight: 900;
    font-size: clamp(40px, 10vw, 90px);
    color: #fff;
    text-shadow:
      0 0 0 #2b1140,
      4px 4px 0 #2b1140,
      -4px -4px 0 #2b1140,
      4px -4px 0 #2b1140,
      -4px 4px 0 #2b1140,
      0 8px 16px rgba(0,0,0,0.4);
    pointer-events: none;
    display: none;
  }
  #level-banner.show {
    display: block;
    animation: levelPop 1700ms ease-out forwards;
  }
  @keyframes levelPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  }

  /* ===== Intro scene — side-scroll forest, horde of critters running
     right while shouting "Yummy!" "Let's eat it all!" then fades into
     the garden game. ===== */
  #intro {
    position: absolute; inset: 0;
    z-index: 65;
    display: none;
    overflow: hidden;
    background: linear-gradient(180deg, #b6e5ff 0%, #d8eef5 35%, #ffd5ec 70%, #ffe9b0 95%, #f9d18f 100%);
    transition: opacity 600ms ease-out;
  }
  #intro.show { display: block; }
  #intro.fade { opacity: 0; pointer-events: none; }
  #intro .ground {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, #8ac256 0%, #6dbf52 50%, #5fa844 100%);
    box-shadow: inset 0 6px 0 #a3d864;
    z-index: 1;
  }
  #intro .tree {
    position: absolute;
    bottom: 22%;
    height: 320px;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 8px 6px rgba(0,0,0,0.28));
    z-index: 2;
    will-change: transform;
  }
  #intro .runner {
    position: absolute;
    width: 90px; height: 90px;
    object-fit: contain;
    object-position: bottom center;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
    z-index: 5;
    will-change: transform;
  }
  #intro .bubble {
    position: absolute;
    background: #fff;
    border: 4px solid #2b1140;
    border-radius: 14px;
    padding: 6px 12px;
    font-weight: 800;
    font-size: 16px;
    color: #2b1140;
    white-space: nowrap;
    pointer-events: none;
    z-index: 8;
    transform: translate(-50%, -100%);
    box-shadow: 0 3px 0 rgba(0,0,0,0.18);
    animation: introBubble 2400ms ease-out forwards;
  }
  #intro .bubble::after {
    content: "";
    position: absolute;
    bottom: -12px; left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #2b1140;
  }
  @keyframes introBubble {
    0%   { opacity: 0; transform: translate(-50%, -100%) scale(0.6); }
    15%  { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
    30%  { opacity: 1; transform: translate(-50%, -100%) scale(1);   }
    85%  { opacity: 1; transform: translate(-50%, -100%) scale(1);   }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(1);   }
  }
  /* "Tap to skip" hint at the bottom. */
  #intro .skip {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: #fff;
    font-weight: bold;
    background: rgba(0,0,0,0.4);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    pointer-events: none;
  }

  /* ===== Win screen ===== */
  #win-screen {
    position: absolute; inset: 0;
    z-index: 70;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55);
    padding: 16px;
  }
  #win-screen.show { display: flex; }
  #win-screen .card {
    background: #fff;
    border: 6px solid #ffd166;
    border-radius: 28px;
    padding: 28px;
    text-align: center;
    max-width: 90vw;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  }
  #win-screen h1 { color: #ff6bb5; font-size: clamp(26px, 6vw, 40px); margin: 0 0 6px; }
  #win-screen .score, #lose-screen .score { font-size: clamp(22px, 5vw, 30px); color: #6a1b6a; margin: 12px 0; font-weight: bold; }
  #win-screen .end-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 16px; }
  #win-screen button, #win-screen a.home-link {
    font: inherit;
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 800;
    color: #fff;
    border-radius: 999px;
    padding: 12px 32px;
    border: 5px solid #fff;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0,0,0,0.25);
    letter-spacing: 1px;
  }
  #win-screen #win-next-level {
    background: linear-gradient(135deg, #ff6bb5, #ffd166);
    box-shadow: 0 6px 0 #b558a8;
  }
  /* Lose screen mirrors win-screen but red. */
  #lose-screen {
    position: absolute; inset: 0;
    z-index: 70;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55);
    padding: 16px;
  }
  #lose-screen.show { display: flex; }
  #lose-screen .card {
    background: #fff;
    border: 6px solid #ff6b6b;
    border-radius: 28px;
    padding: 28px;
    text-align: center;
    max-width: 90vw;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  }
  #lose-screen h1 { color: #c2185b; font-size: clamp(26px, 6vw, 40px); margin: 0 0 6px; }
  #lose-screen .end-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 16px; }
  #lose-screen button {
    font: inherit;
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 800;
    color: #fff;
    border-radius: 999px;
    padding: 12px 32px;
    border: 5px solid #fff;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0,0,0,0.25);
    letter-spacing: 1px;
  }
  #lose-screen #lose-retry {
    background: linear-gradient(135deg, #ff6b6b, #ffd166);
    box-shadow: 0 6px 0 #b03b3b;
  }
  #win-screen #win-im-full {
    background: linear-gradient(135deg, #66a6ff, #4d8fd8);
    box-shadow: 0 5px 0 #2d6db8;
    border-color: #fff;
  }

  /* Painted title screen that sits in front of the character picker.
     Same fishing-style curtain pattern — Loading… until preloads
     decode, then Start fades the curtain and reveals the picker
     underneath. Without this, the picker felt jarring as the kid's
     very first impression of the game. */
  #title-screen {
    position: fixed; inset: 0;
    z-index: 9500;
    display: grid; place-items: center;
    transition: opacity 0.5s ease;
    background: #2a4d2a;
    overflow: hidden;
  }
  #title-screen.hide {
    opacity: 0;
    pointer-events: none;
  }
  #title-screen #title-art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
  }
  #title-screen #title-text {
    position: absolute; z-index: 1;
    left: 50%; top: 80px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    user-select: none;
    line-height: 0.9;
    font-family: "Fredoka", "Comic Sans MS", system-ui, sans-serif;
    font-weight: 800;
    width: max-content;
  }
  #title-screen #title-text .row1,
  #title-screen #title-text .row2 {
    display: block;
    color: #fff7d6;
    letter-spacing: 2px;
    text-shadow:
      -3px 0 0 #1a3f1a, 3px 0 0 #1a3f1a,
      0 -3px 0 #1a3f1a, 0 3px 0 #1a3f1a,
      -3px -3px 0 #1a3f1a, 3px 3px 0 #1a3f1a,
      -3px 3px 0 #1a3f1a, 3px -3px 0 #1a3f1a,
      0 6px 0 rgba(0,0,0,0.35),
      0 12px 22px rgba(0,0,0,0.55);
    animation: bt-title-bob 2.4s ease-in-out infinite alternate;
  }
  #title-screen #title-text .row1 {
    font-size: clamp(24px, 6.5vw, 76px);
    color: #ffe18f;
    margin-bottom: 4px;
  }
  #title-screen #title-text .row2 {
    font-size: clamp(40px, 11vw, 132px);
    color: #ffdf63;
    letter-spacing: 4px;
    animation-delay: 0.2s;
  }
  @keyframes bt-title-bob {
    from { transform: translateY(0)    rotate(-1deg); }
    to   { transform: translateY(-6px) rotate(1deg); }
  }
  #title-screen .title-actions {
    position: absolute; z-index: 1;
    left: 50%; bottom: 10vh;
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
  }
  #title-screen .wood-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: "Georgia", "Times New Roman", serif;
    font-weight: 900;
    font-size: clamp(20px, 3.4vw, 34px);
    letter-spacing: 0.06em;
    color: #4a2a14;
    text-shadow: 0 1px 0 rgba(255, 240, 210, 0.7);
    padding: 0.5em 1.6em;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbe6b1 0%, #f1c878 45%, #d99a3f 100%);
    box-shadow:
      0 0 0 4px #4a2a14,
      0 0 0 7px #b6803a,
      inset 0 4px 0 rgba(255, 250, 220, 0.65),
      inset 0 -6px 8px rgba(120, 60, 20, 0.45),
      0 8px 14px rgba(0, 0, 0, 0.45);
    transition: transform 0.12s ease;
  }
  #title-screen .wood-btn:hover  { transform: translateY(-2px); }
  #title-screen .wood-btn:active { transform: translateY(2px); }
  #title-screen .wood-btn:disabled {
    cursor: wait;
    filter: saturate(0.5) brightness(0.85);
  }