fix(golf): post-deploy UX bugfixes

src/apps/golf/components/GolfGame.module.css

@@ -414,30 +414,18 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-.heldCard {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
+.heldCardPile .card {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.3);
   animation: bobbing 2s ease-in-out infinite;
 }
 
-.heldCard .card {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.3);
-}
-
-.heldCardLabel {
-  font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.7);
-  font-family: 'Lexend', sans-serif;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.heldCardEmpty {
+  visibility: hidden;
 }
 
 @keyframes bobbing {
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-6px); }
+  50% { transform: translateY(-4px); }
 }
 
 .pileDepleted {
@@ -652,34 +640,39 @@
   }
 
   .gameHeader {
-    margin-bottom: 1rem;
-    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    padding: 0.5rem 0.75rem;
   }
 
   .gameHeader h2 {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     margin: 0;
   }
-  
+
   .gameHeaderTop {
-    flex-direction: column;
-    gap: 1rem;
+    flex-direction: row;
+    gap: 0.5rem;
     align-items: center;
   }
-  
+
   .gameHeaderInfo {
-    text-align: center;
+    text-align: left;
+    min-width: 0;
   }
 
   .playerList {
     flex-wrap: wrap;
-    gap: 0.25rem;
-    margin-top: 0.25rem;
+    gap: 0.2rem;
+    margin-top: 0.2rem;
   }
 
   .playerInfo {
-    font-size: 0.75rem;
-    padding: 0.2rem 0.4rem;
+    font-size: 0.7rem;
+    padding: 0.15rem 0.35rem;
+  }
+
+  .turnLabel {
+    font-size: 0.6rem;
   }
 
   .gameArea {
@@ -750,17 +743,17 @@
     height: 112px;
   }
 
+  .gameHeaderShare {
+    display: none;
+  }
+
   .turnIndicator {
     font-size: 0.9rem;
     padding: 0.4rem 0.75rem;
   }
 
-  .heldCard .card {
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 215, 0, 0.3);
-  }
-
-  .heldCardLabel {
-    font-size: 0.75rem;
+  .heldCardPile .card {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 215, 0, 0.3);
   }
 
   .celebrationEmoji {
@@ -896,32 +889,32 @@
   }
 
   .gameHeader {
-    margin-bottom: 1rem;
-    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding: 0.35rem 0.5rem;
   }
 
   .gameHeader h2 {
-    font-size: 1rem;
+    font-size: 0.75rem;
   }
-  
+
   .gameHeaderTop {
-    flex-direction: column;
-    gap: 0.75rem;
+    flex-direction: row;
+    gap: 0.5rem;
     align-items: center;
   }
 
   .playerList {
-    gap: 0.5rem;
+    gap: 0.2rem;
   }
 
   .playerInfo {
-    font-size: 0.85rem;
-    padding: 0.25rem 0.5rem;
+    font-size: 0.65rem;
+    padding: 0.15rem 0.3rem;
   }
 
   .gameArea {
-    gap: 1rem;
-    padding: 0.5rem;
+    gap: 0.75rem;
+    padding: 0.25rem;
   }
 
   .card {

src/apps/golf/components/GolfGame.tsx

@@ -181,7 +181,7 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
               <div className={styles.rulesSection}>
                 <h3>Setup</h3>
                 <ul>
-                  <li>Each player gets 6 cards face down in a 2×3 grid</li>
+                  <li>Each player gets 4 cards face down in a 2×2 grid</li>
                   <li>Players peek at any 2 of their cards at the start</li>
                   <li>Try to remember your cards!</li>
                 </ul>
@@ -555,16 +555,18 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
                   <div className={styles.emptyPile}>Empty</div>
                 )}
               </div>
-            </div>
-          </div>
 
-          {/* Floating held card */}
-          {gameState.drawnCard && isMyTurn && (
-            <div className={styles.heldCard}>
-              <span className={styles.heldCardLabel}>Held card</span>
-              {renderCard(gameState.drawnCard, -2, true, false)}
+              {/* Held card — inline with piles to avoid layout shift */}
+              <div className={`${styles.pile} ${styles.heldCardPile} ${gameState.drawnCard && isMyTurn ? '' : styles.heldCardEmpty}`}>
+                <h3>Held</h3>
+                {gameState.drawnCard && isMyTurn ? (
+                  renderCard(gameState.drawnCard, -2, true, false)
+                ) : (
+                  <div className={styles.emptyPile} />
+                )}
+              </div>
             </div>
-          )}
+          </div>
 
           <div className={styles.playerArea}>
             <h3>Your Cards</h3>
@@ -583,7 +585,7 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
                 </>
               ) : null}
 
-              {gameState.gamePhase === 'playing' && !gameState.drawnCard && (
+              {gameState.gamePhase === 'playing' && !gameState.drawnCard && gameState.allPlayersPeeked && (
                 <button onClick={knock} className={styles.knockButton}>
                   Knock
                 </button>

src/hooks/useGolfGame.ts

@@ -376,10 +376,16 @@ export const useGolfGame = ({
       showNotification('Must be in a room to join a game')
       return
     }
-    
+
     // Dismiss the notification
     dismissNewGameNotification(gameId)
-
+
+    // Clear current game state before joining the new one
+    setGameState(null)
+    setWinner(null)
+    setFinalScores(null)
+    setSelectedCardIndex(null)
+
     // Join the game
     joinGame(gameId)
   }, [roomState?.id, dismissNewGameNotification, joinGame, showNotification])