Add invite request system and Gitea Actions CI/CD pipeline

Invite request feature:
- Public form to request an invite when INVITE_REQUEST_ENABLED=true
- Stores requests in new invite_requests DB table
- Emails admins on new request, emails requester on approve/deny
- Admin panel tab to review, approve, and deny requests
- Approval auto-creates invite code and sends signup link

CI/CD pipeline:
- Build & push Docker image to Gitea registry on release
- Auto-deploy to staging with health check
- Manual workflow_dispatch for production deploys

Also includes client layout/sizing improvements for card grid
and opponent spacing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

client/admin.html

@@ -37,6 +37,7 @@
                 <a href="#" data-panel="users" class="nav-link">Users</a>
                 <a href="#" data-panel="games" class="nav-link">Games</a>
                 <a href="#" data-panel="invites" class="nav-link">Invites</a>
+                <a href="#" data-panel="invite-requests" class="nav-link">Requests</a>
                 <a href="#" data-panel="audit" class="nav-link">Audit Log</a>
             </div>
             <div class="nav-user">
@@ -191,6 +192,35 @@
                 </table>
             </section>
 
+            <!-- Invite Requests Panel -->
+            <section id="invite-requests-panel" class="panel hidden">
+                <h2>Invite Requests</h2>
+                <div class="panel-toolbar">
+                    <div class="filter-bar">
+                        <select id="request-status-filter">
+                            <option value="pending">Pending</option>
+                            <option value="">All</option>
+                            <option value="approved">Approved</option>
+                            <option value="denied">Denied</option>
+                        </select>
+                        <button id="request-filter-btn" class="btn">Filter</button>
+                    </div>
+                </div>
+                <table id="invite-requests-table" class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Email</th>
+                            <th>Message</th>
+                            <th>Submitted</th>
+                            <th>Status</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </section>
+
             <!-- Audit Log Panel -->
             <section id="audit-panel" class="panel hidden">
                 <h2>Audit Log</h2>
@@ -207,12 +237,15 @@
                             <option value="end_game">End Game</option>
                             <option value="create_invite">Create Invite</option>
                             <option value="revoke_invite">Revoke Invite</option>
+                            <option value="approve_invite_request">Approve Request</option>
+                            <option value="deny_invite_request">Deny Request</option>
                         </select>
                         <select id="audit-target-filter">
                             <option value="">All Targets</option>
                             <option value="user">Users</option>
                             <option value="game">Games</option>
                             <option value="invite_code">Invites</option>
+                            <option value="invite_request">Invite Requests</option>
                         </select>
                         <button id="audit-filter-btn" class="btn">Filter</button>
                     </div>

client/admin.js

@@ -198,6 +198,9 @@ function showPanel(panelId) {
         case 'invites':
             loadInvites();
             break;
+        case 'invite-requests':
+            loadInviteRequests();
+            break;
         case 'audit':
             loadAuditLog();
             break;
@@ -643,6 +646,80 @@ async function promptRevokeInvite(code) {
     }
 }
 
+// =============================================================================
+// Invite Requests
+// =============================================================================
+
+async function loadInviteRequests() {
+    const status = document.getElementById('request-status-filter').value;
+    const params = new URLSearchParams();
+    if (status) params.set('status', status);
+
+    try {
+        const data = await apiRequest(`/api/admin/invite-requests?${params}`);
+        const tbody = document.querySelector('#invite-requests-table tbody');
+        tbody.innerHTML = '';
+
+        if (data.requests.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" class="text-muted">No invite requests</td></tr>';
+            return;
+        }
+
+        data.requests.forEach(req => {
+            const statusBadge = req.status === 'approved'
+                ? '<span class="badge badge-success">Approved</span>'
+                : req.status === 'denied'
+                    ? '<span class="badge badge-danger">Denied</span>'
+                    : '<span class="badge badge-warning">Pending</span>';
+
+            const actions = req.status === 'pending'
+                ? `<button class="btn btn-small btn-primary" data-action="approve-request" data-id="${req.id}">Approve</button>
+                   <button class="btn btn-small btn-danger" data-action="deny-request" data-id="${req.id}">Deny</button>`
+                : `<span class="text-muted">${req.reviewed_by_username || '-'}</span>`;
+
+            tbody.innerHTML += `
+                <tr>
+                    <td>${escapeHtml(req.name)}</td>
+                    <td>${escapeHtml(req.email)}</td>
+                    <td>${req.message ? escapeHtml(req.message).substring(0, 80) : '<span class="text-muted">-</span>'}</td>
+                    <td>${formatDate(req.created_at)}</td>
+                    <td>${statusBadge}</td>
+                    <td>${actions}</td>
+                </tr>`;
+        });
+    } catch (error) {
+        showToast('Failed to load invite requests: ' + error.message, 'error');
+    }
+}
+
+async function handleApproveRequest(requestId) {
+    if (!confirm('Approve this invite request? An invite code will be created and emailed to the requester.')) return;
+
+    try {
+        const data = await apiRequest(`/api/admin/invite-requests/${requestId}/approve`, {
+            method: 'POST',
+        });
+        showToast(`Request approved! Invite code: ${data.code}`, 'success');
+        loadInviteRequests();
+    } catch (error) {
+        showToast('Failed to approve request: ' + error.message, 'error');
+    }
+}
+
+async function handleDenyRequest(requestId) {
+    if (!confirm('Deny this invite request? The requester will be notified.')) return;
+
+    try {
+        await apiRequest(`/api/admin/invite-requests/${requestId}/deny`, {
+            method: 'POST',
+        });
+        showToast('Request denied', 'success');
+        loadInviteRequests();
+    } catch (error) {
+        showToast('Failed to deny request: ' + error.message, 'error');
+    }
+}
+
 // =============================================================================
 // Auth
 // =============================================================================
@@ -786,6 +863,9 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('create-invite-btn').addEventListener('click', handleCreateInvite);
     document.getElementById('include-expired').addEventListener('change', loadInvites);
 
+    // Invite requests panel
+    document.getElementById('request-filter-btn').addEventListener('click', loadInviteRequests);
+
     // Audit panel
     document.getElementById('audit-filter-btn').addEventListener('click', () => {
         auditPage = 0;
@@ -826,6 +906,8 @@ document.addEventListener('DOMContentLoaded', () => {
         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);
+        else if (action === 'approve-request') handleApproveRequest(parseInt(btn.dataset.id));
+        else if (action === 'deny-request') handleDenyRequest(parseInt(btn.dataset.id));
     });
 
     // Check auth on load

client/app.js

@@ -1,4 +1,3 @@
-// SPDX-License-Identifier: GPL-3.0-or-later
 // Golf Card Game - Client Application
 
 // Debug logging - set to true to see detailed state/animation logs
@@ -4868,6 +4867,15 @@ class AuthManager {
         this.resetPasswordConfirm = document.getElementById('reset-password-confirm');
         this.resetError = document.getElementById('reset-error');
         this.resetSuccess = document.getElementById('reset-success');
+        this.requestInviteContainer = document.getElementById('request-invite-container');
+        this.requestInviteForm = document.getElementById('request-invite-form');
+        this.requestInviteName = document.getElementById('request-invite-name');
+        this.requestInviteEmail = document.getElementById('request-invite-email');
+        this.requestInviteMessage = document.getElementById('request-invite-message');
+        this.requestInviteError = document.getElementById('request-invite-error');
+        this.requestInviteSuccess = document.getElementById('request-invite-success');
+        this.requestBackSignup = document.getElementById('request-back-signup');
+        this.requestBackLogin = document.getElementById('request-back-login');
     }
 
     bindEvents() {
@@ -4898,6 +4906,15 @@ class AuthManager {
         });
         this.forgotForm?.addEventListener('submit', (e) => this.handleForgotPassword(e));
         this.resetForm?.addEventListener('submit', (e) => this.handleResetPassword(e));
+        this.requestInviteForm?.addEventListener('submit', (e) => this.handleRequestInvite(e));
+        this.requestBackSignup?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.showForm('signup');
+        });
+        this.requestBackLogin?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.showForm('login');
+        });
 
         // Check URL for reset token or invite code on page load
         this.checkResetToken();
@@ -4923,6 +4940,7 @@ class AuthManager {
         this.signupFormContainer.classList.add('hidden');
         this.forgotFormContainer?.classList.add('hidden');
         this.resetFormContainer?.classList.add('hidden');
+        this.requestInviteContainer?.classList.add('hidden');
         this.clearErrors();
 
         if (form === 'login') {
@@ -4937,6 +4955,9 @@ class AuthManager {
         } else if (form === 'reset') {
             this.resetFormContainer?.classList.remove('hidden');
             this.resetPassword?.focus();
+        } else if (form === 'request-invite') {
+            this.requestInviteContainer?.classList.remove('hidden');
+            this.requestInviteName?.focus();
         }
     }
 
@@ -4953,6 +4974,8 @@ class AuthManager {
         if (this.forgotSuccess) this.forgotSuccess.textContent = '';
         if (this.resetError) this.resetError.textContent = '';
         if (this.resetSuccess) this.resetSuccess.textContent = '';
+        if (this.requestInviteError) this.requestInviteError.textContent = '';
+        if (this.requestInviteSuccess) this.requestInviteSuccess.textContent = '';
     }
 
     async handleLogin(e) {
@@ -5089,7 +5112,17 @@ class AuthManager {
         if (invite_required) {
             this.signupInviteCode.required = true;
             this.signupInviteCode.placeholder = 'Invite Code (required)';
-            if (this.inviteCodeHint) this.inviteCodeHint.textContent = '';
+            if (this.inviteCodeHint) {
+                if (this.signupInfo.invite_request_enabled) {
+                    this.inviteCodeHint.innerHTML = 'Don\'t have one? <a href="#" id="show-request-invite">Request an invite</a>';
+                    document.getElementById('show-request-invite')?.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        this.showForm('request-invite');
+                    });
+                } else {
+                    this.inviteCodeHint.textContent = '';
+                }
+            }
         } else if (open_signups_enabled) {
             this.signupInviteCode.required = false;
             this.signupInviteCode.placeholder = 'Invite Code (optional)';
@@ -5166,4 +5199,33 @@ class AuthManager {
             this.resetError.textContent = 'Connection error';
         }
     }
+
+    async handleRequestInvite(e) {
+        e.preventDefault();
+        this.clearErrors();
+
+        const name = this.requestInviteName.value.trim();
+        const email = this.requestInviteEmail.value.trim();
+        const message = this.requestInviteMessage.value.trim() || null;
+
+        try {
+            const response = await fetch('/api/auth/request-invite', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, email, message }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                this.requestInviteError.textContent = data.detail || 'Request failed';
+                return;
+            }
+
+            this.requestInviteSuccess.textContent = data.message;
+            this.requestInviteForm.reset();
+        } catch (err) {
+            this.requestInviteError.textContent = 'Connection error';
+        }
+    }
 }

client/index.html

@@ -322,38 +322,38 @@
                     <div class="game-table">
                         <div id="opponents-row" class="opponents-row"></div>
 
-                        <div class="player-row">
-                            <div class="table-center">
-                                <div class="deck-area">
-                                    <!-- Held card slot (left of deck) -->
-                                    <div id="held-card-slot" class="held-card-slot hidden">
-                                        <div id="held-card-display" class="card card-front">
-                                            <span id="held-card-content"></span>
-                                        </div>
-                                        <span class="held-label">Holding</span>
+                        <div class="table-center">
+                            <div class="deck-area">
+                                <!-- Held card slot (left of deck) -->
+                                <div id="held-card-slot" class="held-card-slot hidden">
+                                    <div id="held-card-display" class="card card-front">
+                                        <span id="held-card-content"></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>
-                                            </div>
-                                            <!-- Floating held card (appears larger over discard when holding) -->
-                                            <div id="held-card-floating" class="card card-front held-card-floating hidden">
-                                                <span id="held-card-floating-content"></span>
-                                            </div>
-                                            <button id="discard-btn" class="btn btn-small hidden">Discard</button>
-                                            <button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
-                                            <button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
+                                    <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>
                                         </div>
+                                        <!-- Floating held card (appears larger over discard when holding) -->
+                                        <div id="held-card-floating" class="card card-front held-card-floating hidden">
+                                            <span id="held-card-floating-content"></span>
+                                        </div>
+                                        <button id="discard-btn" class="btn btn-small hidden">Discard</button>
+                                        <button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
+                                        <button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
+                        <div class="player-row">
                             <div class="player-section">
                                 <div class="player-area">
                                     <h4 id="player-header"><span class="player-name">You</span><span id="your-score" class="player-showing">0</span></h4>
@@ -427,6 +427,26 @@
 
             <!-- Drawer backdrop for mobile -->
             <div id="drawer-backdrop" class="drawer-backdrop"></div>
+
+            <!-- Desktop scorecard button + overlay -->
+            <button id="desktop-scorecard-btn">Scorecard</button>
+            <div id="desktop-scorecard-overlay" class="side-panel desktop-scorecard-overlay">
+                <h4>Current Standings</h4>
+                <div id="desktop-standings-list" class="standings-list"></div>
+                <h4>Scores</h4>
+                <table id="desktop-score-table">
+                    <thead>
+                        <tr>
+                            <th>Player</th>
+                            <th>Hole</th>
+                            <th>Tot</th>
+                            <th>W</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+            <div id="desktop-scorecard-backdrop" class="desktop-scorecard-backdrop"></div>
         </div>
 
         <!-- Rules Screen -->
@@ -911,6 +931,28 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
                 </form>
                 <p class="auth-switch">Already have an account? <a href="#" id="show-login">Login</a></p>
             </div>
+
+            <!-- Request Invite Form -->
+            <div id="request-invite-container" class="hidden">
+                <h3>Request an Invite</h3>
+                <p class="auth-hint">Registration is invite-only. Request access and we'll get back to you.</p>
+                <form id="request-invite-form">
+                    <div class="form-group">
+                        <input type="text" id="request-invite-name" placeholder="Your name" required maxlength="100">
+                    </div>
+                    <div class="form-group">
+                        <input type="email" id="request-invite-email" placeholder="Email" required>
+                    </div>
+                    <div class="form-group">
+                        <textarea id="request-invite-message" placeholder="Why do you want to join? (optional)" rows="3" maxlength="500"></textarea>
+                    </div>
+                    <p id="request-invite-error" class="error"></p>
+                    <p id="request-invite-success" class="success"></p>
+                    <button type="submit" class="btn btn-primary btn-full">Request Invite</button>
+                </form>
+                <p class="auth-switch">Already have an invite? <a href="#" id="request-back-signup">Sign up</a></p>
+                <p class="auth-switch">Already have an account? <a href="#" id="request-back-login">Login</a></p>
+            </div>
         </div>
     </div>
 

client/style.css

@@ -1024,13 +1024,13 @@ input::placeholder {
 
 /* Card Styles */
 .card {
-    width: clamp(65px, 5.5vw, 100px);
-    height: clamp(91px, 7.7vw, 140px);
+    width: clamp(65px, 7vw, 135px);
+    height: clamp(91px, 9.8vw, 189px);
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: clamp(2rem, 2.5vw, 3.2rem);
+    font-size: clamp(2rem, 3vw, 3.8rem);
     font-weight: bold;
     cursor: pointer;
     /* No CSS transition - hover effects handled by anime.js */
@@ -1151,7 +1151,7 @@ input::placeholder {
 /* Card Grid */
 .card-grid {
     display: grid;
-    grid-template-columns: repeat(3, clamp(65px, 5.5vw, 100px));
+    grid-template-columns: repeat(3, clamp(65px, 7vw, 135px));
     gap: clamp(8px, 0.8vw, 14px);
     justify-content: center;
 }
@@ -1161,18 +1161,22 @@ input::placeholder {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 25px;
+    justify-content: space-between;
+    gap: 15px;
     width: 100%;
+    flex: 1;
+    min-height: 0;
 }
 
-/* Player row - deck/discard and player cards side by side */
+/* Player row - local player cards */
 .player-row {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 25px;
+    gap: clamp(15px, 2vh, 35px);
     width: 100%;
     flex-wrap: wrap;
+    padding-bottom: clamp(10px, 2vh, 30px);
 }
 
 .opponents-row {
@@ -1180,9 +1184,9 @@ input::placeholder {
     flex-wrap: nowrap;
     justify-content: center;
     align-items: flex-end;
-    gap: clamp(12px, 1.8vw, 35px);
-    min-height: clamp(120px, 14vw, 200px);
-    padding: 8px 20px 0;
+    gap: clamp(12px, 6vw, 120px);
+    min-height: clamp(120px, 18vw, 280px);
+    padding: 15px 20px 0;
     width: 100%;
 }
 
@@ -1234,7 +1238,62 @@ input::placeholder {
     transform: rotate(8deg);
 }
 
-/* 5 opponents: deeper arch with graduated rotation toward center */
+/* 5 opponents: tighter spacing to fit single row on wide screens */
+.opponents-row:has(.opponent-area:first-child:nth-last-child(5)) {
+    gap: clamp(6px, 2vw, 50px);
+}
+.opponents-row .opponent-area:first-child:nth-last-child(5),
+.opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area {
+    flex-shrink: 1;
+}
+.opponents-row .opponent-area:first-child:nth-last-child(5) .card-grid,
+.opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area .card-grid {
+    grid-template-columns: repeat(3, clamp(38px, 4vw, 85px));
+    gap: clamp(2px, 0.4vw, 6px);
+}
+.opponents-row .opponent-area:first-child:nth-last-child(5) .card,
+.opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area .card {
+    width: clamp(38px, 4vw, 85px);
+    height: clamp(53px, 5.6vw, 119px);
+    font-size: clamp(0.9rem, 1.3vw, 2.2rem);
+}
+
+/* 5 opponents mid-width: wrap into 2 arch rows (3 + 2) */
+@media (min-width: 750px) and (max-width: 1220px) {
+    .opponents-row:has(.opponent-area:first-child:nth-last-child(5)) {
+        flex-wrap: wrap;
+        gap: clamp(6px, 1.5vw, 20px);
+        row-gap: clamp(4px, 1vw, 16px);
+    }
+    /* Force 3+2 split: each item ~30% so 3 fit per row */
+    .opponents-row .opponent-area:first-child:nth-last-child(5),
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area {
+        flex: 0 0 auto;
+    }
+    /* Row 1 arch: 3 opponents */
+    .opponents-row .opponent-area:first-child:nth-last-child(5) {
+        margin-bottom: 0;
+        transform: rotate(-5deg);
+    }
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(2) {
+        margin-bottom: 20px;
+        transform: rotate(0deg);
+    }
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(3) {
+        margin-bottom: 0;
+        transform: rotate(5deg);
+    }
+    /* Row 2 arch: 2 opponents */
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(4) {
+        margin-bottom: 8px;
+        transform: rotate(-3deg);
+    }
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(5) {
+        margin-bottom: 8px;
+        transform: rotate(3deg);
+    }
+}
+
 .opponents-row .opponent-area:first-child:nth-last-child(5) {
     margin-bottom: 0;
     transform: rotate(-10deg);
@@ -1367,9 +1426,9 @@ input::placeholder {
 }
 
 .deck-area .card {
-    width: clamp(80px, 7vw, 120px);
-    height: clamp(112px, 9.8vw, 168px);
-    font-size: clamp(2.4rem, 3.2vw, 4rem);
+    width: clamp(80px, 8.5vw, 150px);
+    height: clamp(112px, 11.9vw, 210px);
+    font-size: clamp(2.4rem, 3.5vw, 4.5rem);
 }
 
 #discard {
@@ -1771,14 +1830,14 @@ input::placeholder {
 
 .opponent-area .card-grid {
     display: grid;
-    grid-template-columns: repeat(3, clamp(45px, 4vw, 75px));
-    gap: clamp(4px, 0.4vw, 8px);
+    grid-template-columns: repeat(3, clamp(45px, 5vw, 100px));
+    gap: clamp(4px, 0.5vw, 8px);
 }
 
 .opponent-area .card {
-    width: clamp(45px, 4vw, 75px);
-    height: clamp(63px, 5.6vw, 105px);
-    font-size: clamp(1.3rem, 1.5vw, 2.2rem);
+    width: clamp(45px, 5vw, 100px);
+    height: clamp(63px, 7vw, 140px);
+    font-size: clamp(1.3rem, 1.8vw, 2.6rem);
     border-radius: 5px;
 }
 
@@ -1929,6 +1988,7 @@ input::placeholder {
     align-items: center;
     gap: 8px;
     width: 100%;
+    min-height: calc(100vh - 50px);
 }
 
 /* Side Panels - positioned in bottom corners */
@@ -1953,6 +2013,88 @@ input::placeholder {
     right: 15px;
 }
 
+/* Desktop: hide side panels by default, show via scorecard button */
+.side-panel.left-panel,
+.side-panel.right-panel {
+    display: none;
+}
+
+/* Desktop scorecard button - bottom right corner */
+#desktop-scorecard-btn {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    z-index: 99;
+    background: linear-gradient(145deg, rgba(15, 50, 35, 0.92) 0%, rgba(8, 30, 20, 0.95) 100%);
+    border: 1px solid rgba(244, 164, 96, 0.35);
+    color: #f4a460;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    padding: 8px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    transition: all 0.2s ease;
+}
+
+#desktop-scorecard-btn:hover {
+    background: linear-gradient(145deg, rgba(20, 60, 40, 0.95) 0%, rgba(12, 40, 28, 0.97) 100%);
+    border-color: rgba(244, 164, 96, 0.6);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(244, 164, 96, 0.15);
+}
+
+#desktop-scorecard-btn:active {
+    transform: scale(0.96);
+}
+
+#desktop-scorecard-btn.active {
+    background: linear-gradient(135deg, #f4a460, #e8935a);
+    color: #1a472a;
+    border-color: transparent;
+    box-shadow: 0 2px 12px rgba(244, 164, 96, 0.4);
+}
+
+/* Desktop scorecard overlay — combines standings + scores */
+.side-panel.desktop-scorecard-overlay {
+    display: none;
+    position: fixed;
+    bottom: 55px;
+    right: 15px;
+    left: auto;
+    width: 280px;
+    max-height: 70vh;
+    overflow-y: auto;
+    z-index: 100;
+    border-radius: 10px;
+    padding: 10px 12px;
+    background: linear-gradient(145deg, rgba(15, 50, 35, 0.95) 0%, rgba(8, 30, 20, 0.97) 100%);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(244, 164, 96, 0.25);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.side-panel.desktop-scorecard-overlay.open {
+    display: block;
+}
+
+/* Desktop scorecard backdrop */
+.desktop-scorecard-backdrop {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 98;
+}
+
+.desktop-scorecard-backdrop.visible {
+    display: block;
+}
+
 .side-panel > h4 {
     font-size: 0.7rem;
     text-align: center;
@@ -3596,7 +3738,24 @@ input::placeholder {
     color: rgba(255, 255, 255, 0.4);
 }
 
-.modal-auth input:focus {
+.modal-auth textarea {
+    width: 100%;
+    padding: 12px 15px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+    font-family: inherit;
+    resize: vertical;
+}
+
+.modal-auth textarea::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.modal-auth input:focus,
+.modal-auth textarea:focus {
     outline: none;
     border-color: #f4a460;
 }
@@ -3612,6 +3771,15 @@ input::placeholder {
     color: rgba(255, 255, 255, 0.45);
 }
 
+.form-hint a {
+    color: #f4a460;
+    text-decoration: none;
+}
+
+.form-hint a:hover {
+    text-decoration: underline;
+}
+
 .auth-switch {
     text-align: center;
     margin-top: 15px;
@@ -5336,12 +5504,16 @@ body.mobile-portrait .opponents-row {
     flex-shrink: 0;
 }
 
-/* --- Mobile: Player row gets remaining space, centered vertically --- */
+/* --- Mobile: Table center and player row share remaining space --- */
+body.mobile-portrait .table-center {
+    flex-shrink: 0;
+}
+
 body.mobile-portrait .player-row {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
     gap: 10px;
     width: 100%;
     flex: 1 1 0%;
@@ -5503,6 +5675,18 @@ body.mobile-portrait .real-card .card-face-back {
     line-height: 1;
 }
 
+/* Hide desktop scorecard button and backdrop on mobile */
+body.mobile-portrait #desktop-scorecard-btn,
+body.mobile-portrait .desktop-scorecard-backdrop {
+    display: none !important;
+}
+
+/* Re-enable side panels on mobile (overrides desktop hide) */
+body.mobile-portrait .side-panel.left-panel,
+body.mobile-portrait .side-panel.right-panel {
+    display: block;
+}
+
 /* --- Mobile: Side panels become bottom drawers --- */
 body.mobile-portrait .side-panel {
     position: fixed;