JavaScript Rock, paper, scissors Dom manipulation

pScore = 0; 
cScore = 0;
tie = 0; 

//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
    intro = document.querySelector('.intro');
    playBtn = document.querySelector(".playBtn");
    match = document.querySelector('.match');

    playBtn.addEventListener('click', e => {
    match.classList.add("fadeIn");
    playBtn.remove();
    });
}


//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
    button = document.querySelectorAll('.buttons button');
    choices= ["rock", "paper", "scissors"];
    choiceDisplay = document.querySelector('.matchContainer');
    playerDisplay = document.querySelector('.playerDisplay');

    button.forEach(button => {
        button.addEventListener('click', function(e) {

            //generate random computerSelection
            computerSelection = choices[ Math.floor((Math.random() *choices.length))];
            
            //display computer and player selection on UI
            playerSelection = this.textContent;
            playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
            choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";         
            
            compareSelection(playerSelection, computerSelection);
        });
    }); 
}    

const compareSelection = ( playerSelection, computerSelection) => {
    //compare player and computer choice
    if (playerSelection === computerSelection){ console.log("tie");
    tie++;
    game();
    return;
    } else if ( playerSelection === "rock" && computerSelection === "scissors" ||
    playerSelection === "scissors" && computerSelection === "paper" ||
    playerSelection === "paper" && computerSelection === "rock" ){ 
    console.log  (`You win! ${playerSelection} beats ${computerSelection}`);
    pScore++;
    game();
    return;  
    } else {
    console.log(`You lose! ${computerSelection} beats ${playerSelection}`); 
    cScore++;
    game();
    return; 
    }
    
}   
const game = () => {

    playerScore = document.querySelector('.playerScore');
    computerScore = document.querySelector('.computerScore');
    tieScore = document.querySelector('.tieScore');
    playerScore.textContent = pScore; 
    computerScore.textContent = cScore;
    tieScore.textContent = tie; 

    // for( i=0; i<5; i++){
    // playGame[i++];
    // }

}



startGame();
playGame(); 

body{
    background-color: #844141;
}

.intro, .buttons {
    text-align: center;

}
div.fadeOut{
    opacity: 0;
    
}

div.fadeIn{
    opacity: 3;
}

.match{
    opacity: 0%;
    transition: .5s ease;

}

.score-list, .score-list2, .winSection{
    font-size: 20px;        
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;

}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
    margin: 10px;
    font-size: 30px;
}

.winnerTitle{
    font-size: 50px;
}

.playBtn{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    
    
    
}

/* .reset{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    opacity: 10;

} */
.matchContainer, .playerDisplay{
  display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px
    
}

.displayHolder{
    display: flex;
    justify-content: center;
}

.rockBtn, .paperBtn, .scissorsBtn{
    font-size: 50px;
    background-color:#555d5f;
    margin: 15px;
    border-radius: 5px;
    font-family: "Time New Roman", times, serif;
    
}

.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover{
    background-color: #3c3e3f;
    transition: .7s;
}

.title{
    font-size: 45px;
}
.titleStatement{
    font-size: 30px;
}

span{
    font-size: 25px;
}

img{
    margin: 10px;
    width: 45px;
    height: 50px;
    opacity: 0;
    transition-duration: 1s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css">
    <script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
    <div class="intro">
        <h1 class="title">Rock Paper Scissors</h1>
        <h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
        <button class="playBtn">Play!!</button> <!--once this is pressed the screen will transition to everything below -->
    </div>  

    <div class="match">
            
        <div class="buttons">
            <button class="rockBtn">rock</button>
            <button class="paperBtn">paper</button>
            <button class="scissorsBtn">scissors</button>
        </div>

        <div class="displayHolder">
            <div class="playerDisplay"></div>
            <div class="matchContainer"></div>
            
        </div>
        <div class="score-list">
            <p class="playerTitle">Player Score: </p>
                <span class="playerScore">0</span>
            <p class="computerTitle">Computer Score:</p>
                <span class="computerScore">0</span>
            
        </div>    
            <div class="score-list2">
                <p class="tieTitle">Tie: </p>
                <span class="tieScore">0</span>
            </div>
        <div class="winSection">
        <h3 class="winnerTitle">Winner: </h3>
            <span class="theWinner">?</span>
            <img src="/trophy.png" alt="trophy image">
        </div>
    </div>
</div>
</body>
</html>