.load-progress{color:#e8e8d6;font:12px/1.4 system-ui}
.load-progress[hidden]{display:none!important}
.load-progress .load-caption{display:flex;justify-content:space-between;gap:14px;align-items:center}
.load-progress progress{display:block;width:100%;height:7px;margin-top:9px;accent-color:#dbc58e;border:0;border-radius:5px;overflow:hidden;background:#ffffff20}
.load-progress progress::-webkit-progress-bar{background:#ffffff20}.load-progress progress::-webkit-progress-value{background:#dbc58e}
.load-progress small{display:block;margin-top:7px;color:#b6c2aa;font-size:10px}
[data-loading=room]{margin:10px 0;padding:10px;border:1px solid #dbc58e45;border-radius:6px}
#loading .load-meter{width:min(340px,80vw)}#loading-text{letter-spacing:1px;max-width:none;text-align:left}
#loading [data-load-percent]{font-size:24px;font-variant-numeric:tabular-nums}
#loading [data-load-retry]{min-height:44px;padding:10px 24px}
.load-progress[data-failed=true] progress{accent-color:#dd947d}
@media(max-height:540px){[data-loading=room]{padding:6px;margin:6px 0}[data-loading=room] small{display:none}}


/* Keep game utilities in one right-aligned group, independent of radar layout. */
#hud .hud-actions{position:absolute;right:0;top:0;display:flex;gap:6px;align-items:center;z-index:6}
#hud .hud-actions .fullscreen-button,#hud .hud-actions #pause-button{position:static;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;border:1px solid #d8dec85c;background:#152018ad;border-radius:6px;color:#eee8d5;text-shadow:none;letter-spacing:0}
#hud .hud-actions .fullscreen-button{font:25px/1 system-ui}
#hud .hud-actions #pause-button{font:10px/1 system-ui;width:48px}
#hud .hud-top{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
/* Boot layout is owned here, without briefing, ad or game-text layers. */
#loading{box-sizing:border-box;align-items:stretch;justify-content:space-between;gap:24px;
 padding:max(clamp(20px,5vw,64px),env(safe-area-inset-top)) max(clamp(20px,5vw,64px),env(safe-area-inset-right)) max(clamp(24px,5vw,64px),env(safe-area-inset-bottom)) max(clamp(20px,5vw,64px),env(safe-area-inset-left));
 background-color:#252b25;background-image:linear-gradient(0deg,#07100ff2,transparent 55%),linear-gradient(180deg,#07100f80,transparent 45%),radial-gradient(95% 80% at 0 0,#07100fd0,#07100f70 30%,transparent 62%),var(--loading-art,url('/game/ui/rust-loading.webp'));background-position:center 45%;background-size:cover;background-repeat:no-repeat}
#loading .loading-title{display:grid;align-self:flex-start;flex:0 0 auto;text-shadow:0 2px 12px #000}
#loading .loading-title>span{font:12px/1.5 system-ui;letter-spacing:3px;color:#eadcb7}
#loading .loading-title>strong{font:bold clamp(42px,8vw,90px)/1.4 system-ui;letter-spacing:5px;color:#fff6dc}
#loading .loading-status{display:grid;gap:16px;width:min(400px,100%);align-self:flex-end;min-width:0}
#loading .load-meter{width:100%;min-width:0}
#loading [data-load-retry]{justify-self:end;min-height:44px}
#loading .load-caption{align-items:flex-end;text-align:left}
#loading [data-load-percent]{font-size:24px;flex:0 0 auto}
#loading-text{font-size:12px;letter-spacing:.5px;line-height:1.4;text-align:left;overflow-wrap:anywhere}
/* The bottom row: one line of trivia on the left (ui/loading-trivia.js, docs/LOADING-TRIVIA.md), progress on the right. */
#loading .loading-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,64px);min-width:0}
#loading .loading-foot>.loading-status{flex:0 1 400px;width:auto;margin-left:auto}
#loading .loading-trivia{flex:0 1 560px;min-width:0;display:grid;gap:7px;padding:2px 0 3px 14px;border-left:2px solid #dbc58e;text-shadow:0 1px 10px #000,0 0 2px #000;transition:opacity .32s ease,transform .32s ease}
#loading .loading-trivia[hidden],#loading[data-failed=true] .loading-trivia{display:none}
#loading .loading-trivia[data-fade=out]{opacity:0;transform:translateY(5px)}
#loading .loading-trivia-kind{font:600 11px/1.3 system-ui;letter-spacing:2.6px;color:#dbc58e}
#loading .loading-trivia-line{font:500 clamp(14px,1.25vw,18px)/1.45 system-ui;color:#f4eedb;overflow-wrap:break-word;text-wrap:pretty}
@media(prefers-reduced-motion:reduce){#loading .loading-trivia{transition:none;transform:none}}
@media(max-width:620px),(orientation:portrait) and (max-width:900px){#loading .loading-foot{flex-direction:column;align-items:stretch;gap:18px}#loading .loading-foot>.loading-status{flex:0 0 auto;width:100%;margin-left:0}#loading .loading-trivia{flex:0 0 auto}}
@media(orientation:portrait){#loading{background-position:42% center}}
@media(max-height:400px){#loading{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));gap:16px}#loading .loading-title>strong{font-size:42px}#loading .loading-trivia{gap:4px}#loading .loading-trivia-line{font-size:13px}#loading .loading-foot{gap:14px}}
/* Too short for a line and the progress together: the progress stays. */
@media(max-height:300px){#loading .loading-trivia{display:none}}