@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;600&display=swap');

body {
  background-color: #050505;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
}
h1, h2, h3, .bebas {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
}

/* Prevent horizontal scroll bugs on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Responsive typography scaling for mobile cinematic headers */
@media (max-width: 768px) {
  h1 {
    font-size: 3.5rem !important;
    line-height: 0.95 !important;
  }
  
  /* Scale down massive background orbs on mobile so they don't blind the UI */
  .floating-orb {
    filter: blur(100px);
    opacity: 0.04;
  }
}

/* Cinematic Floating Background - Refined */
.ambient-bg {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  overflow: hidden;
  z-index: -2;
  background-color: #030303; /* Pure pitch black base */
}

/* This overlay acts as a camera vignette, crushing the light at the edges */
.ambient-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(3,3,3,0) 0%, rgba(3,3,3,0.85) 70%, rgba(3,3,3,1) 100%);
  pointer-events: none;
}

.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(180px); /* Massive blur for ultra-smooth diffusion */
  animation: float 25s infinite ease-in-out alternate;
  pointer-events: none;
}

.orb-1 {
  width: 60vw; height: 60vw;
  background: #E50914; 
  top: -10%; left: -10%;
  opacity: 0.06; /* Drastically reduced from 0.5 for a faint glow */
  animation-duration: 30s;
}

.orb-2 {
  width: 40vw; height: 40vw;
  background: #D4AF37; /* Gold */
  bottom: 0%; right: -10%;
  opacity: 0.03; /* Barely visible, just warming up the dark corners */
  animation-duration: 35s;
  animation-delay: -5s;
}

.orb-3 {
  width: 50vw; height: 50vw;
  background: #5a0000; /* Deep crimson instead of bright red */
  top: 40%; left: 30%;
  opacity: 0.08;
  animation-duration: 40s;
  animation-delay: -10s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 50px) scale(1.05); } /* Slowed down the movement */
}

/* Refined Circular Progress Animation */
.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 4; /* Thinner, sleeker stroke */
}

.circle-progress {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.circle-judges {
  stroke: #E50914;
  filter: drop-shadow(0 0 10px rgba(229, 9, 20, 0.6));
}

.circle-public {
  stroke: #D4AF37;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
}

.animate-progress-60 { animation: fill60 2s ease-out forwards 0.5s; }
.animate-progress-40 { animation: fill40 2s ease-out forwards 0.5s; }

@keyframes fill60 { to { stroke-dashoffset: 150.8; } } 
@keyframes fill40 { to { stroke-dashoffset: 226.2; } } 

/* Glassmorphism Classes */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  transform: translateY(-5px);
  border-color: rgba(229, 9, 20, 0.5);
  box-shadow: 0 10px 30px -10px rgba(229, 9, 20, 0.2);
}