diff --git a/public/css/style.css b/public/css/style.css
index b79b606..ef0e955 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -513,8 +513,22 @@ button:active {
     display: flex;
   }
 
+  /* Option 2: Scale down the entire battle grid for mobile */
   #battle-grid {
-    height: 60vh;
+    height: 50vh;
+    transform: scale(0.7);
+    transform-origin: center center;
+    margin-bottom: -60px; /* Compensate for scale to prevent overflow */
+  }
+
+  /* Option 4: Reduce board info height and hide previews on mobile */
+  .player-board .board-info {
+    padding: 5px 2px;
+    font-size: 0.45rem;
+  }
+
+  .player-board .board-info:has(canvas) {
+    display: none; /* Hide next/hold previews on mobile to save space */
   }
 
   .player-board.spectator {