#gameLoading{position:fixed;inset:0;z-index:10000;background:#0b1423;color:#fff4df;display:grid;grid-template-rows:1fr auto 1fr;overflow:hidden;isolation:isolate;text-align:center;font-family:system-ui,sans-serif}
#gameLoading[hidden]{display:none}
.loading-heading{align-self:end;padding:16px 20px 0}
.loading-heading h1{font-size:clamp(25px,5vw,64px);line-height:1.05;letter-spacing:.035em;margin:0 0 12px;font-weight:900}
.loading-heading p{color:#f9a746;font-size:clamp(11px,1.4vw,17px);font-weight:800;letter-spacing:.15em;margin:0}
.loading-track{display:block;width:100%;height:auto;max-height:40dvh;align-self:center}
.loading-bottom{align-self:start;padding:5px 24px 16px}
.loading-bar{height:7px;width:min(680px,70vw);background:#2e4051;border-radius:8px;margin:0 auto 22px;overflow:hidden}
.loading-bar span{display:block;background:#ff9b39;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
.loading-label{font-size:clamp(18px,2.7vw,30px);font-weight:900;letter-spacing:.1em;margin:0}
#gameLoading[data-ready=true] .loading-label{color:#8ce7b1}
#gameLoading[data-ready=true] .loading-bar span{background:#8ce7b1}
.loading-bike-still{display:none}
#gameLoading[data-ready=true] .loading-bike-animated{display:none}
#gameLoading[data-ready=true] .loading-bike-still{display:block}
.loading-dust{animation:loading-dust .7s linear infinite}
@keyframes loading-dust{from{opacity:.8;transform:translateX(0)}to{opacity:0;transform:translateX(-50px)}}
.loading-retry{min-width:150px;min-height:64px;margin:15px auto;background:#ff9b39;color:#142231;border:0;border-radius:14px;font-size:20px;font-weight:800}
@media(prefers-reduced-motion:reduce){.loading-dust{animation:none}.loading-bike-animated{display:none}.loading-bike-still{display:block}.loading-bar span{transition:none}}
@media(max-height:430px){.loading-heading h1{font-size:28px;margin-bottom:5px}.loading-heading p{font-size:10px}.loading-bar{margin-bottom:7px}.loading-bottom{padding-top:0}.loading-label{font-size:18px}.loading-track{max-height:44dvh}}

/* Anchor the dirt line independently of the space needed above it for jumps. */
#gameLoading{display:block}
.loading-heading{position:absolute;top:6%;left:0;width:100%}
.loading-track{position:absolute;left:50%;top:58%;transform:translate(-50%,-83.83%);width:100%;height:auto;max-height:none}
.loading-bottom{position:absolute;top:72%;left:0;width:100%}
#gameLoading[data-phase=jump] .loading-dust,#gameLoading[data-phase=bounce] .loading-dust{display:none}
@media(max-height:430px){.loading-heading{top:2%}.loading-track{top:66%;max-height:none}.loading-bottom{top:85%}}
#gameLoading[data-art-ready] .loading-track{visibility:visible}
.loading-track{visibility:hidden}
#gameLoading[data-phase=compression] .loading-dust{display:none}

.loading-tips{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(680px,90%);font-size:clamp(14px,2vw,18px);line-height:1.35;color:#fff4df}
.loading-tips strong{color:#f9a746;font-size:13px;letter-spacing:.14em}
.loading-tips p{margin:5px 0 0;min-height:2.7em}
@media(max-height:430px){.loading-bottom{top:70%;box-sizing:border-box;padding:0 16px}.loading-bar{margin-bottom:5px}.loading-tips{bottom:max(5px,env(safe-area-inset-bottom));font-size:14px}.loading-tips p{min-height:0;margin-top:2px}.loading-tips strong{font-size:11px}}
