Is there a way to use css with an If/else condition?

Question

I am making a memory game for school. My issue right now is, you can spam click everything and everything will show.

whenever you have the wrong pair the cards make the class "red" and they turn red in the css code. But you're still able to click the other cards and a few turn back to normal again after 600ms, some just stay and don't turn back.

is it possible to use an if/else condition for css? If there are "red" cards, the pointer event for normal cards are none. You can play the game here and test the issue yourself: https://memory-20.815374.repl.co

Fixing it without If/else is fine too. Using if/else is just the first thing that comes in my head.

here is the code for CSS:

.card.clicked {
  background-color: orange;
  pointer-events: none;
}
                      
.card.checked {
  background-color: lightgreen;
  visibility: hidden;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

.card.clicked img,
.card.checked img {
  opacity: 1;
}

.card.red {
  background-color: #f15f5f;
}

.card {
  height: 120px;
  width: 100px;
  background-color: #ff5cbb;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.3s all ease;
}

Here is the JavaScript code:

          } else {
              const incorrectCards = document.querySelectorAll(".card.clicked");
      
              incorrectCards[0].classList.add("red");
              incorrectCards[1].classList.add("red");            
        
              setTimeout(() => {
                incorrectCards[0].classList.remove("red");        
                incorrectCards[0].classList.remove("clicked");
                incorrectCards[1].classList.remove("red");
                incorrectCards[1].classList.remove("clicked");
              }, 600);