/**
 * stupplays — ONE player (main card + popup)
 * Shared scrub / mute / FS chrome. Load after site CSS.
 */

/* ========== Popup overlay shell ========== */
html body #sp-plyr-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000000 !important;
  display: flex !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;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
html body #sp-plyr-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !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, 0.08), 0 28px 80px rgba(0, 0, 0, 0.65) !important;
}

/* Video layer never steals scrub / mute clicks */
html body #sp-plyr-mount,
html body #sp-plyr-mount iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Kill legacy separate control bar */
html body #sp-plyr-controls,
html body #sp-plyr-overlay #sp-plyr-controls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ========== Shared scrub (card + popup) ========== */
.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;
}

/* Visible on card while playing */
.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;
  pointer-events: auto !important;
}

/* Visible on popup — same scrub engine */
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub.is-visible {
  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;
}

/* Seek track — click/drag anywhere (card + popup) */
.sp-custom-scrub .sp-scrub-track,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-track {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 64px !important;
  min-height: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.sp-custom-scrub .sp-scrub-track-bg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 4px !important;
  margin-top: -2px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  pointer-events: none !important;
}

.sp-custom-scrub .sp-scrub-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  height: 4px !important;
  margin-top: -2px !important;
  width: 0;
  border-radius: 2px !important;
  background: #e50914 !important;
  pointer-events: none !important;
  transition: none !important;
}

.sp-custom-scrub .sp-scrub-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0;
  width: 14px !important;
  height: 14px !important;
  margin: -7px 0 0 -7px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
  transition: none !important;
}

.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,
html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-fill,
html body #sp-plyr-overlay .sp-custom-scrub .sp-scrub-track.is-seeking .sp-scrub-thumb {
  transition: none !important;
}

.sp-custom-scrub .sp-scrub-time {
  color: #f1f5f9 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  min-width: 2.8em !important;
  pointer-events: none !important;
}

.sp-custom-scrub .sp-scrub-pp,
.sp-custom-scrub .sp-scrub-stop {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  padding: 0 !important;
  font-size: 13px !important;
}

.sp-custom-scrub .sp-scrub-pp:hover,
.sp-custom-scrub .sp-scrub-stop:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
}

/* Live: hide pp/stop on scrub */
.cinematic-slide.sp-live-playing .sp-custom-scrub .sp-scrub-pp,
.cinematic-slide.sp-live-playing .sp-custom-scrub .sp-scrub-stop,
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;
}

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

/* Quality menu (shared) */
.sp-custom-scrub .sp-scrub-q-wrap {
  position: relative !important;
  flex: 0 0 auto !important;
}
.sp-custom-scrub .sp-scrub-q-btn {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  font: 700 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0.6px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.sp-custom-scrub .sp-scrub-q-btn:hover {
  background: rgba(229, 9, 20, 0.75) !important;
  border-color: #e50914 !important;
}
.sp-custom-scrub .sp-scrub-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-custom-scrub .sp-scrub-q-wrap.open .sp-scrub-q-menu {
  display: block !important;
}
.sp-custom-scrub .sp-scrub-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-custom-scrub .sp-scrub-q-menu button:hover,
.sp-custom-scrub .sp-scrub-q-menu button.active {
  background: rgba(229, 9, 20, 0.75) !important;
}

/* ========== Popup corner controls (match card 34px) ========== */
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,
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-live-vol-btn {
  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;
  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;
  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 ease, color 0.2s ease !important;
}

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

html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner {
  right: 50px !important;
  font-size: 14px !important;
}

/* Popup volume — forced next to × (close is at 10px) */
html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
html body #sp-plyr-overlay #sp-plyr-stage > button.sp-pc-mute,
html body #sp-plyr-overlay #sp-plyr-stage > .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.sp-live-vol-btn {
  right: 52px !important;
  left: auto !important;
  top: 10px !important;
  color: #e50914 !important;
  border-color: rgba(229, 9, 20, 0.55) !important;
  font-size: 14px !important;
  z-index: 70 !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;
  pointer-events: none !important;
  color: #e50914 !important;
  fill: #e50914 !important;
}

html body #sp-plyr-close:hover,
html body #sp-plyr-stage > .sp-pc-mute: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:hover .sp-vol-svg,
html body #sp-plyr-stage > .sp-pc-mute:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Offline popup: no LIVE badge */
html body #sp-plyr-overlay.sp-plyr-offline .sp-live-badge,
html body #sp-plyr-overlay.sp-plyr-offline .sp-plyr-live-badge,
html body #sp-plyr-overlay:not(.sp-plyr-live) .sp-live-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Card mute / FS while playing */
.cinematic-slide.sp-live-playing .poster-wrapper > .sp-live-vol-btn,
.cinematic-slide.sp-offline-playing .poster-wrapper > .sp-live-vol-btn,
.cinematic-slide.sp-live-playing .sp-live-fs-btn,
.cinematic-slide.sp-offline-playing .sp-live-fs-btn {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Card live-video never blocks scrub */
.cinematic-slide.sp-offline-playing .live-video,
.cinematic-slide.sp-live-playing .live-video,
.cinematic-slide.sp-offline-playing .live-video iframe,
.cinematic-slide.sp-live-playing .live-video iframe {
  pointer-events: none !important;
}

/* Mobile */
@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,
  .sp-custom-scrub {
    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-custom-scrub .sp-scrub-pp,
  .sp-custom-scrub .sp-scrub-stop {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  html body #sp-plyr-close { right: 10px !important; }
  html body #sp-plyr-stage > .sp-pc-fs.sp-pc-corner { right: 50px !important; }
  html body #sp-plyr-stage > .sp-pc-mute.sp-pc-corner,
  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-live-vol-btn {
    right: 52px !important;
  }
}


/* Popup: no fullscreen button */
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-stage > .sp-pc-fs {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}