@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* CH8 — primary UI face. Covers Latin fully and every Kurdish Sorani letter;
   Vazirmatn sits behind it for the Arabic codepoints CH8 does not carry. */
@font-face {
  font-family: 'CH8';
  src: url('/assets/fonts/CH8.woff') format('woff'),
       url('/assets/fonts/CH8.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* ============================================================
   iCinema — design tokens
   ============================================================ */
:root {
  --bg: #08080c;
  --bg-deep: #050508;
  --raise: #101017;
  --surface: #16161f;
  --surface-2: #1e1e29;
  --surface-3: #292935;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #f6f6f9;
  --text-dim: #a6a6b4;
  --text-faint: #6d6d7c;

  --brand: #d81c3f;
  --brand-hot: #f02a50;
  --brand-deep: #8d0b20;
  --brand-soft: rgba(216, 28, 63, 0.14);
  --gold: #f5b73c;
  --gold-deep: #c8871b;
  --green: #2fa05c;

  --accent-grad: linear-gradient(100deg, var(--brand-hot) 0%, var(--gold) 100%);

  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.42);
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.66);
  --shadow-brand: 0 14px 38px rgba(216, 28, 63, 0.34);
  --shadow-gold: 0 10px 30px rgba(245, 183, 60, 0.26);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --fast: 0.18s;
  --mid: 0.34s;
  --slow: 0.6s;

  --header-h: 78px;
  --gutter: clamp(16px, 4vw, 58px);
  --maxw: 1720px;

  --font: 'CH8', 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, 'Noto Sans Arabic', sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }

/* Author `display` rules beat the browser's own [hidden] styling no matter the
   specificity, so anything with `display:` set would stay on screen after JS
   hides it. This restores the attribute's meaning everywhere, once. */
[hidden] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.18; font-weight: 700; letter-spacing: -0.015em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: #3b3b4a; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.grain, .hero-orbit, .poster-glow { display: none !important; }

/* ============================================================
   Floating glass header
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  padding: 14px var(--gutter) 0;
  pointer-events: none;
  transition: transform 0.42s var(--ease-out), opacity 0.26s var(--ease);
  will-change: transform;
}
.site-header > * { pointer-events: auto; }

/* Chrome slides away while reading or watching, and comes straight back on
   the smallest upward scroll. */
.site-header.hidden {
  transform: translateY(calc(-100% - 18px));
  opacity: 0;
}
.site-header.hidden > * { pointer-events: none; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 4px 12px rgba(216, 28, 63, 0.4)); }
.brand .brand-logo {
  display: block;
  width: 156px;
  height: 50px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 7px 16px rgba(229, 9, 20, 0.3));
}

.brand span {
  display: flex; align-items: baseline; gap: 1px;
  /* A Latin wordmark must not be reordered by the page's RTL direction,
     otherwise KURD + FLIX lays out right-to-left and reads "FLIXKURD". */
  direction: ltr;
  font-size: 23px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
}
.brand strong { color: var(--text); font-weight: 800; }
.brand small {
  font-size: 23px; font-weight: 800;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The nav itself is the floating pill, centred like the reference sites. */
.desktop-nav {
  display: flex; align-items: center; gap: 4px;
  margin-inline: auto;
  padding: 7px;
  border-radius: var(--radius-pill);
  background: rgba(16, 16, 23, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow);
}

.desktop-nav a {
  position: relative;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.desktop-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.desktop-nav a.active { color: #fff; background: var(--brand); box-shadow: var(--shadow-brand); }

.header-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 7px;
  border-radius: var(--radius-pill);
  background: rgba(16, 16, 23, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow);
}

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 19px;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); transform: scale(1.08); }

.pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 16px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.pill-btn:hover { background: var(--surface-2); color: var(--text); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(47, 160, 92, 0.2); }

.avatar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em;
  transition: transform var(--fast) var(--spring), box-shadow var(--fast) var(--ease);
}
.avatar:hover { transform: scale(1.08); box-shadow: var(--shadow-brand); }

/* ============================================================
   Account — shared by every page's header
   ============================================================ */
.account-slot { display: flex; align-items: center; gap: 8px; min-height: 40px; }

/* Round avatars everywhere: a photo, or initials on a brand gradient. */
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2); }
.avatar-initials {
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand-hot), var(--brand-deep));
  color: #fff; font-weight: 800; letter-spacing: 0.02em;
  font-size: 0.82em; text-transform: uppercase;
}

.online-dot {
  position: absolute; inset-block-end: 2%; inset-inline-end: 2%;
  width: 26%; height: 26%; min-width: 9px; min-height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg);
}

.account-login {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 16px 18px;
  border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  font-size: 13.5px; font-weight: 700;
  box-shadow: var(--shadow-brand);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.account-login:hover { background: var(--brand-hot); transform: translateY(-1px); }
.account-login svg, .account-bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.account-bell {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-dim);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.account-bell:hover { background: var(--surface-2); color: var(--text); }
.bell-count, .menu-count {
  min-width: 18px; height: 18px; padding-inline: 5px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-hot); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 1;
}
.bell-count { position: absolute; inset-block-start: 1px; inset-inline-end: 0; border: 2px solid var(--bg); animation: bellIn 0.4s var(--spring); }
.bell-count[hidden], .menu-count[hidden] { display: none; }
@keyframes bellIn { from { transform: scale(0); } to { transform: scale(1); } }

.account-menu-wrap { position: relative; }
.account-avatar-btn {
  width: 40px; height: 40px;
  padding: 2px;
  border-radius: 50%;
  background: var(--accent-grad);
  transition: transform var(--fast) var(--spring), box-shadow var(--fast) var(--ease);
}
.account-avatar-btn:hover, .account-avatar-btn[aria-expanded="true"] { transform: scale(1.06); box-shadow: var(--shadow-brand); }
.account-avatar { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; display: grid; place-items: center; font-size: 13px; }
.account-avatar.large { width: 46px; height: 46px; flex: none; border: 0; font-size: 15px; }

.account-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 120;
  width: 250px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: rgba(18, 18, 26, 0.98);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
  transform-origin: top left;
  animation: menuIn 0.22s var(--ease-out) both;
}
.account-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }

.account-menu-head {
  display: flex; align-items: center; gap: 11px;
  padding: 10px; margin-bottom: 4px;
  border-radius: var(--radius);
  background: var(--surface);
}
.account-menu-head span { display: flex; flex-direction: column; min-width: 0; }
.account-menu-head strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-head small { font-size: 11.5px; color: var(--text-faint); direction: ltr; text-align: end; }

.account-menu > a:not(.account-menu-head), .account-menu > button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-dim);
  text-align: start;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.account-menu i { font-style: normal; width: 18px; text-align: center; opacity: 0.8; }
.account-menu > a:hover, .account-menu > button:hover { background: var(--surface-2); color: var(--text); }
.account-menu .menu-count { margin-inline-start: auto; }
.account-menu .danger:hover { background: var(--brand); color: #fff; }

@media (max-width: 560px) {
  .account-login span { display: none; }
  .account-login { width: 40px; padding: 0; justify-content: center; }
}

/* ♥ favourite on a film page */
.fav-btn i { font-style: normal; transition: transform var(--fast) var(--spring); }
.fav-btn.active { background: rgba(216, 28, 63, 0.18); border-color: rgba(216, 28, 63, 0.55); color: #ff8da0; }
.fav-btn.pop i { animation: dockPop 0.44s var(--spring); }

/* ============================================================
   Hero — blurred, dimmed backdrop with the poster beside it
   ============================================================ */
.hero {
  position: relative;
  min-height: min(90vh, 820px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 40px) clamp(56px, 8vh, 104px);
  overflow: hidden;
  isolation: isolate;
}

/* The art stays bright and legible; readability comes from a directional
   scrim over it rather than from dimming the whole image. */
.hero-backdrop {
  position: absolute; inset: -4%;
  z-index: -3;
  background-size: cover;
  background-position: center 18%;
  opacity: 0.42;
  filter: blur(5px) saturate(118%) brightness(0.82);
  transform: scale(1.06);
  transition: opacity var(--slow) var(--ease), background-image var(--slow) var(--ease);
  animation: heroDrift 30s var(--ease) infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(0, -2%, 0); }
}

/* Scrim: heavy behind the copy, clear over the artwork. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to inline-end, rgba(6, 6, 10, 0.97) 0%, rgba(6, 6, 10, 0.88) 34%, rgba(6, 6, 10, 0.52) 64%, rgba(6, 6, 10, 0.34) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(8, 8, 12, 0.8) 24%, rgba(8, 8, 12, 0.22) 62%);
}

/* Slow-breathing colour wash — pure compositor work, no layout cost. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 28%, rgba(216, 28, 63, 0.3) 0%, transparent 62%),
    radial-gradient(48% 45% at 22% 78%, rgba(245, 183, 60, 0.18) 0%, transparent 65%);
  animation: auroraShift 18s var(--ease) infinite alternate;
  will-change: opacity, transform;
}

@keyframes auroraShift {
  from { opacity: 0.65; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(-2%, 1.5%, 0) scale(1.08); }
}

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: center;
  width: 100%;
}

.hero-copy { max-width: 660px; animation: riseIn var(--slow) var(--ease-out) both; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 15px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 183, 60, 0.32);
  background: rgba(245, 183, 60, 0.1);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold);
}

.hero-copy h1 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.7);
}

.hero-copy > p {
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  color: var(--text-dim);
  max-width: 56ch;
  margin-bottom: 24px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 28px; }

.hero-meta span {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 600;
}
.hero-meta span:first-child { background: rgba(245, 183, 60, 0.16); border-color: rgba(245, 183, 60, 0.4); color: var(--gold); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.primary-btn, .secondary-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding-inline: 30px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700;
  transition: transform var(--fast) var(--spring), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}

.primary-btn { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.primary-btn:hover { background: var(--brand-hot); transform: translateY(-3px) scale(1.02); }
.primary-btn:active { transform: translateY(-1px) scale(0.99); }

.secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
}
.secondary-btn:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-3px); }

/* Poster beside the hero — shown from tablet up, like the reference layouts. */
.hero-poster-wrap { display: none; }

@media (min-width: 900px) {
  .hero-content { grid-template-columns: minmax(0, 1fr) auto; }

  .hero-poster-wrap {
    display: block;
    position: relative;
    perspective: 1400px;
    animation: riseIn var(--slow) 0.12s var(--ease-out) both;
  }
  .hero-poster-wrap::after {
    content: '';
    position: absolute; inset: 14% -8% -10%;
    z-index: -1;
    background: radial-gradient(60% 50% at 50% 50%, rgba(216, 28, 63, 0.5), transparent 70%);
    filter: blur(50px);
    animation: glowPulse 7s var(--ease) infinite alternate;
  }

  @keyframes glowPulse {
    from { opacity: 0.6; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1.08); }
  }

  .hero-poster {
    width: clamp(230px, 21vw, 340px);
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform-style: preserve-3d;
    transform: rotateY(-13deg) rotateX(4deg) translateZ(0);
    animation: posterFloat 9s var(--ease) infinite alternate;
    transition: transform var(--slow) var(--ease-out), box-shadow var(--mid) var(--ease);
    will-change: transform;
  }

  /* Settles square to the viewer on hover, so the 3D never fights legibility. */
  .hero-poster:hover {
    animation-play-state: paused;
    transform: rotateY(0deg) rotateX(0deg) translateY(-10px) scale(1.04);
    box-shadow: var(--shadow-lg), var(--shadow-brand);
  }

  @keyframes posterFloat {
    from { transform: rotateY(-13deg) rotateX(4deg) translate3d(0, 0, 0); }
    to { transform: rotateY(-7deg) rotateX(-2deg) translate3d(0, -16px, 0); }
  }
}

/* Slide dots + counter */
.hero-dots {
  position: absolute;
  inset-inline-start: var(--gutter);
  bottom: clamp(22px, 4vh, 40px);
  z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(16, 16, 23, 0.66);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.hero-dots::before {
  content: attr(data-count);
  font-size: 12px; font-weight: 700;
  color: var(--text-faint);
  margin-inline-end: 6px;
  letter-spacing: 0.06em;
}

.hero-dots button {
  width: 9px; height: 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
  transition: all var(--mid) var(--spring);
}
.hero-dots button:hover { background: rgba(255, 255, 255, 0.5); transform: scale(1.2); }
.hero-dots button.active { width: 34px; background: var(--accent-grad); }

/* ============================================================
   Signal strip + genre chips
   ============================================================ */
.signal-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 3vw, 48px);
  margin-block: 34px;
  padding: 22px var(--gutter);
  border-block: 1px solid var(--line);
}
.signal-strip > div { display: flex; flex-direction: column; gap: 1px; }
.signal-strip strong { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.signal-strip span { font-size: 12.5px; color: var(--text-faint); }
.signal-strip i { width: 1px; height: 36px; background: var(--line); flex-shrink: 0; }
.live-signal { flex-direction: row !important; align-items: center; gap: 9px !important; }
.live-signal b { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2.2s var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 160, 92, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(47, 160, 92, 0); }
}

.genre-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }

.genre-cloud button {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--raise);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-dim);
  transition: all var(--fast) var(--spring);
}
.genre-cloud button:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--text);
  transform: translateY(-3px);
}

/* ============================================================
   Rails
   ============================================================ */
.content-shell { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 68px); padding-bottom: 90px; }
.rail-section { content-visibility: auto; contain-intrinsic-size: auto 420px; }

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

.section-kicker {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.section-heading h2 { font-size: clamp(1.2rem, 2.2vw, 1.75rem); font-weight: 700; }

.section-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding-inline: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--raise);
  font-size: 13px; font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  transition: all var(--fast) var(--ease);
}
.section-link:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand); transform: translateX(-3px); }

.rail-wrap { position: relative; }

.rail-nav {
  position: absolute;
  inset-block-start: calc(50% - 46px);
  transform: translateY(-50%);
  z-index: 6;
  width: 44px; height: 68px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: rgba(13, 13, 19, 0.82);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 26px; line-height: 1;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity var(--mid) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.rail-prev { inset-inline-start: calc(var(--gutter) * -0.5); }
.rail-next { inset-inline-end: calc(var(--gutter) * -0.5); }

.rail-wrap:hover .rail-nav, .rail-nav:focus-visible { opacity: 1; }
.rail-nav:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-50%) scale(1.06); }

/* Touch devices scroll by swipe; arrows would only get in the way. */
@media (hover: none), (max-width: 760px) {
  .rail-nav { display: none; }
}

.card-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(146px, 17vw, 204px);
  gap: clamp(11px, 1.2vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding-block: 6px 16px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.card-rail > * { scroll-snap-align: start; }

/* ============================================================
   Media card
   ============================================================ */
.media-card { position: relative; cursor: pointer; transition: transform var(--mid) var(--ease-out); }
.media-card:hover, .media-card:focus-visible { transform: translateY(-8px); z-index: 5; }

.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  transition: box-shadow var(--mid) var(--ease), outline-color var(--fast) var(--ease);
}
.media-card:hover .poster { box-shadow: var(--shadow); outline-color: var(--brand); }

.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out), filter var(--mid) var(--ease); }
.media-card:hover .poster img { transform: scale(1.08); filter: brightness(0.66); }

/* Rating start-side, views/episodes end-side — the pattern all three sites use. */
.card-badges {
  position: absolute;
  inset-block-start: 9px;
  inset-inline: 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.rating-badge, .type-badge, .views-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
}
.rating-badge { background: var(--gold); color: #1a1205; box-shadow: var(--shadow-sm); }
.views-badge { background: rgba(6, 6, 10, 0.78); color: var(--text-dim); }
.type-badge { background: rgba(216, 28, 63, 0.92); color: #fff; }

.card-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(6, 6, 10, 0.8), rgba(6, 6, 10, 0.04));
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}
.media-card:hover .card-overlay, .media-card:focus-visible .card-overlay { opacity: 1; }

.play-orb {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff; font-size: 17px;
  padding-inline-start: 3px;
  box-shadow: var(--shadow-brand);
  transform: scale(0.7);
  transition: transform var(--mid) var(--spring), background var(--fast) var(--ease);
}
.media-card:hover .play-orb { transform: scale(1); }
.play-orb:hover { background: var(--brand-hot); }

.media-card h3 {
  margin-top: 12px;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--fast) var(--ease);
}
.media-card:hover h3 { color: var(--gold); }

.card-info { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; color: var(--text-faint); }
.card-info span + span::before { content: '·'; margin-inline-end: 7px; }

/* ============================================================
   Feature band
   ============================================================ */
.feature-band {
  position: relative;
  display: grid; align-items: center;
  min-height: 360px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border: 1px solid var(--line);
}

.feature-visual {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0.42;
  filter: blur(3px);
  transition: transform var(--slow) var(--ease-out), opacity var(--mid) var(--ease);
}
.feature-band:hover .feature-visual { transform: scale(1.06); opacity: 0.54; }

.feature-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to inline-end, rgba(8, 8, 12, 0.96) 0%, rgba(8, 8, 12, 0.7) 50%, rgba(8, 8, 12, 0.3) 100%);
}

.feature-copy { padding: clamp(28px, 4vw, 58px); max-width: 640px; }
.feature-copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 800; margin-bottom: 12px; letter-spacing: -0.025em; }
.feature-copy p { color: var(--text-dim); margin-bottom: 24px; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   Top 10 — oversized numerals behind each poster
   ============================================================ */
.top-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 48px); }

@media (min-width: 1180px) {
  .top-layout { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
}

.top-list { display: flex; flex-direction: column; gap: 4px; }

.top-row {
  display: grid;
  grid-template-columns: 54px 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.top-row:hover { background: var(--surface); transform: translateX(-5px); }

.top-row > strong {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--surface-3);
  transition: -webkit-text-stroke-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.top-row:hover > strong { -webkit-text-stroke-color: var(--brand); color: rgba(216, 28, 63, 0.16); }

.top-row img { width: 50px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.top-row h3 { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-row span { font-size: 11.5px; color: var(--text-faint); }
.top-row > b { font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; }

/* ============================================================
   Catalog
   ============================================================ */
.catalog-view { padding-top: calc(var(--header-h) + 42px); padding-bottom: 90px; }

.catalog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.catalog-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.catalog-head p { color: var(--text-faint); font-size: 13.5px; margin-top: 6px; }

.select-control {
  height: 44px; padding-inline: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--raise);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.select-control:hover { border-color: var(--brand); }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(136px, 15vw, 190px), 1fr));
  gap: clamp(16px, 1.8vw, 28px);
}

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }

.pagination button {
  min-width: 44px; height: 44px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--raise);
  font-size: 14px; font-weight: 600;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.pagination button:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.pagination button.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }

/* ============================================================
   Dialogs
   ============================================================ */
dialog { border: 0; padding: 0; color: var(--text); background: transparent; max-width: 100vw; max-height: 100vh; }
dialog::backdrop { background: rgba(3, 3, 6, 0.84); backdrop-filter: blur(14px); animation: fadeIn var(--mid) var(--ease) both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.search-dialog, .detail-dialog {
  width: min(980px, 100vw);
  margin: auto;
  background: var(--raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popIn var(--mid) var(--ease-out) both;
}

.search-dialog { padding: clamp(22px, 3vw, 34px); max-height: min(88vh, 840px); display: flex; flex-direction: column; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dialog-head h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }

.close-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 22px;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.close-btn:hover { background: var(--brand); color: #fff; transform: rotate(90deg); }

.search-box {
  display: flex; align-items: center; gap: 13px;
  height: 60px; padding-inline: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search-box > span { font-size: 20px; color: var(--text-faint); }
.search-box input { flex: 1; background: none; border: 0; outline: none; font-size: 16px; }
.search-box input::placeholder { color: var(--text-faint); }
.search-box kbd {
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  font-size: 10.5px; font-weight: 600; color: var(--text-faint); font-family: inherit;
}

.quick-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 18px; }
.quick-tags > span { font-size: 12.5px; color: var(--text-faint); }
.quick-tags button {
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px; font-weight: 500;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.quick-tags button:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--text); }

.search-results { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.search-hit {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center; gap: 15px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.search-hit:hover { background: var(--surface); transform: translateX(-5px); }
.search-hit img { width: 48px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.search-hit h3 { font-size: 14.5px; font-weight: 600; }
.search-hit p { font-size: 12px; color: var(--text-faint); }
.search-hit b { font-size: 12.5px; color: var(--gold); white-space: nowrap; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 58px 20px; text-align: center; }
.empty-state b { font-size: 36px; color: var(--surface-3); font-weight: 400; }
.empty-state p { color: var(--text-faint); font-size: 14px; }

/* ============================================================
   Detail view
   ============================================================ */
.detail-dialog { width: min(1180px, 100vw); max-height: min(93vh, 1020px); overflow-y: auto; }

.detail-hero {
  position: relative;
  min-height: clamp(300px, 46vh, 480px);
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center 22%;
  isolation: isolate;
}
.detail-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--raise) 0%, rgba(16, 16, 23, 0.94) 32%, rgba(16, 16, 23, 0.5) 74%, rgba(16, 16, 23, 0.66) 100%);
}

.detail-close { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; z-index: 3; background: rgba(6, 6, 10, 0.74); backdrop-filter: blur(10px); }
.detail-copy { padding: clamp(24px, 3.4vw, 46px); width: 100%; }

.detail-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); }

@media (min-width: 760px) {
  .detail-lead { grid-template-columns: clamp(150px, 15vw, 208px) minmax(0, 1fr); align-items: end; }
}

.detail-poster {
  width: 100%; max-width: 208px;
  aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.detail-headline { min-width: 0; }
.detail-headline h2 { font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 800; margin-bottom: 12px; letter-spacing: -0.03em; }
.detail-tagline { color: var(--gold); font-size: 14.5px; font-style: italic; margin-bottom: 15px; }
.detail-credit { font-size: 13.5px; color: var(--text-faint); margin-bottom: 13px; }
.detail-credit b { color: var(--text-dim); font-weight: 600; }

.detail-synopsis {
  color: var(--text-dim); font-size: 14.5px; max-width: 74ch; margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

.fact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 15px; }

.fact {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12.5px; font-weight: 600;
}
.fact small { color: var(--text-faint); font-weight: 500; font-size: 11px; }
.fact-rating { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.fact-rating b { font-size: 13.5px; }
.fact-rating small { color: rgba(26, 18, 5, 0.66); }
.fact-cert { letter-spacing: 0.05em; }
.fact-cc { background: var(--brand-soft); border-color: rgba(216, 28, 63, 0.45); color: #ff8da0; }

.genre-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.genre-tags span {
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px; font-weight: 500;
  color: var(--text-dim);
}

.ext-links { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }

.ext-link {
  display: inline-flex; align-items: center;
  height: 34px; padding-inline: 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.ext-link:hover { background: var(--surface-3); color: var(--text); transform: translateY(-2px); }
.ext-imdb { background: rgba(245, 183, 60, 0.16); border-color: rgba(245, 183, 60, 0.45); color: var(--gold); }
.ext-imdb:hover { background: rgba(245, 183, 60, 0.26); color: var(--gold); }

/* "Watch this together in a room?" prompt on the detail view. */
.room-invite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 18px; padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(245, 183, 60, 0.3);
  background: rgba(245, 183, 60, 0.08);
}
.room-invite > span { font-size: 13.5px; font-weight: 600; color: var(--gold); flex: 1; min-width: 200px; }

.room-invite-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding-inline: 20px;
  border-radius: var(--radius-pill);
  background: var(--gold); color: #1a1205;
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-gold);
  transition: transform var(--fast) var(--spring), background var(--fast) var(--ease);
}
.room-invite-btn:hover { background: #ffc95e; transform: translateY(-2px); }
.room-invite-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

.detail-body { padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 38px; }
.detail-section { display: flex; flex-direction: column; gap: 15px; }
.detail-section .section-heading { margin-bottom: 0; }
.season-note { font-size: 13.5px; color: var(--text-faint); max-width: 80ch; }

.season-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.season-tabs button {
  padding: 9px 19px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-dim);
  transition: all var(--fast) var(--ease);
}
.season-tabs button:hover { color: var(--text); background: var(--surface-2); }
.season-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* cast */
.cast-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 116px; gap: 13px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.cast-rail > * { scroll-snap-align: start; }
.cast-chip { display: flex; flex-direction: column; gap: 7px; text-align: center; }
.cast-chip img, .cast-blank {
  width: 116px; height: 116px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 2px solid var(--line);
  transition: transform var(--mid) var(--spring), border-color var(--fast) var(--ease);
}
.cast-chip:hover img { transform: scale(1.07); border-color: var(--gold); }
.cast-blank { display: grid; place-items: center; font-size: 32px; font-weight: 700; color: var(--text-faint); }
.cast-chip strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.cast-chip small { font-size: 11px; color: var(--text-faint); line-height: 1.3; }

/* trailer */
.trailer-box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; border: 1px solid var(--line); }
.trailer-thumb { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background-size: cover; background-position: center; }
.trailer-thumb::before { content: ''; position: absolute; inset: 0; background: rgba(6, 6, 10, 0.44); transition: background var(--mid) var(--ease); }
.trailer-thumb:hover::before { background: rgba(6, 6, 10, 0.22); }

.trailer-play {
  position: relative;
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff; font-size: 24px;
  padding-inline-start: 4px;
  box-shadow: var(--shadow-brand);
  transition: transform var(--mid) var(--spring);
}
.trailer-thumb:hover .trailer-play { transform: scale(1.12); }
.trailer-label { position: absolute; inset-block-end: 16px; inset-inline-start: 18px; font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.trailer-frame { width: 100%; height: 100%; border: 0; display: block; }

.trailer-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.trailer-pick {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.trailer-pick:hover { transform: translateY(-3px); }
.trailer-pick.active { border-color: var(--gold); }
.trailer-pick small { position: absolute; inset-block-end: 5px; inset-inline-start: 7px; font-size: 10px; font-weight: 700; text-shadow: 0 1px 4px #000; }

/* recommendations */
.rec-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(124px, 14vw, 158px); gap: 13px; overflow-x: auto; padding-bottom: 8px; }
.rec-card { display: flex; flex-direction: column; gap: 8px; }
.rec-poster { aspect-ratio: 2 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.rec-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.rec-card:hover .rec-poster img { transform: scale(1.08); }
.rec-card strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-card small { font-size: 11px; color: var(--text-faint); }

/* episodes */
.episodes-list { display: flex; flex-direction: column; gap: 10px; }

.episode-row {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  gap: 16px;
  padding: 11px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: start;
  transition: all var(--fast) var(--ease);
}
.episode-row:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand); transform: translateY(-3px); }
.episode-row:disabled { opacity: 0.4; cursor: not-allowed; }

.ep-still { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); display: grid; place-items: center; }
.ep-still img { width: 100%; height: 100%; object-fit: cover; }
.ep-still b { font-size: 16px; font-weight: 800; color: var(--text-faint); }
.ep-still i {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(6, 6, 10, 0.58);
  color: #fff; font-size: 20px; font-style: normal;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.episode-row:hover:not(:disabled) .ep-still i { opacity: 1; }

.ep-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ep-body strong { font-size: 14px; font-weight: 600; }
.ep-body p { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-meta { display: flex; flex-wrap: wrap; gap: 11px; }
.ep-meta i { font-style: normal; font-size: 11px; color: var(--text-faint); }

/* ============================================================
   Player
   ============================================================ */
/* The player owns the whole viewport. 100dvh rather than 100vh: on iOS 100vh
   measures the area *behind* the browser toolbars, which pushed the player
   off-centre and let the page underneath show through. */
.player-dialog {
  position: fixed; inset: 0; margin: 0; padding: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  border-radius: 0;
  background: #000;
}
.player-shell { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: #000; }
.player-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.player-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-shell.video-failed #videoPlayer { opacity: 0.1; }

.player-state {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;
  padding: 26px; text-align: center;
  background: rgba(5, 5, 9, 0.86);
  backdrop-filter: blur(8px);
}
.player-state[hidden] { display: none; }
.player-state strong { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; }
.player-state p { color: var(--text-dim); font-size: 14px; max-width: 46ch; }
.player-state > div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.player-state button {
  height: 46px; padding-inline: 24px;
  border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700;
  transition: all var(--fast) var(--ease);
}
.player-state button:hover { background: var(--brand-hot); transform: translateY(-2px); }
.player-state button[hidden] { display: none; }
.player-state.failed .player-spinner { display: none; }

.player-spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.13);
  border-top-color: var(--gold);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Only when the browser will not start the film by itself after the intro. */
.player-tap {
  position: absolute; z-index: 9; top: 50%; left: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(216, 28, 63, 0.94); color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 10px rgba(216, 28, 63, 0.18);
  animation: popIn var(--fast) var(--ease-out) both;
  transition: transform var(--fast) var(--spring), background var(--fast) var(--ease);
}
.player-tap:hover { background: var(--brand-hot); transform: scale(1.06); }
.player-tap:active { transform: scale(0.95); }
/* Physical margin: a play triangle points right in every language, and is
   optically centred by nudging it right. */
.player-tap svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }

/* ------------------------------------------------------------
   Intro (intro.js), shared by the player and rooms. Show the
   uploaded video itself, letterboxed without cropping or tinting.
   ------------------------------------------------------------ */
.intro-layer {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: #000;
  overflow: hidden;
  transition: opacity 0.45s ease; /* FADE_MS in intro.js */
}
.intro-layer.is-leaving { opacity: 0; pointer-events: none; }
.intro-layer .intro-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: #000;
  filter: none; transform: none;
  opacity: 0; /* reveal only when the first frames are playing */
}
.intro-layer.is-playing .intro-video { opacity: 1; }
/* A quiet spinner, and only if the first frames are slow to arrive. */
.intro-layer::after {
  content: '';
  position: absolute; z-index: 2; top: 50%; left: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  animation: spin 0.85s linear infinite, introWait 0.3s ease 0.9s forwards;
  pointer-events: none;
}
.intro-layer.is-playing::after, .intro-layer.is-leaving::after { display: none; }
@keyframes introWait { to { opacity: 1; } }

.intro-skip {
  position: absolute; z-index: 3;
  inset-block-end: max(24px, calc(env(safe-area-inset-bottom) + 14px));
  inset-inline-end: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding-inline: 20px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(12, 12, 16, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 14.5px; font-weight: 700;
  animation: introSkipIn 0.45s var(--ease-out) both;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.intro-skip:hover, .intro-skip:focus-visible { background: #fff; color: #0b0b0f; border-color: #fff; }
.intro-skip svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* "Forward" is leftward in a right-to-left page. */
[dir="rtl"] .intro-skip svg { transform: scaleX(-1); }
@keyframes introSkipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .intro-skip { height: 40px; padding-inline: 16px 13px; font-size: 13.5px; inset-block-end: max(16px, calc(env(safe-area-inset-bottom) + 10px)); inset-inline-end: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-layer { transition: none; }
  .intro-skip { animation: none; }
}

/* A real bar in normal flow above the video. Symmetric safe-area padding
   means it is correct in either text direction and around a notch. */
.player-caption {
  position: relative; z-index: 11; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, #0c0c12, #060609);
  border-bottom: 1px solid var(--line);
  transition: opacity 0.32s var(--ease), transform 0.42s var(--ease-out);
}
.player-heading { min-width: 0; }
.player-heading span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); }
.player-heading strong { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.cc-wrap { position: relative; }

.player-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; min-width: 40px; padding-inline: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.player-tool:hover { background: rgba(255, 255, 255, 0.16); }
.player-tool:active { transform: scale(0.94); }
.player-tool[hidden] { display: none; }
.player-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.player-tool .fs-exit, .player-tool.active .fs-enter { display: none; }
.player-tool.active .fs-exit { display: block; }
.player-tool.active { background: var(--brand-soft); border-color: rgba(216, 28, 63, 0.5); }
.player-ai-sub { color: #fff; border-color: rgba(229, 9, 20, .65); background: linear-gradient(135deg, #9d0710, #e50914); }
.player-ai-sub:hover { background: linear-gradient(135deg, #bd0a14, #f02b34); }
.player-ai-sub:disabled { opacity: .75; cursor: progress; }
#playerAiPct:not(:empty) { font-size: 11px; font-variant-numeric: tabular-nums; }
.player-close { width: 40px; padding-inline: 0; }
.player-close:hover { background: var(--brand); border-color: var(--brand); }

/* In fullscreen the bar floats over the picture and steps aside when idle. */
.player-shell.is-fullscreen .player-caption {
  position: absolute; inset-inline: 0; top: 0;
  background: linear-gradient(to bottom, rgba(5, 5, 9, 0.88), transparent);
  border-bottom: 0;
  padding-bottom: 30px;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
}
.player-shell.is-fullscreen.show-ui .player-caption,
.player-shell.is-fullscreen .player-caption:has(:focus-visible) { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 520px) {
  .player-heading span { display: none; }
  .player-tool .tool-label { display: none; }
  .player-tool { width: 40px; padding-inline: 0; }
  .player-ai-sub { width: auto; min-width: 40px; padding-inline: 9px; }
}
@media (max-height: 500px) {
  .player-caption { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
}

/* Last-resort fullscreen for browsers with no API for it (a YouTube embed on
   iPhone): the element simply takes over the viewport. */
.pseudo-fullscreen {
  position: fixed !important; inset: 0 !important; z-index: 2147483000 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  animation: fsIn 0.32s var(--ease-out) both;
}
@keyframes fsIn { from { opacity: 0.6; transform: scale(0.98); } to { opacity: 1; transform: none; } }
html.has-pseudo-fullscreen, html.has-pseudo-fullscreen body { overflow: hidden !important; }
.is-fullscreen { border-radius: 0 !important; background: #000; }
:fullscreen { background: #000; }
.player-tool b {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 5px; border-radius: 4px;
  background: var(--gold); color: #1a1205;
}

.cc-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 14;
  min-width: 190px;
  padding: 7px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(18, 18, 26, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  animation: popIn var(--fast) var(--ease-out) both;
}
.cc-menu[hidden] { display: none; }

.cc-option {
  height: auto !important;
  padding: 10px 14px !important;
  border: 0 !important;
  background: none !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: none !important;
  text-align: start;
  justify-content: flex-start;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-dim);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.cc-option:hover { background: var(--surface-2) !important; color: var(--text); transform: none !important; }
.cc-option.active { background: var(--brand) !important; color: #fff; font-weight: 600; }

.player-shell video::cue { background: rgba(0, 0, 0, 0.74); color: #fff; font-family: var(--font); font-size: 1.05em; line-height: 1.45; }

/* ============================================================
   Subtitles drawn by the page (captions.js), in the viewer's
   own style. The layer is sized to the picture itself, so text
   scales with the film, not with the black bars around it.
   ============================================================ */
.kf-captions {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 4% var(--kf-cap-bottom, 16px);
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  /* Steps above the browser's own control bar while it is on screen. */
  transform: translateY(calc(var(--kf-cap-lift, 0px) * -1));
  transition: transform 0.28s var(--ease-out);
}
.kf-cue {
  max-width: 90%;
  text-align: center;
  font-family: var(--kf-cap-font, var(--font));
  font-size: calc(var(--kf-cap-base, 22px) * var(--kf-cap-scale, 1));
  font-weight: 500;
  /* Tall enough that the box behind one line never overlaps the next:
     Kurdish letters reach well above and below the Latin line. */
  line-height: 1.6;
  color: var(--kf-cap-color, #fff);
  overflow-wrap: anywhere;
}
.kf-cue + .kf-cue { margin-top: 0.06em; }
/* Each line gets its own box, the way TV subtitles look. */
.kf-cue > span {
  padding: 0.02em 0.36em 0.06em;
  border-radius: 0.18em;
  background: var(--kf-cap-bg, rgba(0, 0, 0, 0.74));
  text-shadow: var(--kf-cap-edge, none);
  white-space: pre-line;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Our CC button already does this job; two would only confuse. */
video.kf-own-captions::-webkit-media-controls-toggle-closed-captions-button { display: none; }
/* Switched off by keepFullscreenOnContainer (fullscreen.js): our fullscreen
   keeps the viewer's subtitle style, the video's own would not. Hidden rather
   than left greyed out. */
video.kf-no-native-fullscreen::-webkit-media-controls-fullscreen-button { display: none; }

/* The entry at the bottom of every CC menu that opens the style panel. */
.cc-sep { height: 1px; margin: 5px 6px; background: var(--line-strong); }
.cc-menu .cc-style-btn, .stage-cc-menu .cc-style-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(229, 9, 20, 0.3);
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.18), rgba(229, 9, 20, 0.05));
  color: var(--text);
  text-align: start;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.cc-menu .cc-style-btn:hover, .stage-cc-menu .cc-style-btn:hover { background: linear-gradient(135deg, rgba(229, 9, 20, 0.3), rgba(229, 9, 20, 0.1)); border-color: rgba(229, 9, 20, 0.55); color: var(--text); }
.cc-menu .cc-style-btn:active, .stage-cc-menu .cc-style-btn:active { transform: scale(0.98); }
.cc-style-icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 14px rgba(229, 9, 20, 0.36);
}
.cc-style-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cc-style-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cc-style-text b { font-size: 13px; font-weight: 700; }
.cc-style-text small { font-size: 10.5px; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
/* "Aa" in the viewer's current subtitle style, on a scene-like tile. */
.cc-style-chip {
  width: 42px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #5a6780, #1b2130);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.cc-style-chip span {
  padding: 1px 5px 2px;
  border-radius: 3px;
  font-family: var(--kf-cap-font, var(--font));
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--kf-cap-color, #fff);
  background: var(--kf-cap-bg, rgba(0, 0, 0, 0.74));
  text-shadow: var(--kf-cap-edge, none);
}

/* ---------- the subtitle style panel (caption-settings.js) ---------- */
.cap-dialog {
  position: fixed; inset: auto; margin: 0; padding: 0; border: 0;
  width: min(392px, calc(100vw - 24px));
  max-width: none; max-height: none;
  overflow: visible;
  background: transparent; color: var(--text);
  font-family: var(--font);
}
/* Light and unblurred, so the real subtitles stay readable behind the panel
   and every change can be watched on them as it happens. */
.cap-dialog::backdrop { background: rgba(3, 5, 9, 0.3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cap-dialog.is-center { inset: 0; margin: auto; height: fit-content; }
.cap-dialog.is-sheet { inset: auto 0 0 0; width: 100%; }

.cap-card {
  display: flex; flex-direction: column;
  max-height: var(--cap-max-h, min(720px, calc(100dvh - 24px)));
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(24, 29, 40, 0.98), rgba(13, 16, 23, 0.98));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: capIn 0.26s var(--ease-out) both;
}
.cap-dialog.is-sheet .cap-card {
  max-height: min(86dvh, 720px);
  border-radius: 24px 24px 0 0;
  border-bottom: 0;
  animation: capSheetIn 0.34s var(--ease-out) both;
}
.cap-dialog.is-sheet .cap-card::before {
  content: ''; flex: none; align-self: center;
  width: 42px; height: 4px; margin-top: 9px;
  border-radius: 4px; background: rgba(255, 255, 255, 0.22);
}
@keyframes capIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes capSheetIn { from { transform: translateY(100%); } to { transform: none; } }

.cap-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.cap-head-icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-hot), var(--brand-deep));
  color: #fff;
  box-shadow: 0 8px 20px rgba(229, 9, 20, 0.32);
}
.cap-head-icon svg, .cap-close svg, .cap-reset svg, .cap-zero svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cap-head-text { min-width: 0; }
.cap-head-text h2 { font-size: 16px; font-weight: 800; letter-spacing: 0; }
.cap-head-text small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-faint); }
.cap-close {
  width: 36px; height: 36px; flex: none; margin-inline-start: auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.cap-close:hover { background: rgba(255, 255, 255, 0.13); color: var(--text); }

.cap-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.cap-scroll::-webkit-scrollbar { width: 6px; }
.cap-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 6px; }

.cap-preview {
  position: relative;
  height: 158px; margin: 0 16px 4px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: radial-gradient(120% 95% at 72% 18%, #46557a 0%, #1c2433 55%, #0a0d14 100%);
}
.cap-preview-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(1.05); }
.cap-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 58%); pointer-events: none; }
.cap-preview .kf-captions { z-index: 1; transform: none; transition: padding-bottom 0.25s var(--ease-out); }
.cap-preview .kf-cue { transition: font-size 0.2s var(--ease-out), color 0.2s var(--ease); }

.cap-body { padding: 2px 16px 6px; }
.cap-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.cap-row:last-child { border-bottom: 0; }
.cap-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 26px; }
.cap-row-head b { font-size: 13px; font-weight: 700; }
.cap-row-value { margin-inline-start: auto; font-size: 11.5px; font-weight: 600; color: var(--text-faint); }

.cap-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 4px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.cap-seg [role="radio"] {
  height: 38px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 9px;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 700;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.cap-seg [role="radio"]:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.cap-seg [role="radio"][aria-checked="true"] { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(229, 9, 20, 0.34); }
.cap-sizes [role="radio"] { height: 44px; }
.cap-sizes [role="radio"] span { font-family: var(--font); font-weight: 800; line-height: 1; }
.cap-positions svg { width: 22px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cap-positions svg path { stroke-width: 2.6; stroke-linecap: round; }

.cap-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cap-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap-tile {
  min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 6px 6px 7px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 11px; font-weight: 700;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.cap-tile:hover { border-color: var(--line-strong); color: var(--text); }
.cap-tile:active { transform: scale(0.97); }
.cap-tile[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--brand); }
.cap-tile small { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-sample {
  height: 40px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-style: normal;
  background: linear-gradient(135deg, #4b5a76, #1a202d);
  overflow: hidden;
}
/* Edges are judged against a bright scene, where they matter. */
.cap-sample-light { background: linear-gradient(135deg, #eef2f7, #9aa6b8); }
.cap-sample span {
  padding: 1px 6px 2px;
  border-radius: 4px;
  font-family: var(--kf-cap-font, var(--font));
  font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--kf-cap-color, #fff);
  background: var(--kf-cap-bg, transparent);
  text-shadow: var(--kf-cap-edge, none);
}

.cap-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.cap-swatch {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--line-strong);
  transition: transform var(--fast) var(--spring), box-shadow var(--fast) var(--ease);
}
.cap-swatch:hover { transform: scale(1.08); }
.cap-swatch svg { width: 18px; height: 18px; fill: none; stroke: #121212; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--spring); }
.cap-swatch[aria-checked="true"] { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2), 0 0 0 3px #11141c, 0 0 0 5px var(--brand); }
.cap-swatch[aria-checked="true"] svg { opacity: 1; transform: none; }

.cap-timing { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cap-step {
  height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.cap-step bdi { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cap-step span { font-size: 10.5px; font-weight: 600; color: var(--text-faint); }
.cap-step:hover { background: rgba(255, 255, 255, 0.1); }
.cap-step:active { transform: scale(0.96); border-color: rgba(229, 9, 20, 0.55); background: var(--brand-soft); }
.cap-step:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
.cap-offset { min-width: 86px; display: flex; flex-direction: column; align-items: center; }
.cap-offset bdi { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cap-offset small { font-size: 10.5px; color: var(--text-faint); }
.cap-timing-row.is-off .cap-offset { opacity: 0.4; }
.cap-hint { margin-top: 9px; font-size: 11.5px; line-height: 1.7; color: var(--text-faint); }
.cap-zero {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding-inline: 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
  font-size: 11px; font-weight: 700;
}
.cap-zero svg { width: 14px; height: 14px; }
.cap-zero:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }

.cap-foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 15, 0.55);
}
.cap-dialog.is-sheet .cap-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.cap-reset {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding-inline: 14px;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 700;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.cap-reset svg { width: 17px; height: 17px; }
.cap-reset:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.cap-done {
  height: 42px; padding-inline: 32px;
  border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 800;
  box-shadow: var(--shadow-brand);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--spring);
}
.cap-done:hover { background: var(--brand-hot); transform: translateY(-1px); }

@media (max-width: 640px) {
  .cap-preview { height: 132px; }
  .cap-swatches { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-captions, .cap-preview .kf-captions, .cap-preview .kf-cue { transition: none; }
  .cap-card, .cap-dialog.is-sheet .cap-card { animation: none; }
}

/* ============================================================
   Footer + mobile dock
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-deep); padding-block: clamp(40px, 5vw, 66px); margin-bottom: env(safe-area-inset-bottom); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(26px, 3vw, 48px); }
.footer-brand p { color: var(--text-faint); font-size: 13.5px; margin-top: 13px; max-width: 32ch; }
.site-footer h3 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 15px; }
.site-footer a:not(.brand) { display: block; font-size: 13.5px; color: var(--text-dim); padding-block: 5px; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.site-footer a:not(.brand):hover { color: var(--gold); transform: translateX(-4px); }
.site-footer span { display: block; font-size: 12.5px; color: var(--text-faint); padding-block: 5px; }
.footer-note strong { display: block; font-size: 13.5px; margin-block: 5px; }
.footer-note small { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 14px; }
.footer-note .attribution { font-size: 10.5px; line-height: 1.5; margin-top: 8px; opacity: 0.72; max-width: 34ch; }

.mobile-dock { display: none; }

@keyframes dockPop {
  0% { transform: scale(1); }
  35% { transform: scale(0.8); }
  70% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@media (max-width: 980px) {
  .desktop-nav, .pill-btn { display: none; }
  .site-header { padding-top: 10px; }

  /* Floating glass bar, lifted clear of the iPhone home indicator rather than
     padded by it — padding made the bar tall with dead space at the bottom. */
  .mobile-dock {
    position: fixed; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 95;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(26, 26, 35, 0.9), rgba(11, 11, 17, 0.94));
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.42s var(--ease-out), opacity 0.26s var(--ease);
    will-change: transform;
  }
  .mobile-dock.hidden {
    transform: translateY(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
  }

  /* One pill slides between tabs — the same brand red as the desktop nav's
     active state, so both navigations speak the same language. */
  .dock-indicator {
    position: absolute; top: 0; left: 0; z-index: 0;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--brand-hot) 0%, var(--brand) 55%, var(--brand-deep) 100%);
    box-shadow: 0 8px 22px rgba(216, 28, 63, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
      width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
      opacity 0.2s var(--ease);
  }
  .dock-indicator.no-anim { transition: none; }

  .mobile-dock a, .mobile-dock button {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 54px;
    border-radius: 16px;
    color: var(--text-faint);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .mobile-dock svg {
    width: 23px; height: 23px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.42s var(--spring), stroke-width 0.3s var(--ease);
  }
  .mobile-dock small { font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; }
  .mobile-dock a:not(.active):hover, .mobile-dock button:hover { color: var(--text-dim); }
  .mobile-dock .active { color: #fff; }
  .mobile-dock .active svg { transform: translateY(-1px); stroke-width: 2.1; }
  .mobile-dock .active small { font-weight: 700; }
  .mobile-dock .pop svg { animation: dockPop 0.44s var(--spring); }
  .mobile-dock.navigating [data-dock]:not(.active) { opacity: 0.5; }

  body { padding-bottom: calc(82px + max(12px, env(safe-area-inset-bottom))); }
  .search-dialog, .detail-dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-block: auto 0; max-height: 93vh; }
}

@media (max-width: 560px) {
  .episode-row { grid-template-columns: 112px minmax(0, 1fr); }
  .cast-rail { grid-auto-columns: 94px; }
  .cast-chip img, .cast-blank { width: 94px; height: 94px; }
  .top-row { grid-template-columns: 42px 44px minmax(0, 1fr) auto; }
  .top-row > strong { font-size: 2rem; }
}

/* ============================================================
   Skeletons + toast
   ============================================================ */
.skeleton-block { position: relative; overflow: hidden; background: var(--surface); }
.skeleton-block::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  animation: shimmer 1.6s var(--ease) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-rail .card-rail::before { content: ''; display: block; height: 310px; border-radius: var(--radius); background: var(--surface); }

.toast {
  position: fixed;
  inset-inline: auto var(--gutter);
  bottom: 30px;
  z-index: 200;
  max-width: min(92vw, 390px);
  padding: 15px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(24, 24, 33, 0.97);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 500;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}
.toast.show { opacity: 1; transform: none; }

@media (max-width: 980px) { .toast { bottom: calc(92px + max(12px, env(safe-area-inset-bottom))); } }

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .hero-backdrop { animation: none; }
}

@media (prefers-contrast: more) {
  :root { --text-dim: #d6d6de; --text-faint: #b4b4c0; --line: rgba(255, 255, 255, 0.2); --line-strong: rgba(255, 255, 255, 0.36); }
  .hero-backdrop { opacity: 0.18; }
}

/* ============================================================
   iCinema Home — dense Kurdish streaming layout
   ============================================================ */
:root {
  --bg: #07090d; --bg-deep: #030406; --raise: #0d1118;
  --surface: #121722; --surface-2: #181e2a; --surface-3: #252c39;
  --brand: #e50914; --brand-hot: #ff2b36; --brand-deep: #85070d;
  --brand-soft: rgba(229, 9, 20, 0.14);
  --accent-grad: linear-gradient(135deg, #ff3d4b 0%, #e50914 52%, #8f070e 100%);
  --maxw: 1600px; --header-h: 72px;
}

.top-notice {
  min-height: 34px; display: flex; align-items: center;
  color: #d5d9e1; background: #030406;
  border-bottom: 1px solid rgba(229, 9, 20, 0.24);
  font-size: 11.5px; font-weight: 600;
}
.top-notice .container { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.top-notice span { display: inline-flex; align-items: center; gap: 8px; }
.top-notice span b { color: var(--brand-hot); font-size: 9px; text-shadow: 0 0 12px var(--brand); }
.top-notice strong { color: var(--text-faint); font-weight: 500; }
.top-notice a { color: #fff; padding: 3px 12px; border: 1px solid rgba(229, 9, 20, 0.36); border-radius: var(--radius-pill); background: var(--brand-soft); }

/* Sponsored slot sits below the sticky navigation and takes no space when off. */
.site-ad { margin-block: clamp(12px, 2vw, 24px) 12px; }
.rooms-page.in-room .site-ad { display: none !important; }
/* The frame takes the creative's own shape (--ad-ratio, set once it loads),
   so a banner of any size shows whole, never cropped or letterboxed. */
.site-ad-wrap { position: relative; }
.site-ad-frame {
  position: relative; aspect-ratio: var(--ad-ratio, 1600 / 240);
  max-height: min(240px, 38vh); overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); border-radius: clamp(12px, 1.6vw, 20px);
  background: #0c1018; box-shadow: 0 16px 45px rgba(0,0,0,.24);
}
.site-ad-link, .site-ad-link picture { display: block; width: 100%; height: 100%; }
.site-ad-link img { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.site-ad-frame.is-swapping img { opacity: 0; }
.site-ad-link:focus-visible { outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .site-ad-link img { transition: none; } }
/* Pages whose content still reserves room for the old fixed header would
   leave a hole under the banner; with the banner there, it is the spacer. */
.site-ad:not([hidden]) ~ main .catalog-view { padding-top: 18px; }
.site-ad:not([hidden]) + .social-main { padding-top: 14px; }
/* Touch screens swipe between banners, so the arrows only crowd them. */
@media (hover: none) { .site-ad-arrow { display: none !important; } }
.site-ad-badge {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  padding: 3px 9px; border-radius: 99px; background: rgba(2,5,10,.82);
  border: 1px solid rgba(255,255,255,.18); color: #f4f5f7; font-size: 10px;
  font-weight: 700; pointer-events: none;
}
.site-ad-frame.is-slim .site-ad-badge { inset-block-start: 4px; inset-inline-start: 4px; padding: 1px 6px; font-size: 8px; }
.site-ad-controls {
  position: absolute; inset-block-end: 9px; inset-inline-end: 10px;
  display: flex; align-items: center; gap: 5px; padding: 4px;
  border: 1px solid rgba(255,255,255,.17); border-radius: 99px;
  background: rgba(3,6,12,.88); backdrop-filter: blur(12px);
}
.site-ad-controls > button { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 700 22px/1 system-ui; }
.site-ad-controls > button:hover, .site-ad-controls > button:focus-visible { background: var(--brand); }
#siteAdDots { display: flex; align-items: center; gap: 5px; }
#siteAdDots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); }
#siteAdDots button.active { width: 17px; border-radius: 99px; background: var(--brand-hot); }
@media (max-width: 640px) {
  .site-ad { margin-block: 10px 8px; }
  .site-ad-frame { max-height: min(260px, 42vh); border-radius: 12px; }
  .site-ad-badge { inset-block-start: 6px; inset-inline-start: 6px; padding: 2px 7px; font-size: 9px; }
  /* Swiping replaces the arrows on a phone, and the dots move under the
     banner so they never cover the advertiser's picture. */
  .site-ad-controls:not([hidden]) {
    position: static; justify-content: center; margin-top: 7px;
    padding: 0; gap: 0; border: 0; background: none; backdrop-filter: none;
  }
  .site-ad-arrow { display: none !important; }
  #siteAdDots { gap: 5px; }
  #siteAdDots button { width: 6px; height: 6px; background: rgba(255,255,255,.28); }
  #siteAdDots button.active { width: 16px; }
}

.site-header {
  position: sticky; top: 0; height: var(--header-h); padding: 7px var(--gutter);
  background: rgba(5, 8, 13, 0.9); border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 14px 38px rgba(0,0,0,0.28); backdrop-filter: blur(24px) saturate(150%);
}
.site-header .brand { min-width: 190px; }
.site-header .brand .brand-logo { width: 156px; height: 50px; }
.desktop-nav, .header-actions { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.desktop-nav { padding: 5px; gap: 1px; }
.desktop-nav a { padding-inline: 17px; }
.desktop-nav a.active { background: rgba(229,9,20,0.14); color: #fff; box-shadow: inset 0 -2px 0 var(--brand); }
.header-actions { min-width: 250px; justify-content: flex-end; }
#searchOpen {
  width: 168px; height: 42px; display: flex; justify-content: flex-start; gap: 10px;
  padding-inline: 13px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
}
#searchOpen svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#searchOpen::after { content: 'گەڕان لە iCinema'; color: var(--text-faint); font-size: 11px; white-space: nowrap; }
#searchOpen:hover { border-color: rgba(229,9,20,0.55); background: var(--brand-soft); }
.avatar { background: var(--accent-grad); }

.home-prelude { padding-top: 20px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.shortcut-grid > a {
  min-width: 0; display: flex; align-items: center; gap: 13px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.075); border-radius: 17px;
  background: linear-gradient(145deg, rgba(22,28,40,0.92), rgba(11,15,22,0.94));
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 12px 30px rgba(0,0,0,0.18);
  transition: transform var(--fast) var(--spring), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.shortcut-grid > a:hover { transform: translateY(-4px); border-color: rgba(229,9,20,0.46); background: linear-gradient(145deg, rgba(229,9,20,0.12), rgba(11,15,22,0.98)); }
.shortcut-icon {
  width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center;
  border: 1px solid rgba(229,9,20,0.36); border-radius: 13px; color: #ff5560;
  background: rgba(229,9,20,0.1); box-shadow: 0 0 22px rgba(229,9,20,0.09);
  font: 800 22px/1 system-ui;
}
.shortcut-grid > a:nth-child(3n+2) .shortcut-icon { color: var(--gold); border-color: rgba(245,183,60,.34); background: rgba(245,183,60,.08); }
.shortcut-grid > a:nth-child(3n) .shortcut-icon { color: #b870ff; border-color: rgba(168,85,247,.34); background: rgba(168,85,247,.09); }
.shortcut-grid strong, .shortcut-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-grid strong { font-size: 13.5px; }
.shortcut-grid small { margin-top: 2px; color: var(--text-faint); font-size: 10.5px; }

.catalog-ribbon {
  min-height: 48px; margin-top: 14px; padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid rgba(229,9,20,0.6); border-radius: 15px;
  background: linear-gradient(90deg, rgba(229,9,20,.09), rgba(12,15,22,.92) 34%, rgba(12,15,22,.92));
  box-shadow: inset 0 0 25px rgba(229,9,20,.04); font-size: 12px; font-weight: 600;
}
.catalog-ribbon > span { display: inline-flex; align-items: center; gap: 9px; }
.catalog-ribbon i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-hot); box-shadow: 0 0 0 5px rgba(229,9,20,.1), 0 0 16px var(--brand); }
.catalog-ribbon > div { display: flex; align-items: center; gap: 8px; }
.catalog-ribbon b, .catalog-ribbon a { padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.05); color: var(--text-dim); font-size: 10.5px; }
.catalog-ribbon a { background: var(--brand); color: #fff; }

.hero {
  width: calc(100% - (var(--gutter) * 2)); max-width: var(--maxw); min-height: 520px;
  margin: 16px auto 0; padding-block: 0; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 25px; box-shadow: 0 26px 70px rgba(0,0,0,0.38);
}
.hero-backdrop { inset: 0; opacity: .56; filter: saturate(108%) brightness(.86); transform: scale(1.015); animation: heroCinemaDrift 22s var(--ease) infinite alternate; }
@keyframes heroCinemaDrift { from { transform: scale(1.015); } to { transform: scale(1.065); } }
.hero::before {
  background: linear-gradient(to left, rgba(5,7,11,.97) 0%, rgba(5,7,11,.82) 35%, rgba(5,7,11,.3) 68%, rgba(5,7,11,.54) 100%), linear-gradient(to top, rgba(5,7,11,.96), transparent 48%);
}
.hero::after { background: radial-gradient(55% 80% at 82% 42%, rgba(229,9,20,.16), transparent 68%); }
.hero-content { min-height: 520px; grid-template-columns: minmax(0,1fr) !important; padding-block: 54px; }
.hero-copy { max-width: 660px; margin-inline-end: auto; }
.hero-copy h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); }
.hero-poster-wrap { display: none !important; }
.hero-dots { inset-inline-start: 24px; bottom: 22px; }
.eyebrow { border-color: rgba(229,9,20,.38); background: rgba(229,9,20,.1); color: #ff737b; }

.signal-strip { margin-block: 18px; padding: 17px 22px; border: 1px solid rgba(255,255,255,.07); border-radius: 17px; background: rgba(13,17,24,.72); }
.signal-strip strong { font-size: clamp(1.15rem,2vw,1.7rem); }
.genre-cloud { justify-content: center; margin-bottom: 38px; }
.genre-cloud button { background: #0d1118; padding-block: 8px; }
.genre-cloud button:hover { border-color: var(--brand); }

.content-shell { gap: clamp(40px,4vw,58px); }
.section-kicker { color: #ff4b56; }
.section-heading { margin-bottom: 16px; }
.section-heading h2 { font-weight: 800; }
.section-heading h2::after { content: ''; display: inline-block; width: 22px; height: 3px; margin-inline-start: 10px; border-radius: 4px; vertical-align: middle; background: var(--brand); }
.section-link:hover { color: #fff; border-color: var(--brand); background: var(--brand); }

.card-rail { grid-auto-columns: clamp(150px,15.3vw,210px); }
.poster { border-radius: 14px; }
.poster::after { content: ''; position: absolute; inset: 30% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(3,4,7,.97), rgba(3,4,7,.56) 50%, transparent); }
.card-copy { position: absolute; z-index: 2; inset-inline: 12px; bottom: 11px; }
.media-card h3 { margin: 0; color: #fff; font-size: 13px; font-weight: 750; text-shadow: 0 2px 8px #000; }
.media-card:hover h3 { color: #fff; }
.card-info { margin-top: 3px; color: #aab1bd; font-size: 10.5px; }
.card-badges { z-index: 4; }
.card-overlay { z-index: 3; }
.rating-badge { background: rgba(5,7,11,.78); color: #ffd44d; border: 1px solid rgba(255,212,77,.35); }
.type-badge { background: rgba(229,9,20,.94); }
.play-orb { width: 48px; height: 48px; }

.rank-rail {
  direction: rtl; display: grid; grid-auto-flow: column; grid-auto-columns: 242px; gap: 15px;
  overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--gutter) 14px;
  margin-inline: calc(var(--gutter) * -1);
}
.rank-card {
  direction: ltr; display: grid; grid-template-columns: 78px 150px; grid-template-rows: 220px auto;
  align-items: end; scroll-snap-align: start; cursor: pointer; transition: transform var(--mid) var(--ease-out);
}
.rank-card:hover { transform: translateY(-7px); }
.rank-card > strong {
  align-self: end; margin-right: -10px; color: #080a0f; -webkit-text-stroke: 3px #eef0f5;
  font: 900 clamp(5.7rem,8vw,8.4rem)/.78 Impact, Haettenschweiler, sans-serif;
  letter-spacing: -.08em; filter: drop-shadow(0 12px 22px rgba(0,0,0,.8));
}
.rank-card:nth-child(-n+3) > strong { color: #a10810; -webkit-text-stroke-color: #ff4a55; }
.rank-poster { position: relative; height: 220px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.rank-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out), filter var(--mid) var(--ease); }
.rank-poster::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.86)); }
.rank-poster span { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.72); color: #ffd44d; font-size: 9px; }
.rank-poster i { position: absolute; z-index: 3; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; opacity: 0; transform: scale(.7); transition: .22s var(--spring); }
.rank-card:hover .rank-poster img { transform: scale(1.07); filter: brightness(.65); }
.rank-card:hover .rank-poster i { opacity: 1; transform: scale(1); }
.rank-copy { direction: rtl; grid-column: 1/-1; padding: 10px 6px 0; text-align: right; }
.rank-copy b, .rank-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-copy b { color: #f6f7fa; font-size: 12.5px; }
.rank-copy small { margin-top: 2px; color: var(--text-faint); font-size: 10px; }

.landscape-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px,27vw,390px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--gutter) 15px;
  margin-inline: calc(var(--gutter) * -1);
}
.landscape-card { position: relative; min-height: 220px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: var(--surface); scroll-snap-align: start; cursor: pointer; box-shadow: 0 16px 36px rgba(0,0,0,.25); }
.landscape-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out), filter var(--mid) var(--ease); }
.landscape-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,5,8,.98), rgba(3,5,8,.18) 68%), linear-gradient(to left, rgba(3,5,8,.35),transparent); }
.landscape-badges { position: absolute; inset: 11px 11px auto; display: flex; align-items: center; justify-content: space-between; }
.landscape-badges span, .landscape-badges b { padding: 4px 8px; border-radius: 7px; background: rgba(5,7,11,.78); font-size: 9.5px; }
.landscape-badges span { background: var(--brand); }
.landscape-badges b { color: #ffd44d; }
.landscape-copy { position: absolute; inset-inline: 15px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; }
.landscape-copy small { color: #ff626b; font-size: 9.5px; font-weight: 700; }
.landscape-copy strong { max-width: 90%; margin-top: 2px; color: #fff; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landscape-copy span { color: #a7afbc; font-size: 10.5px; }
.landscape-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); box-shadow: var(--shadow-brand); opacity: 0; transform: scale(.7); transition: .22s var(--spring); font-style: normal; }
.landscape-card:hover .landscape-art { transform: scale(1.06); filter: brightness(.62); }
.landscape-card:hover .landscape-play { opacity: 1; transform: scale(1); }

.feature-band { min-height: 410px; border-color: rgba(229,9,20,.2); }
.feature-visual { opacity: .5; filter: saturate(110%) brightness(.85); }
.feature-band::before { background: linear-gradient(to left, rgba(5,7,11,.96),rgba(5,7,11,.75) 48%,rgba(5,7,11,.18)); }

.card-rail, .rank-rail, .landscape-rail, .genre-cloud, .shortcut-grid { scrollbar-width: none; }
.card-rail::-webkit-scrollbar, .rank-rail::-webkit-scrollbar, .landscape-rail::-webkit-scrollbar, .genre-cloud::-webkit-scrollbar, .shortcut-grid::-webkit-scrollbar { display: none; }

@media (max-width: 1180px) {
  .shortcut-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .site-header .brand, .header-actions { min-width: auto; }
  #searchOpen { width: 42px; justify-content: center; padding: 0; }
  #searchOpen::after { display: none; }
}

@media (max-width: 980px) {
  .top-notice { display: none; }
  /* Three independent slots keep account, logo and search apart on phones. */
  .site-header {
    position: sticky; padding: 8px 14px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    direction: ltr;
  }
  .site-header .brand {
    position: static; grid-column: 2; grid-row: 1; justify-self: center;
    min-width: 0; margin: 0; transform: none;
  }
  .site-header .header-actions { position: static; display: contents; }
  .site-header .account-slot {
    grid-column: 1; grid-row: 1; justify-self: start;
    min-width: 0; direction: rtl;
  }
  .site-header #searchOpen {
    grid-column: 3; grid-row: 1; justify-self: end;
    direction: rtl;
  }
  .home-prelude { padding-top: 12px; }
  .shortcut-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(165px,44vw); grid-template-columns: none; overflow-x: auto; padding: 2px 14px 9px; margin-inline: -14px; scroll-snap-type: x proximity; }
  .shortcut-grid > a { scroll-snap-align: start; }
  .catalog-ribbon > div b { display: none; }
  .hero { width: calc(100% - 24px); min-height: 500px; border-radius: 20px; }
  .hero-content { min-height: 500px; padding-inline: 28px; }
  .hero-copy { max-width: min(92%,620px); }
}

@media (max-width: 560px) {
  :root { --gutter: 14px; }
  .brand span, .brand small { font-size: 19px; }
  .site-header .brand .brand-logo { width: 128px; height: 42px; }
  .site-header .account-login { width: 42px; padding: 0; justify-content: center; }
  .site-header .account-login span { display: none; }
  .header-actions { padding: 0; }
  .header-actions .avatar { display: none; }
  .shortcut-grid { grid-auto-columns: minmax(154px,72vw); }
  .shortcut-grid > a { padding: 12px; }
  .catalog-ribbon { padding: 8px 11px; }
  .catalog-ribbon > span { min-width: 0; overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
  .catalog-ribbon > div { display: none; }
  .hero { min-height: 450px; margin-top: 12px; }
  .hero-content { min-height: 450px; padding: 58px 20px 78px; align-items: end; }
  .hero-copy { max-width: 100%; }
  .hero-copy h1 { font-size: clamp(2rem,11vw,3rem); }
  .hero-copy > p { -webkit-line-clamp: 2; font-size: 13px; }
  .hero-actions .primary-btn, .hero-actions .secondary-btn { height: 46px; padding-inline: 20px; font-size: 13px; }
  .hero-dots { inset-inline-start: 16px; bottom: 15px; transform: scale(.88); transform-origin: left bottom; }
  .signal-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 13px; gap: 12px; }
  .signal-strip i { display: none; }
  .signal-strip > div { min-width: 0; width: auto; overflow: hidden; }
  .signal-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .live-signal { grid-column: 1 / -1; min-width: 100% !important; }
  .genre-cloud { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 7px; }
  .genre-cloud button { flex: 0 0 auto; }
  .rank-rail { grid-auto-columns: 214px; }
  .rank-card { grid-template-columns: 70px 132px; grid-template-rows: 198px auto; }
  .rank-poster { height: 198px; }
  .rank-card > strong { font-size: 5.8rem; }
  .landscape-rail { grid-auto-columns: 84vw; }
  .landscape-card { min-height: 205px; }
  .card-rail { grid-auto-columns: 42vw; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 10px; column-gap: 6px; }
  .site-header .brand .brand-logo { width: 112px; height: 40px; }
  .site-header .account-slot { gap: 4px; }
  .site-header .account-bell, .site-header .account-avatar-btn { width: 36px; height: 36px; }
}

/* Framed hero artwork: a sharp, wall-mounted poster over the soft backdrop. */
.hero-content { position: relative; }

@media (min-width: 760px) {
  .hero-content {
    grid-template-columns: minmax(0, 1fr) clamp(190px, 21vw, 286px) !important;
    gap: clamp(34px, 5vw, 82px);
  }

  .hero-copy { max-width: 620px; }

  .hero-poster-wrap {
    position: relative;
    display: block !important;
    width: 100%;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 11px;
    background: linear-gradient(145deg, #272a30 0%, #090b0f 34%, #171a20 70%, #030405 100%);
    box-shadow:
      -30px 34px 55px rgba(0,0,0,.55),
      0 15px 28px rgba(0,0,0,.55),
      inset 0 0 0 2px rgba(0,0,0,.78),
      inset 0 0 0 4px rgba(255,255,255,.045),
      0 0 0 1px rgba(0,0,0,.9);
    transform: perspective(1200px) rotateY(-9deg) rotateX(1.5deg) rotateZ(-.35deg);
    transform-origin: center;
    transform-style: preserve-3d;
    animation: wallPosterIn .82s var(--ease-out) both;
    transition: transform .55s var(--ease-out), box-shadow .4s var(--ease);
    isolation: isolate;
  }

  @keyframes wallPosterIn {
    from { opacity: 0; transform: perspective(1200px) rotateY(-18deg) rotateX(5deg) translate3d(-34px,24px,-80px); }
    to { opacity: 1; transform: perspective(1200px) rotateY(-9deg) rotateX(1.5deg) rotateZ(-.35deg); }
  }

  .hero-poster-wrap::before {
    content: '';
    position: absolute;
    inset: 9px;
    z-index: 2;
    pointer-events: none;
    border-radius: 5px;
    box-shadow: inset 13px 0 20px rgba(255,255,255,.055), inset -10px 0 18px rgba(0,0,0,.38);
  }

  .hero-poster-wrap::after {
    content: '';
    position: absolute;
    inset: 10% -24% -13%;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(229,9,20,.48) 0%, rgba(229,9,20,.13) 40%, transparent 72%);
    filter: blur(32px);
    opacity: .76;
  }

  .hero-poster {
    display: block;
    width: 100% !important;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.1) !important;
    transform: translateZ(12px) !important;
    animation: none !important;
    filter: saturate(108%) contrast(1.03);
    transition: filter .4s var(--ease), transform .55s var(--ease-out) !important;
  }

  .hero-poster-wire {
    position: absolute;
    top: -31px;
    left: 50%;
    z-index: -1;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f3f3f3, #737782 34%, #111318 72%);
    box-shadow: 0 2px 7px #000, 0 0 0 3px rgba(255,255,255,.045);
    transform: translateX(-50%) translateZ(-4px);
  }

  .hero-poster-wire::before,
  .hero-poster-wire::after {
    content: '';
    position: absolute;
    top: 7px;
    width: 1px;
    height: 50px;
    background: linear-gradient(#9fa3ac, #32363e);
    box-shadow: 1px 0 rgba(0,0,0,.7);
    transform-origin: top;
  }
  .hero-poster-wire::before { left: 3px; transform: rotate(49deg); }
  .hero-poster-wire::after { right: 3px; transform: rotate(-49deg); }

  .hero-poster-label {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 20px;
    max-width: calc(100% - 34px);
    overflow: hidden;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    color: rgba(255,255,255,.9);
    background: rgba(3,5,8,.7);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    backdrop-filter: blur(9px);
    font: 700 8px/1.2 system-ui, sans-serif;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%) translateZ(24px);
  }

  .hero-poster-wrap:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateY(-7px) scale(1.015);
    box-shadow:
      -38px 42px 66px rgba(0,0,0,.62),
      0 18px 40px rgba(0,0,0,.62),
      inset 0 0 0 2px rgba(0,0,0,.78),
      inset 0 0 0 4px rgba(255,255,255,.065),
      0 0 32px rgba(229,9,20,.2);
  }
  .hero-poster-wrap:hover .hero-poster { filter: saturate(116%) contrast(1.04) brightness(1.04); transform: translateZ(18px) !important; }
}

@media (min-width: 760px) and (max-width: 980px) {
  .hero-content { grid-template-columns: minmax(0,1fr) clamp(174px,25vw,220px) !important; gap: 30px; }
  .hero-copy h1 { font-size: clamp(2rem,5.6vw,3.2rem); }
  .hero-copy > p { -webkit-line-clamp: 2; }
  .hero-poster-wire { top: -25px; }
}

@media (max-width: 759px) {
  .hero-poster-wrap { display: none !important; }
}