diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
index a300b72..c112da7 100644
--- a/src/components/Controls.tsx
+++ b/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" />
diff --git a/src/index.css b/src/index.css
index 9c6bfbd..d611ea0 100644
--- a/src/index.css
+++ b/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;