myetv-player 1.3.0 → 1.4.0

package/css/myetv-player.css

@@ -1233,12 +1233,21 @@ body {
 }
 
 /* CONTROL MENUS */
-.speed-control,
-.quality-control,
-.subtitles-control {
+/* show quality menu in the controlbar */
+.quality-control {
   position: relative;
 }
 
+/* Hide individual subtitle button - it's now inside settings menu */
+.subtitles-control {
+  display: none !important;
+}
+
+/* Hide individual speed control button - it's now inside settings menu */
+.speed-control {
+  display: none !important;
+}
+
 .speed-menu,
 .quality-menu,
 .subtitles-menu {
@@ -1352,10 +1361,12 @@ body {
   color: var(--player-primary-color);
 }
 
-/* SETTINGS DROPDOWN MENU - FOR SMALL SCREENS */
+/* ========================================
+   SETTINGS DROPDOWN MENU - ALWAYS VISIBLE
+   ======================================== */
 .settings-control {
   position: relative;
-  display: none;
+  display: block !important;
 }
 
 .settings-btn {
@@ -1387,11 +1398,7 @@ body {
   background: var(--player-button-active);
 }
 
-.settings-btn .icon::before {
-  content: "⚙️";
-  font-size: 16px;
-}
-
+/* SETTINGS MENU CONTAINER */
 .settings-menu {
   position: absolute;
   bottom: 100%;
@@ -1408,15 +1415,44 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 100;
   box-shadow: var(--player-shadow-menu);
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Custom scrollbar styling - Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--player-primary-color) rgba(255, 255, 255, 0.05);
 }
 
-/* ⚠️ Settings menu opens ONLY with .active (CLICK) */
+/* Settings menu opens ONLY with .active (CLICK) */
 .settings-menu.active {
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: all !important;
 }
 
+/* Custom scrollbar styling - Webkit browsers (Chrome, Safari, Edge) */
+.settings-menu::-webkit-scrollbar {
+  width: 8px;
+}
+
+.settings-menu::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+}
+
+.settings-menu::-webkit-scrollbar-thumb {
+  background: var(--player-primary-color);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.settings-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--player-primary-hover, var(--player-primary-color));
+  background-clip: content-box;
+}
+
+/* SETTINGS OPTIONS */
 .settings-option {
   padding: 8px 16px;
   color: var(--player-text-color);
@@ -1452,196 +1488,115 @@ body {
   opacity: 0.8;
 }
 
-/* Submenu styling - HIDDEN BY DEFAULT */
-.settings-submenu,
-.quality-submenu,
-.speed-submenu {
-  position: absolute;
-  bottom: 0;
-  right: 100%;
-  background: var(--player-bg-menu);
-  backdrop-filter: blur(10px);
-  border-radius: 8px;
-  padding: 8px 0;
-  margin-right: 5px;
-  opacity: 0;
-  visibility: hidden;
-  transition: all var(--player-transition-fast);
-  min-width: 150px;
-  max-width: 180px;
-  max-height: 250px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  white-space: nowrap;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  z-index: 101;
-  box-shadow: var(--player-shadow-menu);
-  pointer-events: none;
+/* ========================================
+   EXPANDABLE WRAPPER - For Speed, Subtitles
+   ======================================== */
+.settings-expandable-wrapper {
+  position: relative;
+  display: block;
 }
 
-/* ⚠️ SOLUTION: Submenus open on HOVER (easier and more intuitive) */
-.settings-option:hover .settings-submenu,
-.settings-option:hover .quality-submenu,
-.settings-option:hover .speed-submenu {
-  opacity: 1 !important;
-  visibility: visible !important;
-  transform: translateX(-2px) !important;
-  pointer-events: all !important;
+.settings-option.expandable-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.settings-option.expandable-trigger .settings-option-label {
+  font-size: 14px;
+}
+.settings-option.expandable-trigger .expand-arrow {
+  font-size: 12px;
+  transition: transform 0.2s ease;
+  margin-left: 8px;
 }
 
-.settings-submenu .settings-suboption,
-.quality-submenu .quality-option,
-.speed-submenu .speed-option {
-  padding: 8px 10px !important;
-  font-size: 12px !important;
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
+.settings-option.expandable-trigger:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* EXPANDABLE CONTENT - THE SUBMENU - HIDDEN BY DEFAULT */
+.settings-expandable-content {
+  padding-left: 15px;
+  margin-top: 4px;
+  display: none;
+  background: rgba(0, 0, 0, 0.3);
+  border-left: 3px solid var(--player-primary-color);
 }
 
+.settings-expandable-content.active {
+  display: block;
+}
+
+/* SUBOPTIONS (velocità, tracce sottotitoli) */
 .settings-suboption {
-  padding: 8px 16px;
-  color: var(--player-text-color);
+  padding: 8px 12px;
   cursor: pointer;
-  transition: all var(--player-transition-fast);
+  color: white;
   font-size: 13px;
+  white-space: normal;
+  word-wrap: break-word;
+  opacity: 0.8;
+  transition: opacity 0.2s;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .settings-suboption:hover {
+  opacity: 1;
   background: rgba(255, 255, 255, 0.1);
-  color: var(--player-primary-color);
 }
 
 .settings-suboption.active {
+  opacity: 1;
+  font-weight: bold;
   color: var(--player-primary-color);
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.05);
 }
 
 .settings-suboption.active::after {
   content: "✓";
   font-size: 12px;
-  color: var(--player-primary-color);
 }
 
-/* Visual indicator for options with submenus */
-.settings-option:has(.settings-submenu, .quality-submenu, .speed-submenu)::after {
-  content: "▶";
-  font-size: 10px;
-  color: var(--player-text-secondary);
-  margin-left: 8px;
-}
-
-.settings-option:hover::after {
-  color: var(--player-primary-color);
-}
-
-/* RESPONSIVE - PROGRESSIVE REDUCTION */
+/* ========================================
+   RESPONSIVE ADJUSTMENTS
+   ======================================== */
 @media (max-width: 768px) {
   .settings-menu > .settings-option {
-    font-size: 12px !important;
-  }
-  .settings-submenu,
-  .quality-submenu,
-  .speed-submenu {
-    max-width: min(140px, 100vw - 180px) !important;
+    font-size: 13px;
   }
-  .settings-submenu .settings-suboption,
-  .quality-submenu .quality-option,
-  .speed-submenu .speed-option {
-    padding: 7px 8px !important;
-    font-size: 11px !important;
+  .settings-suboption {
+    font-size: 12px;
+    padding: 7px 10px;
   }
 }
 @media (max-width: 600px) {
   .settings-menu > .settings-option {
-    font-size: 11px !important;
-  }
-  .settings-submenu,
-  .quality-submenu,
-  .speed-submenu {
-    max-width: min(120px, 100vw - 160px) !important;
+    font-size: 12px;
   }
-  .settings-submenu .settings-suboption,
-  .quality-submenu .quality-option,
-  .speed-submenu .speed-option {
-    padding: 6px 7px !important;
-    font-size: 10px !important;
+  .settings-suboption {
+    font-size: 11px;
+    padding: 6px 8px;
   }
 }
 @media (max-width: 450px) {
   .settings-menu > .settings-option {
-    font-size: 10px !important;
-  }
-  .settings-submenu,
-  .quality-submenu,
-  .speed-submenu {
-    max-width: min(100px, 100vw - 140px) !important;
+    font-size: 11px;
   }
-  .settings-submenu .settings-suboption,
-  .quality-submenu .quality-option,
-  .speed-submenu .speed-option {
-    padding: 5px 6px !important;
-    font-size: 9px !important;
+  .settings-suboption {
+    font-size: 10px;
+    padding: 5px 6px;
   }
 }
 @media (max-width: 350px) {
   .settings-control {
     display: block !important;
   }
-  .pip-btn,
-  .speed-control,
-  .subtitles-control {
+  .pip-btn {
     display: none !important;
   }
 }
-.settings-expandable-wrapper {
-  position: relative;
-  display: block;
-}
-
-.settings-option.expandable-trigger {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  font-size: 10px !important;
-}
-.settings-option.expandable-trigger .settings-option-label {
-  font-size: 10px !important;
-}
-.settings-option.expandable-trigger .expand-arrow {
-  font-size: 8px;
-  transition: transform 0.2s ease;
-  margin-left: 8px;
-}
-
-.settings-expandable-content {
-  padding-left: 15px;
-  margin-top: 4px;
-}
-.settings-expandable-content .settings-suboption {
-  padding: 6px 12px;
-  cursor: pointer;
-  color: white;
-  font-size: 10px;
-  white-space: normal;
-  word-wrap: break-word;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-}
-.settings-expandable-content .settings-suboption.active {
-  opacity: 1;
-  font-weight: bold;
-}
-.settings-expandable-content .settings-suboption:hover {
-  opacity: 1;
-  background: rgba(255, 255, 255, 0.1);
-}
-
 .audio-player {
   width: 320px;
   height: 80px;
@@ -1897,19 +1852,8 @@ body {
     margin-right: 5px;
   }
 }
-/* SCHERMI MOLTO PICCOLI - ATTIVA MENU SETTINGS DROPDOWN */
+/* MENU SETTINGS DROPDOWN */
 @media (max-width: 350px) {
-  /* Mostra il menu Settings solo su schermi molto piccoli */
-  .settings-control {
-    display: block !important;
-  }
-  /* Nascondi i controlli individuali e spostali nel menu */
-  .pip-btn,
-  .speed-control,
-  .subtitles-control {
-    display: none !important;
-  }
-  /* Riduci ulteriormente gli spazi */
   .controls-left,
   .controls-right {
     gap: 4px;
@@ -1936,9 +1880,9 @@ body {
     margin-right: 3px;
   }
   .volume-slider {
-    width: 30px; /* Volume slider ancora più piccolo */
+    width: 30px;
   }
-  /* Riduci il menu settings per schermi ultra-piccoli */
+  /* screen small */
   .settings-menu {
     min-width: 160px;
     font-size: 12px;
@@ -1985,7 +1929,6 @@ body {
   .volume-slider {
     width: 25px;
   }
-  /* Menu settings ultra-compatto */
   .settings-menu {
     min-width: 140px;
     font-size: 11px;
@@ -2002,7 +1945,7 @@ body {
     font-size: 10px;
   }
 }
-/* OVERFLOW HANDLING - CRITICAL FIX */
+/* OVERFLOW HANDLING */
 @media (max-width: 600px) {
   .controls-main {
     /* Allow horizontal scrolling if absolutely necessary */

package/css/myetv-player.min.css

@@ -1 +1 @@
-:root{--player-primary-color: goldenrod;--player-primary-hover: #daa520;--player-primary-dark: #b8860b;--player-button-color: white;--player-button-hover: rgba(255, 255, 255, 0.1);--player-button-active: rgba(255, 255, 255, 0.2);--player-text-color: white;--player-text-secondary: rgba(255, 255, 255, 0.8);--player-bg-primary: #000;--player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);--player-bg-title-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);--player-bg-menu: rgba(20, 20, 20, 0.95);--player-bg-loading: rgba(0, 0, 0, 0.7);--player-border-radius: 12px;--player-controls-padding: 20px 15px 15px;--player-title-overlay-padding: 15px 20px 25px;--player-button-padding: 8px;--player-icon-size: 20px;--player-progress-height: 6px;--player-progress-bg: rgba(255, 255, 255, 0.2);--player-progress-buffer: rgba(255, 255, 255, 0.3);--player-progress-handle-size: 16px;--player-volume-height: 4px;--player-volume-bg: rgba(255, 255, 255, 0.2);--player-volume-handle-size: 14px;--player-volume-fill: 100%;--player-transition-fast: 0.2s ease;--player-transition-normal: 0.3s ease;--player-shadow-main: 0 8px 32px rgba(0, 0, 0, 0.3);--player-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.2);--player-shadow-tooltip: 0 3px 12px rgba(0, 0, 0, 0.4)}*{box-sizing:border-box}body{margin:0;padding:20px;background:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.video-container{max-width:1200px;margin:0 auto;background:var(--player-bg-primary);border-radius:var(--player-border-radius);box-shadow:var(--player-shadow-main);position:relative}.video-container:fullscreen,.video-container:-webkit-full-screen,.video-container:-moz-full-screen{width:100vw;height:100vh;border-radius:0}.video-wrapper{position:relative;width:100%;background:var(--player-bg-primary);overflow:visible !important}.video-wrapper.player-initialized .video-player{visibility:visible;opacity:1;transition:opacity .3s ease;pointer-events:auto}.video-wrapper.player-initialized .initial-loading{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;transition-delay:.2s;display:none;transition-delay:.5s}.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide{visibility:hidden;opacity:0}.hidden{display:none !important}.player-theme-dark{--player-bg-primary: #1a1a1a;--player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);--player-bg-title-overlay: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, transparent 100%);--player-bg-menu: rgba(30, 30, 30, 0.95)}.video-player{width:100%;height:auto;display:block;min-height:300px;visibility:hidden;opacity:0;position:relative;z-index:1;transition:none}.video-wrapper.player-initialized .video-player{visibility:visible;opacity:1;transition:opacity .3s ease;pointer-events:auto}.video-player::-webkit-media-controls-panel,.video-player::-webkit-media-controls-play-button,.video-player::-webkit-media-controls-start-playback-button,.video-player::-webkit-media-controls-timeline,.video-player::-webkit-media-controls-current-time-display,.video-player::-webkit-media-controls-time-remaining-display,.video-player::-webkit-media-controls-mute-button,.video-player::-webkit-media-controls-toggle-closed-captions-button,.video-player::-webkit-media-controls-volume-slider,.video-player::-webkit-media-controls-fullscreen-button,.video-player::-webkit-media-controls-seek-back-button,.video-player::-webkit-media-controls-seek-forward-button,.video-player::-webkit-media-controls-rewind-button,.video-player::-webkit-media-controls-return-to-realtime-button,.video-player::-webkit-media-controls-overlay-play-button{display:none !important;visibility:hidden !important;opacity:0 !important}.video-player::-moz-media-controls{display:none !important}.initial-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-primary);display:flex;align-items:center;justify-content:center;z-index:20}.video-wrapper.player-initialized .initial-loading{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;transition-delay:.2s}.video-wrapper.player-initialized .initial-loading{display:none;transition-delay:.5s}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-loading);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--player-transition-normal);z-index:15}.loading-overlay.active{opacity:1;visibility:visible}.loading-spinner{width:50px;height:50px;border:3px solid hsla(0,0%,100%,.3);border-top:3px solid var(--player-primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.video-player::cue{background:rgba(0,0,0,.8);color:#fff;font-size:18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:500;text-shadow:2px 2px 4px rgba(0,0,0,.8);padding:8px 12px;border-radius:6px;line-height:1.4}.video-player::cue(.highlight){background:var(--player-primary-color);color:#000}.video-player::cue(b){font-weight:700}.video-player::cue(i){font-style:italic}.video-poster-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.video-poster-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.video-poster-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.video-poster-overlay.visible:hover{opacity:.95}.video-poster-overlay::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80px;height:80px;background:rgba(0,0,0,.7);border-radius:50%;border:3px solid var(--player-primary-color);opacity:0;transition:opacity .3s ease,transform .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::after{opacity:1;transform:translate(-50%, -50%) scale(1.1);border-color:var(--player-primary-hover);box-shadow:0 0 20px var(--player-primary-color)}.video-poster-overlay::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%, -50%);width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-color);z-index:2;opacity:0;transition:opacity .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::before{opacity:1;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-hover)}.initial-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-primary);display:flex;align-items:center;justify-content:center;z-index:20}.video-wrapper.player-initialized .initial-loading{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;transition-delay:.2s}.video-wrapper.player-initialized .initial-loading{display:none;transition-delay:.5s}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-loading);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--player-transition-normal);z-index:15}.loading-overlay.active{opacity:1;visibility:visible}.loading-spinner{width:50px;height:50px;border:3px solid hsla(0,0%,100%,.3);border-top:3px solid var(--player-primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.title-overlay{position:absolute;top:0;left:0;right:0;background:var(--player-bg-title-overlay);padding:var(--player-title-overlay-padding);opacity:0;transform:translateY(-100%);transition:all var(--player-transition-normal);z-index:15;pointer-events:none}.title-overlay.show{opacity:1;transform:translateY(0)}.title-overlay.show.persistent{opacity:1;transform:translateY(0)}.title-text{color:var(--player-text-color);font-size:18px;font-weight:600;line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.title-overlay{position:absolute;top:0;left:0;right:0;background:var(--player-bg-title-overlay);padding:var(--player-title-overlay-padding);opacity:0;transform:translateY(-100%);transition:all var(--player-transition-normal);z-index:15;pointer-events:none}.title-overlay.show{opacity:1;transform:translateY(0)}.title-overlay.show.persistent{opacity:1;transform:translateY(0)}.title-text{color:var(--player-text-color);font-size:18px;font-weight:600;line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subtitle-text{color:var(--player-text-color);font-size:14px;font-weight:400;line-height:1.3;margin:5px 0 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:.9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.chapter-name{font-size:13px;font-weight:500;color:hsla(0,0%,100%,.9);margin-top:6px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .3s}.controls{position:absolute;bottom:0;left:0;right:0;background:var(--player-bg-controls);padding:var(--player-controls-padding);opacity:0;transform:translateY(100%);transition:all var(--player-transition-normal);z-index:10;min-height:70px !important;box-sizing:border-box}.controls.show{opacity:1;transform:translateY(0);position:absolute !important;bottom:0 !important;z-index:20 !important}.play-icon svg,.pause-icon svg,.volume-icon svg,.mute-icon svg,.playlist-prev-btn .icon svg,.playlist-next-btn .icon svg,.subtitles-btn .icon svg,.fullscreen-icon svg,.exit-fullscreen-icon svg,.pip-icon svg,.pip-exit-icon svg{width:16px;height:16px;display:block}.controls-main{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px !important;flex-shrink:0}.controls-left,.controls-right{display:flex;align-items:center;gap:10px;flex-shrink:1;min-width:0}.control-btn{background:none;border:none;color:var(--player-button-color);cursor:pointer;padding:var(--player-button-padding);border-radius:6px;display:flex;align-items:center;gap:5px;transition:all var(--player-transition-fast);font-size:14px;font-weight:500;position:relative;flex-shrink:1;min-width:0;white-space:nowrap}.control-btn:hover{background:var(--player-button-hover);transform:scale(1.05)}.control-btn:active{transform:scale(0.95);background:var(--player-button-active)}.subtitles-btn{position:relative}.quality-btn{min-height:36px;padding:6px 8px}.quality-btn-text{display:flex;flex-direction:column;align-items:center;line-height:1}.selected-quality{font-size:14px;font-weight:500;color:var(--player-button-color)}.current-quality{font-size:10px;font-weight:400;color:var(--player-text-secondary);opacity:.8;margin-top:2px;line-height:1}.time-display{color:var(--player-text-color);font-size:14px;font-weight:500;display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;flex-shrink:2;min-width:0}.icon{width:var(--player-icon-size);height:var(--player-icon-size);display:flex;align-items:center;justify-content:center;font-size:16px}.hidden{display:none !important}.controls-right .brand-logo{height:44px;max-width:120px;object-fit:contain;margin-right:10px;pointer-events:auto;opacity:.8;transition:opacity var(--player-transition-fast);order:-1;flex-shrink:1}.controls-right .brand-logo:hover{opacity:1}.controls-right .brand-logo-link{order:-1;margin-right:10px;display:inline-block;text-decoration:none}.controls-right .brand-logo-link .brand-logo{margin-right:0}.video-wrapper.hide-cursor{cursor:none !important}.video-wrapper.hide-cursor .controls{cursor:default !important}.video-wrapper.hide-cursor .control-btn{cursor:pointer !important}.video-wrapper.hide-cursor iframe{cursor:auto !important;pointer-events:auto !important}.progress-container{width:100%;height:var(--player-progress-height);background:var(--player-progress-bg);border-radius:calc(var(--player-progress-height)/2);margin-bottom:15px;position:relative;cursor:pointer}.progress-bar{width:100%;height:100%;position:relative;border-radius:calc(var(--player-progress-height)/2);overflow:hidden}.progress-buffer{height:100%;background:var(--player-progress-buffer);width:0%;border-radius:calc(var(--player-progress-height)/2);transition:width var(--player-transition-fast)}.progress-filled{position:absolute;top:0;left:0;height:100%;background:var(--player-primary-color);width:0%;border-radius:calc(var(--player-progress-height)/2);transition:width .1s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%, -50%);width:var(--player-progress-handle-size);height:var(--player-progress-handle-size);background:var(--player-primary-color);border-radius:50%;opacity:1;transition:opacity var(--player-transition-fast);z-index:2;left:0%;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:all;touch-action:none}.progress-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:44px;height:44px;border-radius:50%}.progress-container:hover .progress-handle{opacity:1}.progress-container:hover .progress-filled{background:var(--player-primary-hover)}.seek-tooltip{position:absolute;bottom:100%;left:0;background:rgba(0,0,0,.9);color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);transition:all .15s ease;z-index:1000;box-shadow:var(--player-shadow-tooltip);font-variant-numeric:tabular-nums;backdrop-filter:blur(8px);border:1px solid hsla(0,0%,100%,.1)}.seek-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid rgba(0,0,0,.9)}.seek-tooltip.visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-4px)}.chapter-markers-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.chapter-marker{position:absolute;top:0;height:100%;width:3px;background:var(--player-primary-color);opacity:.7;cursor:pointer;pointer-events:auto;transition:all var(--player-transition-fast);border-radius:2px;transform:translateX(-50%)}.chapter-marker:hover{opacity:1;width:4px;height:120%;top:-10%;box-shadow:0 0 8px var(--player-primary-color)}.chapter-marker.active{background:var(--player-primary-hover);opacity:1;width:4px}.chapter-tooltip{position:absolute;bottom:100%;left:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);border-radius:8px;padding:0;margin-bottom:12px;opacity:0;visibility:hidden;transition:all .2s ease;transform:translateX(-50%) translateY(-8px);z-index:1000;box-shadow:var(--player-shadow-tooltip);border:1px solid hsla(0,0%,100%,.15);min-width:200px;max-width:300px;overflow:hidden;pointer-events:none}.chapter-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.95)}.chapter-tooltip-image{width:100%;height:150px;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;border-bottom:1px solid hsla(0,0%,100%,.1)}.chapter-tooltip-title{padding:10px 12px 6px;color:var(--player-text-color);font-size:14px;font-weight:600;line-height:1.3;word-wrap:break-word}.chapter-tooltip-time{padding:0 12px 10px;color:var(--player-text-secondary);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}.progress-handle-circle{border-radius:50%}.progress-handle-square{border-radius:2px}.progress-handle-diamond{border-radius:2px;transform:translate(-50%, -50%) rotate(45deg)}.progress-handle-arrow{border-radius:0;clip-path:polygon(0% 50%, 60% 0%, 60% 35%, 100% 35%, 100% 65%, 60% 65%, 60% 100%)}.progress-handle-triangle{border-radius:0;clip-path:polygon(50% 0%, 0% 100%, 100% 100%)}.progress-handle-heart{border-radius:0}.progress-handle-heart::before{content:"❤";font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.progress-handle-star{border-radius:0;clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.progress-handle-none{opacity:0 !important}.progress-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:44px;height:44px;border-radius:50%}.progress-container.seeking .progress-bar{height:calc(var(--player-progress-height)*2);transition:height .15s ease}.progress-container.seeking .progress-handle{transform:translate(-50%, -50%) scale(1.4);transition:transform .15s ease}@media(hover: hover)and (pointer: fine){.progress-container:hover .progress-bar{height:calc(var(--player-progress-height)*1.3);transition:height .15s ease}}.chapter-segment{box-sizing:border-box}.chapter-marker:hover{background:rgba(0,0,0,.9) !important}.chapter-tooltip{animation:fadeIn .15s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.progress-container:hover .chapter-segment{background:hsla(0,0%,100%,.4) !important}.chapter-tooltip{animation:fadeIn .15s ease-in-out}.chapter-tooltip .chapter-tooltip-content{display:flex;flex-direction:column}.chapter-tooltip .chapter-tooltip-image{background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:3px}.chapter-tooltip .chapter-tooltip-title{line-height:1.3}.chapter-tooltip .chapter-tooltip-time{opacity:.8}@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.chapter-tooltip-hover .chapter-tooltip-content{display:flex;flex-direction:column;gap:6px}.chapter-tooltip-hover .chapter-tooltip-image{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:3px;max-width:180px}.chapter-tooltip-hover .chapter-tooltip-title{font-size:13px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chapter-tooltip-hover .chapter-tooltip-time{font-size:12px;font-weight:400;color:hsla(0,0%,100%,.8);max-width:180px}@media(max-width: 1200px){.chapter-tooltip-hover .chapter-tooltip-image{max-width:150px}.chapter-tooltip-hover .chapter-tooltip-title,.chapter-tooltip-hover .chapter-tooltip-time{max-width:150px}}@media(max-width: 768px){.chapter-tooltip-hover .chapter-tooltip-image{max-width:100px}.chapter-tooltip-hover .chapter-tooltip-title,.chapter-tooltip-hover .chapter-tooltip-time{max-width:100px}}@media(max-width: 480px){.chapter-tooltip-hover .chapter-tooltip-image{max-width:80px}.chapter-tooltip-hover .chapter-tooltip-title{font-size:11px;max-width:80px}.chapter-tooltip-hover .chapter-tooltip-time{font-size:10px;max-width:80px}}.volume-container{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:2;min-width:0}.volume-slider{width:60px;height:var(--player-volume-height);background:var(--player-volume-bg);border-radius:calc(var(--player-volume-height)/2);outline:none;cursor:pointer;-webkit-appearance:none;transition:all var(--player-transition-fast)}.volume-tooltip{position:absolute;bottom:210%;transition:opacity .15s ease,transform .15s ease;left:0;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;z-index:1000;box-shadow:var(--player-shadow-tooltip);pointer-events:none;backdrop-filter:blur(8px);border:1px solid hsla(0,0%,100%,.1)}.volume-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.9)}.volume-container:hover .volume-tooltip,.volume-tooltip.visible{opacity:1;visibility:visible}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:var(--player-volume-handle-size);height:var(--player-volume-handle-size);border-radius:50%;background:var(--player-primary-dark);cursor:pointer;transition:all var(--player-transition-fast);box-shadow:0 2px 6px rgba(0,0,0,.2);margin-top:calc((var(--player-volume-height) - var(--player-volume-handle-size))/2);transform:translateY(0)}.volume-slider::-webkit-slider-thumb:hover{transform:translateY(0) scale(1.2);background:var(--player-primary-color)}.volume-slider::-moz-range-thumb{width:var(--player-volume-handle-size);height:var(--player-volume-handle-size);border-radius:50%;background:var(--player-primary-dark);cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:all var(--player-transition-fast);margin-top:0;transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2))}.volume-slider::-moz-range-thumb:hover{background:var(--player-primary-color);transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2)) scale(1.1)}.volume-slider::-webkit-slider-runnable-track{height:var(--player-volume-height);background:linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);border-radius:calc(var(--player-volume-height)/2);transition:background var(--player-transition-fast);margin:0;border:none}.volume-slider::-moz-range-track{height:var(--player-volume-height);background:linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);border-radius:calc(var(--player-volume-height)/2);border:none;transition:background var(--player-transition-fast);margin:0}.speed-control,.quality-control,.subtitles-control{position:relative}.speed-menu,.quality-menu,.subtitles-menu{position:absolute;bottom:100%;right:0;background:var(--player-bg-menu);backdrop-filter:blur(10px);border-radius:8px;padding:8px 0;margin-bottom:10px;opacity:0;visibility:hidden;transition:all var(--player-transition-fast);min-width:140px;border:1px solid hsla(0,0%,100%,.1);z-index:100;box-shadow:var(--player-shadow-menu)}.speed-menu.active,.quality-menu.active,.subtitles-menu.active{opacity:1 !important;visibility:visible !important;pointer-events:all !important}.speed-option,.quality-option,.subtitles-option{padding:8px 16px;color:var(--player-text-color);cursor:pointer;transition:all var(--player-transition-fast);font-size:14px;display:flex;align-items:center;justify-content:space-between}.speed-option:hover,.quality-option:hover,.subtitles-option:hover{background:hsla(0,0%,100%,.1);color:var(--player-primary-color)}.speed-option.active,.quality-option.active,.subtitles-option.active{color:var(--player-primary-color);font-weight:600;background:hsla(0,0%,100%,.05)}.subtitles-option.selected,.subtitles-option.active{color:var(--player-primary-color);background:hsla(0,0%,100%,.1);position:relative}.subtitles-option.selected::after,.subtitles-option.active::after{content:"✓";position:absolute;right:10px;font-weight:bold}.quality-option.selected{color:var(--player-primary-color);font-weight:600}.quality-option.selected::after{content:"Selected";font-size:12px;color:var(--player-primary-color);font-weight:400;margin-left:8px}.quality-option.playing{background:hsla(0,0%,100%,.05)}.quality-option.playing::after{content:"Playing";font-size:12px;color:#4caf50;font-weight:400;margin-left:8px}.quality-option.selected.playing::after{content:"Active";font-size:12px;color:var(--player-primary-color);font-weight:500;margin-left:8px}.subtitles-option.active::after{content:"✓";font-size:12px;color:var(--player-primary-color)}.settings-control{position:relative;display:none}.settings-btn{background:none;border:none;color:var(--player-button-color);cursor:pointer;padding:var(--player-button-padding);border-radius:6px;display:flex;align-items:center;gap:5px;transition:all var(--player-transition-fast);font-size:14px;font-weight:500;position:relative;flex-shrink:0;min-width:0;white-space:nowrap}.settings-btn:hover{background:var(--player-button-hover);transform:scale(1.05)}.settings-btn:active{transform:scale(0.95);background:var(--player-button-active)}.settings-btn .icon::before{content:"⚙️";font-size:16px}.settings-menu{position:absolute;bottom:100%;right:0;background:var(--player-bg-menu);backdrop-filter:blur(10px);border-radius:8px;padding:8px 0;margin-bottom:10px;opacity:0;visibility:hidden;transition:all var(--player-transition-fast);min-width:180px;border:1px solid hsla(0,0%,100%,.1);z-index:100;box-shadow:var(--player-shadow-menu)}.settings-menu.active{opacity:1 !important;visibility:visible !important;pointer-events:all !important}.settings-option{padding:8px 16px;color:var(--player-text-color);cursor:pointer;transition:all var(--player-transition-fast);font-size:14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid hsla(0,0%,100%,.05);position:relative}.settings-option:last-child{border-bottom:none}.settings-option:hover{background:hsla(0,0%,100%,.1);color:var(--player-primary-color)}.settings-option-label{display:flex;align-items:center;gap:8px;flex:1}.settings-option-value{font-size:12px;color:var(--player-text-secondary);opacity:.8}.settings-submenu,.quality-submenu,.speed-submenu{position:absolute;bottom:0;right:100%;background:var(--player-bg-menu);backdrop-filter:blur(10px);border-radius:8px;padding:8px 0;margin-right:5px;opacity:0;visibility:hidden;transition:all var(--player-transition-fast);min-width:150px;max-width:180px;max-height:250px;overflow-y:auto;overflow-x:hidden;white-space:nowrap;border:1px solid hsla(0,0%,100%,.1);z-index:101;box-shadow:var(--player-shadow-menu);pointer-events:none}.settings-option:hover .settings-submenu,.settings-option:hover .quality-submenu,.settings-option:hover .speed-submenu{opacity:1 !important;visibility:visible !important;transform:translateX(-2px) !important;pointer-events:all !important}.settings-submenu .settings-suboption,.quality-submenu .quality-option,.speed-submenu .speed-option{padding:8px 10px !important;font-size:12px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}.settings-suboption{padding:8px 16px;color:var(--player-text-color);cursor:pointer;transition:all var(--player-transition-fast);font-size:13px;display:flex;align-items:center;justify-content:space-between}.settings-suboption:hover{background:hsla(0,0%,100%,.1);color:var(--player-primary-color)}.settings-suboption.active{color:var(--player-primary-color);font-weight:600;background:hsla(0,0%,100%,.05)}.settings-suboption.active::after{content:"✓";font-size:12px;color:var(--player-primary-color)}.settings-option:has(.settings-submenu,.quality-submenu,.speed-submenu)::after{content:"▶";font-size:10px;color:var(--player-text-secondary);margin-left:8px}.settings-option:hover::after{color:var(--player-primary-color)}@media(max-width: 768px){.settings-menu>.settings-option{font-size:12px !important}.settings-submenu,.quality-submenu,.speed-submenu{max-width:min(140px,100vw - 180px) !important}.settings-submenu .settings-suboption,.quality-submenu .quality-option,.speed-submenu .speed-option{padding:7px 8px !important;font-size:11px !important}}@media(max-width: 600px){.settings-menu>.settings-option{font-size:11px !important}.settings-submenu,.quality-submenu,.speed-submenu{max-width:min(120px,100vw - 160px) !important}.settings-submenu .settings-suboption,.quality-submenu .quality-option,.speed-submenu .speed-option{padding:6px 7px !important;font-size:10px !important}}@media(max-width: 450px){.settings-menu>.settings-option{font-size:10px !important}.settings-submenu,.quality-submenu,.speed-submenu{max-width:min(100px,100vw - 140px) !important}.settings-submenu .settings-suboption,.quality-submenu .quality-option,.speed-submenu .speed-option{padding:5px 6px !important;font-size:9px !important}}@media(max-width: 350px){.settings-control{display:block !important}.pip-btn,.speed-control,.subtitles-control{display:none !important}}.settings-expandable-wrapper{position:relative;display:block}.settings-option.expandable-trigger{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:10px !important}.settings-option.expandable-trigger .settings-option-label{font-size:10px !important}.settings-option.expandable-trigger .expand-arrow{font-size:8px;transition:transform .2s ease;margin-left:8px}.settings-expandable-content{padding-left:15px;margin-top:4px}.settings-expandable-content .settings-suboption{padding:6px 12px;cursor:pointer;color:#fff;font-size:10px;white-space:normal;word-wrap:break-word;opacity:.8;transition:opacity .2s}.settings-expandable-content .settings-suboption.active{opacity:1;font-weight:bold}.settings-expandable-content .settings-suboption:hover{opacity:1;background:hsla(0,0%,100%,.1)}.audio-player{width:320px;height:80px}.audio-player video{display:none !important}.audio-player .controls-wrapper{height:60px}.audio-player .audio-wave-canvas{display:block;width:100%;height:60px;background-color:#222;border-radius:4px;margin-top:5px}.player-theme-blue{--player-primary-color: #2196F3;--player-primary-hover: #1976D2;--player-primary-dark: #1565C0}.player-theme-green{--player-primary-color: #4CAF50;--player-primary-hover: #45a049;--player-primary-dark: #388e3c}.player-theme-red{--player-primary-color: #f44336;--player-primary-hover: #d32f2f;--player-primary-dark: #c62828}.video-watermark{position:absolute;z-index:15;pointer-events:auto;opacity:.7;transition:opacity .3s ease,visibility .3s ease,bottom .3s ease}.video-watermark{visibility:visible;opacity:.7}.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide{visibility:hidden;opacity:0}.video-wrapper.has-controls .video-watermark{visibility:visible;opacity:.7}.video-watermark:hover{opacity:1}.video-watermark img{display:block;max-width:150px;max-height:80px;width:auto;height:auto;object-fit:contain}.video-watermark.watermark-topleft{top:15px;left:15px}.video-watermark.watermark-topright{top:15px;right:15px}.video-watermark.watermark-bottomleft{bottom:calc(var(--player-controls-height, 70px) + 15px);left:15px}.video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 70px) + 15px);right:15px}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide){bottom:15px}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide){bottom:15px}.video-wrapper.has-controls .video-watermark.watermark-bottomleft,.video-wrapper.has-controls .video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 70px) + 15px)}@media(max-width: 768px){.video-watermark img{max-width:100px;max-height:50px}.video-watermark.watermark-topleft,.video-watermark.watermark-topright{top:10px}.video-watermark.watermark-topleft,.video-watermark.watermark-bottomleft{left:10px}.video-watermark.watermark-topright,.video-watermark.watermark-bottomright{right:10px}.video-watermark.watermark-bottomleft,.video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 60px) + 10px)}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide){bottom:10px}}@media(max-width: 480px){.video-watermark.watermark-bottomleft,.video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 55px) + 10px)}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide){bottom:8px}}.video-watermark[style*="cursor: pointer"]{cursor:pointer !important}@media(max-width: 768px){.controls-left,.controls-right{gap:8px}.volume-slider{width:50px}.time-display{font-size:12px}.icon{font-size:14px}.control-btn{padding:6px}.quality-btn{min-height:32px;padding:4px 6px}.selected-quality{font-size:12px}.current-quality{font-size:9px}.seek-tooltip{font-size:11px;padding:4px 8px}.title-overlay{padding:12px 15px 20px}.title-text{font-size:16px}.video-player::cue{font-size:16px;padding:6px 10px}.controls-right .brand-logo{height:36px;max-width:100px;margin-right:8px}}@media(max-width: 480px){.controls-left,.controls-right{gap:6px}.progress-container{margin-bottom:10px}.controls-main{padding-top:6px}.volume-container{flex-shrink:3}.volume-slider{width:35px}.time-display span:nth-child(2){display:none}.quality-btn{min-height:28px;padding:3px 5px}.selected-quality{font-size:11px}.current-quality{font-size:8px}.seek-tooltip{font-size:10px;padding:3px 6px}.title-overlay{padding:10px 12px 18px}.title-text{font-size:14px}.video-player::cue{font-size:14px;padding:4px 8px}.controls-right .brand-logo{height:28px;max-width:80px;margin-right:5px}}@media(max-width: 350px){.settings-control{display:block !important}.pip-btn,.speed-control,.subtitles-control{display:none !important}.controls-left,.controls-right{gap:4px}.control-btn{padding:4px}.icon{font-size:12px}.quality-btn{min-height:24px;padding:2px 4px}.selected-quality{font-size:10px}.current-quality{font-size:7px}.controls-right .brand-logo{height:22px;max-width:50px;margin-right:3px}.volume-slider{width:30px}.settings-menu{min-width:160px;font-size:12px}.settings-option{padding:6px 12px;font-size:12px}.settings-submenu{min-width:130px}.settings-suboption{padding:6px 12px;font-size:11px}}@media(max-width: 280px){.controls-left,.controls-right{gap:3px}.control-btn{padding:3px}.icon{font-size:10px}.quality-btn{min-height:20px;padding:1px 3px}.selected-quality{font-size:9px}.current-quality{font-size:6px}.controls-right .brand-logo{height:18px;max-width:40px;margin-right:2px}.volume-slider{width:25px}.settings-menu{min-width:140px;font-size:11px}.settings-option{padding:5px 10px;font-size:11px}.settings-submenu{min-width:120px}.settings-suboption{padding:5px 10px;font-size:10px}}@media(max-width: 600px){.controls-main{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.controls-main::-webkit-scrollbar{display:none}.controls-left,.controls-right{flex-wrap:nowrap;white-space:nowrap;flex-shrink:1;min-width:fit-content}}.controls-right .playlist-prev-btn,.controls-right .playlist-next-btn{display:none}.controls-right .playlist-prev-btn.playlist-active,.controls-right .playlist-next-btn.playlist-active{display:flex}.playlist-prev-btn .icon::before{content:"⏮"}.playlist-next-btn .icon::before{content:"⏭"}.playlist-prev-btn:disabled,.playlist-next-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.playlist-prev-btn:disabled .icon,.playlist-next-btn:disabled .icon{opacity:.5}@media(max-width: 768px){.playlist-prev-btn .icon::before,.playlist-next-btn .icon::before{font-size:16px}}@media(max-width: 480px){.playlist-prev-btn .icon::before,.playlist-next-btn .icon::before{font-size:14px}}.video-container:fullscreen,.video-container:-webkit-full-screen,.video-container:-moz-full-screen{width:100vw;height:100vh;border-radius:0}@keyframes qualityChange{0%{opacity:.7}50%{opacity:.3}100%{opacity:1}}.quality-changing{animation:qualityChange .5s ease-in-out}.control-btn:focus{outline:2px solid var(--player-primary-color);outline-offset:2px}.volume-slider:focus{outline:2px solid var(--player-primary-color);outline-offset:2px}.player-large-controls{--player-icon-size: 24px;--player-button-padding: 12px;--player-progress-height: 8px;--player-progress-handle-size: 20px;--player-title-overlay-padding: 18px 24px 30px}.player-compact-controls{--player-icon-size: 16px;--player-button-padding: 4px;--player-controls-padding: 15px 10px 10px;--player-title-overlay-padding: 12px 16px 20px}@-moz-document url-prefix(){.volume-slider::-moz-range-thumb{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px))}.volume-slider::-moz-range-thumb:hover{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px)) scale(1.1)}.volume-slider::-moz-range-track{height:var(--player-volume-height);background:linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);border-radius:calc(var(--player-volume-height)/2);border:none;transition:background var(--player-transition-fast);margin:0}}@supports(-moz-appearance: none){.volume-slider{margin-top:-1px}.volume-slider::-moz-range-thumb{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px))}.volume-slider::-moz-range-thumb:hover{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px)) scale(1.1)}}@-moz-document url-prefix(){.volume-container{position:relative;top:2px !important}.volume-slider::-moz-range-thumb{margin-top:-6px !important;transform:translateY(-2px) !important}.volume-slider::-moz-range-thumb:hover{transform:translateY(-2px) scale(1.1) !important}}.video-player{object-position:center center}.resolution-normal .video-player{object-fit:contain;object-position:center center}.resolution-4-3 .video-player{object-fit:fill;aspect-ratio:4/3}.resolution-4-3 .video-wrapper{aspect-ratio:4/3}.resolution-16-9 .video-player{object-fit:fill;aspect-ratio:16/9}.resolution-16-9 .video-wrapper{aspect-ratio:16/9}.resolution-stretched .video-player{object-fit:fill;width:100%;height:100%}.resolution-stretched .video-wrapper{height:auto;min-height:300px}.resolution-fit-to-screen .video-player{object-fit:cover;object-position:center center;width:100%;height:100%}.resolution-fit-to-screen .video-wrapper{height:100vh;max-height:100vh}.resolution-scale-to-fit .video-player{object-fit:contain;object-position:center center;width:100%;height:100%;max-width:100vw;max-height:100vh}.resolution-scale-to-fit .video-wrapper{display:flex;align-items:center;justify-content:center;height:70vh;min-height:400px;background:var(--player-bg-primary, #000)}@media(orientation: portrait){.resolution-scale-to-fit .video-wrapper{height:50vh;min-height:350px}}@media(orientation: landscape){.resolution-scale-to-fit .video-wrapper{height:80vh;min-height:450px}}@media(max-width: 768px){.resolution-fit-to-screen .video-wrapper{height:50vh;min-height:250px}.resolution-4-3 .video-wrapper,.resolution-16-9 .video-wrapper{min-height:200px}.resolution-scale-to-fit .video-wrapper{height:45vh;min-height:300px}}@media(max-width: 480px){.resolution-fit-to-screen .video-wrapper{height:40vh;min-height:200px}.resolution-4-3 .video-wrapper,.resolution-16-9 .video-wrapper{min-height:180px}.resolution-scale-to-fit .video-wrapper{height:40vh;min-height:250px}}.video-player{transition:object-fit .3s ease,aspect-ratio .3s ease}.video-wrapper{transition:aspect-ratio .3s ease,height .3s ease}@supports not (aspect-ratio: 1){.resolution-4-3 .video-wrapper{padding-bottom:75%;height:0;position:relative}.resolution-4-3 .video-player{position:absolute;top:0;left:0;width:100%;height:100%}.resolution-16-9 .video-wrapper{padding-bottom:56.25%;height:0;position:relative}.resolution-16-9 .video-player{position:absolute;top:0;left:0;width:100%;height:100%}}.quality-changing .video-player{filter:brightness(0.7)}.resolution-debug .video-wrapper::before{content:"Resolution: " attr(data-resolution);position:absolute;top:10px;left:10px;background:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;z-index:1000;pointer-events:none}.controls,.controls-main,.controls-left,.controls-right{overflow:visible !important}.controls-left,.controls-right{flex-wrap:nowrap !important;white-space:nowrap !important}.control-btn{min-width:0 !important;white-space:nowrap !important}video::cue{background-color:rgba(0,0,0,.8);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:normal;line-height:1.2;text-shadow:1px 1px 1px rgba(0,0,0,.8);padding:4px 8px;border-radius:4px;white-space:pre-line}video::-webkit-media-text-track-display{color:#fff;font-family:Arial,Helvetica,sans-serif;background-color:rgba(0,0,0,.8);border-radius:4px;padding:4px 8px;font-size:18px;text-shadow:1px 1px 1px rgba(0,0,0,.8)}.custom-subtitle-overlay{font-size:clamp(12px,4vw,18px)}@media(max-width: 768px){.custom-subtitle-overlay{font-size:16px !important;bottom:70px !important;max-width:85% !important;padding:6px 12px !important;line-height:1.2 !important}}@media(max-width: 480px){.custom-subtitle-overlay{font-size:14px !important;bottom:60px !important;max-width:90% !important;padding:5px 10px !important;line-height:1.15 !important}}@media(max-width: 360px){.custom-subtitle-overlay{font-size:12px !important;bottom:50px !important;max-width:95% !important;padding:4px 8px !important}}@media(max-height: 500px)and (orientation: landscape){.custom-subtitle-overlay{font-size:13px !important;bottom:45px !important;max-width:85% !important;padding:4px 10px !important}}.speed-menu,.quality-menu,.subtitles-menu{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--player-primary-color) hsla(0,0%,100%,.1)}.speed-menu::-webkit-scrollbar,.quality-menu::-webkit-scrollbar,.subtitles-menu::-webkit-scrollbar{width:6px}.speed-menu::-webkit-scrollbar-track,.quality-menu::-webkit-scrollbar-track,.subtitles-menu::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1);border-radius:3px}.speed-menu::-webkit-scrollbar-thumb,.quality-menu::-webkit-scrollbar-thumb,.subtitles-menu::-webkit-scrollbar-thumb{background:var(--player-primary-color);border-radius:3px}.speed-menu::-webkit-scrollbar-thumb:hover,.quality-menu::-webkit-scrollbar-thumb:hover,.subtitles-menu::-webkit-scrollbar-thumb:hover{background:var(--player-primary-hover)}@media(max-height: 400px){.speed-menu,.quality-menu,.subtitles-menu{max-height:150px}}@media(max-height: 300px){.speed-menu,.quality-menu,.subtitles-menu{max-height:120px}}.settings-submenu{max-height:180px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--player-primary-color) hsla(0,0%,100%,.1)}.settings-submenu::-webkit-scrollbar{width:6px}.settings-submenu::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1);border-radius:3px}.settings-submenu::-webkit-scrollbar-thumb{background:var(--player-primary-color);border-radius:3px}.settings-submenu::-webkit-scrollbar-thumb:hover{background:var(--player-primary-hover)}@media(max-width: 350px){.settings-submenu{max-height:140px}}@media(max-height: 400px){.settings-submenu{max-height:120px}}.volume-container{position:relative;display:flex;align-items:center;gap:var(--player-controls-gap)}.volume-container[data-mobile-slider=show] .volume-slider{width:80px;height:var(--player-volume-height);background:var(--player-volume-bg);border-radius:calc(var(--player-volume-height)/2);transition:all .3s ease}@media(max-width: 1200px){.volume-container[data-mobile-slider=show] .volume-slider{width:70px}}@media(max-width: 900px){.volume-container[data-mobile-slider=show] .volume-slider{width:60px}}@media(max-width: 768px){.volume-container[data-mobile-slider=show] .volume-slider{width:50px}}@media(max-width: 600px){.volume-container[data-mobile-slider=show] .volume-slider{width:40px}}@media(max-width: 550px){.volume-container[data-mobile-slider=show] .volume-tooltip{display:none !important}.volume-container[data-mobile-slider=show]{pointer-events:auto !important;position:relative}.mute-btn{position:relative;z-index:100;pointer-events:auto !important}.volume-container[data-mobile-slider=show] .volume-slider{position:absolute;opacity:0;visibility:hidden;pointer-events:none;width:0;height:0;transform:translateX(-100%);transition:opacity 0s ease,visibility 0s ease 2s,width 0s ease 2s}.controls-left:hover .volume-container[data-mobile-slider=show] .volume-slider,.mute-btn:hover~.volume-container[data-mobile-slider=show] .volume-slider,.volume-container[data-mobile-slider=show]:hover .volume-slider,.volume-slider:hover{position:absolute;opacity:1;visibility:visible;pointer-events:auto !important;width:90px !important;height:auto;bottom:auto;top:50%;left:5px;transform:translateY(-50%);z-index:19;background:rgba(0,0,0,.92) !important;border:1px solid hsla(0,0%,100%,.15);border-radius:8px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.6);backdrop-filter:blur(10px);transition:opacity .2s ease,visibility 0s ease,width .2s ease}.controls-left:has(.volume-container[data-mobile-slider=show]):hover{pointer-events:auto !important}.controls-left:hover .volume-slider::-webkit-slider-runnable-track,.volume-container[data-mobile-slider=show]:hover .volume-slider::-webkit-slider-runnable-track,.volume-slider:hover::-webkit-slider-runnable-track{width:60px;height:4px !important;background:linear-gradient(to right, var(--player-primary-color) 0%, var(--player-primary-color) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) 100%) !important;border-radius:2px}.controls-left:hover .volume-slider::-webkit-slider-thumb,.volume-container[data-mobile-slider=show]:hover .volume-slider::-webkit-slider-thumb,.volume-slider:hover::-webkit-slider-thumb{opacity:1 !important;visibility:visible !important;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5);margin-top:-5px}}.chapter-markers-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.chapter-marker{position:absolute;top:0;height:100%;width:3px;background:var(--player-primary-color);opacity:.7;cursor:pointer;pointer-events:auto;transition:all var(--player-transition-fast);border-radius:2px;transform:translateX(-50%)}.chapter-marker:hover{opacity:1;width:4px;height:120%;top:-10%;box-shadow:0 0 8px var(--player-primary-color)}.chapter-marker.active{background:var(--player-primary-hover);opacity:1;width:4px}.chapter-tooltip{position:absolute;bottom:100%;left:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);border-radius:8px;padding:0;margin-bottom:12px;opacity:0;visibility:hidden;transition:all .2s ease;transform:translateX(-50%) translateY(-8px);z-index:1000;box-shadow:var(--player-shadow-tooltip);border:1px solid hsla(0,0%,100%,.15);min-width:200px;max-width:300px;overflow:hidden;pointer-events:none}.chapter-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.95)}.chapter-tooltip-image{width:100%;height:150px;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;border-bottom:1px solid hsla(0,0%,100%,.1)}.chapter-tooltip-title{padding:10px 12px 6px;color:var(--player-text-color);font-size:14px;font-weight:600;line-height:1.3;word-wrap:break-word}.chapter-tooltip-time{padding:0 12px 10px;color:var(--player-text-secondary);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}@media(max-width: 480px){.chapter-marker{width:2px}.chapter-marker:hover{width:3px}.chapter-tooltip{min-width:160px;max-width:250px}.chapter-tooltip-image{height:100px}}.video-poster-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.video-poster-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.video-poster-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.video-poster-overlay.visible:hover{opacity:.95}.video-poster-overlay::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80px;height:80px;background:rgba(0,0,0,.7);border-radius:50%;border:3px solid var(--player-primary-color);opacity:0;transition:opacity .3s ease,transform .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::after{opacity:1;transform:translate(-50%, -50%) scale(1.1);border-color:var(--player-primary-hover);box-shadow:0 0 20px var(--player-primary-color)}.video-poster-overlay::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%, -50%);width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-color);z-index:2;opacity:0;transition:opacity .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::before{opacity:1;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-hover)}@media(max-width: 768px){.video-poster-overlay::after{width:60px;height:60px}.video-poster-overlay::before{border-width:12px 0 12px 20px}}@media(max-width: 480px){.video-poster-overlay::after{width:50px;height:50px}.video-poster-overlay::before{border-width:10px 0 10px 16px}}.video-poster-overlay.hidden{transition:opacity .5s ease,visibility 0s ease .5s}.player-theme-blue .video-poster-overlay::after{border-color:#2196f3}.player-theme-blue .video-poster-overlay.visible:hover::after{border-color:#1976d2;box-shadow:0 0 20px #2196f3}.player-theme-blue .video-poster-overlay::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #2196f3}.player-theme-blue .video-poster-overlay.visible:hover::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #1976d2}.player-theme-green .video-poster-overlay::after{border-color:#4caf50}.player-theme-green .video-poster-overlay.visible:hover::after{border-color:#45a049;box-shadow:0 0 20px #4caf50}.player-theme-green .video-poster-overlay::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #4caf50}.player-theme-green .video-poster-overlay.visible:hover::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #45a049}.player-theme-red .video-poster-overlay::after{border-color:#f44336}.player-theme-red .video-poster-overlay.visible:hover::after{border-color:#d32f2f;box-shadow:0 0 20px #f44336}.player-theme-red .video-poster-overlay::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #f44336}.player-theme-red .video-poster-overlay.visible:hover::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #d32f2f}.player-theme-dark .video-poster-overlay::after{background:rgba(0,0,0,.85)}@media(max-height: 400px){.video-player{min-height:200px}.controls{min-height:50px !important;padding:10px 10px 8px !important}.progress-container{margin-bottom:8px}.controls-main{min-height:32px !important}}@media(max-height: 330px){.video-player{min-height:150px}.controls{min-height:45px !important;padding:8px 8px 6px !important}.progress-container{margin-bottom:6px;height:4px}.controls-main{min-height:28px !important}.control-btn{padding:4px !important}.icon{font-size:14px !important}.time-display{font-size:11px !important}}@media(max-height: 250px){.video-player{min-height:120px}.controls{min-height:40px !important;padding:6px 8px 5px !important}.progress-container{margin-bottom:4px;height:3px}.controls-main{min-height:24px !important}.control-btn{padding:2px !important}.icon{font-size:12px !important}.time-display{font-size:10px !important}.quality-btn{min-height:20px !important;padding:2px 4px !important}.selected-quality{font-size:9px !important}.current-quality{display:none}.volume-slider{width:40px !important}}.video-container,.video-wrapper{overflow:visible !important}.controls.show{position:absolute !important;bottom:0 !important;overflow:visible !important}
+:root{--player-primary-color: goldenrod;--player-primary-hover: #daa520;--player-primary-dark: #b8860b;--player-button-color: white;--player-button-hover: rgba(255, 255, 255, 0.1);--player-button-active: rgba(255, 255, 255, 0.2);--player-text-color: white;--player-text-secondary: rgba(255, 255, 255, 0.8);--player-bg-primary: #000;--player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);--player-bg-title-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);--player-bg-menu: rgba(20, 20, 20, 0.95);--player-bg-loading: rgba(0, 0, 0, 0.7);--player-border-radius: 12px;--player-controls-padding: 20px 15px 15px;--player-title-overlay-padding: 15px 20px 25px;--player-button-padding: 8px;--player-icon-size: 20px;--player-progress-height: 6px;--player-progress-bg: rgba(255, 255, 255, 0.2);--player-progress-buffer: rgba(255, 255, 255, 0.3);--player-progress-handle-size: 16px;--player-volume-height: 4px;--player-volume-bg: rgba(255, 255, 255, 0.2);--player-volume-handle-size: 14px;--player-volume-fill: 100%;--player-transition-fast: 0.2s ease;--player-transition-normal: 0.3s ease;--player-shadow-main: 0 8px 32px rgba(0, 0, 0, 0.3);--player-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.2);--player-shadow-tooltip: 0 3px 12px rgba(0, 0, 0, 0.4)}*{box-sizing:border-box}body{margin:0;padding:20px;background:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.video-container{max-width:1200px;margin:0 auto;background:var(--player-bg-primary);border-radius:var(--player-border-radius);box-shadow:var(--player-shadow-main);position:relative}.video-container:fullscreen,.video-container:-webkit-full-screen,.video-container:-moz-full-screen{width:100vw;height:100vh;border-radius:0}.video-wrapper{position:relative;width:100%;background:var(--player-bg-primary);overflow:visible !important}.video-wrapper.player-initialized .video-player{visibility:visible;opacity:1;transition:opacity .3s ease;pointer-events:auto}.video-wrapper.player-initialized .initial-loading{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;transition-delay:.2s;display:none;transition-delay:.5s}.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide{visibility:hidden;opacity:0}.hidden{display:none !important}.player-theme-dark{--player-bg-primary: #1a1a1a;--player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);--player-bg-title-overlay: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, transparent 100%);--player-bg-menu: rgba(30, 30, 30, 0.95)}.video-player{width:100%;height:auto;display:block;min-height:300px;visibility:hidden;opacity:0;position:relative;z-index:1;transition:none}.video-wrapper.player-initialized .video-player{visibility:visible;opacity:1;transition:opacity .3s ease;pointer-events:auto}.video-player::-webkit-media-controls-panel,.video-player::-webkit-media-controls-play-button,.video-player::-webkit-media-controls-start-playback-button,.video-player::-webkit-media-controls-timeline,.video-player::-webkit-media-controls-current-time-display,.video-player::-webkit-media-controls-time-remaining-display,.video-player::-webkit-media-controls-mute-button,.video-player::-webkit-media-controls-toggle-closed-captions-button,.video-player::-webkit-media-controls-volume-slider,.video-player::-webkit-media-controls-fullscreen-button,.video-player::-webkit-media-controls-seek-back-button,.video-player::-webkit-media-controls-seek-forward-button,.video-player::-webkit-media-controls-rewind-button,.video-player::-webkit-media-controls-return-to-realtime-button,.video-player::-webkit-media-controls-overlay-play-button{display:none !important;visibility:hidden !important;opacity:0 !important}.video-player::-moz-media-controls{display:none !important}.initial-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-primary);display:flex;align-items:center;justify-content:center;z-index:20}.video-wrapper.player-initialized .initial-loading{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;transition-delay:.2s}.video-wrapper.player-initialized .initial-loading{display:none;transition-delay:.5s}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-loading);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--player-transition-normal);z-index:15}.loading-overlay.active{opacity:1;visibility:visible}.loading-spinner{width:50px;height:50px;border:3px solid hsla(0,0%,100%,.3);border-top:3px solid var(--player-primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.video-player::cue{background:rgba(0,0,0,.8);color:#fff;font-size:18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:500;text-shadow:2px 2px 4px rgba(0,0,0,.8);padding:8px 12px;border-radius:6px;line-height:1.4}.video-player::cue(.highlight){background:var(--player-primary-color);color:#000}.video-player::cue(b){font-weight:700}.video-player::cue(i){font-style:italic}.video-poster-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.video-poster-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.video-poster-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.video-poster-overlay.visible:hover{opacity:.95}.video-poster-overlay::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80px;height:80px;background:rgba(0,0,0,.7);border-radius:50%;border:3px solid var(--player-primary-color);opacity:0;transition:opacity .3s ease,transform .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::after{opacity:1;transform:translate(-50%, -50%) scale(1.1);border-color:var(--player-primary-hover);box-shadow:0 0 20px var(--player-primary-color)}.video-poster-overlay::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%, -50%);width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-color);z-index:2;opacity:0;transition:opacity .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::before{opacity:1;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-hover)}.initial-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-primary);display:flex;align-items:center;justify-content:center;z-index:20}.video-wrapper.player-initialized .initial-loading{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;transition-delay:.2s}.video-wrapper.player-initialized .initial-loading{display:none;transition-delay:.5s}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--player-bg-loading);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--player-transition-normal);z-index:15}.loading-overlay.active{opacity:1;visibility:visible}.loading-spinner{width:50px;height:50px;border:3px solid hsla(0,0%,100%,.3);border-top:3px solid var(--player-primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.title-overlay{position:absolute;top:0;left:0;right:0;background:var(--player-bg-title-overlay);padding:var(--player-title-overlay-padding);opacity:0;transform:translateY(-100%);transition:all var(--player-transition-normal);z-index:15;pointer-events:none}.title-overlay.show{opacity:1;transform:translateY(0)}.title-overlay.show.persistent{opacity:1;transform:translateY(0)}.title-text{color:var(--player-text-color);font-size:18px;font-weight:600;line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.title-overlay{position:absolute;top:0;left:0;right:0;background:var(--player-bg-title-overlay);padding:var(--player-title-overlay-padding);opacity:0;transform:translateY(-100%);transition:all var(--player-transition-normal);z-index:15;pointer-events:none}.title-overlay.show{opacity:1;transform:translateY(0)}.title-overlay.show.persistent{opacity:1;transform:translateY(0)}.title-text{color:var(--player-text-color);font-size:18px;font-weight:600;line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subtitle-text{color:var(--player-text-color);font-size:14px;font-weight:400;line-height:1.3;margin:5px 0 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:.9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.chapter-name{font-size:13px;font-weight:500;color:hsla(0,0%,100%,.9);margin-top:6px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .3s}.controls{position:absolute;bottom:0;left:0;right:0;background:var(--player-bg-controls);padding:var(--player-controls-padding);opacity:0;transform:translateY(100%);transition:all var(--player-transition-normal);z-index:10;min-height:70px !important;box-sizing:border-box}.controls.show{opacity:1;transform:translateY(0);position:absolute !important;bottom:0 !important;z-index:20 !important}.play-icon svg,.pause-icon svg,.volume-icon svg,.mute-icon svg,.playlist-prev-btn .icon svg,.playlist-next-btn .icon svg,.subtitles-btn .icon svg,.fullscreen-icon svg,.exit-fullscreen-icon svg,.pip-icon svg,.pip-exit-icon svg{width:16px;height:16px;display:block}.controls-main{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px !important;flex-shrink:0}.controls-left,.controls-right{display:flex;align-items:center;gap:10px;flex-shrink:1;min-width:0}.control-btn{background:none;border:none;color:var(--player-button-color);cursor:pointer;padding:var(--player-button-padding);border-radius:6px;display:flex;align-items:center;gap:5px;transition:all var(--player-transition-fast);font-size:14px;font-weight:500;position:relative;flex-shrink:1;min-width:0;white-space:nowrap}.control-btn:hover{background:var(--player-button-hover);transform:scale(1.05)}.control-btn:active{transform:scale(0.95);background:var(--player-button-active)}.subtitles-btn{position:relative}.quality-btn{min-height:36px;padding:6px 8px}.quality-btn-text{display:flex;flex-direction:column;align-items:center;line-height:1}.selected-quality{font-size:14px;font-weight:500;color:var(--player-button-color)}.current-quality{font-size:10px;font-weight:400;color:var(--player-text-secondary);opacity:.8;margin-top:2px;line-height:1}.time-display{color:var(--player-text-color);font-size:14px;font-weight:500;display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;flex-shrink:2;min-width:0}.icon{width:var(--player-icon-size);height:var(--player-icon-size);display:flex;align-items:center;justify-content:center;font-size:16px}.hidden{display:none !important}.controls-right .brand-logo{height:44px;max-width:120px;object-fit:contain;margin-right:10px;pointer-events:auto;opacity:.8;transition:opacity var(--player-transition-fast);order:-1;flex-shrink:1}.controls-right .brand-logo:hover{opacity:1}.controls-right .brand-logo-link{order:-1;margin-right:10px;display:inline-block;text-decoration:none}.controls-right .brand-logo-link .brand-logo{margin-right:0}.video-wrapper.hide-cursor{cursor:none !important}.video-wrapper.hide-cursor .controls{cursor:default !important}.video-wrapper.hide-cursor .control-btn{cursor:pointer !important}.video-wrapper.hide-cursor iframe{cursor:auto !important;pointer-events:auto !important}.progress-container{width:100%;height:var(--player-progress-height);background:var(--player-progress-bg);border-radius:calc(var(--player-progress-height)/2);margin-bottom:15px;position:relative;cursor:pointer}.progress-bar{width:100%;height:100%;position:relative;border-radius:calc(var(--player-progress-height)/2);overflow:hidden}.progress-buffer{height:100%;background:var(--player-progress-buffer);width:0%;border-radius:calc(var(--player-progress-height)/2);transition:width var(--player-transition-fast)}.progress-filled{position:absolute;top:0;left:0;height:100%;background:var(--player-primary-color);width:0%;border-radius:calc(var(--player-progress-height)/2);transition:width .1s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%, -50%);width:var(--player-progress-handle-size);height:var(--player-progress-handle-size);background:var(--player-primary-color);border-radius:50%;opacity:1;transition:opacity var(--player-transition-fast);z-index:2;left:0%;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:all;touch-action:none}.progress-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:44px;height:44px;border-radius:50%}.progress-container:hover .progress-handle{opacity:1}.progress-container:hover .progress-filled{background:var(--player-primary-hover)}.seek-tooltip{position:absolute;bottom:100%;left:0;background:rgba(0,0,0,.9);color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);transition:all .15s ease;z-index:1000;box-shadow:var(--player-shadow-tooltip);font-variant-numeric:tabular-nums;backdrop-filter:blur(8px);border:1px solid hsla(0,0%,100%,.1)}.seek-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid rgba(0,0,0,.9)}.seek-tooltip.visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-4px)}.chapter-markers-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.chapter-marker{position:absolute;top:0;height:100%;width:3px;background:var(--player-primary-color);opacity:.7;cursor:pointer;pointer-events:auto;transition:all var(--player-transition-fast);border-radius:2px;transform:translateX(-50%)}.chapter-marker:hover{opacity:1;width:4px;height:120%;top:-10%;box-shadow:0 0 8px var(--player-primary-color)}.chapter-marker.active{background:var(--player-primary-hover);opacity:1;width:4px}.chapter-tooltip{position:absolute;bottom:100%;left:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);border-radius:8px;padding:0;margin-bottom:12px;opacity:0;visibility:hidden;transition:all .2s ease;transform:translateX(-50%) translateY(-8px);z-index:1000;box-shadow:var(--player-shadow-tooltip);border:1px solid hsla(0,0%,100%,.15);min-width:200px;max-width:300px;overflow:hidden;pointer-events:none}.chapter-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.95)}.chapter-tooltip-image{width:100%;height:150px;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;border-bottom:1px solid hsla(0,0%,100%,.1)}.chapter-tooltip-title{padding:10px 12px 6px;color:var(--player-text-color);font-size:14px;font-weight:600;line-height:1.3;word-wrap:break-word}.chapter-tooltip-time{padding:0 12px 10px;color:var(--player-text-secondary);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}.progress-handle-circle{border-radius:50%}.progress-handle-square{border-radius:2px}.progress-handle-diamond{border-radius:2px;transform:translate(-50%, -50%) rotate(45deg)}.progress-handle-arrow{border-radius:0;clip-path:polygon(0% 50%, 60% 0%, 60% 35%, 100% 35%, 100% 65%, 60% 65%, 60% 100%)}.progress-handle-triangle{border-radius:0;clip-path:polygon(50% 0%, 0% 100%, 100% 100%)}.progress-handle-heart{border-radius:0}.progress-handle-heart::before{content:"❤";font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.progress-handle-star{border-radius:0;clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.progress-handle-none{opacity:0 !important}.progress-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:44px;height:44px;border-radius:50%}.progress-container.seeking .progress-bar{height:calc(var(--player-progress-height)*2);transition:height .15s ease}.progress-container.seeking .progress-handle{transform:translate(-50%, -50%) scale(1.4);transition:transform .15s ease}@media(hover: hover)and (pointer: fine){.progress-container:hover .progress-bar{height:calc(var(--player-progress-height)*1.3);transition:height .15s ease}}.chapter-segment{box-sizing:border-box}.chapter-marker:hover{background:rgba(0,0,0,.9) !important}.chapter-tooltip{animation:fadeIn .15s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.progress-container:hover .chapter-segment{background:hsla(0,0%,100%,.4) !important}.chapter-tooltip{animation:fadeIn .15s ease-in-out}.chapter-tooltip .chapter-tooltip-content{display:flex;flex-direction:column}.chapter-tooltip .chapter-tooltip-image{background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:3px}.chapter-tooltip .chapter-tooltip-title{line-height:1.3}.chapter-tooltip .chapter-tooltip-time{opacity:.8}@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.chapter-tooltip-hover .chapter-tooltip-content{display:flex;flex-direction:column;gap:6px}.chapter-tooltip-hover .chapter-tooltip-image{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:3px;max-width:180px}.chapter-tooltip-hover .chapter-tooltip-title{font-size:13px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chapter-tooltip-hover .chapter-tooltip-time{font-size:12px;font-weight:400;color:hsla(0,0%,100%,.8);max-width:180px}@media(max-width: 1200px){.chapter-tooltip-hover .chapter-tooltip-image{max-width:150px}.chapter-tooltip-hover .chapter-tooltip-title,.chapter-tooltip-hover .chapter-tooltip-time{max-width:150px}}@media(max-width: 768px){.chapter-tooltip-hover .chapter-tooltip-image{max-width:100px}.chapter-tooltip-hover .chapter-tooltip-title,.chapter-tooltip-hover .chapter-tooltip-time{max-width:100px}}@media(max-width: 480px){.chapter-tooltip-hover .chapter-tooltip-image{max-width:80px}.chapter-tooltip-hover .chapter-tooltip-title{font-size:11px;max-width:80px}.chapter-tooltip-hover .chapter-tooltip-time{font-size:10px;max-width:80px}}.volume-container{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:2;min-width:0}.volume-slider{width:60px;height:var(--player-volume-height);background:var(--player-volume-bg);border-radius:calc(var(--player-volume-height)/2);outline:none;cursor:pointer;-webkit-appearance:none;transition:all var(--player-transition-fast)}.volume-tooltip{position:absolute;bottom:210%;transition:opacity .15s ease,transform .15s ease;left:0;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;z-index:1000;box-shadow:var(--player-shadow-tooltip);pointer-events:none;backdrop-filter:blur(8px);border:1px solid hsla(0,0%,100%,.1)}.volume-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.9)}.volume-container:hover .volume-tooltip,.volume-tooltip.visible{opacity:1;visibility:visible}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:var(--player-volume-handle-size);height:var(--player-volume-handle-size);border-radius:50%;background:var(--player-primary-dark);cursor:pointer;transition:all var(--player-transition-fast);box-shadow:0 2px 6px rgba(0,0,0,.2);margin-top:calc((var(--player-volume-height) - var(--player-volume-handle-size))/2);transform:translateY(0)}.volume-slider::-webkit-slider-thumb:hover{transform:translateY(0) scale(1.2);background:var(--player-primary-color)}.volume-slider::-moz-range-thumb{width:var(--player-volume-handle-size);height:var(--player-volume-handle-size);border-radius:50%;background:var(--player-primary-dark);cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:all var(--player-transition-fast);margin-top:0;transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2))}.volume-slider::-moz-range-thumb:hover{background:var(--player-primary-color);transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2)) scale(1.1)}.volume-slider::-webkit-slider-runnable-track{height:var(--player-volume-height);background:linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);border-radius:calc(var(--player-volume-height)/2);transition:background var(--player-transition-fast);margin:0;border:none}.volume-slider::-moz-range-track{height:var(--player-volume-height);background:linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);border-radius:calc(var(--player-volume-height)/2);border:none;transition:background var(--player-transition-fast);margin:0}.quality-control{position:relative}.subtitles-control{display:none !important}.speed-control{display:none !important}.speed-menu,.quality-menu,.subtitles-menu{position:absolute;bottom:100%;right:0;background:var(--player-bg-menu);backdrop-filter:blur(10px);border-radius:8px;padding:8px 0;margin-bottom:10px;opacity:0;visibility:hidden;transition:all var(--player-transition-fast);min-width:140px;border:1px solid hsla(0,0%,100%,.1);z-index:100;box-shadow:var(--player-shadow-menu)}.speed-menu.active,.quality-menu.active,.subtitles-menu.active{opacity:1 !important;visibility:visible !important;pointer-events:all !important}.speed-option,.quality-option,.subtitles-option{padding:8px 16px;color:var(--player-text-color);cursor:pointer;transition:all var(--player-transition-fast);font-size:14px;display:flex;align-items:center;justify-content:space-between}.speed-option:hover,.quality-option:hover,.subtitles-option:hover{background:hsla(0,0%,100%,.1);color:var(--player-primary-color)}.speed-option.active,.quality-option.active,.subtitles-option.active{color:var(--player-primary-color);font-weight:600;background:hsla(0,0%,100%,.05)}.subtitles-option.selected,.subtitles-option.active{color:var(--player-primary-color);background:hsla(0,0%,100%,.1);position:relative}.subtitles-option.selected::after,.subtitles-option.active::after{content:"✓";position:absolute;right:10px;font-weight:bold}.quality-option.selected{color:var(--player-primary-color);font-weight:600}.quality-option.selected::after{content:"Selected";font-size:12px;color:var(--player-primary-color);font-weight:400;margin-left:8px}.quality-option.playing{background:hsla(0,0%,100%,.05)}.quality-option.playing::after{content:"Playing";font-size:12px;color:#4caf50;font-weight:400;margin-left:8px}.quality-option.selected.playing::after{content:"Active";font-size:12px;color:var(--player-primary-color);font-weight:500;margin-left:8px}.subtitles-option.active::after{content:"✓";font-size:12px;color:var(--player-primary-color)}.settings-control{position:relative;display:block !important}.settings-btn{background:none;border:none;color:var(--player-button-color);cursor:pointer;padding:var(--player-button-padding);border-radius:6px;display:flex;align-items:center;gap:5px;transition:all var(--player-transition-fast);font-size:14px;font-weight:500;position:relative;flex-shrink:0;min-width:0;white-space:nowrap}.settings-btn:hover{background:var(--player-button-hover);transform:scale(1.05)}.settings-btn:active{transform:scale(0.95);background:var(--player-button-active)}.settings-menu{position:absolute;bottom:100%;right:0;background:var(--player-bg-menu);backdrop-filter:blur(10px);border-radius:8px;padding:8px 0;margin-bottom:10px;opacity:0;visibility:hidden;transition:all var(--player-transition-fast);min-width:180px;border:1px solid hsla(0,0%,100%,.1);z-index:100;box-shadow:var(--player-shadow-menu);max-height:200px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--player-primary-color) hsla(0,0%,100%,.05)}.settings-menu.active{opacity:1 !important;visibility:visible !important;pointer-events:all !important}.settings-menu::-webkit-scrollbar{width:8px}.settings-menu::-webkit-scrollbar-track{background:hsla(0,0%,100%,.05);border-radius:10px}.settings-menu::-webkit-scrollbar-thumb{background:var(--player-primary-color);border-radius:10px;border:2px solid rgba(0,0,0,0);background-clip:content-box}.settings-menu::-webkit-scrollbar-thumb:hover{background:var(--player-primary-hover, var(--player-primary-color));background-clip:content-box}.settings-option{padding:8px 16px;color:var(--player-text-color);cursor:pointer;transition:all var(--player-transition-fast);font-size:14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid hsla(0,0%,100%,.05);position:relative}.settings-option:last-child{border-bottom:none}.settings-option:hover{background:hsla(0,0%,100%,.1);color:var(--player-primary-color)}.settings-option-label{display:flex;align-items:center;gap:8px;flex:1}.settings-option-value{font-size:12px;color:var(--player-text-secondary);opacity:.8}.settings-expandable-wrapper{position:relative;display:block}.settings-option.expandable-trigger{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.settings-option.expandable-trigger .settings-option-label{font-size:14px}.settings-option.expandable-trigger .expand-arrow{font-size:12px;transition:transform .2s ease;margin-left:8px}.settings-option.expandable-trigger:hover{background:hsla(0,0%,100%,.1)}.settings-expandable-content{padding-left:15px;margin-top:4px;display:none;background:rgba(0,0,0,.3);border-left:3px solid var(--player-primary-color)}.settings-expandable-content.active{display:block}.settings-suboption{padding:8px 12px;cursor:pointer;color:#fff;font-size:13px;white-space:normal;word-wrap:break-word;opacity:.8;transition:opacity .2s;display:flex;align-items:center;justify-content:space-between}.settings-suboption:hover{opacity:1;background:hsla(0,0%,100%,.1)}.settings-suboption.active{opacity:1;font-weight:bold;color:var(--player-primary-color)}.settings-suboption.active::after{content:"✓";font-size:12px}@media(max-width: 768px){.settings-menu>.settings-option{font-size:13px}.settings-suboption{font-size:12px;padding:7px 10px}}@media(max-width: 600px){.settings-menu>.settings-option{font-size:12px}.settings-suboption{font-size:11px;padding:6px 8px}}@media(max-width: 450px){.settings-menu>.settings-option{font-size:11px}.settings-suboption{font-size:10px;padding:5px 6px}}@media(max-width: 350px){.settings-control{display:block !important}.pip-btn{display:none !important}}.audio-player{width:320px;height:80px}.audio-player video{display:none !important}.audio-player .controls-wrapper{height:60px}.audio-player .audio-wave-canvas{display:block;width:100%;height:60px;background-color:#222;border-radius:4px;margin-top:5px}.player-theme-blue{--player-primary-color: #2196F3;--player-primary-hover: #1976D2;--player-primary-dark: #1565C0}.player-theme-green{--player-primary-color: #4CAF50;--player-primary-hover: #45a049;--player-primary-dark: #388e3c}.player-theme-red{--player-primary-color: #f44336;--player-primary-hover: #d32f2f;--player-primary-dark: #c62828}.video-watermark{position:absolute;z-index:15;pointer-events:auto;opacity:.7;transition:opacity .3s ease,visibility .3s ease,bottom .3s ease}.video-watermark{visibility:visible;opacity:.7}.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide{visibility:hidden;opacity:0}.video-wrapper.has-controls .video-watermark{visibility:visible;opacity:.7}.video-watermark:hover{opacity:1}.video-watermark img{display:block;max-width:150px;max-height:80px;width:auto;height:auto;object-fit:contain}.video-watermark.watermark-topleft{top:15px;left:15px}.video-watermark.watermark-topright{top:15px;right:15px}.video-watermark.watermark-bottomleft{bottom:calc(var(--player-controls-height, 70px) + 15px);left:15px}.video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 70px) + 15px);right:15px}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide){bottom:15px}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide){bottom:15px}.video-wrapper.has-controls .video-watermark.watermark-bottomleft,.video-wrapper.has-controls .video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 70px) + 15px)}@media(max-width: 768px){.video-watermark img{max-width:100px;max-height:50px}.video-watermark.watermark-topleft,.video-watermark.watermark-topright{top:10px}.video-watermark.watermark-topleft,.video-watermark.watermark-bottomleft{left:10px}.video-watermark.watermark-topright,.video-watermark.watermark-bottomright{right:10px}.video-watermark.watermark-bottomleft,.video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 60px) + 10px)}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide){bottom:10px}}@media(max-width: 480px){.video-watermark.watermark-bottomleft,.video-watermark.watermark-bottomright{bottom:calc(var(--player-controls-height, 55px) + 10px)}.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide){bottom:8px}}.video-watermark[style*="cursor: pointer"]{cursor:pointer !important}@media(max-width: 768px){.controls-left,.controls-right{gap:8px}.volume-slider{width:50px}.time-display{font-size:12px}.icon{font-size:14px}.control-btn{padding:6px}.quality-btn{min-height:32px;padding:4px 6px}.selected-quality{font-size:12px}.current-quality{font-size:9px}.seek-tooltip{font-size:11px;padding:4px 8px}.title-overlay{padding:12px 15px 20px}.title-text{font-size:16px}.video-player::cue{font-size:16px;padding:6px 10px}.controls-right .brand-logo{height:36px;max-width:100px;margin-right:8px}}@media(max-width: 480px){.controls-left,.controls-right{gap:6px}.progress-container{margin-bottom:10px}.controls-main{padding-top:6px}.volume-container{flex-shrink:3}.volume-slider{width:35px}.time-display span:nth-child(2){display:none}.quality-btn{min-height:28px;padding:3px 5px}.selected-quality{font-size:11px}.current-quality{font-size:8px}.seek-tooltip{font-size:10px;padding:3px 6px}.title-overlay{padding:10px 12px 18px}.title-text{font-size:14px}.video-player::cue{font-size:14px;padding:4px 8px}.controls-right .brand-logo{height:28px;max-width:80px;margin-right:5px}}@media(max-width: 350px){.controls-left,.controls-right{gap:4px}.control-btn{padding:4px}.icon{font-size:12px}.quality-btn{min-height:24px;padding:2px 4px}.selected-quality{font-size:10px}.current-quality{font-size:7px}.controls-right .brand-logo{height:22px;max-width:50px;margin-right:3px}.volume-slider{width:30px}.settings-menu{min-width:160px;font-size:12px}.settings-option{padding:6px 12px;font-size:12px}.settings-submenu{min-width:130px}.settings-suboption{padding:6px 12px;font-size:11px}}@media(max-width: 280px){.controls-left,.controls-right{gap:3px}.control-btn{padding:3px}.icon{font-size:10px}.quality-btn{min-height:20px;padding:1px 3px}.selected-quality{font-size:9px}.current-quality{font-size:6px}.controls-right .brand-logo{height:18px;max-width:40px;margin-right:2px}.volume-slider{width:25px}.settings-menu{min-width:140px;font-size:11px}.settings-option{padding:5px 10px;font-size:11px}.settings-submenu{min-width:120px}.settings-suboption{padding:5px 10px;font-size:10px}}@media(max-width: 600px){.controls-main{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.controls-main::-webkit-scrollbar{display:none}.controls-left,.controls-right{flex-wrap:nowrap;white-space:nowrap;flex-shrink:1;min-width:fit-content}}.controls-right .playlist-prev-btn,.controls-right .playlist-next-btn{display:none}.controls-right .playlist-prev-btn.playlist-active,.controls-right .playlist-next-btn.playlist-active{display:flex}.playlist-prev-btn .icon::before{content:"⏮"}.playlist-next-btn .icon::before{content:"⏭"}.playlist-prev-btn:disabled,.playlist-next-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.playlist-prev-btn:disabled .icon,.playlist-next-btn:disabled .icon{opacity:.5}@media(max-width: 768px){.playlist-prev-btn .icon::before,.playlist-next-btn .icon::before{font-size:16px}}@media(max-width: 480px){.playlist-prev-btn .icon::before,.playlist-next-btn .icon::before{font-size:14px}}.video-container:fullscreen,.video-container:-webkit-full-screen,.video-container:-moz-full-screen{width:100vw;height:100vh;border-radius:0}@keyframes qualityChange{0%{opacity:.7}50%{opacity:.3}100%{opacity:1}}.quality-changing{animation:qualityChange .5s ease-in-out}.control-btn:focus{outline:2px solid var(--player-primary-color);outline-offset:2px}.volume-slider:focus{outline:2px solid var(--player-primary-color);outline-offset:2px}.player-large-controls{--player-icon-size: 24px;--player-button-padding: 12px;--player-progress-height: 8px;--player-progress-handle-size: 20px;--player-title-overlay-padding: 18px 24px 30px}.player-compact-controls{--player-icon-size: 16px;--player-button-padding: 4px;--player-controls-padding: 15px 10px 10px;--player-title-overlay-padding: 12px 16px 20px}@-moz-document url-prefix(){.volume-slider::-moz-range-thumb{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px))}.volume-slider::-moz-range-thumb:hover{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px)) scale(1.1)}.volume-slider::-moz-range-track{height:var(--player-volume-height);background:linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);border-radius:calc(var(--player-volume-height)/2);border:none;transition:background var(--player-transition-fast);margin:0}}@supports(-moz-appearance: none){.volume-slider{margin-top:-1px}.volume-slider::-moz-range-thumb{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px))}.volume-slider::-moz-range-thumb:hover{transform:translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px)) scale(1.1)}}@-moz-document url-prefix(){.volume-container{position:relative;top:2px !important}.volume-slider::-moz-range-thumb{margin-top:-6px !important;transform:translateY(-2px) !important}.volume-slider::-moz-range-thumb:hover{transform:translateY(-2px) scale(1.1) !important}}.video-player{object-position:center center}.resolution-normal .video-player{object-fit:contain;object-position:center center}.resolution-4-3 .video-player{object-fit:fill;aspect-ratio:4/3}.resolution-4-3 .video-wrapper{aspect-ratio:4/3}.resolution-16-9 .video-player{object-fit:fill;aspect-ratio:16/9}.resolution-16-9 .video-wrapper{aspect-ratio:16/9}.resolution-stretched .video-player{object-fit:fill;width:100%;height:100%}.resolution-stretched .video-wrapper{height:auto;min-height:300px}.resolution-fit-to-screen .video-player{object-fit:cover;object-position:center center;width:100%;height:100%}.resolution-fit-to-screen .video-wrapper{height:100vh;max-height:100vh}.resolution-scale-to-fit .video-player{object-fit:contain;object-position:center center;width:100%;height:100%;max-width:100vw;max-height:100vh}.resolution-scale-to-fit .video-wrapper{display:flex;align-items:center;justify-content:center;height:70vh;min-height:400px;background:var(--player-bg-primary, #000)}@media(orientation: portrait){.resolution-scale-to-fit .video-wrapper{height:50vh;min-height:350px}}@media(orientation: landscape){.resolution-scale-to-fit .video-wrapper{height:80vh;min-height:450px}}@media(max-width: 768px){.resolution-fit-to-screen .video-wrapper{height:50vh;min-height:250px}.resolution-4-3 .video-wrapper,.resolution-16-9 .video-wrapper{min-height:200px}.resolution-scale-to-fit .video-wrapper{height:45vh;min-height:300px}}@media(max-width: 480px){.resolution-fit-to-screen .video-wrapper{height:40vh;min-height:200px}.resolution-4-3 .video-wrapper,.resolution-16-9 .video-wrapper{min-height:180px}.resolution-scale-to-fit .video-wrapper{height:40vh;min-height:250px}}.video-player{transition:object-fit .3s ease,aspect-ratio .3s ease}.video-wrapper{transition:aspect-ratio .3s ease,height .3s ease}@supports not (aspect-ratio: 1){.resolution-4-3 .video-wrapper{padding-bottom:75%;height:0;position:relative}.resolution-4-3 .video-player{position:absolute;top:0;left:0;width:100%;height:100%}.resolution-16-9 .video-wrapper{padding-bottom:56.25%;height:0;position:relative}.resolution-16-9 .video-player{position:absolute;top:0;left:0;width:100%;height:100%}}.quality-changing .video-player{filter:brightness(0.7)}.resolution-debug .video-wrapper::before{content:"Resolution: " attr(data-resolution);position:absolute;top:10px;left:10px;background:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;z-index:1000;pointer-events:none}.controls,.controls-main,.controls-left,.controls-right{overflow:visible !important}.controls-left,.controls-right{flex-wrap:nowrap !important;white-space:nowrap !important}.control-btn{min-width:0 !important;white-space:nowrap !important}video::cue{background-color:rgba(0,0,0,.8);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:normal;line-height:1.2;text-shadow:1px 1px 1px rgba(0,0,0,.8);padding:4px 8px;border-radius:4px;white-space:pre-line}video::-webkit-media-text-track-display{color:#fff;font-family:Arial,Helvetica,sans-serif;background-color:rgba(0,0,0,.8);border-radius:4px;padding:4px 8px;font-size:18px;text-shadow:1px 1px 1px rgba(0,0,0,.8)}.custom-subtitle-overlay{font-size:clamp(12px,4vw,18px)}@media(max-width: 768px){.custom-subtitle-overlay{font-size:16px !important;bottom:70px !important;max-width:85% !important;padding:6px 12px !important;line-height:1.2 !important}}@media(max-width: 480px){.custom-subtitle-overlay{font-size:14px !important;bottom:60px !important;max-width:90% !important;padding:5px 10px !important;line-height:1.15 !important}}@media(max-width: 360px){.custom-subtitle-overlay{font-size:12px !important;bottom:50px !important;max-width:95% !important;padding:4px 8px !important}}@media(max-height: 500px)and (orientation: landscape){.custom-subtitle-overlay{font-size:13px !important;bottom:45px !important;max-width:85% !important;padding:4px 10px !important}}.speed-menu,.quality-menu,.subtitles-menu{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--player-primary-color) hsla(0,0%,100%,.1)}.speed-menu::-webkit-scrollbar,.quality-menu::-webkit-scrollbar,.subtitles-menu::-webkit-scrollbar{width:6px}.speed-menu::-webkit-scrollbar-track,.quality-menu::-webkit-scrollbar-track,.subtitles-menu::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1);border-radius:3px}.speed-menu::-webkit-scrollbar-thumb,.quality-menu::-webkit-scrollbar-thumb,.subtitles-menu::-webkit-scrollbar-thumb{background:var(--player-primary-color);border-radius:3px}.speed-menu::-webkit-scrollbar-thumb:hover,.quality-menu::-webkit-scrollbar-thumb:hover,.subtitles-menu::-webkit-scrollbar-thumb:hover{background:var(--player-primary-hover)}@media(max-height: 400px){.speed-menu,.quality-menu,.subtitles-menu{max-height:150px}}@media(max-height: 300px){.speed-menu,.quality-menu,.subtitles-menu{max-height:120px}}.settings-submenu{max-height:180px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--player-primary-color) hsla(0,0%,100%,.1)}.settings-submenu::-webkit-scrollbar{width:6px}.settings-submenu::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1);border-radius:3px}.settings-submenu::-webkit-scrollbar-thumb{background:var(--player-primary-color);border-radius:3px}.settings-submenu::-webkit-scrollbar-thumb:hover{background:var(--player-primary-hover)}@media(max-width: 350px){.settings-submenu{max-height:140px}}@media(max-height: 400px){.settings-submenu{max-height:120px}}.volume-container{position:relative;display:flex;align-items:center;gap:var(--player-controls-gap)}.volume-container[data-mobile-slider=show] .volume-slider{width:80px;height:var(--player-volume-height);background:var(--player-volume-bg);border-radius:calc(var(--player-volume-height)/2);transition:all .3s ease}@media(max-width: 1200px){.volume-container[data-mobile-slider=show] .volume-slider{width:70px}}@media(max-width: 900px){.volume-container[data-mobile-slider=show] .volume-slider{width:60px}}@media(max-width: 768px){.volume-container[data-mobile-slider=show] .volume-slider{width:50px}}@media(max-width: 600px){.volume-container[data-mobile-slider=show] .volume-slider{width:40px}}@media(max-width: 550px){.volume-container[data-mobile-slider=show] .volume-tooltip{display:none !important}.volume-container[data-mobile-slider=show]{pointer-events:auto !important;position:relative}.mute-btn{position:relative;z-index:100;pointer-events:auto !important}.volume-container[data-mobile-slider=show] .volume-slider{position:absolute;opacity:0;visibility:hidden;pointer-events:none;width:0;height:0;transform:translateX(-100%);transition:opacity 0s ease,visibility 0s ease 2s,width 0s ease 2s}.controls-left:hover .volume-container[data-mobile-slider=show] .volume-slider,.mute-btn:hover~.volume-container[data-mobile-slider=show] .volume-slider,.volume-container[data-mobile-slider=show]:hover .volume-slider,.volume-slider:hover{position:absolute;opacity:1;visibility:visible;pointer-events:auto !important;width:90px !important;height:auto;bottom:auto;top:50%;left:5px;transform:translateY(-50%);z-index:19;background:rgba(0,0,0,.92) !important;border:1px solid hsla(0,0%,100%,.15);border-radius:8px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.6);backdrop-filter:blur(10px);transition:opacity .2s ease,visibility 0s ease,width .2s ease}.controls-left:has(.volume-container[data-mobile-slider=show]):hover{pointer-events:auto !important}.controls-left:hover .volume-slider::-webkit-slider-runnable-track,.volume-container[data-mobile-slider=show]:hover .volume-slider::-webkit-slider-runnable-track,.volume-slider:hover::-webkit-slider-runnable-track{width:60px;height:4px !important;background:linear-gradient(to right, var(--player-primary-color) 0%, var(--player-primary-color) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) 100%) !important;border-radius:2px}.controls-left:hover .volume-slider::-webkit-slider-thumb,.volume-container[data-mobile-slider=show]:hover .volume-slider::-webkit-slider-thumb,.volume-slider:hover::-webkit-slider-thumb{opacity:1 !important;visibility:visible !important;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5);margin-top:-5px}}.chapter-markers-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.chapter-marker{position:absolute;top:0;height:100%;width:3px;background:var(--player-primary-color);opacity:.7;cursor:pointer;pointer-events:auto;transition:all var(--player-transition-fast);border-radius:2px;transform:translateX(-50%)}.chapter-marker:hover{opacity:1;width:4px;height:120%;top:-10%;box-shadow:0 0 8px var(--player-primary-color)}.chapter-marker.active{background:var(--player-primary-hover);opacity:1;width:4px}.chapter-tooltip{position:absolute;bottom:100%;left:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);border-radius:8px;padding:0;margin-bottom:12px;opacity:0;visibility:hidden;transition:all .2s ease;transform:translateX(-50%) translateY(-8px);z-index:1000;box-shadow:var(--player-shadow-tooltip);border:1px solid hsla(0,0%,100%,.15);min-width:200px;max-width:300px;overflow:hidden;pointer-events:none}.chapter-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.95)}.chapter-tooltip-image{width:100%;height:150px;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;border-bottom:1px solid hsla(0,0%,100%,.1)}.chapter-tooltip-title{padding:10px 12px 6px;color:var(--player-text-color);font-size:14px;font-weight:600;line-height:1.3;word-wrap:break-word}.chapter-tooltip-time{padding:0 12px 10px;color:var(--player-text-secondary);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}@media(max-width: 480px){.chapter-marker{width:2px}.chapter-marker:hover{width:3px}.chapter-tooltip{min-width:160px;max-width:250px}.chapter-tooltip-image{height:100px}}.video-poster-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.video-poster-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.video-poster-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.video-poster-overlay.visible:hover{opacity:.95}.video-poster-overlay::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80px;height:80px;background:rgba(0,0,0,.7);border-radius:50%;border:3px solid var(--player-primary-color);opacity:0;transition:opacity .3s ease,transform .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::after{opacity:1;transform:translate(-50%, -50%) scale(1.1);border-color:var(--player-primary-hover);box-shadow:0 0 20px var(--player-primary-color)}.video-poster-overlay::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%, -50%);width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-color);z-index:2;opacity:0;transition:opacity .3s ease,border-color .3s ease;pointer-events:none}.video-poster-overlay.visible:hover::before{opacity:1;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--player-primary-hover)}@media(max-width: 768px){.video-poster-overlay::after{width:60px;height:60px}.video-poster-overlay::before{border-width:12px 0 12px 20px}}@media(max-width: 480px){.video-poster-overlay::after{width:50px;height:50px}.video-poster-overlay::before{border-width:10px 0 10px 16px}}.video-poster-overlay.hidden{transition:opacity .5s ease,visibility 0s ease .5s}.player-theme-blue .video-poster-overlay::after{border-color:#2196f3}.player-theme-blue .video-poster-overlay.visible:hover::after{border-color:#1976d2;box-shadow:0 0 20px #2196f3}.player-theme-blue .video-poster-overlay::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #2196f3}.player-theme-blue .video-poster-overlay.visible:hover::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #1976d2}.player-theme-green .video-poster-overlay::after{border-color:#4caf50}.player-theme-green .video-poster-overlay.visible:hover::after{border-color:#45a049;box-shadow:0 0 20px #4caf50}.player-theme-green .video-poster-overlay::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #4caf50}.player-theme-green .video-poster-overlay.visible:hover::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #45a049}.player-theme-red .video-poster-overlay::after{border-color:#f44336}.player-theme-red .video-poster-overlay.visible:hover::after{border-color:#d32f2f;box-shadow:0 0 20px #f44336}.player-theme-red .video-poster-overlay::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #f44336}.player-theme-red .video-poster-overlay.visible:hover::before{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #d32f2f}.player-theme-dark .video-poster-overlay::after{background:rgba(0,0,0,.85)}@media(max-height: 400px){.video-player{min-height:200px}.controls{min-height:50px !important;padding:10px 10px 8px !important}.progress-container{margin-bottom:8px}.controls-main{min-height:32px !important}}@media(max-height: 330px){.video-player{min-height:150px}.controls{min-height:45px !important;padding:8px 8px 6px !important}.progress-container{margin-bottom:6px;height:4px}.controls-main{min-height:28px !important}.control-btn{padding:4px !important}.icon{font-size:14px !important}.time-display{font-size:11px !important}}@media(max-height: 250px){.video-player{min-height:120px}.controls{min-height:40px !important;padding:6px 8px 5px !important}.progress-container{margin-bottom:4px;height:3px}.controls-main{min-height:24px !important}.control-btn{padding:2px !important}.icon{font-size:12px !important}.time-display{font-size:10px !important}.quality-btn{min-height:20px !important;padding:2px 4px !important}.selected-quality{font-size:9px !important}.current-quality{display:none}.volume-slider{width:40px !important}}.video-container,.video-wrapper{overflow:visible !important}.controls.show{position:absolute !important;bottom:0 !important;overflow:visible !important}

package/dist/myetv-player.js

@@ -1108,6 +1108,11 @@ markPlayerReady() {
             this.video.style.pointerEvents = '';
         }
 
+        // UPDATE SETTINGS MENU VISIBILITY IF APPLICABLE
+        if (typeof this.updateSettingsMenuVisibility === 'function') {
+            this.updateSettingsMenuVisibility();
+        }
+
         // INITIALIZE AUTO-HIDE AFTER EVERYTHING IS READY
         setTimeout(() => {
             if (this.options.autoHide && !this.autoHideInitialized) {
@@ -3486,30 +3491,12 @@ createControls() {
     <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M12.5 4v8l-7-4zm-8 0v8l7-4z"/></svg></span>
 </button>
 
-                    ${this.options.showSubtitles ? `
-                    <div class="subtitles-control" style="display: none;">
-                        <button class="control-btn subtitles-btn" data-tooltip="subtitles">
-    <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"/><path d="M6.096 4.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152M6.096 9.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152"/></svg></span>
+                    <div class="settings-control">
+                        <button class="control-btn settings-btn" data-tooltip="settings_menu">
+                            <span class="icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg></span>
                         </button>
-                        <div class="subtitles-menu">
-                            <div class="subtitles-option active" data-track="off">Off</div>
-                        </div>
-                    </div>
-                    ` : ''}
-
-                    ${this.options.showSpeedControl ? `
-                    <div class="speed-control">
-                        <button class="control-btn speed-btn" data-tooltip="playback_speed">1x</button>
-                        <div class="speed-menu">
-                            <div class="speed-option" data-speed="0.5">0.5x</div>
-                            <div class="speed-option" data-speed="0.75">0.75x</div>
-                            <div class="speed-option active" data-speed="1">1x</div>
-                            <div class="speed-option" data-speed="1.25">1.25x</div>
-                            <div class="speed-option" data-speed="1.5">1.5x</div>
-                            <div class="speed-option" data-speed="2">2x</div>
-                        </div>
+                        <div class="settings-menu"></div>
                     </div>
-                    ` : ''}
 
                     ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
                     <div class="quality-control">
@@ -3522,8 +3509,8 @@ createControls() {
                         <div class="quality-menu">
                             <div class="quality-option selected" data-quality="auto">${this.t('auto')}</div>
                             ${this.originalSources.map(s =>
-        `<div class="quality-option" data-quality="${s.quality}">${s.quality}</div>`
-    ).join('')}
+                                `<div class="quality-option" data-quality="${s.quality}">${s.quality}</div>`
+                            ).join('')}
                         </div>
                     </div>
                     ` : ''}
@@ -3535,13 +3522,6 @@ createControls() {
                     </button>
                     ` : ''}
 
-                    <div class="settings-control">
-                        <button class="control-btn settings-btn" data-tooltip="settings_menu">
-                            <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/></svg></span>
-                        </button>
-                        <div class="settings-menu"></div>
-                    </div>
-
                     ${this.options.showFullscreen ? `
                     <button class="control-btn fullscreen-btn" data-tooltip="fullscreen">
                         <span class="icon fullscreen-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
@@ -3638,44 +3618,22 @@ checkScreenSize() {
     }
 }
 
-/* Update settings menu visibility based on screen size */
+/* Update settings menu visibility */
 updateSettingsMenuVisibility() {
     const settingsControl = this.controls?.querySelector('.settings-control');
     if (!settingsControl) return;
 
-    if (this.isSmallScreen) {
-        // Show settings menu and hide individual controls
-        settingsControl.style.display = 'block';
+    // always show settings
+    settingsControl.style.display = 'block';
 
-        // Hide controls that will be moved to settings menu
-        const pipBtn = this.controls.querySelector('.pip-btn');
-        const speedControl = this.controls.querySelector('.speed-control');
-        const subtitlesControl = this.controls.querySelector('.subtitles-control');
+    // Populate settings menu
+    this.populateSettingsMenu();
 
-        if (pipBtn) pipBtn.style.display = 'none';
-        if (speedControl) speedControl.style.display = 'none';
-        if (subtitlesControl) subtitlesControl.style.display = 'none';
-
-        this.populateSettingsMenu();
-    } else {
-        // Hide settings menu and show individual controls
-        settingsControl.style.display = 'none';
-
-        // Show original controls
-        const pipBtn = this.controls.querySelector('.pip-btn');
-        const speedControl = this.controls.querySelector('.speed-control');
-        const subtitlesControl = this.controls.querySelector('.subtitles-control');
-
-        if (pipBtn && this.options.showPictureInPicture && this.isPiPSupported) {
-            pipBtn.style.display = 'flex';
-        }
-        if (speedControl && this.options.showSpeedControl) {
-            speedControl.style.display = 'block';
-        }
-        if (subtitlesControl && this.options.showSubtitles && this.textTracks.length > 0) {
-            subtitlesControl.style.display = 'block';
-        }
-    }
+    // hide speed and subtitles controls
+    const speedControl = this.controls.querySelector('.speed-control');
+    const subtitlesControl = this.controls.querySelector('.subtitles-control');
+    if (speedControl) speedControl.style.display = 'none';
+    if (subtitlesControl) subtitlesControl.style.display = 'none';
 }
 
 /**
@@ -3687,54 +3645,40 @@ populateSettingsMenu() {
 
     let menuHTML = '';
 
-    // Picture-in-Picture option
-    if (this.options.showPictureInPicture && this.isPiPSupported) {
-        const pipLabel = this.t('picture_in_picture') || 'Picture-in-Picture';
-        menuHTML += `<div class="settings-option" data-action="pip">
-            <span class="settings-option-label">${pipLabel}</span>
-        </div>`;
-    }
-
-    // Speed Control - expandable
+    // SPEED - always included
     if (this.options.showSpeedControl) {
         const speedLabel = this.t('playback_speed') || 'Playback Speed';
         const currentSpeed = this.video ? this.video.playbackRate : 1;
-
-        menuHTML += `
-            <div class="settings-expandable-wrapper">
-                <div class="settings-option expandable-trigger" data-action="speed-expand">
-                    <span class="settings-option-label">${speedLabel}: ${currentSpeed}x</span>
-                    <span class="expand-arrow">▼</span>
-                </div>
-                <div class="settings-expandable-content" style="display: none;">`;
+        menuHTML += `<div class="settings-expandable-wrapper">
+            <div class="settings-option expandable-trigger" data-action="speed-expand">
+                <span class="settings-option-label">${speedLabel} <strong>${currentSpeed}x</strong></span>
+                <span class="expand-arrow">▶</span>
+            </div>
+            <div class="settings-expandable-content" style="display: none;">`;
 
         const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         speeds.forEach(speed => {
             const isActive = Math.abs(speed - currentSpeed) < 0.01;
             menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
         });
-
         menuHTML += `</div></div>`;
     }
 
-    // Subtitles - expandable
+    // SUBTITLES - always included
     if (this.options.showSubtitles && this.textTracks && this.textTracks.length > 0) {
         const subtitlesLabel = this.t('subtitles') || 'Subtitles';
         const currentTrack = this.currentSubtitleTrack;
-        const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+        const currentLabel = this.subtitlesEnabled ? (currentTrack ? currentTrack.label : 'Unknown') : (this.t('subtitlesoff') || 'Off');
 
-        menuHTML += `
-            <div class="settings-expandable-wrapper">
-                <div class="settings-option expandable-trigger" data-action="subtitles-expand">
-                    <span class="settings-option-label">${subtitlesLabel}: ${currentLabel}</span>
-                    <span class="expand-arrow">▼</span>
-                </div>
-                <div class="settings-expandable-content" style="display: none;">`;
+        menuHTML += `<div class="settings-expandable-wrapper">
+            <div class="settings-option expandable-trigger" data-action="subtitles-expand">
+                <span class="settings-option-label">${subtitlesLabel} <strong>${currentLabel}</strong></span>
+                <span class="expand-arrow">▶</span>
+            </div>
+            <div class="settings-expandable-content" style="display: none;">`;
 
-        // Off option
         menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
 
-        // Subtitle tracks
         this.textTracks.forEach((trackData, index) => {
             const isActive = this.currentSubtitleTrack === trackData.track;
             menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">${trackData.label}</div>`;
@@ -3744,9 +3688,6 @@ populateSettingsMenu() {
     }
 
     settingsMenu.innerHTML = menuHTML;
-
-    // Add scrollbar if needed
-    this.addSettingsMenuScrollbar();
 }
 
 /**
@@ -3756,12 +3697,27 @@ addSettingsMenuScrollbar() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
 
-    const playerHeight = this.container.offsetHeight;
-    const maxMenuHeight = playerHeight - 100;
+    const settingsBtn = document.querySelector('.settings-btn');
+    if (!settingsBtn) return;
+
+    // helper to update menu height
+    const updateMenuHeight = () => {
+        if (settingsMenu.classList.contains('active')) {
+            const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+            const btnRect = settingsBtn.getBoundingClientRect();
+            const spaceBelow = containerRect.bottom - btnRect.bottom;
+            const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+            settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+            settingsMenu.style.overflowY = 'auto';
+            settingsMenu.style.overflowX = 'hidden';
+        }
+    };
 
-    settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
-    settingsMenu.style.overflowY = 'auto';
-    settingsMenu.style.overflowX = 'hidden';
+    // run initially
+    updateMenuHeight();
+
+    // recalculate on window resize
+    window.addEventListener('resize', updateMenuHeight);
 
     // Add scrollbar styling
     if (!document.getElementById('player-settings-scrollbar-style')) {
@@ -3794,9 +3750,43 @@ addSettingsMenuScrollbar() {
  * Bind settings menu events
  */
 bindSettingsMenuEvents() {
+    const settingsBtn = this.controls?.querySelector('.settings-btn');
     const settingsMenu = this.controls?.querySelector('.settings-menu');
-    if (!settingsMenu) return;
+    if (!settingsMenu || !settingsBtn) return;
+
+    // toggle menu on button click
+    settingsBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        settingsMenu.classList.toggle('active');
+
+        // when menu is opened, set max height and overflow
+        if (settingsMenu.classList.contains('active')) {
+            const settingsBtn = document.querySelector('.settings-btn');
+            const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+            const btnRect = settingsBtn.getBoundingClientRect();
+            const spaceBelow = containerRect.bottom - btnRect.bottom;
+            const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+
+            settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+            settingsMenu.style.overflowY = 'auto';
+            settingsMenu.style.overflowX = 'hidden';
+        } else {
+            settingsMenu.style.maxHeight = 'none';
+            settingsMenu.style.overflowY = 'visible';
+        }
+
+    });
+
+    // close menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!settingsBtn?.contains(e.target) && !settingsMenu?.contains(e.target)) {
+            settingsMenu?.classList.remove('active');
+            settingsMenu.style.maxHeight = 'none';
+            settingsMenu.style.overflowY = 'visible';
+        }
+    });
 
+    // manage clicks inside the menu
     settingsMenu.addEventListener('click', (e) => {
         e.stopPropagation();
 

package/dist/myetv-player.min.js

@@ -1039,6 +1039,10 @@ markPlayerReady() {
  this.video.style.pointerEvents = '';
  }
 
+ if (typeof this.updateSettingsMenuVisibility === 'function') {
+ this.updateSettingsMenuVisibility();
+ }
+
  setTimeout(() => {
  if (this.options.autoHide && !this.autoHideInitialized) {
  this.initAutoHide();
@@ -3208,30 +3212,12 @@ createControls() {
  <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M12.5 4v8l-7-4zm-8 0v8l7-4z"/></svg></span>
 </button>
 
- ${this.options.showSubtitles ? `
- <div class="subtitles-control" style="display: none;">
- <button class="control-btn subtitles-btn" data-tooltip="subtitles">
- <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"/><path d="M6.096 4.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152M6.096 9.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152"/></svg></span>
+ <div class="settings-control">
+ <button class="control-btn settings-btn" data-tooltip="settings_menu">
+ <span class="icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg></span>
  </button>
- <div class="subtitles-menu">
- <div class="subtitles-option active" data-track="off">Off</div>
- </div>
- </div>
- ` : ''}
-
- ${this.options.showSpeedControl ? `
- <div class="speed-control">
- <button class="control-btn speed-btn" data-tooltip="playback_speed">1x</button>
- <div class="speed-menu">
- <div class="speed-option" data-speed="0.5">0.5x</div>
- <div class="speed-option" data-speed="0.75">0.75x</div>
- <div class="speed-option active" data-speed="1">1x</div>
- <div class="speed-option" data-speed="1.25">1.25x</div>
- <div class="speed-option" data-speed="1.5">1.5x</div>
- <div class="speed-option" data-speed="2">2x</div>
- </div>
+ <div class="settings-menu"></div>
  </div>
- ` : ''}
 
  ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
  <div class="quality-control">
@@ -3257,13 +3243,6 @@ createControls() {
  </button>
  ` : ''}
 
- <div class="settings-control">
- <button class="control-btn settings-btn" data-tooltip="settings_menu">
- <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/></svg></span>
- </button>
- <div class="settings-menu"></div>
- </div>
-
  ${this.options.showFullscreen ? `
  <button class="control-btn fullscreen-btn" data-tooltip="fullscreen">
  <span class="icon fullscreen-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
@@ -3353,37 +3332,14 @@ updateSettingsMenuVisibility() {
  const settingsControl = this.controls?.querySelector('.settings-control');
  if (!settingsControl) return;
 
- if (this.isSmallScreen) {
-
  settingsControl.style.display = 'block';
 
- const pipBtn = this.controls.querySelector('.pip-btn');
- const speedControl = this.controls.querySelector('.speed-control');
- const subtitlesControl = this.controls.querySelector('.subtitles-control');
-
- if (pipBtn) pipBtn.style.display = 'none';
- if (speedControl) speedControl.style.display = 'none';
- if (subtitlesControl) subtitlesControl.style.display = 'none';
-
  this.populateSettingsMenu();
- } else {
 
- settingsControl.style.display = 'none';
-
- const pipBtn = this.controls.querySelector('.pip-btn');
  const speedControl = this.controls.querySelector('.speed-control');
  const subtitlesControl = this.controls.querySelector('.subtitles-control');
-
- if (pipBtn && this.options.showPictureInPicture && this.isPiPSupported) {
- pipBtn.style.display = 'flex';
- }
- if (speedControl && this.options.showSpeedControl) {
- speedControl.style.display = 'block';
- }
- if (subtitlesControl && this.options.showSubtitles && this.textTracks.length > 0) {
- subtitlesControl.style.display = 'block';
- }
- }
+ if (speedControl) speedControl.style.display = 'none';
+ if (subtitlesControl) subtitlesControl.style.display = 'none';
 }
 
 populateSettingsMenu() {
@@ -3392,22 +3348,13 @@ populateSettingsMenu() {
 
  let menuHTML = '';
 
- if (this.options.showPictureInPicture && this.isPiPSupported) {
- const pipLabel = this.t('picture_in_picture') || 'Picture-in-Picture';
- menuHTML += `<div class="settings-option" data-action="pip">
- <span class="settings-option-label">${pipLabel}</span>
- </div>`;
- }
-
  if (this.options.showSpeedControl) {
  const speedLabel = this.t('playback_speed') || 'Playback Speed';
  const currentSpeed = this.video ? this.video.playbackRate : 1;
-
- menuHTML += `
- <div class="settings-expandable-wrapper">
+ menuHTML += `<div class="settings-expandable-wrapper">
  <div class="settings-option expandable-trigger" data-action="speed-expand">
- <span class="settings-option-label">${speedLabel}: ${currentSpeed}x</span>
- <span class="expand-arrow">▼</span>
+ <span class="settings-option-label">${speedLabel} <strong>${currentSpeed}x</strong></span>
+ <span class="expand-arrow">▶</span>
  </div>
  <div class="settings-expandable-content" style="display: none;">`;
 
@@ -3416,20 +3363,18 @@ populateSettingsMenu() {
  const isActive = Math.abs(speed - currentSpeed) < 0.01;
  menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
  });
-
  menuHTML += `</div></div>`;
  }
 
  if (this.options.showSubtitles && this.textTracks && this.textTracks.length > 0) {
  const subtitlesLabel = this.t('subtitles') || 'Subtitles';
  const currentTrack = this.currentSubtitleTrack;
- const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+ const currentLabel = this.subtitlesEnabled ? (currentTrack ? currentTrack.label : 'Unknown') : (this.t('subtitlesoff') || 'Off');
 
- menuHTML += `
- <div class="settings-expandable-wrapper">
+ menuHTML += `<div class="settings-expandable-wrapper">
  <div class="settings-option expandable-trigger" data-action="subtitles-expand">
- <span class="settings-option-label">${subtitlesLabel}: ${currentLabel}</span>
- <span class="expand-arrow">▼</span>
+ <span class="settings-option-label">${subtitlesLabel} <strong>${currentLabel}</strong></span>
+ <span class="expand-arrow">▶</span>
  </div>
  <div class="settings-expandable-content" style="display: none;">`;
 
@@ -3444,20 +3389,30 @@ populateSettingsMenu() {
  }
 
  settingsMenu.innerHTML = menuHTML;
-
- this.addSettingsMenuScrollbar();
 }
 
 addSettingsMenuScrollbar() {
  const settingsMenu = this.controls?.querySelector('.settings-menu');
  if (!settingsMenu) return;
 
- const playerHeight = this.container.offsetHeight;
- const maxMenuHeight = playerHeight - 100;
+ const settingsBtn = document.querySelector('.settings-btn');
+ if (!settingsBtn) return;
 
+ const updateMenuHeight = () => {
+ if (settingsMenu.classList.contains('active')) {
+ const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+ const btnRect = settingsBtn.getBoundingClientRect();
+ const spaceBelow = containerRect.bottom - btnRect.bottom;
+ const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
  settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
  settingsMenu.style.overflowY = 'auto';
  settingsMenu.style.overflowX = 'hidden';
+ }
+ };
+
+ updateMenuHeight();
+
+ window.addEventListener('resize', updateMenuHeight);
 
  if (!document.getElementById('player-settings-scrollbar-style')) {
  const scrollbarStyle = document.createElement('style');
@@ -3486,8 +3441,38 @@ addSettingsMenuScrollbar() {
 }
 
 bindSettingsMenuEvents() {
+ const settingsBtn = this.controls?.querySelector('.settings-btn');
  const settingsMenu = this.controls?.querySelector('.settings-menu');
- if (!settingsMenu) return;
+ if (!settingsMenu || !settingsBtn) return;
+
+ settingsBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ settingsMenu.classList.toggle('active');
+
+ if (settingsMenu.classList.contains('active')) {
+ const settingsBtn = document.querySelector('.settings-btn');
+ const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+ const btnRect = settingsBtn.getBoundingClientRect();
+ const spaceBelow = containerRect.bottom - btnRect.bottom;
+ const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+
+ settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+ settingsMenu.style.overflowY = 'auto';
+ settingsMenu.style.overflowX = 'hidden';
+ } else {
+ settingsMenu.style.maxHeight = 'none';
+ settingsMenu.style.overflowY = 'visible';
+ }
+
+ });
+
+ document.addEventListener('click', (e) => {
+ if (!settingsBtn?.contains(e.target) && !settingsMenu?.contains(e.target)) {
+ settingsMenu?.classList.remove('active');
+ settingsMenu.style.maxHeight = 'none';
+ settingsMenu.style.overflowY = 'visible';
+ }
+ });
 
  settingsMenu.addEventListener('click', (e) => {
  e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
   "files": [
@@ -58,3 +58,4 @@
   "homepage": "https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html"
 }
 
+