<title>Tic Tac Toe Game</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

    * {
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
    }
    
    body {
        background-color: #f0f9ff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .cell {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .cell.x::before, .cell.x::after {
        content: '';
        position: absolute;
        width: 80%;
        height: 10px;
        background-color: #3b82f6;
        transform: rotate(45deg);
    }
    
    .cell.x::after {
        transform: rotate(-45deg);
    }
    
    .cell.o::before {
        content: '';
        position: absolute;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        border: 10px solid #ef4444;
    }
    
    .cell:hover {
        background-color: rgba(59, 130, 246, 0.1);
    }
    
    .winning-cell {
        animation: pulse 0.5s infinite alternate;
    }
    
    @keyframes pulse {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.1);
        }
    }
    
    .game-board {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 20px 0;
        max-width: 320px;
    }
    
    @media (max-width: 400px) {
        .cell {
            width: 80px;
            height: 80px;
        }
    }
</style>

    <div class="flex justify-center space-x-8 my-6">
        <div class="text-center bg-white p-4 rounded-xl shadow-md">
            <h3 class="text-gray-500 font-medium">Player X</h3>
            <div id="playerXScore" class="text-3xl font-bold text-blue-500">0</div>
        </div>
        <div class="text-center bg-white p-4 rounded-xl shadow-md">
            <h3 class="text-gray-500 font-medium">Player O</h3>
            <div id="playerOScore" class="text-3xl font-bold text-red-500">0</div>
        </div>
    </div>
    
    <div class="text-lg mb-4" id="status">Player X's turn</div>
    
    <div class="game-board bg-gray-100 p-4 rounded-xl shadow-lg">
        <div class="cell bg-white rounded-lg" data-index="0"></div>
        <div class="cell bg-white rounded-lg" data-index="1"></div>
        <div class="cell bg-white rounded-lg" data-index="2"></div>
        <div class="cell bg-white rounded-lg" data-index="3"></div>
        <div class="cell bg-white rounded-lg" data-index="4"></div>
        <div class="cell bg-white rounded-lg" data-index="5"></div>
        <div class="cell bg-white rounded-lg" data-index="6"></div>
        <div class="cell bg-white rounded-lg" data-index="7"></div>
        <div class="cell bg-white rounded-lg" data-index="8"></div>
    </div>
    
    <button id="restartBtn" class="mt-8 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition duration-300">
        Restart Game
    </button>
</div>

<audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-09.mp3" preload="auto"></audio>
<audio id="winSound" src="https://www.soundjay.com/human/sounds/applause-8.mp3" preload="auto"></audio>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const cells = document.querySelectorAll('.cell');
        const statusText = document.getElementById('status');
        const restartBtn = document.getElementById('restartBtn');
        const playerXScore = document.getElementById('playerXScore');
        const playerOScore = document.getElementById('playerOScore');
        const clickSound = document.getElementById('clickSound');
        const winSound = document.getElementById('winSound');
        
        let currentPlayer = 'X';
        let gameState = ['', '', '', '', '', '', '', '', ''];
        let gameActive = true;
        let scores = { X: 0, O: 0 };
        
        const winningConditions = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
            [0, 4, 8], [2, 4, 6]             // diagonals
        ];
        
        function handleCellClick(e) {
            if (!gameActive) return;
            
            const clickedCell = e.target;
            const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
            
            if (gameState[clickedCellIndex] !== '') return;
            
            // Play click sound
            clickSound.currentTime = 0;
            clickSound.play();
            
            // Update game state and UI
            gameState[clickedCellIndex] = currentPlayer;
            clickedCell.classList.add(currentPlayer.toLowerCase());
            
            // Check for win or draw
            if (checkWin()) {
                endGame(false);
                return;
            } else if (checkDraw()) {
                endGame(true);
                return;
            }
            
            // Switch player
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            statusText.textContent = `Player ${currentPlayer}'s turn`;
        }
        
        function checkWin() {
            return winningConditions.some(condition => {
                const [a, b, c] = condition;
                if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) {
                    // Highlight winning cells
                    cells[a].classList.add('winning-cell');
                    cells[b].classList.add('winning-cell');
                    cells[c].classList.add('winning-cell');
                    return true;
                }
                return false;
            });
        }
        
        function checkDraw() {
            return gameState.every(cell => cell !== '');
        }
        
        function endGame(draw) {
            gameActive = false;
            
            if (draw) {
                statusText.textContent = "Game ended in a draw!";
            } else {
                // Play win sound
                winSound.currentTime = 0;
                winSound.play();
                
                statusText.textContent = `Player ${currentPlayer} wins!`;
                scores[currentPlayer]++;
                updateScoreBoard();
            }
        }
        
        function updateScoreBoard() {
            playerXScore.textContent = scores['X'];
            playerOScore.textContent = scores['O'];
        }
        
        function restartGame() {
            currentPlayer = 'X';
            gameState = ['', '', '', '', '', '', '', '', ''];
            gameActive = true;
            statusText.textContent = `Player ${currentPlayer}'s turn`;
            
            cells.forEach(cell => {
                cell.classList.remove('x', 'o', 'winning-cell');
            });
        }
        
        // Event listeners
        cells.forEach(cell => {
            cell.addEventListener('click', handleCellClick);
        });
        
        restartBtn.addEventListener('click', () => {
            clickSound.currentTime = 0;
            clickSound.play();
            restartGame();
        });
    });
</script>