/* Custom animations & Sport Broadcast style aesthetic */

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spinSlow 18s linear infinite;
}

/* Stadium Spotlight Beams */
.stadium-light-beams {
  background: radial-gradient(circle at 50% -20%, rgba(0, 255, 135, 0.18) 0%, rgba(0, 240, 255, 0.08) 40%, transparent 70%);
}

.glow-circle {
  box-shadow: 0 0 40px rgba(0, 255, 135, 0.15), inset 0 0 20px rgba(0, 255, 135, 0.1);
}

/* Category Card Styling */
.category-card {
  position: relative;
  background: linear-gradient(145deg, rgba(17, 59, 39, 0.8), rgba(7, 22, 14, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  padding: 0.85rem;
  text-align: right;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(0, 255, 135, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.category-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(0, 255, 135, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 255, 135, 0.2);
}

.category-card:active {
  transform: scale(0.97);
}

/* Choice Buttons for Questions */
.choice-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: rgba(12, 38, 25, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: right;
  transition: all 0.18s ease-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.choice-btn:hover:not(:disabled) {
  background: rgba(23, 84, 56, 0.95);
  border-color: rgba(0, 255, 135, 0.6);
  transform: translateX(-4px);
}

.choice-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #00FF87;
  font-size: 0.85rem;
  font-weight: 900;
  font-family: 'Tajawal', sans-serif;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.choice-text {
  flex: 1;
  word-break: break-word;
}

/* Answer States */
.choice-btn.correct {
  background: linear-gradient(90deg, #07572d, #0d8044) !important;
  border-color: #00FF87 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.6) !important;
  animation: pulseGreen 0.5s ease-out;
}

.choice-btn.correct .choice-letter {
  background: #00FF87;
  color: #040d08;
}

.choice-btn.incorrect {
  background: linear-gradient(90deg, #680d20, #911630) !important;
  border-color: #FF2E54 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 46, 84, 0.6) !important;
  animation: shakeX 0.4s ease-in-out;
}

.choice-btn.incorrect .choice-letter {
  background: #FF2E54;
  color: #ffffff;
}

.choice-btn.dimmed {
  opacity: 0.25;
  filter: grayscale(80%);
  pointer-events: none;
}

/* Lifeline buttons */
.lifeline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.4rem;
  background: rgba(12, 38, 25, 0.7);
  border: 1px solid rgba(0, 255, 135, 0.25);
  border-radius: 0.85rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lifeline-btn:hover:not(:disabled) {
  background: rgba(23, 84, 56, 0.8);
  border-color: rgba(0, 255, 135, 0.6);
  transform: translateY(-2px);
}

.lifeline-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.lifeline-btn:disabled {
  opacity: 0.35;
  border-color: rgba(255, 255, 255, 0.08);
  cursor: not-allowed;
  filter: grayscale(100%);
}

/* Keyframe animations */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@keyframes pulseGreen {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}