body { 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  flex-direction: column;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 1 / 1;
  width: 60vmin;
}

form {
  position: relative;
}

input[type="checkbox"] {
  display: none;
}

.cell {
  border: 2px solid black;
  position: relative;
}

.cell:nth-child(3n) {
  border-right: none;
}

.cell:nth-child(3n+1) {
  border-left: none;
}

.cell:nth-child(n+7) {
  border-bottom: none;
}

.cell:nth-child(-n+3) {
  border-top: none;
}

.cell label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1;
  color: lightgray;
}

.cell label:hover {
  background-color: #ddd;
}

button {
  background-color: #ffeb3b;
  color: black;
  border-radius: 5px;
  font-size: 2vmin;
  justify-content: center;
  align-items: center;
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 1vmin 3vmin;
  margin-top: 3vmin;
}

.x-turn-message {
  display: flex;
}
.o-turn-message, .x-win-message, .o-win-message, .draw-message {
  display: none;
}
.x-turn-message, .o-turn-message {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 5vmin;
  justify-content: center;
  align-items: center;
}

.x-win-message, .o-win-message, .draw-message {
  position: absolute;
  top: 0;
  z-index: 4;
  background-color: rgba(255, 255, 255, .6);
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 4vmin;
}

/* 8 empty cells = o turn */
input[data-cell^="x"]:checked {
  & ~ .o-turn-message { display: flex; }
  & ~ .x-turn-message { display: none; }
  & ~ .board label[for^="o"] { display: flex; }
  & ~ .board label[for^="x"] { display: none; }
}

/* 7 empty cells = x turn */
input[data-cell^="x"]:checked ~ input[data-cell^="o"]:checked { 
  & ~ .o-turn-message { display: none; }
  & ~ .x-turn-message { display: flex; }
  & ~ .board label[for^="o"] { display: none; }
  & ~ .board label[for^="x"] { display: flex; }
}

/* 6 empty cells = o turn */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="o"]:checked {
  & ~ .o-turn-message { display: flex; }
  & ~ .x-turn-message { display: none; }
  & ~ .board label[for^="o"] { display: flex; }
  & ~ .board label[for^="x"] { display: none; }
}

/* 5 empty cells = x turn */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="o"]:checked ~ input[data-cell^="o"]:checked {
  & ~ .o-turn-message { display: none; }
  & ~ .x-turn-message { display: flex; }
  & ~ .board label[for^="o"] { display: none; }
  & ~ .board label[for^="x"] { display: flex; }
}

/* 4 empty cells = o turn */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="x"]:checked ~ input[data-cell^="o"]:checked ~ 
input[data-cell^="o"]:checked {
  & ~ .o-turn-message { display: flex; }
  & ~ .x-turn-message { display: none; }
  & ~ .board label[for^="o"] { display: flex; }
  & ~ .board label[for^="x"] { display: none; }
}

/* 3 empty cells = x turn */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="x"]:checked ~ input[data-cell^="o"]:checked ~ 
input[data-cell^="o"]:checked ~ input[data-cell^="o"]:checked {
  & ~ .o-turn-message { display: none; }
  & ~ .x-turn-message { display: flex; }
  & ~ .board label[for^="o"] { display: none; }
  & ~ .board label[for^="x"] { display: flex; }
}

/* 2 empty cells = o turn */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="o"]:checked ~ input[data-cell^="o"]:checked ~ 
input[data-cell^="o"]:checked {
  & ~ .o-turn-message { display: flex; }
  & ~ .x-turn-message { display: none; }
  & ~ .board label[for^="o"] { display: flex; }
  & ~ .board label[for^="x"] { display: none; }
}

/* 1 empty cell = x turn */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="o"]:checked ~ input[data-cell^="o"]:checked ~ 
input[data-cell^="o"]:checked ~ input[data-cell^="o"]:checked {
  & ~ .o-turn-message { display: none; }
  & ~ .x-turn-message { display: flex; }
  & ~ .board label[for^="o"] { display: none; }
  & ~ .board label[for^="x"] { display: flex; }
}



input[data-cell="x0"]:checked ~ .board .cell:nth-child(1):after,
input[data-cell="x1"]:checked ~ .board .cell:nth-child(2):after,
input[data-cell="x2"]:checked ~ .board .cell:nth-child(3):after,
input[data-cell="x3"]:checked ~ .board .cell:nth-child(4):after,
input[data-cell="x4"]:checked ~ .board .cell:nth-child(5):after,
input[data-cell="x5"]:checked ~ .board .cell:nth-child(6):after,
input[data-cell="x6"]:checked ~ .board .cell:nth-child(7):after,
input[data-cell="x7"]:checked ~ .board .cell:nth-child(8):after,
input[data-cell="x8"]:checked ~ .board .cell:nth-child(9):after
{
  content: '⤫';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00bcd4;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 3;
  font-size: 20vmin;
  line-height: 20vmin;
}
input[data-cell="o0"]:checked ~ .board .cell:nth-child(1):after,
input[data-cell="o1"]:checked ~ .board .cell:nth-child(2):after,
input[data-cell="o2"]:checked ~ .board .cell:nth-child(3):after,
input[data-cell="o3"]:checked ~ .board .cell:nth-child(4):after,
input[data-cell="o4"]:checked ~ .board .cell:nth-child(5):after,
input[data-cell="o5"]:checked ~ .board .cell:nth-child(6):after,
input[data-cell="o6"]:checked ~ .board .cell:nth-child(7):after,
input[data-cell="o7"]:checked ~ .board .cell:nth-child(8):after,
input[data-cell="o8"]:checked ~ .board .cell:nth-child(9):after
{
  content: '○';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00bcd4;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 3;
  font-size: 20vmin;
  line-height: 20vmin;
}

/* 0 empty cells = draw */
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="x"]:checked ~ input[data-cell^="x"]:checked ~ 
input[data-cell^="x"]:checked ~ input[data-cell^="o"]:checked ~ 
input[data-cell^="o"]:checked ~ input[data-cell^="o"]:checked ~ 
input[data-cell^="o"]:checked {
  & ~ .o-win-message { display: none; }
  & ~ .x-win-message { display: none; }
  & ~ .draw-message { display: flex; }
  & ~ .o-turn-message { display: none; }
  & ~ .x-turn-message { display: none; }
  & ~ .board { pointer-events: none; }
}

/* X wins */
input[data-cell="x0"]:checked ~ input[data-cell="x1"]:checked ~ input[data-cell="x2"]:checked,
input[data-cell="x3"]:checked ~ input[data-cell="x4"]:checked ~ input[data-cell="x5"]:checked,
input[data-cell="x6"]:checked ~ input[data-cell="x7"]:checked ~ input[data-cell="x8"]:checked,
input[data-cell="x0"]:checked ~ input[data-cell="x3"]:checked ~ input[data-cell="x6"]:checked,
input[data-cell="x1"]:checked ~ input[data-cell="x4"]:checked ~ input[data-cell="x7"]:checked,
input[data-cell="x2"]:checked ~ input[data-cell="x5"]:checked ~ input[data-cell="x8"]:checked,
input[data-cell="x0"]:checked ~ input[data-cell="x4"]:checked ~ input[data-cell="x8"]:checked,
input[data-cell="x2"]:checked ~ input[data-cell="x4"]:checked ~ input[data-cell="x6"]:checked {
  & ~ .x-win-message { display: flex !important; }
  & ~ .o-win-message { display: none !important; }
  & ~ .draw-message { display: none !important; }
  & ~ .o-turn-message { display: none !important; }
  & ~ .x-turn-message { display: none !important; }
  & ~ .board { pointer-events: none !important; }
}

/* O wins */
input[data-cell="o0"]:checked ~ input[data-cell="o1"]:checked ~ input[data-cell="o2"]:checked,
input[data-cell="o3"]:checked ~ input[data-cell="o4"]:checked ~ input[data-cell="o5"]:checked,
input[data-cell="o6"]:checked ~ input[data-cell="o7"]:checked ~ input[data-cell="o8"]:checked,
input[data-cell="o0"]:checked ~ input[data-cell="o3"]:checked ~ input[data-cell="o6"]:checked,
input[data-cell="o1"]:checked ~ input[data-cell="o4"]:checked ~ input[data-cell="o7"]:checked,
input[data-cell="o2"]:checked ~ input[data-cell="o5"]:checked ~ input[data-cell="o8"]:checked,
input[data-cell="o0"]:checked ~ input[data-cell="o4"]:checked ~ input[data-cell="o8"]:checked,
input[data-cell="o2"]:checked ~ input[data-cell="o4"]:checked ~ input[data-cell="o6"]:checked {
  & ~ .o-win-message { display: flex !important; }
  & ~ .x-win-message { display: none !important; }
  & ~ .draw-message { display: none !important; }
  & ~ .o-turn-message { display: none !important; }
  & ~ .x-turn-message { display: none !important; }
  & ~ .board { pointer-events: none !important; }
}