/* ============================================================
   Parcel Empire — Phase 9.9.2 usable loading screen
============================================================ */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#001342;overflow:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff}
button,input{font:inherit}
#loader{
  position:fixed;
  inset:0;
  min-height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:#001342;
  opacity:1;
  transition:opacity .42s ease,filter .42s ease;
}
#loader.isLeaving{opacity:0;filter:brightness(.7)}
.loadingArtwork{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  user-select:none;
  -webkit-user-drag:none;
  filter:saturate(1.04) contrast(1.02);
  animation:peArtworkFloat 8s ease-in-out infinite alternate;
}
.loadingShade{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,8,38,.03) 0%,rgba(0,8,38,0) 48%,rgba(0,21,85,.12) 66%,rgba(0,16,65,.88) 84%,#00113f 100%),
    radial-gradient(ellipse at 50% 78%,rgba(0,201,255,.18),transparent 38%);
  pointer-events:none;
}
.loadingStars{position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden}
.loadingStars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 12px #89e9ff;animation:peStar 2.4s ease-in-out infinite}
.loadingStars i:nth-child(1){left:12%;top:78%;animation-delay:.1s}
.loadingStars i:nth-child(2){left:84%;top:74%;animation-delay:.6s}
.loadingStars i:nth-child(3){left:23%;top:90%;animation-delay:1.1s}
.loadingStars i:nth-child(4){left:72%;top:88%;animation-delay:1.55s}
.loadingStars i:nth-child(5){left:50%;top:81%;animation-delay:2s}
.loadingUi{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:calc(5.2vh + var(--safe-bottom));
  width:min(760px,calc(100vw - 42px - var(--safe-left) - var(--safe-right)));
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:14px;
  text-align:center;
  text-shadow:0 3px 12px rgba(0,0,0,.7);
}
.loadingStatus{
  color:#fff;
  font-size:clamp(19px,4.4vw,34px);
  font-weight:950;
  letter-spacing:.055em;
  line-height:1;
}
.loadingBar{
  position:relative;
  width:100%;
  height:clamp(54px,7vw,72px);
  overflow:hidden;
  border:3px solid #9defff;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(0,14,52,.94),rgba(0,29,89,.94));
  box-shadow:
    0 0 0 2px rgba(0,96,255,.6),
    0 0 28px rgba(0,199,255,.58),
    inset 0 2px 12px rgba(0,0,0,.7);
}
.loadingFill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:inherit;
  background:
    repeating-linear-gradient(125deg,rgba(255,255,255,.16) 0 14px,transparent 14px 28px),
    linear-gradient(90deg,#008dff 0%,#00d9ff 70%,#79f4ff 100%);
  box-shadow:0 0 25px rgba(48,222,255,.9),inset 0 1px rgba(255,255,255,.65);
  transition:width .18s linear;
}
.loadingFill::after{
  content:"";
  position:absolute;
  top:0;right:-12px;bottom:0;width:34px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  filter:blur(3px);
}
.loadingPercent{
  position:absolute;
  z-index:3;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:clamp(24px,5vw,38px);
  font-weight:1000;
  letter-spacing:-.02em;
  -webkit-text-stroke:1px rgba(0,25,73,.55);
  text-shadow:0 3px 0 rgba(0,31,87,.75),0 0 14px rgba(0,204,255,.7);
  font-variant-numeric:tabular-nums;
}
.loadingShine{
  position:absolute;
  z-index:4;
  top:-40%;bottom:-40%;width:24%;left:-30%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:peShine 1.8s ease-in-out infinite;
}
.loadingHint{
  min-height:1.4em;
  color:rgba(226,246,255,.88);
  font-size:clamp(11px,2.6vw,16px);
  font-weight:750;
  letter-spacing:.025em;
}
.loadingNoScript{position:fixed;z-index:20;inset:auto 20px 20px;padding:14px;border-radius:14px;background:#7e1624;color:#fff;text-align:center}
@keyframes peArtworkFloat{from{transform:scale(1.01)}to{transform:scale(1.035)}}
@keyframes peShine{0%,24%{left:-30%}75%,100%{left:112%}}
@keyframes peStar{0%,100%{opacity:.25;transform:scale(.65)}50%{opacity:1;transform:scale(1.7)}}

/* Hide PWA prompts while the loading screen is visible. */
.pwaStatusPill,.installAppButton,.updateAppButton,.pwaToast{display:none!important}

@media (max-width:560px){
  .loadingArtwork{object-position:center top}
  .loadingUi{bottom:calc(4.4vh + var(--safe-bottom));width:calc(100vw - 30px - var(--safe-left) - var(--safe-right));gap:10px}
  .loadingBar{height:58px;border-width:2px}
  .loadingStatus{font-size:20px}
  .loadingHint{font-size:11px}
}
@media (max-height:720px){
  .loadingArtwork{object-position:center 18%}
  .loadingUi{bottom:calc(2.4vh + var(--safe-bottom));gap:8px}
  .loadingHint{display:none}
  .loadingBar{height:50px}
}
@media (orientation:landscape) and (max-height:620px){
  .loadingArtwork{object-position:center 39%}
  .loadingShade{background:linear-gradient(90deg,rgba(0,12,53,.08),rgba(0,12,53,.18) 52%,rgba(0,12,53,.93) 76%,#00113f)}
  .loadingUi{left:auto;right:calc(4vw + var(--safe-right));bottom:50%;width:min(430px,46vw);transform:translateY(50%)}
  .loadingStatus{font-size:20px}
  .loadingBar{height:52px}
}
@media (prefers-reduced-motion:reduce){
  .loadingArtwork,.loadingStars i,.loadingShine{animation:none!important}
  #loader{transition:none}
}