/* Ekran wczytywania (js/hud/load-screen.js): kadr mapy świata z powolnym najazdem, nazwa misji, boss, pasek i porada.
   Animowane są tylko transform i opacity — działają także, gdy przeglądarka buduje świat. */
.load-screen {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #070b08; opacity: 0;
  transition: opacity .45s ease-out;
}
.load-screen.on { opacity: 1; }
.load-screen.out { opacity: 0; transform: scale(1.04); transition: opacity .7s ease-in, transform .7s ease-in; pointer-events: none; }
.ld-bg { position: absolute; inset: 0; }
.ld-bg img { position: absolute; max-width: none; filter: saturate(1.05) brightness(.82); animation: ld-zoom 9s ease-out forwards; }
.ld-bg img.ld-full { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; transform-origin: 70% 50%; }
@keyframes ld-zoom { from { transform: scale(1.0); } to { transform: scale(1.18); } }
.ld-pin {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid #ffe39a; border-radius: 50%;
  box-shadow: 0 0 18px #f5c85a, inset 0 0 12px #f5c85a88; animation: ld-pin 1.6s ease-out infinite;
}
@keyframes ld-pin { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.ld-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 30%, #050806cc 85%), linear-gradient(transparent 55%, #050806f0); }
.ld-info { position: absolute; left: 0; right: 0; bottom: 9vh; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; text-align: center; }
.ld-kicker { margin: 0; color: #d9ae5a; font: 700 14px Georgia, serif; letter-spacing: 3px; text-transform: uppercase; }
.ld-title { margin: 0; color: #fff4d6; font: 800 clamp(28px, 4vw, 48px)/1.1 Georgia, serif; text-shadow: 0 3px 0 #120a06, 0 0 24px #f5c85a44; }
.ld-boss { margin: 2px 0 6px; color: #ff9a7a; font: 700 17px Georgia, serif; text-shadow: 0 2px 2px #000; }
.ld-bar { position: relative; width: min(420px, 80vw); height: 6px; margin: 10px 0 4px; overflow: hidden; border: 1px solid #6b4a26; border-radius: 4px; background: #0c0f14; }
.ld-bar i { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #f5c85a, #fff1c0, #f5c85a, transparent); animation: ld-bar 1.3s ease-in-out infinite; }
@keyframes ld-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.ld-tip { max-width: 560px; margin: 4px 0 0; color: #c9b995; font: italic 15px Georgia, serif; }
@media (prefers-reduced-motion: reduce) { .ld-bg img, .ld-pin { animation: none; } }