/* The loading screen while the game first connects (boot-screen.js). Until its pictures are decoded it is a plain
   dark backdrop, the same colour as the first frame. */
.boot-screen{--boot-logo:min(86vw,57vh);--boot-top:24vh;position:fixed;inset:0;z-index:70;overflow:hidden;background:#080e20;font-family:'Lilita One',sans-serif;color:#fff0c9;-webkit-font-smoothing:antialiased;pointer-events:auto}
.boot-screen>*{visibility:hidden}.boot-screen.boot-ready>*{visibility:visible}
.boot-loader,.boot-world,.boot-grade,.boot-fx,.boot-sky,.boot-flash,.boot-curtain,.boot-vignette{position:absolute;inset:0}
.boot-loader{overflow:hidden;isolation:isolate;background:#080e20}
.boot-world{inset:-10%;transform-origin:50% 52%;will-change:transform}
.boot-arena{width:100%;height:100%;object-fit:cover}
.boot-grade{background:linear-gradient(#050822d9,#0a0f2e99 30%,#10152b33 52%,#080e20f5 95%)}
.boot-banner{position:absolute;top:13%;height:30%;width:19%;object-fit:fill;transform-origin:50% 0}.boot-banner.left{left:0}.boot-banner.right{right:0}
.boot-vignette{background:radial-gradient(ellipse at 50% 38%,transparent 20%,#050b1a99 100%)}
.boot-logo{position:absolute;left:0;right:0;margin:0 auto;width:var(--boot-logo);aspect-ratio:900/699;top:var(--boot-top);filter:drop-shadow(0 12px 8px #0007);opacity:0;will-change:transform,opacity}
.boot-logo>img{display:block;width:100%;height:100%}
.boot-glint{position:absolute;left:47%;top:12%;width:7%;height:9%;background:#fffde1;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0}
.boot-sweep{position:absolute;inset:0;-webkit-mask:url('/assets/loading/logo.webp') center/100% 100% no-repeat;mask:url('/assets/loading/logo.webp') center/100% 100% no-repeat;overflow:hidden}
.boot-sweep i{position:absolute;inset:-20% -50%;background:linear-gradient(110deg,transparent 44%,#fff9dd99 50%,transparent 56%);opacity:0;mix-blend-mode:screen}
.boot-caption{position:absolute;top:calc(var(--boot-top) + var(--boot-logo)*.7767 + 2.5vh);left:6%;width:88%;height:2.6em;font-size:clamp(20px,6vw,28px);text-align:center;text-shadow:0 3px 0 #281427,0 5px 14px #000}
.boot-caption span{position:absolute;inset:0;display:grid;place-items:center;line-height:1.15;letter-spacing:.5px;opacity:0}
/* The bar (Eddy's pick A "candy stripes", 2026-11-08): a chunky gold capsule with a dark outline like the game's buttons,
   a glossy gold fill with stripes sliding along it, and the percent in the middle of the bar. */
.boot-hud{--boot-stub:26px;position:absolute;left:9%;width:82%;bottom:max(5%,calc(env(safe-area-inset-bottom) + 18px))}
.boot-title{margin-bottom:9px;font-size:15px;letter-spacing:.3px;text-align:center;text-shadow:0 2px 0 #1b0f22,0 0 6px #000}
.boot-meter{position:relative;height:34px;box-sizing:border-box;border-radius:17px;padding:4px;background:linear-gradient(#ffeaa0,#e9a531 55%,#a85e14);box-shadow:0 0 0 2.5px #2a1206,0 4px 0 2.5px #2a1206,0 9px 16px #000a}
.boot-track{position:relative;height:100%;overflow:hidden;border-radius:13px;background:linear-gradient(#060b1d,#16234a);box-shadow:inset 0 3px 4px #000c}
.boot-fill{position:absolute;left:0;top:0;bottom:0;width:var(--boot-stub);overflow:hidden;border-radius:13px;background:linear-gradient(#ffe066,#ffb21c 55%,#e57a06);box-shadow:inset 0 -3px 0 #b55204,inset -2px 0 0 #c86206}
.boot-fill:before{content:'';position:absolute;inset:0 -40px;background:repeating-linear-gradient(115deg,#fff4 0 9px,transparent 9px 20px);animation:boot-stripes .7s linear infinite}
.boot-fill:after{content:'';position:absolute;left:6px;right:8px;top:3px;height:32%;border-radius:8px;background:linear-gradient(#fffbe0e6,#fff8d000)}
/* 22px is one full stripe repeat along the bar (20px across the 115deg stripes), so the slide loops without a jump. */
@keyframes boot-stripes{to{transform:translateX(22px)}}
.boot-percent{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;color:#fff;paint-order:stroke fill;-webkit-text-stroke:4px #3a1a08}
.boot-sky{width:100%;height:100%;pointer-events:none}
.boot-fx{z-index:15;width:100%;height:100%;pointer-events:none}
.boot-flash{z-index:20;background:#fff9e5;opacity:0;pointer-events:none}
.boot-curtain{z-index:25;background:#080e20;pointer-events:none}
@media(min-aspect-ratio:11/20){.boot-screen{--boot-logo:min(80vw,57vh);--boot-top:22vh}.boot-hud{bottom:4%}}
/* Sideways screens and desktop windows: a smaller logo higher up, so the bar stays clear. */
@media(min-aspect-ratio:1/1){.boot-screen{--boot-logo:min(80vw,40vh);--boot-top:8vh}.boot-hud{width:min(82%,520px);left:0;right:0;margin:0 auto}}
/* The connecting overlay stays up underneath (it holds back pop-ups until the screen has left) but is never seen. */
body:has(#boot-screen) .offline-screen[data-state="connecting"]{visibility:hidden}
@media(prefers-reduced-motion:reduce){.boot-flash{display:none}.boot-fill:before{animation:none}.boot-world,.boot-logo{will-change:auto}}