.game-loading {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.game-loading::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, #b398df 35%, #e69ec5 70%, #a787d6);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: game-loading-spin 900ms linear infinite;
}

.game-loading-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.word-snake-loading.game-loading { position: absolute; z-index: 20; }
.game-loading[hidden], .game-loading.game-loading-suspended,
body.word-path-learning-active .game-loading { display: none; }
.game-loading-error::before { display: none; }
.game-loading-error .game-loading-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

@keyframes game-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .game-loading::before { animation: none; }
}