stormcloud-video-player 0.3.54 → 0.3.55

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -2647,9 +2647,6 @@ function sendInitialTracking(licenseKey) {
                     headers = {
                         "Content-Type": "application/json"
                     };
-                    if (licenseKey) {
-                        headers["Authorization"] = "Bearer ".concat(licenseKey);
-                    }
                     return [
                         4,
                         fetch("https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track", {
@@ -2755,6 +2752,234 @@ function sendHeartbeat(licenseKey) {
         });
     })();
 }
+var TRACK_API_URL = "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track";
+function mapToAdTrackingSource(source, adPlayerType) {
+    if (source === "prebid" || source === "ima" || source === "hls") {
+        return source;
+    }
+    if (source === "preload" || source === "ssp") {
+        return source === "ssp" ? "prebid" : "ima";
+    }
+    return adPlayerType === "hls" ? "hls" : "ima";
+}
+function postAdTracking(licenseKey, body) {
+    return _async_to_generator(function() {
+        var headers, response;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    headers = {
+                        "Content-Type": "application/json"
+                    };
+                    if (licenseKey) {
+                        headers["Authorization"] = "Bearer ".concat(licenseKey);
+                    }
+                    return [
+                        4,
+                        fetch(TRACK_API_URL, {
+                            method: "POST",
+                            headers: headers,
+                            body: JSON.stringify(body)
+                        })
+                    ];
+                case 1:
+                    response = _state.sent();
+                    if (!response.ok) {
+                        throw new Error("HTTP error! status: ".concat(response.status));
+                    }
+                    return [
+                        4,
+                        response.json()
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function sendAdDetectTracking(licenseKey, payload) {
+    return _async_to_generator(function() {
+        var _payload_source, _payload_timestamp, clientInfo, browserId, adDetectInfo, body, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        3,
+                        ,
+                        4
+                    ]);
+                    clientInfo = getClientInfo();
+                    return [
+                        4,
+                        getBrowserID(clientInfo)
+                    ];
+                case 1:
+                    browserId = _state.sent();
+                    adDetectInfo = _object_spread({
+                        source: (_payload_source = payload.source) !== null && _payload_source !== void 0 ? _payload_source : "scte35",
+                        timestamp: (_payload_timestamp = payload.timestamp) !== null && _payload_timestamp !== void 0 ? _payload_timestamp : /* @__PURE__ */ new Date().toISOString()
+                    }, payload.durationSeconds != null && {
+                        durationSeconds: payload.durationSeconds
+                    }, payload.ptsSeconds != null && {
+                        ptsSeconds: payload.ptsSeconds
+                    }, payload.detectedAtFragmentSn != null && {
+                        detectedAtFragmentSn: payload.detectedAtFragmentSn
+                    });
+                    body = _object_spread_props(_object_spread({
+                        browserId: browserId
+                    }, clientInfo, licenseKey && {
+                        licenseKey: licenseKey
+                    }), {
+                        adDetectInfo: adDetectInfo
+                    });
+                    return [
+                        4,
+                        postAdTracking(licenseKey, body)
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error("[StormcloudVideoPlayer] Error sending ad-detect tracking:", error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function sendAdLoadedTracking(licenseKey, payload, adPlayerType) {
+    return _async_to_generator(function() {
+        var clientInfo, browserId, source, adLoadedInfo, body, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        3,
+                        ,
+                        4
+                    ]);
+                    clientInfo = getClientInfo();
+                    return [
+                        4,
+                        getBrowserID(clientInfo)
+                    ];
+                case 1:
+                    browserId = _state.sent();
+                    source = mapToAdTrackingSource(payload.source, adPlayerType);
+                    adLoadedInfo = _object_spread({
+                        source: source,
+                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                    }, payload.vastUrl != null && {
+                        vastUrl: payload.vastUrl
+                    }, payload.durationSeconds != null && {
+                        durationSeconds: payload.durationSeconds
+                    });
+                    body = _object_spread_props(_object_spread({
+                        browserId: browserId
+                    }, clientInfo, licenseKey && {
+                        licenseKey: licenseKey
+                    }), {
+                        adLoadedInfo: adLoadedInfo
+                    });
+                    return [
+                        4,
+                        postAdTracking(licenseKey, body)
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error("[StormcloudVideoPlayer] Error sending ad-loaded tracking:", error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function sendAdImpressionTracking(licenseKey, payload, adPlayerType) {
+    return _async_to_generator(function() {
+        var clientInfo, browserId, source, adImpressionInfo, body, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        3,
+                        ,
+                        4
+                    ]);
+                    clientInfo = getClientInfo();
+                    return [
+                        4,
+                        getBrowserID(clientInfo)
+                    ];
+                case 1:
+                    browserId = _state.sent();
+                    source = mapToAdTrackingSource(payload.source, adPlayerType);
+                    adImpressionInfo = _object_spread({
+                        source: source,
+                        adIndex: payload.adIndex,
+                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                    }, payload.durationSeconds != null && {
+                        durationSeconds: payload.durationSeconds
+                    });
+                    body = _object_spread_props(_object_spread({
+                        browserId: browserId
+                    }, clientInfo, licenseKey && {
+                        licenseKey: licenseKey
+                    }), {
+                        adImpressionInfo: adImpressionInfo
+                    });
+                    return [
+                        4,
+                        postAdTracking(licenseKey, body)
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error("[StormcloudVideoPlayer] Error sending ad-impression tracking:", error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
 // src/utils/polyfills.ts
 function polyfillURLSearchParams() {
     if (typeof URLSearchParams !== "undefined") {
@@ -3055,6 +3280,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.maxPreloadPoolSize = 2;
         this.preloadPoolActive = false;
         this.preloadPoolLoopRunning = false;
+        this.adDetectSentForCurrentBreak = false;
         this.continuousFetchLoopRunning = false;
         initializePolyfills();
         var browserOverrides = getBrowserConfigOverrides();
@@ -3524,6 +3750,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             value: function attachImaEventListeners() {
                 var _this = this;
                 this.ima.on("all_ads_completed", function() {
+                    sendAdImpressionTracking(_this.config.licenseKey, {
+                        adIndex: _this.currentAdIndex
+                    }, _this.config.adPlayerType).catch(function() {});
                     var remaining = _this.getRemainingAdMs();
                     _this.consecutiveFailures = 0;
                     if (_this.config.debugAdTiming) {
@@ -3586,6 +3815,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     }
                 });
                 this.ima.on("content_resume", function() {
+                    sendAdImpressionTracking(_this.config.licenseKey, {
+                        adIndex: _this.currentAdIndex
+                    }, _this.config.adPlayerType).catch(function() {});
                     if (!_this.video.muted) {
                         _this.video.muted = true;
                         _this.video.volume = 0;
@@ -3969,6 +4201,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         }
                         return;
                     }
+                    if (!this.adDetectSentForCurrentBreak) {
+                        this.adDetectSentForCurrentBreak = true;
+                        var detectPayload = {};
+                        if (marker.durationSeconds != null) detectPayload.durationSeconds = marker.durationSeconds;
+                        if (marker.ptsSeconds != null) detectPayload.ptsSeconds = marker.ptsSeconds;
+                        sendAdDetectTracking(this.config.licenseKey, detectPayload).catch(function() {});
+                    }
                     var hasPrefetchedAds = this.pendingAdBreak && this.pendingAdBreak.vastUrls.length > 0;
                     this.inAdBreak = true;
                     var durationMs = marker.durationSeconds != null ? marker.durationSeconds * 1e3 : ((_this_pendingAdBreak = this.pendingAdBreak) === null || _this_pendingAdBreak === void 0 ? void 0 : _this_pendingAdBreak.marker.durationSeconds) != null ? this.pendingAdBreak.marker.durationSeconds * 1e3 : void 0;
@@ -4526,6 +4765,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     isFetching: false,
                     fetchStartTime: Date.now()
                 });
+                this.adDetectSentForCurrentBreak = true;
+                var detectPayload = {};
+                if (marker.durationSeconds != null) detectPayload.durationSeconds = marker.durationSeconds;
+                if (marker.ptsSeconds != null) detectPayload.ptsSeconds = marker.ptsSeconds;
+                if (fragmentSn !== void 0) detectPayload.detectedAtFragmentSn = fragmentSn;
+                sendAdDetectTracking(this.config.licenseKey, detectPayload).catch(function() {});
                 if (this.config.debugAdTiming) {
                     console.log("[PREFETCH] \uD83D\uDD04 Starting ad prefetch for upcoming ad break");
                     console.log("[PREFETCH] \uD83D\uDCCB Pre-generated ".concat(generatedUrls.length, " VAST URLs"));
@@ -5001,6 +5246,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     firstAdUrl = preloaded.vastUrl;
                                     preloadedController = preloaded.imaController;
                                     usePreloadedAd = true;
+                                    sendAdLoadedTracking(this.config.licenseKey, {
+                                        source: "preload",
+                                        vastUrl: firstAdUrl
+                                    }, this.config.adPlayerType).catch(function() {});
                                     if (this.config.debugAdTiming) {
                                         console.log("[CONTINUOUS-FETCH] \uD83D\uDE80 Using preloaded ad from pool (preloaded in advance, ready immediately!)");
                                         console.log("[CONTINUOUS-FETCH] Pool still has ".concat(this.preloadPool.length, " preloaded ads ready"));
@@ -5090,6 +5339,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 5:
                                 _state.sent();
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "ssp",
+                                    vastUrl: firstAdUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \u2705 First ad request successful, starting playback");
                                 }
@@ -5486,6 +5739,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \uD83C\uDFAF Using preloaded ad from pool (".concat(this.preloadPool.length, " remaining in pool)"));
                                 }
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "preload",
+                                    vastUrl: preloaded.vastUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 _state.label = 1;
                             case 1:
                                 _state.trys.push([
@@ -6190,6 +6447,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 3:
                                 _state.sent();
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "ssp",
+                                    vastUrl: vastTagUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 this.clearAdRequestWatchdog();
                                 if (this.activeAdRequestToken !== requestToken) {
                                     return [
@@ -6404,6 +6665,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
                 this.adRequestQueue = [];
                 this.inAdBreak = false;
+                this.adDetectSentForCurrentBreak = false;
                 this.expectedAdBreakDurationMs = void 0;
                 this.currentAdBreakStartWallClockMs = void 0;
                 this.clearAdStartTimer();
@@ -6843,6 +7105,7 @@ var CRITICAL_PROPS = [
     "driftToleranceMs",
     "vastMode"
 ];
+var CONTROLS_HIDE_DELAY = 3e3;
 var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
         "src",
@@ -6877,6 +7140,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     var videoRef = (0, import_react.useRef)(null);
     var playerRef = (0, import_react.useRef)(null);
     var bufferingTimeoutRef = (0, import_react.useRef)(null);
+    var controlsTimerRef = (0, import_react.useRef)(null);
+    var wrapperRef = (0, import_react.useRef)(null);
     var _import_react_default_useState = _sliced_to_array(import_react.default.useState({
         showAds: false,
         currentIndex: 0,
@@ -6896,8 +7161,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     var _import_react_default_useState12 = _sliced_to_array(import_react.default.useState(false), 2), isBuffering = _import_react_default_useState12[0], setIsBuffering = _import_react_default_useState12[1];
     var _import_react_default_useState13 = _sliced_to_array(import_react.default.useState(false), 2), showCenterPlay = _import_react_default_useState13[0], setShowCenterPlay = _import_react_default_useState13[1];
     var _import_react_default_useState14 = _sliced_to_array(import_react.default.useState(false), 2), showLicenseWarning = _import_react_default_useState14[0], setShowLicenseWarning = _import_react_default_useState14[1];
-    var _import_react_default_useState15 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react_default_useState15[0], setViewportWidth = _import_react_default_useState15[1];
-    var _import_react_default_useState16 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react_default_useState16[0], setIsPortrait = _import_react_default_useState16[1];
+    var _import_react_default_useState15 = _sliced_to_array(import_react.default.useState(true), 2), controlsVisible = _import_react_default_useState15[0], setControlsVisible = _import_react_default_useState15[1];
+    var _import_react_default_useState16 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react_default_useState16[0], setViewportWidth = _import_react_default_useState16[1];
+    var _import_react_default_useState17 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react_default_useState17[0], setIsPortrait = _import_react_default_useState17[1];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -6905,6 +7171,33 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         return 1;
     };
     var responsiveScale = getResponsiveScale();
+    var resetControlsTimer = (0, import_react.useCallback)(function() {
+        if (controlsTimerRef.current) {
+            clearTimeout(controlsTimerRef.current);
+        }
+        setControlsVisible(true);
+        controlsTimerRef.current = window.setTimeout(function() {
+            if (!showVolumeSlider && !showSpeedMenu) {
+                setControlsVisible(false);
+            }
+        }, CONTROLS_HIDE_DELAY);
+    }, [
+        showVolumeSlider,
+        showSpeedMenu
+    ]);
+    var handleWrapperMouseMove = (0, import_react.useCallback)(function() {
+        resetControlsTimer();
+    }, [
+        resetControlsTimer
+    ]);
+    var handleWrapperMouseLeave = (0, import_react.useCallback)(function() {
+        if (!showVolumeSlider && !showSpeedMenu) {
+            setControlsVisible(false);
+        }
+    }, [
+        showVolumeSlider,
+        showSpeedMenu
+    ]);
     var formatTime = function formatTime(seconds) {
         if (!isFinite(seconds)) return "0:00:00";
         var hours = Math.floor(seconds / 3600);
@@ -6930,6 +7223,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 setShowCenterPlay(true);
             }
         }
+        resetControlsTimer();
     };
     var handleCenterPlayClick = function handleCenterPlayClick() {
         if (videoRef.current && videoRef.current.paused) {
@@ -6955,6 +7249,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 videoRef.current.currentTime = newTime;
             }
         }
+        resetControlsTimer();
     };
     var handleVolumeChange = function handleVolumeChange(newVolume) {
         if (playerRef.current && isFinite(newVolume)) {
@@ -7110,7 +7405,6 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     (0, import_react.useEffect)(function() {
         if (!playerRef.current || !videoRef.current) return;
         var updateStates = function updateStates() {
-            var _videoRef_current;
             if (playerRef.current && videoRef.current) {
                 setIsMuted(playerRef.current.isMuted());
                 setIsPlaying(!videoRef.current.paused);
@@ -7123,12 +7417,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 var rateValue = videoRef.current.playbackRate;
                 setPlaybackRate(isFinite(rateValue) && rateValue > 0 ? rateValue : 1);
             }
-            setIsFullscreen(document.fullscreenElement === ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.parentElement));
+            setIsFullscreen(document.fullscreenElement === wrapperRef.current);
         };
         var interval = setInterval(updateStates, 200);
         var handleFullscreenChange = function handleFullscreenChange() {
-            var _videoRef_current;
-            setIsFullscreen(document.fullscreenElement === ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.parentElement));
+            setIsFullscreen(document.fullscreenElement === wrapperRef.current);
         };
         document.addEventListener("fullscreenchange", handleFullscreenChange);
         return function() {
@@ -7256,13 +7549,25 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         debugAdTiming
     ]);
+    (0, import_react.useEffect)(function() {
+        return function() {
+            if (controlsTimerRef.current) {
+                clearTimeout(controlsTimerRef.current);
+            }
+        };
+    }, []);
+    var progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
+    var VolumeIcon = isMuted || volume === 0 ? import_fa.FaVolumeMute : volume < 0.5 ? import_fa.FaVolumeDown : import_fa.FaVolumeUp;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
-                children: "\n              @keyframes spin {\n                from {\n                  transform: rotate(0deg);\n                }\n                to {\n                  transform: rotate(360deg);\n                }\n              }\n              \n              .stormcloud-loading-hidden .stormcloud-loading-indicator {\n                display: none !important;\n              }\n              \n              .stormcloud-video-wrapper:fullscreen {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              \n              .stormcloud-video-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              \n              *:fullscreen {\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n              }\n            "
+                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n            "
             }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                className: "stormcloud-video-wrapper ".concat(wrapperClassName || ""),
+                ref: wrapperRef,
+                className: "sc-wrapper ".concat(wrapperClassName || ""),
+                onMouseMove: handleWrapperMouseMove,
+                onMouseLeave: handleWrapperMouseLeave,
                 style: _object_spread({
                     display: "flex",
                     alignItems: "center",
@@ -7277,7 +7582,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                     maxWidth: isFullscreen ? "100vw" : "100%",
                     maxHeight: isFullscreen ? "100vh" : "none",
                     zIndex: isFullscreen ? 999999 : void 0,
-                    backgroundColor: isFullscreen ? "#000" : void 0,
+                    backgroundColor: "#000",
                     borderRadius: isFullscreen ? 0 : void 0,
                     boxShadow: isFullscreen ? "none" : void 0
                 }, wrapperStyle),
@@ -7303,16 +7608,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                         children: children
                     })),
                     (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
-                        className: "stormcloud-loading-indicator",
-                        size: 42,
-                        color: "white",
+                        className: "sc-loading-indicator",
+                        size: 40,
+                        color: "rgba(255, 255, 255, 0.85)",
                         style: {
                             position: "absolute",
-                            top: "calc(50% - 21px)",
-                            left: "calc(50% - 21px)",
+                            top: "calc(50% - 20px)",
+                            left: "calc(50% - 20px)",
                             zIndex: 20,
-                            animation: "spin 1s linear infinite",
-                            filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
+                            animation: "sc-spin 0.9s linear infinite",
+                            filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
                         }
                     }),
                     showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -7322,13 +7627,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             left: "50%",
                             transform: "translate(-50%, -50%)",
                             zIndex: 25,
-                            background: "linear-gradient(135deg, rgba(220, 38, 38, 0.95) 0%, rgba(185, 28, 28, 0.9) 100%)",
+                            background: "rgba(220, 38, 38, 0.92)",
+                            backdropFilter: "blur(24px)",
                             color: "white",
-                            padding: "24px 32px",
-                            borderRadius: "16px",
-                            backdropFilter: "blur(20px)",
-                            border: "2px solid rgba(255, 255, 255, 0.2)",
-                            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2)",
+                            padding: "28px 36px",
+                            borderRadius: "14px",
+                            border: "1px solid rgba(255, 255, 255, 0.15)",
+                            boxShadow: "0 24px 64px rgba(0, 0, 0, 0.5)",
                             textAlign: "center",
                             maxWidth: "400px",
                             margin: "0 16px"
@@ -7336,20 +7641,18 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                         children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                 style: {
-                                    fontSize: "20px",
-                                    fontWeight: "bold",
-                                    marginBottom: "12px",
-                                    color: "#ffffff",
-                                    textShadow: "0 2px 4px rgba(0, 0, 0, 0.5)"
+                                    fontSize: "18px",
+                                    fontWeight: "700",
+                                    marginBottom: "10px",
+                                    letterSpacing: "-0.02em"
                                 },
                                 children: "License Key Required"
                             }),
                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                 style: {
-                                    fontSize: "14px",
-                                    lineHeight: "1.5",
-                                    color: "rgba(255, 255, 255, 0.9)",
-                                    textShadow: "0 1px 2px rgba(0, 0, 0, 0.3)"
+                                    fontSize: "13px",
+                                    lineHeight: "1.6",
+                                    color: "rgba(255, 255, 255, 0.85)"
                                 },
                                 children: [
                                     "Please provide a valid license key to use the Stormcloud Video Player.",
@@ -7368,573 +7671,419 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             transform: "translate(-50%, -50%)",
                             zIndex: 15,
                             cursor: "pointer",
-                            background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
+                            background: "rgba(0, 0, 0, 0.55)",
+                            backdropFilter: "blur(8px)",
                             borderRadius: "50%",
-                            width: "100px",
-                            height: "100px",
+                            width: "".concat(92 * responsiveScale, "px"),
+                            height: "".concat(92 * responsiveScale, "px"),
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
-                            backdropFilter: "blur(20px)",
-                            border: "3px solid rgba(255, 255, 255, 0.8)",
-                            boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
-                            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                            transition: "background 0.2s ease, transform 0.2s ease",
+                            animation: "sc-fade-in 0.2s ease"
                         },
                         onMouseEnter: function onMouseEnter(e) {
-                            var target = e.currentTarget;
-                            target.style.transform = "translate(-50%, -50%)";
-                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
-                            target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                            target.style.borderColor = "rgba(255, 255, 255, 0.9)";
+                            e.currentTarget.style.background = "rgba(0, 0, 0, 0.72)";
+                            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.06)";
                         },
                         onMouseLeave: function onMouseLeave(e) {
-                            var target = e.currentTarget;
-                            target.style.transform = "translate(-50%, -50%)";
-                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
-                            target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
-                            target.style.borderColor = "rgba(255, 255, 255, 0.8)";
+                            e.currentTarget.style.background = "rgba(0, 0, 0, 0.55)";
+                            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)";
                         },
                         title: "Play",
                         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
-                            size: 36,
+                            size: Math.max(24, 32 * responsiveScale),
                             color: "white",
                             style: {
-                                marginLeft: "6px",
-                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
+                                marginLeft: "4px"
                             }
                         })
                     }),
-                    shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                            style: {
-                                position: "absolute",
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                background: "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%)",
-                                padding: "20px 16px 16px",
-                                zIndex: 10
-                            },
-                            children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                    style: {
-                                        width: "100%",
-                                        height: "8px",
-                                        background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
-                                        borderRadius: "8px",
-                                        marginBottom: "16px",
-                                        cursor: "pointer",
-                                        position: "relative",
-                                        backdropFilter: "blur(5px)",
-                                        border: "1px solid rgba(255, 255, 255, 0.1)",
-                                        boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
-                                    },
-                                    onClick: handleTimelineSeek,
-                                    children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                            style: {
-                                                height: "100%",
-                                                background: "linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(34, 197, 94, 0.9) 100%)",
-                                                borderRadius: "8px",
-                                                width: "".concat(duration > 0 ? currentTime / duration * 100 : 0, "%"),
-                                                transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
-                                            }
-                                        }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                            style: {
-                                                position: "absolute",
-                                                top: "-6px",
-                                                right: "".concat(duration > 0 ? 100 - currentTime / duration * 100 : 100, "%"),
-                                                width: "20px",
-                                                height: "20px",
-                                                background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
-                                                borderRadius: "50%",
-                                                border: "3px solid rgba(139, 92, 246, 0.8)",
-                                                boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
-                                                transform: "translateX(50%)",
-                                                transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
-                                            }
-                                        })
-                                    ]
-                                }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                    style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "space-between",
-                                        color: "white",
-                                        flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
-                                        gap: "".concat(8 * responsiveScale, "px")
-                                    },
-                                    children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                            style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "".concat(12 * responsiveScale, "px"),
-                                                flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
-                                            },
-                                            children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                    onClick: handlePlayPause,
+                    shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        className: "sc-controls-bar",
+                        style: {
+                            position: "absolute",
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%)",
+                            padding: "".concat(20 * responsiveScale, "px ").concat(12 * responsiveScale, "px ").concat(8 * responsiveScale, "px"),
+                            zIndex: 10,
+                            opacity: controlsVisible || adStatus.showAds ? 1 : 0,
+                            transform: controlsVisible || adStatus.showAds ? "translateY(0)" : "translateY(6px)",
+                            pointerEvents: controlsVisible || adStatus.showAds ? "auto" : "none"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                className: "sc-progress-track",
+                                style: {
+                                    width: "100%",
+                                    height: "3px",
+                                    background: "rgba(255, 255, 255, 0.2)",
+                                    borderRadius: "1.5px",
+                                    marginBottom: "".concat(8 * responsiveScale, "px"),
+                                    cursor: "pointer",
+                                    position: "relative",
+                                    transition: "height 0.1s ease"
+                                },
+                                onClick: handleTimelineSeek,
+                                onMouseEnter: function onMouseEnter(e) {
+                                    e.currentTarget.style.height = "5px";
+                                },
+                                onMouseLeave: function onMouseLeave(e) {
+                                    e.currentTarget.style.height = "3px";
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            bottom: 0,
+                                            background: adStatus.showAds ? "#f5c518" : "#ff0000",
+                                            borderRadius: "1.5px",
+                                            width: "".concat(progressPercent, "%"),
+                                            transition: "width 0.15s linear"
+                                        }
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        className: "sc-progress-thumb",
+                                        style: {
+                                            position: "absolute",
+                                            top: "50%",
+                                            left: "".concat(progressPercent, "%"),
+                                            transform: "translate(-50%, -50%) scale(0)",
+                                            width: "13px",
+                                            height: "13px",
+                                            background: adStatus.showAds ? "#f5c518" : "#ff0000",
+                                            borderRadius: "50%",
+                                            boxShadow: "0 0 4px rgba(0, 0, 0, 0.3)",
+                                            transition: "transform 0.1s ease, left 0.15s linear"
+                                        }
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    color: "white",
+                                    gap: "".concat(8 * responsiveScale, "px")
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "".concat(8 * responsiveScale, "px")
+                                        },
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                className: "sc-ctrl-btn",
+                                                onClick: handlePlayPause,
+                                                style: {
+                                                    padding: "".concat(8 * responsiveScale, "px"),
+                                                    borderRadius: "50%",
+                                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                                    minHeight: "".concat(36 * responsiveScale, "px")
+                                                },
+                                                title: isPlaying ? "Pause" : "Play",
+                                                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPause, {
+                                                    size: Math.max(14, 18 * responsiveScale)
+                                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
+                                                    size: Math.max(14, 18 * responsiveScale),
                                                     style: {
-                                                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
-                                                        backdropFilter: "blur(12px)",
-                                                        border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                        color: "#ffffff",
-                                                        cursor: "pointer",
-                                                        padding: "".concat(10 * responsiveScale, "px"),
-                                                        borderRadius: "".concat(16 * responsiveScale, "px"),
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                                        minWidth: "".concat(48 * responsiveScale, "px"),
-                                                        minHeight: "".concat(48 * responsiveScale, "px")
-                                                    },
-                                                    onMouseEnter: function onMouseEnter(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
-                                                        target.style.boxShadow = "0 12px 48px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                                                    },
-                                                    onMouseLeave: function onMouseLeave(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
-                                                        target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                                                    },
-                                                    title: isPlaying ? "Pause" : "Play",
-                                                    children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPause, {
-                                                        size: Math.max(16, 20 * responsiveScale),
+                                                        marginLeft: "2px"
+                                                    }
+                                                })
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                style: {
+                                                    display: "flex",
+                                                    alignItems: "center"
+                                                },
+                                                onMouseEnter: function onMouseEnter() {
+                                                    return setShowVolumeSlider(true);
+                                                },
+                                                onMouseLeave: function onMouseLeave() {
+                                                    return setShowVolumeSlider(false);
+                                                },
+                                                children: [
+                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                        className: "sc-ctrl-btn",
+                                                        onClick: function onClick() {
+                                                            if (playerRef.current) playerRef.current.toggleMute();
+                                                            onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                                            resetControlsTimer();
+                                                        },
                                                         style: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
-                                                    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
-                                                        size: Math.max(16, 20 * responsiveScale),
+                                                            padding: "".concat(8 * responsiveScale, "px"),
+                                                            borderRadius: "50%",
+                                                            minWidth: "".concat(36 * responsiveScale, "px"),
+                                                            minHeight: "".concat(36 * responsiveScale, "px")
+                                                        },
+                                                        title: isMuted ? "Unmute" : "Mute",
+                                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                                            size: Math.max(14, 18 * responsiveScale)
+                                                        })
+                                                    }),
+                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                         style: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
-                                                    })
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                    style: {
-                                                        position: "relative",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        padding: "8px",
-                                                        margin: "-8px"
-                                                    },
-                                                    onMouseEnter: function onMouseEnter() {
-                                                        return setShowVolumeSlider(true);
-                                                    },
-                                                    onMouseLeave: function onMouseLeave() {
-                                                        return setShowVolumeSlider(false);
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                            onClick: function onClick() {
-                                                                if (playerRef.current) {
-                                                                    playerRef.current.toggleMute();
-                                                                }
-                                                                if (onVolumeToggle) {
-                                                                    onVolumeToggle();
-                                                                }
-                                                            },
+                                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                                            overflow: "hidden",
+                                                            transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            paddingLeft: showVolumeSlider ? "2px" : "0",
+                                                            paddingRight: showVolumeSlider ? "4px" : "0"
+                                                        },
+                                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                                             style: {
-                                                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
-                                                                backdropFilter: "blur(10px)",
-                                                                border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                                color: "#ffffff",
+                                                                position: "relative",
+                                                                width: "".concat(56 * responsiveScale, "px"),
+                                                                height: "3px",
                                                                 cursor: "pointer",
-                                                                padding: "".concat(8 * responsiveScale, "px"),
-                                                                borderRadius: "".concat(16 * responsiveScale, "px"),
-                                                                display: "flex",
-                                                                alignItems: "center",
-                                                                justifyContent: "center",
-                                                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                                boxShadow: "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
-                                                                minWidth: "".concat(44 * responsiveScale, "px"),
-                                                                minHeight: "".concat(44 * responsiveScale, "px")
+                                                                borderRadius: "1.5px"
                                                             },
-                                                            onMouseEnter: function onMouseEnter(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
-                                                                target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
+                                                            onMouseDown: function onMouseDown(e) {
+                                                                e.preventDefault();
+                                                                var el = e.currentTarget;
+                                                                var move = function move(ev) {
+                                                                    var r2 = el.getBoundingClientRect();
+                                                                    handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
+                                                                };
+                                                                var up = function up1() {
+                                                                    document.removeEventListener("mousemove", move);
+                                                                    document.removeEventListener("mouseup", up);
+                                                                };
+                                                                document.addEventListener("mousemove", move);
+                                                                document.addEventListener("mouseup", up);
+                                                                var r = el.getBoundingClientRect();
+                                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
                                                             },
-                                                            onMouseLeave: function onMouseLeave(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
-                                                                target.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
+                                                            onClick: function onClick(e) {
+                                                                e.stopPropagation();
+                                                                var r = e.currentTarget.getBoundingClientRect();
+                                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
                                                             },
-                                                            title: isMuted ? "Unmute" : "Mute",
-                                                            children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeMute, {
-                                                                size: Math.max(14, 16 * responsiveScale),
-                                                                style: {
-                                                                    filter: "drop-shadow(0 0 0 transparent)"
-                                                                }
-                                                            }) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeDown, {
-                                                                size: Math.max(14, 16 * responsiveScale),
-                                                                style: {
-                                                                    filter: "drop-shadow(0 0 0 transparent)"
-                                                                }
-                                                            }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeUp, {
-                                                                size: Math.max(14, 16 * responsiveScale),
-                                                                style: {
-                                                                    filter: "drop-shadow(0 0 0 transparent)"
-                                                                }
-                                                            })
-                                                        }),
-                                                        showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
                                                             children: [
                                                                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
-                                                                        bottom: "100%",
-                                                                        left: "50%",
-                                                                        transform: "translateX(-50%)",
-                                                                        width: "60px",
-                                                                        height: "20px",
-                                                                        marginBottom: "-16px",
-                                                                        zIndex: 9
-                                                                    },
-                                                                    onMouseEnter: function onMouseEnter() {
-                                                                        return setShowVolumeSlider(true);
-                                                                    },
-                                                                    onMouseLeave: function onMouseLeave() {
-                                                                        return setShowVolumeSlider(false);
+                                                                        inset: 0,
+                                                                        background: "rgba(255, 255, 255, 0.2)",
+                                                                        borderRadius: "1.5px"
+                                                                    }
+                                                                }),
+                                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                                    style: {
+                                                                        position: "absolute",
+                                                                        top: 0,
+                                                                        left: 0,
+                                                                        bottom: 0,
+                                                                        width: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                                        background: "#fff",
+                                                                        borderRadius: "1.5px",
+                                                                        transition: "width 0.1s ease-out"
                                                                     }
                                                                 }),
                                                                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
-                                                                        bottom: "100%",
-                                                                        left: "50%",
-                                                                        transform: "translateX(-50%)",
-                                                                        marginBottom: "4px",
-                                                                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.88) 0%, rgba(20, 20, 20, 0.92) 100%)",
-                                                                        backdropFilter: "blur(15px)",
-                                                                        padding: "10px 14px",
-                                                                        borderRadius: "14px",
-                                                                        border: "1px solid rgba(255, 255, 255, 0.15)",
-                                                                        display: "flex",
-                                                                        flexDirection: "column",
-                                                                        alignItems: "center",
-                                                                        justifyContent: "center",
-                                                                        height: "128px",
-                                                                        boxShadow: "0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)",
-                                                                        zIndex: 10,
-                                                                        transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out"
-                                                                    },
-                                                                    onMouseEnter: function onMouseEnter(e) {
-                                                                        setShowVolumeSlider(true);
-                                                                        e.currentTarget.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(59, 130, 246, 0.3)";
-                                                                        e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
-                                                                    },
-                                                                    onMouseLeave: function onMouseLeave(e) {
-                                                                        setShowVolumeSlider(false);
-                                                                        e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
-                                                                        e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
-                                                                    },
-                                                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                                        style: {
-                                                                            position: "relative",
-                                                                            width: "8px",
-                                                                            height: "104px",
-                                                                            cursor: "pointer",
-                                                                            transition: "transform 0.2s ease-in-out"
-                                                                        },
-                                                                        onMouseEnter: function onMouseEnter(e) {},
-                                                                        onMouseLeave: function onMouseLeave(e) {},
-                                                                        onMouseDown: function onMouseDown(e) {
-                                                                            e.preventDefault();
-                                                                            var sliderElement = e.currentTarget;
-                                                                            var handleMouseMove = function handleMouseMove(moveEvent) {
-                                                                                if (!sliderElement) return;
-                                                                                var rect2 = sliderElement.getBoundingClientRect();
-                                                                                var y2 = moveEvent.clientY - rect2.top;
-                                                                                var percentage2 = 1 - Math.max(0, Math.min(1, y2 / rect2.height));
-                                                                                handleVolumeChange(percentage2);
-                                                                            };
-                                                                            var handleMouseUp = function handleMouseUp1() {
-                                                                                document.removeEventListener("mousemove", handleMouseMove);
-                                                                                document.removeEventListener("mouseup", handleMouseUp);
-                                                                            };
-                                                                            document.addEventListener("mousemove", handleMouseMove);
-                                                                            document.addEventListener("mouseup", handleMouseUp);
-                                                                            var rect = sliderElement.getBoundingClientRect();
-                                                                            var y = e.clientY - rect.top;
-                                                                            var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                                            handleVolumeChange(percentage);
-                                                                        },
-                                                                        onClick: function onClick(e) {
-                                                                            e.stopPropagation();
-                                                                            var rect = e.currentTarget.getBoundingClientRect();
-                                                                            var y = e.clientY - rect.top;
-                                                                            var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                                            handleVolumeChange(percentage);
-                                                                        },
-                                                                        children: [
-                                                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                                                style: {
-                                                                                    position: "absolute",
-                                                                                    bottom: "0",
-                                                                                    left: "0",
-                                                                                    width: "100%",
-                                                                                    height: "100%",
-                                                                                    background: "linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 100%)",
-                                                                                    borderRadius: "4px",
-                                                                                    boxShadow: "inset 0 1px 3px rgba(0, 0, 0, 0.2)"
-                                                                                }
-                                                                            }),
-                                                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                                                style: {
-                                                                                    position: "absolute",
-                                                                                    bottom: "0",
-                                                                                    left: "0",
-                                                                                    width: "100%",
-                                                                                    height: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                                                    background: "linear-gradient(180deg, rgba(96, 165, 250, 1) 0%, rgba(59, 130, 246, 0.95) 50%, rgba(37, 99, 235, 0.9) 100%)",
-                                                                                    borderRadius: "4px",
-                                                                                    transition: "height 0.15s ease-out, box-shadow 0.2s ease-in-out",
-                                                                                    boxShadow: "0 0 8px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3)"
-                                                                                }
-                                                                            }),
-                                                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                                                style: {
-                                                                                    position: "absolute",
-                                                                                    bottom: "calc(".concat((isMuted ? 0 : volume) * 100, "% - 7px)"),
-                                                                                    left: "50%",
-                                                                                    transform: "translateX(-50%)",
-                                                                                    width: "14px",
-                                                                                    height: "14px",
-                                                                                    background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)",
-                                                                                    borderRadius: "50%",
-                                                                                    boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(59, 130, 246, 0.3), 0 0 12px rgba(59, 130, 246, 0.4)",
-                                                                                    transition: "bottom 0.15s ease-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out",
-                                                                                    cursor: "grab"
-                                                                                },
-                                                                                onMouseEnter: function onMouseEnter(e) {
-                                                                                    e.currentTarget.style.boxShadow = "0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.6)";
-                                                                                    e.currentTarget.style.cursor = "grab";
-                                                                                },
-                                                                                onMouseLeave: function onMouseLeave(e) {
-                                                                                    e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(59, 130, 246, 0.3), 0 0 12px rgba(59, 130, 246, 0.4)";
-                                                                                },
-                                                                                onMouseDown: function onMouseDown(e) {
-                                                                                    e.currentTarget.style.cursor = "grabbing";
-                                                                                },
-                                                                                onMouseUp: function onMouseUp(e) {
-                                                                                    e.currentTarget.style.cursor = "grab";
-                                                                                }
-                                                                            })
-                                                                        ]
-                                                                    })
+                                                                        top: "50%",
+                                                                        left: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                                        transform: "translate(-50%, -50%)",
+                                                                        width: "12px",
+                                                                        height: "12px",
+                                                                        background: "#fff",
+                                                                        borderRadius: "50%",
+                                                                        boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
+                                                                        transition: "left 0.1s ease-out"
+                                                                    }
                                                                 })
                                                             ]
                                                         })
-                                                    ]
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                    style: {
-                                                        fontSize: "".concat(14 * responsiveScale, "px"),
-                                                        fontFamily: "monospace",
-                                                        color: "rgba(255, 255, 255, 0.9)",
-                                                        display: viewportWidth < 480 ? "none" : "block"
-                                                    },
-                                                    children: [
-                                                        formatTime(currentTime),
-                                                        " / ",
-                                                        formatTime(duration)
-                                                    ]
-                                                })
-                                            ]
-                                        }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                            style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "".concat(12 * responsiveScale, "px")
-                                            },
-                                            children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                    style: {
-                                                        position: "relative",
-                                                        display: viewportWidth < 600 ? "none" : "block"
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-                                                            onClick: function onClick() {
-                                                                return setShowSpeedMenu(!showSpeedMenu);
-                                                            },
-                                                            style: {
-                                                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
-                                                                backdropFilter: "blur(10px)",
-                                                                border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                                color: "#ffffff",
-                                                                cursor: "pointer",
-                                                                padding: "".concat(8 * responsiveScale, "px ").concat(14 * responsiveScale, "px"),
-                                                                borderRadius: "".concat(14 * responsiveScale, "px"),
-                                                                fontSize: "".concat(14 * responsiveScale, "px"),
-                                                                fontFamily: "monospace",
-                                                                fontWeight: "700",
-                                                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                                boxShadow: "0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
-                                                                minWidth: "".concat(56 * responsiveScale, "px"),
-                                                                minHeight: "".concat(40 * responsiveScale, "px")
-                                                            },
-                                                            onMouseEnter: function onMouseEnter(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
-                                                                target.style.boxShadow = "0 10px 32px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
-                                                            },
-                                                            onMouseLeave: function onMouseLeave(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
-                                                                target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
-                                                            },
-                                                            title: "Playback Speed",
-                                                            children: [
-                                                                playbackRate,
-                                                                "x"
-                                                            ]
-                                                        }),
-                                                        showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "100%",
-                                                                right: 0,
-                                                                marginBottom: "12px",
-                                                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
-                                                                backdropFilter: "blur(20px)",
-                                                                borderRadius: "12px",
-                                                                border: "1px solid rgba(255, 255, 255, 0.1)",
-                                                                overflow: "hidden",
-                                                                minWidth: "90px",
-                                                                boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
-                                                            },
-                                                            children: [
-                                                                0.25,
-                                                                0.5,
-                                                                0.75,
-                                                                1,
-                                                                1.25,
-                                                                1.5,
-                                                                1.75,
-                                                                2
-                                                            ].map(function(speed) {
-                                                                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-                                                                    onClick: function onClick() {
-                                                                        return handlePlaybackRateChange(speed);
-                                                                    },
-                                                                    style: {
-                                                                        display: "block",
-                                                                        width: "100%",
-                                                                        padding: "10px 16px",
-                                                                        background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
-                                                                        border: "none",
-                                                                        color: "white",
-                                                                        cursor: "pointer",
-                                                                        fontSize: "13px",
-                                                                        fontFamily: "monospace",
-                                                                        fontWeight: "600",
-                                                                        textAlign: "center",
-                                                                        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                                        borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
-                                                                    },
-                                                                    onMouseEnter: function onMouseEnter(e) {
-                                                                        if (playbackRate !== speed) {
-                                                                            e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
-                                                                        }
-                                                                    },
-                                                                    onMouseLeave: function onMouseLeave(e) {
-                                                                        if (playbackRate !== speed) {
-                                                                            e.target.style.background = "transparent";
-                                                                        }
-                                                                    },
-                                                                    children: [
-                                                                        speed,
-                                                                        "x"
-                                                                    ]
-                                                                }, speed);
-                                                            })
-                                                        })
-                                                    ]
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                    onClick: function onClick() {
-                                                        if (onFullscreenToggle) {
-                                                            onFullscreenToggle();
-                                                        } else if (playerRef.current) {
-                                                            playerRef.current.toggleFullscreen().catch(function(err) {
-                                                                console.error("Fullscreen error:", err);
-                                                            });
-                                                        }
-                                                    },
-                                                    style: {
-                                                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
-                                                        backdropFilter: "blur(10px)",
-                                                        border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                        color: "#ffffff",
-                                                        cursor: "pointer",
-                                                        padding: "".concat(8 * responsiveScale, "px"),
-                                                        borderRadius: "".concat(16 * responsiveScale, "px"),
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                        boxShadow: "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
-                                                        minWidth: "".concat(44 * responsiveScale, "px"),
-                                                        minHeight: "".concat(44 * responsiveScale, "px")
-                                                    },
-                                                    onMouseEnter: function onMouseEnter(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
-                                                        target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
-                                                    },
-                                                    onMouseLeave: function onMouseLeave(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
-                                                        target.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
-                                                    },
-                                                    title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-                                                    children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
-                                                        size: Math.max(14, 16 * responsiveScale),
+                                                    })
+                                                ]
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                style: {
+                                                    fontSize: "".concat(13 * responsiveScale, "px"),
+                                                    fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+                                                    color: "rgba(255, 255, 255, 0.9)",
+                                                    display: viewportWidth < 480 ? "none" : "block",
+                                                    fontVariantNumeric: "tabular-nums",
+                                                    userSelect: "none",
+                                                    marginLeft: "".concat(4 * responsiveScale, "px")
+                                                },
+                                                children: [
+                                                    formatTime(currentTime),
+                                                    " ",
+                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
                                                         style: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
-                                                    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
-                                                        size: Math.max(14, 16 * responsiveScale),
+                                                            color: "rgba(255,255,255,0.5)"
+                                                        },
+                                                        children: "/"
+                                                    }),
+                                                    " ",
+                                                    formatTime(duration)
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "".concat(8 * responsiveScale, "px")
+                                        },
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                style: {
+                                                    position: "relative",
+                                                    display: viewportWidth < 600 ? "none" : "block"
+                                                },
+                                                children: [
+                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                                                        className: "sc-ctrl-btn",
+                                                        onClick: function onClick() {
+                                                            setShowSpeedMenu(!showSpeedMenu);
+                                                            resetControlsTimer();
+                                                        },
                                                         style: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
+                                                            padding: "".concat(6 * responsiveScale, "px ").concat(10 * responsiveScale, "px"),
+                                                            borderRadius: "".concat(6 * responsiveScale, "px"),
+                                                            fontSize: "".concat(13 * responsiveScale, "px"),
+                                                            fontFamily: "'SF Mono', 'Cascadia Code', monospace",
+                                                            fontWeight: "600",
+                                                            minHeight: "".concat(32 * responsiveScale, "px")
+                                                        },
+                                                        title: "Playback Speed",
+                                                        children: [
+                                                            playbackRate,
+                                                            "x"
+                                                        ]
+                                                    }),
+                                                    showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                        style: {
+                                                            position: "absolute",
+                                                            bottom: "100%",
+                                                            right: 0,
+                                                            marginBottom: "8px",
+                                                            background: "rgba(0, 0, 0, 0.8)",
+                                                            backdropFilter: "blur(24px)",
+                                                            WebkitBackdropFilter: "blur(24px)",
+                                                            borderRadius: "10px",
+                                                            border: "1px solid rgba(255, 255, 255, 0.1)",
+                                                            overflow: "hidden",
+                                                            minWidth: "80px",
+                                                            boxShadow: "0 12px 40px rgba(0, 0, 0, 0.5)",
+                                                            animation: "sc-fade-in 0.15s ease"
+                                                        },
+                                                        children: [
+                                                            0.25,
+                                                            0.5,
+                                                            0.75,
+                                                            1,
+                                                            1.25,
+                                                            1.5,
+                                                            1.75,
+                                                            2
+                                                        ].map(function(speed) {
+                                                            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                                                                onClick: function onClick() {
+                                                                    return handlePlaybackRateChange(speed);
+                                                                },
+                                                                style: {
+                                                                    display: "block",
+                                                                    width: "100%",
+                                                                    padding: "".concat(8 * responsiveScale, "px ").concat(14 * responsiveScale, "px"),
+                                                                    background: playbackRate === speed ? "rgba(255, 255, 255, 0.12)" : "transparent",
+                                                                    border: "none",
+                                                                    color: playbackRate === speed ? "#fff" : "rgba(255, 255, 255, 0.7)",
+                                                                    cursor: "pointer",
+                                                                    fontSize: "".concat(12 * responsiveScale, "px"),
+                                                                    fontFamily: "'SF Mono', monospace",
+                                                                    fontWeight: playbackRate === speed ? "700" : "500",
+                                                                    textAlign: "center",
+                                                                    transition: "background 0.15s ease, color 0.15s ease"
+                                                                },
+                                                                onMouseEnter: function onMouseEnter(e) {
+                                                                    if (playbackRate !== speed) {
+                                                                        e.target.style.background = "rgba(255, 255, 255, 0.08)";
+                                                                        e.target.style.color = "#fff";
+                                                                    }
+                                                                },
+                                                                onMouseLeave: function onMouseLeave(e) {
+                                                                    if (playbackRate !== speed) {
+                                                                        e.target.style.background = "transparent";
+                                                                        e.target.style.color = "rgba(255, 255, 255, 0.7)";
+                                                                    }
+                                                                },
+                                                                children: [
+                                                                    speed,
+                                                                    "x"
+                                                                ]
+                                                            }, speed);
+                                                        })
                                                     })
+                                                ]
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                className: "sc-ctrl-btn",
+                                                onClick: function onClick() {
+                                                    if (onFullscreenToggle) {
+                                                        onFullscreenToggle();
+                                                    } else if (wrapperRef.current) {
+                                                        if (!document.fullscreenElement) {
+                                                            wrapperRef.current.requestFullscreen().catch(function() {});
+                                                        } else {
+                                                            document.exitFullscreen().catch(function() {});
+                                                        }
+                                                    }
+                                                    resetControlsTimer();
+                                                },
+                                                style: {
+                                                    padding: "".concat(8 * responsiveScale, "px"),
+                                                    borderRadius: "50%",
+                                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                                    minHeight: "".concat(36 * responsiveScale, "px")
+                                                },
+                                                title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
+                                                    size: Math.max(14, 18 * responsiveScale)
+                                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
+                                                    size: Math.max(14, 18 * responsiveScale)
                                                 })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
                     }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        className: "sc-controls-bar",
                         style: {
                             position: "absolute",
                             bottom: "".concat(10 * responsiveScale, "px"),
                             right: "".concat(10 * responsiveScale, "px"),
-                            transform: "none",
                             display: "flex",
                             flexDirection: isPortrait ? "column" : "row",
-                            gap: "".concat(10 * responsiveScale, "px"),
-                            zIndex: 10
+                            gap: "".concat(8 * responsiveScale, "px"),
+                            zIndex: 10,
+                            opacity: controlsVisible ? 1 : 0,
+                            transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
+                            pointerEvents: controlsVisible ? "auto" : "none"
                         },
                         children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                 style: {
-                                    position: "relative",
                                     display: "flex",
                                     alignItems: "center",
-                                    padding: "8px",
-                                    margin: "-8px"
+                                    background: "rgba(0, 0, 0, 0.6)",
+                                    borderRadius: "".concat(18 * responsiveScale, "px"),
+                                    padding: "2px"
                                 },
                                 onMouseEnter: function onMouseEnter() {
                                     return setShowVolumeSlider(true);
@@ -7944,260 +8093,128 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 },
                                 children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                        className: "sc-ctrl-btn",
                                         onClick: function onClick() {
-                                            if (playerRef.current) {
-                                                playerRef.current.toggleMute();
-                                            }
-                                            if (onVolumeToggle) {
-                                                onVolumeToggle();
-                                            }
-                                        },
-                                        onMouseEnter: function onMouseEnter(e) {
-                                            var target = e.currentTarget;
-                                            target.style.boxShadow = "0 14px 48px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
-                                        },
-                                        onMouseLeave: function onMouseLeave(e) {
-                                            var target = e.currentTarget;
-                                            target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
+                                            if (playerRef.current) playerRef.current.toggleMute();
+                                            onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                            resetControlsTimer();
                                         },
                                         style: {
-                                            background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
-                                            color: "#ffffff",
-                                            border: "none",
-                                            borderRadius: "".concat(18 * responsiveScale, "px"),
                                             padding: "".concat(8 * responsiveScale, "px"),
-                                            cursor: "pointer",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                            backdropFilter: "blur(20px)",
-                                            boxShadow: "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                            transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                                            minWidth: "".concat(46 * responsiveScale, "px"),
-                                            minHeight: "".concat(46 * responsiveScale, "px")
+                                            borderRadius: "50%",
+                                            minWidth: "".concat(36 * responsiveScale, "px"),
+                                            minHeight: "".concat(36 * responsiveScale, "px")
                                         },
                                         title: isMuted ? "Unmute" : "Mute",
-                                        children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeMute, {
-                                            size: Math.max(14, 16 * responsiveScale),
-                                            style: {
-                                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                                color: "#ffffff"
-                                            }
-                                        }) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeDown, {
-                                            size: Math.max(14, 16 * responsiveScale),
-                                            style: {
-                                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                                color: "#ffffff"
-                                            }
-                                        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeUp, {
-                                            size: Math.max(14, 16 * responsiveScale),
-                                            style: {
-                                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                                color: "#ffffff"
-                                            }
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                            size: Math.max(14, 18 * responsiveScale)
                                         })
                                     }),
-                                    showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                                        children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                style: {
-                                                    position: "absolute",
-                                                    bottom: "100%",
-                                                    left: "50%",
-                                                    transform: "translateX(-50%)",
-                                                    width: "60px",
-                                                    height: "20px",
-                                                    marginBottom: "-16px",
-                                                    zIndex: 9
-                                                },
-                                                onMouseEnter: function onMouseEnter() {
-                                                    return setShowVolumeSlider(true);
-                                                },
-                                                onMouseLeave: function onMouseLeave() {
-                                                    return setShowVolumeSlider(false);
-                                                }
-                                            }),
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                style: {
-                                                    position: "absolute",
-                                                    bottom: "100%",
-                                                    left: "50%",
-                                                    transform: "translateX(-50%)",
-                                                    marginBottom: "4px",
-                                                    background: "linear-gradient(135deg, rgba(0, 0, 0, 0.96) 0%, rgba(20, 20, 20, 0.92) 100%)",
-                                                    backdropFilter: "blur(20px)",
-                                                    padding: "10px 14px",
-                                                    borderRadius: "14px",
-                                                    border: "2px solid rgba(255, 255, 255, 0.7)",
-                                                    display: "flex",
-                                                    flexDirection: "column",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    height: "128px",
-                                                    boxShadow: "0 12px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35)",
-                                                    zIndex: 10,
-                                                    transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out"
-                                                },
-                                                onMouseEnter: function onMouseEnter(e) {
-                                                    setShowVolumeSlider(true);
-                                                    e.currentTarget.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 24px rgba(96, 165, 250, 0.4)";
-                                                    e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
-                                                },
-                                                onMouseLeave: function onMouseLeave(e) {
-                                                    setShowVolumeSlider(false);
-                                                    e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35)";
-                                                    e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
-                                                },
-                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                            overflow: "hidden",
+                                            transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            paddingLeft: showVolumeSlider ? "2px" : "0",
+                                            paddingRight: showVolumeSlider ? "6px" : "0"
+                                        },
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                            style: {
+                                                position: "relative",
+                                                width: "".concat(56 * responsiveScale, "px"),
+                                                height: "3px",
+                                                cursor: "pointer",
+                                                borderRadius: "1.5px"
+                                            },
+                                            onMouseDown: function onMouseDown(e) {
+                                                e.preventDefault();
+                                                var el = e.currentTarget;
+                                                var move = function move(ev) {
+                                                    var r2 = el.getBoundingClientRect();
+                                                    handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
+                                                };
+                                                var up = function up1() {
+                                                    document.removeEventListener("mousemove", move);
+                                                    document.removeEventListener("mouseup", up);
+                                                };
+                                                document.addEventListener("mousemove", move);
+                                                document.addEventListener("mouseup", up);
+                                                var r = el.getBoundingClientRect();
+                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+                                            },
+                                            onClick: function onClick(e) {
+                                                e.stopPropagation();
+                                                var r = e.currentTarget.getBoundingClientRect();
+                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+                                            },
+                                            children: [
+                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                     style: {
-                                                        position: "relative",
-                                                        width: "8px",
-                                                        height: "104px",
-                                                        cursor: "pointer",
-                                                        transition: "transform 0.2s ease-in-out"
-                                                    },
-                                                    onMouseDown: function onMouseDown(e) {
-                                                        e.preventDefault();
-                                                        var sliderElement = e.currentTarget;
-                                                        var handleMouseMove = function handleMouseMove(moveEvent) {
-                                                            if (!sliderElement) return;
-                                                            var rect2 = sliderElement.getBoundingClientRect();
-                                                            var y2 = moveEvent.clientY - rect2.top;
-                                                            var percentage2 = 1 - Math.max(0, Math.min(1, y2 / rect2.height));
-                                                            handleVolumeChange(percentage2);
-                                                        };
-                                                        var handleMouseUp = function handleMouseUp1() {
-                                                            document.removeEventListener("mousemove", handleMouseMove);
-                                                            document.removeEventListener("mouseup", handleMouseUp);
-                                                        };
-                                                        document.addEventListener("mousemove", handleMouseMove);
-                                                        document.addEventListener("mouseup", handleMouseUp);
-                                                        var rect = sliderElement.getBoundingClientRect();
-                                                        var y = e.clientY - rect.top;
-                                                        var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                        handleVolumeChange(percentage);
-                                                    },
-                                                    onClick: function onClick(e) {
-                                                        e.stopPropagation();
-                                                        var rect = e.currentTarget.getBoundingClientRect();
-                                                        var y = e.clientY - rect.top;
-                                                        var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                        handleVolumeChange(percentage);
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "0",
-                                                                left: "0",
-                                                                width: "100%",
-                                                                height: "100%",
-                                                                background: "linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 100%)",
-                                                                borderRadius: "4px",
-                                                                border: "1px solid rgba(255, 255, 255, 0.4)",
-                                                                boxShadow: "inset 0 1px 3px rgba(0, 0, 0, 0.3)"
-                                                            }
-                                                        }),
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "0",
-                                                                left: "0",
-                                                                width: "100%",
-                                                                height: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                                background: "linear-gradient(180deg, rgba(125, 211, 252, 1) 0%, rgba(96, 165, 250, 0.98) 50%, rgba(59, 130, 246, 0.95) 100%)",
-                                                                borderRadius: "4px",
-                                                                transition: "height 0.15s ease-out, box-shadow 0.2s ease-in-out",
-                                                                boxShadow: "0 0 12px rgba(96, 165, 250, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4)"
-                                                            }
-                                                        }),
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "calc(".concat((isMuted ? 0 : volume) * 100, "% - 8px)"),
-                                                                left: "50%",
-                                                                transform: "translateX(-50%)",
-                                                                width: "16px",
-                                                                height: "16px",
-                                                                background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)",
-                                                                borderRadius: "50%",
-                                                                border: "2px solid rgba(96, 165, 250, 0.9)",
-                                                                boxShadow: "0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.5)",
-                                                                transition: "bottom 0.15s ease-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out",
-                                                                cursor: "grab"
-                                                            },
-                                                            onMouseEnter: function onMouseEnter(e) {
-                                                                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(96, 165, 250, 0.6), 0 0 24px rgba(96, 165, 250, 0.7)";
-                                                                e.currentTarget.style.cursor = "grab";
-                                                            },
-                                                            onMouseLeave: function onMouseLeave(e) {
-                                                                e.currentTarget.style.boxShadow = "0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.5)";
-                                                            },
-                                                            onMouseDown: function onMouseDown(e) {
-                                                                e.currentTarget.style.cursor = "grabbing";
-                                                            },
-                                                            onMouseUp: function onMouseUp(e) {
-                                                                e.currentTarget.style.cursor = "grab";
-                                                            }
-                                                        })
-                                                    ]
+                                                        position: "absolute",
+                                                        inset: 0,
+                                                        background: "rgba(255, 255, 255, 0.2)",
+                                                        borderRadius: "1.5px"
+                                                    }
+                                                }),
+                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                    style: {
+                                                        position: "absolute",
+                                                        top: 0,
+                                                        left: 0,
+                                                        bottom: 0,
+                                                        width: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                        background: "#fff",
+                                                        borderRadius: "1.5px",
+                                                        transition: "width 0.1s ease-out"
+                                                    }
+                                                }),
+                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                    style: {
+                                                        position: "absolute",
+                                                        top: "50%",
+                                                        left: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                        transform: "translate(-50%, -50%)",
+                                                        width: "12px",
+                                                        height: "12px",
+                                                        background: "#fff",
+                                                        borderRadius: "50%",
+                                                        boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
+                                                        transition: "left 0.1s ease-out"
+                                                    }
                                                 })
-                                            })
-                                        ]
+                                            ]
+                                        })
                                     })
                                 ]
                             }),
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                className: "sc-ctrl-btn",
                                 onClick: function onClick() {
                                     if (onFullscreenToggle) {
                                         onFullscreenToggle();
-                                    } else if (playerRef.current) {
-                                        playerRef.current.toggleFullscreen().catch(function(err) {
-                                            console.error("Fullscreen error:", err);
-                                        });
+                                    } else if (wrapperRef.current) {
+                                        if (!document.fullscreenElement) {
+                                            wrapperRef.current.requestFullscreen().catch(function() {});
+                                        } else {
+                                            document.exitFullscreen().catch(function() {});
+                                        }
                                     }
-                                },
-                                onMouseEnter: function onMouseEnter(e) {
-                                    var target = e.currentTarget;
-                                    target.style.boxShadow = "0 14px 48px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
-                                },
-                                onMouseLeave: function onMouseLeave(e) {
-                                    var target = e.currentTarget;
-                                    target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
+                                    resetControlsTimer();
                                 },
                                 style: {
-                                    background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
-                                    color: "#ffffff",
-                                    border: "none",
-                                    borderRadius: "".concat(18 * responsiveScale, "px"),
                                     padding: "".concat(8 * responsiveScale, "px"),
-                                    cursor: "pointer",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    backdropFilter: "blur(20px)",
-                                    boxShadow: "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                                    minWidth: "".concat(46 * responsiveScale, "px"),
-                                    minHeight: "".concat(46 * responsiveScale, "px")
+                                    borderRadius: "50%",
+                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                    minHeight: "".concat(36 * responsiveScale, "px"),
+                                    background: "rgba(0, 0, 0, 0.6)"
                                 },
                                 title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
                                 children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
-                                    size: Math.max(14, 16 * responsiveScale),
-                                    style: {
-                                        filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                        color: "#ffffff"
-                                    }
+                                    size: Math.max(14, 18 * responsiveScale)
                                 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
-                                    size: Math.max(14, 16 * responsiveScale),
-                                    style: {
-                                        filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                        color: "#ffffff"
-                                    }
+                                    size: Math.max(14, 18 * responsiveScale)
                                 })
                             })
                         ]