Hover z css nie działa po zmianie właściwości backgroundColor przez js

Cześć wszystkim. Tworzę grę kółko i krzyżyk i chciałem by jakoś to fajnie wyglądało, ale napotkałem się na problem. Stworzyłem hover w css, który polega na zmianie koloru tła danego kafelka z planszy na jaśniejszy. Wszystko działa do momentu gdy zmienię kolor tła za pomocą js'a. Wtedy hover działa z tego co zauważyłem ale nie na właściwość koloru tła. Niżej fragment kodu jak to wygląda:

HTML

    <div id="board">
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
        <div class="field"><i></i></div>
    </div>

SCSS

    #board {
        width: 602px;
        height: 602px;
        background-color: transparent;
        border: solid 1px #cccccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .field {
            width: 200px;
            height: 200px;
            background-color: #000023;
            border: solid 3px #cccccc;
            transition: all 500ms;
            
            &:hover {
                background-color: #000036;
                cursor: pointer;
            }

            i {
                color: #cccccc;
                opacity: 0;
                transition: opacity 333ms;
            }

            .fa-times {
                font-size: 120px;
                margin-top: 35px;
                margin-left: 55px;
            }

            .fa-circle {
                font-size: 95px;
                -webkit-text-stroke: 5px;
                margin-top: 48px;
                margin-left: 48px;
            }
        }
    }

JS

    fields.forEach((field) => {
        field.childNodes[0].style.opacity = '0';
        field.style.pointerEvents = 'auto';
        field.style.backgroundColor = '#000023';
        field.childNodes[0].classList.remove('fas', 'fa-times');
        field.childNodes[0].classList.remove('far', 'fa-circle');
    });

Style wpisywane inline (także dopisane inline za pomocą JS) mają priorytet nad wszystkim, co sobie ustawisz w arkuszu stylów.
Na logikę nie powinno to przykrywać wartości dla element:hover, ale przykrywa.

Nie manipuluj w JS bezpośrednio stylami elementów, tylko dodawaj/usuwaj klasy:
https://www.w3schools.com/jsref/prop_element_classlist.asp

p.s. A już mniej kontrastowe to to hover nie mogło już być? Zaglądałam w kod, żeby sprawdzić, czy tam się faktycznie coś zmienia, czy tylko mi się wydaje.

@Freja Draco: Wiesz to jest fragment. Ogólnie to wygląda to tak, że jak któryś z graczy wygra, to kolor wygranych pól zmienia się na zielony i pojawia się guzik restartu gry zapisując punkty. Czyli z tego co zrozumiałem to, dobrze by było abym stworzył kolejną klasę, która przechowuje mój kolor i po restarcie gry (lub wygranej gdzie kolor zmienia się na zielony) dodać tę klasę, nie zmieniając wartości stylów?

Tak.

@Freja Draco: To jak nie ma lepszego sposobu na zostawienie hover efektów to spróbuję stworzyć klasę ze stylami. Dzięki wielkie za pomoc