From 3227c92d63b45a3bdc969ab0f1f17f32d89267f5 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 21 Feb 2026 23:16:40 -0500
Subject: [PATCH] Wrap opponent row at 3 per line and bump opponent card size
 10%

- Change opponents-row from nowrap to flex-wrap: wrap (max 3+2 layout)
- Opponent cards: 32x45px -> 35x49px, font 0.6 -> 0.65rem
- Short screen: 26x36px -> 29x40px, font 0.45 -> 0.5rem
- 3 opponents at 35px fits 369px, well within 375px iPhone width

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

diff --git a/client/style.css b/client/style.css
index 770fa92..7e845a0 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5009,18 +5009,16 @@ body.mobile-portrait .game-table {
     min-height: 0;
 }
 
-/* --- Mobile: Opponents as flat horizontal strip, pinned to top --- */
+/* --- Mobile: Opponents wrap at 3 per row (max 5 opponents = 3+2) --- */
 body.mobile-portrait .opponents-row {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
-    gap: 6px;
+    gap: 4px 6px;
     min-height: 0 !important;
     padding: 2px 8px 6px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
+    overflow: hidden;
     flex-shrink: 0;
 }
 
@@ -5064,20 +5062,20 @@ body.mobile-portrait .opponent-area h4 {
     font-size: 0.6rem;
     margin: 0 0 2px 0;
     padding: 2px 4px;
-    max-width: 110px;
+    max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 body.mobile-portrait .opponent-area .card-grid {
-    grid-template-columns: repeat(3, 32px) !important;
+    grid-template-columns: repeat(3, 35px) !important;
     gap: 2px !important;
 }
 
 body.mobile-portrait .opponent-area .card {
-    width: 32px !important;
-    height: 45px !important;
-    font-size: 0.6rem !important;
+    width: 35px !important;
+    height: 49px !important;
+    font-size: 0.65rem !important;
     border-radius: 3px;
 }
 
@@ -5312,14 +5310,14 @@ body.mobile-portrait #waiting-screen {
     }
 
     body.mobile-portrait .opponent-area .card-grid {
-        grid-template-columns: repeat(3, 26px) !important;
+        grid-template-columns: repeat(3, 29px) !important;
         gap: 1px !important;
     }
 
     body.mobile-portrait .opponent-area .card {
-        width: 26px !important;
-        height: 36px !important;
-        font-size: 0.45rem !important;
+        width: 29px !important;
+        height: 40px !important;
+        font-size: 0.5rem !important;
     }
 
     body.mobile-portrait .table-center {