/* =========================================================
   SPORTIVA Floating Icon Player v2
   - Default 50x50 seperti clickable watermark YouTube
   - 20 efek transisi premium, diatur dari panel
   ========================================================= */

html body #featuredPlayer.sp-floating-icon-ready,
html body .featured-player.sp-floating-icon-ready,
html body .watch-player-container.sp-floating-icon-ready {
  position: relative !important;
}

html body .sp-floating-icon-host {
  --sp-icon-size: 50px;
  --sp-icon-offset-x: 24px;
  --sp-icon-offset-y: 82px;
  --sp-animation-ms: 900ms;
  position: absolute;
  width: var(--sp-icon-size);
  height: var(--sp-icon-size);
  z-index: 38;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.9);
  transition:
    opacity var(--sp-animation-ms) ease,
    transform var(--sp-animation-ms) cubic-bezier(.18,.89,.32,1.28),
    filter var(--sp-animation-ms) ease;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
  contain: layout paint;
  will-change: opacity, transform, filter;
}

html body .sp-floating-icon-host[data-position="bottom_right"] { right: var(--sp-icon-offset-x); bottom: var(--sp-icon-offset-y); }
html body .sp-floating-icon-host[data-position="bottom_left"] { left: var(--sp-icon-offset-x); bottom: var(--sp-icon-offset-y); }
html body .sp-floating-icon-host[data-position="top_right"] { right: var(--sp-icon-offset-x); top: var(--sp-icon-offset-y); }
html body .sp-floating-icon-host[data-position="top_left"] { left: var(--sp-icon-offset-x); top: var(--sp-icon-offset-y); }

html body .sp-floating-icon-host.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

html body .sp-floating-icon-host.is-exit {
  opacity: 0;
  transform: translate3d(0, -6px, 0) scale(.9) rotate(-2deg);
  filter: blur(1px) drop-shadow(0 10px 18px rgba(0,0,0,.48));
}

html body .sp-floating-icon-link {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 30% 18%, rgba(183,240,19,.26), transparent 38%),
    linear-gradient(145deg, rgba(5,5,5,.82), rgba(10,13,17,.58));
  border: 1px solid rgba(183,240,19,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 4px rgba(183,240,19,.10),
    0 0 24px rgba(183,240,19,.28),
    0 14px 30px rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  text-decoration: none;
  transform-origin: center center;
}

html body .sp-floating-icon-link::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(from 0deg, transparent, rgba(183,240,19,.55), transparent 34%, rgba(0,255,144,.42), transparent 70%);
  opacity: .62;
  animation: spIconSpin 4s linear infinite;
  z-index: -2;
}

html body .sp-floating-icon-link::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(0,0,0,.72), rgba(22,25,29,.44));
  z-index: -1;
}

html body .sp-floating-icon-fx,
html body .sp-floating-icon-fx::before,
html body .sp-floating-icon-fx::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  content: "";
}

html body .sp-floating-icon-img {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 4px;
  border-radius: 10px;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, filter, opacity;
}

html body .sp-floating-icon-fallback {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #b7f013;
  font-size: calc(var(--sp-icon-size) * .42);
  font-weight: 900;
}

html body .sp-floating-icon-link:hover,
html body .sp-floating-icon-link:focus-visible {
  transform: translateY(-2px) scale(1.05);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 0 5px rgba(183,240,19,.18),
    0 0 32px rgba(183,240,19,.50),
    0 18px 38px rgba(0,0,0,.62);
}

html body .sp-floating-icon-host.is-paused {
  opacity: .38;
  pointer-events: none;
}

html body .sp-floating-icon-host.is-paused .sp-floating-icon-link::before {
  animation-play-state: paused;
}

@keyframes spIconSpin { to { transform: rotate(360deg); } }

/* =========================================================
   20 EFEK TRANSISI
   ========================================================= */

/* 01 Neon Zoom In */
html body .sp-floating-icon-host.is-enter[data-effect="neon_zoom"] { animation: spNeonZoom var(--sp-animation-ms) cubic-bezier(.16,1,.3,1) both; }
html body .sp-floating-icon-host.is-enter[data-effect="neon_zoom"] .sp-floating-icon-fx::before { box-shadow: 0 0 0 0 rgba(183,240,19,.72); animation: spRingOut var(--sp-animation-ms) ease-out both; }

/* 02 Energy Burst */
html body .sp-floating-icon-host.is-enter[data-effect="energy_burst"] { animation: spEnergyBurst var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="energy_burst"] .sp-floating-icon-fx::before {
  inset: -120%;
  background: conic-gradient(from 30deg, transparent, rgba(183,240,19,.95), transparent 12%, rgba(0,255,144,.86), transparent 24%, rgba(255,255,255,.85), transparent 36%);
  animation: spEnergyRay var(--sp-animation-ms) ease-out both;
}

/* 03 Stadium Flash */
html body .sp-floating-icon-host.is-enter[data-effect="stadium_flash"] { animation: spStadiumFlash var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="stadium_flash"] .sp-floating-icon-fx::before { background: rgba(255,255,255,.95); animation: spFlash var(--sp-animation-ms) ease-out both; }

/* 04 Camera Shutter */
html body .sp-floating-icon-host.is-enter[data-effect="camera_shutter"] { animation: spCameraPop var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="camera_shutter"] .sp-floating-icon-fx::before {
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.72) 0 6px, rgba(255,255,255,.28) 6px 9px, transparent 9px 14px);
  transform-origin: left center;
  animation: spShutter var(--sp-animation-ms) ease-out both;
}

/* 05 Glitch Broadcast */
html body .sp-floating-icon-host.is-enter[data-effect="glitch_broadcast"] { animation: spGlitchHost var(--sp-animation-ms) steps(2,end) both; }
html body .sp-floating-icon-host.is-enter[data-effect="glitch_broadcast"] .sp-floating-icon-img { animation: spGlitchImg var(--sp-animation-ms) steps(2,end) both; }
html body .sp-floating-icon-host.is-enter[data-effect="glitch_broadcast"] .sp-floating-icon-fx::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px); animation: spScanNoise var(--sp-animation-ms) linear both; }

/* 06 Goal Celebration */
html body .sp-floating-icon-host.is-enter[data-effect="goal_celebration"] { animation: spGoalBounce var(--sp-animation-ms) cubic-bezier(.2,1.35,.35,1) both; }
html body .sp-floating-icon-host.is-enter[data-effect="goal_celebration"] .sp-floating-icon-fx::before {
  inset: -45%;
  background: radial-gradient(circle at 20% 30%, #b7f013 0 4px, transparent 5px), radial-gradient(circle at 80% 22%, #fff 0 3px, transparent 4px), radial-gradient(circle at 70% 80%, #00ff90 0 4px, transparent 5px), radial-gradient(circle at 28% 78%, #b7f013 0 3px, transparent 4px);
  animation: spConfetti var(--sp-animation-ms) ease-out both;
}

/* 07 HUD Scan */
html body .sp-floating-icon-host.is-enter[data-effect="hud_scan"] { animation: spHudIn var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="hud_scan"] .sp-floating-icon-fx::before { background: linear-gradient(180deg, transparent 0 35%, rgba(183,240,19,.9) 48%, rgba(255,255,255,.7) 50%, rgba(0,255,144,.55) 52%, transparent 65%); animation: spHudScan var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="hud_scan"] .sp-floating-icon-fx::after { border: 1px solid rgba(183,240,19,.75); box-shadow: 0 0 0 4px rgba(183,240,19,.12) inset; animation: spHudGrid var(--sp-animation-ms) ease-out both; }

/* 08 Sport Replay Zoom */
html body .sp-floating-icon-host.is-enter[data-effect="sport_replay_zoom"] { animation: spReplayZoom var(--sp-animation-ms) cubic-bezier(.12,.82,.16,1) both; }
html body .sp-floating-icon-host.is-enter[data-effect="sport_replay_zoom"] .sp-floating-icon-fx::before { inset: -26%; border: 2px solid rgba(255,255,255,.85); animation: spReplayRing var(--sp-animation-ms) ease-out both; }

/* 09 Light Sweep */
html body .sp-floating-icon-host.is-enter[data-effect="light_sweep"] { animation: spLightIn var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="light_sweep"] .sp-floating-icon-fx::before { inset: -30%; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.98) 45%, rgba(183,240,19,.66) 50%, transparent 70%); transform: translateX(-110%); animation: spLightSweep var(--sp-animation-ms) ease-out both; }

/* 10 Smoke Reveal */
html body .sp-floating-icon-host.is-enter[data-effect="smoke_reveal"] { animation: spSmokeHost var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="smoke_reveal"] .sp-floating-icon-fx::before { inset: -35%; background: radial-gradient(circle at 25% 35%, rgba(255,255,255,.32), transparent 24%), radial-gradient(circle at 75% 65%, rgba(183,240,19,.24), transparent 26%), radial-gradient(circle at 50% 80%, rgba(255,255,255,.22), transparent 28%); filter: blur(5px); animation: spSmoke var(--sp-animation-ms) ease-out both; }

/* 11 Matrix Digital */
html body .sp-floating-icon-host.is-enter[data-effect="matrix_digital"] { animation: spMatrixIn var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="matrix_digital"] .sp-floating-icon-fx::before { background: repeating-linear-gradient(90deg, rgba(183,240,19,.8) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(0,255,144,.26) 0 2px, transparent 2px 8px); mix-blend-mode: screen; animation: spMatrixRain var(--sp-animation-ms) linear both; }

/* 12 Spin Flip */
html body .sp-floating-icon-host.is-enter[data-effect="spin_flip"] { transform-style: preserve-3d; animation: spSpinFlip var(--sp-animation-ms) cubic-bezier(.16,1,.3,1) both; }

/* 13 Bounce Pop */
html body .sp-floating-icon-host.is-enter[data-effect="bounce_pop"] { animation: spBouncePop var(--sp-animation-ms) cubic-bezier(.2,1.5,.35,1) both; }

/* 14 Slide From Right */
html body .sp-floating-icon-host.is-enter[data-effect="slide_right"] { animation: spSlideRight var(--sp-animation-ms) cubic-bezier(.16,1,.3,1) both; }

/* 15 Slide From Bottom */
html body .sp-floating-icon-host.is-enter[data-effect="slide_bottom"] { animation: spSlideBottom var(--sp-animation-ms) cubic-bezier(.16,1,.3,1) both; }

/* 16 Pulse Glow */
html body .sp-floating-icon-host.is-enter[data-effect="pulse_glow"] { animation: spPulseGlow var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="pulse_glow"] .sp-floating-icon-link { animation: spPulseGlowLink var(--sp-animation-ms) ease-out both; }

/* 17 Cyber Ring */
html body .sp-floating-icon-host.is-enter[data-effect="cyber_ring"] { animation: spCyberIn var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="cyber_ring"] .sp-floating-icon-fx::before { inset: -28%; border: 2px dashed rgba(183,240,19,.88); border-radius: 999px; animation: spCyberRing var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="cyber_ring"] .sp-floating-icon-fx::after { inset: -12%; border: 1px solid rgba(0,255,144,.68); border-radius: 999px; animation: spCyberRing2 var(--sp-animation-ms) ease-out both; }

/* 18 Lens Flare */
html body .sp-floating-icon-host.is-enter[data-effect="lens_flare"] { animation: spLensHost var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="lens_flare"] .sp-floating-icon-fx::before { inset: -80%; background: radial-gradient(circle, rgba(255,255,255,.95) 0 4%, rgba(183,240,19,.65) 5% 9%, transparent 18%), linear-gradient(110deg, transparent 38%, rgba(255,255,255,.88) 49%, transparent 60%); animation: spLensFlare var(--sp-animation-ms) ease-out both; }

/* 19 TV Signal Distortion */
html body .sp-floating-icon-host.is-enter[data-effect="tv_signal"] { animation: spTvSignal var(--sp-animation-ms) steps(3,end) both; }
html body .sp-floating-icon-host.is-enter[data-effect="tv_signal"] .sp-floating-icon-fx::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px), linear-gradient(90deg, rgba(255,0,80,.16), rgba(0,255,144,.14)); animation: spTvNoise var(--sp-animation-ms) steps(5,end) both; }

/* 20 Spotlight Reveal */
html body .sp-floating-icon-host.is-enter[data-effect="spotlight_reveal"] { animation: spSpotlightHost var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="spotlight_reveal"] .sp-floating-icon-link { clip-path: circle(0% at 50% 50%); animation: spSpotlightClip var(--sp-animation-ms) ease-out both; }
html body .sp-floating-icon-host.is-enter[data-effect="spotlight_reveal"] .sp-floating-icon-fx::before { inset: -80%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.82), rgba(183,240,19,.35) 15%, transparent 42%); animation: spSpotlightBeam var(--sp-animation-ms) ease-out both; }

@keyframes spNeonZoom { 0%{opacity:0;transform:scale(.28) rotate(-10deg);filter:blur(7px) brightness(2.5)} 60%{opacity:1;transform:scale(1.16) rotate(2deg);filter:blur(0) brightness(1.35)} 100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))} }
@keyframes spRingOut { 0%{opacity:.95;box-shadow:0 0 0 0 rgba(183,240,19,.7)} 100%{opacity:0;box-shadow:0 0 0 22px rgba(183,240,19,0)} }
@keyframes spEnergyBurst { 0%{opacity:0;transform:scale(.18) rotate(-22deg)} 40%{opacity:1;transform:scale(1.22) rotate(4deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes spEnergyRay { 0%{opacity:0;transform:scale(.2) rotate(0)} 35%{opacity:.75} 100%{opacity:0;transform:scale(1.2) rotate(140deg)} }
@keyframes spStadiumFlash { 0%{opacity:0;transform:scale(.86);filter:brightness(4)} 18%{opacity:1;transform:scale(1.08);filter:brightness(3)} 100%{opacity:1;transform:scale(1);filter:brightness(1)} }
@keyframes spFlash { 0%,20%{opacity:.95} 100%{opacity:0} }
@keyframes spCameraPop { 0%{opacity:0;transform:scale(.92)} 50%{opacity:1;transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} }
@keyframes spShutter { 0%{opacity:.95;transform:scaleX(1)} 55%{opacity:.65;transform:scaleX(.2)} 100%{opacity:0;transform:scaleX(0)} }
@keyframes spGlitchHost { 0%{opacity:0;transform:translateX(-8px) skewX(-8deg)} 22%{opacity:1;transform:translateX(6px) skewX(7deg)} 44%{transform:translateX(-3px) skewX(-4deg)} 70%{transform:translateX(2px) skewX(2deg)} 100%{opacity:1;transform:translateX(0) skewX(0)} }
@keyframes spGlitchImg { 0%{filter:hue-rotate(100deg) contrast(1.6);transform:translate(2px,-1px)} 25%{filter:hue-rotate(-70deg) contrast(1.8);transform:translate(-3px,1px)} 50%{filter:contrast(1.2);transform:translate(2px,2px)} 100%{filter:none;transform:none} }
@keyframes spScanNoise { from{opacity:.7;background-position:0 -30px} to{opacity:0;background-position:0 30px} }
@keyframes spGoalBounce { 0%{opacity:0;transform:translateY(24px) scale(.4)} 45%{opacity:1;transform:translateY(-10px) scale(1.15)} 70%{transform:translateY(4px) scale(.96)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes spConfetti { 0%{opacity:0;transform:scale(.2) rotate(0)} 30%{opacity:1} 100%{opacity:0;transform:scale(1.55) rotate(80deg)} }
@keyframes spHudIn { 0%{opacity:0;transform:scale(.88)} 100%{opacity:1;transform:scale(1)} }
@keyframes spHudScan { 0%{opacity:0;transform:translateY(-120%)} 35%{opacity:.9} 100%{opacity:0;transform:translateY(120%)} }
@keyframes spHudGrid { 0%{opacity:0;transform:scale(1.3)} 45%{opacity:.75;transform:scale(1)} 100%{opacity:0;transform:scale(.92)} }
@keyframes spReplayZoom { 0%{opacity:0;transform:scale(2.2);filter:blur(8px)} 55%{opacity:1;transform:scale(.88);filter:blur(0)} 100%{opacity:1;transform:scale(1)} }
@keyframes spReplayRing { 0%{opacity:.8;transform:scale(.4)} 100%{opacity:0;transform:scale(1.65)} }
@keyframes spLightIn { 0%{opacity:0;transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }
@keyframes spLightSweep { 0%{opacity:0;transform:translateX(-120%) rotate(8deg)} 35%{opacity:.85} 100%{opacity:0;transform:translateX(120%) rotate(8deg)} }
@keyframes spSmokeHost { 0%{opacity:0;transform:scale(.78);filter:blur(5px)} 55%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:scale(1)} }
@keyframes spSmoke { 0%{opacity:.8;transform:scale(.8) translateY(12px)} 100%{opacity:0;transform:scale(1.4) translateY(-16px)} }
@keyframes spMatrixIn { 0%{opacity:0;transform:translateY(-10px) scale(.92)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes spMatrixRain { 0%{opacity:.8;background-position:0 -40px,0 -20px} 100%{opacity:0;background-position:0 40px,0 20px} }
@keyframes spSpinFlip { 0%{opacity:0;transform:perspective(420px) rotateY(-120deg) scale(.7)} 70%{opacity:1;transform:perspective(420px) rotateY(10deg) scale(1.06)} 100%{opacity:1;transform:perspective(420px) rotateY(0) scale(1)} }
@keyframes spBouncePop { 0%{opacity:0;transform:scale(.15)} 35%{opacity:1;transform:scale(1.22)} 60%{transform:scale(.88)} 78%{transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@keyframes spSlideRight { 0%{opacity:0;transform:translateX(48px) scale(.9);filter:blur(4px)} 100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)} }
@keyframes spSlideBottom { 0%{opacity:0;transform:translateY(48px) scale(.9);filter:blur(4px)} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes spPulseGlow { 0%{opacity:0;transform:scale(.72)} 28%{opacity:1;transform:scale(1.1);filter:drop-shadow(0 0 18px rgba(183,240,19,.85))} 100%{opacity:1;transform:scale(1)} }
@keyframes spPulseGlowLink { 0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 4px rgba(183,240,19,.10),0 0 24px rgba(183,240,19,.28),0 14px 30px rgba(0,0,0,.58)} 42%{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 0 9px rgba(183,240,19,.24),0 0 42px rgba(183,240,19,.74),0 18px 38px rgba(0,0,0,.62)} }
@keyframes spCyberIn { 0%{opacity:0;transform:scale(.75) rotate(-8deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes spCyberRing { 0%{opacity:0;transform:scale(.35) rotate(0)} 35%{opacity:.9} 100%{opacity:0;transform:scale(1.25) rotate(180deg)} }
@keyframes spCyberRing2 { 0%{opacity:0;transform:scale(.5) rotate(90deg)} 45%{opacity:.8} 100%{opacity:0;transform:scale(1.6) rotate(-120deg)} }
@keyframes spLensHost { 0%{opacity:0;transform:scale(.82)} 100%{opacity:1;transform:scale(1)} }
@keyframes spLensFlare { 0%{opacity:0;transform:translate(-45%,-20%) rotate(0)} 34%{opacity:.95} 100%{opacity:0;transform:translate(45%,20%) rotate(18deg)} }
@keyframes spTvSignal { 0%{opacity:0;transform:translateX(-5px) skewX(-8deg)} 18%{opacity:1;transform:translateX(5px) skewX(6deg)} 38%{transform:translateX(-3px) skewX(-5deg)} 62%{transform:translateX(2px) skewX(2deg)} 100%{opacity:1;transform:translateX(0) skewX(0)} }
@keyframes spTvNoise { 0%{opacity:.95;transform:translateY(-8px)} 100%{opacity:0;transform:translateY(8px)} }
@keyframes spSpotlightHost { 0%{opacity:0;transform:scale(.9)} 100%{opacity:1;transform:scale(1)} }
@keyframes spSpotlightClip { 0%{clip-path:circle(0% at 50% 50%)} 100%{clip-path:circle(76% at 50% 50%)} }
@keyframes spSpotlightBeam { 0%{opacity:.9;transform:scale(.15)} 100%{opacity:0;transform:scale(1.3)} }

/* Saat control player tampil, icon tetap kelihatan tetapi tidak mengganggu tombol fullscreen/setting. */
html body #featuredPlayer.show-controls .sp-floating-icon-host[data-position="bottom_right"],
html body #featuredPlayer.show-controls .sp-floating-icon-host[data-position="bottom_left"] {
  bottom: max(82px, var(--sp-icon-offset-y));
}

/* Fullscreen browser dan pseudo fullscreen iOS/Safari */
html body #featuredPlayer:fullscreen .sp-floating-icon-host,
html body #featuredPlayer:-webkit-full-screen .sp-floating-icon-host,
html body .promo-frame-safe-stage:fullscreen .sp-floating-icon-host,
html body .promo-frame-safe-stage:-webkit-full-screen .sp-floating-icon-host,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .sp-floating-icon-host,
html body #featuredPlayer.is-fullscreen .sp-floating-icon-host {
  z-index: 58;
}

@media (max-width: 768px) {
  html body .sp-floating-icon-host {
    --sp-icon-size-mobile: max(40px, min(var(--sp-icon-size), 58px));
    width: var(--sp-icon-size-mobile);
    height: var(--sp-icon-size-mobile);
  }

  html body .sp-floating-icon-host[data-position="bottom_right"],
  html body .sp-floating-icon-host[data-position="bottom_left"] {
    bottom: max(68px, var(--sp-icon-offset-y));
  }
}

@media (max-width: 420px) {
  html body .sp-floating-icon-host[data-position="bottom_right"] { right: max(12px, var(--sp-icon-offset-x)); }
  html body .sp-floating-icon-host[data-position="bottom_left"] { left: max(12px, var(--sp-icon-offset-x)); }
  html body .sp-floating-icon-host[data-position="top_right"] { right: max(12px, var(--sp-icon-offset-x)); }
  html body .sp-floating-icon-host[data-position="top_left"] { left: max(12px, var(--sp-icon-offset-x)); }
}

@media (prefers-reduced-motion: reduce) {
  html body .sp-floating-icon-host,
  html body .sp-floating-icon-host *,
  html body .sp-floating-icon-host *::before,
  html body .sp-floating-icon-host *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}