html.s2d-raster-logo-on {
  --s2d-brand: #6cddd7;
  --s2d-brand-2: #36a2d8;
  --s2d-brand-3: #b8fff9;
  --s2d-brand-soft: rgba(108, 221, 215, .30);
  --s2d-brand-mid: rgba(54, 162, 216, .62);
  --s2d-brand-hot: rgba(184, 255, 249, .98);
}

html.s2d-raster-logo-on .s2d-logo-img-replaced {
  display: block;
  width: 100%;
  height: auto;
}

html.s2d-raster-logo-on .s2d-raster-home-logo,
html.s2d-raster-logo-on .s2d-raster-footer-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: visible;
}

html.s2d-raster-logo-on .s2d-raster-home-logo img {
  width: min(350px, 100%);
  max-width: 100%;
  height: auto;
}

html.s2d-raster-logo-on .s2d-raster-footer-logo img {
  width: min(350px, 100%);
  max-width: 100%;
  height: auto;
}

/* CSS-mask hybrid home logo: raster colour/gradients + vector edge. */
html.s2d-raster-logo-on .s2d-raster-home-logo {
  position: relative;
  display: inline-block;
  width: min(350px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1050 / 331;
  line-height: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}

html.s2d-raster-logo-on .s2d-home-hybrid-logo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--s2d-logo-raster);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: var(--s2d-logo-mask);
  mask-image: var(--s2d-logo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform-origin: center center;
  image-rendering: auto;
}

html.s2d-raster-logo-on .s2d-home-hybrid-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: var(--s2d-logo-mask);
  mask-image: var(--s2d-logo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

html.s2d-logo-v1 .s2d-home-hybrid-logo::after {
  background: linear-gradient(100deg, transparent 28%, rgba(184,255,249,.12) 39%, rgba(255,255,255,.64) 47%, rgba(255,255,255,.96) 52%, rgba(108,221,215,.28) 61%, transparent 74%);
  transform: translateX(-145%) skewX(-10deg);
  mix-blend-mode: screen;
  filter: blur(1.2px);
  animation: s2d-logo-mask-sheen 20s cubic-bezier(.18,.74,.18,1) infinite 3s;
}

html.s2d-logo-v2 .s2d-home-hybrid-logo::after {
  background: linear-gradient(110deg, transparent 26%, rgba(184,255,249,.10) 39%, rgba(255,255,255,.78) 49%, rgba(255,255,255,.98) 53%, rgba(108,221,215,.22) 62%, transparent 75%);
  transform: translateX(-150%) skewX(-16deg);
  mix-blend-mode: screen;
  filter: blur(1.6px);
  animation: s2d-logo-mask-sheen-diag 20s cubic-bezier(.18,.74,.18,1) infinite 3s;
}

html.s2d-logo-v3 .s2d-home-hybrid-logo {
  /* Keep the continuously composited soft-pulse treatment: this is the variant
     that produced the visually smoothest raster+mask edge on the homepage. */
  animation: s2d-logo-soft-pulse 20s ease-in-out infinite 3s;
  will-change: transform, filter;
}
html.s2d-logo-v3 .s2d-home-hybrid-logo::after {
  background: linear-gradient(100deg, transparent 28%, rgba(184,255,249,.10) 39%, rgba(255,255,255,.60) 47%, rgba(255,255,255,.96) 52%, rgba(108,221,215,.24) 61%, transparent 74%);
  transform: translateX(-145%) skewX(-10deg);
  mix-blend-mode: screen;
  filter: blur(1.15px);
  /* First pass begins one second after load; repeats every 20 seconds. */
  animation: s2d-logo-mask-sheen 20s cubic-bezier(.18,.74,.18,1) infinite 1s;
}

html.s2d-logo-v4 .s2d-home-hybrid-logo {
  animation: s2d-logo-glow-pulse 20s ease-in-out infinite 3s;
}

html.s2d-logo-v5 .s2d-home-hybrid-logo {
  animation: s2d-logo-combo 20s ease-in-out infinite 3s;
}
html.s2d-logo-v5 .s2d-home-hybrid-logo::after {
  background: linear-gradient(100deg, transparent 28%, rgba(255,255,255,.08) 38%, rgba(255,255,255,.50) 48%, rgba(255,255,255,.90) 52%, rgba(108,221,215,.20) 61%, transparent 74%);
  transform: translateX(-145%) skewX(-10deg);
  mix-blend-mode: screen;
  filter: blur(1.4px);
  animation: s2d-logo-mask-sheen 20s cubic-bezier(.18,.74,.18,1) infinite 3s;
}

@keyframes s2d-logo-mask-sheen {
  0% { opacity: 0; transform: translateX(-145%) skewX(-10deg); }
  1.8% { opacity: .92; }
  9.5% { opacity: .92; }
  12% { opacity: 0; transform: translateX(155%) skewX(-10deg); }
  100% { opacity: 0; transform: translateX(155%) skewX(-10deg); }
}

@keyframes s2d-logo-mask-sheen-diag {
  0% { opacity: 0; transform: translateX(-150%) skewX(-16deg); }
  1.8% { opacity: .92; }
  9.5% { opacity: .92; }
  12% { opacity: 0; transform: translateX(160%) skewX(-16deg); }
  100% { opacity: 0; transform: translateX(160%) skewX(-16deg); }
}

@keyframes s2d-logo-soft-pulse {
  0%, 12%, 100% { transform: scale(1); filter: brightness(1) saturate(1); }
  4% { transform: scale(1.005); filter: brightness(1.08) saturate(1.06); }
  8% { transform: scale(1.002); filter: brightness(1.03) saturate(1.02); }
}

@keyframes s2d-logo-glow-pulse {
  0%, 12%, 100% { filter: drop-shadow(0 0 0 rgba(108,221,215,0)); }
  4% { filter: drop-shadow(0 0 10px rgba(108,221,215,.36)) drop-shadow(0 0 18px rgba(54,162,216,.14)); }
  8% { filter: drop-shadow(0 0 5px rgba(108,221,215,.20)); }
}

@keyframes s2d-logo-combo {
  0%, 12%, 100% { transform: scale(1); filter: brightness(1) saturate(1); }
  4% { transform: scale(1.008); filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 8px rgba(108,221,215,.22)); }
  8% { transform: scale(1.002); filter: brightness(1.03) saturate(1.02); }
}

/* Search FX ported from the preview MU plugin. */
html.s2d-fx-root {
  --s2d-brand: #6cddd7;
  --s2d-brand-2: #36a2d8;
  --s2d-brand-3: #b8fff9;
}

@property --s2d-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 90deg;
}

@keyframes s2d-border-sweep {
  0% { --s2d-border-angle: 90deg; }
  100% { --s2d-border-angle: 450deg; }
}

html.s2d-fx-search .s2d-fx-search-form {
  position: relative !important;
  isolation: isolate;
}

html.s2d-fx-search #search .s2d-fx-search-form {
  overflow: visible !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html.s2d-fx-search #search .s2d-fx-search-form::before,
html.s2d-fx-search #search .s2d-fx-search-form::after {
  display: none !important;
  content: none !important;
}

html.s2d-fx-search #search .s2d-fx-search-form input.search-input {
  position: relative;
  z-index: 2;
  border: 0 !important;
  border-radius: 8px !important;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(108,221,215,.22) !important;
  transition: box-shadow .24s ease, background-color .24s ease, filter .24s ease;
}

html.s2d-fx-search #search .s2d-fx-search-form:hover input.search-input,
html.s2d-fx-search #search .s2d-fx-search-form:focus-within input.search-input {
  box-shadow: inset 0 0 0 1px rgba(108,221,215,.40), 0 0 14px rgba(108,221,215,.10) !important;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  html.s2d-fx-search #search #searchform button[type="submit"].s2d-fx-search-submit {
    position: absolute !important;
    float: none !important;
    top: 0 !important;
    right: 0 !important;
    width: 42px !important;
    height: 34px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    background: radial-gradient(circle at 50% 50%, rgba(108,221,215,.08), rgba(108,221,215,0) 72%) !important;
    z-index: 7 !important;
    overflow: visible !important;
  }
  html.s2d-fx-search #search #searchform button[type="submit"].s2d-fx-search-submit i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--s2d-brand) !important;
    font-size: 18px !important;
    filter: drop-shadow(0 0 4px rgba(108,221,215,.20));
    animation: none !important;
  }
  html.s2d-fx-search #search #searchform button.gotosearchadv {
    position: absolute !important;
    float: none !important;
    top: 0 !important;
    right: 38px !important;
    width: 32px !important;
    height: 34px !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 7 !important;
  }
  html.s2d-fx-search #search #searchform button.gotosearchadv .fa {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    color: rgba(108,221,215,.72) !important;
  }
  html.s2d-fx-search #search .s2d-fx-search-submit:hover,
  html.s2d-fx-search #search .s2d-fx-search-submit.s2d-search-burst {
    background: radial-gradient(circle at 50% 50%, rgba(108,221,215,.34), rgba(108,221,215,.12) 52%, rgba(108,221,215,0) 76%) !important;
  }
}

html.s2d-fx-search #hm-search .s2d-fx-search-form,
html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form,
html.s2d-fx-search #ai-search .s2d-fx-search-form {
  overflow: visible !important;
  border-radius: 5px !important;
  box-shadow: none;
  transition: filter .28s ease;
}

@media (min-width: 768px) {
  html.s2d-fx-search #hm-search .s2d-fx-search-form::before,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form::before,
  html.s2d-fx-search #ai-search .s2d-fx-search-form::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: -2px;
    z-index: 1;
    padding: 2px;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
      from var(--s2d-border-angle),
      transparent 0deg,
      transparent 300deg,
      rgba(54,162,216,.44) 314deg,
      rgba(108,221,215,.82) 328deg,
      #b8fff9 340deg,
      #6cddd7 350deg,
      rgba(54,162,216,.50) 364deg,
      transparent 382deg,
      transparent 450deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 7px rgba(108,221,215,.30));
    animation: none;
    transition: opacity .16s ease;
  }

  /* The runner exists only while the field/form is actively hovered or focused. */
  html.s2d-fx-search #hm-search .s2d-fx-search-form:hover::before,
  html.s2d-fx-search #hm-search .s2d-fx-search-form:focus-within::before,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form:hover::before,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form:focus-within::before,
  html.s2d-fx-search #ai-search .s2d-fx-search-form:hover::before,
  html.s2d-fx-search #ai-search .s2d-fx-search-form:focus-within::before {
    opacity: 1;
    animation: s2d-border-sweep 1.65s linear infinite;
  }

  /* No static halo/secondary rim: only the moving perimeter segment remains. */
  html.s2d-fx-search #hm-search .s2d-fx-search-form::after,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form::after,
  html.s2d-fx-search #ai-search .s2d-fx-search-form::after {
    display: none !important;
    content: none !important;
  }
}


html.s2d-fx-search .s2d-fx-search-form > input,
html.s2d-fx-search .s2d-fx-search-form > button,
html.s2d-fx-search .s2d-fx-search-form > .search-submit,
html.s2d-fx-search .s2d-fx-search-form > .gotosearchadv,
html.s2d-fx-search .s2d-fx-search-form > .search-input {
  position: relative;
  z-index: 3;
}

html.s2d-fx-search #hm-search .s2d-fx-search-submit,
html.s2d-fx-search .home-main-aisearch .s2d-fx-search-submit,
html.s2d-fx-search #ai-search .s2d-fx-search-submit {
  background: linear-gradient(135deg, var(--s2d-brand), #45c9d8) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px rgba(108,221,215,.22);
}

html.s2d-fx-search #searchform .fa,
html.s2d-fx-search #search .s2d-fx-search-submit i,
html.s2d-fx-search #hm-search .gotosearchadv:hover .fa {
  color: var(--s2d-brand) !important;
}

/* 1.15.1 homepage first-paint vectors. These icons are server-rendered inline,
   so the search controls no longer wait for an image or Font Awesome glyph. */
html.s2d-page-front #hm-search .s2d-home-search-icon,
html.s2d-page-front #hm-search .s2d-home-filter-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: border-box;
  pointer-events: none;
}
html.s2d-page-front #hm-search .s2d-home-search-icon {
  width: 30px;
  height: 30px;
  margin: auto;
  color: #fff;
  stroke-width: 2.05;
}
html.s2d-page-front #hm-search .s2d-home-filter-icon {
  width: 26px;
  height: 26px;
  margin: auto;
  color: #777;
  stroke-width: 1.7;
}
html.s2d-page-front #hm-search .gotosearchadv:hover .s2d-home-filter-icon,
html.s2d-page-front #hm-search .gotosearchadv:focus-visible .s2d-home-filter-icon {
  color: var(--s2d-brand) !important;
}


/* 1.15.2 — stable live-DOM typography for the three first-paint labels that
   were visibly re-rasterized during Transition 5. None of these controls needs
   a network font: pin them to the same local Arial/Helvetica stack Bootstrap
   resolves to on desktop, and avoid synthetic/interpolated weights. */
html.s2d-ui-production #search input.search-input,
html.s2d-ui-production #search input.search-input::placeholder {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.42857143 !important;
  letter-spacing: normal !important;
  font-synthesis: none;
  font-variation-settings: normal;
}

html.s2d-page-front #hm-search input.search-input,
html.s2d-page-front #hm-search input.search-input::placeholder {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.42857143 !important;
  letter-spacing: normal !important;
  font-synthesis: none;
  font-variation-settings: normal;
}

html.s2d-page-front.s2d-home-nav-preview .hm-nav-buttons .s2d-hm-label {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: none;
  font-variation-settings: normal;
}

html.s2d-fx-search .s2d-fx-search-submit {
  transition: background-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease !important;
}

@keyframes s2d-search-tremble-inline {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  12% { transform: translate3d(.65px,-.45px,0) rotate(-1.5deg); }
  24% { transform: translate3d(-.55px,.35px,0) rotate(1.25deg); }
  36% { transform: translate3d(.40px,.50px,0) rotate(-1.05deg); }
  48% { transform: translate3d(-.55px,-.35px,0) rotate(1.4deg); }
  60% { transform: translate3d(.55px,.20px,0) rotate(-1.2deg); }
  72% { transform: translate3d(-.35px,.55px,0) rotate(.95deg); }
  84% { transform: translate3d(.35px,-.40px,0) rotate(-.85deg); }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  html.s2d-fx-search .s2d-fx-search-submit:hover {
    background: linear-gradient(135deg, #7ff8ef, #40bad7) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 16px rgba(108,221,215,.34), 0 0 30px rgba(54,162,216,.16) !important;
  }

  html.s2d-fx-search #hm-search .s2d-fx-search-submit:hover img,
  html.s2d-fx-search #hm-search .s2d-fx-search-submit:hover .s2d-home-search-icon,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-submit:hover img,
  html.s2d-fx-search #ai-search .s2d-fx-search-submit:hover img,
  html.s2d-fx-search #hm-search .s2d-fx-search-submit:hover i,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-submit:hover i,
  html.s2d-fx-search #ai-search .s2d-fx-search-submit:hover i {
    animation: s2d-search-tremble-inline .22s linear infinite;
    filter: drop-shadow(0 0 7px rgba(108,221,215,.62));
  }
}

.s2d-search-spark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--s2d-brand, #6cddd7);
  box-shadow: 0 0 8px rgba(108,221,215,.88), 0 0 16px rgba(54,162,216,.40);
  pointer-events: none;
  opacity: .98;
  transform: translate(-50%, -50%) scale(1);
  animation: s2d-search-spark-flight .78s cubic-bezier(.12,.82,.18,1) forwards;
}

.s2d-search-spark.s2d-search-spark-soft { width: 2px; height: 2px; opacity: .80; }

@keyframes s2d-search-spark-flight {
  0% { opacity: .98; transform: translate(-50%, -50%) scale(1); }
  65% { opacity: .86; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--s2d-spark-x)), calc(-50% + var(--s2d-spark-y))) scale(.10); }
}

html.s2d-fx-search .s2d-fx-search-submit.s2d-search-burst { filter: brightness(1.08) saturate(1.08); }

/* 1.5.6 homepage CTA preview: approved Layout 1 + Icon Pack 2 + Sliding Gradient background.
   Only ?s2d_icon_hover=1..5 changes the icon reaction. */
html.s2d-home-nav-preview {
  --s2d-cta-aqua: #6cddd7;
  --s2d-cta-aqua-2: #52cbd3;
  --s2d-cta-white: #f7ffff;
}

html.s2d-home-nav-preview body .home-main .hm-nav-buttons {
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  padding: 0 0 24px !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: center !important;
  animation: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 78px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(101,213,207,.98), rgba(76,188,197,.97)) !important;
  background-size: 100% 100% !important;
  background-position: 50% 50% !important;
  color: var(--s2d-cta-white) !important;
  box-shadow: 0 10px 24px rgba(25,135,146,.16), inset 0 1px 0 rgba(255,255,255,.17) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  animation: none !important;
  transform: none !important;
  transition: background .34s ease, background-position .40s ease, background-size .40s ease, box-shadow .28s ease, color .28s ease, filter .28s ease !important;
}

html.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

html.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn:hover,
html.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn:focus-visible {
  color: var(--s2d-cta-white) !important;
  transform: none !important;
  filter: brightness(1.025) saturate(1.03) !important;
  animation: none !important;
}

html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-btn-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 78px;
  padding: 15px 18px;
  box-sizing: border-box;
}

/* Production: prevent a one-frame flash of the legacy emoji buttons before the
   head-loaded observer upgrades them to the approved SVG markup. */
html.s2d-page-front.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn:not([data-s2d-home-preview-done="1"]) {
  visibility: hidden !important;
}

html.s2d-page-front.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn[data-s2d-home-preview-done="1"] {
  visibility: visible !important;
}

/* Exact Icon Pack 2 presentation: every SVG lives on its own rounded background tile. */
html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: rgba(12,36,43,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  position: relative;
  isolation: isolate;
  transition: background .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}

html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-icon svg {
  display: block;
  width: 25px;
  height: 25px;
  overflow: visible;
  position: relative;
  z-index: 2;
  transform: translate3d(0,0,0) scale(1) rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform .30s cubic-bezier(.2,.8,.2,1), filter .28s ease, opacity .28s ease;
}

html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-label {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: .005em;
  text-align: left;
}

html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.12);
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background .28s ease, opacity .28s ease;
}
html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-arrow svg {
  display:block;
  width:19px;
  height:19px;
}
html.s2d-home-nav-preview .hm-nav-btn:hover .s2d-hm-arrow,
html.s2d-home-nav-preview .hm-nav-btn:focus-visible .s2d-hm-arrow {
  transform: translateX(5px);
  background: rgba(255,255,255,.17);
}

/* Hover 4 — selected Sliding Gradient. The button itself never moves. */
html.s2d-home-hover-v4 body .home-main .hm-nav-buttons>a.hm-nav-btn{
  background:linear-gradient(110deg,#62ccc8 0%,#62ccc8 25%,#79ddd7 48%,#48b9c5 72%,#53c0c5 100%)!important;
  background-size:220% 100%!important;
  background-position:0% 50%!important;
}
html.s2d-home-hover-v4 body .home-main .hm-nav-buttons>a.hm-nav-btn:hover,
html.s2d-home-hover-v4 body .home-main .hm-nav-buttons>a.hm-nav-btn:focus-visible{
  background-position:100% 50%!important;
  box-shadow:0 10px 25px rgba(31,163,171,.18),inset 0 1px 0 rgba(255,255,255,.20)!important;
}

/* Icon hover 1 — Soft Zoom: crisp tactile enlargement, no icon travel. */
html.s2d-icon-hover-v1 .hm-nav-btn:hover .s2d-hm-icon svg,
html.s2d-icon-hover-v1 .hm-nav-btn:focus-visible .s2d-hm-icon svg {
  transform: scale(1.14);
  filter: brightness(1.08);
}
html.s2d-icon-hover-v1 .hm-nav-btn:hover .s2d-hm-icon,
html.s2d-icon-hover-v1 .hm-nav-btn:focus-visible .s2d-hm-icon {
  background: rgba(12,36,43,.18);
}

/* Icon hover 2 — Directional Nudge: slight forward cue matching the arrow direction. */
html.s2d-icon-hover-v2 .hm-nav-btn:hover .s2d-hm-icon svg,
html.s2d-icon-hover-v2 .hm-nav-btn:focus-visible .s2d-hm-icon svg {
  transform: translateX(3px) scale(1.05);
  filter: brightness(1.07);
}
html.s2d-icon-hover-v2 .hm-nav-btn:hover .s2d-hm-icon,
html.s2d-icon-hover-v2 .hm-nav-btn:focus-visible .s2d-hm-icon {
  background: rgba(12,36,43,.18);
}

/* Icon hover 3 — Spring Tilt: one short spring gesture, then settle. */
@keyframes s2d-icon-spring-tilt {
  0%   { transform: scale(1) rotate(0deg); }
  32%  { transform: scale(1.10) rotate(-7deg); }
  62%  { transform: scale(1.07) rotate(4deg); }
  82%  { transform: scale(1.06) rotate(-1.5deg); }
  100% { transform: scale(1.06) rotate(0deg); }
}
html.s2d-icon-hover-v3 .hm-nav-btn:hover .s2d-hm-icon svg,
html.s2d-icon-hover-v3 .hm-nav-btn:focus-visible .s2d-hm-icon svg {
  animation: s2d-icon-spring-tilt .52s cubic-bezier(.2,.75,.25,1) both;
}

/* Icon hover 4 — Micro Bounce: compact vertical feedback, button remains fixed. */
@keyframes s2d-icon-micro-bounce {
  0%   { transform: translateY(0) scale(1); }
  32%  { transform: translateY(-3px) scale(1.07); }
  58%  { transform: translateY(1px) scale(1.04); }
  78%  { transform: translateY(-1px) scale(1.05); }
  100% { transform: translateY(0) scale(1.05); }
}
html.s2d-icon-hover-v4 .hm-nav-btn:hover .s2d-hm-icon svg,
html.s2d-icon-hover-v4 .hm-nav-btn:focus-visible .s2d-hm-icon svg {
  animation: s2d-icon-micro-bounce .48s cubic-bezier(.2,.75,.25,1) both;
}

/* Icon hover 5 — Aqua Halo: icon stays calm while its tile emits a soft halo. */
html.s2d-icon-hover-v5 .s2d-hm-icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid rgba(218,255,252,0);
  box-shadow: 0 0 0 0 rgba(184,255,249,0);
  opacity: 0;
  pointer-events: none;
}
@keyframes s2d-icon-aqua-halo {
  0%   { opacity: 0; transform: scale(.94); box-shadow: 0 0 0 0 rgba(184,255,249,0); }
  35%  { opacity: .92; transform: scale(1.04); border-color: rgba(218,255,252,.45); box-shadow: 0 0 13px 3px rgba(184,255,249,.20); }
  100% { opacity: .58; transform: scale(1); border-color: rgba(218,255,252,.24); box-shadow: 0 0 9px 1px rgba(184,255,249,.11); }
}
html.s2d-icon-hover-v5 .hm-nav-btn:hover .s2d-hm-icon::after,
html.s2d-icon-hover-v5 .hm-nav-btn:focus-visible .s2d-hm-icon::after {
  animation: s2d-icon-aqua-halo .55s ease-out both;
}
html.s2d-icon-hover-v5 .hm-nav-btn:hover .s2d-hm-icon svg,
html.s2d-icon-hover-v5 .hm-nav-btn:focus-visible .s2d-hm-icon svg {
  transform: scale(1.07);
  filter: brightness(1.12) drop-shadow(0 0 3px rgba(255,255,255,.28));
}

@media (max-width:900px) {
  html.s2d-home-nav-preview body .home-main .hm-nav-buttons {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:600px) {
  html.s2d-home-nav-preview body .home-main .hm-nav-buttons {
    grid-template-columns:1fr !important;
    width:min(92%,390px) !important;
    gap:11px !important;
  }
  html.s2d-home-nav-preview body .home-main .hm-nav-buttons > a.hm-nav-btn {
    min-height:72px !important;
    border-radius:16px !important;
  }
  html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-btn-inner {
    min-height:72px;
    padding:13px 16px;
  }
  html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-icon {
    width:44px;
    height:44px;
    flex-basis:44px;
  }
  html.s2d-home-nav-preview .hm-nav-btn .s2d-hm-label {
    font-size:16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.s2d-fx-search .s2d-fx-search-form:hover::before,
  html.s2d-fx-search .s2d-fx-search-form:focus-within::before,
  html.s2d-fx-search .s2d-fx-search-submit:hover i,
  html.s2d-fx-search .s2d-fx-search-submit:hover img,
  html[class*="s2d-logo-v"] .s2d-home-hybrid-logo,
  html[class*="s2d-logo-v"] .s2d-home-hybrid-logo::after,
  .s2d-search-spark {
    animation: none !important;
  }
}

/* 1.4.1: selected logo effect on the MOBILE HEADER of non-home pages.
   IMPORTANT: the logo mask never moves. Only the gradient background-position moves
   inside the fixed masked layer, so no ghost copy of CINEBY can travel across header. */
@media screen and (max-width: 991px), screen and (hover: none) and (pointer: coarse) {
  html.s2d-page-inner.s2d-raster-logo-on.s2d-header-logo-ready[class*="s2d-logo-v"] header .header-logo #logo {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate;
    transform-origin: center center;
  }

  html.s2d-page-inner.s2d-raster-logo-on.s2d-header-logo-ready[class*="s2d-logo-v"] header .header-logo #logo::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 2;

    /* Fixed alpha silhouette. This layer itself never translates/rotates. */
    -webkit-mask-image: var(--s2d-header-logo-mask);
    mask-image: var(--s2d-header-logo-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: 143px 24px;
    mask-size: 143px 24px;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;

    background-repeat: no-repeat;
    will-change: background-position, opacity;
  }

  html.s2d-page-inner.s2d-logo-v1 header .header-logo #logo::after {
    background-image: linear-gradient(100deg,
      transparent 36%,
      rgba(184,255,249,.10) 43%,
      rgba(255,255,255,.58) 48%,
      rgba(255,255,255,.96) 50%,
      rgba(108,221,215,.24) 54%,
      transparent 62%);
    background-size: 400% 100%;
    background-position: 100% 0;
    mix-blend-mode: screen;
    animation: s2d-header-mask-sheen-fixed 20s cubic-bezier(.18,.74,.18,1) infinite 3s;
  }

  html.s2d-page-inner.s2d-logo-v2 header .header-logo #logo::after {
    background-image: linear-gradient(110deg,
      transparent 35%,
      rgba(184,255,249,.09) 43%,
      rgba(255,255,255,.70) 49%,
      rgba(255,255,255,.98) 51%,
      rgba(108,221,215,.20) 56%,
      transparent 64%);
    background-size: 400% 180%;
    background-position: 100% 50%;
    mix-blend-mode: screen;
    animation: s2d-header-mask-sheen-diag-fixed 20s cubic-bezier(.18,.74,.18,1) infinite 3s;
  }

  html.s2d-page-inner.s2d-logo-v3 header .header-logo #logo {
    animation: s2d-header-logo-soft-pulse 20s ease-in-out infinite 1s;
    will-change: filter;
  }
  html.s2d-page-inner.s2d-logo-v3 header .header-logo #logo::after {
    background-image: linear-gradient(100deg,
      transparent 36%,
      rgba(184,255,249,.08) 43%,
      rgba(255,255,255,.52) 48%,
      rgba(255,255,255,.92) 50%,
      rgba(108,221,215,.22) 54%,
      transparent 62%);
    background-size: 400% 100%;
    background-position: 100% 0;
    mix-blend-mode: screen;
    animation: s2d-header-mask-sheen-fixed 20s cubic-bezier(.18,.74,.18,1) infinite 1s;
  }

  html.s2d-page-inner.s2d-logo-v4 header .header-logo #logo {
    animation: s2d-header-logo-glow-pulse 20s ease-in-out infinite 3s;
  }

  html.s2d-page-inner.s2d-logo-v5 header .header-logo #logo {
    animation: s2d-header-logo-combo 20s ease-in-out infinite 3s;
  }
  html.s2d-page-inner.s2d-logo-v5 header .header-logo #logo::after {
    background-image: linear-gradient(100deg,
      transparent 36%,
      rgba(255,255,255,.07) 43%,
      rgba(255,255,255,.42) 48%,
      rgba(255,255,255,.84) 50%,
      rgba(108,221,215,.18) 54%,
      transparent 62%);
    background-size: 400% 100%;
    background-position: 100% 0;
    mix-blend-mode: screen;
    animation: s2d-header-mask-sheen-fixed 20s cubic-bezier(.18,.74,.18,1) infinite 3s;
  }
}

@keyframes s2d-header-mask-sheen-fixed {
  0%   { opacity: 0;   background-position: 100% 0; }
  1.8% { opacity: .90; }
  9.5% { opacity: .90; }
  12%  { opacity: 0;   background-position: 0% 0; }
  100% { opacity: 0;   background-position: 0% 0; }
}

@keyframes s2d-header-mask-sheen-diag-fixed {
  0%   { opacity: 0;   background-position: 100% 50%; }
  1.8% { opacity: .90; }
  9.5% { opacity: .90; }
  12%  { opacity: 0;   background-position: 0% 50%; }
  100% { opacity: 0;   background-position: 0% 50%; }
}

@keyframes s2d-header-logo-soft-pulse {
  0%, 12%, 100% { filter: brightness(1) saturate(1); }
  4% { filter: brightness(1.10) saturate(1.07) drop-shadow(0 0 4px rgba(108,221,215,.18)); }
  8% { filter: brightness(1.03) saturate(1.02); }
}

@keyframes s2d-header-logo-glow-pulse {
  0%, 12%, 100% { filter: drop-shadow(0 0 0 rgba(108,221,215,0)); }
  4% { filter: drop-shadow(0 0 6px rgba(108,221,215,.35)) drop-shadow(0 0 11px rgba(54,162,216,.13)); }
  8% { filter: drop-shadow(0 0 3px rgba(108,221,215,.18)); }
}

@keyframes s2d-header-logo-combo {
  0%, 12%, 100% { filter: brightness(1) saturate(1); }
  4% { filter: brightness(1.09) saturate(1.07) drop-shadow(0 0 4px rgba(108,221,215,.18)); }
  8% { filter: brightness(1.03) saturate(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  html.s2d-page-inner[class*="s2d-logo-v"] header .header-logo #logo,
  html.s2d-page-inner[class*="s2d-logo-v"] header .header-logo #logo::after {
    animation: none !important;
  }
}

/* =====================================================================
   1.5.9 — Mobile home-search interaction + stable popular poster ratio
   ===================================================================== */

/* Keep popular/featured posters in their native movie-poster proportion at every
   breakpoint. This intentionally overrides Cineby's fixed 180/200/230/250px heights. */
.cineby-api-popular-block .cineby-api-popular-grid > .ml-item {
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
}

.cineby-api-popular-block .cineby-api-popular-grid > .ml-item > .ml-mask {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.cineby-api-popular-block .cineby-api-popular-grid > .ml-item .mli-thumb,
.cineby-api-popular-block .cineby-api-popular-grid > .ml-item img.thumb.mli-thumb {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* The desktop perimeter runner already exists above. On touch/mobile we reveal
   the same moving segment only while the main homepage input owns focus. */
@media (max-width: 767px) {
  html.s2d-fx-search #hm-search .s2d-fx-search-form::before,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form::before,
  html.s2d-fx-search #ai-search .s2d-fx-search-form::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: -2px;
    z-index: 1;
    padding: 2px;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
      from var(--s2d-border-angle),
      transparent 0deg,
      transparent 300deg,
      rgba(54,162,216,.44) 314deg,
      rgba(108,221,215,.82) 328deg,
      #b8fff9 340deg,
      #6cddd7 350deg,
      rgba(54,162,216,.50) 364deg,
      transparent 382deg,
      transparent 450deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 7px rgba(108,221,215,.30));
    animation: none;
    transition: opacity .16s ease;
  }

  html.s2d-fx-search #hm-search .s2d-fx-search-form:focus-within::before,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form:focus-within::before,
  html.s2d-fx-search #ai-search .s2d-fx-search-form:focus-within::before {
    opacity: 1;
    animation: s2d-border-sweep 1.65s linear infinite;
  }

  html.s2d-fx-search #hm-search .s2d-fx-search-form::after,
  html.s2d-fx-search .home-main-aisearch .s2d-fx-search-form::after,
  html.s2d-fx-search #ai-search .s2d-fx-search-form::after {
    display: none !important;
    content: none !important;
  }
}

/* Mobile search-button particles: pure CSS four-point stars + tiny glow dots. */
.s2d-mobile-search-star {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: 8px;
  height: 8px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, #ffffff 0%, #b8fff9 42%, #6cddd7 100%);
  clip-path: polygon(50% 0%, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0% 50%, 40% 39%);
  filter: drop-shadow(0 0 4px rgba(184,255,249,.85)) drop-shadow(0 0 8px rgba(54,162,216,.38));
  transform: translate(-50%, -50%) scale(.45) rotate(0deg);
  animation: s2d-mobile-star-burst .72s cubic-bezier(.12,.74,.18,1) var(--s2d-star-delay, 0ms) forwards;
}

.s2d-mobile-search-star.is-small {
  width: 5px;
  height: 5px;
  filter: drop-shadow(0 0 3px rgba(184,255,249,.78));
}

.s2d-mobile-search-star.is-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  clip-path: none;
  background: #ffffff;
  box-shadow: 0 0 7px rgba(108,221,215,.82);
}

@keyframes s2d-mobile-star-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35) rotate(0deg);
  }
  12% { opacity: 1; }
  58% { opacity: .92; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--s2d-star-x)), calc(-50% + var(--s2d-star-y)))
      scale(.12)
      rotate(var(--s2d-star-r));
    filter: blur(.35px) drop-shadow(0 0 2px rgba(108,221,215,.20));
  }
}

/* =====================================================================
   Featured/popular poster lab — URL only: ?s2d_featured=1..5
   ===================================================================== */

html.s2d-featured-preview .cineby-api-popular-grid {
  counter-reset: s2d-featured;
}

html.s2d-featured-preview .cineby-api-popular-grid > .ml-item {
  counter-increment: s2d-featured;
  border-radius: 12px !important;
  background: #111;
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

html.s2d-featured-preview .cineby-api-popular-grid > .ml-item .ml-mask {
  border-radius: inherit;
}

html.s2d-featured-preview .cineby-api-popular-grid > .ml-item .mli-info {
  box-sizing: border-box;
  z-index: 6;
}

html.s2d-featured-preview .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  display: block;
  color: #fff;
}

html.s2d-featured-preview .cineby-api-popular-grid > .ml-item .mli-add {
  z-index: 7;
}

html.s2d-featured-preview .cineby-api-popular-grid > .ml-item .mli-quality {
  z-index: 7;
}

html.s2d-featured-preview .s2d-featured-genre {
  display: none;
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

/* Variant 1 — Minimal / clean streaming card. */
html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item {
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item .mli-info {
  padding: 34px 10px 10px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 18%, rgba(0,0,0,.82) 100%) !important;
}

html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
}

html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item .mli-add {
  top: 9px !important;
  left: 9px !important;
  gap: 4px !important;
}

html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item .mli-add .imdb,
html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
  border-radius: 7px !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}

html.s2d-featured-v1 .cineby-api-popular-grid > .ml-item .mli-quality {
  display: none !important;
}

/* Variant 2 — Glass cinema: ratings in a compact glass stack, genre chip at bottom. */
html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item {
  border: 1px solid rgba(184,255,249,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.025) inset;
}

html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-info {
  padding: 50px 11px 11px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3,12,16,.08) 20%, rgba(3,12,16,.88) 100%) !important;
  backdrop-filter: blur(1.5px);
}

html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
}

html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-add {
  top: 9px !important;
  left: 9px !important;
  flex-direction: row !important;
  gap: 5px !important;
}

html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-add .imdb,
html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
  padding: 4px 7px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  background: rgba(12,22,27,.64) !important;
  color: #f7ffff !important;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(7px);
}

html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-add .imdb {
  color: #b8fff9 !important;
  border-color: rgba(108,221,215,.34);
}

html.s2d-featured-v2 .s2d-featured-genre {
  display: inline-flex;
  left: 10px;
  bottom: 42px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  color: #dffffc;
  background: rgba(12,22,27,.56);
  border: 1px solid rgba(108,221,215,.22);
  backdrop-filter: blur(6px);
}

html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item .mli-quality {
  top: 9px !important;
  right: 9px !important;
  background: rgba(12,22,27,.62) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px !important;
  backdrop-filter: blur(6px);
}

/* Variant 3 — Ranked editorial: visible numbering + restrained metadata. */
html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item::before {
  content: var(--s2d-featured-number, "01");
  position: absolute;
  top: 6px;
  right: 9px;
  z-index: 8;
  font-family: 'Oswald', sans-serif;
  font-size: 27px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  text-shadow: 0 2px 10px rgba(0,0,0,.42);
  pointer-events: none;
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item .mli-info {
  padding: 54px 10px 10px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 15%, rgba(0,0,0,.90) 100%) !important;
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item .mli-add {
  top: 9px !important;
  left: 9px !important;
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item .mli-add .imdb {
  border-radius: 7px !important;
  padding: 4px 7px !important;
  font-size: 11px !important;
  background: rgba(8,22,25,.82) !important;
  color: #7ef3eb !important;
  border: 1px solid rgba(108,221,215,.32);
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
  background: rgba(255,255,255,.88) !important;
  color: #141a1d !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
}

html.s2d-featured-v3 .s2d-featured-genre {
  display: block;
  left: 10px;
  bottom: 42px;
  color: rgba(184,255,249,.90);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

html.s2d-featured-v3 .cineby-api-popular-grid > .ml-item .mli-quality { display:none !important; }


/* ---------------------------------------------------------------------
   Variant 3 / refinement 2 — stencil rank + transparent rating + runtime
   URL: ?s2d_featured=3&s2d_featured_style=2
   --------------------------------------------------------------------- */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item {
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
  background: #0d1113 !important;
}

/* Oversized translucent stencil. The fill is almost clear, so the poster remains
   visible through the number; the fine stroke gives it a glass-cut appearance. */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item::before {
  content: var(--s2d-featured-number, "01");
  top: 7px !important;
  right: 9px !important;
  z-index: 5 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(38px, 4.1vw, 58px) !important;
  line-height: .88 !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
  color: rgba(255,255,255,.035) !important;
  -webkit-text-stroke: 1.35px rgba(221,255,252,.58);
  paint-order: stroke fill;
  text-shadow: 0 1px 9px rgba(0,0,0,.44), 0 0 14px rgba(108,221,215,.08) !important;
  mix-blend-mode: screen;
  opacity: .92;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.22));
}

/* A restrained lower cinematic fade. It is not a separate black panel: it simply
   improves title/runtime legibility while keeping the poster visible. */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-info {
  padding: 66px 10px 29px !important;
  background: linear-gradient(
    180deg,
    rgba(2,8,10,0) 0%,
    rgba(2,8,10,.08) 24%,
    rgba(2,8,10,.56) 62%,
    rgba(2,8,10,.88) 100%
  ) !important;
  backdrop-filter: none !important;
}

/* +3 px versus the original v3. Strictly one line; long names end in ellipsis. */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.86) !important;
}

/* Make the metadata wrapper neutral so its children can independently occupy
   the top-left rating position and bottom-left runtime position. */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add {
  position: static !important;
  inset: auto !important;
  display: block !important;
}

/* Rating: no pill, no border, no opaque background. Existing imdb_* classes remain
   the source of the level classification; we only map those classes to readable hues. */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .imdb {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 8 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.94), 0 0 8px rgba(0,0,0,.72) !important;
}

html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .imdb.imdb_green {
  color: #5ee58a !important;
}
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .imdb.imdb_orange {
  color: #ffc85b !important;
}
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .imdb.imdb_red {
  color: #ff6868 !important;
}

/* Runtime replaces the genre line at the bottom. */
html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  z-index: 8 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(245,255,255,.76) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9) !important;
}

html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .runtime::before {
  content: "◷";
  display: inline-block;
  margin-right: 4px;
  color: rgba(184,255,249,.72);
  font-size: 10px;
  transform: translateY(-.2px);
}

/* Genre is intentionally absent in this refinement. */
html.s2d-featured-v3.s2d-featured-style-2 .s2d-featured-genre {
  display: none !important;
}

html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-quality {
  display: none !important;
}

@media (max-width: 767px) {
  html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item::before {
    top: 7px !important;
    right: 8px !important;
    font-size: clamp(34px, 10vw, 46px) !important;
    -webkit-text-stroke-width: 1.1px;
  }

  html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-info {
    padding: 52px 9px 27px !important;
  }

  html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
    font-size: 16px !important;
  }

  html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .imdb {
    top: 9px !important;
    left: 9px !important;
    font-size: 12.5px !important;
  }

  html.s2d-featured-v3.s2d-featured-style-2 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
    left: 9px !important;
    bottom: 8px !important;
    font-size: 10px !important;
  }
}

/* Variant 4 — Playful: more colour, rank bubble and brighter metadata. */
html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item {
  border: 2px solid rgba(108,221,215,.42);
  box-shadow: 0 12px 28px rgba(30,176,183,.18), 0 0 0 1px rgba(255,255,255,.07) inset;
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item::before {
  content: var(--s2d-featured-number, "01");
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 8;
  min-width: 29px;
  height: 29px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-sizing: border-box;
  color: #0f2428;
  background: linear-gradient(135deg, #b8fff9, #6cddd7);
  font: 700 12px/1 'Montserrat', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item .mli-info {
  padding: 58px 10px 10px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 22%, rgba(0,0,0,.88) 100%) !important;
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item .mli-add {
  top: 9px !important;
  left: 9px !important;
  gap: 5px !important;
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item .mli-add .imdb {
  color: #0b2024 !important;
  background: linear-gradient(135deg, #b8fff9, #62d7d1) !important;
  border-radius: 9px !important;
  padding: 4px 8px !important;
  text-shadow: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
  color: #fff !important;
  background: rgba(17,29,34,.78) !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px !important;
  padding: 4px 7px !important;
}

html.s2d-featured-v4 .s2d-featured-genre {
  display: inline-flex;
  left: 10px;
  bottom: 42px;
  padding: 4px 8px;
  border-radius: 7px;
  color: #0d2327;
  background: rgba(255,255,255,.86);
  font-size: 9px;
  font-weight: 700;
}

html.s2d-featured-v4 .cineby-api-popular-grid > .ml-item .mli-quality { display:none !important; }

/* Variant 5 — Premium dark: quiet graphite frame + precise aqua accents. */
html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item {
  border: 1px solid rgba(108,221,215,.16);
  border-radius: 10px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.025) inset;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 8;
  background: linear-gradient(90deg, rgba(108,221,215,.95), rgba(54,162,216,.28), transparent 84%);
  pointer-events: none;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item .mli-info {
  padding: 56px 10px 10px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(4,9,12,.14) 18%, rgba(4,9,12,.94) 100%) !important;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item .mli-info .h2 {
  text-align: left !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item .mli-add {
  top: 9px !important;
  left: 9px !important;
  gap: 4px !important;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item .mli-add .imdb {
  padding: 4px 7px !important;
  border-radius: 6px !important;
  color: #b8fff9 !important;
  background: rgba(7,19,23,.84) !important;
  border: 1px solid rgba(108,221,215,.34);
  text-shadow: none !important;
  font-size: 10.5px !important;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item .mli-add .runtime {
  padding: 2px 0 !important;
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  font-size: 9.5px !important;
}

html.s2d-featured-v5 .s2d-featured-genre {
  display: block;
  left: 10px;
  bottom: 42px;
  color: rgba(108,221,215,.92);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item .mli-quality {
  top: 9px !important;
  right: 9px !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: rgba(7,19,23,.78) !important;
  color: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.08);
}

@media (hover: hover) and (pointer: fine) {
  html.s2d-featured-preview .cineby-api-popular-grid > .ml-item:hover {
    transform: translateY(-2px);
    filter: brightness(1.025);
  }
  html.s2d-featured-v2 .cineby-api-popular-grid > .ml-item:hover,
  html.s2d-featured-v5 .cineby-api-popular-grid > .ml-item:hover {
    box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(108,221,215,.12) inset;
  }
}

@media (max-width: 520px) {
  html.s2d-featured-preview .cineby-api-popular-grid > .ml-item .mli-info .h2 {
    font-size: 12px !important;
  }
  html.s2d-featured-preview .s2d-featured-genre {
    bottom: 39px;
  }
}

/* =====================================================================
   Approved Featured v3/style-2 — production rollout
   - Same visual treatment on desktop and mobile.
   - On phones the grid is allowed to breathe a little farther into the
     content-column gutters, which makes each 2-column poster slightly larger
     without changing the 2:3 poster ratio or the number of columns.
   ===================================================================== */
@media (max-width: 767px) {
  html.s2d-featured-production .cineby-api-popular-block .cineby-api-popular-grid {
    width: calc(100% + 16px) !important;
    max-width: none !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  html.s2d-featured-production .cineby-api-popular-block .cineby-api-popular-grid > .ml-item {
    aspect-ratio: 2 / 3 !important;
  }
}

/* =====================================================================
   Production page motion + loading states.
   Approved defaults are Transition 5 + Skeleton 1; front.js adds these
   classes on clean production URLs. Legacy URL parameters remain available
   only as visual overrides for maintenance/testing.
   ===================================================================== */

html.s2d-visual-lab {
  --s2d-lab-bg: #111719;
}

/* v3 lab refinement: reserve vertical scrollbar space during transitions so
   detail pages do not jump horizontally when their scrollbar appears. */
html.s2d-transition-lab {
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html.s2d-transition-lab { overflow-y: scroll; }
}
html.s2d-transition-v4::view-transition-group(root) {
  width: 100%;
}

/* Native cross-document View Transition snapshots. The @view-transition
   opt-in itself is injected by front.js only while the URL lab is active. */
html.s2d-transition-lab::view-transition-group(root) {
  animation-fill-mode: both;
  overflow: clip;
}
html.s2d-transition-lab::view-transition-old(root),
html.s2d-transition-lab::view-transition-new(root) {
  transform-origin: 50% 45%;
  backface-visibility: hidden;
  animation-fill-mode: both;
}

/* 1 — Soft Zoom: restrained, fastest and least distracting. */
html.s2d-transition-v1::view-transition-old(root) {
  animation: s2d-vt1-old 260ms cubic-bezier(.4,0,.2,1) both;
}
html.s2d-transition-v1::view-transition-new(root) {
  animation: s2d-vt1-new 300ms cubic-bezier(.2,.75,.2,1) both;
}
@keyframes s2d-vt1-old {
  from { opacity:1; transform:scale(1); }
  to   { opacity:.18; transform:scale(1.018); }
}
@keyframes s2d-vt1-new {
  from { opacity:.12; transform:scale(.982); }
  to   { opacity:1; transform:scale(1); }
}

/* 2 — Zoom Through: old page comes toward the viewer, new page settles in. */
html.s2d-transition-v2::view-transition-old(root) {
  animation: s2d-vt2-old 330ms cubic-bezier(.45,0,.2,1) both;
}
html.s2d-transition-v2::view-transition-new(root) {
  animation: s2d-vt2-new 380ms cubic-bezier(.16,.78,.2,1) both;
}
@keyframes s2d-vt2-old {
  from { opacity:1; transform:scale(1); filter:blur(0); }
  to   { opacity:0; transform:scale(1.055); filter:blur(2.5px); }
}
@keyframes s2d-vt2-new {
  from { opacity:.08; transform:scale(.955); filter:blur(2px); }
  to   { opacity:1; transform:scale(1); filter:blur(0); }
}

/* 3 — Pull Back / Reveal: stronger zoom-out then a gentle zoom-in. */
html.s2d-transition-v3::view-transition-old(root) {
  animation: s2d-vt3-old 360ms cubic-bezier(.4,0,.3,1) both;
}
html.s2d-transition-v3::view-transition-new(root) {
  animation: s2d-vt3-new 420ms cubic-bezier(.16,.8,.2,1) both;
}
@keyframes s2d-vt3-old {
  from { opacity:1; transform:scale(1); }
  to   { opacity:.1; transform:scale(.93); }
}
@keyframes s2d-vt3-new {
  from { opacity:.08; transform:scale(1.045); }
  to   { opacity:1; transform:scale(1); }
}

/* 4 — Depth Blur: no large travel, mostly focus/depth. */
html.s2d-transition-v4::view-transition-old(root) {
  animation: s2d-vt4-old 300ms cubic-bezier(.4,0,.2,1) both;
}
html.s2d-transition-v4::view-transition-new(root) {
  animation: s2d-vt4-new 350ms cubic-bezier(.2,.75,.2,1) both;
}
@keyframes s2d-vt4-old {
  from { opacity:1; transform:scale(1); filter:blur(0); }
  to   { opacity:0; transform:scale(1.015); filter:blur(9px); }
}
@keyframes s2d-vt4-new {
  from { opacity:0; transform:scale(.992); filter:blur(7px); }
  to   { opacity:1; transform:scale(1); filter:blur(0); }
}

/* 5 — App Shell: page gets a soft zoom while the header is captured separately
   and visually stays anchored. */
html.s2d-transition-v5 body > header,
html.s2d-transition-v5 header:first-of-type {
  view-transition-name: s2d-app-header;
}
html.s2d-transition-v5::view-transition-old(root) {
  animation: s2d-vt5-old 320ms cubic-bezier(.4,0,.2,1) both;
}
html.s2d-transition-v5::view-transition-new(root) {
  animation: s2d-vt5-new 380ms cubic-bezier(.16,.8,.2,1) both;
}
/* 1.15.1: the header is a stationary app shell. Never cross-fade two fully
   opaque header snapshots: sub-pixel differences make placeholder text such as
   “Search...” look darker/thicker and jump by ~1px during navigation/reload. */
html.s2d-transition-v5::view-transition-group(s2d-app-header) {
  animation: none !important;
}
html.s2d-transition-v5::view-transition-image-pair(s2d-app-header) {
  isolation: auto;
}
html.s2d-transition-v5::view-transition-old(s2d-app-header) {
  animation: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}
html.s2d-transition-v5::view-transition-new(s2d-app-header) {
  animation: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
@keyframes s2d-vt5-old {
  from { opacity:1; transform:scale(1); }
  to   { opacity:.06; transform:scale(.965); }
}
@keyframes s2d-vt5-new {
  from { opacity:.05; transform:scale(1.025); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes s2d-vt5-header {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:1; transform:translateY(0); }
}

/* Fallback for browsers without cross-document View Transitions. It keeps
   ordinary WordPress navigation and only animates body out/in. */
html.s2d-vt-fallback.s2d-transition-lab {
  background: var(--s2d-lab-bg);
}
html.s2d-vt-fallback.s2d-fallback-leaving body,
html.s2d-vt-fallback.s2d-transition-arriving body {
  transform-origin:50% 45%;
  will-change:transform,opacity,filter;
}
html.s2d-vt-fallback.s2d-transition-v1.s2d-fallback-leaving body { animation:s2d-fb1-old 180ms ease both; }
html.s2d-vt-fallback.s2d-transition-v1.s2d-transition-arriving body { animation:s2d-fb1-new 280ms ease both; }
@keyframes s2d-fb1-old { to { opacity:.15; transform:scale(1.015); } }
@keyframes s2d-fb1-new { from { opacity:.1; transform:scale(.985); } to { opacity:1; transform:scale(1); } }

html.s2d-vt-fallback.s2d-transition-v2.s2d-fallback-leaving body { animation:s2d-fb2-old 220ms ease both; }
html.s2d-vt-fallback.s2d-transition-v2.s2d-transition-arriving body { animation:s2d-fb2-new 340ms ease both; }
@keyframes s2d-fb2-old { to { opacity:0; transform:scale(1.045); filter:blur(2px); } }
@keyframes s2d-fb2-new { from { opacity:.08; transform:scale(.96); filter:blur(2px); } to { opacity:1; transform:scale(1); filter:blur(0); } }

html.s2d-vt-fallback.s2d-transition-v3.s2d-fallback-leaving body { animation:s2d-fb3-old 230ms ease both; }
html.s2d-vt-fallback.s2d-transition-v3.s2d-transition-arriving body { animation:s2d-fb3-new 380ms ease both; }
@keyframes s2d-fb3-old { to { opacity:.08; transform:scale(.94); } }
@keyframes s2d-fb3-new { from { opacity:.08; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }

html.s2d-vt-fallback.s2d-transition-v4.s2d-fallback-leaving body { animation:s2d-fb4-old 210ms ease both; }
html.s2d-vt-fallback.s2d-transition-v4.s2d-transition-arriving body { animation:s2d-fb4-new 330ms ease both; }
@keyframes s2d-fb4-old { to { opacity:0; transform:scale(1.012); filter:blur(7px); } }
@keyframes s2d-fb4-new { from { opacity:0; transform:scale(.994); filter:blur(6px); } to { opacity:1; transform:scale(1); filter:blur(0); } }

/* 1.15.2 — production Transition 5 is text-safe. Native cross-document
   snapshots are disabled in front.js for v5, and the fallback must not promote
   the live page to a transformed/filtered compositor layer either. A tiny
   arrival veil keeps a sense of continuity after internal navigation without
   touching text geometry or rasterization. Browser reloads get no animation. */
html.s2d-vt-fallback.s2d-transition-v5.s2d-fallback-leaving body,
html.s2d-vt-fallback.s2d-transition-v5.s2d-transition-arriving body {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

html.s2d-vt-fallback.s2d-transition-v5.s2d-transition-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  background: rgba(108,221,215,.055);
  animation: s2d-vt5-safe-veil 150ms ease-out both;
}

html.night-mode.s2d-vt-fallback.s2d-transition-v5.s2d-transition-arriving::before {
  background: rgba(0,0,0,.10);
}

@keyframes s2d-vt5-safe-veil {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Kept only for explicit historical QA references; production v5 no longer
   assigns these keyframes to the body. */
@keyframes s2d-fb5-old { to { opacity:.04; transform:scale(.97); } }
@keyframes s2d-fb5-new { from { opacity:.05; transform:scale(1.025); } to { opacity:1; transform:scale(1); } }

/* ----------------------------- Skeleton base ----------------------------- */
html.s2d-skeleton-lab .s2d-skeleton-card {
  position:relative !important;
  isolation:isolate;
}
html.s2d-skeleton-lab .s2d-skeleton-layer {
  position:absolute;
  inset:0;
  z-index:60;
  display:block;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  opacity:1;
  transition:opacity .32s ease;
  background:#1b2225;
}
html.s2d-skeleton-lab .s2d-skeleton-ready > .s2d-skeleton-layer {
  opacity:0;
}
html.s2d-skeleton-lab .s2d-skeleton-layer::before {
  content:"";
  position:absolute;
  inset:-35%;
  transform:translateX(-70%) rotate(9deg);
  animation:s2d-skeleton-sweep 1.25s ease-in-out infinite;
  will-change:transform;
}
html.s2d-skeleton-lab .s2d-skeleton-rank,
html.s2d-skeleton-lab .s2d-skeleton-titlebar,
html.s2d-skeleton-lab .s2d-skeleton-metabar {
  position:absolute;
  display:block;
  z-index:2;
  background:rgba(255,255,255,.10);
}
html.s2d-skeleton-lab .s2d-skeleton-rank {
  left:10px;
  top:10px;
  width:32px;
  height:14px;
  border-radius:5px;
}
html.s2d-skeleton-lab .s2d-skeleton-titlebar {
  left:10px;
  right:24%;
  bottom:31px;
  height:13px;
  border-radius:5px;
}
html.s2d-skeleton-lab .s2d-skeleton-metabar {
  left:10px;
  width:38%;
  bottom:10px;
  height:8px;
  border-radius:4px;
}
@keyframes s2d-skeleton-sweep {
  0%   { transform:translateX(-72%) rotate(9deg); }
  58%,100% { transform:translateX(72%) rotate(9deg); }
}

/* Skeleton 1 — Graphite / Pearl.
   Light theme gets a pale neutral placeholder; dark theme keeps the approved
   graphite palette. Geometry and animation stay identical between themes. */
html.s2d-skeleton-v1 .s2d-skeleton-layer {
  background:linear-gradient(155deg,#e1e7ea 0%,#eef2f4 58%,#dce3e6 100%);
}
html.s2d-skeleton-v1 .s2d-skeleton-layer::before {
  background:linear-gradient(90deg,transparent 32%,rgba(255,255,255,.38) 43%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.34) 57%,transparent 68%);
}
html.s2d-skeleton-v1 .s2d-skeleton-rank,
html.s2d-skeleton-v1 .s2d-skeleton-titlebar,
html.s2d-skeleton-v1 .s2d-skeleton-metabar {
  background:rgba(70,88,98,.12);
}
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-layer,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-layer {
  background:linear-gradient(155deg,#171d20 0%,#242c30 58%,#1a2023 100%);
}
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-layer::before,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-layer::before {
  background:linear-gradient(90deg,transparent 34%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.04) 54%,transparent 68%);
}
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-rank,
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-titlebar,
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-metabar,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-rank,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-titlebar,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-metabar {
  background:rgba(255,255,255,.10);
}

/* Skeleton 1 refinement for the selected Transition 5 + Graphite lab.
   Paint the host under the clipping edge using the same theme palette so
   antialiased rounded corners never expose a contrasting pixel. */
html.s2d-skeleton-v1 .s2d-skeleton-card.s2d-skeleton-loading,
html.s2d-skeleton-v1 .s2d-media-skeleton-host.s2d-media-loading {
  overflow:hidden !important;
  background-color:#e1e7ea !important;
  contain:paint;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-card.s2d-skeleton-loading,
html.night-mode.s2d-skeleton-v1 .s2d-media-skeleton-host.s2d-media-loading,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-card.s2d-skeleton-loading,
html.s2d-skeleton-v1 body.night-mode .s2d-media-skeleton-host.s2d-media-loading {
  background-color:#171d20 !important;
}
@supports (overflow:clip) {
  html.s2d-skeleton-v1 .s2d-skeleton-card.s2d-skeleton-loading,
  html.s2d-skeleton-v1 .s2d-media-skeleton-host.s2d-media-loading {
    overflow:clip !important;
  }
}
html.s2d-skeleton-v1 .s2d-skeleton-card.s2d-skeleton-loading > .s2d-skeleton-layer {
  inset:-1px;
  background-color:#e1e7ea;
}
html.night-mode.s2d-skeleton-v1 .s2d-skeleton-card.s2d-skeleton-loading > .s2d-skeleton-layer,
html.s2d-skeleton-v1 body.night-mode .s2d-skeleton-card.s2d-skeleton-loading > .s2d-skeleton-layer {
  background-color:#171d20;
}

/* Media-aware Skeleton 1 for movie / TV / episode detail pages and custom
   selection backgrounds. Only actual graphical boxes are masked. */
html.s2d-skeleton-v1 .s2d-media-skeleton-host {
  position:relative !important;
  isolation:isolate;
}
/* Cineby selection tiles are intentionally absolutely positioned image layers.
   Do not turn them into normal-flow elements while attaching the skeleton. */
html.s2d-skeleton-v1 .selection-block-background.s2d-media-skeleton-host {
  position:absolute !important;
}
html.s2d-skeleton-v1 .s2d-media-skeleton-layer {
  position:absolute;
  inset:-1px;
  z-index:70;
  display:block;
  pointer-events:none;
  overflow:hidden;
  border-radius:var(--s2d-media-radius,0px);
  background:linear-gradient(155deg,#e1e7ea 0%,#eef2f4 58%,#dce3e6 100%);
  opacity:1;
  transition:opacity .32s ease;
  transform:translateZ(0);
}
html.s2d-skeleton-v1 .s2d-media-skeleton-layer::before {
  content:"";
  position:absolute;
  inset:-38%;
  background:linear-gradient(90deg,transparent 32%,rgba(255,255,255,.38) 43%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.34) 57%,transparent 68%);
  transform:translateX(-72%) rotate(9deg);
  animation:s2d-skeleton-sweep 1.25s ease-in-out infinite;
  will-change:transform;
}
html.night-mode.s2d-skeleton-v1 .s2d-media-skeleton-layer,
html.s2d-skeleton-v1 body.night-mode .s2d-media-skeleton-layer {
  background:linear-gradient(155deg,#171d20 0%,#242c30 58%,#1a2023 100%);
}
html.night-mode.s2d-skeleton-v1 .s2d-media-skeleton-layer::before,
html.s2d-skeleton-v1 body.night-mode .s2d-media-skeleton-layer::before {
  background:linear-gradient(90deg,transparent 34%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.04) 54%,transparent 68%);
}
html.s2d-skeleton-v1 .s2d-media-ready > .s2d-media-skeleton-layer,
html.s2d-skeleton-v1 .s2d-media-skeleton-layer.s2d-media-skeleton-ready {
  opacity:0;
}

/* Gallery items have a 3px Cineby frame; keep the shimmer inside the bitmap
   rather than covering the carousel's own spacing. */
html.s2d-skeleton-v1 .s2d-media-gallery > .s2d-media-skeleton-layer {
  inset:3px;
}

/* QR: no skeleton. The delayed Kaya QR is kept out of view until its bitmap
   is actually ready, then revealed with the approved fade/focus effect.
   On desktop/tablet JS measures the real hidden QR bitmap before reveal and
   shifts the QR host so the BITMAP top edge is exactly aligned with the poster
   top edge. The AI Similar control is independently positioned and therefore
   cannot be pushed by delayed QR rendering on desktop. */
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mv-rating:has(.cineby-qr),
html.s2d-skeleton-v1 .page-detail .mv-rating.s2d-qr-reveal-host {
  position:relative !important;
  height:auto !important;
  min-height:0 !important;
  margin-top:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  transform:translateY(var(--s2d-qr-align-y, 0px)) !important;
}

/* Undo v9's bottom-anchored absolute QR. The QR returns to its native geometry;
   JS performs the final pixel alignment while it is still opacity:0. */
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mv-rating:has(.cineby-qr) > .cineby-qr,
html.s2d-skeleton-v1 .page-detail .mv-rating.s2d-qr-reveal-host > .cineby-qr {
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin:0 !important;
  transform:none !important;
}

/* Mobile QR is independent from the desktop poster/side column. Keep its
   natural geometry and only use the reveal animation. */
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .qr-code-mobile:has(.cineby-qr),
html.s2d-skeleton-v1 .page-detail .qr-code-mobile.s2d-qr-reveal-host {
  position:relative !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  transform:none !important;
}

/* AI Similar placement. Mobile keeps Cineby's original .mvic-btn position.
   Desktop moves the existing live node (no clone, so plugin handlers survive)
   into a bottom-center slot inside .mvi-content, matching the approved target. */
.s2d-ai-original-marker {
  display:none !important;
}

@media (min-width:768px) {
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mvi-content {
    position:relative !important;
  }
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .s2d-ai-desktop-slot {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:16px !important;
    z-index:24 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
  }
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .s2d-ai-desktop-slot > .aisimilar_trigger {
    display:block !important;
    position:static !important;
    float:none !important;
    clear:none !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    transform:none !important;
    pointer-events:auto !important;
  }
}

@media (max-width:767px) {
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .s2d-ai-desktop-slot {
    display:none !important;
  }
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mvic-btn > .aisimilar_trigger {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
  }
}

/* Hide QR pixels from first paint while Kaya is still generating them. */
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mv-rating img.wpkqcg_qrcode,
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .qr-code-mobile img.wpkqcg_qrcode {
  opacity:0 !important;
  transform:scale(.88) translateZ(0) !important;
  filter:blur(5px) !important;
  transform-origin:50% 50% !important;
  transition:none !important;
  will-change:opacity,transform,filter;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Reveal only after src + natural dimensions + decode/load are ready. */
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mv-rating img.wpkqcg_qrcode.s2d-qr-show,
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .qr-code-mobile img.wpkqcg_qrcode.s2d-qr-show {
  opacity:1 !important;
  transform:scale(1) translateZ(0) !important;
  filter:blur(0) !important;
  transition:
    opacity .34s ease-out,
    transform .46s cubic-bezier(.18,.82,.22,1),
    filter .34s ease-out !important;
}

/* Fail-open only removes the reveal gate; it never paints a placeholder. */
html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .s2d-qr-reveal-failopen img.wpkqcg_qrcode {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:opacity .18s ease-out !important;
}

/* Do not let media skeletons interfere with Cineby's text/detail grid. */
html.s2d-skeleton-v1 .page-detail .mvic-desc,
html.s2d-skeleton-v1 .page-detail .mvic-info,
html.s2d-skeleton-v1 .page-detail .single-page-title-wrap {
  visibility:visible !important;
  opacity:1 !important;
}

/* Skeleton 2 — Aqua: same geometry, branded light runner. */
html.s2d-skeleton-v2 .s2d-skeleton-layer {
  background:linear-gradient(155deg,#102326 0%,#183237 58%,#11272b 100%);
}
html.s2d-skeleton-v2 .s2d-skeleton-layer::before {
  background:linear-gradient(90deg,transparent 31%,rgba(112,226,219,.04) 40%,rgba(135,245,238,.26) 50%,rgba(112,226,219,.05) 60%,transparent 69%);
}
html.s2d-skeleton-v2 .s2d-skeleton-rank,
html.s2d-skeleton-v2 .s2d-skeleton-titlebar,
html.s2d-skeleton-v2 .s2d-skeleton-metabar {
  background:rgba(116,225,219,.16);
}

/* Skeleton 3 — Glass, refined for Cineby dark palette.
   No backdrop-filter here: on rounded poster corners it caused light fringe pixels. */
html.s2d-skeleton-v3 .s2d-skeleton-card {
  overflow:hidden !important;
  background:#10171b;
  contain:paint;
}
html.s2d-skeleton-v3 .s2d-skeleton-layer {
  background:linear-gradient(155deg,rgba(12,20,26,.94) 0%,rgba(17,30,37,.90) 56%,rgba(11,18,23,.94) 100%);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(94,204,218,.055);
  transform:translateZ(0);
}
html.s2d-skeleton-v3 .s2d-skeleton-layer::before {
  background:linear-gradient(90deg,transparent 28%,rgba(255,255,255,.025) 40%,rgba(94,204,218,.18) 50%,rgba(255,255,255,.025) 60%,transparent 72%);
  animation-duration:1.45s;
}
html.s2d-skeleton-v3 .s2d-skeleton-rank,
html.s2d-skeleton-v3 .s2d-skeleton-titlebar,
html.s2d-skeleton-v3 .s2d-skeleton-metabar {
  border:1px solid rgba(111,213,226,.08);
  background:rgba(105,190,205,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* Detail-page skeleton (movie / TV show / episode, including /watching/). */
html.s2d-skeleton-v3 .page-detail #mv-info.s2d-detail-skeleton-host {
  position:relative !important;
  isolation:isolate;
}
html.s2d-skeleton-v3 .s2d-detail-skeleton {
  position:absolute;
  inset:0;
  z-index:120;
  overflow:hidden;
  pointer-events:none;
  border-radius:8px;
  background:linear-gradient(155deg,rgba(10,17,23,.985),rgba(17,29,37,.975) 54%,rgba(10,17,22,.985));
  box-shadow:inset 0 0 0 1px rgba(94,204,218,.045);
  opacity:1;
  transition:opacity .34s ease;
  contain:paint;
  transform:translateZ(0);
}
html.s2d-skeleton-v3 .s2d-detail-skeleton.s2d-detail-skeleton-ready { opacity:0; }
html.s2d-skeleton-v3 .s2d-detail-skeleton::before {
  content:"";
  position:absolute;
  inset:-30%;
  z-index:4;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.025) 41%,rgba(94,204,218,.17) 50%,rgba(255,255,255,.025) 59%,transparent 70%);
  transform:translateX(-74%) rotate(7deg);
  animation:s2d-detail-skeleton-sweep 1.5s ease-in-out infinite;
}
html.s2d-skeleton-v3 .s2d-detail-sk-hero,
html.s2d-skeleton-v3 .s2d-detail-sk-poster,
html.s2d-skeleton-v3 .s2d-detail-sk-line,
html.s2d-skeleton-v3 .s2d-detail-sk-pill {
  position:absolute;
  z-index:2;
  display:block;
  background:rgba(91,174,191,.10);
  border:1px solid rgba(111,213,226,.065);
  overflow:hidden;
}
html.s2d-skeleton-v3 .s2d-detail-sk-hero {
  left:0; right:0; top:0; height:46%;
  border-radius:8px 8px 0 0;
  background:linear-gradient(150deg,rgba(20,35,43,.92),rgba(11,20,26,.96));
}
html.s2d-skeleton-v3 .s2d-detail-sk-poster {
  left:22px; top:38%; width:140px; aspect-ratio:2/3; border-radius:7px;
  background:rgba(75,145,160,.12);
}
html.s2d-skeleton-v3 .s2d-detail-sk-line {
  left:184px; height:13px; border-radius:5px;
}
html.s2d-skeleton-v3 .s2d-detail-sk-line.l1 { top:53%; width:42%; height:18px; }
html.s2d-skeleton-v3 .s2d-detail-sk-line.l2 { top:59%; width:58%; }
html.s2d-skeleton-v3 .s2d-detail-sk-line.l3 { top:64%; width:49%; }
html.s2d-skeleton-v3 .s2d-detail-sk-line.l4 { top:70%; width:34%; }
html.s2d-skeleton-v3 .s2d-detail-sk-pill {
  left:184px; top:45.5%; width:54px; height:24px; border-radius:999px;
}
@keyframes s2d-detail-skeleton-sweep {
  0% { transform:translateX(-74%) rotate(7deg); }
  58%,100% { transform:translateX(74%) rotate(7deg); }
}
@media (max-width:767px) {
  html.s2d-skeleton-v3 .s2d-detail-skeleton { border-radius:0; }
  html.s2d-skeleton-v3 .s2d-detail-sk-hero { height:43%; border-radius:0; }
  html.s2d-skeleton-v3 .s2d-detail-sk-poster { left:12px; top:37%; width:108px; border-radius:6px; }
  html.s2d-skeleton-v3 .s2d-detail-sk-line { left:136px; }
  html.s2d-skeleton-v3 .s2d-detail-sk-pill { left:136px; top:45%; }
  html.s2d-skeleton-v3 .s2d-detail-sk-line.l1 { top:53%; width:46%; height:16px; }
  html.s2d-skeleton-v3 .s2d-detail-sk-line.l2 { top:60%; width:54%; }
  html.s2d-skeleton-v3 .s2d-detail-sk-line.l3 { top:66%; width:46%; }
  html.s2d-skeleton-v3 .s2d-detail-sk-line.l4 { top:72%; width:32%; }
}

/* Skeleton 4 — Structured app skeleton: clearer title/meta geometry. */
html.s2d-skeleton-v4 .s2d-skeleton-layer {
  background:linear-gradient(180deg,#1a2023 0%,#20272a 68%,#151b1e 100%);
}
html.s2d-skeleton-v4 .s2d-skeleton-layer::before {
  background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.13) 47%,rgba(255,255,255,.04) 57%,transparent 72%);
  animation-duration:1.08s;
}
html.s2d-skeleton-v4 .s2d-skeleton-rank {
  width:38px;
  height:18px;
  border-radius:7px;
  background:rgba(100,213,204,.17);
}
html.s2d-skeleton-v4 .s2d-skeleton-titlebar {
  right:15%;
  height:15px;
  border-radius:6px;
  background:rgba(255,255,255,.13);
}
html.s2d-skeleton-v4 .s2d-skeleton-metabar {
  width:31%;
  height:9px;
  background:rgba(155,224,219,.10);
}

/* Skeleton 5 — Cinematic diagonal sweep with faint film-strip texture. */
html.s2d-skeleton-v5 .s2d-skeleton-layer {
  background:
    radial-gradient(circle at 72% 18%,rgba(70,171,171,.12),transparent 34%),
    linear-gradient(160deg,#111719 0%,#20292c 52%,#12181b 100%);
}
html.s2d-skeleton-v5 .s2d-skeleton-layer::before {
  inset:-45%;
  background:linear-gradient(90deg,transparent 35%,rgba(169,255,248,.03) 42%,rgba(169,255,248,.20) 50%,rgba(255,255,255,.05) 57%,transparent 65%);
  animation-duration:1.55s;
}
html.s2d-skeleton-v5 .s2d-skeleton-layer::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,255,255,.08) 12px,transparent 13px 25px);
  mix-blend-mode:soft-light;
}
html.s2d-skeleton-v5 .s2d-skeleton-rank,
html.s2d-skeleton-v5 .s2d-skeleton-titlebar,
html.s2d-skeleton-v5 .s2d-skeleton-metabar {
  background:rgba(188,255,250,.11);
}

@media (max-width:767px) {
  html.s2d-skeleton-lab .s2d-skeleton-rank { left:9px; top:9px; }
  html.s2d-skeleton-lab .s2d-skeleton-titlebar { left:9px; bottom:29px; }
  html.s2d-skeleton-lab .s2d-skeleton-metabar { left:9px; bottom:9px; }
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-transition-lab::view-transition-old(root),
  html.s2d-transition-lab::view-transition-new(root),
  html.s2d-transition-lab::view-transition-old(s2d-app-header),
  html.s2d-transition-lab::view-transition-new(s2d-app-header),
  html.s2d-vt-fallback.s2d-fallback-leaving body,
  html.s2d-vt-fallback.s2d-transition-arriving body,
  html.s2d-skeleton-lab .s2d-skeleton-layer::before,
  html.s2d-skeleton-lab .s2d-media-skeleton-layer::before {
    animation:none !important;
  }
}


@media (prefers-reduced-motion:reduce) {
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .mv-rating img.wpkqcg_qrcode.s2d-qr-show,
  html.s2d-transition-v5.s2d-skeleton-v1 .page-detail .qr-code-mobile img.wpkqcg_qrcode.s2d-qr-show {
    transform:none !important;
    filter:none !important;
    transition:opacity .16s linear !important;
  }
}


/* ========================================================================
   Cineby Visual Design Lab — TEST ONLY
   Activated only by explicit URL parameters parsed in front.js.
   ======================================================================== */

/* ------------------------- BEST / SELECTION UI ------------------------- */
html.s2d-best-ui-preview .selections-list {
  --s2d-best-accent:#49b9b5;
  --s2d-best-accent-bright:#6cddd7;
  --s2d-best-card:#ffffff;
  --s2d-best-card-2:#f2f6f7;
  --s2d-best-text:#182226;
  --s2d-best-muted:#6e7c82;
  --s2d-best-border:rgba(29,71,76,.13);
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  margin:18px 0 26px !important;
}
html.night-mode.s2d-best-ui-preview .selections-list,
html.s2d-best-ui-preview body.night-mode .selections-list {
  --s2d-best-card:#202426;
  --s2d-best-card-2:#181c1e;
  --s2d-best-text:#f0f5f5;
  --s2d-best-muted:#9aa8ab;
  --s2d-best-border:rgba(108,221,215,.13);
}
html.s2d-best-ui-preview .selections-list .selection-block {
  width:auto !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  isolation:isolate;
  text-decoration:none !important;
  background:var(--s2d-best-card) !important;
  color:var(--s2d-best-text) !important;
  border:1px solid var(--s2d-best-border) !important;
  box-sizing:border-box !important;
  transform:translateZ(0);
}
html.s2d-best-ui-preview .selections-list .selection-block-background {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  transform:scale(1.001) translateZ(0) !important;
  transition:transform .42s cubic-bezier(.2,.78,.2,1), filter .35s ease !important;
}
html.s2d-best-ui-preview .selections-list .selection-block:hover .selection-block-background,
html.s2d-best-ui-preview .selections-list .selection-block:focus .selection-block-background,
html.s2d-best-ui-preview .selections-list .selection-block:active .selection-block-background {
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  transform:scale(1.035) translateZ(0) !important;
}
html.s2d-best-ui-preview .selection-block-count,
html.s2d-best-ui-preview .selection-block-title {
  z-index:5 !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
}
html.s2d-best-ui-preview .s2d-best-count-label {
  font:inherit;
  letter-spacing:.02em;
}

/* Variant 1 — Clean Poster Tile. Compact count chip, quiet bottom title. */
html.s2d-best-ui-v1 .selections-list .selection-block {
  aspect-ratio:1 / 1 !important;
  border-radius:14px !important;
  box-shadow:0 5px 18px rgba(23,48,53,.08) !important;
}
html.night-mode.s2d-best-ui-v1 .selections-list .selection-block,
html.s2d-best-ui-v1 body.night-mode .selections-list .selection-block {
  box-shadow:0 8px 24px rgba(0,0,0,.20) !important;
}
html.s2d-best-ui-v1 .selection-block::after {
  content:"";
  position:absolute;
  inset:42% 0 0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(6,15,18,.16) 22%,rgba(6,15,18,.84) 100%);
}
html.s2d-best-ui-v1 .selection-block-count {
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  padding:6px 9px !important;
  border:0 !important;
  border-radius:8px !important;
  background:rgba(12,29,32,.74) !important;
  color:#dffefc !important;
  font-size:12px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  backdrop-filter:blur(5px);
}
html.s2d-best-ui-v1 .selection-block-title {
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  max-height:none !important;
  padding:16px 14px 13px !important;
  background:none !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  text-align:left !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Variant 2 — Editorial. Wider cinematic crop with a thin brand rail. */
html.s2d-best-ui-v2 .selections-list {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
html.s2d-best-ui-v2 .selections-list .selection-block {
  aspect-ratio:4 / 3 !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
html.s2d-best-ui-v2 .selection-block::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,20,.02) 35%,rgba(7,17,20,.76) 100%);
}
html.s2d-best-ui-v2 .selection-block-count {
  top:13px !important;
  left:0 !important;
  width:auto !important;
  height:auto !important;
  padding:3px 10px 3px 12px !important;
  border-left:3px solid var(--s2d-best-accent-bright) !important;
  background:rgba(10,23,26,.55) !important;
  color:#e7ffff !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
}
html.s2d-best-ui-v2 .selection-block-title {
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  padding:12px 14px 13px !important;
  background:none !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Variant 3 — Framed Minimal. Artwork remains dominant; metadata lives in a
   restrained glass footer with a crisp aqua count. */
html.s2d-best-ui-v3 .selections-list .selection-block {
  aspect-ratio:1 / 1 !important;
  border-radius:16px !important;
  box-shadow:0 8px 24px rgba(23,48,53,.07) !important;
}
html.night-mode.s2d-best-ui-v3 .selections-list .selection-block,
html.s2d-best-ui-v3 body.night-mode .selections-list .selection-block {
  box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
}
html.s2d-best-ui-v3 .selection-block::after {
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  height:54px;
  z-index:3;
  border-radius:11px;
  pointer-events:none;
  background:rgba(10,24,27,.76);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 5px 14px rgba(0,0,0,.14);
  backdrop-filter:blur(7px);
}
html.s2d-best-ui-v3 .selection-block-count {
  top:auto !important;
  bottom:25px !important;
  left:18px !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:var(--s2d-best-accent-bright) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:700 !important;
}
html.s2d-best-ui-v3 .selection-block-title {
  left:18px !important;
  right:14px !important;
  bottom:39px !important;
  width:auto !important;
  max-height:none !important;
  padding:0 !important;
  background:none !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:1199px) {
  html.s2d-best-ui-preview .selections-list { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width:991px) {
  html.s2d-best-ui-preview .selections-list,
  html.s2d-best-ui-v2 .selections-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; }
}
@media (max-width:639px) {
  html.s2d-best-ui-preview .selections-list,
  html.s2d-best-ui-v2 .selections-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
}
@media (max-width:359px) {
  html.s2d-best-ui-preview .selections-list,
  html.s2d-best-ui-v2 .selections-list { grid-template-columns:1fr !important; }
}

/* ------------------------ HIGH-QUALITY DETAIL MEDIA --------------------- */
html.s2d-media-hq-preview .page-detail #mv-info .mvi-cover.splash-image,
html.s2d-media-hq-preview .page-detail #mv-info #content-cover {
  image-rendering:auto !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}

/* Movie and TV posters: 140x210 -> 168x252 (+20%). Episode poster is left at
   its native theme size because only its player splash was requested. */
@media (min-width:800px) {
  html.s2d-media-hq-preview.s2d-detail-movie #mv-info .mvi-content .mvic-thumb,
  html.s2d-media-hq-preview.s2d-detail-series #mv-info .mvi-content .mvic-thumb {
    width:168px !important;
    height:252px !important;
    margin-right:20px !important;
  }
  html.s2d-media-hq-preview.s2d-detail-movie #mv-info .mvi-content .mvic-thumb img,
  html.s2d-media-hq-preview.s2d-detail-series #mv-info .mvi-content .mvic-thumb img {
    width:168px !important;
    height:252px !important;
    min-height:0 !important;
    object-fit:cover !important;
    display:block !important;
  }
}
@media (min-width:992px) and (max-width:1199px) {
  html.s2d-media-hq-preview.s2d-detail-movie #mv-info .mvi-content .mvic-desc,
  html.s2d-media-hq-preview.s2d-detail-series #mv-info .mvi-content .mvic-desc {
    width:632px !important;
  }
}
@media (max-width:799px) {
  html.s2d-media-hq-preview.s2d-detail-movie #mv-info .mvi-content .mvic-thumb,
  html.s2d-media-hq-preview.s2d-detail-series #mv-info .mvi-content .mvic-thumb {
    display:block !important;
    float:none !important;
    width:auto !important;
    height:auto !important;
    margin:0 auto 15px !important;
    text-align:center !important;
  }
  html.s2d-media-hq-preview.s2d-detail-movie #mv-info .mvi-content .mvic-thumb img,
  html.s2d-media-hq-preview.s2d-detail-series #mv-info .mvi-content .mvic-thumb img {
    width:168px !important;
    height:252px !important;
    min-height:0 !important;
    object-fit:cover !important;
    display:inline-block !important;
  }
}

/* -------------------- CRISP LISTING PLAY — 3 ICONS --------------------- */
html.s2d-list-play-preview .movies-list .ml-item .ml-mask::after,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask::after {
  content:"" !important;
  width:58px !important;
  height:58px !important;
  top:50% !important;
  left:50% !important;
  margin:-29px 0 0 -29px !important;
  position:absolute !important;
  z-index:8 !important;
  opacity:0 !important;
  border:0 !important;
  background-color:transparent !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:58px 58px !important;
  transform:scale(.76) translateZ(0);
  transform-origin:center;
  transition:opacity .22s ease, transform .34s cubic-bezier(.2,.78,.2,1), filter .28s ease !important;
  will-change:opacity,transform,filter,box-shadow;
  pointer-events:none !important;
}
html.s2d-list-play-preview .movies-list .ml-item .ml-mask:hover::after,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask:hover::after {
  opacity:1 !important;
  transform:scale(1) translateZ(0);
}
html.s2d-list-play-preview .movies-list .ml-item .ml-mask::before,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask::before {
  z-index:7 !important;
  opacity:0 !important;
  transition:opacity .24s ease, background .35s ease !important;
}
html.s2d-list-play-preview .movies-list .ml-item .ml-mask:hover::before,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask:hover::before {
  opacity:1 !important;
}

/* Icon 1 — thin aqua ring + charcoal glass core. */
html.s2d-list-play-icon-v1 .movies-list .ml-item .ml-mask::after,
html.s2d-list-play-icon-v1 .cineby-api-popular-grid .ml-item .ml-mask::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28.5' fill='%23121b1e' fill-opacity='.82' stroke='%236cddd7' stroke-width='2'/%3E%3Cpath d='M27 21.5 45 32 27 42.5Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}
/* Icon 2 — solid branded disc. */
html.s2d-list-play-icon-v2 .movies-list .ml-item .ml-mask::after,
html.s2d-list-play-icon-v2 .cineby-api-popular-grid .ml-item .ml-mask::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='%2357d2cd'/%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%23b8fff9' stroke-opacity='.55'/%3E%3Cpath d='M27 21.5 45 32 27 42.5Z' fill='%230c2327'/%3E%3C/svg%3E") !important;
}
/* Icon 3 — rounded-square glass control. */
html.s2d-list-play-icon-v3 .movies-list .ml-item .ml-mask::after,
html.s2d-list-play-icon-v3 .cineby-api-popular-grid .ml-item .ml-mask::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='5' y='5' width='54' height='54' rx='17' fill='%230c171a' fill-opacity='.82' stroke='%236cddd7' stroke-width='1.8'/%3E%3Cpath d='M27 21.5 45 32 27 42.5Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* Common poster dimming keeps the icon legible without a heavy black veil. */
html.s2d-list-play-preview .movies-list .ml-item .ml-mask:hover::before,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask:hover::before {
  background:radial-gradient(circle at 50% 50%,rgba(6,18,21,.08) 0%,rgba(5,13,16,.22) 42%,rgba(3,8,10,.42) 100%) !important;
}

/* FX 1 — Soft Ripple: one clean aqua wave. */
html.s2d-list-play-fx-v1 .movies-list .ml-item .ml-mask:hover::after,
html.s2d-list-play-fx-v1 .cineby-api-popular-grid .ml-item .ml-mask:hover::after {
  animation:s2d-list-play-soft-ripple 1.45s ease-out infinite;
}
@keyframes s2d-list-play-soft-ripple {
  0%   { box-shadow:0 0 0 0 rgba(108,221,215,.42),0 0 16px rgba(108,221,215,.16); }
  62%  { box-shadow:0 0 0 18px rgba(108,221,215,0),0 0 22px rgba(108,221,215,.18); }
  100% { box-shadow:0 0 0 26px rgba(108,221,215,0),0 0 14px rgba(108,221,215,.08); }
}
/* FX 2 — Double Wave: two staggered luminous rings. */
html.s2d-list-play-fx-v2 .movies-list .ml-item .ml-mask:hover::after,
html.s2d-list-play-fx-v2 .cineby-api-popular-grid .ml-item .ml-mask:hover::after {
  animation:s2d-list-play-double-wave 1.65s cubic-bezier(.2,.6,.2,1) infinite;
}
@keyframes s2d-list-play-double-wave {
  0%   { box-shadow:0 0 0 0 rgba(108,221,215,.46),0 0 0 0 rgba(82,172,210,.24),0 0 18px rgba(108,221,215,.14); }
  48%  { box-shadow:0 0 0 15px rgba(108,221,215,0),0 0 0 5px rgba(82,172,210,.18),0 0 26px rgba(108,221,215,.18); }
  100% { box-shadow:0 0 0 25px rgba(108,221,215,0),0 0 0 24px rgba(82,172,210,0),0 0 14px rgba(108,221,215,.08); }
}
/* FX 3 — Aurora Pulse: softer wave plus breathing luminous focus. */
html.s2d-list-play-fx-v3 .movies-list .ml-item .ml-mask:hover::after,
html.s2d-list-play-fx-v3 .cineby-api-popular-grid .ml-item .ml-mask:hover::after {
  animation:s2d-list-play-aurora 1.8s ease-in-out infinite;
}
html.s2d-list-play-fx-v3 .movies-list .ml-item .ml-mask:hover::before,
html.s2d-list-play-fx-v3 .cineby-api-popular-grid .ml-item .ml-mask:hover::before {
  background:radial-gradient(circle at 50% 50%,rgba(108,221,215,.16) 0%,rgba(108,221,215,.06) 18%,rgba(4,12,15,.20) 46%,rgba(3,8,10,.44) 100%) !important;
}
@keyframes s2d-list-play-aurora {
  0%,100% { filter:drop-shadow(0 0 3px rgba(108,221,215,.15)); box-shadow:0 0 0 0 rgba(108,221,215,.36); }
  50% { filter:drop-shadow(0 0 12px rgba(108,221,215,.42)); box-shadow:0 0 0 19px rgba(108,221,215,0); }
}

/* --------------------- SPLASH PLAYER PLAY — 3 ICONS -------------------- */
html.s2d-player-play-preview #mv-info .mvi-cover.splash-image::before {
  content:"" !important;
  width:86px !important;
  height:86px !important;
  top:50% !important;
  left:50% !important;
  margin:-43px 0 0 -43px !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:86px 86px !important;
  box-shadow:none !important;
  z-index:4 !important;
  transform:scale(.96) translateZ(0);
  transition:transform .34s cubic-bezier(.2,.78,.2,1),filter .28s ease,opacity .24s ease !important;
}
html.s2d-player-play-preview #mv-info .mvi-cover.splash-image:hover::before {
  transform:scale(1.055) translateZ(0) !important;
}
html.s2d-player-play-v1 #mv-info .mvi-cover.splash-image::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='39' fill='%230b171a' fill-opacity='.72' stroke='%236cddd7' stroke-width='2'/%3E%3Ccircle cx='48' cy='48' r='34' fill='none' stroke='%23ffffff' stroke-opacity='.10'/%3E%3Cpath d='M40 33 65 48 40 63Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.30));
}
html.s2d-player-play-v1 #mv-info .mvi-cover.splash-image:hover::before {
  filter:drop-shadow(0 0 18px rgba(108,221,215,.28)) drop-shadow(0 8px 20px rgba(0,0,0,.30));
}
html.s2d-player-play-v2 #mv-info .mvi-cover.splash-image::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect x='13' y='24' width='70' height='48' rx='18' fill='%2359d5cf' fill-opacity='.94'/%3E%3Crect x='14' y='25' width='68' height='46' rx='17' fill='none' stroke='%23c8fffc' stroke-opacity='.55'/%3E%3Cpath d='M42 35 63 48 42 61Z' fill='%230b2225'/%3E%3C/svg%3E") !important;
  filter:drop-shadow(0 9px 20px rgba(0,0,0,.30));
}
html.s2d-player-play-v2 #mv-info .mvi-cover.splash-image:hover::before {
  filter:drop-shadow(0 0 20px rgba(108,221,215,.36)) drop-shadow(0 9px 20px rgba(0,0,0,.30));
}
html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='38' fill='%23070d0f' fill-opacity='.48' stroke='%23ffffff' stroke-opacity='.72' stroke-width='1.5'/%3E%3Ccircle cx='48' cy='48' r='31' fill='none' stroke='%236cddd7' stroke-opacity='.72' stroke-width='1.4'/%3E%3Cpath d='M41 34 64 48 41 62Z' fill='%236cddd7'/%3E%3C/svg%3E") !important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.28));
}
html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image:hover::before {
  filter:drop-shadow(0 0 20px rgba(108,221,215,.30)) drop-shadow(0 8px 20px rgba(0,0,0,.28));
}
@media (max-width:639px) {
  html.s2d-player-play-preview #mv-info .mvi-cover.splash-image::before {
    width:68px !important;
    height:68px !important;
    margin:-34px 0 0 -34px !important;
    background-size:68px 68px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-list-play-preview .movies-list .ml-item .ml-mask::after,
  html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask::after,
  html.s2d-player-play-preview #mv-info .mvi-cover.splash-image::before {
    animation:none !important;
    transition:none !important;
  }
}

/* ========================================================================
   Visual Media Lab v13 — requested refinements
   ======================================================================== */

/* Best UI v2: guarantee title contrast even on very bright artwork. The
   title sits inside a dedicated cinematic fade rather than directly on image. */
html.s2d-best-ui-v2 .selection-block::before {
  background:linear-gradient(180deg,
    rgba(5,13,16,.00) 0%,
    rgba(5,13,16,.02) 42%,
    rgba(5,13,16,.32) 66%,
    rgba(5,13,16,.88) 100%) !important;
}
html.s2d-best-ui-v2 .selection-block-title {
  padding:26px 14px 13px !important;
  background:linear-gradient(180deg,
    rgba(5,13,16,0) 0%,
    rgba(5,13,16,.64) 48%,
    rgba(5,13,16,.93) 100%) !important;
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.58) !important;
}

/* HQ detail media: switching occurs only after a higher-resolution bitmap has
   loaded successfully. These rules affect geometry only and can no longer
   expose a blank candidate URL. */
html.s2d-media-hq-preview .page-detail #mv-info .mvi-cover.splash-image,
html.s2d-media-hq-preview .page-detail #mv-info #content-cover {
  background-color:transparent !important;
  background-position:center center !important;
  background-size:cover !important;
  image-rendering:auto !important;
}

/* Listing play control v13: replace theme PNG/pseudo-image with actual DOM +
   vector triangle. This makes every wave genuinely circular. */
html.s2d-list-play-preview .movies-list .ml-item .ml-mask::after,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask::after {
  content:none !important;
  display:none !important;
  background-image:none !important;
  box-shadow:none !important;
  animation:none !important;
}
html.s2d-list-play-preview .movies-list .ml-item .ml-mask,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask {
  position:relative !important;
  overflow:visible;
}
html.s2d-list-play-preview .s2d-list-play-control {
  position:absolute;
  left:50%;
  top:50%;
  width:62px;
  height:62px;
  z-index:9;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  transform-origin:center center;
  transition:opacity .18s ease, transform .42s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  border-radius:50%;
  overflow:visible;
  isolation:isolate;
  will-change:transform,opacity;
}
html.s2d-list-play-preview .ml-mask:hover > .s2d-list-play-control,
html.s2d-list-play-preview .ml-mask:focus-visible > .s2d-list-play-control {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
html.s2d-list-play-preview .s2d-list-play-core {
  position:absolute;
  inset:3px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow:hidden;
  transform:translateZ(0);
  transition:background-position .42s cubic-bezier(.2,.8,.2,1),
             box-shadow .30s ease,
             border-color .30s ease,
             backdrop-filter .30s ease;
}
html.s2d-list-play-preview .s2d-list-play-core svg {
  width:27px;
  height:27px;
  display:block;
  transform:translateX(1.5px);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.16));
}

/* Variant 2 refined — same moving teal family as the approved home buttons. */
html.s2d-list-play-icon-v2 .s2d-list-play-core {
  color:#0c2327;
  background:linear-gradient(110deg,
    #62ccc8 0%,
    #62ccc8 25%,
    #79ddd7 48%,
    #48b9c5 72%,
    #53c0c5 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  border:1px solid rgba(213,255,252,.54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             0 7px 18px rgba(10,49,53,.28),
             0 0 0 1px rgba(54,181,183,.12);
}
html.s2d-list-play-icon-v2 .ml-mask:hover > .s2d-list-play-control .s2d-list-play-core,
html.s2d-list-play-icon-v2 .ml-mask:focus-visible > .s2d-list-play-control .s2d-list-play-core {
  background-position:100% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             0 8px 22px rgba(20,146,154,.34),
             0 0 18px rgba(108,221,215,.20);
}

/* Variant 4 — optical glass. The poster is visibly blurred/saturated through
   the button instead of being replaced by an opaque fill. */
html.s2d-list-play-icon-v4 .s2d-list-play-core {
  color:rgba(255,255,255,.96);
  background:linear-gradient(145deg,
    rgba(255,255,255,.25) 0%,
    rgba(116,232,226,.12) 34%,
    rgba(9,19,22,.23) 100%);
  border:1px solid rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(8px) saturate(155%) contrast(1.06);
  backdrop-filter:blur(8px) saturate(155%) contrast(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(0,0,0,.12),
             0 8px 22px rgba(0,0,0,.28),
             0 0 0 1px rgba(108,221,215,.10);
}
html.s2d-list-play-icon-v4 .s2d-list-play-core::after {
  content:"";
  position:absolute;
  width:70%;
  height:35%;
  left:9%;
  top:5%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
  transform:rotate(-18deg);
  pointer-events:none;
}
html.s2d-list-play-icon-v4 .ml-mask:hover > .s2d-list-play-control .s2d-list-play-core,
html.s2d-list-play-icon-v4 .ml-mask:focus-visible > .s2d-list-play-control .s2d-list-play-core {
  -webkit-backdrop-filter:blur(10px) saturate(175%) contrast(1.08);
  backdrop-filter:blur(10px) saturate(175%) contrast(1.08);
  border-color:rgba(211,255,252,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),
             inset 0 -1px 0 rgba(0,0,0,.12),
             0 9px 24px rgba(0,0,0,.30),
             0 0 18px rgba(108,221,215,.16);
}

/* If an old icon parameter is used, keep a clean neutral circular fallback. */
html.s2d-list-play-icon-v1 .s2d-list-play-core,
html.s2d-list-play-icon-v3 .s2d-list-play-core,
html.s2d-list-play-preview:not(.s2d-list-play-icon-v2):not(.s2d-list-play-icon-v4) .s2d-list-play-core {
  color:#fff;
  background:rgba(8,20,23,.66);
  border:1px solid rgba(108,221,215,.62);
  -webkit-backdrop-filter:blur(5px) saturate(125%);
  backdrop-filter:blur(5px) saturate(125%);
  box-shadow:0 7px 20px rgba(0,0,0,.28);
}

/* FX 3 rebuilt: circular dual light waves + a subtle breathing halo inspired
   by the supplied reference video. No box-shadow is animated on a square box. */
html.s2d-list-play-fx-v3 .s2d-list-play-control::before,
html.s2d-list-play-fx-v3 .s2d-list-play-control::after {
  content:"";
  position:absolute;
  inset:3px;
  z-index:1;
  border-radius:50%;
  border:1.5px solid rgba(117,236,229,.76);
  opacity:0;
  transform:scale(.96);
  transform-origin:center;
  pointer-events:none;
  will-change:transform,opacity;
}
html.s2d-list-play-fx-v3 .ml-mask:hover > .s2d-list-play-control::before,
html.s2d-list-play-fx-v3 .ml-mask:focus-visible > .s2d-list-play-control::before {
  animation:s2d-play-wave-round 1.62s cubic-bezier(.18,.72,.18,1) .12s infinite;
}
html.s2d-list-play-fx-v3 .ml-mask:hover > .s2d-list-play-control::after,
html.s2d-list-play-fx-v3 .ml-mask:focus-visible > .s2d-list-play-control::after {
  border-color:rgba(255,255,255,.52);
  animation:s2d-play-wave-round 1.62s cubic-bezier(.18,.72,.18,1) .66s infinite;
}
html.s2d-list-play-fx-v3 .ml-mask:hover > .s2d-list-play-control .s2d-list-play-core,
html.s2d-list-play-fx-v3 .ml-mask:focus-visible > .s2d-list-play-control .s2d-list-play-core {
  animation:s2d-play-core-breathe 1.62s ease-in-out .12s infinite;
}
@keyframes s2d-play-wave-round {
  0%   { opacity:0; transform:scale(.94); filter:blur(0); }
  12%  { opacity:.58; }
  58%  { opacity:.20; }
  100% { opacity:0; transform:scale(1.88); filter:blur(.35px); }
}
@keyframes s2d-play-core-breathe {
  0%,100% { box-shadow:0 0 0 0 rgba(108,221,215,0), 0 8px 22px rgba(0,0,0,.25); }
  50% { box-shadow:0 0 22px 3px rgba(108,221,215,.28), 0 8px 24px rgba(0,0,0,.27); }
}

/* The surrounding poster veil remains soft and circular around the control. */
html.s2d-list-play-preview .movies-list .ml-item .ml-mask:hover::before,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask:hover::before,
html.s2d-list-play-preview .movies-list .ml-item .ml-mask:focus-visible::before,
html.s2d-list-play-preview .cineby-api-popular-grid .ml-item .ml-mask:focus-visible::before {
  background:radial-gradient(circle at 50% 50%,
    rgba(108,221,215,.09) 0%,
    rgba(7,18,21,.10) 22%,
    rgba(4,11,14,.24) 52%,
    rgba(2,7,9,.42) 100%) !important;
}

@media (max-width:639px) {
  html.s2d-list-play-preview .s2d-list-play-control {
    width:56px;
    height:56px;
  }
  html.s2d-list-play-preview .s2d-list-play-core svg {
    width:24px;
    height:24px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-list-play-preview .s2d-list-play-control,
  html.s2d-list-play-preview .s2d-list-play-core,
  html.s2d-list-play-fx-v3 .s2d-list-play-control::before,
  html.s2d-list-play-fx-v3 .s2d-list-play-control::after {
    animation:none !important;
    transition:none !important;
  }
}


/* ========================================================================
   Visual Media Lab v14 — optical glass + robust splash play controls
   ======================================================================== */

/* Listing play: requested +40% triangle. 27px -> 38px, mobile 24px -> 34px. */
html.s2d-list-play-preview .s2d-list-play-core svg {
  position:relative;
  z-index:4;
  width:38px !important;
  height:38px !important;
  flex:0 0 38px;
  transform:translateX(2px);
}
html.s2d-list-play-preview .s2d-list-play-lens {
  display:none;
}

/* Glass icon v4 — actual optical magnification/refraction.
   backdrop-filter alone only blurs; the lens layer below renders a magnified
   copy of the poster under the circle, which makes the image visibly bend. */
html.s2d-list-play-icon-v4 .s2d-list-play-core {
  background:rgba(8,19,22,.13) !important;
  border:1px solid rgba(233,255,253,.62) !important;
  -webkit-backdrop-filter:blur(2.5px) saturate(145%) contrast(1.07) !important;
  backdrop-filter:blur(2.5px) saturate(145%) contrast(1.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(2,12,15,.24),
    inset 7px 4px 15px rgba(255,255,255,.09),
    inset -7px -5px 16px rgba(0,20,24,.18),
    0 8px 22px rgba(0,0,0,.28),
    0 0 0 1px rgba(108,221,215,.10) !important;
}
html.s2d-list-play-icon-v4 .s2d-list-play-lens {
  display:block;
  position:absolute;
  inset:-7%;
  z-index:1;
  border-radius:50%;
  background-repeat:no-repeat;
  background-position:center center;
  transform:scale(1.10);
  transform-origin:center;
  filter:saturate(1.20) contrast(1.08) brightness(1.035) blur(.20px);
  opacity:.92;
  pointer-events:none;
}
/* Curved glass edge: stronger refraction is concentrated near the rim. */
html.s2d-list-play-icon-v4 .s2d-list-play-core::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.23) 0 5%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 54%, rgba(170,255,249,.11) 68%, rgba(255,255,255,.22) 82%, rgba(6,27,31,.17) 100%);
  box-shadow:inset 0 0 8px rgba(228,255,253,.18);
}
html.s2d-list-play-icon-v4 .s2d-list-play-core::after {
  width:64% !important;
  height:24% !important;
  left:12% !important;
  top:8% !important;
  z-index:3 !important;
  opacity:.82;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0)) !important;
  filter:blur(.3px);
}
html.s2d-list-play-icon-v4 .ml-mask:hover > .s2d-list-play-control .s2d-list-play-core,
html.s2d-list-play-icon-v4 .ml-mask:focus-visible > .s2d-list-play-control .s2d-list-play-core {
  -webkit-backdrop-filter:blur(3.5px) saturate(170%) contrast(1.10) !important;
  backdrop-filter:blur(3.5px) saturate(170%) contrast(1.10) !important;
  border-color:rgba(228,255,253,.78) !important;
}
html.s2d-list-play-icon-v4 .ml-mask:hover > .s2d-list-play-control .s2d-list-play-lens,
html.s2d-list-play-icon-v4 .ml-mask:focus-visible > .s2d-list-play-control .s2d-list-play-lens {
  transform:scale(1.16);
  filter:saturate(1.27) contrast(1.10) brightness(1.045) blur(.25px);
  transition:transform .42s cubic-bezier(.16,1,.3,1), filter .30s ease;
}

@media (max-width:639px) {
  html.s2d-list-play-preview .s2d-list-play-core svg {
    width:34px !important;
    height:34px !important;
    flex-basis:34px;
  }
}

/* ------------------------------------------------------------------------
   Splash play lab: stop fighting the theme's YouTube pseudo-element.
   In preview mode it is removed completely and replaced by a real DOM control.
   This applies to actual clickable movie/episode/legacy-TV .mvi-cover splashes.
   ------------------------------------------------------------------------ */
html.s2d-player-play-preview #mv-info .mvi-cover.splash-image::before {
  content:none !important;
  display:none !important;
  background:none !important;
}
html.s2d-player-play-preview #mv-info .mvi-cover.splash-image {
  position:relative !important;
}
html.s2d-player-play-preview .s2d-player-play-control {
  position:absolute;
  left:50%;
  top:50%;
  width:92px;
  height:92px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%) scale(.94);
  transform-origin:center;
  pointer-events:none;
  border-radius:50%;
  opacity:.98;
  transition:transform .40s cubic-bezier(.16,1,.3,1), opacity .24s ease;
  isolation:isolate;
}
html.s2d-player-play-preview .s2d-player-play-disc {
  position:absolute;
  inset:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  transition:transform .36s cubic-bezier(.16,1,.3,1), background-position .42s cubic-bezier(.2,.8,.2,1), box-shadow .30s ease;
}
html.s2d-player-play-preview .s2d-player-play-disc svg {
  width:42px;
  height:42px;
  display:block;
  transform:translateX(2px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
html.s2d-player-play-preview #mv-info .mvi-cover.splash-image:hover > .s2d-player-play-control {
  transform:translate(-50%,-50%) scale(1.065);
}

/* Player variant 1 — minimal dark Cineby ring. */
html.s2d-player-play-v1 .s2d-player-play-disc {
  background:rgba(7,18,21,.72);
  border:1.5px solid rgba(108,221,215,.88);
  -webkit-backdrop-filter:blur(6px) saturate(130%);
  backdrop-filter:blur(6px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.34), 0 0 18px rgba(108,221,215,.12);
}
html.s2d-player-play-v1 #mv-info .mvi-cover.splash-image:hover .s2d-player-play-disc {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.34), 0 0 28px rgba(108,221,215,.30);
}

/* Player variant 2 — moving teal gradient, related to homepage CTA language. */
html.s2d-player-play-v2 .s2d-player-play-disc {
  color:#0a2528;
  background:linear-gradient(110deg,#60cbc7 0%,#60cbc7 24%,#83e3dd 48%,#48b9c5 72%,#55c4c7 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  border:1px solid rgba(220,255,252,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 11px 30px rgba(0,0,0,.30), 0 0 18px rgba(108,221,215,.16);
}
html.s2d-player-play-v2 #mv-info .mvi-cover.splash-image:hover .s2d-player-play-disc {
  background-position:100% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 11px 30px rgba(0,0,0,.30), 0 0 30px rgba(108,221,215,.32);
}

/* Player variant 3 — thin premium glass/double ring. */
html.s2d-player-play-v3 .s2d-player-play-disc {
  color:rgba(224,255,252,.98);
  background:rgba(6,16,19,.28);
  border:1px solid rgba(238,255,254,.66);
  -webkit-backdrop-filter:blur(10px) saturate(155%);
  backdrop-filter:blur(10px) saturate(155%);
  box-shadow:inset 0 0 0 5px rgba(108,221,215,.11), inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px rgba(0,0,0,.30);
}
html.s2d-player-play-v3 .s2d-player-play-control::before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:50%;
  border:1px solid rgba(108,221,215,.34);
  opacity:.75;
}
html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image:hover .s2d-player-play-disc {
  box-shadow:inset 0 0 0 5px rgba(108,221,215,.15), inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px rgba(0,0,0,.32), 0 0 28px rgba(108,221,215,.25);
}

@media (max-width:639px) {
  html.s2d-player-play-preview .s2d-player-play-control {
    width:74px;
    height:74px;
  }
  html.s2d-player-play-preview .s2d-player-play-disc { inset:6px; }
  html.s2d-player-play-preview .s2d-player-play-disc svg { width:34px; height:34px; }
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-list-play-icon-v4 .s2d-list-play-lens,
  html.s2d-player-play-preview .s2d-player-play-control,
  html.s2d-player-play-preview .s2d-player-play-disc {
    transition:none !important;
    animation:none !important;
  }
}


/* v14.1: show the same player-control treatment on the current TV-series
   #content-cover for visual comparison. It remains non-interactive. */
html.s2d-player-play-preview #mv-info #content-cover {
  position:relative !important;
}
html.s2d-player-play-preview #mv-info #content-cover:hover > .s2d-player-play-control {
  transform:translate(-50%,-50%) scale(1.065);
}
html.s2d-player-play-v1 #mv-info #content-cover:hover .s2d-player-play-disc {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.34), 0 0 28px rgba(108,221,215,.30);
}
html.s2d-player-play-v2 #mv-info #content-cover:hover .s2d-player-play-disc {
  background-position:100% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 11px 30px rgba(0,0,0,.30), 0 0 30px rgba(108,221,215,.32);
}
html.s2d-player-play-v3 #mv-info #content-cover:hover .s2d-player-play-disc {
  box-shadow:inset 0 0 0 5px rgba(108,221,215,.15), inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px rgba(0,0,0,.32), 0 0 28px rgba(108,221,215,.25);
}


/* ========================================================================
   Visual Media Lab v15 — glass glyph relief + player pulse refinement
   ======================================================================== */

/* Safety: the theme's legacy splash-play pseudo glyph must never coexist with
   the DOM-based test control. We intentionally preserve ::after because that
   is the theme's dark image veil, not the play icon. */
html.s2d-player-play-preview #mv-info .mvi-cover.splash-image::before {
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:none !important;
  background-image:none !important;
}

/* Listing glass v4: make only the PLAY glyph larger. The glass/lens diameter
   stays exactly the same, so the control remains balanced on small posters. */
html.s2d-list-play-icon-v4 .s2d-list-play-core svg {
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  transform:translateX(1.8px) !important;
  overflow:visible;
}
html.s2d-list-play-icon-v4 .s2d-list-play-glyph {
  transform-box:fill-box;
  transform-origin:center;
}

/* Relief 1 — raised/convex PLAY only. The glass disc and refracted poster are
   untouched; highlights/shadows are applied exclusively to the SVG glyph. */
html.s2d-list-play-icon-v4.s2d-list-play-relief-v1 .s2d-list-play-glyph {
  fill:rgba(241,250,249,.96) !important;
  stroke:rgba(8,42,45,.34) !important;
  stroke-width:1.05 !important;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
  filter:
    drop-shadow(-.48px -.48px .08px rgba(255,255,255,.88))
    drop-shadow(.72px .82px .48px rgba(0,8,10,.88))
    drop-shadow(0 0 1.2px rgba(102,226,220,.14));
}

/* Relief 2 — pressed/concave PLAY only. Reverse bevel direction and reduce the
   face brightness so the triangle reads as engraved into the glass. */
html.s2d-list-play-icon-v4.s2d-list-play-relief-v2 .s2d-list-play-glyph {
  fill:rgba(213,239,237,.82) !important;
  filter:
    drop-shadow(-1.35px -1.35px .35px rgba(0,8,11,.92))
    drop-shadow(1.35px 1.35px .20px rgba(255,255,255,.68))
    drop-shadow(0 0 2px rgba(98,213,208,.12));
}
html.s2d-list-play-icon-v4.s2d-list-play-relief-v2 .s2d-list-play-core svg {
  opacity:.91;
}

/* Player v3: +25% overall control size (92 -> 115px). */
html.s2d-player-play-v3 .s2d-player-play-control {
  width:115px !important;
  height:115px !important;
}
html.s2d-player-play-v3 .s2d-player-play-disc {
  inset:10px !important;
  z-index:3;
}
html.s2d-player-play-v3 .s2d-player-play-disc svg {
  width:52px !important;
  height:52px !important;
  /* The triangle path's centroid sits ~0.67 viewBox units to the right of
     the geometric center. Compensate by ~0.55px at this rendered size so
     the visible PLAY mass is centered on the disc, not merely its SVG box. */
  transform:translateX(-.55px) !important;
}

/* Continuous dual circular light waves. At rest they are deliberately quiet;
   hover swaps to a faster, larger wave rather than merely increasing glow. */
html.s2d-player-play-v3 .s2d-player-play-control::before,
html.s2d-player-play-v3 .s2d-player-play-control::after {
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  z-index:1 !important;
  border-radius:50% !important;
  border:1.5px solid rgba(111,226,220,.58) !important;
  background:transparent !important;
  box-shadow:0 0 12px rgba(99,219,214,.08) !important;
  opacity:0;
  transform:scale(.96);
  transform-origin:center center;
  pointer-events:none;
  will-change:transform,opacity,filter;
  animation:s2d-player-v3-wave-idle 2.8s cubic-bezier(.16,.68,.2,1) infinite !important;
}
html.s2d-player-play-v3 .s2d-player-play-control::after {
  border-color:rgba(235,255,253,.34) !important;
  animation-delay:1.4s !important;
}

html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image:hover > .s2d-player-play-control::before,
html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image:hover > .s2d-player-play-control::after,
html.s2d-player-play-v3 #mv-info #content-cover:hover > .s2d-player-play-control::before,
html.s2d-player-play-v3 #mv-info #content-cover:hover > .s2d-player-play-control::after {
  border-width:1.7px !important;
  border-color:rgba(112,236,229,.78) !important;
  animation:s2d-player-v3-wave-active 1.24s cubic-bezier(.12,.74,.18,1) infinite !important;
}
html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image:hover > .s2d-player-play-control::after,
html.s2d-player-play-v3 #mv-info #content-cover:hover > .s2d-player-play-control::after {
  border-color:rgba(242,255,254,.52) !important;
  animation-delay:.62s !important;
}

@keyframes s2d-player-v3-wave-idle {
  0%   { opacity:0; transform:scale(.94); filter:blur(0); }
  14%  { opacity:.30; }
  62%  { opacity:.13; }
  100% { opacity:0; transform:scale(1.74); filter:blur(.35px); }
}
@keyframes s2d-player-v3-wave-active {
  0%   { opacity:0; transform:scale(.92); filter:blur(0); }
  10%  { opacity:.72; }
  50%  { opacity:.28; }
  100% { opacity:0; transform:scale(2.26); filter:blur(.55px); }
}

/* Keep the disc itself subtle while the waves do the motion. */
html.s2d-player-play-v3 .s2d-player-play-disc {
  animation:s2d-player-v3-disc-breathe 2.8s ease-in-out infinite;
}
html.s2d-player-play-v3 #mv-info .mvi-cover.splash-image:hover .s2d-player-play-disc,
html.s2d-player-play-v3 #mv-info #content-cover:hover .s2d-player-play-disc {
  animation:s2d-player-v3-disc-breathe-active 1.24s ease-in-out infinite;
}
@keyframes s2d-player-v3-disc-breathe {
  0%,100% { box-shadow:inset 0 0 0 5px rgba(108,221,215,.10), inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px rgba(0,0,0,.30), 0 0 12px rgba(108,221,215,.08); }
  50%     { box-shadow:inset 0 0 0 5px rgba(108,221,215,.14), inset 0 1px 0 rgba(255,255,255,.24), 0 10px 30px rgba(0,0,0,.30), 0 0 22px rgba(108,221,215,.19); }
}
@keyframes s2d-player-v3-disc-breathe-active {
  0%,100% { box-shadow:inset 0 0 0 5px rgba(108,221,215,.13), inset 0 1px 0 rgba(255,255,255,.24), 0 10px 30px rgba(0,0,0,.32), 0 0 20px rgba(108,221,215,.18); }
  50%     { box-shadow:inset 0 0 0 5px rgba(108,221,215,.20), inset 0 1px 0 rgba(255,255,255,.28), 0 10px 31px rgba(0,0,0,.32), 0 0 34px rgba(108,221,215,.34); }
}

@media (max-width:639px) {
  html.s2d-list-play-icon-v4 .s2d-list-play-core svg {
    width:29px !important;
    height:29px !important;
    flex-basis:29px !important;
    transform:translateX(1.55px) !important;
  }
  html.s2d-player-play-v3 .s2d-player-play-control {
    width:93px !important;
    height:93px !important;
  }
  html.s2d-player-play-v3 .s2d-player-play-disc {
    inset:7px !important;
  }
  html.s2d-player-play-v3 .s2d-player-play-disc svg {
    width:43px !important;
    height:43px !important;
    transform:translateX(-.45px) !important;
  }
  html.s2d-player-play-v3 .s2d-player-play-control::before,
  html.s2d-player-play-v3 .s2d-player-play-control::after {
    inset:7px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-player-play-v3 .s2d-player-play-control::before,
  html.s2d-player-play-v3 .s2d-player-play-control::after,
  html.s2d-player-play-v3 .s2d-player-play-disc {
    animation:none !important;
  }
}

/* ========================================================================
   v17 — mobile app header logo hardening
   ======================================================================== */
@media screen and (max-width: 991px), screen and (hover: none) and (pointer: coarse) {
  html.s2d-mobile-app.s2d-raster-logo-on header .header-logo,
  html.s2d-native-app.s2d-raster-logo-on header .header-logo,
  html.s2d-pwa-standalone.s2d-raster-logo-on header .header-logo {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
  }

  html.s2d-mobile-app.s2d-raster-logo-on header .header-logo #logo,
  html.s2d-native-app.s2d-raster-logo-on header .header-logo #logo,
  html.s2d-pwa-standalone.s2d-raster-logo-on header .header-logo #logo {
    display: block !important;
    flex: 0 0 143px !important;
    width: 143px !important;
    min-width: 143px !important;
    max-width: 143px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    overflow: visible !important;
    clip-path: none !important;
    box-sizing: content-box !important;
    background-size: contain !important;
    background-position: center center !important;
  }

  html.s2d-mobile-app.s2d-raster-logo-on header .header-logo #logo::after,
  html.s2d-native-app.s2d-raster-logo-on header .header-logo #logo::after,
  html.s2d-pwa-standalone.s2d-raster-logo-on header .header-logo #logo::after {
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
  }
}

@media screen and (max-width: 340px) {
  html.s2d-mobile-app.s2d-raster-logo-on header .header-logo #logo,
  html.s2d-native-app.s2d-raster-logo-on header .header-logo #logo,
  html.s2d-pwa-standalone.s2d-raster-logo-on header .header-logo #logo {
    flex-basis: 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
}

/* ========================================================================
   v18 — production detail-media + APK layout bugfix
   ======================================================================== */

/* Detail posters: one geometry on movie / TV / episode pages everywhere.
   168x252 is the approved +20% size over Cineby's 140x210 original and keeps
   the real 2:3 poster ratio instead of inheriting competing mobile rules. */
html.s2d-media-hq-preview .page-detail #mv-info .mvi-content .mvic-thumb {
  width:168px !important;
  height:252px !important;
  min-width:168px !important;
  max-width:168px !important;
  min-height:252px !important;
  max-height:252px !important;
  aspect-ratio:2 / 3 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
html.s2d-media-hq-preview .page-detail #mv-info .mvi-content .mvic-thumb img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  aspect-ratio:2 / 3 !important;
  object-fit:cover !important;
  object-position:center center !important;
  image-rendering:auto !important;
}

@media (min-width:800px) {
  html.s2d-media-hq-preview .page-detail #mv-info .mvi-content .mvic-thumb {
    display:block !important;
    float:left !important;
    margin:0 20px 0 0 !important;
  }
}
@media (max-width:799px) {
  html.s2d-media-hq-preview .page-detail #mv-info .mvi-content .mvic-thumb {
    display:block !important;
    float:none !important;
    margin:0 auto 18px !important;
    text-align:center !important;
  }
}

/* The TV-series hero (#content-cover) is artwork only. A play affordance there
   is semantically wrong because no player sits under it. JS also removes any
   stale control left by a cached v14-v17 document; this is a CSS fail-safe. */
html.s2d-detail-series #mv-info #content-cover > .s2d-player-play-control,
html.s2d-detail-series #mv-info #content-cover > .s2d-player-play-series-static {
  display:none !important;
  content:none !important;
}

/* APK-only first-paint header correction. The new .s2d-display-apk marker is
   created independently of the PWA plugin, so this finally beats Cineby's
   legacy margin-top/relative logo rules inside the Android WebView. */
@media screen and (max-width:991px), screen and (hover:none) and (pointer:coarse) {
  html.s2d-display-apk.s2d-raster-logo-on header .header-logo,
  html.s2d-display-apk.s2d-raster-logo-on.s2d-page-inner header .header-logo {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    overflow:visible !important;
    clip-path:none !important;
    line-height:0 !important;
    pointer-events:none !important;
    z-index:4 !important;
  }
  html.s2d-display-apk.s2d-raster-logo-on header .header-logo #logo,
  html.s2d-display-apk.s2d-raster-logo-on.s2d-page-inner.s2d-header-logo-ready[class*="s2d-logo-v"] header .header-logo #logo {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    inset:auto !important;
    display:block !important;
    flex:0 0 143px !important;
    width:143px !important;
    min-width:143px !important;
    max-width:143px !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    margin:-1px 0 0 !important;
    padding:0 !important;
    float:none !important;
    transform:none !important;
    background-position:center center !important;
    background-size:contain !important;
    overflow:visible !important;
    clip-path:none !important;
    line-height:0 !important;
    pointer-events:none !important;
  }

  /* Cineby mobile normally starts #main exactly 50px below the fixed header.
     APK detail pages get slightly more breathing room so the title/trailer row
     no longer visually sticks to the app header. */
  html.s2d-display-apk #main.page-detail {
    margin-top:0 !important;
    padding-top:74px !important;
  }
}

/* ========================================================================
   v19.2 — APK logo centered against the viewport, not the theme container
   ======================================================================== */
@media screen and (max-width:991px), screen and (hover:none) and (pointer:coarse) {
  /* The Cineby .container/header-logo geometry differs between APK routes.
     Detach the logo layer from that container and center it against the actual
     WebView viewport. Menu/search remain above it at z-index:10000. */
  html.s2d-display-apk.s2d-raster-logo-on body > header .header-logo,
  html.s2d-native-app.s2d-raster-logo-on body > header .header-logo {
    position:fixed !important;
    inset:0 0 auto 0 !important;
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    display:grid !important;
    place-items:center !important;
    transform:none !important;
    overflow:visible !important;
    clip-path:none !important;
    contain:none !important;
    line-height:0 !important;
    pointer-events:none !important;
    z-index:9999 !important;
  }

  html.s2d-display-apk.s2d-raster-logo-on body > header .header-logo #logo,
  html.s2d-native-app.s2d-raster-logo-on body > header .header-logo #logo,
  html.s2d-display-apk.s2d-raster-logo-on.s2d-page-inner.s2d-header-logo-ready[class*="s2d-logo-v"] body > header .header-logo #logo,
  html.s2d-native-app.s2d-raster-logo-on.s2d-page-inner.s2d-header-logo-ready[class*="s2d-logo-v"] body > header .header-logo #logo {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:143px !important;
    min-width:143px !important;
    max-width:143px !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    margin:-1px 0 0 !important;
    padding:0 !important;
    float:none !important;
    transform:none !important;
    background-position:center center !important;
    background-size:contain !important;
    overflow:visible !important;
    clip-path:none !important;
    box-sizing:content-box !important;
    line-height:0 !important;
    pointer-events:none !important;
  }
}

/* Cineby leaves the old poster URL on .mvic-thumb as an inline background.
   Once the child image is rounded that old background becomes visible through
   the anti-aliased corner pixels. Remove the duplicate bitmap from the wrapper
   and clip the one real poster to the rounded box. */
html.s2d-media-hq-preview .page-detail #mv-info .mvi-content .mvic-thumb {
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  border-radius:12px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  -webkit-clip-path:inset(0 round 12px) !important;
  clip-path:inset(0 round 12px) !important;
}
html.s2d-media-hq-preview .page-detail #mv-info .mvi-content .mvic-thumb img {
  border:0 !important;
  border-radius:12px !important;
  -webkit-clip-path:inset(0 round 12px) !important;
  clip-path:inset(0 round 12px) !important;
  backface-visibility:hidden !important;
  transform:translateZ(0) !important;
}

/* ========================================================================
   v19.3 — stable Featured loading
   ======================================================================== */
/* Cineby's popular block still used legacy floats. During staggered lazy/HQ
   image state changes, later floats could climb into temporary gaps and then
   snap back. Flex keeps the same percentage widths/margins and document order
   while making row placement deterministic at every breakpoint. */
html.s2d-featured-production .cineby-api-popular-grid {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  align-content:flex-start !important;
}
html.s2d-featured-production .cineby-api-popular-grid > .ml-item {
  float:none !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}
html.s2d-featured-production .cineby-api-popular-grid > .clearfix {
  display:none !important;
}
/* All card skeletons in Featured are released in one frame. Prevent per-card
   transition timing from producing a visible patchwork during the handoff. */
html.s2d-featured-production .cineby-api-popular-grid.s2d-featured-skeleton-loading > .ml-item > .s2d-skeleton-layer {
  transition:none !important;
}
html.s2d-featured-production .cineby-api-popular-grid.s2d-featured-skeleton-ready > .ml-item > .s2d-skeleton-layer {
  transition:opacity .32s ease !important;
  opacity:0 !important;
}

/* ========================================================================
   v19.5 — CSS-first skeleton for server-sized selection artwork
   ======================================================================== */
/* The final selection image URL is already present in HTML. Hide its pixels
   from first paint by collapsing only background-size, while keeping the URL
   available for the browser/preloader. This prevents any image->skeleton flash. */
html.s2d-skeleton-v1 .selections-list .selection-block-background:not(.s2d-selection-media-ready) {
  background-size:0 0 !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#e1e7ea !important;
  overflow:hidden !important;
}
html.night-mode.s2d-skeleton-v1 .selections-list .selection-block-background:not(.s2d-selection-media-ready),
html.s2d-skeleton-v1 body.night-mode .selections-list .selection-block-background:not(.s2d-selection-media-ready) {
  background-color:#171d20 !important;
}
html.s2d-skeleton-v1 .selections-list .selection-block-background::after {
  content:"";
  position:absolute;
  inset:-28%;
  z-index:2;
  pointer-events:none;
  opacity:1;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent 31%,rgba(255,255,255,.18) 43%,rgba(255,255,255,.78) 50%,rgba(255,255,255,.18) 57%,transparent 69%);
  transform:translateX(-72%) rotate(8deg);
  animation:s2d-skeleton-sweep 1.25s ease-in-out infinite;
  transition:opacity .30s ease;
  will-change:transform,opacity;
}
html.night-mode.s2d-skeleton-v1 .selections-list .selection-block-background::after,
html.s2d-skeleton-v1 body.night-mode .selections-list .selection-block-background::after {
  background:linear-gradient(90deg,transparent 34%,rgba(255,255,255,.08) 47%,rgba(255,255,255,.035) 54%,transparent 68%);
}
html.s2d-skeleton-v1 .selections-list .selection-block-background.s2d-selection-media-ready {
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:transparent !important;
}
html.s2d-skeleton-v1 .selections-list .selection-block-background.s2d-selection-media-ready::after {
  opacity:0;
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce) {
  html.s2d-skeleton-v1 .selections-list .selection-block-background::after {
    animation:none !important;
  }
}


/* ========================================================================
   v19.8 — first-paint listing skeleton + no runtime poster swaps
   ======================================================================== */
/* Server-rendered listing posters already contain their final TMDB w342 URL.
   Keep the replaced element fully invisible until its real bitmap has loaded,
   so Firefox/WebView can never paint the native broken-image glyph or alt text. */
html.s2d-skeleton-v1 .ml-item img.mli-thumb[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready),
html.s2d-skeleton-v1 .ml-item img.thumb[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready) {
  opacity:0 !important;
  color:transparent !important;
  text-indent:-9999px !important;
}
html.s2d-skeleton-v1 .ml-item img.mli-thumb[data-s2d-listing-final="1"].s2d-listing-image-ready,
html.s2d-skeleton-v1 .ml-item img.thumb[data-s2d-listing-final="1"].s2d-listing-image-ready {
  opacity:1 !important;
  transition:opacity .28s ease !important;
}

/* CSS-first placeholder exists before front.js decorates the card. The later
   DOM skeleton layer simply takes over visually; no low-res/broken phase is
   exposed between HTML parse and JS initialization. */
html.s2d-skeleton-v1 .ml-item .ml-mask:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) {
  background-image:linear-gradient(105deg,#e1e7ea 0%,#edf2f4 38%,#f8fafb 49%,#e8eef1 60%,#dce3e6 100%) !important;
  background-size:220% 100% !important;
  background-position:100% 50% !important;
  animation:s2d-listing-firstpaint-shimmer 1.25s ease-in-out infinite !important;
}
html.night-mode.s2d-skeleton-v1 .ml-item .ml-mask:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)),
html.s2d-skeleton-v1 body.night-mode .ml-item .ml-mask:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) {
  background-image:linear-gradient(105deg,#171d20 0%,#222a2e 39%,#2b3438 49%,#20272b 60%,#171d20 100%) !important;
}
html.s2d-skeleton-v1 .ml-item .ml-mask:has(img[data-s2d-listing-final="1"].s2d-listing-image-ready) {
  background-image:none !important;
  animation:none !important;
}

/* Do not let title/rating/play overlays float over the tiny first-paint gap
   before the regular skeleton layer is mounted. */
html.s2d-skeleton-v1 .ml-item:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) .mli-info,
html.s2d-skeleton-v1 .ml-item:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) .mli-add,
html.s2d-skeleton-v1 .ml-item:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) .mli-quality,
html.s2d-skeleton-v1 .ml-item:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) .s2d-list-play-control {
  opacity:0 !important;
}

@keyframes s2d-listing-firstpaint-shimmer {
  0%   { background-position:100% 50%; }
  100% { background-position:-120% 50%; }
}
@media (prefers-reduced-motion:reduce) {
  html.s2d-skeleton-v1 .ml-item .ml-mask:has(img[data-s2d-listing-final="1"]:not(.s2d-listing-image-ready)) {
    animation:none !important;
  }
}

/* S2D listing image first-paint guard 20260824
   Never expose a broken-image glyph while lazyload/local fallback is resolving. */
.ml-item img.mli-thumb:not(.s2d-listing-image-ready),
.ml-item img.thumb:not(.s2d-listing-image-ready),
.cineby-api-popular-grid img.mli-thumb:not(.s2d-listing-image-ready),
.cineby-api-popular-grid img.thumb:not(.s2d-listing-image-ready) {
    visibility: hidden !important;
    opacity: 0 !important;
}

.ml-item img.mli-thumb.s2d-listing-image-ready,
.ml-item img.thumb.s2d-listing-image-ready,
.cineby-api-popular-grid img.mli-thumb.s2d-listing-image-ready,
.cineby-api-popular-grid img.thumb.s2d-listing-image-ready {
    visibility: visible !important;
    opacity: 1 !important;
}



/* ========================================================================
   Player No-Backdrop Visual Lab v20.1 (preview-only)
   URL: ?s2d_player_fallback=1..5

   Clean URLs retain the existing production fallback untouched. The dedicated
   s2d_player_fallback parameter activates this isolated QA lab even when the
   plugin-wide URL-preview switch is disabled. JS still marks a surface as
   .s2d-player-fallback-target only after confirming a missing/default backdrop.
   ======================================================================== */

@property --s2d-fb-shift {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

html.s2d-player-fallback-preview {
  --s2d-fb-accent:rgb(80 207 201);
  --s2d-fb-accent-soft:rgb(124 226 220 / .24);
  --s2d-fb-cyan:rgb(92 219 215 / .30);
  --s2d-fb-blue:rgb(102 143 215 / .20);
  --s2d-fb-violet:rgb(153 139 211 / .16);
  --s2d-fb-base:#e7ebf4;
  --s2d-fb-base-2:#dfe5ef;
  --s2d-fb-ink:rgb(28 43 52 / .22);
  --s2d-fb-edge:rgb(49 78 91 / .18);
  --s2d-fb-white:rgb(255 255 255 / .74);
  --s2d-fb-poster:none;
}
html.night-mode.s2d-player-fallback-preview,
html.s2d-player-fallback-preview body.night-mode {
  --s2d-fb-accent:rgb(91 221 215);
  --s2d-fb-accent-soft:rgb(91 221 215 / .18);
  --s2d-fb-cyan:rgb(86 218 213 / .24);
  --s2d-fb-blue:rgb(48 94 126 / .24);
  --s2d-fb-violet:rgb(83 67 121 / .18);
  --s2d-fb-base:#0b0f11;
  --s2d-fb-base-2:#111719;
  --s2d-fb-ink:rgb(0 0 0 / .58);
  --s2d-fb-edge:rgb(0 0 0 / .76);
  --s2d-fb-white:rgb(235 255 253 / .34);
}

/* Immediate first-paint reset for the explicit template markers, plus the JS
   target class used for configured default-backdrop URLs. */
html.s2d-player-fallback-preview #mv-info :is(
  .mvi-cover.splash-no-bg,
  .mvi-cover.splash-image[style*="default_backdrop"],
  #content-cover[style*="default_backdrop"],
  .s2d-player-fallback-target
) {
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  background-image:none !important;
  background-color:var(--s2d-fb-base) !important;
  background-repeat:no-repeat !important;
  animation:none !important;
  box-shadow:none !important;
  contain:paint;
}

html.s2d-player-fallback-preview #mv-info :is(
  .mvi-cover.splash-no-bg,
  .mvi-cover.splash-image[style*="default_backdrop"],
  #content-cover[style*="default_backdrop"],
  .s2d-player-fallback-target
)::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  z-index:4 !important;
  pointer-events:none !important;
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  animation:none !important;
  transition:opacity .45s ease, box-shadow .45s ease, background .45s ease !important;
}

html.s2d-player-fallback-preview .s2d-player-fallback-art,
html.s2d-player-fallback-preview .s2d-player-fallback-fx {
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  user-select:none;
  border-radius:inherit;
}
html.s2d-player-fallback-preview .s2d-player-fallback-art { z-index:1; }
html.s2d-player-fallback-preview .s2d-player-fallback-fx { z-index:2; }
html.s2d-player-fallback-preview .s2d-player-fallback-art::before,
html.s2d-player-fallback-preview .s2d-player-fallback-art::after,
html.s2d-player-fallback-preview .s2d-player-fallback-fx::before,
html.s2d-player-fallback-preview .s2d-player-fallback-fx::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
html.s2d-player-fallback-preview .s2d-player-play-control { z-index:8 !important; }

/* ------------------------------------------------------------------------
   1 — Aurora Glass
   ------------------------------------------------------------------------ */
html.s2d-player-fallback-v1 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) {
  background-color:#e5eaf3 !important;
}
html.s2d-player-fallback-v1 .s2d-player-fallback-art {
  background:
    radial-gradient(ellipse 34% 42% at 50% 51%, rgb(102 223 216 / .34) 0%, rgb(102 223 216 / .12) 42%, transparent 72%),
    radial-gradient(ellipse 48% 58% at 11% 14%, rgb(105 139 216 / .24) 0%, transparent 70%),
    radial-gradient(ellipse 45% 52% at 91% 77%, rgb(162 141 214 / .19) 0%, transparent 72%),
    linear-gradient(145deg,#eef2f8 0%,#e0e6f0 46%,#dce3ee 100%);
}
html.s2d-player-fallback-v1 .s2d-player-fallback-art::before {
  inset:-25%;
  background:conic-gradient(from var(--s2d-fb-shift) at 50% 50%,
    transparent 0 18%, rgb(81 213 207 / .16) 26%, transparent 38% 60%, rgb(117 144 219 / .12) 72%, transparent 84% 100%);
  filter:blur(54px);
  opacity:.72;
  transform:scale(1.05);
  animation:s2d-fb-aurora-drift 22s ease-in-out infinite alternate;
}
html.s2d-player-fallback-v1 .s2d-player-fallback-art::after {
  inset:0;
  background:
    linear-gradient(112deg,transparent 16%,rgb(255 255 255 / .36) 39%,rgb(255 255 255 / .07) 51%,transparent 68%),
    radial-gradient(ellipse 60% 55% at 50% 50%,transparent 48%,rgb(45 67 85 / .08) 100%);
  mix-blend-mode:soft-light;
  opacity:.72;
}
html.s2d-player-fallback-v1 .s2d-player-fallback-fx::before {
  width:44%;
  aspect-ratio:1;
  left:28%;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgb(203 255 251 / .22) 0%,rgb(102 223 216 / .12) 28%,transparent 70%);
  filter:blur(16px);
}
html.s2d-player-fallback-v1 .s2d-player-fallback-fx::after {
  inset:1px;
  border:1px solid rgb(255 255 255 / .26);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .34), inset 0 -40px 90px rgb(77 101 126 / .08);
}
html.s2d-player-fallback-v1 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 45%,rgb(52 68 84 / .12) 82%,rgb(43 57 71 / .20) 100%) !important;
}
html.night-mode.s2d-player-fallback-v1 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]),
html.s2d-player-fallback-v1 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) {
  background-color:#090d0f !important;
}
html.night-mode.s2d-player-fallback-v1 .s2d-player-fallback-art,
html.s2d-player-fallback-v1 body.night-mode .s2d-player-fallback-art {
  background:
    radial-gradient(ellipse 34% 42% at 50% 51%,rgb(80 218 212 / .24) 0%,rgb(80 218 212 / .08) 44%,transparent 73%),
    radial-gradient(ellipse 48% 58% at 10% 14%,rgb(44 88 121 / .31) 0%,transparent 70%),
    radial-gradient(ellipse 45% 52% at 91% 77%,rgb(77 57 112 / .24) 0%,transparent 72%),
    linear-gradient(145deg,#080b0d 0%,#0e1416 47%,#0a0f11 100%);
}
html.night-mode.s2d-player-fallback-v1 .s2d-player-fallback-art::after,
html.s2d-player-fallback-v1 body.night-mode .s2d-player-fallback-art::after {
  background:
    linear-gradient(112deg,transparent 16%,rgb(226 255 252 / .08) 39%,rgb(226 255 252 / .02) 51%,transparent 68%),
    radial-gradient(ellipse 62% 58% at 50% 50%,transparent 42%,rgb(0 0 0 / .40) 82%,rgb(0 0 0 / .72) 100%);
  opacity:.88;
}
html.night-mode.s2d-player-fallback-v1 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after,
html.s2d-player-fallback-v1 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 68% 68% at 50% 50%,transparent 38%,rgb(0 0 0 / .34) 78%,rgb(0 0 0 / .66) 100%) !important;
}

/* ------------------------------------------------------------------------
   2 — Cinematic Spotlight
   ------------------------------------------------------------------------ */
html.s2d-player-fallback-v2 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) {
  background-color:#dfe4ed !important;
}
html.s2d-player-fallback-v2 .s2d-player-fallback-art {
  background:
    radial-gradient(ellipse 46% 43% at 50% 49%,rgb(255 255 255 / .76) 0%,rgb(244 248 252 / .45) 38%,rgb(220 227 237 / .17) 66%,transparent 78%),
    linear-gradient(180deg,#e7ebf2 0%,#dfe4ec 54%,#d8dee8 100%);
}
html.s2d-player-fallback-v2 .s2d-player-fallback-art::before {
  inset:-6%;
  background:radial-gradient(ellipse 52% 48% at 50% 48%,rgb(115 221 216 / .13),transparent 70%);
  filter:blur(24px);
  transition:transform .65s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
html.s2d-player-fallback-v2 .s2d-player-fallback-art::after {
  inset:0;
  background:
    repeating-radial-gradient(circle at 20% 30%,rgb(20 35 45 / .030) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgb(255 255 255 / .10),transparent 20% 80%,rgb(65 82 98 / .05));
  opacity:.44;
  mix-blend-mode:multiply;
}
html.s2d-player-fallback-v2 .s2d-player-fallback-fx::before {
  left:8%;
  right:8%;
  top:10%;
  height:42%;
  background:linear-gradient(180deg,rgb(255 255 255 / .20),transparent);
  clip-path:polygon(16% 0,84% 0,69% 100%,31% 100%);
  filter:blur(22px);
  opacity:.46;
}
html.s2d-player-fallback-v2 .s2d-player-fallback-fx::after {
  inset:0;
  box-shadow:inset 0 0 120px rgb(54 70 86 / .20), inset 0 0 26px rgb(255 255 255 / .22);
}
html.s2d-player-fallback-v2 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 68% 66% at 50% 50%,transparent 45%,rgb(43 57 71 / .15) 82%,rgb(35 46 57 / .24) 100%) !important;
}
html.s2d-player-fallback-v2 #mv-info .s2d-player-fallback-target:hover .s2d-player-fallback-art::before {
  transform:scale(1.07);
  opacity:.92;
}
html.night-mode.s2d-player-fallback-v2 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]),
html.s2d-player-fallback-v2 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#090b0c !important; }
html.night-mode.s2d-player-fallback-v2 .s2d-player-fallback-art,
html.s2d-player-fallback-v2 body.night-mode .s2d-player-fallback-art {
  background:
    radial-gradient(ellipse 46% 43% at 50% 49%,rgb(50 73 77 / .52) 0%,rgb(25 38 41 / .35) 38%,rgb(10 15 17 / .08) 69%,transparent 79%),
    linear-gradient(180deg,#0c1011 0%,#101617 55%,#090c0d 100%);
}
html.night-mode.s2d-player-fallback-v2 .s2d-player-fallback-art::after,
html.s2d-player-fallback-v2 body.night-mode .s2d-player-fallback-art::after {
  background:
    repeating-radial-gradient(circle at 20% 30%,rgb(235 255 253 / .025) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgb(255 255 255 / .018),transparent 22% 78%,rgb(0 0 0 / .12));
  mix-blend-mode:screen;
  opacity:.34;
}
html.night-mode.s2d-player-fallback-v2 .s2d-player-fallback-fx::after,
html.s2d-player-fallback-v2 body.night-mode .s2d-player-fallback-fx::after {
  box-shadow:inset 0 0 155px rgb(0 0 0 / .72), inset 0 0 26px rgb(119 230 224 / .05);
}
html.night-mode.s2d-player-fallback-v2 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after,
html.s2d-player-fallback-v2 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 66% 64% at 50% 50%,transparent 40%,rgb(0 0 0 / .43) 80%,rgb(0 0 0 / .72) 100%) !important;
}

/* ------------------------------------------------------------------------
   3 — Liquid Halo
   ------------------------------------------------------------------------ */
html.s2d-player-fallback-v3 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#e4e9f2 !important; }
html.s2d-player-fallback-v3 .s2d-player-fallback-art {
  background:
    radial-gradient(circle at 50% 50%,rgb(255 255 255 / .44) 0 13%,rgb(102 221 215 / .12) 29%,transparent 52%),
    linear-gradient(145deg,#edf1f7 0%,#dfe5ee 50%,#e4e9f1 100%);
}
html.s2d-player-fallback-v3 .s2d-player-fallback-fx::before {
  width:min(54vw,660px);
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 16%,rgb(83 206 201 / .13) 16.2% 16.7%,transparent 17% 26%,rgb(95 160 195 / .10) 26.15% 26.55%,transparent 26.8% 37%,rgb(77 203 198 / .08) 37.2% 37.7%,transparent 38% 49%,rgb(118 136 187 / .06) 49.1% 49.45%,transparent 49.8% 100%);
  filter:drop-shadow(0 12px 30px rgb(75 106 121 / .10));
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
html.s2d-player-fallback-v3 .s2d-player-fallback-fx::after {
  width:min(38vw,470px);
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,transparent 0 31%,rgb(255 255 255 / .34) 31.2% 31.55%,rgb(97 219 214 / .15) 31.8% 32.1%,transparent 32.4% 61%,rgb(82 196 192 / .08) 61.2% 61.5%,transparent 61.8%);
  filter:blur(.2px);
}
html.s2d-player-fallback-v3 .s2d-player-fallback-art::after {
  inset:0;
  background:radial-gradient(ellipse 60% 72% at 50% 50%,transparent 50%,rgb(58 76 91 / .14) 100%);
}
html.s2d-player-fallback-v3 #mv-info .s2d-player-fallback-target:hover .s2d-player-fallback-fx::before {
  transform:translate(-50%,-50%) scale(1.045);
}
html.s2d-player-fallback-v3 #mv-info .s2d-player-fallback-target:hover .s2d-player-fallback-fx::after {
  transform:translate(-50%,-50%) scale(1.025);
}
html.s2d-player-fallback-v3 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 69% 70% at 50% 50%,transparent 54%,rgb(44 59 74 / .15) 100%) !important;
}
html.night-mode.s2d-player-fallback-v3 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]),
html.s2d-player-fallback-v3 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#090e10 !important; }
html.night-mode.s2d-player-fallback-v3 .s2d-player-fallback-art,
html.s2d-player-fallback-v3 body.night-mode .s2d-player-fallback-art {
  background:
    radial-gradient(circle at 50% 50%,rgb(104 226 220 / .08) 0 13%,rgb(82 213 207 / .08) 29%,transparent 52%),
    linear-gradient(145deg,#090d0f 0%,#101719 50%,#0a0e10 100%);
}
html.night-mode.s2d-player-fallback-v3 .s2d-player-fallback-fx::before,
html.s2d-player-fallback-v3 body.night-mode .s2d-player-fallback-fx::before {
  background:
    radial-gradient(circle,transparent 0 16%,rgb(91 221 215 / .19) 16.2% 16.7%,transparent 17% 26%,rgb(78 142 169 / .13) 26.15% 26.55%,transparent 26.8% 37%,rgb(91 221 215 / .10) 37.2% 37.7%,transparent 38% 49%,rgb(81 71 116 / .09) 49.1% 49.45%,transparent 49.8% 100%);
}
html.night-mode.s2d-player-fallback-v3 .s2d-player-fallback-fx::after,
html.s2d-player-fallback-v3 body.night-mode .s2d-player-fallback-fx::after {
  background:radial-gradient(circle,transparent 0 31%,rgb(225 255 252 / .19) 31.2% 31.55%,rgb(91 221 215 / .18) 31.8% 32.1%,transparent 32.4% 61%,rgb(91 221 215 / .07) 61.2% 61.5%,transparent 61.8%);
}
html.night-mode.s2d-player-fallback-v3 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after,
html.s2d-player-fallback-v3 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 69% 70% at 50% 50%,transparent 48%,rgb(0 0 0 / .48) 100%) !important;
}

/* ------------------------------------------------------------------------
   4 — Poster Atmosphere
   ------------------------------------------------------------------------ */
html.s2d-player-fallback-v4 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#e6e9ef !important; }
html.s2d-player-fallback-v4 .s2d-player-fallback-art {
  inset:-12%;
  background-image:var(--s2d-fallback-poster,none),linear-gradient(145deg,#edf0f5,#dce2ea);
  background-size:cover,cover;
  background-position:center 32%,center;
  background-repeat:no-repeat;
  filter:blur(46px) saturate(.72) brightness(1.16) contrast(.82);
  transform:scale(1.16);
  opacity:.64;
}
html.s2d-player-fallback-v4 .s2d-player-fallback-art::before {
  inset:-4%;
  background:linear-gradient(125deg,rgb(255 255 255 / .48),rgb(239 245 249 / .24) 40%,rgb(207 222 230 / .16) 72%,rgb(255 255 255 / .36));
  mix-blend-mode:screen;
}
html.s2d-player-fallback-v4 .s2d-player-fallback-art::after {
  inset:0;
  background:radial-gradient(ellipse 50% 55% at 50% 50%,rgb(255 255 255 / .08),transparent 70%);
}
html.s2d-player-fallback-v4 .s2d-player-fallback-fx {
  background:
    radial-gradient(ellipse 38% 44% at 50% 50%,rgb(115 229 223 / .14),transparent 70%),
    linear-gradient(180deg,rgb(255 255 255 / .14),rgb(226 232 240 / .24));
  -webkit-backdrop-filter:blur(2px) saturate(112%);
  backdrop-filter:blur(2px) saturate(112%);
}
html.s2d-player-fallback-v4 .s2d-player-fallback-fx::after {
  inset:0;
  box-shadow:inset 0 0 120px rgb(64 77 91 / .18),inset 0 1px 0 rgb(255 255 255 / .26);
}
html.s2d-player-fallback-v4 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 66% 68% at 50% 50%,transparent 44%,rgb(45 56 68 / .14) 84%,rgb(35 44 54 / .22) 100%) !important;
}
/* No usable poster: Variant 4 fails over to an Aurora-like premium surface. */
html.s2d-player-fallback-v4 .s2d-player-fallback-target.s2d-player-fallback-no-poster .s2d-player-fallback-art {
  inset:0;
  transform:none;
  filter:none;
  opacity:1;
  background:
    radial-gradient(ellipse 35% 43% at 50% 50%,rgb(102 223 216 / .29),transparent 72%),
    radial-gradient(ellipse 55% 70% at 12% 18%,rgb(105 139 216 / .20),transparent 74%),
    linear-gradient(145deg,#eef2f8,#dfe5ef);
}
html.night-mode.s2d-player-fallback-v4 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]),
html.s2d-player-fallback-v4 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#090c0d !important; }
html.night-mode.s2d-player-fallback-v4 .s2d-player-fallback-art,
html.s2d-player-fallback-v4 body.night-mode .s2d-player-fallback-art {
  filter:blur(46px) saturate(.92) brightness(.39) contrast(1.10);
  opacity:.92;
}
html.night-mode.s2d-player-fallback-v4 .s2d-player-fallback-art::before,
html.s2d-player-fallback-v4 body.night-mode .s2d-player-fallback-art::before {
  background:linear-gradient(125deg,rgb(2 7 9 / .28),rgb(7 18 21 / .22) 40%,rgb(10 27 30 / .18) 72%,rgb(0 0 0 / .32));
  mix-blend-mode:multiply;
}
html.night-mode.s2d-player-fallback-v4 .s2d-player-fallback-fx,
html.s2d-player-fallback-v4 body.night-mode .s2d-player-fallback-fx {
  background:
    radial-gradient(ellipse 38% 44% at 50% 50%,rgb(91 221 215 / .12),transparent 70%),
    linear-gradient(180deg,rgb(4 12 14 / .08),rgb(0 0 0 / .24));
  -webkit-backdrop-filter:blur(1.5px) saturate(115%);
  backdrop-filter:blur(1.5px) saturate(115%);
}
html.night-mode.s2d-player-fallback-v4 .s2d-player-fallback-target.s2d-player-fallback-no-poster .s2d-player-fallback-art,
html.s2d-player-fallback-v4 body.night-mode .s2d-player-fallback-target.s2d-player-fallback-no-poster .s2d-player-fallback-art {
  filter:none;
  opacity:1;
  background:
    radial-gradient(ellipse 35% 43% at 50% 50%,rgb(80 218 212 / .20),transparent 72%),
    radial-gradient(ellipse 55% 70% at 12% 18%,rgb(44 88 121 / .24),transparent 74%),
    linear-gradient(145deg,#080b0d,#101719);
}
html.night-mode.s2d-player-fallback-v4 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after,
html.s2d-player-fallback-v4 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 65% 67% at 50% 50%,transparent 35%,rgb(0 0 0 / .42) 80%,rgb(0 0 0 / .70) 100%) !important;
}

/* ------------------------------------------------------------------------
   5 — Nebula Mesh
   ------------------------------------------------------------------------ */
html.s2d-player-fallback-v5 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#e7ebf3 !important; }
html.s2d-player-fallback-v5 .s2d-player-fallback-art {
  background:
    radial-gradient(ellipse 42% 58% at 18% 22%,rgb(103 224 217 / .27),transparent 72%),
    radial-gradient(ellipse 45% 52% at 82% 18%,rgb(125 143 219 / .22),transparent 70%),
    radial-gradient(ellipse 50% 62% at 77% 82%,rgb(174 141 211 / .18),transparent 72%),
    radial-gradient(ellipse 38% 48% at 43% 66%,rgb(93 204 212 / .18),transparent 72%),
    linear-gradient(135deg,#f0f3f8 0%,#e0e6ef 48%,#e7e8f2 100%);
}
html.s2d-player-fallback-v5 .s2d-player-fallback-art::before {
  inset:-22%;
  background:conic-gradient(from 18deg at 52% 48%,rgb(102 223 216 / .12),transparent 19%,rgb(116 138 218 / .12) 35%,transparent 52%,rgb(177 139 211 / .10) 68%,transparent 84%,rgb(102 223 216 / .10));
  filter:blur(62px);
  transform:rotate(-4deg) scale(1.08);
  animation:s2d-fb-nebula-drift 24s ease-in-out infinite alternate;
}
html.s2d-player-fallback-v5 .s2d-player-fallback-art::after {
  inset:0;
  background:
    linear-gradient(105deg,transparent 18%,rgb(255 255 255 / .23) 42%,transparent 59%),
    radial-gradient(ellipse 74% 78% at 50% 50%,transparent 54%,rgb(57 71 86 / .11) 100%);
  mix-blend-mode:soft-light;
}
html.s2d-player-fallback-v5 .s2d-player-fallback-fx::before {
  inset:8%;
  background:
    linear-gradient(90deg,rgb(255 255 255 / .18) 1px,transparent 1px),
    linear-gradient(0deg,rgb(255 255 255 / .14) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,rgb(0 0 0 / .40),transparent 76%);
  mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,rgb(0 0 0 / .40),transparent 76%);
  opacity:.20;
  transform:perspective(900px) rotateX(67deg) scale(1.18);
  transform-origin:center 72%;
}
html.s2d-player-fallback-v5 .s2d-player-fallback-fx::after {
  width:48%;
  aspect-ratio:1.35;
  left:26%;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgb(219 255 252 / .21),rgb(102 223 216 / .08) 37%,transparent 72%);
  filter:blur(18px);
}
html.s2d-player-fallback-v5 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 70% 72% at 50% 50%,transparent 48%,rgb(48 62 76 / .15) 100%) !important;
}
html.night-mode.s2d-player-fallback-v5 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]),
html.s2d-player-fallback-v5 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target,#content-cover[style*="default_backdrop"]) { background-color:#080c0e !important; }
html.night-mode.s2d-player-fallback-v5 .s2d-player-fallback-art,
html.s2d-player-fallback-v5 body.night-mode .s2d-player-fallback-art {
  background:
    radial-gradient(ellipse 42% 58% at 18% 22%,rgb(53 163 158 / .19),transparent 72%),
    radial-gradient(ellipse 45% 52% at 82% 18%,rgb(45 76 126 / .25),transparent 70%),
    radial-gradient(ellipse 50% 62% at 77% 82%,rgb(72 48 103 / .22),transparent 72%),
    radial-gradient(ellipse 38% 48% at 43% 66%,rgb(50 133 142 / .18),transparent 72%),
    linear-gradient(135deg,#070b0d 0%,#0d1416 48%,#0a0d12 100%);
}
html.night-mode.s2d-player-fallback-v5 .s2d-player-fallback-art::after,
html.s2d-player-fallback-v5 body.night-mode .s2d-player-fallback-art::after {
  background:
    linear-gradient(105deg,transparent 18%,rgb(221 255 252 / .045) 42%,transparent 59%),
    radial-gradient(ellipse 74% 78% at 50% 50%,transparent 46%,rgb(0 0 0 / .52) 100%);
}
html.night-mode.s2d-player-fallback-v5 .s2d-player-fallback-fx::before,
html.s2d-player-fallback-v5 body.night-mode .s2d-player-fallback-fx::before {
  background:
    linear-gradient(90deg,rgb(164 245 239 / .06) 1px,transparent 1px),
    linear-gradient(0deg,rgb(164 245 239 / .045) 1px,transparent 1px);
}
html.night-mode.s2d-player-fallback-v5 #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after,
html.s2d-player-fallback-v5 body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:radial-gradient(ellipse 70% 72% at 50% 50%,transparent 40%,rgb(0 0 0 / .56) 100%) !important;
}

/* Modern colour-space enhancement where supported; legacy rgb values above are
   intentionally complete fallbacks for older WebViews. */
@supports (color:oklch(70% .1 180)) and (background:color-mix(in oklab, white, black)) {
  html.s2d-player-fallback-v5 .s2d-player-fallback-fx::after {
    background:radial-gradient(ellipse,
      color-mix(in oklab,oklch(92% .075 185) 46%,transparent),
      color-mix(in oklab,oklch(78% .11 188) 18%,transparent) 38%,
      transparent 72%);
  }
  html.night-mode.s2d-player-fallback-v5 .s2d-player-fallback-fx::after,
  html.s2d-player-fallback-v5 body.night-mode .s2d-player-fallback-fx::after {
    background:radial-gradient(ellipse,
      color-mix(in oklab,oklch(83% .105 185) 22%,transparent),
      color-mix(in oklab,oklch(67% .10 190) 10%,transparent) 40%,
      transparent 72%);
  }
}

@keyframes s2d-fb-aurora-drift {
  0% { transform:translate3d(-2%,-1%,0) scale(1.04) rotate(-2deg); --s2d-fb-shift:0deg; }
  100% { transform:translate3d(2%,1.5%,0) scale(1.10) rotate(3deg); --s2d-fb-shift:24deg; }
}
@keyframes s2d-fb-nebula-drift {
  0% { transform:translate3d(-1.5%,-1%,0) rotate(-4deg) scale(1.08); }
  100% { transform:translate3d(2%,1%,0) rotate(4deg) scale(1.13); }
}

/* Mobile/WebView cost control: keep the compositions, trim the expensive blur
   radius and continuous motion on smaller surfaces. */
@media (max-width:767px) {
  html.s2d-player-fallback-v4 .s2d-player-fallback-art {
    inset:-9%;
    filter:blur(30px) saturate(.76) brightness(1.12) contrast(.84);
    transform:scale(1.13);
  }
  html.night-mode.s2d-player-fallback-v4 .s2d-player-fallback-art,
  html.s2d-player-fallback-v4 body.night-mode .s2d-player-fallback-art {
    filter:blur(30px) saturate(.90) brightness(.40) contrast(1.08);
  }
  html.s2d-player-fallback-v1 .s2d-player-fallback-art::before,
  html.s2d-player-fallback-v5 .s2d-player-fallback-art::before { animation:none; }
  html.s2d-player-fallback-v3 .s2d-player-fallback-fx::before { width:min(86vw,520px); }
  html.s2d-player-fallback-v3 .s2d-player-fallback-fx::after { width:min(64vw,390px); }
}

html.s2d-display-apk.s2d-player-fallback-preview .s2d-player-fallback-art::before {
  animation:none !important;
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-player-fallback-preview .s2d-player-fallback-art,
  html.s2d-player-fallback-preview .s2d-player-fallback-art::before,
  html.s2d-player-fallback-preview .s2d-player-fallback-art::after,
  html.s2d-player-fallback-preview .s2d-player-fallback-fx,
  html.s2d-player-fallback-preview .s2d-player-fallback-fx::before,
  html.s2d-player-fallback-preview .s2d-player-fallback-fx::after {
    animation:none !important;
    transition:none !important;
  }
}


/* ========================================================================
   Animated Player Experimental Lab v23 — production random rotation
   Production: equal random choice of 1 / 2 / 5 on confirmed missing backdrops
   QA override: ?s2d_player_experimental=1..5

   1 Cyberpunk HUD
   2 Old Cinema Countdown
   3 Vinyl Player
   4 Filmstrip Loader
   5 Cyberpunk HUD + Filmstrip Loader

   The retired static fallback is no longer used in production. All visuals
   remain isolated to confirmed missing-backdrop targets.
   ======================================================================== */

html.s2d-player-experimental {
  --s2d-exp-cyan:#68e7df;
  --s2d-exp-cyan-soft:rgb(104 231 223 / .22);
  --s2d-exp-violet:#b48cff;
  --s2d-exp-violet-soft:rgb(180 140 255 / .18);
  --s2d-exp-ink:#203238;
  --s2d-exp-panel:rgb(239 247 250 / .62);
  --s2d-exp-line:rgb(31 91 98 / .18);
  --s2d-exp-glass:rgb(255 255 255 / .36);
  --s2d-exp-shadow:rgb(31 55 65 / .18);
}
html.night-mode.s2d-player-experimental,
html.s2d-player-experimental body.night-mode {
  --s2d-exp-cyan:#6eece3;
  --s2d-exp-cyan-soft:rgb(110 236 227 / .20);
  --s2d-exp-violet:#b98cff;
  --s2d-exp-violet-soft:rgb(185 140 255 / .18);
  --s2d-exp-ink:#e7fffd;
  --s2d-exp-panel:rgb(5 16 20 / .62);
  --s2d-exp-line:rgb(111 235 228 / .17);
  --s2d-exp-glass:rgb(8 24 29 / .44);
  --s2d-exp-shadow:rgb(0 0 0 / .42);
}

/* Suppress any legacy fallback art/fx if present from a stale DOM/cache.
   Production v23 itself creates only the animated experimental stage. */
html.s2d-player-experimental.s2d-player-fallback-preview .s2d-player-fallback-art,
html.s2d-player-experimental.s2d-player-fallback-preview .s2d-player-fallback-fx {
  display:none !important;
  background:none !important;
  filter:none !important;
  animation:none !important;
}
html.s2d-player-experimental.s2d-player-fallback-preview #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:transparent !important;
  box-shadow:inset 0 0 0 1px rgb(43 102 108 / .12) !important;
}
html.night-mode.s2d-player-experimental.s2d-player-fallback-preview #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after,
html.s2d-player-experimental.s2d-player-fallback-preview body.night-mode #mv-info :is(.splash-no-bg,.s2d-player-fallback-target)::after {
  background:transparent !important;
  box-shadow:inset 0 0 0 1px rgb(113 238 231 / .08) !important;
}

html.s2d-player-experimental .s2d-player-exp-stage {
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  user-select:none;
  color:var(--s2d-exp-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  contain:layout paint style;
}
html.s2d-player-experimental .s2d-player-exp-stage > span,
html.s2d-player-experimental .s2d-player-exp-stage span > span {
  box-sizing:border-box;
}

/* Hide the production V3 wave pair where an experiment defines its own visual
   rhythm. The play disc itself remains the real, proven visual affordance. */
html.s2d-player-experimental-v2.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control::before,
html.s2d-player-experimental-v2.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control::after,
html.s2d-player-experimental-v3.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control::before,
html.s2d-player-experimental-v3.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control::after,
html.s2d-player-experimental-v4.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control::before,
html.s2d-player-experimental-v4.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control::after {
  display:none !important;
  animation:none !important;
}

/* ------------------------------------------------------------------------
   1 — Cyberpunk HUD / Matrix-inspired futuristic media interface
   ------------------------------------------------------------------------ */
html.s2d-player-experimental-v1 #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 58% 68% at 50% 52%,rgb(91 224 218 / .20),transparent 66%),
    radial-gradient(ellipse 34% 54% at 13% 24%,rgb(128 184 255 / .18),transparent 70%),
    radial-gradient(ellipse 38% 50% at 87% 77%,rgb(178 130 238 / .17),transparent 72%),
    linear-gradient(145deg,#edf4f8 0%,#dfeaf0 50%,#edf0f8 100%) !important;
}
html.night-mode.s2d-player-experimental-v1 #mv-info .s2d-player-fallback-target,
html.s2d-player-experimental-v1 body.night-mode #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 58% 68% at 50% 52%,rgb(46 193 188 / .16),transparent 66%),
    radial-gradient(ellipse 34% 54% at 13% 24%,rgb(36 95 126 / .24),transparent 70%),
    radial-gradient(ellipse 38% 50% at 87% 77%,rgb(75 45 110 / .25),transparent 72%),
    linear-gradient(145deg,#05090c 0%,#091317 52%,#080b11 100%) !important;
}
html.s2d-player-experimental-v1 .s2d-exp-cyber-grid,
html.s2d-player-experimental-v5 .s2d-exp-cyber-grid {
  position:absolute;
  inset:-18% -10% -35%;
  opacity:.34;
  background:
    linear-gradient(90deg,var(--s2d-exp-line) 1px,transparent 1px),
    linear-gradient(0deg,var(--s2d-exp-line) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(880px) rotateX(65deg) scale(1.18);
  transform-origin:center 69%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
  animation:s2d-exp-grid-drift 11s linear infinite;
}
html.s2d-player-experimental-v1 .s2d-exp-cyber-scan,
html.s2d-player-experimental-v5 .s2d-exp-cyber-scan {
  position:absolute;
  inset:0;
  opacity:.48;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgb(31 72 77 / .055) 4px),
    linear-gradient(180deg,transparent 0%,rgb(105 235 228 / .18) 49.2%,rgb(255 255 255 / .30) 50%,rgb(174 130 244 / .10) 50.8%,transparent 52%);
  background-size:100% 100%,100% 220%;
  animation:s2d-exp-scanline 5.8s linear infinite;
}
html.night-mode.s2d-player-experimental-v1 .s2d-exp-cyber-scan,
html.s2d-player-experimental-v1 body.night-mode .s2d-exp-cyber-scan,
html.night-mode.s2d-player-experimental-v5 .s2d-exp-cyber-scan,
html.s2d-player-experimental-v5 body.night-mode .s2d-exp-cyber-scan {
  opacity:.64;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgb(117 238 232 / .038) 4px),
    linear-gradient(180deg,transparent 0%,rgb(105 235 228 / .14) 49.2%,rgb(255 255 255 / .16) 50%,rgb(174 130 244 / .09) 50.8%,transparent 52%);
  background-size:100% 100%,100% 220%;
}
html.s2d-player-experimental-v1 .s2d-exp-cyber-glitch,
html.s2d-player-experimental-v5 .s2d-exp-cyber-glitch {
  position:absolute;
  inset:0;
  opacity:0;
  background:
    linear-gradient(90deg,transparent 0 9%,rgb(106 239 231 / .20) 9% 20%,transparent 20% 47%,rgb(184 139 255 / .16) 47% 61%,transparent 61%),
    repeating-linear-gradient(0deg,transparent 0 34px,rgb(255 255 255 / .12) 35px 36px,transparent 37px 71px);
  mix-blend-mode:screen;
  animation:s2d-exp-glitch-burst 7.4s steps(1,end) infinite;
}
html.s2d-player-experimental-v1 .s2d-exp-hud-top,
html.s2d-player-experimental-v5 .s2d-exp-hud-top {
  position:absolute;
  top:7.5%;
  left:6%;
  right:6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:clamp(9px,.82vw,12px);
  letter-spacing:.15em;
  color:color-mix(in srgb,var(--s2d-exp-ink) 72%,transparent);
  text-transform:uppercase;
}
html.s2d-player-experimental .s2d-exp-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
html.s2d-player-experimental .s2d-exp-status i {
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:50%;
  background:var(--s2d-exp-cyan);
  box-shadow:0 0 12px var(--s2d-exp-cyan),0 0 24px var(--s2d-exp-cyan-soft);
  animation:s2d-exp-status-pulse 1.7s ease-in-out infinite;
}
html.s2d-player-experimental-v1 .s2d-exp-code,
html.s2d-player-experimental-v5 .s2d-exp-code {
  position:absolute;
  white-space:nowrap;
  font-size:clamp(8px,.66vw,10px);
  letter-spacing:.08em;
  color:color-mix(in srgb,var(--s2d-exp-cyan) 58%,transparent);
  text-shadow:0 0 12px var(--s2d-exp-cyan-soft);
  opacity:.58;
}
html.s2d-player-experimental-v1 .s2d-exp-code-a,
html.s2d-player-experimental-v5 .s2d-exp-code-a {
  top:18%;
  left:-20%;
  animation:s2d-exp-code-left 13s linear infinite;
}
html.s2d-player-experimental-v1 .s2d-exp-code-b,
html.s2d-player-experimental-v5 .s2d-exp-code-b {
  bottom:16%;
  right:-25%;
  animation:s2d-exp-code-right 16s linear infinite;
}
html.s2d-player-experimental-v1 .s2d-exp-code-c {
  top:54%;
  left:4.5%;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  animation:s2d-exp-code-vertical 8s ease-in-out infinite alternate;
}
html.s2d-player-experimental-v1 .s2d-exp-cyber-title,
html.s2d-player-experimental-v5 .s2d-exp-cyber-title {
  position:absolute;
  left:50%;
  top:71%;
  transform:translateX(-50%);
  width:min(76%,760px);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.13em;
}
html.s2d-player-experimental .s2d-exp-cyber-title small {
  display:block;
  margin-bottom:7px;
  font-size:clamp(8px,.66vw,10px);
  color:color-mix(in srgb,var(--s2d-exp-cyan) 72%,transparent);
}
html.s2d-player-experimental .s2d-exp-cyber-title strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(13px,1.35vw,22px);
  font-weight:650;
  letter-spacing:.08em;
  color:color-mix(in srgb,var(--s2d-exp-ink) 88%,transparent);
  text-shadow:0 0 18px var(--s2d-exp-cyan-soft);
}
html.s2d-player-experimental-v1 .s2d-exp-hud-corners,
html.s2d-player-experimental-v5 .s2d-exp-hud-corners {
  position:absolute;
  inset:5.5%;
  border:1px solid transparent;
  background:
    linear-gradient(var(--s2d-exp-cyan),var(--s2d-exp-cyan)) left top/42px 1px no-repeat,
    linear-gradient(var(--s2d-exp-cyan),var(--s2d-exp-cyan)) left top/1px 28px no-repeat,
    linear-gradient(var(--s2d-exp-violet),var(--s2d-exp-violet)) right top/42px 1px no-repeat,
    linear-gradient(var(--s2d-exp-violet),var(--s2d-exp-violet)) right top/1px 28px no-repeat,
    linear-gradient(var(--s2d-exp-violet),var(--s2d-exp-violet)) left bottom/42px 1px no-repeat,
    linear-gradient(var(--s2d-exp-violet),var(--s2d-exp-violet)) left bottom/1px 28px no-repeat,
    linear-gradient(var(--s2d-exp-cyan),var(--s2d-exp-cyan)) right bottom/42px 1px no-repeat,
    linear-gradient(var(--s2d-exp-cyan),var(--s2d-exp-cyan)) right bottom/1px 28px no-repeat;
  opacity:.55;
  filter:drop-shadow(0 0 7px var(--s2d-exp-cyan-soft));
}
html.s2d-player-experimental-v1.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc,
html.s2d-player-experimental-v5.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc {
  background:linear-gradient(145deg,rgb(8 31 35 / .54),rgb(24 13 39 / .32)) !important;
  border-color:rgb(191 254 250 / .76) !important;
  box-shadow:
    inset 0 0 0 5px rgb(106 232 224 / .10),
    inset 0 1px 0 rgb(255 255 255 / .24),
    0 0 24px rgb(105 235 228 / .16),
    0 0 54px rgb(184 139 255 / .10) !important;
}

/* ------------------------------------------------------------------------
   2 — Old Cinema Countdown, looping 5 -> 0
   ------------------------------------------------------------------------ */
html.s2d-player-experimental-v2 #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(circle at 50% 47%,rgb(255 250 225 / .88) 0 14%,rgb(229 219 185 / .90) 58%,rgb(179 163 127 / .96) 100%) !important;
}
html.night-mode.s2d-player-experimental-v2 #mv-info .s2d-player-fallback-target,
html.s2d-player-experimental-v2 body.night-mode #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(circle at 50% 47%,#34332d 0 13%,#191914 58%,#090909 100%) !important;
}
html.s2d-player-experimental-v2 .s2d-player-exp-stage {
  color:#3d392f;
  font-family:Georgia,"Times New Roman",serif;
  filter:contrast(1.03) sepia(.13);
}
html.night-mode.s2d-player-experimental-v2 .s2d-player-exp-stage,
html.s2d-player-experimental-v2 body.night-mode .s2d-player-exp-stage { color:#e7dfc8; }
html.s2d-player-experimental-v2 .s2d-exp-film-grain {
  position:absolute;
  inset:-18%;
  opacity:.18;
  background:
    repeating-radial-gradient(circle at 24% 35%,rgb(48 42 28 / .48) 0 .7px,transparent .9px 3px),
    repeating-radial-gradient(circle at 73% 61%,rgb(255 255 255 / .50) 0 .6px,transparent .8px 4px);
  background-size:7px 9px,11px 8px;
  mix-blend-mode:multiply;
  animation:s2d-exp-film-grain .22s steps(2,end) infinite;
}
html.night-mode.s2d-player-experimental-v2 .s2d-exp-film-grain,
html.s2d-player-experimental-v2 body.night-mode .s2d-exp-film-grain {
  opacity:.10;
  mix-blend-mode:screen;
}
html.s2d-player-experimental-v2 .s2d-exp-film-scratches {
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    linear-gradient(90deg,transparent 9%,rgb(65 55 35 / .28) 9.2% 9.35%,transparent 9.5% 48%,rgb(255 255 255 / .40) 48.1% 48.2%,transparent 48.4% 84%,rgb(57 50 34 / .20) 84.2% 84.35%,transparent 84.6%),
    linear-gradient(180deg,transparent 0 72%,rgb(64 55 35 / .17) 72.3% 72.6%,transparent 72.8%);
  animation:s2d-exp-scratches 3.2s steps(1,end) infinite;
}
html.night-mode.s2d-player-experimental-v2 .s2d-exp-film-scratches,
html.s2d-player-experimental-v2 body.night-mode .s2d-exp-film-scratches {
  opacity:.16;
  filter:invert(1);
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-wrap {
  position:absolute;
  left:50%;
  top:43%;
  width:clamp(210px,29vw,390px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-ring {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:.72;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16),0 0 0 12px rgb(56 49 34 / .07);
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-ring::before {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 0deg,currentColor 0 44deg,transparent 46deg 360deg);
  opacity:.14;
  animation:s2d-exp-countdown-sweep 1s linear infinite;
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-ring::after {
  content:"";
  position:absolute;
  inset:15%;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.33;
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-cross {
  position:absolute;
  inset:-12%;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),currentColor 50%,transparent calc(50% + .5px)),
    linear-gradient(0deg,transparent calc(50% - .5px),currentColor 50%,transparent calc(50% + .5px));
  opacity:.37;
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-number {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(88px,12vw,172px);
  font-weight:700;
  line-height:1;
  color:currentColor;
  text-shadow:0 2px 0 rgb(255 255 255 / .16);
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b {
  position:absolute;
  opacity:0;
  transform:scale(.98);
  animation:s2d-exp-count-number 6s steps(1,end) infinite;
}
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:nth-child(1){ animation-delay:0s; }
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:nth-child(2){ animation-delay:1s; }
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:nth-child(3){ animation-delay:2s; }
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:nth-child(4){ animation-delay:3s; }
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:nth-child(5){ animation-delay:4s; }
html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:nth-child(6){ animation-delay:5s; }
html.s2d-player-experimental-v2 .s2d-exp-film-caption {
  position:absolute;
  left:50%;
  top:72%;
  transform:translateX(-50%);
  width:min(82%,760px);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.12em;
}
html.s2d-player-experimental-v2 .s2d-exp-film-caption small {
  display:block;
  font-size:clamp(9px,.8vw,12px);
  margin-bottom:7px;
  opacity:.55;
}
html.s2d-player-experimental-v2 .s2d-exp-film-caption strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(13px,1.2vw,20px);
  font-weight:600;
  letter-spacing:.08em;
  opacity:.76;
}
html.s2d-player-experimental-v2 .s2d-exp-film-edge {
  position:absolute;
  left:0;
  right:0;
  height:9px;
  opacity:.30;
  background:repeating-linear-gradient(90deg,currentColor 0 20px,transparent 20px 34px);
}
html.s2d-player-experimental-v2 .s2d-exp-film-edge-a { top:4.5%; }
html.s2d-player-experimental-v2 .s2d-exp-film-edge-b { bottom:4.5%; }
html.s2d-player-experimental-v2 #mv-info .s2d-player-fallback-target > .s2d-player-play-control {
  top:auto !important;
  bottom:4.5% !important;
  transform:translateX(-50%) scale(.62) !important;
  opacity:.70 !important;
}
html.s2d-player-experimental-v2 #mv-info .mvi-cover.splash-image.s2d-player-fallback-target:hover > .s2d-player-play-control {
  transform:translateX(-50%) scale(.72) !important;
  opacity:.92 !important;
}
html.s2d-player-experimental-v2.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc {
  background:rgb(44 41 33 / .18) !important;
  border-color:#3d392f !important;
  color:#3d392f !important;
  -webkit-backdrop-filter:blur(3px) !important;
  backdrop-filter:blur(3px) !important;
  box-shadow:inset 0 0 0 4px rgb(255 255 255 / .08),0 4px 18px rgb(38 32 20 / .20) !important;
}
html.night-mode.s2d-player-experimental-v2.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc,
html.s2d-player-experimental-v2.s2d-player-play-v3 body.night-mode #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc {
  background:rgb(6 6 6 / .25) !important;
  border-color:#e7dfc8 !important;
  color:#e7dfc8 !important;
}

/* ------------------------------------------------------------------------
   3 — Vinyl record / premium retro turntable
   ------------------------------------------------------------------------ */
html.s2d-player-experimental-v3 #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 44% 56% at 50% 48%,rgb(255 255 255 / .70),transparent 68%),
    radial-gradient(ellipse 40% 50% at 22% 18%,rgb(116 225 216 / .18),transparent 72%),
    linear-gradient(145deg,#e9eef0,#dfe5e7 55%,#eef0ef) !important;
}
html.night-mode.s2d-player-experimental-v3 #mv-info .s2d-player-fallback-target,
html.s2d-player-experimental-v3 body.night-mode #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 44% 56% at 50% 48%,rgb(73 216 207 / .09),transparent 68%),
    radial-gradient(ellipse 40% 50% at 22% 18%,rgb(70 45 101 / .13),transparent 72%),
    linear-gradient(145deg,#070b0d,#101517 55%,#080b0c) !important;
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-ambient {
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 18%,rgb(255 255 255 / .20) 36%,transparent 50%),
    radial-gradient(ellipse 68% 64% at 50% 52%,transparent 52%,rgb(42 67 72 / .10) 100%);
}
html.night-mode.s2d-player-experimental-v3 .s2d-exp-vinyl-ambient,
html.s2d-player-experimental-v3 body.night-mode .s2d-exp-vinyl-ambient {
  background:
    linear-gradient(115deg,transparent 18%,rgb(255 255 255 / .025) 36%,transparent 50%),
    radial-gradient(ellipse 68% 64% at 50% 52%,transparent 46%,rgb(0 0 0 / .48) 100%);
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-scene {
  position:absolute;
  left:50%;
  top:48%;
  width:clamp(265px,36vw,470px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-record {
  position:absolute;
  inset:3%;
  border-radius:50%;
  background:
    radial-gradient(circle at center,transparent 0 10%,rgb(255 255 255 / .08) 10.3% 10.8%,transparent 11% 20%,rgb(255 255 255 / .04) 20.2% 20.55%,transparent 20.8%),
    repeating-radial-gradient(circle at center,#151a1b 0 2px,#0b0f10 2.7px 4.3px,#1a2021 4.7px 5.4px),
    radial-gradient(circle at 32% 24%,#384143,#121617 36%,#070909 70%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .10),
    inset 0 0 42px rgb(255 255 255 / .05),
    0 24px 48px rgb(27 47 52 / .24),
    0 0 0 12px rgb(255 255 255 / .08);
  animation:s2d-exp-vinyl-spin 10s linear infinite;
}
html.night-mode.s2d-player-experimental-v3 .s2d-exp-vinyl-record,
html.s2d-player-experimental-v3 body.night-mode .s2d-exp-vinyl-record {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .08),
    inset 0 0 42px rgb(255 255 255 / .04),
    0 24px 58px rgb(0 0 0 / .54),
    0 0 0 12px rgb(255 255 255 / .025);
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-shine {
  position:absolute;
  inset:2%;
  border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0 12%,rgb(255 255 255 / .12) 15%,transparent 20% 49%,rgb(103 232 224 / .09) 54%,transparent 59% 80%,rgb(185 140 255 / .08) 84%,transparent 90%);
  mix-blend-mode:screen;
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-label {
  position:absolute;
  left:50%;
  top:50%;
  width:37%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:15% 10%;
  background:
    radial-gradient(circle at 50% 50%,rgb(255 255 255 / .24) 0 5%,transparent 6%),
    linear-gradient(145deg,#67d9d3,#73b8c6 46%,#a88ee2 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .38),0 0 18px rgb(104 231 223 / .16);
  color:#092025;
  overflow:hidden;
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-copy {
  display:block;
  width:100%;
  text-align:center;
  animation:s2d-exp-vinyl-counterspin 10s linear infinite;
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-copy small {
  display:block;
  margin-bottom:4px;
  font-size:clamp(6px,.54vw,9px);
  letter-spacing:.14em;
  opacity:.74;
}
html.s2d-player-experimental-v3 .s2d-exp-vinyl-copy strong {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(8px,.72vw,12px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:.03em;
}
html.s2d-player-experimental-v3 .s2d-exp-tonearm {
  position:absolute;
  width:42%;
  height:15%;
  right:-13%;
  top:10%;
  transform:rotate(31deg);
  transform-origin:92% 50%;
  transition:transform .65s cubic-bezier(.16,1,.3,1);
}
html.s2d-player-experimental-v3 .s2d-exp-tonearm::before {
  content:"";
  position:absolute;
  right:3%;
  top:50%;
  width:86%;
  height:9px;
  border-radius:99px;
  transform:translateY(-50%);
  background:linear-gradient(180deg,#f8ffff,#839397 45%,#4f5c60 55%,#b9c8cb);
  box-shadow:0 5px 12px rgb(0 0 0 / .20);
}
html.s2d-player-experimental-v3 .s2d-exp-tonearm i {
  position:absolute;
  right:-2%;
  top:50%;
  width:42px;
  aspect-ratio:1;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 42% 35%,#f8ffff,#88979a 52%,#455154 100%);
  box-shadow:0 7px 14px rgb(0 0 0 / .24);
}
html.s2d-player-experimental-v3 .s2d-exp-tonearm b {
  position:absolute;
  left:-5%;
  top:50%;
  width:27px;
  height:18px;
  transform:translateY(-50%) rotate(-2deg);
  border-radius:4px 8px 8px 4px;
  background:linear-gradient(145deg,#1b2325,#080c0d);
  box-shadow:0 4px 10px rgb(0 0 0 / .30);
}
html.s2d-player-experimental-v3 #mv-info .s2d-player-fallback-target:hover .s2d-exp-tonearm {
  transform:rotate(24deg);
}
html.s2d-player-experimental-v3 .s2d-exp-now-playing {
  position:absolute;
  left:50%;
  bottom:5.5%;
  transform:translateX(-50%);
  width:min(76%,700px);
  text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
html.s2d-player-experimental-v3 .s2d-exp-now-playing small {
  display:block;
  margin-bottom:5px;
  font-size:clamp(8px,.64vw,10px);
  opacity:.52;
}
html.s2d-player-experimental-v3 .s2d-exp-now-playing strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(12px,1.05vw,18px);
  font-weight:650;
  opacity:.76;
}
html.s2d-player-experimental-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control {
  transform:translate(-50%,-50%) scale(.78) !important;
}
html.s2d-player-experimental-v3 #mv-info .mvi-cover.splash-image.s2d-player-fallback-target:hover > .s2d-player-play-control {
  transform:translate(-50%,-50%) scale(.88) !important;
}
html.s2d-player-experimental-v3.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc {
  background:rgb(8 13 14 / .52) !important;
  border-color:rgb(220 255 252 / .58) !important;
  box-shadow:inset 0 0 0 4px rgb(104 231 223 / .08),0 0 22px rgb(104 231 223 / .14) !important;
}

/* ------------------------------------------------------------------------
   4 — Filmstrip loading indicator as the hero design
   ------------------------------------------------------------------------ */
html.s2d-player-experimental-v4 #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 46% 54% at 50% 40%,rgb(104 231 223 / .25),transparent 72%),
    radial-gradient(ellipse 42% 52% at 77% 27%,rgb(181 141 255 / .17),transparent 72%),
    linear-gradient(145deg,#edf3f7,#e0e9ed 52%,#edf0f6) !important;
}
html.night-mode.s2d-player-experimental-v4 #mv-info .s2d-player-fallback-target,
html.s2d-player-experimental-v4 body.night-mode #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 46% 54% at 50% 40%,rgb(58 211 203 / .13),transparent 72%),
    radial-gradient(ellipse 42% 52% at 77% 27%,rgb(88 52 124 / .18),transparent 72%),
    linear-gradient(145deg,#060a0c,#0c1518 52%,#080b10) !important;
}
html.s2d-player-experimental-v4 .s2d-exp-loader-ambient {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 62% 62% at 50% 43%,transparent 34%,rgb(34 64 70 / .11) 100%),
    linear-gradient(110deg,transparent 18%,rgb(255 255 255 / .22) 43%,transparent 60%);
}
html.night-mode.s2d-player-experimental-v4 .s2d-exp-loader-ambient,
html.s2d-player-experimental-v4 body.night-mode .s2d-exp-loader-ambient {
  background:
    radial-gradient(ellipse 62% 62% at 50% 43%,transparent 30%,rgb(0 0 0 / .48) 100%),
    linear-gradient(110deg,transparent 18%,rgb(255 255 255 / .025) 43%,transparent 60%);
}
html.s2d-player-experimental-v4 .s2d-exp-loader-shell {
  position:absolute;
  left:50%;
  top:54%;
  width:min(78%,880px);
  transform:translate(-50%,-50%);
  text-align:center;
}
html.s2d-player-experimental-v4 .s2d-exp-loader-brand {
  display:inline-block;
  margin-bottom:12px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(32px,5vw,76px);
  font-weight:800;
  letter-spacing:.04em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--s2d-exp-ink) 22%,transparent);
  background:linear-gradient(90deg,var(--s2d-exp-cyan),var(--s2d-exp-violet),var(--s2d-exp-cyan));
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:s2d-exp-brand-reveal 4.8s cubic-bezier(.2,.7,.2,1) infinite;
  filter:drop-shadow(0 0 20px var(--s2d-exp-cyan-soft));
}
html.s2d-player-experimental-v4 .s2d-exp-loader-kicker {
  display:block;
  margin-bottom:16px;
  font-size:clamp(8px,.72vw,11px);
  letter-spacing:.20em;
  color:color-mix(in srgb,var(--s2d-exp-ink) 58%,transparent);
}
html.s2d-player-experimental .s2d-exp-filmstrip {
  position:relative;
  display:block;
  width:100%;
  height:clamp(42px,5.2vw,70px);
  overflow:hidden;
  border-radius:9px;
  border:1px solid color-mix(in srgb,var(--s2d-exp-ink) 20%,transparent);
  background:
    repeating-linear-gradient(90deg,transparent 0 70px,color-mix(in srgb,var(--s2d-exp-ink) 12%,transparent) 70px 71px),
    color-mix(in srgb,var(--s2d-exp-panel) 76%,transparent);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .24),0 14px 34px var(--s2d-exp-shadow);
}
html.s2d-player-experimental .s2d-exp-filmstrip::before,
html.s2d-player-experimental .s2d-exp-filmstrip::after {
  content:"";
  position:absolute;
  z-index:4;
  left:8px;
  right:8px;
  height:8px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--s2d-exp-ink) 68%,transparent) 0 15px,transparent 15px 25px);
  opacity:.50;
}
html.s2d-player-experimental .s2d-exp-filmstrip::before { top:5px; }
html.s2d-player-experimental .s2d-exp-filmstrip::after { bottom:5px; }
html.s2d-player-experimental .s2d-exp-filmstrip-fill {
  position:absolute;
  z-index:1;
  inset:0;
  transform:scaleX(.02);
  transform-origin:left center;
  background:
    linear-gradient(90deg,rgb(93 224 216 / .84),rgb(93 224 216 / .76) 48%,rgb(181 140 255 / .74) 78%,rgb(231 157 255 / .82));
  box-shadow:0 0 26px rgb(104 231 223 / .28),0 0 54px rgb(181 140 255 / .20);
  animation:s2d-exp-filmstrip-fill 4.8s cubic-bezier(.23,.77,.24,1) infinite;
}
html.s2d-player-experimental .s2d-exp-filmstrip-shine {
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:28%;
  left:-32%;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .48),transparent);
  transform:skewX(-18deg);
  animation:s2d-exp-filmstrip-shine 4.8s ease-in-out infinite;
}
html.s2d-player-experimental-v4 .s2d-exp-loader-ready {
  display:block;
  margin-top:12px;
  min-height:1.2em;
  font-size:clamp(9px,.76vw,12px);
  letter-spacing:.18em;
  color:var(--s2d-exp-cyan);
  text-shadow:0 0 14px var(--s2d-exp-cyan-soft);
  opacity:0;
  animation:s2d-exp-ready 4.8s ease-in-out infinite;
}
html.s2d-player-experimental-v4 .s2d-exp-loader-shell > .s2d-exp-title {
  display:block;
  margin-top:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(12px,1.12vw,18px);
  font-weight:550;
  letter-spacing:.04em;
  color:color-mix(in srgb,var(--s2d-exp-ink) 72%,transparent);
}
html.s2d-player-experimental-v4 #mv-info .s2d-player-fallback-target > .s2d-player-play-control {
  top:29% !important;
  transform:translate(-50%,-50%) scale(.70) !important;
}
html.s2d-player-experimental-v4 #mv-info .mvi-cover.splash-image.s2d-player-fallback-target:hover > .s2d-player-play-control {
  transform:translate(-50%,-50%) scale(.80) !important;
}
html.s2d-player-experimental-v4.s2d-player-play-v3 #mv-info .s2d-player-fallback-target > .s2d-player-play-control .s2d-player-play-disc {
  background:rgb(10 27 30 / .34) !important;
  box-shadow:inset 0 0 0 4px rgb(104 231 223 / .08),0 0 24px rgb(104 231 223 / .17) !important;
}

/* ------------------------------------------------------------------------
   5 — Hybrid: Cyberpunk HUD + filmstrip loader
   ------------------------------------------------------------------------ */
html.s2d-player-experimental-v5 #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 55% 65% at 50% 47%,rgb(89 226 219 / .23),transparent 66%),
    radial-gradient(ellipse 37% 51% at 10% 24%,rgb(88 154 220 / .17),transparent 72%),
    radial-gradient(ellipse 38% 54% at 89% 75%,rgb(181 126 239 / .18),transparent 72%),
    linear-gradient(145deg,#eef5f8 0%,#dde9ee 50%,#eceff7 100%) !important;
}
html.night-mode.s2d-player-experimental-v5 #mv-info .s2d-player-fallback-target,
html.s2d-player-experimental-v5 body.night-mode #mv-info .s2d-player-fallback-target {
  background:
    radial-gradient(ellipse 55% 65% at 50% 47%,rgb(43 200 194 / .17),transparent 66%),
    radial-gradient(ellipse 37% 51% at 10% 24%,rgb(29 86 121 / .24),transparent 72%),
    radial-gradient(ellipse 38% 54% at 89% 75%,rgb(78 42 112 / .26),transparent 72%),
    linear-gradient(145deg,#04080a 0%,#071317 50%,#080a10 100%) !important;
}
html.s2d-player-experimental-v5 .s2d-exp-cyber-title-hybrid {
  top:65%;
}
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader {
  position:absolute;
  left:50%;
  bottom:5.5%;
  width:min(82%,940px);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) auto;
  align-items:center;
  gap:13px;
}
html.s2d-player-experimental-v5 .s2d-exp-hybrid-label,
html.s2d-player-experimental-v5 .s2d-exp-loader-ready {
  font-size:clamp(7px,.62vw,10px);
  letter-spacing:.14em;
  color:color-mix(in srgb,var(--s2d-exp-ink) 60%,transparent);
  white-space:nowrap;
}
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader .s2d-exp-filmstrip {
  height:clamp(30px,3.4vw,44px);
  border-radius:7px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 8px 22px var(--s2d-exp-shadow);
}
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader .s2d-exp-filmstrip::before,
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader .s2d-exp-filmstrip::after {
  height:5px;
}
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader .s2d-exp-filmstrip::before { top:3px; }
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader .s2d-exp-filmstrip::after { bottom:3px; }
html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader .s2d-exp-loader-ready {
  color:var(--s2d-exp-cyan);
  text-shadow:0 0 12px var(--s2d-exp-cyan-soft);
  opacity:.28;
  animation:s2d-exp-ready 4.8s ease-in-out infinite;
}

/* ------------------------------------------------------------------------
   Experimental motion
   ------------------------------------------------------------------------ */
@keyframes s2d-exp-grid-drift {
  0% { background-position:0 0,0 0; }
  100% { background-position:72px 0,0 72px; }
}
@keyframes s2d-exp-scanline {
  0% { background-position:0 0,0 -110%; }
  100% { background-position:0 0,0 110%; }
}
@keyframes s2d-exp-glitch-burst {
  0%,7%,9%,34%,36%,72%,74%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); }
  7.4% { opacity:.56; transform:translateX(7px); clip-path:inset(18% 0 64% 0); }
  8.2% { opacity:.34; transform:translateX(-5px); clip-path:inset(61% 0 18% 0); }
  34.5% { opacity:.35; transform:translateX(-8px); clip-path:inset(43% 0 38% 0); }
  35.2% { opacity:.20; transform:translateX(5px); clip-path:inset(74% 0 12% 0); }
  72.6% { opacity:.48; transform:translateX(9px); clip-path:inset(22% 0 52% 0); }
  73.2% { opacity:.22; transform:translateX(-4px); clip-path:inset(52% 0 28% 0); }
}
@keyframes s2d-exp-status-pulse {
  0%,100% { opacity:.55; transform:scale(.88); }
  50% { opacity:1; transform:scale(1.12); }
}
@keyframes s2d-exp-code-left {
  0% { transform:translateX(0); opacity:0; }
  8% { opacity:.58; }
  92% { opacity:.58; }
  100% { transform:translateX(155vw); opacity:0; }
}
@keyframes s2d-exp-code-right {
  0% { transform:translateX(0); opacity:0; }
  8% { opacity:.46; }
  92% { opacity:.46; }
  100% { transform:translateX(-155vw); opacity:0; }
}
@keyframes s2d-exp-code-vertical {
  0% { opacity:.25; transform:rotate(180deg) translateY(-8px); }
  100% { opacity:.60; transform:rotate(180deg) translateY(12px); }
}
@keyframes s2d-exp-film-grain {
  0% { transform:translate(0,0) scale(1.03); }
  25% { transform:translate(2%,-1%) scale(1.04); }
  50% { transform:translate(-1%,2%) scale(1.03); }
  75% { transform:translate(1%,1%) scale(1.04); }
  100% { transform:translate(-2%,-1%) scale(1.03); }
}
@keyframes s2d-exp-scratches {
  0%,18%,22%,58%,61%,100% { transform:translateX(0); opacity:.16; }
  19% { transform:translateX(7%); opacity:.27; }
  20% { transform:translateX(-3%); opacity:.22; }
  59% { transform:translateX(-10%); opacity:.30; }
  60% { transform:translateX(4%); opacity:.18; }
}
@keyframes s2d-exp-countdown-sweep {
  to { transform:rotate(360deg); }
}
@keyframes s2d-exp-count-number {
  0% { opacity:1; transform:scale(1); }
  16.4% { opacity:1; transform:scale(1); }
  16.6%,100% { opacity:0; transform:scale(.985); }
}
@keyframes s2d-exp-vinyl-spin { to { transform:rotate(360deg); } }
@keyframes s2d-exp-vinyl-counterspin { to { transform:rotate(-360deg); } }
@keyframes s2d-exp-brand-reveal {
  0% { background-position:100% 50%; opacity:.42; filter:drop-shadow(0 0 8px var(--s2d-exp-cyan-soft)); }
  38% { opacity:.96; }
  76% { background-position:0% 50%; opacity:1; filter:drop-shadow(0 0 25px var(--s2d-exp-cyan-soft)); }
  100% { background-position:0% 50%; opacity:.55; filter:drop-shadow(0 0 9px var(--s2d-exp-cyan-soft)); }
}
@keyframes s2d-exp-filmstrip-fill {
  0% { transform:scaleX(.015); opacity:.60; }
  12% { opacity:1; }
  76% { transform:scaleX(1); opacity:1; }
  91% { transform:scaleX(1); opacity:.94; }
  100% { transform:scaleX(.015); opacity:.60; }
}
@keyframes s2d-exp-filmstrip-shine {
  0%,22% { left:-32%; opacity:0; }
  52% { opacity:.72; }
  78% { left:106%; opacity:.12; }
  100% { left:106%; opacity:0; }
}
@keyframes s2d-exp-ready {
  0%,68%,100% { opacity:0; }
  78%,91% { opacity:1; }
}

/* Responsive reductions retain each concept instead of swapping it out. */
@media (max-width:767px) {
  html.s2d-player-experimental-v1 .s2d-exp-hud-top,
  html.s2d-player-experimental-v5 .s2d-exp-hud-top { left:4.5%; right:4.5%; top:6%; }
  html.s2d-player-experimental-v1 .s2d-exp-code-c { display:none; }
  html.s2d-player-experimental-v1 .s2d-exp-cyber-title { top:74%; width:84%; }
  html.s2d-player-experimental-v2 .s2d-exp-countdown-wrap { width:min(52vw,270px); top:42%; }
  html.s2d-player-experimental-v2 .s2d-exp-film-caption { top:71%; }
  html.s2d-player-experimental-v3 .s2d-exp-vinyl-scene { width:min(66vw,340px); top:47%; }
  html.s2d-player-experimental-v3 .s2d-exp-tonearm { right:-14%; }
  html.s2d-player-experimental-v4 .s2d-exp-loader-shell { width:88%; }
  html.s2d-player-experimental-v5 .s2d-exp-cyber-title-hybrid { top:62%; width:82%; }
  html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader {
    bottom:4%;
    width:90%;
    grid-template-columns:1fr;
    gap:5px;
  }
  html.s2d-player-experimental-v5 .s2d-exp-hybrid-label,
  html.s2d-player-experimental-v5 .s2d-exp-hybrid-loader > .s2d-exp-loader-ready { display:none; }
}

/* APK/WebView: keep all five visual concepts but drop the most expensive
   continuous glitch/scan passes. */
html.s2d-display-apk.s2d-player-experimental .s2d-exp-cyber-glitch,
html.s2d-display-apk.s2d-player-experimental .s2d-exp-cyber-scan {
  animation:none !important;
}

@media (prefers-reduced-motion:reduce) {
  html.s2d-player-experimental .s2d-player-exp-stage *,
  html.s2d-player-experimental .s2d-player-exp-stage *::before,
  html.s2d-player-experimental .s2d-player-exp-stage *::after {
    animation:none !important;
    transition:none !important;
  }
  html.s2d-player-experimental-v2 .s2d-exp-countdown-number b { opacity:0 !important; }
  html.s2d-player-experimental-v2 .s2d-exp-countdown-number b:first-child { opacity:1 !important; }
  html.s2d-player-experimental .s2d-exp-filmstrip-fill { transform:scaleX(.72) !important; opacity:.92 !important; }
  html.s2d-player-experimental .s2d-exp-loader-ready { opacity:.82 !important; }
}

/* ========================================================================
   1.15.3 — layout + typography stability
   Homepage: New Domains & Services + service buttons + SEO copy.
   Detail pages: title, seasons/episodes, overview/info and AI/QR late widgets.
   ======================================================================== */

/* Use one immediate local font stack for the remaining text that looked like
   it was swapping. 700 is intentional: the page only has a synthesized 800 in
   these service controls, which can raster differently between paint phases. */
html.s2d-page-front .hm-services-hub-title,
html.s2d-page-front .hm-service-domain-btn,
html.s2d-page-front .home-main > .h1,
html.s2d-page-front .home-main > .h1 + div {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-synthesis: none;
  font-variation-settings: normal;
  text-rendering: auto;
}

html.s2d-page-front .hm-services-hub-title {
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  letter-spacing: .25px !important;
}

html.s2d-page-front .hm-service-domain-btn,
html.s2d-page-front .hm-service-domain-btn > span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  line-height: 19px !important;
  font-weight: 700 !important;
  letter-spacing: .15px !important;
  font-synthesis: none;
  font-variation-settings: normal;
}

/* The service card has one 74px row on desktop. Lock the full box so the SEO
   section below does not move if image decode/font rasterization finishes later. */
html.s2d-page-front .hm-services-hub {
  box-sizing: border-box !important;
  min-height: 154px;
  overflow-anchor: auto;
  contain: layout style;
}
html.s2d-page-front .hm-services-domain-grid { min-height: 74px; }
html.s2d-page-front .hm-service-domain-btn { min-height: 74px !important; }
html.s2d-page-front .hm-service-domain-logo {
  flex: 0 0 auto !important;
  max-width: none !important;
  max-height: none !important;
}
html.s2d-page-front .myflixer-domain-logo {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  aspect-ratio: 1 / 1;
}
html.s2d-page-front .onlyflix-domain-logo {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  aspect-ratio: 1 / 1;
}

/* SEO copy starts immediately after the service hub. Inherit a stable local
   font through the whole copy tree; headings get explicit metrics as well. */
html.s2d-page-front .home-main > .h1 {
  font-size: 36px !important;
  line-height: 40px !important;
  font-weight: 500 !important;
  min-height: 40px;
}
html.s2d-page-front .home-main > .h1 + div {
  font-size: 14px !important;
  line-height: 20px !important;
  overflow-anchor: auto;
}
html.s2d-page-front .home-main > .h1 + div p,
html.s2d-page-front .home-main > .h1 + div li,
html.s2d-page-front .home-main > .h1 + div a,
html.s2d-page-front .home-main > .h1 + div strong,
html.s2d-page-front .home-main > .h1 + div span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-synthesis: none;
  font-variation-settings: normal;
}
html.s2d-page-front .home-main > .h1 + div h1,
html.s2d-page-front .home-main > .h1 + div h2,
html.s2d-page-front .home-main > .h1 + div h3,
html.s2d-page-front .home-main > .h1 + div h4 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-synthesis: none;
  font-variation-settings: normal;
}

/* Do not let dynamic/interactive content above become the scroll anchor during
   reload restoration. The lower static copy remains eligible as the anchor. */
html.s2d-page-front .home-main .hm-logo,
html.s2d-page-front #hm-search,
html.s2d-page-front .home-main .hm-nav-buttons,
html.s2d-page-front .home-main .search-suggest {
  overflow-anchor: none;
}

@media (max-width: 980px) {
  html.s2d-page-front .hm-services-hub { min-height: 240px; }
  html.s2d-page-front .hm-services-domain-grid { min-height: 160px; }
}
@media (max-width: 600px) {
  html.s2d-page-front .hm-services-hub { min-height: 239px; }
  html.s2d-page-front .hm-services-hub-title {
    font-size: 17px !important;
    line-height: 20px !important;
  }
  html.s2d-page-front .hm-service-domain-btn,
  html.s2d-page-front .hm-service-domain-btn > span {
    font-size: 18px !important;
    line-height: 20px !important;
  }
  html.s2d-page-front .hm-services-domain-grid { min-height: 165px; }
  html.s2d-page-front .hm-service-domain-btn { min-height: 76px !important; }
}

/* -------------------------- detail-page text --------------------------- */
html.s2d-page-inner #main.page-detail,
html.s2d-page-inner #main.page-detail .single-page-title-wrap,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content,
html.s2d-page-inner #main.page-detail #seasons,
html.s2d-page-inner #main.page-detail .player_nav {
  font-family: Arial, Helvetica, sans-serif !important;
  font-synthesis: none;
  font-variation-settings: normal;
  text-rendering: auto;
}

html.s2d-page-inner #main.page-detail .single-page-title,
html.s2d-page-inner #main.page-detail .single-overview-h2,
html.s2d-page-inner #main.page-detail .mvic-desc,
html.s2d-page-inner #main.page-detail .mvic-info,
html.s2d-page-inner #main.page-detail .mvic-info p,
html.s2d-page-inner #main.page-detail .tvseason,
html.s2d-page-inner #main.page-detail .tvseason .les-title,
html.s2d-page-inner #main.page-detail .tvseason .les-content a,
html.s2d-page-inner #main.page-detail #list-eps .les-title,
html.s2d-page-inner #main.page-detail #list-eps .les-content .btn-eps,
html.s2d-page-inner #main.page-detail .aisimilar_trigger,
html.s2d-page-inner #main.page-detail .aisimilar_desc {
  font-family: Arial, Helvetica, sans-serif !important;
  font-synthesis: none;
  font-variation-settings: normal;
}

html.s2d-page-inner #main.page-detail .single-page-title-wrap {
  box-sizing: border-box;
  min-height: 42px;
  overflow-anchor: auto;
}
html.s2d-page-inner #main.page-detail .single-page-title {
  font-weight: 700 !important;
  font-synthesis: none;
}
html.s2d-page-inner #main.page-detail .single-overview-h2 {
  font-weight: 700 !important;
  font-synthesis: none;
}

/* The desktop detail grid already uses a 430px minimum description column.
   Reserve the final outer box too, before QR/AI/poster runtime work begins. */
@media (min-width: 992px) {
  html.s2d-page-inner #main.page-detail #mv-info .mvi-content {
    min-height: 470px;
    box-sizing: border-box;
  }
  html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-thumb {
    width: 140px !important;
    min-width: 140px !important;
    height: 210px !important;
    min-height: 210px !important;
    aspect-ratio: 2 / 3;
  }
}

html.s2d-page-inner #main.page-detail #seasons .tvseason {
  min-height: 62px;
  box-sizing: border-box;
  overflow-anchor: auto;
}
html.s2d-page-inner #main.page-detail .tvseason .les-content a,
html.s2d-page-inner #main.page-detail #list-eps .les-content .btn-eps {
  min-height: 31px;
  box-sizing: border-box;
}

/* Media and late widgets must never be selected as scroll anchors. Their boxes
   can finish decoding/revealing without dragging overview/episode text around. */
html.s2d-page-inner #main.page-detail .mvi-cover,
html.s2d-page-inner #main.page-detail .mvic-thumb,
html.s2d-page-inner #main.page-detail .mvic-thumb img,
html.s2d-page-inner #main.page-detail .cineby-qr,
html.s2d-page-inner #main.page-detail .wpkqcg_qrcode_wrapper,
html.s2d-page-inner #main.page-detail .wpkqcg_qrcode,
html.s2d-page-inner #main.page-detail .aisimilar_trigger,
html.s2d-page-inner #main.page-detail .s2d-media-skeleton-host,
html.s2d-page-inner #main.page-detail .s2d-media-skeleton-layer {
  overflow-anchor: none;
}

/* AI Similar used to be visible in its original right-column position and then
   get reparented to the approved bottom-center slot after DOMContentLoaded.
   Hide only that transient source state; the final slot appears once, in place. */
@media (min-width: 768px) {
  html.s2d-page-inner.s2d-skeleton-v1 #main.page-detail .mvic-btn > .aisimilar_trigger:not(.s2d-ai-desktop-moved) {
    visibility: hidden !important;
    opacity: 0 !important;
  }
  html.s2d-page-inner.s2d-skeleton-v1 #main.page-detail .s2d-ai-desktop-slot > .aisimilar_trigger {
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* QR remains cosmetic. Fade the pixels in without scale/blur promotion, which
   avoids a second compositor/raster phase next to the detail text. */
html.s2d-page-inner.s2d-skeleton-v1 #main.page-detail .mv-rating img.wpkqcg_qrcode,
html.s2d-page-inner.s2d-skeleton-v1 #main.page-detail .qr-code-mobile img.wpkqcg_qrcode,
html.s2d-page-inner.s2d-skeleton-v1 #main.page-detail .mv-rating img.wpkqcg_qrcode.s2d-qr-show,
html.s2d-page-inner.s2d-skeleton-v1 #main.page-detail .qr-code-mobile img.wpkqcg_qrcode.s2d-qr-show {
  transform: none !important;
  filter: none !important;
  will-change: opacity !important;
  transition: opacity .18s linear !important;
}


/* ========================================================================
   1.15.4 — series + breadcrumb raster/layout stability
   ======================================================================== */
/* Breadcrumbs are shared across detail types. Make their metrics local and
   integer-pixel based so no late stylesheet/font work can change the glyphs. */
html #bread,
html #bread .breadcrumb,
html #bread .breadcrumb > li,
html #bread .breadcrumb > li > a,
html #bread .breadcrumb > li > a > span,
html #bread .breadcrumb > li.active > span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  text-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}
html #bread {
  min-height: 20px;
  box-sizing: border-box;
  overflow-anchor: none;
}
html #bread .breadcrumb {
  min-height: 20px;
  box-sizing: border-box;
}

/* single-tvshows2 has a different DOM from movie pages: #seasons lives directly
   inside #mv-info, after the hero/controls. The old #content-embed #seasons
   reservation therefore missed the TV page completely. */
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout .single-page-title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  text-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .tvseason,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-title,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-title strong,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-content,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-content a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  text-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .tvseason {
  min-height: 62px !important;
  box-sizing: border-box !important;
  overflow-anchor: none;
}
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-title,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-title strong {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-content a {
  font-size: 12px !important;
  line-height: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  min-height: 31px !important;
  box-sizing: border-box !important;
}

/* fa-server is a webfont glyph. It visibly disappears/reappears in the supplied
   reload video and can shift the Season text. Keep the same semantic cue but
   render it as three CSS bars in a permanently reserved slot. */
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-title .fa-server {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0 !important;
  line-height: 14px !important;
  transform: none !important;
}
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout #seasons .les-title .fa-server::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  top: 1px !important;
  width: 12px !important;
  height: 3px !important;
  border-radius: 1px !important;
  background: currentColor !important;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor !important;
  transform: none !important;
}

@media (max-width: 767px) {
  html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout .single-page-title {
    font-size: 14px !important;
    line-height: 17px !important;
    letter-spacing: 1px !important;
  }
}

/* ========================================================================
   1.15.5 — metadata links, rating plates and footer raster stability
   ======================================================================== */
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info p,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info strong,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info span,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info a,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .complete-casts,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .complete-casts a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  text-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info strong {
  font-weight: 700 !important;
}
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info a,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .complete-casts a {
  font-weight: 400 !important;
}
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info p {
  min-height: 16px;
  margin-top: 0 !important;
  margin-bottom: 3px !important;
  box-sizing: border-box;
}
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info .mvici-left,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .mvic-info .mvici-right {
  line-height: 16px !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

html.s2d-page-inner #main.page-detail #mv-info .mvi-content .imdb-r,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .rating-green,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .rating-orange,
html.s2d-page-inner #main.page-detail #mv-info .mvi-content .rating-red {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  min-width: 20px !important;
  height: 17px !important;
  min-height: 17px !important;
  padding: 0 5px !important;
  margin: 0 0 0 2px !important;
  border-radius: 3px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-size: 11px !important;
  line-height: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  text-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

html #footer,
html #footer .footer-link,
html #footer .footer-link-head,
html #footer .footer-link a,
html #footer .footer-subs,
html #footer .footer-subs a,
html #footer .footer-copyright,
html #footer .footer-copyright p,
html #footer .footer-copyright span,
html #footer .footer-tags,
html #footer .footer-tags a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
  text-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}
html #footer .footer-link-head {
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}
html #footer .footer-link a,
html #footer .footer-subs,
html #footer .footer-subs a,
html #footer .footer-copyright,
html #footer .footer-copyright p,
html #footer .footer-copyright span,
html #footer .footer-tags a {
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 400 !important;
}
html #footer i.fa,
html #footer .fa {
  font-family: FontAwesome !important;
  font-synthesis: none !important;
}
html.s2d-raster-logo-on #footer #logo-footer,
html.s2d-raster-logo-on #footer img.mv-ft-logo {
  content: var(--s2d-footer-logo-firstpaint) !important;
  display: inline-block !important;
  width: 350px !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 350 / 110 !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  image-rendering: auto !important;
}
html.s2d-raster-logo-on #footer .footer-copyright > p:has(#logo-footer),
html.s2d-raster-logo-on #footer .footer-copyright > p:has(img.mv-ft-logo) {
  min-height: 110px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
  overflow-anchor: none;
}


/* ========================================================================
   1.15.6 — branded typography restore after stability pass
   ======================================================================== */
/* H1 + Overview: restore the exact tracking/sizing from cineby-api-popular.css,
   but use the same stable Oswald alias as the header menu. This removes the
   accidental 1px TV-title tracking introduced by 1.15.4. */
html.s2d-page-inner #main.page-detail .single-page-title,
html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout .single-page-title {
  font-family: "S2D Oswald Stable", "Oswald", "Arial Narrow", Arial, sans-serif !important;
  font-size: 2rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  font-kerning: auto !important;
  font-variant-ligatures: normal !important;
  font-synthesis: weight !important;
  text-rendering: auto !important;
}
html.s2d-page-inner #main.page-detail .single-overview-h2 {
  font-family: "S2D Oswald Stable", "Oswald", "Arial Narrow", Arial, sans-serif !important;
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  font-kerning: auto !important;
  font-variant-ligatures: normal !important;
  font-synthesis: weight !important;
  text-rendering: auto !important;
}

/* Breadcrumbs: keep the 1.15.4 fixed geometry, but make the typography branded
   and identical to the menu's already-preloaded Oswald face. */
html #bread,
html #bread .breadcrumb,
html #bread .breadcrumb > li,
html #bread .breadcrumb > li > a,
html #bread .breadcrumb > li > a > span,
html #bread .breadcrumb > li.active > span {
  font-family: "S2D Oswald Stable", "Oswald", "Arial Narrow", Arial, sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-kerning: auto !important;
  font-variant-ligatures: normal !important;
  font-synthesis: none !important;
  text-rendering: auto !important;
}

/* Footer: 1.15.5 fixed the raster jitter by pinning everything to 11px Arial,
   but that was visually regressive. Restore Cineby's original sizes while
   retaining the no-transform/no-transition stability rules from 1.15.5. */
html #footer,
html #footer .footer-link,
html #footer .footer-link-head,
html #footer .footer-link a,
html #footer .footer-subs,
html #footer .footer-subs p,
html #footer .footer-subs a,
html #footer .footer-copyright,
html #footer .footer-copyright p,
html #footer .footer-copyright span,
html #footer .footer-copyright a,
html #footer .footer-tags,
html #footer .footer-tags a {
  font-family: "S2D Oswald Stable", "Oswald", "Arial Narrow", Arial, sans-serif !important;
  font-style: normal !important;
  font-kerning: auto !important;
  font-variant-ligatures: normal !important;
  font-synthesis: none !important;
  text-rendering: auto !important;
}
html #footer .footer-link-head {
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-synthesis: weight !important;
}
html #footer .footer-link a,
html #footer .footer-subs,
html #footer .footer-subs p,
html #footer .footer-subs a,
html #footer .footer-copyright,
html #footer .footer-copyright p,
html #footer .footer-copyright span,
html #footer .footer-copyright a {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
/* The disclaimer was explicitly 11/14 in the original footer template. */
html #footer .footer-copyright p[style*="font-size: 11px"],
html #footer .footer-copyright p[style*="font-size:11px"] {
  font-size: 11px !important;
  line-height: 14px !important;
}
html #footer .footer-tags a {
  font-size: 12px !important;
  line-height: 20px !important;
  font-weight: 300 !important;
  letter-spacing: .5px !important;
}

@media (max-width: 767px) {
  html.s2d-page-inner #main.page-detail .single-page-title,
  html.s2d-page-inner #main.page-detail #mv-info.single-tvshows2-layout .single-page-title {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    letter-spacing: .03em !important;
  }
  html.s2d-page-inner #main.page-detail .single-overview-h2 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    letter-spacing: .03em !important;
  }
}


/* ========================================================================== 
   1.15.7 — Trailer modal visual lab (?s2d_trailer_modal=1..3)
   QA-only. Clean production URLs keep the legacy trailer modal untouched.
   ========================================================================== */
html.s2d-trailer-modal-lab.s2d-trailer-modal-open .modal-backdrop.in {
  opacity: .70 !important;
  background: #071014 !important;
  -webkit-backdrop-filter: blur(5px) saturate(85%);
  backdrop-filter: blur(5px) saturate(85%);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced {
  --s2d-trailer-accent: #69ddd7;
  --s2d-trailer-accent-2: #9b7cff;
  --s2d-trailer-ink: #f7fbff;
  --s2d-trailer-muted: rgba(236,244,250,.70);
  --s2d-trailer-panel: rgba(13,18,22,.86);
  --s2d-trailer-border: rgba(255,255,255,.14);
  --s2d-trailer-shadow: 0 28px 80px rgba(0,0,0,.42);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
html.night-mode.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced,
html.s2d-trailer-modal-lab body.night-mode #pop-trailer.s2d-trailer-modal-enhanced {
  --s2d-trailer-panel: rgba(6,10,13,.92);
  --s2d-trailer-border: rgba(255,255,255,.12);
  --s2d-trailer-shadow: 0 34px 90px rgba(0,0,0,.64);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-dialog {
  width: min(1040px, calc(100vw - 48px));
  margin: 54px auto 30px;
  transform: none !important;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-content {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--s2d-trailer-border);
  border-radius: 20px;
  background: var(--s2d-trailer-panel);
  box-shadow: var(--s2d-trailer-shadow);
  isolation: isolate;
  transform: translateZ(0);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
  position: relative;
  z-index: 20;
  min-height: 66px;
  padding: 0 76px 0 26px;
  display: flex;
  align-items: center;
  border: 0;
  background: rgba(16,22,26,.78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  text-align: left;
  color: var(--s2d-trailer-ink);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header h4,
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-title {
  overflow: hidden;
  margin: 0;
  color: inherit !important;
  font: 700 18px/1.25 Arial, Helvetica, sans-serif !important;
  letter-spacing: -.015em !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  opacity: .82;
  text-shadow: none;
  transition: opacity .18s ease, background-color .18s ease, transform .18s ease;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close:hover {
  opacity: 1;
  background: rgba(255,255,255,.15);
  transform: translateY(-50%) scale(1.04);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-body,
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-body-trailer {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-shell {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  background: #080c0f;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(105,221,215,.16), transparent 32%),
    linear-gradient(145deg, #161c22, #080c0f 70%);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash,
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash {
  overflow: hidden;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: #0d1216;
  background-image: var(--s2d-trailer-splash, none);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: left;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transform: scale(1.001);
  transition: opacity .28s ease, visibility .28s ease, transform .42s cubic-bezier(.2,.75,.25,1);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(4,7,9,.10) 0%, rgba(4,7,9,.02) 40%, rgba(4,7,9,.78) 100%);
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash-loading:not(.s2d-trailer-has-splash) .s2d-trailer-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 48%, transparent 66%);
  background-size: 220% 100%;
  animation: s2d-trailer-shimmer 1.4s linear infinite;
  pointer-events: none;
}
@keyframes s2d-trailer-shimmer { to { background-position: -220% 0; } }
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-ambient {
  position: absolute;
  inset: -18%;
  z-index: 1;
  background:
    radial-gradient(circle at 48% 45%, color-mix(in srgb, var(--s2d-trailer-accent) 25%, transparent), transparent 25%),
    radial-gradient(circle at 78% 75%, color-mix(in srgb, var(--s2d-trailer-accent-2) 20%, transparent), transparent 28%);
  filter: blur(28px);
  opacity: .7;
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, rgba(4,7,10,.25), transparent 48%, rgba(4,7,10,.16));
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-topline {
  position: absolute;
  top: 22px;
  left: 24px;
  right: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-kicker,
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-source-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8,12,15,.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
  font: 700 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 6;
  max-width: 72%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy-title {
  overflow: hidden;
  color: #fff;
  font: 700 clamp(20px, 2.6vw, 34px)/1.08 Arial, Helvetica, sans-serif;
  letter-spacing: -.025em;
  text-shadow: 0 2px 18px rgba(0,0,0,.48);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy-sub {
  color: rgba(255,255,255,.68);
  font: 400 13px/1.3 Arial, Helvetica, sans-serif;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 50%;
  background: rgba(9,14,18,.26);
  box-shadow: 0 14px 36px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  transition: transform .26s ease, background-color .26s ease, border-color .26s ease;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(105,221,215,.96), rgba(78,184,202,.96));
  box-shadow: 0 10px 30px rgba(75,214,209,.28);
  color: #062124;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon svg {
  width: 58px;
  height: 58px;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash:hover .s2d-trailer-play-ring { transform: scale(1.07); border-color: rgba(255,255,255,.5); }
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash:hover .s2d-trailer-play-icon { transform: scale(1.06); }
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-frame {
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  background: #000;
  transition: opacity .24s ease, visibility .24s ease;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  background: #000;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-is-playing .s2d-trailer-splash {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  pointer-events: none;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-is-playing .s2d-trailer-frame {
  opacity: 1;
  visibility: visible;
}
html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail { display: none; }

/* Variant 1 — Cinematic Glass */
html.s2d-trailer-modal-v1 #pop-trailer.s2d-trailer-modal-enhanced .modal-content {
  background:
    linear-gradient(145deg, rgba(22,29,35,.88), rgba(8,12,15,.92)),
    rgba(8,12,15,.92);
  border-color: rgba(255,255,255,.18);
}
html.s2d-trailer-modal-v1 #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
  background: linear-gradient(180deg, rgba(27,35,42,.90), rgba(18,24,29,.72));
}
html.s2d-trailer-modal-v1 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-stage { margin: 0; }
html.s2d-trailer-modal-v1 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-stage::before {
  content: '';
  position: absolute;
  inset: 16px;
  z-index: 12;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: inset 0 0 50px rgba(255,255,255,.025);
  pointer-events: none;
}

/* Variant 2 — Immersive Full-Bleed */
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-dialog {
  width: min(1140px, calc(100vw - 36px));
  margin-top: 34px;
}
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-content {
  border-radius: 24px;
  background: #050809;
}
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 74px;
  background: linear-gradient(180deg, rgba(3,6,8,.72), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header h4 { display: none; }
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close {
  top: 24px;
  right: 24px;
  transform: none;
  pointer-events: auto;
  background: rgba(5,9,11,.52);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close:hover { transform: scale(1.04); }
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy {
  left: clamp(28px, 4vw, 52px);
  bottom: clamp(28px, 4vw, 48px);
}
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-topline {
  top: 28px;
  left: clamp(28px, 4vw, 52px);
  right: 82px;
}
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play { width: 104px; height: 104px; }
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon { width: 70px; height: 70px; }
html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash::before {
  background:
    linear-gradient(90deg, rgba(2,5,6,.30), transparent 42%),
    linear-gradient(180deg, rgba(2,5,6,.14) 0%, transparent 48%, rgba(2,5,6,.82) 100%);
}

/* Variant 3 — Trailer Card + Info Rail */
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .modal-dialog {
  width: min(1180px, calc(100vw - 44px));
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .modal-content {
  background: #0b1014;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
  min-height: 62px;
  background: #0f1519;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-shell {
  grid-template-columns: minmax(0, 1fr) 310px;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-stage {
  aspect-ratio: 16 / 9;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy { display: none; }
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-topline .s2d-trailer-kicker { display: none; }
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 36px 30px 30px;
  flex-direction: column;
  align-items: flex-start;
  background:
    radial-gradient(circle at 100% 0%, rgba(105,221,215,.12), transparent 36%),
    linear-gradient(160deg, #121a20, #0a0f13 72%);
  border-left: 1px solid rgba(255,255,255,.09);
  color: #fff;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-eyebrow {
  margin-bottom: 15px;
  color: var(--s2d-trailer-accent);
  font: 700 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-title {
  margin: 0 0 14px;
  color: #fff;
  font: 700 25px/1.12 Arial, Helvetica, sans-serif;
  letter-spacing: -.025em;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-copy {
  margin: 0 0 22px;
  color: rgba(230,239,245,.62);
  font: 400 13px/1.55 Arial, Helvetica, sans-serif;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: auto;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-meta span {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.62);
  font: 700 10px/1 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-play {
  width: 100%;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 13px 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #69ddd7, #55c5d5);
  box-shadow: 0 12px 28px rgba(84,206,207,.16);
  color: #062125;
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-play:hover { transform: translateY(-1px); box-shadow: 0 15px 34px rgba(84,206,207,.24); }
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-play-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(6,33,37,.11);
}
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-play-icon svg { width: 28px; height: 28px; }
html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-is-playing .s2d-trailer-rail { opacity: .48; pointer-events: none; }

/* Light theme: keep the surrounding shell airy while the video itself stays
   cinematic. Dark mode variables above naturally retain the deeper chrome. */
html:not(.night-mode).s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-content {
  --s2d-trailer-panel: rgba(246,250,252,.94);
  --s2d-trailer-border: rgba(33,55,64,.13);
  --s2d-trailer-shadow: 0 28px 75px rgba(33,48,58,.24);
}
html:not(.night-mode).s2d-trailer-modal-v1 #pop-trailer.s2d-trailer-modal-enhanced .modal-content {
  background:
    linear-gradient(145deg, rgba(250,253,254,.96), rgba(229,239,243,.94)),
    #eef5f7;
}
html:not(.night-mode).s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
  background: rgba(246,250,252,.88);
  color: #172127;
  border-bottom: 1px solid rgba(28,48,56,.08);
}
html:not(.night-mode).s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close {
  border-color: rgba(20,45,54,.11);
  background: rgba(20,45,54,.05);
  color: #26383f;
}
html:not(.night-mode).s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
  background: linear-gradient(180deg, rgba(2,6,8,.62), transparent);
  border: 0;
  color: #fff;
}
html:not(.night-mode).s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close { color: #fff; background: rgba(5,9,11,.46); border-color: rgba(255,255,255,.14); }
html:not(.night-mode).s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .modal-header { background: #f4f8fa; }
html:not(.night-mode).s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail {
  background:
    radial-gradient(circle at 100% 0%, rgba(105,221,215,.20), transparent 38%),
    linear-gradient(160deg, #edf5f7, #dfe9ed 75%);
  border-left-color: rgba(25,51,60,.10);
  color: #17242a;
}
html:not(.night-mode).s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-title { color: #17242a; }
html:not(.night-mode).s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-copy { color: rgba(23,36,42,.64); }
html:not(.night-mode).s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-meta span { color: rgba(23,36,42,.66); border-color: rgba(23,36,42,.09); background: rgba(255,255,255,.38); }

@media (max-width: 900px) {
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-dialog {
    width: calc(100vw - 24px);
    margin: 24px auto 18px;
  }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-shell { grid-template-columns: 1fr; }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail {
    min-height: 0;
    padding: 22px 22px 20px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.09);
  }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-meta { margin-bottom: 0; }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-play { margin-top: 20px; }
}
@media (max-width: 600px) {
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-dialog {
    width: calc(100vw - 14px);
    margin: 10px auto;
  }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-content { border-radius: 14px; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header {
    min-height: 54px;
    padding: 0 58px 0 16px;
  }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header h4,
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-title { font-size: 15px !important; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close { right: 11px; width: 34px; height: 34px; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-topline { top: 13px; left: 13px; right: 13px; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-source-label { display: none; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy { left: 16px; right: 16px; bottom: 15px; max-width: 78%; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy-title { font-size: 19px; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-copy-sub { display: none; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play { width: 72px; height: 72px; }
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon { width: 52px; height: 52px; }
  html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header { min-height: 56px; }
  html.s2d-trailer-modal-v2 #pop-trailer.s2d-trailer-modal-enhanced .modal-header .close { top: 12px; right: 12px; }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail { padding: 18px 17px 16px; }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-title { font-size: 20px; }
  html.s2d-trailer-modal-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-rail-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced *,
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced *::before,
  html.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}


/* ========================================================================== 
   1.15.8 — Trailer modal v1 mobile centering QA fix
   Still QA-only: applies exclusively to explicit ?s2d_trailer_modal=1.
   ========================================================================== */
@media (max-width: 600px) {
  /* Bootstrap 3 may inject scrollbar compensation as inline padding-right on
     the modal. 100vw on the dialog then makes the card look shifted left.
     Make the modal itself the centering box and let auto flex margins absorb
     the available vertical space. If the card ever becomes taller than the
     viewport, the auto margins collapse instead of clipping its top edge. */
  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced.in {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: max(7px, env(safe-area-inset-right)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding-left: max(7px, env(safe-area-inset-left)) !important;
  }

  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-dialog {
    flex: 0 0 auto !important;
    align-self: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 560px !important;
    margin-top: auto !important;
    margin-right: auto !important;
    margin-bottom: auto !important;
    margin-left: auto !important;
  }

  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .modal-content,
  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-shell,
  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-stage {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The legacy/global SVG rules leave the triangle optically ~4 px right and
     ~4 px low inside the cyan disc on the phone layout. Pin the SVG itself to
     the disc centre and compensate that raster offset. */
  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
  }

  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon svg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    transform: translate(calc(-50% - 4px), calc(-50% - 4px)) !important;
    transform-origin: 50% 50% !important;
  }
}

/* ========================================================================== 
   1.15.9 — Trailer modal v1 QA: reuse the production splash Play exactly.
   The custom trailer ring/icon has been retired. The modal now uses the same
   .s2d-player-play-control / .s2d-player-play-disc markup and SVG as the title
   splash, so desktop and mobile share the exact same geometry and optical
   centering. Still QA-only via explicit ?s2d_trailer_modal=1.
   ========================================================================== */
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-topline,
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-kicker,
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-source-label {
  display: none !important;
}

/* Keep the title splash Play completely identical to the production player.
   Only the hover selector needs a modal-scoped equivalent because the original
   title selector is intentionally scoped to #mv-info. */
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab.s2d-player-play-preview #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash > .s2d-player-play-control {
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
}
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab.s2d-player-play-preview #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash:hover > .s2d-player-play-control {
  transform: translate(-50%,-50%) scale(1.065);
}
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab.s2d-player-play-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash:hover > .s2d-player-play-control::before,
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab.s2d-player-play-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash:hover > .s2d-player-play-control::after {
  opacity: 1;
}
html.s2d-trailer-modal-v1.s2d-trailer-modal-lab.s2d-player-play-v3 #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-splash:hover .s2d-player-play-disc {
  box-shadow: inset 0 0 0 5px rgba(108,221,215,.15), inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px rgba(0,0,0,.32), 0 0 28px rgba(108,221,215,.25);
}

/* 1.15.8 contained optical compensation for the now-retired custom trailer
   triangle. Neutralise it explicitly so no stale cached rule can affect the
   production player SVG that is now reused in the modal. */
@media (max-width: 600px) {
  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon,
  html.s2d-trailer-modal-v1.s2d-trailer-modal-lab #pop-trailer.s2d-trailer-modal-enhanced .s2d-trailer-play-icon svg {
    display: none !important;
  }
}