:root {
  --bg-deep: #050706;
  --bg-surface: #090d0b;
  --bg-card: #0e1310;
  --bg-card-hover: #131a16;
  
  /* Exact neon green sampled directly from TRAZZERS logo */
  --emerald-neon: #24fb1a;
  --emerald-bright: #41fc38;
  --emerald-glow: rgba(36, 251, 26, 0.45);
  --emerald-dim: #1ecb15;
  
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(36, 251, 26, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-deep);
  color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

/* FOUT Prevention & Smooth Entrance */
#page-loader {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #050706;
}
::-webkit-scrollbar-thumb {
  background: #142416;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #24fb1a;
}

.font-display {
  font-family: 'Anton', 'Syne', sans-serif;
  letter-spacing: 0.02em;
}

.font-heading {
  font-family: 'Syne', sans-serif;
}

.font-mono-num {
  font-variant-numeric: tabular-nums;
  font-family: 'Space Grotesk', monospace;
}

/* Background Atmosphere */
.bg-ambient-noir {
  background: 
    radial-gradient(ellipse 80% 50% at 50% -15%, rgba(36, 251, 26, 0.16), transparent 75%),
    radial-gradient(ellipse 60% 40% at 90% 65%, rgba(36, 251, 26, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 30% at 10% 90%, rgba(36, 251, 26, 0.04), transparent 60%),
    #050706;
}

.bg-dot-matrix {
  background-size: 32px 32px;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
}

/* Chrome & Neon Text */
.text-chrome {
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-chrome-green {
  background: linear-gradient(180deg, #bbfdc4 0%, #24fb1a 55%, #138a0c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glowing Elements */
.glow-neon {
  box-shadow: 0 0 25px -4px var(--emerald-glow);
}

.glow-neon-lg {
  box-shadow: 0 0 60px -10px var(--emerald-glow);
}

/* Live Beacon */
.live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--emerald-bright);
}

.live-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background-color: var(--emerald-neon);
  opacity: 0.6;
  animation: pulseBeacon 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(2.3); opacity: 0; }
  100% { transform: scale(2.3); opacity: 0; }
}

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

/* ROCK-SOLID CONTINUOUS MARQUEE (NO OVERLAP, NO CRASH) */
.marquee-container {
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marqueeLoop 30s linear infinite;
  will-change: transform;
}

@keyframes marqueeLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Custom Card Interactions */
.crew-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s ease, 
              box-shadow 0.35s ease;
  text-align: center;
  box-sizing: border-box;
}

.crew-card h3 {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

.crew-card p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: pre-line !important;
}

.crew-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.7), 0 0 25px -8px var(--emerald-glow);
}

.crew-card-live {
  border-color: rgba(36, 251, 26, 0.6) !important;
  box-shadow: 0 0 35px -5px rgba(36, 251, 26, 0.3) !important;
}

/* Clip Card */
.clip-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.clip-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 251, 26, 0.45);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6), 0 0 20px -8px var(--emerald-glow);
}

/* Modal styling */
.modal-backdrop {
  backdrop-filter: blur(16px);
  background-color: rgba(3, 5, 4, 0.92);
}

#player-modal .modal-card {
  width: 100%;
  max-width: min(94vw, 1380px);
}

/* UNIFIED LIVE STREAMER CARD (ONE SEAMLESS FRAME, ZERO LAYOUT SHIFT) */
.hero-live-card-wrapper {
  position: relative;
  z-index: 10;
}

.hero-live-card-wrapper:hover {
  z-index: 70 !important;
}

.hero-live-card {
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.8), 0 0 20px -5px var(--emerald-glow);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.hero-live-card-wrapper:hover .hero-live-card {
  box-shadow: 0 24px 48px -6px rgba(0, 0, 0, 0.95), 0 0 32px -4px var(--emerald-glow);
  border-color: rgba(36, 251, 26, 0.7);
  background-color: #07100b;
}

/* Idle state: single-line ellipsis (skrócony tytuł) */
.hero-live-card .live-title-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Expanded state on hover: wraps to full title naturally inside the exact same frame (tylko pełny tytuł) */
.hero-live-card-wrapper:hover .hero-live-card .live-title-text {
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  color: #f1f5f9;
}