.puzzle--loading {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: calc(71.428571% - 1.339286rem + 11px);
  margin-block-start: var(--space-sm);
  margin-inline: auto;
  opacity: 1;
  transition: opacity 150ms ease-out;
}

.puzzle--loading-pending {
  visibility: hidden;
  opacity: 0;
}

.puzzle-font-pending {
  visibility: hidden;
}

.game-view.is-puzzle-loading :is(.puzzle-hint, .keyboard-capture, .game-controls, .status),
.results-view.is-puzzle-loading :is(.result-board-heading, .leaderboard) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .puzzle--loading {
    transition: none;
  }
}