/* Map-entry loading stage on the Infin8 Neon UI kit: Sleddin's gameplay poster
   full-bleed over galaxy black, the rider's sky theme as a soft tint, a glass panel
   with a neon rim and the kit's gradient progress bar. No video. Never a blank or
   white frame: the galaxy backdrop shows if the poster cannot load. */
.loading-stage{position:absolute;inset:0;z-index:46;display:grid;grid-template-rows:auto 1fr;color:var(--i8-text,#edf2ff);overflow:hidden;
 background:radial-gradient(60% 50% at 20% 20%,rgba(77,232,255,.18),transparent 70%),radial-gradient(55% 45% at 82% 28%,rgba(230,76,255,.2),transparent 72%),var(--i8-galaxy,#070910);
 --loading-primary:var(--i8-cyan,#4de8ff);--loading-secondary:var(--i8-magenta,#e64cff);--loading-sky:var(--i8-base,#070910);font-family:var(--i8-font,system-ui,sans-serif)}
.loading-stage[hidden]{display:none}
/* Sleddin's own gameplay capture fills the whole stage, edge to edge at every size. */
.loading-stage-media{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loading-stage-poster{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform-origin:50% 45%;animation:loading-stage-push 22s ease-in-out infinite alternate}
.loading-stage-poster[hidden]{display:none}
@keyframes loading-stage-push{from{transform:scale(1.02)}to{transform:scale(1.09) translate3d(-1%,-.6%,0)}}
/* Brand tint and a galaxy scrim over the poster: the rider's theme glows at the
   top corners and the top fades to galaxy black so the panel, which rests at the
   top of the stage, always reads. */
.loading-stage-sky{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(48% 40% at 12% 8%,color-mix(in srgb,var(--loading-primary) 30%,transparent),transparent 70%),
 radial-gradient(46% 38% at 90% 10%,color-mix(in srgb,var(--loading-secondary) 32%,transparent),transparent 72%),
 linear-gradient(0deg,rgba(7,9,16,.35) 0%,rgba(7,9,16,0) 26%,rgba(7,9,16,.18) 52%,rgba(7,9,16,.82) 80%,rgba(7,9,16,.96) 100%);
 box-shadow:inset 0 0 120px rgba(7,9,16,.7)}
.loading-stage.is-reduced-motion .loading-stage-poster,.loading-stage.is-low-power .loading-stage-poster{animation:none;transform:none}
.loading-stage-panel{position:relative;z-index:1;grid-row:1;margin:max(16px,env(safe-area-inset-top)) auto 0;width:min(calc(100% - 24px),960px);padding:14px clamp(14px,3vw,28px) 16px;text-align:left;
 border-radius:var(--i8-r-panel,14px);background:var(--i8-grad-glass),var(--i8-glass-bg,rgba(12,16,30,.72));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 box-shadow:inset 0 0 0 1px rgba(127,240,255,.35),0 0 0 3px rgba(139,92,246,.22),0 14px 36px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--loading-secondary) 22%,transparent)}
.loading-stage.is-low-power .loading-stage-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,13,26,.9)}
.loading-stage-panel .eyebrow{display:block;font:800 11px/1.3 var(--i8-font,system-ui);letter-spacing:.22em;color:var(--loading-primary)}
.loading-stage-title{margin:4px 0 10px;font:900 clamp(22px,4vw,34px)/1.05 var(--i8-font,system-ui);letter-spacing:.04em;text-transform:uppercase;
 background:var(--i8-grad-chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.loading-stage-title em{font-style:normal;background:var(--i8-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.loading-stage-bar{position:relative;height:12px;border-radius:999px;background:rgba(9,12,24,.85);overflow:hidden;border:1px solid rgba(127,240,255,.4)}
.loading-stage-bar span{position:relative;display:block;height:100%;width:0;overflow:hidden;border-radius:inherit;background:var(--i8-grad);box-shadow:0 0 12px rgba(77,232,255,.6);transition:width .25s ease-out}
.loading-stage-bar span::after{content:"";position:absolute;inset:0 -40px 0 0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 8px,transparent 8px 16px);animation:loading-stage-stripes .8s linear infinite}
@keyframes loading-stage-stripes{to{transform:translateX(-22.6px)}}
.loading-stage.is-reduced-motion .loading-stage-bar span{transition:none}
.loading-stage.is-reduced-motion .loading-stage-bar span::after{animation:none}
.loading-stage-phases{list-style:none;margin:10px 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 14px;font:600 13px/1.4 var(--i8-font,system-ui);color:var(--i8-muted,#a3acc4)}
.loading-stage-phases li::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;border:1.5px solid var(--i8-muted,#a3acc4);vertical-align:1px}
.loading-stage-phases li.is-active{color:var(--i8-text,#edf2ff)}
.loading-stage-phases li.is-active::before{border-color:var(--loading-primary);box-shadow:0 0 8px var(--loading-primary)}
.loading-stage-phases li.is-done{color:var(--i8-text,#edf2ff)}
.loading-stage-phases li.is-done::before{border:0;background:var(--i8-grad);box-shadow:0 0 8px var(--loading-primary)}
.loading-stage-room{margin:4px 0;font:700 13px/1.4 var(--i8-font,system-ui);color:var(--loading-secondary)}
.loading-stage-error{margin:6px 0;font:700 14px/1.4 var(--i8-font,system-ui);color:var(--i8-danger,#ff708b)}
.loading-stage-actions[hidden]{display:none}
.loading-stage-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.loading-stage-actions button{min-height:44px;min-width:44px;margin:0;padding:0 18px;border-radius:var(--i8-r-control,9px);font:800 13px var(--i8-font,system-ui);letter-spacing:.08em;cursor:pointer;color:#fff}
.loading-stage-actions button[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.loading-stage-poster,.loading-stage-bar span::after{animation:none}}
.loading-stage.is-low-power .loading-stage-bar span::after{animation:none}
@media (max-width:600px){
 .loading-stage-poster{object-position:58% 40%}
 .loading-stage-panel{width:calc(100% - 16px);padding:12px 14px 14px}
 .loading-stage-phases{grid-template-columns:1fr 1fr;font-size:12px}
}
@media (max-height:460px){
 .loading-stage-panel{padding:10px 16px 12px}
 .loading-stage-title{margin:2px 0 6px;font-size:clamp(18px,3.4vw,26px)}
 .loading-stage-phases{grid-template-columns:repeat(3,1fr);margin:6px 0 2px}
}