.

src/components/VideoElement.css

@@ -25,24 +25,100 @@
   display: none !important;
 }
 
-/* Subtitle styling */
+/* Modern Subtitle Styling */
 .video-element::cue {
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  font-size: 1.2em;
-  font-family: Arial, sans-serif;
+  /* Typography */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 1.75rem;
+  font-weight: 700;
   line-height: 1.4;
-  padding: 0.2em 0.5em;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+  letter-spacing: 0.5px;
+
+  /* Colors - No background, only text with strong shadow */
+  color: #ffffff;
+  background-color: transparent;
+
+  /* Visual Effects - Strong shadow for readability */
+  text-shadow:
+    /* Strong black outline */
+    -2px -2px 0 #000,
+    2px -2px 0 #000,
+    -2px 2px 0 #000,
+    2px 2px 0 #000,
+    0 -2px 0 #000,
+    0 2px 0 #000,
+    -2px 0 0 #000,
+    2px 0 0 #000,
+    /* Additional shadow for depth */
+    0 4px 8px rgba(0, 0, 0, 0.9),
+    0 0 12px rgba(0, 0, 0, 0.8);
+
+  /* Better rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
-/* Ensure text tracks are visible */
+/* Fullscreen subtitle adjustments */
+:fullscreen .video-element::cue,
+.video-element:fullscreen::cue {
+  font-size: 2.25rem;
+}
+
+/* Ensure text tracks are properly positioned - above controls */
 .video-element::-webkit-media-text-track-container {
   overflow: visible !important;
-  position: relative !important;
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
   z-index: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: flex-end !important;
+  align-items: center !important;
+  /* Position above controls bar (controls bar is ~120px high with padding) */
+  padding-bottom: 130px !important;
+  pointer-events: none !important;
 }
 
 .video-element::-webkit-media-text-track-display {
   overflow: visible !important;
+  width: 100% !important;
+  max-width: 85% !important;
+  text-align: center !important;
+}
+
+/* Multi-line subtitle support */
+.video-element::cue-region {
+  width: 85%;
+}
+
+/* Better contrast for different cue types */
+.video-element::cue(b) {
+  font-weight: 900;
+}
+
+.video-element::cue(i) {
+  font-style: italic;
+}
+
+.video-element::cue(u) {
+  text-decoration: underline;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .video-element::cue {
+    font-size: 1.25rem;
+  }
+
+  .video-element::-webkit-media-text-track-container {
+    padding-bottom: 110px !important;
+  }
+
+  :fullscreen .video-element::cue,
+  .video-element:fullscreen::cue {
+    font-size: 1.75rem;
+  }
 }