/* Shared loading screen for every game on the site.

   The star sits in a circular window cut out of a white field: the logo is a
   black star on a white square, so rounding the frame to a circle trims the
   corners away and leaves the star alone inside it. The ring and the shadow are
   what keep that circle readable against a white page.

   Only the badge turns. The word underneath holds still, because text that
   rotates with it is unreadable for the several seconds these builds take. */

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: #ffffff;
  z-index: 10;
  transition: opacity .4s ease;
}

#loading.done {
  opacity: 0;
  pointer-events: none;
}

#loading .loader-badge {
  width: min(168px, 36vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(35, 31, 32, .10),
    0 12px 34px rgba(35, 31, 32, .13);
  animation: loaderSpin 1.8s linear infinite;
}

#loading .loader-badge img {
  display: block;
  width: 100%;
  height: 100%;
}

#loading .loader-text {
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #231f20;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* Still turns, so it reads as busy rather than stuck, just slowly enough not
   to trouble anyone who asked the system for less motion. */
@media (prefers-reduced-motion: reduce) {
  #loading .loader-badge { animation-duration: 6s; }
}