.game-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  padding: 24px;
  color: var(--muted, #a5b3cc);
  font: 500 15px/1.6 "DM Sans", sans-serif;
  text-align: center;
  pointer-events: none;
}

.game-loading-screen p { margin: 0; }
.game-loading-pending { animation: game-loading-show .2s .6s both; }
.game-loading-error { display: none; }
.game-loading-error a { display: inline-block; margin-top: 12px; color: var(--accent, #91baff); pointer-events: auto; }
html[data-game-loading="error"] .game-loading-pending { display: none; }
html[data-game-loading="error"] .game-loading-error { display: block; }
html[data-game-loading="ready"] .game-loading-screen { display: none; }

@keyframes game-loading-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .game-loading-pending { animation-duration: 0s; }
}