styles.css

body, html {
  height: 100%;
  margin: 0;
}

.app {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.game {
  display: none;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

input:checked + .game {
  display: grid;
}

input:checked::before {
  content: attr(id);
  position: absolute;
  margin-left: 20px;
}

.game label {
  height: 50px;
  width: 50px;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  cursor: pointer;
}

.game.r1 > label:nth-of-type(1),
.game.r2 > label:nth-of-type(2),
.game.r3 > label:nth-of-type(3),
.game.r4 > label:nth-of-type(4),
.game.r5 > label:nth-of-type(5),
.game.r6 > label:nth-of-type(6),
.game.r7 > label:nth-of-type(7),
.game.r8 > label:nth-of-type(8),
.game.r9 > label:nth-of-type(9)
{
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-size: contain;
  cursor: not-allowed;
}

.game.g1 > label:nth-of-type(1),
.game.g2 > label:nth-of-type(2),
.game.g3 > label:nth-of-type(3),
.game.g4 > label:nth-of-type(4),
.game.g5 > label:nth-of-type(5),
.game.g6 > label:nth-of-type(6),
.game.g7 > label:nth-of-type(7),
.game.g8 > label:nth-of-type(8),
.game.g9 > label:nth-of-type(9)
{
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="green"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
  background-size: contain;
  cursor: not-allowed;
}

input {
  display: none;
}

#resetButton {
  margin-top: 10px;
  border: 1px solid black;
  border-radius: 4px;
  padding: 4px;
}

.game.winner-r::after,
.game.winner-g::after,
.game.winner-d::after {
  grid-column: 1 /4;
  text-align: center;
  padding: 6px;
  border-radius: 4px;
  color: white;
}
.game.winner-r::after {
  content: 'Red wins!';
  background-color: red;
}
.game.winner-g::after {
  content: 'Green wins!';
  background-color: green;
}
.game.winner-d::after {
  content: 'It\'s a draw!';
  background-color: #ccc;
}