Adjust subtitle styling and center play button

src/components/VideoElement.css

@@ -29,7 +29,7 @@
 .video-element::cue {
   font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.28rem !important;
+  font-size: 1.4rem !important;
   font-weight: 500 !important;
   line-height: 1.45 !important;
   letter-spacing: 0.01em !important;
@@ -45,7 +45,7 @@
 .video-element::-moz-cue {
   font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
-  font-size: 1.28rem !important;
+  font-size: 1.4rem !important;
   font-weight: 500 !important;
   line-height: 1.45 !important;
   letter-spacing: 0.01em !important;
@@ -143,6 +143,15 @@ video::-moz-text-track-display,
 ::-moz-cue:fullscreen,
 video:fullscreen::-moz-cue,
 :fullscreen ::-moz-cue {
-  font-size: 1.6rem !important;
+  font-size: 1.8rem !important;
-  padding: 0.4em 0.85em !important;
+  padding: 0.4em 0.9em !important;
+}
+
+@media (max-width: 640px) {
+  ::cue,
+  .video-element::cue,
+  ::-moz-cue,
+  .video-element::-moz-cue {
+    font-size: 1.2rem !important;
+  }
 }

src/components/controls/CenterPlayButton.css

@@ -9,27 +9,34 @@
 }
 
 .center-play-button {
-  width: 68px;
+  width: 96px;
-  height: 68px;
+  height: 96px;
-  border-radius: 18px;
+  border-radius: var(--player-radius-full);
-  background-color: var(--player-primary);
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
-  border: none;
+    var(--player-primary);
+  background-blend-mode: soft-light;
+  border: 1px solid rgba(255, 255, 255, 0.18);
   color: var(--player-text);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(239, 68, 68, 0.28);
   transition: background-color var(--player-transition-fast) ease,
-    color var(--player-transition-fast) ease;
+    color var(--player-transition-fast) ease, transform var(--player-transition-fast) ease,
+    box-shadow var(--player-transition-normal) ease;
   pointer-events: all;
 }
 
 .center-play-button:hover {
   background-color: var(--player-primary-hover);
+  transform: scale(1.05);
+  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(239, 68, 68, 0.32);
 }
 
 .center-play-button:active {
   background-color: var(--player-primary-active);
+  transform: scale(0.97);
 }
 
 .center-play-button:focus-visible {
@@ -38,20 +45,19 @@
 }
 
 .center-play-button svg {
-  width: 34px;
+  width: 44px;
-  height: 34px;
+  height: 44px;
-  margin-left: 2px;
+  margin-left: 4px;
 }
 
 @media (max-width: 640px) {
   .center-play-button {
-    width: 58px;
+    width: 74px;
-    height: 58px;
+    height: 74px;
-    border-radius: 16px;
   }
 
   .center-play-button svg {
-    width: 28px;
+    width: 34px;
-    height: 28px;
+    height: 34px;
   }
 }

src/components/controls/CenterPlayButton.tsx

@@ -10,11 +10,12 @@ export const CenterPlayButton: React.FC = () => {
     <div className="center-play-overlay">
       <button
         className="center-play-button"
+        type="button"
         onClick={play}
         aria-label="Play"
         title="Play"
       >
-        <PlayIcon size={64} color="var(--player-text)" />
+        <PlayIcon size={72} color="var(--player-text)" />
       </button>
     </div>
   )