/* Loading screens: isolated from the menu and HUD. */
#loading { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:#000; color:#eee; font-family:Arial,sans-serif; }
#loading[hidden] { display:none!important; }
#loading.boot-loading { background:#000; }
.boot-logo { color:#d8b968; font-size:clamp(48px,8vw,112px); font-weight:800; letter-spacing:.09em; line-height:1; opacity:0; animation:boot-logo-in 1.5s .15s ease-out forwards; }
.boot-progress { position:absolute; bottom:9%; left:0; right:0; text-align:center; color:#d8b968; font-size:18px; font-variant-numeric:tabular-nums; opacity:0; animation:boot-percent-in .45s 1.8s ease forwards; }
#loading .boot-progress small { display:block; color:#96938b; margin-top:12px; font-size:12px; letter-spacing:.04em; }
@keyframes boot-logo-in { from { opacity:0; } to { opacity:1; } }
@keyframes boot-percent-in { to { opacity:1; } }
#loading.map-loading { display:block; background:#111; overflow:auto; }
.map-load-cover { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65); }
.map-load-shade { position:fixed; inset:0; background:linear-gradient(90deg,#0005,#0001 55%,#0006),linear-gradient(0deg,#0009,transparent 40%); }
.map-load-shell { position:relative; width:min(1180px,88vw,116vh); margin:5vh auto 3vh; }
.map-load-main { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(290px,1fr); min-height:0; border:1px solid #ffffff35; background:#151c20a8; box-shadow:0 8px 35px #0005; }
.map-load-radar { aspect-ratio:1; width:100%; display:block; background:#04080b; border-right:1px solid #ffffff35; object-fit:contain; }
.map-load-info { padding:28px; background:#26323875; }
.map-load-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; }
#loading .map-load-info h1 { margin:0; font-size:clamp(30px,3vw,46px); color:#fff; line-height:1.1; }
#loading .map-load-mode { margin:10px 0 0; color:#e3e7e9; font-size:18px; letter-spacing:.03em; }
.map-load-badge { width:64px; height:74px; flex-shrink:0; display:grid; place-items:center; clip-path:polygon(50% 0,100% 25%,88% 84%,50% 100%,12% 84%,0 25%); background:var(--map-accent,#b99550); color:#fff; border:0; font-size:25px; font-weight:bold; }
#loading .map-load-info p { font-size:16px; line-height:1.6; letter-spacing:.02em; color:#edf0f1; margin:22px 0; }
#loading .map-load-info .map-load-subtitle { color:#c9d0d3; border-top:1px solid #ffffff26; padding-top:22px; }
.map-load-settings { padding:0; margin:12px 0 24px; list-style:none; font-size:15px; line-height:1.8; color:#e0e5e6; }
.map-load-settings li::before { content:'· '; color:#e4c76b; }
.map-load-legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:#ced7db; border-top:1px solid #ffffff26; padding-top:20px; }
.map-load-legend b { color:#e4c76b; }.map-load-legend .ct { color:#78c4ef; }
.map-load-tip { margin-top:16px; display:flex; gap:16px; align-items:center; padding:18px 22px; min-height:62px; background:#161d20da; color:#f0d87d; font-size:15px; line-height:1.5; }
.map-load-tip-icon { flex-shrink:0; border-radius:50%; background:#e4c76b; color:#161b1d; width:28px; height:28px; text-align:center; line-height:28px; font-weight:bold; font-family:Georgia,serif; }
.map-load-status { display:flex; justify-content:space-between; gap:16px; font-size:14px; color:#e3e8eb; padding:20px 0 9px; font-variant-numeric:tabular-nums; }
.map-load-track { height:5px; background:#ffffff20; overflow:hidden; }
.map-load-track i { display:block; width:0; height:100%; background:#36b4d4; transition:width .25s ease; }
@media(max-width:700px) { .map-load-shell { width:92vw; margin:3vh auto; }.map-load-main { grid-template-columns:1fr; }.map-load-radar { max-height:43vh; border-right:0; border-bottom:1px solid #ffffff35; }.map-load-info { padding:20px; } #loading .map-load-info h1 {font-size:30px;} #loading .map-load-info p {margin:14px 0;}.map-load-settings {margin-bottom:14px;}.map-load-tip {padding:14px;font-size:14px;} }
@media(min-width:701px) and (max-height:760px) { .map-load-shell { width:min(1000px,86vw,116vh); margin:3vh auto; }.map-load-info {padding:20px;} #loading .map-load-info p {font-size:14px;margin:16px 0;}.map-load-settings {font-size:14px;line-height:1.6;}.map-load-tip {padding:12px 18px;min-height:50px;margin-top:10px;}.map-load-status {padding-top:12px;} }
@media(prefers-reduced-motion:reduce) { .boot-logo {animation-duration:.01s;animation-delay:0s;}.boot-progress {animation-delay:.1s;animation-duration:.01s;}.map-load-track i {transition:none;} }