/* The BB mark's ink, chalk and coral, carried through a city arrival screen. */
#loading {
 --load-ink:#101010; --load-paper:#fafafa; --load-muted:#aaa9a6; --load-accent:#ff604b; --load-progress:0%;
 position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:40px 28px;
 overflow:auto; background:var(--load-ink); color:var(--load-paper);
 font:15px/1.5 "Avenir Next",Arial,sans-serif; transition:opacity .35s ease,visibility .35s;
}
#loading.hidden {opacity:0;visibility:hidden;pointer-events:none;}
.loading-shell {width:min(560px,100%);}
.loading-brand {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px;}
.loading-brand img {width:86px;height:86px;object-fit:contain;margin-left:-8px;}
.loading-brand span {font:700 11px/1.5 "Courier New",monospace;letter-spacing:2px;color:var(--load-muted);}
#loading h1 {font:900 clamp(44px,8vw,76px)/.98 Impact,"Arial Black",sans-serif;letter-spacing:-.8px;margin:0 0 18px;}
#loading h1 span {color:var(--load-accent);}
#loading-welcome {color:var(--load-muted);min-height:24px;overflow-wrap:anywhere;}
.loading-city {height:112px;position:relative;display:flex;align-items:flex-end;gap:8px;overflow:hidden;margin:30px 0 24px;border-bottom:2px solid #676561;}
.loading-city i {display:block;position:relative;flex:1;background:#232323;border:1px solid #454442;border-bottom:0;height:50%;}
.loading-city i:nth-child(2) {height:72%;}
.loading-city i:nth-child(3) {height:58%;flex:1.3;}
.loading-city i:nth-child(4) {height:100%;flex:.8;}
.loading-city i:nth-child(5) {height:68%;}
.loading-city i:nth-child(6) {height:88%;flex:1.2;}
.loading-city i:nth-child(7) {height:42%;flex:.7;}
.loading-city i::before {content:"";position:absolute;inset:10px 8px;background:repeating-linear-gradient(0deg,transparent 0 10px,#ffffff0b 10px 13px);}
.loading-city i:nth-child(3)::after {content:"BB";position:absolute;inset:10px 6px auto;background:var(--load-accent);color:var(--load-ink);font:900 24px/1.3 Impact,"Arial Black",sans-serif;text-align:center;transform:rotate(-3deg);box-shadow:3px 3px 0 #000;}
.loading-readout {display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:12px;}
#loading-status {font-size:16px;font-weight:700;}
#loading-percent {font:700 24px/1 "Courier New",monospace;color:var(--load-accent);font-variant-numeric:tabular-nums;}
.loading-track {height:10px;background:#30302f;border:1px solid #55534f;overflow:hidden;}
.loading-fill {height:100%;width:var(--load-progress);background:var(--load-accent);transition:width .2s linear;}
#loading-detail {min-height:22px;margin-top:10px;font:12px/1.6 "Courier New",monospace;color:var(--load-muted);}
.loading-steps {list-style:none;display:flex;justify-content:space-between;gap:12px;padding:0;margin:18px 0 32px;font:700 10px/1.5 "Courier New",monospace;letter-spacing:1px;text-transform:uppercase;color:#777672;}
.loading-steps li {display:flex;align-items:center;gap:7px;}
.loading-steps li::before {content:"";display:block;flex:none;width:6px;height:6px;border:1px solid currentColor;}
.loading-steps li[data-state="active"] {color:var(--load-paper);}
.loading-steps li[data-state="active"]::before {background:var(--load-accent);border-color:var(--load-accent);animation:loading-beacon 1.5s ease-in-out infinite;}
.loading-steps li[data-state="done"] {color:var(--load-accent);}
.loading-steps li[data-state="done"]::before {background:currentColor;}
.loading-tip {padding-top:20px;border-top:1px solid #373634;}
#loading-tip-title {display:block;font-size:13px;font-weight:700;margin-bottom:4px;}
#loading-tip {font-size:13px;color:var(--load-muted);min-height:40px;}
#loading-retry {margin-top:20px;background:var(--load-accent);color:var(--load-ink);border:2px solid var(--load-ink);box-shadow:3px 3px 0 var(--load-paper);padding:12px 22px;font:800 15px/1.5 "Avenir Next",Arial,sans-serif;cursor:pointer;}
#loading-retry:focus-visible {outline:2px solid var(--load-paper);outline-offset:5px;}
#loading-retry[hidden] {display:none;}
#loading[data-failed] .loading-steps li::before {animation:none;}
@keyframes loading-beacon {50% {opacity:.3;}}
@media(max-width:480px) {#loading {padding:24px;} .loading-brand {margin-bottom:24px;} .loading-city {height:90px;margin-top:22px;} .loading-steps {gap:6px;letter-spacing:0;} #loading-status {font-size:14px;}}
@media(max-height:760px) {.loading-brand {margin-bottom:16px;} .loading-city {height:90px;margin:22px 0 20px;} .loading-steps {margin-bottom:22px;} .loading-tip {padding-top:16px;} #loading h1 {font-size:clamp(44px,7vw,64px);}}
@media(max-height:680px) {.loading-brand {margin-bottom:12px;} .loading-brand img {width:64px;height:64px;} .loading-city {height:64px;margin:20px 0;} .loading-steps {margin-bottom:20px;} #loading h1 {font-size:44px;}}
@media(prefers-reduced-motion:reduce) {#loading,.loading-fill {transition:none;} .loading-steps li[data-state="active"]::before {animation:none;}}