/* Startup dimensions and artwork are from the supplied WebGL HTML template. */
.startup-loading,.transition-loading{display:none;position:fixed;inset:0;z-index:1000;pointer-events:auto}
.startup-loading-active .startup-loading{display:block;background:#170700 url('assets/loading/startup.jpg') center/cover no-repeat}
.startup-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:361px}
.startup-brand>img{display:block;width:361px;height:268px;object-fit:none}
.startup-progress{width:141px;height:18px;margin-top:10px;margin-left:115px;background:url('assets/loading/progress-bar-empty-dark.png') center no-repeat}
.startup-progress>span{display:block;width:var(--progress,0%);height:18px;background:url('assets/loading/progress-bar-full-dark.png') left center no-repeat;transition:width .12s linear}
.startup-splash-logo{display:none;position:absolute;left:50%;top:50%;width:min(100vh,145vw);height:auto;transform:translate(-50%,-50%);pointer-events:none}
.startup-splash-active .startup-brand{display:none}
.startup-splash-active .startup-splash-logo{display:block;animation:startup-logo-reveal 3s linear both}
@keyframes startup-logo-reveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.96)}
  17%{opacity:1}
  75%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.startup-splash-active .startup-splash-logo{animation:none;opacity:1}}
.transition-loading-active .transition-loading{display:block;background:#130404 url('assets/bg.png') center/100% 100% no-repeat}
/* Paint the backdrop on the root too: during document navigation the body
   can briefly be absent. The loader should never expose the dark canvas. */
html.transition-loading-active{background:#130404 url('assets/bg.png') center/100% 100% no-repeat}
html.transition-loading-active body{background-image:url('assets/bg.png')}
/* Keep the outgoing painted page until the destination's first complete
   frame. Disable the browser's default crossfade so the artwork stays sharp. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:none}
.transition-loading-active .login-screen::before{display:none}
.transition-loading-active main>:not(#lobby-particles):not(.top-hud){visibility:hidden}
.transition-header{position:absolute;top:0;width:100%;height:calc(87.4 * var(--u));background:url('assets/top-hud.png') center/100% 100% no-repeat;box-shadow:0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.3)}
.transition-header .top-middle{width:calc(608 * var(--u))!important;height:calc(84.2 * var(--u))!important}
.transition-header .av-logo{left:50%;width:calc(222 * var(--u))!important;height:calc(115 * var(--u))!important;top:calc(-9.9 * var(--u))!important}
.transition-header{background-size:calc(2930 * var(--u)) calc(166.7 * var(--u));background-position:calc(-1063.5 * var(--u)) calc(100% + 11.3 * var(--u));background-repeat:repeat-x}
.transition-version{position:absolute;left:6px;top:10px;color:#bbb;font:14px Arial,sans-serif}
.transition-loading .multi-title{top:calc(116 * var(--u))}
.loading-spinner{position:absolute;left:50%;top:50%;width:calc(112.5 * var(--u));height:calc(112.5 * var(--u));background:#fddd3d;-webkit-mask:url('assets/loading/spinner.png') center/contain no-repeat;mask:url('assets/loading/spinner.png') center/contain no-repeat;animation:loading-spin 1s linear infinite}
@keyframes loading-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;transform:translate(-50%,-50%)}.startup-progress>span{transition:none}}