#puzzle.tictactoe {
  display: grid;
  gap: 4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#puzzle.tictactoe > li > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#puzzle.tictactoe > li > ul > li {
  --tw-border-opacity: 1;
  border-color: rgba(245, 158, 11, var(--tw-border-opacity));
  padding-top: 100%;  /* This makes the element into a square. Because reasons. */
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  transition: background-position .1s 5s ease-out;
  background-image: url('/assets/t.svg');
}

#puzzle.tictactoe.hinted > li > ul > li:hover {
  background-position: bottom;
  transition: background-position .1s ease-in;
}

#puzzle.tictactoe > li > ul > li:nth-child(3n+1) {
  border-right-width: 2px;
}

#puzzle.tictactoe > li > ul > li:nth-child(3n+2) {
  border-right-width: 2px;
  border-left-width: 2px;
}

#puzzle.tictactoe > li > ul > li:nth-child(3n) {
  border-left-width: 2px;
}

#puzzle.tictactoe > li > ul > li:nth-child(-n+3) {
  border-bottom-width: 2px;
}

#puzzle.tictactoe > li > ul > li:nth-child(-n+6) {
  border-bottom-width: 2px;
}

#puzzle.tictactoe > li > ul > li:nth-child(n+4) {
  border-top-width: 2px;
}

#puzzle.tictactoe > li.x1 > ul > li:nth-child(1),
#puzzle.tictactoe > li.x2 > ul > li:nth-child(2),
#puzzle.tictactoe > li.x3 > ul > li:nth-child(3),
#puzzle.tictactoe > li.x4 > ul > li:nth-child(4),
#puzzle.tictactoe > li.x5 > ul > li:nth-child(5),
#puzzle.tictactoe > li.x6 > ul > li:nth-child(6),
#puzzle.tictactoe > li.x7 > ul > li:nth-child(7),
#puzzle.tictactoe > li.x8 > ul > li:nth-child(8),
#puzzle.tictactoe > li.x9 > ul > li:nth-child(9) {
  background-image: url('/assets/x.svg');
}

#puzzle.tictactoe > li.o1 > ul > li:nth-child(1),
#puzzle.tictactoe > li.o2 > ul > li:nth-child(2),
#puzzle.tictactoe > li.o3 > ul > li:nth-child(3),
#puzzle.tictactoe > li.o4 > ul > li:nth-child(4),
#puzzle.tictactoe > li.o5 > ul > li:nth-child(5),
#puzzle.tictactoe > li.o6 > ul > li:nth-child(6),
#puzzle.tictactoe > li.o7 > ul > li:nth-child(7),
#puzzle.tictactoe > li.o8 > ul > li:nth-child(8),
#puzzle.tictactoe > li.o9 > ul > li:nth-child(9) {
  background-image: url('/assets/o.svg');
}