/* Auto-extracted from index.html inline styles */

/* =============================================================
   1. Keyframe Animations
============================================================= */
@keyframes desktopTextSlide {
    0% { opacity: 0; transform: translateX(-25px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes mobilePosterPop {
    0% { opacity: 0; transform: scale(0.96) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mobileTextUp {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes shimmerText {
    0% { opacity: 0.85; text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
    50% { opacity: 1; text-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 24px rgba(0, 150, 255, 0.6); }
    100% { opacity: 0.85; text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
}

@keyframes buttonPulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(229, 9, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

/* =============================================================
   2. Clean & Borderless Poster Image
============================================================= */
.gen-banner-movies .gen-front-image img,
.gen-banner-movies .poster-wrapper img {
    opacity: 0.88 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    mix-blend-mode: normal !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    background: transparent !important;
    /* Poster stays still — no up/down float */
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

@media screen and (min-width: 1200px) {
    .gen-banner-movies .poster-wrapper:hover img,
    .gen-banner-movies .gen-front-image:hover img {
        animation: none !important;
        transform: none !important;
        opacity: 0.88 !important;
    }
}

.gen-banner-movies .gen-front-image,
.gen-banner-movies .poster-wrapper {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative !important;
}

.gen-banner-movies .item::before,
.gen-banner-movies .item::after,
.gen-banner-movies .gen-front-image::before,
.gen-banner-movies .gen-front-image::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dynamic single-view slide styling */
#heroDynamicSlide {
    background-size: cover !important;
    background-position: center center !important;
    transition: background-image 0.4s ease-in-out;
}

/* =============================================================
   3. Desktop Text Container & Animated Effects
============================================================= */
.gen-banner-movies .row > .col-xl-6:last-child {
    background: linear-gradient(
        90deg, 
        rgba(10, 12, 18, 0.88) 0%, 
        rgba(10, 12, 18, 0.60) 75%, 
        transparent 100%
    ) !important;
    padding: 25px 30px !important;
    border-radius: 10px;
    border: none !important;
    animation: desktopTextSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.gen-banner-movies .gen-movie-info h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.gen-banner-movies .gen-movie-meta-holder p {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95) !important;
}

.gen-banner-movies .gen-meta-info li,
.gen-banner-movies .gen-meta-title,
.gen-banner-movies .gen-meta-value,
.gen-banner-movies .gen-meta-value a {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* =============================================================
   4. Animated 1440p Badge & Action Button
============================================================= */
.gen-banner-movies .gen-movie-meta-holder ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
}

.gen-banner-movies .gen-sen-rating,
.gen-banner-movies .gen-quality-badge {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-block !important;
    border: none !important;
}

.gen-banner-movies .gen-sen-rating::before,
.gen-banner-movies .gen-sen-rating::after,
.gen-banner-movies .gen-quality-badge::before,
.gen-banner-movies .gen-quality-badge::after {
    content: "" !important;
    display: none !important;
    border: none !important;
}

.gen-banner-movies .gen-quality-badge span,
.gen-banner-movies .gen-quality-badge span strong {
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    animation: shimmerText 3s infinite ease-in-out !important;
}

.gen-banner-movies .gen-btn-container a.gen-button {
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.gen-banner-movies .gen-btn-container a.gen-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
    animation: buttonPulse 1.5s infinite !important;
}

/* =============================================================
   5. Video Intro Overlay Base (Desktop Untouched)
============================================================= */
#video-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0a0f14;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.6s ease-in-out;
}

.video-intro-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000000;
}

.video-intro-buttons {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 100000;
    display: flex;
    gap: 10px;
}

#soundToggleBtn, #skipIntroBtn {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.3s ease;
}

#soundToggleBtn:hover, #skipIntroBtn:hover {
    background: rgba(229, 9, 20, 0.8);
    border-color: transparent;
}

/* =============================================================
   6. Dynamic Search Section & View Counter Styling
============================================================= */
.search-results-section {
    background: #0c1218;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid #e50914;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 999;
    width: 100%;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-results-title {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0;
}

.clear-search-btn {
    background: rgba(229, 9, 20, 0.2);
    border: 1px solid #e50914;
    color: #ffffff;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-search-btn:hover {
    background: #e50914;
}

.no-games-found {
    color: #ffffff;
    font-size: 1.1rem;
    padding: 40px 0;
    text-align: center;
}

.search-results-section .movie-grid,
.search-results-section .gen-carousel-movies-style-2 {
    width: 100%;
    margin-bottom: 20px;
}

.gen-movie-img {
    position: relative;
    overflow: hidden;
}

/* Compact view badge — stays inside card image */
.game-view-count {
    position: absolute;
    top: 6px;
    left: 6px;
    max-width: calc(100% - 100px);
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 8;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.game-view-count i {
    color: #e50914;
    font-size: 9px;
    flex-shrink: 0;
}

.game-view-count .view-number {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main Walkthrough: Views then 1440p — single border on quality chip only */
.cinematic-slide .gen-movie-meta-holder > ul {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none !important;
  padding-left: 0 !important;
}
.cinematic-slide .sp-hero-views-li,
.cinematic-slide .gen-quality-badge,
.cinematic-slide .gen-sen-rating {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cinematic-slide .gen-quality-badge::before,
.cinematic-slide .gen-quality-badge::after,
.cinematic-slide .gen-sen-rating::before,
.cinematic-slide .gen-sen-rating::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
.cinematic-slide .sp-hero-views {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  background: linear-gradient(145deg, rgba(10,12,18,.9), rgba(18,20,28,.72));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  animation: spHeroChipIn .4s ease both;
}
.cinematic-slide .sp-hero-views i {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(229, 9, 20, .14);
  color: #e50914;
  font-size: 11px;
}
/* 1440p: single border around text only (outer span) */
.cinematic-slide .gen-quality-badge > span,
.cinematic-slide .gen-sen-rating > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  background: linear-gradient(145deg, rgba(229, 9, 20, .22), rgba(229, 9, 20, .08)) !important;
  border: 1px solid rgba(229, 9, 20, .5) !important;
  outline: none !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .8px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  animation: none !important;
  text-shadow: none !important;
}
/* strong is text only — no second border/box */
.cinematic-slide .gen-quality-badge span strong,
.cinematic-slide .gen-sen-rating span strong {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  letter-spacing: inherit !important;
  animation: none !important;
  text-shadow: none !important;
}
.cinematic-slide .gen-quality-badge > span::before,
.cinematic-slide .gen-sen-rating > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e50914;
  box-shadow: 0 0 8px rgba(229, 9, 20, .7);
  flex-shrink: 0;
}

/* Ensure no double box from global .gen-banner-movies quality rules */
.cinematic-slide .gen-quality-badge span strong,
.cinematic-slide .gen-sen-rating span strong {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@keyframes spHeroChipIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1199px) {
  .cinematic-slide .sp-hero-views,
  .cinematic-slide .gen-quality-badge span,
  .cinematic-slide .gen-quality-badge span strong,
  .cinematic-slide .gen-sen-rating span,
  .cinematic-slide .gen-sen-rating span strong {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}


/* Custom interactive cursor for playable game elements */
.game-switch-btn {
    cursor: pointer;
}

/* =============================================================
   7. Mobile Screen Adjustments (< 1200px & Mobile Devices)
============================================================= */
@media screen and (max-width: 1199px) {
    /* Same feature set as desktop — stacked for narrow screens, full 16:9 player */
    .cinematic-slide .row.flex-row-reverse {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 12px 0 18px 0 !important;
        margin: 0 !important;
    }

    .cinematic-slide .row.flex-row-reverse > .col-xl-6.text-center {
        order: 1 !important;
        width: 94% !important;
        max-width: 94% !important;
        flex: 0 0 94% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        z-index: 1 !important;
        display: flex !important;
        justify-content: center !important;
        animation: mobilePosterPop 0.6s ease-out forwards !important;
    }

    /* Offline / non-live only — never force play on LIVE cards */
    .cinematic-slide:not([data-live="on"]) .playBut,
    .cinematic-slide[data-live="off"] .playBut {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    .cinematic-slide[data-live="on"] .playBut,
    .cinematic-slide[data-live="on"] a.playBut {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .cinematic-slide .playBut svg {
        display: block !important;
        width: 60px !important;
        height: 60px !important;
    }

    .cinematic-slide .playBut span {
        display: none !important;
    }

    /* True 16:9 player surface — transparent like desktop (black only while playing) */
    .cinematic-slide .poster-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        display: block !important;
        aspect-ratio: 16 / 9 !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 10px 10px 0 0 !important;
        background: transparent !important;
    }


    .cinematic-slide .poster-wrapper img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: inherit !important;
    }

    .cinematic-slide .row.flex-row-reverse > .col-xl-6:not(.text-center) {
        order: 2 !important;
        width: 94% !important;
        max-width: 94% !important;
        flex: 0 0 94% !important;
        margin-top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        z-index: 2 !important;
        text-align: left !important;
        background: linear-gradient(
            180deg, 
            rgba(10, 12, 18, 0.96) 0%, 
            rgba(10, 12, 18, 0.88) 100%
        ) !important;
        padding: 14px 16px !important;
        border-radius: 0 0 10px 10px !important;
        box-sizing: border-box !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
        animation: mobileTextUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards !important;
    }

    .gen-banner-movies .gen-movie-info h3 {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .gen-banner-movies .gen-movie-meta-holder ul {
        margin-top: 0px !important;
        margin-bottom: 8px !important;
    }

    .gen-banner-movies .gen-movie-meta-holder p {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        max-height: none !important;
        word-break: break-word !important;
    }

    .gen-banner-movies .gen-movie-info h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word !important;
    }

    .gen-banner-movies .gen-meta-info {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }

    .gen-banner-movies .gen-btn-container a.gen-button {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    .cinematic-slide, 
    .cinematic-slide .gen-movie-contain-style-2 {
        height: auto !important;
        min-height: 100% !important;
    }

    /* Keep banner cards fully visible and professional on phones */
    .gen-banner-movies .owl-item,
    .gen-banner-movies .item {
        overflow: visible !important;
    }
}

@media screen and (max-width: 767px) {
    #video-intro-overlay {
        height: 100dvh;
    }

    #introVideo {
        object-fit: contain;
    }

    .video-intro-buttons {
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
        width: 90%;
        justify-content: center;
    }

    #soundToggleBtn, #skipIntroBtn {
        flex: 1;
        padding: 10px 12px;
        font-size: 13px;
        text-align: center;
    }
}

.sp-fav-btn{position:absolute;top:10px;right:10px;z-index:20;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(4px);font-size:16px;line-height:1;padding:0;margin:0}
.sp-fav-btn:hover,.sp-fav-btn.active{background:#e50914;border-color:#e50914;transform:scale(1.12)}
.gen-movie-img{position:relative!important}
#sp-toast-wrap{position:fixed;bottom:24px;right:24px;z-index:999998;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.sp-toast{background:#12161e;border:1px solid rgba(229, 9, 20, .45);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.6);animation:spToastIn .35s ease;pointer-events:auto;max-width:300px}
@keyframes spToastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.sp-float-btns{position:fixed;bottom:28px;left:28px;z-index:9990;display:flex;flex-direction:column;gap:10px}
.sp-random-btn,.sp-favs-link{background:#e50914;color:#fff;border:none;border-radius:50px;padding:12px 20px;font-weight:800;font-size:12px;letter-spacing:1px;cursor:pointer;box-shadow:0 8px 28px rgba(229, 9, 20, .45);transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sp-favs-link{background:#161b23;border:1px solid rgba(229, 9, 20, .5)}
.sp-random-btn:hover,.sp-favs-link:hover{transform:translateY(-3px) scale(1.04);color:#fff;text-decoration:none;box-shadow:0 12px 36px rgba(229, 9, 20, .55)}
@media(max-width:767px){.sp-float-btns{bottom:16px;left:16px}.sp-random-btn,.sp-favs-link{padding:10px 14px;font-size:11px}}


/* STUPPLAYS COMING SOON + HUB + UI extras */
.sp-coming-soon{position:relative;margin:10px 0 20px}
.sp-cs-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:18px}
.sp-cs-kicker{color:#e50914;font:800 10px/1 "Courier New",Courier,monospace;letter-spacing:3px}
.sp-cs-cal-link{margin-left:auto;color:#aab2bd;font-size:12px;font-weight:700;text-decoration:none}
.sp-cs-cal-link:hover{color:#e50914}
.sp-cs-slide{position:relative!important;background-size:cover!important;background-position:center!important;min-height:320px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:0 20px 50px rgba(0,0,0,.55)}
.sp-cs-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.72) 45%,rgba(8,10,14,.25) 100%);z-index:1;pointer-events:none}
.sp-cs-slide .gen-movie-contain{position:relative;z-index:2}
.sp-cs-slide .gen-movie-info h3{color:#fff!important;font-size:clamp(1.6rem,3vw,2.35rem)!important;font-weight:900!important;margin:0 0 8px!important;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.sp-cs-sub{color:#a8b0bc;font-size:.92rem;line-height:1.5;margin:0 0 4px;max-width:420px}
.cs-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 14px;background:linear-gradient(135deg,rgba(229, 9, 20, .3),rgba(229, 9, 20, .08));border:1px solid rgba(229, 9, 20, .55);border-radius:4px;color:#ff3b44;font:800 11px/1 "Courier New",Courier,monospace;letter-spacing:2.5px;text-transform:uppercase;box-shadow:0 0 18px rgba(229, 9, 20, .28);animation:csBadgePulse 2.4s ease-in-out infinite}
.cs-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#e50914;box-shadow:0 0 8px #e50914}
@keyframes csBadgePulse{0%,100%{box-shadow:0 0 12px rgba(229, 9, 20, .22)}50%{box-shadow:0 0 24px rgba(229, 9, 20, .5)}}
.cs-released{color:#4ade80!important;border-color:rgba(74,222,128,.55)!important;background:linear-gradient(135deg,rgba(74,222,128,.22),rgba(74,222,128,.06))!important;animation:none!important}
.cs-released::before{background:#4ade80!important;box-shadow:0 0 8px #4ade80!important}
.cs-countdown{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:440px}
.cs-countdown .cs-unit{flex:1 1 72px;min-width:72px;padding:14px 10px 12px;background:linear-gradient(165deg,rgba(18,22,30,.95),rgba(8,10,14,.95));border:1px solid rgba(255,255,255,.07);border-top:2px solid #e50914;border-radius:8px;text-align:center;backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.cs-countdown .cs-num{display:block;color:#fff;font-size:1.65rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(229, 9, 20, .4)}
.cs-countdown .cs-label{display:block;margin-top:8px;color:#6f7a8a;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-family:"Courier New",Courier,monospace}
.sp-cs-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.sp-notify-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;padding:8px 14px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:.2s}
.sp-notify-btn:hover,.sp-notify-btn.active{background:#e50914;border-color:#e50914}
.sp-coming-soon .owl-dot.active span{background:#e50914!important}









/* Accent toggle root */








@media(max-width:767px){
.sp-cs-slide{min-height:280px}
.cs-countdown .cs-unit{min-width:58px;flex:1 1 58px;padding:10px 6px}
.cs-countdown .cs-num{font-size:1.25rem}


}


/* Shared holiday styles (also in header.html for other pages) */
#sp-holiday-ui{position:fixed;inset:0;pointer-events:none;z-index:99990;overflow:hidden;contain:layout style paint}
#sp-holiday-ui .sp-holiday-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#sp-holiday-ui .sp-flake{position:absolute;top:-20px;color:#fff;opacity:.85;font-size:14px;animation:spFall linear infinite;text-shadow:0 0 6px rgba(255,255,255,.5);user-select:none;pointer-events:none}
#sp-holiday-ui.sp-holiday-theme-newyear .sp-flake{color:#ffd700;text-shadow:0 0 8px rgba(255,215,0,.8)}
#sp-holiday-ui.sp-holiday-theme-halloween .sp-flake{color:#ff6b00}
#sp-holiday-ui.sp-holiday-theme-valentine .sp-flake{color:#ff8fab}
@keyframes spFall{0%{transform:translateY(0) rotate(0deg);opacity:.9}100%{transform:translateY(110vh) rotate(360deg);opacity:.2}}
#sp-holiday-ui .sp-holiday-banner{position:absolute;top:0;left:0;right:0;text-align:center;padding:6px 12px;font:800 11px/1.3 "Courier New",monospace;letter-spacing:2px;text-transform:uppercase;pointer-events:none}
#sp-holiday-ui.sp-holiday-theme-christmas .sp-holiday-banner{background:linear-gradient(90deg,#165b33,#c41e3a,#165b33);color:#fff}
#sp-holiday-ui.sp-holiday-theme-newyear .sp-holiday-banner{background:linear-gradient(90deg,#1a1a2e,#d4af37,#1a1a2e);color:#fff}
#sp-holiday-ui.sp-holiday-theme-halloween .sp-holiday-banner{background:linear-gradient(90deg,#1a0a00,#ff6b00,#2d0a4e);color:#fff}
#sp-holiday-ui.sp-holiday-theme-valentine .sp-holiday-banner{background:linear-gradient(90deg,#4a0018,#ff4d6d,#4a0018);color:#fff}



/* Card overlays — small view badge inside image, ★ top-right */
.gen-movie-img {
    position: relative !important;
    overflow: hidden !important;
}
.gen-movie-img .game-view-count {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    z-index: 8 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 6px !important;
    max-width: calc(100% - 100px) !important;
    background: rgba(0, 0, 0, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}
.gen-movie-img .game-view-count i {
    color: #e50914 !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
}
.gen-movie-img .game-view-count .view-number {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Shared card action buttons — star + preview + share (same circle) */
.gen-movie-img .sp-fav-btn,
.gen-movie-img .sp-play-btn,
.gen-movie-img .sp-share-btn {
    position: absolute !important;
    top: 10px !important;
    z-index: 12 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease !important;
}
.gen-movie-img .sp-fav-btn { right: 10px !important; }
.gen-movie-img .sp-play-btn { right: 50px !important; font-size: 14px !important; }
.gen-movie-img .sp-share-btn { right: 90px !important; font-size: 14px !important; }
.gen-movie-img .sp-fav-btn:hover,
.gen-movie-img .sp-play-btn:hover,
.gen-movie-img .sp-share-btn:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #fff !important;
    opacity: 1;
    transform: scale(1.12) !important;
    box-shadow: 0 6px 18px rgba(229, 9, 20, .45) !important;
}
.gen-movie-img .sp-fav-btn.active,
.gen-movie-img .sp-play-btn.active,
.gen-movie-img .sp-share-btn.active {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #fff !important;
    animation: spBtnPop 0.35s cubic-bezier(.34,1.5,.64,1);
}
.gen-movie-img .sp-fav-btn:active,
.gen-movie-img .sp-play-btn:active,
.gen-movie-img .sp-share-btn:active {
    transform: scale(0.92) !important;
}
@keyframes spBtnPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Preview fits card edges + corners exactly */
.gen-movie-img { overflow: hidden !important; border-radius: inherit; }
.gen-movie-img .sp-hover-preview {
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.12s ease;
    background: #000;
    border-radius: inherit !important;
}
.gen-movie-img.sp-preview-active .sp-hover-preview { opacity: 1; }
.gen-movie-img .sp-hover-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    object-fit: cover;
}
.gen-movie-img .game-view-count,
.gen-movie-img .sp-fav-btn,
.gen-movie-img .sp-play-btn,
.gen-movie-img .sp-share-btn { z-index: 12 !important; }
.gen-movie-img .gen-movie-action {
    z-index: 11 !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
}
/* Hide center play while stream preview is on */
.gen-movie-img.sp-preview-active .gen-movie-action {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* index search results stay below header */
#searchResultsSection.search-results-section {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}

/* ===== style block ===== */

/* ===== stupplays — desktop + mobile fit ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Cards grid breathing room */
.stupplays-game-card,
.gen-movie-img {
  max-width: 100%;
}
.gen-movie-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Touch-friendly ★ / 👁 */
.sp-fav-btn,
.sp-play-btn,
.sp-remove-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
}
.game-view-count {
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toast safe area on phones */
#sp-toast-wrap {
  left: 12px !important;
  right: 12px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#sp-toast-wrap .sp-toast,
.sp-toast {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}

/* Favorites toolbar */
.sp-fav-tools {
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Search results frame — mobile: less top gap, full width */
@media (max-width: 991px) {
  .sp-search-cards {
    padding: 72px 12px 48px !important;
  }
  .sp-search-tools {
    margin-bottom: 16px !important;
  }
  .sp-search-count-badge {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .sp-search-count-label {
    letter-spacing: 0.4px !important;
  }
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .gen-breadcrumb {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .gen-breadcrumb-title h1 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }
}

@media (max-width: 576px) {
  .sp-search-cards {
    padding: 48px 10px 36px !important;
  }
  .sp-search-count-badge {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  .sp-search-count-num,
  .sp-search-count-label {
    font-size: 11px !important;
  }
  .sp-fav-count-badge,
  .sp-clear-all-fav {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  /* 2-col or 1-col card stacks */
  .stupplays-game-card,
  #game-list > [class*="col-"] {
    margin-bottom: 16px !important;
  }
  .gen-movie-img .sp-fav-btn,
  .gen-movie-img .sp-play-btn,
  .gen-movie-img .sp-remove-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }
  .game-view-count,
  .gen-movie-img .game-view-count {
    top: 5px !important;
    left: 5px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
    max-width: calc(100% - 85px) !important;
    border-radius: 3px !important;
  }
  .gen-movie-img .game-view-count i {
    font-size: 8px !important;
  }
  /* Header search input full width on small screens */
  #gen-header .form-inline,
  #gen-header form {
    max-width: 100% !important;
  }
  #gen-header input[type="search"],
  #gen-header input[type="text"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Prevent horizontal scroll from absolute overlays */
.gen-movie-img {
  overflow: hidden;
}
.sp-hover-preview {
  max-width: 100%;
}
.sp-hover-preview iframe {
  width: 100% !important;
  height: 100% !important;
}

/* ===== style block ===== */

#sp-toast-popup {
  position: fixed !important;
  bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  right: 24px !important;
  left: auto !important;
  background: #141416 !important;
  color: #ffffff !important;
  border: none !important;
  border-left: 5px solid #e50914 !important;
  padding: 14px 22px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(229, 9, 20, 0.25) !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease !important;
  max-width: min(340px, calc(100vw - 32px)) !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}
#sp-toast-popup.sp-toast-show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
@media (max-width: 576px) {
  #sp-toast-popup {
    right: 12px !important;
    left: 12px !important;
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    max-width: none !important;
  }
}

/* ===== style block ===== */

/* Preview layer */
.gen-movie-img .sp-hover-preview {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.gen-movie-img .sp-hover-preview iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
/* Hidden only when JS adds this class during preview */
.gen-movie-img .sp-ui-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Never leave controls invisible without sp-ui-hidden */
.gen-movie-img > .sp-fav-btn:not(.sp-ui-hidden),
.gen-movie-img > .sp-play-btn:not(.sp-ui-hidden),
.gen-movie-img > .sp-share-btn:not(.sp-ui-hidden),
.gen-movie-img > .sp-remove-btn:not(.sp-ui-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}
.gen-movie-img > .game-view-count:not(.sp-ui-hidden),
.gen-movie-img > .stupplays-card-view-badge:not(.sp-ui-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}
.gen-movie-img > .gen-movie-action:not(.sp-ui-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== style block ===== */

/* During preview: hide only elements marked .sp-ui-hidden (highest priority) */
.gen-movie-img .sp-fav-btn.sp-ui-hidden,
.gen-movie-img .sp-play-btn.sp-ui-hidden,
.gen-movie-img .sp-share-btn.sp-ui-hidden,
.gen-movie-img .sp-remove-btn.sp-ui-hidden,
.gen-movie-img .game-view-count.sp-ui-hidden,
.gen-movie-img .stupplays-card-view-badge.sp-ui-hidden,
.gen-movie-img .gen-movie-action.sp-ui-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Default / after preview: always show when NOT .sp-ui-hidden */
.gen-movie-img .sp-fav-btn:not(.sp-ui-hidden),
.gen-movie-img .sp-play-btn:not(.sp-ui-hidden),
.gen-movie-img .sp-share-btn:not(.sp-ui-hidden),
.gen-movie-img .sp-remove-btn:not(.sp-ui-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}
.gen-movie-img .game-view-count:not(.sp-ui-hidden),
.gen-movie-img .stupplays-card-view-badge:not(.sp-ui-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  pointer-events: none !important;
}
.gen-movie-img .gen-movie-action:not(.sp-ui-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== style block ===== */

/* Index homepage: only series cards visible — hide text labels under cards */
.gen-section-padding-2 .gen-style-2 .gen-info-contain,
.gen-section-padding-2 .gen-carousel-movies-style-2 .gen-info-contain,
.gen-section-padding-2 .movie-grid .gen-info-contain,
.gen-section-padding-2 .gen-movie-info,
.gen-section-padding-2 .gen-info-contain {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep Coming Soon card titles visible.
   The homepage card-hiding rule above targets .gen-movie-info globally;
   Coming Soon banners need their titles shown. */
.sp-coming-soon.gen-section-padding-2 .gen-movie-info,
.sp-coming-soon .gen-movie-info {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.sp-coming-soon .gen-movie-info h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== style block ===== */

/* One × outside the poster — same family as Magnific (main walkthrough) close */
.gen-movie-contain,
.gen-carousel-movies-style-2,
.movie-grid,
.stupplays-game-card {
  position: relative !important;
}
button.sp-preview-stop,
.sp-preview-stop {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 50 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  font-size: 18px !important;
  font-family: Arial, Baskerville, monospace !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  opacity: 0 !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  pointer-events: auto !important;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease, opacity 0.25s ease, color 0.2s ease !important;
}
.sp-preview-stop.is-visible {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: spStopIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.sp-preview-stop:hover,
.sp-preview-stop:focus {
  opacity: 1 !important;
  color: #fff !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
@keyframes spStopIn {
  0% { opacity: 0; transform: scale(0.55) rotate(-40deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ===== style block ===== */

/* ============================================================
   Live ONLY when .cinematic-slide has BOTH:
     data-live="on"  AND  .sp-live-playing
   Navigating left/right never puts live on data-live="off" cards.
   ============================================================ */
.poster-wrapper {
  position: relative !important;
  overflow: hidden !important;
}
/* Allow quality dropdown to open above scrub without being clipped */
.poster-wrapper:has(> .sp-custom-scrub),
.mfp-iframe-scaler:has(> .sp-custom-scrub) {
  overflow: visible !important;
}

/* ============================================================
   NON-LIVE DEFAULT — normal poster + center play button
   (data-live missing, data-live="off", or not actively playing)
   ============================================================ */
.cinematic-slide:not([data-live="on"]) .poster-wrapper > img,
.cinematic-slide[data-live="off"] .poster-wrapper > img {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  display: block !important;
}
.cinematic-slide:not([data-live="on"]):not(.sp-offline-playing) .poster-wrapper .live-video,
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) .poster-wrapper .live-video {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cinematic-slide:not([data-live="on"]):not(.sp-offline-playing) .poster-wrapper .playBut,
.cinematic-slide:not([data-live="on"]):not(.sp-offline-playing) a.playBut,
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) .poster-wrapper .playBut,
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) a.playBut {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  cursor: pointer !important;
}
/* Never keep live chrome on non-live cards */
.cinematic-slide:not([data-live="on"]) .sp-live-badge,
.cinematic-slide[data-live="off"] .sp-live-badge {
  display: none !important;
  visibility: hidden !important;
}
.cinematic-slide:not([data-live="on"]):not(.sp-offline-playing) .sp-live-vol-btn,
.cinematic-slide:not([data-live="on"]):not(.sp-offline-playing) .sp-live-fs-btn,
.cinematic-slide:not([data-live="on"]):not(.sp-offline-playing) .sp-custom-scrub,
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) .sp-live-vol-btn,
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) .sp-live-fs-btn,
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) .sp-custom-scrub {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Strip stuck live-playing class visuals on non-live cards */
.cinematic-slide:not([data-live="on"]).sp-live-playing .poster-wrapper > img {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}
.cinematic-slide:not([data-live="on"]).sp-live-playing .poster-wrapper .live-video {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Default: live layer always off */
.poster-wrapper .live-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  align-items: center;
  justify-content: center;
}
.poster-wrapper .live-video iframe {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  transform: none !important;
  pointer-events: none !important;
}

/* ONLY the one slide marked .sp-live-playing may show the player — hide poster */
.cinematic-slide.sp-live-playing[data-live="on"] .poster-wrapper .live-video {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 6 !important;
}
.cinematic-slide.sp-live-playing[data-live="on"] .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Live cards: never show center play (always LIVE identity; active autoplays) */
.cinematic-slide[data-live="on"] .poster-wrapper .playBut,
.cinematic-slide[data-live="on"] a.playBut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* While LIVE is playing — kill center play/pause even if JS sets inline styles */
.cinematic-slide[data-live="on"].sp-live-playing .poster-wrapper .playBut,
.cinematic-slide[data-live="on"].sp-live-playing a.playBut,
.cinematic-slide[data-live="on"].sp-live-playing .playBut,
.cinematic-slide[data-live="on"].sp-live-playing .gen-movie-action .playBut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
/* Offline while inline playing — hide center play too */
.cinematic-slide.sp-offline-playing .poster-wrapper .playBut,
.cinematic-slide.sp-offline-playing a.playBut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Popup: no extra center chrome */
.mfp-sp-hero .mfp-iframe-scaler::before,
.mfp-sp-hero .mfp-iframe-scaler::after {
  display: none !important;
  content: none !important;
}
/* Offline / unspecified: keep play button when not playing */
.cinematic-slide[data-live="off"] .poster-wrapper .playBut,
.cinematic-slide:not([data-live]) .poster-wrapper .playBut {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  cursor: pointer !important;
}
/* Offline poster stays fully interactive */
.cinematic-slide[data-live="off"] .poster-wrapper,
.cinematic-slide[data-live="off"] .poster-wrapper img {
  pointer-events: auto !important;
}
/* Offline: video layer off until user hits play */
.cinematic-slide[data-live="off"]:not(.sp-offline-playing) .live-video {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Offline after play — iframe not clickable (blocks YT brand/logo clicks) */
.cinematic-slide[data-live="off"].sp-offline-playing .live-video {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 8 !important;
}
.cinematic-slide[data-live="off"].sp-offline-playing .live-video iframe {
  pointer-events: none !important;
}
/* Hide poster while offline video plays — still, no float */
.cinematic-slide[data-live="off"].sp-offline-playing .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.cinematic-slide[data-live="off"].sp-offline-playing .poster-wrapper .playBut,
.cinematic-slide[data-live="off"].sp-offline-playing a.playBut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.cinematic-slide[data-live="off"].sp-offline-playing .sp-live-vol-btn,
.cinematic-slide[data-live="off"].sp-offline-playing .sp-live-fs-btn {
  display: flex !important;
  visibility: visible !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

/* LIVE UI chrome */
.sp-live-fs-btn,
.sp-live-vol-btn {
  display: none !important;
  visibility: hidden !important;
}
/* LIVE badge stays on ALL live cards (even when not the active playing one) */
.sp-live-badge {
  display: none !important;
  visibility: hidden !important;
}
.cinematic-slide[data-live="on"] .sp-live-badge {
  display: inline-flex !important;
  visibility: visible !important;
}
.cinematic-slide.sp-live-playing[data-live="on"] .sp-live-fs-btn,
.cinematic-slide.sp-live-playing[data-live="on"] .sp-live-vol-btn {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  cursor: pointer !important;
}
.cinematic-slide.sp-live-playing[data-live="on"] .poster-wrapper > .sp-custom-scrub {
  pointer-events: auto !important;
  z-index: 45 !important;
}
.sp-mfp-mute {
  pointer-events: auto !important;
  z-index: 100001 !important;
  cursor: pointer !important;
}

.sp-live-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 25;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.75);
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), background .18s ease, border-color .18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.sp-live-fs-btn:hover {
  background: #e50914;
  border-color: #e50914;
  transform: scale(1.12);
  color: #fff;
}

.sp-live-sound-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; }

.cinematic-slide .gen-movie-meta-holder > ul:not(:has(li:not(.gen-quality-badge):not(.gen-sen-rating):not(.sp-hero-views-li))) {
  display: none !important;
}


/* SP YT polish: center overlay kill-switch */
.cinematic-slide.sp-live-playing .playBut,
.cinematic-slide.sp-live-playing a.playBut,
.cinematic-slide.sp-offline-playing .playBut,
.cinematic-slide.sp-offline-playing a.playBut {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mfp-sp-hero .ytp-large-play-button,
.mfp-iframe-scaler .playBut {
  display: none !important;
}

/* ===== style block ===== */

/* Instant popup — no fade / slide glitch on open or close */
.mfp-sp-hero.mfp-bg,
.mfp-sp-hero.mfp-wrap,
.mfp-wrap.mfp-sp-hero,
.mfp-bg.mfp-sp-hero,
.mfp-sp-hero .mfp-container,
.mfp-sp-hero .mfp-content,
.mfp-sp-hero .mfp-iframe-holder,
.mfp-sp-hero .mfp-iframe-scaler,
.mfp-sp-hero .mfp-iframe {
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -webkit-animation: none !important;
}
.mfp-sp-hero.mfp-ready .mfp-content,
.mfp-sp-hero.mfp-removing .mfp-content,
.mfp-sp-hero.mfp-ready.mfp-bg,
.mfp-sp-hero.mfp-removing.mfp-bg {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Kill browser blue focus/ring on hero controls */
.sp-live-vol-btn,
.sp-live-fs-btn,
.sp-mfp-mute,
.mfp-sp-hero .mfp-close,
.mfp-iframe-scaler .mfp-close {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}
.sp-live-vol-btn:focus,
.sp-live-vol-btn:focus-visible,
.sp-live-vol-btn:active,
.sp-live-fs-btn:focus,
.sp-live-fs-btn:focus-visible,
.sp-mfp-mute:focus,
.sp-mfp-mute:focus-visible,
.mfp-sp-hero .mfp-close:focus,
.mfp-sp-hero .mfp-close:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Volume icon color matches × (red) — FA icons inherit color */
.sp-live-vol-btn,
.sp-mfp-mute {
  color: #e50914 !important;
}
.sp-live-vol-btn i,
.sp-mfp-mute i {
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.sp-live-vol-btn:hover,
.sp-live-vol-btn:focus,
.sp-live-vol-btn:focus-visible,
.sp-mfp-mute:hover,
.sp-mfp-mute:focus,
.sp-mfp-mute:focus-visible {
  color: #fff !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}

/* Hide old floating Sound on/off pill */
.sp-live-sound-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* Volume next to fullscreen — same family as × close (no blue) */
.sp-live-vol-btn {
  position: absolute;
  top: 10px;
  right: 50px;
  z-index: 25;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.75);
  color: #e50914;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), background .18s ease, border-color .18s ease, color .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.sp-live-vol-btn:hover,
.sp-live-vol-btn:focus,
.sp-live-vol-btn:focus-visible {
  outline: none;
  background: #e50914;
  border-color: #e50914;
  transform: scale(1.12);
  color: #fff;
}
.cinematic-slide.sp-live-playing[data-live="on"] .sp-live-vol-btn { display: flex !important; visibility: visible !important; }
.cinematic-slide:not(.sp-live-playing):not(.sp-offline-playing) .sp-live-vol-btn { display: none !important; visibility: hidden !important; }
.cinematic-slide.sp-live-playing[data-live="on"] .sp-live-fs-btn,
.cinematic-slide.sp-offline-playing[data-live="off"] .sp-live-fs-btn { display: flex !important; visibility: visible !important; }
.cinematic-slide:not(.sp-live-playing):not(.sp-offline-playing) .sp-live-fs-btn { display: none !important; visibility: hidden !important; }
/* After user hits Stop — show center play again on LIVE cards so they can restart */
/* Stop only (not while .sp-live-playing) — center play to restart */
.cinematic-slide[data-live="on"].sp-user-stopped:not(.sp-live-playing) .poster-wrapper .playBut,
.cinematic-slide[data-live="on"].sp-user-stopped:not(.sp-live-playing) a.playBut {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  position: absolute !important;
  overflow: visible !important;
}
.cinematic-slide[data-live="on"].sp-user-stopped .sp-live-badge {
  display: inline-flex !important;
  visibility: visible !important;
}
/* Mobile live: no FS/volume corner controls (video only) — was forcing display:flex */
@media (max-width: 991px) {
  .cinematic-slide.sp-live-playing .sp-live-fs-btn,
  .cinematic-slide[data-live="on"] .sp-live-fs-btn,
  .cinematic-slide.sp-live-playing .sp-live-vol-btn,
  .cinematic-slide[data-live="on"] .sp-live-vol-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* offline mobile can still show volume if needed — keep modest size */
  .cinematic-slide.sp-offline-playing .sp-live-fs-btn {
    display: none !important;
  }
  .cinematic-slide.sp-offline-playing .sp-live-vol-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}
.cinematic-slide.sp-offline-playing[data-live="off"]:not([data-soon="on"]) .sp-live-vol-btn { display: flex !important; visibility: visible !important; }


/* USER REQUEST: remove mute + expand from top-right — controls live only in scrub bar */
.poster-wrapper > .sp-live-fs-btn,
.cinematic-slide .sp-live-fs-btn,
.poster-wrapper > .sp-live-vol-btn,
.cinematic-slide .sp-live-vol-btn,
.sp-card-vol-wrap,
.sp-live-vol-btn.sp-card-mute-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Mobile: also hide scrub expand (not needed on mobile) */
@media (max-width: 991px) {
  .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide .sp-scrub-expand {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .sp-custom-scrub {
    gap: 4px !important;
  }
}

/* LIVE + 1440p in ONE badge — only when live playing; never on offline */
.sp-live-badge {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  background: linear-gradient(145deg, rgba(229, 9, 20, .92), rgba(160, 0, 12, .88));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(229, 9, 20, .45);
  pointer-events: none;
  user-select: none;
}
.sp-live-badge .sp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: spLivePulse 1.25s ease-out infinite;
  flex-shrink: 0;
}
.sp-live-badge .sp-live-q {
  opacity: 0.95;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.35);
}
@keyframes spLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); }
  70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.cinematic-slide[data-live="on"] .sp-live-badge { display: inline-flex !important; visibility: visible !important; }
.cinematic-slide[data-live="off"] .sp-live-badge,
.cinematic-slide.sp-offline-playing .sp-live-badge { display: none !important; visibility: hidden !important; }
/* Hide LIVE | 1440p while paused (poster + popup) until play again */
.cinematic-slide.sp-live-paused .sp-live-badge,
.cinematic-slide.sp-live-paused .sp-mfp-live-badge,
.mfp-iframe-scaler.sp-live-paused > .sp-live-badge,
.mfp-iframe-scaler.sp-live-paused > .sp-mfp-live-badge,
.mfp-iframe-scaler.sp-live-paused .sp-mfp-live-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ============================================================
   STREAMING SOON — data-soon="on" on .cinematic-slide
   Red badge, inset into poster. Toggle: on | off
   Hidden when data-live="on" (LIVE takes priority)
   ============================================================ */
.sp-soon-badge {
  display: none;
  position: absolute;
  top: 44px;
  left: 52px;
  z-index: 30;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  background: linear-gradient(145deg, rgba(229, 9, 20, .94), rgba(160, 0, 12, .9));
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(229, 9, 20, .5);
  pointer-events: none;
  user-select: none;
}
.sp-soon-badge .sp-soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: spSoonPulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
@keyframes spSoonPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-soon-badge,
.cinematic-slide .sp-soon-badge,
.sp-soon-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.cinematic-slide[data-soon="off"] .sp-soon-badge,
.cinematic-slide:not([data-soon="on"]) .sp-soon-badge,
.cinematic-slide[data-live="on"] .sp-soon-badge,
.cinematic-slide.sp-live-playing .sp-soon-badge,
.cinematic-slide.sp-offline-playing .sp-soon-badge {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================
   PLAY BUTTON TOGGLE — data-play="on" | "off" on .cinematic-slide
   Default (missing or "on") = show center play when offline
   data-play="off" = hide center play (poster only)
   Does not affect LIVE cards (they already hide play)
   ============================================================ */
.cinematic-slide[data-play="off"]:not([data-live="on"]):not(.sp-offline-playing) .poster-wrapper .playBut,
.cinematic-slide[data-play="off"]:not([data-live="on"]):not(.sp-offline-playing) a.playBut,
.cinematic-slide[data-play="off"]:not([data-live="on"]).sp-user-stopped .poster-wrapper .playBut,
.cinematic-slide[data-play="off"]:not([data-live="on"]).sp-user-stopped a.playBut {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  .sp-soon-badge {
    top: 34px;
    left: 40px;
    font-size: 10px;
    padding: 6px 11px 6px 9px;
  }
}

/* Popup LIVE + quality badge — ONLY when live popup (.sp-live-popup) */
.mfp-iframe-scaler:not(.sp-live-popup) > .sp-live-badge,
.mfp-iframe-scaler:not(.sp-live-popup) > .sp-mfp-live-badge,
.mfp-iframe-scaler:not(.sp-live-popup) .sp-mfp-live-badge,
body:not(.sp-popup-was-live) .sp-mfp-live-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mfp-iframe-scaler.sp-live-popup > .sp-live-badge,
.mfp-iframe-scaler.sp-live-popup > .sp-mfp-live-badge,
.mfp-iframe-scaler.sp-live-popup .sp-mfp-live-badge {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 1047 !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 12px 6px 10px !important;
  background: linear-gradient(145deg, rgba(229, 9, 20, .92), rgba(160, 0, 12, .88)) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, .45) !important;
  pointer-events: none !important;
  user-select: none !important;
}
.mfp-iframe-scaler > .sp-live-badge .sp-live-dot,
.sp-mfp-live-badge .sp-live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff !important;
  animation: spLivePulse 1.25s ease-out infinite !important;
  flex-shrink: 0 !important;
}
.mfp-iframe-scaler > .sp-live-badge .sp-live-q,
.sp-mfp-live-badge .sp-live-q {
  opacity: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  margin-left: 2px !important;
  padding-left: 8px !important;
  border-left: 1px solid rgba(255, 255, 255, .35) !important;
}
@media (max-width: 767px) {
  .mfp-iframe-scaler > .sp-live-badge,
  .sp-mfp-live-badge {
    top: 14px !important;
    left: 14px !important;
    font-size: 10px !important;
    padding: 5px 10px 5px 8px !important;
  }
}

/* Kill EVERY separate 1440p chip — quality only inside LIVE badge */
.sp-poster-quality,
.poster-wrapper > .sp-poster-quality,
.cinematic-slide .sp-poster-quality,
.cinematic-slide.sp-live-playing .sp-poster-quality,
.cinematic-slide.sp-live-playing[data-live="on"] .sp-poster-quality {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Text-side quality chip can stay; views always allowed */
.cinematic-slide .gen-movie-meta-holder > ul {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cinematic-slide .sp-hero-views-li {
  display: list-item !important;
  list-style: none !important;
}
.cinematic-slide .sp-hero-views {
  display: inline-flex !important;
}
/* Optionally hide only the 1440p quality chip if desired — views stay */
.cinematic-slide .gen-quality-badge,
.cinematic-slide .gen-sen-rating {
  /* keep visible alongside views */
}

/* Big popup — same circular controls as index cards (★ / 👁 / ×) */
.mfp-iframe-holder { padding-top: 2.5% !important; padding-bottom: 2.5% !important; }
.mfp-iframe-holder .mfp-content {
  max-width: min(96vw, 1680px) !important;
  width: 96vw !important;
  line-height: 0 !important;
}
.mfp-iframe-scaler {
  padding-top: 56.25% !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.65) !important;
  border-radius: 8px !important;
  background: #000 !important;
  position: relative !important;
}
/* Mobile portrait (default popup — not yet fill): center */
@media (max-width: 991px) {
  .mfp-sp-hero.mfp-iframe-holder,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-holder,
  .mfp-iframe-holder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    min-height: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  .mfp-sp-hero .mfp-content,
  .mfp-iframe-holder .mfp-content {
    max-width: 96vw !important;
    width: 96vw !important;
    margin: 0 auto !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
}

/*
 * Mobile edge-to-edge fill — used for:
 *  - landscape rotation (sp-popup-landscape)
 *  - FS button / rotate fill (sp-popup-fs-active, sp-popup-fill)
 *  - browser :fullscreen API
 * Portrait + landscape both fill the whole screen; video uses contain.
 */
@media (max-width: 991px) {
  body.sp-popup-landscape .mfp-sp-hero.mfp-iframe-holder,
  body.sp-popup-landscape .mfp-wrap.mfp-sp-hero .mfp-iframe-holder,
  body.sp-popup-landscape .mfp-iframe-holder,
  body.sp-popup-fs-active .mfp-sp-hero.mfp-iframe-holder,
  body.sp-popup-fs-active .mfp-wrap.mfp-sp-hero .mfp-iframe-holder,
  body.sp-popup-fs-active .mfp-iframe-holder,
  body.sp-popup-fill .mfp-sp-hero.mfp-iframe-holder,
  body.sp-popup-fill .mfp-wrap.mfp-sp-hero .mfp-iframe-holder,
  body.sp-popup-fill .mfp-iframe-holder {
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    background: #000 !important;
  }
  body.sp-popup-landscape .mfp-sp-hero .mfp-content,
  body.sp-popup-landscape .mfp-iframe-holder .mfp-content,
  body.sp-popup-fs-active .mfp-sp-hero .mfp-content,
  body.sp-popup-fs-active .mfp-iframe-holder .mfp-content,
  body.sp-popup-fill .mfp-sp-hero .mfp-content,
  body.sp-popup-fill .mfp-iframe-holder .mfp-content {
    max-width: none !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body.sp-popup-landscape .mfp-iframe-scaler,
  body.sp-popup-fs-active .mfp-iframe-scaler,
  body.sp-popup-fill .mfp-iframe-scaler {
    padding-top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  body.sp-popup-landscape .mfp-iframe-scaler iframe,
  body.sp-popup-fs-active .mfp-iframe-scaler iframe,
  body.sp-popup-fill .mfp-iframe-scaler iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    object-fit: contain !important;
  }
  body.sp-popup-landscape,
  html.sp-popup-landscape,
  body.sp-popup-fs-active,
  html.sp-popup-fs-active,
  body.sp-popup-fill,
  html.sp-popup-fill {
    overflow: hidden !important;
    background: #000 !important;
  }
}

/* Browser native fullscreen API — true device screen (not popup chrome) */
html:fullscreen,
html:-webkit-full-screen,
body:fullscreen,
body:-webkit-full-screen,
.mfp-wrap:fullscreen,
.mfp-wrap:-webkit-full-screen,
.mfp-content:fullscreen,
.mfp-content:-webkit-full-screen,
.mfp-iframe-scaler:fullscreen,
.mfp-iframe-scaler:-webkit-full-screen,
.mfp-iframe-scaler:-moz-full-screen,
.mfp-iframe-scaler:-ms-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html:fullscreen,
html:-webkit-full-screen,
body:fullscreen,
body:-webkit-full-screen {
  background: #000 !important;
}
html:fullscreen .mfp-bg,
html:-webkit-full-screen .mfp-bg,
body.sp-native-fs .mfp-bg {
  opacity: 1 !important;
  background: #000 !important;
  position: fixed !important;
  inset: 0 !important;
}
html:fullscreen .mfp-wrap,
html:-webkit-full-screen .mfp-wrap,
html:fullscreen .mfp-container,
html:-webkit-full-screen .mfp-container,
html:fullscreen .mfp-content,
html:-webkit-full-screen .mfp-content,
html:fullscreen .mfp-iframe-holder,
html:-webkit-full-screen .mfp-iframe-holder,
body.sp-native-fs .mfp-wrap,
body.sp-native-fs .mfp-container,
body.sp-native-fs .mfp-content,
body.sp-native-fs .mfp-iframe-holder {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  background: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:fullscreen .mfp-iframe-scaler,
html:-webkit-full-screen .mfp-iframe-scaler,
.mfp-iframe-scaler:fullscreen,
.mfp-iframe-scaler:-webkit-full-screen,
body.sp-native-fs .mfp-iframe-scaler {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  overflow: hidden !important;
}
html:fullscreen .mfp-iframe-scaler iframe,
html:-webkit-full-screen .mfp-iframe-scaler iframe,
.mfp-iframe-scaler:fullscreen iframe,
.mfp-iframe-scaler:-webkit-full-screen iframe,
body.sp-native-fs .mfp-iframe-scaler iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  object-fit: contain !important;
}
/* Hide Magnific “popup” look while native FS */
html:fullscreen .mfp-wrap:before,
html:-webkit-full-screen .mfp-wrap:before,
body.sp-native-fs .mfp-wrap:before {
  display: none !important;
}
/* Keep controls visible & tappable on top of fullscreen video */
.mfp-iframe-scaler:fullscreen .mfp-close,
.mfp-iframe-scaler:fullscreen .sp-mfp-mute,
.mfp-iframe-scaler:fullscreen .sp-mfp-fs,
.mfp-iframe-scaler:fullscreen .sp-custom-scrub,
.mfp-iframe-scaler:-webkit-full-screen .mfp-close,
.mfp-iframe-scaler:-webkit-full-screen .sp-mfp-mute,
.mfp-iframe-scaler:-webkit-full-screen .sp-mfp-fs,
.mfp-iframe-scaler:-webkit-full-screen .sp-custom-scrub,
body.sp-popup-fs-active .mfp-iframe-scaler .mfp-close,
body.sp-popup-fs-active .mfp-iframe-scaler .sp-mfp-mute,
body.sp-popup-fs-active .mfp-iframe-scaler .sp-mfp-fs,
body.sp-popup-fs-active .mfp-iframe-scaler .sp-custom-scrub,
body.sp-popup-fill .mfp-iframe-scaler .mfp-close,
body.sp-popup-fill .mfp-iframe-scaler .sp-mfp-mute,
body.sp-popup-fill .mfp-iframe-scaler .sp-mfp-fs,
body.sp-popup-fill .mfp-iframe-scaler .sp-custom-scrub,
body.sp-popup-landscape .mfp-iframe-scaler .mfp-close,
body.sp-popup-landscape .mfp-iframe-scaler .sp-mfp-mute,
body.sp-popup-landscape .mfp-iframe-scaler .sp-mfp-fs,
body.sp-popup-landscape .mfp-iframe-scaler .sp-custom-scrub {
  z-index: 2147483646 !important;
  pointer-events: auto !important;
}
/* Exit × — inset from edge (slightly down + left) */
.mfp-sp-hero .mfp-close,
.mfp-iframe-scaler .mfp-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  font-size: 18px !important;
  font-family: Arial, Baskerville, monospace !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  z-index: 1047 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease, color 0.2s ease !important;
}
.mfp-sp-hero .mfp-close:hover,
.mfp-sp-hero .mfp-close:focus,
.mfp-iframe-scaler .mfp-close:hover,
.mfp-iframe-scaler .mfp-close:focus {
  opacity: 1 !important;
  color: #fff !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
/* Audio on/off — inset with close (slightly down + left) */
.sp-mfp-mute {
  position: absolute !important;
  top: 18px !important;
  right: 60px !important;
  z-index: 1046 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease, color 0.2s ease !important;
}
.sp-mfp-mute:hover,
.sp-mfp-mute:focus,
.sp-mfp-mute:focus-visible,
.sp-mfp-mute:active {
  outline: none !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
/* Poster volume — identical to × button (no blue) */
.sp-live-vol-btn {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease, color 0.2s ease !important;
}
.sp-live-vol-btn:hover,
.sp-live-vol-btn:focus,
.sp-live-vol-btn:focus-visible,
.sp-live-vol-btn:active {
  outline: none !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
.sp-live-fs-btn {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease !important;
}
.sp-live-fs-btn:hover,
.sp-live-fs-btn:focus,
.sp-live-fs-btn:focus-visible {
  outline: none !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
.sp-live-fs-btn { right: 10px !important; top: 10px !important; }
.sp-live-vol-btn { right: 50px !important; top: 10px !important; }
@media (max-width: 1199px) {
  .sp-live-vol-btn { width: 34px !important; height: 34px !important; right: 50px !important; font-size: 14px; }
  .sp-live-fs-btn { width: 34px !important; height: 34px !important; }
}
@media (max-width: 767px) {
  .mfp-iframe-holder .mfp-content { max-width: 100vw !important; width: 100vw !important; }
  /* Keep controls inside video — same offsets as desktop */
  .mfp-sp-hero .mfp-close,
  .mfp-iframe-scaler .mfp-close { right: 18px !important; top: 18px !important; }
  .sp-mfp-mute,
  .mfp-iframe-scaler .sp-mfp-mute { right: 60px !important; top: 18px !important; }
  .sp-live-badge { top: 8px; left: 8px; font-size: 10px; padding: 5px 10px 5px 8px; }
}

/* Card: vertical slider LEFT | mute next to fullscreen (RIGHT) */
.sp-card-vol-wrap {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 28 !important;
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: 28px !important;
  padding: 8px 4px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.75) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
.cinematic-slide.sp-live-playing[data-live="on"] .sp-card-vol-wrap,
.cinematic-slide.sp-offline-playing[data-live="off"] .sp-card-vol-wrap {
  display: flex !important;
  visibility: visible !important;
}
/* Mute sits with fullscreen on the right */
.sp-card-vol-wrap .sp-live-vol-btn {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: -42px !important;
  /* moved via JS to sit beside FS — fallback if wrap is left only */
}
/* Better: mute is NOT inside left wrap — separate positioning */
.poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn {
  position: absolute !important;
  top: 10px !important;
  right: 52px !important;
  z-index: 28 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(0,0,0,.75) !important;
  color: #e50914 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(6px) !important;
}
.cinematic-slide.sp-live-playing[data-live="on"] .poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn,
.cinematic-slide.sp-offline-playing[data-live="off"] .poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn {
  display: flex !important;
  visibility: visible !important;
}
.poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn:hover,
.poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn:focus {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.08);
}
.poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn i {
  color: inherit !important;
  pointer-events: none !important;
}
/* Left vertical slider only (no mute inside) */
.sp-card-vol-wrap .sp-live-vol-btn { display: none !important; }
.sp-card-vol-wrap .sp-card-vol-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 4px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: #e50914 !important;
  background: transparent !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
}
.sp-card-vol-wrap .sp-card-vol-range::-webkit-slider-runnable-track {
  width: 4px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.sp-card-vol-wrap .sp-card-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e50914;
  border: 2px solid #fff;
  margin-left: -4px;
  cursor: pointer;
}
.sp-card-vol-wrap .sp-card-vol-range::-moz-range-track {
  width: 4px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.sp-card-vol-wrap .sp-card-vol-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e50914;
  border: 2px solid #fff;
  cursor: pointer;
}
/* LIVE + 1440p badge sits top-left on all live cards */
.cinematic-slide[data-live="on"] .sp-live-badge {
  top: 12px !important;
  bottom: auto !important;
  left: 12px !important;
}
@media (max-width: 576px) {
  .sp-card-vol-wrap .sp-card-vol-range { height: 44px !important; }
  .poster-wrapper > .sp-live-vol-btn.sp-card-mute-btn {
    right: 48px !important;
    width: 32px !important;
    height: 32px !important;
  }
}
/* Popup volume panel next to close */
.mfp-iframe-scaler .sp-mfp-vol-wrap {
  position: absolute !important;
  top: 0 !important;
  right: 44px !important;
  z-index: 1046 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 6px 0 10px !important;
  pointer-events: auto !important;
}
.mfp-iframe-scaler .sp-mfp-mute {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(0,0,0,.75) !important;
  color: #e50914 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  flex-shrink: 0 !important;
}
.mfp-iframe-scaler .sp-mfp-mute:hover,
.mfp-iframe-scaler .sp-mfp-mute:focus {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
}
.mfp-iframe-scaler .sp-mfp-mute i {
  color: inherit !important;
  pointer-events: none !important;
}
.mfp-iframe-scaler .sp-mfp-vol-range {
  width: 88px !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: #e50914 !important;
  background: transparent !important;
  vertical-align: middle !important;
}
.mfp-iframe-scaler .sp-mfp-vol-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.mfp-iframe-scaler .sp-mfp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e50914;
  border: 2px solid #fff;
  margin-top: -5px;
  cursor: pointer;
}
.mfp-iframe-scaler .sp-mfp-vol-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.mfp-iframe-scaler .sp-mfp-vol-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e50914;
  border: 2px solid #fff;
  cursor: pointer;
}
@media (max-width: 576px) {
  .mfp-iframe-scaler .sp-mfp-vol-range { width: 64px !important; }
}

/* Hide volume sliders only — keep circular mute buttons (index-card style) */
.sp-card-vol-wrap,
.sp-mfp-vol-wrap,
.sp-mfp-vol-range,
.sp-card-vol-range {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Poster mute — match index card ★ / 👁 circles */
.poster-wrapper > .sp-live-vol-btn,
.sp-live-vol-btn.sp-card-mute-btn {
  position: absolute !important;
  top: 10px !important;
  right: 50px !important;
  z-index: 28 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(.34,1.4,.64,1), box-shadow 0.18s ease, color 0.2s ease !important;
}
.cinematic-slide.sp-live-playing[data-live="on"] .poster-wrapper > .sp-live-vol-btn,
.cinematic-slide.sp-offline-playing[data-live="off"] .poster-wrapper > .sp-live-vol-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Popup mute + close — inset from edge (not flush to corner) */
.mfp-iframe-scaler .sp-mfp-mute,
.sp-mfp-mute {
  position: absolute !important;
  top: 18px !important;
  right: 60px !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1046 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.mfp-sp-hero .mfp-close,
.mfp-iframe-scaler .mfp-close {
  top: 18px !important;
  right: 18px !important;
}
/* Fullscreen button removed on mobile — controls match desktop inside the video */
.sp-mfp-fs,
.mfp-iframe-scaler .sp-mfp-fs,
button.sp-mfp-fs {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}
/* Mobile popup: same control layout as desktop — inside the video frame */
@media (max-width: 991px) {
  .mfp-iframe-scaler {
    position: relative !important;
    overflow: hidden !important;
  }
  .mfp-sp-hero .mfp-close,
  .mfp-iframe-scaler .mfp-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    z-index: 1047 !important;
  }
  .mfp-iframe-scaler .sp-mfp-mute,
  .sp-mfp-mute {
    position: absolute !important;
    top: 18px !important;
    right: 60px !important;
    left: auto !important;
    bottom: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    z-index: 1046 !important;
  }
  /* Scrub bar stays inside the video bottom edge (same as desktop) */
  .mfp-iframe-scaler > .sp-custom-scrub {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;
    z-index: 1048 !important;
    max-width: none !important;
  }
}
.poster-wrapper > .sp-live-vol-btn:hover,
.poster-wrapper > .sp-live-vol-btn:focus,
.mfp-iframe-scaler .sp-mfp-mute:hover,
.mfp-iframe-scaler .sp-mfp-mute:focus,
.sp-mfp-mute:hover,
.sp-mfp-mute:focus {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
.poster-wrapper > .sp-live-vol-btn i,
.sp-mfp-mute i {
  color: inherit !important;
  pointer-events: none !important;
  font-size: 14px !important;
}
.sp-live-fs-btn {
  right: 10px !important;
  top: 10px !important;
}

/* ===== Custom scrub — fits card, raised, covers brand clicks ===== */
.sp-custom-scrub {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  z-index: 55 !important;
  display: none;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  height: 48px !important;
  max-width: calc(100% - 16px) !important;
  width: auto !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.cinematic-slide.sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub,
.cinematic-slide.sp-live-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub,
.mfp-iframe-scaler > .sp-custom-scrub.is-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.sp-custom-scrub .sp-scrub-time {
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  text-align: center !important;
  user-select: none !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.02em !important;
}
.sp-custom-scrub .sp-scrub-cur.sp-scrub-cur-live {
  min-width: 4em !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: left !important;
}
.sp-custom-scrub .sp-scrub-pp,
.sp-custom-scrub .sp-scrub-stop {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(229, 9, 20, 0.95) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  outline: none !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.35) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.sp-custom-scrub .sp-scrub-pp:hover,
.sp-custom-scrub .sp-scrub-stop:hover {
  background: #e50914 !important;
  transform: scale(1.08) !important;
}
.sp-custom-scrub .sp-scrub-pp[data-state="paused"] {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.sp-custom-scrub .sp-scrub-stop {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
.sp-custom-scrub .sp-scrub-stop:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
}
/* Mute + Expand next to play/pause/stop (live on + live off) */
.sp-custom-scrub .sp-scrub-mute,
.sp-custom-scrub .sp-scrub-expand {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  outline: none !important;
  pointer-events: auto !important;
  z-index: 5 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.sp-custom-scrub .sp-scrub-mute.is-muted {
  background: rgba(229, 9, 20, 0.85) !important;
}
.sp-custom-scrub .sp-scrub-mute:hover,
.sp-custom-scrub .sp-scrub-expand:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.08) !important;
}
/* Offline: show pp/stop/mute/expand. Live: only mute/expand (positioned top-right in sp-plyr.css) */
.sp-custom-scrub.sp-live-scrub .sp-scrub-mute,
.sp-custom-scrub.sp-live-scrub .sp-scrub-expand,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-expand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
.cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
.cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
.cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-expand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: none !important;
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
}
/* data-live on: explicitly hide play/pause/stop */
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
.sp-custom-scrub.sp-live-scrub .sp-scrub-pp,
.sp-custom-scrub.sp-live-scrub .sp-scrub-stop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
}
/* Hide corner popup FS + volume on cards */
.poster-wrapper > .sp-live-fs-btn,
.cinematic-slide .sp-live-fs-btn,
.poster-wrapper > .sp-live-vol-btn,
.cinematic-slide .sp-live-vol-btn.sp-card-mute-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* data-badge on/off = LIVE badge UI only (no iframe reload / no buffering). off removes even when data-live=on */
.cinematic-slide[data-badge="on"] .sp-live-badge,
.cinematic-slide[data-badge="on"] .sp-badge-live-1440 {
  display: inline-flex !important;
  visibility: visible !important;
  animation: spBadgeFlash 1.2s ease-in-out infinite !important;
}
.cinematic-slide[data-badge="off"] .sp-live-badge,
.cinematic-slide[data-badge="off"] .sp-badge-live-1440,
.cinematic-slide[data-live="on"][data-badge="off"] .sp-live-badge,
.cinematic-slide[data-live="on"][data-badge="off"] .sp-badge-live-1440 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}
@keyframes spBadgeFlash {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,9,20,0.6); }
  50% { opacity: 0.55; box-shadow: 0 0 12px 2px rgba(229,9,20,0.45); }
}


/* ===== data-poster / data-live control visibility ===== */
/* data-poster="on"  → hide ALL custom controls */
.cinematic-slide[data-poster="on"] .poster-wrapper > .sp-custom-scrub,
.cinematic-slide[data-poster="on"] .poster-wrapper > .sp-custom-scrub *,
.cinematic-slide[data-poster="on"] .sp-custom-scrub {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* data-poster="off" + playing → show controls (unless live rules override) */
.cinematic-slide[data-poster="off"].sp-offline-playing:not([data-soon="on"]):not([data-live="on"]) .poster-wrapper > .sp-custom-scrub,
.cinematic-slide[data-poster="off"][data-live="off"].sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  overflow: visible !important;
}

/* data-live="on" → hide play/pause/stop; keep mute + expand + LIVE/DVR + quality */
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
.sp-custom-scrub.sp-live-scrub .sp-scrub-pp,
.sp-custom-scrub.sp-live-scrub .sp-scrub-stop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* data-live="on" → video only; mute + expand float top-right (see sp-plyr.css) */
.cinematic-slide[data-live="on"].sp-live-playing:not([data-poster="on"]):not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub,
.cinematic-slide[data-live="on"][data-poster="off"].sp-live-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
.sp-custom-scrub.sp-live-scrub .sp-scrub-mute,
.sp-custom-scrub.sp-live-scrub .sp-scrub-expand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-track,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-dur,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-cur,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-live-q,
.cinematic-slide[data-live="on"] .poster-wrapper > .sp-custom-scrub .sp-scrub-q-wrap,
.sp-custom-scrub.sp-live-scrub .sp-scrub-track,
.sp-custom-scrub.sp-live-scrub .sp-scrub-dur,
.sp-custom-scrub.sp-live-scrub .sp-scrub-live-q,
.sp-custom-scrub.sp-live-scrub .sp-scrub-q-wrap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* data-live="off" → full controls when poster off + playing */
.cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
.cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
.cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
.cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub .sp-scrub-expand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Expanded: controls version forces full controls; video-only hides (handled per build) */

/* data-poster on/off via HTML attribute (no player button) */
.cinematic-slide[data-poster="on"] .poster-wrapper > img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
.cinematic-slide[data-poster="on"] .poster-wrapper > .live-video,
.cinematic-slide[data-poster="on"] .poster-wrapper > .sp-core-host {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cinematic-slide[data-poster="off"].sp-live-playing .poster-wrapper > img,
.cinematic-slide[data-poster="off"].sp-offline-playing .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cinematic-slide[data-poster="off"].sp-live-playing .poster-wrapper > .live-video,
.cinematic-slide[data-poster="off"].sp-offline-playing .poster-wrapper > .live-video,
.cinematic-slide[data-poster="off"].sp-live-playing .poster-wrapper > .sp-core-host,
.cinematic-slide[data-poster="off"].sp-offline-playing .poster-wrapper > .sp-core-host {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
}
.sp-poster-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; }


/* Hide top corner audio on main card */
html body .poster-wrapper > .sp-live-vol-btn,
html body .poster-wrapper > .sp-card-mute-btn,
html body .cinematic-slide .sp-live-vol-btn,
html body .cinematic-slide .sp-card-mute-btn,
html body .sp-card-vol-wrap {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Expand without moving iframe — CSS scale/center, smooth return */
.sp-expand-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99980 !important;
  /* No black overlay / blur — expand only enlarges the player */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
/* Expanded player: crystal clear video + controls, no blur */
.poster-wrapper.sp-expand-on,
.poster-wrapper.sp-expand-on > .live-video,
.poster-wrapper.sp-expand-on > .sp-core-host,
.poster-wrapper.sp-expand-on > .live-video iframe,
.poster-wrapper.sp-expand-on > .sp-core-host iframe,
.poster-wrapper.sp-expand-on > .sp-custom-scrub,
body.sp-player-expanded .poster-wrapper.sp-expand-on {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.poster-wrapper.sp-expand-on > .sp-custom-scrub {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(12, 12, 14, 0.96) !important;
}
.poster-wrapper.sp-expand-on {
  z-index: 99990 !important;
  position: relative !important;
  /* transform set inline: translate + scale to center ~5x */
  transform-origin: center center !important;
  will-change: transform !important;
  background: #000 !important;
  border-radius: 10px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.85) !important;
  overflow: visible !important;
}
.poster-wrapper.sp-expand-on > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.poster-wrapper.sp-expand-on > .live-video,
.poster-wrapper.sp-expand-on > .sp-core-host {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
}
.poster-wrapper.sp-expand-on > .sp-custom-scrub { display: none !important; }
.poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-pp,
.poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-stop,
.poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-mute,
.poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-expand {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#sp-expand-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 60 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: rgba(0,0,0,0.65) !important;
  color: #fff !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}
#sp-expand-close:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
}
body.sp-player-expanded { overflow: hidden !important; }

/* Expand video-only: never show controls / × while expanded */
body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub,
body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub *,
body.sp-player-expanded .poster-wrapper.sp-expand-on > #sp-expand-close,
body.sp-player-expanded #sp-expand-close {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}


/* ===== Mobile expand: fit screen nicely ===== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body.sp-player-expanded {
    overflow: hidden !important;
    touch-action: none !important;
  }
  body.sp-player-expanded.sp-expand-mobile-body {
    overscroll-behavior: none !important;
  }
  .poster-wrapper.sp-expand-on.sp-expand-mobile,
  body.sp-player-expanded .poster-wrapper.sp-expand-on {
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .live-video,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-core-host,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .live-video iframe,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-core-host iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 8px !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    z-index: 100002 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-pp,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-stop,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-mute,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-expand {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  body.sp-player-expanded #sp-expand-close {
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    right: max(8px, env(safe-area-inset-right, 8px)) !important;
    width: 40px !important;
    height: 40px !important;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.sp-player-expanded .poster-wrapper.sp-expand-on {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub {
    height: 48px !important;
    min-height: 48px !important;
  }
}



/* ===== Mobile expand: true fullscreen fit all corners ===== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body.sp-player-expanded .poster-wrapper.sp-expand-on,
  body.sp-player-expanded .poster-wrapper.sp-expand-on.sp-expand-mobile {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
    z-index: 99991 !important;
  }
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .live-video,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-core-host,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .live-video iframe,
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-core-host iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
  }
  body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 100002 !important;
  }
  /* Live expanded on mobile: still no play/pause/stop */
  body.sp-player-expanded .cinematic-slide[data-live="on"] .poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-pp,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .poster-wrapper.sp-expand-on > .sp-custom-scrub .sp-scrub-stop,
  body.sp-player-expanded .sp-custom-scrub.sp-live-scrub .sp-scrub-pp,
  body.sp-player-expanded .sp-custom-scrub.sp-live-scrub .sp-scrub-stop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
  }
}
\n/* ===== Mobile expand (video-only): fill screen ===== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body.sp-player-expanded {
    overflow: hidden !important;
    touch-action: none !important;
  }
  .poster-wrapper.sp-expand-on.sp-expand-mobile,
  body.sp-player-expanded .poster-wrapper.sp-expand-on {
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    max-height: none !important;
  }
  .poster-wrapper.sp-expand-on.sp-expand-mobile > .live-video,
  .poster-wrapper.sp-expand-on.sp-expand-mobile > .sp-core-host,
  .poster-wrapper.sp-expand-on.sp-expand-mobile > .live-video iframe,
  .poster-wrapper.sp-expand-on.sp-expand-mobile > .sp-core-host iframe {
    border-radius: 0 !important;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.sp-player-expanded .poster-wrapper.sp-expand-on {
    border-radius: 0 !important;
  }
}


/* Expanded frame — video only, nothing else */
.poster-wrapper.sp-expand-on {
  z-index: 99991 !important;
  transform-origin: center center !important;
  will-change: transform !important;
  background: #000 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.poster-wrapper.sp-expand-on > .live-video,
.poster-wrapper.sp-expand-on > .sp-core-host {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.poster-wrapper.sp-expand-on > .live-video iframe,
.poster-wrapper.sp-expand-on > .sp-core-host iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* VIDEO-ONLY expand: hide everything except the video */
.poster-wrapper.sp-expand-on > .sp-custom-scrub,
.poster-wrapper.sp-expand-on > .sp-custom-scrub *,
.poster-wrapper.sp-expand-on > #sp-expand-close,
.poster-wrapper.sp-expand-on > img,
.poster-wrapper.sp-expand-on > .playBut,
.poster-wrapper.sp-expand-on > a.playBut,
.poster-wrapper.sp-expand-on .playBut,
.poster-wrapper.sp-expand-on .sp-live-badge,
.poster-wrapper.sp-expand-on .sp-badge-live-1440,
.poster-wrapper.sp-expand-on .sp-preview-stop,
.poster-wrapper.sp-expand-on .sp-card-star,
.poster-wrapper.sp-expand-on .sp-view-count,
.poster-wrapper.sp-expand-on .gen-movie-action,
body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub,
body.sp-player-expanded .poster-wrapper.sp-expand-on > .sp-custom-scrub *,
body.sp-player-expanded .poster-wrapper.sp-expand-on > #sp-expand-close,
body.sp-player-expanded #sp-expand-close,
body.sp-player-expanded .poster-wrapper.sp-expand-on > img,
body.sp-player-expanded .poster-wrapper.sp-expand-on .playBut,
body.sp-player-expanded .poster-wrapper.sp-expand-on .sp-live-badge,
body.sp-player-expanded .poster-wrapper.sp-expand-on .sp-badge-live-1440,
body.sp-player-expanded .poster-wrapper.sp-expand-on .sp-preview-stop,
body.sp-player-expanded .cinematic-slide.sp-expanded-player .playBut,
body.sp-player-expanded .cinematic-slide.sp-expanded-player .sp-live-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Overlay shell controlled by css/sp-plyr.css (smooth fade + positions) */
#sp-plyr-overlay .plyr__controls,
#sp-plyr-overlay .plyr__control--overlaid,
#sp-plyr-overlay .plyr__poster { display: none !important; }
/* Popup volume forced next to × — do not override right from sp-plyr.css */
#sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute,
#sp-plyr-overlay #sp-plyr-stage > button.sp-live-vol-btn,
#sp-plyr-overlay .sp-pc-mute,
#sp-plyr-overlay .sp-live-vol-btn {
  right: 52px !important;
  left: auto !important;
  top: 10px !important;
}
#sp-plyr-close {
  right: 10px !important;
  top: 10px !important;
}
/* LIVE | quality badge — inside poster (bottom-left) */
#sp-plyr-stage .sp-pc-live-q {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 12;
  display: inline-flex !important;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  overflow: visible;
}
#sp-plyr-stage .sp-pc-live {
  display: inline-flex !important; align-items: center;
  border: none; background: transparent; color: #fff;
  font: 800 12px/1 system-ui,sans-serif; letter-spacing: .8px; text-transform: uppercase;
  padding: 10px 12px; cursor: pointer; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.22);
}
#sp-plyr-stage .sp-pc-live.is-at-live { background: #e50914; }
#sp-plyr-stage .sp-pc-live:not(.is-at-live) { background: rgba(255,255,255,.1); }
#sp-plyr-stage .sp-pc-live:hover { background: #e50914; }
#sp-plyr-stage .sp-pc-q-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
#sp-plyr-stage .sp-pc-q-btn {
  border: none; background: transparent; color: #fff;
  font: 700 12px/1 system-ui,sans-serif; letter-spacing: .5px;
  padding: 10px 12px; cursor: pointer; white-space: nowrap; border-radius: 0 7px 7px 0;
}
#sp-plyr-stage .sp-pc-q-btn:hover { background: rgba(229,9,20,.8); }
#sp-plyr-stage .sp-pc-q-menu {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
  min-width: 130px; background: #12161e; border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.55); z-index: 20; padding: 6px 0;
}
#sp-plyr-stage .sp-pc-q-wrap.open .sp-pc-q-menu { display: block; }
#sp-plyr-stage .sp-pc-q-menu button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: #fff; font: 600 13px/1.3 system-ui,sans-serif; padding: 10px 16px; cursor: pointer;
}
#sp-plyr-stage .sp-pc-q-menu button:hover,
#sp-plyr-stage .sp-pc-q-menu button.active { background: rgba(229,9,20,.75); }
/* Control bar (no LIVE/quality — those are on poster) */
#sp-plyr-controls {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 16px 22px;
  background: linear-gradient(180deg, #141820, #0a0c10);
  border: 1px solid rgba(255,255,255,.1); border-top: none;
  border-radius: 0 0 12px 12px; box-sizing: border-box;
}
#sp-plyr-controls .sp-pc-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: #e50914;
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; padding: 0; line-height: 1;
}
#sp-plyr-controls .sp-pc-btn:hover { transform: scale(1.1); background: #ff1a24; }
#sp-plyr-controls .sp-pc-stop,
#sp-plyr-controls .sp-pc-mute,
#sp-plyr-controls .sp-pc-fs {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25);
}
#sp-plyr-controls .sp-pc-stop:hover,
#sp-plyr-controls .sp-pc-mute:hover,
#sp-plyr-controls .sp-pc-fs:hover { background: #e50914; border-color: #e50914; }
#sp-plyr-controls .sp-pc-time {
  color: #e8ecf1; font: 700 14px/1 system-ui,sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 3em; text-align: center; user-select: none; padding: 0 4px;
}
#sp-plyr-controls .sp-pc-time.sp-pc-lag { color: #ffb4b8; }
#sp-plyr-controls .sp-pc-track {
  position: relative; flex: 1 1 auto; min-width: 80px; height: 36px;
  display: flex; align-items: center; cursor: pointer; touch-action: none; user-select: none;
}
#sp-plyr-controls .sp-pc-track-bg {
  position: absolute; left: 4px; right: 4px; top: 50%; height: 6px; margin-top: -3px;
  border-radius: 999px; background: rgba(255,255,255,.22); pointer-events: none;
}
#sp-plyr-controls .sp-pc-fill {
  position: absolute; left: 4px; top: 50%; height: 6px; margin-top: -3px;
  width: 0%; max-width: calc(100% - 8px); border-radius: 999px; background: #e50914; pointer-events: none;
}
#sp-plyr-controls .sp-pc-thumb {
  position: absolute; top: 50%; left: 0%; width: 16px; height: 16px;
  margin-top: -8px; margin-left: -8px; border-radius: 50%;
  background: #e50914; border: 2px solid #fff; pointer-events: none; z-index: 2;
}
/* Hide default scrub only when not actively playing on card */
body.sp-plyr-mode .cinematic-slide:not(.sp-offline-playing):not(.sp-live-playing) .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide:not(.sp-offline-playing):not(.sp-live-playing) .sp-live-fs-btn {
  display: none !important;
}
body.sp-plyr-mode .cinematic-slide.sp-offline-playing:not([data-soon="on"]) .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide.sp-live-playing:not([data-soon="on"]) .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing:not([data-soon="on"]) .sp-live-fs-btn,
body.sp-plyr-mode .cinematic-slide.sp-live-playing:not([data-soon="on"]) .sp-live-fs-btn,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing[data-soon="off"] .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide.sp-live-playing[data-soon="off"] .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
}
body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-fs-btn,
body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-vol-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.sp-plyr-mode .cinematic-slide:not(.sp-live-playing):not(.sp-offline-playing) .live-video {
  display: none !important; visibility: hidden !important; pointer-events: none !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing .live-video {
  display: block !important; visibility: visible !important;
  position: absolute !important; inset: 0 !important; z-index: 4 !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing .live-video iframe {
  width: 100% !important; height: 100% !important; border: 0 !important; pointer-events: none !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing .poster-wrapper > img {
  opacity: 0 !important; visibility: hidden !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing .playBut,
body.sp-plyr-mode .cinematic-slide.sp-live-playing a.playBut { display: none !important; }
body.sp-plyr-mode .cinematic-slide:not(.sp-live-playing) .poster-wrapper .playBut,
body.sp-plyr-mode .cinematic-slide:not(.sp-live-playing) a.playBut {
  display: flex !important; visibility: visible !important; opacity: 1 !important;
  pointer-events: auto !important; z-index: 30 !important;
}
body.sp-plyr-mode .cinematic-slide:not(.sp-live-playing) .poster-wrapper > img {
  opacity: 1 !important; visibility: visible !important; display: block !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing:not([data-soon="on"]) .sp-live-vol-btn.sp-card-mute-btn,
body.sp-plyr-mode .cinematic-slide.sp-live-playing[data-soon="off"] .sp-live-vol-btn.sp-card-mute-btn {
  display: flex !important; visibility: visible !important; opacity: 1 !important;
  pointer-events: auto !important; z-index: 20 !important;
}
@media (max-width: 768px) {
  #sp-plyr-overlay { padding: 12px 8px; }
  #sp-plyr-shell { width: 100%; }
  #sp-plyr-stage { max-height: calc(100vh - 120px); }
  #sp-plyr-close { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 20px; }
  #sp-plyr-stage .sp-pc-live-q { left: 10px; bottom: 10px; }
  #sp-plyr-controls { min-height: 58px; padding: 12px; gap: 10px; }
  #sp-plyr-controls .sp-pc-btn { width: 38px; height: 38px; font-size: 14px; }
}

/* ===== style block ===== */

/* data-soon ON + not live: kill ALL player chrome (beats later body.sp-plyr-mode rules) */
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-custom-scrub,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-vol-btn,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-fs-btn,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-card-mute-btn,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-card-vol-wrap,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-preview-stop,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-scrub-pp,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-scrub-stop,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-scrub-q-wrap,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-badge,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-custom-scrub,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-fs-btn,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-vol-btn,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-custom-scrub,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .sp-custom-scrub,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-live-fs-btn,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .sp-live-fs-btn,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-live-vol-btn,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .sp-live-vol-btn,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-custom-scrub,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .sp-custom-scrub,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-live-fs-btn,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-live-vol-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  z-index: -1 !important;
}
/* Soon + not playing: hide video layer, show poster */
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]):not(.sp-offline-playing):not(.sp-live-playing) .live-video {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Soon + playing: SHOW player, no pointer on iframe (no YT chrome clicks) */
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .live-video,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .live-video,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .live-video,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .live-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]):not(.sp-offline-playing):not(.sp-live-playing) .poster-wrapper > img,
html body.sp-plyr-mode .cinematic-slide[data-soon="on"]:not([data-live="on"]):not(.sp-offline-playing):not(.sp-live-playing) .poster-wrapper > img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 1 !important;
}
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .poster-wrapper > img,
html body .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ===== style block ===== */

/* playBut only for VOD (data-live=off); hidden on live cards */
.cinematic-slide[data-live="on"] .playBut,
.cinematic-slide[data-live="on"] a.playBut,
.cinematic-slide[data-live="on"] .poster-wrapper > .playBut {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cinematic-slide[data-live="off"] .playBut,
.cinematic-slide:not([data-live="on"]) .playBut {
  /* VOD: show play button (theme may further style) */
}
/* Live layer visible when playing */
.cinematic-slide[data-live="on"].sp-live-playing .live-video,
.cinematic-slide[data-live="on"].sp-live-playing .live-video iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== style block ===== */

/* Smooth poster ↔ player handoff (no hard flash) */
.gen-banner-movies .cinematic-slide .poster-wrapper > img {
  transition: opacity 0.12s ease, visibility 0.12s ease !important;
}
.gen-banner-movies .cinematic-slide .live-video {
  transition: opacity 0.12s ease, visibility 0.12s ease !important;
}
.gen-banner-movies .cinematic-slide .playBut,
.gen-banner-movies .cinematic-slide a.playBut {
  transition: opacity 0.1s ease !important;
}
/* Keep arrows always usable */
.gen-banner-movies .owl-carousel .owl-prev,
.gen-banner-movies .owl-carousel .owl-next,
.gen-banner-movies .owl-carousel .owl-dot {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.gen-banner-movies .owl-carousel.sp-hero-locked .owl-prev,
.gen-banner-movies .owl-carousel.sp-hero-locked .owl-next,
.gen-banner-movies .owl-carousel.sp-hero-locked .owl-dot {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* ===== style block ===== */

/* ============================================================
   Mobile-friendly player — fits screen (card + popup)
   ============================================================ */

/* --- Card poster / live player --- */
@media (max-width: 991px) {
  .gen-banner-movies .cinematic-slide .poster-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    min-height: 160px !important;
    overflow: hidden !important;
    border-radius: 10px 10px 0 0 !important;
    background: transparent !important;
    margin: 0 auto !important;
  }
  .gen-banner-movies .cinematic-slide .poster-wrapper > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    border-radius: inherit !important;
  }
  .gen-banner-movies .poster-wrapper .live-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }
  .gen-banner-movies .cinematic-slide.sp-live-playing .poster-wrapper .live-video,
  .gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper .live-video {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .gen-banner-movies .poster-wrapper .live-video iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  /* Poster column full width on phones */
  .cinematic-slide .row.flex-row-reverse > .col-xl-6.text-center {
    width: 94% !important;
    max-width: 94% !important;
    flex: 0 0 94% !important;
  }
  .cinematic-slide .row.flex-row-reverse > .col-xl-6:not(.text-center) {
    width: 94% !important;
    max-width: 94% !important;
    flex: 0 0 94% !important;
  }

  /* Scrub + controls stay inside card */
  .gen-banner-movies .sp-custom-scrub {
    left: 6px !important;
    right: 6px !important;
    bottom: 8px !important;
    max-width: calc(100% - 12px) !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }
  .gen-banner-movies .sp-live-badge {
    top: 8px !important;
    left: 8px !important;
    font-size: 10px !important;
    padding: 5px 10px 5px 8px !important;
  }
  .gen-banner-movies .sp-live-vol-btn,
  .gen-banner-movies .sp-live-fs-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 576px) {
  .gen-banner-movies .cinematic-slide .poster-wrapper {
    max-height: none !important;
    min-height: 150px !important;
    border-radius: 8px 8px 0 0 !important;
  }
  .cinematic-slide .row.flex-row-reverse > .col-xl-6.text-center,
  .cinematic-slide .row.flex-row-reverse > .col-xl-6:not(.text-center) {
    width: 96% !important;
    max-width: 96% !important;
    flex: 0 0 96% !important;
  }
  .gen-banner-movies .sp-custom-scrub {
    left: 4px !important;
    right: 4px !important;
    bottom: 6px !important;
    max-width: calc(100% - 8px) !important;
    min-height: 40px !important;
    height: 40px !important;
    gap: 6px !important;
  }
}

/* --- Popup player: fit phone screen --- */
@media (max-width: 991px) {
  .mfp-sp-hero.mfp-bg,
  .mfp-bg.mfp-sp-hero {
    background: #000 !important;
    opacity: 1 !important;
  }
  .mfp-sp-hero.mfp-iframe-holder,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-holder,
  .mfp-wrap.mfp-sp-hero .mfp-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #000 !important;
  }
  .mfp-sp-hero .mfp-content,
  .mfp-wrap.mfp-sp-hero .mfp-content,
  .mfp-iframe-holder .mfp-content {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: 0 !important;
  }
  .mfp-sp-hero .mfp-iframe-scaler,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-scaler {
    width: 100% !important;
    max-width: 100vw !important;
    /* 16:9 within viewport, never overflow */
    padding-top: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: min(56.25vw, 100dvh) !important;
    max-height: min(56.25vw, 100vh) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .mfp-sp-hero .mfp-iframe-scaler iframe,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-scaler iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    object-fit: contain !important;
  }
  /* Controls inset from safe edges */
  .mfp-sp-hero .mfp-close,
  .mfp-iframe-scaler .mfp-close {
    top: max(12px, env(safe-area-inset-top, 12px)) !important;
    right: max(12px, env(safe-area-inset-right, 12px)) !important;
  }
  .mfp-iframe-scaler .sp-mfp-mute,
  .sp-mfp-mute {
    top: max(12px, env(safe-area-inset-top, 12px)) !important;
    right: max(54px, calc(12px + env(safe-area-inset-right, 0px) + 42px)) !important;
  }
  .mfp-iframe-scaler > .sp-custom-scrub {
    left: max(10px, env(safe-area-inset-left, 10px)) !important;
    right: max(10px, env(safe-area-inset-right, 10px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    max-width: none !important;
  }
  .mfp-iframe-scaler > .sp-live-badge,
  .sp-mfp-live-badge {
    top: max(12px, env(safe-area-inset-top, 12px)) !important;
    left: max(12px, env(safe-area-inset-left, 12px)) !important;
  }
}

/* Landscape phone: use full width, letterbox height */
@media (max-width: 991px) and (orientation: landscape) {
  .mfp-sp-hero .mfp-iframe-scaler,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-scaler {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    max-height: 100vh !important;
    aspect-ratio: auto !important;
    padding-top: 0 !important;
  }
  .mfp-sp-hero .mfp-iframe-scaler iframe,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-scaler iframe {
    object-fit: contain !important;
  }
  .gen-banner-movies .cinematic-slide .poster-wrapper {
    max-height: min(70vh, 220px) !important;
    min-height: 120px !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .gen-banner-movies .cinematic-slide .poster-wrapper {
    min-height: 140px !important;
    max-height: min(56vw, 220px) !important;
  }
  .gen-banner-movies .sp-custom-scrub .sp-scrub-time {
    font-size: 11px !important;
  }
}

/* ===== style block ===== */

/* Same player chrome on every main walkthrough card (desktop + mobile) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* All cinematic slides share the same poster/player surface — transparent until play */
.gen-banner-movies .cinematic-slide .poster-wrapper {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}
.gen-banner-movies .cinematic-slide .poster-wrapper .live-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
}
.gen-banner-movies .cinematic-slide .poster-wrapper .live-video iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
}
.gen-banner-movies .cinematic-slide .poster-wrapper .live-video iframe {
  object-fit: contain !important;
  pointer-events: none !important;
}

/* Fullscreen Plyr shell — fits any screen, same on phone & desktop */
#sp-plyr-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.94) !important;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
}
#sp-plyr-overlay.is-open {
  display: flex !important;
}
#sp-plyr-shell {
  width: min(1100px, 100%) !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#sp-plyr-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: min(78vh, calc(100dvh - 100px)) !important;
  background: #000 !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}
#sp-plyr-stage iframe,
#sp-plyr-stage video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: contain !important;
  background: #000 !important;
}
#sp-plyr-controls {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 0 10px 10px !important;
}

/* Mobile: player uses full usable width, never overflows */
@media (max-width: 991px) {
  .gen-banner-movies .cinematic-slide .poster-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    min-height: 160px !important;
    height: auto !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .gen-banner-movies .cinematic-slide .poster-wrapper > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }
  .gen-banner-movies .cinematic-slide.sp-live-playing .poster-wrapper .live-video,
  .gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper .live-video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5 !important;
  }
  .gen-banner-movies .sp-custom-scrub {
    left: 6px !important;
    right: 6px !important;
    bottom: 8px !important;
    max-width: calc(100% - 12px) !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    touch-action: none !important;
  }
  .gen-banner-movies .sp-live-vol-btn,
  .gen-banner-movies .sp-live-fs-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  #sp-plyr-overlay {
    padding: 0 !important;
    background: #000 !important;
  }
  #sp-plyr-shell {
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    justify-content: center !important;
  }
  #sp-plyr-stage {
    width: 100% !important;
    max-width: 100vw !important;
    aspect-ratio: 16 / 9 !important;
    max-height: min(56.25vw, calc(100dvh - 72px)) !important;
    border-radius: 0 !important;
  }
  #sp-plyr-controls {
    border-radius: 0 !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }
  #sp-plyr-close {
    top: max(10px, env(safe-area-inset-top, 10px)) !important;
    right: max(10px, env(safe-area-inset-right, 10px)) !important;
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  #sp-plyr-stage {
    max-height: calc(100dvh - 56px) !important;
    aspect-ratio: auto !important;
    height: calc(100dvh - 56px) !important;
  }
  .gen-banner-movies .cinematic-slide .poster-wrapper {
    max-height: min(70vh, 240px) !important;
  }
}

/* Magnific popup path — same fit rules */
@media (max-width: 991px) {
  .mfp-sp-hero .mfp-iframe-scaler,
  .mfp-wrap.mfp-sp-hero .mfp-iframe-scaler {
    width: 100% !important;
    max-width: 100vw !important;
    padding-top: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: min(56.25vw, 100dvh) !important;
    background: #000 !important;
    overflow: hidden !important;
  }
  .mfp-sp-hero .mfp-iframe-scaler iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* body.sp-plyr-mode: keep card mute + same live surface on all breakpoints */
body.sp-plyr-mode .cinematic-slide.sp-live-playing .live-video,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .live-video {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing .live-video iframe,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .live-video iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* ===== style block ===== */

/* 1440p / quality chip: only when LIVE is on */
.cinematic-slide:not([data-live="on"]) .gen-quality-badge,
.cinematic-slide[data-live="off"] .gen-quality-badge,
.cinematic-slide:not([data-live="on"]) .gen-sen-rating,
.cinematic-slide[data-live="off"] .gen-sen-rating {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.cinematic-slide[data-live="on"] .gen-quality-badge,
.cinematic-slide[data-live="on"] .gen-sen-rating {
  display: inline-block !important;
  visibility: visible !important;
}

/* LIVE poster badge already gated; reinforce */
.cinematic-slide:not([data-live="on"]) .sp-live-badge,
.cinematic-slide[data-live="off"] .sp-live-badge,
.cinematic-slide:not([data-live="on"]) .sp-poster-quality,
.cinematic-slide[data-live="off"] .sp-poster-quality {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Transparent cards even while playing (no black plate) */
.gen-banner-movies .cinematic-slide .poster-wrapper,
.gen-banner-movies .cinematic-slide.sp-live-playing .poster-wrapper,
.gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper {
  background: transparent !important;
}
.gen-banner-movies .cinematic-slide .poster-wrapper .live-video,
.gen-banner-movies .cinematic-slide.sp-live-playing .poster-wrapper .live-video,
.gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper .live-video,
.gen-banner-movies .cinematic-slide .poster-wrapper .live-video iframe {
  background: transparent !important;
}
@media screen and (max-width: 1199px) {
  .cinematic-slide .poster-wrapper,
  .cinematic-slide.sp-live-playing .poster-wrapper,
  .cinematic-slide.sp-offline-playing .poster-wrapper {
    background: transparent !important;
  }
}

/* ===== style block ===== */

/* While popup is open, card player stays ready (paused) — instant on close */
.cinematic-slide.sp-popup-paused .live-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 6 !important;
}
.cinematic-slide.sp-popup-paused .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cinematic-slide.sp-popup-paused .playBut,
.cinematic-slide.sp-popup-paused a.playBut {
  display: none !important;
  visibility: hidden !important;
}

/* ===== style block ===== */

/* Smooth player reveal on all returns — no poster flash */
.cinematic-slide.sp-offline-playing .live-video,
.cinematic-slide.sp-live-playing .live-video,
.cinematic-slide.sp-carousel-paused .live-video,
.cinematic-slide.sp-popup-paused .live-video {
  transition: opacity 0.12s ease !important;
}
.cinematic-slide.sp-offline-playing .poster-wrapper > img,
.cinematic-slide.sp-live-playing .poster-wrapper > img {
  transition: opacity 0.12s ease !important;
}

/* ===== style block ===== */

/* Swiped-away paused card: keep player visible (no poster). Only Stop shows card. */
.cinematic-slide.sp-carousel-paused.sp-offline-playing .live-video,
.cinematic-slide.sp-carousel-paused.sp-live-playing .live-video,
.cinematic-slide.sp-carousel-paused .live-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
.cinematic-slide.sp-carousel-paused.sp-offline-playing .poster-wrapper > img,
.cinematic-slide.sp-carousel-paused.sp-live-playing .poster-wrapper > img,
.cinematic-slide.sp-carousel-paused .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cinematic-slide.sp-carousel-paused .playBut,
.cinematic-slide.sp-carousel-paused a.playBut {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* Instant show when playing class returns — no CSS transition lag */
.cinematic-slide.sp-offline-playing .live-video,
.cinematic-slide.sp-live-playing .live-video {
  transition: none !important;
}
.cinematic-slide.sp-offline-playing .poster-wrapper > img,
.cinematic-slide.sp-live-playing .poster-wrapper > img {
  transition: none !important;
}

/* ===== style block ===== */

/* Offline play-inside-card: same surface as live */
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .live-video {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .live-video iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .playBut,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing a.playBut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== style block ===== */

/* Plyr-style controls always visible on playing cards */
.cinematic-slide.sp-live-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub,
.cinematic-slide.sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 60 !important;
}
body.sp-plyr-mode .cinematic-slide.sp-live-playing:not([data-soon="on"]) .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing:not([data-soon="on"]) .sp-custom-scrub,
body.sp-plyr-mode .cinematic-slide.sp-live-playing .sp-live-fs-btn,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .sp-live-fs-btn,
body.sp-plyr-mode .cinematic-slide.sp-live-playing .sp-live-vol-btn,
body.sp-plyr-mode .cinematic-slide.sp-offline-playing .sp-live-vol-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Mute + FS stay top-right on card */
.cinematic-slide.sp-live-playing .sp-live-vol-btn,
.cinematic-slide.sp-offline-playing .sp-live-vol-btn,
.cinematic-slide.sp-live-playing .sp-card-mute-btn,
.cinematic-slide.sp-offline-playing .sp-card-mute-btn {
  display: flex !important;
  visibility: visible !important;
  z-index: 62 !important;
}
.cinematic-slide.sp-live-playing .sp-live-fs-btn,
.cinematic-slide.sp-offline-playing .sp-live-fs-btn {
  display: flex !important;
  visibility: visible !important;
  z-index: 62 !important;
}
/* Keep player surface stable during owl clones */
.gen-banner-movies .cinematic-slide.sp-live-playing .poster-wrapper,
.gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper {
  position: relative !important;
  overflow: hidden !important;
}
.gen-banner-movies .cinematic-slide.sp-live-playing .live-video,
.gen-banner-movies .cinematic-slide.sp-offline-playing .live-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
}
.gen-banner-movies .cinematic-slide.sp-live-playing .live-video iframe,
.gen-banner-movies .cinematic-slide.sp-offline-playing .live-video iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.gen-banner-movies .cinematic-slide.sp-live-playing .poster-wrapper > img,
.gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ===== style block ===== */

/* data-soon ON + not live: autoplay player, NO controls, NO soon badge */
html body .gen-banner-movies .cinematic-slide .sp-soon-badge,
html body .gen-banner-movies .cinematic-slide[data-soon="on"] .sp-soon-badge,
html body .sp-soon-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-custom-scrub,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .poster-wrapper .sp-custom-scrub,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-vol-btn,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-fs-btn,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-card-mute-btn,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-card-vol-wrap,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-preview-stop,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .plyr,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .plyr__controls,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) [class*="sp-scrub"],
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) [class*="sp-live-vol"],
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) [class*="sp-live-fs"],
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) [class*="sp-card-vol"],
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) [class*="sp-pc-"],
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-custom-scrub,
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-custom-scrub,
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-fs-btn,
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]) .sp-live-vol-btn,
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-live-fs-btn,
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .sp-live-vol-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  z-index: -1 !important;
}
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .live-video,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .live-video,
html body.sp-plyr-mode .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .live-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 6 !important;
}
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .live-video iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  pointer-events: none !important;
}
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .poster-wrapper > img,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-live-playing .poster-wrapper > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing .playBut,
html body .gen-banner-movies .cinematic-slide[data-soon="on"]:not([data-live="on"]).sp-offline-playing a.playBut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== style block ===== */

/* Non-live cards: never show LIVE or 1440p / quality chips */
html body .cinematic-slide:not([data-live="on"]) .sp-live-badge,
html body .cinematic-slide[data-live="off"] .sp-live-badge,
html body .cinematic-slide:not([data-live="on"]) .sp-mfp-live-badge,
html body .cinematic-slide:not([data-live="on"]) .sp-poster-quality,
html body .cinematic-slide[data-live="off"] .sp-poster-quality,
html body .cinematic-slide:not([data-live="on"]) .gen-quality-badge,
html body .cinematic-slide[data-live="off"] .gen-quality-badge,
html body .cinematic-slide:not([data-live="on"]) .gen-sen-rating,
html body .cinematic-slide[data-live="off"] .gen-sen-rating {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
/* Live cards keep LIVE | quality badge */
html body .cinematic-slide[data-live="on"] .sp-live-badge {
  display: inline-flex !important;
  visibility: visible !important;
}
/* Popup: LIVE|1440 only on live streams */
html body .mfp-iframe-scaler:not(.sp-live-popup) .sp-live-badge,
html body .mfp-iframe-scaler:not(.sp-live-popup) .sp-mfp-live-badge,
html body #sp-plyr-overlay:not(.sp-plyr-live) .sp-live-badge,
html body #sp-plyr-overlay:not(.sp-plyr-live) .sp-mfp-live-badge,
html body #sp-plyr-overlay:not(.sp-plyr-live) .sp-plyr-live-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== style block ===== */

/* Popup shell uses same control family as main-card .sp-custom-scrub */
#sp-plyr-overlay.is-open #sp-plyr-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 52px !important;
  padding: 10px 16px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-btn {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(229, 9, 20, 0.95) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-stop,
#sp-plyr-overlay #sp-plyr-controls .sp-pc-mute,
#sp-plyr-overlay #sp-plyr-controls .sp-pc-fs {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-btn:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.08) !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-time {
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-track {
  flex: 1 1 auto !important;
  position: relative !important;
  height: 10px !important;
  cursor: pointer !important;
  border-radius: 999px !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-track-bg {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 999px !important;
  background: #e50914 !important;
}
#sp-plyr-overlay #sp-plyr-controls .sp-pc-thumb {
  position: absolute !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: -11px !important;
  margin-left: -11px !important;
  border-radius: 50% !important;
  background: #e50914 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5) !important;
}

/* Quality in BOTTOM control bar — same spot as main-card .sp-custom-scrub */
#sp-plyr-controls .sp-pc-live-q {
  display: inline-flex !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
#sp-plyr-controls .sp-pc-live {
  display: none;
  align-items: center !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 800 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  padding: 7px 9px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}
#sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live {
  display: inline-flex !important;
  visibility: visible !important;
}
#sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live.is-at-live,
#sp-plyr-controls .sp-pc-live:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  color: #fff !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}
#sp-plyr-controls .sp-pc-q-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  z-index: 21 !important;
  pointer-events: auto !important;
}
#sp-plyr-controls .sp-pc-q-btn {
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 700 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.6px !important;
  padding: 7px 10px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  pointer-events: auto !important;
}
/* Offline: standalone quality chip (same as card offline scrub) */
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live-q,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live-q {
  background: transparent !important;
  border: none !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-q-btn,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-q-btn {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
}
#sp-plyr-controls .sp-pc-q-btn:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  color: #fff !important;
}
#sp-plyr-controls .sp-pc-q-menu {
  display: none;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 120px !important;
  background: #12161e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
  z-index: 80 !important;
  padding: 6px 0 !important;
  pointer-events: auto !important;
}
#sp-plyr-controls .sp-pc-q-wrap.open .sp-pc-q-menu {
  display: block !important;
  visibility: visible !important;
}
#sp-plyr-controls .sp-pc-q-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 600 13px/1.3 system-ui, sans-serif !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}
#sp-plyr-controls .sp-pc-q-menu button:hover,
#sp-plyr-controls .sp-pc-q-menu button.active {
  background: rgba(229, 9, 20, 0.75) !important;
}
/* Live: hide duration (LIVE replaces it) — same as card */
#sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-dur {
  display: none !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-dur,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-dur {
  display: inline !important;
}
/* Control bar overflow visible so quality menu opens upward */
#sp-plyr-controls {
  overflow: visible !important;
}
#sp-plyr-shell {
  overflow: visible !important;
}
/* Never show injected LIVE|1440 badge on offline */
#sp-plyr-overlay.sp-plyr-offline .sp-live-badge,
#sp-plyr-overlay.sp-plyr-offline .sp-plyr-live-badge,
#sp-plyr-overlay.sp-plyr-offline .sp-mfp-live-badge,
#sp-plyr-overlay:not(.sp-plyr-live) .sp-live-badge,
#sp-plyr-overlay:not(.sp-plyr-live) .sp-plyr-live-badge,
#sp-plyr-overlay:not(.sp-plyr-live) .sp-mfp-live-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Hide any leftover stage-top quality from older builds */
#sp-plyr-stage > .sp-pc-live-q {
  display: none !important;
}

/* Magnific path: force same treatment — offline never shows LIVE/1440 */
.mfp-iframe-scaler:not(.sp-live-popup) .sp-live-badge,
.mfp-iframe-scaler:not(.sp-live-popup) .sp-mfp-live-badge,
.mfp-iframe-scaler:not(.sp-live-popup) .sp-poster-quality {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cards data-live off: no LIVE / 1440 (reinforce) */
html body .cinematic-slide[data-live="off"] .sp-live-badge,
html body .cinematic-slide:not([data-live="on"]) .sp-live-badge,
html body .cinematic-slide[data-live="off"] .gen-quality-badge,
html body .cinematic-slide:not([data-live="on"]) .gen-quality-badge,
html body .cinematic-slide[data-live="off"] .gen-sen-rating,
html body .cinematic-slide:not([data-live="on"]) .gen-sen-rating,
html body .cinematic-slide[data-live="off"] .sp-poster-quality,
html body .cinematic-slide:not([data-live="on"]) .sp-poster-quality {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== style block ===== */

/* Popup control bar = same visual as main-card .sp-custom-scrub */
#sp-plyr-shell {
  position: relative !important;
  width: min(1100px, 100%) !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: visible !important;
}
#sp-plyr-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: min(78vh, calc(100dvh - 48px)) !important;
  background: #000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* Bar floats on bottom of video like card scrub */
#sp-plyr-overlay.is-open #sp-plyr-controls,
#sp-plyr-controls {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  height: 48px !important;
  max-width: calc(100% - 16px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
/* Keep controls inside stage for absolute positioning */
#sp-plyr-stage #sp-plyr-controls,
#sp-plyr-shell > #sp-plyr-controls {
  /* when controls is sibling of stage, still overlay via negative margin/absolute on shell */
}
#sp-plyr-shell {
  /* shell is positioning context for absolute controls */
}
#sp-plyr-shell > #sp-plyr-controls {
  /* absolute relative to shell — align to stage bottom */
  bottom: 12px !important;
}
#sp-plyr-controls .sp-pc-btn {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(229, 9, 20, 0.95) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  outline: none !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.35) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
#sp-plyr-controls .sp-pc-btn:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.08) !important;
}
#sp-plyr-controls .sp-pc-stop,
#sp-plyr-controls .sp-pc-mute,
#sp-plyr-controls .sp-pc-fs {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
#sp-plyr-controls .sp-pc-stop:hover,
#sp-plyr-controls .sp-pc-mute:hover,
#sp-plyr-controls .sp-pc-fs:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
}
#sp-plyr-controls .sp-pc-time {
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  text-align: center !important;
  user-select: none !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.02em !important;
  padding: 0 !important;
}
#sp-plyr-controls .sp-pc-track {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 60px !important;
  height: 10px !important;
  display: block !important;
  cursor: pointer !important;
  touch-action: none !important;
  user-select: none !important;
  border-radius: 999px !important;
}
#sp-plyr-controls .sp-pc-track-bg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 10px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  pointer-events: none !important;
}
#sp-plyr-controls .sp-pc-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 10px !important;
  margin: 0 !important;
  width: 0% !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #e50914 !important;
  pointer-events: none !important;
}
#sp-plyr-controls .sp-pc-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0% !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: -11px !important;
  margin-left: -11px !important;
  border-radius: 50% !important;
  background: #e50914 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Quality chip matches card scrub */
#sp-plyr-controls .sp-pc-live-q {
  display: inline-flex !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
#sp-plyr-controls .sp-pc-live {
  font: 800 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  padding: 7px 9px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#sp-plyr-controls .sp-pc-q-btn {
  font: 700 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.6px !important;
  padding: 7px 10px !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live-q,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live-q {
  background: transparent !important;
  border: none !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-q-btn,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-q-btn {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
}
#sp-plyr-controls .sp-pc-q-menu {
  bottom: calc(100% + 8px) !important;
  min-width: 120px !important;
  background: #12161e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
  z-index: 80 !important;
}
/* Close stays top-right on stage */
#sp-plyr-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 45 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
#sp-plyr-close:hover {
  background: #e50914 !important;
  color: #fff !important;
  border-color: #e50914 !important;
}

@media (max-width: 991px) {
  #sp-plyr-controls {
    left: 6px !important;
    right: 6px !important;
    bottom: 8px !important;
    max-width: calc(100% - 12px) !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  #sp-plyr-controls .sp-pc-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
  }
  #sp-plyr-controls .sp-pc-time {
    font-size: 12px !important;
  }
  #sp-plyr-stage {
    max-height: min(56.25vw, calc(100dvh - 24px)) !important;
    border-radius: 0 !important;
  }
  #sp-plyr-shell {
    width: 100% !important;
  }
}

/* ===== style block ===== */

/* Popup bar uses same layout metrics as .sp-custom-scrub on main card */
#sp-plyr-stage {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
#sp-plyr-stage > #sp-plyr-controls,
#sp-plyr-controls.sp-custom-scrub {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  z-index: 55 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  height: 48px !important;
  max-width: calc(100% - 16px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
/* Buttons — same as .sp-scrub-pp / .sp-scrub-stop */
#sp-plyr-controls .sp-pc-pp,
#sp-plyr-controls .sp-pc-stop {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(229, 9, 20, 0.95) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.35) !important;
}
#sp-plyr-controls .sp-pc-stop {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
#sp-plyr-controls .sp-pc-pp:hover,
#sp-plyr-controls .sp-pc-stop:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.08) !important;
}
/* Times */
#sp-plyr-controls .sp-pc-time,
#sp-plyr-controls .sp-pc-cur,
#sp-plyr-controls .sp-pc-dur {
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  user-select: none !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0.02em !important;
  padding: 0 !important;
  line-height: 1 !important;
}
/* Track — same hit area + 6px bar + 16px thumb as card */
#sp-plyr-controls .sp-pc-track {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 64px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  touch-action: none !important;
  user-select: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#sp-plyr-controls .sp-pc-track-bg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 6px !important;
  margin-top: -3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  pointer-events: none !important;
}
#sp-plyr-controls .sp-pc-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  height: 6px !important;
  margin-top: -3px !important;
  width: 0% !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #e50914 !important;
  pointer-events: none !important;
}
#sp-plyr-controls .sp-pc-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0% !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -8px !important;
  margin-left: -8px !important;
  border-radius: 50% !important;
  background: #e50914 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* LIVE + quality — same as card .sp-scrub-live-q */
#sp-plyr-controls .sp-pc-live-q {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 60 !important;
}
#sp-plyr-controls .sp-pc-live {
  display: none;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 800 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  padding: 6px 8px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 2.8em !important;
  text-align: center !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  line-height: 1 !important;
}
#sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
}
#sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live.is-at-live,
#sp-plyr-controls .sp-pc-live:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  color: #fff !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}
#sp-plyr-controls .sp-pc-q-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  z-index: 61 !important;
}
#sp-plyr-controls .sp-pc-q-btn {
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 700 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.6px !important;
  padding: 7px 9px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
#sp-plyr-controls .sp-pc-q-btn:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  color: #fff !important;
}
/* Offline: standalone quality chip after duration (same as card) */
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live-q,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live-q {
  background: transparent !important;
  border: none !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-q-btn,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-q-btn {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
}
#sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-dur {
  display: none !important;
}
#sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-dur,
#sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-dur {
  display: inline !important;
}
#sp-plyr-controls .sp-pc-q-menu {
  display: none;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 120px !important;
  background: #12161e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
  z-index: 80 !important;
  padding: 6px 0 !important;
}
#sp-plyr-controls .sp-pc-q-wrap.open .sp-pc-q-menu {
  display: block !important;
}
#sp-plyr-controls .sp-pc-q-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 600 13px/1.3 system-ui, sans-serif !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}
#sp-plyr-controls .sp-pc-q-menu button:hover,
#sp-plyr-controls .sp-pc-q-menu button.active {
  background: rgba(229, 9, 20, 0.75) !important;
}

/* Corner mute + FS — same as main card top-right */
#sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
#sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  position: absolute !important;
  top: 10px !important;
  z-index: 42 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
#sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  right: 10px !important;
}
#sp-plyr-stage > .sp-pc-mute.sp-pc-corner {
  right: 52px !important;
}
#sp-plyr-close {
  top: 10px !important;
  right: 10px !important;
  /* hide duplicate if FS is corner — keep close as × above FS area */
  right: 94px !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 43 !important;
}
#sp-plyr-stage > .sp-pc-mute.sp-pc-corner:hover,
#sp-plyr-stage > .sp-pc-fs.sp-pc-corner:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
}

@media (max-width: 576px) {
  #sp-plyr-controls.sp-custom-scrub,
  #sp-plyr-stage > #sp-plyr-controls {
    left: 6px !important;
    right: 6px !important;
    bottom: 10px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    max-width: calc(100% - 12px) !important;
  }
  #sp-plyr-controls .sp-pc-pp,
  #sp-plyr-controls .sp-pc-stop {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  #sp-plyr-controls .sp-pc-time {
    font-size: 13px !important;
  }
}

/* ===== style block ===== */

/* ============================================================
   Professional popup player UI — final override
   ============================================================ */
html body #sp-plyr-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(4, 6, 10, 0.96) !important;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html body #sp-plyr-overlay.is-open {
  display: flex !important;
}

html body #sp-plyr-shell {
  position: relative !important;
  width: min(96vw, 1120px) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html body #sp-plyr-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: min(78vh, calc(100dvh - 48px)) !important;
  background: #000 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 80px rgba(0, 0, 0, 0.65) !important;
}

html body #sp-plyr-mount {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
html body #sp-plyr-mount .plyr,
html body #sp-plyr-mount .plyr__video-embed,
html body #sp-plyr-mount .plyr__video-wrapper,
html body #sp-plyr-mount iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* ---- Top-right action cluster: close · mute · fullscreen ---- */
html body #sp-plyr-close,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  position: absolute !important;
  top: 12px !important;
  z-index: 50 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(8, 10, 14, 0.78) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease !important;
}
html body #sp-plyr-close {
  right: 100px !important; /* left of mute */
  font-size: 22px !important;
  color: #fff !important;
  font-weight: 300 !important;
}
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner {
  right: 56px !important;
}
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  right: 12px !important;
}
html body #sp-plyr-close:hover,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner:hover,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.06) !important;
}

/* ---- Bottom control bar (professional, centered row) ---- */
html body #sp-plyr-stage > #sp-plyr-controls,
html body #sp-plyr-controls {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 55 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(
    180deg,
    rgba(12, 14, 20, 0.82) 0%,
    rgba(6, 8, 12, 0.94) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Play / Stop */
html body #sp-plyr-controls .sp-pc-pp,
html body #sp-plyr-controls .sp-pc-stop {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #fff !important;
  transition: transform 0.12s ease, background 0.12s ease !important;
}
html body #sp-plyr-controls .sp-pc-pp {
  background: #e50914 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.4) !important;
}
html body #sp-plyr-controls .sp-pc-stop {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
html body #sp-plyr-controls .sp-pc-pp:hover,
html body #sp-plyr-controls .sp-pc-stop:hover {
  background: #ff1a24 !important;
  border-color: #ff1a24 !important;
  transform: scale(1.06) !important;
}

/* Time labels */
html body #sp-plyr-controls .sp-pc-time,
html body #sp-plyr-controls .sp-pc-cur,
html body #sp-plyr-controls .sp-pc-dur {
  flex: 0 0 auto !important;
  color: #f1f5f9 !important;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  min-width: 2.6em !important;
  text-align: center !important;
  user-select: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.95 !important;
}

/* Seek track — tall hit area, thin visual rail */
html body #sp-plyr-controls .sp-pc-track {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 80px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  touch-action: none !important;
  user-select: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 2px !important;
}
html body #sp-plyr-controls .sp-pc-track-bg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 5px !important;
  margin-top: -2.5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  pointer-events: none !important;
}
html body #sp-plyr-controls .sp-pc-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  height: 5px !important;
  margin-top: -2.5px !important;
  width: 0% !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #e50914 !important;
  pointer-events: none !important;
}
html body #sp-plyr-controls .sp-pc-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0% !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -7px !important;
  margin-left: -7px !important;
  border-radius: 50% !important;
  background: #e50914 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* LIVE + quality chip group */
html body #sp-plyr-controls .sp-pc-live-q {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 60 !important;
}
html body #sp-plyr-controls .sp-pc-live {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 800 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 0 10px !important;
  height: 30px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live {
  display: inline-flex !important;
}
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live.is-at-live,
html body #sp-plyr-controls .sp-pc-live:hover {
  background: rgba(229, 9, 20, 0.85) !important;
}
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-dur {
  display: none !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-dur,
html body #sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-dur {
  display: inline-block !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live-q,
html body #sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live-q {
  background: transparent !important;
  border: none !important;
}
html body #sp-plyr-controls .sp-pc-q-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body #sp-plyr-controls .sp-pc-q-btn {
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 700 11px/1 system-ui, sans-serif !important;
  letter-spacing: 0.4px !important;
  padding: 0 12px !important;
  height: 30px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-q-btn,
html body #sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-q-btn {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  height: 30px !important;
  padding: 0 12px !important;
}
html body #sp-plyr-controls .sp-pc-q-btn:hover {
  background: rgba(229, 9, 20, 0.85) !important;
  color: #fff !important;
}
html body #sp-plyr-controls .sp-pc-q-menu {
  display: none;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 128px !important;
  background: #12161e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
  z-index: 90 !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
}
html body #sp-plyr-controls .sp-pc-q-wrap.open .sp-pc-q-menu {
  display: block !important;
}
html body #sp-plyr-controls .sp-pc-q-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  background: transparent !important;
  color: #e8ecf1 !important;
  font: 600 13px/1.3 system-ui, sans-serif !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}
html body #sp-plyr-controls .sp-pc-q-menu button:hover,
html body #sp-plyr-controls .sp-pc-q-menu button.active {
  background: rgba(229, 9, 20, 0.85) !important;
  color: #fff !important;
}

/* Hide any leftover mute/fs inside the bar if present */
html body #sp-plyr-controls > .sp-pc-mute,
html body #sp-plyr-controls > .sp-pc-fs {
  display: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  html body #sp-plyr-overlay {
    padding: 0 !important;
    background: #000 !important;
  }
  html body #sp-plyr-shell {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body #sp-plyr-stage {
    border-radius: 0 !important;
    max-height: 100dvh !important;
    aspect-ratio: 16 / 9 !important;
  }
  html body #sp-plyr-stage > #sp-plyr-controls,
  html body #sp-plyr-controls {
    left: 8px !important;
    right: 8px !important;
    bottom: 10px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    gap: 8px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }
  html body #sp-plyr-controls .sp-pc-pp,
  html body #sp-plyr-controls .sp-pc-stop {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
  }
  html body #sp-plyr-controls .sp-pc-time {
    font-size: 12px !important;
    min-width: 2.2em !important;
  }
  html body #sp-plyr-close,
  html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
  html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
    width: 36px !important;
    height: 36px !important;
    top: 10px !important;
  }
  html body #sp-plyr-close { right: 92px !important; }
  html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner { right: 50px !important; }
  html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner { right: 10px !important; }
}

/* ===== style block ===== */

/* ============================================================
   Popup bottom bar = EXACT same as main-card .sp-custom-scrub
   ============================================================ */

/* Bar container — copy of .sp-custom-scrub on poster */
html body #sp-plyr-stage > #sp-plyr-controls,
html body #sp-plyr-controls.sp-custom-scrub,
html body #sp-plyr-controls {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  z-index: 55 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  max-width: calc(100% - 16px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.94) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Play / Stop — exact card sizes */
html body #sp-plyr-controls .sp-pc-pp,
html body #sp-plyr-controls .sp-pc-stop,
html body #sp-plyr-controls .sp-scrub-pp,
html body #sp-plyr-controls .sp-scrub-stop {
  flex: 0 0 38px !important;
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  outline: none !important;
  box-sizing: border-box !important;
}
html body #sp-plyr-controls .sp-pc-pp,
html body #sp-plyr-controls .sp-scrub-pp {
  background: rgba(229, 9, 20, 0.95) !important;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.35) !important;
}
html body #sp-plyr-controls .sp-pc-stop,
html body #sp-plyr-controls .sp-scrub-stop {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
html body #sp-plyr-controls .sp-pc-pp:hover,
html body #sp-plyr-controls .sp-pc-stop:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: scale(1.08) !important;
}

/* Live popup: hide play/stop like live card scrub */
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-pp,
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-stop {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* Times — exact card */
html body #sp-plyr-controls .sp-pc-time,
html body #sp-plyr-controls .sp-pc-cur,
html body #sp-plyr-controls .sp-pc-dur,
html body #sp-plyr-controls .sp-scrub-time {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  text-align: center !important;
  user-select: none !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0.02em !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Track — exact card (28px hit / 6px rail / 16px thumb) */
html body #sp-plyr-controls .sp-pc-track,
html body #sp-plyr-controls .sp-scrub-track {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 64px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  touch-action: none !important;
  user-select: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #sp-plyr-controls .sp-pc-track-bg,
html body #sp-plyr-controls .sp-scrub-track-bg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 6px !important;
  margin-top: -3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  pointer-events: none !important;
}
html body #sp-plyr-controls .sp-pc-fill,
html body #sp-plyr-controls .sp-scrub-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  height: 6px !important;
  margin-top: -3px !important;
  width: 0% !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #e50914 !important;
  pointer-events: none !important;
}
html body #sp-plyr-controls .sp-pc-thumb,
html body #sp-plyr-controls .sp-scrub-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0% !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -8px !important;
  margin-left: -8px !important;
  border-radius: 50% !important;
  background: #e50914 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* LIVE + quality — exact .sp-scrub-live-q */
html body #sp-plyr-controls .sp-pc-live-q,
html body #sp-plyr-controls .sp-scrub-live-q {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 60 !important;
  height: auto !important;
}
html body #sp-plyr-controls .sp-pc-live {
  display: none !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 800 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  padding: 7px 9px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 2.8em !important;
  text-align: center !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  line-height: 1 !important;
  height: auto !important;
}
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-live.is-at-live,
html body #sp-plyr-controls .sp-pc-live:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  color: #fff !important;
}
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-controls .sp-pc-dur {
  display: none !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-dur,
html body #sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-dur {
  display: inline !important;
}
/* Offline: quality is standalone chip after duration */
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-live-q,
html body #sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-live-q {
  background: transparent !important;
  border: none !important;
}
html body #sp-plyr-controls .sp-pc-q-wrap,
html body #sp-plyr-controls .sp-scrub-q-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  z-index: 61 !important;
}
html body #sp-plyr-controls .sp-pc-q-btn,
html body #sp-plyr-controls .sp-scrub-q-btn {
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 700 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.6px !important;
  padding: 7px 9px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  height: auto !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-controls .sp-pc-q-btn,
html body #sp-plyr-overlay:not(.sp-plyr-live) #sp-plyr-controls .sp-pc-q-btn {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
}
html body #sp-plyr-controls .sp-pc-q-btn:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  color: #fff !important;
}
html body #sp-plyr-controls .sp-pc-q-menu {
  display: none;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 120px !important;
  background: #12161e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
  z-index: 80 !important;
  padding: 6px 0 !important;
}
html body #sp-plyr-controls .sp-pc-q-wrap.open .sp-pc-q-menu {
  display: block !important;
}
html body #sp-plyr-controls .sp-pc-q-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font: 600 13px/1.3 system-ui, sans-serif !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}
html body #sp-plyr-controls .sp-pc-q-menu button:hover,
html body #sp-plyr-controls .sp-pc-q-menu button.active {
  background: rgba(229, 9, 20, 0.75) !important;
}

/* Never put mute/fs inside bottom bar — card keeps them top-right */
html body #sp-plyr-controls > .sp-pc-mute,
html body #sp-plyr-controls > .sp-pc-fs {
  display: none !important;
}

/* Top-right cluster stays out of the bar (same as card) */
html body #sp-plyr-close {
  position: absolute !important;
  top: 10px !important;
  right: 94px !important;
  z-index: 50 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #e50914 !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  position: absolute !important;
  top: 10px !important;
  z-index: 50 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner { right: 52px !important; }
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner { right: 10px !important; }
html body #sp-plyr-close:hover,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner:hover,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
}

@media (max-width: 576px) {
  html body #sp-plyr-controls,
  html body #sp-plyr-stage > #sp-plyr-controls {
    left: 6px !important;
    right: 6px !important;
    bottom: 10px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    max-width: calc(100% - 12px) !important;
  }
  html body #sp-plyr-controls .sp-pc-pp,
  html body #sp-plyr-controls .sp-pc-stop {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
  }
  html body #sp-plyr-controls .sp-pc-time {
    font-size: 13px !important;
  }
}

/* ===== style block ===== */

/* Popup offline = same card scrub — force visible over global hide rules */
html body #sp-plyr-overlay.is-open { display: flex !important; }
html body #sp-plyr-shell {
  width: min(96vw, 1400px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  position: relative !important;
}
html body #sp-plyr-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: min(86vh, calc(100dvh - 32px)) !important;
  background: #000 !important;
  border-radius: 12px !important;
  overflow: visible !important;
}
html body #sp-plyr-mount {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #000 !important;
}
html body #sp-plyr-mount iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

html body #sp-plyr-stage > .sp-custom-scrub,
html body #sp-plyr-stage > .sp-custom-scrub.sp-popup-scrub,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage > .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  z-index: 55 !important;
  max-width: calc(100% - 16px) !important;
}

/* Offline: all buttons visible */
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-pp,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-stop {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  width: 38px !important;
  height: 38px !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-track,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-cur,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-dur:not(.is-live-jump),
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-q-btn,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-live-q,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-q-wrap {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-cur,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-dur:not(.is-live-jump) {
  display: inline !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-q-btn,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-q-wrap,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-live-q {
  display: inline-flex !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-dur.is-live-jump {
  display: none !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-live-q {
  background: transparent !important;
  border: none !important;
}
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage .sp-scrub-q-btn {
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  color: #fff !important;
}

html body #sp-plyr-controls { display: none !important; height: 0 !important; overflow: hidden !important; }

html body #sp-plyr-close,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  position: absolute !important;
  top: 10px !important;
  z-index: 60 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: rgba(0,0,0,0.75) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}
html body #sp-plyr-close { right: 94px !important; color: #e50914 !important; font-size: 20px !important; }
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner { right: 52px !important; }
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner { right: 10px !important; }

/* ===== style block ===== */

/* ============================================================
   POPUP = MAIN CARD — one scrub, one mute model, no separate bar
   ============================================================ */
html body #sp-plyr-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(4, 6, 10, 0.96) !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html body #sp-plyr-overlay.is-open { display: flex !important; }

html body #sp-plyr-shell {
  position: relative !important;
  width: min(96vw, 1400px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}
html body #sp-plyr-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: min(86vh, calc(100dvh - 32px)) !important;
  background: #000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 28px 80px rgba(0,0,0,.65) !important;
}
html body #sp-plyr-mount {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: #000 !important;
  pointer-events: none !important;
}
html body #sp-plyr-mount iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* Kill separate control bar forever */
html body #sp-plyr-controls,
html body #sp-plyr-overlay #sp-plyr-controls,
html body .sp-pc-pp,
html body .sp-pc-stop,
html body .sp-pc-track {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Same scrub as card on stage */
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 12px !important;
  z-index: 65 !important;
  max-width: calc(100% - 16px) !important;
}
/* Live popup: hide play/stop like live card */
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-stage > .sp-custom-scrub .sp-scrub-pp,
html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-stage > .sp-custom-scrub .sp-scrub-stop {
  display: none !important;
}
/* Offline popup: show play/stop like offline card */
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage > .sp-custom-scrub .sp-scrub-pp,
html body #sp-plyr-overlay.sp-plyr-offline #sp-plyr-stage > .sp-custom-scrub .sp-scrub-stop {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
}

/* Corner buttons — exact main-card sizes (34px) + layout: mute | FS | × */
html body #sp-plyr-close,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  position: absolute !important;
  top: 10px !important;
  z-index: 70 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(0,0,0,.75) !important;
  color: #fff !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  line-height: 1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s ease, color .2s ease !important;
}
/* × same as main-card .sp-preview-stop */
html body #sp-plyr-close {
  right: 10px !important;
  left: auto !important;
  color: #e50914 !important;
  font-size: 18px !important;
  font-family: Arial, Baskerville, monospace !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
/* FS same as main-card .sp-live-fs-btn offset from × */
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  right: 50px !important;
  font-size: 14px !important;
}
/* Mute on/off — popup uses 52px (next to ×); final control is sp-one-player-control */
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner {
  right: 52px !important;
  font-size: 14px !important;
  color: #e50914 !important;
}
html body #sp-plyr-close:hover,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner:hover,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}

/* Cards unchanged */
html body .cinematic-slide.sp-offline-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub,
html body .cinematic-slide.sp-live-playing:not([data-soon="on"]) .poster-wrapper > .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 576px) {
  html body #sp-plyr-overlay { padding: 0 !important; background: #000 !important; }
  html body #sp-plyr-shell { width: 100% !important; max-width: 100% !important; }
  html body #sp-plyr-stage { border-radius: 0 !important; max-height: 100dvh !important; }
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub {
    left: 6px !important; right: 6px !important; bottom: 10px !important;
  }
}

/* ===== style block ===== */

/* ===== Popup controls = main card (34px circles) ===== */
html body #sp-plyr-close,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner,
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute {
  position: absolute !important;
  top: 10px !important;
  z-index: 70 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.75) !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s ease, color 0.2s ease !important;
}
/* × — identical to main-card .sp-preview-stop */
html body #sp-plyr-close {
  right: 10px !important;
  left: auto !important;
  color: #e50914 !important;
  font-size: 18px !important;
  font-family: Arial, Baskerville, monospace !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
/* Fullscreen — same as card .sp-live-fs-btn */
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  right: 50px !important;
  color: #fff !important;
  font-size: 14px !important;
}
/* Mute on / mute off — next to × on popup (final say: sp-one-player-control) */
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute.sp-live-vol-btn {
  right: 52px !important;
  left: auto !important;
  color: #e50914 !important;
  font-size: 14px !important;
}
html body #sp-plyr-close:hover,
html body #sp-plyr-close:focus,
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner:hover,
html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45) !important;
}
html body #sp-plyr-stage > .sp-pc-mute {
  color: #e50914 !important;
  border-color: rgba(229, 9, 20, 0.55) !important;
}
html body #sp-plyr-stage > .sp-pc-mute .sp-vol-svg,
html body #sp-plyr-stage > .sp-pc-mute svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  color: #e50914 !important;
  fill: #e50914 !important;
  pointer-events: none !important;
}
html body #sp-plyr-stage > .sp-pc-mute:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
}
html body #sp-plyr-stage > .sp-pc-mute:hover .sp-vol-svg,
html body #sp-plyr-stage > .sp-pc-mute:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Mount never blocks seek left/right */
html body #sp-plyr-mount,
html body #sp-plyr-mount iframe {
  pointer-events: none !important;
}
/* Scrub seek anywhere on popup + card */
.sp-custom-scrub,
.sp-custom-scrub .sp-scrub-track,
#sp-plyr-stage > .sp-custom-scrub,
#sp-plyr-stage > .sp-custom-scrub .sp-scrub-track {
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: pointer !important;
}
.sp-custom-scrub .sp-scrub-track-bg,
.sp-custom-scrub .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-thumb {
  pointer-events: none !important;
}
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 65 !important;
}
/* Instant thumb while dragging left or right */
.sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
.sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-thumb,
#sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
#sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
#sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-fill,
#sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-thumb {
  transition: none !important;
}

@media (max-width: 576px) {
  html body #sp-plyr-close { right: 10px !important; top: 10px !important; width: 34px !important; height: 34px !important; }
  html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner { right: 50px !important; width: 34px !important; height: 34px !important; }
  /* Popup volume next to × — controlled by sp-one-player-control at bottom */
  html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner { right: 52px !important; width: 34px !important; height: 34px !important; }
}

/* ===== style block ===== */

/* Main card + popup: zero lag when scrubbing back/forward */
.cinematic-slide .sp-custom-scrub .sp-scrub-fill,
.cinematic-slide .sp-custom-scrub .sp-scrub-thumb,
.sp-custom-scrub .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-thumb {
  will-change: width, left;
}
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-fill,
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-thumb,
.sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
.sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-thumb {
  transition: none !important;
}
/* no progress transition — prevents seek bar glitch */

.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-fill,
.cinematic-slide .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-thumb {
  transition: none !important;
}

/* ===== style block ===== */

/* Card + popup isolation: video layers never steal scrub pointer */
.cinematic-slide.sp-offline-playing .poster-wrapper .live-video,
.cinematic-slide.sp-live-playing .poster-wrapper .live-video,
.cinematic-slide.sp-offline-playing .poster-wrapper .live-video iframe,
.cinematic-slide.sp-live-playing .poster-wrapper .live-video iframe,
#sp-plyr-mount,
#sp-plyr-mount iframe {
  pointer-events: none !important;
}
.cinematic-slide .poster-wrapper > .sp-custom-scrub,
.cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-track,
#sp-plyr-stage > .sp-custom-scrub,
#sp-plyr-stage > .sp-custom-scrub .sp-scrub-track {
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: pointer !important;
  z-index: 60 !important;
}

/* ===== style block ===== */

/* Kill all fill/thumb transitions — they cause visible seek glitches */
.sp-custom-scrub .sp-scrub-fill,
.sp-custom-scrub .sp-scrub-thumb,
.cinematic-slide .sp-custom-scrub .sp-scrub-fill,
.cinematic-slide .sp-custom-scrub .sp-scrub-thumb,
#sp-plyr-stage > .sp-custom-scrub .sp-scrub-fill,
#sp-plyr-stage > .sp-custom-scrub .sp-scrub-thumb,
.mfp-iframe-scaler > .sp-custom-scrub .sp-scrub-fill,
.mfp-iframe-scaler > .sp-custom-scrub .sp-scrub-thumb {
  transition: none !important;
  animation: none !important;
}

/* ===== style block ===== */

/* Popup uses SAME scrub as main card — never show separate #sp-plyr-controls chrome */
html body #sp-plyr-controls,
html body #sp-plyr-overlay #sp-plyr-controls,
html body .sp-pc-pp,
html body .sp-pc-stop,
html body .sp-pc-track,
html body .sp-pc-fill,
html body .sp-pc-thumb,
html body .sp-pc-time {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ===== style block ===== */

/* ========== POPUP OVERLAY — smooth fade ========== */
html body #sp-plyr-overlay {
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.32s ease, visibility 0.32s ease !important;
}
html body #sp-plyr-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ========== POPUP CORNER BUTTONS (easy to edit) ==========
   Layout (right edge → left):
     × close     = 10px
     volume      = 52px   ← next to ×
     (fullscreen = hidden on popup)
   Button size: 34×34
   To add a new button later: pick a right value (e.g. 94px) and style it here.
*/
html body #sp-plyr-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 70 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: rgba(0,0,0,0.75) !important;
  color: #e50914 !important;
  font: 700 18px/1 Arial, Baskerville, monospace !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.2s ease !important;
}
html body #sp-plyr-close:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
}

/* Volume — forced next to × */
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute,
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-live-vol-btn,
html body #sp-plyr-overlay .sp-pc-mute,
html body #sp-plyr-overlay .sp-live-vol-btn,
html body #sp-plyr-overlay button.sp-pc-mute.sp-pc-corner {
  position: absolute !important;
  top: 10px !important;
  right: 52px !important;
  left: auto !important;
  z-index: 70 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(229, 9, 20, 0.55) !important;
  background: rgba(0,0,0,0.75) !important;
  color: #e50914 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.2s ease !important;
}
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute:hover,
html body #sp-plyr-overlay .sp-live-vol-btn:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  transform: scale(1.12) !important;
}

/* Fullscreen — HIDDEN on popup only (card still has FS) */
html body #sp-plyr-overlay .sp-pc-fs,
html body #sp-plyr-overlay .sp-pc-fs.sp-pc-corner,
html body #sp-plyr-overlay .sp-live-fs-btn,
html body #sp-plyr-overlay #sp-plyr-stage > .sp-pc-fs {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Mobile — same layout */
@media (max-width: 576px) {
  html body #sp-plyr-close {
    right: 10px !important;
    top: 10px !important;
    width: 34px !important;
    height: 34px !important;
  }
  html body #sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute,
  html body #sp-plyr-overlay #sp-plyr-stage > button.sp-live-vol-btn,
  html body #sp-plyr-overlay .sp-pc-mute,
  html body #sp-plyr-overlay .sp-live-vol-btn {
    right: 52px !important;
    top: 10px !important;
    width: 34px !important;
    height: 34px !important;
  }
}

/* ===== Center play (match index cards) — theme gen-button, middle of poster ===== */
.gen-movie-img,
#game-list .gen-movie-img,
.search-results-section .gen-movie-img {
  position: relative !important;
  overflow: hidden !important;
}
.gen-movie-img .gen-movie-action,
#game-list .gen-movie-img .gen-movie-action,
#game-list .gen-movie-action,
.search-results-section .gen-movie-img .gen-movie-action,
.search-results-section .gen-movie-action {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 11 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  transform: none !important;
}
/* Button itself: keep theme look; only ensure it's tappable and centered by flex parent */
.gen-movie-img .gen-movie-action .gen-button,
.gen-movie-img .gen-movie-action a.gen-button,
.gen-movie-img .gen-movie-action a.game-switch-btn,
#game-list .gen-movie-action .gen-button,
#game-list .gen-movie-action a.gen-button,
#game-list .gen-movie-action a.game-switch-btn,
.search-results-section .gen-movie-action .gen-button,
.search-results-section .gen-movie-action a.gen-button,
.search-results-section .gen-movie-action a.game-switch-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 12 !important;
  transform: none !important;
}
/* Eye / fav stay top-right above center play */
.gen-movie-img .sp-play-btn,
.gen-movie-img .sp-fav-btn,
#game-list .sp-play-btn,
#game-list .sp-fav-btn,
.search-results-section .sp-play-btn,
.search-results-section .sp-fav-btn {
  z-index: 20 !important;
  pointer-events: auto !important;
}
/* Hide center play only during preview */
.gen-movie-img.sp-preview-active .gen-movie-action,
#game-list .gen-movie-img.sp-preview-active .gen-movie-action,
.search-results-section .gen-movie-img.sp-preview-active .gen-movie-action {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== LIVE on mobile: VIDEO ONLY — zero controls ===== */
@media (max-width: 991px) {
  /* Scrub bar + every child (mute/expand/pp/stop/time/track) */
  .cinematic-slide[data-live="on"] .sp-custom-scrub,
  .cinematic-slide[data-live="on"] .sp-custom-scrub *,
  .cinematic-slide.sp-live-playing .sp-custom-scrub,
  .cinematic-slide.sp-live-playing .sp-custom-scrub *,
  .cinematic-slide[data-live="on"].sp-live-playing .poster-wrapper > .sp-custom-scrub,
  .cinematic-slide[data-live="on"].sp-live-playing .poster-wrapper > .sp-custom-scrub *,
  .cinematic-slide[data-live="on"] .sp-scrub-mute,
  .cinematic-slide[data-live="on"] .sp-scrub-expand,
  .cinematic-slide.sp-live-playing .sp-scrub-mute,
  .cinematic-slide.sp-live-playing .sp-scrub-expand,
  .cinematic-slide[data-live="on"] .sp-scrub-pp,
  .cinematic-slide[data-live="on"] .sp-scrub-stop,
  .cinematic-slide.sp-live-playing .sp-scrub-pp,
  .cinematic-slide.sp-live-playing .sp-scrub-stop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Corner volume / expand / fs / card vol */
  .cinematic-slide[data-live="on"] .sp-live-fs-btn,
  .cinematic-slide[data-live="on"] .sp-live-vol-btn,
  .cinematic-slide[data-live="on"] .sp-card-vol-wrap,
  .cinematic-slide[data-live="on"] .sp-card-mute-btn,
  .cinematic-slide.sp-live-playing .sp-live-fs-btn,
  .cinematic-slide.sp-live-playing .sp-live-vol-btn,
  .cinematic-slide.sp-live-playing .sp-card-vol-wrap,
  .cinematic-slide.sp-live-playing .sp-card-mute-btn,
  .cinematic-slide[data-live="on"] .sp-pc-mute,
  .cinematic-slide[data-live="on"] .sp-pc-fs,
  .cinematic-slide.sp-live-playing .sp-pc-mute,
  .cinematic-slide.sp-live-playing .sp-pc-fs {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* Popup live mobile */
  html body #sp-plyr-overlay.sp-plyr-live .sp-custom-scrub,
  html body #sp-plyr-overlay.sp-plyr-live .sp-custom-scrub *,
  html body #sp-plyr-overlay.sp-plyr-live .sp-scrub-mute,
  html body #sp-plyr-overlay.sp-plyr-live .sp-scrub-expand,
  html body #sp-plyr-overlay.sp-plyr-live .sp-pc-mute,
  html body #sp-plyr-overlay.sp-plyr-live .sp-pc-fs,
  html body #sp-plyr-overlay.sp-plyr-live .sp-live-vol-btn,
  html body #sp-plyr-overlay.sp-plyr-live .sp-live-fs-btn,
  html body #sp-plyr-overlay.sp-plyr-live #sp-plyr-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Expand stage live mobile */
  #sp-expand-stage.sp-expand-live > .sp-custom-scrub,
  #sp-expand-stage.sp-expand-live > .sp-custom-scrub *,
  #sp-expand-stage.sp-expand-live .sp-scrub-mute,
  #sp-expand-stage.sp-expand-live .sp-scrub-expand,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .sp-custom-scrub,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .sp-custom-scrub *,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .sp-scrub-mute,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .sp-scrub-expand,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .sp-live-vol-btn,
  body.sp-player-expanded .cinematic-slide[data-live="on"] .sp-live-fs-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ===== data-badge = pure overlay ONLY — never affects live player / buffering ===== */
.cinematic-slide .sp-live-badge,
.cinematic-slide .sp-badge-live-1440 {
  pointer-events: none !important;
  z-index: 30 !important;
  /* Sit above poster art, never intercept media */
  position: absolute !important;
}
/* Show only when live + badge on (default on when attribute missing) */
.cinematic-slide[data-live="on"]:not([data-badge="off"]) .sp-live-badge,
.cinematic-slide[data-live="on"][data-badge="on"] .sp-live-badge,
.cinematic-slide[data-live="on"]:not([data-badge="off"]) .sp-badge-live-1440,
.cinematic-slide[data-live="on"][data-badge="on"] .sp-badge-live-1440 {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Explicit off: hide overlay — do not remove node, do not touch iframe */
.cinematic-slide[data-badge="off"] .sp-live-badge,
.cinematic-slide[data-badge="off"] .sp-badge-live-1440,
.cinematic-slide[data-live="on"][data-badge="off"] .sp-live-badge,
.cinematic-slide[data-live="on"][data-badge="off"] .sp-badge-live-1440 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Badge must never live inside .live-video (player layer) */
.live-video .sp-live-badge,
.live-video .sp-badge-live-1440 {
  display: none !important;
}


/* ===== Mobile: NO expand on data-live="off" (and all mobile scrub expand) ===== */
@media (max-width: 991px) {
  /* Beat offline display:flex !important rules */
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide[data-live="off"].sp-offline-playing .sp-scrub-expand,
  .cinematic-slide.sp-offline-playing .sp-scrub-expand,
  .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide .sp-scrub-expand,
  .mfp-iframe-scaler > .sp-custom-scrub .sp-scrub-expand,
  html body #sp-plyr-overlay .sp-scrub-expand,
  html body #sp-plyr-overlay #sp-plyr-stage > .sp-custom-scrub .sp-scrub-expand,
  #sp-expand-stage > .sp-custom-scrub .sp-scrub-expand,
  body.sp-player-expanded .sp-scrub-expand {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}


/* ===== Mobile: smaller control buttons so everything fits ===== */
@media (max-width: 991px) {
  .sp-custom-scrub,
  .cinematic-slide .poster-wrapper > .sp-custom-scrub,
  .mfp-iframe-scaler > .sp-custom-scrub,
  html body #sp-plyr-overlay #sp-plyr-stage > .sp-custom-scrub {
    left: 4px !important;
    right: 4px !important;
    bottom: 6px !important;
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    max-width: calc(100% - 8px) !important;
  }
  .sp-custom-scrub .sp-scrub-pp,
  .sp-custom-scrub .sp-scrub-stop,
  .sp-custom-scrub .sp-scrub-mute,
  .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-pp,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-stop,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-mute,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-expand {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    font-size: 11px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .sp-custom-scrub .sp-scrub-time,
  .sp-custom-scrub .sp-scrub-cur,
  .sp-custom-scrub .sp-scrub-dur {
    font-size: 11px !important;
    min-width: 0 !important;
    letter-spacing: 0 !important;
  }
  .sp-custom-scrub .sp-scrub-track {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: 4px !important;
  }
  .sp-custom-scrub .sp-scrub-thumb {
    width: 12px !important;
    height: 12px !important;
  }
  .sp-custom-scrub .sp-scrub-q-btn,
  .sp-custom-scrub .sp-scrub-q-wrap {
    font-size: 10px !important;
    padding: 2px 4px !important;
    max-width: 42px !important;
  }
  /* Corner vol if still present on offline */
  .cinematic-slide.sp-offline-playing .sp-live-vol-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 576px) {
  .sp-custom-scrub,
  .cinematic-slide .poster-wrapper > .sp-custom-scrub,
  .mfp-iframe-scaler > .sp-custom-scrub,
  html body #sp-plyr-overlay #sp-plyr-stage > .sp-custom-scrub {
    left: 3px !important;
    right: 3px !important;
    bottom: 5px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 2px 5px !important;
    gap: 3px !important;
    border-radius: 7px !important;
    max-width: calc(100% - 6px) !important;
  }
  .sp-custom-scrub .sp-scrub-pp,
  .sp-custom-scrub .sp-scrub-stop,
  .sp-custom-scrub .sp-scrub-mute,
  .sp-custom-scrub .sp-scrub-expand,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
  .cinematic-slide[data-live="off"] .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-stop,
  .cinematic-slide[data-live="off"][data-poster="off"].sp-offline-playing .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-pp,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-stop,
  html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-mute {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    font-size: 10px !important;
  }
  .sp-custom-scrub .sp-scrub-time,
  .sp-custom-scrub .sp-scrub-cur,
  .sp-custom-scrub .sp-scrub-dur {
    font-size: 10px !important;
  }
}


/* ============================================================
   STUPPLAYS MAIN CARD PLAYER v4
   One stable video layer per real cinematic card.
   ============================================================ */
.gen-banner-movies .cinematic-slide .sp-main-card-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000;
  z-index: 2;
}
.gen-banner-movies .cinematic-slide .sp-main-card-video iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.gen-banner-movies .cinematic-slide.sp-main-card-active .playBut {
  pointer-events: none !important;
  opacity: 0 !important;
}
.gen-banner-movies .cinematic-slide.sp-live-playing .sp-main-card-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.gen-banner-movies .cinematic-slide.sp-live-paused .sp-main-card-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Owl clones are visual-only; they must never display/own a player. */
.gen-banner-movies .owl-item.cloned .cinematic-slide .sp-main-card-video {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* MOBILE MAIN-CARD FULLSCREEN: keep the video completely clean.
   The native player owns its fullscreen UI; hide only our site toast. */
@media (max-width: 991px) {
  html:fullscreen #sp-toast-popup,
  body:fullscreen #sp-toast-popup,
  html:-webkit-full-screen #sp-toast-popup,
  body:-webkit-full-screen #sp-toast-popup,
  .sp-popup-fs-active #sp-toast-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* FINAL EXPANDED PLAYER FIX: persistent close button on desktop + mobile.
   The player remains expanded until the user presses X, clicks outside, or presses Escape. */
html body.sp-player-expanded #sp-expand-close,
html body.sp-player-expanded .poster-wrapper.sp-expand-on > #sp-expand-close {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 100020 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.72) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 38px !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
html body.sp-player-expanded #sp-expand-close:hover,
html body.sp-player-expanded #sp-expand-close:focus-visible {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  outline: none !important;
}
html body.sp-player-expanded .sp-expand-backdrop {
  z-index: 99980 !important;
  pointer-events: auto !important;
}
html body.sp-player-expanded .poster-wrapper.sp-expand-on {
  z-index: 99990 !important;
}