/* Connected HLSPLAY composition. This layer only rearranges existing UI;
   provider data, routing, playback and account ownership stay with the app. */
body {
  --integrated-radius: 12px;
  --integrated-gap: 14px;
}

/* A rail overlays one stable content gutter. Its hover/scroll state never
   changes the width of shelves or moves the right edge of the application. */
@media (min-width: 1400px) {
  body:not(.mobile-shell-active):not([data-sagas-shell='immersive']) #app-sidebar,
  body:not(.mobile-shell-active):is(.sagas-visible,.streaming-active,.sidebar-collapsed,.sagas-sidebar-collapsed) #app-sidebar {
    top: 0; bottom: 0; left: 0; z-index: 30;
    width: calc(var(--page-gutter, 32px) + 72px);
    max-width: none; padding: calc(var(--app-header-height, 80px) + 8px) 12px 20px var(--page-gutter, 32px);
    background: var(--canvas, #090a0c);
    box-shadow: none;
    border: 0; border-radius: 0;
    overflow-x: clip; overflow-y: auto;
    transform: translateX(0); opacity: 1;
    transition: width var(--shell-chrome-duration) var(--shell-chrome-ease),
      transform var(--shell-chrome-duration) var(--shell-chrome-ease),
      opacity var(--shell-chrome-opacity-duration) var(--shell-chrome-ease);
  }
  body:not(.mobile-shell-active).sidebar-peeking #app-sidebar,
  body:not(.mobile-shell-active).sagas-visible.sidebar-peeking #app-sidebar,
  body:not(.mobile-shell-active).streaming-active.sidebar-peeking #app-sidebar {
    width: calc(var(--page-gutter, 32px) + 256px);
    background: var(--canvas, #090a0c);
    box-shadow: none;
  }
  body.sagas-visible:not(.mobile-shell-active):not([data-sagas-shell='immersive']) {
    --sg-main-left: calc(var(--page-gutter, 32px) + 96px);
    --sg-main-top: calc(var(--app-header-height, 80px) + 24px);
    --sg-right: var(--page-gutter, 32px);
  }
  /* Keep the older, roomier menu scale across every context. The collapsed
     category rule sets font-size:0, so labels must have an explicit size. */
  body:not(.mobile-shell-active) #app-sidebar :is(.sidebar-action,.sidebar-family,.sidebar-sport-item,.service-nav-button,.sagas-nav-button) {
    width: 244px; min-height: 53px; height: auto; max-width: none;
    align-items: center; justify-content: flex-start;
    gap: 16px; padding: 13px 12px; margin: 0;
    font-size: 16px; font-weight: 450; line-height: 1.4;
    border: 0; border-radius: 10px; text-align: left; white-space: nowrap;
    overflow: hidden;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }
  body:not(.mobile-shell-active) #app-sidebar :is(.sidebar-navigation,.sidebar-live,.sidebar-sports,.sidebar-services,.sagas-secondary-nav) {
    gap: 6px; margin-block: 0 18px; padding: 0;
  }
  body:not(.mobile-shell-active) #app-sidebar :is(.sidebar-icon,.sidebar-context-icon) {
    flex: 0 0 23px; width: 23px; height: 23px;
  }
  body:not(.mobile-shell-active) #app-sidebar .sidebar-action > svg { flex: 0 0 23px; width: 23px; height: 23px; }
  body:not(.mobile-shell-active) #app-sidebar .sidebar-context-icon::before,
  body:not(.mobile-shell-active) #app-sidebar .sidebar-context-icon img { width: 23px; height: 23px; }
  body:not(.mobile-shell-active) #app-sidebar .service-logo { flex-basis: 23px; width: 23px; height: 23px; mask-size: contain; }
  body:not(.mobile-shell-active) #app-sidebar #sidebar-toggle { width: 44px; height: 44px; margin: 0 0 18px; }
  body:not(.mobile-shell-active) #sidebar-sagas .sagas-secondary-nav { width: 244px; }
  body:not(.mobile-shell-active) #sidebar-sagas :is(.sagas-primary-nav,.sagas-secondary-actions) { display: grid; gap: 6px; }
  body:not(.mobile-shell-active) #app-sidebar :is(.sidebar-label,.sidebar-context-label,.sagas-nav-label,.sagas-nav-heading,.sagas-nav-footnote) {
    display: block; min-width: 0; opacity: 0; visibility: hidden;
    font-size: 16px; font-weight: 450; white-space: nowrap; text-overflow: ellipsis;
    overflow: hidden; transform: translateX(-6px); pointer-events: none;
    transition: opacity 160ms ease, transform 240ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 240ms;
  }
  body:not(.mobile-shell-active) #app-sidebar :is(.sagas-nav-heading,.sagas-nav-footnote) { font-size: 12px; }
  body:not(.mobile-shell-active).sidebar-peeking #app-sidebar :is(.sidebar-label,.sidebar-context-label,.sagas-nav-label,.sagas-nav-heading,.sagas-nav-footnote) {
    display: block; opacity: 1; visibility: visible; transform: translateX(0);
    transition: opacity 220ms ease 35ms, transform 280ms cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
  /* A competition with no valid mark keeps a readable text fallback in the
     icon strip rather than turning into a blank navigation target. */
  body:not(.mobile-shell-active):not(.sidebar-peeking) #app-sidebar .sidebar-competition-no-logo { width: 60px; padding-inline: 4px; }
  body:not(.mobile-shell-active):not(.sidebar-peeking) #app-sidebar .sidebar-competition-no-logo .sidebar-context-label {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    max-height: 2.8em; font-size: 11px; line-height: 1.4; white-space: normal;
    opacity: 1; visibility: visible; transform: none;
  }
  /* Scroll changes only the composited rail, including its icon strip. The
     content keeps the same geometry and Tab can reveal a focused control. */
  body:not(.mobile-shell-active).sidebar-scroll-hidden #app-sidebar {
    transform: translateX(calc(-100% - 32px)); opacity: 0; pointer-events: none;
    box-shadow: none;
    /* Removing peeking must not shrink the moving panel and recalculate its
       percentage translation mid-flight. Close its width only offstage. */
    transition: width 0ms linear var(--shell-chrome-duration),
      transform var(--shell-chrome-duration) var(--shell-chrome-ease),
      opacity var(--shell-chrome-opacity-duration) var(--shell-chrome-ease);
  }
}
/* The opening owns its wallpaper. It cannot paint through the right gutter
   beside lower catalogue rows after the opening has scrolled away. */
body #sagas-hub .sg-opening { position: relative; isolation: isolate; }
body #sagas-hub .sg-opening > .sg-backdrop { position: absolute; inset: 0; overflow: clip; }
body #sagas-hub .sg-opening > .sg-backdrop .sg-backdrop-image { max-height: 100%; height: 100%; top: 0; }
body .service-logo[data-service='netflix'] { color: var(--text, #f2efe8); filter: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.mobile-shell-active) #app-sidebar,
  body #app-sidebar :is(.sidebar-action,.sidebar-family,.sidebar-sport-item,.service-nav-button,.sagas-nav-button,.sidebar-label,.sidebar-context-label,.sagas-nav-label,.sagas-nav-heading,.sagas-nav-footnote) { transition: none !important; }
}

/* Only the opening universe rail and live channels are landscape. Content
   shelves use real movie/series posters, including representatives of a saga. */
body :is(.home-shelves .hs-poster, #catalog-discovery .dx-title-card:not(.dx-channel-card) .dx-poster) {
  aspect-ratio: 2 / 3;
  border-radius: var(--integrated-radius);
}
body #sagas-hub .sg-route-card .sg-card-art {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--integrated-radius);
}
body #sagas-hub :is(.sg-opening-cards, .sg-discovery-row) {
  gap: var(--integrated-gap);
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}
body #sagas-hub .sg-opening-cards > .sg-route-card {
  flex: 0 0 clamp(220px, 24vw, 340px);
  scroll-snap-align: start;
}
body #sagas-hub .sg-universe .sg-card-art {
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: var(--integrated-radius);
}
body #sagas-hub .sg-universe .sg-art {
  object-fit: contain;
  object-position: center;
  filter: none;
}
body #sagas-hub .sg-discovery-row > .sg-universe {
  flex: 0 0 clamp(155px, 13.5vw, 220px);
  scroll-snap-align: start;
}
body #sagas-hub .sg-card-copy { min-width: 0; }
body #sagas-hub .sg-card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* The opening is a readable introduction followed by a recognizable shelf.
   It does not reserve an entire screen above the first group of universes. */
body #sagas-hub .sg-opening {
  display: grid;
  gap: 28px;
  min-height: 0;
  height: auto;
  padding: 36px 0 20px;
}
body #sagas-hub .sg-opening-copy {
  width: min(100%, 760px);
  max-width: 760px;
  padding-top: 0;
}
body #sagas-hub .sg-opening .sg-kicker {
  max-width: 100%;
  margin-bottom: 16px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .17em;
  overflow-wrap: anywhere;
}
body #sagas-hub .sg-opening .sg-title {
  max-width: 720px;
  margin-bottom: 18px;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1.08;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
body #sagas-hub .sg-opening .sg-subtitle {
  max-width: 48ch;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.6;
}
body #sagas-hub .sg-opening .sg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
body #sagas-hub .sg-opening :is(.sg-glass, .sg-quiet) {
  min-width: 0;
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid var(--line, #ffffff20);
  border-radius: 28px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  box-shadow: none;
}
body #sagas-hub .sg-opening .sg-glass {
  background: var(--text, #f4f4f5);
  color: var(--canvas, #08090b);
}
body #sagas-hub .sg-opening .sg-quiet { background: var(--surface, #171a20); }
body #sagas-hub .sg-opener-count {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body #sagas-hub .sg-opening-shelf {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  margin-top: 0;
}
body #sagas-hub .sg-section-heading {
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
body #sagas-hub .sg-section-heading h2 {
  min-width: 0;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body #sagas-hub .sg-section-heading .sg-text-link {
  flex: none;
  min-height: 44px;
  padding: 8px 0 8px 8px;
  font-size: 12px;
}
body #sagas-hub .sg-scroll-hint {
  position: relative;
  inset: auto;
  justify-self: center;
  min-height: 44px;
  margin: 0;
}
body #sagas-hub .sg-discovery { gap: 34px; padding-top: 24px; }

/* Global actions retain their real nodes and handlers in the desktop header. */
@media (min-width: 1400px) {
  body .topbar, body:is(.sagas-visible, .streaming-active) .topbar {
    flex-wrap: nowrap;
    gap: 20px;
    padding-inline: clamp(24px, 2.2vw, 42px);
  }
  body .topbar .brand { flex: 0 0 128px; font-size: 27px; }
  body .topbar .catalog-tabs {
    flex: 0 1 auto;
    min-width: 0;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  body .topbar .catalog-tabs button {
    flex: none;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  body .topbar .header-tools { flex: 0 0 auto; gap: 8px; margin-left: auto; }
  body .topbar .header-search { width: clamp(200px, 18vw, 300px); }
  body .topbar :is(#header-discover, #header-together, #change-account) {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }
}

/* The shell class is shared by phone, tablet portrait/landscape and split view.
   Width alone never swaps its controls merely because a mouse is present. */
body.mobile-shell-active {
  --integrated-gap: 12px;
  --integrated-radius: 10px;
}
body.mobile-shell-active .topbar .catalog-tabs {
  gap: 6px;
  padding-inline: 4px;
  scroll-padding-inline: 8px;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y pinch-zoom;
}
body.mobile-shell-active .topbar .catalog-tabs button {
  min-height: 46px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}

/* Contextual options live in the compact header sheet; no second row. */
body.mobile-shell-active #compact-context-navigation { display: none !important; }
body.mobile-shell-active { --header-height: var(--mobile-header-height, calc(60px + env(safe-area-inset-top, 0px))); }

body.mobile-shell-active .mobile-action-dock {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  width: auto;
  max-width: 460px;
  min-height: 60px;
  padding: 5px;
  gap: 0;
  border-radius: 22px;
}
body.mobile-shell-active #mobile-action-dock :is(button, #tab-favorites) {
  min-width: 44px;
  min-height: 48px;
  width: 100%;
  padding: 0;
}
body.mobile-shell-active #mobile-action-dock :is(.mobile-dock-icon, .mobile-nav-icon) {
  width: 23px;
  height: 23px;
}
body.mobile-shell-active .app-main {
  /* The shell already reserves the dock; do not count that space twice. */
  padding-bottom: 24px;
}

body.mobile-shell-active #sagas-hub .sg-opening {
  gap: 24px;
  padding: 26px 0 12px;
}
body.mobile-shell-active #sagas-hub .sg-opening-copy { max-width: 680px; }
body.mobile-shell-active #sagas-hub .sg-opening .sg-title {
  max-width: 680px;
  font-size: clamp(34px, 4.5vw, 48px);
  line-height: 1.08;
}
body.mobile-shell-active #sagas-hub .sg-opening .sg-subtitle { font-size: 15px; }
body.mobile-shell-active #sagas-hub .sg-opening :is(.sg-glass, .sg-quiet) {
  min-height: 46px;
  font-size: 13px;
  padding: 11px 16px;
}
body.mobile-shell-active #sagas-hub .sg-opening-cards > .sg-route-card {
  flex-basis: clamp(210px, 40vw, 320px);
}
body.mobile-shell-active #sagas-hub .sg-discovery { gap: 30px; }
body.mobile-shell-active #sagas-hub .sg-card-title { font-size: 15px; }
body.mobile-shell-active #sagas-hub .sg-card-meta { font-size: 11px; line-height: 1.5; }
body.mobile-shell-active #sagas-hub .sg-discovery-row .sg-card-copy { padding-top: 10px; }

body.mobile-shell-active .series-page .series-actions { gap: 10px; }
body.mobile-shell-active .series-page .series-actions button {
  min-height: 46px;
  border-radius: 24px;
  line-height: 1.4;
}
body.mobile-shell-active .series-page .series-episode-media {
  aspect-ratio: 16 / 9;
  border-radius: 9px;
}
body.mobile-shell-active .series-page .series-episodes-heading { gap: 12px; }
body.mobile-shell-active .series-page .series-episodes-heading .field { min-width: 0; }
body.mobile-shell-active .series-page :is(#series-season, .episode-seen-toggle) { min-height: 44px; }
/* Route focus announces a heading; focus ink belongs to interactive controls. */
.series-page #series-title:focus { outline: none; box-shadow: none; }

@media (max-width: 600px) {
  body.mobile-shell-active #sagas-hub .sg-opening { gap: 22px; padding-top: 20px; }
  body.mobile-shell-active #sagas-hub .sg-opening .sg-title {
    font-size: clamp(29px, 7.4vw, 36px);
    margin-bottom: 14px;
  }
  body.mobile-shell-active #sagas-hub .sg-opening .sg-kicker {
    margin-bottom: 13px;
    font-size: 9px;
    letter-spacing: .13em;
  }
  body.mobile-shell-active #sagas-hub .sg-opening .sg-subtitle { font-size: 14px; line-height: 1.55; }
  body.mobile-shell-active #sagas-hub .sg-opening .sg-actions { gap: 8px; margin-top: 20px; }
  body.mobile-shell-active #sagas-hub .sg-opening :is(.sg-glass, .sg-quiet) {
    flex: 1 1 125px;
    padding-inline: 12px;
    font-size: 12px;
  }
  body.mobile-shell-active #sagas-hub .sg-opener-count { margin-top: 15px; font-size: 11px; }
  body.mobile-shell-active #sagas-hub .sg-opening-cards > .sg-route-card {
    flex-basis: clamp(210px, 64vw, 280px);
  }
  body.mobile-shell-active #sagas-hub .sg-discovery-row > .sg-universe { flex-basis: clamp(128px, 38vw, 182px); }
  body.mobile-shell-active #sagas-hub .sg-route-card .sg-card-copy { inset-inline: 12px; bottom: 12px; }
  body.mobile-shell-active #sagas-hub .sg-section-heading h2 { font-size: 21px; }
  body.mobile-shell-active #sagas-hub .sg-section-heading .sg-text-link { font-size: 11px; }
  body.mobile-shell-active #sagas-hub .sg-discovery { padding-top: 18px; }
  body.mobile-shell-active .series-page .series-actions #series-resume { flex: 1 1 150px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  body.mobile-shell-active #sagas-hub .sg-opening-cards > .sg-route-card {
    flex-basis: calc((100vw - 2 * var(--page-gutter, 24px) - 2 * var(--integrated-gap)) / 2.55);
  }
  body.mobile-shell-active #sagas-hub .sg-discovery-row > .sg-universe { flex-basis: calc((100vw - 2 * var(--page-gutter, 24px) - 3 * var(--integrated-gap)) / 3.6); }
  body.mobile-shell-active #sagas-hub .sg-catalog-grid { gap: 26px 16px; }
}
@media (min-width: 901px) and (max-width: 1399px) {
  body.mobile-shell-active #sagas-hub .sg-opening-cards > .sg-route-card {
    flex-basis: calc((100vw - 2 * var(--page-gutter, 28px) - 3 * var(--integrated-gap)) / 3.55);
  }
  body.mobile-shell-active #sagas-hub .sg-discovery-row > .sg-universe { flex-basis: calc((100vw - 2 * var(--page-gutter, 28px) - 4 * var(--integrated-gap)) / 4.6); }
  body.mobile-shell-active #sagas-hub .sg-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 540px) {
  body.mobile-shell-active #sagas-hub .sg-opening { padding-top: 16px; gap: 18px; }
  body.mobile-shell-active #sagas-hub .sg-opening .sg-title { font-size: clamp(29px, 4vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  body #sagas-hub :is(.sg-route-card, .sg-universe, .sg-art),
  body.mobile-shell-active #compact-context-navigation,
  body.mobile-shell-active .topbar .catalog-tabs { scroll-behavior: auto; transition: none; }
}

/* Global header actions follow the shared responsive composition. */
body .topbar #header-discover {
  position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px;
  width: auto; min-width: 112px; height: 44px; min-height: 44px; margin-left: 8px; padding: 10px 15px;
  border: 1px solid #ffffff16; border-radius: 999px; background: linear-gradient(160deg,#292b30,#18191d);
  color: var(--text); box-shadow: inset 0 1px 0 #ffffff0b; font-size: 12px; font-weight: 650;
}
body .topbar #header-discover svg { flex: 0 0 19px; width: 19px; height: 19px; }
body .topbar #header-discover .header-discover-label { display: inline; }
body .topbar #header-discover-hint {
  position: absolute; z-index: 120; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 260px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--canvas); color: var(--text); font-size: 12px; line-height: 1.5; text-align: left;
  font-weight: 400; white-space: normal; box-shadow: 0 8px 28px #0005;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, visibility 120ms;
}
body .topbar #header-discover:not([data-hint-dismissed='true']):is(:hover,:focus-visible) #header-discover-hint { opacity: 1; visibility: visible; }
body .topbar #site-fullscreen { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 0; background: transparent; box-shadow: none; color: var(--text-muted); }
body .topbar #site-fullscreen[aria-pressed='true'] { color: var(--text); }
.header-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
body.mobile-shell-active .topbar :is(#header-discover,#site-fullscreen) { display: none; }
@media (min-width: 1400px) and (max-width: 1599px) {
  body .topbar { gap: 12px; padding-inline: 24px; }
  body .topbar .brand { flex-basis: 112px; }
  body .topbar .catalog-tabs button { padding-inline: 9px; font-size: 12px; }
  body .topbar .header-search { width: 180px; }
  body .topbar .header-desktop-download { width: 44px; min-width: 44px; height: 44px; padding: 10px; font-size: 0; gap: 0; }
}