.loading-screen { padding:0; gap:0; background:#14272d; overflow:hidden; }
.loading-screen[hidden] { display:none; }
.loading-screen__scene { position:relative; width:100%; max-width:600px; height:100%; isolation:isolate; }
.loading-screen__art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.loading-screen__controls { position:absolute; bottom:20%; left:6%; right:6%; padding:18px 10px; border-radius:10px; background:radial-gradient(ellipse,rgba(6,23,30,.82),rgba(6,23,30,.4) 65%,transparent); }
.loading-screen__progress { height:10px; padding:2px; border:1px solid #ceae66; border-radius:8px; background:rgba(12,27,30,.88); box-shadow:0 1px 8px #06171c; }
.loading-screen__progress span { display:block; width:100%; height:100%; border-radius:5px; background:linear-gradient(90deg,#a87b35,#f6d47b); transform:scaleX(0); transform-origin:left; transition:transform 450ms ease-out; }
.loading-screen p { margin:15px 0 0; color:#fff2cf; font-size:clamp(14px,3.8vw,20px); font-weight:500; line-height:1.7; text-shadow:0 2px 4px #081d25; }
.loading-screen button { margin-top:14px; min-height:42px; }
.loading-screen button[hidden] { display:none; }
@media (max-height:480px) { .loading-screen__controls { bottom:8%; } }
@media (prefers-reduced-motion:reduce) { .loading-screen__progress span { transition:none; } }