:root {
    --ink: #3b2855;
    --accent: #ff6bb5;
    --accent-2: #ffd166;
    --grass: #93d4a4;
    --grass-dark: #5fa775;
    --hole: #6b4226;
    --hole-dark: #3e2614;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100svh;   /* iOS: track the small viewport, not the URL-bar guess */
    overflow: hidden;
    font-family: "Comic Sans MS", "Chalkboard SE", "Baloo", system-ui, sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 88% 12%, #fff2a0 0 50px, #ffd166 51px 72px, transparent 73px),
      radial-gradient(ellipse at 50% 100%, var(--grass-dark) 0 200px, transparent 201px),
      linear-gradient(180deg, #d4f0ff 0%, #e5f7d8 60%, var(--grass) 100%);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  header {
    text-align: center;
    padding: 18px 12px 8px;
  }
  h1 {
    margin: 0;
    font-size: clamp(24px, 5vw, 40px);
    color: #d660b0;
    text-shadow: 0 2px 0 #fff, 0 4px 0 rgba(0,0,0,0.15);
  }

  #hud {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    font-size: clamp(16px, 2.6vw, 22px);
    background: rgba(255,255,255,0.85);
    padding: 6px 16px;
    border-radius: 999px;
    width: fit-content;
    margin: 6px auto 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  #hud b { color: #d6336c; }

  #grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 2vw, 16px);
    width: min(94vw, 480px);
    margin: 18px auto;
  }
  .hole {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    container-type: size;
    background: url("./assets/hole.webp") center bottom / contain no-repeat;
  }
  /* Front rim of the burrow, redrawn ON TOP of the critter so it looks
     like the critter is popping UP from inside the hole. Same image as
     the .hole background, clipped to just its lower 14% (the near rim),
     so the critter's feet tuck behind it. Lines up at every size. */
  .hole::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./assets/hole.webp") center bottom / contain no-repeat;
    clip-path: inset(76% 0 0 0);
    pointer-events: none;
    z-index: 3;
  }
  /* Sized in container units (cqw = 1% of the hole's width) so the
     critter scales with its hole on every screen. bottom % is relative
     to the hole, so the pop positions hold at any size. */
  .critter {
    position: absolute;
    bottom: -75%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 58cqw;
    line-height: 1;
    width: 68cqw;
    height: 68cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 220ms ease-out;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
  }
  .critter img { width: 100%; height: 100%; object-fit: contain; }
  .critter.is-star { animation: starGlow 0.9s ease-in-out infinite alternate; }
  @keyframes starGlow {
    from { filter: drop-shadow(0 0 5px #ffd166)  drop-shadow(0 4px 4px rgba(0,0,0,0.3)); }
    to   { filter: drop-shadow(0 0 14px #ffd166) drop-shadow(0 4px 4px rgba(0,0,0,0.3)); }
  }
  .hole.up    .critter { bottom: 12%; }
  .hole.tapped .critter {
    bottom: 28%;
    transform: translateX(-50%) scale(1.2) rotate(12deg);
    transition: all 250ms ease-out;
    opacity: 0;
  }

  .pop-text {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0);
    font-weight: bold;
    font-size: 22px;
    color: #ffd166;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 6;
    animation: floatUp 600ms ease-out forwards;
  }
  .pop-text.decoy { color: #b56bff; }
  @keyframes floatUp {
    0%   { transform: translate(-50%, 0)    scale(0.8); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(-50%, -80px) scale(1.4); opacity: 0; }
  }

  /* Combo streak counter in the HUD — glows orange and bumps each tier up. */
  #combo-wrap { color: #ff7a00; }
  #combo-wrap b { color: #ff7a00; }
  #combo-wrap.bump { animation: comboBump 320ms ease-out; }
  @keyframes comboBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    100% { transform: scale(1); }
  }

  /* Little sparkle burst that fires from a critter when you tap it. */
  .spark {
    position: absolute;
    left: 50%; top: 40%;
    font-size: 18px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: sparkFly 520ms ease-out forwards;
    z-index: 5;
  }
  @keyframes sparkFly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); }
  }

  #home-btn, #music-btn {
    position: fixed;
    top: 12px;
    font-family: inherit;
    font-size: 15px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 3px solid var(--accent);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 3px 0 var(--accent);
    z-index: 30;
    cursor: pointer;
  }
  #home-btn  { left: 12px; }
  #music-btn { right: 12px; }
  #home-btn:active, #music-btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--accent); }
  #music-btn.on {
    background: linear-gradient(135deg, #ff6bb5, #ffd166);
    color: #fff;
  }

  #author {
    position: fixed;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(60,40,80,0.55);
    font-style: italic;
    pointer-events: none;
  }

  /* GOLDEN RUSH — final 10 seconds: gold banner + the board glows. */
  #rushBadge {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(135deg, #ffd166, #ffb703, #ff9e00);
    color: #5b3a00;
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    z-index: 25;
    display: none;
    animation: rushPulse 0.7s ease-in-out infinite;
  }
  #rushBadge.show { display: block; }
  @keyframes rushPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  body.golden-rush #grid .hole {
    filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.75));
  }
  body.golden-rush .pop-text { color: #ffb703; }

  /* Friends race board (party rounds) — live scores, top-left. */
  #race-board {
    position: fixed;
    top: 64px;
    left: 10px;
    z-index: 26;
    display: none;
    background: rgba(255,255,255,0.88);
    border-radius: 14px;
    padding: 6px 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    pointer-events: none;
  }
  #race-board .race-row {
    font-size: 14px;
    font-weight: bold;
    color: #3b2855;
    white-space: nowrap;
  }

  /* Friends' final scores on the end card */
  #peerScores { margin: 4px 0 2px; }
  #peerScores .peer-title {
    font-size: clamp(14px, 2.4vw, 17px);
    color: #7a6a8a;
    font-weight: bold;
  }
  #peerScores .peer-row {
    font-size: clamp(15px, 2.6vw, 19px);
    color: #5b3b50;
    font-weight: bold;
  }

  /* Intro & end screens */
  #intro, #endScreen {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    z-index: 40;
    padding: 12px;
  }
  #intro {
    background: rgba(212, 240, 255, 0.6);
    display: flex;
    transition: opacity 400ms;
  }
  #intro.hide { opacity: 0; pointer-events: none; }
  #endScreen.show { display: flex; }
  .panel {
    background: #fff;
    border: 6px solid var(--accent);
    border-radius: 24px;
    padding: 22px 28px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    max-width: 90vw;
  }
  .panel h2 { margin: 0 0 8px; color: var(--accent); font-size: clamp(24px, 5vw, 36px); }
  .panel p  { margin: 6px 0; font-size: clamp(17px, 3vw, 22px); }
  .panel .big-stat { font-size: clamp(40px, 8vw, 64px); color: #d6336c; margin: 4px 0; }
  .legend {
    font-size: 0.6em;
    color: #777;
    margin-top: 8px;
    line-height: 1.5;
  }

  .end-buttons {
    display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap;
  }
  .end-buttons button {
    font-family: inherit;
    font-size: 18px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 3px solid var(--accent);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--accent);
    font-weight: bold;
  }
  .end-buttons button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--accent); }
  #playAgain { background: var(--accent); color: #fff; }
  #noThanksBtn {
    background: linear-gradient(135deg, #66a6ff, #4d8fd8);
    color: #fff;
    border-color: #4d8fd8;
    box-shadow: 0 3px 0 #2d6db8;
  }
  #noThanksBtn:active { box-shadow: 0 1px 0 #2d6db8; }
  #newBest { color: #ffaa00; font-weight: bold; font-size: clamp(18px, 3vw, 24px); }

  .confetti {
    position: fixed;
    top: -20px;
    font-size: 22px;
    pointer-events: none;
    animation: fall linear forwards;
    z-index: 35;
  }
  @keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

  /* Princess-Run-style title screen — full-bleed painted hero art that
     doubles as the asset-loading curtain. */
  #intro {
    position: fixed; inset: 0;
    z-index: 9000;
    display: grid; place-items: center;
    transition: opacity 0.5s ease;
    background: #0a1a3a;
    overflow: hidden;
  }
  #intro.hide,
  #intro.hide * {
    pointer-events: none;
  }
  #intro.hide { opacity: 0; }
  #intro #title-art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0; pointer-events: none;
  }
  #intro #title-text {
    position: absolute; z-index: 1;
    left: 50%; top: 6vh;
    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;
  }
  #intro #title-text .row1,
  #intro #title-text .row2 {
    display: block;
    color: #fff7d6;
    letter-spacing: 2px;
    text-shadow:
      -3px 0 0 #1a2440, 3px 0 0 #1a2440,
      0 -3px 0 #1a2440, 0 3px 0 #1a2440,
      -3px -3px 0 #1a2440, 3px 3px 0 #1a2440,
      -3px 3px 0 #1a2440, 3px -3px 0 #1a2440,
      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;
  }
  #intro #title-text .row1 {
    font-size: clamp(24px, 6.5vw, 76px);
    color: #ffe18f;
    margin-bottom: 4px;
  }
  #intro #title-text .row2 {
    font-size: clamp(40px, 11vw, 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); }
  }
  #intro .title-actions {
    position: absolute; z-index: 1;
    left: 50%; bottom: 10vh;
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
  }
  #intro .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;
  }
  #intro .wood-btn:hover  { transform: translateY(-2px); }
  #intro .wood-btn:active { transform: translateY(2px); }
  #intro .wood-btn:disabled { cursor: wait; filter: saturate(0.5) brightness(0.85); }