#loading { position:fixed; inset:0; overflow:auto; box-sizing:border-box; display:grid; place-items:center; padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); color:#eee4cc; background:#111719; font:14px/1.5 system-ui,sans-serif; isolation:isolate; }
.loading-art,.loading-art img { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
#loading::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(90deg,#080d13b8,#080d1333),linear-gradient(0deg,#080d13b8,transparent 70%); }
.loading-card { box-sizing:border-box; width:min(100%,400px); padding:28px; text-align:center; background:linear-gradient(145deg,#242a2beF,#101719f2); border:1px solid #a98b4e; border-radius:5px; box-shadow:0 16px 70px #0009,inset 0 0 0 3px #101719,inset 0 0 0 4px #78644266; }
.loading-emblem { width:88px; height:88px; filter:drop-shadow(0 4px 8px #0008); }
#loading h1 { margin:4px 0; font:600 clamp(28px,5vw,38px)/1.2 Georgia,serif; color:#edcf86; letter-spacing:.12em; text-shadow:0 2px 4px #000; }
.loading-kicker { margin:0 0 14px; font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:#c2b696; }
#version { font-size:11px; color:#a9a38f; min-height:1.5em; }
#status { margin:18px 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
#progress { width:100%; height:6px; overflow:hidden; background:#080d12; border:1px solid #76613c; border-radius:4px; }
#progress-fill { height:100%; width:0; background:linear-gradient(90deg,#9d783b,#f3d387); transition:width .15s; }
#progress-text { min-height:1.5em; margin-top:8px; color:#c2b696; font-size:12px; font-variant-numeric:tabular-nums; }
.loading-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
#loading button { min-height:44px; padding:10px 18px; border:1px solid #8f774b; border-radius:3px; background:linear-gradient(#464638,#282d2a); color:#f2e5c6; font:inherit; cursor:pointer; }
#loading button:hover { border-color:#f1d28b; background:#414b43; }
#loading button:focus-visible { outline:2px solid #f1d28b; outline-offset:4px; }
#loading [hidden] { display:none !important; }
#loading[data-state="error"] #status { color:#ffd2b7; }
@media (orientation:portrait) { #loading { align-items:end; } .loading-card { padding:22px; } .loading-emblem { width:64px; height:64px; } }
@media (max-height:480px) and (orientation:landscape) { #loading { padding-block:12px; justify-items:start; } .loading-card { width:min(100%,400px); padding:16px 24px; } .loading-emblem { float:left; width:64px; height:64px; margin:0 12px 0 0; } #loading h1 { font-size:26px; } .loading-kicker { margin-bottom:4px; } #status { margin:10px 0 8px; } .loading-actions { margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { #progress-fill { transition:none; } }