#ballBonanzaGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF5E6 0%, #FFE8D0 50%, #FFF0DB 100%);
}

/* ---- Entities ---- */
.bb-ball, .bb-char {
  position: absolute;
  left: 0; top: 0;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}
.bb-ball { font-size: 50px; line-height: 1; z-index: 10; }
.bb-char { font-size: 60px; line-height: 1; z-index: 5; }
.bb-inner {
  display: inline-block;
  transform-origin: center center;
}
/* Emoji <img> uses 1em to match parent's font-size; JS overrides for dynamic sizes */
.bb-inner .emoji-img {
  display: block;
  width: 1em;
  height: 1em;
}


/* ---- Glow on hit ---- */
.bb-char.bb-glow .bb-inner { filter: brightness(1.8); }

/* ---- Reaction: Squash & Stretch ---- */
.bb-react-squash .bb-inner { animation: bbSquash 0.5s ease-out; }
@keyframes bbSquash {
  0% { transform: scaleY(1) scaleX(1); }
  20% { transform: scaleY(0.2) scaleX(1.4); }
  45% { transform: scaleY(1.2) scaleX(0.85); }
  65% { transform: scaleY(0.95) scaleX(1.05); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* ---- Reaction: Spin ---- */
.bb-react-spin .bb-inner { animation: bbSpin 0.8s ease-out; }
@keyframes bbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(1080deg); }
}

/* ---- Reaction: Bounce ---- */
.bb-react-bounce .bb-inner { animation: bbBounce 0.8s ease-out; }
@keyframes bbBounce {
  0% { transform: translateY(0); }
  15% { transform: translateY(-22px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-13px); }
  60% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* ---- Reaction: Flip ---- */
.bb-react-flip .bb-inner { animation: bbFlip 1.2s ease-in-out; }
@keyframes bbFlip {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(180deg); }
  80% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* ---- Reaction: Shock (eyes pop) ---- */
.bb-react-shock .bb-inner { animation: bbShock 0.4s ease-out; }
@keyframes bbShock {
  0% { transform: scale(1); }
  25% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---- Recovery wobble ---- */
.bb-wobble .bb-inner { animation: bbWobble 0.3s ease-out; }
@keyframes bbWobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(6deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* ---- Dizzy Stars ---- */
.bb-stars { position: absolute; top: 0; left: 50%; width: 0; height: 0; pointer-events: none; }
.bb-star {
  position: absolute;
  font-size: 14px;
  animation: bbStarOrbit 0.6s linear infinite;
}
.bb-star .emoji-img {
  width: 14px;
  height: 14px;
}
@keyframes bbStarOrbit {
  from { transform: rotate(var(--ss)) translateX(28px) rotate(calc(-1 * var(--ss))); }
  to   { transform: rotate(calc(var(--ss) + 360deg)) translateX(28px) rotate(calc(-1 * (var(--ss) + 360deg))); }
}

/* ---- Collision Flash ---- */
.bb-flash {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  pointer-events: none;
  z-index: 20;
  animation: bbFlashAnim 0.12s ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes bbFlashAnim {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}

/* ---- Impact Stars ---- */
.bb-impact-star {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 20;
  animation: bbStarBurst 0.35s ease-out forwards;
}
.bb-impact-star .emoji-img {
  width: 14px;
  height: 14px;
}
@keyframes bbStarBurst {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0.4); }
}

/* ---- Bonus / Mega text ---- */
.bb-event-text {
  position: absolute;
  font-family: 'Fredoka One', cursive;
  font-size: 52px;
  color: #FF6B8A;
  text-shadow: 2px 2px 0 #FFC75F, -1px -1px 0 #fff;
  pointer-events: none;
  z-index: 100;
  animation: bbTextPop 1s ease-out forwards;
}
@keyframes bbTextPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.25); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1) translateY(-40px); }
}

/* ---- Screen Shake ---- */
@keyframes bbShake {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3px,2px); }
  50%  { transform: translate(2px,-3px); }
  75%  { transform: translate(-2px,1px); }
  100% { transform: translate(0,0); }
}
.bb-shaking { animation: bbShake 0.2s ease-in-out; }

/* ---- Fidget: hop ---- */
.bb-fidget .bb-inner { animation: bbHop 0.3s ease-out; }
@keyframes bbHop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ---- Attention seeking ---- */
.bb-attention .bb-inner { animation: bbAttention 0.8s ease-in-out; }
@keyframes bbAttention {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-18px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-18px); }
  80% { transform: translateY(0); }
}

/* ---- Collectibles ---- */
.bb-collectible {
  position: absolute;
  left: 0; top: 0;
  user-select: none;
  pointer-events: none;
  will-change: transform;
  font-size: 38px;
  line-height: 1;
  z-index: 15;
  animation: bbCollectFloat 2s ease-in-out infinite;
}
.bb-collectible .emoji-img {
  width: 38px;
  height: 38px;
}
/* Golden aura circle behind collectible (like balloon game) */
.bb-collectible::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bbAuraPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
/* Color-coded auras per type */
.bb-collectible[data-type="star"]::before {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, rgba(255, 215, 0, 0) 70%);
}
.bb-collectible[data-type="clock"]::before {
  background: radial-gradient(circle, rgba(100, 180, 255, 0.45) 0%, rgba(100, 180, 255, 0) 70%);
}
.bb-collectible[data-type="circus"]::before {
  background: radial-gradient(circle, rgba(255, 107, 138, 0.45) 0%, rgba(255, 107, 138, 0) 70%);
}
@keyframes bbAuraPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); }
}

.bb-collectible .bb-inner {
  display: inline-block;
  transform-origin: center center;
  animation: bbCollectPulse 1.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes bbCollectFloat {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -6px; }
}
@keyframes bbCollectPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Pickup burst */
.bb-pickup-burst {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  animation: bbPickupBurst 0.5s ease-out forwards;
  font-size: 28px;
}
.bb-pickup-burst .emoji-img {
  width: 28px;
  height: 28px;
}
@keyframes bbPickupBurst {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0.6); }
  40%  { opacity: 1; transform: translate(-50%,-50%) scale(1.6); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2) translateY(-20px); }
}

/* Speed-up tint overlay */
.bb-speed-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,220,50,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: bbSpeedPulse 0.6s ease-in-out infinite alternate;
}
@keyframes bbSpeedPulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* ---- Subtle background pattern ---- */
#ballBonanzaGame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}