#game-board {
        display: grid;
        grid-template-columns: repeat(4, 100px);
        grid-gap: 10px;
    }

    .card {
        width: 100px;
        height: 100px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        cursor: pointer;
        border-radius: 8px;
    }

    .card.flipped {
        background-color: #fff;
        color: #333;
    }

    #score {
        font-size: 24px;
        margin-bottom: 20px;
    }

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

    #restart:hover {
        background-color: #45a049;
    }
</style>

<div>
    <div id="score">Score: 0</div>
    <div id="game-board"></div>
    <button id="restart">Restart</button>
</div>

<script>
    const board = document.getElementById('game-board');
    const scoreDisplay = document.getElementById('score');
    const restartButton = document.getElementById('restart');
    let cards = [];
    let flippedCards = [];
    let score = 0;

    // List of symbols (or numbers/letters) for the cards
    const symbols = ['🖤', '❤️', '🩵', '🩷', '🤎', '💜', '💚', '❤️‍🔥'];

    // Double the array to create pairs
    let cardSymbols = [...symbols, ...symbols];
    
    // Shuffle function
    function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]]; // Swap elements
        }
    }

    // Create the game board with cards
    function createBoard() {
        shuffle(cardSymbols);
        board.innerHTML = '';

        cardSymbols.forEach((symbol, index) => {
            const card = document.createElement('div');
            card.classList.add('card');
            card.dataset.symbol = symbol;
            card.dataset.index = index;

            card.addEventListener('click', flipCard);

            board.appendChild(card);
            cards.push(card);
        });
    }

    // Flip a card
    function flipCard(event) {
        const card = event.target;

        // Don't flip the card if it's already flipped or matched
        if (card.classList.contains('flipped') || flippedCards.length === 2) return;

        card.textContent = card.dataset.symbol;
        card.classList.add('flipped');
        flippedCards.push(card);

        if (flippedCards.length === 2) {
            checkMatch();
        }
    }

    // Check if two flipped cards match
    function checkMatch() {
        const [card1, card2] = flippedCards;

        if (card1.dataset.symbol === card2.dataset.symbol) {
            score++;
            scoreDisplay.textContent = `Score: ${score}`;
            flippedCards = [];
            if (score === symbols.length) {
                setTimeout(() => {
                    alert('You Win! Congratulations!');
                    resetGame();
                }, 500);
            }
        } else {
            setTimeout(() => {
                card1.classList.remove('flipped');
                card2.classList.remove('flipped');
                card1.textContent = '';
                card2.textContent = '';
                flippedCards = [];
            }, 1000);
        }
    }

    // Reset the game
    function resetGame() {
        score = 0;
        scoreDisplay.textContent = `Score: ${score}`;
        flippedCards = [];
        cards = [];
        cardSymbols = [...symbols, ...symbols];
        createBoard();
    }

    // Start the game
    restartButton.addEventListener('click', resetGame);
    resetGame(); // Start the game on page load
</script>