#puzzle.chess {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
  padding: 0.25rem;
  gap: 0.25rem;
}

#puzzle.chess > li {
  padding-top: 100%;
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

#puzzle.chess > li > span {
  display: block;
  width: 100%;
  position: absolute;
  top: 40%;
  left: 0;
  text-align: center;
}

#puzzle.chess > li:nth-child(16n+1), #puzzle.chess > li:nth-child(16n+3), #puzzle.chess > li:nth-child(16n+5), #puzzle.chess > li:nth-child(16n+7), #puzzle.chess > li:nth-child(16n+10), #puzzle.chess > li:nth-child(16n+12), #puzzle.chess > li:nth-child(16n+14), #puzzle.chess > li:nth-child(16n+16) {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

#puzzle.chess.hint1 > li:nth-child(16n+2), #puzzle.chess.hint1 > li:nth-child(16n+4), #puzzle.chess.hint1 > li:nth-child(16n+6), #puzzle.chess.hint1 > li:nth-child(16n+8), #puzzle.chess.hint1 > li:nth-child(16n+9), #puzzle.chess.hint1 > li:nth-child(16n+11), #puzzle.chess.hint1 > li:nth-child(16n+13), #puzzle.chess.hint1 > li:nth-child(16n+15) {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

#puzzle.chess.hint1 > li:nth-child(16n+2),
#puzzle.chess.hint1 > li:nth-child(16n+4),
#puzzle.chess.hint1 > li:nth-child(16n+6),
#puzzle.chess.hint1 > li:nth-child(16n+8),
#puzzle.chess.hint1 > li:nth-child(16n+9),
#puzzle.chess.hint1 > li:nth-child(16n+11),
#puzzle.chess.hint1 > li:nth-child(16n+13),
#puzzle.chess.hint1 > li:nth-child(16n+15) {
  transition: background-color 2s ease-in, color 2s ease-in;
}