/* =============================================
   BOLHAS.CSS – Estilos do jogo "Estourar Bolhas"
   Depende de css/global.css e css/games/_base.css.
   ============================================= */

html, body {
  --game-bg: linear-gradient(135deg, #2193B0 0%, #6DD5ED 100%);
  position: relative;
}

.game-header {
  position: fixed; top: 10px; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; gap: 8px;
}

/* BOLHAS */
.bubble {
  position: fixed;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: none;
  animation: bf var(--dur,3s) ease-in-out infinite alternate;
}
@keyframes bf {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(8px,-14px) scale(1.04); }
  66%  { transform: translate(-6px,-22px) scale(0.97); }
  100% { transform: translate(4px,-30px) scale(1.02); }
}
.bubble:active { transform: scale(0.88) !important; }

.bn {
  background: radial-gradient(circle at 35% 30%,rgba(255,255,255,0.85) 0%,rgba(120,200,255,0.6) 30%,rgba(50,150,230,0.45) 70%,rgba(20,100,200,0.3) 100%);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 18px rgba(100,200,255,0.3),inset 0 -4px 10px rgba(0,100,200,0.2);
}
.bs {
  background: radial-gradient(circle at 35% 30%,#fff9c4 0%,#fff176 40%,#ffd600 80%);
  border: 2px solid rgba(255,230,50,.7);
  box-shadow: 0 0 18px rgba(255,220,0,.5);
}
.bd {
  background: radial-gradient(circle at 35% 30%,#ffcdd2 0%,#ef9a9a 40%,#e53935 80%);
  border: 2px solid rgba(200,50,50,.5);
  box-shadow: 0 0 14px rgba(200,50,50,.4);
}

.b-pop {
  position: fixed; border-radius: 50%; pointer-events: none;
  animation: pop-out .4s ease forwards; z-index: 90;
}
@keyframes pop-out { 0%{transform:scale(.8);opacity:.9} 50%{transform:scale(1.5);opacity:.5} 100%{transform:scale(2.2);opacity:0} }

.float-pts {
  position: fixed; pointer-events: none;
  font-size: 1.4rem; font-weight: 900; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
  animation: fpu .85s ease forwards; z-index: 200;
}
@keyframes fpu { 0%{opacity:1;transform:translateY(0) scale(1.1)} 100%{opacity:0;transform:translateY(-65px) scale(.8)} }