From 0dbb2d13ed786cbeadfe7c6c133894bfc0e00665 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 12:58:40 -0500
Subject: [PATCH] Shrink mobile player/deck cards and widen opponent hand
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduces card sizes from 72×101 to 64×90 on mobile portrait to prevent
overlap with bottom bar when opponents wrap to 2 rows. Increases
horizontal gap between opponent hands from 4px to 10px for better
readability of player chips.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/style.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/style.css b/client/style.css
index 9cd5389..7dc4f5a 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5031,7 +5031,7 @@ body.mobile-portrait .opponents-row {
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
-    gap: 4px;
+    gap: 4px 10px;
     min-height: 0 !important;
     padding: 2px 4px 6px;
     overflow: hidden;
@@ -5115,15 +5115,15 @@ body.mobile-portrait .deck-area {
 body.mobile-portrait .deck-area > .card,
 body.mobile-portrait #deck,
 body.mobile-portrait #discard {
-    width: 72px !important;
-    height: 101px !important;
-    font-size: 1.5rem !important;
+    width: 64px !important;
+    height: 90px !important;
+    font-size: 1.4rem !important;
 }
 
 /* Held card floating should NOT be constrained to deck/discard size */
 body.mobile-portrait .held-card-floating {
-    width: 72px !important;
-    height: 101px !important;
+    width: 64px !important;
+    height: 90px !important;
 }
 
 body.mobile-portrait .discard-stack {
@@ -5165,15 +5165,15 @@ body.mobile-portrait .player-showing {
 
 /* Player hand: fixed-size cards */
 body.mobile-portrait .player-section .card-grid {
-    grid-template-columns: repeat(3, 72px) !important;
+    grid-template-columns: repeat(3, 64px) !important;
     gap: 5px !important;
     justify-content: center;
 }
 
 body.mobile-portrait .player-section .card {
-    width: 72px !important;
-    height: 101px !important;
-    font-size: 1.5rem !important;
+    width: 64px !important;
+    height: 90px !important;
+    font-size: 1.4rem !important;
 }
 
 /* Real cards: font-size is now set inline by card-manager.js (proportional to card width).