/* Billboard page CSS - complements Tailwind utilities */
.billboard-card { transition: transform .2s ease, box-shadow .2s ease; }
.billboard-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.06); }
.rank-up { color: #16a34a; }
.rank-down { color: #dc2626; }
.glass { background: rgba(255,255,255,.7); backdrop-filter: saturate(180%) blur(12px); }
.dark .glass { background: rgba(24,24,27,.6); }

/* Full-width Billboard hero */
.billboard-hero {
  /* Vibrant purple/pink celebration gradient, inspired by entertainment theme */
  background: linear-gradient(135deg, #b51fd6 0%, #ff3f8e 35%, #8b5cf6 100%);
  position: relative;
}
.billboard-hero::before {
  /* radial glow overlay for depth */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1200px 400px at 10% 20%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(1200px 400px at 90% 80%, rgba(255,255,255,.14), transparent 65%);
  pointer-events: none;
}

/* Floating celebration bubbles */
.hero-bubble { position: absolute; border-radius: 9999px; opacity: .5; filter: blur(0.5px); }
.bubble-1 { width: 90px; height: 90px; background: #fb7185; top: 12%; left: 6%; animation: float1 10s ease-in-out infinite; }
.bubble-2 { width: 70px; height: 70px; background: #f0abfc; top: 70%; left: 12%; animation: float2 12s ease-in-out infinite; }
.bubble-3 { width: 120px; height: 120px; background: #a78bfa; top: 18%; right: 8%; animation: float3 11s ease-in-out infinite; }
.bubble-4 { width: 60px; height: 60px; background: #f472b6; bottom: 10%; right: 14%; animation: float4 13s ease-in-out infinite; }

@keyframes float1 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-12px) translateX(6px); } }
@keyframes float2 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-10px) translateX(-8px); } }
@keyframes float3 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-14px) translateX(10px); } }
@keyframes float4 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-9px) translateX(-6px); } }