Help me fix the following code for a html+js interactive game board field. It should be 9x9 of main field squares, but between each should be borders and on the outside aswell (so a 19x19 functional grid). The border fields can't be squares, they need to be thinner for display clarity. The corners also need to change colors when walls are drawn. Major bug is that the flood fill check only works for single square fields but doesn't recognize larger properely enclosed encircled areas, even a 2x2 field always fails. Please also remove all the annoying popup alert windows, display the messages on a message line in the UI itself. CODE: <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Interactive Game Board</title>
    <style>
        /* Game board container */
        #game-container {
            display: grid;
            grid-template-columns: repeat(19, 20px);
            grid-template-rows: repeat(19, 20px);
            gap: 0;
            position: relative;
            width: 380px;
            height: 380px;
            margin: 20px auto;
            border: 2px solid #333;
        }

        /* Cells */
        .cell {
            width: 100%;
            height: 100%;
            background-color: white;
            border: 1px solid #ccc;
            position: relative;
            text-align: center;
            line-height: 20px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Corners */
        .corner {
            width: 100%;
            height: 100%;
            background-color: #666;
            cursor: pointer;
        }

        /* Horizontal walls */
        .h-wall {
            width: 100%;
            height: 100%;
            background-color: #aaa;
            cursor: pointer;
        }

        /* Vertical walls */
        .v-wall {
            width: 100%;
            height: 100%;
            background-color: #aaa;
            cursor: pointer;
        }

        /* Hover effect */
        .cell:hover,
        .corner:hover,
        .h-wall:hover,
        .v-wall:hover {
            background-color: #ffd700;
        }

        /* Controls */
        #controls {
            text-align: center;
            margin: 20px;
        }

        #controls button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
        }

        /* Status display */
        #status {
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
        }

        /* Filled area */
        .filled {
            background-color: rgba(0, 0, 255, 0.2);
        }

        .filled-red {
            background-color: rgba(255, 0, 0, 0.2);
        }

        /* Numbered cells */
        .number {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="status">Current Player: <span id="current-player" style="color: blue;">Blue (O)</span></div>
    <div id="game-container"></div>
    <div id="controls">
        <button id="flood-button" disabled>Flood</button>
        <button id="count-button" disabled>Count</button>
        <button id="pass-button" disabled>Pass Turn</button>
        <button id="reset-button">Reset Game</button>
    </div>
    <script>
        const N = 9; // Grid size
        const gameContainer = document.getElementById('game-container');
        const statusDisplay = document.getElementById('current-player');
        const floodButton = document.getElementById('flood-button');
        const countButton = document.getElementById('count-button');
        const passButton = document.getElementById('pass-button');
        const resetButton = document.getElementById('reset-button');

        let currentPlayer = 'blue'; // or 'red'
        let turnPhase = 1;
        let actionMode = null;
        let wallMode = false;
        let firstCorner = null;
        let countNumber = {
            blue: 1,
            red: 1
        };

        const players = {
            blue: {
                name: 'Blue',
                color: 'blue',
                marker: 'O',
                count: 0,
                markerPosition: null
            },
            red: {
                name: 'Red',
                color: 'red',
                marker: 'X',
                count: 0,
                markerPosition: null
            }
        };

        // Initialize game board elements
        function initGameBoard() {
            gameContainer.innerHTML = '';
            // Create cells
            for (let i = 0; i < N; i++) {
                for (let j = 0; j < N; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.style.gridRowStart = 1 + 2 * i;
                    cell.style.gridColumnStart = 1 + 2 * j;
                    cell.addEventListener('click', onCellClick);
                    gameContainer.appendChild(cell);
                }
            }

            // Create corners
            for (let i = 0; i <= N; i++) {
                for (let j = 0; j <= N; j++) {
                    const corner = document.createElement('div');
                    corner.classList.add('corner');
                    corner.dataset.row = i;
                    corner.dataset.col = j;
                    corner.style.gridRowStart = 2 * i;
                    corner.style.gridColumnStart = 2 * j;
                    corner.addEventListener('click', onCornerClick);
                    gameContainer.appendChild(corner);
                }
            }

            // Create horizontal walls
            for (let i = 0; i <= N; i++) {
                for (let j = 0; j < N; j++) {
                    const hWall = document.createElement('div');
                    hWall.classList.add('h-wall');
                    hWall.dataset.row = i;
                    hWall.dataset.col = j;
                    hWall.style.gridRowStart = 2 * i;
                    hWall.style.gridColumnStart = 1 + 2 * j;
                    hWall.addEventListener('click', onWallClick);
                    gameContainer.appendChild(hWall);
                }
            }

            // Create vertical walls
            for (let i = 0; i < N; i++) {
                for (let j = 0; j <= N; j++) {
                    const vWall = document.createElement('div');
                    vWall.classList.add('v-wall');
                    vWall.dataset.row = i;
                    vWall.dataset.col = j;
                    vWall.style.gridRowStart = 1 + 2 * i;
                    vWall.style.gridColumnStart = 2 * j;
                    vWall.addEventListener('click', onWallClick);
                    gameContainer.appendChild(vWall);
                }
            }
        }

        // Reset Game
        function resetGame() {
            currentPlayer = 'blue';
            turnPhase = 1;
            wallMode = false;
            firstCorner = null;
            actionMode = null;
            countNumber = {
                blue: 1,
                red: 1
            };
            players.blue.markerPosition = null;
            players.red.markerPosition = null;
            updateStatus();
            disableButtons();
            initGameBoard();
        }

        // Update status display
        function updateStatus() {
            statusDisplay.textContent = `${players[currentPlayer].name} (${players[currentPlayer].marker})`;
            statusDisplay.style.color = players[currentPlayer].color;
        }

        // Disable action buttons
        function disableButtons() {
            floodButton.disabled = true;
            countButton.disabled = true;
            passButton.disabled = true;
        }

        // Enable action buttons
        function enableButtons() {
            floodButton.disabled = false;
            countButton.disabled = false;
            passButton.disabled = false;
        }

        // Cell click handler
        function onCellClick(e) {
            if (turnPhase !== 1) {
                return;
            }
            const cell = e.currentTarget;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);

            // Remove previous marker
            if (players[currentPlayer].markerPosition) {
                const prevCell = document.querySelector(`.cell[data-row="${players[currentPlayer].markerPosition.row}"][data-col="${players[currentPlayer].markerPosition.col}"]`);
                prevCell.textContent = '';
            }

            // Place marker
            cell.textContent = players[currentPlayer].marker;
            cell.style.color = players[currentPlayer].color;

            // Update marker position
            players[currentPlayer].markerPosition = { row, col };

            // Enable action buttons
            enableButtons();

            // Move to next turn phase
            turnPhase = 2;
        }

        // Corner click handler
        function onCornerClick(e) {
            if (turnPhase !== 2 || actionMode !== null) {
                return;
            }
            const corner = e.currentTarget;
            const row = parseInt(corner.dataset.row);
            const col = parseInt(corner.dataset.col);

            if (!wallMode) {
                // Check if corner is adjacent to marker cell
                const markerPos = players[currentPlayer].markerPosition;
                if (isCornerAdjacentToCell(row, col, markerPos.row, markerPos.col)) {
                    wallMode = true;
                    firstCorner = { row, col, element: corner };
                    corner.style.backgroundColor = players[currentPlayer].color;
                } else {
                    alert('Select a corner adjacent to your marker cell.');
                    return;
                }
            } else {
                // Second corner click
                const dist = Math.abs(firstCorner.row - row) + Math.abs(firstCorner.col - col);
                if ((firstCorner.row === row || firstCorner.col === col) && (dist === 2 || dist === 4)) {
                    drawWallBetweenCorners(firstCorner, { row, col }, currentPlayer);
                    // Reset
                    wallMode = false;
                    firstCorner.element.style.backgroundColor = '#666';
                    firstCorner = null;
                } else {
                    alert('Second corner must be 1 or 2 squares away horizontally or vertically.');
                }
            }
        }

        // Wall click handler (not used directly but can be used for additional functionalities)
        function onWallClick(e) {
            // Placeholder for wall click actions if needed
        }

        // Check if corner is adjacent to cell
        function isCornerAdjacentToCell(cornerRow, cornerCol, cellRow, cellCol) {
            const cellCorners = getCellCorners(cellRow, cellCol);
            return cellCorners.some(c => c.row === cornerRow && c.col === cornerCol);
        }

        // Get corners of a cell
        function getCellCorners(cellRow, cellCol) {
            const topLeft = { row: cellRow, col: cellCol };
            const topRight = { row: cellRow, col: cellCol + 1 };
            const bottomLeft = { row: cellRow + 1, col: cellCol };
            const bottomRight = { row: cellRow + 1, col: cellCol + 1 };
            return [topLeft, topRight, bottomLeft, bottomRight];
        }

        // Draw wall between two corners
        function drawWallBetweenCorners(corner1, corner2, player) {
            if (corner1.row === corner2.row) {
                // Horizontal wall(s)
                const minCol = Math.min(corner1.col, corner2.col);
                const maxCol = Math.max(corner1.col, corner2.col);
                for (let col = minCol; col < maxCol; col++) {
                    const hWall = document.querySelector(`.h-wall[data-row="${corner1.row}"][data-col="${col}"]`);
                    hWall.style.backgroundColor = players[player].color;
                }
            } else if (corner1.col === corner2.col) {
                // Vertical wall(s)
                const minRow = Math.min(corner1.row, corner2.row);
                const maxRow = Math.max(corner1.row, corner2.row);
                for (let row = minRow; row < maxRow; row++) {
                    const vWall = document.querySelector(`.v-wall[data-row="${row}"][data-col="${corner1.col}"]`);
                    vWall.style.backgroundColor = players[player].color;
                }
            }
        }

        // Flood button handler
        floodButton.addEventListener('click', () => {
            if (actionMode !== null) return;
            actionMode = 'flood';
            alert('Click on a square field to attempt a Flood Fill.');
        });

        // Count button handler
        countButton.addEventListener('click', () => {
            if (actionMode !== null) return;
            actionMode = 'count';
            alert('Click on square fields to place counts. Click Pass Turn when done.');
        });

        // Pass button handler
        passButton.addEventListener('click', () => {
            endTurn();
        });

        // Reset button handler
        resetButton.addEventListener('click', () => {
            resetGame();
        });

        // Cell click handler for actions
        function onCellClick(e) {
            const cell = e.currentTarget;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);

            if (turnPhase === 1) {
                // Place marker
                // Remove previous marker
                if (players[currentPlayer].markerPosition) {
                    const prevCell = document.querySelector(`.cell[data-row="${players[currentPlayer].markerPosition.row}"][data-col="${players[currentPlayer].markerPosition.col}"]`);
                    prevCell.textContent = '';
                }

                // Place marker
                cell.textContent = players[currentPlayer].marker;
                cell.style.color = players[currentPlayer].color;

                // Update marker position
                players[currentPlayer].markerPosition = { row, col };

                // Enable action buttons
                enableButtons();

                // Move to next turn phase
                turnPhase = 2;
            } else if (turnPhase === 2) {
                if (actionMode === 'flood') {
                    performFloodFill(row, col);
                    actionMode = null;
                } else if (actionMode === 'count') {
                    placeCount(cell);
                }
            }
        }

        // Perform Flood Fill
        function performFloodFill(startRow, startCol) {
            const visited = {};
            const fillColor = currentPlayer === 'blue' ? 'filled' : 'filled-red';
            const stack = [{ row: startRow, col: startCol }];
            let isEnclosed = true;

            while (stack.length > 0) {
                const { row, col } = stack.pop();
                const key = `${row},${col}`;
                if (visited[key]) continue;
                visited[key] = true;

                // Check boundaries
                if (row < 0 || row >= N || col < 0 || col >= N) {
                    isEnclosed = false;
                    continue;
                }

                // Check walls around the cell
                const walls = getCellWalls(row, col);
                if (walls.top && !isWallPresent(walls.top)) {
                    isEnclosed = false;
                } else if (!walls.top) {
                    isEnclosed = false;
                } else if (!isWallPresent(walls.top)) {
                    stack.push({ row: row - 1, col });
                }

                if (walls.bottom && !isWallPresent(walls.bottom)) {
                    isEnclosed = false;
                } else if (!walls.bottom) {
                    isEnclosed = false;
                } else if (!isWallPresent(walls.bottom)) {
                    stack.push({ row: row + 1, col });
                }

                if (walls.left && !isWallPresent(walls.left)) {
                    isEnclosed = false;
                } else if (!walls.left) {
                    isEnclosed = false;
                } else if (!isWallPresent(walls.left)) {
                    stack.push({ row, col: col - 1 });
                }

                if (walls.right && !isWallPresent(walls.right)) {
                    isEnclosed = false;
                } else if (!walls.right) {
                    isEnclosed = false;
                } else if (!isWallPresent(walls.right)) {
                    stack.push({ row, col: col + 1 });
                }
            }

            if (isEnclosed) {
                // Fill the area
                for (const key in visited) {
                    const [row, col] = key.split(',').map(Number);
                    const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
                    cell.classList.add(fillColor);
                }
                alert('Area is enclosed. Filled!');
            } else {
                alert('Area is not fully enclosed.');
            }
        }

        // Get walls around a cell
        function getCellWalls(row, col) {
            const walls = {};

            // Top wall
            if (row > 0) {
                walls.top = document.querySelector(`.h-wall[data-row="${row}"][data-col="${col}"]`);
            } else {
                walls.top = null;
            }

            // Bottom wall
            if (row < N) {
                walls.bottom = document.querySelector(`.h-wall[data-row="${row + 1}"][data-col="${col}"]`);
            } else {
                walls.bottom = null;
            }

            // Left wall
            if (col > 0) {
                walls.left = document.querySelector(`.v-wall[data-row="${row}"][data-col="${col}"]`);
            } else {
                walls.left = null;
            }

            // Right wall
            if (col < N) {
                walls.right = document.querySelector(`.v-wall[data-row="${row}"][data-col="${col + 1}"]`);
            } else {
                walls.right = null;
            }

            return walls;
        }

        // Check if wall is present (colored)
        function isWallPresent(wall) {
            if (!wall) return false;
            return wall.style.backgroundColor !== '' && wall.style.backgroundColor !== 'rgb(170, 170, 170)';
        }

        // Place count on cell
        function placeCount(cell) {
            if (cell.querySelector('.number')) {
                alert('Cell already has a number.');
                return;
            }
            const number = countNumber[currentPlayer]++;
            const numberElement = document.createElement('div');
            numberElement.classList.add('number');
            numberElement.textContent = number;
            numberElement.style.color = players[currentPlayer].color;
            cell.appendChild(numberElement);
        }

        // End turn
        function endTurn() {
            // Reset variables
            turnPhase = 1;
            wallMode = false;
            firstCorner = null;
            actionMode = null;
            disableButtons();

            // Swap player
            currentPlayer = currentPlayer === 'blue' ? 'red' : 'blue';
            updateStatus();
        }

        // Initialize the game
        resetGame();
    </script>
</body>
</html>