CSS button hover property partially broken after Javascript function is called

I am building a memory trainer web application. On one of my pages, I have a screen with two buttons with default opacity of 0.8, upon being hovered, they should grow in size and increase to an opacity of 1. This works fine initially.

When either button is pressed, a fadeOut() function is called that fades both buttons out by gradually decreasing their opacity to 0, and when the Esc key is pressed, a fadeIn() function is called that fades the buttons back in by gradually increasing their opacity back up to 0.8 (The event listener for fadeIn() can only be called if fadeOut() was previously called.

Upon fadeIn() making the buttons reappear, the buttons when hovered will still increase in size, but the opacity will STAY at 0.8 and not increase back to 1 like they are supposed to. The hover effect works, but only partially.

Below I have attached all relevant HTML, CSS, and JS code that contains the sections pertaining to this issue.

HTML:

<!--Adding game buttons-->
        <div class="game-button" id="free-button" onclick="loadSettings()" style="position:fixed; top:40%; left: 10%;" >Free Mode</div>
        <div class="game-button" id="challenge-button" onclick="loadSettings()" style="position:fixed; top:40%; right: 10%;">Challenge Mode</div>

CSS:

.game-button {
    background-color: #ff6666;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Jost', sans-serif;
    font-size: 64px;
    height: 30vh;
    margin: 4px 2px;
    opacity: 0.8;
    padding: 16px 32px;
    text-align: center;
    transition: 0.3s;
    width: 30vw;
}

.game-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

JavaScript:

//TODO FIX HOVER GLITCH ON fadeIn()

var inSettings = false;

//Function to hide settings UI and load the mode select screen again
//Can only be called while the user is already in the settings
function loadModeSelect() {
    inSettings = false;
    fadeIn("free-button", 10, 0.8);
    fadeIn("challenge-button", 10, 0.8);
    fadeIn("select-mode-panel", 20, 1);
}

//Event listener that will load the mode select screen when Esc key is pressed
//User must be in settings for this to activate
document.onkeyup = function(evt) {
    evt = evt || window.event;
    if (evt.key == "Escape" && inSettings) {
        loadModeSelect();
        console.log("loadModeSelect happening!");
    }
}

//Function to fade out HTML elements
//fadeSpeed is how many milliseconds should be inbetween opacity decrease
//Total fadeOut time in ms is fadeSpeed * (opacity / 0.1)

function fadeOut(elementID, fadeSpeed) {
    var fade = document.getElementById(elementID);
    var intervalID = setInterval(function() {
        if (!fade.style.opacity) {
            fade.style.opacity = 1;
        } else if (fade.style.opacity > 0) {
            fade.style.opacity -= 0.1;
            fade.style.pointerEvents = 'none';
        } else {
            clearInterval(intervalID);
        }
    }, fadeSpeed);
}

//Function to fade in HTML elements
//fadeSpeed is how many milliseconds should be inbetween opacity increase
//Total fadeIn time in ms is fadeSpeed * (opacity / 0.1)
function fadeIn(elementID, fadeSpeed, targetOpacity) {
    var fade = document.getElementById(elementID);
    var intervalID = setInterval(function() {
        if (!fade.style.opacity) {
            fade.style.opacity = 0;
        } else if (fade.style.opacity < targetOpacity) {
            //Need to parseFloat here because JS can interpret fade.style.opacity as a String
            fade.style.opacity = parseFloat(fade.style.opacity) + 0.1;
        } else {
            clearInterval(intervalID);
            fade.style.pointerEvents = 'initial';
        }
    }, fadeSpeed);
}

//Function to hide the select mode page and load the settings UI
//inSettings should be set to true last to avoid race condition
function loadSettings() {
    fadeOut("free-button", 10);
    fadeOut("challenge-button", 10);
    fadeOut("select-mode-panel", 20);
    inSettings = true;
}

I have tried modifying fadeIn() and fadeOut() with fade.style.pointerEvents lines and have asked some of my colleagues what they think and none of them have provided me a solution that fixes this problem.

I have also tried adding mouseleave event listener to fadeIn() per recommendation of a friend expecting a brute force setting of the opacity to 0.8 after fadeIn() is finished to fix any issues with the opacity increasing again upon re-hover, however this did not fix my issue.