/* ============================================================
   ZEUS — style.css
   Apple TV+ premium aesthetic · yellow-lightning ZEUS accents
   Pure black canvas · deep-gray surfaces · SF-style typography
   Frosted-glass vibrancy · pill buttons · cinematic hero
   Ambient content-driven colour glow · brand-authentic tabs
   ============================================================ */

/* Apple TV+ typography — Inter (SF Pro fallback ladder below) —
   plus the authentic brand fonts for the provider tabs:
   Bebas Neue (Netflix), Poppins (Prime / Hulu), Roboto (Paramount). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@700;900&family=Roboto:wght@700;900&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Surfaces */
  --bg: #000000;
  --bg-surface: #1C1C1E;
  --bg-elevated: #2C2C2E;
  --bg-glass: rgba(28, 28, 30, 0.72);
  --bg-glass-light: rgba(255, 255, 255, 0.15);

  /* Text */
  --text-primary: #F5F5F7;
  --text-secondary: #86868B;
  --text-tertiary: #48484A;

  /* Accents (Apple system palette) */
  --white: #FFFFFF;
  --blue: #2997FF;
  --green: #30D158;
  --red: #FF453A;
  --yellow: #FFD60A;

  /* ZEUS lightning accents — REAL lightning yellow. The bolt
     reads yellow-gold with a white-hot core; red stays for
     badges / watchlist hearts so nothing else breaks. */
  --accent-primary: #FFD700;          /* electric lightning yellow */
  --accent-secondary: #FFFFFF;
  --accent-core: #FFF200;             /* white-hot yellow core */
  --accent-glow: rgba(255, 215, 0, 0.6);

  /* Lines */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Geometry */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 30px;
  --radius-full: 999px;
  --nav-height: 64px;
  --banner-height: 0px; /* grows when the disclaimer banner is visible */

  /* Layout */
  --container-w: 1540px;  /* wider desktop canvas (was 1400px) */
  --container-pad: 48px;

  /* Elevation */
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.6);
  --glow-player: 0 0 0 1px rgba(255, 255, 255, 0.07),
                 0 0 90px rgba(255, 255, 255, 0.07),
                 0 34px 90px rgba(0, 0, 0, 0.75);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-buttery: cubic-bezier(0.16, 1, 0.3, 1); /* snappy, buttery motion */
  --transition: all 0.35s var(--ease);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Crisp, GPU-friendly text rendering everywhere */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;       /* Apple TV+ tight body text */
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;             /* no horizontal jank, ever */
}

/* Apple TV+ headings — heavy, tight, confident */
h1,
h2,
.hero-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* GPU acceleration for the animated hot paths */
.movie-card,
.hero,
.trailer-video {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

input,
select {
  font: inherit;
}

::selection {
  background: var(--accent-primary);
  color: #000;
}

/* Thin, discreet dark scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: 99px;
  border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Attribute-hidden wins over everything */
[hidden] {
  display: none !important;
}

/* Class-hidden: soft fade used by the page loader & player overlay */
.page-loader,
.player-loading {
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.no-scroll {
  overflow: hidden;
}

/* ============================================================
   2b. AMBIENT LIGHTING BACKGROUND — Apple TV+ cinematic glow
   ------------------------------------------------------------
   #ambient-bg is a fixed, full-screen layer behind everything
   (z-index: -2). Its ::before paints --ambient-image (set by
   JS from the hero slide / hovered card's backdrop) blurred
   120px and saturated 180% at 40% opacity, so the entire site
   floats in the colours of whatever is on screen. Its ::after
   sweeps a slow, subtle god-ray light beam across the view,
   and the #ambient-vignette overlay darkens the edges for a
   theatre-grade frame. Hovering a card repaints the glow with
   that title's art; leaving the cards restores the page's base.
   ============================================================ */
#ambient-bg,
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #000;
  pointer-events: none;
}

#ambient-bg::before,
.ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ambient-image, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(180%);
  transform: scale(1.3); /* keep the wash larger than the viewport */
  opacity: 0.4;
  transition: background-image 1.5s ease, opacity 1s ease;
}

/* God rays — a very soft light beam drifting across the background */
#ambient-bg::after,
.ambient-bg::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, 0.03) 45%,
              rgba(255, 255, 255, 0.06) 50%,
              rgba(255, 255, 255, 0.03) 55%,
              transparent);
  transform: translateX(-100%) rotate(15deg);
  animation: light-drift 25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes light-drift {
  0%   { transform: translateX(-100%) rotate(15deg); }
  100% { transform: translateX(100vw) rotate(15deg); }
}

/* Cinematic vignette — dark edges, brighter centre — sits on
   top of the ambient glow but below all content. */
#ambient-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0) 55%,
              rgba(0, 0, 0, 0.28) 78%,
              rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* ============================================================
   3. UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Wider desktop canvas: above the tablet breakpoint the
   container takes 94vw (capped at 1540px) so more of each
   row fits on wide screens; tablet/mobile keep the fluid
   full-width layout untouched. */
@media (min-width: 1025px) {
  .container {
    width: 94vw;
  }
}

/* Apple look: no colored title bars anywhere */
.title-bar {
  display: none;
}

.dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.7s var(--ease-out) both;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmerSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Skeleton building blocks */
.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
}
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  animation: shimmerSweep 1.7s infinite;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
}
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }

/* ============================================================
   4. PAGE LOADER — POWER RANGERS SKY-TO-GROUND ⚡ ENTRANCE
   ------------------------------------------------------------
   Theatrical movie intro: dark prelude with volumetric god-rays
   and floating electric dust (0–1s), a massive jagged SVG bolt
   cracking down the full screen with branching tendrils (1.0–
   1.2s), screen flash + camera shake + shockwave rings on impact
   (~1.2s), the metallic ZEUS emerging from the smoke/glow
   (1.3–2.8s), then a slow luxurious 1s blur/scale dissolution
   into the site (api.js drives the ~3.8s timeline).
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
  cursor: pointer; /* click anywhere to skip */
  /* Slow, luxurious dissolution: scale + blur + fade (1s) */
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 1s ease;
  will-change: opacity, transform, filter;
}

/* Sequence gate: api.js adds .pr-go the moment the strike
   machinery is armed — every timed animation (camera shake, bolt
   crack, flash, rings, ZEUS reveal, bar) then starts in the SAME
   frame, so the choreography can never be scrambled by late
   parsing. No fill-mode on the shake keeps the transform channel
   free for the .hidden exit transition. */
.page-loader.pr-go {
  animation: thunder-shake 0.35s ease-out 1.18s 1;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.08);
  filter: blur(20px);
}

/* Impact camera shake: a quick ~200ms vibration with a damped
   tail. A pinch of scale keeps the shaken overlay fully
   covering the viewport (no background slivers at the edges). */
@keyframes thunder-shake {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  14%  { transform: translate3d(-11px, 6px, 0) scale(1.02); }
  30%  { transform: translate3d(9px, -7px, 0) scale(1.02); }
  46%  { transform: translate3d(-6px, -4px, 0) scale(1.015); }
  62%  { transform: translate3d(5px, 4px, 0) scale(1.01); }
  78%  { transform: translate3d(-3px, 2px, 0) scale(1.005); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* --- Atmosphere 1: rotating volumetric god-rays --- */
.page-loader::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background:
    conic-gradient(from 0deg at 50% 46%,
      transparent 0deg,
      rgba(255, 215, 0, 0.10) 10deg,
      transparent 24deg,
      transparent 78deg,
      rgba(255, 215, 0, 0.06) 92deg,
      transparent 108deg,
      transparent 160deg,
      rgba(255, 215, 0, 0.09) 174deg,
      transparent 190deg,
      transparent 250deg,
      rgba(255, 215, 0, 0.05) 264deg,
      transparent 280deg,
      transparent 330deg,
      rgba(255, 215, 0, 0.08) 344deg,
      transparent 360deg);
  filter: blur(32px);
  animation: ambient-godrays 9s linear infinite;
  pointer-events: none;
}

@keyframes ambient-godrays {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.6; }
  50%  { transform: rotate(180deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}

/* --- Atmosphere 2: radial ambient light behind the logo --- */
.page-loader::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96vmin;
  height: 96vmin;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: radial-gradient(circle,
    rgba(255, 215, 0, 0.12) 0%,
    rgba(255, 215, 0, 0.05) 30%,
    transparent 62%);
  animation: ambient-pulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ambient-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* --- Atmosphere 3: floating electric dust (injected by api.js) --- */
.loader-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.loader-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 244, 200, 0.95) 0%,
    rgba(255, 215, 0, 0.55) 45%,
    transparent 75%);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  opacity: 0;
  animation: particle-drift 9s linear infinite;
  will-change: transform, opacity;
}

@keyframes particle-drift {
  0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  14%  { opacity: var(--p-opacity, 0.5); }
  82%  { opacity: calc(var(--p-opacity, 0.5) * 0.75); }
  100% { transform: translate3d(var(--p-dx, 60px), var(--p-dy, -130px), 0) scale(1.2); opacity: 0; }
}

/* ============================================================
   4b. SMOOTH MENU TRANSITIONS (in-site navigation)
   ------------------------------------------------------------
   Clicking any internal link fades the page content into the
   site's black surface (the navbar stays on screen), the next
   page skips its black loading screen, and the new content
   fades back in — no hard reload flash, no black screen.
   ============================================================ */
@keyframes zeusPageIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.hero,
main,
footer,
.ad-banner-wrapper {
  animation: zeusPageIn 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* While the cinematic loader holds the stage, the page content
   waits just off-state (scale 0.97 / opacity 0) and reveals the
   moment the loader starts dissolving (api.js drops .cine-hold)
   — a buttery crossfade with zero harsh cuts or black pops. */
body.cine-hold .hero,
body.cine-hold main,
body.cine-hold footer,
body.cine-hold .ad-banner-wrapper {
  animation: none;
  opacity: 0;
}

/* Leaving: only the content melts into the dark surface —
   navbar, disclaimer strip and ambient glow stay put. */
body.nav-leaving .hero,
body.nav-leaving main,
body.nav-leaving footer,
body.nav-leaving .ad-banner-wrapper,
body.nav-leaving .back-to-top {
  animation: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Mobile drawer, when open, fades away with the content */
body.nav-leaving .nav-menu.open {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.4s var(--ease-out);
}

/* Arrived via an in-site transition: the black loader never shows */
html.no-page-loader #page-loader {
  display: none !important;
}

.loader-logo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  perspective: 900px; /* gives the ZEUS reveal real 3D depth */
}

/* Electric arcs pulse across the word after the strike (armed
   with the rest of the sequence via .pr-go) */
.page-loader.pr-go .loader-logo {
  animation: logo-aura 2.2s ease-in-out 1.5s infinite;
}

/* The old static bolt icon is retired — the sky-to-ground SVG
   strike (injected by api.js) replaces it entirely. */
.loader-bolt { display: none; }

/* Yellow electric arcs pulsing around the revealed word */
@keyframes logo-aura {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.28)); }
  50%      { filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.75)); }
}

/* --- The strike: full-screen jagged SVG lightning (api.js
       builds a fresh random bolt shape on every visit) --- */
.loader-skybolt {
  position: absolute;
  inset: 0;
  z-index: 2; /* above the rays/dust, behind the ZEUS word */
  pointer-events: none;
  animation: skybolt-life 1.9s linear 0.95s both;
}
.loader-skybolt svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bolt lifecycle: snaps on just before the crack, lingers
   glowing through the impact, then smokes away as ZEUS
   resolves out of its afterglow. */
@keyframes skybolt-life {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Electric Yellow outer glow layer — intense 35px halo */
.loader-skybolt .sky-glow {
  fill: none;
  stroke: #FFD700;
  stroke-width: 9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 35px #FFD700);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    bolt-crack 0.2s cubic-bezier(0.65, 0, 0.85, 0.45) 1s both,
    sky-flicker 0.55s ease-in-out 1.25s infinite;
}

/* White-hot core riding the same path */
.loader-skybolt .sky-core {
  fill: none;
  stroke: #FFF200;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px #FFF200);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    bolt-crack 0.2s cubic-bezier(0.65, 0, 0.85, 0.45) 1s both,
    sky-flicker 0.55s ease-in-out 1.3s infinite;
}

/* Branching "sky cracks" forking off the main bolt */
.loader-skybolt .sky-tendril {
  fill: none;
  stroke: #FFD700;
  stroke-width: 1.6px;
  stroke-linecap: round;
  opacity: 0.75;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    bolt-crack 0.16s cubic-bezier(0.65, 0, 0.85, 0.45) both,
    sky-flicker 0.5s ease-in-out 1.35s infinite;
}

/* The crack: dashoffset 1 -> 0 draws each path from its start
   (the sky) down to the ground in 0.2s. pathLength="1" on every
   path normalises the dash maths. */
@keyframes bolt-crack {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Residual electric jitter while the bolt lingers */
@keyframes sky-flicker {
  0%, 100% { opacity: 0.7; }
  45%      { opacity: 1; }
  60%      { opacity: 0.82; }
  80%      { opacity: 0.95; }
}

/* --- Impact FX 1: blinding screen flash (illumination pop at
       the moment the bolt lands) --- */
.loader-flash {
  position: absolute;
  inset: 0;
  z-index: 4; /* washes over everything for a heartbeat */
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    #ffffff 0%,
    rgba(255, 242, 0, 0.9) 18%,
    rgba(255, 215, 0, 0.5) 42%,
    rgba(255, 215, 0, 0.12) 65%,
    transparent 82%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: sky-thunder-flash 0.62s ease-out 1.16s both;
}

@keyframes sky-thunder-flash {
  0%   { opacity: 0; }
  9%   { opacity: 0.95; } /* first blinding pop */
  22%  { opacity: 0.28; }
  36%  { opacity: 0.78; } /* second reverberation */
  100% { opacity: 0; }
}

/* --- Impact FX 2: shockwave rings expanding from the strike
       core (behind where ZEUS emerges) --- */
.loader-shockwave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
}
.loader-shockwave::before,
.loader-shockwave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46vmin;
  height: 46vmin;
  margin: -23vmin 0 0 -23vmin; /* centred on the strike core */
  border: 2px solid #FFD700;
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.55),
    inset 0 0 26px rgba(255, 215, 0, 0.3);
  opacity: 0;
}
.loader-shockwave::before {
  animation: sky-shockwave 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.18s both;
}
.loader-shockwave::after {
  animation: sky-shockwave 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.38s both;
}

@keyframes sky-shockwave {
  0%   { transform: scale(0); opacity: 0.95; }
  60%  { opacity: 0.32; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- Impact FX 3: ground burst where the bolt lands --- */
.loader-impact-glow {
  position: absolute;
  left: 50%;
  bottom: -12vh;
  width: 76vw;
  height: 34vh;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 242, 0, 0.55) 0%,
    rgba(255, 215, 0, 0.28) 38%,
    transparent 72%);
  filter: blur(6px);
  opacity: 0;
  animation: impact-glow 1.1s ease-out 1.18s both;
}

@keyframes impact-glow {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.3); }
  16%  { opacity: 0.95; transform: translateX(-50%) scaleY(1.15); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

/* The handoff into the dissolution is driven by api.js listening
   for the name-reveal animationend (1.45s delay + 1.35s duration
   = exactly 2.8s) — the exit therefore starts in perfect sync
   with the CSS entrance clock, no matter when first paint lands. */

/* 3D cinematic typography: the word emerges from the strike's
   smoke/glow with deep tracking expanding 2px -> 12px, while a
   metallic gold/white shimmer sweeps the letters. Hidden until
   .pr-go arms the sequence. */
.loader-name {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 12px;
  margin-right: -12px; /* optically re-centres the tracking */
  color: #fff;
  background: linear-gradient(105deg,
    #ffffff 0%, #FFD700 30%, #fffbe8 46%,
    #f6e27a 56%, #ffffff 72%, #FFD700 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}

.page-loader.pr-go .loader-name {
  animation:
    name-reveal 1.35s cubic-bezier(0.16, 1, 0.3, 1) 1.45s both,
    name-shimmer 2.6s linear 2.3s infinite;
}

@keyframes name-reveal {
  0%   { opacity: 0; transform: scale(0.8) translateZ(-70px); letter-spacing: 2px; margin-right: -2px; filter: blur(14px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateZ(0); letter-spacing: 12px; margin-right: -12px; filter: blur(0); }
}

@keyframes name-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* Gradient-clip fallback: solid gold on engines without
   background-clip:text (text stays fully legible). */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .loader-name {
    background: none;
    color: #FFD700;
    -webkit-text-fill-color: #FFD700;
  }
}

.loader-name span {
  color: var(--text-secondary);
  font-weight: 400;
}

.loader-bar {
  position: relative;
  z-index: 1;
  width: 168px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  opacity: 0; /* hidden until .pr-go arms the sequence */
}

.page-loader.pr-go .loader-bar {
  animation: loader-bar-in 0.5s ease 2s both;
}

@keyframes loader-bar-in {
  from { opacity: 0; transform: scaleX(0.3); }
  to   { opacity: 1; transform: scaleX(1); }
}
.loader-bar::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-core), var(--accent-primary));
  box-shadow: 0 0 12px var(--accent-glow);
  animation: loaderSlide 1.15s var(--ease) infinite;
}
@keyframes loaderSlide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(340%); }
}

/* ============================================================
   5. DISCLAIMER BANNER (dismissible)
   ============================================================ */
body.banner-visible {
  --banner-height: 52px;
}

.disclaimer-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  /* Solid strip — NO blur, NO border: the header area stays
     sharp and the page reads as one continuous surface. */
  background: #141416;
}

.disclaimer-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding-block: 10px;
}

.disclaimer-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.disclaimer-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: var(--transition);
}
.disclaimer-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.disclaimer-close svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ============================================================
   6. NAVBAR — fully SOLID, zero blur, zero translucency
   ============================================================ */
.navbar {
  position: fixed;
  top: var(--banner-height);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  /* Solid bar — nothing frosted, nothing see-through: the hero
     stays razor-sharp underneath and scrolling stays cheap. */
  background: rgba(0, 0, 0, 0.92);
  transition: background 0.4s ease;
}
.navbar.scrolled {
  background: #000;
}

/* ============================================================
   6b. NAVBAR OVER HERO — 1FLEX style (homepage only)
   ------------------------------------------------------------
   The header floats transparently over the top of the hero so
   artwork and nav read as one continuous cinematic surface.
   Scrolling past 30px swaps in the same solid dark bar used
   everywhere else on the site — still zero blur, zero frost.
   ============================================================ */
.navbar.nav-hero {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}
.navbar.nav-hero.scrolled {
  background: rgba(0, 0, 0, 0.92);
}

.nav-container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  height: 100%;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Logo — ZEUS wordmark image with yellow lightning bolt.
   REAL lightning-strike animation: the bolt mostly idles with a
   tight glow, then every 6s it strikes — white-hot flash, brief
   blackout, double flash — exactly how lightning behaves. */
.nav-logo {
  position: relative; /* anchors the electric-arc particles */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: lightning-strike 6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.35));
}
.nav-logo-img {
  display: block;
  height: 30px;
  width: auto;
}

/* The strike: idle -> flash (white-hot, brightness 2) -> dip ->
   bigger flash (brightness 2.5) -> settle -> long idle. */
@keyframes lightning-strike {
  0%, 100% {
    filter: drop-shadow(0 0 4px #FFD700) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    opacity: 1;
  }
  5% {
    filter: drop-shadow(0 0 20px #FFF200) drop-shadow(0 0 40px #FFD700) brightness(2);
    opacity: 1;
  }
  8% { opacity: 0.3; }
  12% {
    filter: drop-shadow(0 0 30px #FFF200) drop-shadow(0 0 60px #FFD700) brightness(2.5);
    opacity: 1;
  }
  15% {
    opacity: 1;
    filter: drop-shadow(0 0 4px #FFD700);
  }
  50% { filter: drop-shadow(0 0 4px #FFD700); }
}

/* Electric-arc particles around the logo (spawned by api.js):
   small yellow jagged lines that flicker in and out — and, on
   logo hover, shoot outward from the bolt (the burst). */
.logo-arc {
  position: absolute;
  width: 13px;
  height: 17px;
  color: var(--accent-core);
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.85));
  pointer-events: none;
  z-index: 60;
  animation: arcFlicker 0.42s steps(2, end) 1 both;
}
.logo-arc svg {
  width: 100%;
  height: 100%;
  display: block;
}
.logo-arc--burst {
  animation: arcShoot 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}
@keyframes arcFlicker {
  0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  30%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
  55%  { opacity: 0.25; }
  75%  { opacity: 0.95; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(0.8); }
}
@keyframes arcShoot {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25%  { opacity: 1; transform: translate(calc(var(--tx, 20px) * 0.35), calc(var(--ty, -20px) * 0.35)) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(0.7); }
}

.nav-menu {
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.nav-link:hover {
  color: #fff;
}
.nav-link.active {
  /* 1FLEX-style solid pill — same visual language as the active
     server buttons: white capsule, dark text. */
  color: #000;
  background: #fff;
}
.nav-link.active:hover {
  color: #000;
}

.chevron {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform 0.3s ease;
}
.nav-dropdown.open .chevron {
  transform: rotate(180deg);
}
.nav-dropdown.open .dropdown-toggle {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Genre dropdown — solid floating panel (no frosted glass) */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(500px, 90vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 10px;
  background: #1C1C1E; /* opaque — nothing blurry bleeds through */
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 100;
}
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Nav action icons */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: var(--transition);
}
.search-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.search-toggle.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.search-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 50%;
  transition: background 0.3s ease;
}
.hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
}
.hamburger span {
  width: 19px;
  height: 1.6px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.35s var(--ease), opacity 0.25s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
}

/* ============================================================
   7. HERO — edge-to-edge cinematic banner
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 600px;
  overflow: hidden;
  /* Transparent so the ambient glow lives BEHIND the hero and
     the slides' bottom fade blends into the page — one
     continuous dark surface, no hard cut at the hero's edge. */
  background: transparent;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
  pointer-events: none;
  /* Bottom fade into the page surface (dots/arrows/mute live
     outside .hero-slide, so they stay fully opaque). */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 89%, transparent 100%);
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 22%;
  transform: scale(1.02);
}
.hero-slide.active .hero-backdrop {
  animation: heroZoom 16s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.09); }
}

/* Muted direct-MP4 trailer layer — sits above the backdrop,
   below the gradient, and fades in/out smoothly. The <video>
   inside (class .trailer-video) cover-fills the hero with ZERO
   UI of its own; when no stream is available the backdrop
   itself gets the Ken Burns pan (see .trailer-fallback). */
.hero-trailer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: #000;
  transition: opacity 1s ease;
  pointer-events: none;
  overflow: hidden;
}
.hero-trailer.playing {
  opacity: 1;
}
.hero-trailer .trailer-video {
  position: absolute;
  inset: 0;
}

/* Gradient only fades to black at the very bottom —
   the center of the artwork stays clear and cinematic. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 48%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.85) 88%,
    #000 100%
  );
}

/* Hero copy lives at the bottom-left, just above the fade */
.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding-bottom: 104px;
  pointer-events: none;
}
.hero-content .container {
  position: relative;
}
.hero-text {
  max-width: 640px;
  pointer-events: auto;
}

.hero-media-type {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.45);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero-title {
  font-size: clamp(40px, 5.8vw, 80px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.hero-genres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hero-genre-chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.hero-overview {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin-bottom: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Slide indicators — Apple-style elongating pills */
.hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 38px;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.32);
  transition: width 0.35s var(--ease), background 0.35s ease;
}
.hero-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}
.hero-dot.active {
  width: 26px;
  background: #fff;
}

/* Prev / next arrows — solid circles (no frosted glass) */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 11, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.35s ease, background 0.3s ease, transform 0.3s var(--ease);
}
.hero:hover .hero-arrow {
  opacity: 1;
}
.hero-arrow:hover {
  background: rgba(44, 44, 46, 0.8);
}
.hero-arrow.prev { left: 22px; }
.hero-arrow.next { right: 22px; }
.hero-arrow svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Trailer sound toggle — bottom-right */
.hero-mute-btn {
  position: absolute;
  right: 30px;
  bottom: 38px;
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 11, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background 0.3s ease, transform 0.3s var(--ease);
}
.hero-mute-btn:hover {
  background: rgba(44, 44, 46, 0.8);
}
.hero-mute-btn:active {
  transform: scale(0.94);
}
.hero-mute-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.hero-mute-btn .icon-muted { display: none; }
.hero-mute-btn .icon-unmuted { display: block; }
.hero-mute-btn.muted .icon-muted { display: block; }
.hero-mute-btn.muted .icon-unmuted { display: none; }

/* Loading shimmer while the hero fetches */
.hero-skeleton {
  position: absolute;
  inset: 0;
  background: #101012;
}
.hero-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  animation: shimmerSweep 1.8s infinite;
}

/* ---- ZEUS page-load lightning flash ------------------------------
   A big electric bolt slashes across the hero once on page load
   (1s, then fades away forever). Purely decorative. */
.hero-lightning {
  position: absolute;
  top: 8%;
  right: 14%;
  width: min(34vw, 420px);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: lightning-flash 1s ease-out 0.35s 1 both;
}
.hero-lightning svg {
  width: 100%;
  height: auto;
  fill: var(--accent-primary);
  filter: drop-shadow(0 0 26px var(--accent-glow));
}
@keyframes lightning-flash {
  0%, 100% { opacity: 0; }
  10%, 30% { opacity: 1; filter: drop-shadow(0 0 20px #FFD700); }
  20% { opacity: 0.4; }
}

/* ---- Play-button lightning flash (fires before navigation) ------ */
.lightning-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 215, 0, 0.16) 0%,
              rgba(70, 58, 0, 0.32) 45%,
              rgba(0, 0, 0, 0.6) 100%);
  animation: lightning-flash 0.42s ease-out 1 both;
}
.lightning-overlay .lightning-bolt {
  width: min(40vw, 300px);
  height: auto;
  fill: var(--accent-primary);
  filter: drop-shadow(0 0 30px var(--accent-glow));
  animation: lightning-bolt-zap 0.42s ease-out 1 both;
}
@keyframes lightning-bolt-zap {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  35%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

/* ---- Random page lightning flashes (spawned by api.js every
   8-12s): a small yellow zap flickers at a viewport edge for
   ~200ms — the site feels statically alive. --------------------- */
.page-flash {
  position: fixed;
  z-index: 9000;
  width: 64px;
  height: 64px;
  pointer-events: none;
  opacity: 0;
  transform: scale(var(--flash-scale, 1)) rotate(var(--flash-rotate, 0deg));
}
.page-flash svg {
  width: 100%;
  height: 100%;
  fill: var(--accent-core);
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.8));
}
@keyframes page-flash-zap {
  0%   { opacity: 0; }
  18%  { opacity: 0.85; }
  36%  { opacity: 0.15; }
  54%  { opacity: 0.7; }
  100% { opacity: 0; }
}
.page-flash {
  animation: page-flash-zap 0.22s ease-out 1 both;
}

/* ============================================================
   8. BUTTONS — Apple pill system
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.1px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              transform 0.25s var(--ease), box-shadow 0.3s ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Primary — solid white, black text */
.btn-primary {
  background: #fff;
  color: #000;
}
.btn-primary:hover {
  background: rgba(255, 255, 255, 0.82);
}

/* Secondary — frosted glass */
.btn-glass {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.34);
}

/* Tertiary — quiet outline */
.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.42);
}

/* ============================================================
   9. CONTENT SECTIONS & HORIZONTAL ROWS
   ============================================================ */
.content-section {
  padding: 24px 0;
  /* content-visibility intentionally NOT used: its height
     estimates make fast page scrolling jump/stutter — the
     rows are cheap to keep live and images are lazy anyway. */
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

/* Netflix-style section titles: a vertical red bar sits on the
   left of every row heading (TOP 10, Trending, Popular, ...). */
.section-title {
  position: relative;
  padding-left: 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.05;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 4px;
  height: 80%;
  background: #e50914;
  border-radius: 2px;
}

.section-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.see-all:hover {
  opacity: 0.7;
}

/* Row scroll arrows — solid circles */
.scroll-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 0.3s ease, transform 0.25s var(--ease);
}
.scroll-btn:hover {
  background: var(--bg-elevated);
}
.scroll-btn:active {
  transform: scale(0.93);
}
.scroll-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Horizontal card rail — generous vertical padding so the
   scaled hover card and its diffused shadow are never clipped.
   Buttery scrolling: CSS-smooth programmatic scrolls, touch
   momentum on mobile, and contained horizontal overscroll. */
.movies-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 165px;  /* compact 2:3 posters (was 200px) */
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 26px 4px 48px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.movies-row::-webkit-scrollbar {
  display: none;
}
.movies-row .movie-card {
  scroll-snap-align: start;
}

/* Editorial widescreen rail (Trending) — 16:9 backdrop cards */
.movies-row--wide {
  grid-auto-columns: 250px;  /* compact 16:9 cards (was 350px) */
}

/* ============================================================
   10. MOVIE CARDS — pure artwork, Apple TV style
   ------------------------------------------------------------
   The card IS the artwork: a rounded 16px image and nothing
   else — no badges, no overlay text, no borders, no padding.
   Title + year (+ rating) fade in BELOW the artwork on hover
   (always visible on touch). Hovering lifts the card with a
   soft diffused shadow; after 800ms the muted trailer fades
   in over the artwork, clipped to the rounded corners.
   ============================================================ */
.movie-card {
  position: relative;
  border-radius: 10px; /* compact cards (was 16px) */
  transition: transform 0.25s var(--ease-buttery);
  will-change: transform;
}
/* Apple hover: the card lifts — artwork, heart and caption as one object */
.movie-card:hover,
.movie-card:focus-within {
  transform: scale(1.06);
  z-index: 50;
}

.card-link {
  display: block;
  border-radius: inherit;
  outline: none;
}

/* The artwork box — 2:3 posters (16:9 for .wide editorial cards) */
.poster-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px; /* compact cards (was 16px) */
  overflow: hidden; /* trailers stay inside the rounded corners */
  background: var(--bg-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.25s ease;
}
/* Apple hover: beautiful, diffused, premium shadow + one faint
   yellow lightning outline pulse (the ZEUS signature) */
.movie-card:hover .poster-wrap,
.movie-card:focus-within .poster-wrap {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  animation: cardBoltPulse 0.9s var(--ease-out) 1;
}
/* Faint electric outline that pulses ONCE per hover — subtle,
   never distracting */
@keyframes cardBoltPulse {
  0% {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6),
                0 0 0 0 rgba(255, 215, 0, 0);
  }
  45% {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6),
                0 0 0 2px rgba(255, 215, 0, 0.45),
                0 0 26px rgba(255, 215, 0, 0.22);
  }
  100% {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6),
                0 0 0 0 rgba(255, 215, 0, 0);
  }
}
.movie-card.wide .poster-wrap {
  aspect-ratio: 16 / 9;
}

.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HD badge — sleek solid pill */
.quality-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #fff;
}

/* Caption — minimal title + year under the artwork, fades in on hover */
.card-caption {
  margin-top: 12px;
  padding: 0 2px;
}
.card-caption-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.15px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-buttery);
}
.card-caption-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease 0.04s, transform 0.25s var(--ease-buttery) 0.04s;
}
.card-caption-meta svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  flex-shrink: 0;
}
.movie-card:hover .card-caption-title,
.movie-card:hover .card-caption-meta,
.movie-card:focus-within .card-caption-title,
.movie-card:focus-within .card-caption-meta {
  opacity: 1;
  transform: translateY(0);
}

.card-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(20, 20, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.card-play svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  margin-left: 2px;
}

/* Star rating — monochrome, quiet */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.rating-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Watchlist heart — solid circle, top-right, appears on hover.
   CARD-ONLY rules: the floating circle is meant exclusively for
   .movie-card posters. Inside the detail / watch page action rows
   the same button element is a full pill (see .watchlist-detail-btn
   below) — neutralize the card rules there so the pill renders
   inline, not as an absolutely-positioned circle whose label
   overflows the viewport on mobile. */
.detail-actions .watchlist-btn,
.watch-info-actions .watchlist-btn {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  border-radius: var(--radius-pill); /* pill ends, not the card circle's 50% ellipse */
}

/* Watchlist heart — solid circle, top-right, appears on hover */
.watchlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease),
              background 0.3s ease;
}
.movie-card:hover .watchlist-btn,
.watchlist-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.watchlist-btn:hover {
  background: rgba(44, 44, 46, 0.85);
}
.watchlist-btn.active {
  opacity: 1;
  transform: translateY(0);
}
.watchlist-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.watchlist-btn.active svg {
  fill: currentColor;
  stroke: none;
}

/* ---- TRAILER VIDEO (shared) — native <video>, ZERO UI --------
   Trailers are played by native HTML5 <video> elements with
   direct MP4 sources. A <video> WITHOUT the `controls`
   attribute renders NOTHING but the moving picture: no control
   bar, no logo, no play button, no overlays — nothing to hide,
   nothing to overscan, nothing to block. object-fit: cover
   fill-fits the stream to any aspect ratio, and
   pointer-events: none keeps the video forever untouchable:
   it cannot be clicked, paused, or used to leave the site. */
.trailer-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: inherit;
  display: block;
  background: #000;
}

/* Legacy shield kept for the watch-page player area only (the
   full-movie player iframe still uses provider embeds). */
.trailer-blocker {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: all;
}

/* Hover trailer layer — the artwork quietly comes alive. The
   chrome-free youtube-nocookie embed sits inside, fill-fitted
   to the rounded 10px frame. */
.card-trailer {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 10px; /* matches the compact card frame */
  overflow: hidden;
  background: #000;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.card-trailer.playing {
  opacity: 1;
}

/* Hover trailer embed — fills the card completely. The iframe
   carries allow="autoplay; encrypted-media; picture-in-picture"
   (set in api.js) so the muted trailer may actually autoplay;
   controls=0 + modestbranding=1 in the embed URL keep the
   player chrome-free, and pointer-events: none keeps it
   untouchable — clicks always fall through to the card link. */
.card-trailer-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
}

/* ---- KEN BURNS FALLBACK ----------------------------------------
   When a title has no playable trailer stream (or every source
   failed), its artwork gets a slow, premium pan/zoom instead —
   used by the hero backdrop and the hovered card's poster. */
@keyframes ken-burns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
.trailer-fallback {
  animation: ken-burns 16s ease-in-out infinite alternate;
  will-change: transform;
}
/* Hero backdrop override — outranks the default slide zoom so
   the Ken Burns pan reads through when no trailer plays. */
.hero-slide.active .hero-backdrop.trailer-fallback {
  animation: ken-burns 16s ease-in-out infinite alternate;
}
/* Card artwork fallback — a steady, clearly perceptible zoom:
   scale 1 -> 1.12 over 5s (linear so movement is visible within
   a second of the cursor dwelling, never a frozen dead hover). */
.movie-card .poster-img.trailer-fallback {
  animation: ken-burns 5s linear infinite alternate;
}

/* ============================================================
   10b. NEW HOMEPAGE SECTIONS
   ------------------------------------------------------------
   TOP 10 Today badges, card flags ("New episode" / "New season"
   / "4K"), section subtitles, streaming provider tabs and the
   Popular Genres mood cards — all styled to match the existing
   design language.
   ============================================================ */

/* Section header with a subtitle line (new sections) */
.section-heading {
  min-width: 0;
}
.section-subtitle {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: var(--text-secondary);
}

/* TOP 10 Today — red rank badge, top-left of the artwork */
.top10-badge {
  background: #e50914;
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  position: absolute;
  top: 8px;
  left: 8px;
  line-height: 1.1;
  z-index: 5;
  pointer-events: none; /* clicks fall through to the card link */
  text-align: center;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
}
.top10-label {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
}
.top10-number {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Card flags — small red badges ("New episode", "New season") */
.card-flag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  pointer-events: none;
  padding: 4px 8px;
  border-radius: 4px;
  background: #e50914;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
  white-space: nowrap;
}
/* "4K" pill — rounder, compact */
.card-flag--pill {
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
}

/* Episode info ("S1·E3") inside the caption metadata line */
.meta-note {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

/* ---- Streaming provider tabs — AUTHENTIC brand identities ----
   Every tab wears the service's real font, colours and styling:
   Bebas Neue for NETFLIX, Poppins for prime video / hulu, the
   Max wordmark on its blue→purple gradient, a script treatment
   for Disney+, SF Pro for Apple tv+, Roboto Black for
   PARAMOUNT+. Inactive tabs rest on dark gray (#161616) with
   the brand name in the brand colour; the active/hovered tab
   paints itself in the brand's signature colour and glows. */
.provider-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.provider-tabs::-webkit-scrollbar {
  display: none;
}
.provider-tab {
  --tab-bg: #161616;                       /* inactive: dark gray */
  --tab-border: #2a2a2a;
  --tab-color: rgba(255, 255, 255, 0.78);  /* inactive: brand colour (per brand below) */
  --tab-active-bg: #2c2c2e;                /* active: brand signature */
  --tab-active-color: #fff;
  --tab-active-border: rgba(255, 255, 255, 0.45);
  --tab-glow: rgba(255, 255, 255, 0.14);
  flex: 0 0 auto;
  min-width: 120px;
  height: 60px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  border-radius: 10px;
  color: var(--tab-color);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.4s ease, color 0.4s ease,
              background 0.4s ease, box-shadow 0.4s ease,
              transform 0.4s var(--ease), filter 0.4s ease;
}
.provider-tab:hover {
  background: var(--tab-active-bg);
  color: var(--tab-active-color);
  border-color: var(--tab-active-border);
  /* subtle scale + glow on the hovered brand tab */
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 0 1px var(--tab-glow),
              0 0 28px var(--tab-glow),
              inset 0 0 18px var(--tab-glow);
}
.provider-tab:active {
  transform: scale(0.97);
}
/* Active tab — painted in the brand's signature colour + glow */
.provider-tab.active {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-border);
  color: var(--tab-active-color);
  box-shadow: 0 0 0 1px var(--tab-glow),
              0 0 26px var(--tab-glow),
              inset 0 0 18px var(--tab-glow);
}

/* Animated brand icon — subtle pulse (Disney sparkle) */
.provider-ico {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  animation: providerIcoPulse 2.4s ease-in-out infinite;
}
.provider-ico svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
@keyframes providerIcoPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
.provider-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

/* ===== 1. NETFLIX — Bebas Neue, red on black, all-caps, tight ===== */
.provider-tab--netflix {
  --tab-color: #E50914;
  --tab-active-bg: #000000;
  --tab-active-color: #E50914;
  --tab-active-border: #E50914;
  --tab-glow: rgba(229, 9, 20, 0.45);
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;   /* Netflix-tight */
  padding-top: 3px;          /* optical balance for the condensed face */
}

/* ===== 2. PRIME VIDEO — Poppins 700: "prime" white + "video" cyan,
   with the signature smile arrow sweeping underneath ===== */
.provider-tab--prime {
  --tab-color: #fff;
  --tab-active-bg: #0F1111;   /* Amazon dark navy */
  --tab-active-color: #fff;
  --tab-active-border: #00A8E1;
  --tab-glow: rgba(0, 168, 225, 0.35);
  font-family: 'Poppins', 'Amazon Ember', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.provider-tab--prime .pw-p { color: #ffffff; }
.provider-tab--prime .pw-v { color: #00A8E1; }
/* The smile — a curved arrow stroke hugging the wordmark */
.provider-tab--prime .pw-smile {
  position: absolute;
  bottom: -7px;
  left: 1%;
  width: 98%;
  height: 8px;
  color: #00A8E1;
  filter: drop-shadow(0 0 4px rgba(0, 168, 225, 0.55));
}
.provider-tab--prime .pw-smile svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== 3. MAX (HBO) — rounded lowercase wordmark on the
   blue→purple brand gradient ===== */
.provider-tab--hbo {
  --tab-color: #fff;
  --tab-active-bg: linear-gradient(135deg, #002BE7 0%, #8A2BE2 100%);
  --tab-active-color: #fff;
  --tab-active-border: #B57BFF;
  --tab-glow: rgba(138, 43, 226, 0.5);
  font-family: 'Poppins', 'Amazon Ember', Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.6px;
  text-transform: lowercase;
}

/* ===== 4. DISNEY+ — script signature, white on deep blue,
   star sparkle animation ===== */
.provider-tab--disney {
  --tab-color: #fff;
  --tab-active-bg: #0E47A1;   /* Disney deep blue */
  --tab-active-color: #fff;
  --tab-active-border: #9FC7FF;
  --tab-glow: rgba(14, 71, 161, 0.6);
  font-family: 'Waltograph', 'Segoe Script', 'Brush Script MT', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.2px;
  padding-top: 2px;
}
.provider-tab--disney .pw-plus {
  font-family: 'Poppins', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  margin-left: 1px;
}
.provider-tab--disney .provider-ico--sparkle {
  animation: disneySparkle 2.2s ease-in-out infinite;
}
@keyframes disneySparkle {
  0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.25) rotate(12deg); }
}

/* ===== 5. APPLE TV+ — SF Pro 600, apple mark + tv+, pure black ===== */
.provider-tab--apple {
  --tab-color: #fff;
  --tab-active-bg: #000000;
  --tab-active-color: #fff;
  --tab-active-border: rgba(255, 255, 255, 0.6);
  --tab-glow: rgba(255, 255, 255, 0.22);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.provider-tab--apple .pw-apple {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
  margin-right: 1px;
}

/* ===== 6. PARAMOUNT+ — Roboto Black all-caps, blue plus ===== */
.provider-tab--paramount {
  --tab-color: #fff;
  --tab-active-bg: linear-gradient(135deg, #0064FF 0%, #001A4D 100%);
  --tab-active-color: #fff;
  --tab-active-border: #6FA8FF;
  --tab-glow: rgba(0, 100, 255, 0.45);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.provider-tab--paramount .pw-plus {
  color: #0064FF;
  font-weight: 700;
}

/* ===== 7. HULU — Poppins 900, lowercase, black on lime ===== */
.provider-tab--hulu {
  --tab-color: #1CE783;       /* lime brand name while resting */
  --tab-active-bg: #1CE783;   /* bright lime when active */
  --tab-active-color: #000;
  --tab-active-border: rgba(0, 0, 0, 0.35);
  --tab-glow: rgba(28, 231, 131, 0.4);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
  text-transform: lowercase;
}

/* ===== Brand gradient wash — the whole section bathes in the
   hovered/active provider's signature glow. --wash is a
   REGISTERED custom property (<color>), so modern browsers
   INTERPOLATE it: the ambient gradient glides smoothly from
   one brand's glow to the next (older browsers snap, which
   was the previous behaviour). The wash FADES TO TRANSPARENT
   at the edges so it melts into the page's continuous dark
   surface — no boxed section, no hard top/bottom lines. ===== */
@property --wash {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(229, 9, 20, 0.16);
}
.provider-section {
  --brand-color: #E50914;
  --brand-glow: rgba(229, 9, 20, 0.55);
  --wash: rgba(229, 9, 20, 0.16);
  background: radial-gradient(ellipse 90% 72% at 50% 45%, var(--wash), transparent 74%);
  transition: --wash 0.55s ease;
}
.provider-section[data-brand="netflix"] {
  --brand-color: #E50914;
  --brand-glow: rgba(229, 9, 20, 0.55);
  --wash: rgba(229, 9, 20, 0.16);
}
.provider-section[data-brand="prime"] {
  --brand-color: #00A8E1;
  --brand-glow: rgba(0, 168, 225, 0.5);
  --wash: rgba(0, 168, 225, 0.15);
}
.provider-section[data-brand="hbo"] {
  --brand-color: #B57BFF;
  --brand-glow: rgba(0, 43, 231, 0.55);
  --wash: rgba(0, 43, 231, 0.22);
}
.provider-section[data-brand="disney"] {
  --brand-color: #9FC7FF;
  --brand-glow: rgba(14, 71, 161, 0.65);
  --wash: rgba(14, 71, 161, 0.28);
}
.provider-section[data-brand="apple"] {
  --brand-color: #FFFFFF;
  --brand-glow: rgba(255, 255, 255, 0.35);
  --wash: rgba(255, 255, 255, 0.09);
}
.provider-section[data-brand="paramount"] {
  --brand-color: #6FA8FF;
  --brand-glow: rgba(0, 100, 255, 0.5);
  --wash: rgba(0, 100, 255, 0.18);
}
.provider-section[data-brand="hulu"] {
  --brand-color: #1CE783;
  --brand-glow: rgba(28, 231, 131, 0.45);
  --wash: rgba(28, 231, 131, 0.14);
}

/* Brand name in the section title — soft glowing pulse, written
   in the brand's own font so "Only on Netflix" reads like Netflix.
   Uppercased on the fly: "Only on NETFLIX", "Only on DISNEY+",
   "Only on HULU" — painted in the brand's exact colour. */
.provider-section .brand-name {
  color: var(--brand-color);
  text-transform: uppercase;
  text-shadow: 0 0 18px var(--brand-glow);
  animation: brandGlow 2.6s ease-in-out infinite;
}
.provider-section[data-brand="netflix"] .brand-name {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.25em;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.provider-section[data-brand="prime"] .brand-name,
.provider-section[data-brand="hulu"] .brand-name {
  font-family: 'Poppins', Arial, sans-serif;
}
.provider-section[data-brand="disney"] .brand-name {
  font-family: 'Waltograph', 'Segoe Script', 'Brush Script MT', Georgia, serif;
  font-style: italic;
}
.provider-section[data-brand="paramount"] .brand-name {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.5px;
}
/* Disney's title carries a little star sparkle beside the name */
.provider-section[data-brand="disney"] .brand-name::after {
  content: "✦";
  font-size: 0.55em;
  vertical-align: 0.65em;
  margin-left: 6px;
  opacity: 0.9;
  display: inline-block;
  animation: disneySparkle 2.2s ease-in-out infinite;
}
@keyframes brandGlow {
  0%, 100% { text-shadow: 0 0 10px var(--brand-glow); }
  50%      { text-shadow: 0 0 26px var(--brand-glow); }
}

/* ---- Popular Genres mood cards ---- */
.genre-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 26px 4px 48px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.genre-row::-webkit-scrollbar {
  display: none;
}
.genre-row .genre-card {
  scroll-snap-align: start;
}
.genre-card {
  --g1: rgba(44, 44, 46, 0.94);
  --g2: rgba(68, 68, 70, 0.8);
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  padding: 16px;
  background-color: var(--bg-surface);
  /* scrim for the label, then the strong mood gradient, then the
     representative backdrop underneath */
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%),
    var(--genre-art, none);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s var(--ease-buttery),
              filter 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
/* Hover — brighten + slight scale */
.genre-card:hover,
.genre-card:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.18);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  z-index: 50;
}
.genre-name {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* Mood gradient palettes (per genre) */
.genre-card--comedy {
  --g1: rgba(15, 118, 110, 0.94);   /* teal */
  --g2: rgba(34, 211, 238, 0.78);   /* cyan */
}
.genre-card--action {
  --g1: rgba(127, 29, 29, 0.94);    /* deep red */
  --g2: rgba(239, 68, 68, 0.8);     /* red */
}
.genre-card--drama {
  --g1: rgba(6, 78, 59, 0.94);      /* deep green */
  --g2: rgba(20, 184, 166, 0.8);    /* teal */
}
.genre-card--horror {
  --g1: rgba(76, 29, 149, 0.94);    /* purple */
  --g2: rgba(217, 70, 239, 0.78);   /* magenta */
}
.genre-card--romance {
  --g1: rgba(157, 23, 77, 0.94);    /* deep pink */
  --g2: rgba(244, 114, 182, 0.8);   /* pink */
}
.genre-card--adventure {
  --g1: rgba(146, 64, 14, 0.94);    /* deep orange */
  --g2: rgba(251, 191, 36, 0.8);    /* gold */
}
.genre-card--scifi {
  --g1: rgba(30, 58, 138, 0.94);    /* deep blue */
  --g2: rgba(59, 130, 246, 0.8);    /* blue */
}
.genre-card--thriller {
  --g1: rgba(15, 23, 42, 0.96);     /* dark slate */
  --g2: rgba(100, 116, 139, 0.82);  /* slate */
}

/* ============================================================
   11. GRIDS
   ============================================================ */
.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 30px 24px;
}

/* ============================================================
   12. SKELETON CARDS
   ============================================================ */
.skeleton-card {
  min-width: 0;
}
.skeleton-poster {
  aspect-ratio: 2 / 3;
  border-radius: 10px; /* matches the compact card frame */
  margin-bottom: 12px;
}
/* Editorial widescreen skeleton (Trending row) */
.skeleton-card.wide .skeleton-poster {
  aspect-ratio: 16 / 9;
}
.skeleton-card .skeleton-line {
  margin-top: 8px;
}
.skeleton-card .skeleton-line:first-of-type {
  margin-top: 0;
}

/* ============================================================
   14. STATE MESSAGES (error / empty)
   ============================================================ */
.state-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 70px 24px;
}
.state-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.state-icon svg {
  width: 28px;
  height: 28px;
}
.state-message h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.state-message p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 440px;
  margin-bottom: 20px;
}
.state-page {
  min-height: 60vh;
  justify-content: center;
}

/* ============================================================
   15. DETAIL PAGES — edge-to-edge blurred backdrop
   ============================================================ */
.detail-page {
  position: relative;
  background: #000;
}

.detail-backdrop-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(92vh, 860px);
  overflow: hidden;
  z-index: 0;
}
.detail-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(130%) brightness(0.45);
  transform: scale(1.25);
}
.detail-backdrop-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 35%,
    rgba(0, 0, 0, 0.6) 68%,
    #000 100%
  );
}

.detail-page .container {
  position: relative;
  z-index: 1;
}

#detail-container {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-top: calc(var(--nav-height) + var(--banner-height) + 128px);
}

/* Detail skeleton mirrors the same layout */
.skeleton-detail {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.skeleton-detail > div:first-child {
  flex-shrink: 0;
}
.sk-poster {
  width: 260px;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
}
.skeleton-detail > div:last-child {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
}
.sk-line-lg {
  height: 44px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.skeleton-detail .skeleton-line {
  margin-top: 10px;
}

/* Poster card rising slightly into the artwork */
.detail-poster {
  position: relative;
  width: 280px;
  flex-shrink: 0;
  margin-top: -48px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
  background: var(--bg-surface);
}
.detail-poster img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.detail-poster .quality-badge {
  top: 14px;
  right: 14px;
}

.detail-info {
  flex: 1;
  min-width: 0;
}

.detail-title {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 12px;
}

.original-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.tagline {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 18px;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* User score */
.rating-circle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rating-circle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: rgba(255, 255, 255, 0.9);
}
.score {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.score.green {
  color: var(--green);
}
.votes {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Meta chips (runtime, date…) — solid, crisp */
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.meta-chip svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.genre-chip {
  padding: 7px 15px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.25s ease;
}
.genre-chip:hover {
  background: rgba(255, 255, 255, 0.18);
}

.detail-overview-label {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.detail-overview {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 720px;
  margin-bottom: 30px;
}

.detail-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Facts strip — quiet surface tiles */
.detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 36px 0 8px;
}
.fact-item {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  min-width: 0;
}
.fact-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.fact-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   16. CAST
   ============================================================ */
.cast-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 16px;
  scrollbar-width: none;
}
.cast-row::-webkit-scrollbar {
  display: none;
}

.cast-card {
  text-align: left;
  min-width: 0;
}
.cast-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  margin-bottom: 10px;
}
.cast-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.cast-card:hover .cast-photo img {
  transform: scale(1.05);
}
.cast-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-character {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.skeleton-cast {
  min-width: 0;
}
.skeleton-cast-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

/* ============================================================
   17. SEASONS
   ============================================================ */
.seasons-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 230px;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 16px;
  scrollbar-width: none;
}
.seasons-row::-webkit-scrollbar {
  display: none;
}

.season-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s var(--ease-out);
}
.season-card:hover {
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
.season-card.active {
  border-color: rgba(255, 255, 255, 0.45);
  background: var(--bg-elevated);
}

.season-poster {
  position: relative;
  width: 76px;
  flex-shrink: 0;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}
.season-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.season-poster .card-play {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: rgba(20, 20, 22, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.season-card:hover .season-poster .card-play {
  opacity: 1;
}

.season-info {
  min-width: 0;
}
.season-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.season-meta {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ============================================================
   18. EPISODES
   ============================================================ */
.season-select-wrap {
  display: flex;
  align-items: center;
}
.season-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386868B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
    no-repeat right 14px center / 16px 16px;
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  padding: 11px 42px 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.season-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
}
.season-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.22);
}

.episodes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.episode-item {
  display: flex;
  gap: 20px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.episode-item:hover {
  background: var(--bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

.episode-still {
  position: relative;
  width: 208px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
}
.episode-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.episode-item:hover .episode-still img {
  transform: scale(1.04);
}

.episode-num {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 25px;
  height: 25px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: rgba(20, 20, 22, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.episode-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.episode-item:hover .episode-play {
  opacity: 1;
}
.episode-play span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
}
.episode-play svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  margin-left: 2px;
}

.episode-details {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.episode-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}
.episode-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.episode-air {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.episode-overview {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.episode-rating svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.skeleton-episode {
  display: flex;
  gap: 20px;
  padding: 14px;
}
.sk-still {
  width: 208px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
}
.skeleton-episode > div:last-child {
  flex: 1;
  min-width: 0;
}
.skeleton-episode .skeleton-line {
  margin-top: 10px;
}

/* ============================================================
   19. SEARCH PAGE
   ============================================================ */
.search-page {
  padding-top: calc(var(--nav-height) + var(--banner-height) + 64px);
  min-height: 70vh;
}

.search-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}
.search-hero h1 {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.search-hero h1 span {
  color: rgba(255, 255, 255, 0.42);
}
.search-hero > p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 34px;
}

/* Big rounded search field */
.search-box {
  position: relative;
  max-width: 640px;
  margin: 0 auto 26px;
}
.search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.search-input {
  width: 100%;
  height: 58px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  padding: 0 58px 0 54px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.search-input::placeholder {
  color: var(--text-secondary);
}
.search-input:focus {
  border-color: rgba(41, 151, 255, 0.65);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.18);
}
.search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition);
}
.search-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.search-clear svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Segmented filter control */
.filter-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.filter-tab {
  padding: 9px 24px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease, background 0.25s ease;
}
.filter-tab:hover {
  color: #fff;
}
.filter-tab.active {
  background: #fff;
  color: #000;
}

.results-count {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 0 16px;
}

/* ============================================================
   20. BROWSE & WATCHLIST PAGES
   ============================================================ */
.browse-page {
  padding-top: calc(var(--nav-height) + var(--banner-height) + 56px);
  min-height: 70vh;
}

.browse-header {
  margin-bottom: 38px;
}
.browse-header h1,
.watchlist-header-row + .movies-grid {
  letter-spacing: -1px;
}
.browse-header h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.browse-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
}

.watchlist-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 34px;
}
.watchlist-header-row .browse-subtitle {
  margin-bottom: 0;
}

/* Quiet Apple-red danger button */
.btn-clear-watchlist {
  border-color: rgba(255, 69, 58, 0.4);
  color: #ff6961;
  background: transparent;
}
.btn-clear-watchlist:hover {
  background: rgba(255, 69, 58, 0.12);
  border-color: rgba(255, 69, 58, 0.65);
  color: #ff8079;
}

/* ============================================================
   21. WATCH PAGE — player & server tabs
   ============================================================ */
.watch-page {
  padding-top: calc(var(--nav-height) + var(--banner-height) + 40px);
  min-height: 100vh;
}
.watch-container {
  max-width: 1180px;
}

.watch-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 19px 11px 15px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.back-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}
.back-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.watch-title-wrap {
  min-width: 0;
}
.watch-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* Server selector — Apple pill tabs */
.server-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.server-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.server-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.server-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.server-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.server-btn:active {
  transform: scale(0.96);
}
.server-btn.active {
  background: #fff;
  color: #000;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.server-btn.active .status-dot {
  background: rgba(0, 0, 0, 0.55);
}

.server-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.server-notice svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}
/* Two notices stacked (server help + subtitle hint) sit tight */
.server-notice + .server-notice {
  margin-top: -16px;
}

/* Player — 16px radius + subtle outer glow */
.player-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0c0c0e;
  box-shadow: var(--glow-player);
}
.player-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: rgba(20, 20, 22, 0.9);
}
.player-loading p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 400px;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  animation: spin 0.9s linear infinite;
}

/* TV episode controls under the player */
.episode-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.ep-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 21px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.ep-nav-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}
.ep-nav-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Title info card below the player */
.watch-info {
  display: flex;
  gap: 26px;
  margin-top: 34px;
  padding: 26px;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
}
.watch-info-poster {
  width: 132px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.watch-info-poster img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.watch-info > div:last-child {
  flex: 1;
  min-width: 0;
}
.watch-info-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;
  margin-bottom: 8px;
}
.watch-info-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}
.watch-overview {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 18px;
}
.watch-info-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.watchlist-detail-btn {
  padding: 13px 26px;
  font-size: 14px;
}
.watchlist-detail-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.watchlist-detail-btn.active svg {
  fill: currentColor;
  stroke: none;
}
.watchlist-detail-btn.active {
  background: rgba(255, 255, 255, 0.26);
}
.wl-label {
  font-weight: 600;
}

/* ============================================================
   22. TOASTS
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: var(--radius-full);
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  animation: toastIn 0.45s var(--ease-out);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.removing {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}
.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.toast-success .toast-icon { color: var(--green); }
.toast-info .toast-icon { color: var(--blue); }
.toast-error .toast-icon { color: var(--red); }
.toast-message {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   23. FOOTER
   ============================================================ */
footer {
  margin-top: 88px;
  /* No border-top — the footer flows out of the same continuous
     dark surface as the rows above it. */
  background: #000;
}

.footer-container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 72px var(--container-pad) 52px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

.footer-desc {
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 340px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-glass);
  transition: var(--transition);
}
.social-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}
.social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.footer-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  margin-bottom: 18px;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  font-size: 13.5px;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}
.footer-links a:hover {
  color: var(--text-primary);
}

.footer-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 30px;
  text-align: center;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-tertiary);
}

.footer-bottom {
  /* No divider line — one continuous surface. */
}
.footer-bottom-inner {
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 22px var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.accent {
  color: var(--text-primary);
  font-weight: 600;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-legal a {
  color: var(--text-secondary);
  transition: color 0.25s ease;
}
.footer-legal a:hover {
  color: #fff;
}
.legal-sep {
  color: var(--text-tertiary);
}
.tmdb-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tmdb-credit img {
  border-radius: 3px;
}

/* ============================================================
   24. LEGAL PAGES
   ============================================================ */
.legal-page {
  padding-top: calc(var(--nav-height) + var(--banner-height) + 72px);
  min-height: 70vh;
}

.legal-header {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}
.legal-header h1 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.12;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.legal-subtitle {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 22px;
}
.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.legal-meta svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.legal-body {
  max-width: 760px;
  margin: 40px auto 0;
  padding-bottom: 48px;
}
.legal-body h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin: 52px 0 18px;
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 16px;
}
.legal-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.legal-body a {
  color: var(--blue);
}
.legal-body a:hover {
  text-decoration: underline;
}

/* Numbered steps with counter chips */
.legal-steps {
  counter-reset: legalStep;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 26px 0 10px;
}
.legal-steps li {
  counter-increment: legalStep;
  position: relative;
  padding: 20px 24px 20px 68px;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}
.legal-steps li::before {
  content: counter(legalStep);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.legal-steps strong {
  display: block;
  font-size: 15px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.legal-steps span {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}

/* Contact cards */
.legal-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 28px;
}
.legal-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.legal-card p {
  margin-bottom: 8px;
}
.legal-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}
.legal-email:hover {
  text-decoration: underline;
}
.legal-email svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ============================================================
   25. BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s var(--ease),
              background 0.3s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: rgba(44, 44, 46, 0.9);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ============================================================
   26. RESPONSIVE — LARGE TABLETS
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --container-pad: 32px;
  }
  .dropdown-menu {
    width: min(440px, 92vw);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .detail-poster {
    width: 240px;
  }
  .sk-poster {
    width: 240px;
  }
  #detail-container {
    gap: 36px;
    padding-top: calc(var(--nav-height) + var(--banner-height) + 110px);
  }
}

/* ============================================================
   27. MOBILE NAVIGATION DRAWER (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  .hamburger {
    display: flex;
  }
  .nav-menu {
    position: fixed;
    top: calc(var(--nav-height) + var(--banner-height));
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: #161618;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-out);
    overflow-y: auto;
    padding: 24px 20px 48px;
    z-index: 999;
  }
  .nav-menu.open {
    transform: translateX(0);
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .nav-link {
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
  }
  .nav-link.active {
    /* 1FLEX pill — keep it in the mobile drawer too */
    color: #000;
    background: #fff;
  }
  .nav-dropdown.open .dropdown-toggle {
    background: transparent;
  }
  .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }
  .dropdown-menu {
    position: static;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 10px;
    max-height: none;
    overflow: visible;
    gap: 2px;
  }
  .nav-dropdown.open .dropdown-menu {
    display: grid;
    animation: fadeInDown 0.3s ease;
  }
  .dropdown-menu a {
    padding: 11px 18px 11px 36px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* ============================================================
   28. RESPONSIVE — PHABLETS & PHONES
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
    --container-pad: 20px;
  }

  /* Hero */
  .hero {
    height: 74vh;
    min-height: 530px;
  }
  .hero-content {
    padding-bottom: 112px;
  }
  .hero-title {
    font-size: clamp(34px, 8.5vw, 48px);
  }
  .hero-overview {
    font-size: 15px;
  }
  .hero-arrow {
    display: none;
  }
  .hero-mute-btn {
    right: 18px;
    bottom: 26px;
    width: 42px;
    height: 42px;
  }
  .hero-dots {
    bottom: 26px;
  }

  /* Sections & cards */
  .content-section {
    padding: 20px 0 16px;
  }
  .section-title {
    font-size: 21px;
  }
  .scroll-btn {
    display: none;
  }
  .movies-row {
    grid-auto-columns: 150px;
    gap: 14px;
    padding: 18px 2px 34px;
  }
  .movies-row--wide {
    grid-auto-columns: 220px; /* stays under the 250px desktop width */
  }

  /* New homepage sections */
  .section-subtitle {
    font-size: 13px;
    margin-top: 4px;
  }
  .top10-number {
    font-size: 18px;
  }
  .card-flag {
    font-size: 9.5px;
    padding: 3px 7px;
  }
  .provider-tabs {
    gap: 10px;
    margin-bottom: 20px;
  }
  .provider-tab {
    min-width: 108px;
    height: 54px;
    padding: 0 18px;
    font-size: 12px;
  }
  .provider-tab--netflix { font-size: 17px; }
  .provider-tab--hbo,
  .provider-tab--disney { font-size: 17px; }
  .provider-tab--hulu { font-size: 15.5px; }
  .provider-tab--prime .pw-smile { bottom: -6px; height: 7px; }
  .genre-row {
    grid-auto-columns: 240px;
    gap: 14px;
    padding: 18px 2px 34px;
  }
  .genre-name {
    font-size: 16px;
  }
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 20px 14px;
  }
  .card-caption {
    margin-top: 9px;
  }
  .card-caption-title {
    font-size: 12.5px;
  }
  .card-caption-meta {
    font-size: 11px;
  }

  /* Buttons tighten up */
  .btn {
    padding: 13px 24px;
    font-size: 14px;
  }
  .hero-buttons .btn {
    padding: 13px 22px;
  }

  /* Detail pages stack */
  #detail-container {
    flex-direction: column;
    gap: 26px;
    padding-top: calc(var(--nav-height) + var(--banner-height) + 96px);
  }
  .detail-poster {
    width: 176px;
    margin-top: -40px;
  }
  .sk-poster {
    width: 176px;
  }
  .skeleton-detail {
    flex-direction: column;
    gap: 26px;
  }
  .detail-title {
    font-size: 32px;
  }
  .detail-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .fact-value {
    font-size: 13.5px;
    white-space: normal;
  }

  /* Cast / seasons / episodes */
  .cast-row {
    grid-auto-columns: 132px;
    gap: 14px;
  }
  .seasons-row {
    grid-auto-columns: 210px;
  }
  .episode-item {
    flex-direction: column;
    gap: 14px;
  }
  .episode-still {
    width: 100%;
  }
  .skeleton-episode {
    flex-direction: column;
    gap: 14px;
  }
  .sk-still {
    width: 100%;
  }

  /* Search */
  .search-hero {
    margin-bottom: 40px;
  }
  .search-input {
    height: 54px;
    font-size: 15px;
  }

  /* Watch page */
  .watch-header {
    gap: 14px;
    margin-bottom: 24px;
  }
  .watch-title {
    white-space: normal;
  }
  .watch-info {
    flex-direction: column;
    gap: 18px;
    padding: 22px;
  }
  .watch-info-poster {
    width: 112px;
  }
  .episode-controls {
    gap: 8px;
  }

  /* Footer */
  .footer-container {
    padding: 56px var(--container-pad) 40px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  .back-to-top {
    bottom: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 16px;
  }

  .hero {
    height: 78vh;
    min-height: 500px;
  }
  .hero-content {
    padding-bottom: 104px;
  }
  .hero-media-type {
    margin-bottom: 14px;
  }
  .hero-title {
    font-size: 33px;
  }
  .hero-genres {
    display: none;
  }
  .hero-overview {
    -webkit-line-clamp: 2;
    margin-bottom: 24px;
  }
  .hero-buttons {
    gap: 10px;
  }
  .hero-mute-btn {
    width: 40px;
    height: 40px;
  }

  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 16px 12px;
  }
  .movies-row {
    grid-auto-columns: 134px;
    gap: 12px;
    padding: 16px 2px 30px;
  }
  .movies-row--wide {
    grid-auto-columns: 200px; /* stays under the 250px desktop width */
  }
  .quality-badge {
    top: 8px;
    right: 8px;
    font-size: 9.5px;
    padding: 3px 7px;
  }

  /* New homepage sections on small phones */
  .section-subtitle {
    font-size: 12.5px;
  }
  .top10-badge {
    padding: 3px 6px;
  }
  .top10-label {
    font-size: 7.5px;
  }
  .top10-number {
    font-size: 16px;
  }
  .card-flag {
    font-size: 9px;
    padding: 3px 6px;
  }
  .card-flag--pill {
    padding: 2px 8px;
  }
  .provider-tab {
    min-width: 100px;
    height: 48px;
    padding: 0 14px;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    gap: 6px;
  }
  .provider-tab--netflix { font-size: 15.5px; padding-top: 2px; }
  .provider-tab--hbo,
  .provider-tab--disney { font-size: 15.5px; }
  .provider-tab--hulu { font-size: 14px; }
  .provider-tab--apple { font-size: 13px; }
  .provider-tab--apple .pw-apple { width: 12px; height: 12px; }
  .provider-tab--prime .pw-smile { bottom: -5px; height: 6px; }
  .provider-ico {
    width: 12px;
    height: 12px;
  }
  /* Quieter lightning toys on small screens */
  .page-flash { width: 44px; height: 44px; }
  .logo-arc { width: 10px; height: 13px; }
  .nav-logo-img {
    height: 24px;
  }
  .hero-lightning {
    width: 46vw;
    right: 6%;
    top: 12%;
  }
  .loader-name {
    font-size: 22px;
  }
  .genre-row {
    grid-auto-columns: 220px;
    gap: 12px;
  }
  .genre-card {
    padding: 12px;
    border-radius: 10px;
  }
  .genre-name {
    font-size: 15px;
  }

  /* Two-line disclaimer banner on small phones */
  body.banner-visible {
    --banner-height: 88px;
  }
  .disclaimer-inner {
    min-height: 88px;
    align-items: flex-start;
    padding-top: 14px;
  }
  .disclaimer-close {
    margin-top: 2px;
  }

  /* Filter tabs fill the width */
  .filter-tabs {
    width: 100%;
    justify-content: center;
  }
  .filter-tab {
    padding: 9px 0;
    flex: 1;
    text-align: center;
  }

  .server-bar {
    gap: 10px;
  }
  .server-btn {
    padding: 9px 17px;
    font-size: 12.5px;
  }
  .server-label {
    display: none;
  }
  .ep-nav-btn {
    padding: 10px 15px;
    font-size: 12.5px;
  }
  .back-btn {
    padding: 10px 15px 10px 12px;
  }

  .detail-facts {
    grid-template-columns: 1fr 1fr;
  }
  .detail-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .toast {
    padding: 12px 18px;
  }
  .toast-message {
    white-space: normal;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ============================================================
   29. TOUCH DEVICES — no hover trailers, captions always visible
   ============================================================ */
@media (hover: none) {
  .watchlist-btn {
    opacity: 1;
    transform: none;
  }
  /* No hover state on touch — but the caption stays readable */
  .card-caption-title,
  .card-caption-meta {
    opacity: 1;
    transform: none;
  }
  .movie-card:hover {
    transform: none;
  }
  .movie-card:hover .poster-wrap,
  .movie-card:focus-within .poster-wrap {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  .hero-arrow {
    display: none;
  }
}

/* ============================================================
   30. REDUCED MOTION & PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .navbar,
  .hero,
  footer,
  .back-to-top,
  .page-loader,
  .disclaimer-banner,
  .player-wrapper,
  .scroll-btn,
  .ambient-bg,
  #ambient-bg,
  #ambient-vignette,
  .hero-lightning,
  .lightning-overlay,
  .page-flash,
  .logo-arc,
  #toast-container {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .movie-card,
  .poster-wrap {
    box-shadow: none;
  }
  /* Captions must print readable */
  .card-caption-title,
  .card-caption-meta {
    opacity: 1;
    transform: none;
    color: #000;
  }
}

/* ============================================================
   28. AD BANNER (Adsterra 728x90) — responsive
   ------------------------------------------------------------
   The wrapper keeps the creative centered and never wider than
   its column: max-width + overflow: hidden guarantee ZERO
   horizontal scrolling on any screen. Below 800px the fixed
   728x90 creative is additionally scaled down to fit the
   wrapper's exact width (container queries), so the whole
   banner stays visible instead of being edge-clipped; browsers
   without length-division support simply keep the contained
   clip above — responsive either way.
   ============================================================ */
.ad-banner-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  max-width: 100%;
  overflow: hidden;
}
.ad-banner-wrapper iframe {
  border: 0;
  /* keep the natural 728x90 layout box — the transform below is
     the ONLY thing that fits it to narrow screens (flex-shrink
     would shrink the box AND the scale would shrink it again) */
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .ad-banner-wrapper {
    container-type: inline-size;
  }
  .ad-banner-wrapper iframe {
    transform: scale(calc(min(1, 100cqw / 728px)));
    transform-origin: top center;
    /* trim the layout box to the scaled height (no stray gap) */
    margin-bottom: calc(90px * min(1, 100cqw / 728px) - 90px);
  }
}

/* ============================================================
   19. PREMIUM WATCH PLAYER (Netplayz / Movy style)
   ------------------------------------------------------------
   Player shell + top chrome bar (back / title / runtime +
   quality + audio & subtitles + server picker), server picker
   modal ([Player] / [Embed] tabs, card grid) and the cinematic
   entrance lighting. Scoped to the watch page only.
   ============================================================ */

/* ---- Player shell: dark rounded cinematic frame ---- */
.watch-container {
  max-width: 1280px; /* a touch wider for the cinematic stage */
}
.player-shell {
  position: relative;
  background: rgba(20, 20, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
}
/* Entrance: the shell scales 0.98 -> 1 as the overlay fades */
.player-shell.shell-enter {
  animation: shellIn 0.6s var(--ease-out) both;
}
@keyframes shellIn {
  from { transform: scale(0.98); opacity: 0.85; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ---- Top chrome bar ---- */
.player-chrome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px 10px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.22));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chrome-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 240px;
}
.chrome-back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s var(--ease);
}
.chrome-back:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.5);
}
.chrome-back:active { transform: scale(0.94); }
.chrome-back svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
/* Compact title inside the chrome bar (page h1 lives here) */
.player-chrome-top .watch-title {
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-chrome-top .watch-subtitle {
  font-size: 12px;
  margin-top: 1px;
}
.chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Chrome buttons ---- */
.chrome-menu { position: relative; }
.chrome-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chrome-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.12);
}
.chrome-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}
.chrome-btn-val { color: #00d4ff; }
.chrome-btn--server {
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.08);
}
.lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 8px 10px;
}
.lang-chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lang-chip:hover { border-color: rgba(0, 212, 255, 0.5); }
.lang-chip.active {
  border-color: #00d4ff;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

/* ---- Server picker modal ---- */
body.server-modal-open { overflow: hidden; }
.server-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.server-modal.open {
  visibility: visible;
  opacity: 1;
}
.server-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.server-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 96vw);
  max-height: min(80vh, 720px);
  background: rgba(20, 20, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
  transform: translateY(18px) scale(0.97);
  opacity: 0.6;
  transition: transform 0.32s var(--ease-out), opacity 0.32s ease;
  overflow: hidden;
}
.server-modal.open .server-modal-panel {
  transform: none;
  opacity: 1;
}
.server-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
}
.server-modal-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.server-modal-title svg {
  width: 17px;
  height: 17px;
  fill: #00d4ff;
}
.server-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}
.server-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.server-modal-close:active { transform: scale(0.93); }
.server-modal-close svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.server-modal-body {
  overflow-y: auto;
  padding: 2px 18px 18px;
}
/* premium sources note above the grid */
.sm-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.sm-note svg {
  width: 13px;
  height: 13px;
  fill: #00d4ff;
  flex: none;
}
.sm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* desktop: 3 columns — six Premium cards in a clean 2x3 */
  gap: 10px;
}
.server-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px 12px;
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.22s var(--ease), border-color 0.22s ease, box-shadow 0.22s ease;
}
.server-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.14);
}
.server-card:active { transform: scale(0.97); }
.server-card.active {
  border-color: #00d4ff;
  box-shadow: 0 0 0 1px #00d4ff, 0 0 24px rgba(0, 212, 255, 0.22);
}
.sc-flag {
  font-size: 21px;
  line-height: 1;
}
.sc-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.sc-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(34, 229, 140, 0.15);
}
.server-card.active .sc-check { display: flex; }
.sc-check svg {
  width: 13px;
  height: 13px;
  fill: #22e58c;
}

/* ---- Server modal responsive: 3 cols tablet, bottom sheet mobile ---- */
@media (max-width: 1024px) {
  .sm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .server-modal {
    padding: 0;
    align-items: flex-end; /* bottom sheet */
  }
  .server-modal-panel {
    width: 100%;
    max-height: 84vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.34s var(--ease-out);
  }
  .server-modal.open .server-modal-panel { transform: translateY(0); }
  .sm-grid {
    grid-template-columns: repeat(2, 1fr); /* mobile: 2 columns */
    gap: 9px;
  }
  .player-chrome-top { padding: 8px 10px; }
  .player-chrome-top .watch-title { font-size: 14px; }
  .chrome-btn {
    padding: 8px 11px;
    font-size: 11.5px;
    gap: 5px;
  }
  .chrome-btn svg { width: 13px; height: 13px; }
}
/* floating controls: keep all three chrome buttons on one row on phones */
@media (max-width: 480px) {
  .chrome-btn { padding: 7px 9px; font-size: 10.5px; gap: 4px; }
  .chrome-right { gap: 6px; }
}

/* ============================================================
   GROUPED SERVER LIST (Servers modal — Recommended / Reliable /
   Asian dramas). The status dot + "Unstable" pill are injected
   into each .server-item by watch.js, so the HTML stays clean.
   Visual pass: refined card tiles on a tidy 2-column grid with
   accent-ruled group headers — markup, server order and all
   behavior (dot / dim / hide / active) are unchanged.
   ============================================================ */
/* safety net: the outside AUTO button must never come back */
.watch-topbar > #auto-btn { display: none !important; }

.server-modal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ---- group: accent header + responsive card grid ---- */
.server-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}
.server-group:first-child { margin-top: 4px; }

.server-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* cyan accent bar before the label */
.server-group-title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #00d4ff, rgba(0, 212, 255, 0.2));
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.45);
}
/* fading rule that fills the rest of the header line */
.server-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

.server-list {
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding: 0 6px 4px 2px; /* right gutter keeps the scrollbar off the cards */
}

/* ---- server tile: [dot] name … [badge] (+ injected pill) ---- */
.server-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-height: 46px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease,
              opacity 0.18s ease;
}

.server-item:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.server-item:active { transform: translateY(0); }

.server-item .server-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server-badge {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* status extras on the grouped list (dot / label injected by watch.js) */
.server-item .server-status-dot {
  position: static;   /* inline leading dot instead of the card's corner dot */
  flex: none;
  margin-right: 8px;
}
.server-item .sc-unstable { flex: none; margin-left: 8px; }
.server-item.active {
  border-color: rgba(0, 212, 255, 0.6);
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.22), 0 0 18px rgba(0, 212, 255, 0.16);
}
.server-item.active:hover { background: rgba(0, 212, 255, 0.14); }
.server-item.dimmed-failed { opacity: 0.35; filter: grayscale(0.55); }
.server-item.server-item--hidden { display: none !important; }
.server-item[data-preflight="ok"] .server-status-dot.dot-unknown {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 6px rgba(245, 158, 11, 0.5);
}

/* phones: single-column tiles, calmer rhythm */
@media (max-width: 480px) {
  .server-group { grid-template-columns: 1fr; gap: 8px; }
  .server-group-title { letter-spacing: 0.08em; }
}


/* ============================================================
   20. CINEMATIC ENTRANCE LIGHTING (watch page)
   ============================================================ */
.cine-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;          /* deep black base */
  overflow: hidden;
}
.cine-overlay.cine-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* TMDB backdrop, blurred + saturated behind the black */
.cine-backdrop {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(1.7) brightness(0.4);
  transform: scale(1.12);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.cine-overlay.cine-playing .cine-backdrop { opacity: 1; }
/* God-ray light sweep, left -> right */
.cine-sweep {
  position: absolute;
  top: -25%;
  left: 50%;
  width: 60%;
  height: 150%;
  margin-left: -30%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 246, 214, 0.06) 35%, rgba(255, 246, 214, 0.55) 50%, rgba(255, 246, 214, 0.06) 65%, transparent 100%);
  filter: blur(26px);
  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
}
.cine-overlay.cine-playing .cine-sweep {
  animation: light-sweep 1.3s ease-out 0.1s forwards;
}
@keyframes light-sweep {
  0% { transform: translateX(-60%) rotate(12deg); opacity: 0; }
  30% { opacity: 0.35; }
  100% { transform: translateX(60%) rotate(12deg); opacity: 0; }
}
/* Short yellow Zeus lightning flash */
.cine-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 40%, rgba(255, 215, 0, 0.32), transparent 70%);
  opacity: 0;
}
.cine-overlay.cine-playing .cine-flash {
  animation: cineFlash 0.42s ease-out 0.5s 2;
}
@keyframes cineFlash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
.cine-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 24px;
}
.cine-bolt {
  width: 54px;
  height: 54px;
  fill: #FFD700;
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.75));
  opacity: 0;
}
.cine-overlay.cine-playing .cine-bolt {
  animation: cineBolt 0.9s ease-out 0.45s both;
}
@keyframes cineBolt {
  0% { opacity: 0; transform: scale(0.7); }
  25% { opacity: 1; transform: scale(1.08); }
  45% { opacity: 0.35; transform: scale(1); }
  60% { opacity: 0.95; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.15); }
}
.cine-title {
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  max-width: min(800px, 86vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
}
.cine-overlay.cine-playing .cine-title {
  animation: cineTitleIn 0.55s ease-out 0.7s both;
}
@keyframes cineTitleIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reduced motion: entrance never plays */
@media (prefers-reduced-motion: reduce) {
  .cine-overlay { display: none; }
}

/* ============================================================
   SOURCE CHECKER (server health) — minimal additions
   - status dots on server cards (green / red / yellow)
   - "Hide failed" + "Report server" tools in the modal header
   ============================================================ */
.server-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f59e0b; /* yellow = no recent data */
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
  pointer-events: none;
}
.server-status-dot.dot-ok      { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.55); }
.server-status-dot.dot-fail    { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.55); }
.server-status-dot.dot-unknown { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
/* keep the dot clear of the active-card check badge */
.server-card.active .server-status-dot { right: 30px; }

/* recently FAILED engine (visible while "Hide failed" is OFF,
   or when every engine in the grid is failed) */
.server-card.dimmed-failed { opacity: 0.35; filter: grayscale(0.55); }
/* small "Unstable" label on visible failed cards */
.sc-unstable {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
}
/* failed card hidden by the "Hide failed" toggle (grid keeps healthy cards).
   !important guarantees the card is truly gone even inside flex/grid layouts. */
.server-card.server-card--hidden { display: none !important; }

/* ============================================================
   AutoNext Episode toggle (below the player, TV only)
   ============================================================ */
.autonext-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.autonext-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.autonext-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.autonext-track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  flex: none;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.autonext-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.22s var(--ease-out);
}
.autonext-toggle input:checked + .autonext-track {
  background: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}
.autonext-toggle input:checked + .autonext-track .autonext-thumb {
  transform: translateX(18px);
}
.autonext-toggle input:focus-visible + .autonext-track {
  outline: 2px solid rgba(0, 212, 255, 0.7);
  outline-offset: 2px;
}
.autonext-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.autonext-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .autonext-hint { display: none; } /* keep the bar compact on phones */
  .autonext-bar { padding: 8px 12px; }
}

/* modal header tools */
.server-modal-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 10px;
}
.sm-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sm-tool:hover {
  color: var(--text-primary);
  border-color: rgba(0, 212, 255, 0.4);
}
.sm-tool svg { width: 13px; height: 13px; fill: currentColor; }
.sm-tool-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sm-tool.on {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.08);
}
.sm-tool.on .sm-tool-indicator {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.sm-tool--report:hover { color: #f87171; border-color: rgba(239, 68, 68, 0.45); }

/* "AUTO Best" tool (modal header — the only AUTO trigger): cyan accent */
.sm-tool--auto {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.08);
}
.sm-tool--auto:hover {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.7);
  background: rgba(0, 212, 255, 0.12);
}

/* "Test servers" tool: stroke icon + busy pulse while testing */
.sm-tool--test svg { fill: none; }
.sm-tool--test:disabled { cursor: default; opacity: 0.7; }
.sm-tool--test.testing {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.08);
}
.sm-tool--test.testing svg { animation: smTestPulse 1s ease-in-out infinite; }
@keyframes smTestPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* "Reset status" tool: wipes stored health data + hints (amber accent) */
.sm-tool--reset:hover {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
}

/* subtle "maybe ok": latest preflight hint was OK but unverified —
   the dot stays YELLOW (never green), just with a soft halo ring */
.server-card[data-preflight="ok"] .server-status-dot.dot-unknown {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 6px rgba(245, 158, 11, 0.5);
}

/* mobile bottom sheet: tools move to their own row under the title */
@media (max-width: 768px) {
  .server-modal-header { flex-wrap: wrap; row-gap: 10px; }
  .server-modal-tools { order: 3; width: 100%; margin: 0; flex-wrap: wrap; }
  .sm-tool { padding: 6px 10px; font-size: 11px; }
}

/* ============================================================
   Source Checker progress overlay (Test servers / AUTO trial)
   ============================================================ */
.source-check-overlay {
  position: absolute;
  inset: 0;
  z-index: 4; /* above the iframe and the player-loading layer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: sourceCheckFade 0.25s ease;
}
.source-check-overlay[hidden] { display: none !important; }
@keyframes sourceCheckFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.source-check-card {
  width: min(340px, 92%);
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(18, 18, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.source-check-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.source-check-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
  animation: sourceCheckPulse 1.1s ease-in-out infinite;
}
@keyframes sourceCheckPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}
.source-check-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.source-check-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.source-check-bar {
  margin-top: 16px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.source-check-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00d4ff, #22c55e);
  transition: width 0.35s ease;
}
/* indeterminate sweep (auto-switch probing — unknown total) */
.source-check-overlay.indeterminate .source-check-bar-fill {
  width: 35%;
  animation: sourceCheckSweep 1.1s ease-in-out infinite;
}
@keyframes sourceCheckSweep {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}
.source-check-counter {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.source-check-counter[hidden] { display: none; }

@media (max-width: 640px) {
  .source-check-card { padding: 16px 18px; }
}