Route all lobby transitions through showLobby() for animation cleanup

game_ended, queue_left, and cancelMatchmaking were calling
showScreen('lobby') directly, bypassing the cancelAll() cleanup.

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

client/admin.js

@@ -317,7 +317,7 @@ async function loadUsers() {
                     <td>${user.games_played} (${user.games_won} wins)</td>
                     <td>${formatDateShort(user.created_at)}</td>
                     <td>
-                        <button class="btn btn-small" onclick="viewUser('${user.id}')">View</button>
+                        <button class="btn btn-small" data-action="view-user" data-id="${user.id}">View</button>
                     </td>
                 </tr>
             `;
@@ -404,7 +404,7 @@ async function loadGames() {
                     <td><span class="badge badge-${game.status === 'playing' ? 'success' : 'info'}">${game.status}</span></td>
                     <td>${formatDate(game.created_at)}</td>
                     <td>
-                        <button class="btn btn-small btn-danger" onclick="promptEndGame('${game.game_id}')">End</button>
+                        <button class="btn btn-small btn-danger" data-action="end-game" data-id="${game.game_id}">End</button>
                     </td>
                 </tr>
             `;
@@ -454,7 +454,8 @@ async function loadInvites() {
                     <td>${status}</td>
                     <td>
                         ${invite.is_active && !isExpired && invite.remaining_uses > 0
-                            ? `<button class="btn btn-small btn-danger" onclick="promptRevokeInvite('${invite.code}')">Revoke</button>`
+                            ? `<button class="btn btn-small" data-action="copy-invite" data-code="${escapeHtml(invite.code)}">Copy Link</button>
+                               <button class="btn btn-small btn-danger" data-action="revoke-invite" data-code="${escapeHtml(invite.code)}">Revoke</button>`
                             : '-'
                         }
                     </td>
@@ -619,6 +620,16 @@ async function handleCreateInvite() {
     }
 }
 
+function copyInviteLink(code) {
+    const link = `${window.location.origin}/?invite=${encodeURIComponent(code)}`;
+    navigator.clipboard.writeText(link).then(() => {
+        showToast('Invite link copied!', 'success');
+    }).catch(() => {
+        // Fallback: select text for manual copy
+        prompt('Copy this link:', link);
+    });
+}
+
 async function promptRevokeInvite(code) {
     if (!confirm(`Are you sure you want to revoke invite code ${code}?`)) return;
 
@@ -804,6 +815,18 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    // Delegated click handlers for dynamically-created buttons
+    document.addEventListener('click', (e) => {
+        const btn = e.target.closest('[data-action]');
+        if (!btn) return;
+
+        const action = btn.dataset.action;
+        if (action === 'view-user') viewUser(btn.dataset.id);
+        else if (action === 'end-game') promptEndGame(btn.dataset.id);
+        else if (action === 'copy-invite') copyInviteLink(btn.dataset.code);
+        else if (action === 'revoke-invite') promptRevokeInvite(btn.dataset.code);
+    });
+
     // Check auth on load
     checkAuth();
 });

client/app.js

@@ -90,10 +90,20 @@ class GolfGame {
     }
 
     initMobileDetection() {
+        // Set --app-height custom property to actual visible viewport height.
+        // This works around Chrome Android's 100vh bug where vh includes the
+        // space behind the dynamic URL bar.
+        const setAppHeight = () => {
+            document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
+        };
+        window.addEventListener('resize', setAppHeight);
+        setAppHeight();
+
         const mql = window.matchMedia('(max-width: 500px) and (orientation: portrait)');
         const update = (e) => {
             this.isMobile = e.matches;
             document.body.classList.toggle('mobile-portrait', e.matches);
+            setAppHeight();
             // Close any open drawers on layout change
             if (!e.matches) {
                 this.closeDrawers();
@@ -119,6 +129,7 @@ class GolfGame {
                     panel.classList.add('drawer-open');
                     btn.classList.add('active');
                     if (backdrop) backdrop.classList.add('visible');
+                    if (bottomBar) bottomBar.classList.add('hidden');
                 }
             });
         }
@@ -132,6 +143,8 @@ class GolfGame {
         document.querySelectorAll('.mobile-bar-btn.active').forEach(b => b.classList.remove('active'));
         const backdrop = document.getElementById('drawer-backdrop');
         if (backdrop) backdrop.classList.remove('visible');
+        const bottomBar = document.getElementById('mobile-bottom-bar');
+        if (bottomBar) bottomBar.classList.remove('hidden');
     }
 
     initAudio() {
@@ -545,6 +558,8 @@ class GolfGame {
         this.addSelectedCpusBtn.addEventListener('click', () => { this.playSound('success'); this.addSelectedCpus(); });
         this.muteBtn.addEventListener('click', () => this.toggleSound());
         this.leaveGameBtn.addEventListener('click', () => { this.playSound('click'); this.leaveGame(); });
+        const mobileLeaveBtn = document.getElementById('mobile-leave-btn');
+        if (mobileLeaveBtn) mobileLeaveBtn.addEventListener('click', () => { this.playSound('click'); this.leaveGame(); });
         this.gameLogoutBtn.addEventListener('click', () => { this.playSound('click'); this.auth?.logout(); });
 
         // Copy room code to clipboard
@@ -935,7 +950,7 @@ class GolfGame {
                 // Host ended the game or player was kicked
                 this._intentionalClose = true;
                 if (this.ws) this.ws.close();
-                this.showScreen('lobby');
+                this.showLobby();
                 if (data.reason) {
                     this.showError(data.reason);
                 }
@@ -960,7 +975,7 @@ class GolfGame {
 
             case 'queue_left':
                 this.stopMatchmakingTimer();
-                this.showScreen('lobby');
+                this.showLobby();
                 break;
 
             case 'error':
@@ -980,7 +995,7 @@ class GolfGame {
     cancelMatchmaking() {
         this.send({ type: 'queue_leave' });
         this.stopMatchmakingTimer();
-        this.showScreen('lobby');
+        this.showLobby();
     }
 
     startMatchmakingTimer() {
@@ -1558,8 +1573,10 @@ class GolfGame {
         this.heldCardFloating.classList.add('hidden');
 
         if (this.pendingGameState) {
+            const oldState = this.gameState;
             this.gameState = this.pendingGameState;
             this.pendingGameState = null;
+            this.checkForNewPairs(oldState, this.gameState);
             this.renderGame();
         }
     }
@@ -1703,7 +1720,8 @@ class GolfGame {
 
             // Badge
             let badge = '';
-            if (isKnocker) badge = '<span class="ss-badge ss-badge-knock">KNOCKED</span>';
+            if (isKnocker && isLowScore) badge = '<span class="ss-badge ss-badge-knock">KNOCKED</span><span class="ss-badge ss-badge-low">LOW SCORE</span>';
+            else if (isKnocker) badge = '<span class="ss-badge ss-badge-knock">KNOCKED</span>';
             else if (isLowScore) badge = '<span class="ss-badge ss-badge-low">LOW SCORE</span>';
 
             // Build columns
@@ -1773,6 +1791,10 @@ class GolfGame {
         document.body.appendChild(modal);
         this.setStatus('Hole complete');
 
+        // Hide bottom bar so it doesn't overlay the modal
+        const bottomBar = document.getElementById('mobile-bottom-bar');
+        if (bottomBar) bottomBar.classList.add('hidden');
+
         // Bind next button
         const nextBtn = document.getElementById('ss-next-btn');
         nextBtn.addEventListener('click', () => {
@@ -1902,6 +1924,10 @@ class GolfGame {
         this.clearScoresheetCountdown();
         const modal = document.getElementById('scoresheet-modal');
         if (modal) modal.remove();
+
+        // Restore bottom bar
+        const bottomBar = document.getElementById('mobile-bottom-bar');
+        if (bottomBar) bottomBar.classList.remove('hidden');
     }
 
     // --- V3_02: Dealing Animation ---
@@ -2583,6 +2609,7 @@ class GolfGame {
     }
 
     firePairCelebration(playerId, pos1, pos2) {
+        this.playSound('pair');
         const elements = this.getCardElements(playerId, pos1, pos2);
         if (elements.length < 2) return;
 
@@ -2780,16 +2807,7 @@ class GolfGame {
 
         // Use unified swap animation
         if (window.cardAnimations) {
-            // For opponent swaps, size the held card to match the opponent card
+            const heldRect = window.cardAnimations.getHoldingRect();
-            // 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
@@ -3039,6 +3057,14 @@ class GolfGame {
     }
 
     showLobby() {
+        if (window.cardAnimations) {
+            window.cardAnimations.cancelAll();
+        }
+        this.dealAnimationInProgress = false;
+        this.isDrawAnimating = false;
+        this.localDiscardAnimating = false;
+        this.opponentDiscardAnimating = false;
+        this.opponentSwapAnimation = false;
         this.showScreen(this.lobbyScreen);
         this.lobbyError.textContent = '';
         this.roomCode = null;
@@ -3073,7 +3099,10 @@ class GolfGame {
         this.waitingForFlip = false;
         this.previousState = null;
         // Update leave button text based on role
-        this.leaveGameBtn.textContent = this.isHost ? 'End Game' : 'Leave';
+        const leaveText = this.isHost ? 'End Game' : 'Leave';
+        this.leaveGameBtn.textContent = leaveText;
+        const mobileLeave = document.getElementById('mobile-leave-btn');
+        if (mobileLeave) mobileLeave.textContent = leaveText;
         // Update active rules bar
         this.updateActiveRulesBar();
     }
@@ -3108,6 +3137,24 @@ class GolfGame {
                 `<span class="rule-tag rule-more" title="${tooltip}">+${moreCount} more</span>`;
         }
         this.activeRulesBar.classList.remove('hidden');
+
+        // Update mobile rules indicator
+        const mobileRulesBtn = document.getElementById('mobile-rules-btn');
+        const mobileRulesIcon = document.getElementById('mobile-rules-icon');
+        const mobileRulesContent = document.getElementById('mobile-rules-content');
+        if (mobileRulesBtn && mobileRulesIcon && mobileRulesContent) {
+            const isHouseRules = rules.length > 0;
+            mobileRulesIcon.textContent = isHouseRules ? '!' : 'RULES';
+            mobileRulesBtn.classList.toggle('house-rules', isHouseRules);
+
+            if (!isHouseRules) {
+                mobileRulesContent.innerHTML = '<div class="mobile-rules-content-list"><span class="rule-tag standard">Standard Rules</span></div>';
+            } else {
+                const tagHtml = (unrankedTag ? '<span class="rule-tag unranked">Unranked</span>' : '') +
+                    rules.map(renderTag).join('');
+                mobileRulesContent.innerHTML = `<div class="mobile-rules-content-list">${tagHtml}</div>`;
+            }
+        }
     }
 
     // V3_14: Map display names to rule keys
@@ -3419,15 +3466,6 @@ class GolfGame {
         // Toggle game area class for border pulse
         this.gameScreen.classList.add('final-turn-active');
 
-        // Calculate remaining turns
-        const remaining = this.countRemainingTurns();
-
-        // Update badge content
-        const remainingEl = this.finalTurnBadge.querySelector('.final-turn-remaining');
-        if (remainingEl) {
-            remainingEl.textContent = remaining === 1 ? '1 turn left' : `${remaining} turns left`;
-        }
-
         // Show badge
         this.finalTurnBadge.classList.remove('hidden');
 
@@ -3523,7 +3561,9 @@ class GolfGame {
         const cardHeight = deckRect.height;
 
         // Position card centered, overlapping both piles (lower than before)
-        const overlapOffset = cardHeight * 0.35; // More overlap = lower position
+        // On mobile portrait, place held card fully above the deck/discard area
+        const isMobilePortrait = document.body.classList.contains('mobile-portrait');
+        const overlapOffset = cardHeight * (isMobilePortrait ? 0.48 : 0.35);
         const cardLeft = centerX - cardWidth / 2;
         const cardTop = deckRect.top - overlapOffset;
         this.heldCardFloating.style.left = `${cardLeft}px`;
@@ -3535,11 +3575,21 @@ class GolfGame {
             this.heldCardFloating.style.fontSize = `${cardWidth * 0.35}px`;
         }
 
-        // Position discard button attached to right side of held card
+        // Position discard button
-        const buttonLeft = cardLeft + cardWidth; // Right edge of card (no gap)
+        if (isMobilePortrait) {
-        const buttonTop = cardTop + cardHeight * 0.3; // Vertically centered on card
+            // Below the held card, centered
+            const btnRect = this.discardBtn.getBoundingClientRect();
+            const buttonLeft = cardLeft + (cardWidth - (btnRect.width || 70)) / 2;
+            const buttonTop = cardTop + cardHeight + 4;
             this.discardBtn.style.left = `${buttonLeft}px`;
             this.discardBtn.style.top = `${buttonTop}px`;
+        } else {
+            // Right side of held card (desktop)
+            const buttonLeft = cardLeft + cardWidth;
+            const buttonTop = cardTop + cardHeight * 0.3;
+            this.discardBtn.style.left = `${buttonLeft}px`;
+            this.discardBtn.style.top = `${buttonTop}px`;
+        }
 
         if (card.rank === '★') {
             this.heldCardFloating.classList.add('joker');
@@ -3585,7 +3635,8 @@ class GolfGame {
         const centerX = (deckRect.left + deckRect.right + discardRect.left + discardRect.right) / 4;
         const cardWidth = deckRect.width;
         const cardHeight = deckRect.height;
-        const overlapOffset = cardHeight * 0.35;
+        const isMobilePortrait = document.body.classList.contains('mobile-portrait');
+        const overlapOffset = cardHeight * (isMobilePortrait ? 0.48 : 0.35);
         const cardLeft = centerX - cardWidth / 2;
         const cardTop = deckRect.top - overlapOffset;
 
@@ -3750,15 +3801,26 @@ class GolfGame {
         this.currentRoundSpan.textContent = this.gameState.current_round;
         this.totalRoundsSpan.textContent = this.gameState.total_rounds;
 
+        // Sync mobile bottom bar round info
+        const mobileRound = document.getElementById('mobile-current-round');
+        const mobileTotal = document.getElementById('mobile-total-rounds');
+        if (mobileRound) mobileRound.textContent = this.gameState.current_round;
+        if (mobileTotal) mobileTotal.textContent = this.gameState.total_rounds;
+
         // Show/hide final turn badge with enhanced urgency
+        // Note: markKnocker() is deferred until after opponent areas are rebuilt below
         const isFinalTurn = this.gameState.phase === 'final_turn';
         if (isFinalTurn) {
-            this.updateFinalTurnDisplay();
+            this.gameScreen.classList.add('final-turn-active');
+            this.finalTurnBadge.classList.remove('hidden');
+            if (!this.finalTurnAnnounced) {
+                this.playSound('alert');
+                this.finalTurnAnnounced = true;
+            }
         } else {
             this.finalTurnBadge.classList.add('hidden');
             this.gameScreen.classList.remove('final-turn-active');
             this.finalTurnAnnounced = false;
-            this.clearKnockerMark();
         }
 
         // Toggle not-my-turn class to disable hover effects when it's not player's turn
@@ -3780,7 +3842,7 @@ class GolfGame {
             : this.gameState.current_player_id;
         const displayedPlayer = this.gameState.players.find(p => p.id === displayedPlayerId);
         if (displayedPlayer && displayedPlayerId !== this.playerId) {
-            this.setStatus(`${displayedPlayer.name}'s turn`);
+            this.setStatus(`${displayedPlayer.name}'s turn`, 'opponent-turn');
         }
 
         // Update player header (name + score like opponents)
@@ -4124,6 +4186,13 @@ class GolfGame {
         // Update scoreboard panel
         this.updateScorePanel();
 
+        // Mark knocker AFTER opponent areas are rebuilt (otherwise innerHTML='' wipes it)
+        if (this.gameState.phase === 'final_turn') {
+            this.markKnocker(this.gameState.finisher_id);
+        } else {
+            this.clearKnockerMark();
+        }
+
         // Initialize anime.js hover listeners on newly created cards
         if (window.cardAnimations) {
             window.cardAnimations.initHoverListeners(this.playerCards);
@@ -4617,6 +4686,19 @@ class AuthManager {
         this.signupError = document.getElementById('signup-error');
         this.showSignupLink = document.getElementById('show-signup');
         this.showLoginLink = document.getElementById('show-login');
+        this.showForgotLink = document.getElementById('show-forgot');
+        this.forgotFormContainer = document.getElementById('forgot-form-container');
+        this.forgotForm = document.getElementById('forgot-form');
+        this.forgotEmail = document.getElementById('forgot-email');
+        this.forgotError = document.getElementById('forgot-error');
+        this.forgotSuccess = document.getElementById('forgot-success');
+        this.forgotBackLogin = document.getElementById('forgot-back-login');
+        this.resetFormContainer = document.getElementById('reset-form-container');
+        this.resetForm = document.getElementById('reset-form');
+        this.resetPassword = document.getElementById('reset-password');
+        this.resetPasswordConfirm = document.getElementById('reset-password-confirm');
+        this.resetError = document.getElementById('reset-error');
+        this.resetSuccess = document.getElementById('reset-success');
     }
 
     bindEvents() {
@@ -4637,6 +4719,20 @@ class AuthManager {
         this.loginForm?.addEventListener('submit', (e) => this.handleLogin(e));
         this.signupForm?.addEventListener('submit', (e) => this.handleSignup(e));
         this.logoutBtn?.addEventListener('click', () => this.logout());
+        this.showForgotLink?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.showForm('forgot');
+        });
+        this.forgotBackLogin?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.showForm('login');
+        });
+        this.forgotForm?.addEventListener('submit', (e) => this.handleForgotPassword(e));
+        this.resetForm?.addEventListener('submit', (e) => this.handleResetPassword(e));
+
+        // Check URL for reset token or invite code on page load
+        this.checkResetToken();
+        this.checkInviteCode();
     }
 
     showModal(form = 'login') {
@@ -4651,14 +4747,24 @@ class AuthManager {
     }
 
     showForm(form) {
+        this.loginFormContainer.classList.add('hidden');
+        this.signupFormContainer.classList.add('hidden');
+        this.forgotFormContainer?.classList.add('hidden');
+        this.resetFormContainer?.classList.add('hidden');
+        this.clearErrors();
+
         if (form === 'login') {
             this.loginFormContainer.classList.remove('hidden');
-            this.signupFormContainer.classList.add('hidden');
             this.loginUsername.focus();
-        } else {
+        } else if (form === 'signup') {
-            this.loginFormContainer.classList.add('hidden');
             this.signupFormContainer.classList.remove('hidden');
             this.signupUsername.focus();
+        } else if (form === 'forgot') {
+            this.forgotFormContainer?.classList.remove('hidden');
+            this.forgotEmail?.focus();
+        } else if (form === 'reset') {
+            this.resetFormContainer?.classList.remove('hidden');
+            this.resetPassword?.focus();
         }
     }
 
@@ -4671,6 +4777,10 @@ class AuthManager {
     clearErrors() {
         this.loginError.textContent = '';
         this.signupError.textContent = '';
+        if (this.forgotError) this.forgotError.textContent = '';
+        if (this.forgotSuccess) this.forgotSuccess.textContent = '';
+        if (this.resetError) this.resetError.textContent = '';
+        if (this.resetSuccess) this.resetSuccess.textContent = '';
     }
 
     async handleLogin(e) {
@@ -4761,4 +4871,89 @@ class AuthManager {
             this.lobbyGameControls?.classList.add('hidden');
         }
     }
+
+    checkResetToken() {
+        const params = new URLSearchParams(window.location.search);
+        const token = params.get('token');
+        const path = window.location.pathname;
+
+        if (token && path.includes('reset-password')) {
+            this._resetToken = token;
+            this.showModal('reset');
+            // Clean URL
+            window.history.replaceState({}, '', '/');
+        }
+    }
+
+    checkInviteCode() {
+        const params = new URLSearchParams(window.location.search);
+        const invite = params.get('invite');
+
+        if (invite) {
+            this.signupInviteCode.value = invite;
+            this.showModal('signup');
+            // Clean URL
+            window.history.replaceState({}, '', '/');
+        }
+    }
+
+    async handleForgotPassword(e) {
+        e.preventDefault();
+        this.clearErrors();
+
+        const email = this.forgotEmail.value.trim();
+
+        try {
+            const response = await fetch('/api/auth/forgot-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                this.forgotError.textContent = data.detail || 'Request failed';
+                return;
+            }
+
+            this.forgotSuccess.textContent = 'If an account exists with that email, a reset link has been sent.';
+            this.forgotForm.reset();
+        } catch (err) {
+            this.forgotError.textContent = 'Connection error';
+        }
+    }
+
+    async handleResetPassword(e) {
+        e.preventDefault();
+        this.clearErrors();
+
+        const password = this.resetPassword.value;
+        const confirm = this.resetPasswordConfirm.value;
+
+        if (password !== confirm) {
+            this.resetError.textContent = 'Passwords do not match';
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/auth/reset-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ token: this._resetToken, new_password: password }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                this.resetError.textContent = data.detail || 'Reset failed';
+                return;
+            }
+
+            this.resetSuccess.textContent = 'Password reset! You can now log in.';
+            this.resetForm.reset();
+            setTimeout(() => this.showForm('login'), 2000);
+        } catch (err) {
+            this.resetError.textContent = 'Connection error';
+        }
+    }
 }

client/card-animations.js

@@ -46,7 +46,8 @@ class CardAnimations {
         const centerX = (deckRect.left + deckRect.right + discardRect.left + discardRect.right) / 4;
         const cardWidth = deckRect.width;
         const cardHeight = deckRect.height;
-        const overlapOffset = cardHeight * 0.35;
+        const isMobilePortrait = document.body.classList.contains('mobile-portrait');
+        const overlapOffset = cardHeight * (isMobilePortrait ? 0.48 : 0.35);
 
         return {
             left: centerX - cardWidth / 2,
@@ -155,12 +156,20 @@ class CardAnimations {
         }
         this.activeAnimations.clear();
 
-        // Remove all animation card elements (including those marked as animating)
+        // Remove all animation overlay elements
-        document.querySelectorAll('.draw-anim-card').forEach(el => {
+        document.querySelectorAll('.draw-anim-card, .traveling-card, .deal-anim-container').forEach(el => {
             delete el.dataset.animating;
             el.remove();
         });
 
+        // Restore visibility on any cards hidden during animations
+        document.querySelectorAll('.card[style*="opacity: 0"], .card[style*="opacity:0"]').forEach(el => {
+            el.style.opacity = '';
+        });
+        document.querySelectorAll('.card[style*="visibility: hidden"], .card[style*="visibility:hidden"]').forEach(el => {
+            el.style.visibility = '';
+        });
+
         // Restore discard pile visibility if it was hidden during animation
         const discardPile = document.getElementById('discard');
         if (discardPile && discardPile.style.opacity === '0') {
@@ -756,22 +765,28 @@ class CardAnimations {
 
             anime({
                 targets: element,
-                translateX: [0, -8, 8, -6, 4, 0],
+                translateX: [0, -6, 6, -4, 3, 0],
-                duration: 400,
+                duration: 300,
                 easing: 'easeInOutQuad'
             });
         };
 
-        // Do initial shake, then repeat every 3 seconds
+        // Delay first shake by 5 seconds, then repeat every 2 seconds
+        const timeout = setTimeout(() => {
+            if (!this.activeAnimations.has(id)) return;
             doShake();
-        const interval = setInterval(doShake, 3000);
+            const interval = setInterval(doShake, 2000);
-        this.activeAnimations.set(id, { interval });
+            const entry = this.activeAnimations.get(id);
+            if (entry) entry.interval = interval;
+        }, 5000);
+        this.activeAnimations.set(id, { timeout });
     }
 
     stopTurnPulse(element) {
         const id = 'turnPulse';
         const existing = this.activeAnimations.get(id);
         if (existing) {
+            if (existing.timeout) clearTimeout(existing.timeout);
             if (existing.interval) clearInterval(existing.interval);
             if (existing.pause) existing.pause();
             this.activeAnimations.delete(id);
@@ -1515,6 +1530,7 @@ class CardAnimations {
 
         // Create container for animation cards
         const container = document.createElement('div');
+        container.className = 'deal-anim-container';
         container.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1000;';
         document.body.appendChild(container);
 

client/index.html

@@ -19,6 +19,8 @@
             <h1><img src="golfball-logo.svg" alt="" class="golfball-logo"><span class="golfer-swing">🏌️</span><span class="kicked-ball">⚪</span> <span class="golf-title">Golf</span></h1>
             <p class="subtitle">6-Card Golf Card Game <button id="rules-btn" class="btn btn-small btn-rules">Rules</button> <button id="leaderboard-btn" class="btn btn-small leaderboard-btn">Leaderboard</button></p>
 
+            <div class="alpha-banner">Alpha &mdash; Things may break. Stats may be wiped.</div>
+
             <!-- Auth prompt for unauthenticated users -->
             <div id="auth-prompt" class="auth-prompt">
                 <p>Log in or sign up to play.</p>
@@ -303,7 +305,6 @@
                             <div id="final-turn-badge" class="final-turn-badge hidden">
                                 <span class="final-turn-icon">⚡</span>
                                 <span class="final-turn-text">FINAL TURN</span>
-                                <span class="final-turn-remaining"></span>
                             </div>
                         </div>
                         <div class="header-col header-col-right">
@@ -327,7 +328,12 @@
                                         </div>
                                         <span class="held-label">Holding</span>
                                     </div>
+                                    <div class="pile-wrapper">
+                                        <span class="pile-label">DRAW</span>
                                         <div id="deck" class="card card-back"></div>
+                                    </div>
+                                    <div class="pile-wrapper">
+                                        <span class="pile-label">DISCARD</span>
                                         <div class="discard-stack">
                                             <div id="discard" class="card">
                                                 <span id="discard-content"></span>
@@ -342,6 +348,7 @@
                                         </div>
                                     </div>
                                 </div>
+                            </div>
 
                             <div class="player-section">
                                 <div class="player-area">
@@ -397,12 +404,21 @@
                         <tbody></tbody>
                     </table>
                 </div>
+
             </div>
 
             <!-- Mobile bottom bar (hidden on desktop) -->
             <div id="mobile-bottom-bar">
-                <button class="mobile-bar-btn" data-drawer="standings-panel">Standings</button>
+                <div class="mobile-round-info">Hole <span id="mobile-current-round">1</span>/<span id="mobile-total-rounds">9</span></div>
-                <button class="mobile-bar-btn" data-drawer="scoreboard">Scores</button>
+                <button class="mobile-bar-btn mobile-rules-btn" id="mobile-rules-btn" data-drawer="rules-drawer"><span id="mobile-rules-icon">RULES</span></button>
+                <button class="mobile-bar-btn" data-drawer="standings-panel">Scorecard</button>
+                <button id="mobile-leave-btn" class="mobile-bar-btn mobile-leave-btn">End Game</button>
+            </div>
+
+            <!-- Mobile rules drawer -->
+            <div id="rules-drawer" class="side-panel rules-drawer-panel">
+                <h4>Active Rules</h4>
+                <div id="mobile-rules-content"></div>
             </div>
 
             <!-- Drawer backdrop for mobile -->
@@ -412,9 +428,8 @@
         <!-- Rules Screen -->
         <div id="rules-screen" class="screen">
             <div class="rules-container">
-                <button id="rules-back-btn" class="btn rules-back-btn">« Back</button>
-
                 <div class="rules-header">
+                    <button id="rules-back-btn" class="btn rules-back-btn">« Back</button>
                     <h1><span class="golfer-logo">🏌️</span> <span class="golf-title">Golf Rules</span></h1>
                     <p class="rules-subtitle">6-Card Golf Card Game - Complete Guide</p>
                 </div>
@@ -730,9 +745,8 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
         <!-- Leaderboard Screen -->
         <div id="leaderboard-screen" class="screen">
             <div class="leaderboard-container">
-                <button id="leaderboard-back-btn" class="btn leaderboard-back-btn">&laquo; Back</button>
-
                 <div class="leaderboard-header">
+                    <button id="leaderboard-back-btn" class="btn leaderboard-back-btn">&laquo; Back</button>
                     <h1>Leaderboard</h1>
                     <p class="leaderboard-subtitle">Top players ranked by performance</p>
                 </div>
@@ -837,6 +851,38 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
                     <button type="submit" class="btn btn-primary btn-full">Login</button>
                 </form>
                 <p class="auth-switch">Don't have an account? <a href="#" id="show-signup">Sign up</a></p>
+                <p class="auth-switch"><a href="#" id="show-forgot">Forgot password?</a></p>
+            </div>
+
+            <!-- Forgot Password Form -->
+            <div id="forgot-form-container" class="hidden">
+                <h3>Reset Password</h3>
+                <p class="auth-hint">Enter your email and we'll send you a reset link.</p>
+                <form id="forgot-form">
+                    <div class="form-group">
+                        <input type="email" id="forgot-email" placeholder="Email" required>
+                    </div>
+                    <p id="forgot-error" class="error"></p>
+                    <p id="forgot-success" class="success"></p>
+                    <button type="submit" class="btn btn-primary btn-full">Send Reset Link</button>
+                </form>
+                <p class="auth-switch"><a href="#" id="forgot-back-login">Back to login</a></p>
+            </div>
+
+            <!-- Reset Password Form (from email link) -->
+            <div id="reset-form-container" class="hidden">
+                <h3>Set New Password</h3>
+                <form id="reset-form">
+                    <div class="form-group">
+                        <input type="password" id="reset-password" placeholder="New password" required minlength="8">
+                    </div>
+                    <div class="form-group">
+                        <input type="password" id="reset-password-confirm" placeholder="Confirm password" required minlength="8">
+                    </div>
+                    <p id="reset-error" class="error"></p>
+                    <p id="reset-success" class="success"></p>
+                    <button type="submit" class="btn btn-primary btn-full">Reset Password</button>
+                </form>
             </div>
 
             <!-- Signup Form -->

client/style.css

@@ -445,7 +445,21 @@ h1 {
 .subtitle {
     text-align: center;
     opacity: 0.8;
-    margin-bottom: 40px;
+    margin-bottom: 20px;
+}
+
+.alpha-banner {
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    color: rgba(255, 200, 100, 0.9);
+    background: rgba(244, 164, 96, 0.1);
+    border: 1px solid rgba(244, 164, 96, 0.25);
+    border-radius: 20px;
+    padding: 5px 16px;
+    margin: 0 auto 30px;
+    max-width: 320px;
 }
 
 h2 {
@@ -722,8 +736,8 @@ input::placeholder {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
-    padding: 10px 20px;
+    padding: 6px 12px;
-    background: rgba(0,0,0,0.35);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
     font-size: 0.9rem;
     width: 100vw;
     margin-left: calc(-50vw + 50%);
@@ -1110,6 +1124,20 @@ input::placeholder {
     align-items: flex-start;
 }
 
+.pile-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pile-label {
+    font-size: 0.55rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    color: rgba(255, 255, 255, 0.4);
+    margin-bottom: 3px;
+}
+
 /* Gentle pulse when it's your turn to draw - handled by anime.js */
 /* The .your-turn-to-draw class triggers anime.js startTurnPulse() */
 
@@ -1640,7 +1668,7 @@ input::placeholder {
 }
 
 .status-message.your-turn {
-    background: linear-gradient(135deg, #b5d484 0%, #9ab973 100%);
+    background: linear-gradient(135deg, #c8e6a0 0%, #8fbf5a 100%);
     color: #2d3436;
 }
 
@@ -1716,7 +1744,7 @@ input::placeholder {
     flex-direction: column;
     align-items: center;
     position: relative;
-    padding: 10px;
+    padding: 0;
 }
 
 .game-layout {
@@ -2784,26 +2812,63 @@ input::placeholder {
 /* Mobile adjustments for final results modal */
 @media (max-width: 500px) {
     .final-results-content {
-        padding: 20px 25px;
+        padding: 15px 12px;
+        width: 95%;
     }
 
     .final-results-content h2 {
-        font-size: 1.5rem;
+        font-size: 1.3rem;
+        margin-bottom: 10px;
+    }
+
+    .double-victory-banner {
+        padding: 8px 12px;
+        font-size: 0.95rem;
+        margin-bottom: 12px;
     }
 
     .final-rankings {
-        flex-direction: column;
+        flex-direction: row;
-        gap: 15px;
+        gap: 8px;
+        margin-bottom: 15px;
+    }
+
+    .final-ranking-section {
+        padding: 8px;
+    }
+
+    .final-ranking-section h3 {
+        font-size: 0.7rem;
+        margin-bottom: 6px;
+        padding-bottom: 4px;
     }
 
     .final-rank-row {
+        font-size: 0.8rem;
+        padding: 4px 5px;
+        margin-bottom: 2px;
+    }
+
+    .final-rank-row .rank-pos {
+        width: 22px;
         font-size: 0.9rem;
-        padding: 6px 8px;
+    }
+
+    .final-rank-row .rank-val {
+        font-size: 0.8rem;
+    }
+
+    .final-actions {
+        flex-direction: row;
+        gap: 8px;
+        padding-bottom: 60px;
     }
 
     .final-actions .btn {
-        min-width: 120px;
+        min-width: 0;
-        padding: 12px 20px;
+        flex: 1;
+        padding: 10px 12px;
+        font-size: 0.9rem;
     }
 }
 
@@ -2840,12 +2905,15 @@ input::placeholder {
 
 /* Rules back button */
 .rules-back-btn {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: auto;
     padding: 4px 12px;
     font-size: 0.8rem;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: rgba(255, 255, 255, 0.7);
-    margin-bottom: 15px;
 }
 
 .rules-back-btn:hover {
@@ -2861,6 +2929,7 @@ input::placeholder {
 
 /* Rules header */
 .rules-header {
+    position: relative;
     text-align: center;
     margin-bottom: 25px;
     padding-bottom: 20px;
@@ -3275,7 +3344,11 @@ input::placeholder {
     display: none;
 }
 
-/* Hide global auth-bar when game screen is active */
+/* Hide global auth-bar and remove top padding when game screen is active */
+#app:has(#game-screen.active) {
+    padding-top: 0;
+}
+
 #app:has(#game-screen.active) > .auth-bar {
     display: none !important;
 }
@@ -3404,6 +3477,20 @@ input::placeholder {
     text-align: center;
 }
 
+.modal-auth .success {
+    color: #4ade80;
+    font-size: 0.85rem;
+    margin: 10px 0;
+    text-align: center;
+}
+
+.modal-auth .auth-hint {
+    color: #94a3b8;
+    font-size: 0.85rem;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
 /* ===========================================
    MATCHMAKING SCREEN
    =========================================== */
@@ -3483,11 +3570,15 @@ input::placeholder {
     border-radius: 12px;
     padding: 20px 25px;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 0;
 }
 
 .leaderboard-header {
+    position: relative;
     text-align: center;
     margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 2px solid rgba(244, 164, 96, 0.3);
 }
 
 .leaderboard-header h1 {
@@ -3504,12 +3595,15 @@ input::placeholder {
 
 /* Leaderboard back button */
 .leaderboard-back-btn {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: auto;
     padding: 4px 12px;
     font-size: 0.8rem;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: rgba(255, 255, 255, 0.7);
-    margin-bottom: 15px;
 }
 
 .leaderboard-back-btn:hover {
@@ -4278,6 +4372,15 @@ input::placeholder {
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
 }
 
+.player-area .dealer-chip {
+    width: 38px;
+    height: 38px;
+    font-size: 18px;
+    border-width: 2px;
+    bottom: -22px;
+    left: -22px;
+}
+
 /* --- V3_03: Round End Reveal --- */
 .reveal-prompt {
     position: fixed;
@@ -4359,6 +4462,13 @@ input::placeholder {
 .opponent-area.is-knocker {
     border: 2px solid #ff6b35;
     border-radius: 8px;
+    box-shadow: 0 0 12px 3px rgba(255, 107, 53, 0.4);
+    animation: knocker-glow 2s ease-in-out infinite;
+}
+
+@keyframes knocker-glow {
+    0%, 100% { box-shadow: 0 0 12px 3px rgba(255, 107, 53, 0.4); }
+    50% { box-shadow: 0 0 20px 6px rgba(255, 107, 53, 0.6); }
 }
 
 .knocker-badge {
@@ -4892,7 +5002,7 @@ body.screen-shake {
 }
 
 body.mobile-portrait {
-    height: 100dvh;
+    height: var(--app-height, 100vh);
     overflow: hidden;
     overscroll-behavior: contain;
     touch-action: manipulation;
@@ -4900,34 +5010,38 @@ body.mobile-portrait {
 
 body.mobile-portrait #app {
     padding: 0;
-    height: 100dvh;
+    height: var(--app-height, 100vh);
     overflow: hidden;
 }
 
 /* --- Mobile: Game screen fills viewport --- */
 /* IMPORTANT: Must include .active to avoid overriding .screen { display: none } */
 body.mobile-portrait #game-screen.active {
-    height: 100dvh;
+    height: var(--app-height, 100vh);
+    max-height: var(--app-height, 100vh);
     overflow: hidden;
     margin-left: 0;
     width: 100%;
+    padding: 0;
     display: flex;
     flex-direction: column;
 }
 
 body.mobile-portrait .game-layout {
-    flex: 1;
+    flex: 1 1 0%;
     flex-direction: column;
     overflow: hidden;
     min-height: 0;
+    max-height: 100%;
 }
 
 body.mobile-portrait .game-main {
-    flex: 1;
+    flex: 1 1 0%;
     gap: 0;
     justify-content: flex-start;
     overflow: hidden;
     min-height: 0;
+    max-height: 100%;
 }
 
 /* --- Mobile: Compact header (single row) --- */
@@ -4935,14 +5049,15 @@ body.mobile-portrait .game-header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 4px 8px;
+    padding: 6px 8px;
-    padding-top: calc(4px + env(safe-area-inset-top, 0px));
+    padding-top: calc(6px + env(safe-area-inset-top, 0px));
     font-size: 0.75rem;
-    min-height: 32px;
+    min-height: 0;
     width: 100%;
     margin-left: 0;
     gap: 4px;
     margin-bottom: 4px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
 }
 
 body.mobile-portrait .header-col-left {
@@ -4960,15 +5075,23 @@ body.mobile-portrait .header-col-right {
     gap: 4px;
 }
 
-/* Hide non-essential header items on mobile */
+/* Hide items moved to bottom bar on mobile */
 body.mobile-portrait .active-rules-bar,
 body.mobile-portrait .game-username,
-body.mobile-portrait #game-logout-btn {
+body.mobile-portrait #game-logout-btn,
+body.mobile-portrait .game-header .round-info,
+body.mobile-portrait .game-header #leave-game-btn {
     display: none !important;
 }
 
+body.mobile-portrait .rules-container,
+body.mobile-portrait .leaderboard-container,
+body.mobile-portrait #matchmaking-screen {
+    margin-top: 50px;
+}
+
 body.mobile-portrait .status-message {
-    font-size: 0.75rem;
+    font-size: 1.02rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -4986,7 +5109,7 @@ body.mobile-portrait #leave-game-btn {
 }
 
 body.mobile-portrait .mute-btn {
-    font-size: 0.85rem;
+    font-size: 0.95rem;
     padding: 2px;
 }
 
@@ -5003,24 +5126,24 @@ body.mobile-portrait .game-table {
     align-items: center;
     justify-content: flex-start;
     gap: 0 !important;
-    flex: 1;
+    flex: 1 1 0%;
-    overflow: hidden;
+    overflow-x: clip;
-    padding: 0 4px;
+    overflow-y: hidden;
+    padding: 0 10px;
     min-height: 0;
+    max-height: 100%;
 }
 
-/* --- Mobile: Opponents as flat horizontal strip, pinned to top --- */
+/* --- Mobile: Opponents wrap at 3 per row (max 5 opponents = 3+2) --- */
 body.mobile-portrait .opponents-row {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
-    gap: 6px;
+    gap: 9px 10px;
     min-height: 0 !important;
-    padding: 2px 8px 6px;
+    padding: 2px 4px 12px;
-    overflow-x: auto;
+    overflow: visible;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
     flex-shrink: 0;
 }
 
@@ -5029,24 +5152,26 @@ body.mobile-portrait .player-row {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
     gap: 10px;
     width: 100%;
-    flex: 1;
+    flex: 1 1 0%;
     min-height: 0;
+    max-height: 100%;
+    overflow: hidden;
 }
 
 /* Remove all arch rotation and margin on mobile */
 body.mobile-portrait .opponents-row .opponent-area {
     margin-bottom: 0 !important;
     transform: none !important;
-    flex-shrink: 0;
 }
 
 body.mobile-portrait .opponent-area {
-    padding: 3px 5px 4px;
+    padding: 3px 4px 4px;
     border-radius: 6px;
     min-width: 0;
+    flex: 0 0 calc((100% - 20px) / 3);
     position: relative;
     overflow: visible;
 }
@@ -5061,35 +5186,42 @@ body.mobile-portrait .opponent-area .dealer-chip {
 }
 
 body.mobile-portrait .opponent-area h4 {
-    font-size: 0.6rem;
+    font-size: 0.85rem;
     margin: 0 0 2px 0;
     padding: 2px 4px;
-    max-width: 110px;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    box-sizing: border-box;
 }
 
 body.mobile-portrait .opponent-area .card-grid {
-    grid-template-columns: repeat(3, 32px) !important;
+    grid-template-columns: repeat(3, 35px) !important;
     gap: 2px !important;
 }
 
 body.mobile-portrait .opponent-area .card {
-    width: 32px !important;
+    width: 35px !important;
-    height: 45px !important;
+    height: 49px !important;
-    font-size: 0.6rem !important;
+    font-size: 1.05rem !important;
+    line-height: 1.05;
     border-radius: 3px;
 }
 
+body.mobile-portrait .opponent-area .knocker-badge {
+    top: auto;
+    bottom: -10px;
+}
+
 body.mobile-portrait .opponent-showing {
-    font-size: 0.55rem;
+    font-size: 0.85rem;
     padding: 0px 3px;
     margin-left: 3px;
 }
 
 /* --- Mobile: Deck/Discard area centered --- */
 body.mobile-portrait .table-center {
-    padding: 5px 10px;
+    padding: 20px 10px 5px;
     border-radius: 8px;
 }
 
@@ -5098,18 +5230,18 @@ body.mobile-portrait .deck-area {
     align-items: flex-start;
 }
 
-body.mobile-portrait .deck-area > .card,
+body.mobile-portrait .deck-area .card,
 body.mobile-portrait #deck,
 body.mobile-portrait #discard {
-    width: 72px !important;
+    width: 64px !important;
-    height: 101px !important;
+    height: 90px !important;
-    font-size: 1.5rem !important;
+    font-size: 1.4rem !important;
 }
 
 /* Held card floating should NOT be constrained to deck/discard size */
 body.mobile-portrait .held-card-floating {
-    width: 72px !important;
+    width: 64px !important;
-    height: 101px !important;
+    height: 90px !important;
 }
 
 body.mobile-portrait .discard-stack {
@@ -5121,7 +5253,8 @@ body.mobile-portrait #discard-btn {
     position: fixed;
     writing-mode: horizontal-tb;
     text-orientation: initial;
-    padding: 8px 16px;
+    width: auto;
+    padding: 6px 18px;
     font-size: 0.8rem;
     border-radius: 8px;
 }
@@ -5133,10 +5266,21 @@ body.mobile-portrait .player-section {
 }
 
 body.mobile-portrait .player-area {
-    padding: 5px 8px;
+    padding: 5px 8px 9px;
     border-radius: 8px;
     width: auto;
     display: inline-block;
+    margin-bottom: 6px;
+}
+
+body.mobile-portrait .player-area .dealer-chip {
+    width: 22px;
+    height: 22px;
+    font-size: 11px;
+    border-width: 2px;
+    top: auto;
+    bottom: -8px;
+    left: -8px;
 }
 
 body.mobile-portrait .player-area h4 {
@@ -5151,15 +5295,15 @@ body.mobile-portrait .player-showing {
 
 /* Player hand: fixed-size cards */
 body.mobile-portrait .player-section .card-grid {
-    grid-template-columns: repeat(3, 72px) !important;
+    grid-template-columns: repeat(3, 64px) !important;
     gap: 5px !important;
     justify-content: center;
 }
 
 body.mobile-portrait .player-section .card {
-    width: 72px !important;
+    width: 64px !important;
-    height: 101px !important;
+    height: 90px !important;
-    font-size: 1.5rem !important;
+    font-size: 1.4rem !important;
 }
 
 /* Real cards: font-size is now set inline by card-manager.js (proportional to card width).
@@ -5183,9 +5327,10 @@ body.mobile-portrait .side-panel {
     padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
     z-index: 600;
     transform: translateY(100%);
-    transition: transform 0.3s ease-out;
+    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
 }
 
 body.mobile-portrait .side-panel.left-panel,
@@ -5220,7 +5365,7 @@ body.mobile-portrait .drawer-backdrop {
     z-index: 599;
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 body.mobile-portrait .drawer-backdrop.visible {
@@ -5256,45 +5401,126 @@ body.mobile-portrait .game-buttons {
 /* --- Mobile: Bottom bar --- */
 body.mobile-portrait #mobile-bottom-bar {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
-    background: rgba(0, 0, 0, 0.5);
+    align-self: stretch;
-    backdrop-filter: blur(10px);
+    gap: 8px;
-    padding: 6px 16px;
+    background: none;
-    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
-    width: 100%;
-    z-index: 500;
     flex-shrink: 0;
-    border-top: 1px solid rgba(244, 164, 96, 0.2);
+    padding: 6px 12px;
+    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+    z-index: 900;
+}
+
+/* Hole indicator — pinned left */
+body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
+    margin-right: auto;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.77rem;
+    font-weight: 700;
+    white-space: nowrap;
+    letter-spacing: 0.03em;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 20px;
+    padding: 4px 9px;
+}
+
+/* End Game — pinned right */
+body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn {
+    margin-left: auto;
+    background: rgba(180, 60, 60, 0.3) !important;
+    border-color: rgba(220, 80, 80, 0.4) !important;
+    color: rgba(255, 120, 120, 0.9) !important;
+}
+
+body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn:active {
+    background: rgba(180, 60, 60, 0.5) !important;
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn {
-    background: none;
+    background: rgba(255, 255, 255, 0.06);
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(255, 255, 255, 0.65);
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     font-weight: 600;
-    padding: 6px 16px;
+    padding: 5px 10px;
     cursor: pointer;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
-    border-radius: 6px;
+    border-radius: 20px;
-    transition: background 0.15s, color 0.15s;
+    transition: all 0.25s ease;
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn:active {
-    background: rgba(244, 164, 96, 0.3);
+    transform: scale(0.95);
-    color: #f4a460;
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn.active {
+    color: #1a1a2e;
+    background: linear-gradient(135deg, #f4a460, #e8935a);
+    border-color: transparent;
+    box-shadow: 0 2px 12px rgba(244, 164, 96, 0.4);
+}
+
+/* --- Mobile: Rules indicator button --- */
+body.mobile-portrait #mobile-bottom-bar .mobile-rules-btn {
+    padding: 4px 9px;
+    font-size: 0.77rem;
+    font-weight: 700;
+    min-width: unset;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.7);
+}
+
+body.mobile-portrait #mobile-bottom-bar .mobile-rules-btn.house-rules {
+    background: rgba(244, 164, 96, 0.25);
+    border-color: rgba(244, 164, 96, 0.4);
     color: #f4a460;
-    background: rgba(244, 164, 96, 0.15);
+}
+
+/* --- Mobile: Rules drawer content --- */
+#rules-drawer {
+    display: none;
+}
+
+body.mobile-portrait #rules-drawer {
+    display: block;
+}
+
+body.mobile-portrait .rules-drawer-panel .mobile-rules-content-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 8px;
+}
+
+body.mobile-portrait .rules-drawer-panel .rule-tag {
+    background: rgba(244, 164, 96, 0.3);
+    color: #f4a460;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+body.mobile-portrait .rules-drawer-panel .rule-tag.standard {
+    background: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.7);
+}
+
+body.mobile-portrait .rules-drawer-panel .rule-tag.unranked {
+    background: rgba(220, 80, 80, 0.3);
+    color: #f08080;
+    border: 1px solid rgba(220, 80, 80, 0.4);
 }
 
 /* --- Mobile: Non-game screens --- */
 body.mobile-portrait #lobby-screen {
-    padding: 50px 12px 15px;
+    padding: 55px 12px 15px;
     overflow-y: auto;
     max-height: 100dvh;
 }
@@ -5305,6 +5531,66 @@ body.mobile-portrait #waiting-screen {
     max-height: 100dvh;
 }
 
+/* --- Mobile: Compact scoresheet modal --- */
+body.mobile-portrait .scoresheet-content {
+    padding: 14px 16px;
+    max-height: 90vh;
+    max-height: var(--app-height, 90vh);
+}
+
+body.mobile-portrait .ss-header {
+    font-size: 0.95rem;
+    margin-bottom: 10px;
+}
+
+body.mobile-portrait .ss-players {
+    gap: 8px;
+}
+
+body.mobile-portrait .ss-player-row {
+    padding: 8px 10px;
+}
+
+body.mobile-portrait .ss-player-header {
+    margin-bottom: 4px;
+}
+
+body.mobile-portrait .ss-player-name {
+    font-size: 0.8rem;
+}
+
+body.mobile-portrait .ss-mini-card {
+    width: 30px;
+    height: 22px;
+    font-size: 0.6rem;
+}
+
+body.mobile-portrait .ss-columns {
+    gap: 6px;
+    margin-bottom: 4px;
+}
+
+body.mobile-portrait .ss-column {
+    gap: 2px;
+    padding: 3px 4px;
+}
+
+body.mobile-portrait .ss-col-score {
+    font-size: 0.6rem;
+}
+
+body.mobile-portrait .ss-scores {
+    font-size: 0.7rem;
+    gap: 12px;
+    margin-top: 2px;
+}
+
+body.mobile-portrait .ss-next-btn {
+    margin-top: 10px;
+    padding: 8px;
+    font-size: 0.85rem;
+}
+
 /* --- Mobile: Very short screens (e.g. iPhone SE) --- */
 @media (max-height: 600px) {
     body.mobile-portrait .opponents-row {
@@ -5312,21 +5598,22 @@ body.mobile-portrait #waiting-screen {
     }
 
     body.mobile-portrait .opponent-area .card-grid {
-        grid-template-columns: repeat(3, 26px) !important;
+        grid-template-columns: repeat(3, 29px) !important;
         gap: 1px !important;
     }
 
     body.mobile-portrait .opponent-area .card {
-        width: 26px !important;
+        width: 29px !important;
-        height: 36px !important;
+        height: 40px !important;
-        font-size: 0.45rem !important;
+        font-size: 0.8rem !important;
+        line-height: 1.05;
     }
 
     body.mobile-portrait .table-center {
         padding: 3px 8px;
     }
 
-    body.mobile-portrait .deck-area > .card,
+    body.mobile-portrait .deck-area .card,
     body.mobile-portrait #deck,
     body.mobile-portrait #discard {
         width: 60px !important;

docker-compose.prod.yml

@@ -26,6 +26,7 @@ services:
       - REDIS_URL=redis://redis:6379
       - SECRET_KEY=${SECRET_KEY}
       - RESEND_API_KEY=${RESEND_API_KEY:-}
+      - EMAIL_FROM=${EMAIL_FROM:-Golf Cards <noreply@contact.golfcards.club>}
       - SENTRY_DSN=${SENTRY_DSN:-}
       - ENVIRONMENT=production
       - LOG_LEVEL=INFO
@@ -60,6 +61,15 @@ services:
       - "traefik.http.routers.golf.entrypoints=websecure"
       - "traefik.http.routers.golf.tls=true"
       - "traefik.http.routers.golf.tls.certresolver=letsencrypt"
+      # www -> bare domain redirect
+      - "traefik.http.routers.golf-www.rule=Host(`www.${DOMAIN:-golf.example.com}`)"
+      - "traefik.http.routers.golf-www.entrypoints=websecure"
+      - "traefik.http.routers.golf-www.tls=true"
+      - "traefik.http.routers.golf-www.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.golf-www.middlewares=www-redirect"
+      - "traefik.http.middlewares.www-redirect.redirectregex.regex=^https://www\\.(.+)"
+      - "traefik.http.middlewares.www-redirect.redirectregex.replacement=https://$${1}"
+      - "traefik.http.middlewares.www-redirect.redirectregex.permanent=true"
       - "traefik.http.services.golf.loadbalancer.server.port=8000"
       # WebSocket sticky sessions
       - "traefik.http.services.golf.loadbalancer.sticky.cookie=true"

scripts/deploy.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -e
+
+DROPLET="root@165.245.152.51"
+REMOTE_DIR="/opt/golfgame"
+
+echo "Deploying to $DROPLET..."
+ssh $DROPLET "cd $REMOTE_DIR && git pull origin main && docker compose -f docker-compose.prod.yml up -d --build app"
+echo "Deploy complete."

server/ai.py

@@ -1934,7 +1934,11 @@ def _log_cpu_action(logger, game_id: Optional[str], cpu_player: Player, game: Ga
 async def process_cpu_turn(
     game: Game, cpu_player: Player, broadcast_callback, game_id: Optional[str] = None
 ) -> None:
-    """Process a complete turn for a CPU player."""
+    """Process a complete turn for a CPU player.
+
+    May raise asyncio.CancelledError if the game is ended mid-turn.
+    The caller (check_and_run_cpu_turn) handles cancellation.
+    """
     import asyncio
     from services.game_logger import get_logger
 

server/handlers.py

@@ -229,7 +229,7 @@ async def handle_start_game(data: dict, ctx: ConnectionContext, *, broadcast_gam
                     "game_state": game_state,
                 })
 
-        await check_and_run_cpu_turn(ctx.current_room)
+        check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_flip_initial(data: dict, ctx: ConnectionContext, *, broadcast_game_state, check_and_run_cpu_turn, **kw) -> None:
@@ -240,7 +240,7 @@ async def handle_flip_initial(data: dict, ctx: ConnectionContext, *, broadcast_g
     async with ctx.current_room.game_lock:
         if ctx.current_room.game.flip_initial_cards(ctx.player_id, positions):
             await broadcast_game_state(ctx.current_room)
-            await check_and_run_cpu_turn(ctx.current_room)
+            check_and_run_cpu_turn(ctx.current_room)
 
 
 # ---------------------------------------------------------------------------
@@ -297,7 +297,7 @@ async def handle_swap(data: dict, ctx: ConnectionContext, *, broadcast_game_stat
 
             await broadcast_game_state(ctx.current_room)
             await asyncio.sleep(1.0)
-            await check_and_run_cpu_turn(ctx.current_room)
+            check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_discard(data: dict, ctx: ConnectionContext, *, broadcast_game_state, check_and_run_cpu_turn, **kw) -> None:
@@ -329,12 +329,12 @@ async def handle_discard(data: dict, ctx: ConnectionContext, *, broadcast_game_s
                     })
                 else:
                     await asyncio.sleep(0.5)
-                    await check_and_run_cpu_turn(ctx.current_room)
+                    check_and_run_cpu_turn(ctx.current_room)
             else:
                 logger.debug("Player discarded, waiting 0.5s before CPU turn")
                 await asyncio.sleep(0.5)
                 logger.debug("Post-discard delay complete, checking for CPU turn")
-                await check_and_run_cpu_turn(ctx.current_room)
+                check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_cancel_draw(data: dict, ctx: ConnectionContext, *, broadcast_game_state, **kw) -> None:
@@ -364,7 +364,7 @@ async def handle_flip_card(data: dict, ctx: ConnectionContext, *, broadcast_game
             )
 
         await broadcast_game_state(ctx.current_room)
-        await check_and_run_cpu_turn(ctx.current_room)
+        check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_skip_flip(data: dict, ctx: ConnectionContext, *, broadcast_game_state, check_and_run_cpu_turn, **kw) -> None:
@@ -380,7 +380,7 @@ async def handle_skip_flip(data: dict, ctx: ConnectionContext, *, broadcast_game
             )
 
             await broadcast_game_state(ctx.current_room)
-            await check_and_run_cpu_turn(ctx.current_room)
+            check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_flip_as_action(data: dict, ctx: ConnectionContext, *, broadcast_game_state, check_and_run_cpu_turn, **kw) -> None:
@@ -400,7 +400,7 @@ async def handle_flip_as_action(data: dict, ctx: ConnectionContext, *, broadcast
                 )
 
             await broadcast_game_state(ctx.current_room)
-            await check_and_run_cpu_turn(ctx.current_room)
+            check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_knock_early(data: dict, ctx: ConnectionContext, *, broadcast_game_state, check_and_run_cpu_turn, **kw) -> None:
@@ -418,7 +418,7 @@ async def handle_knock_early(data: dict, ctx: ConnectionContext, *, broadcast_ga
                 )
 
             await broadcast_game_state(ctx.current_room)
-            await check_and_run_cpu_turn(ctx.current_room)
+            check_and_run_cpu_turn(ctx.current_room)
 
 
 async def handle_next_round(data: dict, ctx: ConnectionContext, *, broadcast_game_state, check_and_run_cpu_turn, **kw) -> None:
@@ -443,7 +443,7 @@ async def handle_next_round(data: dict, ctx: ConnectionContext, *, broadcast_gam
                         "game_state": game_state,
                     })
 
-            await check_and_run_cpu_turn(ctx.current_room)
+            check_and_run_cpu_turn(ctx.current_room)
         else:
             await broadcast_game_state(ctx.current_room)
 
@@ -473,6 +473,15 @@ async def handle_end_game(data: dict, ctx: ConnectionContext, *, room_manager, c
         await ctx.websocket.send_json({"type": "error", "message": "Only the host can end the game"})
         return
 
+    # Cancel any running CPU turn task so the game ends immediately
+    if ctx.current_room.cpu_turn_task:
+        ctx.current_room.cpu_turn_task.cancel()
+        try:
+            await ctx.current_room.cpu_turn_task
+        except (asyncio.CancelledError, Exception):
+            pass
+        ctx.current_room.cpu_turn_task = None
+
     await ctx.current_room.broadcast({
         "type": "game_ended",
         "reason": "Host ended the game",

server/main.py

@@ -705,8 +705,40 @@ async def broadcast_game_state(room: Room):
                 })
 
 
-async def check_and_run_cpu_turn(room: Room):
+def check_and_run_cpu_turn(room: Room):
-    """Check if current player is CPU and run their turn."""
+    """Check if current player is CPU and start their turn as a background task.
+
+    The CPU turn chain runs as a fire-and-forget asyncio.Task stored on
+    room.cpu_turn_task. This allows the WebSocket message loop to remain
+    responsive so that end_game/leave messages can cancel the task immediately.
+    """
+    if room.game.phase not in (GamePhase.PLAYING, GamePhase.FINAL_TURN):
+        return
+
+    current = room.game.current_player()
+    if not current:
+        return
+
+    room_player = room.get_player(current.id)
+    if not room_player or not room_player.is_cpu:
+        return
+
+    task = asyncio.create_task(_run_cpu_chain(room))
+    room.cpu_turn_task = task
+
+    def _on_done(t: asyncio.Task):
+        # Clear the reference when the task finishes (success, cancel, or error)
+        if room.cpu_turn_task is t:
+            room.cpu_turn_task = None
+        if not t.cancelled() and t.exception():
+            logger.error(f"CPU turn task error in room {room.code}: {t.exception()}")
+
+    task.add_done_callback(_on_done)
+
+
+async def _run_cpu_chain(room: Room):
+    """Run consecutive CPU turns until a human player's turn or game ends."""
+    while True:
         if room.game.phase not in (GamePhase.PLAYING, GamePhase.FINAL_TURN):
             return
 
@@ -727,12 +759,18 @@ async def check_and_run_cpu_turn(room: Room):
 
         await process_cpu_turn(room.game, current, broadcast_cb, game_id=room.game_log_id)
 
-    # Check if next player is also CPU (chain CPU turns)
-    await check_and_run_cpu_turn(room)
-
 
 async def handle_player_leave(room: Room, player_id: str):
     """Handle a player leaving a room."""
+    # Cancel any running CPU turn task before cleanup
+    if room.cpu_turn_task:
+        room.cpu_turn_task.cancel()
+        try:
+            await room.cpu_turn_task
+        except (asyncio.CancelledError, Exception):
+            pass
+        room.cpu_turn_task = None
+
     room_code = room.code
     room_player = room.remove_player(player_id)
 
@@ -768,6 +806,10 @@ if os.path.exists(client_path):
     async def serve_replay_page(share_code: str):
         return FileResponse(os.path.join(client_path, "index.html"))
 
+    @app.get("/reset-password")
+    async def serve_reset_password_page():
+        return FileResponse(os.path.join(client_path, "index.html"))
+
     # Mount static files for everything else (JS, CSS, SVG, etc.)
     app.mount("/", StaticFiles(directory=client_path), name="static")
 

server/room.py

@@ -69,6 +69,7 @@ class Room:
     settings: dict = field(default_factory=lambda: {"decks": 1, "rounds": 1})
     game_log_id: Optional[str] = None
     game_lock: asyncio.Lock = field(default_factory=asyncio.Lock)
+    cpu_turn_task: Optional[asyncio.Task] = None
 
     def add_player(
         self,