:root {
    --stage-aspect: 16 / 9;
    --bg-fallback: linear-gradient(180deg, #b8d8ee 0%, #fde9c8 60%, #b9d990 100%);
    /* Height reserved for the control row UNDER the stage on phones.
       On a tall portrait phone this carves out the bottom band so the
       three big action buttons live below the gameplay, not on top
       of it. */
    --ctrl-h: clamp(86px, 16vh, 130px);
    --ctrl-gap: clamp(6px, 1.4vh, 14px);
  }
  html, body {
    margin: 0; padding: 0; height: 100%;
    background: #1a1a1a; color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  #wrap {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--ctrl-gap);
  }
  /* Stage size reserves room below for the control row so the buttons
     never sit on top of the princess. */
  #stage {
    position: relative;
    width: min(100vw, calc((100vh - var(--ctrl-h) - var(--ctrl-gap)) * 16 / 9));
    height: min(calc(100vh - var(--ctrl-h) - var(--ctrl-gap)), calc(100vw * 9 / 16));
    /* iOS Safari: 100vh includes the hidden address bar, which shoves the
       control row half off-screen. svh = the height actually visible. */
    width: min(100vw, calc((100svh - var(--ctrl-h) - var(--ctrl-gap)) * 16 / 9));
    height: min(calc(100svh - var(--ctrl-h) - var(--ctrl-gap)), calc(100vw * 9 / 16));
    background: var(--bg-fallback);
    overflow: hidden;
    border-radius: 0;
    container-type: size;   /* enables cqh/cqw for child layout */
    flex: 0 0 auto;
  }
  /* The control row sits directly below the stage. Same width as the
     stage so the buttons line up under the gameplay. Hidden until the
     run starts. */
  #control-row {
    width: min(100vw, calc((100vh - var(--ctrl-h) - var(--ctrl-gap)) * 16 / 9));
    width: min(100vw, calc((100svh - var(--ctrl-h) - var(--ctrl-gap)) * 16 / 9));
    height: var(--ctrl-h);
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: space-around;
    padding: 0 max(8px, 2vw);
    box-sizing: border-box;
  }
  #control-row.show { display: flex; }

  /* Parallax layers */
  .parallax {
    position: absolute;
    left: 0; right: 0;
    display: flex; align-items: flex-end;
    will-change: transform;
    overflow: visible;
    pointer-events: none;
  }
  .parallax img {
    flex: 0 0 auto; height: 100%; display: block;
    image-rendering: auto;
  }
  .parallax img:nth-child(even) { transform: scaleX(-1); }
  #l1-sky        { top: 0;    bottom: 0; z-index: 1; }
  /* Single sun, fixed to the right of the stage. Sits between the
     sky (z 1) and mountains (z 2) so the mountains overlap its
     bottom but the sky shows through behind it. */
  #sun {
    position: absolute;
    right: 8%; top: 6%;
    height: 28%;
    width: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    animation: sun-bob 7s ease-in-out infinite alternate;
  }
  @keyframes sun-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
  }
  #l1-sky img    { height: 100%; }
  #l2-mountains  { bottom: 22%; height: 45%; z-index: 2; }
  #l3-mid-trees  { bottom: 12%; height: 42%; z-index: 3; }
  #l4-close-trees{ bottom: 0;  height: 55%; z-index: 4; }
  #l5-fg-bushes  { bottom: 0;  height: 28%; z-index: 6; }
  #l6-canopy     { top: 0;    height: 30%; z-index: 8; }

  /* Characters layer sits BEHIND fg-bushes (z-index 5 < shrubs at 6)
     so the princess and wolf appear to be running through grass. */
  #characters {
    position: absolute; inset: 0; z-index: 5;
    pointer-events: none;
  }
  /* Obstacle / pickup layer (in front of fg-bushes, under canopy) */
  #actors {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
  }
  .actor {
    position: absolute;
    bottom: 4%;
    width: auto;
    image-rendering: auto;
    will-change: transform;
  }
  /* One princess (the player), one wolf chasing on the left. Sized
     small so the scene reads — they used to fill half the stage. */
  #player     { height: 32%; left: 60%; transform: translateX(-50%); }
  #wolf-actor { height: 30%; left: 10%; transform: translateX(-50%); bottom: 4%; }
  #wolf-actor.wolf-eating { filter: brightness(1.05); }

  /* Spell particle effects */
  .fx-particle {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    font-size: clamp(18px, 3vh, 26px);
    user-select: none;
    will-change: transform, opacity;
  }
  @keyframes burst {
    0%   { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, -60px)) scale(1.2) rotate(180deg); opacity: 0; }
  }
  @keyframes sparkle-ring {
    0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.4); opacity: 0; }
  }
  .fx-burst   { animation: burst       1.0s ease-out forwards; }
  .fx-sparkle { animation: sparkle-ring 0.9s ease-out forwards; }
  /* Obstacles — the log PNG has ~34% transparent padding on top
     and bottom, so the visible log floats in the middle. We push
     the whole image down with a negative `bottom` so the log art
     actually rests on the ground line. Only appear on level 3. */
  .obstacle {
    position: absolute;
    bottom: -14%;
    height: 44%;
    z-index: 7;
    will-change: transform, opacity, transform;
    filter: drop-shadow(0 8px 8px rgba(0,0,0,0.5));
  }
  /* Warning halo that pulses around the obstacle ~0.8s before the
     player reaches it. Helps Katherine see it coming. */
  .obstacle.warn {
    animation: obstacle-warn 0.35s ease-in-out infinite alternate;
  }
  @keyframes obstacle-warn {
    0%   { filter: drop-shadow(0 6px 5px rgba(0,0,0,0.45))
                   drop-shadow(0 0 0 rgba(255, 230, 80, 0.0)); }
    100% { filter: drop-shadow(0 6px 5px rgba(0,0,0,0.45))
                   drop-shadow(0 0 18px rgba(255, 230, 80, 0.95)); }
  }
  /* "⬆️ JUMP!" hint that floats above the player when a log enters
     the warning zone. Big and pulsing so a 7-year-old reads it. */
  #jump-hint {
    position: absolute;
    z-index: 19;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    transform: translate(-50%, 0);
    text-align: center;
    line-height: 1;
    user-select: none;
    white-space: nowrap;
  }
  #jump-hint .arrow {
    display: block;
    font-size: clamp(40px, 8.5vh, 80px);
    text-shadow:
      0 0 14px rgba(255, 230, 80, 0.95),
      0 0 26px rgba(255, 200, 80, 0.65);
  }
  #jump-hint .word {
    display: block;
    margin-top: 2px;
    font-family: "Fredoka", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 3.4vh, 32px);
    color: #fff8b0;
    text-shadow:
      -2px 0 0 #5a3210, 2px 0 0 #5a3210,
      0 -2px 0 #5a3210, 0 2px 0 #5a3210,
      0 4px 0 rgba(0,0,0,0.4);
    letter-spacing: 1px;
  }
  #jump-hint.show {
    opacity: 1;
    animation: jump-hint-bob 0.42s ease-in-out infinite alternate;
  }
  @keyframes jump-hint-bob {
    from { transform: translate(-50%, 0)     scale(1); }
    to   { transform: translate(-50%, -14px) scale(1.12); }
  }

  /* Apple pickup floating on the path. */
  .pickup {
    position: absolute;
    z-index: 7;
    font-size: clamp(28px, 6vh, 50px);
    will-change: transform;
    text-shadow: 0 3px 5px rgba(0,0,0,0.35);
    animation: pickup-bob 0.9s ease-in-out infinite alternate;
    pointer-events: none;
    user-select: none;
  }
  @keyframes pickup-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
  }

  /* Apple flying back toward the wolf after being thrown. */
  .thrown-apple {
    position: absolute;
    z-index: 9;
    font-size: clamp(26px, 5vh, 42px);
    pointer-events: none;
    text-shadow: 0 3px 5px rgba(0,0,0,0.4);
  }

  /* Castle gate that scrolls in at the finish. */
  #castle-gate {
    position: absolute;
    right: -45%;
    bottom: 0;
    height: 78%;
    z-index: 6;
    font-size: clamp(120px, 32vh, 280px);
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: right 1.6s ease-out, opacity 0.6s ease-in;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.55));
  }
  #castle-gate.show { right: 8%; opacity: 1; }

  /* Common UI buttons */
  #home-btn, #music-btn {
    position: absolute; top: 12px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    text-decoration: none;
    font-size: 18px; line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    user-select: none;
    z-index: 30;
    border: none;
  }
  #home-btn  { left: 12px; }
  #music-btn { right: 12px; }

  #version {
    position: absolute; bottom: 6px; right: 8px;
    font-size: 11px; opacity: 0.6;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
    z-index: 25;
  }

  /* SCREEN OVERLAYS (title, select, picnic, win, lose) */
  .screen {
    position: absolute; inset: 0; z-index: 20;
    display: grid; place-items: center;
    transition: opacity 0.4s ease;
    background: rgba(0,0,0,0.0);
  }
  .screen.hide,
  .screen.hide * {
    /* `pointer-events: none` on .screen.hide alone isn't enough — buttons
       inside still intercept clicks in Chromium even when the parent is
       set, so hidden end-screen buttons were stealing taps from the
       select cards underneath. Force it on all descendants too. */
    pointer-events: none;
  }
  .screen.hide { opacity: 0; }

  /* Title */
  #title-screen { background: rgba(0,0,0,0); }
  #title-art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
  }
  /* "PRINCESS RUN!" stylized title overlay sitting in the upper
     canopy area of the painted hero scene. Two rows so the kid sees
     each word big. */
  #title-text {
    position: absolute; z-index: 1;
    left: 50%;
    top: 3cqh;
    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: 700;
  }
  #title-text .row1,
  #title-text .row2 {
    display: block;
    color: #fff7d6;
    letter-spacing: 2px;
    /* Multi-direction stroke + drop shadow so the words read
       cleanly on the painted sky behind. */
    text-shadow:
      -3px 0 0 #5e2a82, 3px 0 0 #5e2a82,
      0 -3px 0 #5e2a82, 0 3px 0 #5e2a82,
      -3px -3px 0 #5e2a82, 3px 3px 0 #5e2a82,
      -3px 3px 0 #5e2a82, 3px -3px 0 #5e2a82,
      0 6px 0 rgba(0,0,0,0.35),
      0 12px 22px rgba(0,0,0,0.55);
    animation: title-bob 2.4s ease-in-out infinite alternate;
  }
  #title-text .row1 {
    font-size: clamp(26px, 7cqw, 88px);
    color: #ffe18f;
    margin-bottom: 2px;
  }
  #title-text .row2 {
    font-size: clamp(40px, 11cqw, 132px);
    color: #ffdf63;
    letter-spacing: 4px;
    animation-delay: 0.2s;
  }
  @keyframes title-bob {
    from { transform: translateY(0)    rotate(-1deg); }
    to   { transform: translateY(-6px) rotate(1deg); }
  }
  #title-screen .row {
    position: absolute; z-index: 1;
    left: 50%;
    bottom: 10cqh;
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
  }
  .wood-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: "Georgia", "Times New Roman", serif;
    font-weight: 900;
    font-size: clamp(18px, 3vw, 32px);
    letter-spacing: 0.06em;
    color: #4a2a14;
    text-shadow: 0 1px 0 rgba(255, 240, 210, 0.7);
    padding: 0.45em 1.4em;
    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;
  }
  .wood-btn:hover  { transform: translateY(-2px); }
  .wood-btn:active { transform: translateY(2px); }
  .wood-btn:disabled { cursor: wait; filter: saturate(0.5) brightness(0.85); }

  /* Character select */
  #select-screen {
    background: radial-gradient(ellipse at center, rgba(40,20,60,0.75) 0%, rgba(20,10,30,0.92) 100%);
  }
  #select-screen .col {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2cqh;
    padding: 3cqh 2cqw;
    box-sizing: border-box;
  }
  #select-screen h2 {
    font-size: clamp(18px, 6cqh, 36px);
    text-align: center; margin: 0;
    color: #ffe5b8;
    text-shadow: 2px 2px 0 #5e2a82, 4px 4px 0 rgba(0,0,0,0.4);
  }
  #select-screen .cards {
    display: flex; gap: 2cqw; justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 720px;
  }
  .card {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 0.4cqh;
    padding: 1cqh 1cqw 1.4cqh;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border: 3px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    color: #fff;
    text-align: center;
  }
  .card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.4); }
  .card.selected {
    border-color: #ffd95a;
    background: linear-gradient(180deg, rgba(255,217,90,0.20), rgba(255,217,90,0.06));
    transform: translateY(-6px);
    box-shadow: 0 0 24px rgba(255,217,90,0.45);
  }
  .card img {
    width: 100%;
    height: clamp(60px, 30cqh, 200px);
    object-fit: contain;
    image-rendering: auto;
  }
  .card .name {
    font-size: clamp(11px, 3.2cqh, 22px);
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.05;
  }
  .card .vibe {
    font-size: clamp(9px, 2.2cqh, 14px);
    opacity: 0.85;
    line-height: 1.1;
  }

  /* Picnic lobby — friends ready-up panel on the select screen (WRLobby).
     Woodland-pink to match the game, not the racer's neon. */
  #wr-lobby {
    width: 100%;
    max-width: 720px;
    background: linear-gradient(180deg, rgba(255,139,182,0.16), rgba(94,42,130,0.28));
    border: 2px solid rgba(255,182,213,0.45);
    border-radius: 16px;
    padding: 0.9cqh 1.2cqw;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    gap: 0.7cqh;
  }
  #wr-lobby-title {
    font-size: clamp(11px, 2.6cqh, 16px);
    font-weight: 800;
    color: #ffd9ec;
    text-align: center;
    text-shadow: 1px 1px 0 #5e2a82;
  }
  #wr-lobby-slots {
    display: flex; gap: 1cqw;
    justify-content: center;
    flex-wrap: wrap;
  }
  .wr-slot {
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.28);
    border: 2px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 3px 10px 3px 4px;
  }
  .wr-slot.me { border-color: #ffd95a; }
  .wr-slot img,
  .wr-slot .wr-noPick {
    width: clamp(22px, 6.5cqh, 36px);
    height: clamp(22px, 6.5cqh, 36px);
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255,255,255,0.12);
  }
  .wr-noPick {
    display: grid; place-items: center;
    font-weight: 900; color: #fff;
    box-sizing: border-box;
  }
  .wr-slot .wr-name {
    font-size: clamp(10px, 2.4cqh, 14px);
    font-weight: 700;
    color: #fff;
    max-width: 16ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .wr-badge {
    font-size: clamp(8px, 2cqh, 11px);
    font-weight: 900;
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
  }
  .wr-ready   { background: #2fbf71; color: #04170c; }
  .wr-picking { background: #ffd166; color: #4a2a14; }
  /* Join / ready / left one-liners over the select screen */
  #wr-toast {
    position: absolute;
    left: 50%; top: 5cqh;
    transform: translateX(-50%);
    z-index: 40;
    background: #b5006be6;
    color: #fff;
    font-weight: 800;
    font-size: clamp(12px, 3cqh, 17px);
    padding: 8px 16px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
    white-space: nowrap;
    max-width: 92%;
    overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  #wr-toast.show { opacity: 1; }
  /* "Keep going — Level N" sits under the main play button, a size down. */
  #continue-btn {
    font-size: clamp(13px, 2.1vw, 22px);
    padding: 0.32em 1.1em;
  }

  /* Picnic cutscene — a 3-picture storybook slideshow (picnic, wolf peeking
     far away, wolf right at the blanket). Slides sit stacked; .show crossfades
     one in with a slow gentle zoom so it feels like a picture book, not a UI. */
  #picnic-screen { background: #000; }
  .picnic-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
    z-index: 0;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.8s ease;
  }
  .picnic-slide.show {
    opacity: 1;
    /* Ken Burns: each slide drifts in over ~7s (longer than the slide is on
       screen, so it never visibly stops). transform alone — cheap on phones. */
    transition: opacity 0.8s ease, transform 7s linear;
    transform: scale(1.05);
  }
  #picnic-caption {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 8%;
    z-index: 1;
    font-size: clamp(18px, 3vw, 30px);
    font-weight: 800;
    color: #fff;
    text-shadow:
      2px 2px 0 #4a2a14,
      0 0 12px rgba(0,0,0,0.6);
    text-align: center;
    background: rgba(0,0,0,0.45);
    padding: 12px 22px;
    border-radius: 16px;
    max-width: 80%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #picnic-caption.show { opacity: 1; }

  /* Game HUD */
  #hud {
    position: absolute;
    z-index: 18;
    pointer-events: none;
    inset: 0;
  }
  /* Three big buttons across the bottom: APPLE | RUN! | JUMP.
     Each is a chunky round wooden-style button so a 7yo can thumb-tap
     them on a phone without missing. */
  .action-btn {
    width: clamp(58px, 11vh, 88px);
    height: clamp(58px, 11vh, 88px);
    border-radius: 50%;
    border: 4px solid #4a2a14;
    color: #4a2a14;
    font-weight: 900;
    font-size: clamp(12px, 2vh, 18px);
    line-height: 1.05;
    box-shadow: 0 5px 12px rgba(0,0,0,0.4);
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    appearance: none;
    display: grid; place-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.1s ease;
  }
  .action-btn:active { transform: translateY(2px); }
  .action-btn.disabled,
  .action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.7);
  }
  #apple-btn {
    background: linear-gradient(180deg, #ff9d9d, #d54a4a);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  }
  #run-btn {
    background: linear-gradient(180deg, #ffe07a, #f4a73e);
  }
  /* Cooldown overlay drains clockwise via conic-gradient. */
  #run-btn .cooldown {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(
      from -90deg,
      rgba(0,0,0,0.55) calc(var(--cd, 0%) * 1%),
      transparent      calc(var(--cd, 0%) * 1%));
    pointer-events: none;
  }
  .action-btn .count {
    position: absolute; right: -2px; top: -2px;
    background: #5e2a82; color: #fff;
    border: 2px solid #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 13px; font-weight: 800;
    display: grid; place-items: center;
    z-index: 2;
  }
  .action-btn .label {
    position: relative;
    z-index: 1;
  }

  #score-bar {
    position: absolute; left: 60px; top: 12px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 4px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    pointer-events: none;
  }

  #jump-btn {
    background: linear-gradient(180deg, #b8e08f, #5fa54e);
    color: #1c3a0e;
    font-size: clamp(14px, 2.6vh, 22px);
    width: clamp(64px, 12vh, 100px);
    height: clamp(64px, 12vh, 100px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
  }

  /* Finish-line progress bar */
  #progress-bar {
    /* Pinned to the VIEWPORT (not the stage) so it always sits just
       below the shared topbar, never drifts into the middle of the
       screen when the stage is vertically centered (phone portrait
       layouts where body flex-centers the 16:9 stage). */
    position: fixed;
    left: 50%; transform: translateX(-50%);
    top: 68px;
    width: min(60%, 480px);
    height: 14px;
    background: rgba(0,0,0,0.45);
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 26;
    overflow: visible;
    pointer-events: none;
  }
  #progress-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 0%;
    background: linear-gradient(90deg, #ff8bb6, #ffd95a, #9ad07a);
    border-radius: 6px;
    transition: width 0.12s linear;
  }
  #progress-flag {
    position: absolute;
    right: -4px; top: -10px;
    font-size: 22px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }
  #progress-runner {
    position: absolute;
    left: 0%;
    top: -10px;
    font-size: 18px;
    transform: translateX(-50%) scaleX(-1);   /* mirror so the runner faces the castle on the right */
    transition: left 0.12s linear;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }
  .flip-x { display: inline-block; transform: scaleX(-1); }

  /* Gasp close-up screen */
  #gasp-screen {
    background: radial-gradient(ellipse, rgba(255, 200, 230, 0.55) 0%, rgba(60, 20, 90, 0.85) 70%);
  }
  #gasp-screen img {
    height: 60%;
    image-rendering: auto;
    animation: gasp-bounce 0.45s ease-out;
  }
  @keyframes gasp-bounce {
    0%   { transform: scale(0.4) translateY(40px); opacity: 0; }
    60%  { transform: scale(1.08) translateY(-12px); opacity: 1; }
    100% { transform: scale(1.0) translateY(0); opacity: 1; }
  }
  #fx { position: absolute; inset: 0; z-index: 22; pointer-events: none; }
  #flash {
    position: absolute; inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }
  #flash.go { opacity: 1; }
  /* Player speech bubble (used during escape) */
  #player-speech {
    position: absolute;
    background: #fff;
    border: 3px solid #5e2a82;
    border-radius: 16px;
    padding: 6px 14px;
    font-weight: 900;
    color: #5e2a82;
    font-size: clamp(15px, 2.4vw, 22px);
    z-index: 24;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    white-space: nowrap;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.22);
    transition: opacity 0.18s ease, transform 0.28s cubic-bezier(.34,1.6,.5,1);
  }
  #player-speech.show { opacity: 1; transform: translate(-50%, -10px); }
  #player-speech::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 24px;
    width: 0; height: 0;
    border: 7px solid transparent;
    border-top-color: #5e2a82;
  }
  #player-speech::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 27px;
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: #fff;
    z-index: 1;
  }

  /* Win/lose screens */
  /* "LEVEL 2 — Apple Toss" flash card between runs. */
  #level-intro {
    background: rgba(0,0,0,0.55);
    color: #fff; text-align: center;
    pointer-events: none;
  }
  #level-intro .panel {
    background: linear-gradient(180deg, rgba(80,40,120,0.92), rgba(40,20,80,0.98));
    border: 3px solid #ffd95a;
    border-radius: 22px;
    padding: 26px 34px;
    max-width: 84%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    animation: level-intro-pop 0.4s ease-out;
  }
  @keyframes level-intro-pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
  #level-intro-num {
    font-family: "Fredoka", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 6vw, 52px);
    color: #ffe5b8;
    text-shadow: 2px 2px 0 #5e2a82, 4px 4px 0 rgba(0,0,0,0.4);
    letter-spacing: 2px;
  }
  #level-intro-name {
    font-family: "Fredoka", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 4vw, 36px);
    color: #fff;
    margin-top: 4px;
  }
  #level-intro-hint {
    margin-top: 14px;
    font-size: clamp(13px, 2.2vw, 18px);
    color: #ffe1a0;
  }
  /* Cinematic ending — full-bleed painted scene + a panel anchored
     to the bottom-center. */
  #ending-screen {
    background: #000;
    /* No explicit `pointer-events: auto` — it had higher specificity
       than the `.screen.hide` rule and was leaving the hidden ending
       overlay grabbing taps from the princess-select cards underneath. */
  }
  #ending-art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0;
    animation: ending-pan 9s ease-in-out infinite alternate;
  }
  @keyframes ending-pan {
    from { transform: scale(1.02) translateY(0); }
    to   { transform: scale(1.05) translateY(-1%); }
  }
  #ending-panel {
    position: absolute;
    left: 50%; bottom: 6cqh;
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(80,40,120,0.86), rgba(40,20,80,0.96));
    border: 3px solid #ffd95a;
    border-radius: 22px;
    padding: 18px 28px;
    max-width: 86%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.7);
    animation: ending-pop 0.6s ease-out;
  }
  @keyframes ending-pop {
    from { transform: translate(-50%, 30px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
  }
  #ending-title {
    font-family: "Fredoka", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 5.4cqw, 48px);
    color: #ffe5b8;
    text-shadow: 2px 2px 0 #5e2a82, 4px 4px 0 rgba(0,0,0,0.4);
    letter-spacing: 1.5px;
    margin-bottom: 6px;
  }
  #ending-desc {
    font-family: "Fredoka", system-ui, sans-serif;
    font-size: clamp(14px, 2.6cqw, 22px);
    color: #fff;
    margin-bottom: 8px;
  }
  #ending-meters {
    font-size: clamp(13px, 2.2cqw, 18px);
    color: #ffe1a0;
    margin-bottom: 14px;
  }
  .end-screen {
    background: rgba(0,0,0,0.65);
    color: #fff; text-align: center;
  }
  .end-screen .panel {
    background: linear-gradient(180deg, rgba(80,40,120,0.75), rgba(40,20,80,0.95));
    border: 3px solid #ffd95a;
    border-radius: 22px;
    padding: 24px 28px;
    max-width: 80%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  }
  .end-screen h2 {
    margin: 0 0 12px;
    font-size: clamp(24px, 5vw, 42px);
    color: #ffe5b8;
    text-shadow: 2px 2px 0 #5e2a82, 4px 4px 0 rgba(0,0,0,0.4);
  }
  .end-screen p {
    margin: 0 0 14px;
    font-size: clamp(14px, 2.4vw, 20px);
  }