/* ===== Base ===== */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1f1f1f; }
::-webkit-scrollbar-thumb { background: #dc2626; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #991b1b; }

/* ===== Shows marquee ===== */
.shows-marquee {
  animation: shows-scroll 60s linear infinite;
}
.shows-marquee:hover {
  animation-play-state: paused;
}

@keyframes shows-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Carousel track ===== */
#carousel-track {
  display: flex;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

#carousel-track:active {
  cursor: grabbing;
}

/* ===== Carousel vignettes ===== */
#shows-carousel::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
  z-index: 15;
  pointer-events: none;
}
#shows-carousel::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 120px; height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
  z-index: 15;
  pointer-events: none;
}

@media (max-width: 768px) {
  #shows-carousel::before,
  #shows-carousel::after {
    width: 40px;
  }

  #shows-carousel {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #shows-carousel::-webkit-scrollbar {
    display: none;
  }

  .shows-marquee {
    animation: none !important;
  }

  #carousel-track {
    width: max-content;
    touch-action: pan-x pan-y;
  }

  #carousel-track .snap-card {
    scroll-snap-align: start;
  }
}

/* ===== Stats marquee ===== */
.marquee-track {
  animation: marquee 40s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Line clamp ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Form validation error state ===== */
.input-error {
  border-color: #ef4444 !important;
}
.input-error::placeholder {
  color: #f87171;
}

/* ===== Smooth scroll ===== */
html {
  scroll-behavior: smooth;
}