*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
  body{font-family:'Archivo Black',system-ui,sans-serif;position:relative;
    background:linear-gradient(160deg,#fcf8f0 0%,#f2f6fc 46%,#fbf2f1 100%)}
  body::before{content:"";position:absolute;inset:0;z-index:0;
    background-image:radial-gradient(#0000000d 1.5px,transparent 1.5px);background-size:34px 34px;pointer-events:none}

  /* ---- DECORATIVE BACKGROUND (light, drifting) ---- */
  #bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
  #bg .blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.16;animation:drift ease-in-out infinite}
  #bg .flower{position:absolute;background-repeat:no-repeat;background-size:contain;opacity:.55;animation:drift ease-in-out infinite}
  .blob.a{width:380px;height:380px;background:#ffd400;left:-90px;top:6%;animation-duration:23s}
  .blob.b{width:340px;height:340px;background:#1d70b8;right:-80px;top:26%;animation-duration:28s;animation-delay:-6s}
  .blob.c{width:320px;height:320px;background:#e63946;left:14%;bottom:-110px;animation-duration:26s;animation-delay:-12s}
  .blob.d{width:300px;height:300px;background:#2a9d4a;right:16%;bottom:4%;animation-duration:31s;animation-delay:-3s}
  .f1{width:84px;height:84px;left:9%;top:21%;animation-duration:25s;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%233a3026' stroke-width='4'><circle cx='50' cy='24' r='16' fill='%23ff7eb0'/><circle cx='76' cy='42' r='16' fill='%23ff7eb0'/><circle cx='66' cy='73' r='16' fill='%23ff7eb0'/><circle cx='34' cy='73' r='16' fill='%23ff7eb0'/><circle cx='24' cy='42' r='16' fill='%23ff7eb0'/><circle cx='50' cy='50' r='14' fill='%23ffd400'/></g></svg>")}
  .f2{width:70px;height:70px;right:11%;top:13%;animation-duration:21s;animation-delay:-8s;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%233a3026' stroke-width='4'><circle cx='50' cy='24' r='16' fill='%235aa9ff'/><circle cx='76' cy='42' r='16' fill='%235aa9ff'/><circle cx='66' cy='73' r='16' fill='%235aa9ff'/><circle cx='34' cy='73' r='16' fill='%235aa9ff'/><circle cx='24' cy='42' r='16' fill='%235aa9ff'/><circle cx='50' cy='50' r='14' fill='%23ffd400'/></g></svg>")}
  .f3{width:76px;height:76px;left:72%;top:57%;animation-duration:27s;animation-delay:-5s;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%233a3026' stroke-width='4'><circle cx='50' cy='24' r='16' fill='%23ff6b6b'/><circle cx='76' cy='42' r='16' fill='%23ff6b6b'/><circle cx='66' cy='73' r='16' fill='%23ff6b6b'/><circle cx='34' cy='73' r='16' fill='%23ff6b6b'/><circle cx='24' cy='42' r='16' fill='%23ff6b6b'/><circle cx='50' cy='50' r='14' fill='%23ffd400'/></g></svg>")}
  .f4{width:90px;height:90px;left:19%;bottom:9%;animation-duration:24s;animation-delay:-10s;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%233a3026' stroke-width='4'><circle cx='50' cy='24' r='16' fill='%23b18bff'/><circle cx='76' cy='42' r='16' fill='%23b18bff'/><circle cx='66' cy='73' r='16' fill='%23b18bff'/><circle cx='34' cy='73' r='16' fill='%23b18bff'/><circle cx='24' cy='42' r='16' fill='%23b18bff'/><circle cx='50' cy='50' r='14' fill='%23ffd400'/></g></svg>")}
  @keyframes drift{0%,100%{translate:0 0}50%{translate:24px -28px}}

  #stage{position:absolute;inset:0;overflow:hidden;z-index:1}
  .title{position:absolute;top:max(16px,env(safe-area-inset-top));left:0;right:0;text-align:center;
    font-size:clamp(22px,6vw,44px);color:#111;letter-spacing:2px;text-transform:uppercase;pointer-events:none;z-index:5}
  .title span{padding:4px 10px;border:4px solid #111;background:#ffd400;box-shadow:6px 6px 0 #111}
  .title b{display:inline-block;min-width:1.2em;color:#e63946}
  @keyframes scorebump{0%{transform:scale(1.7)}100%{transform:scale(1)}}

  /* ---- BALLOON ---- */
  .bubble{position:absolute;bottom:-260px;color:#e63946;
    background:radial-gradient(ellipse 34% 26% at 32% 24%,rgba(255,255,255,.45),transparent 60%),currentColor;
    border:6px solid #111;border-radius:50% 50% 50% 50% / 60% 60% 42% 42%;
    box-shadow:8px 8px 0 rgba(0,0,0,.18);will-change:transform;animation:rise linear forwards}
  .bubble::before{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
    width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:15px solid #111}
  .bubble::after{content:"";position:absolute;left:50%;top:100%;margin-top:13px;width:16px;height:42px;
    border-left:3px solid #111;border-bottom:3px solid #111;border-bottom-left-radius:16px;
    transform:translateX(-50%) rotate(8deg)}
  @keyframes rise{0%{transform:translateY(0)}100%{transform:translateY(-130vh)}}

  /* special balloon */
  /* special: a cute cartoon teddy bear instead of a balloon */
  .special{border:none;border-radius:0;box-shadow:none;
    filter:drop-shadow(4px 6px 5px rgba(0,0,0,.28));
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%236b4423' stroke-width='3' stroke-linejoin='round'><circle cx='28' cy='24' r='12' fill='%23b3793f'/><circle cx='72' cy='24' r='12' fill='%23b3793f'/><circle cx='28' cy='24' r='6' fill='%23e2b07a' stroke='none'/><circle cx='72' cy='24' r='6' fill='%23e2b07a' stroke='none'/><ellipse cx='50' cy='73' rx='23' ry='21' fill='%23b3793f'/><ellipse cx='50' cy='75' rx='13' ry='13' fill='%23e2b07a' stroke='none'/><circle cx='23' cy='63' r='10' fill='%23b3793f'/><circle cx='77' cy='63' r='10' fill='%23b3793f'/><circle cx='35' cy='88' r='10' fill='%23b3793f'/><circle cx='65' cy='88' r='10' fill='%23b3793f'/><circle cx='35' cy='90' r='5' fill='%23e2b07a' stroke='none'/><circle cx='65' cy='90' r='5' fill='%23e2b07a' stroke='none'/><circle cx='50' cy='40' r='24' fill='%23b3793f'/><ellipse cx='50' cy='47' rx='12' ry='9' fill='%23e2b07a' stroke='none'/><circle cx='41' cy='36' r='3.2' fill='%235a3a1a' stroke='none'/><circle cx='59' cy='36' r='3.2' fill='%235a3a1a' stroke='none'/><ellipse cx='50' cy='43' rx='4' ry='3' fill='%235a3a1a' stroke='none'/></g></svg>") center/contain no-repeat;
    animation:rise linear forwards,wobble 1.1s ease-in-out infinite}
  .special::before,.special::after{display:none}
  @keyframes wobble{0%,100%{rotate:-4deg}50%{rotate:4deg}}

  /* ---- EXPLOSION PARTICLES (all fly OUTWARD via --fx/--fy) ---- */
  .ring{position:absolute;border-radius:50%;border:7px solid #111;pointer-events:none;
    transform:translate(-50%,-50%) scale(.06);animation:ring .5s ease-out forwards}
  @keyframes ring{0%{transform:translate(-50%,-50%) scale(.06);opacity:1}
    100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

  .frag{position:absolute;border-radius:50%;border:4px solid #111;pointer-events:none;
    transform:translate(-50%,-50%);animation:fly .7s cubic-bezier(.15,.7,.25,1) forwards}
  .sq{position:absolute;border:4px solid #111;pointer-events:none;
    transform:translate(-50%,-50%);animation:flyspin .8s cubic-bezier(.15,.7,.25,1) forwards}
  .glit{position:absolute;border-radius:50%;pointer-events:none;box-shadow:0 0 8px currentColor;
    transform:translate(-50%,-50%);animation:twinkle .8s ease-out forwards}
  .star{position:absolute;pointer-events:none;-webkit-text-stroke:3px #111;line-height:1;
    transform:translate(-50%,-50%);animation:flystar .9s cubic-bezier(.15,.7,.25,1) forwards}

  @keyframes fly{0%{transform:translate(-50%,-50%) scale(1);opacity:1}
    100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(.35);opacity:0}}
  @keyframes flyspin{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}
    100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) rotate(var(--rot)) scale(.35);opacity:0}}
  @keyframes twinkle{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
    30%{opacity:1;transform:translate(calc(-50% + var(--fx)*.5),calc(-50% + var(--fy)*.5)) scale(1.5)}
    100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(0);opacity:0}}
  @keyframes flystar{0%{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:1}
    100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1.2) rotate(var(--rot));opacity:0}}

  .flash{position:fixed;inset:0;background:#ffd400;pointer-events:none;animation:flash .35s ease-out forwards;z-index:3}
  @keyframes flash{0%{opacity:.5}100%{opacity:0}}