/* The artwork is the supplied JPG, not a replacement font or a new design. */
.loading-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #000;
  color: #d5f5cd;
}
.loading-screen[hidden] { display: none; }
body.is-loading .game-viewport { visibility: hidden; }
.loading-frame {
  position: relative;
  height: min(calc(var(--legacy-vh) * 100), 920px);
  height: min(100dvh, 920px);
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  overflow: hidden;
  background: #090a09;
}
.loading-art { display: block; width: 100%; height: 100%; }
.loading-art,
.loading-letter-row,
.loading-button-cover { visibility: hidden; }
.loading-frame[data-art-ready] .loading-art,
.loading-frame[data-art-ready] .loading-letter-row,
.loading-frame[data-art-ready] .loading-button-cover { visibility: visible; }
.loading-letter-row,
.loading-button-cover { position: absolute; pointer-events: none; }
.loading-letter-row canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; }
.loading-letter-fill { clip-path: inset(calc((1 - var(--fill, 0)) * 100%) 0 0); }
.loading-button-cover { left: 26.3%; top: 72.6%; width: 47.4%; height: 5.6%; }
.loading-frame[data-ready="true"] .loading-button-cover { animation: start-hint 1.6s ease-in-out infinite; }
@keyframes start-hint { 0%, 100% { opacity: 0; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .loading-frame[data-ready="true"] .loading-button-cover { animation: none; opacity: 0; }
}
.loading-start {
  position: absolute;
  left: 27.2%;
  top: 72.9%;
  width: 45.6%;
  height: 5.1%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.loading-start[hidden] { display: none; }
.loading-start:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.loading-error {
  position: absolute;
  bottom: 17%;
  left: 10%;
  width: 80%;
  text-align: center;
  font: 14px/1.6 system-ui, sans-serif;
}
.loading-retry { min-height: 44px; border: 1px solid #42bc30; border-radius: 6px; padding: 8px 20px; background: #111; color: #c4fcb8; cursor: pointer; }
.loading-screen .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-aspect-ratio: 9 / 16) {
  .loading-frame { width: 100vw; height: auto; }
}