.loading-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#080f0c;color:#c7d3bb;transition:opacity .25s;overflow:hidden}
.loading-content{position:relative;width:min(100vw,140.5dvh,1120px);aspect-ratio:1.405;text-align:center;background:url('loading-ruins.png') center 20%/100% 94% no-repeat}
.loading-title{position:absolute;top:10%;left:0;width:100%;font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,5.6vw,62px);font-weight:700;letter-spacing:.09em;line-height:1.1}
.loading-ornament{position:absolute;top:21%;left:33%;width:34%;height:2px;background:linear-gradient(90deg,transparent,#858755 43%,transparent 43%,transparent 57%,#858755 57%,transparent)}
.loading-ornament:before{content:"";position:absolute;left:42.5%;top:-1px;width:15%;height:3px;border-left:3px solid #9b9e69;border-right:3px solid #9b9e69}
.loading-ornament:after,.loading-credit:before{content:'';position:absolute;left:50%;top:-9px;width:16px;height:16px;border:2px solid #858755;transform:translateX(-50%) rotate(45deg)}
.loading-content canvas{position:absolute;left:50%;top:34%;width:20%;height:auto;aspect-ratio:1;transform:translateX(-50%)}
.loading-track{position:absolute;left:24%;top:66%;width:52%;height:18px;padding:4px;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 18' preserveAspectRatio='none'%3E%3Cpath d='M1 1H519L516 9L519 17H1L4 9Z' fill='%2309120f' stroke='%23777d50' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:0 0 12px #0008}
.loading-track:before,.loading-track:after{content:'';position:absolute;top:50%;width:8px;height:8px;border:2px solid #a5a76c;transform:translateY(-50%) rotate(45deg);background:#101b13}
.loading-track:before{left:-8px}.loading-track:after{right:-8px}
.loading-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#879264,#c0c697);box-shadow:0 0 8px #b8be8566}
.loading-percent{position:absolute;top:70%;left:0;width:100%;font:700 clamp(20px,3vw,30px)/1.2 Georgia,serif;color:#e2d5a7}
.loading-content #message{position:absolute;top:77%;left:8%;width:84%;margin:0;color:#a5b2a7;font-family:"Segoe UI",system-ui,sans-serif;font-size:clamp(11px,1.6vw,16px);line-height:1.5;overflow-wrap:anywhere}
.loading-credit{position:absolute;top:92%;left:0;width:100%;font-size:12px;color:#899b8c}
.loading-credit:before{top:-22px;width:10px;height:10px;border-width:2px}
.loading-content #retry{position:absolute;top:83%;left:50%;transform:translateX(-50%);margin:0}
.loading-content #recovery{position:absolute;top:89%;left:5%;width:90%;background:#09120f}
.loading-content:has(#retry:not([hidden])) .loading-credit{display:none}
.loading-finished{opacity:0;pointer-events:none}
@media(max-width:600px) and (orientation:portrait){
.loading-content{width:100%;height:min(90dvh,740px);aspect-ratio:auto;background-size:auto 88%;background-position:center 35%}
.loading-title{top:12%;font-size:clamp(24px,8vw,44px);letter-spacing:.1em}
.loading-ornament{top:22%;left:24%;width:52%}
.loading-content canvas{top:38%;width:38%;max-width:190px}
.loading-track{top:66%;left:10%;width:80%;height:16px}
.loading-percent{top:71%;font-size:26px}
.loading-content #message{top:78%;font-size:12px}}
@media(max-height:480px) and (orientation:landscape){.loading-title{font-size:30px}.loading-track{height:12px;padding:2px}.loading-percent{font-size:19px}.loading-credit{font-size:10px}.loading-content #message{font-size:10px}}
@media(prefers-reduced-motion:reduce){.loading-screen{transition:none}}