v0.4.1 web ui improved, docs updated

README.md

@@ -64,6 +64,33 @@ go build ./cmd/chessd
 
 Server listens on `http://localhost:8080`. See [API Reference](./doc/api.md) for endpoints.
 
+## Web UI
+
+The chess server includes an embedded web UI for playing games through a browser.
+
+### Enabling Web UI
+```bash
+# Start with web UI on default port 9090
+./chessd -serve
+
+# Custom web UI port  
+./chessd -serve -web-port 3000 -web-host 0.0.0.0
+
+# Full example with all features
+./chessd -dev -serve -web-port 9090 -api-port 8080 -storage-path chess.db
+```
+
+### Features
+- Visual chess board with drag-and-drop moves
+- Human vs Computer gameplay
+- Configurable engine strength (0-20)
+- Move history with algebraic notation
+- FEN display and custom starting positions
+- Real-time server health monitoring
+- Responsive design for mobile devices
+
+Access the UI at `http://localhost:9090` when server is running with `-serve` flag.
+
 ## Documentation
 
 - [API Reference](./doc/api.md) - Endpoint specifications

doc/development.md

@@ -18,8 +18,11 @@ go build ./cmd/chessd
 ## Running
 
 ### Flags
-- `-host`: Server host (default: localhost)
+- `-api-host`: API server host (default: localhost)
-- `-port`: Server port (default: 8080)
+- `-api-port`: API server port (default: 8080)
+- `-serve`: Enable embedded web UI server
+- `-web-host`: Web UI server host (default: localhost)
+- `-web-port`: Web UI server port (default: 9090)
 - `-dev`: Development mode with relaxed rate limits
 - `-storage-path`: SQLite database file path (enables persistence)
 - `-pid`: PID file path for process tracking

internal/webserver/web/app.js

@@ -14,7 +14,7 @@ let gameState = {
     moveList: [],
 };
 
-// Chess piece Unicode
+// Chess piece Unicode: all black pieces for better fill, white pawn due to inability to override emoji variant display
 const pieceMap = {
     'p': '♙', 'r': '♜', 'n': '♞', 'b': '♝', 'q': '♛', 'k': '♚',
     'P': '♙', 'R': '♜', 'N': '♞', 'B': '♝', 'Q': '♛', 'K': '♚'
@@ -29,7 +29,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     document.getElementById('undo-btn').addEventListener('click', undoMoves);
     document.getElementById('start-game-btn').addEventListener('click', startNewGame);
     document.getElementById('cancel-btn').addEventListener('click', hideNewGameModal);
-    document.getElementById('copy-fen').addEventListener('click', copyFEN);
     document.getElementById('copy-history').addEventListener('click', copyHistory);
 
     const levelSlider = document.getElementById('computer-level');
@@ -64,13 +63,12 @@ function startHealthCheck() {
                 updateStorageIndicator(health.storage || 'unknown');
                 gameState.networkError = false;
             } else {
-                updateServerIndicator('degraded');
+                handleApiError('health check', null, response);
                 updateStorageIndicator('unknown');
             }
         } catch (error) {
-            updateServerIndicator('degraded');
+            handleApiError('health check', error);
             updateStorageIndicator('unknown');
-            gameState.networkError = true;
         }
     };
 
@@ -78,11 +76,22 @@ function startHealthCheck() {
     gameState.healthCheckInterval = setInterval(checkHealth, 10000);
 }
 
-function updateServerIndicator(status) {
+function updateServerIndicator(status, message = null) {
     const indicator = document.getElementById('server-indicator');
     const light = indicator.querySelector('.light');
     light.setAttribute('data-status', status);
-    indicator.setAttribute('data-status', status);
+    // Set custom tooltip if message provided
+    if (message) {
+        indicator.setAttribute('data-status', message);
+    } else {
+        // Default messages
+        const defaultMessages = {
+            'healthy': 'healthy',
+            'degraded': 'degraded',
+            'unknown': 'unknown'
+        };
+        indicator.setAttribute('data-status', defaultMessages[status] || status);
+    }
 }
 
 function updateStorageIndicator(status) {
@@ -97,46 +106,46 @@ function updateTurnIndicator(state, turn) {
     const light = indicator.querySelector('.light');
 
     let status = '';
-    let tooltip = 'Turn: ';
+    let tooltipText = '';
 
-    if (gameState.networkError) {
+    if (state === 'pending' || gameState.isLocked) {
-        status = 'network-error';
-        tooltip += 'Network Error';
-    } else if (state === 'pending' || gameState.isLocked) {
         status = 'thinking';
-        tooltip += 'Computer Thinking';
+        tooltipText = 'Computer Thinking';
     } else if (state && isGameOver(state)) {
         switch(state) {
             case 'white wins':
                 status = 'white-wins';
-                tooltip = 'White Wins';
+                tooltipText = 'White Wins';
                 break;
             case 'black wins':
                 status = 'black-wins';
-                tooltip = 'Black Wins';
+                tooltipText = 'Black Wins';
                 break;
             case 'stalemate':
                 status = 'stalemate';
-                tooltip = 'Stalemate';
+                tooltipText = 'Stalemate';
                 break;
             case 'draw':
                 status = 'draw';
-                tooltip = 'Draw';
+                tooltipText = 'Draw';
                 break;
             default:
                 status = 'unknown';
-                tooltip = 'Game Over';
+                tooltipText = 'Game Over';
         }
     } else if (turn === 'w') {
         status = 'white';
-        tooltip += 'White';
+        tooltipText = 'White';
-    } else {
+    } else if (turn === 'b') {
         status = 'black';
-        tooltip += 'Black';
+        tooltipText = 'Black';
+    } else {
+        status = 'unknown';
+        tooltipText = 'Unknown';
     }
 
     light.setAttribute('data-status', status);
-    indicator.setAttribute('data-status', tooltip.split(': ')[0]);
+    indicator.setAttribute('data-status', tooltipText);
 }
 
 function showNewGameModal() {
@@ -214,17 +223,6 @@ function handleSliderNav(e, direction) {
     }
 }
 
-function copyFEN() {
-    const fenText = document.getElementById('fen-display').textContent;
-    navigator.clipboard.writeText(fenText).then(() => {
-        const btn = document.getElementById('copy-fen');
-        btn.classList.add('copied');
-        setTimeout(() => {
-            btn.classList.remove('copied');
-        }, 2000);
-    });
-}
-
 function copyHistory() {
     const moves = gameState.moveList;
     let pgn = '';
@@ -235,6 +233,10 @@ function copyHistory() {
         pgn += moves[i] + ' ';
     }
 
+    if (gameState.fen) {
+        pgn += `\n\n[FEN "${gameState.fen}"]`;
+    }
+
     navigator.clipboard.writeText(pgn.trim()).then(() => {
         const btn = document.getElementById('copy-history');
         btn.classList.add('copied');
@@ -248,32 +250,50 @@ async function startNewGame() {
     const playerColor = document.querySelector('input[name="player-color"]:checked').value;
     const computerLevel = parseInt(document.getElementById('computer-level').value);
     const searchTime = parseInt(document.getElementById('search-time').value);
+    const startingFEN = document.getElementById('starting-fen').value.trim();
     gameState.isPlayerWhite = (playerColor === 'white');
 
     const whiteConfig = gameState.isPlayerWhite ? { type: 1 } : { type: 2, level: computerLevel, searchTime: searchTime };
     const blackConfig = gameState.isPlayerWhite ? { type: 2, level: computerLevel, searchTime: searchTime } : { type: 1 };
 
+    const requestBody = {
+        white: whiteConfig,
+        black: blackConfig
+    };
+
+    const defaultFEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
+    if (startingFEN && startingFEN !== defaultFEN) {
+        requestBody.fen = startingFEN;
+    }
+
     try {
         const response = await fetch(`${gameState.apiUrl}/api/v1/games`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ white: whiteConfig, black: blackConfig })
+            body: JSON.stringify(requestBody)
         });
         if (!response.ok) throw new Error('Failed to create game');
 
+        if (!response.ok) {
+            const errorInfo = handleApiError('create game', null, response);
+            throw new Error(errorInfo.statusMessage);
+        }
+
         const game = await response.json();
         gameState.gameId = game.gameId;
         gameState.moveList = [];
         hideNewGameModal();
         initializeBoard();
         updateGameDisplay(game);
-        document.getElementById('undo-btn').disabled = false;
+        document.getElementById('undo-btn').disabled = true;
         if (!gameState.isPlayerWhite) triggerComputerMove();
 
     } catch (error) {
-        console.error('Error starting game:', error);
+        if (error.message === 'Failed to fetch') {
-        alert('Failed to start new game');
+            handleApiError('create game', error);
-        gameState.networkError = true;
+        } else {
+            flashErrorMessage(error.message);
+        }
         updateTurnIndicator('', '');
     }
 }
@@ -367,6 +387,7 @@ function handleSquareClick(e) {
         gameState.selectedSquare = square;
         squareEl.classList.add('selected');
     } else {
+        flashErrorMessage('Invalid Piece Selection');
         // Flash red for invalid piece selection
         flashSquare(squareEl, false);
     }
@@ -392,42 +413,51 @@ async function handleHumanMove(from, to) {
 
         const game = await response.json();
         if (!response.ok) {
-            // Invalid move - flash both squares red
+            // Handle client errors differently - these aren't network issues
-            flashSquare(fromEl, false);
+            if (response.status === 400) {
-            flashSquare(toEl, false);
+                // Invalid move - flash message and squares
-            renderBoardFromFEN(gameState.fen);
+                // Handled early, not shown as server error, and bypasses handleApiError
+                flashErrorMessage('Invalid Move');
+                flashSquare(fromEl, false);
+                flashSquare(toEl, false);
+                renderBoardFromFEN(gameState.fen);
+                return;
+            }
+            // Other errors use error handler
+            handleApiError('move', null, response);
             return;
         }
 
-        // Valid move - flash both squares green
         flashSquare(fromEl, true);
         flashSquare(toEl, true);
-
         updateGameDisplay(game);
         if (!isGameOver(game.state)) {
             triggerComputerMove();
         }
     } catch (error) {
-        console.error('Error making move:', error);
+        handleApiError('move', error);
-        gameState.networkError = true;
-        updateTurnIndicator('', gameState.turn);
     }
 }
 
 async function triggerComputerMove() {
     lockBoard();
     try {
-        await fetch(`${gameState.apiUrl}/api/v1/games/${gameState.gameId}/moves`, {
+        const response = await fetch(`${gameState.apiUrl}/api/v1/games/${gameState.gameId}/moves`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ move: 'cccc' })
         });
+
+        if (!response.ok) {
+            handleApiError('trigger computer move', null, response);
+            unlockBoard();
+            return;
+        }
+
         gameState.networkError = false;
         startPolling();
     } catch (error) {
-        console.error('Error triggering computer move:', error);
+        handleApiError('trigger computer move', error);
-        gameState.networkError = true;
-        updateTurnIndicator('', gameState.turn);
         unlockBoard();
     }
 }
@@ -436,7 +466,20 @@ function startPolling() {
     gameState.pollInterval = setInterval(async () => {
         try {
             const response = await fetch(`${gameState.apiUrl}/api/v1/games/${gameState.gameId}`);
-            if (!response.ok) throw new Error('Failed to get game state');
+            if (!response.ok) {
+                // Use error handler but continue polling for 404 (game might be deleted)
+                const errorInfo = handleApiError('poll game state', null, response);
+                if (response.status === 404) {
+                    stopPolling();
+                    unlockBoard();
+                    flashErrorMessage('Game no longer exists');
+                    gameState.gameId = null;
+                    return;
+                }
+                // For other errors, display but keep polling
+                handleApiError('poll game state', null, response);
+                return;
+            }
 
             const game = await response.json();
             if (game.state !== 'pending') {
@@ -445,10 +488,9 @@ function startPolling() {
                 unlockBoard();
             }
             gameState.networkError = false;
+            updateServerIndicator('healthy');
         } catch (error) {
-            console.error('Error polling game state:', error);
+            handleApiError('poll game state', error);
-            gameState.networkError = true;
-            updateTurnIndicator('', gameState.turn);
             stopPolling();
             unlockBoard();
         }
@@ -472,23 +514,36 @@ function unlockBoard() {
 
 async function undoMoves() {
     if (gameState.isLocked) return;
+
+    if (!gameState.moveList || gameState.moveList.length < 2) {
+        console.log('No moves to undo');
+        return;
+    }
+
     try {
         const response = await fetch(`${gameState.apiUrl}/api/v1/games/${gameState.gameId}/undo`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ count: 2 })
         });
-        if (!response.ok) throw new Error('Failed to undo moves');
+
+        if (!response.ok) {
+            const errorInfo = handleApiError('undo', null, response);
+            // For client errors like "no moves to undo", don't throw
+            if (errorInfo.isClientError) {
+                console.log('Undo failed:', errorInfo.statusMessage);
+                return;
+            }
+            throw new Error(errorInfo.statusMessage);
+        }
+
         const game = await response.json();
-
-        // Clear checkmate state
         gameState.state = game.state;
-
         updateGameDisplay(game);
     } catch (error) {
-        console.error('Error undoing moves:', error);
+        if (error.message === 'Failed to fetch') {
-        gameState.networkError = true;
+            handleApiError('undo', error);
-        updateTurnIndicator('', gameState.turn);
+        }
     }
 }
 
@@ -575,9 +630,6 @@ function updateGameDisplay(game) {
         if (toEl) toEl.classList.add('last-move-to');
     }
 
-    // Update FEN display
-    document.getElementById('fen-display').textContent = game.fen || '-';
-
     // Update move history
     renderMoveHistory(game.moves || []);
 
@@ -604,12 +656,95 @@ function isGameOver(state) {
     return ['white wins', 'black wins', 'stalemate', 'draw'].includes(state);
 }
 
-function getGameOverText(state) {
+function handleApiError(action, error, response = null) {
-    switch(state) {
+    let serverStatus = 'degraded';
-        case 'white wins': return 'White Wins';
+    let statusMessage = 'Server Error';
-        case 'black wins': return 'Black Wins';
+    let isNetworkError = !response;
-        case 'stalemate': return 'Stalemate';
+
-        case 'draw': return 'Draw';
+    if (isNetworkError) {
-        default: return state;
+        // Network/connection error
+        statusMessage = 'Connection Failed';
+        console.error(`Network error during ${action}:`, error);
+    } else if (response) {
+        const status = response.status;
+
+        // Map status codes to user-friendly messages
+        switch (status) {
+            case 400:
+                // Bad request - not a server issue, game logic error
+                serverStatus = 'healthy'; // Server is fine, request was invalid
+                if (action === 'undo') {
+                    statusMessage = 'No Moves to Undo';
+                } else if (action === 'move') {
+                    statusMessage = 'Invalid Move';
+                } else {
+                    statusMessage = 'Invalid Request';
+                }
+                break;
+            case 404:
+                serverStatus = 'healthy'; // Server is fine, game doesn't exist
+                statusMessage = 'Game Not Found';
+                break;
+            case 429:
+                serverStatus = 'degraded';
+                statusMessage = 'Rate Limited';
+                break;
+            case 415:
+                serverStatus = 'healthy';
+                statusMessage = 'Invalid Content Type';
+                break;
+            case 500:
+            case 502:
+            case 503:
+                serverStatus = 'degraded';
+                statusMessage = status === 503 ? 'Service Unavailable' : 'Server Error';
+                break;
+            default:
+                if (status >= 500) {
+                    serverStatus = 'degraded';
+                    statusMessage = `Server Error (${status})`;
+                } else if (status >= 400) {
+                    serverStatus = 'healthy';
+                    statusMessage = `Request Failed (${status})`;
+                }
+        }
+
+        console.error(`API error during ${action}: ${status} - ${statusMessage}`);
     }
+
+    flashErrorMessage(statusMessage);
+
+    // Update indicators based on error type
+    if (isNetworkError || (response && response.status >= 500)) {
+        updateServerIndicator(serverStatus, statusMessage);
+        gameState.networkError = true;
+    } else {
+        // For client errors (4xx), server is healthy but request failed
+        updateServerIndicator('healthy');
+        gameState.networkError = false;
+    }
+
+    return {
+        serverStatus,
+        statusMessage,
+        isNetworkError,
+        isClientError: response && response.status >= 400 && response.status < 500,
+        isServerError: response && response.status >= 500
+    };
+}
+
+function flashErrorMessage(message) {
+    const overlay = document.getElementById('error-flash-overlay');
+    const messageEl = document.getElementById('error-flash-message');
+
+    // Set message text
+    messageEl.textContent = message;
+
+    // Show overlay
+    overlay.classList.add('show');
+
+    // Auto-hide after animation completes
+    setTimeout(() => {
+        overlay.classList.remove('show');
+    }, 500);
 }

internal/webserver/web/index.html

@@ -25,15 +25,6 @@
                         <div id="board"></div>
                     </div>
                 </div>
-                <div class="fen-container">
-                    <div id="fen-display" class="fen-display">-</div>
-                    <button class="copy-btn" id="copy-fen" title="Copy FEN">
-                        <svg viewBox="0 0 24 24" width="16" height="16">
-                            <rect x="9" y="9" width="13" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
-                            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" fill="none" stroke="currentColor" stroke-width="2"/>
-                        </svg>
-                    </button>
-                </div>
             </div>
 
             <aside class="info-panel">
@@ -47,6 +38,14 @@
                     <div class="indicator" id="turn-indicator" data-tooltip="Turn">
                         <span class="light turn-light" data-status="white">●</span>
                     </div>
+                    <div class="error-flash-overlay" id="error-flash-overlay">
+                        <div class="error-flash-message" id="error-flash-message"></div>
+                    </div>
+                </div>
+
+                <div class="controls">
+                    <button id="new-game-btn" class="btn btn-primary">New Game</button>
+                    <button id="undo-btn" class="btn btn-secondary" disabled>Undo</button>
                 </div>
 
                 <div class="move-history-container">
@@ -61,16 +60,11 @@
                     </div>
                 </div>
 
-                <div class="controls">
-                    <button id="new-game-btn" class="btn btn-primary">New Game</button>
-                    <button id="undo-btn" class="btn btn-secondary" disabled>Undo</button>
-                </div>
             </aside>
         </main>
     </div>
 </div>
 
-<!-- New Game Modal -->
 <div id="modal-overlay" class="modal-overlay">
     <div class="modal">
         <h2>New Game</h2>
@@ -89,6 +83,11 @@
             <label for="search-time">Search Time (ms): <span id="time-value">1000</span></label>
             <input type="range" id="search-time" min="100" max="10000" step="100" value="1000">
         </div>
+        <div class="form-group">
+            <label for="starting-fen">Starting Position (FEN)</label>
+            <textarea id="starting-fen" class="fen-input" rows="2"
+                      placeholder="Enter FEN notation">rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1</textarea>
+        </div>
         <div class="modal-buttons">
             <button id="start-game-btn" class="btn btn-primary">Start Game</button>
             <button id="cancel-btn" class="btn btn-secondary">Cancel</button>

internal/webserver/web/style.css

@@ -6,17 +6,25 @@
 }
 
 :root {
+    /* Host-site dark theme colors */
+    --host-bg: #11111b;
+    --host-surface: #1a1b26;
+    --host-royal: #5f57f5;
+    --host-royal-secondary: #38348f;
+    --host-blue-primary: #2563eb;
+    --host-blue-secondary: #1e40af;
+    --host-white: #ffffff;
+    --blue-accent: #dbeafe;
+    --host-gray-muted: #64748b;
+    --host-gray-light: #f8fafc;
+
     /* Tokyo Night colors */
-    --tokyo-bg: #1a1b26;
-    --tokyo-bg-dark: #16161e;
-    --tokyo-fg: #a9b1d6;
     --tokyo-cyan: #7dcfff;
-    --tokyo-blue: #7aa2f7;
-    --tokyo-purple: #bb9af7;
     --tokyo-green: #9ece6a;
     --tokyo-yellow: #e0af68;
     --tokyo-red: #f7768e;
     --tokyo-border: #3b4261;
+    --tokyo-fg: #a9b1d6;
 
     /* Board colors */
     --square-light: #f0d9b5;
@@ -24,79 +32,82 @@
     --square-selected: #6a994e;
     --move-from: #5090d3;
     --move-to: #81b3f0;
+    --checkmated-king: #8b0000;
 }
 
 /* Base Layout */
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: #11111b;
+    background: var(--host-bg);
-    min-height: 100vh;
+    height: 100vh;
     width: 100vw;
     margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow-x: hidden;
+    overflow: hidden;
-    overflow-y: auto;
 }
 
 .outer-container {
     width: 100%;
-    min-height: 100vh;
+    height: 100vh;
     padding: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow: visible;
+    overflow: hidden;
 }
 
 .container {
-    background: var(--tokyo-bg);
+    background: var(--host-surface);
     border-radius: 12px;
     box-shadow: 0 20px 40px rgba(0,0,0,0.4);
     padding: 1.5rem;
-    width: 100%;
+    width: calc(100% - 16px);
-    max-width: 1100px;
+    height: calc(100% - 16px);
-    min-height: 600px;
-    max-height: calc(100vh - 16px);
     color: var(--tokyo-fg);
     display: flex;
     flex-direction: column;
-    overflow: visible;
+    overflow: hidden;
 }
 
 main {
     display: grid;
     grid-template-columns: 1fr 340px;
-    gap: 1.5rem;
+    gap: 2rem;
-    height: 100%;
-    min-height: 0;
-}
-
-/* Game Area */
-.game-area {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    min-width: 0;
-    min-height: 0;
-}
-
-/* Board and Coordinates */
-.board-container {
     flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    height: 100%;
+    max-width: 980px;
+    margin: 0 auto;
+    align-items: center;
+}
+
+.game-area {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 0;
+    min-width: 440px;
+    overflow: visible;
+    height: 100%;
+}
+
+.board-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 440px;
+    height: 440px;
+    padding: 20px;
+    position: relative;
 }
 
 .board-wrapper {
     position: relative;
-    width: 100%;
+    width: 400px;
-    max-width: min(100%, calc(100vh - 200px));
+    height: 400px;
-    aspect-ratio: 1;
+    margin: 0;
-    margin: 0 auto;
 }
 
 .coordinates {
@@ -109,7 +120,7 @@ main {
 }
 
 .coordinates.top {
-    top: -20px;
+    top: -18px;
     left: 0;
     right: 0;
     justify-content: space-around;
@@ -117,7 +128,7 @@ main {
 }
 
 .coordinates.left {
-    left: -20px;
+    left: -18px;
     top: 0;
     bottom: 0;
     flex-direction: column;
@@ -127,7 +138,10 @@ main {
 
 #board {
     position: absolute;
-    inset: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     grid-template-rows: repeat(8, 1fr);
@@ -143,6 +157,8 @@ main {
     cursor: pointer;
     user-select: none;
     position: relative;
+    aspect-ratio: 1;
+    overflow: hidden;
 }
 
 .square.light { background-color: var(--square-light); }
@@ -150,8 +166,8 @@ main {
 .square.selected { background-color: var(--square-selected) !important; }
 .square.last-move-from { background-color: var(--move-from) !important; }
 .square.last-move-to { background-color: var(--move-to) !important; }
-.square.white-piece { color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
+.square.white-piece { color: var(--host-white); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
-.square.black-piece { color: #2c2c2c; text-shadow: 1px 1px 2px rgba(255,255,255,0.2); }
+.square.black-piece { color: var(--host-bg); text-shadow: 1px 1px 2px rgba(255,255,255,0.2); }
 
 /* Move feedback animations */
 @keyframes flashGreen {
@@ -170,6 +186,23 @@ main {
 
 .square.flash-red {
     animation: flashRed 0.4s ease-out;
+    position: relative;
+    z-index: 2;
+}
+
+.square.flash-red::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgba(247, 118, 142, 0.8);
+    animation: flashFade 0.4s ease-out;
+    pointer-events: none;
+}
+
+@keyframes flashFade {
+    0% { opacity: 0; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
 }
 
 /* Checkmate indicator */
@@ -183,49 +216,9 @@ main {
     z-index: 1;
 }
 
+.square.mated-king.white-piece,
 .square.mated-king.black-piece {
-    color: #8b0000 !important;
+    color: var(--checkmated-king) !important;
-}
-
-.square.mated-king.white-piece {
-    color: #dc143c !important;
-}
-
-/* FEN Display */
-.fen-container {
-    position: relative;
-    height: 40px;
-    flex-shrink: 0;
-}
-
-.fen-display {
-    height: 100%;
-    padding: 0.5rem 3rem 0.5rem 0.5rem;
-    font-family: 'Courier New', monospace;
-    font-size: 0.75rem;
-    background: var(--tokyo-bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--tokyo-border);
-    color: var(--tokyo-fg);
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    display: flex;
-    align-items: center;
-    scrollbar-width: none;
-}
-
-.fen-display::-webkit-scrollbar {
-    display: none;
-}
-
-.fen-display::-webkit-scrollbar-track {
-    background: var(--tokyo-bg-dark);
-}
-
-.fen-display::-webkit-scrollbar-thumb {
-    background: var(--tokyo-border);
-    border-radius: 2px;
 }
 
 /* Copy Buttons */
@@ -249,14 +242,13 @@ main {
     justify-content: center;
 }
 
-.fen-container:hover .copy-btn,
 .move-history-container:hover .copy-btn {
     opacity: 0.7;
 }
 
 .copy-btn:hover {
     opacity: 1 !important;
-    background: var(--tokyo-blue);
+    background: var(--host-royal);
 }
 
 .copy-btn.copied {
@@ -269,32 +261,36 @@ main {
 }
 
 .copy-btn.copied::after {
-    content: '✓';
+    content: '✓';
     font-size: 14px;
 }
 
 /* Info Panel */
 .info-panel {
-    background: var(--tokyo-bg-dark);
+    background: var(--host-bg);
     border-radius: 8px;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    min-height: 0;
+    overflow: hidden;
+    width: 340px;
+    height: 440px;
+    align-self: center;
 }
 
 /* Status Indicators */
 .status-indicators {
     display: flex;
+    padding: 0.75rem;
     justify-content: space-evenly;
     align-items: center;
-    padding: 0.75rem;
+    background: var(--host-gray-muted);
-    background: var(--tokyo-bg);
+    border: none;
     border-radius: 6px;
-    border: 1px solid var(--tokyo-border);
+    cursor: pointer;
-    flex-shrink: 0;
+    height: auto;
-    height: 60px;
+    position: relative;
 }
 
 .indicator {
@@ -306,52 +302,31 @@ main {
 }
 
 .indicator .light {
-    font-size: 1.75rem;
+    font-size: 2rem;
-    transition: all 0.3s;
+    font-weight: 500;
+    transition: all 0.2s;
     line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.indicator .light[data-status="white-wins"]::before,
+.indicator .light[data-status="white-wins"] { color: var(--tokyo-red); }
-.indicator .light[data-status="black-wins"]::before {
+.indicator .light[data-status="black-wins"] { color: var(--tokyo-red); }
-    content: '';
-    position: absolute;
-    inset: -8px;
-    border: 2px solid var(--tokyo-red);
-    border-radius: 50%;
-    animation: pulseRed 2s infinite;
-    pointer-events: none;
-}
 
 /* Status colors */
 .indicator .light[data-status="healthy"] { color: var(--tokyo-green); }
 .indicator .light[data-status="disabled"] { color: var(--tokyo-yellow); }
 .indicator .light[data-status="degraded"] { color: var(--tokyo-red); }
 .indicator .light[data-status="unknown"] { color: var(--tokyo-border); }
-.indicator .light[data-status="white"] { color: #ffffff; }
+.indicator .light[data-status="white"] { color: var(--host-white); }
-.indicator .light[data-status="black"] { color: #2c2c2c; }
+.indicator .light[data-status="black"] { color: var(--host-bg); }
 .indicator .light[data-status="thinking"] {
     color: var(--tokyo-yellow);
     animation: pulse 1.5s infinite;
 }
 .indicator .light[data-status="network-error"] { color: var(--tokyo-red); }
 
-/* Win indicator */
-@keyframes pulseRed {
-    0%, 100% {
-        opacity: 0.3;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 0.8;
-        transform: scale(1.1);
-    }
-}
-
-.indicator .light[data-status="white-wins"],
-.indicator .light[data-status="black-wins"] {
-    animation: goldPulse 2s infinite;
-}
-
 .indicator .light[data-status="draw"],
 .indicator .light[data-status="stalemate"] {
     color: var(--tokyo-yellow);
@@ -368,7 +343,7 @@ main {
     bottom: -30px;
     left: 50%;
     transform: translateX(-50%);
-    background: #313244;
+    background: var(--tokyo-border);
     color: var(--tokyo-fg);
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
@@ -378,14 +353,42 @@ main {
     pointer-events: none;
 }
 
+/* Error Flash Overlay */
+.error-flash-overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--host-bg);
+    border-radius: 6px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    pointer-events: none;
+}
+
+.error-flash-overlay.show {
+    display: flex;
+    animation: none;
+}
+
+.error-flash-message {
+    color: var(--tokyo-red);
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-align: center;
+    padding: 0.5rem;
+}
+
 /* Move History */
 .move-history-container {
-    flex: 1;
+    flex: 1 1 auto;
     min-height: 0;
+    max-height: 100%;
     position: relative;
-    background: var(--tokyo-bg);
+    background: var(--host-surface);
     border-radius: 6px;
     border: 1px solid var(--tokyo-border);
+    overflow: hidden;
 }
 
 .move-history-container .copy-btn {
@@ -397,12 +400,13 @@ main {
 .move-history {
     height: 100%;
     overflow-y: auto;
-    overflow-x: hidden;
+    overflow-x: auto;
     padding: 0.75rem;
 }
 
 .move-history::-webkit-scrollbar {
     width: 6px;
+    height: 6px;
 }
 
 .move-history::-webkit-scrollbar-track {
@@ -424,7 +428,7 @@ main {
 }
 
 .move-number {
-    color: var(--tokyo-blue);
+    color: var(--tokyo-yellow);
     text-align: right;
     font-weight: 600;
 }
@@ -433,22 +437,21 @@ main {
 .move-black {
     padding: 0.25rem 0.5rem;
     border-radius: 3px;
-    transition: background 0.2s;
 }
 
 .move-white:hover,
 .move-black:hover {
-    background: var(--tokyo-border);
+    background: var(--host-royal);
 }
 
-.move-white { color: var(--tokyo-fg); }
+.move-white { color: var(--host-gray-light); }
 .move-black { color: var(--tokyo-cyan); }
 
 /* Controls */
 .controls {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
+    gap: 0.5rem;
     flex-shrink: 0;
 }
 
@@ -459,26 +462,27 @@ main {
     font-size: 0.9rem;
     font-weight: 500;
     cursor: pointer;
+    color: var(--host-white);
     transition: all 0.2s;
 }
 
 .btn-primary {
-    background: var(--tokyo-blue);
+    background: var(--host-blue-primary);
-    color: var(--tokyo-bg);
+    color: var(--host-white);
 }
 
 .btn-primary:hover {
-    background: var(--tokyo-cyan);
+    background: var(--host-royal);
     transform: translateY(-1px);
 }
 
 .btn-secondary {
-    background: #313244;
+    background: var(--host-blue-secondary);
-    color: var(--tokyo-fg);
+    color: var(--host-white);
 }
 
 .btn-secondary:hover:not(:disabled) {
-    background: var(--tokyo-border);
+    background: var(--host-royal);
     transform: translateY(-1px);
 }
 
@@ -504,7 +508,7 @@ main {
 }
 
 .modal {
-    background: var(--tokyo-bg);
+    background: var(--host-surface);
     border: 1px solid var(--tokyo-border);
     border-radius: 12px;
     padding: 2rem;
@@ -515,7 +519,7 @@ main {
 
 .modal h2 {
     margin-bottom: 1.5rem;
-    color: var(--tokyo-blue);
+    color: var(--host-royal);
     text-align: center;
 }
 
@@ -559,11 +563,31 @@ input[type="range"]::-webkit-slider-thumb {
     appearance: none;
     width: 16px;
     height: 16px;
-    background: var(--tokyo-blue);
+    background: var(--host-gray-muted);
     border-radius: 50%;
     cursor: pointer;
 }
 
+/* Modal FEN input */
+.fen-input {
+    width: 100%;
+    padding: 0.5rem;
+    background: var(--host-bg);
+    border: 1px solid var(--tokyo-border);
+    border-radius: 4px;
+    color: var(--tokyo-fg);
+    font-family: 'Courier New', monospace;
+    font-size: 0.85rem;
+    resize: none;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.fen-input:focus {
+    outline: none;
+    border-color: var(--host-royal);
+}
+
 .modal-buttons {
     display: flex;
     justify-content: center;
@@ -571,29 +595,38 @@ input[type="range"]::-webkit-slider-thumb {
     margin-top: 2rem;
 }
 
-/* Mobile/Responsive */
+/* Mobile/Responsiveness */
-@media (max-width: 900px) {
+@media (max-width: 978px) {
+
     body {
+        height: auto;
         min-height: 100vh;
         overflow-y: auto;
         overflow-x: hidden;
+        scrollbar-gutter: stable;
     }
 
     .outer-container {
         padding: 8px;
         min-height: 100vh;
         height: auto;
+        display: flex;
+        justify-content: center;
         align-items: flex-start;
-        padding-top: 20px;
+        overflow: visible;
     }
 
     .container {
-        border-radius: 0;
+        border-radius: 12px;
+        width: calc(100% - 16px);
+        min-height: calc(100vh - 16px);
         height: auto;
-        min-height: auto;
+        padding: 1rem;
-        max-height: none;
+        margin: 0;
-        padding: 0.5rem;
+        display: flex;
-        margin-bottom: 20px;
+        flex-direction: column;
+        justify-content: center;
+        overflow: visible;
     }
 
     main {
@@ -601,59 +634,167 @@ input[type="range"]::-webkit-slider-thumb {
         grid-template-rows: auto auto;
         gap: 0.5rem;
         height: auto;
-        min-height: auto;
+        max-width: none;
+        margin: 0 auto;
+        align-items: center;
+        justify-items: center;
+        overflow: visible;
+        flex-shrink: 0;
+    }
+
+    .game-area {
+        min-width: auto;
+        height: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
     .board-container {
-        height: auto;
+        width: 440px;
-        padding: 20px 0;
+        height: 440px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        flex-shrink: 0;
     }
 
     .board-wrapper {
-        max-width: calc(100vw - 56px);
+        width: 400px;
-        max-height: calc(100vw - 56px);
+        height: 400px;
-        margin: 0 auto;
+        position: relative;
+        margin: 0;
     }
 
     .coordinates.top {
         top: -18px;
+        left: 0;
+        right: 0;
     }
 
     .coordinates.left {
         left: -18px;
+        top: 0;
+        bottom: 0;
     }
 
-    .square {
+    #board {
-        font-size: clamp(20px, 8vw, 32px);
+        position: absolute;
-    }
+        top: 0;
-
+        left: 0;
-    .fen-container {
+        width: 100%;
-        display: none;
+        height: 100%;
     }
 
     .info-panel {
-        grid-template-columns: 1fr;
+        width: 440px;
-        gap: 0.5rem;
+        height: 200px;
-        padding: 0.5rem;
+        display: grid;
-        height: auto;
+        grid-template-columns: 180px 1fr;
+        grid-template-rows: min-content min-content 1fr;
+        gap: 0.5rem 1rem;
+        padding: 1rem;
+        align-self: center;
+        overflow: hidden;
+        flex-shrink: 0;
+        margin-bottom: 1rem;
     }
 
     .status-indicators {
-        padding: 0.5rem;
+        grid-column: 1;
-        height: 50px;
+        grid-row: 1;
-    }
+        display: flex;
-
+        padding: 0.25rem;
-    .move-history-container {
+        justify-content: space-evenly;
-        max-height: 30vh;
+        align-items: center;
-        min-height: 150px;
+        background: var(--host-gray-muted);
+        border: none;
+        border-radius: 6px;
+        height: auto;
+        margin: 0;
     }
 
     .controls {
-        grid-template-columns: 1fr 1fr;
+        grid-column: 1;
+        grid-row: 2 / 4;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+        gap: 0.5rem;
+        align-self: stretch;
+        height: auto;
+        min-height: 80px;
     }
 
     .btn {
         padding: 0.5rem;
         font-size: 0.85rem;
+        min-height: 35px;
+        height: 100%;
+        width: 100%;
+    }
+
+    .move-history-container {
+        grid-column: 2;
+        grid-row: 1 / 4;
+        height: 100%;
+        min-height: 0;
+        max-height: 100%;
+        align-self: stretch;
+    }
+
+    .move-grid {
+        grid-template-columns: 2rem 1fr 1fr;
+        gap: 0.25rem 0.5rem;
+        font-size: 0.85rem;
+    }
+
+    .move-history {
+        padding: 0.5rem;
+    }
+
+    .square {
+        font-size: clamp(24px, 5vw, 36px);
+    }
+}
+
+@media (max-width: 530px) {
+    body {
+        overflow-y: auto;
+        overflow-x: auto;
+        min-width: 530px;
+    }
+
+    .outer-container {
+        width: 530px;
+        min-width: 530px;
+        padding: 8px;
+        min-height: 100vh;
+        height: auto;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        overflow: visible;
+    }
+
+    .container {
+        width: 514px;
+        min-width: 514px;
+        border-radius: 12px;
+        min-height: calc(100vh - 16px);
+        height: auto;
+        padding: 1rem;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: visible;
+    }
+
+    .board-container,
+    .info-panel {
+        width: 440px;
+        min-width: 440px;
     }
 }