/* The loading bar of ALL loading screens (first-start splash #splash, character-select -> world #loading, map teleport #travel): the Maharlika client's own bar
   (public/ui/loading/lb_frame.webp = interface/loadbar_bg, lb_fill = loadbar, lb_glow = loadbar_light; tools/build_loadbar.py), pinned to the VERY BOTTOM of the screen.
   Only the bar + percent live here; the big picture is separate (docs/loading_screens.md). Native frame 552x156 (stone frame 552x80 + hanging chains), groove x58 y29 430x18.
   --u = one native pixel at the drawn size. Markup: .luiLoadBar > .bar > .trk > (i fill, .lbPct) , then .pct (status line) and .tip (hint) stacked ABOVE the bar. */
.luiLoadBar { --u:calc(min(60vw,480px,110vh)/552); position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; flex-direction:column-reverse; align-items:center; box-sizing:border-box;
  padding:0 max(14px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 4px) max(14px,env(safe-area-inset-left,0px)); pointer-events:none; text-align:center; }
@media (orientation:portrait) { .luiLoadBar { --u:calc(min(92vw,480px)/552); } }
.luiLoadBar::before { content:""; position:absolute; left:0; right:0; bottom:0; top:-46px; z-index:-1; background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.5) 62%,transparent); pointer-events:none; } /* keeps the text readable on any picture */
.luiLoadBar .bar { position:relative; flex:none; width:calc(552*var(--u)); height:calc(156*var(--u)); margin:0 0 calc(-76*var(--u)); border:0; border-radius:0; overflow:visible; box-shadow:none; /* the chains hang below the frame, over the home-indicator strip / off the screen */
  background:url(/ui/loading/lb_frame.webp) 0 0 / 100% 100% no-repeat; filter:drop-shadow(0 0 6px rgba(0,0,0,.7)); }
.luiLoadBar .trk { position:absolute; left:calc(58*var(--u)); top:calc(29*var(--u)); width:calc(430*var(--u)); height:calc(18*var(--u)); }
.luiLoadBar .bar i { display:block; position:relative; top:0; bottom:auto; left:0; height:100%; width:0%; background:url(/ui/loading/lb_fill.webp) 0 0 / calc(430*var(--u)) 100% no-repeat; transition:width .25s ease-out; }
.luiLoadBar .bar i::after { content:""; position:absolute; right:calc(-46.5*var(--u)); top:calc(-15*var(--u)); width:calc(64*var(--u)); height:calc(64*var(--u)); background:url(/ui/loading/lb_glow.webp) 0 0 / 100% 100% no-repeat; pointer-events:none; animation:lbGlow 1.4s ease-in-out infinite; } /* the glow at the tip breathes: a small sign that it is alive */
@keyframes lbGlow { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.luiLoadBar .lbPct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 max(9px,calc(14*var(--u))) / 1 var(--serif,Georgia,serif); letter-spacing:.08em; color:#fff3d6; text-shadow:0 1px 2px #000,0 0 5px #000; font-variant-numeric:tabular-nums; }
.luiLoadBar .pct { flex:none; margin:0 0 calc(2*var(--u)); font:600 max(10px,calc(15*var(--u))) / 1.2 var(--serif,Georgia,serif); letter-spacing:.12em; color:#f6e8c2; text-shadow:0 1px 3px #000,0 0 8px #000; }
.luiLoadBar .pct:empty { display:none; }
.luiLoadBar .tip { flex:none; text-transform:none; letter-spacing:0; max-width:min(88vw,560px); margin:0 0 3px; font:500 max(10px,calc(15*var(--u))) / 1.3 system-ui,sans-serif; color:#e9e1cb; text-shadow:0 1px 3px #000,0 0 8px #000; }
.luiLoadBar .tip:empty { display:none; }
@media (prefers-reduced-motion:reduce) { .luiLoadBar .bar i::after { animation:none; } }
#loading, #travel { overflow:hidden; }
/* portrait phones: the game itself asks to turn the phone (#rotateMsg, z 90), but a loading screen is shown above it so the bar is always visible */
@media (orientation:portrait) and (pointer:coarse) { #loading.on { z-index:95; } #travel.on { z-index:96; } }