:root {
    --ink: #3b2855;
    --accent: #ff6bb5;
    --accent-2: #ffd166;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Comic Sans MS", "Chalkboard SE", "Baloo", system-ui, sans-serif;
    color: var(--ink);
    /* Painted rainbow-sky backdrop (Gemini gen, 2026-05-17). The
       pastel-pink linear-gradient acts as fallback if the WebP
       fails to load. */
    background:
      url('./assets/bg.webp') center/cover no-repeat,
      linear-gradient(180deg, #e0f7ff 0%, #ffe9f6 60%, #ffd9ec 100%);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
  /* Body flash overlay for big power-up effects. */
  body.flash::before {
    content: "";
    position: fixed; inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255, 230, 120, 0.4) 60%, transparent 100%);
    z-index: 200;
    pointer-events: none;
    animation: flashFade 500ms ease-out forwards;
  }
  @keyframes flashFade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  /* Body shake for chain-lightning + rainbow boom. */
  body.shake { animation: bodyShake 320ms ease-in-out; }
  @keyframes bodyShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-5px, 3px); }
    40% { transform: translate(6px, -3px); }
    60% { transform: translate(-4px, -2px); }
    80% { transform: translate(3px, 4px); }
  }

  #game-area {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .bubble {
    position: absolute;
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    will-change: transform;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.22));
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bubble img {
    display: block;
    pointer-events: none;
  }
  /* Power-up bubbles get a glowy halo so they stand out from regular
     ones. The wiggle runs on the CHILD — an animation on the parent
     would override the JS-owned inline translate and pin the bubble
     to the top-left corner (shipped bug until 2026-07-02). */
  .bubble.powerup {
    filter: drop-shadow(0 0 12px rgba(255, 240, 150, 0.9))
            drop-shadow(0 4px 8px rgba(0,0,0,0.22));
  }
  .bubble.powerup > img,
  .bubble.powerup > span {
    animation: powerupSpin 2.4s linear infinite;
  }
  @keyframes powerupSpin {
    from { transform: rotate(-8deg); }
    50%  { transform: rotate(8deg); }
    to   { transform: rotate(-8deg); }
  }
  /* The bomb trap gets a DANGER look — red pulse, not the golden
     "grab me" halo, so a kid can tell good from bad at a glance. */
  .bubble.trap {
    filter: drop-shadow(0 0 12px rgba(255, 70, 70, 0.9))
            drop-shadow(0 4px 8px rgba(0,0,0,0.22));
  }
  .bubble.trap > img,
  .bubble.trap > span {
    animation: trapPulse 0.9s ease-in-out infinite;
  }
  @keyframes trapPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
  }
  /* Pop burst — the sprite swells + fades instead of blinking away. */
  .bubble.popping > img,
  .bubble.popping > span {
    animation: bubbleBurst 220ms ease-out forwards;
  }
  @keyframes bubbleBurst {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.55); opacity: 0; }
  }
  /* Water droplets flying out of a popped bubble. */
  .droplet {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(160,220,255,0.7));
    box-shadow: 0 0 6px rgba(255,255,255,0.8);
    pointer-events: none;
    z-index: 15;
    animation: dropletFly 440ms ease-out forwards;
  }
  @keyframes dropletFly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 18px)) scale(0.4); }
  }
  /* Splash ring for taps that hit only water. */
  .ripple {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 8px rgba(255,255,255,0.5);
    pointer-events: none;
    z-index: 8;
    animation: rippleGrow 420ms ease-out forwards;
  }
  @keyframes rippleGrow {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(3.4); }
  }

  .pop {
    position: absolute;
    font-size: 30px;
    pointer-events: none;
    animation: popOut 500ms ease-out forwards;
    z-index: 10;
    font-weight: bold;
  }
  @keyframes popOut {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(-50%, -160%) scale(1.5); opacity: 0; }
  }
  /* Power-up activation burst — glowing sparks in the power's color
     (used to be emoji glyphs). */
  .pburst {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--c, #ffe46b);
    box-shadow: 0 0 10px var(--c, #ffe46b);
    pointer-events: none;
    animation: pburst 700ms ease-out forwards;
    z-index: 50;
  }
  @keyframes pburst {
    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.8); }
  }

  /* Lightning bolt segment — drawn as a thin glowing line between
     two screen-space points. JS sets --x/--y/--len/--rot. */
  .bolt {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255, 230, 120, 0.95));
    box-shadow: 0 0 8px rgba(255, 230, 120, 1), 0 0 18px rgba(255, 255, 255, 0.7);
    transform-origin: left center;
    pointer-events: none;
    z-index: 30;
    animation: boltFade 320ms ease-out forwards;
  }
  @keyframes boltFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }

  #hud {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    font-size: clamp(14px, 2.5vw, 18px);
    z-index: 20;
    white-space: nowrap;
    align-items: center;
  }
  #hud b { color: #d6336c; }
  #hud .chip-combo,
  #hud .chip-mult,
  #hud .chip-freeze {
    display: none;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 800;
    font-size: clamp(12px, 2.3vw, 16px);
  }
  #hud .chip-combo.on { display: inline-block; background: linear-gradient(135deg, #ffe46b, #ffb547); color: #6a3f00; box-shadow: 0 0 8px rgba(255,181,71,0.6); }
  #hud .chip-mult.on  { display: inline-block; background: linear-gradient(135deg, #ff8fbf, #b36bff); color: #fff; box-shadow: 0 0 10px rgba(255,143,191,0.7); }
  #hud .chip-freeze.on{ display: inline-block; background: linear-gradient(135deg, #b8e8ff, #66a6ff); color: #0a3a6e; box-shadow: 0 0 8px rgba(120,180,255,0.7); }
  #hud .chip-combo.bump,
  #hud .chip-mult.bump  { animation: chipBump 280ms ease-out; }
  @keyframes chipBump {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.22); }
  }
  /* Last-10-seconds urgency — the old code recolored text that was
     already that color (invisible). */
  #hud .urgent {
    display: inline-block;
    background: #ffe3ea;
    border-radius: 999px;
    padding: 2px 8px;
    animation: timerPulse 1s ease-in-out infinite;
  }
  @keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
  }

  /* Banner that bursts in when you grab a power-up or hit a big combo. */
  #banner {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    font-size: clamp(28px, 7vw, 48px);
    font-weight: 900;
    color: #fff;
    text-shadow:
      -2px 0 0 #4a1a40, 2px 0 0 #4a1a40,
      0 -2px 0 #4a1a40, 0 2px 0 #4a1a40,
      0 4px 12px rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: opacity 240ms, transform 240ms;
    text-align: center;
    white-space: nowrap;
  }
  #banner.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }

  /* Wave indicator that pops up briefly when difficulty rises. */
  #wave-indicator {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    background: linear-gradient(135deg, #66a6ff, #b36bff);
    color: #fff;
    border-radius: 999px;
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 900;
    box-shadow: 0 0 16px rgba(120, 180, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms, transform 320ms;
    z-index: 22;
  }
  #wave-indicator.show {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }

  #home-btn, #music-btn {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    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;
    font-family: inherit;
    cursor: pointer;
  }
  #home-btn  { left: calc(10px + env(safe-area-inset-left, 0px)); }
  #music-btn { right: calc(10px + env(safe-area-inset-right, 0px)); }
  #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;
  }

  #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;
  }
  #endScreen.show { display: flex; }
  #endScreen.show .card { animation: cardPop 340ms cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes cardPop {
    from { transform: scale(0.6); opacity: 0; }
  }
  #endScreen .card {
    background: #fff;
    border: 6px solid var(--accent);
    border-radius: 24px;
    padding: 26px 30px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    max-width: 90vw;
  }
  #endScreen h2 { margin: 0 0 6px; color: var(--accent); font-size: clamp(26px, 5vw, 40px); }
  #endScreen p  { margin: 6px 0; font-size: clamp(16px, 2.7vw, 20px); }
  #endScreen .big-score { font-size: clamp(44px, 9vw, 72px); color: #d6336c; margin: 6px 0; }
  #endScreen #newBest {
    color: #ffaa00;
    font-weight: bold;
    font-size: clamp(18px, 3vw, 24px);
  }
  #endScreen #bestCombo {
    color: #b36bff;
    font-weight: bold;
    font-size: clamp(14px, 2.5vw, 17px);
    margin-top: 2px;
  }
  #endScreen .end-buttons {
    display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap;
  }
  #endScreen 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;
  }
  #endScreen button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--accent); }
  #endScreen #playAgain { background: var(--accent); color: #fff; }
  #endScreen #scoresBtn {
    background: linear-gradient(135deg, #ffd166, #ffaa00);
    color: #6a3f00;
    border-color: #e8960a;
    box-shadow: 0 3px 0 #c77e00;
  }
  #endScreen #scoresBtn:active { box-shadow: 0 1px 0 #c77e00; }
  #endScreen #noThanksBtn {
    background: linear-gradient(135deg, #66a6ff, #4d8fd8);
    color: #fff;
    border-color: #4d8fd8;
    box-shadow: 0 3px 0 #2d6db8;
  }
  #endScreen #noThanksBtn:active { box-shadow: 0 1px 0 #2d6db8; }

  .confetti {
    position: fixed;
    top: -30px;
    width: 24px;
    height: 24px;
    pointer-events: none;
    animation: confettiFall linear forwards;
    z-index: 35;
  }
  @keyframes confettiFall {
    to { transform: translateY(110vh) rotate(720deg); }
  }

  #author {
    position: fixed;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-style: italic;
    color: rgba(60,40,80,0.6);
    z-index: 5;
    pointer-events: none;
  }

  /* 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); }