/* Watch page: poster + manual play overlay (Auto Play off) */
.player-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
}

.player-poster-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0f;
    cursor: pointer;
    z-index: 1;
}

.player-poster-bg {
    position: absolute;
    inset: 0;
    background-color: #121218;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.02);
    filter: brightness(0.55);
}

.player-poster-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 16, 0.35) 0%,
        rgba(10, 10, 16, 0.55) 45%,
        rgba(10, 10, 16, 0.75) 100%
    );
    pointer-events: none;
}

.player-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111;
    background: var(--accent-color, #ffbade);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.player-play-btn i {
    font-size: 26px;
    margin-left: 4px;
    line-height: 1;
}

.player-play-btn:hover,
.player-play-btn:focus {
    outline: none;
    transform: translate(-50%, -50%) scale(1.06);
    background: #fff;
    color: #111;
}

.player-play-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 186, 222, 0.55), 0 8px 28px rgba(0, 0, 0, 0.45);
}

@media (max-width: 575px) {
    .player-play-btn {
        width: 58px;
        height: 58px;
    }

    .player-play-btn i {
        font-size: 20px;
        margin-left: 3px;
    }
}

/**
 * Mobile servers-content:
 * Theme sets min-height:auto so the empty AJAX shell collapses, then jumps when HTML arrives.
 * Only reserve height while empty/loading — do not restyle SUB/DUB rows (that broke float height).
 */
@media screen and (max-width: 759px) {
    .player-servers {
        overflow: visible;
    }

    .player-servers #servers-content {
        overflow: visible;
        box-sizing: border-box;
    }

    /* Reserve space only before servers HTML is ready */
    .player-servers #servers-content:empty,
    .player-servers #servers-content:has(> .loading-relative) {
        min-height: 132px;
    }

    .player-servers #servers-content > .loading-relative.loading-box {
        min-height: 132px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* Floated server buttons need a clear inside the list */
    .player-servers .ps__-list::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Tighten the tall “You are watching…” block a bit */
    .player-servers .ps_-status {
        padding: 10px 0 12px;
    }

    .player-servers .ps_-status .server-notice {
        font-size: 12px;
        line-height: 1.35em;
    }
}

/*
 * Watch series-info (.anis-watch-detail):
 * - Desktop (≥1401): real 2-column grid (player | info) — no absolute sidebar hole
 * - Medium (861–1400): poster | detail | vote
 * - Mobile (≤860): vote → poster+detail; kill blank stage gap
 */

/* Desktop: replace absolute right-rail with a grid so wrap height matches content */
@media screen and (min-width: 1401px) {
    .layout-page-watchtv .anis-watch-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(280px, 24%, 360px);
        column-gap: 24px;
        align-items: start;
        padding: 12px 0 16px;
    }

    .layout-page-watchtv .anis-watch-wrap > .prebreadcrumb,
    .layout-page-watchtv .anis-watch-wrap > .ad-section {
        grid-column: 1 / -1;
    }

    .layout-page-watchtv .anis-watch {
        width: 100% !important;
        max-width: none;
        grid-column: 1;
    }

    .layout-page-watchtv .anis-watch-detail {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        margin: 0;
        padding: 0 !important;
        grid-column: 2;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content {
        padding: 0 !important;
    }

    /* Compact rail: keep the same structure, just less empty vertical space */
    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-poster {
        width: 96px !important;
        margin-bottom: 14px !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .film-name {
        font-size: 18px;
        margin-bottom: 10px !important;
        line-height: 1.25;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .film-stats {
        margin-bottom: 10px !important;
    }

    .layout-page-watchtv .anis-watch-detail .film-description {
        min-height: 0 !important;
        max-height: 4.5em;
        margin-bottom: 8px !important;
        overflow: hidden;
    }

    /* More/Less: let the synopsis grow so it doesn't paint over .film-text */
    .layout-page-watchtv .anis-watch-detail .film-description:has(.text-full) {
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        -webkit-line-clamp: unset;
    }

    .layout-page-watchtv .anis-watch-detail .film-description .text {
        font-size: 12px;
        line-height: 1.4em;
    }

    .layout-page-watchtv .anis-watch-detail .film-text {
        margin-top: 8px !important;
        margin-bottom: 10px !important;
        font-size: 12px;
        line-height: 1.4em;
    }

    .layout-page-watchtv .anis-watch-detail .film-text.mb-3 {
        margin-bottom: 10px !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .block {
        margin-top: 0;
        margin-bottom: 0;
    }

    .layout-page-watchtv .anis-watch-detail .dt-rate {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 12px;
        box-sizing: border-box;
    }

    .layout-page-watchtv .anis-watch-detail .dt-rate .block-rating {
        margin: 0 !important;
    }

    .layout-page-watchtv .anis-watch-detail .dt-rate .block-rating .description {
        margin: 8px 0;
        font-size: 12px;
    }

    .layout-page-watchtv .anis-watch-detail .dt-rate .block-rating .rating-result {
        padding: 10px 12px;
    }

    /*
     * Fluid 16:9 player box.
     * padding-bottom:% can resolve to 0 inside this grid (indefinite % base) and
     * collapse the iframe — leaving the blurred .anis-cover as a huge empty band.
     */
    .layout-page-watchtv .anis-watch,
    .layout-page-watchtv .watch-player {
        min-width: 0;
        width: 100%;
    }

    .layout-page-watchtv .anis-watch-tv .player-frame {
        padding-bottom: 0 !important;
        aspect-ratio: 16 / 9;
        width: 100%;
        min-height: 240px;
        height: auto;
    }

    .layout-page-watchtv #ani_detail .ani_detail-stage {
        margin-bottom: 12px !important;
    }

    .layout-page-watchtv .share-buttons.share-buttons-detail {
        margin-top: 0;
    }

    /* Expand: collapse the info rail so the player can go full width */
    .layout-page-watchtv .anis-watch-wrap.extend {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-page-watchtv .anis-watch-wrap.extend .anis-watch-detail {
        display: none !important;
    }

    .layout-page-watchtv .anis-watch-wrap.extend .anis-watch {
        grid-column: 1 / -1;
        width: 100% !important;
    }

    /*
     * Light / theater:
     * - Theme swaps episode gutter (300px) for 150/150 padding — that shrinks AND shifts
     *   the iframe under our grid, and zeroing padding makes the player swallow the
     *   episode column (huge lit surface). Keep the normal 300px left gutter.
     * - Only .player-frame rises above #mask-overlay (z-index:102).
     */
    .layout-page-watchtv .anis-watch-wrap.active {
        z-index: auto;
    }

    .layout-page-watchtv .anis-watch-wrap.active .anis-watch-tv {
        padding-left: 300px !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .layout-page-watchtv .anis-watch-wrap.active .watch-player {
        position: relative;
        z-index: auto;
        background: transparent;
    }

    .layout-page-watchtv .anis-watch-wrap.active .player-frame {
        position: relative;
        z-index: 999;
    }

    /* Keep chrome under the mask — do not let absolute episode rail paint above it */
    .layout-page-watchtv .anis-watch-wrap.active .player-controls,
    .layout-page-watchtv .anis-watch-wrap.active .player-servers,
    .layout-page-watchtv .anis-watch-wrap.active .schedule-alert,
    .layout-page-watchtv .anis-watch-wrap.active .anis-watch-detail,
    .layout-page-watchtv .anis-watch-wrap.active .prebreadcrumb {
        z-index: auto !important;
    }

    .layout-page-watchtv .anis-watch-wrap.active #episodes-content {
        z-index: 0 !important;
    }
}

/* Mid / small: no episode gutter — cancel theme's 150/150 theater padding so iframe stays put */
@media screen and (max-width: 1400px) {
    .layout-page-watchtv .anis-watch-wrap.active {
        z-index: auto;
    }

    .layout-page-watchtv .anis-watch-wrap.active .anis-watch-tv {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .layout-page-watchtv .anis-watch-wrap.active .watch-player {
        position: relative;
        z-index: auto;
        background: transparent;
    }

    .layout-page-watchtv .anis-watch-wrap.active .player-frame {
        position: relative;
        z-index: 999;
    }

    .layout-page-watchtv .anis-watch-wrap.active .player-controls,
    .layout-page-watchtv .anis-watch-wrap.active .player-servers,
    .layout-page-watchtv .anis-watch-wrap.active .schedule-alert {
        z-index: auto !important;
    }
}

/* Hide vote/reaction box once the watch rail gets tight */
@media screen and (max-width: 1400px) {
    .layout-page-watchtv .anis-watch-detail .dt-rate {
        display: none !important;
    }
}

/* Medium: under-player band — replace absolute/padding hacks with a grid */
@media screen and (max-width: 1400px) and (min-width: 861px) {
    .layout-page-watchtv .anis-watch-detail {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        padding: 20px 12px 16px !important;
        margin-bottom: 0;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-areas: "poster detail";
        column-gap: 16px;
        row-gap: 10px;
        align-items: start;
        padding: 0 !important;
        min-height: 0 !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-poster {
        grid-area: poster;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 88px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail {
        grid-area: detail;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0;
        min-height: 0 !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .film-stats {
        margin-bottom: 8px !important;
    }

    /*
     * Theme sets min-height:80px on .film-description for the desktop rail.
     * Short synopses still reserve that box → big empty gap before .film-text.
     */
    .layout-page-watchtv .anis-watch-detail .film-description {
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    .layout-page-watchtv .anis-watch-detail .film-text {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .block {
        margin-top: 0;
    }

    /*
     * Theme (+ our earlier clamp) used -webkit-line-clamp on .film-description.m-hide.
     * main.js already truncates with More/Less; keeping the clamp made expanded text
     * overflow visibly over .film-text (layout height stayed ~3 lines).
     */
    .layout-page-watchtv .anis-watch-detail .film-description.m-hide {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .layout-page-watchtv .anis-watch-detail .film-text.m-hide {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

/* Mobile: poster + detail; remove blank band */
@media screen and (max-width: 860px) {
    .layout-page-watchtv .anis-watch-detail {
        position: relative !important;
        width: auto !important;
        padding: 16px 12px 12px !important;
        margin-bottom: 0 !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas: "poster detail";
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
        padding: 0 !important;
        min-height: 0 !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-poster {
        grid-area: poster;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 72px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail {
        grid-area: detail;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0;
        min-height: 0 !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .film-name {
        font-size: 18px !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .film-stats {
        text-align: left !important;
        margin-bottom: 8px !important;
    }

    .layout-page-watchtv .anis-watch-detail .film-description {
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    .layout-page-watchtv .anis-watch-detail .film-text {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .layout-page-watchtv .anis-watch-detail .anis-content .anisc-detail .block {
        margin-top: 0;
    }

    .layout-page-watchtv .anis-watch-detail .film-description.m-hide,
    .layout-page-watchtv .anis-watch-detail .film-text.m-hide {
        display: block !important;
        -webkit-line-clamp: unset !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1;
        font-size: 12px;
        line-height: 1.45em;
    }

    .layout-page-watchtv #ani_detail .ani_detail-stage,
    .layout-page-watch #ani_detail .ani_detail-stage {
        margin-bottom: 12px !important;
    }

    #main-wrapper.layout-page-watchtv,
    #main-wrapper.layout-page-watch {
        min-height: 0 !important;
    }
}