From e5a5e0eda9cfe34d90233e4224ebaec736317c87 Mon Sep 17 00:00:00 2001
From: Josue Zamudio <josuezamudio1@gmail.com>
Date: Fri, 20 Mar 2026 09:52:26 -0700
Subject: [PATCH] Optimize mobile UI with scaling and reduced info

Option 2: Scale battle grid to 70% on mobile
Option 4: Reduce board-info padding and font size, hide next/hold previews
---
 public/css/style.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

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 {