/* Base styles */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: #121212;
  color: #e0e0e0;
}

/* Dark theme overrides */
.dark-theme {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

.dark-theme .bg-red-900 {
  background-color: #1a0505;
}

.dark-theme footer {
  border-top: 1px solid var(--dark-border);
}

.dark-theme h1, 
.dark-theme h2, 
.dark-theme h3 {
  color: var(--dark-text);
}

.dark-theme p {
  color: var(--dark-text-secondary);
}

.dark-theme .text-gray-600,
.dark-theme .text-gray-700,
.dark-theme .text-gray-800 {
  color: var(--dark-text-secondary) !important;
}

.dark-theme .bg-white {
  background-color: var(--dark-surface) !important;
}

.dark-theme .bg-gray-50,
.dark-theme .bg-gray-100,
.dark-theme .bg-red-50,
.dark-theme .bg-red-100 {
  background-color: var(--dark-surface-2) !important;
}

/* Stats card backgrounds */
.dark-theme .bg-gradient-to-br.from-red-50.to-red-100 {
  background: linear-gradient(to bottom right, #2a1212, #3d1919) !important;
  border: 1px solid #4e2222;
}

.dark-theme .bg-gradient-to-br.from-gray-50.to-gray-100 {
  background: linear-gradient(to bottom right, #1e1e1e, #2c2c2c) !important;
  border: 1px solid #333333;
}

.dark-theme .bg-gradient-to-r.from-gray-50.to-white {
  background: linear-gradient(to right, #1e1e1e, #262626) !important;
}

/* Tournament table backgrounds */
.dark-theme .bg-gradient-to-r.from-red-50.to-red-100 {
  background: linear-gradient(to right, #2a1212, #3d1919) !important;
}

.dark-theme tr.bg-white {
  background-color: var(--dark-surface) !important;
}

.dark-theme tr.bg-gray-50 {
  background-color: #1a1a1a !important;
}

.dark-theme .border-gray-100 {
  border-color: var(--dark-border) !important;
}

.dark-theme .text-red-700 {
  color: var(--red-light) !important;
}

/* Fix text colors in stats cards */
.dark-theme .text-4xl.font-bold.text-red-700,
.dark-theme .text-5xl.font-bold.text-red-700 {
  color: var(--red-accent) !important;
}

.dark-theme .text-4xl.font-bold.text-gray-700,
.dark-theme .text-5xl.font-bold.text-gray-700 {
  color: #e0e0e0 !important;
}

.dark-theme .text-sm.font-medium {
  color: #cccccc !important;
}

/* Stat cards specific styles */
.dark-theme .bg-yellow-100 {
  background-color: #3d3012 !important;
}

.dark-theme .text-yellow-800 {
  color: #fcd34d !important;
}

.dark-theme .bg-orange-100 {
  background-color: #3d2612 !important;
}

.dark-theme .text-orange-800 {
  color: #fdba74 !important;
}

.dark-theme .bg-blue-100 {
  background-color: #172554 !important;
}

.dark-theme .text-blue-800 {
  color: #93c5fd !important;
}

/* Upcoming tournament */
.dark-theme .bg-red-50.rounded-lg.border.border-red-100 {
  background-color: #2a1212 !important;
  border-color: #4e2222 !important;
}

/* Win percentage bar */
.dark-theme .bg-gray-200 {
  background-color: #333333 !important;
}

.dark-theme .bg-red-600 {
  background-color: var(--red-primary) !important;
}

/* Table adjustments */
.dark-theme .border-b {
  border-color: #333333 !important;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Dark theme variables */
:root {
  --dark-bg: #121212;
  --dark-surface: #1e1e1e;
  --dark-surface-2: #2d2d2d;
  --dark-text: #e0e0e0;
  --dark-text-secondary: #a0a0a0;
  --dark-border: #333333;
  --red-primary: #DE1912;
  --red-dark: #B01410;
  --red-light: #F02419;
  --red-accent: #FF6B5B;
}

/* Custom animations and styles */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growWidth {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes counterAnimate {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

.animate-slideUp {
  animation: slideUp 0.8s ease-out forwards;
}

.animate-growWidth {
  animation: growWidth 1s ease-out forwards;
}

.counter-animate {
  animation: counterAnimate 0.5s ease-out forwards;
}

.animation-delay-150 {
  animation-delay: 150ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

/* Hero section */
.hero-section {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add padding when navigation is sticky */
body.nav-sticky #content-section {
  padding-top: 80px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.85));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: var(--dark-text);
  padding: 0 1rem;
}

/* Navigation styles */
.main-nav {
  background: linear-gradient(to right, var(--red-dark), var(--red-primary));
  color: var(--dark-text);
  position: relative;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
  border-bottom: 1px solid var(--dark-border);
}

.main-nav.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.nav-item {
  position: relative;
  cursor: pointer;
  padding: 1rem;
  font-weight: 500;
  transition: colors 0.3s;
}

.nav-item.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: white;
  border-radius: 4px 4px 0 0;
  animation: growWidth 0.3s ease-out;
}

/* Stats cards */
.stat-card {
  background: var(--dark-surface);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  border-color: var(--red-dark);
}

/* Fix for chart container */
#statsChart {
  max-height: 200px;
  height: 200px;
}

/* Video cards */
.video-card {
  background: var(--dark-surface);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  border-color: var(--red-dark);
}

.video-thumbnail {
  position: relative;
  overflow: hidden;
}

.video-thumbnail img {
  transition: transform 0.5s;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--red-primary);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, background-color 0.3s;
}

.video-card:hover .play-button {
  opacity: 1;
}

/* Timeline styles */
.timeline-container {
  position: relative;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red-primary);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  margin-bottom: 4rem;
}

.timeline-item:nth-child(even) {
  justify-content: flex-end;
}

.timeline-content {
  width: 45%;
  padding: 1.5rem;
  background: var(--dark-surface);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  border-left: 4px solid var(--red-primary);
  transition: transform 0.3s;
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
}

.timeline-content:hover {
  transform: translateY(-4px);
  border-color: var(--red-light);
}

.timeline-dot {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  background: var(--red-primary);
  border: 4px solid var(--dark-surface);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Fix container overflow */
  .container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden;
  }
  
  /* Responsive text adjustments */
  h1 {
    font-size: 2.5rem !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
  }
  
  /* Fix table overflow */
  .overflow-x-auto {
    max-width: 100vw;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Responsive nav adjustments */
  .nav-item {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }
  
  /* Timeline adjustments */
  .timeline-line {
    left: 20px;
  }
  
  .timeline-item,
  .timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-left: 50px;
  }
  
  .timeline-content {
    width: 100%;
  }
  
  .timeline-dot {
    left: 20px;
  }
  
  /* Video card adjustments */
  .video-card {
    max-width: 100%;
  }
  
  /* Flex column on mobile for featured content */
  .flex-col-mobile {
    flex-direction: column !important;
  }
  
  /* Chart responsive size */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  body {
    font-size: 0.9rem;
  }
  
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  .hero-content {
    padding: 0 0.75rem;
  }
  
  /* Smaller padding for cards */
  .stat-card, .video-card .p-6 {
    padding: 1rem;
  }
  
  /* Fix small screen grid */
  .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix for chart container on mobile */
  #statsChart, .stat-card canvas {
    height: 180px !important;
    max-height: 180px !important;
  }
  
  /* Fix for stats cards spacing */
  .stat-card {
    margin-bottom: 1rem;
  }
  
  /* Adjust grid gaps */
  .gap-8 {
    gap: 1rem !important;
  }
}
  
  /* Adjust video container on mobile */
  .featured-video-container {
    flex-direction: column !important;
  }
  
  .featured-video-container > div {
    width: 100% !important;
  }
  
  /* Reduce padding on mobile */
  .p-6 {
    padding: 1rem !important;
  }
  
  /* Adjust table on small screens */
  th, td {
    padding: 0.5rem !important;
  }
}