* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Crimson Pro', serif;
  background: #0c0a09;
  color: #e7e5e4;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #1c1917;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #44403c;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #57534e;
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(147, 51, 234, 0.5);
  }
}

.setup-glow {
  animation: glow 2s ease-in-out infinite;
}

@keyframes progressGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
  }
}

.progress-glow {
  animation: progressGlow 1s ease-in-out infinite;
}

/* Card hover effects */
.candidate-card {
  transition: all 0.3s ease;
}

.candidate-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.2);
}

.staff-card {
  transition: all 0.3s ease;
}

.staff-card:hover {
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.2);
}

/* Event log styling */
.event-log {
  scrollbar-width: thin;
  scrollbar-color: #44403c #1c1917;
}

/* Fog effect for background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(88, 28, 135, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(88, 28, 135, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Button press effect */
button:active:not(:disabled) {
  transform: scale(0.97);
}

/* Input focus styling */
input:focus {
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.3);
}

/* Select styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a8a29e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
  .lg\:col-span-4,
  .lg\:col-span-5,
  .lg\:col-span-3 {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Flicker effect for ambient elements */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
  75% { opacity: 0.95; }
}