I want you to do 2 coding updates to the following html+js game: 1. Add a function that will upon start of a new game randomly turn 12% of walls black. 2. Add counters of used walls per each player and display them on the top. CODE: <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Interactive Game Board</title>
    <style>
        /* Game board container */
        #game-container {
            display: grid;
            /* Define alternating wall and cell sizes: Walls are 10px, cells are 50px */
            grid-template-columns: 10px repeat(9, 50px 10px);
            grid-template-rows: 10px repeat(9, 50px 10px);
            gap: 0;
            position: relative;
            width: calc(10px + 9 * (50px + 10px)); /* 10 + 9*(50+10) = 10 + 540 = 550px */
            height: calc(10px + 9 * (50px + 10px)); /* 550px */
            margin: 50px auto;
            border: 10px solid #333;
            background-color: #fff;
        }

        /* Cells */
        .cell {
            width: 100%;
            height: 100%;
            background-color: white;
            border: none; /* Borders are handled by grid walls */
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        /* Marker container */
        .marker-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 24px;
            pointer-events: none; /* Allows clicks to pass through to the cell */
        }

        /* Number container */
        .number-container {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 14px;
            pointer-events: none; /* Allows clicks to pass through to the cell */
        }

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

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

        /* Vertical walls */
        .v-wall {
            width: 100%;
            height: 100%;
            background-color: transparent; /* Initially no wall */
            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;
            cursor: pointer;
        }

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

        /* Message display */
        #message {
            text-align: center;
            font-size: 16px;
            margin-bottom: 10px;
            color: green;
        }

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

        .filled-red {
            background-color: rgba(255, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div id="status">Current Player: <span id="current-player" style="color: blue;">Blue (O)</span></div>
    <div id="message"></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 messageDisplay = document.getElementById('message');
        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'; // 'blue' or 'red'
        let turnPhase = 1; // 1: Place marker, 2: Choose action
        let actionMode = null; // 'flood' or 'count'
        let wallMode = false; // Indicates if in wall drawing mode
        let firstCorner = null; // Stores first corner selected for wall
        let countNumber = {
            blue: 1,
            red: 1
        };
        let optionalWallDrawn = false; // Tracks optional wall during flood

        const players = {
            blue: {
                name: 'Blue',
                color: 'blue',
                marker: 'O',
                markerPosition: null
            },
            red: {
                name: 'Red',
                color: 'red',
                marker: 'X',
                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 = 2 + i * 2; // Cells are on even grid lines
                    cell.style.gridColumnStart = 2 + j * 2;

                    // Create marker and number containers
                    const markerContainer = document.createElement('div');
                    markerContainer.classList.add('marker-container');
                    markerContainer.id = `marker-${i}-${j}`;

                    const numberContainer = document.createElement('div');
                    numberContainer.classList.add('number-container');
                    numberContainer.id = `number-${i}-${j}`;

                    cell.appendChild(markerContainer);
                    cell.appendChild(numberContainer);

                    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 = 1 + i * 2;
                    corner.style.gridColumnStart = 1 + j * 2;
                    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 = 1 + i * 2;
                    hWall.style.gridColumnStart = 2 + j * 2;
                    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 = 2 + i * 2;
                    vWall.style.gridColumnStart = 1 + j * 2;
                    vWall.addEventListener('click', onWallClick);
                    gameContainer.appendChild(vWall);
                }
            }
        }

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

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

        // Set message display
        function setMessage(msg, color = 'green') {
            messageDisplay.textContent = msg;
            messageDisplay.style.color = 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) {
            const cell = e.currentTarget;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);

            if (turnPhase === 1) {
                // Place marker

                // Remove existing marker if any
                if (players[currentPlayer].markerPosition) {
                    const prevPos = players[currentPlayer].markerPosition;
                    const prevMarkerContainer = document.getElementById(`marker-${prevPos.row}-${prevPos.col}`);
                    if (prevMarkerContainer) {
                        const existingMarker = prevMarkerContainer.querySelector(`span[data-player="${currentPlayer}"]`);
                        if (existingMarker) {
                            prevMarkerContainer.removeChild(existingMarker);
                        }
                    }
                }

                // Update marker container without affecting numbers
                const markerContainer = document.getElementById(`marker-${row}-${col}`);
                // Add the marker for the current player
                const existingMarker = markerContainer.querySelector(`span[data-player="${currentPlayer}"]`);
                if (!existingMarker) {
                    const marker = document.createElement('span');
                    marker.textContent = players[currentPlayer].marker;
                    marker.style.color = players[currentPlayer].color;
                    marker.dataset.player = currentPlayer;
                    markerContainer.appendChild(marker);
                }

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

                // Enable action buttons
                enableButtons();

                // Move to next turn phase
                turnPhase = 2;
                setMessage('Marker placed. Choose an action.');
            } else if (turnPhase === 2) {
                if (actionMode === 'flood') {
                    performFloodFill(row, col);
                    actionMode = null;
                    // After flood fill, end the turn
                    endTurn();
                } else if (actionMode === 'count') {
                    placeCount(cell);
                }
            }
        }

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

            if (wallMode) {
                // Second corner click
                const dist = Math.abs(firstCorner.row - row) + Math.abs(firstCorner.col - col);
                if ((firstCorner.row === row || firstCorner.col === col) && (dist === 1 || dist === 2)) {
                    const success = drawWallBetweenCorners(firstCorner, { row, col }, currentPlayer);
                    if (success) {
                        setMessage('Wall drawn successfully.', 'green');
                        if (actionMode === 'flood') {
                            // During flood, allow drawing only one optional wall
                            optionalWallDrawn = true;
                            // Remain in action mode 'flood' to allow flood fill
                        } else {
                            // Normally, end the turn after drawing a wall
                            endTurn();
                        }
                    } else {
                        setMessage('Failed to draw wall. It might already exist.', 'red');
                    }
                    // Reset wall drawing state
                    wallMode = false;
                    firstCorner.element.style.backgroundColor = '#666';
                    firstCorner = null;
                } else {
                    setMessage('Second corner must be adjacent horizontally or vertically.', 'red');
                }
            } else {
                // First corner click
                if (actionMode === 'flood' && optionalWallDrawn) {
                    // Already drew optional wall during flood
                    setMessage('Optional wall already drawn for this flood action.', 'red');
                    return;
                }

                // Check if corner is adjacent to the current player's marker position
                const markerPos = players[currentPlayer].markerPosition;
                if (markerPos && isCornerAdjacentToCell(row, col, markerPos.row, markerPos.col)) {
                    wallMode = true;
                    firstCorner = { row, col, element: corner };
                    corner.style.backgroundColor = players[currentPlayer].color;
                    if (actionMode === 'flood') {
                        setMessage('Select the second corner to draw the optional wall.', 'blue');
                    } else {
                        setMessage('Select the second corner to draw the wall.', 'blue');
                    }
                } else {
                    setMessage('Select a corner adjacent to your marker cell.', 'red');
                }
            }
        }

        // Wall click handler (to prevent walls from being clickable)
        function onWallClick(e) {
            // Currently, walls are drawn via corner clicks. Clicking walls themselves does nothing.
            // If additional functionalities are desired (e.g., removing walls), implement here.
        }

        // 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
        // Returns true if wall was successfully drawn, false otherwise
        function drawWallBetweenCorners(corner1, corner2, player) {
            let wallsDrawn = [];

            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}"]`);
                    if (hWall) {
                        if (isWallPresent(hWall)) {
                            // Wall already exists
                            return false;
                        }
                        hWall.style.backgroundColor = players[player].color;
                        wallsDrawn.push(hWall);
                    }
                }
            } 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}"]`);
                    if (vWall) {
                        if (isWallPresent(vWall)) {
                            // Wall already exists
                            return false;
                        }
                        vWall.style.backgroundColor = players[player].color;
                        wallsDrawn.push(vWall);
                    }
                }
            } else {
                // Diagonal walls are not allowed
                return false;
            }

            // If all walls drawn successfully
            return wallsDrawn.length > 0;
        }