v0.15.0 password recovery, phone layout, CLI pager, embed policy fixes

internal/server/webserver/chess-client-web/app.js

@@ -93,6 +93,7 @@ const games = {
 const ui = {
     healthTimer: null,
     storage: 'unknown',
+    mail: 'unknown',    // "ok" when the server emails password-reset links
     toastTimer: null,
     historyCache: new Map(), // gameId -> {etag, history}
 };
@@ -211,6 +212,22 @@ function describeResult(state, termination) {
     return 'Game over';
 }
 
+// shortResult is the outcome in a few words, for the narrow turn strip.
+function shortResult(state, termination) {
+    const winner = state === 'white wins' ? 'White' : 'Black';
+    switch (termination) {
+        case 'resignation': return `${winner} wins · resigned`;
+        case 'checkmate': return `${winner} wins · mate`;
+        case 'stalemate': return 'Draw · stalemate';
+        case 'insufficient_material': return 'Draw · material';
+        case 'threefold_repetition': return 'Draw · repetition';
+        case 'fifty_move_rule': return 'Draw · 50 moves';
+        case 'agreement': return 'Draw · agreed';
+    }
+    if (state === 'white wins' || state === 'black wins') return `${winner} wins`;
+    return 'Draw';
+}
+
 function terminationLabel(termination) {
     switch (termination) {
         case 'checkmate': return 'Checkmate';
@@ -358,6 +375,11 @@ function setStorageStatus(status) {
     updateLiveTools();
 }
 
+function setMailStatus(status) {
+    ui.mail = status;
+    $('forgot-row').classList.toggle('hidden', status !== 'ok');
+}
+
 function startHealthCheck() {
     const checkHealth = async () => {
         try {
@@ -366,6 +388,7 @@ function startHealthCheck() {
                 const health = await response.json();
                 setServerStatus(health.status === 'healthy' ? 'healthy' : 'degraded');
                 setStorageStatus(health.storage || 'unknown');
+                setMailStatus(health.mail || 'disabled');
             } else {
                 handleApiError('health check', null, response);
                 setStorageStatus('unknown');
@@ -551,7 +574,8 @@ async function deleteAccount() {
 // re-entrancy from the Enter-key handler and stops edits mid-request.
 function setAuthModalBusy(busy) {
     auth.busy = busy;
-    for (const id of ['login-submit-btn', 'register-submit-btn', 'auth-cancel-btn', 'auth-cancel-btn-2']) {
+    for (const id of ['login-submit-btn', 'register-submit-btn', 'auth-cancel-btn', 'auth-cancel-btn-2',
+        'forgot-btn', 'recover-submit-btn', 'recover-back-btn']) {
         $(id).disabled = busy;
     }
     document.querySelectorAll('.auth-tab').forEach(t => t.disabled = busy);
@@ -560,7 +584,7 @@ function setAuthModalBusy(busy) {
 
 function showAuthModal() {
     $('auth-modal-overlay').classList.add('show');
-    $('login-identifier').focus();
+    switchAuthTab('login');
     document.removeEventListener('keydown', handleAuthModalKeydown);
     document.addEventListener('keydown', handleAuthModalKeydown);
 }
@@ -584,50 +608,72 @@ function handleAuthModalKeydown(e) {
         hideAuthModal();
     } else if (e.key === 'Enter') {
         e.preventDefault();
-        if (!$('login-form').classList.contains('hidden')) handleLogin(); else handleRegister();
+        ({ login: handleLogin, register: handleRegister, recover: handleRecover })[activeAuthForm()]();
     }
 }
 
+// The auth modal shows one of three forms: sign in, register, or password
+// recovery (reached from the sign-in form, without a tab).
 function switchAuthTab(tab) {
     document.querySelectorAll('.auth-tab').forEach(t => {
         const active = t.dataset.tab === tab;
         t.classList.toggle('active', active);
         t.setAttribute('aria-selected', active ? 'true' : 'false');
     });
+    document.querySelector('.auth-tabs').classList.toggle('hidden', tab === 'recover');
     $('login-form').classList.toggle('hidden', tab !== 'login');
     $('register-form').classList.toggle('hidden', tab !== 'register');
+    $('recover-form').classList.toggle('hidden', tab !== 'recover');
     clearModalMessage('auth-modal-message');
-    $(tab === 'login' ? 'login-identifier' : 'register-username').focus();
+    $({ login: 'login-identifier', register: 'register-username', recover: 'recover-identifier' }[tab]).focus();
 }
 
-async function submitAuth(path, body, failure) {
+function activeAuthForm() {
+    if (!$('login-form').classList.contains('hidden')) return 'login';
+    if (!$('register-form').classList.contains('hidden')) return 'register';
+    return 'recover';
+}
+
+// Returns the focus to a field after a failed request: the request disabled
+// the fields, which drops the focus to the page, and a retyped password
+// would otherwise go nowhere.
+function refocus(id, select = true) {
+    const el = $(id);
+    if (!el) return;
+    el.focus();
+    if (select && typeof el.select === 'function') el.select();
+}
+
+async function submitAuth(path, body, failure, focusId) {
     setAuthModalBusy(true);
     clearModalMessage('auth-modal-message');
 
+    const fail = message => {
+        setModalMessage('auth-modal-message', message, 'error');
+        setAuthModalBusy(false);
+        refocus(focusId);
+        return null;
+    };
+
     let response;
     try {
         response = await apiJSON('POST', path, body);
     } catch (error) {
-        const errorInfo = handleApiError(path, error);
-        setModalMessage('auth-modal-message', errorInfo.statusMessage, 'error');
-        setAuthModalBusy(false);
-        return null;
+        return fail(handleApiError(path, error).statusMessage);
     }
 
     if (!response.ok) {
         const err = await parseErrorResponse(response);
-        setModalMessage('auth-modal-message', err.details || err.error || failure, 'error');
-        setAuthModalBusy(false);
-        return null;
+        if (response.status === 401) return fail('Wrong username or password');
+        if (response.status === 429) return fail('Too many attempts. Wait a minute and try again.');
+        return fail(err.details || err.error || failure);
     }
 
     try {
         return await response.json();
     } catch (error) {
         console.error(`${path}: response OK but JSON parse failed:`, error);
-        setModalMessage('auth-modal-message', 'Unexpected response from server', 'error');
-        setAuthModalBusy(false);
-        return null;
+        return fail('Unexpected response from server');
     }
 }
 
@@ -637,15 +683,156 @@ async function handleLogin() {
     const password = $('login-password').value;
     if (!identifier || !password) {
         setModalMessage('auth-modal-message', 'Fill in both fields', 'error');
+        refocus(identifier ? 'login-password' : 'login-identifier', false);
         return;
     }
-    const result = await submitAuth('/api/auth/login', { identifier, password }, 'Sign-in failed');
+    const result = await submitAuth('/api/auth/login', { identifier, password }, 'Sign-in failed', 'login-password');
     if (!result) return;
     setSignedIn(result.userId, result.username, result.token);
     setModalMessage('auth-modal-message', `Signed in as ${result.username}`, 'success');
     setTimeout(hideAuthModal, MODAL_SUCCESS_DISPLAY_MS);
 }
 
+// The server's password rule, checked first for a quicker answer.
+function passwordProblem(password) {
+    if (password.length < 8) return 'Password needs at least 8 characters';
+    if (!/[a-zA-Z]/.test(password) || !/[0-9]/.test(password)) return 'Password needs a letter and a number';
+    return '';
+}
+
+// Asks for a reset link. The server answers the same whether or not the
+// account exists, so the message is the same too.
+async function handleRecover() {
+    if (auth.busy) return;
+    const identifier = $('recover-identifier').value.trim();
+    if (!identifier) {
+        setModalMessage('auth-modal-message', 'Enter your username or email', 'error');
+        refocus('recover-identifier', false);
+        return;
+    }
+    setAuthModalBusy(true);
+    clearModalMessage('auth-modal-message');
+    let response;
+    try {
+        response = await apiJSON('POST', '/api/auth/recover', { identifier });
+    } catch (error) {
+        setModalMessage('auth-modal-message', handleApiError('recover', error).statusMessage, 'error');
+        setAuthModalBusy(false);
+        refocus('recover-identifier');
+        return;
+    }
+    setAuthModalBusy(false);
+    if (response.status === 202) {
+        setModalMessage('auth-modal-message', 'If the account has an email address, a reset link is on its way. Check your inbox.', 'success');
+        $('recover-identifier').value = '';
+        $('recover-back-btn').focus();
+        return;
+    }
+    const err = await parseErrorResponse(response);
+    let message = err.error || 'Could not send the link';
+    if (response.status === 429) message = 'Too many requests. Wait a minute and try again.';
+    else if (response.status === 503 && err.code === 'NOT_CONFIGURED') message = 'This server cannot send email; ask its administrator for a reset link.';
+    setModalMessage('auth-modal-message', message, 'error');
+    refocus('recover-identifier');
+}
+
+// --- reset: the link in the recovery email opens the client with ?reset=<token>
+
+const reset = { token: null, busy: false };
+
+function openResetModal(token) {
+    reset.token = token;
+    reset.busy = false;
+    $('reset-password').value = '';
+    $('reset-password-2').value = '';
+    clearModalMessage('reset-modal-message');
+    $('reset-overlay').classList.add('show');
+    document.removeEventListener('keydown', handleResetKeydown);
+    document.addEventListener('keydown', handleResetKeydown);
+    $('reset-password').focus();
+}
+
+function closeResetModal() {
+    if (reset.busy) return;
+    reset.token = null;
+    $('reset-overlay').classList.remove('show');
+    $('reset-password').value = '';
+    $('reset-password-2').value = '';
+    document.removeEventListener('keydown', handleResetKeydown);
+}
+
+function setResetBusy(busy) {
+    reset.busy = busy;
+    for (const id of ['reset-password', 'reset-password-2', 'reset-submit-btn', 'reset-cancel-btn']) {
+        $(id).disabled = busy;
+    }
+}
+
+function handleResetKeydown(e) {
+    if (reset.busy) {
+        if (e.key === 'Enter' || e.key === 'Escape') e.preventDefault();
+        return;
+    }
+    if (e.key === 'Escape') {
+        e.preventDefault();
+        closeResetModal();
+    } else if (e.key === 'Enter') {
+        e.preventDefault();
+        submitReset();
+    }
+}
+
+async function submitReset() {
+    if (reset.busy || !reset.token) return;
+    const password = $('reset-password').value;
+    const again = $('reset-password-2').value;
+    const weak = passwordProblem(password);
+    if (weak) {
+        setModalMessage('reset-modal-message', weak, 'error');
+        refocus('reset-password');
+        return;
+    }
+    if (password !== again) {
+        setModalMessage('reset-modal-message', 'The two passwords differ', 'error');
+        refocus('reset-password-2');
+        return;
+    }
+    setResetBusy(true);
+    clearModalMessage('reset-modal-message');
+    let response;
+    try {
+        response = await apiJSON('POST', '/api/auth/reset', { token: reset.token, password });
+    } catch (error) {
+        setResetBusy(false);
+        setModalMessage('reset-modal-message', handleApiError('reset', error).statusMessage, 'error');
+        refocus('reset-password');
+        return;
+    }
+    if (!response.ok) {
+        const err = await parseErrorResponse(response);
+        setResetBusy(false);
+        setModalMessage('reset-modal-message', response.status === 400
+            ? (err.details && err.error === 'weak password' ? err.details : 'This link is invalid or has expired. Ask for a new one from Sign in.')
+            : (err.error || `Server error (${response.status})`), 'error');
+        refocus('reset-password');
+        return;
+    }
+    let result;
+    try {
+        result = await response.json();
+    } catch {
+        setResetBusy(false);
+        setModalMessage('reset-modal-message', 'Unexpected response from server', 'error');
+        return;
+    }
+    setSignedIn(result.userId, result.username, result.token);
+    setModalMessage('reset-modal-message', `Password changed — signed in as ${result.username}`, 'success');
+    setTimeout(() => {
+        setResetBusy(false);
+        closeResetModal();
+    }, MODAL_SUCCESS_DISPLAY_MS * 2);
+}
+
 async function handleRegister() {
     if (auth.busy) return;
     const username = $('register-username').value.trim();
@@ -655,17 +842,15 @@ async function handleRegister() {
         setModalMessage('auth-modal-message', 'Username and password required', 'error');
         return;
     }
-    if (password.length < 8) {
-        setModalMessage('auth-modal-message', 'Password needs at least 8 characters', 'error');
-        return;
-    }
-    if (!/[a-zA-Z]/.test(password) || !/[0-9]/.test(password)) {
-        setModalMessage('auth-modal-message', 'Password needs a letter and a number', 'error');
+    const weak = passwordProblem(password);
+    if (weak) {
+        setModalMessage('auth-modal-message', weak, 'error');
+        refocus('register-password');
         return;
     }
     const body = { username, password };
     if (email) body.email = email;
-    const result = await submitAuth('/api/auth/register', body, 'Registration failed');
+    const result = await submitAuth('/api/auth/register', body, 'Registration failed', 'register-password');
     if (!result) return;
     setSignedIn(result.userId, result.username, result.token);
     setModalMessage('auth-modal-message', `Account created, welcome ${result.username}`, 'success');
@@ -1344,26 +1529,32 @@ function updateTurnStrip() {
     const dot = $('turn-dot');
     const text = $('turn-text');
     let status = 'idle', label = 'No game';
+    let title = '';
     if (!live.gameId) {
         status = 'idle';
         label = 'No game';
     } else if (live.state === 'pending' || live.isLocked) {
         status = 'thinking';
-        label = 'Computer thinking…';
+        label = 'Thinking…';
+        title = 'The computer is thinking';
     } else if (isGameOver(live.state)) {
         status = live.state === 'white wins' ? 'white-wins' : live.state === 'black wins' ? 'black-wins' : live.state;
-        label = describeResult(live.state, live.termination);
+        label = shortResult(live.state, live.termination);
+        title = describeResult(live.state, live.termination);
     } else if (live.state === 'stuck') {
         status = 'stuck';
-        label = 'Engine error — undo or start a new game';
+        label = 'Engine error';
+        title = 'Engine error — undo or start a new game';
     } else {
+        // The dot shows the side to move; the text says whose it is.
         status = live.turn === 'w' ? 'white' : 'black';
         const side = live.turn === 'w' ? 'White' : 'Black';
-        label = live.turn === playerColor() ? `Your move (${side})` : `Computer to move (${side})`;
+        label = live.turn === playerColor() ? 'Your move' : 'Computer';
+        title = `${side} to move: ${live.turn === playerColor() ? 'you' : 'the computer'}`;
     }
     dot.dataset.status = status;
     text.textContent = label;
-    $('turn-strip').title = label;
+    $('turn-strip').title = title || label;
 }
 
 // Draw needs a game in progress with the board free; resigning only needs
@@ -2144,6 +2335,11 @@ function bindEvents() {
     });
     $('login-submit-btn').addEventListener('click', handleLogin);
     $('register-submit-btn').addEventListener('click', handleRegister);
+    $('forgot-btn').addEventListener('click', () => switchAuthTab('recover'));
+    $('recover-back-btn').addEventListener('click', () => switchAuthTab('login'));
+    $('recover-submit-btn').addEventListener('click', handleRecover);
+    $('reset-submit-btn').addEventListener('click', submitReset);
+    $('reset-cancel-btn').addEventListener('click', closeResetModal);
     $('auth-cancel-btn').addEventListener('click', hideAuthModal);
     $('auth-cancel-btn-2').addEventListener('click', hideAuthModal);
     $('logout-btn').addEventListener('click', handleLogoutClick);
@@ -2198,6 +2394,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     updateTurnStrip();
     updateGameControls();
     startHealthCheck();
+    // A reset link: take the token off the address before anything else, so
+    // it is neither kept in history nor shared with a copied link.
+    const params = new URLSearchParams(location.search);
+    const resetToken = params.get('reset');
+    if (resetToken !== null) {
+        params.delete('reset');
+        const query = params.toString();
+        try {
+            history.replaceState({ chess: true }, '', location.pathname + (query ? `?${query}` : ''));
+        } catch { /* history blocked */ }
+    }
     await restoreAuthSession();
     await applyURL();
+    if (resetToken) openResetModal(resetToken);
 });

internal/server/webserver/chess-client-web/index.html

@@ -10,7 +10,31 @@
 <body data-mode="live">
 <div class="app">
     <header class="topbar">
-        <div class="brand" aria-label="Chess"><span class="brand-mark" aria-hidden="true">♞</span><span class="brand-name">Chess</span></div>
+        <div class="brand" aria-label="Chess">
+            <svg class="brand-mark" viewBox="41 34 430 430" aria-hidden="true" focusable="false">
+                <defs>
+                    <linearGradient id="brand-piece" x1="20%" y1="0%" x2="80%" y2="100%">
+                        <stop offset="0%" stop-color="#C8CDD6"/>
+                        <stop offset="45%" stop-color="#8B929E"/>
+                        <stop offset="100%" stop-color="#4F545D"/>
+                    </linearGradient>
+                </defs>
+                <g fill="url(#brand-piece)" stroke="#14161A" stroke-width="4" stroke-linejoin="round">
+                    <path d="M136 450Q256 465 376 450L346 410Q256 420 166 410Z"/>
+                    <path d="M166 410Q256 420 346 410L316 370Q256 380 196 370Z"/>
+                    <path d="M196 370Q256 380 316 370C300 290 286 230 282 205H230C226 230 212 290 196 370Z"/>
+                </g>
+                <path d="M330 90Q265 96 230 120Q265 144 335 150Z" fill="#111318"/>
+                <g stroke="#F0F2F5" stroke-width="6" stroke-linecap="round">
+                    <path d="M263.17 85V155M299.33 85V155"/>
+                </g>
+                <g fill="url(#brand-piece)" stroke="#14161A" stroke-width="4" stroke-linejoin="round">
+                    <path d="M226 200C150 180 150 70 256 40C290 50 315 65 330 90Q265 96 230 120Q265 144 335 150C335 170 315 190 286 200Z"/>
+                    <rect x="216" y="195" width="80" height="16" rx="8"/>
+                </g>
+            </svg>
+            <span class="brand-name">Chess</span>
+        </div>
         <div class="health" aria-label="Server status">
             <span class="dot" id="server-dot" data-status="unknown" title="Server: unknown" role="img" aria-label="Server: unknown"></span>
             <span class="dot" id="storage-dot" data-status="unknown" title="Storage: unknown" role="img" aria-label="Storage: unknown"></span>
@@ -44,7 +68,7 @@
                     <span class="turn-text" id="turn-text">No game</span>
                 </div>
                 <div class="controls" role="group" aria-label="Game controls">
-                    <button id="new-game-btn" class="btn btn-primary" type="button">New game</button>
+                    <button id="new-game-btn" class="btn btn-primary" type="button" title="New game">New</button>
                     <button id="undo-btn" class="btn btn-secondary" type="button" disabled>Undo</button>
                     <button id="draw-btn" class="btn btn-secondary" type="button" title="Offer a draw" disabled>Draw</button>
                     <button id="resign-btn" class="btn btn-secondary" type="button" title="Resign this game" disabled>Resign</button>
@@ -201,6 +225,19 @@
                 <button id="login-submit-btn" class="btn btn-primary" type="button">Sign in</button>
                 <button id="auth-cancel-btn" class="btn btn-secondary" type="button">Cancel</button>
             </div>
+            <p class="auth-aside hidden" id="forgot-row"><button id="forgot-btn" class="link-btn" type="button">Forgot password?</button></p>
+        </div>
+
+        <div id="recover-form" class="auth-form hidden">
+            <p class="auth-help">Enter your username or email. If the account has an email address, a link to choose a new password is sent to it; the link works for an hour.</p>
+            <div class="form-group">
+                <label for="recover-identifier">Username or email</label>
+                <input type="text" id="recover-identifier" autocomplete="username">
+            </div>
+            <div class="modal-buttons">
+                <button id="recover-submit-btn" class="btn btn-primary" type="button">Send reset link</button>
+                <button id="recover-back-btn" class="btn btn-secondary" type="button">Back</button>
+            </div>
         </div>
 
         <div id="register-form" class="auth-form hidden">
@@ -224,6 +261,26 @@
     </div>
 </div>
 
+<!-- Reset Modal: opened by the link in the recovery email (?reset=<token>) -->
+<div id="reset-overlay" class="modal-overlay">
+    <div class="modal auth-modal" role="dialog" aria-modal="true" aria-labelledby="reset-title">
+        <h2 id="reset-title">Choose a new password</h2>
+        <div id="reset-modal-message" class="modal-message" role="status" aria-live="polite"></div>
+        <div class="form-group">
+            <label for="reset-password">New password (8+ characters, a letter and a number)</label>
+            <input type="password" id="reset-password" autocomplete="new-password">
+        </div>
+        <div class="form-group">
+            <label for="reset-password-2">Repeat the password</label>
+            <input type="password" id="reset-password-2" autocomplete="new-password">
+        </div>
+        <div class="modal-buttons">
+            <button id="reset-submit-btn" class="btn btn-primary" type="button">Set password</button>
+            <button id="reset-cancel-btn" class="btn btn-secondary" type="button">Cancel</button>
+        </div>
+    </div>
+</div>
+
 <!-- Account Modal: shown instead of the login modal while signed in -->
 <div id="account-overlay" class="modal-overlay">
     <div class="modal account-modal" role="dialog" aria-modal="true" aria-labelledby="account-title">

internal/server/webserver/chess-client-web/style.css

@@ -125,9 +125,9 @@ button { cursor: pointer; }
 }
 
 .brand-mark {
-    font-size: 1.35rem;
-    line-height: 1;
-    color: var(--periwinkle);
+    width: 1.5rem;
+    height: 1.5rem;
+    flex: none;
 }
 
 .health {
@@ -722,6 +722,7 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
 .auth-form input[type="text"],
 .auth-form input[type="email"],
 .auth-form input[type="password"],
+#reset-overlay input[type="password"],
 .account-form input[type="password"] {
     width: 100%;
     padding: 0.5rem 0.6rem;
@@ -740,7 +741,7 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
     word-wrap: break-word;
 }
 
-.fen-input:focus, .auth-form input:focus, .account-form input:focus {
+.fen-input:focus, .auth-form input:focus, .account-form input:focus, #reset-overlay input:focus {
     outline: none;
     border-color: var(--royal);
 }
@@ -754,6 +755,33 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
 
 .auth-modal, .account-modal { max-width: 360px; }
 
+.auth-aside {
+    margin: 0.9rem 0 0;
+    text-align: center;
+    font-size: 0.85rem;
+}
+
+.auth-help {
+    margin: 0 0 0.9rem;
+    font-size: 0.85rem;
+    line-height: 1.45;
+    color: var(--muted);
+}
+
+.link-btn {
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--periwinkle);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+}
+
+.link-btn:hover { color: var(--fg); }
+.link-btn:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 2px; border-radius: 2px; }
+.auth-form input[type="password"]#reset-password, .auth-form input[type="password"]#reset-password-2 { width: 100%; }
+
 .auth-tabs {
     display: flex;
     margin-bottom: 0.9rem;
@@ -1007,7 +1035,7 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
 
 /* --- Stacked layout (board over panel) -------------------------------- */
 
-@media (max-width: 978px) {
+@media (min-width: 641px) and (max-width: 978px) {
     :root {
         --panel-width: clamp(360px, 45vw, 440px);
         --panel-height: 230px;
@@ -1036,12 +1064,18 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
 
     .pane {
         display: grid;
-        grid-template-columns: clamp(150px, 18.4vw, 180px) 1fr;
+        grid-template-columns: clamp(150px, 18.4vw, 180px) minmax(0, 1fr);
         grid-template-rows: min-content 1fr;
         gap: 0.5rem 0.75rem;
         padding: 0.6rem;
     }
 
+    .pane > * { min-width: 0; }
+    .toolbar .btn-tool { min-width: 0; overflow: hidden; }
+    /* Four export buttons in the narrow right column: icons only. */
+    .pane-replay .toolbar .btn-tool span { display: none; }
+    .pane-replay .toolbar .btn-tool .icon { width: 1.2rem; height: 1.2rem; }
+
     body[data-mode="replay"] .pane-live, body[data-mode="live"] .pane-replay { display: none; }
 
     .pane-live .turn-strip { grid-column: 1; grid-row: 1; }
@@ -1086,19 +1120,111 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
     .btn-tool { font-size: 0.74rem; padding: 0.3rem 0.2rem; }
 }
 
-@media (max-width: 530px) {
+/* --- Phone layout: full-width rows, edge to edge ------------------------ */
+
+@media (max-width: 640px) {
     :root {
-        --panel-width: min(92vw, 440px);
-        --board-edge: max(240px, min(min(92vw, 440px), calc(100vh - 332px)));
-        --board-pad: 12px;
+        /* Reserve under the board: top bar 40 + gap 6 + turn strip 32 +
+           controls 36 + move list 96 + toolbar 36 + gaps and padding 26 =
+           276. Small viewport units, so the browser's bars never cover the
+           panel. The replay pane is taller (head, navigation, export, exit),
+           so a replay reserves more and the board gives way on a short
+           screen rather than the controls dropping below the fold. */
+        --board-edge: max(240px, min(100vw, calc(100svh - 284px)));
+        --board-pad: 14px;
+        --panel-width: 100%;
+        --panel-height: auto;
+        --topbar-height: 2.5rem;
+    }
+
+    body { overflow-y: auto; overflow-x: hidden; }
+    body[data-mode="replay"] { --board-edge: max(240px, min(100vw, calc(100svh - 372px))); }
+
+    /* The app is exactly the viewport, so the panel and its move list shrink
+       to fit; only when their minimums do not fit does the page scroll. */
+    .app { padding: 0; gap: 6px; height: 100svh; min-height: 100svh; overflow: visible; }
+
+    .topbar {
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+        padding: 0 0.6rem;
     }
 
     .brand-name, #games-btn span, #auth-label { display: none; }
-    /* Icon-only export row in the replay pane: four buttons in 190px. */
-    .pane-replay .toolbar .btn-tool span { display: none; }
-    .pane-replay .toolbar .btn-tool .icon { width: 1.2rem; height: 1.2rem; }
-    #games-btn, #auth-btn { padding: 0.35rem 0.5rem; }
-    .pane { grid-template-columns: 140px 1fr; }
+    #games-btn, #auth-btn { padding: 0.35rem 0.55rem; }
+
+    .workspace {
+        flex: 1 1 auto;
+        min-height: 0;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 6px;
+        overflow: visible;
+    }
+
+    .board-area { flex: none; }
+
+    .board-area { padding: var(--board-pad) 6px 6px 16px; }
+    .board-wrapper {
+        width: calc(var(--board-edge) - 22px);
+        height: calc(var(--board-edge) - 22px);
+    }
+    .coordinates.ranks { left: -14px; }
+    .coordinates.files { top: -15px; }
+
+    .panel {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        flex: 1 1 auto;
+        min-height: 0;
+        height: auto;
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+        border-bottom: none;
+    }
+
+    .pane, .pane-live, .pane-replay {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: 0.4rem;
+        padding: 0.5rem 0.6rem 0.6rem;
+        height: auto;
+    }
+
+    .pane > * { min-width: 0; }
+
+    .turn-strip { min-height: 2rem; padding: 0.25rem 0.6rem; }
+
+    .pane-live .controls {
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: auto;
+        gap: 0.35rem;
+    }
+    .pane-live .controls .btn { padding: 0.5rem 0.2rem; font-size: 0.85rem; min-height: 2.25rem; height: auto; }
+
+    .moves { flex: 1 1 auto; min-height: 96px; }
+    .move-grid { grid-template-columns: 2.2rem 1fr 1fr; font-size: 0.9rem; }
+
+    .toolbar .btn-tool { padding: 0.45rem 0.3rem; font-size: 0.82rem; min-width: 0; }
+
+    /* Replay: head, list, navigation, export and exit as rows. */
+    .pane-replay .replay-head { padding: 0.35rem 0.6rem; }
+    .pane-replay .replay-meta { display: none; }
+    .pane-replay .replay-nav {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr) 1.4fr 1fr;
+        gap: 0.3rem;
+    }
+    .pane-replay .replay-nav .speed { margin: 0; }
+    .pane-replay .replay-nav .speed select { width: 100%; }
+    .pane-replay .btn-nav { width: 100%; height: 2.2rem; }
+    .pane-replay #replay-exit { padding: 0.5rem; font-size: 0.85rem; }
+
     .games-modal { padding: 0.75rem; }
     .game-row { gap: 0.5rem; padding: 0.4rem; }
     .mini-board { width: 56px; height: 56px; }
@@ -1106,6 +1232,13 @@ input[type="range"]:focus-visible { outline: 2px solid var(--periwinkle); outlin
     .modal-overlay { padding: 0.5rem; }
 }
 
+/* Very narrow phones: icon-only export buttons. */
+@media (max-width: 380px) {
+    .pane-replay .toolbar .btn-tool span { display: none; }
+    .pane-replay .toolbar .btn-tool .icon { width: 1.2rem; height: 1.2rem; }
+    .pane-live .controls .btn { font-size: 0.8rem; }
+}
+
 /* --- Motion ---------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {