/*
  Ellie's Balloon Color Pop — scene-specific styling (v2). Shared
  chrome (topbar, speech bubble, character states, living-background
  decor, object float/correct/wrong animations) lives in
  games/shared/game-shell.css.
*/

#gameStage{
  background:
    radial-gradient(circle at 80% 15%, color-mix(in srgb, #fff 30%, transparent), transparent 42%),
    radial-gradient(circle at 12% 85%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 45%),
    linear-gradient(160deg, var(--blue) 0%, var(--purple) 60%, var(--coral) 130%);
}

/* Small, low-opacity balloons that lazily rise up and off the top of
   the scene, looping forever — pure atmosphere, never interactive. */
.env-bg-balloon{
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  opacity:0.32; animation-name:env-balloon-rise; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes env-balloon-rise{
  0%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-56vh) translateX(12px); }
  100%{ transform:translateY(-112vh) translateX(-10px); }
}
@media (prefers-reduced-motion:reduce){
  .env-bg-balloon{ animation:none; opacity:0.2; }
}

#ellieChar{
  right:4%; top:10%; left:auto; width:min(24vw,150px); height:min(24vw,150px);
}
/* Bubble sits BESIDE Ellie (to her left, since she's on the right edge
   of the scene) rather than above her, so it never clips against the
   stage's rounded top edge. */
#ellieChar .speech-bubble-game{
  right:100%; left:auto; top:50%; margin-right:14px; bottom:auto;
  transform-origin:right center; transform:translateY(-50%) scale(0.92);
}
#ellieChar .speech-bubble-game.is-visible{ transform:translateY(-50%) scale(1); }
#ellieChar .speech-bubble-game::after{ content:none; }

#balloonField{ position:absolute; inset:0; z-index:4; }

.balloon-wrap{ width:clamp(78px,15vw,132px); height:clamp(100px,19vw,168px); }
.balloon-tile{ background:none; }
.balloon-tile svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 10px 14px rgba(0,0,0,0.25)); }

@media (max-width:600px){
  #ellieChar{ width:120px; height:120px; }
}