/* First-paint loading screen: independent of the game bundle and WebGL. */
html,body{margin:0;background:#081517}body.booting{overflow:hidden}body.booting #ui,body.booting #labels{visibility:hidden}body.booting #ui{pointer-events:none}#boot-screen[hidden]{display:none!important}
#boot-screen{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;box-sizing:border-box;overflow:auto;padding:24px 9vw clamp(80px,12vh,150px);color:#f9e7bb;font-family:Georgia,serif;text-align:center;background:#120a05 url('/demo/assets/art/menu/loading-scenery-v2.webp') center/100% 100% no-repeat;transition:opacity .55s ease}
#boot-screen.leaving{opacity:0;pointer-events:none}
.boot-logo{position:relative;z-index:1;width:min(47vh,500px,80vw);min-height:0;flex:0 1 auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 18px #080200);margin:auto 0 0}.boot-content{position:relative;z-index:1;text-shadow:0 2px 5px #080402;width:min(1050px,100%);margin:2vh 0 0;flex:0 0 auto;isolation:isolate}.boot-track{height:31px;padding:5px;border:2px solid #d2a457;outline:1px solid #64391c;outline-offset:4px;background:#120904;box-shadow:inset 0 0 0 1px #5d3116,0 0 28px #a53b103d;position:relative}.boot-track:before,.boot-track:after{content:'';position:absolute;z-index:1;width:26px;height:26px;background:linear-gradient(135deg,#ff6a31,#b00f17 55%,#44060b);border:3px double #ffd077;box-shadow:0 0 0 4px #4b2813;transform:translateY(-50%) rotate(45deg);top:50%}.boot-track:before{left:-16px}.boot-track:after{right:-16px}.boot-track i{display:block;width:0;height:100%;background:linear-gradient(0deg,#880711,#f4231c 45%,#ffb444 95%);box-shadow:0 0 18px #ff300c,inset 0 0 6px #ffd269;transition:width .3s ease;position:relative;overflow:hidden}.boot-track i:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 30px,#ffd26c55 32px,transparent 35px 75px);animation:boot-flow 4s linear infinite}.boot-status{display:flex;justify-content:center;gap:16px;font-size:15px;letter-spacing:2px;margin:24px 0 15px}.boot-status strong{color:#ffe0a0;font-weight:normal;font-variant-numeric:tabular-nums}.boot-tip{width:min(680px,100%);margin:auto;min-height:89px;padding-top:17px;border-top:1px solid #bd8b4866}.boot-tip-label{font:10px Arial,sans-serif;letter-spacing:3px;color:#d6aa66}.boot-tip h2{font:19px Georgia,serif;margin:10px 0 7px;color:#ffe4ac}.boot-tip p{font:14px/1.6 Arial,sans-serif;color:#e1d6c1;margin:0;min-height:44px}.boot-controls{display:flex;gap:17px;align-items:center;justify-content:center;margin:9px 0 15px}.boot-controls button,#boot-retry{font:13px Arial,sans-serif;background:#21130de6;border:1px solid #a97e3f;color:#f4dba8;cursor:pointer;padding:7px 12px;border-radius:3px}.boot-controls span{font:11px Arial,sans-serif;color:#c5a77c}.boot-controls button:focus-visible,#boot-retry:focus-visible{outline:2px solid #ffe0a0;outline-offset:3px}.boot-motto{font:600 clamp(11px,1.1vw,14px)/1.65 Georgia,serif;letter-spacing:clamp(2px,.3vw,4px);color:#ffe3aa;margin:0;text-shadow:0 2px 3px #000,0 0 10px #000}#boot-error{font:13px/1.5 Arial,sans-serif;color:#ffd6be;max-width:640px;margin:12px auto;overflow-wrap:anywhere}#boot-retry{margin:0 0 15px}#boot-error:empty{display:none}.boot-hint{font:12px Arial,sans-serif;color:#dbc394;margin:8px 0}
@keyframes boot-flow{to{background-position:150px 0}}@media(max-height:720px){#boot-screen{padding-top:12px;padding-bottom:clamp(64px,11vh,84px)}.boot-logo{width:min(33vh,80vw)}.boot-content{margin-top:2vh}.boot-status{margin:19px 0 10px}.boot-tip{padding-top:10px}.boot-tip h2{font-size:17px}.boot-controls{margin:5px 0 10px}}@media(max-width:600px){#boot-screen{padding:16px 10vw max(80px,11vh)}.boot-logo{width:min(70vw,32vh)}.boot-track{height:22px}.boot-track:before,.boot-track:after{width:20px;height:20px}.boot-status{font-size:12px;letter-spacing:1px}.boot-tip p{font-size:13px;min-height:65px}.boot-motto{font-size:11px;letter-spacing:1.5px}}@media(prefers-reduced-motion:reduce){#boot-screen,.boot-track i{transition:none}.boot-track i:after{animation:none}}

/* Reuse the same painted image at natural proportions on narrow screens.
   Edge details remain visible even when the central battle is cropped. */
@media(max-aspect-ratio:4/3){
 #boot-screen{background-size:auto 100%}
 #boot-screen:before,#boot-screen:after{content:'';position:absolute;top:0;bottom:0;width:18vw;max-width:180px;pointer-events:none;z-index:0;background-image:url('/demo/assets/art/menu/loading-scenery-v2.webp');background-repeat:no-repeat;background-size:auto 100%}
 #boot-screen:before{left:0;background-position:left center;mask-image:linear-gradient(90deg,#000 70%,transparent)}
 #boot-screen:after{right:0;background-position:right center;mask-image:linear-gradient(270deg,#000 70%,transparent)}
}

/* Keep the tips and motto readable over the illustrated floor and fire. */
.boot-content:before{content:"";position:absolute;inset:8px -32px -18px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,#100805da 30%,#100805ed 70%,#100805ad 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);border-radius:18px;box-shadow:0 10px 32px 14px #10080540}.boot-tip p{color:#fff1d9;text-shadow:0 2px 4px #000}.boot-status{color:#fff0ce}.boot-controls span{color:#ecd3a5}