:root {
    --bg: #07090d;
    --bg-soft: #0b0e14;
    --surface: #11151c;
    --surface-raised: #171c25;
    --surface-hover: #1d2430;
    --text: #f7f8fb;
    --text-soft: #d2d7df;
    --muted: #8f99a8;
    --muted-strong: #aeb6c2;
    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .18);
    --pink: #ff3d70;
    --pink-light: #ff708d;
    --pink-dark: #ce2354;
    --aqua: #58dfd2;
    --aqua-dark: #1fa99e;
    --green: #65dfa1;
    --amber: #ffd06a;
    --danger: #ff6b7c;
    --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(7, 9, 13, .96), rgba(7, 9, 13, .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(7, 9, 13, .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, 61, 112, .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;
}

.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;
}

.language-chip,
.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;
}

.language-chip__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aqua);
    box-shadow: 0 0 0 4px rgba(88, 223, 210, .1);
}

.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(88, 223, 210, .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, 61, 112, .24);
}

.button--primary:hover,
.btn-primary:hover {
    box-shadow: 0 16px 38px rgba(255, 61, 112, .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(101, 223, 161, .28);
    background: rgba(101, 223, 161, .1);
}

.flash--error,
.page-notice--error {
    border-color: rgba(255, 107, 124, .28);
    background: rgba(255, 107, 124, .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, 61, 112, .13), 0 0 18px rgba(255, 61, 112, .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, 61, 112, 0), 0 0 22px rgba(255, 61, 112, .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(4, 6, 9, .96) 0%, rgba(4, 6, 9, .78) 30%, rgba(4, 6, 9, .23) 60%, rgba(4, 6, 9, .08) 100%),
        linear-gradient(0deg, rgba(4, 6, 9, .92) 0%, transparent 36%, rgba(4, 6, 9, .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(6, 8, 12, .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(6, 8, 12, .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, 61, 112, .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(17, 21, 28, .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(101, 223, 161, .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, #171c25, #0b0e13);
    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, 61, 112, .25), transparent 32%),
        linear-gradient(135deg, #1a202a, #0c0f14);
}

.stream-card__wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 6, 9, .12), transparent 45%, rgba(4, 6, 9, .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(5, 7, 10, .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, 61, 112, .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(101, 223, 161, .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;
}

.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(5, 7, 10, .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, 61, 112, .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, 61, 112, .4);
    transition: width .35s ease;
}

/* Season players */
.season-stream-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.season-stream {
    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;
}

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

.season-stream__screen {
    position: relative;
    display: block;
    aspect-ratio: 16 / 8.5;
    overflow: hidden;
    background: #0a0d12;
}

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

.season-stream:hover .season-stream__screen > img {
    transform: scale(1.035);
}

.season-stream__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 6, 9, .08), transparent 45%, rgba(4, 6, 9, .82));
}

.season-stream__number {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    color: #fff;
    background: rgba(5, 7, 10, .62);
    backdrop-filter: blur(9px);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.season-stream__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 61, 112, .88);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .36);
    transform: translate(-50%, -50%);
}

.season-stream--ocean .season-stream__play {
    background: rgba(31, 169, 158, .9);
}

.season-stream__play svg {
    width: 28px;
    height: 28px;
}

.season-stream__body {
    display: grid;
    grid-template-columns: .8fr 1.2fr auto;
    align-items: center;
    gap: 22px;
    min-height: 154px;
    padding: 25px 26px;
}

.season-stream__body p {
    margin-bottom: 7px;
    color: var(--pink-light);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.season-stream--ocean .season-stream__body p {
    color: var(--aqua);
}

.season-stream__body h3 {
    font-size: 1.42rem;
}

.season-stream__body > span {
    color: var(--muted);
    font-size: .72rem;
}

.season-stream__body > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.season-stream__body > a svg {
    width: 16px;
    height: 16px;
}

.content-section--latest {
    padding-bottom: 5px;
}

.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(5, 7, 10, .98) 0%, rgba(5, 7, 10, .78) 40%, rgba(5, 7, 10, .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--new-series {
    margin-top: 90px;
}

.watch-cta--new-series > img {
    object-position: 62% center;
}

.watch-cta--new-series .watch-cta__content p {
    max-width: 520px;
    margin: -8px 0 26px;
    color: rgba(235, 238, 243, .8);
    line-height: 1.7;
}

.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(5, 7, 10, .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(101, 223, 161, .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: #090c11;
    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(4, 6, 9, .96), rgba(4, 6, 9, .75) 34%, rgba(4, 6, 9, .12) 72%),
        linear-gradient(0deg, rgba(4, 6, 9, .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);
}

.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(12, 15, 21, .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(101, 223, 161, .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: #0b0e13;
    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(5, 7, 10, .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(5, 7, 10, .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;
    justify-content: space-between;
    pointer-events: none;
}

.watch-player__topbar > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px 6px 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: rgba(255, 255, 255, .82);
    background: rgba(4, 6, 9, .5);
    backdrop-filter: blur(10px);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.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(4, 6, 9, .5);
    font-size: .55rem;
}

.watch-player__center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    display: grid;
    width: 82px;
    height: 82px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 61, 112, .9);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .42), 0 0 0 10px rgba(255, 255, 255, .05);
    transform: translate(-50%, -50%);
    transition: opacity .2s ease, transform .2s ease;
}

.watch-player__center-play:hover {
    transform: translate(-50%, -50%) scale(1.07);
}

.watch-player__center-play svg {
    width: 35px;
    height: 35px;
}

.watch-player.is-playing .watch-player__center-play,
.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;
    padding: 15px 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 11px;
    color: rgba(255, 255, 255, .72);
    background: rgba(4, 6, 9, .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(4, 6, 9, .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(101, 223, 161, .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, 61, 112, .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(4, 6, 9, .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(17, 21, 28, .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(101, 223, 161, .3);
    color: #b8f3d2;
    background: rgba(101, 223, 161, .08);
}

.watch-season-progress__dots a.is-current {
    border-color: var(--pink);
    color: #fff;
    background: rgba(255, 61, 112, .16);
    box-shadow: 0 0 0 3px rgba(255, 61, 112, .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: #11151c;
    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(5, 7, 10, .08), transparent 45%, rgba(5, 7, 10, .88)),
        linear-gradient(90deg, rgba(5, 7, 10, .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(88, 223, 210, .18), rgba(255, 61, 112, .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(5, 7, 10, .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, 61, 112, .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;
}

.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, 61, 112, .28), transparent 47%),
        linear-gradient(155deg, #1d2631, #0c1016);
}

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

.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, #0c1016);
}

.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(6, 8, 12, .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(101, 223, 161, .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(5, 7, 10, .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, 61, 112, .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(5, 7, 10, .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, 61, 112, .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(5, 7, 10, .65);
}

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

.form-input:focus {
    border-color: rgba(88, 223, 210, .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: #090c11;
}

.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;
}

/* 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(17, 21, 28, .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(17, 21, 28, .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;
    }

    .language-chip {
        display: none;
    }

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

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

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

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

    .season-stream__body {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .season-stream__body > a {
        margin-top: 5px;
    }

    .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);
    }

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

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

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

    .nav-toggle {
        display: block;
    }

    .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(11, 14, 20, .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;
    }

    .stream-hero {
        width: calc(100% - 20px);
        height: 690px;
        min-height: 0;
        margin-top: 8px;
    }

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

    .stream-hero__shade {
        background:
            linear-gradient(0deg, rgba(4, 6, 9, .98) 0%, rgba(4, 6, 9, .76) 48%, rgba(4, 6, 9, .08) 82%),
            linear-gradient(90deg, rgba(4, 6, 9, .32), transparent 72%);
    }

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

    .stream-hero__content {
        right: 23px;
        bottom: 44px;
        left: 23px;
        width: auto;
    }

    .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;
    }

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

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

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

    .watch-cta__shade {
        background: linear-gradient(0deg, rgba(5, 7, 10, .98), rgba(5, 7, 10, .62) 60%, rgba(5, 7, 10, .14));
    }

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

    .series-hero {
        width: calc(100% - 20px);
        height: 650px;
    }

    .series-hero__shade {
        background:
            linear-gradient(0deg, rgba(4, 6, 9, .98), rgba(4, 6, 9, .72) 50%, rgba(4, 6, 9, .08) 84%),
            linear-gradient(90deg, rgba(4, 6, 9, .32), transparent);
    }

    .series-hero__copy {
        right: 23px;
        bottom: 38px;
        left: 23px;
        width: auto;
    }

    .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%;
    }

    .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;
    }

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

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

    .watch-player__center-play {
        width: 68px;
        height: 68px;
    }

    .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 {
        height: 650px;
        border-radius: 18px;
    }

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

    .stream-hero__actions .button,
    .series-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;
    }

    .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;
    }

    .season-stream__screen {
        aspect-ratio: 16 / 9;
    }

    .season-stream__play {
        width: 54px;
        height: 54px;
    }

    .season-stream__body {
        padding: 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 {
        height: 610px;
        border-radius: 18px;
    }

    .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;
    }

    .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-player__center-play {
        width: 58px;
        height: 58px;
    }

    .watch-player__center-play svg {
        width: 27px;
        height: 27px;
    }

    .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;
    }
}

@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;
    }
}