/* ==========================================================================
   AnimeSaturn — episode page (/watch/{anime}/ep-N) + the .aw-* blocks the
   anime page (/anime/{anime}, anime.css) shares: hero, details, head, rails.
   Uses the --as-* tokens from base.css. Selectors that restyle legacy theme
   hooks (#controls, #w-episodes, #w-seasons, #w-rating, comments) are scoped
   under #watch-main so they out-rank assets/anikoto/css/style.css.
   ========================================================================== */

.aw {
    --aw-brand-text: #c08cf0;
    --aw-star: #f5b400;
    --aw-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    position: relative;
    padding-bottom: 48px;
    margin-bottom: 0;
}

html:not(.dark) .aw {
    --aw-brand-text: var(--as-brand);
    --aw-star: #e59e00;
}

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

.aw-hidden { display: none !important; }

.aw a:focus-visible,
.aw button:focus-visible,
.aw [role="button"]:focus-visible,
.aw input:focus-visible {
    outline: 2px solid var(--as-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--as-brand-ring);
}

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

.aw-hero {
    position: relative;
    z-index: 0; /* own stacking layer so the grid can overlap it without a z-index */
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #07060b;
}

.aw-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    filter: saturate(1.1);
}

.aw-hero--blur .aw-hero__bg {
    filter: blur(28px) saturate(1.25);
    transform: scale(1.2);
    opacity: .85;
}

.aw-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 6, 11, 0) 30%, var(--as-bg) 100%);
}

html:not(.dark) .aw-hero { background: var(--as-bg); }

html:not(.dark) .aw-hero::after {
    background:
        linear-gradient(0deg, var(--as-bg) 0%, rgba(255, 255, 255, .45) 26%, transparent 55%),
        linear-gradient(90deg, rgba(255, 255, 255, .78) 0%, transparent 16%, transparent 84%, rgba(255, 255, 255, .78) 100%);
}

@media (min-width: 768px) {
    .aw-hero { height: 300px; }
}

/* ---- Episode page grid (#watch-main.aw-ep) -------------------------------
   Reference /anime/{slug}/ep-N: banner, then [player + list | ad + info card].
   Desktop ≥1024: two columns (fluid | 340px). Expand (main.js toggles
   .expand on #watch-main): the player spans both columns, the list and the
   right column drop below it. ≤1023: one column in the reference order. */

.aw-container { position: relative; }

.aw-ep-hero { height: 244px; }

@media (min-width: 768px) {
    .aw-ep-hero { height: 280px; }
}

.aw-wgrid {
    position: relative; /* no z-index: keeps "Lights off" (#player-wrapper z-index) working */
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: -3rem;
}

.aw-wz-main,
.aw-wz-list { display: contents; }

.aw-wgrid > *,
.aw-wz-main > *,
.aw-wz-list > * { min-width: 0; margin: 0; }

/* One column: ad, player, ad, next episode, episodes, info card, comments. */
@media (max-width: 1023.98px) {
    .aw-wz-ad { order: 1; }
    .aw-wz-player { order: 2; }
    .aw-ad--player { order: 3; }
    .aw-next { order: 4; }
    #watch-main #w-episodes { order: 5; }
    .aw-wz-aside { order: 6; }
    .aw-ad--content { order: 7; }
    .aw-second { order: 8; }

    .aw-ctrl--expand { display: none !important; }
}

@media (min-width: 1024px) {
    .aw-wgrid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "main ad"
            "main aside";
        align-items: start;
        gap: 24px;
    }

    .aw-wgrid--noad {
        grid-template-rows: auto;
        grid-template-areas: "main aside";
    }

    .aw-wz-main {
        grid-area: main;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .aw-wz-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .aw-wz-ad { grid-area: ad; }
    .aw-wz-aside { grid-area: aside; }

    #watch-main.expand .aw-wgrid {
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "player player"
            "list ad"
            "list aside";
    }

    #watch-main.expand .aw-wgrid--noad {
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "player player"
            "list aside";
    }

    #watch-main.expand .aw-wz-main { display: contents; }
    #watch-main.expand .aw-wz-player { grid-area: player; }
    #watch-main.expand .aw-wz-list { grid-area: list; }
}

/* ---- Side column ---------------------------------------------------------- */

.aw-poster {
    aspect-ratio: 2 / 3;
    border-radius: var(--as-r-xl);
    overflow: hidden;
    background: var(--as-soft);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .5);
}

.aw-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .aw-poster { border-radius: var(--as-r-lg); }
}

.aw-cta { display: grid; gap: 8px; }

.aw-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.aw-cta__btn.is-disabled { opacity: .6; cursor: default; }

.aw-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    font-size: 13.5px;
}

.aw-meta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
    margin: 0 -8px;
    padding: 4px 8px;
    border-radius: var(--as-r-sm);
    color: var(--as-ink);
    text-decoration: none;
    transition: background-color .15s;
}

.aw-meta__row--link:hover { background: var(--as-hover); text-decoration: none; }

.aw-meta__k {
    flex-shrink: 0;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}

.aw-meta__v {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-weight: 500;
    text-align: right;
    color: var(--aw-brand-text);
}

.aw-meta__row--link:hover .aw-meta__v { color: var(--as-brand-hover); }
.aw-meta__v--strong { font-weight: 700; }
.aw-meta__v--plain { color: var(--as-ink); }
.aw-meta__v--trunc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aw-meta__chev { flex-shrink: 0; color: var(--as-ink-dim); transition: color .15s, transform .15s; }
.aw-meta__row--link:hover .aw-meta__chev { color: var(--as-brand); transform: translateX(2px); }

.aw-meta__row--wrap { align-items: flex-start; }
.aw-meta__v--list { display: block; font-size: 13px; color: var(--as-ink-mute); }
.aw-meta__v--list a { color: var(--aw-brand-text); text-decoration: none; }
.aw-meta__v--list a:hover { text-decoration: underline; }

.aw-meta__sep { height: 1px; margin: 8px -16px; background: var(--as-border); }

.aw-meta__views svg { color: var(--as-ink-dim); }
.aw-meta__score svg { color: var(--aw-star); }
.aw-meta__score small { font-size: 12px; color: var(--as-ink-dim); }

@media (max-width: 767.98px) {
    .aw-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        text-align: center;
    }
    .aw-meta__row {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        margin: 0;
    }
    .aw-meta__row--full,
    .aw-meta__sep { grid-column: 1 / -1; }
    .aw-meta__v { text-align: center; justify-content: center; }
    .aw-meta__chev { display: none; }
    .aw-meta__k:empty { display: none; }
}

/* External links — one row of compact tiles (MAL · AniList · TMDB · Trailer) */
.aw-links { display: flex; gap: 6px; }

.aw-ext {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 9px 4px 8px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-soft);
    color: var(--as-ink-mute);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

.aw-ext:hover,
.aw-ext:focus-visible {
    background: var(--as-hover);
    border-color: var(--as-brand);
    color: var(--as-ink);
    text-decoration: none;
    transform: translateY(-1px);
}

.aw-ext__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--as-r-sm);
    color: #fff;
    font: 800 10px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .02em;
}

.aw-ext__badge--mal { background: #2e51a2; }
.aw-ext__badge--anilist { background: #0b1622; color: #02a9ff; font-size: 15px; }
.aw-ext__badge--tmdb { background: linear-gradient(135deg, #90cea1, #01b4e4); color: #0d253f; font-size: 9px; }
.aw-ext__badge--yt { background: #ff0033; }
.aw-ext__label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aw-ext__arrow { display: none; }

/* Rate this anime (main.js Rating on div#w-rating) */
.aw-vote { padding: 16px; }

.aw-vote__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}

#watch-main #w-rating {
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
}

#watch-main #w-rating .stars {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    white-space: nowrap;
}

#watch-main #w-rating .stars span {
    position: static;
    display: flex;
    flex: 1 1 0;
    justify-content: space-around;
    align-items: center;
    padding: 2px 0;
    font-size: inherit;
    cursor: pointer;
}

#watch-main #w-rating .stars span::before { content: none; }

#watch-main #w-rating .stars span svg {
    flex: 0 1 22px;
    width: 22px;
    max-width: 44%;
    height: auto;
    aspect-ratio: 1;
    color: var(--as-border-strong);
    pointer-events: none; /* offsetX must stay relative to the span */
    transition: color .12s ease, transform .12s ease;
}

#watch-main #w-rating .stars span.half svg:first-child,
#watch-main #w-rating .stars span.full svg { color: var(--aw-star); }

#watch-main #w-rating .stars span:hover svg { transform: scale(1.12); }

#watch-main #w-rating .message {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    white-space: normal;
    text-align: left;
    color: var(--as-ink-dim);
}

@media (max-width: 767.98px) {
    .aw-vote__title, #watch-main #w-rating .message { text-align: center; }
}

/* ---- Head (title, genres, synopsis) -------------------------------------- */

.aw-head { min-width: 0; }

.aw-title {
    margin: 0;
    font-family: var(--aw-display);
    font-size: clamp(22px, 3.1vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--as-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

html.dark .aw-title { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }

.aw-alt {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--as-ink-dim);
    overflow-wrap: anywhere;
}

.aw-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -8px;
}

.aw-h2 {
    margin: 0 0 10px;
    font-family: var(--aw-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--as-ink);
}

.aw-shorting .content {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    max-height: none;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.7;
    color: var(--as-ink-mute);
    white-space: pre-line;
}

.aw-shorting.expand .content {
    display: block;
    -webkit-line-clamp: unset;
}

.aw-shorting .toggle.aw-shorting__toggle {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--aw-brand-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.aw-shorting .toggle.aw-shorting__toggle:hover { color: var(--as-brand-hover); text-decoration: underline; }
.aw-shorting.is-short .aw-shorting__toggle { display: none; }
.aw-story__empty { margin: 0; color: var(--as-ink-dim); }

@media (max-width: 767.98px) {
    .aw-title { font-size: 22px; }
    .aw-alt { font-size: 13px; }
    .aw-genres { margin-top: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .aw-genres::-webkit-scrollbar { display: none; }
    .aw-genres .as-chip { flex-shrink: 0; }
    .aw-shorting .content { font-size: 14px; -webkit-line-clamp: 4; }
}

/* ---- Player card (reference .player-card) --------------------------------- */

.aw-watch { min-width: 0; scroll-margin-top: 80px; }
#w-info, #w-player { scroll-margin-top: 80px; }

#watch-main .aw-player {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    background: var(--as-elev);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .45);
}

html:not(.dark) #watch-main .aw-player { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(134, 61, 186, .1); }

.aw-player__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--as-border);
    background: var(--as-soft);
}

.aw-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    background: var(--as-bg);
    color: var(--as-ink-mute);
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

.aw-back:hover {
    border-color: var(--as-brand);
    background: var(--as-brand);
    color: #fff;
    transform: translateX(-2px);
}

.aw-player__meta { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }

.aw-player__title {
    overflow: hidden;
    font-family: var(--aw-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--as-ink);
    text-decoration: none;
    transition: color .15s;
}

.aw-player__title:hover { color: var(--aw-brand-text); text-decoration: none; }

.aw-player__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 13px; line-height: 1.2; color: var(--as-ink-dim); }
.aw-player__ep { font-weight: 700; color: var(--aw-brand-text); }

.aw-player__type {
    padding: 1px 6px;
    border-radius: var(--as-r-sm);
    background: var(--as-brand-soft);
    color: var(--as-ink);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
}

.aw-player__type:empty { display: none; }

@media (min-width: 768px) {
    .aw-player__head { gap: 14px; min-height: 64px; padding: 14px 18px; }
    .aw-player__title { font-size: 17px; }
}

#watch-main #player-wrapper {
    position: relative; /* LightControl raises its z-index above the dim layer */
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    background: #000;
}

@supports not (aspect-ratio: 16 / 9) {
    #watch-main #player-wrapper { height: 0; padding-bottom: 56.25%; }
}

#watch-main #player {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000 center / cover no-repeat;
    color: #e6e4ee;
}

#watch-main #player::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle, rgba(13, 12, 21, .2) 0%, rgba(13, 12, 21, .85) 100%);
    pointer-events: none;
}

#watch-main #player iframe {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
}

#watch-main #player .play {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--as-brand);
    box-shadow: 0 10px 30px -6px rgba(134, 61, 186, .75), 0 0 0 8px rgba(134, 61, 186, .18);
    color: #fff;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

#watch-main #player .play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #fff;
    font-size: 0;
}

#watch-main #player .play:hover { transform: scale(1.08); box-shadow: 0 12px 34px -6px rgba(134, 61, 186, .9), 0 0 0 10px rgba(134, 61, 186, .22); }

#watch-main #player .loading {
    position: relative;
    z-index: 3;
    width: 46px;
    height: 46px;
    margin: auto;
    border: 4px solid rgba(255, 255, 255, .14);
    border-top-color: var(--as-brand);
    border-radius: 50%;
    background: none;
    animation: aw-spin .8s linear infinite;
}

#watch-main #player .loading::before,
#watch-main #player .loading::after { content: none; }

#watch-main #player .message {
    position: relative;
    z-index: 3;
    max-width: 90%;
    padding: 12px 16px;
    border-radius: var(--as-r-md);
    background: rgba(13, 12, 21, .75);
    font-size: 14px;
    text-align: center;
    color: #e6e4ee;
}

@keyframes aw-spin { to { transform: rotate(360deg); } }

/* Controls bar (reference .watch-toolbar) — always ONE line:
   [prev][next] · [auto play][auto next][auto skip] · [share][report][list][w2g][lights][expand]
   Ghost icon buttons; the three toggles shrink their label with the bar's own
   width (container query): short label → checkbox + icon. If it still does
   not fit (≈360px phones) the row scrolls sideways (hidden scrollbar, snap,
   edge fade set by watch.js) — it never wraps. */
#watch-main #w-player #controls {
    --aw-ctrl-on: var(--as-brand);
    --aw-ctrl-h: 32px;
    container: aw-controls / inline-size;
    position: relative;
    display: block;
    padding: 10px 14px;
    border-top: 1px solid var(--as-border);
    border-radius: 0;
    background: var(--as-soft);
    line-height: normal;
}

html.dark #watch-main #w-player #controls { --aw-ctrl-on: color-mix(in srgb, var(--as-brand) 55%, #fff); }

#watch-main #controls .aw-controls__row {
    position: relative; /* containing block for the .sr-only labels, so the scroller clips them */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    /* 2px of room so the inset focus rings are not cut by the scroller */
    margin: -2px;
    padding: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#watch-main #controls .aw-controls__row::-webkit-scrollbar { display: none; }

/* Scroll hint: edge fades (set by watch.js) drawn by the bar itself — a mask on
   the row would also hide the position: fixed folders menu inside it. */
#watch-main #w-player #controls::before,
#watch-main #w-player #controls::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

#watch-main #w-player #controls::before { left: 0; background: linear-gradient(90deg, var(--as-soft) 20%, transparent); }
#watch-main #w-player #controls::after { right: 0; background: linear-gradient(270deg, var(--as-soft) 20%, transparent); }
#watch-main #w-player #controls.aw-fade-l::before,
#watch-main #w-player #controls.aw-fade-r::after { opacity: 1; }

#watch-main #controls .aw-controls__group {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    scroll-snap-align: start;
}

#watch-main #controls .aw-controls__group--toggles { gap: 6px; }
#watch-main #controls .aw-controls__group--tools { scroll-snap-align: end; }

#watch-main #w-player #controls .ctrl {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--aw-ctrl-h);
    margin: 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--as-r-md);
    background: transparent;
    color: var(--as-ink-mute);
    font: 600 13px/1 "Inter", system-ui, sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

#watch-main #w-player #controls .ctrl:hover {
    border-color: var(--as-border);
    background: var(--as-hover);
    color: var(--as-ink);
}

#watch-main #w-player #controls .ctrl:focus-visible,
#watch-main #controls .aw-ctrl__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--as-brand);
}

#watch-main #w-player #controls .ctrl.disabled,
#watch-main #w-player #controls .ctrl:disabled { opacity: .35; cursor: not-allowed; }

/* Icon-only square buttons */
#watch-main #w-player #controls .aw-ibtn {
    width: calc(var(--aw-ctrl-h) + 2px);
    min-width: calc(var(--aw-ctrl-h) + 2px);
    padding: 0;
    font-size: 14px;
}

#watch-main #w-player #controls .aw-ibtn i {
    margin: 0;
    font-size: 14px;
    line-height: 1;
}

/* "On" state (lights off, expanded, in a list, link copied) — reference .wt-btn.is-on */
#watch-main #w-player #controls .aw-ibtn.aw-is-on {
    border-color: color-mix(in srgb, var(--as-brand) 60%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, #5d79ee 34%, var(--as-bg)), color-mix(in srgb, #863dba 34%, var(--as-bg)));
    box-shadow: 0 4px 14px -6px rgba(134, 61, 186, .55), inset 0 1px rgba(255, 255, 255, .08);
    color: #fff;
}

html:not(.dark) #watch-main #w-player #controls .aw-ibtn.aw-is-on {
    border-color: transparent;
    background: var(--as-grad);
    color: #fff;
}

#watch-main #w-player #controls .aw-ctrl--menu { padding: 0; }
#watch-main #w-player #controls .aw-ctrl--menu.show {
    border-color: var(--as-border);
    background: var(--as-hover);
    color: var(--as-ink);
}

#watch-main #controls .aw-ctrl__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Auto play / next / skip — reference .wt-check */
#watch-main #w-player #controls .ctrl.check {
    gap: 8px;
    padding: 0 10px;
    border-color: var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
}

#watch-main #w-player #controls .ctrl.check:hover { border-color: var(--as-border-strong); background: var(--as-bg); }

#watch-main #w-player #controls .ctrl.check .aw-check__box {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--as-border-strong);
    border-radius: 4px;
    background: var(--as-bg);
    color: transparent;
    font-size: 10px;
    line-height: 1;
    transition: all .15s;
}

#watch-main #w-player #controls .ctrl.check .aw-check__box.fa-check {
    border-color: transparent;
    background: var(--as-grad);
    color: #fff;
}

#watch-main #w-player #controls .ctrl.check:has(.aw-check__box.fa-check),
#watch-main #w-player #controls .ctrl.check.aw-is-on {
    border-color: color-mix(in srgb, var(--as-brand) 60%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, #5d79ee 34%, var(--as-bg)), color-mix(in srgb, #863dba 34%, var(--as-bg)));
    box-shadow: 0 4px 14px -6px rgba(134, 61, 186, .55), inset 0 1px rgba(255, 255, 255, .08);
    color: #fff;
}

html:not(.dark) #watch-main #w-player #controls .ctrl.check:has(.aw-check__box.fa-check),
html:not(.dark) #watch-main #w-player #controls .ctrl.check.aw-is-on {
    border-color: transparent;
    background: var(--as-grad);
}

#watch-main #w-player #controls .ctrl.check .aw-check__icon { font-size: 11px; }

/* Label modes. Default (narrow bar, or no container-query support): checkbox + icon.
   ≥700px: the short label ("Autoplay"), like the reference. */
#watch-main #controls .aw-check__full,
#watch-main #controls .aw-check__short { display: none; }

@container aw-controls (max-width: 699.98px) {
    #watch-main #controls .aw-controls__row { gap: 4px; }
    #watch-main #controls .aw-controls__group { gap: 2px; }
    #watch-main #controls .aw-controls__group--toggles { gap: 3px; }
    #watch-main #w-player #controls .ctrl.check { gap: 4px; padding: 0 7px 0 6px; }
    #watch-main #w-player #controls .ctrl.check .aw-check__box { width: 15px; height: 15px; font-size: 8px; }
}

@container aw-controls (min-width: 700px) {
    #watch-main #controls .aw-check__short { display: inline; }
    #watch-main #controls .aw-check__icon { display: none; }
}

/* Folders menu: pinned to the viewport by watch.js so the scrolling row can't clip it. */
#watch-main #controls .folders.aw-folders--fixed {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 1060;
    margin: 0;
    transform: none;
}

@media (max-width: 639.98px) {
    #watch-main #w-player #controls { --aw-ctrl-h: 34px; padding: 8px 8px; }
    .aw-shorting .toggle.aw-shorting__toggle { min-height: 36px; }
}

/* Dropdown menus inside the watch area (favourite folders, episode filters) */
#watch-main .dropdown-menu {
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-elev);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55);
    font-size: 13px;
    line-height: 1.4;
}

#watch-main .dropdown-menu .dropdown-item {
    padding: 7px 10px;
    border-radius: var(--as-r-sm);
    color: var(--as-ink-mute);
    cursor: pointer;
}

#watch-main .dropdown-menu .dropdown-item:hover,
#watch-main .dropdown-menu .dropdown-item:focus {
    background: var(--as-hover);
    color: var(--as-ink);
}

#watch-main .dropdown-menu .dropdown-item.active {
    background: var(--as-brand-soft);
    color: var(--as-ink);
    font-weight: 600;
}

/* Servers + downloads — "Seleziona server" card: head (icon box, title, EP
   pill), then one outlined group per language with its label sitting on the
   top border (SUB purple / DUB green) and equal-width server tiles. The active
   tile is filled and shows the "playing" bars. */
#watch-main #w-servers {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 14px 16px 16px;
    overflow: visible;
    border-top: 1px solid var(--as-border);
    background: var(--as-soft);
}

#watch-main #w-servers .aw-srv__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#watch-main #w-servers .aw-srv__ico {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink-mute);
}

#watch-main #w-servers .aw-srv__title {
    flex: 1;
    min-width: 0;
    font-family: var(--aw-display, inherit);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--as-ink);
}

#watch-main #w-servers .aw-srv__ep {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink-mute);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

#watch-main #w-servers .aw-srv__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px 12px;
    background: none;
}

#watch-main #w-servers .aw-srv__group {
    --srv-accent: var(--as-brand);
    --srv-accent-text: var(--aw-brand-text, #c79bff);
    --srv-accent-soft: var(--as-brand-soft);
    min-width: 0;
    margin: 0;
    padding: 14px 10px 10px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    background: transparent;
}

#watch-main #w-servers .aw-srv__group--dub {
    --srv-accent: #10b981;
    --srv-accent-text: #34d399;
    --srv-accent-soft: rgba(16, 185, 129, .16);
}

#watch-main #w-servers .aw-srv__group--dl {
    --srv-accent: #f59e0b;
    --srv-accent-text: #fbbf24;
    --srv-accent-soft: rgba(245, 158, 11, .16);
    position: relative;
    grid-column: 1 / -1;
    padding-top: 18px;
}

/* Label on the top border (a real <legend> for SUB/DUB; positioned for the download row). */
#watch-main #w-servers .aw-srv__legend {
    float: none;
    width: auto;
    max-width: calc(100% - 8px);
    margin: 0 0 0 4px;
    padding: 2px 9px;
    border-radius: var(--as-r-sm);
    background: var(--srv-accent-soft);
    color: var(--srv-accent-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

#watch-main #w-servers .aw-srv__group--dl .aw-srv__legend {
    position: absolute;
    top: 0;
    left: 10px;
    transform: translateY(-50%);
}

#watch-main #w-servers .aw-srv__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#watch-main #w-servers .aw-srv__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink-mute);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}

#watch-main #w-servers .aw-srv__item::before { content: none; }

#watch-main #w-servers .aw-srv__item:hover {
    border-color: color-mix(in srgb, var(--srv-accent) 50%, transparent);
    background: var(--as-hover);
    color: var(--as-ink);
}

#watch-main #w-servers .aw-srv__item:focus-visible {
    outline: 2px solid var(--srv-accent);
    outline-offset: 2px;
}

#watch-main #w-servers .aw-srv__name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#watch-main #w-servers .aw-srv__eq {
    display: none;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    height: 12px;
}

#watch-main #w-servers .aw-srv__eq i {
    width: 3px;
    height: 100%;
    border-radius: 1px;
    background: currentColor;
    transform-origin: bottom;
    animation: aw-srv-eq 1s ease-in-out infinite;
}

#watch-main #w-servers .aw-srv__eq i:nth-child(2) { animation-delay: -.3s; }
#watch-main #w-servers .aw-srv__eq i:nth-child(3) { animation-delay: -.6s; }

@keyframes aw-srv-eq {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

/* Active: filled with the language colour (dark theme). */
#watch-main #w-servers .aw-srv__item.active {
    border-color: transparent;
    background: var(--srv-accent);
    color: #fff;
    box-shadow: 0 8px 20px -10px var(--srv-accent);
}

#watch-main #w-servers .aw-srv__item.active .aw-srv__eq { display: inline-flex; color: #fff; }

/* Light theme: dark-navy active tile with the bars in the language colour. */
html:not(.dark) #watch-main #w-servers .aw-srv__group--sub { --srv-accent-text: #7c3aed; }
html:not(.dark) #watch-main #w-servers .aw-srv__group--dub { --srv-accent-text: #047857; }
html:not(.dark) #watch-main #w-servers .aw-srv__group--dl { --srv-accent-text: #b45309; }
html:not(.dark) #watch-main #w-servers .aw-srv__item { background: #f1f5f9; color: #334155; }
html:not(.dark) #watch-main #w-servers .aw-srv__item:hover { background: #e2e8f0; color: #0f172a; }
html:not(.dark) #watch-main #w-servers .aw-srv__item.active { background: #1e293b; color: #fff; box-shadow: none; }
html:not(.dark) #watch-main #w-servers .aw-srv__item.active .aw-srv__eq { color: var(--srv-accent); }
html:not(.dark) #watch-main #w-servers .aw-srv__group--dub .aw-srv__item.active .aw-srv__eq { color: #22c55e; }

#watch-main #w-servers .mapper-dl-links { display: flex; flex-wrap: wrap; gap: 8px; }

#watch-main #w-servers .mapper-dl-chip {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink-mute);
    font-size: 13px;
    font-weight: 700;
}

#watch-main #w-servers .mapper-dl-chip:hover,
#watch-main #w-servers .mapper-dl-grp.is-open .mapper-dl-grp-toggle {
    border-color: var(--srv-accent);
    background: var(--as-hover);
    color: var(--as-ink);
}

#watch-main #w-servers .mapper-dl-grp-items {
    border-color: var(--as-border);
    background: var(--as-elev);
}

#watch-main #w-servers .mapper-dl-grp-items::after { border-top-color: var(--as-border); }

@media (prefers-reduced-motion: reduce) {
    #watch-main #w-servers .aw-srv__eq i { animation: none; }
}

@media (max-width: 639.98px) {
    #watch-main #w-servers { padding: 12px; }
    #watch-main #w-servers .aw-srv__groups { grid-template-columns: 1fr; }
    #watch-main #w-servers .aw-srv__item { height: 42px; padding: 0 10px; }
    #watch-main #w-servers .aw-srv__name { font-size: 13px; }
}

/* Ads */
.aw .aw-ad { margin: 0; }

/* ---- Next episode — reference .next-ep ------------------------------------ */
#watch-main .aw-next {
    position: relative;
    display: block;
    isolation: isolate;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(134, 61, 186, .28);
    border-radius: 1rem;
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(134, 61, 186, .22), transparent 55%),
        radial-gradient(130% 120% at 100% 100%, rgba(93, 121, 238, .18), transparent 55%),
        var(--as-soft);
    color: var(--as-ink);
}

.aw-next__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 18px 22px;
}

.aw-next__lead { display: flex; align-items: center; gap: 14px; min-width: 0; }

.aw-next__poster {
    flex-shrink: 0;
    width: 48px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px -2px rgba(192, 132, 252, .35);
}

.aw-next__meta { min-width: 0; }

.aw-next__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #c084fc;
}

.aw-next__eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

html:not(.dark) .aw-next__eyebrow { color: var(--as-brand); }

.aw-next__title {
    margin: 3px 0 0;
    font-family: var(--aw-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--as-ink);
}

.aw-next__num,
.aw-next__n {
    background: linear-gradient(135deg, #6d89fe 0%, #b06dde 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:not(.dark) .aw-next__num,
html:not(.dark) .aw-next__n { background-image: linear-gradient(135deg, #5d79ee 0%, #863dba 100%); }

.aw-next__when { margin: 2px 0 0; font-size: 13px; color: var(--as-ink-mute); }
.aw-next__when strong { font-weight: 700; color: var(--as-ink); }

.aw-next__timer { display: flex; align-items: center; }
.aw-next__tiles { display: flex; align-items: flex-start; gap: 6px; }
.aw-next__tiles[hidden] { display: none; }

.aw-next__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
    padding: 9px 6px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .65rem;
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

html:not(.dark) .aw-next__unit { border-color: var(--as-border); background: rgba(255, 255, 255, .7); }

.aw-next__n {
    font-family: var(--aw-display);
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
}

.aw-next__lbl {
    font-size: 9.6px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}

.aw-next__colon {
    align-self: center;
    padding-bottom: 10px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: rgba(192, 132, 252, .55);
}

.aw-next__ready { margin: 0; font-size: 14px; font-weight: 700; color: var(--aw-brand-text); }

@media (max-width: 560px) {
    .aw-next__inner { justify-content: center; padding: 16px; }
    .aw-next__timer { justify-content: center; width: 100%; }
    .aw-next__n { font-size: 24px; }
    .aw-next__unit { min-width: 42px; }
}

/* ---- Episodes panel ------------------------------------------------------- */
#watch-main #w-episodes {
    display: flex;
    flex-direction: column;
    max-width: none;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    background: var(--as-elev);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(134, 61, 186, .1);
}

#watch-main #w-episodes .head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--as-border);
    background: var(--as-soft);
}

.aw-ep-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--as-ink);
}

.aw-ep-title svg { color: var(--aw-brand-text); }
.aw-ep-count { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--as-ink-dim); }
.aw-ep-cur { color: var(--aw-brand-text); }

.aw-ep-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }

#watch-main .aw-ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink-mute);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

#watch-main .aw-ep-btn:hover { border-color: var(--as-border-strong); color: var(--as-ink); }

#watch-main .aw-ep-find {
    width: 84px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink);
    font-size: 12.5px;
}

#watch-main .aw-ep-find::placeholder { color: var(--as-ink-dim); }

/* Grid / list toggle — reference .view-toggle */
.aw-vt {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
}

.aw-vt__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: calc(var(--as-r-md) - 2px);
    background: none;
    color: var(--as-ink-dim);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.aw-vt__btn:hover { color: var(--as-ink); }
.aw-vt__btn.is-active { background: var(--as-brand); color: #fff; }

#watch-main #w-episodes .body {
    position: static;
    flex-grow: 0;
    margin: 0;
    padding: 0;
}

#watch-main #w-episodes .body .episodes {
    position: relative; /* offset parent for main.js scroll-to-active */
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-height: 36rem;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--as-border-strong) transparent;
}

#watch-main #w-episodes ul.ep-range {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) { #watch-main #w-episodes ul.ep-range { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px) { #watch-main #w-episodes ul.ep-range { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #watch-main #w-episodes ul.ep-range { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

/* li is display:contents so episodes hidden by the sub/dub filter (main.js
   hides the <a>) leave no hole in the grid. */
#watch-main #w-episodes ul.ep-range li { display: contents; }

/* Grid tile — reference .ep-tile */
#watch-main #w-episodes ul.ep-range li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    padding: 0 4px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-soft);
    color: var(--as-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

#watch-main #w-episodes ul.ep-range li a:hover {
    border-color: var(--as-brand);
    background: var(--as-brand);
    color: #fff;
    transform: translateY(-1px);
}

#watch-main #w-episodes .aw-ep-l { display: none; }

/* "Seen in this browser" check (watch.js .aw-seen) — reference .ep-seen */
#watch-main #w-episodes .aw-ep-seen {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 3;
    display: none;
    width: 12px;
    height: 12px;
    color: #22c55e;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
    pointer-events: none;
}

#watch-main #w-episodes a.aw-seen .aw-ep-seen { display: block; }

#watch-main #w-episodes ul.ep-range li a.filler { border-style: dashed; border-color: var(--as-border-strong); }
#watch-main #w-episodes ul.ep-range li a.filler::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f59e0b;
}

#watch-main #w-episodes ul.ep-range li a[enabled="0"] { opacity: .45; }

#watch-main #w-episodes ul.ep-range li a.active {
    border-color: var(--as-brand);
    background: var(--as-brand);
    color: #fff;
}

#watch-main #w-episodes ul.ep-range li a.active:hover { background: var(--as-brand-hover); transform: none; }

#watch-main #w-episodes ul.ep-range li a.highlight {
    border-color: var(--as-brand);
    animation: aw-blink 1s infinite;
}

@keyframes aw-blink { 50% { box-shadow: 0 0 0 3px var(--as-brand-ring); } }

/* List view — reference .watch-ep-row */
#watch-main #w-episodes.aw-view-list .body .episodes { padding: 0; }
#watch-main #w-episodes.aw-view-list ul.ep-range { display: block; }

#watch-main #w-episodes.aw-view-list ul.ep-range li a {
    justify-content: flex-start;
    gap: 13px;
    height: auto;
    padding: 10px 15px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--as-ink-mute);
    font-size: 14px;
    transform: none;
}

#watch-main #w-episodes.aw-view-list ul.ep-range li:not(:last-child) a::before {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 0;
    left: 15px;
    height: 1px;
    background: color-mix(in srgb, var(--as-border) 55%, transparent);
}

#watch-main #w-episodes.aw-view-list ul.ep-range li a:hover { background: var(--as-hover); color: var(--as-ink); }

#watch-main #w-episodes.aw-view-list .aw-ep-n {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 38px;
    height: 34px;
    padding: 0 5px;
    border: 1px solid var(--as-border);
    border-radius: 8px;
    background: var(--as-soft);
    color: var(--as-ink-mute);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: border-color .14s, color .14s;
}

#watch-main #w-episodes.aw-view-list ul.ep-range li a:hover .aw-ep-n { border-color: rgba(134, 61, 186, .55); color: var(--as-ink); }

#watch-main #w-episodes.aw-view-list .aw-ep-l {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#watch-main #w-episodes.aw-view-list .aw-ep-seen { top: -5px; right: -5px; width: 14px; height: 14px; }

#watch-main #w-episodes.aw-view-list ul.ep-range li a.filler { border: 0; }
#watch-main #w-episodes.aw-view-list ul.ep-range li a.filler .aw-ep-n { border-style: dashed; }
#watch-main #w-episodes.aw-view-list ul.ep-range li a.filler::after { top: 50%; right: 18px; left: auto; margin-top: -2.5px; }

#watch-main #w-episodes.aw-view-list ul.ep-range li a.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--as-brand) 20%, transparent) 0%, transparent 78%);
    color: var(--as-ink);
}

#watch-main #w-episodes.aw-view-list ul.ep-range li a.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 3px;
    height: auto;
    background: var(--as-brand);
}

#watch-main #w-episodes.aw-view-list ul.ep-range li a.active .aw-ep-n {
    border-color: transparent;
    background: var(--as-grad);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(134, 61, 186, .5);
}

#watch-main #w-episodes.aw-view-list ul.ep-range li a.active .aw-ep-l { font-weight: 700; color: var(--aw-brand-text); }

.aw-ep-empty { margin: 4px 0; font-size: 13.5px; color: var(--as-ink-dim); }

@media (max-width: 639.98px) {
    #watch-main #w-episodes .head { padding: 10px; }
}

/* ---- Episodes panel tools: search, range dropdown / chips, (ITA) tag ----- */
#watch-main .aw-ep-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#watch-main .aw-ep-search svg {
    position: absolute;
    left: 9px;
    color: var(--as-ink-dim);
    pointer-events: none;
}

#watch-main .aw-ep-search .aw-ep-find {
    width: 190px;
    padding-left: 28px;
    -webkit-appearance: none;
    appearance: none;
}

#watch-main .aw-ep-search .aw-ep-find:focus {
    border-color: var(--as-brand);
    outline: 0;
    box-shadow: 0 0 0 3px var(--as-brand-ring);
}

#watch-main .aw-ep-find::-webkit-search-cancel-button { cursor: pointer; }

#watch-main .aw-ep-btn--caret::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: -3px 0 0 2px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
}

#watch-main .aw-ep-btn--caret { font-variant-numeric: tabular-nums; }

#watch-main #w-episodes .aw-ep-range-menu {
    max-height: min(320px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-variant-numeric: tabular-nums;
}

/* Range chips (≤ 12 ranges): one scrollable line under the header. */
#watch-main .aw-ep-ranges {
    display: flex;
    flex: 1 1 100%;
    gap: 6px;
    min-width: 0;
    margin: 2px -2px 0;
    padding: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

#watch-main .aw-ep-ranges::-webkit-scrollbar { display: none; }

#watch-main .aw-ep-rc {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    background: var(--as-bg);
    color: var(--as-ink-mute);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background-color .15s, border-color .15s, color .15s;
}

#watch-main .aw-ep-rc:hover { border-color: var(--as-border-strong); color: var(--as-ink); }
#watch-main .aw-ep-rc.is-active { border-color: var(--as-brand); background: var(--as-brand); color: #fff; }
#watch-main .aw-ep-rc:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--as-brand-ring); }

#watch-main #w-episodes ul.ep-range li.aw-miss { display: none; }
#watch-main #w-episodes .aw-ep-nores { margin: 8px 2px; }

@media (max-width: 639.98px) {
    #watch-main #w-episodes .aw-ep-tools { flex: 1 1 100%; justify-content: flex-start; }
    #watch-main .aw-ep-search { flex: 1 1 100%; }
    #watch-main .aw-ep-search .aw-ep-find { width: 100%; }
    #watch-main #w-episodes .aw-vt { margin-left: auto; padding: 0; }
    /* Phone tap targets: 38px controls, 36px chips. */
    #watch-main .aw-ep-btn,
    #watch-main .aw-ep-search .aw-ep-find { height: 38px; }
    #watch-main #w-episodes .aw-vt__btn { width: 40px; height: 36px; }
    #watch-main .aw-ep-rc { height: 36px; }
}

/* ---- Thumbnail view ("Miniature") — reference sample B .ep cards --------- */
#watch-main #w-episodes .aw-th,
#watch-main #w-episodes .aw-eb { display: none; }

#watch-main #w-episodes.aw-view-thumb .body .episodes { max-height: 46rem; padding: 14px; }

#watch-main #w-episodes.aw-view-thumb ul.ep-range {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

@media (min-width: 480px) { #watch-main #w-episodes.aw-view-thumb ul.ep-range { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
@media (min-width: 768px) { #watch-main #w-episodes.aw-view-thumb ul.ep-range { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #watch-main #w-episodes.aw-view-thumb ul.ep-range { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #watch-main #w-episodes.aw-view-thumb ul.ep-range { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1400px) { #watch-main #w-episodes.aw-view-thumb ul.ep-range { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

#watch-main #w-episodes.aw-view-thumb ul.ep-range li a,
#watch-main #w-episodes.aw-view-thumb ul.ep-range li a:hover,
#watch-main #w-episodes.aw-view-thumb ul.ep-range li a.active,
#watch-main #w-episodes.aw-view-thumb ul.ep-range li a.active:hover {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: var(--as-r-lg);
    background: none;
    color: var(--as-ink);
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    transform: none;
}

#watch-main #w-episodes.aw-view-thumb ul.ep-range li a:focus-visible { outline: 0; }
#watch-main #w-episodes.aw-view-thumb ul.ep-range li a:focus-visible .aw-th { box-shadow: 0 0 0 3px var(--as-brand-ring); }

#watch-main #w-episodes.aw-view-thumb .aw-ep-n,
#watch-main #w-episodes.aw-view-thumb .aw-ep-l,
#watch-main #w-episodes.aw-view-thumb ul.ep-range li a.filler::after  { display: none; }

#watch-main #w-episodes.aw-view-thumb ul.ep-range li a.highlight { animation: none; }
#watch-main #w-episodes.aw-view-thumb ul.ep-range li a.highlight .aw-th {
    box-shadow: 0 0 0 2px var(--as-bg), 0 0 0 4px var(--as-brand);
    animation: aw-blink 1s infinite;
}

#watch-main #w-episodes.aw-view-thumb .aw-th {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--as-r-lg);
    /* No artwork (or it failed to load): a soft brand gradient. */
    background:
        radial-gradient(90% 70% at 72% 18%, rgba(176, 114, 224, .55), transparent 70%),
        linear-gradient(160deg, #2a2350 0%, #1a1730 55%, #0f0e1a 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

#watch-main #w-episodes.aw-view-thumb .aw-th::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 12, 21, .1) 0%, transparent 38%, rgba(0, 0, 0, .68) 100%);
}

#watch-main #w-episodes.aw-view-thumb .aw-th__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.6) saturate(1.15) hue-rotate(var(--aw-th-hue, 0deg));
    transform: scale(1.12);
    transition: transform .3s ease, filter .3s ease;
}

#watch-main #w-episodes.aw-view-thumb a:hover .aw-th,
#watch-main #w-episodes.aw-view-thumb a:focus-visible .aw-th { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 28px -14px rgba(134, 61, 186, .7); }
#watch-main #w-episodes.aw-view-thumb a:hover .aw-th__img { filter: brightness(.72) saturate(1.2) hue-rotate(var(--aw-th-hue, 0deg)); transform: scale(1.17); }
/* The episode's own TMDB still: shown as is (just a light shade for the badges). */
#watch-main #w-episodes.aw-view-thumb .aw-th--still .aw-th__img { filter: brightness(.88); transform: none; }
#watch-main #w-episodes.aw-view-thumb a:hover .aw-th--still .aw-th__img { filter: brightness(1); transform: scale(1.05); }

#watch-main #w-episodes.aw-view-thumb .aw-th__ep,
#watch-main #w-episodes.aw-view-thumb .aw-th__seen,
#watch-main #w-episodes.aw-view-thumb .aw-th__dur  {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: var(--as-r-sm);
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

#watch-main #w-episodes.aw-view-thumb .aw-th__ep { top: 8px; left: 8px; background: var(--as-brand); }
#watch-main #w-episodes.aw-view-thumb .aw-th__dur { right: 8px; bottom: 9px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#watch-main #w-episodes.aw-view-thumb .aw-th__seen { top: 8px; right: 8px; display: none; background: rgba(5, 150, 105, .92); }
#watch-main #w-episodes.aw-view-thumb a.aw-seen:not(.active) .aw-th__seen { display: inline-flex; }

#watch-main #w-episodes.aw-view-thumb .aw-th__prog {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 4px;
    background: rgba(255, 255, 255, .22);
}

#watch-main #w-episodes.aw-view-thumb .aw-th__prog[hidden] { display: none; }
#watch-main #w-episodes.aw-view-thumb .aw-th__prog span { display: block; height: 100%; background: var(--as-grad); }

#watch-main #w-episodes.aw-view-thumb .aw-th__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 50%;
    background: rgba(134, 61, 186, .9);
    color: #fff;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .2s, transform .2s;
}

#watch-main #w-episodes.aw-view-thumb .aw-th__play svg { margin-left: 2px; }
#watch-main #w-episodes.aw-view-thumb a:hover .aw-th__play,
#watch-main #w-episodes.aw-view-thumb a:focus-visible .aw-th__play { opacity: 1; transform: scale(1); }

#watch-main #w-episodes.aw-view-thumb .aw-th__now {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid rgba(176, 114, 224, .6);
    border-radius: 999px;
    background: rgba(13, 12, 21, .7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#watch-main #w-episodes.aw-view-thumb a.active .aw-th__now { display: inline-flex; }
#watch-main #w-episodes.aw-view-thumb a.active .aw-th__play { display: none; }
#watch-main #w-episodes.aw-view-thumb a.active .aw-th,
#watch-main #w-episodes.aw-view-thumb a.active:hover .aw-th {
    box-shadow: 0 0 0 2px var(--as-bg), 0 0 0 4px var(--as-brand), 0 14px 30px -12px rgba(134, 61, 186, .85);
}
#watch-main #w-episodes.aw-view-thumb a.active .aw-th::after { background: linear-gradient(180deg, rgba(134, 61, 186, .28), rgba(0, 0, 0, .62)); }

#watch-main #w-episodes .aw-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
#watch-main #w-episodes .aw-eq i { width: 2px; height: 4px; background: currentColor; animation: aw-eq 1s ease-in-out infinite; }
#watch-main #w-episodes .aw-eq i:nth-child(2) { animation-delay: .2s; }
#watch-main #w-episodes .aw-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes aw-eq { 0%, 100% { height: 3px; } 50% { height: 10px; } }
@media (prefers-reduced-motion: reduce) { #watch-main #w-episodes .aw-eq i { height: 7px; animation: none; } }

#watch-main #w-episodes.aw-view-thumb .aw-eb { display: block; min-width: 0; padding: 10px 2px 0; }

#watch-main #w-episodes.aw-view-thumb .aw-eb__k {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--as-ink-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#watch-main #w-episodes.aw-view-thumb .aw-eb__k .aw-eq,
#watch-main #w-episodes.aw-view-thumb .aw-eb__ora { display: none; }
#watch-main #w-episodes.aw-view-thumb a.active .aw-eb__k { color: var(--aw-brand-text); }
#watch-main #w-episodes.aw-view-thumb a.active .aw-eb__k .aw-eq { display: inline-flex; }
#watch-main #w-episodes.aw-view-thumb a.active .aw-eb__ora { display: inline; }

#watch-main #w-episodes.aw-view-thumb .aw-eb__t {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--as-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .15s;
}

#watch-main #w-episodes.aw-view-thumb a.aw-seen .aw-eb__t { color: var(--as-ink-mute); }
#watch-main #w-episodes.aw-view-thumb a:hover .aw-eb__t,
#watch-main #w-episodes.aw-view-thumb a.active .aw-eb__t { color: var(--aw-brand-text); }

#watch-main #w-episodes.aw-view-thumb .aw-eb__m {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--as-ink-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Phones: one column of rows (thumb left, text right) — sample B mobile. */
@media (max-width: 479.98px) {
    #watch-main #w-episodes.aw-view-thumb .body .episodes { padding: 8px; }

    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a,
    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a:hover,
    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a.active,
    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a.active:hover {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px;
        border-radius: var(--as-r-lg);
    }

    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a:hover { background: var(--as-soft); }
    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a.active,
    #watch-main #w-episodes.aw-view-thumb ul.ep-range li a.active:hover {
        background: var(--as-brand-soft);
        box-shadow: inset 0 0 0 1px rgba(176, 114, 224, .45);
    }

    #watch-main #w-episodes.aw-view-thumb .aw-th { flex: 0 0 132px; border-radius: var(--as-r-md); }
    #watch-main #w-episodes.aw-view-thumb a:hover .aw-th,
    #watch-main #w-episodes.aw-view-thumb a.active .aw-th,
    #watch-main #w-episodes.aw-view-thumb a.active:hover .aw-th { transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
    #watch-main #w-episodes.aw-view-thumb a.active .aw-th__now,
    #watch-main #w-episodes.aw-view-thumb .aw-th__play { display: none; }
    #watch-main #w-episodes.aw-view-thumb .aw-th__ep,
    #watch-main #w-episodes.aw-view-thumb .aw-th__seen,
    #watch-main #w-episodes.aw-view-thumb .aw-th__dur { padding: 2px 5px; font-size: 9.5px; }
    #watch-main #w-episodes.aw-view-thumb .aw-th__ep { top: 6px; left: 6px; }
    #watch-main #w-episodes.aw-view-thumb .aw-th__seen { top: 6px; right: 6px; }
    #watch-main #w-episodes.aw-view-thumb .aw-th__dur { right: 6px; bottom: 6px; }
    #watch-main #w-episodes.aw-view-thumb .aw-eb { flex: 1; padding: 0; }
    #watch-main #w-episodes.aw-view-thumb .aw-eb__t { font-size: 13.5px; }
}

/* ---- Info card (right column) — reference aside .card ------------------- */
.aw-icard {
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    background: var(--as-elev);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(134, 61, 186, .1);
}

.aw-icard__cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--as-soft);
}

.aw-icard__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, transparent 100%);
}

.aw-icard__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.aw-icard__cover:hover .aw-icard__bg { transform: scale(1.05); }

@media (min-width: 640px) and (max-width: 1023.98px) {
    .aw-icard__cover { max-height: 260px; }
}

.aw-icard__poster {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1;
    width: 56px;
    height: 84px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4);
}

.aw-icard__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.aw-icard__title {
    display: block;
    font-family: var(--aw-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--as-ink);
    text-decoration: none;
    transition: color .15s;
}

.aw-icard__title:hover { color: var(--aw-brand-text); text-decoration: none; }

.aw-icard__alt {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--as-ink-dim);
}

.aw-icard__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.aw-icard__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: var(--as-r-sm);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
}

.aw-icard__badge--brand { background: var(--as-brand); color: #fff; }
a.aw-icard__badge--brand:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }
.aw-icard__badge--score { border-color: rgba(245, 158, 11, .32); background: rgba(245, 158, 11, .18); color: #fcd34d; }
html:not(.dark) .aw-icard__badge--score { color: #b45309; }

.aw-icard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    font-size: 12px;
}

.aw-icard__tile { min-width: 0; padding: 8px; border-radius: 8px; background: var(--as-soft); }

.aw-icard__tile dt {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}

.aw-icard__tile dd {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--as-ink);
}

.aw-icard__tile dd.is-num { font-size: 14px; font-weight: 700; }

.aw-icard__tile--wide { grid-column: 1 / -1; text-align: center; }
.aw-icard__tile--wide dd { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.aw-icard__tile--wide svg { color: var(--as-ink-dim); }

.aw-icard__genres { display: flex; flex-wrap: wrap; gap: 4px; }

.aw-icard__chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    background: var(--as-soft);
    color: var(--as-ink-mute);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.aw-icard__chip:hover { border-color: var(--as-brand); color: var(--as-ink); text-decoration: none; }

.aw-icard__story {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.65;
    color: var(--as-ink-mute);
}

.aw-icard__cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }

/* ---- Seasons -------------------------------------------------------------- */

.aw-sec-head { margin-bottom: 12px; }

#watch-main #w-seasons {
    margin: 0;
    overflow: hidden;
}

#watch-main #w-seasons .seasons { display: flex; margin: 0; }

#watch-main #w-seasons .seasons .season {
    flex-shrink: 0;
    width: 220px;
    padding-right: 12px;
}

#watch-main #w-seasons .seasons .season a {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 112px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    background: var(--as-soft);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

#watch-main #w-seasons .seasons .season a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    border: 0;
    background: linear-gradient(0deg, rgba(7, 6, 11, .92) 0%, rgba(7, 6, 11, .4) 60%, rgba(7, 6, 11, .15) 100%);
    opacity: 1;
}

#watch-main #w-seasons .seasons .season a::after { content: none; }

#watch-main #w-seasons .seasons .season a:hover { border-color: rgba(134, 61, 186, .6); transform: translateY(-2px); }

#watch-main #w-seasons .seasons .season.active a {
    border-color: var(--as-brand);
    box-shadow: 0 0 0 2px var(--as-brand-ring);
}

.aw-season__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

#watch-main #w-seasons .season a:hover .aw-season__bg { transform: scale(1.05); }

#watch-main #w-seasons .seasons .season a .name {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: auto;
    padding: 10px 12px;
    overflow: hidden;
    font-family: var(--aw-display);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    color: #fff;
}

.aw-season__now {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--as-brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#watch-main #w-seasons .swiper-pagination {
    position: static;
    margin-top: 10px;
    text-align: left;
}

#watch-main #w-seasons .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--as-border-strong);
    opacity: 1;
    transition: width .2s, background-color .2s;
}

#watch-main #w-seasons .swiper-pagination-bullet-active { width: 20px; border-radius: 999px; background: var(--as-brand); }

@media (max-width: 767.98px) {
    #watch-main #w-seasons .seasons .season { width: 172px; padding-right: 10px; }
    #watch-main #w-seasons .seasons .season a { height: 96px; }
}

/* ---- Rails (Related / Trending / Similar) --------------------------------- */

.aw .aw-rail-sec { margin-bottom: 0; }

.aw-rail-nav { display: flex; gap: 6px; flex-shrink: 0; }
.aw-rail-nav button[disabled] { opacity: .35; cursor: default; }

.aw .aw-rail {
    display: flex;
    gap: 16px;
    padding: 2px 0 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.aw .aw-rail::-webkit-scrollbar { display: none; }

.aw-rail__item {
    position: relative;
    flex: 0 0 calc((100% - 80px) / 6);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 1279.98px) { .aw-rail__item { flex-basis: calc((100% - 64px) / 5); } }
@media (max-width: 1023.98px) { .aw-rail__item { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 767.98px) {
    .aw .aw-rail { gap: 12px; }
    .aw-rail__item { flex-basis: 42%; }
    .aw-rail-nav { display: none; }
}

.aw-rel-label {
    display: block;
    margin-bottom: 6px;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--aw-brand-text);
}

/* ---- Share + comments ----------------------------------------------------- */

.aw-second { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.aw-second .aw-share { margin: 0; }

#watch-main #comments.block_area-comment.aw-comments {
    --cm-body: var(--as-elev);
    --cm-text: var(--as-ink);
    --cm-mute: var(--as-ink-mute);
    --cm-mute-2: var(--as-ink-dim);
    --cm-line: var(--as-border);
    --cm-line-strong: var(--as-border-strong);
    --cm-soft: var(--as-soft);
    --cm-soft-hov: var(--as-hover);
    --cm-acc: #863dba;
    --cm-acc-rgb: 134, 61, 186;
    --cm-acc2: #9b4dd1;
    --cm-acc2-rgb: 155, 77, 209;
    margin: 0;
    padding: 20px !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-r-xl) !important;
    background: var(--as-elev) !important;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5) !important;
    scroll-margin-top: 80px;
}

#watch-main #comments.aw-comments .block_area-header {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

#watch-main #comments.aw-comments .block_area-header .cat-heading {
    display: block;
    margin: 0;
    font-family: var(--aw-display) !important;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--as-ink);
}

#watch-main #comments.aw-comments .block_area-header .cat-heading::before { content: none; }

#watch-main #comments.aw-comments .ci-buttons .btn-primary {
    border: 0 !important;
    background: var(--as-grad) !important;
    color: #fff !important;
}

#watch-main #comments.aw-comments .ci-buttons .btn-primary:hover { filter: brightness(1.08); }

#watch-main #comments.aw-comments .comment-input .comment-container:focus-within {
    border-color: var(--as-brand);
    box-shadow: 0 0 0 3px var(--as-brand-ring);
}

#watch-main #comments.aw-comments .cm-rx {
    border-color: var(--as-border);
    background: var(--as-soft);
    color: var(--as-ink);
}

#watch-main #comments.aw-comments .cm-rx:hover { border-color: rgba(134, 61, 186, .5); background: var(--as-hover); }
#watch-main #comments.aw-comments .cm-rx.is-active { border-color: var(--as-brand); background: var(--as-brand-soft); }
@media (max-width: 639.98px) {
    #watch-main #comments.aw-comments .cm-rx { min-height: 36px; }
}

/* Reaction GIF chips: always one line — horizontal scroll (hidden bar, snap,
   keyboard via the focusable chips), soft fade on the overflowing edge(s). */
@property --aw-rx-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --aw-rx-fr { syntax: "<length>"; inherits: false; initial-value: 28px; }

#watch-main #comments.aw-comments .cm-reactions-inner {
    flex-wrap: nowrap;
    gap: 8px;
    margin: -4px 0;
    padding: 4px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--aw-rx-fl), #000 calc(100% - var(--aw-rx-fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--aw-rx-fl), #000 calc(100% - var(--aw-rx-fr)), transparent 100%);
}

#watch-main #comments.aw-comments .cm-reactions-inner::-webkit-scrollbar { display: none; }

/* Fade only where there is more to scroll to (scroll-driven; without support
   the right edge keeps a fade, the left one none). */
@supports (animation-timeline: scroll()) {
    #watch-main #comments.aw-comments .cm-reactions-inner {
        animation: aw-rx-fade linear both;
        animation-timeline: scroll(self inline);
    }
}

@keyframes aw-rx-fade {
    0% { --aw-rx-fl: 0px; --aw-rx-fr: 28px; }
    6% { --aw-rx-fl: 28px; }
    94% { --aw-rx-fr: 28px; }
    100% { --aw-rx-fl: 28px; --aw-rx-fr: 0px; }
}

#watch-main #comments.aw-comments .cm-rx {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
}

#watch-main #comments.aw-comments .cm-rx:focus { box-shadow: none; }
#watch-main #comments.aw-comments .cm-rx:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--as-brand-ring); }
#watch-main #comments.aw-comments .cm-rx-gif { flex-shrink: 0; }

#watch-main #comments.aw-comments .dropdown-menu-model {
    border: 1px solid var(--as-border);
    background: var(--as-elev);
}

.aw-comments__notice {
    padding: 12px 14px;
    border: 1px solid var(--as-border);
    border-left: 3px solid var(--as-border-strong);
    border-radius: var(--as-r-md);
    background: var(--as-soft);
}

.aw-comments__notice .cm-comment-notice { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--as-ink-mute); }

/* Light theme: comments.css hard-codes white text in a few places. */
html:not(.dark) #watch-main #comments.aw-comments .sc-header .btn:hover,
html:not(.dark) #watch-main #comments.aw-comments .sc-header .btn[aria-expanded="true"],
html:not(.dark) #watch-main #comments.aw-comments .cm-fmt-btn:hover,
html:not(.dark) #watch-main #comments.aw-comments .cm-fmt-btn:focus,
html:not(.dark) #watch-main #comments.aw-comments .cm-fmt-btn.is-active,
html:not(.dark) #watch-main #comments.aw-comments .rep-more.rep-in .cm-btn-show-rep:hover,
html:not(.dark) #watch-main #comments.aw-comments #cm-view-more:hover,
html:not(.dark) #watch-main #comments.aw-comments .dropdown-menu-model .dropdown-item:hover,
html:not(.dark) #watch-main #comments.aw-comments .dropdown-menu-model .dropdown-item:focus,
html:not(.dark) #watch-main #comments.aw-comments .dropdown-menu-model .dropdown-item.active,
html:not(.dark) #watch-main #comments.aw-comments .cm-body strong,
html:not(.dark) #watch-main #comments.aw-comments .cm-body .cm-md-h,
html:not(.dark) #watch-main #comments.aw-comments .cm-body h1,
html:not(.dark) #watch-main #comments.aw-comments .cm-body h2,
html:not(.dark) #watch-main #comments.aw-comments .cm-body h3 { color: var(--as-ink); }

html:not(.dark) #watch-main #comments.aw-comments .cw_l-line .ihead .user-name,
html:not(.dark) #watch-main #comments.aw-comments .cw_l-line .ibottom .ib-li .btn:hover,
html:not(.dark) #watch-main #comments.aw-comments .cw_l-line .ibody.is-spoil > .cm-body * { color: var(--as-ink) !important; }

html:not(.dark) #watch-main #comments.aw-comments .cw_l-line .ihead .eps,
html:not(.dark) #watch-main #comments.aw-comments .cw_l-line .ibody.is-spoil { background: var(--as-soft); }

html:not(.dark) #watch-main #comments.aw-comments .cw_l-line .ibody .show-spoil .btn { color: var(--as-brand) !important; }

/* ---- Share feedback toast (watch.js) ------------------------------------- */
.aw-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1100;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-elev);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55);
    color: var(--as-ink);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .2s, transform .2s;
}

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

/* ---- Report modal --------------------------------------------------------- */

.aw-report .aw-report__dialog { max-width: 420px; }

#w-report.aw-report .modal-content {
    overflow: hidden;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    background: var(--as-elev);
    color: var(--as-ink);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}

#w-report.aw-report .modal-header {
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--as-border);
    background: var(--as-soft);
}

#w-report.aw-report .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--as-ink);
}

#w-report.aw-report .modal-title i { color: var(--as-brand); }

#w-report.aw-report .modal-header .close {
    margin: 0 0 0 auto;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--as-ink-dim);
    font-size: 22px;
    opacity: 1;
    text-shadow: none;
}

#w-report.aw-report .modal-header .close:hover { color: var(--as-ink); }

#w-report.aw-report .modal-body { padding: 16px 18px 18px; }

.aw-report__anime { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.aw-report__anime img { flex-shrink: 0; width: 40px; height: 60px; border-radius: 8px; object-fit: cover; }
.aw-report__title { font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--as-ink); }
.aw-report__ep { margin-top: 2px; font-size: 12.5px; color: var(--as-ink-dim); }

.aw-report__issues { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }

.aw-report__legend {
    display: block;
    grid-column: 1 / -1;
    margin: 0 0 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}

.aw-report__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-soft);
    font-size: 13px;
    color: var(--as-ink-mute);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.aw-report__check:hover { border-color: var(--as-border-strong); color: var(--as-ink); }
.aw-report__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--as-brand); }
.aw-report__check:has(input:checked) { border-color: var(--as-brand); background: var(--as-brand-soft); color: var(--as-ink); }

.aw-report__text {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    background: var(--as-bg);
    color: var(--as-ink);
    font: inherit;
    font-size: 13.5px;
    resize: vertical;
}

.aw-report__text:focus { outline: none; border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); }
.aw-report__text::placeholder { color: var(--as-ink-dim); }

#w-report.aw-report .alert { margin: 0 0 12px; border-radius: var(--as-r-md); font-size: 13px; }

@media (max-width: 419.98px) {
    .aw-report__issues { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .aw *, .aw-report * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Live chat button: green "people online" dot */
#watch-main .aw-ctrl--live { position: relative; }
#watch-main .aw-ctrl--live .aw-live-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--as-soft);
    animation: aw-live-pulse 2s ease-in-out infinite;
}
@keyframes aw-live-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--as-soft), 0 0 0 0 rgba(34, 197, 94, .55); }
    50% { box-shadow: 0 0 0 2px var(--as-soft), 0 0 0 5px rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { #watch-main .aw-ctrl--live .aw-live-dot { animation: none; } }