/* STUPPLAYS main-card controls: responsive fit + smooth scrub feedback. */
#sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub {
  box-sizing: border-box !important;
  min-width: 0 !important;
}
#sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-track,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-track {
  flex: 1 1 auto !important;
  min-width: 48px !important;
  overflow: visible !important;
}
#sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-fill,
#sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-thumb,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-fill,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-thumb {
  transition: left 100ms linear, width 100ms linear;
  will-change: left, width;
}
#sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
#sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-fill,
html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-track.is-dragging .sp-scrub-thumb {
  transition: none !important;
}
@media (max-width: 767px) {
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: clamp(3px, 1vw, 6px) !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    padding: 5px 6px !important;
  }
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-pp,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-mute,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-expand {
    flex: 0 0 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
  }
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-time,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-time {
    flex: 0 0 2.5em !important;
    min-width: 2.5em !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-track,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-track {
    flex: 1 1 40px !important;
    min-width: 35px !important;
    height: 22px !important;
  }
}
@media (max-width: 360px) {
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub { gap: 2px !important; padding-left: 4px !important; padding-right: 4px !important; }
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-pp,
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-mute,
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-expand,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-pp,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-mute,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-expand { flex-basis: 26px !important; width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; }
  #sp-walkthrough .cinematic-slide .poster-wrapper > .sp-custom-scrub .sp-scrub-time,
  html body #sp-plyr-overlay.is-open #sp-plyr-stage > .sp-custom-scrub .sp-scrub-time { flex-basis: 2.2em !important; min-width: 2.2em !important; font-size: 9px !important; }
}