#startup-loading { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: clamp(32px, 7vh, 80px) 24px; box-sizing: border-box; background: linear-gradient(180deg, #fff4df22 25%, #182f25bb 100%), url('/images/relax-town-loading.webp') center / cover, #acc6b0; color: #fff9eb; text-align: center; font-family: 'Segoe UI', system-ui, sans-serif; transition: opacity .6s ease; }
#startup-loading.leaving { opacity: 0; pointer-events: none; }
.loading-heading { color: #354d40; text-shadow: 0 2px 20px #fff4df; }
.loading-heading small { font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.loading-heading h1 { margin: 8px 0; font: 600 clamp(48px, 9vw, 92px)/1.1 Georgia, serif; letter-spacing: -.04em; }
.loading-heading p { margin: 0; font-size: 15px; }
.loading-footer { width: min(100%, 380px); text-shadow: 0 1px 8px #182f25; }
.loading-status-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; margin-bottom: 12px; }
#startup-progress { appearance: none; display: block; width: 100%; height: 9px; overflow: hidden; border: 1px solid #fff9eb66; border-radius: 20px; background: #fff9eb33; }
#startup-progress::-webkit-progress-bar { background: #fff9eb33; }
#startup-progress::-webkit-progress-value { background: #f5e4ae; border-radius: 20px; transition: width .25s; }
#startup-progress::-moz-progress-bar { background: #f5e4ae; border-radius: 20px; }
.loading-footer p { font-size: 12px; opacity: .85; margin: 18px 0 0; }
#startup-retry { margin-top: 16px; padding: 10px 20px; border: 1px solid #fff9eb88; border-radius: 24px; background: #fff9eb; color: #354d40; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #startup-loading, #startup-progress::-webkit-progress-value { transition: none; } }