Fix mobile portrait layout: lobby overlap, deal animation, card font sizes

- Add renderGame() guard during deal animation to prevent DOM destruction
  mid-animation causing cards to pile up at wrong positions
- Push lobby content below fixed auth-bar (padding 15px -> 50px top)
- Scale player card font-size to 1.5rem/1.3rem for readable text on mobile
- Add full mobile portrait layout: bottom drawers, compact header, responsive
  card grid sizing, safe-area insets, and mobile detection via matchMedia
- Add cardFontSize() helper for consistent proportional font scaling
- Add mobile bottom bar with drawer toggles for standings/scores

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

client/card-animations.js

@@ -75,6 +75,13 @@ class CardAnimations {
         return easings[type] || 'easeOutQuad';
     }
 
+    // Font size proportional to card width — consistent across all card types.
+    // Mobile uses a tighter ratio since cards are smaller and closer together.
+    cardFontSize(width) {
+        const ratio = document.body.classList.contains('mobile-portrait') ? 0.35 : 0.5;
+        return (width * ratio) + 'px';
+    }
+
     // Create animated card element with 3D flip structure
     createAnimCard(rect, showBack = false, deckColor = null) {
         const card = document.createElement('div');
@@ -94,7 +101,7 @@ class CardAnimations {
             card.style.height = rect.height + 'px';
             // Scale font-size proportionally to card width
             const front = card.querySelector('.draw-anim-front');
-            if (front) front.style.fontSize = (rect.width * 0.5) + 'px';
+            if (front) front.style.fontSize = this.cardFontSize(rect.width);
         }
 
         // Apply deck color to back
@@ -1180,7 +1187,7 @@ class CardAnimations {
             if (handFront) {
                 timeline.add({
                     targets: handFront,
-                    fontSize: (discardRect.width * 0.5) + 'px',
+                    fontSize: this.cardFontSize(discardRect.width),
                     duration: T.arc,
                     easing: this.getEasing('arc'),
                 }, `-=${T.arc}`);
@@ -1205,7 +1212,7 @@ class CardAnimations {
             if (heldFront) {
                 timeline.add({
                     targets: heldFront,
-                    fontSize: (handRect.width * 0.5) + 'px',
+                    fontSize: this.cardFontSize(handRect.width),
                     duration: T.arc,
                     easing: this.getEasing('arc'),
                 }, `-=${T.arc}`);
@@ -1424,7 +1431,7 @@ class CardAnimations {
         card.style.height = rect.height + 'px';
         // Scale font-size proportionally to card width
         const front = card.querySelector('.draw-anim-front');
-        if (front) front.style.fontSize = (rect.width * 0.5) + 'px';
+        if (front) front.style.fontSize = this.cardFontSize(rect.width);
 
         if (rotation) {
             card.style.transform = `rotate(${rotation}deg)`;