fix(golf): keep drawn card in-place and fix double-click selection

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

@@ -254,15 +254,10 @@
 }
 
 .card.selected {
-  border: 3px solid #ffd700;
-  transform: scale(1.08);
-  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
-  animation: selectedPulse 1.2s ease-in-out infinite;
-}
-
-@keyframes selectedPulse {
-  0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); }
-  50% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.8); }
+  outline: 3px solid #ffd700;
+  outline-offset: -3px;
+  transform: scale(1.05);
+  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
 }
 
 .card.clickable,
@@ -354,15 +349,10 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-.emptyPileReserved {
-  width: 80px;
-  height: 120px;
-  visibility: hidden;
-}
-
-.drawnCardWrapper .card {
-  border: 2px solid #ffd700;
-  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
+.drawnCardHighlight .card {
+  outline: 3px solid #ffd700;
+  outline-offset: -3px;
+  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
 }
 
 .playerArea {
@@ -650,8 +640,9 @@
   }
 
   .card.selected {
-    border: 3px solid #ffd700;
-    transform: scale(1.1);
+    outline: 3px solid #ffd700;
+    outline-offset: -3px;
+    transform: scale(1.08);
     box-shadow: 0 0 24px rgba(255, 215, 0, 0.6);
   }
 
@@ -682,11 +673,6 @@
     height: 100px;
   }
 
-  .emptyPileReserved {
-    width: 70px;
-    height: 100px;
-  }
-
   .playerArea {
     padding: 1rem;
     width: 100%;
@@ -888,11 +874,6 @@
     height: 80px;
   }
 
-  .emptyPileReserved {
-    width: 55px;
-    height: 80px;
-  }
-
   .cardGrid {
     max-width: 130px;
     gap: 0.6rem;

src/apps/golf/components/GolfGame.tsx

@@ -69,6 +69,19 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
     joinNewGame
   } = useGolfGame({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConnectionChange, permalinkParams })
 
+  const [drawnFromRaw, setDrawnFromRaw] = useState<'deck' | 'discard' | null>(null)
+  const drawnFrom = gameState?.drawnCard ? drawnFromRaw : null
+
+  const handleDrawCard = () => {
+    setDrawnFromRaw('deck')
+    drawCard()
+  }
+
+  const handleTakeFromDiscard = () => {
+    setDrawnFromRaw('discard')
+    takeFromDiscard()
+  }
+
   const renderCard = (card: Card | null, index: number, isRevealed: boolean, isPlayer: boolean) => {
     const isSelected = selectedCardIndex === index
     const canInteract = isPlayer && (isMyTurn || (currentPlayer && !currentPlayer.hasPeeked && gameState?.gamePhase === 'playing'))
@@ -520,28 +533,38 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
             <div className={styles.piles}>
               <div className={styles.pile}>
                 <h3>Draw Pile</h3>
-                <div
-                  className={`${styles.card} ${isMyTurn && !gameState.drawnCard ? styles.clickable : ''}`}
-                  onClick={() => isMyTurn && !gameState.drawnCard && drawCard()}
-                  onTouchEnd={(e) => {
-                    e.preventDefault()
-                    if (isMyTurn && !gameState.drawnCard) drawCard()
-                  }}
-                >
-                  <span className={styles.cardBack}>?</span>
-                  <span className={styles.cardCount}>{gameState.drawPile}</span>
-                </div>
+                {gameState.drawnCard && isMyTurn && drawnFrom === 'deck' ? (
+                  <div className={styles.drawnCardHighlight}>
+                    {renderCard(gameState.drawnCard, -2, true, false)}
+                  </div>
+                ) : (
+                  <div
+                    className={`${styles.card} ${isMyTurn && !gameState.drawnCard ? styles.clickable : ''}`}
+                    onClick={() => isMyTurn && !gameState.drawnCard && handleDrawCard()}
+                    onTouchEnd={(e) => {
+                      e.preventDefault()
+                      if (isMyTurn && !gameState.drawnCard) handleDrawCard()
+                    }}
+                  >
+                    <span className={styles.cardBack}>?</span>
+                    <span className={styles.cardCount}>{gameState.drawPile}</span>
+                  </div>
+                )}
               </div>
 
               <div className={styles.pile}>
                 <h3>Discard Pile</h3>
-                {gameState.discardPile.length > 0 ? (
+                {gameState.drawnCard && isMyTurn && drawnFrom === 'discard' ? (
+                  <div className={styles.drawnCardHighlight}>
+                    {renderCard(gameState.drawnCard, -2, true, false)}
+                  </div>
+                ) : gameState.discardPile.length > 0 ? (
                   <div
                     className={`${isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0 ? styles.clickable : ''}`}
-                    onClick={() => isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0 && takeFromDiscard()}
+                    onClick={() => isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0 && handleTakeFromDiscard()}
                     onTouchEnd={(e) => {
                       e.preventDefault()
-                      if (isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0) takeFromDiscard()
+                      if (isMyTurn && !gameState.drawnCard && gameState.discardPile.length > 0) handleTakeFromDiscard()
                     }}
                   >
                     {renderCard(gameState.discardPile[gameState.discardPile.length - 1], -1, true, false)}
@@ -550,17 +573,6 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
                   <div className={styles.emptyPile}>Empty</div>
                 )}
               </div>
-
-              <div className={styles.pile}>
-                <h3>{gameState.drawnCard && isMyTurn ? 'Drawn Card' : '\u00A0'}</h3>
-                {gameState.drawnCard && isMyTurn ? (
-                  <div className={styles.drawnCardWrapper}>
-                    {renderCard(gameState.drawnCard, -2, true, false)}
-                  </div>
-                ) : (
-                  <div className={styles.emptyPileReserved} />
-                )}
-              </div>
             </div>
           </div>
 
@@ -576,11 +588,11 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
               <div className={styles.actions}>
                 {!gameState.drawnCard ? (
                   <>
-                    <button onClick={drawCard} className={styles.actionButton}>
+                    <button onClick={handleDrawCard} className={styles.actionButton}>
                       Draw Card
                     </button>
                     {gameState.discardPile.length > 0 && (
-                      <button onClick={takeFromDiscard} className={styles.actionButton}>
+                      <button onClick={handleTakeFromDiscard} className={styles.actionButton}>
                         Take from Discard
                       </button>
                     )}