Really weird JS/CSS problem. What is going on here? Codepen included

A Pen by Trenton (codepen.io)

So, I’m getting pretty close to finishing a really fun project I’ve been working on, It’s a memory matching game.

this question is regarding the function at line 97 called displayGameWon(), this function would originally display the game won screen if you had found all of the matches but I set it to display after 1 match to make it easier to work with.

now in the CSS I have the gameWonDisplayScreen display set to none and when the condition is met it will set the display to flex. The code works and it DOES set the display to flex but nothing becomes displayed on the screen? If I go into my css and manually turn the display from none to flex it works just find and everything renders on the screen. But in my JS nothing actually displays when the condition is met? What is going on here?

the gamewondisplayscreen CSS is on line 110 in the CSS file

Line 8 has:

const gameWonDisplayScreen = document.querySelector('.game-won-display-screen')

At this point and later in the game, gameWonDisplyScreen is null. Why? Because it does not exist until the game is won. If you look at the browser console, you would see the error message:

Uncaught TypeError: Cannot read properties of null (reading ‘style’)

Honestly, I don’t understand why you create the div with class='game-won-display-screen' dynamically. It would be much simpler to just put it in the HTML and change the display when you want it to display.