/* ═══════════════════════════════════════════════════════════════
   WATCH PAGE — PROFESSIONAL LAYOUT POLISH
   Loaded only on the watch page. Overrides the saved-theme two
   column grid so the player gets full width.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kill the sidebar: full-width cinematic player ── */
body.watch-page #sidebar { display: none !important; }
body.watch-page .postbody { width: 100% !important; float: none !important; }
body.watch-page .wrapper { margin: 0 20px; }

body.watch-page .postbody .megavid {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Breadcrumb ── */
body.watch-page .ts-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    padding: 8px 0 14px;
    background: transparent;
    box-shadow: none;
    border: 0;
    margin: 0 auto;
    max-width: 1280px;
}
body.watch-page .ts-breadcrumb .bc-item + .bc-item::before {
    content: "/";
    margin-right: 6px;
    color: #666;
}
body.watch-page .ts-breadcrumb a { color: var(--text-gray, #b8b6cc); }
body.watch-page .ts-breadcrumb .bc-active a { color: var(--accent-purple, #9d6ee5); }

/* ── PLAYER CARD ── */
body.watch-page .megavid {
    background: #0a0a0e;
    border: 1px solid #262432;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
body.watch-page .mvelement { padding: 0; }
body.watch-page .video-content {
    position: relative;
    width: 100%;
    background: #000;
}
/* 16:9 cinematic frame */
body.watch-page #embed_holder {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    height: 0;
    background: #000;
}
body.watch-page #pembed {
    position: absolute;
    inset: 0;
    height: 100% !important;
    max-width: none;
    padding: 0 !important;
}
body.watch-page #main-player {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #000;
}

/* ── Player header / toolbar bar ── */
body.watch-page .lm { padding: 0; }
body.watch-page .item.meta {
    display: flex;
    flex-direction: column;
    padding: 18px 22px 14px;
}
body.watch-page .entry-title {
    font-size: 20px;
    line-height: 1.35;
    color: var(--text-primary, #eceaf6);
    margin: 0 0 6px;
    font-weight: 700;
}
body.watch-page .entry-title .ep-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-radius: 20px;
    padding: 3px 12px;
    letter-spacing: .3px;
}
body.watch-page .year.seo-only {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #8e8ca4);
    font-size: 13px;
    margin-top: 2px;
}
body.watch-page .year .status {
    display: inline-block;
    font-style: normal;
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
body.watch-page .year a { color: var(--accent-purple, #9d6ee5); }

/* ── Toolbar (mirror select + actions) ── */
body.watch-page .mobius {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #12121a;
    border-top: 1px solid #262432;
}
body.watch-page .mobius select.mirror {
    flex: 1 1 240px;
    min-width: 200px;
    background: var(--bg-button, #292936);
    color: var(--text-primary, #eceaf6);
    border: 1px solid #3a3748;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
}
body.watch-page .iconx {
    display: flex;
    gap: 8px;
    margin: 0;
}
body.watch-page .iconx .icol {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-gray, #b8b6cc);
    background: var(--bg-button, #292936);
    border: 1px solid #3a3748;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}
body.watch-page .iconx a.icol:hover,
body.watch-page .iconx .icol:hover {
    color: #fff;
    background: var(--hover-bg-light, #43325d);
    border-color: var(--hover-accent, #6f3bb5);
}
body.watch-page .iconx .icol.disabled { opacity: .35; cursor: not-allowed; }
body.watch-page .iconx .icol.light { color: #ffd76e; }
body.watch-page .iconx .download-btn { color: var(--text-gray, #b8b6cc); }
body.watch-page .iconx .download-btn:hover { color: #fff; }
body.watch-page .iconx .download-btn .icol {
    color: inherit;
    background: #1d7d33;
    border-color: #1d7d33;
}
body.watch-page .iconx .download-btn:hover .icol {
    background: #23a13f;
    border-color: #23a13f;
    color: #fff;
}

/* ── Server notice + Sub/Dub switcher ── */
body.watch-page .player-servers { padding: 0 22px; }
body.watch-page .ps_-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 0 4px;
}
body.watch-page .server-notice {
    color: var(--text-gray, #b8b6cc);
    font-size: 13px;
}
body.watch-page .server-notice strong { color: var(--text-primary, #eceaf6); font-weight: 600; }
body.watch-page .sd-switcher { margin: 0; display: flex; gap: 8px; }
body.watch-page .sd-btn {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray, #b8b6cc);
    background: var(--bg-button, #292936);
    border: 1px solid #3a3748;
    transition: all .15s ease;
}
body.watch-page .sd-btn:hover { color: #fff; border-color: var(--hover-accent, #6f3bb5); }
body.watch-page .sd-btn.active {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
}

/* ── Server pills ── */
body.watch-page .ps_-rows { padding: 8px 0 18px; }
body.watch-page .ps_-block { margin-bottom: 14px; }
body.watch-page .ps__-title {
    color: var(--text-muted, #8e8ca4);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
    margin-bottom: 8px;
}
body.watch-page .server-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.watch-page .server-opt {
    appearance: none;
    border: 1px solid #3a3748;
    background: var(--bg-button, #292936);
    color: var(--text-gray, #b8b6cc);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}
body.watch-page .server-opt:hover {
    color: #fff;
    border-color: var(--hover-accent, #6f3bb5);
    background: var(--hover-bg-light, #43325d);
}
body.watch-page .server-opt.selected {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
    box-shadow: 0 0 0 3px rgba(90, 46, 152, .25);
}

/* ── Episode selector header + tools ── */
body.watch-page .ep-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 10px;
    padding: 10px 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #262432;
    border-radius: 0;
}
body.watch-page .ep-list-title {
    color: var(--text-primary, #eceaf6);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.watch-page .ep-list-count {
    background: var(--primary-purple, #5a2e98);
    color: #fff;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 600;
}
body.watch-page .ep-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body.watch-page .ep-search {
    position: relative;
    display: flex;
    align-items: center;
}
body.watch-page .ep-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted, #8e8ca4);
    font-size: 13px;
    pointer-events: none;
}
body.watch-page #ep-search-input {
    width: 190px;
    background: var(--bg-button, #292936);
    color: var(--text-primary, #eceaf6);
    border: 1px solid #3a3748;
    border-radius: 20px;
    padding: 7px 32px 7px 32px;
    font-size: 13px;
    transition: border-color .15s ease, width .2s ease;
}
body.watch-page #ep-search-input:focus {
    outline: none;
    border-color: var(--primary-purple, #5a2e98);
    box-shadow: 0 0 0 3px rgba(90, 46, 152, .2);
}
body.watch-page #ep-search-input::placeholder { color: var(--text-muted, #8e8ca4); }
body.watch-page .ep-search-clear {
    position: absolute;
    right: 10px;
    color: var(--text-muted, #8e8ca4);
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease;
}
body.watch-page .ep-search-clear:hover { color: var(--text-primary, #eceaf6); }
body.watch-page .ep-current-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-gray, #b8b6cc);
    background: var(--bg-button, #292936);
    border: 1px solid #3a3748;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
body.watch-page .ep-current-btn:hover {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
}

/* ── Quick-range chips ── */
body.watch-page .ep-ranges-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 22px 10px;
}
body.watch-page .ep-range-chip {
    appearance: none;
    color: var(--text-muted, #8e8ca4);
    background: var(--bg-dark, #171721);
    border: 1px solid #262432;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
body.watch-page .ep-range-chip:hover {
    color: var(--text-primary, #eceaf6);
    border-color: var(--hover-accent, #6f3bb5);
}
body.watch-page .ep-range-chip.active {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
}

/* ── Episode grid ── */
body.watch-page #mainepisode { padding: 0 22px 6px; }
body.watch-page #mainepisode .episodes-ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
body.watch-page #mainepisode .episodes-ul::-webkit-scrollbar { width: 8px; }
body.watch-page #mainepisode .episodes-ul::-webkit-scrollbar-thumb {
    background: var(--primary-purple, #5a2e98);
    border-radius: 4px;
}
body.watch-page #mainepisode .item.ep-item {
    float: none;
    width: 48px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray, #b8b6cc);
    background: var(--bg-button, #292936);
    border: 1px solid transparent;
    transition: all .15s ease;
}
body.watch-page #mainepisode .item.ep-item:hover {
    color: #fff;
    border-color: var(--hover-accent, #6f3bb5);
    background: var(--hover-bg-light, #43325d);
}
body.watch-page #mainepisode .item.ep-item.watched,
body.watch-page #mainepisode .item.ep-item.active {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
    box-shadow: 0 0 0 3px rgba(90, 46, 152, .3);
}

/* ── Prev / All / Next nav ── */
body.watch-page .naveps.bignav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px 22px 20px;
    padding: 0;
}
body.watch-page .naveps.bignav .nvs { float: none; }
body.watch-page .naveps.bignav .nvs a,
body.watch-page .naveps.bignav .nvs .nolink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 130px;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray, #b8b6cc);
    background: var(--bg-button, #292936);
    border: 1px solid #3a3748;
    transition: all .15s ease;
}
body.watch-page .naveps.bignav .nvs a:hover {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
}
body.watch-page .naveps.bignav .nvs.nvsc a {
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
    color: #fff;
}
body.watch-page .naveps.bignav .nvs.nvsc a:hover {
    background: var(--primary-purple-dark, #44206e);
}
body.watch-page .naveps.bignav .nvs .nolink {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Mobile episode dropdown (desktop hidden) ── */
body.watch-page #mobilepisode { display: none; padding: 0 22px 6px; }
body.watch-page #mobilepisode select {
    width: 100%;
    background: var(--bg-button, #292936);
    color: var(--text-primary, #eceaf6);
    border: 1px solid #3a3748;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
}

/* ── Description block ── */
body.watch-page .postbody .entry-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}
body.watch-page .entry-content .bixbox {
    background: var(--bg-dark, #171721);
    border: 1px solid #262432;
    border-radius: 12px;
    padding: 16px 20px;
}
body.watch-page .entry-content p {
    color: var(--text-gray, #b8b6cc);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* ── Series info card ── */
body.watch-page .postbody .single-info.bixbox {
    max-width: 1280px;
    margin: 16px auto 0;
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--bg-dark, #171721);
    border: 1px solid #262432;
    border-radius: 12px;
}
body.watch-page .single-info .thumb {
    flex: 0 0 168px;
    width: 168px;
}
body.watch-page .single-info .thumb img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
body.watch-page .single-info .infox { flex: 1; min-width: 0; }
body.watch-page .single-info .infolimit h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary, #eceaf6);
    margin: 0 0 4px;
}
body.watch-page .single-info .infolimit h2 a { color: inherit; }
body.watch-page .single-info .infolimit h2 a:hover { color: var(--accent-purple, #9d6ee5); }
body.watch-page .single-info .alter { color: var(--text-muted, #8e8ca4); font-size: 12px; }
body.watch-page .single-info .rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    background: transparent;
    padding: 0;
}
body.watch-page .single-info .rating strong { color: var(--text-primary, #eceaf6); font-size: 14px; }
body.watch-page .single-info .rating .rtp { width: 120px; height: 8px; background: #262432; border-radius: 6px; overflow: hidden; }
body.watch-page .single-info .rating .rtb { height: 100%; background: var(--primary-purple, #5a2e98); }
body.watch-page .single-info .info-content .spe {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 0;
}
body.watch-page .single-info .info-content .spe span {
    color: var(--text-gray, #b8b6cc);
    font-size: 13px;
}
body.watch-page .single-info .info-content .spe span b {
    color: var(--text-light, #d6d4e6);
    font-weight: 600;
}
body.watch-page .single-info .genxed {
    margin: 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.watch-page .single-info .genxed a {
    color: var(--text-gray, #b8b6cc);
    background: var(--bg-button, #292936);
    border: 1px solid #3a3748;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    transition: all .15s ease;
}
body.watch-page .single-info .genxed a:hover {
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border-color: var(--primary-purple, #5a2e98);
}
body.watch-page .single-info .mindes {
    color: var(--text-gray, #b8b6cc);
    font-size: 13.5px;
    line-height: 1.7;
    margin-top: 8px;
}

/* ── Related shelf container alignment ── */
body.watch-page .related-shelf {
    max-width: 1280px;
    margin: 24px auto 0;
}

/* ── Lights-out overlay ── */
#lights-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9990;
}
body.watch-page:has(#lights-overlay[style*="display: block"]) .megavid { z-index: 9991; position: relative; }

/* ── No working servers state ── */
body.watch-page .no-servers-message {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 30px;
    color: var(--text-gray, #b8b6cc);
}
body.watch-page .no-servers-message i {
    font-size: 34px;
    color: var(--accent-purple, #9d6ee5);
}
body.watch-page .no-servers-message h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #eceaf6);
}
body.watch-page .no-servers-message p {
    margin: 0;
    max-width: 460px;
    font-size: 13px;
    line-height: 1.6;
}
body.watch-page .no-servers-message .retry-btn {
    margin-top: 6px;
    padding: 10px 22px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-purple, #5a2e98);
    border: 1px solid var(--primary-purple, #5a2e98);
    transition: all .15s ease;
}
body.watch-page .no-servers-message .retry-btn:hover {
    background: var(--primary-purple-dark, #44206e);
    border-color: var(--primary-purple-dark, #44206e);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    body.watch-page #mobilepisode { display: block; }
    body.watch-page .postbody .single-info.bixbox { flex-direction: column; }
    body.watch-page .single-info .thumb { flex: 0 0 auto; width: 140px; }
    body.watch-page .mobius { flex-direction: column; align-items: stretch; }
    body.watch-page .iconx { flex-wrap: wrap; }
    body.watch-page #embed_holder { padding-top: 60%; }
    body.watch-page .ep-tools { width: 100%; justify-content: space-between; }
    body.watch-page #ep-search-input { flex: 1; width: auto; min-width: 140px; }
}
@media (max-width: 600px) {
    body.watch-page .entry-title { font-size: 17px; }
    body.watch-page #embed_holder { padding-top: 64%; }
}

/* ── External Quick Fullscreen Button for Video Iframe ── */
.player-quick-fs-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 105;
    width: 42px;
    height: 42px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    background: rgba(18, 16, 26, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ede9fe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    padding: 0;
    line-height: 1;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.player-quick-fs-btn:hover {
    opacity: 1;
    background: rgba(90, 46, 152, 0.95);
    border-color: #a78bfa;
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(90, 46, 152, 0.5);
}
.player-quick-fs-btn:active {
    transform: scale(0.92);
    background: rgba(124, 58, 237, 0.98);
}
@media (max-width: 768px) {
    .player-quick-fs-btn {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 15px;
        border-radius: 9px;
    }
    body.watch-page .mobius .iconx {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    body.watch-page .mobius .iconx .icol {
        flex: 1 1 calc(33.333% - 6px);
        min-height: 42px;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12.5px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}
@media (max-width: 420px) {
    body.watch-page .mobius .iconx .icol {
        padding: 7px 8px;
        font-size: 12px;
    }
    body.watch-page .mobius .iconx .icol span {
        font-size: 11.5px;
    }
}