/* ============================================================
   World4ufree - main stylesheet
   Dark + light themes, mobile-first, no external font requests.
   ============================================================ */

:root {
  --brand: #4f46e5;
  --brand-accent: #0ea5e9;
  --bg-dark: #0a0f1c;
  --bg-light: #f5f7fb;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shell: 1440px;
  --gutter: 20px;
  --header-h: 66px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---------- Themes ----------
   The values below are the built-in fallbacks. When the browser supports
   color-mix (see further down) every surface is instead derived from the
   operator's chosen --bg-dark / --bg-light, so picking a custom background in
   the admin panel restyles the whole UI rather than just the page backdrop. */

[data-theme='dark'] {
  --bg: var(--bg-dark);
  --bg-elev: #14141f;
  --bg-elev-2: #1b1b29;
  --text: #f2f3f7;
  --text-soft: #c7cbdb;
  --muted: #8f96ad;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.4);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --header-bg: rgba(11, 11, 18, 0.82);
  --skeleton: rgba(255, 255, 255, 0.06);
}

[data-theme='light'] {
  --bg: var(--bg-light);
  --bg-elev: #ffffff;
  --bg-elev-2: #f0f1f7;
  --text: #12141c;
  --text-soft: #3c4152;
  --muted: #666d82;
  --border: rgba(15, 20, 40, 0.1);
  --border-strong: rgba(15, 20, 40, 0.2);
  --shadow: 0 18px 40px rgba(20, 24, 50, 0.14);
  --shadow-sm: 0 6px 18px rgba(20, 24, 50, 0.1);
  --chip-bg: rgba(15, 20, 40, 0.05);
  --header-bg: rgba(246, 247, 251, 0.86);
  --skeleton: rgba(15, 20, 40, 0.07);
}

/* Derive the surfaces from the brand background.
   `color-mix(x 84%, transparent)` produces the same colour at 84% alpha, which
   is how the translucent header follows a custom background. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  [data-theme='dark'] {
    --bg-elev: color-mix(in srgb, var(--bg-dark) 90%, #ffffff);
    --bg-elev-2: color-mix(in srgb, var(--bg-dark) 79%, #ffffff);
    --chip-bg: color-mix(in srgb, var(--bg-dark) 88%, #ffffff);
    --skeleton: color-mix(in srgb, var(--bg-dark) 84%, #ffffff);
    --header-bg: color-mix(in srgb, var(--bg-dark) 84%, transparent);
    --shadow: 0 18px 40px color-mix(in srgb, #000 55%, transparent);
    --shadow-sm: 0 6px 18px color-mix(in srgb, #000 42%, transparent);
  }

  [data-theme='light'] {
    --bg-elev: color-mix(in srgb, var(--bg-light) 14%, #ffffff);
    --bg-elev-2: color-mix(in srgb, var(--bg-light) 55%, #ffffff);
    --chip-bg: color-mix(in srgb, var(--bg-light) 72%, #ffffff);
    --skeleton: color-mix(in srgb, var(--bg-light) 66%, #ffffff);
    --header-bg: color-mix(in srgb, var(--bg-light) 86%, transparent);
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

/* The `hidden` attribute must always win.
   Several components below set an explicit `display`, which would otherwise
   beat the user-agent `[hidden] { display: none }` rule (equal specificity,
   author styles win) and leave invisible overlays swallowing every click -
   this is exactly what was blocking the player's own controls. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 750; letter-spacing: -0.015em; }

p { margin: 0 0 1em; }

button { font: inherit; color: inherit; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: #fff; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

.muted { color: var(--muted); font-weight: 400; }
.dot { opacity: 0.5; margin: 0 6px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--header-h);
}

/* The brand may shrink if space is tight. It must never push the header
   controls off the edge - on a 320px screen three 40px buttons plus a 210px
   logo overflowed the header and pushed the menu button out of reach.
   The logo now scales up with the viewport while staying inside the header. */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; }
.brand-logo {
  height: 26px; width: auto; max-width: 100%;
  transition: transform 0.22s var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.03); }

@media (min-width: 480px) {
  .brand-logo { height: 30px; }
}

@media (min-width: 768px) {
  .brand-logo { height: 34px; }
  .search-input { width: 208px; }
}

@media (min-width: 1024px) {
  .brand-logo { height: 38px; }
}

/* Swap the wordmark so it stays legible in both themes */
[data-theme='dark'] .logo-on-light { display: none; }
[data-theme='light'] .logo-on-dark { display: none; }

.primary-nav { display: none; gap: 4px; margin-left: 12px; }

.nav-link {
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.94rem; color: var(--text-soft);
  transition: background 0.18s, color 0.18s;
}
.nav-link:hover, .nav-link.is-active { background: var(--chip-bg); color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.search-form { position: relative; display: none; }

.search-input {
  width: 230px; padding: 9px 40px 9px 14px;
  background: var(--chip-bg); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); font-size: 0.9rem;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--brand); outline: none; }

.search-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.search-btn:hover { color: var(--brand); }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--chip-bg);
  display: grid; place-items: center; cursor: pointer; color: var(--text-soft);
  transition: color 0.18s, border-color 0.18s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }

[data-theme='dark'] .ico-sun { display: none; }
[data-theme='light'] .ico-moon { display: none; }

/* ---------- Mobile search dropdown ----------
   The inline search field is hidden below 768px, so small screens get a
   search icon in the header that reveals this panel instead.

   Mobile header controls are deliberately limited to TWO: search and menu.
   Three 40px buttons plus the logo overflowed a 320px header and pushed the
   menu button off-screen entirely. The theme toggle is not lost - it lives in
   the drawer on small screens (see .drawer-theme-btn). */

.search-toggle { display: grid; }
.theme-toggle { display: none; }

.mobile-search {
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 12px 0;
  animation: searchDrop 0.22s var(--ease);
}

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

.mobile-search-form { position: relative; display: flex; gap: 8px; }

.mobile-search-form input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); font-size: 0.95rem;
}
.mobile-search-form input::placeholder { color: var(--muted); }
.mobile-search-form input:focus { border-color: var(--brand); outline: none; }

.mobile-search-form button {
  width: 46px; flex: 0 0 46px;
  border: 0; border-radius: var(--radius);
  background: var(--brand); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.mobile-search-form button:hover { background: var(--brand-accent); }

.mobile-search-form .suggest-box { top: calc(100% + 6px); }

/* Hide the icon and the panel wherever the inline field is available */
@media (min-width: 768px) {
  .search-toggle { display: none; }
  .theme-toggle { display: grid; }
  .mobile-search { display: none !important; }
}

/* Comfortable touch targets on phones. Two 44px controls fit comfortably
   alongside the logo; three did not. */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .header-actions { gap: 6px; }
}

/* Reclaim a little horizontal room on the narrowest phones */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-search { animation: none; }
}

/* ---------- Header category dropdown ----------
   A full-width mega menu anchored to the header itself (not the button), so a
   wide panel can never overflow the viewport edge. */

.nav-dropdown-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; font: inherit;
}
.nav-caret { transition: transform 0.2s var(--ease); }
.nav-dropdown-btn[aria-expanded='true'] { background: var(--chip-bg); color: var(--text); }
.nav-dropdown-btn[aria-expanded='true'] .nav-caret { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 22px 0 26px;
  animation: navDropIn 0.18s var(--ease);
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nav-cats {
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nav-cats-heading {
  margin: 0 0 10px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.nav-cats-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.nav-cats-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px; border-radius: 7px;
  font-size: 0.86rem; color: var(--text-soft);
  transition: background 0.16s, color 0.16s;
}
.nav-cats-list a:hover { background: var(--chip-bg); color: var(--brand); }
.nav-cats-count { font-size: 0.7rem; color: var(--muted); opacity: 0.85; }
.nav-cats-more { color: var(--brand) !important; font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-panel { animation: none; }
}

/* ---------- Mobile / tablet drawer ---------- */

.nav-drawer { position: fixed; inset: 0; z-index: 120; }

.nav-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 10, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: mbFadeIn 0.2s ease;
}

.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4);
  animation: mbDrawerIn 0.26s var(--ease);
}

@keyframes mbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.nav-drawer-head img { height: 32px; width: auto; max-width: 100%; }
.nav-drawer-close {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--chip-bg);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.nav-drawer-close:hover { border-color: var(--brand); color: var(--brand); }

.nav-drawer-search { position: relative; display: flex; gap: 8px; margin-bottom: 18px; }
.nav-drawer-search input {
  flex: 1; min-width: 0; padding: 12px 14px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 0.95rem;
}
.nav-drawer-search input:focus { border-color: var(--brand); outline: none; }
.nav-drawer-search button {
  width: 46px; flex: 0 0 46px; border: 0; border-radius: var(--radius);
  background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.nav-drawer-search .suggest-box { top: calc(100% + 6px); }

.nav-drawer-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; min-height: 48px; border-radius: var(--radius);
  font-weight: 600; font-size: 0.98rem; color: var(--text);
}
.drawer-link:hover, .drawer-link.is-active { background: var(--chip-bg); color: var(--brand); }
.drawer-link.is-active { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.drawer-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--chip-bg); color: var(--brand);
}

.nav-drawer-section { padding-top: 16px; border-top: 1px solid var(--border); margin-bottom: 16px; }
.nav-drawer-heading {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700; margin: 0 0 12px;
}
.nav-drawer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-drawer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.nav-drawer-list a { display: block; padding: 10px 4px; color: var(--text-soft); font-size: 0.92rem; }
.nav-drawer-list a:hover { color: var(--brand); }

.nav-drawer-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.85rem; color: var(--muted);
}
.drawer-theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--chip-bg);
  color: var(--text); cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.drawer-theme-btn:hover { border-color: var(--brand); color: var(--brand); }


/* ---------- Download dropdown (watch page) ---------- */

.dl-wrap { position: relative; display: inline-block; }
.btn-download { background: var(--chip-bg); border: 1px solid var(--border); color: var(--text); }
.btn-download:hover { border-color: var(--brand); color: var(--brand); }
.btn-download.is-busy { opacity: 0.65; pointer-events: none; }

.dl-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 232px; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.dl-menu-title {
  margin: 4px 8px 8px; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); font-weight: 700;
}
.dl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 9px; font-size: 0.88rem; font-weight: 600;
}
.dl-item:hover { background: var(--chip-bg); color: var(--brand); }
.dl-res { flex: 1; }
.dl-size { font-size: 0.76rem; color: var(--muted); font-weight: 500; }

/* ---------- Fast download button (promotional CTA) ----------
   Deliberately louder than the rest of the UI: it is a monetised link, so it
   gets its own gradient identity (taken from the brand icon), a badge and a
   slow shine sweep. */

.fast-dl-wrap { margin: 16px 0; }
.fast-dl-wrap:empty { display: none; }

.fast-dl {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 12px;
  border-radius: 14px;
  background: linear-gradient(120deg, #00e069 0%, #00b3a4 46%, #336fff 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 10px 26px rgba(0, 179, 164, 0.34);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.fast-dl:hover,
.fast-dl:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 179, 164, 0.46);
  color: #fff;
}

/* the shine sweep - the visual tell of an "ad" button */
.fast-dl::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  animation: fastDlShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fastDlShine {
  0%, 58% { left: -60%; }
  86%, 100% { left: 125%; }
}

.fast-dl-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.fast-dl-text { display: grid; gap: 2px; min-width: 0; text-align: left; }
.fast-dl-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
}
.fast-dl-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: #ffd166; color: #4a2c00;
}
.fast-dl-note { font-size: 0.76rem; font-weight: 500; opacity: 0.92; }
.fast-dl-go { margin-left: 4px; opacity: 0.85; transition: transform 0.2s var(--ease); }
.fast-dl:hover .fast-dl-go { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .fast-dl::after { animation: none; }
}

@media (max-width: 460px) {
  .fast-dl { width: 100%; }
  .fast-dl-label { font-size: 0.95rem; }
}

/* ---------- Global toast ---------- */

.mb-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  z-index: 160; max-width: min(92vw, 420px);
  padding: 12px 20px; border-radius: 999px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  font-size: 0.88rem; font-weight: 600; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.mb-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- Search suggestions ---------- */

.suggest-box {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; z-index: 80;
}
.suggest-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover { background: var(--chip-bg); }
.suggest-item img { width: 38px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.suggest-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--chip-bg); color: var(--brand);
}
.suggest-text { min-width: 0; }
.suggest-text strong {
  display: block; font-size: 0.9rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest-text span { font-size: 0.78rem; color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius);
  font-weight: 650; font-size: 0.94rem; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.16s var(--ease), background 0.18s, color 0.18s;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-accent); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: var(--chip-bg); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-lg { padding: 14px 24px; font-size: 1rem; border-radius: 16px; }

/* ---------- Hero ---------- */

/* ---------- Hero ----------
   The hero is a contained card, not a full-bleed banner. It lives inside
   .shell, so its outer width is exactly the same as every other section on
   the page. Its height steps up per breakpoint so it stays proportionate
   instead of eating the whole viewport on a laptop. */

.hero { padding-top: 16px; }

.hero-box {
  position: relative; isolation: isolate;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.hero-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hero-track::-webkit-scrollbar { display: none; }

/* ---- Phones: image on top, copy in a panel below ----
   A 16:9 banner dropped into a narrow, tall overlay box was cropped down to
   an unreadable sliver and buried under the copy. Stacking shows the artwork
   at its natural shape and gives the text room to breathe. */
.hero-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  display: flex; flex-direction: column;
}

.hero-slide img {
  position: static; display: block;
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 30%;
}

.hero-overlay {
  position: static; display: block;
  padding: 15px 18px 18px;
  background: var(--bg-elev); color: var(--text);
}

.hero-copy { width: 100%; max-width: none; }

@keyframes heroKen {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 12px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.hero-kicker-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

/* A paragraph, not a heading: the page's single <h1> is the intro heading
   further down, and a heading here would break the document outline. */
.hero-title {
  font-size: clamp(1.5rem, 4.4vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.015em;
  margin: 0 0 12px; color: #fff; max-width: 24ch; line-height: 1.12;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.6);
}
.hero-title-link { color: #fff; }
.hero-title-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, 0.9); font-size: 0.88rem;
  margin-bottom: 16px; max-width: 60ch;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; padding: 3px 11px; font-size: 0.76rem; font-weight: 650;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-badge-rank {
  background: linear-gradient(120deg, var(--brand), var(--brand-accent));
  border-color: transparent; font-weight: 800; letter-spacing: 0.02em;
}
.hero-badge-score { color: #ffd166; }
.hero-badge-score svg { color: #ffd166; }
.hero-genres { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.hero-genre {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; padding: 1px 9px; font-size: 0.74rem; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.hero-desc {
  color: rgba(255, 255, 255, 0.84); font-size: 0.96rem; line-height: 1.6;
  margin: 0 0 20px; max-width: 56ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-cta { color: #fff; box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 46%, transparent); }
.hero-cta:hover { transform: translateY(-2px); }
.hero-details {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff; font-weight: 650; font-size: 0.94rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.hero-details:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

.hero-save {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; font-weight: 650; font-size: 0.9rem; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s;
}
.hero-save:hover { background: rgba(255, 255, 255, 0.18); }
.hero-save.is-saved { background: color-mix(in srgb, var(--brand) 60%, transparent); border-color: transparent; }
.hero-save svg { transition: transform 0.2s var(--ease); }
.hero-save.is-saved svg { transform: scale(1.12); }

/* Carousel controls, positioned inside the hero card. */
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  display: none; place-items: center; cursor: pointer;
  background: rgba(10, 10, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}
.hero-nav:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-50%) scale(1.06); }
.hero-prev { right: 62px; }
.hero-next { right: 14px; }

.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5;
  display: flex; justify-content: center; gap: 7px;
}
.hero-dot {
  width: 22px; height: 5px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.34); cursor: pointer; overflow: hidden;
  transition: width 0.28s var(--ease), background 0.24s;
}
.hero-dot.is-active { width: 46px; background: rgba(255, 255, 255, 0.4); }
.hero-dot.is-active::after {
  content: ''; display: block; height: 100%; width: 100%;
  background: var(--brand-accent);
  transform-origin: left; animation: heroDotFill 7s linear forwards;
}
@keyframes heroDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-count {
  display: none;
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.hero-count b { color: #fff; font-size: 0.95rem; }

/* ---- Phone tuning: the hero sits on a light surface here, so the
   on-photography palette (white text, translucent chips) has to switch to
   theme colours, and the copy is trimmed to the essentials. ---- */
.hero-title { color: var(--text); text-shadow: none; font-size: clamp(1.35rem, 6.2vw, 1.75rem); }
.hero-title-link, .hero-title-link:hover { color: var(--text); }
.hero-kicker { color: var(--text-soft); background: var(--chip-bg); border-color: var(--border); text-shadow: none; }
.hero-meta { color: var(--muted); margin-bottom: 12px; }
.hero-badge { background: var(--chip-bg); border-color: var(--border); color: var(--text-soft); }
.hero-badge-rank { background: linear-gradient(120deg, var(--brand), var(--brand-accent)); border-color: transparent; color: #fff; }
.hero-badge-score { color: var(--text); }
.hero-genre { background: var(--chip-bg); border-color: var(--border); color: var(--text-soft); }
.hero-desc { color: var(--text-soft); }
.hero-details { background: var(--chip-bg); border-color: var(--border); color: var(--text); }
.hero-save { background: var(--chip-bg); border-color: var(--border); color: var(--text); }

/* Artwork + title + rating + one tap is plenty on a phone. */
.hero-desc,
.hero-genres,
.hero-badge-hd,
.hero-save { display: none; }

/* Swiping is the natural gesture, and dots would land on top of the copy. */
.hero-dots { display: none; }
.hero-count {
  position: static; display: block; text-align: right;
  margin: 0; padding: 0 18px 14px;
  color: var(--muted); text-shadow: none;
}
.hero-count b { color: var(--text); }

/* No Ken Burns on a static image - the scale would overflow the slide. */
.hero-slide.is-active img { animation: none; }

/* ---- Tablet and up: the cinematic overlay returns ---- */
@media (min-width: 768px) {
  .hero-slide { display: block; min-height: 460px; }

  .hero-slide img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto;
    min-height: 460px; object-position: center 20%;
    transform: scale(1.02);
  }
  /* Only the visible slide animates, so off-screen slides never repaint. */
  .hero-slide.is-active img { animation: heroKen 22s ease-in-out infinite alternate; }

  /* Two stacked scrims: a left wash so the headline never fights the
     artwork, plus a bottom fade that grounds the caption. Dark in both
     themes, because the hero now sits on top of photography again. */
  .hero-overlay {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end;
    min-height: 460px; padding: 48px 42px 42px;
    color: #fff;
    background:
      linear-gradient(90deg, rgba(5, 5, 11, 0.97) 0%, rgba(5, 5, 11, 0.9) 36%, rgba(5, 5, 11, 0.55) 64%, rgba(5, 5, 11, 0.1) 100%),
      linear-gradient(180deg, rgba(5, 5, 11, 0.3) 0%, rgba(5, 5, 11, 0) 36%, rgba(5, 5, 11, 0.92) 100%);
  }

  .hero-copy { max-width: 660px; }
  .hero-title { color: #fff; text-shadow: 0 3px 22px rgba(0, 0, 0, 0.6); font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
  .hero-title-link, .hero-title-link:hover { color: #fff; }
  .hero-kicker { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
  .hero-meta { color: rgba(255, 255, 255, 0.9); margin-bottom: 16px; }
  .hero-badge { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
  .hero-badge-rank { background: linear-gradient(120deg, var(--brand), var(--brand-accent)); border-color: transparent; }
  .hero-badge-score { color: #ffd166; }
  .hero-genre { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
  .hero-desc { display: -webkit-box; color: rgba(255, 255, 255, 0.84); }
  .hero-genres { display: inline-flex; }
  .hero-badge-hd { display: inline-flex; }
  .hero-save { display: inline-flex; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
  .hero-details { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.26); color: #fff; }

  .hero-nav { display: grid; }
  .hero-dots { display: flex; bottom: 18px; }
  .hero-count {
    position: absolute; right: 16px; bottom: 20px;
    padding: 0; text-align: left;
    color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  .hero-count b { color: #fff; }
}

@media (min-width: 1024px) {
  .hero-slide, .hero-slide img, .hero-overlay { min-height: 500px; }
  .hero-overlay { padding: 56px 52px 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide img { animation: none; }
  .hero-dot.is-active::after { animation: none; transform: scaleX(1); }
}

/* ---------- Sections ---------- */

.section { padding: 34px 0; }

/* Skip layout and paint work for sections that start far below the fold.
   The intrinsic-size hint keeps the scrollbar stable, and because these
   sections begin off-screen any size change never counts toward CLS. */
.row-section,
.facet-section,
.editorial,
.seo-copy {
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}

.section-title { font-size: clamp(1.2rem, 3.4vw, 1.6rem); margin: 28px 0 16px; }
.page-title { font-size: clamp(1.6rem, 5vw, 2.6rem); margin-bottom: 12px; }
.page-head { padding: 22px 0 6px; }
.page-sub { color: var(--muted); font-size: 1rem; }

.lead { font-size: 1.06rem; color: var(--text-soft); max-width: 78ch; }

.intro-section { padding-top: 40px; }

/* ---------- Stats ---------- */

.stat-row {
  list-style: none; display: grid; gap: 12px; padding: 0; margin: 26px 0 22px;
  grid-template-columns: repeat(2, 1fr);
}
.stat {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.stat strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.stat span { font-size: 0.84rem; color: var(--muted); }

/* ---------- Chips ---------- */

.quick-links, .facet-links, .filter-bar, .detail-genres {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.filter-bar { padding: 4px 0 10px; }
.filter-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-right: 4px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--border);
  font-size: 0.86rem; font-weight: 600; color: var(--text-soft);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip-sm { padding: 5px 11px; font-size: 0.8rem; }
.chip-count { font-size: 0.72rem; color: var(--muted); }

/* ---------- Rows & poster grids ---------- */

.row-section { padding: 22px 0; }
.row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.row-title { display: flex; align-items: center; gap: 10px; font-size: clamp(1.15rem, 3.2vw, 1.5rem); margin: 0; }
.row-count {
  font-size: 0.7rem; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  border-radius: 999px; padding: 2px 9px; letter-spacing: 0;
}
.row-more { display: inline-flex; align-items: center; gap: 4px; font-size: 0.86rem; font-weight: 650; color: var(--muted); }
.row-more:hover { color: var(--brand); }
.row-foot { display: flex; justify-content: center; margin-top: 18px; }

/* ---------- "Keep exploring" band ---------- */

.browse-more {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
}
.browse-more-title { font-size: 1.2rem; margin: 0 0 6px; }
.browse-more-text { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 54ch; }
.browse-more-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 768px) {
  .browse-more {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 28px 32px;
  }
  .browse-more-actions { flex-shrink: 0; }
}

/* Cards wrap into a responsive grid - no sideways scrolling anywhere */
.card-grid,
.grid-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Cards ---------- */

.card { min-width: 0; }

.card-poster {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--skeleton); aspect-ratio: 2 / 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.card:hover .card-poster {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

.card-link { display: block; width: 100%; height: 100%; }

.card-poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card:hover .card-poster img { transform: scale(1.05); }

/* Soft top scrim so the dub badge stays readable over bright artwork */
.card-poster::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 34%);
}

.card-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0, 0, 0, 0.7); color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Play button.
   Deliberately parked in the bottom-right corner rather than the centre, so
   the large central area of the artwork stays a link to the title page and
   there is never any doubt about what a click will do. */
.card-play {
  position: absolute; inset: 0; z-index: 3;
  border: 0; padding: 0; margin: 0; background: none;
  pointer-events: none; cursor: pointer;
  opacity: 0; transition: opacity 0.22s var(--ease);
}
.card-play-ring {
  position: absolute; right: 9px; bottom: 9px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  transform: scale(0.86);
  transition: transform 0.22s var(--ease), background 0.2s;
}
.card-play-ring:hover { background: var(--brand-accent); }
.card-play-ring svg { margin-left: 2px; }
.card:hover .card-play,
.card-play:focus-visible { opacity: 1; }
.card:hover .card-play-ring,
.card-play:focus-visible .card-play-ring { transform: scale(1); }

.card-body { padding: 10px 2px 0; }

/* A fixed two-line title keeps every meta row on the same baseline,
   so a grid row never looks ragged. */
.card-title {
  font-size: 0.88rem; font-weight: 650; margin: 0 0 4px; line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title-link { color: inherit; }
.card-title-link:hover { color: var(--brand); }

.card-meta { font-size: 0.74rem; color: var(--muted); margin: 0; display: flex; align-items: center; flex-wrap: wrap; }
.card-kind { font-weight: 600; }
.card-score { display: inline-flex; align-items: center; gap: 3px; color: #f5c451; font-weight: 650; }

/* ---------- Collections ---------- */

.grid-collections { display: grid; gap: 14px; grid-template-columns: repeat(1, 1fr); padding-top: 12px; }
.collection-card {
  position: relative; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.collection-card:hover { transform: translateY(-3px); border-color: var(--brand); }
.collection-count {
  position: absolute; top: 18px; right: 20px;
  font-size: 0.78rem; font-weight: 700; color: var(--brand);
  background: var(--chip-bg); padding: 3px 10px; border-radius: 999px;
}
.collection-name { font-size: 1.08rem; margin: 0 0 10px; max-width: 80%; }
.collection-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.84rem; font-weight: 650; color: var(--muted); }
.collection-card:hover .collection-cta { color: var(--brand); }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs { padding: 16px 0 4px; font-size: 0.82rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: 0.5; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Pagination ---------- */

.pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 30px 0 10px;
}
.page-link {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elev); font-weight: 600; font-size: 0.9rem;
}
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-link.is-disabled { opacity: 0.4; pointer-events: none; }
.page-gap { display: grid; place-items: center; min-width: 28px; color: var(--muted); }

/* ---------- Detail page ---------- */

.detail-hero { position: relative; padding-bottom: 24px; }
.detail-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.detail-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; filter: blur(2px); }
.detail-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), var(--bg) 88%);
}
[data-theme='light'] .detail-hero-bg img { opacity: 0.16; }
[data-theme='light'] .detail-hero-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), var(--bg) 88%); }

.detail-hero .shell { position: relative; z-index: 2; }

.detail-head { display: grid; gap: 20px; padding-top: 10px; }
.detail-poster {
  width: 168px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.detail-title { font-size: clamp(1.5rem, 5.2vw, 2.6rem); margin-bottom: 12px; }

.detail-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px;
  padding: 0; margin: 0 0 14px; font-size: 0.88rem; color: var(--text-soft);
}
.detail-meta li { display: inline-flex; align-items: center; gap: 5px; }
.meta-kind {
  background: var(--brand); color: #fff; padding: 2px 10px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.meta-rating svg { color: #f5c451; }

.detail-genres { margin-bottom: 18px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.detail-overview h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.detail-overview p { color: var(--text-soft); max-width: 80ch; }

/* Seasons / episodes */

.season-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.season-tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--chip-bg); font-weight: 650; font-size: 0.86rem; cursor: pointer;
}
.season-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.episode-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.episode {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid var(--border);
  font-size: 0.88rem; font-weight: 600;
  transition: border-color 0.18s, color 0.18s;
}
.episode:hover { border-color: var(--brand); color: var(--brand); }
.episode.is-current { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.ep-num {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--chip-bg);
  font-size: 0.78rem; font-weight: 700;
}
.ep-play { margin-left: auto; opacity: 0.55; }

/* Cast */

.cast-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.cast-member { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cast-member img, .cast-initial {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--chip-bg); display: grid; place-items: center; font-weight: 700; color: var(--muted);
}
.cast-text { min-width: 0; }
.cast-text strong { display: block; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-text span { font-size: 0.78rem; color: var(--muted); }

.subtitles-line { color: var(--text-soft); font-size: 0.92rem; }

/* ---------- Viewer comments ---------- */

.comment-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.comment {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-head img,
.comment-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--chip-bg); display: grid; place-items: center;
  font-weight: 700; color: var(--muted); font-size: 0.9rem;
}
.comment-head strong { font-size: 0.9rem; }
.comment-date { font-size: 0.76rem; color: var(--muted); margin-left: auto; white-space: nowrap; }
.comment-body { margin: 0; color: var(--text-soft); font-size: 0.94rem; }

/* ---------- Watch page ---------- */

.watch-main { padding-bottom: 20px; }
.player-shell { padding: 16px 0 0; }

.player-frame {
  position: relative; width: 100%; background: #000;
  aspect-ratio: 16 / 9; overflow: hidden;
  max-height: 82vh;
  /* Match the hero card so the player sits in the same container language. */
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
/* Artwork behind the video until the first frame arrives, so the player is
   never a black void while the stream resolves. */
.player-art {
  position: absolute; inset: 0; z-index: 1;
  background-color: #0d0d15;
  background-size: cover; background-position: center 26%;
  filter: brightness(0.72);
  transition: opacity 0.4s var(--ease);
}
.player-frame.is-ready .player-art { opacity: 0; }

.player-video {
  position: relative; z-index: 2;
  width: 100%; height: 100%; display: block;
  /* Transparent so the artwork layer behind stays visible until the first
     video frame arrives - no black void while buffering. */
  background: transparent; object-fit: contain;
}

/* Click-to-play overlay. Nothing is downloaded until this is dismissed, which
   is what keeps the watch page fast: previously the video started pulling
   bytes through the proxy the moment the page loaded. */
.player-start {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(5, 5, 11, 0.12), rgba(5, 5, 11, 0.62));
}
.player-start-btn {
  width: 78px; height: 78px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--brand); color: #fff;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 0 9px rgba(255, 255, 255, 0.09);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.player-start-btn svg { margin-left: 4px; }
.player-start-btn:hover { transform: scale(1.07); background: var(--brand-accent); }
.player-start-note {
  margin: 0; color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem; font-weight: 650;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.player-unavailable {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center; color: #fff; background: #101018;
}
.pu-icon { color: var(--brand-accent); }
.player-unavailable h2 { font-size: 1.15rem; margin: 0; }
.player-unavailable p { color: rgba(255, 255, 255, 0.7); max-width: 46ch; font-size: 0.9rem; margin: 0; }
.pu-note { font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.55) !important; margin-top: 12px !important; }
.pu-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }

/* Player controls */

.player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%);
  opacity: 0; visibility: hidden; transition: opacity 0.24s, visibility 0.24s;
}
/* Visible whenever the pointer moved recently or playback is paused;
   hidden only while playing and idle. */
.player-frame.is-ready:not(.is-idle) .player-controls,
.player-frame.is-paused .player-controls { opacity: 1; visibility: visible; }

.pc-progress {
  position: relative; height: 22px; display: flex; align-items: center;
  cursor: pointer; touch-action: none;
}
.pc-progress::before {
  content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: rgba(255, 255, 255, 0.26); border-radius: 4px;
}
.pc-buffer, .pc-played {
  position: absolute; left: 0; height: 4px; border-radius: 4px;
}
.pc-buffer { background: rgba(255, 255, 255, 0.42); width: 0; }
.pc-played { background: var(--brand); width: 0; }
.pc-knob {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%) scale(0.85);
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transition: transform 0.16s;
}
.pc-progress:hover .pc-knob, .pc-progress:focus-visible .pc-knob { transform: translateY(-50%) scale(1.15); }

.pc-row { display: flex; align-items: center; gap: 4px; }
.pc-btn {
  min-width: 44px; height: 44px; padding: 0 8px;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 10px; transition: background 0.16s;
}
.pc-btn:hover { background: rgba(255, 255, 255, 0.14); }
.pc-text-btn { font-size: 0.82rem; font-weight: 700; padding: 0 10px; }

.pc-time {
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.pc-sep { opacity: 0.5; }
.pc-spacer { flex: 1; }
.pc-main { color: #fff; }
.pc-dl-btn { gap: 6px; }
.pc-dl-text { font-size: 0.8rem; font-weight: 650; }

.pc-volume { display: flex; align-items: center; }
.pc-vol-range { width: 0; opacity: 0; transition: width 0.2s, opacity 0.2s; accent-color: var(--brand); }
.pc-volume:hover .pc-vol-range, .pc-vol-range:focus { width: 74px; opacity: 1; }

.player-frame .ico-pause { display: none; }
.player-frame.is-playing .ico-play { display: none; }
.player-frame.is-playing .ico-pause { display: block; }

.pc-menu-wrap { position: relative; }
.pc-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 148px; max-height: 260px; overflow-y: auto;
  background: rgba(18, 18, 26, 0.97); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow);
}
.pc-menu-title {
  margin: 2px 6px 8px; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55);
}
.pc-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  padding: 9px 10px; border: 0; background: transparent; color: #fff;
  border-radius: 8px; cursor: pointer; font-size: 0.86rem; text-decoration: none;
}
.pc-menu-item:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pc-menu-item.is-active { color: var(--brand-accent); font-weight: 700; }
.pc-menu-sub { font-style: normal; font-size: 0.74rem; opacity: 0.6; white-space: nowrap; }

.player-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.4); z-index: 6;
}
.player-frame.is-ready .player-loading { display: none; }
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22); border-top-color: var(--brand);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.player-toast {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 16px;
  border-radius: 999px; font-size: 0.84rem; z-index: 7;
}

/* Watch info */

.watch-info { padding: 24px 0 6px; }
.watch-title { font-size: clamp(1.25rem, 4.4vw, 2rem); margin-bottom: 10px; }
.watch-ep { display: block; font-size: 0.82rem; font-weight: 600; color: var(--brand); margin-top: 6px; letter-spacing: 0.02em; }
.watch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.watch-overview { color: var(--text-soft); max-width: 82ch; }
.watch-hint { font-size: 0.82rem; color: var(--muted); }
.watch-hint kbd {
  background: var(--chip-bg); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 0.76rem; font-family: inherit;
}

/* ---------- Editorial / FAQ ---------- */

.editorial { padding-top: 40px; border-top: 1px solid var(--border); margin-top: 24px; }
.editorial-inner { max-width: 820px; }
.editorial-head { margin-bottom: 32px; }
.editorial-kicker {
  margin: 0 0 8px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand);
}
.editorial-title { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 12px; }
.editorial-lead { color: var(--text-soft); font-size: 1rem; margin: 0; }
.editorial-block { margin-bottom: 30px; }
.editorial-block h2 { font-size: clamp(1.2rem, 3.2vw, 1.5rem); margin-bottom: 10px; }
.editorial-block h3 { font-size: 1rem; margin-bottom: 6px; }
.editorial-block p { color: var(--text-soft); font-size: 0.98rem; line-height: 1.68; margin-bottom: 0.85em; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.step {
  position: relative; counter-increment: step;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 18px 62px;
}
.step::before {
  content: counter(step);
  position: absolute; left: 18px; top: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 0.88rem;
}
.step p { margin: 0; font-size: 0.96rem; }

.faq-intro { color: var(--text-soft); }
.faq-list { display: grid; gap: 10px; margin-top: 18px; }
.faq-item {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item[open] { border-color: var(--brand); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--brand); border-radius: 2px;
  transition: transform 0.22s var(--ease);
}
.faq-icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 18px 18px; color: var(--text-soft); font-size: 0.96rem; }
.faq-a p { margin: 0; }

/* ---------- SEO copy blocks ---------- */

.seo-copy { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 30px; }
.seo-copy h2 { font-size: clamp(1.15rem, 3.2vw, 1.5rem); }
.seo-copy p { color: var(--text-soft); max-width: 86ch; }

/* ---------- CMS article ---------- */

.cms-article { max-width: 840px; padding: 12px 0 50px; }
.cms-body h2 { font-size: 1.4rem; margin-top: 32px; }
.cms-body h3 { font-size: 1.15rem; margin-top: 24px; }
.cms-body p, .cms-body li { color: var(--text-soft); }
.cms-body ul { padding-left: 22px; }
.cms-body a { color: var(--brand); text-decoration: underline; }

/* ---------- Empty / error states ---------- */

.empty-state, .error-state {
  text-align: center; padding: 60px 20px;
  max-width: 640px; margin: 0 auto;
}
.empty-state h2, .error-state h1 { font-size: clamp(1.3rem, 4.4vw, 2rem); }
.empty-state p, .error-text { color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0; }

.error-code {
  font-size: 3.4rem; font-weight: 800; margin: 0;
  background: linear-gradient(120deg, var(--brand), var(--brand-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.error-detail {
  text-align: left; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; font-size: 0.82rem; overflow-x: auto; color: var(--muted);
}

.search-page-form {
  position: relative; display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 640px; margin: 20px auto 0;
}
.search-page-input {
  flex: 1 1 240px; padding: 13px 16px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 1rem;
}
.search-page-input:focus { border-color: var(--brand); outline: none; }

/* ---------- Sitemap page ---------- */

.sitemap-block { padding: 20px 0; border-bottom: 1px solid var(--border); }
.sitemap-block h2 { font-size: 1.15rem; }
.sitemap-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  font-size: 0.9rem;
}
.sitemap-list a { color: var(--text-soft); }
.sitemap-list a:hover { color: var(--brand); }

/* ---------- Modal (trailer) ---------- */

.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); }
.modal-body { position: relative; width: min(940px, 100%); z-index: 2; }
.modal-video { width: 100%; border-radius: var(--radius); background: #000; }
.modal-close {
  position: absolute; top: -44px; right: 0; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}

/* ---------- Back to top ---------- */

.to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  box-shadow: var(--shadow-sm); display: grid; place-items: center;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 50px; padding: 44px 0 30px;
  background: var(--bg-elev); border-top: 1px solid var(--border);
}
.footer-brand .brand img { height: 32px; width: auto; max-width: 100%; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.footer-heading { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text); margin-bottom: 12px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.9rem; }
.footer-list a { color: var(--muted); }
.footer-list a:hover { color: var(--brand); }
.footer-about { color: var(--muted); font-size: 0.88rem; margin: 14px 0 0; max-width: 46ch; }
.footer-bottom {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.footer-disclaimer, .footer-copy { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 480px) {
  .card-grid,
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 560px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .grid-collections { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .cast-list { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
  .search-form { display: block; }
  .card-grid,
  .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .grid-collections { grid-template-columns: repeat(3, 1fr); }
  .stat-row { grid-template-columns: repeat(5, 1fr); }
  .detail-head { grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
  .detail-poster { width: 100%; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .cast-list { grid-template-columns: repeat(4, 1fr); }
  .episode-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; --gutter: 36px; }
  .primary-nav { display: flex; }
  /* The drawer takes over from here, so hide its trigger */
  .menu-toggle { display: none; }
  .search-input { width: 240px; }
  .card-grid,
  .grid-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .player-frame { max-height: 78vh; }
}

@media (min-width: 1280px) {
  .card-grid,
  .grid-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Keep the home rows to a single screenful on phones: six posters instead of
   twelve. Desktop still gets the full dozen. Scoped to home/related rows so
   the browse and search pages keep their full result sets. */
@media (max-width: 767px) {
  .row-section .card-grid .card:nth-child(n + 7) { display: none; }
}

/* Touch devices: the play ring is always visible, with no darkening overlay
   (the wrapper is still click-through so the artwork stays tappable). */
@media (hover: none) {
  .card-play { opacity: 1; }
  .card-play-ring { width: 46px; height: 46px; transform: scale(1); }
  .pc-volume .pc-vol-range { display: none; }
}

/* Coarse pointers get larger hit areas in the player */
@media (pointer: coarse) {
  .pc-btn { min-width: 48px; height: 48px; }
  .pc-progress { height: 30px; }
  .pc-progress::before, .pc-buffer, .pc-played { height: 5px; }
  .pc-knob { width: 16px; height: 16px; }
  .pc-menu-item { padding: 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .player-controls, .to-top { display: none !important; }
}