Fix lobby header: use inline-grid for logo/title layout

The 749px media query was triggering at mid-range widths, collapsing
the two-row logo+title into a single line. Fix by:
- Using inline-grid on h1 for bulletproof two-row layout
- Lowering single-line breakpoint from 749px to 500px
- Widening lobby container to 550px for title to fit naturally
- Constraining game controls to 400px max-width

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

client/style.css

@@ -42,7 +42,7 @@ body {
 
 /* Lobby Screen */
 #lobby-screen {
-    max-width: 400px;
+    max-width: 550px;
     margin: 0 auto;
     padding: 20px;
     text-align: center;
@@ -59,6 +59,7 @@ body {
 
 /* Golf title - golf ball with dimples and shine */
 .golf-title {
+    display: block;
     font-size: 1.05em;
     font-weight: 800;
     letter-spacing: 0.02em;
@@ -102,19 +103,27 @@ body {
 }
 
 #lobby-screen h1 {
-    width: fit-content;
-    margin: 0 auto;
+    display: inline-grid;
+    grid-template-columns: auto;
+    justify-items: start;
     text-align: left;
+    row-gap: 2px;
 }
 
 .logo-row {
-    display: block;
-    margin-bottom: -0.3em;
+    margin-bottom: 0;
 }
 
-@media (max-width: 749px) {
+#lobby-game-controls,
+#auth-prompt {
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (max-width: 500px) {
     #lobby-screen h1 {
-        width: auto;
+        display: block;
         text-align: center;
         text-indent: -18px;
     }
@@ -122,6 +131,9 @@ body {
         display: inline;
         margin-bottom: 0;
     }
+    .golf-title {
+        display: inline;
+    }
 }
 
 /* Golfer swing animation */