Fix Code   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <style>
        body {
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            margin-bottom: 20px;
        }

        #game-settings {
            margin-bottom: 20px;
        }

        #game-settings button {
            padding: 10px 20px;
            margin: 0 10px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
        }

        #game-settings button.active {
            background-color: #0b7dda;
        }

        #board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
        }

        .cell {
            background-color: white;
            border: 2px solid #2196F3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .cell:hover {
            background-color: #e3f2fd;
        }

        #message {
            margin-top: 20px;
            font-size: 20px;
            min-height: 24px;
        }

        #restart {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            display: none;
        }

        /* Responsive Design */
        @media (max-width: 500px) {
            #board {
                grid-template-columns: repeat(3, 80px);
                grid-template-rows: repeat(3, 80px);
                gap: 4px;
            }

            .cell {
                font-size: 36px;
            }
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe</h1>

    <div id="game-settings">
        <button id="two-player" class="active">Two Players</button>
        <button id="single-player">Single Player</button>
    </div>

    <div id="board">
        <!-- 9 cells -->
        <div class="cell" data-index="0"></div>
        <div class="cell" data-index="1"></div>
        <div class="cell" data-index="2"></div>
        <div class="cell" data-index="3"></div>
        <div class="cell" data-index="4"></div>
        <div class="cell" data-index="5"></div>
        <div class="cell" data-index="6"></div>
        <div class="cell" data-index="7"></div>
        <div class="cell" data-index="8"></div>
    </div>

    <div id="message"></div>
    <button id="restart">Restart Game</button>

    <script>
        const cells = document.querySelectorAll('.cell');
        const messageElement = document.getElementById('message');
        const restartButton = document.getElementById('restart');
        const singlePlayerButton = document.getElementById('single-player');
        const twoPlayerButton = document.getElementById('two-player');

        let board = ['', '', '', '', '', '', '', '', ''];
        let currentPlayer = 'X';
        let gameActive = true;
        let gameMode = 'two-player'; // or 'single-player'

        const winningConditions = [
            [0,1,2],
            [3,4,5],
            [6,7,8],
            [0,3,6],
            [1,4,7],
            [2,5,8],
            [0,4,8],
            [2,4,6]
        ];

        // Initialize Game
        function initGame() {
            cells.forEach(cell => {
                cell.innerText = '';
                cell.style.pointerEvents = 'auto';
                cell.classList.remove('disabled');
            });
            board = ['', '', '', '', '', '', '', '', ''];
            currentPlayer = 'X';
            gameActive = true;
            messageElement.innerText = Player ${currentPlayer}'s turn;
            restartButton.style.display = 'none';
        }

        // Handle Cell Click
        function handleCellClick(e) {
            const index = e.target.getAttribute('data-index');
            if (board[index] === '' && gameActive) {
                makeMove(e.target, index);
                if (gameMode === 'single-player' && gameActive) {
                    setTimeout(computerMove, 500);
                }
            }
        }

        // Make a Move
        function makeMove(cell, index) {
            board[index] = currentPlayer;
            cell.innerText = currentPlayer;
            cell.style.pointerEvents = 'none';
            checkResult();
            if (gameActive) {
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                messageElement.innerText = Player ${currentPlayer}'s turn;
            }
        }

        // Check for Win or Tie
        function checkResult() {
            let roundWon = false;
            for (let condition of winningConditions) {
                const [a, b, c] = condition;
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    roundWon = true;
                    break;
                }
            }

            if (roundWon) {
                messageElement.innerText = Player ${currentPlayer} wins!;
                gameActive = false;
                highlightWinningCells();
                restartButton.style.display = 'block';
                return;
            }

            if (!board.includes('')) {
                messageElement.innerText = It's a tie!;
                gameActive = false;
                restartButton.style.display = 'block';
                return;
            }
        }

        // Highlight Winning Cells
        function highlightWinningCells() {
            for (let condition of winningConditions) {
                const [a, b, c] = condition;
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    cells[a].style.backgroundColor = '#90ee90';
                    cells[b].style.backgroundColor = '#90ee90';
                    cells[c].style.backgroundColor = '#90ee90';
                }
            }
        }

        // Restart Game
        restartButton.addEventListener('click', initGame);

        // Switch Game Mode
        singlePlayerButton.addEventListener('click', () => {
            gameMode = 'single-player';
            singlePlayerButton.classList.add('active');
            twoPlayerButton.classList.remove('active');
            initGame();
        });

        twoPlayerButton.addEventListener('click', () => {
            gameMode = 'two-player';
            twoPlayerButton.classList.add('active');
            singlePlayerButton.classList.remove('active');
            initGame();
        });

        // Computer Move (Simple AI: Random Move)
        function computerMove() {
            if (!gameActive) return;
            let availableIndices = board.map((val, idx) => val === '' ? idx : null).filter(val => val !== null);
            if (availableIndices.length === 0) return;

            // Simple Random AI
            const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
            const cell = document.querySelector(.cell[data-index='${randomIndex}']);
            makeMove(cell, randomIndex);
        }

        // Add Event Listeners to Cells
        cells.forEach(cell => cell.addEventListener('click', handleCellClick));

        // Start the game on load
        initGame();
    </script>
</body>
</html>