/* Loading overlay — shown while assets (audio + images) are being cached.
   Add .game-loading to .game-container at page load, remove when ready. */

.game-container.game-loading .game-area,
.game-container.game-loading .btn-listen-wrapper,
.game-container.game-loading .top-bar {
  visibility: hidden;
}

.game-container.game-loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 5px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: loading-spin 0.8s linear infinite;
  z-index: 999;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}