style(controls): ensure primary play button is compactly constrained on short screens

- Add .btn-play-primary media query in index.css to enforce 2.25rem (36px) on height <= 520px
- Prevent wider screen landscape viewports from overriding height constraints

Co-Authored-By: Claude Code <noreply@anthropic.com>

src/components/Controls.tsx

@@ -134,7 +134,7 @@ export const Controls: React.FC<ControlsProps> = ({
         <button
           onClick={onTogglePlay}
           title="播放 / 暂停 [空格键]"
-          className="w-10 h-10 sm:w-14 sm:h-14 short:w-9 short:h-9 rounded-full bg-neutral-900 hover:bg-black dark:bg-neutral-100 dark:hover:bg-white text-white dark:text-black flex items-center justify-center shadow-lg active:scale-95 transition-all"
+          className="btn-play-primary w-10 h-10 sm:w-14 sm:h-14 rounded-full bg-neutral-900 hover:bg-black dark:bg-neutral-100 dark:hover:bg-white text-white dark:text-black flex items-center justify-center shadow-lg active:scale-95 transition-all"
         >
           {isPlaying ? (
             <Pause className="w-4 h-4 sm:w-5 sm:h-5 fill-current" />

src/index.css

@@ -72,6 +72,17 @@ input[type="range"]::-moz-range-thumb {
 
 /* Short / Landscape screen optimizations (< 520px viewport height) */
 @media (max-height: 520px) {
+  .btn-play-primary {
+    width: 2.25rem !important; /* 36px */
+    height: 2.25rem !important;
+  }
+
+  .short\:w-9 {
+    width: 2.25rem !important;
+  }
+  .short\:h-9 {
+    height: 2.25rem !important;
+  }
   .short\:py-0\.5 {
     padding-top: 0.125rem !important;
     padding-bottom: 0.125rem !important;