Refactor video player CSS for improved subtitles and layout

Major CSS refactor for video player components: improves subtitle styling and cross-browser positioning, restructures ControlsLayer and VideoElement styles for clarity and responsiveness, and updates custom properties for better subtitle/controls separation. Adds a local settings file for permissions.

src/styles/variables.css

@@ -1,5 +1,11 @@
+/* ============================================
+   VIDEO PLAYER - CSS Custom Properties
+   ============================================ */
+
 :root {
-  /* Colors - Red Theme */
+  /* ==================== COLORS ==================== */
+
+  /* Primary Theme - Red */
   --player-primary: #ef4444;
   --player-primary-hover: #dc2626;
   --player-primary-active: #b91c1c;
@@ -15,58 +21,86 @@
   --player-text: #ffffff;
   --player-text-secondary: #d1d5db;
   --player-text-muted: #9ca3af;
-  --player-subtitle-color: #f9fafb;
-  --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%;
-  --player-subtitle-bottom-offset: clamp(88px, 11vh, 160px);
 
   /* Border & Divider */
   --player-border: #374151;
   --player-divider: rgba(255, 255, 255, 0.1);
 
-  /* Buffered & Progress */
+  /* Progress Bar */
   --player-buffered: rgba(239, 68, 68, 0.3);
   --player-progress-bg: rgba(255, 255, 255, 0.3);
 
-  /* Shadows */
+  /* ==================== SUBTITLES ==================== */
+
+  /* Subtitle Appearance */
+  --player-subtitle-color: #f9fafb;
+  --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 */
+  /* ==================== TRANSITIONS ==================== */
+
   --player-transition-fast: 150ms;
   --player-transition-normal: 250ms;
   --player-transition-slow: 400ms;
 
-  /* Z-index */
+  /* ==================== Z-INDEX LAYERS ==================== */
+
   --player-z-video: 1;
   --player-z-subtitle: 10;
   --player-z-controls: 20;
   --player-z-menu: 30;
   --player-z-loading: 40;
 
-  /* Spacing */
+  /* ==================== SPACING ==================== */
+
   --player-spacing-xs: 6px;
   --player-spacing-sm: 10px;
   --player-spacing-md: 14px;
   --player-spacing-lg: 20px;
   --player-spacing-xl: 28px;
 
-  /* Border Radius */
+  /* ==================== BORDER RADIUS ==================== */
+
   --player-radius-sm: 4px;
   --player-radius-md: 6px;
   --player-radius-lg: 8px;
   --player-radius-full: 9999px;
 
-  /* Icon Sizes */
+  /* ==================== ICON SIZES ==================== */
+
   --player-icon-sm: 20px;
   --player-icon-md: 28px;
   --player-icon-lg: 36px;
   --player-icon-xl: 56px;
 }
 
-/* Animations */
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
 @keyframes spin {
   from {
     transform: rotate(0deg);