saltfish 0.2.65 → 0.2.66

package/dist/saltfish-playlist-player.es.js

@@ -3719,26 +3719,28 @@ __publicField(_ManagerOrchestrator, "prevState", {
   isMinimized: false
 });
 let ManagerOrchestrator = _ManagerOrchestrator;
-const baseResetCss = "/* \n * CSS Reset for the Saltfish playlist Player\n * Minimal reset for the Shadow DOM to ensure consistent rendering\n */\n\n:host {\n  all: initial;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  box-sizing: border-box;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font: inherit;\n  outline: none;\n  padding: 0;\n} ";
+const baseResetCss = "/* \n * CSS Reset for the Saltfish playlist Player\n * Minimal reset for the Shadow DOM to ensure consistent rendering\n */\n\n:host {\n  all: initial;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  box-sizing: border-box;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font: inherit;\n  outline: none;\n  padding: 0;\n}\n\n/* Utility classes for CSP-compliant styling */\n.sf-hidden {\n  display: none !important;\n} ";
 const baseVariablesCss = "/* \n * Variables for the Saltfish playlist Player\n * Defines all design tokens used throughout the application\n */\n\n:host {\n  /* Colors */\n  --sf-primary-color: #4a9bff;\n  --sf-secondary-color: #6ccfff;\n  --sf-background-color: #1e1e1e;\n  --sf-text-color: #ffffff;\n  --sf-button-bg: rgba(0, 0, 0, 0.5);\n  --sf-button-hover-bg: rgba(0, 0, 0, 0.7);\n  --sf-overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.7) 100%);\n  --sf-progress-gradient: linear-gradient(90deg, var(--sf-primary-color), var(--sf-secondary-color));\n  --sf-error-color: #ff4d4d;\n  --sf-error-bg: rgba(255, 77, 77, 0.1);\n  \n  /* Spacing */\n  --sf-spacing-xs: 4px;\n  --sf-spacing-sm: 8px;\n  --sf-spacing-md: 12px;\n  --sf-spacing-lg: 16px;\n  --sf-spacing-xl: 24px;\n  \n  /* Sizes */\n  --sf-player-width: 240px;\n  --sf-player-height: 336px;\n  --sf-player-min-width: 80px;\n  --sf-player-min-height: 80px;\n  --sf-control-button-size: 24px;\n  --sf-play-button-size: 60px;\n  --sf-minimize-button-size: 34px;\n  --sf-mute-button-size: 32px;\n  --sf-cc-button-size: 32px;\n  --sf-cursor-size: 32px;\n  \n  /* Border radius */\n  --sf-border-radius-sm: 4px;\n  --sf-border-radius-md: 8px;\n  --sf-border-radius-lg: 16px;\n  --sf-border-radius-circle: 50%;\n  \n  /* Transitions */\n  --sf-transition-fast: 0.1s ease;\n  --sf-transition-normal: 0.2s ease;\n  --sf-transition-slow: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  \n  /* Shadows */\n  --sf-shadow-small: 0 2px 5px rgba(0, 0, 0, 0.2);\n  --sf-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);\n  --sf-shadow-large: 0 10px 25px rgba(0, 0, 0, 0.2);\n  \n  /* Z-index layering */\n  --sf-z-index-base: 1;\n  --sf-z-index-overlay: 2;\n  --sf-z-index-controls: 10;\n  --sf-z-index-cursor: 9999;\n  --sf-z-index-player: 2147483648;\n  \n  /* Font sizes */\n  --sf-font-size-sm: 14px;\n  --sf-font-size-md: 16px;\n  --sf-font-size-lg: 18px;\n  --sf-font-size-xl: 24px;\n} \n\n/* Mobile device responsive adjustments - make player smaller for mobile screens */\n@media (max-width: 768px) {\n  :host {\n    /* Reduce player size on mobile for better space utilization */\n    --sf-player-width: 180px;        /* 25% smaller than desktop (240px -> 180px) */\n    --sf-player-height: 252px;       /* 25% smaller than desktop (336px -> 252px) */\n    --sf-player-min-width: 60px;     /* Smaller when minimized (80px -> 60px) */\n    --sf-player-min-height: 60px;    /* Smaller when minimized (80px -> 60px) */\n    \n    /* Keep controls touch-friendly despite smaller player size */\n    --sf-play-button-size: 44px;     /* Smaller but still touch-friendly (60px -> 44px) */\n    --sf-control-button-size: 28px;  /* Keep larger for touch targets (24px -> 28px) */\n    --sf-mute-button-size: 26px;     /* Smaller for mobile (32px -> 26px) */\n    --sf-cc-button-size: 26px;       /* Smaller for mobile (32px -> 26px) */\n    --sf-minimize-button-size: 26px; /* Match other mobile button sizes */\n  }\n}\n\n/* Touch device specific adjustments (tablets and larger touch devices, excluding mobile) */\n@media (pointer: coarse) and (min-width: 769px) {\n  :host {\n    /* Ensure touch-friendly sizes even on larger touch devices */\n    --sf-control-button-size: 28px;\n    --sf-mute-button-size: 38px;\n    --sf-cc-button-size: 38px;\n    --sf-minimize-button-size: 38px; /* Match other touch device button sizes */\n  }\n} ";
-const componentsPlayerCss = "/* \n * Player component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main player container */\n.sf-player {\n  border-radius: var(--sf-border-radius-lg);\n  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45), 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  transition: all var(--sf-transition-slow);\n  position: relative;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n\n/* Player visible state - show with fade in */\n.sf-player--visible {\n  opacity: 1;\n}\n\n/* Dark gradient overlay at bottom of player */\n.sf-player::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of player height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 8px;\n}\n\n/* Hide gradient overlay when minimized */\n.sf-player--minimized::before {\n  display: none;\n}\n\n/* Full-size player state */\n.sf-player:not(.sf-player--minimized) {\n  width: var(--sf-player-width);\n  height: var(--sf-player-height);\n}\n\n/* Autoplay fallback state - ensure play button is visible */\n.sf-player--waiting-for-user-interaction .sf-controls-container__play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n\n/* Also show the center play button in autoplay fallback state */\n.sf-player--waiting-for-user-interaction .sf-player__center-play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  z-index: calc(var(--sf-z-index-controls) + 20) !important; /* Higher z-index to appear above overlay */\n}\n\n/* Make the autoplay fallback state more prominent to indicate need for interaction */\n.sf-player--waiting-for-user-interaction::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n}\n\n/* Player state: minimized */\n.sf-player--minimized {\n  /* Equal width and height are essential for maintaining a perfect circle when using border-radius: 50% */\n  width: var(--sf-player-min-width);\n  height: var(--sf-player-min-height);\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  cursor: pointer;\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-min-width) !important;\n  max-height: var(--sf-player-min-height) !important;\n  min-width: var(--sf-player-min-width) !important;\n  min-height: var(--sf-player-min-height) !important;\n}\n\n/* Hide controls when minimized */\n.sf-player--minimized .sf-controls-container {\n  display: none;\n}\n\n/* Only show the minimize button when hovering on minimized player */\n.sf-player--minimized .sf-player__minimize-button {\n  opacity: 0;\n}\n\n.sf-player--minimized:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Player root element */\n#sf-player-root {\n  position: fixed;\n  z-index: var(--sf-z-index-player);\n}\n\n/* Fixed positioning classes */\n.sf-player-root--bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.sf-player-root--bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Player error message */\n.sf-player__error {\n  padding: var(--sf-spacing-md);\n  color: var(--sf-error-color);\n  background-color: var(--sf-error-bg);\n  border-radius: var(--sf-border-radius-md);\n  margin: var(--sf-spacing-sm);\n  font-size: var(--sf-font-size-sm);\n  border-left: 4px solid var(--sf-error-color);\n}\n\n/* Minimize button */\n.sf-player__minimize-button {\n  position: absolute;\n  top: 8px;\n  right: 6px;\n  width: var(--sf-minimize-button-size);\n  height: var(--sf-minimize-button-size);\n  background-color: transparent;\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-sm) + 4px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Minimize button hover state */\n.sf-player__minimize-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show minimize button on player hover */\n.sf-player:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Mobile and touch device overrides for minimize button visibility */\n/* Ensure minimize button is always visible on touch devices, even when minimized */\n@media (pointer: coarse) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n}\n\n/* Ensure minimize button is always visible on mobile screens under 768px */\n@media (max-width: 768px) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n}\n\n/* Player title */\n.sf-player__title {\n  position: absolute;\n  top: var(--sf-spacing-md);\n  left: var(--sf-spacing-md);\n  color: var(--sf-text-color);\n  font-size: var(--sf-font-size-md);\n  font-weight: 600;\n  z-index: var(--sf-z-index-controls);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  max-width: 70%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Centered play/pause button overlay */\n.sf-player__center-play-button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: none; /* Hidden by default */\n  justify-content: center;\n  align-items: center;\n  z-index: calc(var(--sf-z-index-controls) + 10); /* Ensure higher z-index than other elements */\n  color: white;\n  border: none;\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal);\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  pointer-events: auto; /* Enable pointer events to capture clicks */\n}\n\n/* Center play button hover state */\n.sf-player__center-play-button:hover {\n  transform: translate(-50%, -50%) scale(1.1);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Hide center play button in minimized state */\n.sf-player--minimized .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Center play button with adjustment for 3+ buttons */\n.sf-player__center-play-button--with-many-buttons {\n  transform: translate(-50%, -85%) !important; /* Move up by adjusting Y offset */\n}\n\n/* Exit button for minimized mode */\n.sf-player__exit-button {\n  position: absolute;\n  top: -22px; /* Position it above the player */\n  right: 0;\n  width: 20px;\n  height: 20px;\n  background-color: var(--sf-button-bg);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: var(--sf-font-size-md);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);\n}\n\n/* Exit button hover state */\n.sf-player__exit-button:hover {\n  transform: scale(1.1);\n  background-color: var(--sf-button-hover-bg);\n}\n\n/* Show exit button on minimized player hover */\n.sf-player--minimized:hover .sf-player__exit-button {\n  opacity: 1;\n}\n\n/* Saltfish logo */\n.sf-player__logo {\n  position: absolute;\n  bottom: var(--sf-spacing-xs);\n  left: 0;\n  right: 0;\n  height: 18px;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0.7;\n  transition: opacity var(--sf-transition-normal);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sf-player__logo svg {\n  width: 55px;\n  height: 20px;\n}\n\n/* Logo hover state */\n.sf-player:hover .sf-player__logo {\n  opacity: 0.9;\n}\n\n/* Hide logo when minimized */\n.sf-player--minimized .sf-player__logo {\n  display: none;\n} ";
-const componentsVideoCss = "/* \n * Video component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Video container */\n.sf-video-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--sf-border-radius-md);\n  overflow: hidden;\n  pointer-events: auto; /* Ensure clicks on video container are captured */\n  background-color: #000; /* Fallback background for audio-only mode */\n}\n\n/* Audio fallback poster image */\n.sf-video-container--audio-fallback {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n/* Audio fallback overlay */\n.sf-audio-fallback-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: 2;\n  pointer-events: none;\n}\n\n.sf-audio-fallback-overlay__icon {\n  width: 60px;\n  height: 60px;\n  margin-bottom: 16px;\n  color: white;\n  opacity: 0.9;\n}\n\n.sf-audio-fallback-overlay__text {\n  color: white;\n  font-size: 14px;\n  text-align: center;\n  padding: 0 20px;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);\n  opacity: 0.9;\n}\n\n/* Video element */\n.sf-video-container__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  /* Ensure video is visible on mobile */\n  display: block;\n  /* Add explicit positioning to ensure video is visible */\n  position: relative;\n  z-index: 1;\n}\n\n\n\n/* Mobile-specific video styles */\n@media (max-width: 768px) {\n  \n  .sf-video-container__video {\n    /* Force video dimensions on mobile */\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n    /* Prevent video from being hidden */\n    opacity: 1 !important;\n    visibility: visible !important;\n    /* Ensure video is above any potential overlays */\n    z-index: 10 !important;\n    position: relative !important;\n  }\n  \n  /* Make controls more touch-friendly on mobile */\n  .sf-video-container__controls {\n    height: 5px; /* Thicker on mobile for easier touch */\n  }\n  \n  .sf-video-container__mute-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-mute-button-size) !important;\n    min-height: var(--sf-mute-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n  \n  .sf-video-container__cc-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-cc-button-size) !important;\n    min-height: var(--sf-cc-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n}\n\n/* Touch device specific styles */\n@media (pointer: coarse) {\n  .sf-video-container__controls:hover {\n    height: 5px; /* Keep consistent height on touch devices */\n  }\n  \n  .sf-video-container__mute-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container__cc-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container:hover .sf-video-container__mute-button {\n    opacity: 1;\n  }\n}\n\n/* Video in minimized state */\n.sf-player--minimized .sf-video-container {\n  border-radius: var(--sf-border-radius-circle);\n  cursor: pointer;\n  z-index: var(--sf-z-index-base);\n  width: 100%;\n  height: 100%;\n}\n\n.sf-player--minimized .sf-video-container__video {\n  border-radius: var(--sf-border-radius-circle);\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n/* Hide progress bar in minimized state */\n.sf-player--minimized .sf-video-container__controls {\n  display: none !important;\n}\n\n/* Also hide mute button in minimized state */\n.sf-player--minimized .sf-video-container__mute-button {\n  display: none !important;\n}\n\n/* Also hide CC button in minimized state */\n.sf-player--minimized .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Progress bar container */\n.sf-video-container__controls {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.25);\n  z-index: var(--sf-z-index-controls);\n  border-radius: var(--sf-border-radius-md) var(--sf-border-radius-md) 0 0;\n  cursor: pointer;\n}\n\n/* Show slightly thicker progress bar on hover for better UX */\n.sf-video-container__controls:hover {\n  height: 5px;\n}\n\n/* Progress indicator */\n.sf-video-container__progress {\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8);\n  width: 0%;\n  transition: width 0.1s linear;\n  border-radius: var(--sf-border-radius-md) 0 0 0;\n  cursor: pointer;\n  transform-origin: left;\n}\n\n/* Mute button */\n.sf-video-container__mute-button {\n  position: absolute;\n  top: calc(8px + var(--sf-minimize-button-size) + 6px);\n  right: 6px;\n  width: var(--sf-mute-button-size);\n  height: var(--sf-mute-button-size);\n  background-color: transparent;\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Mute button hover state */\n.sf-video-container__mute-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show mute button on container hover */\n.sf-video-container:hover .sf-video-container__mute-button {\n  opacity: 1;\n}\n\n/* CC button */\n.sf-video-container__cc-button {\n  position: absolute;\n  top: calc(8px + var(--sf-minimize-button-size) + 6px + var(--sf-mute-button-size) + 6px);\n  right: 6px;\n  width: var(--sf-cc-button-size);\n  height: var(--sf-cc-button-size);\n  background-color: transparent;\n  border-radius: 50%; /* Ensure perfect circle */\n  padding: 0; /* Remove default button padding */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n.sf-video-container__cc-button svg {\n  display: block;\n  margin: auto;\n  width: 60%;\n  height: 60%;\n}\n\n/* CC button hover state */\n.sf-video-container__cc-button:hover {\n  transform: scale(1.1);\n}\n\n/* Hide mute and cc buttons in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-video-container__mute-button,\n.sf-player--autoplayBlocked .sf-video-container__cc-button,\n.sf-player--idleMode .sf-video-container__mute-button,\n.sf-player--idleMode .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Show mute and cc buttons on hover in playing/paused states */\n.sf-player--playing .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--playing .sf-video-container:hover .sf-video-container__cc-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__cc-button {\n  opacity: 1;\n} ";
+const componentsPlayerCss = "/* \n * Player component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main player container */\n.sf-player {\n  border-radius: var(--sf-border-radius-lg);\n  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45), 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  transition: all var(--sf-transition-slow);\n  position: relative;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n\n/* Player visible state - show with fade in */\n.sf-player--visible {\n  opacity: 1;\n}\n\n/* Dark gradient overlay at bottom of player */\n.sf-player::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of player height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 8px;\n}\n\n/* Hide gradient overlay when minimized */\n.sf-player--minimized::before {\n  display: none;\n}\n\n/* Full-size player state */\n.sf-player:not(.sf-player--minimized) {\n  width: var(--sf-player-width);\n  height: var(--sf-player-height);\n}\n\n/* Autoplay fallback state - ensure play button is visible */\n.sf-player--waiting-for-user-interaction .sf-controls-container__play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n\n/* Also show the center play button in autoplay fallback state */\n.sf-player--waiting-for-user-interaction .sf-player__center-play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  z-index: calc(var(--sf-z-index-controls) + 20) !important; /* Higher z-index to appear above overlay */\n}\n\n/* Make the autoplay fallback state more prominent to indicate need for interaction */\n.sf-player--waiting-for-user-interaction::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n}\n\n/* Player state: minimized */\n.sf-player--minimized {\n  /* Equal width and height are essential for maintaining a perfect circle when using border-radius: 50% */\n  width: var(--sf-player-min-width);\n  height: var(--sf-player-min-height);\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  cursor: pointer;\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-min-width) !important;\n  max-height: var(--sf-player-min-height) !important;\n  min-width: var(--sf-player-min-width) !important;\n  min-height: var(--sf-player-min-height) !important;\n}\n\n/* Hide controls when minimized */\n.sf-player--minimized .sf-controls-container {\n  display: none;\n}\n\n/* Only show the minimize button when hovering on minimized player */\n.sf-player--minimized .sf-player__minimize-button {\n  opacity: 0;\n}\n\n.sf-player--minimized:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Player root element */\n#sf-player-root {\n  position: fixed;\n  z-index: var(--sf-z-index-player);\n}\n\n/* Fixed positioning classes */\n.sf-player-root--bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.sf-player-root--bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Player error message */\n.sf-player__error {\n  padding: var(--sf-spacing-md);\n  color: var(--sf-error-color);\n  background-color: var(--sf-error-bg);\n  border-radius: var(--sf-border-radius-md);\n  margin: var(--sf-spacing-sm);\n  font-size: var(--sf-font-size-sm);\n  border-left: 4px solid var(--sf-error-color);\n}\n\n/* Minimize button */\n.sf-player__minimize-button {\n  position: absolute;\n  top: 8px;\n  right: 6px;\n  width: var(--sf-minimize-button-size);\n  height: var(--sf-minimize-button-size);\n  background-color: transparent;\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-sm) + 4px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Minimize button hover state */\n.sf-player__minimize-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show minimize button on player hover */\n.sf-player:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Mobile and touch device overrides for minimize button visibility */\n/* Ensure minimize button is always visible on touch devices, even when minimized */\n@media (pointer: coarse) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n}\n\n/* Ensure minimize button is always visible on mobile screens under 768px */\n@media (max-width: 768px) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n}\n\n/* Player title */\n.sf-player__title {\n  position: absolute;\n  top: var(--sf-spacing-md);\n  left: var(--sf-spacing-md);\n  color: var(--sf-text-color);\n  font-size: var(--sf-font-size-md);\n  font-weight: 600;\n  z-index: var(--sf-z-index-controls);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  max-width: 70%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Centered play/pause button overlay */\n.sf-player__center-play-button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: none; /* Hidden by default */\n  justify-content: center;\n  align-items: center;\n  z-index: calc(var(--sf-z-index-controls) + 10); /* Ensure higher z-index than other elements */\n  color: white;\n  border: none;\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal);\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  pointer-events: auto; /* Enable pointer events to capture clicks */\n}\n\n/* Center play button visible state */\n.sf-player__center-play-button--visible {\n  display: flex !important;\n}\n\n/* Center play button prominent state (for autoplay blocked, idle mode) */\n.sf-player__center-play-button--prominent {\n  opacity: 1 !important;\n  pointer-events: auto !important;\n}\n\n/* Center play button hover state */\n.sf-player__center-play-button:hover {\n  transform: translate(-50%, -50%) scale(1.1);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Hide center play button in minimized state */\n.sf-player--minimized .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Center play button with adjustment for 3+ buttons */\n.sf-player__center-play-button--with-many-buttons {\n  transform: translate(-50%, -85%) !important; /* Move up by adjusting Y offset */\n}\n\n/* Exit button for minimized mode */\n.sf-player__exit-button {\n  position: absolute;\n  top: -22px; /* Position it above the player */\n  right: 0;\n  width: 20px;\n  height: 20px;\n  background-color: var(--sf-button-bg);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: var(--sf-font-size-md);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);\n}\n\n/* Exit button hover state */\n.sf-player__exit-button:hover {\n  transform: scale(1.1);\n  background-color: var(--sf-button-hover-bg);\n}\n\n/* Show exit button on minimized player hover */\n.sf-player--minimized:hover .sf-player__exit-button {\n  opacity: 1;\n}\n\n/* Saltfish logo */\n.sf-player__logo {\n  position: absolute;\n  bottom: var(--sf-spacing-xs);\n  left: 0;\n  right: 0;\n  height: 18px;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0.7;\n  transition: opacity var(--sf-transition-normal);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sf-player__logo svg {\n  width: 55px;\n  height: 20px;\n}\n\n/* Logo hover state */\n.sf-player:hover .sf-player__logo {\n  opacity: 0.9;\n}\n\n/* Hide logo when minimized */\n.sf-player--minimized .sf-player__logo {\n  display: none;\n} ";
+const componentsVideoCss = "/* \n * Video component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Video container */\n.sf-video-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--sf-border-radius-md);\n  overflow: hidden;\n  pointer-events: auto; /* Ensure clicks on video container are captured */\n  background-color: #000; /* Fallback background for audio-only mode */\n}\n\n/* Audio fallback poster image */\n.sf-video-container--audio-fallback {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-image: var(--sf-audio-poster-url, none);\n}\n\n/* Audio fallback overlay */\n.sf-audio-fallback-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: 2;\n  pointer-events: none;\n}\n\n.sf-audio-fallback-overlay__icon {\n  width: 60px;\n  height: 60px;\n  margin-bottom: 16px;\n  color: white;\n  opacity: 0.9;\n}\n\n.sf-audio-fallback-overlay__text {\n  color: white;\n  font-size: 14px;\n  text-align: center;\n  padding: 0 20px;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);\n  opacity: 0.9;\n}\n\n/* Video element */\n.sf-video-container__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  /* Ensure video is visible on mobile */\n  display: block;\n  /* Add explicit positioning to ensure video is visible */\n  position: relative;\n  z-index: 1;\n}\n\n/* Video blur effect (for end-of-video transitions) */\n.sf-video-container__video--blurred {\n  filter: blur(3px);\n  transition: filter 0.3s ease-out;\n}\n\n\n\n/* Mobile-specific video styles */\n@media (max-width: 768px) {\n  \n  .sf-video-container__video {\n    /* Force video dimensions on mobile */\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n    /* Prevent video from being hidden */\n    opacity: 1 !important;\n    visibility: visible !important;\n    /* Ensure video is above any potential overlays */\n    z-index: 10 !important;\n    position: relative !important;\n  }\n  \n  /* Make controls more touch-friendly on mobile */\n  .sf-video-container__controls {\n    height: 5px; /* Thicker on mobile for easier touch */\n  }\n  \n  .sf-video-container__mute-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-mute-button-size) !important;\n    min-height: var(--sf-mute-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n  \n  .sf-video-container__cc-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-cc-button-size) !important;\n    min-height: var(--sf-cc-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n}\n\n/* Touch device specific styles */\n@media (pointer: coarse) {\n  .sf-video-container__controls:hover {\n    height: 5px; /* Keep consistent height on touch devices */\n  }\n  \n  .sf-video-container__mute-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container__cc-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container:hover .sf-video-container__mute-button {\n    opacity: 1;\n  }\n}\n\n/* Video in minimized state */\n.sf-player--minimized .sf-video-container {\n  border-radius: var(--sf-border-radius-circle);\n  cursor: pointer;\n  z-index: var(--sf-z-index-base);\n  width: 100%;\n  height: 100%;\n}\n\n.sf-player--minimized .sf-video-container__video {\n  border-radius: var(--sf-border-radius-circle);\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n/* Hide progress bar in minimized state */\n.sf-player--minimized .sf-video-container__controls {\n  display: none !important;\n}\n\n/* Also hide mute button in minimized state */\n.sf-player--minimized .sf-video-container__mute-button {\n  display: none !important;\n}\n\n/* Also hide CC button in minimized state */\n.sf-player--minimized .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Progress bar container */\n.sf-video-container__controls {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.25);\n  z-index: var(--sf-z-index-controls);\n  border-radius: var(--sf-border-radius-md) var(--sf-border-radius-md) 0 0;\n  cursor: pointer;\n}\n\n/* Show slightly thicker progress bar on hover for better UX */\n.sf-video-container__controls:hover {\n  height: 5px;\n}\n\n/* Progress indicator */\n.sf-video-container__progress {\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8);\n  width: 0%;\n  transition: width 0.1s linear;\n  border-radius: var(--sf-border-radius-md) 0 0 0;\n  cursor: pointer;\n  transform-origin: left;\n}\n\n/* Mute button */\n.sf-video-container__mute-button {\n  position: absolute;\n  top: calc(8px + var(--sf-minimize-button-size) + 6px);\n  right: 6px;\n  width: var(--sf-mute-button-size);\n  height: var(--sf-mute-button-size);\n  background-color: transparent;\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Mute button hover state */\n.sf-video-container__mute-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show mute button on container hover */\n.sf-video-container:hover .sf-video-container__mute-button {\n  opacity: 1;\n}\n\n/* CC button */\n.sf-video-container__cc-button {\n  position: absolute;\n  top: calc(8px + var(--sf-minimize-button-size) + 6px + var(--sf-mute-button-size) + 6px);\n  right: 6px;\n  width: var(--sf-cc-button-size);\n  height: var(--sf-cc-button-size);\n  background-color: transparent;\n  border-radius: 50%; /* Ensure perfect circle */\n  padding: 0; /* Remove default button padding */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n.sf-video-container__cc-button svg {\n  display: block;\n  margin: auto;\n  width: 60%;\n  height: 60%;\n}\n\n/* CC button hover state */\n.sf-video-container__cc-button:hover {\n  transform: scale(1.1);\n}\n\n/* Hide mute and cc buttons in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-video-container__mute-button,\n.sf-player--autoplayBlocked .sf-video-container__cc-button,\n.sf-player--idleMode .sf-video-container__mute-button,\n.sf-player--idleMode .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Show mute and cc buttons on hover in playing/paused states */\n.sf-player--playing .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--playing .sf-video-container:hover .sf-video-container__cc-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__cc-button {\n  opacity: 1;\n} ";
 const componentsControlsCss = "/* \n * Controls component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main controls container */\n.sf-controls-container {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  z-index: var(--sf-z-index-controls);\n  pointer-events: auto;\n}\n\n/* Play button */\n.sf-controls-container__play-button {\n  background-color: rgba(0, 0, 0, 0.6);\n  border: none;\n  color: var(--sf-text-color);\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal);\n  padding-left: 4px; /* Optical centering for play icon */\n}\n\n/* Button hover state */\n.sf-controls-container__play-button:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n  transform: scale(1.1);\n}\n\n/* Button container for interactive buttons */\n.sf-controls-container__buttons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--sf-spacing-md);\n}\n\n/* Interactive button */\n.sf-controls-container__interactive-button {\n  background-color: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  border: none;\n  border-radius: var(--sf-border-radius-md);\n  padding: var(--sf-spacing-xs) var(--sf-spacing-md);\n  font-size: var(--sf-font-size-sm);\n  cursor: pointer;\n  transition: background-color var(--sf-transition-normal), transform var(--sf-transition-fast);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.sf-controls-container__interactive-button:hover {\n  background-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-2px);\n}\n\n/* \n * Choice buttons container and buttons - positioned inside player\n */\n\n/* Choice buttons container - positioned inside the player at the bottom */\n.sf-choice-buttons-container {\n  position: absolute;\n  bottom: var(--sf-spacing-xl);\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(100% - var(--sf-spacing-lg));\n  max-width: calc(100% - var(--sf-spacing-lg));\n  z-index: calc(var(--sf-z-index-controls) + 1);\n  gap: var(--sf-spacing-sm);\n  pointer-events: auto;\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  /* Ensure container is fully transparent */\n  background: transparent;\n  border: none;\n  outline: none;\n}\n\n/* Choice buttons container with scrolling for 4+ buttons */\n.sf-choice-buttons-container--scrollable {\n  max-height: 132px; /* Show ~3 buttons with gaps (3 * 36px button + 3 * 8px gap) */\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: thin; /* Show thin scrollbar in Firefox */\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* More transparent Firefox scrollbar */\n  scroll-behavior: smooth;\n  /* Important: Use block display for scrollable container */\n  display: block !important;\n}\n\n/* Style webkit scrollbar to be visible but subtle */\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar {\n  width: 4px;\n}\n\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2); /* More transparent */\n  border-radius: 2px;\n}\n\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.4); /* Still subtle on hover */\n}\n\n/* Removed fade gradient to keep container fully transparent */\n\n/* Choice button styles - solid rounded buttons matching the image */\n.sf-choice-button {\n  width: 100%;\n  max-width: none;\n  background: rgba(0, 0, 0, 4);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  border: none;\n  border-radius: 24px; /* More rounded for pill shape */\n  padding: var(--sf-spacing-md) var(--sf-spacing-md);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: center;\n  outline: none;\n  font-family: inherit;\n  margin-bottom: 0;\n  position: relative;\n  overflow: hidden;\n  opacity: 0; /* Start hidden for animation */\n  pointer-events: none;\n  /* Animation will be triggered by JavaScript when video reaches 90% */\n}\n\n/* Add margin between buttons in scrollable container */\n.sf-choice-buttons-container--scrollable .sf-choice-button {\n  margin-bottom: var(--sf-spacing-sm);\n}\n\n/* Remove margin from last button */\n.sf-choice-buttons-container--scrollable .sf-choice-button:last-child {\n  margin-bottom: 0;\n}\n\n/* Hover state for buttons */\n.sf-choice-button:hover {\n  background: rgba(0, 0, 0, 0.9);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);\n}\n\n/* Active state for all buttons */\n.sf-choice-button:active {\n  transform: translateY(0) scale(0.98);\n  transition: all 0.1s ease;\n}\n\n/* Remove specific action type styling - use consistent dark buttons */\n.sf-choice-button--goto,\n.sf-choice-button--url,\n.sf-choice-button--next,\n.sf-choice-button--dom,\n.sf-choice-button--function {\n  background: rgba(0, 0, 0, 0.4);\n  border: none;\n}\n\n.sf-choice-button--goto:hover,\n.sf-choice-button--url:hover,\n.sf-choice-button--next:hover,\n.sf-choice-button--dom:hover,\n.sf-choice-button--function:hover {\n  background: rgba(0, 0, 0, 0.9);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* Hide choice buttons in minimized state */\n.sf-player--minimized .sf-choice-buttons-container {\n  display: none;\n}\n\n/* Hide choice buttons in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-choice-buttons-container,\n.sf-player--idleMode .sf-choice-buttons-container {\n  display: none !important;\n}\n\n/* Smaller mobile screens - maintain same layout but with tighter spacing */\n@media (max-width: 480px) {\n  .sf-choice-buttons-container {\n    bottom: var(--sf-spacing-sm);\n    width: calc(100% - var(--sf-spacing-md));\n    max-width: calc(100% - var(--sf-spacing-md));\n    gap: calc(var(--sf-spacing-xs) + 2px);\n  }\n  \n  .sf-choice-button {\n    padding: var(--sf-spacing-sm) var(--sf-spacing-sm);\n    font-size: 11px;\n    border-radius: 20px;\n  }\n}\n\n/* Touch device specific adjustments */\n@media (pointer: coarse) {\n  .sf-choice-buttons-container {\n    gap: var(--sf-spacing-sm);\n  }\n  \n  .sf-choice-button {\n    min-height: 44px; /* Apple's recommended minimum touch target size */\n    padding: var(--sf-spacing-md) var(--sf-spacing-md);\n  }\n}\n\n/* Button fade-in animation */\n@keyframes buttonFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Animation class that will be added by JavaScript at 90% video progress */\n.sf-choice-button.sf-show-button {\n  animation: buttonFadeIn 0.3s ease-out forwards;\n  pointer-events: auto;\n}\n\n/* Staggered animation delays for multiple buttons when shown */\n.sf-choice-button.sf-show-button:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(2) {\n  animation-delay: 0.15s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(3) {\n  animation-delay: 0.3s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(4) {\n  animation-delay: 0.45s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(5) {\n  animation-delay: 0.6s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(6) {\n  animation-delay: 0.75s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(7) {\n  animation-delay: 0.9s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(8) {\n  animation-delay: 1.05s;\n}\n\n/* Scroll indicator arrow */\n.sf-scroll-indicator {\n  position: absolute;\n  bottom: calc(var(--sf-spacing-xl) - 25px);\n  left: 50%;\n  transform: translateX(-50%);\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 20px;\n  pointer-events: none;\n  z-index: calc(var(--sf-z-index-controls) + 2);\n  transition: opacity 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  opacity: 0; /* Start hidden */\n}\n\n/* Show scroll indicator with animation - appears after buttons */\n.sf-scroll-indicator.sf-show-scroll-indicator {\n  animation: scrollIndicatorFadeIn 0.4s ease-out 1.2s forwards, bounceArrow 1.5s ease-in-out 1.6s infinite;\n}\n\n/* Hide arrow when scrolled to bottom */\n.sf-scroll-indicator--hidden {\n  opacity: 0;\n}\n\n/* Fade in animation for scroll indicator */\n@keyframes scrollIndicatorFadeIn {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n/* Bounce animation for the arrow */\n@keyframes bounceArrow {\n  0%, 100% {\n    transform: translateX(-50%) translateY(0);\n  }\n  50% {\n    transform: translateX(-50%) translateY(5px);\n  }\n}\n\n/* Hide scroll indicator in minimized state */\n.sf-player--minimized .sf-scroll-indicator {\n  display: none;\n}\n\n/* Hide scroll indicator in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-scroll-indicator,\n.sf-player--idleMode .sf-scroll-indicator {\n  display: none !important;\n} ";
 const componentsTranscriptCss = "/* \n * Transcript component styles for the Saltfish Playlist Player\n * Following BEM naming convention\n */\n\n/* Transcript container */\n.sf-transcript {\n  position: absolute;\n  bottom: 40px; /* Above the progress bar */\n  left: 0;\n  right: 0;\n  max-height: 200px;\n  background: transparent;\n  margin: 0 var(--sf-spacing-md);\n  overflow: hidden;\n  z-index: var(--sf-z-index-overlay);\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.3s ease-out;\n  pointer-events: none;\n}\n\n/* Visible state */\n.sf-transcript--visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n/* Transcript content */\n.sf-transcript__content {\n  max-height: 180px;\n  overflow: visible;\n  padding: 0;\n}\n\n/* Webkit scrollbar styling */\n.sf-transcript__content::-webkit-scrollbar {\n  width: 4px;\n}\n\n.sf-transcript__content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sf-transcript__content::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n}\n\n.sf-transcript__content::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.5);\n}\n\n/* Word-by-word display container */\n.sf-transcript__word-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0; /* Remove flex gap - spacing handled by margin on preview word */\n  min-height: 60px;\n  padding: 0;\n}\n\n/* Individual word styling */\n.sf-transcript__word {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: var(--sf-font-size-lg);\n  font-weight: 600;\n  line-height: 1.2;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translateY(0);\n  filter: blur(0px);\n  opacity: 1;\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n}\n\n/* Active word (currently speaking) */\n.sf-transcript__word--active {\n  opacity: 1;\n  filter: blur(0px);\n  transform: translateY(0) scale(1);\n  color: rgba(255, 255, 255, 1);\n  font-weight: 600;\n}\n\n/* Preview word (clean, unblurred when shown) */\n.sf-transcript__word--preview {\n  opacity: 0.8;\n  filter: blur(0px);\n  transform: translateY(0) scale(0.98);\n  color: rgba(255, 255, 255, 0.8);\n  font-weight: 400;\n  margin-left: 0.2em; /* Minimal spacing - just enough for a natural gap */\n}\n\n/* Legacy segment styling (kept for compatibility) */\n.sf-transcript__segment {\n  color: rgba(255, 255, 255);\n  font-size: var(--sf-font-size-sm);\n  line-height: 1.4;\n  padding: var(--sf-spacing-xs) 0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding-left: var(--sf-spacing-xs);\n  padding-right: var(--sf-spacing-xs);\n}\n\n/* CC button styling removed - now handled via icon toggling */\n\n/* Mobile responsive styles */\n@media (max-width: 768px) {\n  .sf-transcript {\n    bottom: 50px; /* More space on mobile */\n    margin: 0 var(--sf-spacing-sm);\n    max-height: 150px; /* Smaller on mobile */\n  }\n  \n  .sf-transcript__content {\n    max-height: 130px;\n    padding: var(--sf-spacing-sm);\n  }\n  \n  .sf-transcript__word-container {\n    min-height: 50px;\n    padding: var(--sf-spacing-sm);\n    gap: var(--sf-spacing-xs);\n  }\n  \n  .sf-transcript__word {\n    font-size: var(--sf-font-size-md);\n    font-weight: 500;\n  }\n  \n  .sf-transcript__segment {\n    font-size: var(--sf-font-size-xs);\n    padding: var(--sf-spacing-xs) var(--sf-spacing-sm);\n  }\n}\n\n/* Touch device optimizations */\n@media (pointer: coarse) {\n  .sf-transcript__segment {\n    padding: var(--sf-spacing-sm) var(--sf-spacing-xs);\n    min-height: 44px; /* Larger touch target */\n    display: flex;\n    align-items: center;\n  }\n}\n\n/* Hide transcript in minimized state */\n.sf-player--minimized .sf-transcript {\n  display: none !important;\n}\n\n/* Hide transcript in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-transcript,\n.sf-player--idleMode .sf-transcript {\n  display: none !important;\n}\n\n/* Animation for transcript appearance */\n@keyframes transcriptFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes transcriptFadeOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n}";
 const componentsErrorCss = "/* \n * Error Display component styles for the Saltfish playlist Player\n * Clean and subtle full-widget error overlay\n */\n\n/* Error display overlay - covers full widget */\n.sf-error-display {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: calc(var(--sf-z-index-controls) + 30);\n  border-radius: var(--sf-border-radius-lg);\n  opacity: 0;\n  transition: opacity var(--sf-transition-slow);\n  pointer-events: auto;\n}\n\n/* Error display visible state */\n.sf-error-display--visible {\n  opacity: 1;\n}\n\n/* Error content container */\n.sf-error-display__content {\n  background-color: rgba(20, 20, 20, 0.9);\n  border-radius: var(--sf-border-radius-md);\n  padding: var(--sf-spacing-lg) var(--sf-spacing-xl);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  transform: translateY(8px);\n  transition: transform var(--sf-transition-slow);\n  max-width: 85%;\n  text-align: center;\n}\n\n/* Error content visible animation */\n.sf-error-display--visible .sf-error-display__content {\n  transform: translateY(0);\n}\n\n/* Error message */\n.sf-error-display__message {\n  color: rgba(255, 255, 255, 0.95);\n  font-size: var(--sf-font-size-md);\n  line-height: 1.5;\n  margin: 0;\n  text-align: center;\n  font-weight: 500;\n}\n\n/* Mobile responsive adjustments */\n@media (max-width: 768px) {\n  .sf-error-display__content {\n    padding: var(--sf-spacing-md) var(--sf-spacing-lg);\n    max-width: 90%;\n  }\n\n  .sf-error-display__message {\n    font-size: var(--sf-font-size-sm);\n  }\n}\n\n/* Minimized player state adjustments */\n.sf-player--minimized .sf-error-display__content {\n  padding: var(--sf-spacing-sm) var(--sf-spacing-md);\n  max-width: 80%;\n}\n\n.sf-player--minimized .sf-error-display__message {\n  font-size: var(--sf-font-size-sm);\n  font-weight: 400;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .sf-error-display__content {\n    background-color: rgba(0, 0, 0, 0.95);\n    border: 2px solid rgba(255, 255, 255, 0.3);\n  }\n\n  .sf-error-display__message {\n    color: rgba(255, 255, 255, 0.95);\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .sf-error-display,\n  .sf-error-display__content {\n    transition: none;\n  }\n}";
 const componentsLoadingCss = "/**\n * Loading spinner styles\n */\n\n.sf-loading-spinner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(2px);\n  z-index: 100;\n  border-radius: 12px;\n  opacity: 1 !important; /* Always visible when shown, overrides parent opacity */\n}\n\n.sf-loading-spinner__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 24px;\n}\n\n.sf-loading-spinner__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #000000;\n  opacity: 0.9;\n}\n\n.sf-loading-spinner__icon svg {\n  width: 60px;\n  height: 60px;\n  /* Remove the rotation animation since we now have internal SVG animation */\n}\n\n.sf-loading-spinner__text {\n  color: #333333;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: center;\n  opacity: 0.8;\n  letter-spacing: 0.5px;\n}\n\n/* CSS keyframe animation removed - using SVG animateTransform instead */\n\n/* Responsive adjustments */\n@media (max-width: 480px) {\n  .sf-loading-spinner__content {\n    padding: 20px;\n    gap: 10px;\n  }\n  \n  .sf-loading-spinner__icon svg {\n    width: 50px;\n    height: 50px;\n  }\n  \n  .sf-loading-spinner__text {\n    font-size: 13px;\n  }\n}";
+const componentsCursorCss = "/*\n * Cursor animation component styles for the Saltfish playlist Player\n * CSP-compliant: All styles use CSS classes and CSS custom properties instead of inline styles\n */\n\n/* Base cursor element */\n.sf-cursor {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 36px;\n  height: 36px;\n  z-index: 9999999;\n  pointer-events: none;\n  display: none;\n  will-change: transform;\n  transform: var(--sf-cursor-transform, translate(0, 0));\n  opacity: var(--sf-cursor-opacity, 1);\n}\n\n.sf-cursor--visible {\n  display: block;\n}\n\n/* Selection element */\n.sf-selection {\n  position: fixed;\n  pointer-events: none;\n  display: none;\n  z-index: 9999998;\n  border: 2px solid #ff7614;\n  background: rgba(255, 118, 20, 0.1);\n  left: var(--sf-selection-left, 0);\n  top: var(--sf-selection-top, 0);\n  width: var(--sf-selection-width, 0);\n  height: var(--sf-selection-height, 0);\n}\n\n.sf-selection--visible {\n  display: block;\n}\n\n/* Flashlight overlay */\n.sf-flashlight-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  z-index: 999997;\n  display: none;\n  background: var(--sf-flashlight-bg, radial-gradient(circle 150px at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.4) 100%));\n  clip-path: var(--sf-flashlight-clip, none);\n}\n\n.sf-flashlight-overlay--visible {\n  display: block;\n}\n";
 const animationsTransitionsCss = "/* \n * Transitions and animations for Saltfish playlist Player\n */\n\n/* Fade in animation */\n@keyframes sf-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.sf-fade-in {\n  animation: sf-fade-in 0.3s ease-in-out forwards;\n}\n\n/* Slide in from bottom animation */\n@keyframes sf-slide-in-bottom {\n  from { transform: translateY(100%); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n.sf-slide-in-bottom {\n  animation: sf-slide-in-bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Slide in from right animation */\n@keyframes sf-slide-in-right {\n  from { transform: translateX(100%); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}\n\n.sf-slide-in-right {\n  animation: sf-slide-in-right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Scale in animation */\n@keyframes sf-scale-in {\n  from { transform: scale(0.8); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.sf-scale-in {\n  animation: sf-scale-in 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Scale out animation */\n@keyframes sf-scale-out {\n  from { transform: scale(1); opacity: 1; }\n  to { transform: scale(0.8); opacity: 0; }\n}\n\n.sf-scale-out {\n  animation: sf-scale-out 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n} ";
 const getPlayerStyles = () => `
   ${baseResetCss}
   ${baseVariablesCss}
-  
+
   ${componentsPlayerCss}
   ${componentsVideoCss}
   ${componentsControlsCss}
   ${componentsTranscriptCss}
   ${componentsErrorCss}
   ${componentsLoadingCss}
-  
+  ${componentsCursorCss}
+
   ${animationsTransitionsCss}
 `;
 class ShadowDOMManager {
@@ -3759,9 +3761,15 @@ class ShadowDOMManager {
     this.container.appendChild(document.createTextNode("​"));
     document.body.appendChild(this.container);
     this.shadowRoot = this.container.attachShadow({ mode: "open" });
-    this.styleElement = document.createElement("style");
-    this.styleElement.textContent = this.getBaseStyles();
-    this.shadowRoot.appendChild(this.styleElement);
+    try {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(this.getBaseStyles());
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    } catch (error2) {
+      this.styleElement = document.createElement("style");
+      this.styleElement.textContent = this.getBaseStyles();
+      this.shadowRoot.appendChild(this.styleElement);
+    }
     const rootElement = document.createElement("div");
     rootElement.id = "sf-player-root";
     this.shadowRoot.appendChild(rootElement);
@@ -3786,10 +3794,22 @@ class ShadowDOMManager {
    * Adds a stylesheet to the shadow DOM
    */
   addStyles(styles) {
-    if (!this.styleElement) {
+    if (!this.shadowRoot) {
       return;
     }
-    this.styleElement.textContent += styles;
+    if (this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0) {
+      try {
+        const existingSheet = this.shadowRoot.adoptedStyleSheets[0];
+        const currentRules = Array.from(existingSheet.cssRules).map((rule) => rule.cssText).join("\n");
+        existingSheet.replaceSync(currentRules + "\n" + styles);
+        return;
+      } catch (error2) {
+        console.warn("ShadowDOMManager: Failed to append to adoptedStyleSheet:", error2);
+      }
+    }
+    if (this.styleElement) {
+      this.styleElement.textContent += styles;
+    }
   }
   /**
    * Removes the shadow DOM container
@@ -4217,7 +4237,7 @@ const _TranscriptManager = class _TranscriptManager {
     }
     this.transcriptContainer = document.createElement("div");
     this.transcriptContainer.className = "sf-transcript";
-    this.transcriptContainer.style.display = "none";
+    this.transcriptContainer.classList.add("sf-hidden");
     this.transcriptContent = document.createElement("div");
     this.transcriptContent.className = "sf-transcript__content";
     if (this.transcriptContainer && this.transcriptContent) {
@@ -4240,7 +4260,7 @@ const _TranscriptManager = class _TranscriptManager {
   showTranscript() {
     log(`TranscriptManager: showTranscript called, container exists: ${!!this.transcriptContainer}`);
     if (this.transcriptContainer) {
-      this.transcriptContainer.style.display = "block";
+      this.transcriptContainer.classList.remove("sf-hidden");
       this.transcriptContainer.classList.add("sf-transcript--visible");
     }
   }
@@ -4250,7 +4270,7 @@ const _TranscriptManager = class _TranscriptManager {
   hideTranscript() {
     log(`TranscriptManager: hideTranscript called, container exists: ${!!this.transcriptContainer}`);
     if (this.transcriptContainer) {
-      this.transcriptContainer.style.display = "none";
+      this.transcriptContainer.classList.add("sf-hidden");
       this.transcriptContainer.classList.remove("sf-transcript--visible");
     }
   }
@@ -4263,10 +4283,10 @@ const _TranscriptManager = class _TranscriptManager {
       return;
     }
     if (hasTranscript) {
-      this.ccButton.style.display = "block";
+      this.ccButton.classList.remove("sf-hidden");
       (_a = this.videoManager) == null ? void 0 : _a.updateCCButtonIcon(this.isVisible);
     } else {
-      this.ccButton.style.display = "none";
+      this.ccButton.classList.add("sf-hidden");
     }
   }
   /**
@@ -4391,8 +4411,8 @@ class MobilePlaybackHandler extends DevicePlaybackHandler {
   }
   configureControlElement(element) {
     const config = this.getControlsConfig();
-    element.style.minWidth = config.buttonMinSize.width;
-    element.style.minHeight = config.buttonMinSize.height;
+    element.style.setProperty("min-width", config.buttonMinSize.width);
+    element.style.setProperty("min-height", config.buttonMinSize.height);
   }
   async handlePlayAttempt(video, hasUserInteracted) {
     const store = useSaltfishStore.getState();
@@ -4547,7 +4567,7 @@ class VideoControlsUI {
       var _a;
       this.lastTimeupdateEvent = Date.now();
       if (this.progressBar && ((_a = this.videoElement) == null ? void 0 : _a.paused) === false) {
-        this.progressBar.style.transition = "width 0.1s linear";
+        this.progressBar.style.setProperty("transition", "width 0.1s linear");
       }
       if (this.videoElement && !this.buttonsShownAt90Percent && this.videoElement.duration > 0) {
         const progress = this.videoElement.currentTime / this.videoElement.duration;
@@ -4562,7 +4582,7 @@ class VideoControlsUI {
      */
     __publicField(this, "handleSeeking", () => {
       if (this.progressBar) {
-        this.progressBar.style.transition = "none";
+        this.progressBar.style.setProperty("transition", "none");
         this.updateProgress();
       }
     });
@@ -4574,7 +4594,7 @@ class VideoControlsUI {
         if (!this.videoElement.paused) {
           this.updateProgress();
           void this.progressBar.offsetWidth;
-          this.progressBar.style.transition = "width 0.1s linear";
+          this.progressBar.style.setProperty("transition", "width 0.1s linear");
         }
       }
     });
@@ -4588,8 +4608,8 @@ class VideoControlsUI {
       const clickPosition = (event.clientX - rect.left) / rect.width;
       const seekTime = this.videoElement.duration * clickPosition;
       if (this.progressBar) {
-        this.progressBar.style.transition = "none";
-        this.progressBar.style.width = `${clickPosition * 100}%`;
+        this.progressBar.style.setProperty("transition", "none");
+        this.progressBar.style.setProperty("width", `${clickPosition * 100}%`);
       }
       this.callbacks.onSeek(seekTime);
       event.preventDefault();
@@ -4681,8 +4701,8 @@ class VideoControlsUI {
     this.buttonsShownAt90Percent = false;
     this.lastTimeupdateEvent = 0;
     if (this.progressBar) {
-      this.progressBar.style.transition = "none";
-      this.progressBar.style.width = "0%";
+      this.progressBar.style.setProperty("transition", "none");
+      this.progressBar.style.setProperty("width", "0%");
     }
   }
   /**
@@ -4759,8 +4779,8 @@ class VideoControlsUI {
   updateProgressImmediate(currentTime, duration) {
     if (!this.progressBar || duration <= 0) return;
     const percent = currentTime / duration * 100;
-    this.progressBar.style.transition = "none";
-    this.progressBar.style.width = `${percent}%`;
+    this.progressBar.style.setProperty("transition", "none");
+    this.progressBar.style.setProperty("width", `${percent}%`);
   }
   /**
    * Updates the progress bar based on current playback position
@@ -4771,15 +4791,15 @@ class VideoControlsUI {
     const duration = this.videoElement.duration || 0;
     if (duration > 0) {
       const percent = currentTime / duration * 100;
-      const wasTransitioning = this.progressBar.style.transition !== "none";
+      const wasTransitioning = this.progressBar.style.getPropertyValue("transition") !== "none";
       const timeSinceLastUpdate = Date.now() - this.lastTimeupdateEvent;
-      this.progressBar.style.transition = "none";
-      this.progressBar.style.width = `${percent}%`;
+      this.progressBar.style.setProperty("transition", "none");
+      this.progressBar.style.setProperty("width", `${percent}%`);
       void this.progressBar.offsetWidth;
       if (this.videoElement.ended) {
-        this.progressBar.style.transition = "width 0.2s ease-out";
+        this.progressBar.style.setProperty("transition", "width 0.2s ease-out");
       } else if (!this.videoElement.paused && !this.videoElement.seeking && wasTransitioning && timeSinceLastUpdate < 500) {
-        this.progressBar.style.transition = "width 0.1s linear";
+        this.progressBar.style.setProperty("transition", "width 0.1s linear");
       }
     }
   }
@@ -4856,16 +4876,16 @@ class VideoControlsUI {
       const playerElement = this.controlsElement.closest(".sf-player");
       const isMinimized = playerElement == null ? void 0 : playerElement.classList.contains("sf-player--minimized");
       if (!isMinimized) {
-        this.controlsElement.style.display = "block";
+        this.controlsElement.classList.remove("sf-hidden");
       } else {
-        this.controlsElement.style.display = "";
+        this.controlsElement.classList.remove("sf-hidden");
       }
     }
     if (this.progressBar) {
-      this.progressBar.style.transition = "none";
-      this.progressBar.style.width = "0%";
+      this.progressBar.style.setProperty("transition", "none");
+      this.progressBar.style.setProperty("width", "0%");
       void this.progressBar.offsetWidth;
-      this.progressBar.style.transition = "width 0.1s linear";
+      this.progressBar.style.setProperty("transition", "width 0.1s linear");
     }
   }
   /**
@@ -4873,7 +4893,7 @@ class VideoControlsUI {
    */
   hideProgressBar() {
     if (this.controlsElement) {
-      this.controlsElement.style.display = "none";
+      this.controlsElement.classList.add("sf-hidden");
     }
   }
   /**
@@ -4881,7 +4901,7 @@ class VideoControlsUI {
    */
   showMuteButton() {
     if (this.muteButton) {
-      this.muteButton.style.display = "block";
+      this.muteButton.classList.remove("sf-hidden");
     }
   }
   /**
@@ -4889,7 +4909,7 @@ class VideoControlsUI {
    */
   hideMuteButton() {
     if (this.muteButton) {
-      this.muteButton.style.display = "none";
+      this.muteButton.classList.add("sf-hidden");
     }
   }
   /**
@@ -4942,8 +4962,7 @@ class VideoManager {
         this.controls.updateProgressImmediate(activeVideo.duration, activeVideo.duration);
       }
       if (activeVideo) {
-        activeVideo.style.filter = "blur(3px)";
-        activeVideo.style.transition = "filter 0.3s ease-out";
+        activeVideo.classList.add("sf-video-container__video--blurred");
       }
       if (this.completionPolicy === "auto") {
         this.handleAutoVideoEnded();
@@ -5016,9 +5035,8 @@ class VideoManager {
     this.deviceHandler.configureVideoElement(this.currentVideo);
     this.container.appendChild(this.currentVideo);
     this.nextVideo = document.createElement("video");
-    this.nextVideo.className = "sf-video-container__video sf-video-container__video--next";
+    this.nextVideo.className = "sf-video-container__video sf-video-container__video--next sf-hidden";
     this.deviceHandler.configureVideoElement(this.nextVideo);
-    this.nextVideo.style.display = "none";
     this.container.appendChild(this.nextVideo);
     const store = useSaltfishStore.getState();
     if (store.isMuted) {
@@ -5077,8 +5095,8 @@ class VideoManager {
     activeVideo.pause();
     const store = useSaltfishStore.getState();
     inactiveVideo.muted = store.isMuted;
-    activeVideo.style.display = "none";
-    inactiveVideo.style.display = "block";
+    activeVideo.classList.add("sf-hidden");
+    inactiveVideo.classList.remove("sf-hidden");
     this.activeVideoIndex = this.activeVideoIndex === 0 ? 1 : 0;
     this.currentVideoUrl = this.nextVideoUrl;
     this.nextVideoUrl = "";
@@ -5269,10 +5287,7 @@ class VideoManager {
       console.error("VideoManager: No active video element found");
       return;
     }
-    if (activeVideo.style.filter) {
-      activeVideo.style.filter = "";
-      activeVideo.style.transition = "";
-    }
+    activeVideo.classList.remove("sf-video-container__video--blurred");
     if (activeVideo.ended) {
       activeVideo.currentTime = 0;
     }
@@ -5603,7 +5618,7 @@ class VideoManager {
       return;
     }
     if (posterUrl) {
-      this.container.style.backgroundImage = `url('${posterUrl}')`;
+      this.container.style.setProperty("--sf-audio-poster-url", `url('${posterUrl}')`);
       this.container.classList.add("sf-video-container--audio-fallback");
     }
     if (!this.audioFallbackOverlay) {
@@ -5631,7 +5646,7 @@ class VideoManager {
     if (!this.container) {
       return;
     }
-    this.container.style.backgroundImage = "";
+    this.container.style.removeProperty("--sf-audio-poster-url");
     this.container.classList.remove("sf-video-container--audio-fallback");
     if (this.audioFallbackOverlay && this.audioFallbackOverlay.parentNode) {
       this.audioFallbackOverlay.parentNode.removeChild(this.audioFallbackOverlay);
@@ -6054,42 +6069,92 @@ class CursorManager {
    * Creates the virtual cursor element
    */
   create() {
+    this.injectCursorStyles();
     this.cursor = document.createElement("div");
-    this.cursor.style.position = "fixed";
-    this.cursor.style.top = "0";
-    this.cursor.style.left = "0";
-    this.cursor.style.width = "36px";
-    this.cursor.style.height = "36px";
-    this.cursor.style.zIndex = "9999999";
-    this.cursor.style.pointerEvents = "none";
-    this.cursor.style.display = "none";
-    this.cursor.style.willChange = "transform";
+    this.cursor.className = "sf-cursor";
     this.cursor.innerHTML = `
       <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ff7614" stroke-width="2">
         <path d="M3 3L10.5 21L13.5 13.5L21 10.5L3 3Z" fill="#ff7614" />
       </svg>
     `;
     this.selectionElement = document.createElement("div");
-    this.selectionElement.style.position = "fixed";
-    this.selectionElement.style.pointerEvents = "none";
-    this.selectionElement.style.display = "none";
-    this.selectionElement.style.zIndex = "9999998";
+    this.selectionElement.className = "sf-selection";
     document.body.appendChild(this.cursor);
     document.body.appendChild(this.selectionElement);
     this.flashlightOverlay = document.createElement("div");
-    this.flashlightOverlay.style.position = "fixed";
-    this.flashlightOverlay.style.top = "0";
-    this.flashlightOverlay.style.left = "0";
-    this.flashlightOverlay.style.width = "100vw";
-    this.flashlightOverlay.style.height = "100vh";
-    this.flashlightOverlay.style.pointerEvents = "none";
-    this.flashlightOverlay.style.zIndex = "999997";
-    this.flashlightOverlay.style.display = "none";
-    this.flashlightOverlay.style.background = "radial-gradient(circle 150px at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.4) 100%)";
+    this.flashlightOverlay.className = "sf-flashlight-overlay";
     document.body.appendChild(this.flashlightOverlay);
     this.boundScrollHandler = this.handleScroll.bind(this);
     window.addEventListener("scroll", this.boundScrollHandler, { passive: true });
   }
+  /**
+   * Injects cursor styles into the main document for CSP compliance
+   * Uses adoptedStyleSheets API when available, falls back to <style> element
+   */
+  injectCursorStyles() {
+    const cursorStyles = `
+      .sf-cursor {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 36px;
+        height: 36px;
+        z-index: 9999999;
+        pointer-events: none;
+        display: none;
+        will-change: transform;
+        transform: var(--sf-cursor-transform, translate(0, 0));
+        opacity: var(--sf-cursor-opacity, 1);
+      }
+
+      .sf-cursor--visible {
+        display: block;
+      }
+
+      .sf-selection {
+        position: fixed;
+        pointer-events: none;
+        display: none;
+        z-index: 9999998;
+        border: 2px solid #ff7614;
+        background: rgba(255, 118, 20, 0.1);
+        left: var(--sf-selection-left, 0);
+        top: var(--sf-selection-top, 0);
+        width: var(--sf-selection-width, 0);
+        height: var(--sf-selection-height, 0);
+      }
+
+      .sf-selection--visible {
+        display: block;
+      }
+
+      .sf-flashlight-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+        z-index: 9999997;
+        display: none;
+        background: var(--sf-flashlight-bg, radial-gradient(circle 150px at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.4) 100%));
+        clip-path: var(--sf-flashlight-clip, none);
+      }
+
+      .sf-flashlight-overlay--visible {
+        display: block;
+      }
+    `;
+    try {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(cursorStyles);
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    } catch (error2) {
+      const styleElement = document.createElement("style");
+      styleElement.textContent = cursorStyles;
+      document.head.appendChild(styleElement);
+    }
+  }
   /**
    * Handles scrolling to keep the cursor positioned on the target element
    * Uses requestAnimationFrame for smooth 60fps updates
@@ -6186,12 +6251,12 @@ class CursorManager {
     this.lastCursorX = x;
     this.lastCursorY = y;
     if (this.cursor) {
-      this.cursor.style.display = "block";
-      this.cursor.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
+      this.cursor.classList.add("sf-cursor--visible");
+      this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%)`);
     }
     if (this.flashlightOverlay) {
-      this.flashlightOverlay.style.display = "block";
-      this.flashlightOverlay.style.background = `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`;
+      this.flashlightOverlay.classList.add("sf-flashlight-overlay--visible");
+      this.flashlightOverlay.style.setProperty("--sf-flashlight-bg", `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`);
     }
   }
   /**
@@ -6199,13 +6264,13 @@ class CursorManager {
    */
   hideCursorElements() {
     if (this.cursor) {
-      this.cursor.style.display = "none";
+      this.cursor.classList.remove("sf-cursor--visible");
     }
     if (this.selectionElement) {
-      this.selectionElement.style.display = "none";
+      this.selectionElement.classList.remove("sf-selection--visible");
     }
     if (this.flashlightOverlay) {
-      this.flashlightOverlay.style.display = "none";
+      this.flashlightOverlay.classList.remove("sf-flashlight-overlay--visible");
       this.resetFlashlightOverlay();
     }
   }
@@ -6216,10 +6281,10 @@ class CursorManager {
     if (!this.flashlightOverlay) {
       return;
     }
-    this.flashlightOverlay.style.clipPath = "none";
+    this.flashlightOverlay.style.setProperty("--sf-flashlight-clip", "none");
     const x = this.lastCursorX;
     const y = this.lastCursorY;
-    this.flashlightOverlay.style.background = `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`;
+    this.flashlightOverlay.style.setProperty("--sf-flashlight-bg", `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`);
   }
   /**
    * Animates the cursor along a path
@@ -6235,7 +6300,7 @@ class CursorManager {
     this.isSelectionMode = false;
     this.resetFlashlightOverlay();
     if (this.selectionElement) {
-      this.selectionElement.style.display = "none";
+      this.selectionElement.classList.remove("sf-selection--visible");
     }
     if (!(animation == null ? void 0 : animation.targetSelector)) {
       console.warn("CursorManager: No targetSelector provided in animation");
@@ -6277,7 +6342,7 @@ class CursorManager {
       this.targetX = targetRect.left + targetRect.width / 2 + this.POINTER_HORIZONTAL_OFFSET;
       this.targetY = targetRect.top + targetRect.height / 2 + this.POINTER_VERTICAL_OFFSET;
       if (this.selectionElement) {
-        this.selectionElement.style.display = "none";
+        this.selectionElement.classList.remove("sf-selection--visible");
       }
     }
     if (this.targetX !== null && this.targetY !== null && this.startX !== null && this.startY !== null) {
@@ -6326,7 +6391,7 @@ class CursorManager {
           this.selectionElement.style.setProperty("--sf-selection-border-radius", animation.selectionStyles.borderRadius);
         }
       }
-      this.selectionElement.style.display = "none";
+      this.selectionElement.classList.remove("sf-selection--visible");
     }
     this.calculateControlPoint();
     this.currentAnimation = { ...animation };
@@ -6368,11 +6433,11 @@ class CursorManager {
       this.dragStartY,
       currentY - this.SELECTION_VERTICAL_OFFSET
     ));
-    this.selectionElement.style.left = `${left}px`;
-    this.selectionElement.style.top = `${top}px`;
-    this.selectionElement.style.width = `${width}px`;
-    this.selectionElement.style.height = `${height}px`;
-    this.selectionElement.style.display = "block";
+    this.selectionElement.style.setProperty("--sf-selection-left", `${left}px`);
+    this.selectionElement.style.setProperty("--sf-selection-top", `${top}px`);
+    this.selectionElement.style.setProperty("--sf-selection-width", `${width}px`);
+    this.selectionElement.style.setProperty("--sf-selection-height", `${height}px`);
+    this.selectionElement.classList.add("sf-selection--visible");
     this.updateFlashlightWithCutout(left, top, width, height);
   }
   /**
@@ -6420,15 +6485,15 @@ class CursorManager {
     if (this.cursor) {
       const x = this.lastCursorX;
       const y = this.lastCursorY;
-      this.cursor.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%) scale(0.9)`;
-      this.cursor.style.opacity = "0.9";
+      this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%) scale(0.9)`);
+      this.cursor.style.setProperty("--sf-cursor-opacity", "0.9");
     }
     if (this.selectionElement) {
-      this.selectionElement.style.left = `${this.dragStartX}px`;
-      this.selectionElement.style.top = `${this.dragStartY}px`;
-      this.selectionElement.style.width = "0px";
-      this.selectionElement.style.height = "0px";
-      this.selectionElement.style.display = "block";
+      this.selectionElement.style.setProperty("--sf-selection-left", `${this.dragStartX}px`);
+      this.selectionElement.style.setProperty("--sf-selection-top", `${this.dragStartY}px`);
+      this.selectionElement.style.setProperty("--sf-selection-width", "0px");
+      this.selectionElement.style.setProperty("--sf-selection-height", "0px");
+      this.selectionElement.classList.add("sf-selection--visible");
     }
   }
   /**
@@ -6439,8 +6504,8 @@ class CursorManager {
     if (this.cursor) {
       const x = this.lastCursorX;
       const y = this.lastCursorY;
-      this.cursor.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
-      this.cursor.style.opacity = "1";
+      this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%)`);
+      this.cursor.style.setProperty("--sf-cursor-opacity", "1");
     }
     if (this.animationFrameId !== null) {
       cancelAnimationFrame(this.animationFrameId);
@@ -6603,10 +6668,10 @@ class CursorManager {
         0% ${top}px              /* Close cutout path */
       )
     `;
-    this.flashlightOverlay.style.clipPath = clipPath;
+    this.flashlightOverlay.style.setProperty("--sf-flashlight-clip", clipPath);
     const x = this.lastCursorX;
     const y = this.lastCursorY;
-    this.flashlightOverlay.style.background = `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`;
+    this.flashlightOverlay.style.setProperty("--sf-flashlight-bg", `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`);
   }
   /**
    * Calculates a control point for curved cursor movement
@@ -6691,16 +6756,16 @@ class CursorManager {
     if (this.cursor) {
       const x = this.lastCursorX;
       const y = this.lastCursorY;
-      this.cursor.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%) scale(0.8)`;
-      this.cursor.style.opacity = "0.8";
+      this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%) scale(0.8)`);
+      this.cursor.style.setProperty("--sf-cursor-opacity", "0.8");
       setTimeout(() => {
         if (this.cursor) {
           if (!this.canShowCursor()) {
             this.hideCursorElements();
             return;
           }
-          this.cursor.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
-          this.cursor.style.opacity = "1";
+          this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%)`);
+          this.cursor.style.setProperty("--sf-cursor-opacity", "1");
         }
       }, 300);
     }
@@ -6722,12 +6787,12 @@ class CursorManager {
     if (this.cursor) {
       const x = this.lastCursorX;
       const y = this.lastCursorY;
-      this.cursor.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
-      this.cursor.style.opacity = "1";
+      this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%)`);
+      this.cursor.style.setProperty("--sf-cursor-opacity", "1");
     }
     this.resetFlashlightOverlay();
     if (this.selectionElement) {
-      this.selectionElement.style.display = "none";
+      this.selectionElement.classList.remove("sf-selection--visible");
     }
   }
   /**
@@ -6755,11 +6820,11 @@ class CursorManager {
     this.isFirstAnimation = true;
     this.shouldShowCursor = false;
     if (this.cursor) {
-      this.cursor.style.display = "none";
+      this.cursor.classList.remove("sf-cursor--visible");
     }
     this.isSelectionMode = false;
     if (this.selectionElement) {
-      this.selectionElement.style.display = "none";
+      this.selectionElement.classList.remove("sf-selection--visible");
     }
     this.dragStartX = null;
     this.dragStartY = null;
@@ -6917,7 +6982,7 @@ class InteractionManager {
     }
     const store = useSaltfishStore.getState();
     if (store.isMinimized) {
-      this.buttonContainer.style.display = "none";
+      this.buttonContainer.classList.add("sf-hidden");
     }
   }
   /**
@@ -6996,15 +7061,15 @@ class InteractionManager {
     }
     const store = useSaltfishStore.getState();
     if (store.isMinimized) {
-      this.buttonContainer.style.display = "none";
+      this.buttonContainer.classList.add("sf-hidden");
       if (this.scrollIndicator) {
-        this.scrollIndicator.style.display = "none";
+        this.scrollIndicator.classList.add("sf-hidden");
       }
       return;
     } else {
-      this.buttonContainer.style.display = "flex";
+      this.buttonContainer.classList.remove("sf-hidden");
       if (this.scrollIndicator) {
-        this.scrollIndicator.style.display = "flex";
+        this.scrollIndicator.classList.remove("sf-hidden");
       }
     }
     this.buttonContainer.className = "sf-choice-buttons-container";
@@ -9501,9 +9566,9 @@ class MinimizeButton {
   }
   updateVisibility(isMinimized) {
     if (isMinimized) {
-      this.button.style.display = "none";
+      this.button.classList.add("sf-hidden");
     } else {
-      this.button.style.display = "";
+      this.button.classList.remove("sf-hidden");
     }
   }
   destroy() {
@@ -9595,9 +9660,9 @@ class ExitButton {
   }
   updateVisibility(isMinimized) {
     if (isMinimized) {
-      this.button.style.display = "flex";
+      this.button.classList.remove("sf-hidden");
     } else {
-      this.button.style.display = "none";
+      this.button.classList.add("sf-hidden");
     }
   }
   destroy() {
@@ -9621,7 +9686,7 @@ class ErrorDisplay {
   createErrorDisplay() {
     this.errorOverlay = document.createElement("div");
     this.errorOverlay.className = CSS_CLASSES.ERROR_DISPLAY;
-    this.errorOverlay.style.display = "none";
+    this.errorOverlay.classList.add("sf-hidden");
     const errorContent = document.createElement("div");
     errorContent.className = CSS_CLASSES.ERROR_DISPLAY_CONTENT;
     const errorMessage = document.createElement("p");
@@ -9638,7 +9703,7 @@ class ErrorDisplay {
     if (newOptions) {
       this.updateOptions(newOptions);
     }
-    this.errorOverlay.style.display = "flex";
+    this.errorOverlay.classList.remove("sf-hidden");
     this.isVisible = true;
     requestAnimationFrame(() => {
       this.errorOverlay.classList.add(CSS_CLASSES.ERROR_DISPLAY_VISIBLE);
@@ -9653,7 +9718,7 @@ class ErrorDisplay {
     }
     this.errorOverlay.classList.remove(CSS_CLASSES.ERROR_DISPLAY_VISIBLE);
     setTimeout(() => {
-      this.errorOverlay.style.display = "none";
+      this.errorOverlay.classList.add("sf-hidden");
       this.isVisible = false;
     }, 300);
   }
@@ -9718,7 +9783,7 @@ class LoadingSpinner {
    */
   show() {
     if (this.spinnerElement) {
-      this.spinnerElement.style.display = "flex";
+      this.spinnerElement.classList.remove("sf-hidden");
       return;
     }
     this.spinnerElement = document.createElement("div");
@@ -9763,7 +9828,7 @@ class LoadingSpinner {
    */
   hide() {
     if (this.spinnerElement) {
-      this.spinnerElement.style.display = "none";
+      this.spinnerElement.classList.add("sf-hidden");
     }
   }
   /**
@@ -9885,9 +9950,6 @@ class UIManager {
       console.warn(`UIManager: Invalid position "${positionToUse}", defaulting to bottom-right`);
       positionToUse = "bottom-right";
     }
-    this.playerRoot.style.left = "";
-    this.playerRoot.style.top = "";
-    this.playerRoot.style.transform = "";
     this.playerRoot.classList.remove("sf-player-root--bottom-left", "sf-player-root--bottom-right");
     if (positionToUse === "bottom-left") {
       this.playerRoot.classList.add("sf-player-root--bottom-left");
@@ -10117,7 +10179,7 @@ class UIManager {
    */
   updatePlayPauseButton(state) {
     if (this.playButton) {
-      this.playButton.style.display = "none";
+      this.playButton.classList.add("sf-hidden");
     }
     if (!this.centerPlayButton && this.playerElement) {
       this.centerPlayButton = this.playerElement.querySelector(".sf-player__center-play-button");
@@ -10129,12 +10191,14 @@ class UIManager {
       return;
     }
     if (state === "playing" || state === "completed") {
-      this.centerPlayButton.style.display = "none";
+      this.centerPlayButton.classList.remove("sf-player__center-play-button--visible");
+      this.centerPlayButton.classList.remove("sf-player__center-play-button--prominent");
     } else {
-      this.centerPlayButton.style.display = "flex";
+      this.centerPlayButton.classList.add("sf-player__center-play-button--visible");
       if (state === "autoplayBlocked" || state === "idleMode") {
-        this.centerPlayButton.style.opacity = "1";
-        this.centerPlayButton.style.pointerEvents = "auto";
+        this.centerPlayButton.classList.add("sf-player__center-play-button--prominent");
+      } else {
+        this.centerPlayButton.classList.remove("sf-player__center-play-button--prominent");
       }
     }
   }
@@ -10221,8 +10285,7 @@ class UIManager {
    */
   enablePlayButtonProminent() {
     if (this.centerPlayButton) {
-      this.centerPlayButton.style.opacity = "1";
-      this.centerPlayButton.style.pointerEvents = "auto";
+      this.centerPlayButton.classList.add("sf-player__center-play-button--prominent");
     }
   }
   /**
@@ -10230,8 +10293,7 @@ class UIManager {
    */
   disablePlayButtonProminent() {
     if (this.centerPlayButton) {
-      this.centerPlayButton.style.opacity = "";
-      this.centerPlayButton.style.pointerEvents = "";
+      this.centerPlayButton.classList.remove("sf-player__center-play-button--prominent");
     }
   }
   /**
@@ -10614,7 +10676,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.2.65";
+const version = "0.2.66";
 const packageJson = {
   version
 };