:root {
  /* --- PALETTE NEON POP --- */
  --neon-1: #e2ff00;       /* Acid Yellow */
  --neon-2: #00ff88;       /* Spring Green */
  --neon-3: #6aff00;       /* Lime */
  
  --ink: #050505;          /* Deep Black */
  --ink-muted: rgba(5, 5, 5, 0.6);
  
  /* --- SURFACES (Glassmorphism) --- */
  --glass-high: rgba(255, 255, 255, 0.65);
  --glass-med: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.8);
  
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 999px; /* Pill shape */

  --shadow-card: 0 20px 40px -10px rgba(0, 50, 20, 0.15);
  --shadow-float: 0 10px 30px rgba(0,0,0,0.1);
}

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif;
  
  /* The Neon Gradient Background */
  background: 
    radial-gradient(at 0% 0%, var(--neon-1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, var(--neon-2) 0px, transparent 50%),
    radial-gradient(at 100% 100%, var(--neon-3) 0px, transparent 50%),
    radial-gradient(at 0% 100%, #fff 0px, transparent 50%),
    #e2ff00; /* Fallback */
  background-attachment: fixed;
  background-size: cover;
}

/* Typography Overrides */
.h1, .h2 {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* --- COMPONENTS --- */

/* 1. Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  padding: 10px 0;
}
.topbar.hidden {
  transform: translateY(-120%);
  opacity: 0;
}

/* 2. Cards */
.card, .card-soft {
  background: var(--glass-high);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

/* Utility to handle the "bg-noise" class from JS gracefully */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

.card-soft {
  background: var(--glass-med);
  border-radius: var(--radius-md);
  box-shadow: none;
  border: none;
}

/* 3. Buttons */
.btn {
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: var(--shadow-float);
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}
.btn:active { transform: scale(0.95); }

/* Ghost Button Variant */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid rgba(0,0,0,0.1);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.5);
  border-color: var(--ink);
}

/* 4. Inputs */
.input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: rgba(255,255,255,0.7);
  padding: 12px 20px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.input:focus {
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 5. Carousel & Posters */
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px;
  /* Hide scrollbar visually but allow scroll */
  scrollbar-width: none; 
}
.carousel::-webkit-scrollbar { display: none; }

.poster {
  width: 100px;
  height: 150px;
  border-radius: 16px;
  object-fit: cover;
  scroll-snap-align: start;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.poster:hover { transform: scale(1.05) rotate(1deg); }

.posterPlaceholder {
  width: 90px;
  height: 130px;
  border-radius: 16px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-align: center;
  padding: 5px;
  color: var(--ink-muted);
  font-weight: 700;
}

/* 6. Text Utilities */
.muted { color: var(--ink-muted); font-weight: 500; }
.link { color: var(--ink); font-weight: 700; text-decoration: underline; }

.safe-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}