/*
  ============================================================
  SNAP'S BUBBLE POP — GAME STYLES
  ============================================================
  Loaded after styles.css (color tokens/buttons) and game-shell.css
  (shared chrome: topbar, sound toggle, .completion-overlay/
  .completion-card used here for every screen, .game-character +
  the shared char-* expression keyframes, .game-progress for the
  "Level X of 3" bar). This file only adds what's new for this game:
  the HUD, the swamp scene per level, the floating bubble objects
  (regular/golden/stink/giant), the giant-bubble "trap" ring around
  Snap, and two Snap-specific reaction states (char-stink,
  char-trapped) that don't already exist in game-shell.css's shared
  set -- see snaps-bubble-pop.js's EXPR_CLASSES comment for why.
  ============================================================
*/

/* ---------- HUD ---------- */
.bubble-hud{
  position:relative; z-index:20; display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; padding:0 14px 8px; font-weight:800; font-size:0.92rem; color:var(--ink-soft);
}
/* Without this, the [hidden] attribute set in index.html is silently
   beaten by this rule's own "display:flex" at equal selector
   specificity, and the HUD would show on the start/pause/complete
   screens before gameplay begins -- the exact same trap game-shell.css
   already documents and guards against for .completion-next. (Verified
   this same trap is already present, unfixed, in the shipped
   brunos-honey-mayhem.css's .honey-hud -- out of scope to touch per
   the "don't modify existing games" instruction, but avoided here.) */
.bubble-hud[hidden]{ display:none; }
.bubble-hud-item{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
/* Same trap again, one level down: .bubble-hud-item's own "display:
   inline-flex" would otherwise beat [hidden] on #hudCombo (it starts
   hidden until the combo reaches 2 -- see updateComboHud() in
   snaps-bubble-pop.js). */
.bubble-hud-item[hidden]{ display:none; }
.bubble-hud-level{ color:var(--ink); }
.bubble-hud-combo{
  color:#B85B00; background:#FFE8B8; border-radius:999px; padding:3px 12px;
  animation:combo-pulse .5s ease;
}
@keyframes combo-pulse{ 0%{ transform:scale(0.7);} 60%{ transform:scale(1.12);} 100%{ transform:scale(1);} }
.bubble-pause-btn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; background:var(--surface); border:2px solid var(--line); cursor:pointer;
  font-size:1rem; box-shadow:0 3px 0 var(--line); margin-left:4px;
}
.bubble-pause-btn:hover{ transform:translateY(-1px); }

/* ---------- the swamp scene (per level) ---------- */
.bubble-stage{
  background:linear-gradient(180deg, #BFEFEA 0%, #8FDCD1 40%, #4FB6A6 75%, #2E8F82 100%);
}
.bubble-stage.env-trouble{
  background:linear-gradient(180deg, #B7ECD8 0%, #79D2AE 40%, #379C79 75%, #216E53 100%);
}
.bubble-stage.env-mayhem{
  background:linear-gradient(180deg, #D6E9FF 0%, #A6D6F5 35%, #6FB6E8 65%, #3D7FC9 100%);
}
.bubble-sky{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }

.bubble-water{
  position:absolute; left:0; right:0; bottom:0; height:22%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,110,95,0.0) 0%, rgba(15,95,85,0.55) 40%, rgba(10,75,68,0.75) 100%);
}
.bubble-water::before, .bubble-water::after{
  content:""; position:absolute; left:-10%; right:-10%; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.35); opacity:0.7;
  animation:bubble-ripple 5s ease-in-out infinite;
}
.bubble-water::before{ top:22%; animation-delay:-1.5s; }
.bubble-water::after{ top:52%; animation-delay:-3s; }
@keyframes bubble-ripple{ 0%,100%{ transform:scaleX(1) translateY(0); opacity:0.55; } 50%{ transform:scaleX(1.06) translateY(-3px); opacity:0.8; } }

/* ---------- decorative scenery: lily pads, reeds, flowers ---------- */
.bubble-scenery{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.scenery-pad{
  position:absolute; border-radius:50% 50% 45% 50%; background:radial-gradient(ellipse at 35% 30%, #7FCB6A, #3F9C4A 75%);
  box-shadow:inset 0 -4px 6px rgba(0,0,0,0.15); opacity:0.92;
}
.scenery-reed{
  position:absolute; bottom:0; width:8px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, #6BBE6A, #2F7A45); transform-origin:bottom center;
  animation:reed-sway 4.5s ease-in-out infinite;
}
@keyframes reed-sway{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
.scenery-flower{
  position:absolute; width:22px; height:22px; font-size:20px; line-height:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
@media (prefers-reduced-motion:reduce){
  .scenery-reed{ animation:none; }
}

/* ---------- Snap ---------- */
.bubble-stage .game-character{
  width:520px; height:520px; position:absolute; left:50%; bottom:2%; z-index:9;
  transform:translateX(-50%);
}
.bubble-stage .game-character img{ width:100%; height:100%; object-fit:contain; }
.bubble-stage #snapBubble{ left:50%; bottom:19%; transform:translateX(-20%); }
/* Same [hidden]-vs-"display:flex" trap as .bubble-hud above, this time
   on the shared .game-character class from game-shell.css (it sets its
   own display:flex, which beats index.html's "hidden" on #snapChar at
   equal specificity) -- scoped here to this page only, since
   game-shell.css itself is shared by every other game and out of
   scope to change. */
.bubble-stage .game-character[hidden]{ display:none; }

/* Stink reaction: a quick recoil + green tint pulse, since Snap's
   approved artwork has no separate "disgusted" pose to draw from --
   a transform + filter reaction only, no invented facial features. */
.char-stink img{ animation:snap-stink .7s ease; }
@keyframes snap-stink{
  0%{ transform:scale(1) rotate(0deg); filter:none; }
  25%{ transform:scale(0.9,1.06) rotate(-6deg) translateY(4px); filter:hue-rotate(60deg) saturate(1.4); }
  50%{ transform:scale(1.05,0.94) rotate(5deg) translateY(-2px); filter:hue-rotate(40deg) saturate(1.2); }
  75%{ transform:scale(0.97,1.02) rotate(-2deg); filter:hue-rotate(10deg); }
  100%{ transform:scale(1) rotate(0deg); filter:none; }
}

/* Giant-bubble trap: Snap floats gently upward inside the bubble ring
   (below) and settles back down -- a short, recoverable, purely
   decorative animation. Gameplay/timer/score keep running underneath
   it (see snaps-bubble-pop.js), so it can never lock the game. */
.char-trapped img{ animation:snap-trapped 1.3s ease-in-out; }
@keyframes snap-trapped{
  0%{ transform:translateY(0) rotate(0deg) scale(1); }
  30%{ transform:translateY(-38px) rotate(-6deg) scale(1.05); }
  50%{ transform:translateY(-46px) rotate(5deg) scale(1.05); }
  70%{ transform:translateY(-30px) rotate(-3deg) scale(1.02); }
  100%{ transform:translateY(0) rotate(0deg) scale(1); }
}
.bubble-trap-ring{
  position:absolute; left:50%; bottom:2%; width:600px; height:600px; z-index:8;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  border:4px solid rgba(255,255,255,0.55);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 60%);
  box-shadow:0 0 0 6px rgba(255,255,255,0.12), inset 0 0 24px rgba(255,255,255,0.35);
}
.bubble-trap-ring:not([hidden]){ animation:snap-trapped-ring 1.3s ease-in-out; }
@keyframes snap-trapped-ring{
  0%{ opacity:0; transform:translateX(-50%) translateY(0) scale(0.7); }
  15%{ opacity:1; }
  30%{ transform:translateX(-50%) translateY(-38px) scale(1); }
  70%{ transform:translateX(-50%) translateY(-30px) scale(1.02); }
  92%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(0) scale(0.8); }
}
@media (prefers-reduced-motion:reduce){
  .char-stink img, .char-trapped img, .bubble-trap-ring:not([hidden]){ animation:none; }
}

/* ---------- bubbles ---------- */
.bubble-field{ position:absolute; inset:0; z-index:6; overflow:hidden; }
.bubble-wrap{ position:absolute; will-change:transform; }
.bubble{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border:none; padding:0; cursor:pointer; border-radius:50%; position:relative;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,0.08), inset 6px 8px 14px rgba(255,255,255,0.55), 0 4px 8px rgba(0,0,0,0.15);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 34%),
    radial-gradient(circle at 68% 74%, rgba(255,255,255,0.35), rgba(255,255,255,0) 30%),
    var(--bubble-color, rgba(120,200,255,0.55));
}
.bubble:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.bubble-wrap.bt-pink .bubble{ --bubble-color: rgba(255,130,170,0.55); }
.bubble-wrap.bt-blue .bubble{ --bubble-color: rgba(110,190,255,0.55); }
.bubble-wrap.bt-yellow .bubble{ --bubble-color: rgba(255,221,110,0.6); }
.bubble-wrap.bt-purple .bubble{ --bubble-color: rgba(185,150,255,0.55); }
.bubble-wrap.bt-orange .bubble{ --bubble-color: rgba(255,175,110,0.58); }

/* Hit-detection safeguard: when two bubbles happen to overlap on screen,
   the browser's own hit-testing always routes a click to whichever
   element is physically on top -- z-index by TYPE (not spawn order)
   guarantees a rarer, more valuable bubble (golden/giant) is never
   hidden underneath -- and so never "unclickable" -- behind a common
   regular bubble, and that a stink bubble stays visible enough to be
   deliberately avoidable rather than accidentally obscuring something
   better. Two overlapping bubbles of the same type simply let either
   one register the tap, which is harmless since they're worth the same. */
.bubble-wrap{ z-index:1; }
.bubble-wrap.bt-stink{ z-index:2; }
.bubble-wrap.bt-golden{ z-index:3; }
.bubble-wrap.bt-giant{ z-index:4; }

.bubble-wrap.is-floating .bubble{ animation:bubble-wobble 2.6s ease-in-out infinite; }
@keyframes bubble-wobble{ 0%,100%{ transform:translateX(0) rotate(0deg);} 50%{ transform:translateX(4px) rotate(3deg);} }

/* Golden bonus bubble -- warm glow + sparkle ring */
.bubble-wrap.bt-golden .bubble{
  --bubble-color: rgba(255,205,60,0.7);
  box-shadow:inset -6px -8px 14px rgba(140,90,0,0.12), inset 6px 8px 14px rgba(255,255,255,0.7),
    0 0 16px 4px rgba(255,200,50,0.65), 0 4px 8px rgba(0,0,0,0.15);
}
.bubble-wrap.bt-golden .bubble::after{
  content:"✨"; position:absolute; top:-6px; right:-2px; font-size:0.8em;
  animation:golden-twinkle 1.1s ease-in-out infinite;
}
@keyframes golden-twinkle{ 0%,100%{ opacity:0.4; transform:scale(0.85);} 50%{ opacity:1; transform:scale(1.1);} }

/* Stink bubble -- green + cloudy look + a small stink-cloud indicator
   (never color alone: the wavy "cloud" glyph is the shape/marker). */
.bubble-wrap.bt-stink .bubble{
  --bubble-color: rgba(140,190,90,0.62);
  box-shadow:inset -6px -8px 14px rgba(40,70,10,0.18), inset 6px 8px 14px rgba(220,255,190,0.4),
    0 4px 8px rgba(0,0,0,0.2);
  filter:saturate(1.15);
}
.bubble-wrap.bt-stink .bubble::before{
  content:"💨"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:0.9em; filter:hue-rotate(70deg) saturate(1.6); opacity:0.9;
  animation:stink-drift 1.8s ease-in-out infinite;
}
@keyframes stink-drift{ 0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.7;} 50%{ transform:translateX(-50%) translateY(-5px); opacity:1;} }

/* Giant bubble -- large, transparent, rainbow highlight ring */
.bubble-wrap.bt-giant .bubble{
  --bubble-color: rgba(255,255,255,0.28);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,0.06), inset 8px 10px 18px rgba(255,255,255,0.6),
    0 0 0 3px rgba(255,255,255,0.5), 0 6px 14px rgba(0,0,0,0.18);
}
.bubble-wrap.bt-giant .bubble::before{
  content:""; position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,140,170,0.35), rgba(255,221,110,0.3), rgba(140,220,255,0.32),
    rgba(190,150,255,0.32), rgba(255,140,170,0.35));
  mix-blend-mode:screen; opacity:0.85;
  animation:giant-rainbow-spin 6s linear infinite;
}
@keyframes giant-rainbow-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .bubble-wrap.is-floating .bubble, .bubble-wrap.bt-golden .bubble::after,
  .bubble-wrap.bt-stink .bubble::before, .bubble-wrap.bt-giant .bubble::before{ animation:none; }
}

/* Popped -- reuses the same scale+fade language as the shared
   .game-object.is-correct pattern (game-shell.css), applied here to
   the wrap instead since bubbles use their own custom appearance. */
.bubble-wrap.is-popped{ animation:bubble-pop-out .35s ease forwards; pointer-events:none; z-index:7; }
@keyframes bubble-pop-out{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:0.7; }
  100%{ transform:scale(0.2); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .bubble-wrap.is-popped{ animation:bubble-pop-out-simple .2s ease forwards; }
  @keyframes bubble-pop-out-simple{ to{ transform:scale(0.6); opacity:0; } }
}

/* ---------- start / how-to-play / stats ---------- */
.bubble-start-card{ max-width:380px; }
.bubble-start-snap{
  width:130px; height:auto; margin:0 auto 10px; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.25));
}
.bubble-howto-card{ max-width:420px; text-align:left; }
.bubble-howto-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px; }
.bubble-howto-list li{ display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:0.95rem; line-height:1.35; }
.bubble-howto-icon{ flex:none; font-size:1.15rem; }
.bubble-stats{
  display:flex; flex-direction:column; gap:6px; margin:0 0 20px; font-weight:800; color:var(--ink);
  background:var(--surface-alt); border-radius:16px; padding:14px 18px;
}
.bubble-stats-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.95rem; }
.bubble-stats-row span:last-child{ color:var(--coral-ink); }

@media (max-width:600px){
  .bubble-hud{ font-size:0.8rem; gap:8px; padding:0 10px 6px; }
  .bubble-start-snap{ width:100px; }
  .bubble-stage .game-character{ width:360px; height:360px; }
  .bubble-trap-ring{ width:420px; height:420px; }
}

@media (max-height:700px){
  .bubble-hud{ padding:0 10px 4px; gap:6px; }
  .bubble-stage .game-character{ width:340px; height:340px; }
  .bubble-trap-ring{ width:380px; height:380px; }
}