#town-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 32px 24px;
  background: #141a28;
  color: #f3ecd8;
  font-family: var(--font-body, "Segoe UI", sans-serif);
}
#town-loading[hidden] { display: none; }
.town-loading-content { width: min(520px, 100%); text-align: center; }
#town-loading h1 {
  margin: 0;
  font-family: var(--font-head, "Segoe UI", sans-serif);
  font-size: clamp(32px, 7vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
#town-loading h1 span { color: #f2c14e; }
#town-loading-status { margin: 18px 0 24px; color: #c4cedd; font-size: 15px; }
.town-loading-track { height: 4px; overflow: hidden; background: #35415f; border-radius: 2px; }
.town-loading-track span {
  display: block;
  width: 35%;
  height: 100%;
  background: #f2c14e;
  animation: town-loading-travel 1.8s ease-in-out infinite alternate;
}
.town-loading-advice { margin-top: clamp(40px, 9vh, 80px); }
#town-loading-tip-title { margin: 0 0 12px; color: #f2c14e; font-size: 17px; font-weight: 700; }
#town-loading-tip { min-height: 4.5em; margin: 0; color: #c4cedd; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
body.town-is-loading > :not(#town-loading) { pointer-events: none; }
@keyframes town-loading-travel { from { transform: translateX(0); } to { transform: translateX(185%); } }
@media (prefers-reduced-motion: reduce) { .town-loading-track span { animation: none; width: 100%; } }