/* Match the lobby wordmark and keep the first paint independent of Phaser. */
body.map-loading { background: #0b1418; }
body.map-loading > :not(#map-loading),
body.map-loading > :not(#map-loading) *,
body.map-loading dialog::backdrop { visibility: hidden !important; }
#map-loading {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  overflow: hidden; background: #0b1418; color: #f0f4ec;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  opacity: 1; transition: opacity .6s ease;
}
#map-loading::before {
  content: ''; position: absolute; inset: 0;
  background: url('assets/loading-world.svg') center / contain no-repeat;
  opacity: .105;
  mask-image: radial-gradient(ellipse at center, #000 15%, #0009 70%, transparent 100%);
}
#map-loading::after {
  content: ''; position: absolute; left: 0; bottom: 1px;
  width: clamp(38px, 5vw, 64px); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #d2ba8480 30%, #d2ba84 65%, transparent);
  filter: drop-shadow(0 0 4px #d2ba84) drop-shadow(0 0 8px #d2ba8499);
  /* Only the composited position moves; the light keeps a constant brightness. */
  will-change: transform;
  animation: loading-gold-beam 5s linear infinite;
}
@keyframes loading-gold-beam {
  from { transform: translate3d(calc(-100% - 24px), 0, 0); }
  to { transform: translate3d(calc(100vw + 24px), 0, 0); }
}
#map-loading[data-state='error']::after { display: none; }
#map-loading .loading-wordmark {
  position: relative; margin: 0; padding: 0 20px;
  font: 600 clamp(32px, 7.2vw, 88px)/1.04 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.055em; white-space: nowrap; text-shadow: 0 3px 45px #020b0d4d;
}
#map-loading .loading-wordmark span { font-weight: 200; color: #cbb890; margin-left: .1em; }
#map-loading.is-leaving { opacity: 0; }
#map-loading .loading-error {
  position: absolute; top: calc(50% + 80px); left: 20px; right: 20px;
  text-align: center; font: 14px/1.6 'Helvetica Neue', Arial, sans-serif; color: #cbb890;
}
#map-loading .loading-error[hidden] { display: none; }
#map-loading .loading-error p { margin: 0 0 14px; }
#map-loading .loading-error a { color: #f0f4ec; text-decoration: underline; margin: 0 12px; }
@media (prefers-reduced-motion: reduce) {
  #map-loading { transition: none; }
  #map-loading::after { animation: none; display: none; }
}