Fix mobile animation card sizing and layout polish

- Fix animation overlay cards rendering at wrong size: base .card CSS
  (clamp 65px min) was overriding the inline dimensions set by JS.
  Add !important to .draw-anim-front/.draw-anim-back width/height: 100%
  so overlays always match their parent container size.
- Size opponent swap held card to match opponent card dimensions instead
  of defaulting to deck size (looked oversized on mobile)
- Shrink dealer chip on mobile (38px -> 20px) to fit opponent areas
- Make header more compact: smaller fonts, tighter gaps, nowrap on badges
- Bump deck/discard to 72x101px to match player card size on mobile
- Add spacing between header/opponents, and between deck area/player cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/app.js

@@ -2780,11 +2780,22 @@ class GolfGame {
 
         // Use unified swap animation
         if (window.cardAnimations) {
+            // For opponent swaps, size the held card to match the opponent card
+            // rather than the deck size (default holding rect uses deck dimensions,
+            // which looks oversized next to small opponent cards on mobile)
+            const holdingRect = window.cardAnimations.getHoldingRect();
+            const heldRect = holdingRect ? {
+                left: holdingRect.left,
+                top: holdingRect.top,
+                width: sourceRect.width,
+                height: sourceRect.height
+            } : null;
+
             window.cardAnimations.animateUnifiedSwap(
                 discardCard,        // handCardData - card going to discard
                 newCardInHand,      // heldCardData - card going to hand
                 sourceRect,         // handRect - where the hand card is
-                null,               // heldRect - use default holding position
+                heldRect,           // heldRect - holding position, opponent card size
                 {
                     rotation: sourceRotation,
                     wasHandFaceDown: !wasFaceUp,

client/style.css

@@ -1132,8 +1132,8 @@ input::placeholder {
 .draw-anim-front,
 .draw-anim-back {
     position: absolute;
-    width: 100%;
+    width: 100% !important;
-    height: 100%;
+    height: 100% !important;
     backface-visibility: hidden;
     border-radius: 8px;
 }
@@ -4935,13 +4935,14 @@ body.mobile-portrait .game-header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 4px 10px;
+    padding: 4px 8px;
     padding-top: calc(4px + env(safe-area-inset-top, 0px));
-    font-size: 0.8rem;
+    font-size: 0.75rem;
-    min-height: 36px;
+    min-height: 32px;
     width: 100%;
     margin-left: 0;
-    gap: 6px;
+    gap: 4px;
+    margin-bottom: 4px;
 }
 
 body.mobile-portrait .header-col-left {
@@ -4967,29 +4968,32 @@ body.mobile-portrait #game-logout-btn {
 }
 
 body.mobile-portrait .status-message {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 body.mobile-portrait .round-info {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
 }
 
 body.mobile-portrait #leave-game-btn {
     padding: 2px 6px;
-    font-size: 0.65rem;
+    font-size: 0.6rem;
+    white-space: nowrap;
 }
 
 body.mobile-portrait .mute-btn {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     padding: 2px;
 }
 
 body.mobile-portrait .final-turn-badge {
-    font-size: 0.7rem;
+    font-size: 0.6rem;
-    padding: 2px 8px;
+    padding: 2px 6px;
+    white-space: nowrap;
 }
 
 /* --- Mobile: Game table — opponents pinned top, rest centered in remaining space --- */
@@ -5013,7 +5017,7 @@ body.mobile-portrait .opponents-row {
     align-items: flex-start;
     gap: 6px;
     min-height: 0 !important;
-    padding: 2px 8px;
+    padding: 2px 8px 6px;
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
@@ -5026,7 +5030,7 @@ body.mobile-portrait .player-row {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 6px;
+    gap: 10px;
     width: 100%;
     flex: 1;
     min-height: 0;
@@ -5043,6 +5047,17 @@ body.mobile-portrait .opponent-area {
     padding: 3px 5px 4px;
     border-radius: 6px;
     min-width: 0;
+    position: relative;
+    overflow: visible;
+}
+
+body.mobile-portrait .opponent-area .dealer-chip {
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+    border-width: 2px;
+    bottom: -6px;
+    left: -6px;
 }
 
 body.mobile-portrait .opponent-area h4 {
@@ -5086,9 +5101,9 @@ body.mobile-portrait .deck-area {
 body.mobile-portrait .deck-area > .card,
 body.mobile-portrait #deck,
 body.mobile-portrait #discard {
-    width: 60px !important;
+    width: 72px !important;
-    height: 84px !important;
+    height: 101px !important;
-    font-size: 1.3rem !important;
+    font-size: 1.5rem !important;
 }
 
 /* Held card floating should NOT be constrained to deck/discard size */
@@ -5314,9 +5329,9 @@ body.mobile-portrait #waiting-screen {
     body.mobile-portrait .deck-area > .card,
     body.mobile-portrait #deck,
     body.mobile-portrait #discard {
-        width: 50px !important;
+        width: 60px !important;
-        height: 70px !important;
+        height: 84px !important;
-        font-size: 1.1rem !important;
+        font-size: 1.3rem !important;
     }
 
     body.mobile-portrait .held-card-floating {
@@ -5324,6 +5339,10 @@ body.mobile-portrait #waiting-screen {
         height: 84px !important;
     }
 
+    body.mobile-portrait .player-row {
+        gap: 6px;
+    }
+
     body.mobile-portrait .player-area {
         padding: 3px 5px;
     }