/* =============================================
   bubble.css — Bubble Shooter Game Styles
   Mini Games Hub — Premium Gaming UI
   ============================================= */

/* ---- Canvas wrapper accent ---- */
.bubble-canvas-wrap {
  border-color: rgba(247, 37, 133, 0.35);
  box-shadow: 0 0 60px rgba(247, 37, 133, 0.12), 0 20px 60px rgba(0,0,0,0.6);
}

.bubble-canvas-wrap:hover {
  box-shadow: 0 0 80px rgba(247, 37, 133, 0.22), var(--shadow-xl);
}

#canvas {
  background: linear-gradient(180deg, #050510 0%, #0a0820 50%, #0d0d1a 100%);
  display: block;
  border-radius: var(--radius-lg);
  max-width: 100%;
  height: auto;
}

/* ---- Stat card accents ---- */
.bubble-accent {
  border-color: rgba(247, 37, 133, 0.4) !important;
  background: rgba(247, 37, 133, 0.07) !important;
}

.bubble-accent .stat-card-value {
  color: var(--clr-neon-pink) !important;
  text-shadow: 0 0 16px rgba(247, 37, 133, 0.5);
}

.bubble-shots-card .stat-card-value {
  color: #00d4ff;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

/* ---- Overlay accents ---- */
#start-overlay .overlay-title {
  background: linear-gradient(135deg, #f72585, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#ov .overlay-title {
  background: linear-gradient(135deg, #ff6b6b, #f72585);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Score pop animation ---- */
@keyframes scorePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); color: #f72585; }
  100% { transform: scale(1); }
}

.score-pop {
  animation: scorePop 0.35s ease;
}

/* ---- Responsive ---- */
@media (max-width: 520px) {
  #canvas {
    width: 100%;
  }

  .bubble-canvas-wrap {
    width: 100%;
  }
}