Apply flush header with gradient to desktop/landscape view too

Remove game-screen padding and replace solid dark header background
with subtle dark-to-transparent gradient matching mobile treatment.

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
@@ -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;
 
@@ -3073,7 +3100,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();
     }
@@ -3419,15 +3449,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');
 
@@ -3750,6 +3771,12 @@ 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
         const isFinalTurn = this.gameState.phase === 'final_turn';
         if (isFinalTurn) {
@@ -4617,6 +4644,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 +4677,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 +4705,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 {
-            this.loginFormContainer.classList.add('hidden');
+        } else if (form === 'signup') {
             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 +4735,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 +4829,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/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">
@@ -401,8 +402,10 @@
 
             <!-- Mobile bottom bar (hidden on desktop) -->
             <div id="mobile-bottom-bar">
+                <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="standings-panel">Standings</button>
                 <button class="mobile-bar-btn" data-drawer="scoreboard">Scores</button>
+                <button id="mobile-leave-btn" class="mobile-bar-btn mobile-leave-btn">End Game</button>
             </div>
 
             <!-- Drawer backdrop for mobile -->
@@ -837,6 +840,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;
-    background: rgba(0,0,0,0.35);
+    padding: 6px 12px;
+    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%);
@@ -1716,7 +1730,7 @@ input::placeholder {
     flex-direction: column;
     align-items: center;
     position: relative;
-    padding: 10px;
+    padding: 0;
 }
 
 .game-layout {
@@ -3404,6 +3418,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
    =========================================== */
@@ -4892,7 +4920,7 @@ body.screen-shake {
 }
 
 body.mobile-portrait {
-    height: 100dvh;
+    height: var(--app-height, 100vh);
     overflow: hidden;
     overscroll-behavior: contain;
     touch-action: manipulation;
@@ -4900,34 +4928,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 +4967,15 @@ body.mobile-portrait .game-header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 4px 8px;
-    padding-top: calc(4px + env(safe-area-inset-top, 0px));
+    padding: 6px 8px;
+    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 +4993,17 @@ 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 .status-message {
-    font-size: 0.75rem;
+    font-size: 1.02rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -4986,7 +5021,7 @@ body.mobile-portrait #leave-game-btn {
 }
 
 body.mobile-portrait .mute-btn {
-    font-size: 0.85rem;
+    font-size: 0.95rem;
     padding: 2px;
 }
 
@@ -5003,24 +5038,24 @@ body.mobile-portrait .game-table {
     align-items: center;
     justify-content: flex-start;
     gap: 0 !important;
-    flex: 1;
-    overflow: hidden;
-    padding: 0 4px;
+    flex: 1 1 0%;
+    overflow-x: clip;
+    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: 4px 10px;
     min-height: 0 !important;
-    padding: 2px 8px 6px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
+    padding: 2px 4px 6px;
+    overflow: visible;
     flex-shrink: 0;
 }
 
@@ -5029,24 +5064,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,28 +5098,30 @@ 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;
-    height: 45px !important;
-    font-size: 0.6rem !important;
+    width: 35px !important;
+    height: 49px !important;
+    font-size: 1.05rem !important;
+    line-height: 1.05;
     border-radius: 3px;
 }
 
 body.mobile-portrait .opponent-showing {
-    font-size: 0.55rem;
+    font-size: 0.85rem;
     padding: 0px 3px;
     margin-left: 3px;
 }
@@ -5101,15 +5140,15 @@ body.mobile-portrait .deck-area {
 body.mobile-portrait .deck-area > .card,
 body.mobile-portrait #deck,
 body.mobile-portrait #discard {
-    width: 72px !important;
-    height: 101px !important;
-    font-size: 1.5rem !important;
+    width: 64px !important;
+    height: 90px !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;
-    height: 101px !important;
+    width: 64px !important;
+    height: 90px !important;
 }
 
 body.mobile-portrait .discard-stack {
@@ -5133,10 +5172,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;
+    bottom: auto;
+    top: -8px;
+    left: -8px;
 }
 
 body.mobile-portrait .player-area h4 {
@@ -5151,15 +5201,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;
-    height: 101px !important;
-    font-size: 1.5rem !important;
+    width: 64px !important;
+    height: 90px !important;
+    font-size: 1.4rem !important;
 }
 
 /* Real cards: font-size is now set inline by card-manager.js (proportional to card width).
@@ -5183,9 +5233,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 +5271,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 +5307,72 @@ body.mobile-portrait .game-buttons {
 /* --- Mobile: Bottom bar --- */
 body.mobile-portrait #mobile-bottom-bar {
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
-    padding: 6px 16px;
-    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
-    width: 100%;
-    z-index: 500;
+    gap: 8px;
+    background: none;
     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 with pill background */
+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;
-    border: none;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.75rem;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.65);
+    font-size: 0.7rem;
     font-weight: 600;
-    padding: 6px 16px;
+    padding: 5px 10px;
     cursor: pointer;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
-    border-radius: 6px;
-    transition: background 0.15s, color 0.15s;
+    letter-spacing: 0.1em;
+    border-radius: 20px;
+    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);
-    color: #f4a460;
+    transform: scale(0.95);
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn.active {
-    color: #f4a460;
-    background: rgba(244, 164, 96, 0.15);
+    color: #1a1a2e;
+    background: linear-gradient(135deg, #f4a460, #e8935a);
+    border-color: transparent;
+    box-shadow: 0 2px 12px rgba(244, 164, 96, 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 +5383,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,14 +5450,15 @@ 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;
-        height: 36px !important;
-        font-size: 0.45rem !important;
+        width: 29px !important;
+        height: 40px !important;
+        font-size: 0.8rem !important;
+        line-height: 1.05;
     }
 
     body.mobile-portrait .table-center {

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/main.py

@@ -768,6 +768,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")