/* Temporary placeholder - would be replaced by actual Tailwind output */
/* This file will be overwritten when tailwind is properly built */

/* Base styles */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

/* Import Outfit font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Utility classes */
.container {
  width: 100%;
  max-width: 1200px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

/* Adding missing margin utilities */
.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-20 {
  margin-top: 5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.text-5xl {
  font-size: 3rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-extrabold {
  font-weight: 800;
}

.text-white {
  color: white;
}

/* Custom colors */
.text-silver {
  color: #c0c0c0;
}

.text-bronze {
  color: #cd7f32;
}

/* Text colors - Red */
.text-red-100 { color: #fee2e2; }
.text-red-200 { color: #fecaca; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }

/* Text colors - Green */
.text-green-100 { color: #dcfce7; }
.text-green-200 { color: #bbf7d0; }
.text-green-300 { color: #86efac; }
.text-green-400 { color: #4ade80; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-green-900 { color: #14532d; }

/* Text colors - Blue */
.text-blue-100 { color: #dbeafe; }
.text-blue-200 { color: #bfdbfe; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #3182ce; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }

/* Text colors - Gray */
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #718096; }
.text-gray-700 { color: #4b5563; }
.text-gray-800 { color: #2d3748; }
.text-gray-900 { color: #1f2937; }

.bg-white {
  background-color: white;
}

/* Background colors - Red */
.bg-red-100 { background-color: #fee2e2; }
.bg-red-200 { background-color: #fecaca; }
.bg-red-300 { background-color: #fca5a5; }
.bg-red-400 { background-color: #f87171; }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-700 { background-color: #b91c1c; }
.bg-red-800 { background-color: #991b1b; }
.bg-red-900 { background-color: #7f1d1d; }

/* Background colors - Green */
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-300 { background-color: #86efac; }
.bg-green-400 { background-color: #4ade80; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-800 { background-color: #166534; }
.bg-green-900 { background-color: #14532d; }

/* Background colors - Blue */
.bg-blue-100 { background-color: #ebf8ff; }
.bg-blue-200 { background-color: #bee3f8; }
.bg-blue-300 { background-color: #90cdf4; }
.bg-blue-400 { background-color: #63b3ed; }
.bg-blue-500 { background-color: #4299e1; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #2b6cb0; }
.bg-blue-800 { background-color: #2c5282; }
.bg-blue-900 { background-color: #1e3a8a; }

/* Background colors - Gray */
.bg-gray-100 { background-color: #f7fafc; }
.bg-gray-200 { background-color: #edf2f7; }
.bg-gray-300 { background-color: #e2e8f0; }
.bg-gray-400 { background-color: #cbd5e0; }
.bg-gray-500 { background-color: #a0aec0; }
.bg-gray-600 { background-color: #718096; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #1a202c; }

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

/* Rounded corner utilities */
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.min-h-screen {
  min-height: 100vh;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

/* Flex direction */
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

/* Flex wrap */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Flex grow and shrink */
.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

/* Order utilities */
.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Align items */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* Justify content */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.space-x-4 > * + * {
  margin-left: 1rem;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 300ms;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:bg-blue-50:hover {
  background-color: #ebf5ff;
}

.hover\:bg-blue-700:hover {
  background-color: #2b6cb0;
}

.hover\:text-blue-200:hover {
  color: #bee3f8;
}

.hover\:text-blue-400:hover {
  color: #63b3ed;
}

.hover\:bg-white:hover {
  background-color: white;
}

.hover\:text-gray-800:hover {
  color: #2d3748;
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.w-6 {
  width: 1.5rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-64 {
  width: 16rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.h-6 {
  height: 1.5rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.transform {
  transform: translateZ(0);
}

/* Border colors */
.border-gray-700 {
  border-color: #374151;
}

.border-gray-800 {
  border-color: #1f2937;
}

.border-blue-500 {
  border-color: #3b82f6;
}

/* Hover border utilities */
.hover\:border-blue-500:hover {
  border-color: #3b82f6;
}

/* Border width */
.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

/* Custom effects for borders and text */
.neon-border {
  box-shadow: 0 0 5px rgba(66, 153, 225, 0.5), 0 0 10px rgba(66, 153, 225, 0.3);
}

.neon-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 600; /* Semi-bold looks better with neon effect */
  text-shadow: 0 0 5px rgba(66, 153, 225, 0.5), 0 0 10px rgba(66, 153, 225, 0.3);
}

/* Custom Animations */
@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(66, 153, 225, 0);
  }
}

.animate-pulse-border {
  animation: pulse-border 2s infinite;
}

/* Custom Animations for Podium Cards */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

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

/* Make animation delay different for each card */
.podium-card:nth-child(1) .float-animation {
  animation-delay: 0s;
}

.podium-card:nth-child(2) .float-animation {
  animation-delay: 0.5s;
}

.podium-card:nth-child(3) .float-animation {
  animation-delay: 1s;
}

/* Hover stops animation and adds zoom */
.podium-card:hover .float-animation {
  animation-play-state: paused;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(66, 153, 225, 0.6);
}

/* Updated hover styles to ensure single border appearance */
.podium-card .float-animation {
  position: relative;
  border: none; /* Remove the default border */
  box-shadow: 0 0 0 1px rgba(55, 65, 81, 0.7); /* Use box-shadow to simulate border */
  transition: box-shadow 0.3s ease;
}

.podium-card .float-animation:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.8), 0 0 10px rgba(66, 153, 225, 0.6);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.gap-10 {
  gap: 2.5rem;
}

.gap-16 {
  gap: 4rem;
}

/* Removed duplicate mb-12 class */

/* Animation play state */
.paused {
  animation-play-state: paused;
}

.running {
  animation-play-state: running;
}

/* Scale effects */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:scale-103:hover {
  transform: scale(1.03);
}

/* Translate effects */
.hover\:-translate-y-4:hover {
  transform: translateY(-1rem);
}

/* Text truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gradient text background */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Additional responsive classes for the leaderboard */
@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:hidden {
    display: none;
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
  
  .md\:mb-0 {
    margin-bottom: 0;
  }
  
  .md\:-mt-8 {
    margin-top: -2rem;
  }
  
  .md\:items-end {
    align-items: flex-end;
  }
  
  .md\:order-0 {
    order: 0;
  }
  
  .md\:order-1 {
    order: 1;
  }
  
  .md\:order-2 {
    order: 2;
  }
  
  .md\:order-3 {
    order: 3;
  }
  
  .md\:order-first {
    order: -9999;
  }
  
  .md\:order-last {
    order: 9999;
  }
  
  .md\:order-none {
    order: 0;
  }
  
  .md\:gap-8 {
    gap: 2rem;
  }
  
  .md\:gap-16 {
    gap: 4rem;
  }
}

/* Percentage-based widths */
.w-full {
  width: 100%;
}

.w-1\/2 {
  width: 50%;
}

.w-3\/4 {
  width: 75%;
}

.w-4\/5 {
  width: 80%;
}

/* Responsive widths */
@media (min-width: 768px) {
  .md\:w-full {
    width: 100%;
  }
  
  .md\:w-1\/2 {
    width: 50%;
  }
  
  .md\:w-3\/4 {
    width: 75%;
  }
  
  .md\:w-4\/5 {
    width: 80%;
  }
}

@media (min-width: 1024px) {
  .lg\:w-full {
    width: 100%;
  }
  
  .lg\:w-1\/2 {
    width: 50%;
  }
  
  .lg\:w-3\/4 {
    width: 75%;
  }
  
  .lg\:w-4\/5 {
    width: 80%;
  }
}

/* Additional responsive utilities for the leaderboard */
.hover\:neon-border:hover {
  box-shadow: 0 0 5px rgba(66, 153, 225, 0.5), 0 0 10px rgba(66, 153, 225, 0.3);
}

/* Make sure inner divs with bg-color don't overlap the border */
.podium-card .float-animation > div:first-child {
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
  width: calc(100% + 2px);
}

/* Position ribbon container */
.ribbon-container {
  position: relative;
  overflow: hidden;
}

/* Base ribbon styling */
.ribbon {
  position: absolute;
  top: 24px;
  left: -82px;
  transform: rotate(-45deg);
  width: 150px;
  text-align: center;
  padding: 6px 0;
  font-weight: 700; /* Bold looks better with Outfit */
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
  letter-spacing: 0.6px; /* Slightly wider spacing for ribbons */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gold ribbon for 1st place */
.ribbon-gold {
  background: linear-gradient(to bottom, #f0cb62 0%, #ffed85 50%, #d5a743 100%);
  color: #8f5a0c;
  box-shadow: 0 0 8px rgba(240, 203, 98, 0.5);
}

/* Silver ribbon for 2nd place */
.ribbon-silver {
  background: linear-gradient(to bottom, #e0e0e0 0%, #f5f5f5 50%, #c0c0c0 100%);
  color: #555555;
  box-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}

/* Bronze ribbon for 3rd place */
.ribbon-bronze {
  background: linear-gradient(to bottom, #d3a36f 0%, #e7bf9e 50%, #cd7f32 100%);
  color: #6b4423;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

/* Adjustments for different screen sizes */
@media (min-width: 768px) {
  .ribbon {
    top: 18px;
    left: -90px;
  }
}

/* Ribbon shadow and effects */
.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  bottom: -10px;
  z-index: -1;
}

.ribbon::before {
  left: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0, 0, 0, 0.2);
}

.ribbon::after {
  right: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0, 0, 0, 0.2);
}

/* Make the ribbon appear over the card content */
.ribbon-container .ribbon {
  z-index: 2;
}

/* Ensure the ribbon doesn't interfere with card content */
.ribbon-container .p-6 {
  position: relative;
  z-index: 1;
  padding-top: 1.75rem; /* Increased padding top to give more space for ribbon */
}

/* Adding glow to the ribbons on hover */
.podium-card:hover .ribbon-gold {
  box-shadow: 0 0 12px rgba(240, 203, 98, 0.8);
  transform: rotate(-45deg) scale(1.05);
}

.podium-card:hover .ribbon-silver {
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.8);
  transform: rotate(-45deg) scale(1.05);
}

.podium-card:hover .ribbon-bronze {
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.8);
  transform: rotate(-45deg) scale(1.05);
}

/* Add transition for smooth hover effects */
.ribbon {
  transition: all 0.3s ease;
}

/* Center the text within the ribbon */
.ribbon span {
  display: inline-block;
  width: 100%;
  text-align: center;
  position: relative;
  left: 2px; /* Slight adjustment to visually center the text */
}

/* Header row styling */
.table-header {
  font-weight: bold;
  color: #63b3ed; /* blue-400 */
}
.table-header.neon-text {
  text-shadow: 0 0 5px rgba(66, 153, 225, 0.5), 0 0 10px rgba(66, 153, 225, 0.3);
}

/* Table alignment fixes */
.wagered-column {
  width: 8rem; /* w-32 equivalent */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: right;
  flex-shrink: 0;
}

.prize-column {
  width: 5rem; /* w-20 equivalent */
  text-align: center;
  flex-shrink: 0;
  margin-left: 1rem;
  margin-right: 0.5rem;
}

/* Ensure proper text alignment within columns */
.text-right-align {
  text-align: right;
}

/* Font family specific styling */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em; /* Slightly tighter letter spacing for headings */
}

/* Specific font weights for better visual hierarchy */
.text-5xl {
  font-weight: 800; /* Extra bold for main heading */
  letter-spacing: -0.03em; /* Even tighter for large headers */
}

.text-3xl {
  font-weight: 700; /* Bold for section headers */
}

/* Leaderboard selector image styling */
.leaderboard-option {
  transition: transform 0.3s ease;
}

.leaderboard-option .bg-gray-800 {
  box-sizing: content-box;
  width: 198px; /* 192px (w-48) + 6px (padding) */
  height: 75px; /* Reduced to about half the original height */
}

/* Ensure the image container has proper positioning context */
.leaderboard-option .relative {
  position: relative;
  height: 100%;
}

.leaderboard-option img {
  transition: transform 0.2s ease-in-out;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.leaderboard-option:hover img {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Rules alert animation */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.rules-fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* Enhanced rules box styling */
#leaderboard-rules {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2), 
              0 0 5px rgba(59, 130, 246, 0.3),
              inset 0 0 10px rgba(59, 130, 246, 0.1);
}

/* Extra space for rules content */
#rules-content {
  line-height: 1.6;
  color: #d1d5db; /* text-gray-300 */
  font-family: 'Outfit', sans-serif;
  font-weight: 300; /* Light weight for better readability */
  letter-spacing: 0.01em;
}

/* Common animation for leaderboard elements */
@keyframes fadeInScale {
  0% { 
    opacity: 0; 
    transform: translateY(15px) scale(0.95); 
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* Animation classes for ranked items (4-10th spots) */

.rank-item-fade-in {
  animation: fadeInScale 0.5s ease-out forwards;
  animation-delay: calc(var(--rank-index) * 0.08s);
  opacity: 0; /* Start with opacity 0 to prevent flash */
}

/* Dramatic title reveal */
@keyframes titleReveal {
  0% { 
    opacity: 0;
    transform: translateY(-20px); 
    text-shadow: 0 0 0px rgba(66, 153, 225, 0);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0);
    text-shadow: 0 0 5px rgba(66, 153, 225, 0.5), 0 0 10px rgba(66, 153, 225, 0.3);
  }
}

.title-reveal {
  animation: titleReveal 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* Enhanced neon effect on hover for the rules box */
#leaderboard-rules:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 
              0 0 8px rgba(59, 130, 246, 0.4),
              inset 0 0 12px rgba(59, 130, 246, 0.15);
  border-color: rgba(96, 165, 250, 0.8);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Smooth transition for other winners container */
#other-winners-container {
  transition: opacity 0.2s ease-out;
}