/*
 * Manrope, self-hosted.
 *
 * Previously pulled from fonts.googleapis.com, which is a render-blocking
 * request to a third party: nothing painted until Google answered, and on a
 * network where Google is slow or filtered the page stayed blank until the
 * request timed out. Serving it from our own origin removes that dependency.
 *
 * One file per subset covers every weight — Manrope ships as a variable font,
 * so the 400..800 range below is interpolated from a single download.
 */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #05201d;
    --bg-soft: #082623;
    --surface: #0d302c;
    --surface-raised: #133a35;
    --surface-hover: #19463f;
    --text: #fbf6ea;
    --text-soft: #e4dccb;
    --muted: #a3b3a5;
    --muted-strong: #c3cdbf;
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .18);
    --pink: #ffb547;
    --pink-light: #ffcf7d;
    --pink-dark: #e8902a;
    --aqua: #7ce7b0;
    --aqua-dark: #3fbf86;
    --green: #a7e86b;
    --amber: #ffd06a;
    --danger: #ff7a5c;
    --brand-pink: #ffb547;
    --brand-violet: #2fbf9b;
    --brand-cyan: #7ce7b0;
    --shadow: 0 28px 80px rgba(0, 0, 0, .42);
    --shadow-soft: 0 16px 42px rgba(0, 0, 0, .3);
    --radius-xl: 28px;
    --radius-lg: 21px;
    --radius-md: 15px;
    --shell: 1280px;
    --header-height: 76px;
}

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

html {
    color-scheme: dark;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background: var(--bg);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

body::selection {
    color: #fff;
    background: var(--pink);
}

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

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

button,
input {
    color: inherit;
    font: inherit;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    margin-bottom: 0;
    line-height: 1.05;
    letter-spacing: -.04em;
}

h2 {
    font-size: clamp(2rem, 3.2vw, 3rem);
}

[hidden] {
    display: none !important;
}

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

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 10px;
    color: #fff;
    background: var(--pink);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.section-shell {
    width: min(calc(100% - 48px), var(--shell));
    margin-inline: auto;
}

.site-main {
    position: relative;
    z-index: 1;
    min-height: 72vh;
    padding-bottom: 120px;
}

.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.app-backdrop__glow {
    position: absolute;
    width: 42vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .08;
}

.app-backdrop__glow--one {
    top: 10vh;
    left: -22vw;
    background: var(--pink);
}

.app-backdrop__glow--two {
    top: 60vh;
    right: -26vw;
    background: var(--aqua);
}

.app-backdrop__grain {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 80%);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    border-bottom: 1px solid transparent;
    background: linear-gradient(to bottom, rgba(5,22,20, .96), rgba(5,22,20, .8) 72%, transparent);
    transition: border-color .2s ease, background-color .2s ease, backdrop-filter .2s ease;
}

.site-header.is-scrolled {
    border-color: var(--line);
    background: rgba(5,22,20, .9);
    backdrop-filter: blur(20px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    width: min(calc(100% - 48px), 1360px);
    min-height: var(--header-height);
    margin-inline: auto;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
}

.brand > img {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(255,181,71, .15);
}

.brand__wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    letter-spacing: -.035em;
}

.brand__wordmark strong {
    font-size: 1.13rem;
    font-weight: 800;
}

.brand__wordmark em {
    color: var(--pink-light);
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brand__wordmark--univeome {
    direction: ltr;
    gap: 0;
    color: var(--text);
    font-size: 1.13rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    unicode-bidi: isolate;
}

.brand__wordmark-v {
    color: var(--brand-pink);
}

.brand__wordmark-e {
    color: var(--brand-violet);
}

.brand__wordmark-o {
    color: var(--brand-cyan);
}

.header-panel {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-nav a {
    position: relative;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--muted-strong);
    font-size: .88rem;
    font-weight: 700;
    transition: color .2s ease, background-color .2s ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 2px;
    border-radius: 99px;
    background: var(--pink);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, .05);
}

.site-nav a.is-active::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.access-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, .035);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Site language. Both options stay on screen rather than a single toggle, so
   the current language is readable without first working out what the button
   would switch to. */
/*
 * Language switch.
 *
 * A <details> disclosure rather than a row of codes: four locales will not fit
 * beside the wordmark on a phone, and this needs no JavaScript to open. It
 * lives in the header's top row rather than in the collapsing nav panel, so a
 * visitor who cannot read the English menu does not have to find the menu
 * first.
 */
.language-switch {
    position: relative;
    flex: 0 0 auto;
    /* Sits last on desktop, after the nav panel claims its flex space. */
    order: 1;
}

.language-switch > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    list-style: none;
    text-transform: uppercase;
    transition: color .2s ease, border-color .2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.language-switch > summary::-webkit-details-marker {
    display: none;
}

.language-switch > summary:hover,
.language-switch > summary:focus-visible,
.language-switch[open] > summary {
    color: var(--text);
    border-color: var(--line-strong);
}

.language-switch__globe {
    width: 15px;
    height: 15px;
    color: var(--muted);
}

.language-switch__caret {
    width: 12px;
    height: 12px;
    transition: transform .2s ease;
}

.language-switch[open] .language-switch__caret {
    transform: rotate(180deg);
}

.language-switch__menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 2px;
    min-width: 178px;
    padding: 7px;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: rgba(9,30,28, .97);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}

.language-switch__option {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--muted-strong);
    font-size: .8rem;
    transition: color .2s ease, background-color .2s ease;
}

.language-switch__option b {
    min-width: 22px;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.language-switch__option:hover,
.language-switch__option:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, .07);
}

.language-switch__option.is-active {
    color: #fff;
    background: var(--pink);
}

.access-chip {
    color: var(--amber);
}

.account-name {
    max-width: 170px;
    overflow: hidden;
    color: var(--muted-strong);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.nav-toggle > span:not(.sr-only) {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    background: var(--text);
}

/* Controls */
.button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 19px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 800;
    line-height: 1;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.button svg,
.btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.button:hover,
.btn:hover {
    transform: translateY(-2px);
}

.button:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(124,231,176, .36);
    outline-offset: 3px;
}

.button--small {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .78rem;
}

.button--large {
    min-height: 54px;
    padding: 14px 22px;
}

.button--primary,
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pink-light), var(--pink) 52%, var(--pink-dark));
    box-shadow: 0 12px 30px rgba(255,181,71, .24);
}

.button--primary:hover,
.btn-primary:hover {
    box-shadow: 0 16px 38px rgba(255,181,71, .34);
}

.button--glass {
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
}

.button--glass:hover {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .16);
}

.button--quiet,
.btn-outline {
    border-color: var(--line);
    color: var(--text-soft);
    background: rgba(255, 255, 255, .035);
}

.button--quiet:hover,
.btn-outline:hover {
    border-color: var(--line-strong);
    color: var(--text);
    background: rgba(255, 255, 255, .07);
}

.button--block,
.btn-block {
    width: 100%;
}

.flash,
.page-notice {
    width: min(calc(100% - 48px), var(--shell));
    margin: 18px auto;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-soft);
    background: var(--surface);
}

.flash--success {
    border-color: rgba(167,232,107, .28);
    background: rgba(167,232,107, .1);
}

.flash--error,
.page-notice--error {
    border-color: rgba(255,122,92, .28);
    background: rgba(255,122,92, .1);
}

.page-notice {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-notice p {
    margin: 0;
}

.live-kicker,
.section-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--pink-light);
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.live-kicker > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 5px rgba(255,181,71, .13), 0 0 18px rgba(255,181,71, .5);
    animation: signal-pulse 2.2s ease-out infinite;
}

.section-kicker--aqua {
    color: var(--aqua);
}

@keyframes signal-pulse {
    50% {
        box-shadow: 0 0 0 8px rgba(255,181,71, 0), 0 0 22px rgba(255,181,71, .65);
    }
}

.title-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    color: var(--muted-strong);
    font-size: .78rem;
    font-weight: 600;
}

.match-label {
    color: var(--green);
    font-weight: 800;
}

.age-label {
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    color: var(--text-soft);
    font-size: .62rem;
    letter-spacing: .08em;
}

/* Home feature player */
.stream-hero {
    position: relative;
    height: min(74vh, 720px);
    min-height: 610px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: #0a0c11;
    box-shadow: var(--shadow);
    isolation: isolate;
}

.stream-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -110px 130px rgba(0, 0, 0, .46);
}

.stream-hero__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 63% center;
    transform: scale(1.012);
}

.stream-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3,17,16, .96) 0%, rgba(3,17,16, .78) 30%, rgba(3,17,16, .23) 60%, rgba(3,17,16, .08) 100%),
        linear-gradient(0deg, rgba(3,17,16, .92) 0%, transparent 36%, rgba(3,17,16, .22) 100%);
}

.stream-hero__topline,
.series-hero__topbar {
    position: absolute;
    top: 24px;
    right: 26px;
    left: 26px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.original-label,
.series-hero__topbar > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    color: rgba(255, 255, 255, .86);
    background: rgba(5,20,19, .55);
    backdrop-filter: blur(12px);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quality-label,
.series-hero__topbar > b {
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    color: #fff;
    background: rgba(5,20,19, .5);
    font-size: .68rem;
    letter-spacing: .08em;
}

.stream-hero__content {
    position: absolute;
    bottom: 64px;
    left: clamp(28px, 5vw, 70px);
    z-index: 3;
    width: min(610px, calc(100% - 70px));
}

.stream-hero__content h1 {
    margin-bottom: 18px;
    font-size: clamp(3.3rem, 6vw, 6.3rem);
    font-weight: 800;
    line-height: .88;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .52);
}

.stream-hero__description {
    max-width: 560px;
    margin: 20px 0 24px;
    color: rgba(235, 238, 243, .8);
    font-size: .96rem;
    line-height: 1.7;
}

.stream-hero__actions,
.series-hero__actions,
.cast-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-play {
    position: absolute;
    right: clamp(30px, 7vw, 90px);
    bottom: 74px;
    z-index: 4;
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .88);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 18px 45px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hero-play:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 14px rgba(255, 255, 255, .08), 0 20px 55px rgba(0, 0, 0, .42);
}

.hero-play svg {
    width: 34px;
    height: 34px;
}

.streaming-proof {
    position: relative;
    z-index: 2;
    margin-top: -1px;
    border-bottom: 1px solid var(--line);
    background: rgba(14,38,35, .78);
}

.streaming-proof__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 5vw, 68px);
    min-height: 70px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.streaming-proof__inner span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.streaming-proof__inner strong {
    color: var(--text-soft);
}

.streaming-proof__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(167,232,107, .6);
}

/* Content sections */
.content-section {
    padding-top: 100px;
}

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

.section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3.3rem);
}

.section-heading__note {
    max-width: 430px;
    margin: 0 0 5px;
    color: var(--muted);
    font-size: .86rem;
}

.section-link,
.text-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 9px 0;
    border: 0;
    color: var(--muted-strong);
    background: transparent;
    font-size: .78rem;
    font-weight: 800;
}

.section-link:hover,
.text-button:hover {
    color: var(--text);
}

.section-link svg,
.text-button svg {
    width: 18px;
    height: 18px;
}

.episode-grid {
    display: grid;
    gap: 28px 18px;
}

.episode-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.episode-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 20px;
}

.stream-card {
    min-width: 0;
}

.stream-card__screen {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(135deg, #133a35, #092724);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    isolation: isolate;
    transition: border-color .2s ease, transform .22s ease, box-shadow .22s ease;
}

.stream-card__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.stream-card__screen:hover {
    z-index: 3;
    border-color: rgba(255, 255, 255, .25);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .38);
    transform: translateY(-5px) scale(1.012);
}

.stream-card__screen img,
.stream-card__fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.stream-card__screen:hover img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.04);
}

.stream-card__fallback {
    display: block;
    background:
        radial-gradient(circle at 25% 25%, rgba(255,181,71, .25), transparent 32%),
        linear-gradient(135deg, #1a202a, #0c0f14);
}

.stream-card__wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(3,17,16, .12), transparent 45%, rgba(3,17,16, .78));
}

.stream-card__flag,
.stream-card__quality {
    position: absolute;
    top: 10px;
    z-index: 3;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    color: rgba(255, 255, 255, .85);
    background: rgba(4,19,18, .62);
    backdrop-filter: blur(8px);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.stream-card__flag {
    left: 10px;
}

.stream-card__quality {
    right: 10px;
}

.stream-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
    opacity: 0;
    transform: translate(-50%, -43%) scale(.86);
    transition: opacity .2s ease, transform .2s ease;
}

.stream-card__play svg {
    width: 23px;
    height: 23px;
}

.stream-card__screen:hover .stream-card__play,
.stream-card__screen:focus-visible .stream-card__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.stream-card__watched {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid rgba(167,232,107, .32);
    border-radius: 6px;
    color: #b8f3d2;
    background: rgba(8, 24, 17, .72);
    backdrop-filter: blur(8px);
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.stream-card__watched svg {
    width: 13px;
    height: 13px;
}

.stream-card.is-watched .stream-card__watched {
    display: inline-flex;
}

.stream-card.is-watched .stream-card__flag {
    display: none;
}

/* Locked episodes: browsable, dimmed, and pointed at the login page. The badge
   sits where the duration does on a playable card, so the row stays even. */
.stream-card--locked .stream-card__screen img {
    filter: saturate(.55) brightness(.62);
}

.stream-card--locked .stream-card__wash {
    background: linear-gradient(180deg, rgba(3,17,16, .35), rgba(3,17,16, .45) 45%, rgba(3,17,16, .85));
}

.stream-card__play--locked {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(8,27,25, .82);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.stream-card__play--locked svg {
    width: 22px;
    height: 22px;
}

.stream-card__lock {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    color: rgba(255, 255, 255, .92);
    background: rgba(4,19,18, .78);
    backdrop-filter: blur(8px);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.stream-card__gate {
    margin-top: 6px;
    color: var(--pink-light);
    font-size: .68rem;
    font-weight: 700;
}

.detailed-map-stop--locked .detailed-map-card__visual img {
    filter: saturate(.55) brightness(.62);
}

.detailed-map-stop--locked .detailed-map-stop__node {
    opacity: .72;
}

.stream-card__body {
    padding: 15px 3px 0;
}

.stream-card__kicker {
    margin-bottom: 7px;
    color: var(--pink-light);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stream-card__body h3 {
    font-size: 1.08rem;
    letter-spacing: -.025em;
}

.stream-card__body h3 a:hover {
    color: var(--pink-light);
}

.stream-card__description {
    display: -webkit-box;
    min-height: 39px;
    margin: 9px 0 11px;
    overflow: hidden;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.stream-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 13px;
    color: #747f8f;
    font-size: .61rem;
    font-weight: 600;
}

.stream-card__meta span {
    position: relative;
}

.stream-card__meta span + span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #596270;
    transform: translateY(-50%);
}

/* Continue player */
.continue-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    min-height: 470px;
    margin-top: 110px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.continue-banner__visual {
    position: relative;
    min-height: 470px;
    overflow: hidden;
}

.continue-banner__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 68%, var(--surface)),
        linear-gradient(0deg, rgba(4,19,18, .55), transparent 50%);
}

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

.continue-banner__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .9);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
    transform: translate(-50%, -50%);
}

.continue-banner__play svg {
    width: 30px;
    height: 30px;
}

.continue-banner__content {
    align-self: center;
    padding: 56px 58px 84px 40px;
}

.continue-banner__content h2 {
    max-width: 450px;
    margin-bottom: 18px;
}

.continue-banner__content > p:not(.section-kicker) {
    max-width: 500px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: .9rem;
}

.watch-progress {
    margin-bottom: 28px;
}

.watch-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
}

.watch-progress strong {
    color: var(--text-soft);
}

.watch-progress__track,
.series-progress__track {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .09);
}

.watch-progress__track i,
.series-progress__track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), var(--pink-light));
    box-shadow: 0 0 14px rgba(255,181,71, .4);
    transition: width .35s ease;
}

/* Season players */
/* Series row */
.series-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 18px;
}

.series-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: inherit;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: border-color .2s ease, transform .2s ease;
}

.series-tile:hover {
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-4px);
}

.series-tile__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a0d12;
}

.series-tile__screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.series-tile:hover .series-tile__screen > img {
    transform: scale(1.035);
}

.series-tile__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,17,16, .06), transparent 44%, rgba(3,17,16, .74));
}

.series-tile__badge {
    position: absolute;
    top: 13px;
    left: 13px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    color: #fff;
    background: rgba(4,19,18, .58);
    backdrop-filter: blur(9px);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Column, not grid: the link sits on the card's bottom edge whatever the
 * description costs, so a row of cards keeps one baseline across the set. */
.series-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px 20px;
}

.series-tile__eyebrow {
    color: var(--pink-light);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.series-tile__body h3 {
    font-size: 1.1rem;
}

.series-tile__copy {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.6;
}

.series-tile__link {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: 4px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--text-soft);
    font-size: .67rem;
    font-weight: 800;
}

.series-tile__link svg {
    width: 16px;
    height: 16px;
}

/*
 * Coming soon.
 *
 * The worlds in production carry working titles, not announcements, so this
 * closes the page with a promise and a way to hear about it and names nothing.
 */
.coming-teaser {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 70px;
    padding: 28px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.coming-teaser__mark {
    display: grid;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(124,231,176, .3);
    border-radius: 16px;
    color: var(--aqua);
    background: rgba(124,231,176, .1);
}

.coming-teaser__mark svg {
    width: 26px;
    height: 26px;
}

.coming-teaser__copy {
    flex: 1 1 auto;
}

.coming-teaser__copy .section-kicker {
    margin-bottom: 7px;
}

.coming-teaser__copy h2 {
    margin-bottom: 8px;
    font-size: clamp(1.4rem, 2.2vw, 1.95rem);
}

.coming-teaser__copy p {
    max-width: 68ch;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.65;
}

.coming-teaser__actions {
    flex: 0 0 auto;
}

.coming-teaser__done {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid rgba(167,232,107, .35);
    border-radius: 999px;
    color: var(--green);
    background: rgba(167,232,107, .1);
    font-size: .72rem;
    font-weight: 800;
}

.coming-teaser__done svg {
    width: 16px;
    height: 16px;
}

.watch-cta {
    position: relative;
    min-height: 430px;
    margin-top: 110px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.watch-cta > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
}

.watch-cta__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4,19,18, .98) 0%, rgba(4,19,18, .78) 40%, rgba(4,19,18, .18) 75%);
}

.watch-cta__content {
    position: relative;
    z-index: 2;
    width: min(550px, 65%);
    padding: 70px 65px;
}

.watch-cta__content > span {
    color: var(--aqua);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.watch-cta__content h2 {
    margin: 13px 0 25px;
    font-size: clamp(2.6rem, 4.5vw, 4.7rem);
    line-height: .95;
}

.watch-cta__status {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 7px;
    color: rgba(255, 255, 255, .8);
    background: rgba(4,19,18, .6);
    backdrop-filter: blur(8px);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.watch-cta__status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(167,232,107, .7);
}

/* Series page */
.series-breadcrumb,
.watch-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
    color: #717b89;
    font-size: .68rem;
    font-weight: 700;
}

.series-breadcrumb svg,
.watch-breadcrumb svg {
    width: 14px;
    height: 14px;
}

.series-breadcrumb a:hover,
.watch-breadcrumb a:hover {
    color: var(--text);
}

.series-breadcrumb strong {
    color: var(--muted-strong);
}

.series-hero {
    position: relative;
    height: 590px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: #072421;
    box-shadow: var(--shadow);
}

.series-hero__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

.series-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,17,16, .96), rgba(3,17,16, .75) 34%, rgba(3,17,16, .12) 72%),
        linear-gradient(0deg, rgba(3,17,16, .92), transparent 38%);
}

.series-hero__copy {
    position: absolute;
    bottom: 48px;
    left: clamp(30px, 5vw, 68px);
    z-index: 3;
    width: min(620px, calc(100% - 70px));
}

.series-hero__copy h1 {
    margin-bottom: 16px;
    font-size: clamp(3.2rem, 5.4vw, 5.8rem);
    line-height: .92;
}

.series-hero__copy > p:not(.live-kicker) {
    max-width: 560px;
    margin: 20px 0 24px;
    color: rgba(235, 238, 243, .78);
    font-size: .92rem;
}

.series-catalog {
    padding-top: 95px;
}

.series-catalog__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.series-catalog__head h2 {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
}

.series-progress {
    width: min(360px, 38vw);
}

.series-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 700;
}

.series-progress strong {
    color: var(--text-soft);
}

/* Dedicated series map */
.map-hero {
    position: relative;
    min-height: 510px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.map-hero__art,
.map-hero__shade {
    position: absolute;
    inset: 0;
}

.map-hero__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% center;
}

.map-hero__shade {
    background:
        linear-gradient(90deg, rgba(3,17,16, .97), rgba(3,17,16, .8) 40%, rgba(3,17,16, .18) 78%),
        linear-gradient(0deg, rgba(3,17,16, .9), transparent 45%);
}

.map-hero__copy {
    position: relative;
    z-index: 2;
    width: min(690px, calc(100% - 80px));
    padding: 68px;
}

.map-hero__copy h1 {
    max-width: 680px;
    margin: 14px 0 20px;
    font-size: clamp(3.25rem, 5.6vw, 5.8rem);
    line-height: .9;
}

.map-hero__copy h1 em {
    color: var(--pink-light);
    font-style: normal;
}

.map-hero__copy > p:not(.live-kicker) {
    max-width: 600px;
    margin-bottom: 19px;
    color: rgba(235, 238, 243, .78);
    font-size: .9rem;
}

.map-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 27px;
}

.map-overview {
    margin-top: 56px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(124,231,176, .08), transparent 35%),
        var(--surface);
    box-shadow: var(--shadow-soft);
}

.map-overview__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 36px;
}

.map-overview__head h2 {
    margin-top: 8px;
    font-size: clamp(2.15rem, 3.8vw, 3.45rem);
}

.map-overview__progress {
    width: min(390px, 40vw);
}

.map-overview__progress > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
}

.map-overview__progress strong {
    color: var(--text-soft);
}

.map-season-nav {
    display: flex;
    gap: 8px;
    margin-top: 26px;
    padding-top: 22px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    scrollbar-width: none;
}

.map-season-nav::-webkit-scrollbar {
    display: none;
}

.map-season-nav a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 15px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .035);
    font-size: .72rem;
    font-weight: 800;
    transition: border-color .2s ease, background-color .2s ease;
}

.map-season-nav a:hover {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, .07);
}

.map-season-nav span {
    display: grid;
    min-width: 23px;
    height: 22px;
    padding-inline: 5px;
    place-items: center;
    border-radius: 99px;
    color: var(--pink-light);
    background: rgba(255,181,71, .1);
    font-size: .57rem;
}

.detailed-map-season {
    padding-top: 95px;
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.detailed-map-season__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 38px;
    margin-bottom: 38px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.detailed-map-season__heading h2 {
    margin: 8px 0 12px;
    font-size: clamp(2.4rem, 4vw, 3.9rem);
}

.detailed-map-season__heading > div:first-child > p:last-child {
    max-width: 650px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: .82rem;
}

.detailed-map-season__status {
    flex: 0 0 auto;
    text-align: right;
}

.detailed-map-season__status span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.detailed-map-season__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 9px rgba(167,232,107, .6);
}

.detailed-map-season__status strong {
    display: block;
    color: var(--text-soft);
    font-size: .7rem;
}

.detailed-map-route {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding: 14px 0 8px;
}

.detailed-map-route::before {
    content: "";
    position: absolute;
    top: 42px;
    bottom: 76px;
    left: calc(50% - 1px);
    width: 2px;
    background: linear-gradient(180deg, var(--pink), rgba(255, 255, 255, .12) 45%, var(--aqua));
    box-shadow: 0 0 18px rgba(255,181,71, .14);
}

.detailed-map-stop {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr);
    align-items: center;
    min-height: 236px;
}

.detailed-map-stop__node {
    z-index: 3;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    width: 64px;
    height: 64px;
    place-items: center;
    justify-self: center;
    border: 5px solid var(--bg);
    border-radius: 50%;
    color: #fff;
    background: var(--pink);
    box-shadow: 0 0 0 1px var(--line-strong), 0 12px 30px rgba(0, 0, 0, .35);
    font-size: .84rem;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease;
}

.detailed-map-stop__node:hover,
.detailed-map-stop__node:focus-visible {
    box-shadow: 0 0 0 1px var(--pink-light), 0 12px 34px rgba(255,181,71, .25);
    transform: scale(1.06);
}

.detailed-map-stop__node svg {
    display: none;
    width: 25px;
    height: 25px;
}

.detailed-map-stop__node.is-complete {
    color: #06140e;
    background: var(--green);
}

.detailed-map-stop__node.is-complete span {
    display: none;
}

.detailed-map-stop__node.is-complete svg {
    display: block;
}

.detailed-map-card {
    display: grid;
    grid-row: 1;
    grid-template-columns: 190px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: border-color .2s ease, transform .24s ease, box-shadow .24s ease;
}

.detailed-map-stop:nth-child(odd) .detailed-map-card {
    grid-column: 1;
}

.detailed-map-stop:nth-child(even) .detailed-map-card {
    grid-column: 3;
}

.detailed-map-stop:nth-child(odd) .detailed-map-card:hover {
    transform: translateX(-5px);
}

.detailed-map-stop:nth-child(even) .detailed-map-card:hover {
    transform: translateX(5px);
}

.detailed-map-card:hover,
.detailed-map-card:focus-visible {
    border-color: var(--line-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}

.detailed-map-stop.is-watched .detailed-map-card {
    border-color: rgba(167,232,107, .38);
}

.detailed-map-card__visual {
    position: relative;
    min-height: 236px;
    overflow: hidden;
}

.detailed-map-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.detailed-map-card:hover .detailed-map-card__visual img {
    transform: scale(1.04);
}

.detailed-map-card__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4,19,18, .42), transparent 55%);
}

.detailed-map-card__play {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .9);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.detailed-map-card__play svg {
    width: 20px;
    height: 20px;
}

.detailed-map-card__body {
    display: flex;
    min-width: 0;
    padding: 22px;
    flex-direction: column;
}

.detailed-map-card__kicker {
    color: var(--pink-light);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.detailed-map-stop:nth-child(even) .detailed-map-card__kicker {
    color: var(--aqua);
}

.detailed-map-card__body > strong {
    margin: 8px 0 10px;
    color: var(--text);
    font-size: 1.12rem;
    line-height: 1.18;
}

.detailed-map-card__description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.detailed-map-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 13px;
    color: #778291;
    font-size: .58rem;
    font-weight: 600;
}

.detailed-map-card__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--text-soft);
    font-size: .63rem;
    font-weight: 800;
}

.detailed-map-card__action svg {
    width: 16px;
    height: 16px;
}

.detailed-map-finish {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    align-self: center;
    gap: 12px;
    margin-top: 4px;
    padding: 14px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.detailed-map-finish img {
    border-radius: 12px;
}

.detailed-map-finish span {
    display: grid;
}

.detailed-map-finish strong {
    font-size: .76rem;
}

.detailed-map-finish small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .61rem;
}

.map-endcap {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 34px;
    margin-top: 105px;
    padding: 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 0 100%, rgba(255,181,71, .11), transparent 40%),
        var(--surface);
    box-shadow: var(--shadow);
}

.map-endcap h2 {
    margin: 7px 0 11px;
    font-size: clamp(2rem, 3.4vw, 3.25rem);
}

.map-endcap > div:first-child > p:last-child {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: .78rem;
}

.map-endcap__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
}

.season-filters {
    position: sticky;
    top: calc(var(--header-height) + 10px);
    z-index: 20;
    display: flex;
    gap: 8px;
    margin-bottom: 54px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(10,32,30, .86);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
    backdrop-filter: blur(18px);
}

.season-filters button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    font-size: .72rem;
    font-weight: 800;
}

.season-filters button span {
    display: grid;
    min-width: 23px;
    height: 21px;
    padding-inline: 5px;
    place-items: center;
    border-radius: 99px;
    color: #818b99;
    background: rgba(255, 255, 255, .06);
    font-size: .56rem;
}

.season-filters button:hover,
.season-filters button.is-active {
    border-color: var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, .06);
}

.season-filters button.is-active {
    box-shadow: inset 0 -2px 0 var(--pink);
}

.series-season {
    scroll-margin-top: 155px;
}

.series-season + .series-season {
    padding-top: 95px;
}

.series-season__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 27px;
    padding-bottom: 21px;
    border-bottom: 1px solid var(--line);
}

.series-season__heading > div:first-child > span {
    color: var(--pink-light);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.series-season:nth-of-type(even) .series-season__heading > div:first-child > span {
    color: var(--aqua);
}

.series-season__heading h3 {
    margin: 8px 0 9px;
    font-size: 1.8rem;
}

.series-season__heading p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
}

.season-status {
    text-align: right;
}

.season-status span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.season-status span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 9px rgba(167,232,107, .6);
}

.season-status strong {
    display: block;
    color: var(--text-soft);
    font-size: .68rem;
}

.series-endcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 95px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.series-endcap > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.series-endcap img {
    border-radius: 14px;
}

.series-endcap span {
    display: grid;
}

.series-endcap small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .7rem;
}

.coming-player {
    padding-top: 90px;
}

.coming-player__screen {
    position: relative;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: #092724;
    box-shadow: var(--shadow);
}

.coming-player__screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.7) brightness(.65);
}

.coming-player__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4,19,18, .8), transparent 60%);
}

.coming-player__badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--text-soft);
    background: rgba(4,19,18, .62);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.coming-player__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    transform: translate(-50%, -50%);
}

.coming-player__play svg {
    width: 31px;
    height: 31px;
}

/* Watch page */
.watch-breadcrumb {
    justify-content: flex-start;
    gap: 13px;
}

.watch-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    color: var(--muted-strong);
}

.watch-breadcrumb > span {
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: rgba(255, 255, 255, .03);
    font-size: .58rem;
    text-transform: uppercase;
}

.watch-stage {
    margin-top: 17px;
}

.watch-player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: #000;
    box-shadow: var(--shadow);
    isolation: isolate;
}

.watch-page--portrait .watch-player {
    aspect-ratio: auto;
    min-height: min(76vh, 820px);
}

.watch-player__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity .25s ease;
}

.watch-player::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%, transparent 70%, rgba(0, 0, 0, .3));
    transition: opacity .2s ease;
}

.video-player {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.watch-page--portrait .video-player {
    max-height: min(76vh, 820px);
}

.watch-player__topbar {
    position: absolute;
    top: 18px;
    right: 20px;
    left: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    /* Kept clear of the top-left corner: iOS puts its expand button there. */
    justify-content: flex-end;
    pointer-events: none;
}

.watch-player__topmeta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.watch-player__topmeta small,
.watch-player__topmeta b {
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 5px;
    color: rgba(255, 255, 255, .8);
    background: rgba(3,17,16, .5);
    font-size: .55rem;
}

.watch-player.is-playing .watch-player__poster,
.watch-player.is-playing::after {
    opacity: 0;
    pointer-events: none;
}

.watch-player__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 8;
    display: grid;
    gap: 10px;
    justify-items: center;
    /* Sits directly over the centre play button, so it must never take taps. */
    pointer-events: none;
    padding: 15px 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 11px;
    color: rgba(255, 255, 255, .72);
    background: rgba(3,17,16, .72);
    backdrop-filter: blur(10px);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.watch-player__loading > span {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, .16);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spinner .8s linear infinite;
}

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

.watch-player__signal {
    position: absolute;
    right: 18px;
    bottom: 60px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    color: rgba(255, 255, 255, .72);
    background: rgba(3,17,16, .55);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.watch-player__signal i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(167,232,107, .65);
}

.watch-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 50px;
    padding-top: 38px;
}

.watch-details__main {
    padding: 13px 0;
}

.watch-details__main h1 {
    max-width: 820px;
    margin-bottom: 16px;
    font-size: clamp(2.35rem, 4.4vw, 4.6rem);
}

.watch-details__description {
    max-width: 820px;
    margin: 23px 0 18px;
    color: var(--muted-strong);
    font-size: .9rem;
    line-height: 1.75;
}

.watch-details__cast {
    display: flex;
    gap: 12px;
    margin: 0;
    color: var(--text-soft);
    font-size: .74rem;
}

.watch-details__cast span {
    color: var(--muted);
}

.up-next {
    display: grid;
    grid-template-columns: 145px 1fr;
    align-items: center;
    align-self: start;
    gap: 16px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.up-next__label {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.up-next__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #090c10;
}

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

.up-next__screen > span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .85);
    transform: translate(-50%, -50%);
}

.up-next__screen svg {
    width: 17px;
    height: 17px;
}

.up-next__screen small,
.up-next__screen b {
    position: absolute;
    bottom: 6px;
    padding: 2px 4px;
    border-radius: 3px;
    color: #fff;
    background: rgba(3,17,16, .72);
    font-size: .45rem;
}

.up-next__screen small {
    left: 6px;
}

.up-next__screen b {
    right: 6px;
}

.up-next__copy {
    min-width: 0;
}

.up-next__copy > span {
    color: var(--pink-light);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.up-next__copy strong {
    display: block;
    margin: 5px 0 12px;
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-next__copy a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-soft);
    font-size: .64rem;
    font-weight: 800;
}

.up-next__copy a svg {
    width: 15px;
    height: 15px;
}

.up-next__complete {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 13px;
}

.up-next__complete img {
    border-radius: 13px;
}

.up-next__complete span {
    display: grid;
}

.up-next__complete small {
    margin-top: 4px;
    color: var(--muted);
    font-size: .66rem;
}

.watch-season-progress {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    padding: 21px 23px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(14,38,35, .72);
}

.watch-season-progress > div:first-child {
    display: grid;
    gap: 3px;
}

.watch-season-progress > div:first-child span {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.watch-season-progress > div:first-child strong {
    color: var(--text-soft);
    font-size: .7rem;
}

.watch-season-progress__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.watch-season-progress__dots a {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
    font-size: .6rem;
    font-weight: 800;
}

.watch-season-progress__dots a:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.watch-season-progress__dots a.is-complete {
    border-color: rgba(167,232,107, .3);
    color: #b8f3d2;
    background: rgba(167,232,107, .08);
}

.watch-season-progress__dots a.is-current {
    border-color: var(--pink);
    color: #fff;
    background: rgba(255,181,71, .16);
    box-shadow: 0 0 0 3px rgba(255,181,71, .08);
}

.watch-season-progress > p {
    margin: 0;
    color: var(--muted);
    font-size: .65rem;
}

.watch-season-progress > p.is-complete {
    color: var(--green);
}

.episode-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.episode-navigation__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    transition: border-color .2s ease, background-color .2s ease;
}

.episode-navigation__item:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
}

.episode-navigation__item > svg {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    color: var(--muted);
}

.episode-navigation__item > span {
    display: grid;
    min-width: 0;
}

.episode-navigation__item small {
    color: var(--muted);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.episode-navigation__item strong {
    margin-top: 4px;
    overflow: hidden;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode-navigation__item--next {
    justify-content: flex-end;
    text-align: right;
}

.watch-more {
    padding-top: 95px;
}

/* Cast */
.cast-hero {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 58px;
    min-height: 590px;
    padding-top: 45px;
}

.cast-hero__copy h1 {
    max-width: 630px;
    margin-bottom: 22px;
    font-size: clamp(3.2rem, 5vw, 5.7rem);
    line-height: .94;
}

.cast-hero__copy > p:not(.live-kicker) {
    max-width: 520px;
    margin-bottom: 28px;
    color: var(--muted-strong);
    font-size: .92rem;
    line-height: 1.75;
}

.cast-hero__actions {
    align-items: center;
}

.cast-hero__actions > span {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-left: 8px;
}

.cast-hero__actions > span strong {
    color: var(--aqua);
    font-size: 1.55rem;
}

.cast-hero__actions > span small {
    color: var(--muted);
    font-size: .63rem;
}

.cast-hero__screen {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: #0d302c;
    box-shadow: var(--shadow);
}

.cast-hero__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
    filter: saturate(.8) brightness(.7);
}

.cast-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,19,18, .08), transparent 45%, rgba(4,19,18, .88)),
        linear-gradient(90deg, rgba(4,19,18, .26), transparent 55%);
}

.cast-hero__portraits {
    position: absolute;
    right: 7%;
    bottom: 46px;
    left: 7%;
    display: flex;
    align-items: end;
    justify-content: center;
}

.cast-hero__portraits span {
    position: relative;
    width: 34%;
    aspect-ratio: 4 / 5;
    margin-inline: -3%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .15);
    border-radius: 50% 50% 42% 42%;
    background: linear-gradient(180deg, rgba(124,231,176, .18), rgba(255,181,71, .12));
    box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
}

.cast-hero__portraits span:nth-child(2) {
    z-index: 2;
    width: 38%;
}

.cast-hero__portraits img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.cast-hero__label {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--text-soft);
    background: rgba(4,19,18, .6);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cast-hero__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .9);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .36);
    transform: translate(-50%, -50%);
}

.cast-hero__play svg {
    width: 28px;
    height: 28px;
}

.cast-hero__chrome {
    position: absolute;
    right: 13px;
    bottom: 11px;
    left: 13px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .82);
}

.cast-hero__chrome svg {
    width: 17px;
    height: 17px;
}

.cast-hero__chrome i {
    height: 3px;
    flex: 1;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--pink) 8%, rgba(255, 255, 255, .24) 8%);
}

.cast-hero__chrome small {
    color: var(--muted-strong);
    font-size: .55rem;
}

.cast-hero__chrome b {
    padding: 2px 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 3px;
    font-size: .5rem;
}

.cast-library {
    padding-top: 85px;
}

/* Series headings on the cast page. Added when the cast grew from the nine
   oasis characters to twenty-five across five shows - without a divider the
   grid reads as one undifferentiated wall. */
.cast-series {
    margin: 38px 0 18px;
}

.cast-series:first-of-type {
    margin-top: 8px;
}

.cast-series__title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.24rem;
    letter-spacing: 0.01em;
}

.cast-series__title span {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.62;
    white-space: nowrap;
}

.cast-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.cast-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: border-color .2s ease, transform .2s ease;
}

.cast-card:hover,
.cast-card.is-open {
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-4px);
}

.cast-card__visual {
    position: relative;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 110%, rgba(255,181,71, .28), transparent 47%),
        linear-gradient(155deg, #1d2631, #0a2b27);
}

.cast-card:nth-child(3n + 2) .cast-card__visual {
    background:
        radial-gradient(circle at 50% 110%, rgba(124,231,176, .24), transparent 47%),
        linear-gradient(155deg, #17282b, #0a2b27);
}

.cast-card:nth-child(3n) .cast-card__visual {
    background:
        radial-gradient(circle at 50% 110%, rgba(255, 208, 106, .22), transparent 47%),
        linear-gradient(155deg, #29251d, #0a2b27);
}

.cast-card__visual > img {
    position: absolute;
    inset: 3% 10% 0;
    width: 80%;
    height: 97%;
    object-fit: contain;
    object-position: center bottom;
    transition: transform .3s ease;
}

.cast-card:hover .cast-card__visual > img {
    transform: scale(1.035);
}

.cast-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,20,19, .78), transparent 42%);
}

.cast-card__index {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    color: rgba(255, 255, 255, .35);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.cast-card__status {
    position: absolute;
    right: 13px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .65);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cast-card__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(167,232,107, .7);
}

.cast-card__body {
    padding: 22px;
}

.cast-card__body > span {
    color: var(--pink-light);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cast-card:nth-child(3n + 2) .cast-card__body > span {
    color: var(--aqua);
}

.cast-card__body h3 {
    margin: 5px 0 9px;
    font-size: 1.5rem;
}

.cast-card__body > p {
    min-height: 38px;
    margin-bottom: 17px;
    color: var(--muted);
    font-size: .69rem;
}

.cast-card__body > button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--muted-strong);
    background: transparent;
    font-size: .65rem;
    font-weight: 800;
}

.cast-card__body > button svg {
    width: 17px;
    height: 17px;
    transition: transform .2s ease;
}

.cast-card.is-open .cast-card__body > button svg {
    transform: rotate(180deg);
}

.cast-card__profile {
    padding-top: 18px;
}

.cast-card__profile dl {
    display: grid;
    gap: 11px;
    margin: 0;
}

.cast-card__profile dl > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
}

.cast-card__profile dt {
    color: #747f8f;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cast-card__profile dd {
    margin: 0;
    color: var(--text-soft);
    font-size: .63rem;
}

.cast-watch-strip {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 360px;
    margin-top: 95px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.cast-watch-strip__screen {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.cast-watch-strip__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 68%, var(--surface)), linear-gradient(0deg, rgba(4,19,18, .52), transparent 55%);
}

.cast-watch-strip__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cast-watch-strip__screen > span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,181,71, .9);
    transform: translate(-50%, -50%);
}

.cast-watch-strip__screen svg {
    width: 28px;
    height: 28px;
}

.cast-watch-strip__content {
    align-self: center;
    padding: 45px 50px 70px 35px;
}

.cast-watch-strip__content h2 {
    max-width: 480px;
    margin-bottom: 24px;
}

.cast-watch-strip__chrome {
    position: absolute;
    right: 18px;
    bottom: 15px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 33px;
    padding: 8px 10px;
    border-radius: 7px;
    background: rgba(4,19,18, .72);
}

.cast-watch-strip__chrome i {
    height: 3px;
    flex: 1;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--pink) 4%, rgba(255, 255, 255, .23) 4%);
}

.cast-watch-strip__chrome small {
    color: var(--muted);
    font-size: .55rem;
}

.cast-watch-strip__chrome b {
    padding: 2px 4px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    font-size: .5rem;
}

/* Authentication */
.auth-container {
    display: grid;
    min-height: calc(100vh - var(--header-height) - 160px);
    padding: 70px 24px;
    place-items: center;
}

.auth-card {
    position: relative;
    width: min(100%, 480px);
    padding: 40px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(255,181,71, .12), transparent 40%),
        var(--surface);
    box-shadow: var(--shadow);
}

.auth-card::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
    border-radius: 15px;
    background: url("/assets/images/brand/hikaya-watch-mark.svg") center / contain no-repeat;
}

.auth-title {
    margin-bottom: 8px;
    font-size: 2.2rem;
}

.auth-subtitle {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: .8rem;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted-strong);
    font-size: .68rem;
    font-weight: 800;
}

.form-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: rgba(4,19,18, .65);
}

.form-input::placeholder {
    color: #596270;
}

.form-input:focus {
    border-color: rgba(124,231,176, .5);
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .68rem;
}

.checkbox-label input {
    accent-color: var(--pink);
}

.link-muted,
.link-accent {
    color: var(--muted-strong);
    font-size: .68rem;
    font-weight: 700;
}

.link-accent {
    color: var(--pink-light);
}

.auth-footer {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    text-align: center;
}

/* Legacy API catalog cards */
.video-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.video-card__thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #072421;
}

.video-card__thumbnail img,
.video-card__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card__body {
    padding: 16px;
}

.video-card__title {
    margin-bottom: 8px;
    font-size: 1rem;
}

.video-card__desc,
.video-card__category {
    color: var(--muted);
    font-size: .7rem;
}

.video-card__link {
    position: absolute;
    inset: 0;
}

/* Legal pages */
.legal-page {
    max-width: 820px;
    padding-block: clamp(52px, 7vw, 84px) clamp(80px, 9vw, 120px);
}

.legal-page__header {
    margin-bottom: 42px;
}

.legal-page__header h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -.035em;
    line-height: 1.12;
}

.legal-page__document {
    min-width: 0;
}

.legal-page__introduction {
    margin-bottom: 38px;
}

.legal-page__introduction p:last-child,
.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-page__introduction p {
    color: #c6ccd4;
    font-size: .95rem;
    line-height: 1.8;
}

.legal-section {
    scroll-margin-top: 116px;
    margin-bottom: 34px;
}

.legal-section h2 {
    margin-bottom: 14px;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: .01em;
}

.legal-section p,
.legal-section li {
    color: #aeb5bf;
    font-size: .9rem;
    line-height: 1.8;
}

.legal-section p {
    margin-bottom: 16px;
}

.legal-section ul {
    margin: 2px 0 18px;
    padding-left: 24px;
}

.legal-page__operator {
    margin: 48px 0 0;
    color: var(--text);
    font-size: .9rem;
}

.legal-page__copyright {
    margin: 28px 0 0;
    color: var(--muted);
    font-size: .72rem;
}

@media (max-width: 560px) {
    .legal-page {
        padding-top: 42px;
    }

    .legal-page__header h1 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
    }

    .legal-page__introduction p,
    .legal-section p,
    .legal-section li {
        font-size: .84rem;
    }
}

/* Footer and feedback */
.site-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    background: #080a0e;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 40px;
    min-height: 120px;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-footer__brand img {
    border-radius: 13px;
}

.site-footer__brand span {
    display: grid;
}

.site-footer__brand strong {
    font-size: .82rem;
}

.site-footer__brand small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .6rem;
}

.site-footer nav {
    display: flex;
    gap: 22px;
}

.site-footer nav a,
.site-footer__inner > p {
    margin: 0;
    color: #737d8b;
    font-size: .62rem;
    font-weight: 700;
}

.site-footer nav a:hover {
    color: var(--text);
}

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    color: var(--text);
    background: rgba(14,38,35, .86);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    backdrop-filter: blur(12px);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top svg {
    width: 21px;
    height: 21px;
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 110;
    max-width: min(420px, calc(100% - 36px));
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--text-soft);
    background: rgba(14,38,35, .94);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 15px);
    transition: opacity .2s ease, transform .2s ease;
    backdrop-filter: blur(14px);
    font-size: .72rem;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Tablet */
@media (max-width: 1100px) {
    :root {
        --shell: 960px;
    }

    .site-header__inner {
        gap: 25px;
    }

    .stream-hero {
        min-height: 590px;
    }

    .stream-hero__art {
        object-position: 65% center;
    }

    .stream-hero__shade {
        background:
            linear-gradient(90deg, rgba(3,17,16, .95), rgba(3,17,16, .72) 42%, rgba(3,17,16, .16) 80%),
            linear-gradient(0deg, rgba(3,17,16, .92), transparent 40%);
    }

    .series-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .episode-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }

    .watch-details {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 30px;
    }

    .watch-season-progress {
        grid-template-columns: 180px 1fr;
    }

    .watch-season-progress > p {
        grid-column: 1 / -1;
    }

    .cast-hero {
        gap: 35px;
    }

    .cast-hero__copy h1 {
        font-size: clamp(3rem, 5vw, 4.8rem);
    }
}

/* Mobile navigation and stacked layouts */
@media (max-width: 820px) {
    :root {
        --header-height: 68px;
        --radius-xl: 22px;
    }

    .section-shell {
        width: min(calc(100% - 30px), var(--shell));
    }

    .site-header__inner {
        width: calc(100% - 28px);
        min-height: var(--header-height);
        /* Only the switch-to-burger gap is visible here: the brand-to-switch one
           sits inside the auto margin. */
        gap: 10px;
    }

    .brand > img {
        width: 39px;
        height: 39px;
    }

    .brand__wordmark strong {
        font-size: 1.02rem;
    }

    .brand__wordmark--univeome {
        font-size: 1.02rem;
    }

    .brand__wordmark em {
        font-size: .62rem;
    }

    .nav-toggle {
        display: block;
        /* The switch below claims the free space for both of them. Leaving the
           burger's own auto margin in place made the two share it, which parked
           the switch in the middle of the header instead of beside the burger. */
        margin-right: 0;
        margin-left: 0;
    }

    .language-switch {
        order: 0;
        margin-inline-start: auto;
    }

    .language-switch > summary {
        min-height: 32px;
        padding: 4px 9px;
    }

    /*
     * Line the popover up with the page gutter rather than with its own chip.
     * Anchored to the chip it stopped level with nothing — the burger sitting
     * outside it and the content below running past it. The offset is the two
     * things between the chip and the edge: the burger and the flex gap.
     */
    .language-switch__menu {
        right: calc(-1 * (44px + 10px));
    }

    .header-panel {
        position: absolute;
        top: calc(100% - 2px);
        right: 14px;
        left: 14px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border: 1px solid var(--line-strong);
        border-radius: 15px;
        background: rgba(9,30,28, .97);
        box-shadow: var(--shadow);
        backdrop-filter: blur(20px);
    }

    .header-panel.is-open {
        display: flex;
    }

    .site-nav {
        display: grid;
    }

    .site-nav a {
        padding: 12px;
    }

    .site-nav a::after {
        display: none;
    }

    .header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: 13px;
        border-top: 1px solid var(--line);
    }

    .account-name,
    .access-chip {
        grid-column: 1 / -1;
    }

    /* Band layout, as on the series heroes — see the note there. */
    .stream-hero {
        display: flex;
        width: calc(100% - 20px);
        height: auto;
        min-height: 0;
        flex-direction: column;
        margin-top: 8px;
        background: var(--surface);
    }

    /* The inset vignette is drawn for a full-bleed hero; over a band layout it
       only muddies the copy sitting on solid ground below the art. */
    .stream-hero::after {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    }

    .stream-hero__art {
        position: static;
        height: 300px;
        flex: 0 0 auto;
        object-position: center;
        transform: none;
    }

    .stream-hero__shade {
        inset: 0 0 auto;
        height: 300px;
        background: linear-gradient(180deg, rgba(3,17,16, .38), transparent 34%, transparent 56%, var(--surface));
    }

    .stream-hero__topline,
    .series-hero__topbar {
        top: 16px;
        right: 16px;
        left: 16px;
    }

    .coming-teaser {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        padding: 24px;
    }

    .coming-teaser__actions .button {
        width: 100%;
        justify-content: center;
    }

    .stream-hero__content {
        position: static;
        width: auto;
        padding: 4px 23px 36px;
    }

    .stream-hero__content h1 {
        font-size: clamp(3.35rem, 13vw, 5.2rem);
    }

    .stream-hero__description {
        display: -webkit-box;
        margin: 16px 0 20px;
        overflow: hidden;
        font-size: .82rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .hero-play {
        display: none;
    }

    .streaming-proof__inner {
        justify-content: flex-start;
        gap: 28px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .streaming-proof__inner::-webkit-scrollbar {
        display: none;
    }

    .streaming-proof__inner span {
        flex: 0 0 auto;
    }

    .content-section {
        padding-top: 75px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .section-heading__note {
        max-width: 100%;
    }

    .episode-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .continue-banner {
        grid-template-columns: 1fr;
        margin-top: 80px;
    }

    .continue-banner__visual {
        min-height: 360px;
    }

    .continue-banner__visual::after {
        background: linear-gradient(0deg, var(--surface), transparent 55%);
    }

    .continue-banner__content {
        padding: 10px 28px 80px;
    }

    .watch-cta {
        min-height: 430px;
        margin-top: 80px;
    }

    .watch-cta > img {
        object-position: 72% center;
    }

    .watch-cta__shade {
        background: linear-gradient(0deg, rgba(4,19,18, .98), rgba(4,19,18, .62) 60%, rgba(4,19,18, .14));
    }

    .watch-cta__content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        padding: 35px 28px;
    }

    /*
     * Phones get the art as a band with the copy underneath, not as a backdrop
     * behind it. Overlaying was costing the image twice: a 16:9 poster in a
     * portrait box is cropped to a ~29% vertical strip, and the copy then
     * covered most of what survived, which is how a hero of two robots came out
     * as a houseplant. A 370x292 band crops to ~69% of the frame and nothing
     * sits on top of it.
     */
    .series-hero {
        display: flex;
        width: calc(100% - 20px);
        height: auto;
        flex-direction: column;
        background: var(--surface);
    }

    .series-hero__art {
        position: static;
        height: 292px;
        flex: 0 0 auto;
        object-position: center 42%;
    }

    .series-hero__shade {
        inset: 0 0 auto;
        height: 292px;
        background: linear-gradient(180deg, rgba(3,17,16, .38), transparent 34%, transparent 56%, var(--surface));
    }

    .series-hero__copy {
        position: static;
        width: auto;
        padding: 2px 23px 34px;
    }

    .series-hero__copy h1 {
        font-size: clamp(3.15rem, 12vw, 5rem);
    }

    .series-catalog {
        padding-top: 75px;
    }

    .series-catalog__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .series-progress {
        width: 100%;
    }

    .map-hero {
        min-height: 560px;
    }

    .map-hero__copy {
        width: min(650px, calc(100% - 50px));
        padding: 54px;
    }

    .map-overview__head,
    .detailed-map-season__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .map-overview__progress {
        width: 100%;
    }

    .detailed-map-season__status {
        text-align: left;
    }

    .detailed-map-stop {
        grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
    }

    .detailed-map-card {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .detailed-map-card__body {
        padding: 18px;
    }

    .detailed-map-card__visual {
        min-height: 224px;
    }

    .map-endcap {
        align-items: flex-start;
        flex-direction: column;
    }

    .season-filters {
        top: calc(var(--header-height) + 6px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .season-filters::-webkit-scrollbar {
        display: none;
    }

    .season-filters button {
        flex: 0 0 auto;
    }

    .series-season__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .map-hero {
        display: flex;
        width: calc(100% - 20px);
        min-height: 0;
        flex-direction: column;
    }

    .map-hero__art {
        position: static;
        height: 262px;
        flex: 0 0 auto;
        object-position: center 42%;
    }

    .map-hero__shade {
        inset: 0 0 auto;
        height: 262px;
        background: linear-gradient(180deg, rgba(3,17,16, .38), transparent 34%, transparent 56%, var(--surface));
    }

    .map-hero__copy {
        position: static;
        width: auto;
        padding: 6px 26px 34px;
    }

    .map-hero__copy h1 {
        font-size: clamp(3.1rem, 12vw, 5rem);
    }

    .map-overview {
        margin-top: 46px;
        padding: 24px;
    }

    .detailed-map-season {
        padding-top: 76px;
    }

    .detailed-map-route {
        gap: 30px;
    }

    .detailed-map-route::before {
        top: 34px;
        bottom: 70px;
        left: 31px;
    }

    .detailed-map-stop {
        display: block;
        min-height: 0;
        padding-left: 82px;
    }

    .detailed-map-stop__node {
        position: absolute;
        top: 28px;
        left: 0;
        width: 62px;
        height: 62px;
    }

    .detailed-map-stop:nth-child(n) .detailed-map-card {
        display: grid;
        transform: none;
    }

    .detailed-map-card {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .detailed-map-finish {
        align-self: flex-start;
        margin-left: 82px;
    }

    .season-status {
        text-align: left;
    }

    .watch-player {
        border-radius: 16px;
    }


    .watch-player__signal {
        display: none;
    }

    .watch-details {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .watch-season-progress {
        grid-template-columns: 1fr;
    }

    .watch-season-progress > p {
        grid-column: auto;
    }

    .episode-navigation {
        grid-template-columns: 1fr;
    }

    .cast-hero {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 55px;
    }

    .cast-hero__copy h1 {
        font-size: clamp(3.2rem, 11vw, 5rem);
    }

    .cast-hero__screen {
        aspect-ratio: 16 / 11;
    }

    .cast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cast-watch-strip {
        grid-template-columns: 1fr;
    }

    .cast-watch-strip__screen {
        min-height: 330px;
    }

    .cast-watch-strip__screen::after {
        background: linear-gradient(0deg, var(--surface), transparent 55%);
    }

    .cast-watch-strip__content {
        padding: 5px 28px 70px;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-block: 32px;
    }

    .site-footer nav {
        flex-wrap: wrap;
    }
}

/* Small phones */
@media (max-width: 560px) {
    .site-main {
        padding-bottom: 85px;
    }

    .brand__wordmark em {
        display: none;
    }

    .stream-hero {
        border-radius: 18px;
    }

    .stream-hero__art,
    .stream-hero__shade {
        height: 256px;
    }

    .stream-hero__actions,
    .series-hero__actions,
    .map-hero__actions,
    .cast-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .stream-hero__actions .button,
    .series-hero__actions .button,
    .map-hero__actions .button,
    .cast-hero__actions .button {
        width: 100%;
    }

    .stream-hero__content h1 {
        font-size: clamp(3rem, 15vw, 4.4rem);
    }

    .stream-hero__description {
        -webkit-line-clamp: 2;
    }

    .title-meta {
        gap: 6px 9px;
        font-size: .67rem;
    }

    .series-tile-grid {
        grid-template-columns: 1fr;
    }

    .episode-grid--four,
    .episode-grid--three {
        grid-template-columns: 1fr;
    }

    .stream-card__screen {
        border-radius: 12px;
    }

    .continue-banner {
        border-radius: 18px;
    }

    .continue-banner__visual {
        min-height: 255px;
    }

    .continue-banner__play {
        width: 58px;
        height: 58px;
    }

    .continue-banner__content {
        padding-inline: 21px;
    }

    .watch-cta {
        min-height: 390px;
        border-radius: 18px;
    }

    .watch-cta__content h2 {
        font-size: 2.65rem;
    }

    .series-breadcrumb {
        overflow: hidden;
        white-space: nowrap;
    }

    .series-breadcrumb strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .series-hero {
        border-radius: 18px;
    }

    .series-hero__art,
    .series-hero__shade {
        height: 250px;
    }

    .series-hero__copy h1 {
        font-size: clamp(2.8rem, 14vw, 4.3rem);
    }

    .series-hero__copy > p:not(.live-kicker) {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .map-hero {
        border-radius: 18px;
    }

    .map-hero__art,
    .map-hero__shade {
        height: 228px;
    }

    .map-hero__copy {
        padding: 6px 21px 30px;
    }

    .map-hero__copy h1 {
        font-size: clamp(2.8rem, 14vw, 4.2rem);
    }

    .map-hero__copy > p:not(.live-kicker) {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .map-overview {
        padding: 21px;
        border-radius: 18px;
    }

    .map-overview__head h2,
    .detailed-map-season__heading h2 {
        font-size: 2.3rem;
    }

    .detailed-map-route::before {
        left: 25px;
    }

    .detailed-map-stop {
        padding-left: 62px;
    }

    .detailed-map-stop__node {
        top: 24px;
        width: 52px;
        height: 52px;
        border-width: 4px;
    }

    .detailed-map-card {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .detailed-map-card__visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .detailed-map-card__body {
        padding: 20px;
    }

    .detailed-map-card__description {
        -webkit-line-clamp: 4;
    }

    .detailed-map-finish {
        margin-left: 62px;
    }

    .map-endcap {
        margin-top: 80px;
        padding: 25px;
        border-radius: 18px;
    }

    .map-endcap__actions {
        width: 100%;
        flex-direction: column;
    }

    .map-endcap__actions .button {
        width: 100%;
    }

    .series-endcap {
        align-items: stretch;
        flex-direction: column;
    }

    .coming-player__screen {
        aspect-ratio: 16 / 10;
        border-radius: 18px;
    }

    .watch-breadcrumb > span {
        display: none;
    }

    .watch-stage {
        width: 100%;
    }

    .watch-player {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .watch-player__topbar {
        top: 10px;
        right: 10px;
        left: 10px;
    }



    .watch-details__main h1 {
        font-size: clamp(2.2rem, 11vw, 3.4rem);
    }

    .up-next {
        grid-template-columns: 120px 1fr;
        padding: 15px;
    }

    .watch-season-progress__dots a {
        width: 28px;
        height: 28px;
    }

    .cast-hero__copy h1 {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .cast-hero__actions > span {
        margin: 5px 0 0;
        justify-content: center;
    }

    .cast-grid {
        grid-template-columns: 1fr;
    }

    .cast-hero__screen,
    .cast-watch-strip {
        border-radius: 18px;
    }

    .cast-watch-strip__screen {
        min-height: 260px;
    }

    .auth-card {
        padding: 30px 22px;
        border-radius: 17px;
    }

    .form-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
}

/* Phone held sideways.
 *
 * A landscape phone viewport is only ~320-380px tall, and a full-width 16:9
 * player is 300-440px tall, so the bottom of the frame always fell below the
 * fold: measured on every iPhone from SE to 15 Pro Max, the player was 95-118%
 * of the screen height and cut off by 115-203px. Sizing it from the width is
 * what breaks; here it is sized from the height that is actually free, and the
 * width follows from the aspect ratio.
 *
 * svh rather than vh: on iOS vh reports the viewport with the browser bars
 * hidden, which overestimates the space while they are showing. svh is the
 * conservative constant, so the frame fits in both states without resizing as
 * the bars collapse. */
@media (orientation: landscape) and (max-height: 560px) {
    .watch-breadcrumb {
        padding-top: 10px;
        padding-bottom: 2px;
    }

    .watch-stage {
        margin-top: 0;
    }

    .watch-player {
        /* Reserves the sticky header plus the trimmed breadcrumb. Sized for the
           tallest case: above 820px the wide-screen header applies, which is
           several pixels taller than the compact one, and an XR-class handset
           in landscape is wide enough to get it. */
        max-width: calc((100vh - 116px) * 16 / 9);
        max-width: calc((100svh - 116px) * 16 / 9);
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}