oxゲームを作ったがrestartすると表記がバグる

バグの内容

3×3のcellがありそのセルにマウスオーバーすると真ん中にplayer（o, x）が表示されるのだが、restartボタンを押した後cellをマウスオーバーするとplayer（o, x）が、左上（初期状態？）になってしまう。

コード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oxGAME</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="winElement" style="display: none;">
        <h2 id="winMessage"></h2>
    </div>
    <div class="game-board">
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
        <div class="cell unset"></div>
    </div>
    <button id="restart-button">Restart</button>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    padding-top: 0px;
}

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

.cell{
    width: 100px;
    height: 100px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    cursor: pointer;
    border-radius: 10%;
}

/* .unset:not(.notfound){
    width: 100px;
    height: 100px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #b3b2b2;
    cursor: pointer;
} */

#restart-button {
    margin-top: 20px;
    font-size: 18px;
    padding: 10px 20px;
}

#result {
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
}

//constは再代入のできない変数宣言
const cells = document.querySelectorAll('.cell');//cssの要素を引っ張てくる
const restartButton = document.getElementById('restart-button');
const resultMessage = document.getElementById('result');//htmlの要素メッセージでなくエレメント
const winMessage= document.getElementById('winMessage');
const winElment = document.getElementById('winElement');

let currentPlayer = 'X';
let board = ['', '', '', 
             '', '', '', 
             '', '', ''];

let gameActive = true;
let gameWin = false;

//勝利パターン
const winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

//勝者判定
function checkWinner() {
    //配列列を上から回す
    for (let combo of winningCombos) {
        const [a, b, c] = combo;
        //入力されたcellの中身はすべて同じプレイヤーかチェック
        if (board[a] && board[a] === board[b] && board[a] === board[c]) {
            gameActive = false;
            gameWin = true;
        }
    }
}

//セルをクリックしたときの動き
function handleCellClick(cell,index) {
    //ゲーム中でありセルがからの時
    //早期リターンif(!gameActive return)にしてgameActive条件を消す
    if(!gameActive) return
    //if(cell.classList.contains("unset"))
    if (board[index] === '') {
        board[index] = currentPlayer;
        cells[index].textContent = currentPlayer;
        cells[index].style.opacity = 1;

        cell.classList.remove("unset");
        
        //勝利者の確認
        checkWinner();
        if(gameWin == true){
            cells.forEach((cell) => {
                cell.style.display = "none";
                winMessage.textContent = `${currentPlayer}'s Wins!!!`;
                winElment.style.display = "block";
            });
            //resultMessage.textContent = `${currentPlayer}'s Wins!!!`;
        }

        if (gameActive) {
            //?の右側はtrueだった場合:の右側はfalseだった場合の処理をする
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }
    }
}

//リスタートボタンを押した
function restartGame() {
    cells.forEach((cell) => {
        winElment.style.display = "none";
        cell.style.display = "block";
    });
    currentPlayer = 'X';
    board = ['', '', '', '', '', '', '', '', ''];
    gameActive = true;
    gameWin = false
    cells.forEach((cell, index) => {
        cell.textContent = '';
        cell.style.backgroundColor = '#ccc';
        cell.style.opacity = 1;
        if(cell.classList.contains("unset") === false){
            cell.classList.add("unset");
        }
    });
}

//各セルにクリックイベントリスナーを追加
cells.forEach((cell, index) => {
    cell.addEventListener('click', () => handleCellClick(cell,index));
    //cell上にマウスカーソルがあるときの処理
    cell.addEventListener('mouseover', () => {
        if (cell.textContent === '' && gameActive) {
            cell.textContent = currentPlayer;
            cell.style.opacity = 0.6;
        }
    });
    cell.addEventListener('mouseout', () => {
        if (gameActive && cell.classList.contains("unset") === true) {
            cell.textContent = '';
            cell.style.opacity = 1;
        }
    });
});

restartButton.addEventListener('click', restartGame);

//テンプレートリテラルは使っていこう