/* The loading screen: a map splash behind the name, the bar and the step text. */
.loadscreen { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; color: #fff3b8; background: #120a05; opacity: 1; transition: opacity 0.35s ease; pointer-events: auto; overflow: hidden; }
.loadscreen.hidden { display: none; }
.loadscreen.fading { opacity: 0; pointer-events: none; }
.ls-bg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: ls-drift 24s ease-in-out infinite alternate; }
.ls-shade { position: absolute; inset: 0; background: linear-gradient(to top, #120a05f2 0%, #120a05b0 28%, #120a0540 55%, #120a0580 100%); }
.ls-content { position: relative; width: min(760px, 92vw); margin: 0 auto 6vh; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.ls-kicker { letter-spacing: 0.4em; font-size: 13px; font-weight: 800; color: #f1c04a; text-shadow: 0 2px 6px #000; }
.ls-title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 6vw, 56px); color: #fff3b8; text-shadow: 0 3px 12px #000, 0 0 30px #a2701a88; }
.ls-tip { min-height: 18px; font-size: 14px; color: #e9dcb8; text-shadow: 0 2px 6px #000; }
.ls-bar { height: 14px; padding: 2px; margin-top: 8px; background: #1e1008; border: 2px solid #a2701a; border-radius: 9px; box-shadow: inset 0 1px 3px #000, 0 2px 10px #000a; }
.ls-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(#fff3b8, #f1c04a 50%, #a2701a); transition: width 0.25s ease-out; }
.ls-step { display: flex; justify-content: space-between; font-size: 13px; color: #e9dcb8; text-shadow: 0 2px 6px #000; }
.ls-pct { font-weight: 800; color: #f1c04a; }
@keyframes ls-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -1%); } }
@media (prefers-reduced-motion: reduce) { .ls-bg { animation: none; } }