.

.claude/settings.local.json

@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(find:*)",
-      "Bash(cat:*)"
+      "Bash(cat:*)",
+      "Bash(npm run build:*)"
     ],
     "deny": [],
     "ask": []

src/components/ControlsLayer.css

@@ -1,80 +1,56 @@
 /* ============================================
-   CONTROLS LAYER - Overlay Container
+   CONTROLS LAYER
+   Modern, Clean & Minimal Design
    ============================================ */
 
 .controls-layer {
-  /* Positioning */
   position: absolute;
   inset: 0;
-
-  /* Stacking */
   z-index: var(--player-z-controls);
-
-  /* Layout - Push controls to bottom */
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-
-  /* Interaction */
   cursor: default;
   pointer-events: auto;
-
-  /* Animation */
   opacity: 1;
   transition: opacity var(--player-transition-normal) ease;
 }
 
-/* ============================================
+/* Visible state */
-   VISIBILITY STATES
-   ============================================ */
-
-/* Visible state (explicit for clarity) */
 .controls-layer.visible {
   opacity: 1;
 }
 
-/* Hidden while playing */
+/* Hidden state */
 .controls-layer.hidden.playing {
   opacity: 0;
 }
 
-/* Hide cursor in fullscreen when controls are hidden */
+/* Hide cursor in fullscreen */
 .controls-layer.fullscreen.hidden.playing {
   cursor: none;
 }
 
 /* ============================================
-   CONTROLS BAR - Bottom Control Panel
+   CONTROLS BAR
    ============================================ */
 
 .controls-bar {
-  /* Layout */
   display: flex;
   flex-direction: column;
-
+  padding: var(--player-spacing-xl) var(--player-spacing-lg) var(--player-spacing-lg);
-  /* Spacing - CRITICAL: Leave room for subtitles */
-  padding-top: var(--player-spacing-xl);
-  padding-bottom: var(--player-spacing-lg);
-  padding-left: var(--player-spacing-lg);
-  padding-right: var(--player-spacing-lg);
-
-  /* Background gradient */
   background: linear-gradient(
     to top,
     var(--player-bg-controls) 0%,
-    var(--player-bg-controls) 60%,
+    var(--player-bg-controls) 50%,
     transparent 100%
   );
-
-  /* Animation */
   transform: translateY(0);
   transition: transform var(--player-transition-normal) ease;
-
-  /* Interaction */
   pointer-events: auto;
 }
 
-/* Slide controls down when hidden (allows clicks to pass through) */
+/* Slide controls down when hidden */
 .controls-layer.hidden.playing .controls-bar {
   transform: translateY(100%);
   pointer-events: none;
@@ -89,7 +65,7 @@
 }
 
 /* ============================================
-   CONTROLS ROW - Button Container
+   CONTROLS ROW
    ============================================ */
 
 .controls-row {
@@ -99,14 +75,12 @@
   gap: var(--player-spacing-sm);
 }
 
-/* Left side controls group */
 .controls-left {
   display: flex;
   align-items: center;
   gap: var(--player-spacing-sm);
 }
 
-/* Right side controls group */
 .controls-right {
   display: flex;
   align-items: center;
@@ -115,15 +89,12 @@
 }
 
 /* ============================================
-   MOBILE RESPONSIVE
+   RESPONSIVE
    ============================================ */
 
 @media (max-width: 640px) {
   .controls-bar {
-    padding-top: var(--player-spacing-lg);
+    padding: var(--player-spacing-lg) var(--player-spacing-md) var(--player-spacing-md);
-    padding-bottom: var(--player-spacing-md);
-    padding-left: var(--player-spacing-md);
-    padding-right: var(--player-spacing-md);
   }
 
   .controls-row {

src/components/VideoElement.css

@@ -1,5 +1,6 @@
 /* ============================================
-   VIDEO CONTAINER
+   VIDEO ELEMENT
+   Modern & Clean Design
    ============================================ */
 
 .video-container {
@@ -11,10 +12,6 @@
   pointer-events: none;
 }
 
-/* ============================================
-   VIDEO ELEMENT
-   ============================================ */
-
 .video-element {
   width: 100%;
   height: 100%;
@@ -24,143 +21,85 @@
 }
 
 /* ============================================
-   HIDE NATIVE MEDIA CONTROLS
+   HIDE NATIVE CONTROLS
    ============================================ */
 
-/* Chrome/Safari/Edge */
+.video-element::-webkit-media-controls,
-.video-element::-webkit-media-controls {
+.video-element::-webkit-media-controls-enclosure,
-  display: none !important;
-}
-
-.video-element::-webkit-media-controls-enclosure {
-  display: none !important;
-}
-
 .video-element::-webkit-media-controls-panel {
   display: none !important;
 }
 
-/* Firefox */
 .video-element::-moz-media-controls {
   display: none !important;
 }
 
 /* ============================================
-   SUBTITLE STYLING - Modern & Cross-Browser
+   SUBTITLE STYLING - Clean & Modern
-   Optimized for Chromium and Firefox
+   Cross-browser compatible
    ============================================ */
 
-/* ==================== BASE CUE STYLES ==================== */
+/* Base subtitle appearance */
-
-/* All browsers - Base subtitle appearance */
 ::cue {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.5rem !important;
+  font-size: 1.4rem !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
-  line-height: 1.5 !important;
+  line-height: 1.4 !important;
   color: #ffffff !important;
-  background-color: rgba(0, 0, 0, 0.9) !important;
+  background-color: rgba(0, 0, 0, 0.85) !important;
-  padding: 0.4em 0.8em !important;
+  padding: 0.3em 0.65em !important;
-  border-radius: 6px !important;
+  border-radius: 4px !important;
-  text-shadow:
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
-    0 1px 2px rgba(0, 0, 0, 1),
-    0 2px 8px rgba(0, 0, 0, 0.8) !important;
   white-space: pre-line !important;
 }
 
-/* Chromium specific */
 .video-element::cue {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.5rem !important;
+  font-size: 1.4rem !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
-  line-height: 1.5 !important;
+  line-height: 1.4 !important;
   color: #ffffff !important;
-  background-color: rgba(0, 0, 0, 0.9) !important;
+  background-color: rgba(0, 0, 0, 0.85) !important;
-  padding: 0.4em 0.8em !important;
+  padding: 0.3em 0.65em !important;
-  border-radius: 6px !important;
+  border-radius: 4px !important;
-  text-shadow:
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
-    0 1px 2px rgba(0, 0, 0, 1),
-    0 2px 8px rgba(0, 0, 0, 0.8) !important;
-  white-space: pre-line !important;
-}
-
-/* Firefox specific - Base styles */
-::-moz-cue {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
-  line-height: 1.5 !important;
-  color: #ffffff !important;
-  background-color: rgba(0, 0, 0, 0.9) !important;
-  padding: 0.4em 0.8em !important;
-  border-radius: 6px !important;
-  text-shadow:
-    0 1px 2px rgba(0, 0, 0, 1),
-    0 2px 8px rgba(0, 0, 0, 0.8) !important;
-  white-space: pre-line !important;
-}
-
-video::-moz-cue {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
-  line-height: 1.5 !important;
-  color: #ffffff !important;
-  background-color: rgba(0, 0, 0, 0.9) !important;
-  padding: 0.4em 0.8em !important;
-  border-radius: 6px !important;
-  text-shadow:
-    0 1px 2px rgba(0, 0, 0, 1),
-    0 2px 8px rgba(0, 0, 0, 0.8) !important;
   white-space: pre-line !important;
 }
 
+/* Firefox specific */
+::-moz-cue,
+video::-moz-cue,
 .video-element::-moz-cue {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.5rem !important;
+  font-size: 1.4rem !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
-  line-height: 1.5 !important;
+  line-height: 1.4 !important;
   color: #ffffff !important;
-  background-color: rgba(0, 0, 0, 0.9) !important;
+  background-color: rgba(0, 0, 0, 0.85) !important;
-  padding: 0.4em 0.8em !important;
+  padding: 0.3em 0.65em !important;
-  border-radius: 6px !important;
+  border-radius: 4px !important;
-  text-shadow:
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
-    0 1px 2px rgba(0, 0, 0, 1),
-    0 2px 8px rgba(0, 0, 0, 0.8) !important;
   white-space: pre-line !important;
 }
 
-/* ==================== TEXT FORMATTING ==================== */
+/* Text formatting */
-
+::cue(b), ::cue(strong),
-::cue(b), ::cue(strong) {
+.video-element::cue(b), .video-element::cue(strong) {
-  font-weight: 900 !important;
+  font-weight: 700 !important;
 }
 
-::cue(i), ::cue(em) {
+::cue(i), ::cue(em),
-  font-style: italic !important;
+.video-element::cue(i), .video-element::cue(em) {
-}
-
-::cue(u) {
-  text-decoration: underline !important;
-}
-
-.video-element::cue(b),
-.video-element::cue(strong) {
-  font-weight: 900 !important;
-}
-
-.video-element::cue(i),
-.video-element::cue(em) {
   font-style: italic !important;
 }
 
+::cue(u),
 .video-element::cue(u) {
   text-decoration: underline !important;
 }
 
-/* Firefox text formatting */
 ::-moz-cue(b), ::-moz-cue(strong) {
-  font-weight: 900 !important;
+  font-weight: 700 !important;
 }
 
 ::-moz-cue(i), ::-moz-cue(em) {
@@ -171,114 +110,83 @@ video::-moz-cue {
   text-decoration: underline !important;
 }
 
-/* ==================== CHROMIUM POSITIONING ==================== */
+/* ============================================
+   SUBTITLE POSITIONING - Chromium
+   ============================================ */
 
-/* Container - Chromium */
 .video-element::-webkit-media-text-track-container {
   position: absolute !important;
-  bottom: var(--player-subtitle-bottom-offset) !important;
+  bottom: var(--player-subtitle-bottom) !important;
-  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
   height: auto !important;
-
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-
+  padding: 0 16px !important;
-  padding: 0 !important;
   margin: 0 !important;
-
   overflow: visible !important;
   z-index: 10 !important;
   pointer-events: none !important;
+  transition: bottom 0.2s ease !important;
+}
+
+/* When controls are hidden, move subtitles down */
+.video-player.controls-hidden .video-element::-webkit-media-text-track-container {
+  bottom: var(--player-subtitle-bottom-hidden) !important;
 }
 
-/* Display wrapper - Chromium */
 .video-element::-webkit-media-text-track-display {
   width: 100% !important;
   max-width: 100% !important;
-
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-
   margin: 0 !important;
-  padding: 0 20px !important;
+  padding: 0 !important;
-
   text-align: center !important;
 }
 
-/* ==================== FIREFOX POSITIONING ==================== */
+/* ============================================
-
+   SUBTITLE POSITIONING - Firefox
-/* Firefox - Position subtitles using video wrapper approach */
+   ============================================ */
-@-moz-document url-prefix() {
-  .video-container {
-    position: relative;
-  }
-
-  .video-element {
-    position: relative;
-  }
-
-  /* Firefox subtitle container positioning */
-  .video-element::cue {
-    position: relative;
-  }
-}
-
-/* Firefox - Use text track display positioning */
-video::-moz-text-track-display {
-  position: absolute !important;
-  bottom: var(--player-subtitle-bottom-offset) !important;
-  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
-  left: 0 !important;
-  right: 0 !important;
-  width: 100% !important;
-
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  justify-content: center !important;
-
-  padding: 0 20px !important;
-  margin: 0 !important;
-
-  text-align: center !important;
-  z-index: 10 !important;
-  pointer-events: none !important;
-}
 
+video::-moz-text-track-display,
 .video-element::-moz-text-track-display {
   position: absolute !important;
-  bottom: var(--player-subtitle-bottom-offset) !important;
+  bottom: var(--player-subtitle-bottom) !important;
-  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
-
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-
+  padding: 0 16px !important;
-  padding: 0 20px !important;
   margin: 0 !important;
-
   text-align: center !important;
   z-index: 10 !important;
   pointer-events: none !important;
+  transition: bottom 0.2s ease !important;
 }
 
-/* ==================== FULLSCREEN ==================== */
+/* When controls are hidden, move subtitles down */
+.video-player.controls-hidden video::-moz-text-track-display,
+.video-player.controls-hidden .video-element::-moz-text-track-display {
+  bottom: var(--player-subtitle-bottom-hidden) !important;
+}
+
+/* ============================================
+   FULLSCREEN
+   ============================================ */
 
 .video-element:fullscreen::cue,
 :fullscreen .video-element::cue {
-  font-size: 2rem !important;
+  font-size: 1.8rem !important;
-  padding: 0.5em 1em !important;
+  padding: 0.4em 0.8em !important;
 }
 
 ::-moz-cue:fullscreen,
@@ -287,37 +195,37 @@ video:fullscreen::-moz-cue,
 :fullscreen ::-moz-cue,
 :fullscreen video::-moz-cue,
 :fullscreen .video-element::-moz-cue {
-  font-size: 2rem !important;
+  font-size: 1.8rem !important;
-  padding: 0.5em 1em !important;
+  padding: 0.4em 0.8em !important;
 }
 
 .video-element:fullscreen::-webkit-media-text-track-container,
 :fullscreen .video-element::-webkit-media-text-track-container {
-  bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
+  bottom: calc(var(--player-subtitle-bottom) + 20px) !important;
-  bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
 }
 
 video:fullscreen::-moz-text-track-display,
 .video-element:fullscreen::-moz-text-track-display,
 :fullscreen video::-moz-text-track-display,
 :fullscreen .video-element::-moz-text-track-display {
-  bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
+  bottom: calc(var(--player-subtitle-bottom) + 20px) !important;
-  bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
 }
 
-/* ==================== RESPONSIVE ==================== */
+/* ============================================
+   RESPONSIVE
+   ============================================ */
 
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   ::cue,
   .video-element::cue,
   ::-moz-cue,
   video::-moz-cue,
   .video-element::-moz-cue {
-    font-size: 1.35rem !important;
+    font-size: 1.25rem !important;
   }
 
   .video-player {
-    --player-subtitle-bottom-offset: clamp(80px, 14vh, 120px);
+    --player-subtitle-bottom: 85px;
   }
 }
 
@@ -327,22 +235,18 @@ video:fullscreen::-moz-text-track-display,
   ::-moz-cue,
   video::-moz-cue,
   .video-element::-moz-cue {
-    font-size: 1.15rem !important;
+    font-size: 1.1rem !important;
-    padding: 0.35em 0.7em !important;
+    padding: 0.25em 0.55em !important;
   }
 
   .video-player {
-    --player-subtitle-bottom-offset: 80px;
+    --player-subtitle-bottom: 75px;
   }
 
   .video-element::-webkit-media-text-track-container {
     padding: 0 12px !important;
   }
 
-  .video-element::-webkit-media-text-track-display {
-    max-width: 92% !important;
-  }
-
   video::-moz-text-track-display,
   .video-element::-moz-text-track-display {
     padding: 0 12px !important;
@@ -359,6 +263,6 @@ video:fullscreen::-moz-text-track-display,
   }
 
   .video-player {
-    --player-subtitle-bottom-offset: 60px;
+    --player-subtitle-bottom: 65px;
   }
 }

src/components/VideoPlayer.css

@@ -1,43 +1,56 @@
 /* ============================================
    VIDEO PLAYER - Main Container
+   Modern, Clean & Minimal Design
    ============================================ */
 
 .video-player {
+  /* Positioning */
   position: relative;
   width: 100%;
   max-width: 100%;
+
+  /* Appearance */
   background-color: var(--player-bg);
+  border-radius: var(--player-radius);
   overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+  /* Typography */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* Interaction */
   user-select: none;
   -webkit-user-select: none;
+
+  /* Isolation for library usage */
+  contain: layout style paint;
 }
 
-/* Apply box-sizing to all child elements */
+/* Box model consistency */
-.video-player * {
+.video-player *,
+.video-player *::before,
+.video-player *::after {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
-/* Reset video element box-sizing to preserve native subtitle rendering */
+/* Preserve video native rendering */
 .video-player video {
   box-sizing: content-box;
 }
 
 /* ============================================
-   ASPECT RATIO - 16:9 Intrinsic Ratio
+   ASPECT RATIO - 16:9
    ============================================ */
 
-/* Use padding-top hack for aspect ratio */
 .video-player::before {
   content: '';
   display: block;
-  padding-top: 56.25%; /* 16:9 aspect ratio */
+  padding-top: 56.25%;
 }
 
-/* Position all direct children absolutely within aspect ratio container */
 .video-player > * {
   position: absolute;
   top: 0;
@@ -47,31 +60,20 @@
 }
 
 /* ============================================
-   FULLSCREEN SUPPORT
+   FULLSCREEN - Remove border radius
    ============================================ */
 
-.video-player:fullscreen {
+.video-player:fullscreen,
-  width: 100vw;
+.video-player:-webkit-full-screen,
-  height: 100vh;
+.video-player:-moz-full-screen,
-}
-
-.video-player:-webkit-full-screen {
-  width: 100vw;
-  height: 100vh;
-}
-
-.video-player:-moz-full-screen {
-  width: 100vw;
-  height: 100vh;
-}
-
 .video-player:-ms-fullscreen {
   width: 100vw;
   height: 100vh;
+  border-radius: 0;
 }
 
 /* ============================================
-   NATIVE CONTROLS - Hide completely
+   HIDE NATIVE CONTROLS
    ============================================ */
 
 .video-player video::-webkit-media-controls {
@@ -86,7 +88,7 @@
   display: none !important;
 }
 
-/* Ensure subtitle text tracks are visible */
+/* Keep subtitles visible */
 .video-player video::-webkit-media-text-track-container,
 .video-player video::-webkit-media-text-track-display {
   display: block !important;

src/components/VideoPlayer.tsx

@@ -58,10 +58,11 @@ const VideoPlayerContent: React.FC<
   qualities,
   onQualityLevelsLoadedInternal,
 }) => {
-  const { containerRef } = usePlayerContext()
+  const { containerRef, uiState } = usePlayerContext()
+  const controlsHiddenClass = !uiState.controlsVisible ? 'controls-hidden' : ''
 
   return (
-    <div ref={containerRef} className={`video-player ${className}`} style={style}>
+    <div ref={containerRef} className={`video-player ${controlsHiddenClass} ${className}`} style={style}>
       <VideoElement
         src={src}
         poster={poster}

src/components/controls/CenterPlayButton.css

@@ -1,3 +1,8 @@
+/* ============================================
+   CENTER PLAY BUTTON
+   Clean & Modern Design
+   ============================================ */
+
 .center-play-overlay {
   position: absolute;
   top: 0;
@@ -12,8 +17,8 @@
 }
 
 .center-play-button {
-  width: 80px;
+  width: 72px;
-  height: 80px;
+  height: 72px;
   border-radius: 50%;
   background-color: var(--player-primary);
   border: none;
@@ -22,34 +27,38 @@
   align-items: center;
   justify-content: center;
   transition: all var(--player-transition-normal) ease;
-  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
   pointer-events: all;
+  outline: none;
 }
 
 .center-play-button:hover {
   background-color: var(--player-primary-hover);
   transform: scale(1.1);
-  box-shadow: 0 6px 30px rgba(239, 68, 68, 0.6);
 }
 
 .center-play-button:active {
   transform: scale(1);
 }
 
+.center-play-button:focus-visible {
+  outline: 2px solid var(--player-primary);
+  outline-offset: 4px;
+}
+
 .center-play-button svg {
-  width: 40px;
+  width: 36px;
-  height: 40px;
+  height: 36px;
-  margin-left: 4px; /* Optical adjustment for play icon */
+  margin-left: 3px;
 }
 
 @media (max-width: 640px) {
   .center-play-button {
-    width: 64px;
+    width: 60px;
-    height: 64px;
+    height: 60px;
   }
 
   .center-play-button svg {
-    width: 32px;
+    width: 30px;
-    height: 32px;
+    height: 30px;
   }
 }

src/components/controls/ControlButton.css

@@ -1,3 +1,8 @@
+/* ============================================
+   CONTROL BUTTON
+   Clean & Modern Design
+   ============================================ */
+
 .control-button {
   background: none;
   border: none;
@@ -10,6 +15,7 @@
   border-radius: var(--player-radius-sm);
   transition: all var(--player-transition-fast) ease;
   position: relative;
+  outline: none;
 }
 
 .control-button:hover {
@@ -27,7 +33,7 @@
 }
 
 .control-button:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
@@ -36,7 +42,6 @@
   transform: none;
 }
 
-/* Icon sizing */
 .control-button svg {
   width: var(--player-icon-md);
   height: var(--player-icon-md);

src/components/controls/ProgressBar.css

@@ -1,3 +1,8 @@
+/* ============================================
+   PROGRESS BAR
+   Clean & Modern Design
+   ============================================ */
+
 .progress-bar {
   position: relative;
   width: 100%;
@@ -27,7 +32,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background-color: var(--player-buffered);
+  background-color: var(--player-progress-buffered);
   transition: width 0.1s ease;
 }
 
@@ -51,7 +56,6 @@
   transform: scale(0);
   transition: transform var(--player-transition-fast) ease;
   margin-right: -6px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
 }
 
 .progress-bar:hover .progress-handle,
@@ -61,17 +65,16 @@
 
 .progress-tooltip {
   position: absolute;
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + 10px);
   transform: translateX(-50%);
   background-color: var(--player-bg-menu);
   color: var(--player-text);
-  padding: 4px 8px;
+  padding: 6px 12px;
   border-radius: var(--player-radius-sm);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
   pointer-events: none;
-  box-shadow: var(--player-shadow-md);
   z-index: 10;
 }
 
@@ -103,10 +106,6 @@
     width: 10px;
     height: 10px;
     margin-right: -5px;
-  }
-
-  /* Always show handle on mobile for easier touch interaction */
-  .progress-handle {
     transform: scale(1);
   }
 }

src/components/controls/TimeDisplay.css

@@ -1,3 +1,8 @@
+/* ============================================
+   TIME DISPLAY
+   Clean & Modern Design
+   ============================================ */
+
 .time-display {
   display: flex;
   align-items: center;

src/components/controls/VolumeControl.css

@@ -1,3 +1,8 @@
+/* ============================================
+   VOLUME CONTROL
+   Clean & Modern Design
+   ============================================ */
+
 .volume-control {
   display: flex;
   align-items: center;
@@ -8,17 +13,16 @@
 .volume-slider-container {
   position: relative;
   width: 0;
-  height: 6px;
+  height: 5px;
   background-color: var(--player-progress-bg);
   border-radius: var(--player-radius-full);
   overflow: visible;
   transition: width var(--player-transition-normal) ease, opacity var(--player-transition-normal) ease;
   opacity: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .volume-slider-container.visible {
-  width: 100px;
+  width: 90px;
   opacity: 1;
 }
 
@@ -39,34 +43,30 @@
 .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 16px;
+  width: 14px;
-  height: 16px;
+  height: 14px;
   border-radius: 50%;
   background-color: var(--player-primary);
   cursor: pointer;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
+  transition: transform var(--player-transition-fast) ease;
-  transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
 }
 
 .volume-slider::-webkit-slider-thumb:hover {
   transform: scale(1.15);
-  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
 }
 
 .volume-slider::-moz-range-thumb {
-  width: 16px;
+  width: 14px;
-  height: 16px;
+  height: 14px;
   border: none;
   border-radius: 50%;
   background-color: var(--player-primary);
   cursor: pointer;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
+  transition: transform var(--player-transition-fast) ease;
-  transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
 }
 
 .volume-slider::-moz-range-thumb:hover {
   transform: scale(1.15);
-  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
 }
 
 .volume-slider:focus {
@@ -88,15 +88,13 @@
   top: 0;
   left: 0;
   height: 100%;
-  background: linear-gradient(90deg, var(--player-primary) 0%, var(--player-primary-hover) 100%);
+  background: var(--player-primary);
   pointer-events: none;
   transition: width 0.1s ease;
   z-index: 1;
   border-radius: var(--player-radius-full);
-  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
 }
 
-/* Mobile: Show slider vertically */
 @media (max-width: 640px) {
   .volume-slider-container.visible {
     width: 70px;

src/components/menus/SettingsMenu.css

@@ -1,21 +1,25 @@
+/* ============================================
+   SETTINGS MENU
+   Clean & Modern Design
+   ============================================ */
+
 .settings-menu {
   position: absolute;
-  bottom: calc(100% + 12px);
+  bottom: calc(100% + 10px);
   right: 0;
   background-color: var(--player-bg-menu);
-  border-radius: var(--player-radius-lg);
+  border-radius: var(--player-radius);
-  box-shadow: var(--player-shadow-lg);
+  min-width: 280px;
-  min-width: 300px;
+  max-height: 380px;
-  max-height: 400px;
   overflow: hidden;
   z-index: var(--player-z-menu);
-  animation: slideUp var(--player-transition-normal) ease;
+  animation: fadeIn var(--player-transition-normal) ease;
   backdrop-filter: blur(10px);
 }
 
 .settings-menu-header {
   padding: var(--player-spacing-md) var(--player-spacing-lg);
-  border-bottom: 1px solid var(--player-divider);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   gap: var(--player-spacing-sm);
@@ -24,7 +28,7 @@
 
 .settings-menu-header h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--player-text);
   flex: 1;
@@ -34,24 +38,24 @@
   background: none;
   border: none;
   color: var(--player-text);
-  font-size: 28px;
+  font-size: 24px;
   cursor: pointer;
   padding: 0;
-  width: 32px;
+  width: 28px;
-  height: 32px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--player-radius-sm);
   transition: background-color var(--player-transition-fast) ease;
-  margin-left: -8px;
+  margin-left: -6px;
+  outline: none;
 }
 
 .settings-back-button:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-/* Main Options (Two-level menu) */
 .settings-main-options {
   display: flex;
   flex-direction: column;
@@ -69,6 +73,7 @@
   transition: background-color var(--player-transition-fast) ease;
   text-align: left;
   width: 100%;
+  outline: none;
 }
 
 .settings-main-option:hover {
@@ -79,10 +84,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
+  width: 32px;
-  height: 36px;
+  height: 32px;
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba(239, 68, 68, 0.12);
-  border-radius: var(--player-radius-md);
+  border-radius: var(--player-radius-sm);
 }
 
 .settings-main-option-content {
@@ -93,27 +98,25 @@
 }
 
 .settings-main-option-label {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--player-text);
 }
 
 .settings-main-option-value {
-  font-size: 13px;
+  font-size: 12px;
   color: var(--player-text-secondary);
 }
 
 .settings-main-option-arrow {
-  font-size: 24px;
+  font-size: 20px;
   color: var(--player-text-secondary);
-  font-weight: 300;
 }
 
-/* Submenu Options */
 .settings-options {
   display: flex;
   flex-direction: column;
-  max-height: 320px;
+  max-height: 300px;
   overflow-y: auto;
 }
 
@@ -125,10 +128,11 @@
   background: none;
   border: none;
   color: var(--player-text);
-  font-size: 15px;
+  font-size: 14px;
   cursor: pointer;
   transition: background-color var(--player-transition-fast) ease;
   text-align: left;
+  outline: none;
 }
 
 .settings-option:hover {
@@ -137,24 +141,22 @@
 
 .settings-option.active {
   color: var(--player-primary);
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba(239, 68, 68, 0.12);
 }
 
 .settings-option span {
   flex: 1;
 }
 
-/* Empty state message */
 .settings-empty-state {
   padding: var(--player-spacing-xl) var(--player-spacing-lg);
   text-align: center;
   color: var(--player-text-muted);
-  font-size: 14px;
+  font-size: 13px;
 }
 
-/* Scrollbar styling */
 .settings-options::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 
 .settings-options::-webkit-scrollbar-track {
@@ -162,18 +164,18 @@
 }
 
 .settings-options::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.15);
   border-radius: 3px;
 }
 
 .settings-options::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 
 @media (max-width: 640px) {
   .settings-menu {
-    min-width: 280px;
+    min-width: 260px;
-    max-height: 360px;
+    max-height: 340px;
   }
 
   .settings-main-option {
@@ -181,8 +183,8 @@
   }
 
   .settings-main-option-icon {
-    width: 32px;
+    width: 28px;
-    height: 32px;
+    height: 28px;
   }
 
   .settings-option {
@@ -190,6 +192,6 @@
   }
 
   .settings-options {
-    max-height: 280px;
+    max-height: 260px;
   }
 }

src/components/overlays/LoadingSpinner.css

@@ -1,3 +1,8 @@
+/* ============================================
+   LOADING SPINNER
+   Clean & Modern Design
+   ============================================ */
+
 .loading-spinner-overlay {
   position: absolute;
   top: 0;
@@ -7,7 +12,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.2);
   z-index: var(--player-z-loading);
   pointer-events: none;
 }
@@ -17,10 +22,6 @@
 }
 
 @keyframes fadeIn {
-  from {
+  from { opacity: 0; }
-    opacity: 0;
+  to { opacity: 1; }
-  }
-  to {
-    opacity: 1;
-  }
 }

src/styles/variables.css

@@ -1,100 +1,60 @@
 /* ============================================
-   VIDEO PLAYER - CSS Custom Properties
+   VIDEO PLAYER - CSS Variables
+   Modern, Clean & Isolated Design System
    ============================================ */
 
 :root {
-  /* ==================== COLORS ==================== */
+  /* ==================== PRIMARY COLORS ==================== */
-
-  /* Primary Theme - Red */
   --player-primary: #ef4444;
   --player-primary-hover: #dc2626;
   --player-primary-active: #b91c1c;
-  --player-primary-light: rgba(239, 68, 68, 0.2);
 
-  /* Background Colors */
+  /* ==================== BACKGROUNDS ==================== */
   --player-bg: #000000;
-  --player-bg-controls: rgba(0, 0, 0, 0.85);
+  --player-bg-controls: rgba(0, 0, 0, 0.75);
-  --player-bg-overlay: rgba(0, 0, 0, 0.6);
+  --player-bg-menu: rgba(15, 15, 15, 0.96);
-  --player-bg-menu: rgba(20, 20, 20, 0.95);
 
-  /* Text Colors */
+  /* ==================== TEXT ==================== */
   --player-text: #ffffff;
   --player-text-secondary: #d1d5db;
   --player-text-muted: #9ca3af;
 
-  /* Border & Divider */
+  /* ==================== PROGRESS BAR ==================== */
-  --player-border: #374151;
+  --player-progress-bg: rgba(255, 255, 255, 0.25);
-  --player-divider: rgba(255, 255, 255, 0.1);
+  --player-progress-buffered: rgba(255, 255, 255, 0.4);
 
-  /* Progress Bar */
+  /* ==================== SPACING ==================== */
-  --player-buffered: rgba(239, 68, 68, 0.3);
+  --player-spacing-xs: 6px;
-  --player-progress-bg: rgba(255, 255, 255, 0.3);
+  --player-spacing-sm: 12px;
+  --player-spacing-md: 18px;
+  --player-spacing-lg: 24px;
+  --player-spacing-xl: 32px;
 
-  /* ==================== SUBTITLES ==================== */
+  /* ==================== BORDER RADIUS ==================== */
-
+  --player-radius: 8px;
-  /* Subtitle Appearance */
+  --player-radius-sm: 4px;
-  --player-subtitle-color: #f9fafb;
+  --player-radius-full: 9999px;
-  --player-subtitle-bg: rgba(15, 15, 18, 0.78);
-  --player-subtitle-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
-  --player-subtitle-max-width: 88%;
-
-  /* Subtitle Positioning
-     CRITICAL: This value MUST be larger than the controls bar height
-     to prevent subtitles from overlapping with controls.
-
-     Controls height calculation:
-     - Progress bar: ~20px
-     - Progress margin-bottom: 14px (--player-spacing-md)
-     - Controls padding-top: 28px (--player-spacing-xl)
-     - Controls padding-bottom: 20px (--player-spacing-lg)
-     - Controls row (buttons): ~36-40px
-     - Total: ~118-122px
-
-     We use 132px minimum (122px + 10px safety margin)
-  */
-  --player-subtitle-bottom-offset: clamp(132px, 13vh, 180px);
-
-  /* ==================== SHADOWS ==================== */
-
-  --player-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --player-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  --player-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 
   /* ==================== TRANSITIONS ==================== */
-
   --player-transition-fast: 150ms;
-  --player-transition-normal: 250ms;
+  --player-transition-normal: 200ms;
-  --player-transition-slow: 400ms;
-
-  /* ==================== Z-INDEX LAYERS ==================== */
 
+  /* ==================== Z-INDEX ==================== */
   --player-z-video: 1;
   --player-z-subtitle: 10;
   --player-z-controls: 20;
   --player-z-menu: 30;
   --player-z-loading: 40;
 
-  /* ==================== SPACING ==================== */
-
-  --player-spacing-xs: 6px;
-  --player-spacing-sm: 10px;
-  --player-spacing-md: 14px;
-  --player-spacing-lg: 20px;
-  --player-spacing-xl: 28px;
-
-  /* ==================== BORDER RADIUS ==================== */
-
-  --player-radius-sm: 4px;
-  --player-radius-md: 6px;
-  --player-radius-lg: 8px;
-  --player-radius-full: 9999px;
-
   /* ==================== ICON SIZES ==================== */
-
   --player-icon-sm: 20px;
-  --player-icon-md: 28px;
+  --player-icon-md: 24px;
-  --player-icon-lg: 36px;
+  --player-icon-lg: 32px;
-  --player-icon-xl: 56px;
+  --player-icon-xl: 48px;
+
+  /* ==================== SUBTITLE POSITIONING ==================== */
+  --player-subtitle-bottom: 100px;
+  --player-subtitle-bottom-hidden: 40px;
 }
 
 /* ============================================
@@ -102,50 +62,15 @@
    ============================================ */
 
 @keyframes spin {
-  from {
+  to { transform: rotate(360deg); }
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 
 @keyframes fadeIn {
-  from {
+  from { opacity: 0; }
-    opacity: 0;
+  to { opacity: 1; }
-  }
-  to {
-    opacity: 1;
-  }
 }
 
 @keyframes fadeOut {
-  from {
+  from { opacity: 1; }
-    opacity: 1;
+  to { opacity: 0; }
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
 }