/* ============================================================
   Parcel Empire Phase 11.12 — reference-accurate loading screen
   This file is deliberately loaded last so the approved mobile
   composition cannot be changed by older phase styles.
   ============================================================ */

html,
body.pe116Loader{
  inline-size:100%!important;
  block-size:100%!important;
  min-block-size:100%!important;
  margin:0!important;
  overflow:hidden!important;
  background:#edf6fa!important;
}

body.pe116Loader{
  color:#0b3b54!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

body.pe116Loader #loader{
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  inline-size:100vw!important;
  max-inline-size:none!important;
  block-size:100dvh!important;
  min-block-size:100svh!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:0 0 max(8px,env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,#edf5fa 0%,#eef7fb 58%,#eef7fb 100%)!important;
  opacity:1;
  isolation:isolate;
}

body.pe116Loader #loader.isLeaving{
  opacity:0!important;
  filter:none!important;
  transition:opacity .34s ease!important;
}

/* The supplied artwork is the exact hero used by the approved reference.
   It is shown at its natural 1100:1204 ratio, edge-to-edge, without a card. */
body.pe116Loader .pe116LoadingHero{
  position:relative!important;
  flex:0 0 auto!important;
  display:block!important;
  inline-size:min(100vw,1100px)!important;
  block-size:auto!important;
  min-block-size:0!important;
  max-inline-size:none!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
}

body.pe116Loader .pe116LoadingHero::after{
  display:none!important;
  content:none!important;
}

body.pe116Loader #loader .loadingArtwork{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  inline-size:100%!important;
  block-size:auto!important;
  aspect-ratio:1100 / 1204!important;
  max-inline-size:none!important;
  max-block-size:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center top!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

body.pe116Loader .pe116LoadingMessage{
  position:relative!important;
  z-index:2!important;
  flex:0 0 auto!important;
  display:grid!important;
  inline-size:min(54vw,570px)!important;
  max-inline-size:calc(100vw - 30px)!important;
  gap:0!important;
  margin:clamp(4px,1.1vw,14px) auto 0!important;
  padding:0!important;
  color:#2b6063!important;
  font-size:clamp(12px,3.22vw,21px)!important;
  font-weight:500!important;
  line-height:1.2!important;
  text-align:left!important;
}

body.pe116Loader .pe116LoadingMessage p{
  display:flex!important;
  align-items:center!important;
  gap:clamp(9px,2.2vw,18px)!important;
  min-block-size:clamp(34px,8.7vw,60px)!important;
  margin:0!important;
  padding:clamp(1px,.4vw,4px) 0!important;
  border:0!important;
  border-bottom:1px solid rgba(31,128,145,.10)!important;
  background:transparent!important;
  white-space:nowrap!important;
}

body.pe116Loader .pe116LoadingMessage p:last-child{
  border-bottom-color:rgba(31,128,145,.07)!important;
}

body.pe116Loader .pe116MessageIcon{
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  inline-size:clamp(31px,8.1vw,56px)!important;
  block-size:clamp(31px,8.1vw,56px)!important;
  border:1px solid rgba(30,164,139,.10)!important;
  border-radius:50%!important;
  background:rgba(247,255,252,.96)!important;
  color:#1bb887!important;
  box-shadow:0 7px 19px rgba(31,132,116,.11)!important;
}

body.pe116Loader .pe116MessageIcon svg{
  inline-size:57%!important;
  block-size:57%!important;
  display:block!important;
  overflow:visible!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.5!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

body.pe116Loader .loadingUi{
  position:relative!important;
  inset:auto!important;
  z-index:3!important;
  flex:0 0 auto!important;
  display:grid!important;
  justify-items:center!important;
  inline-size:min(86.5vw,760px)!important;
  max-inline-size:calc(100vw - 26px)!important;
  margin:clamp(18px,5vw,48px) auto 0!important;
  padding:0!important;
  gap:0!important;
  transform:none!important;
  background:transparent!important;
  text-align:center!important;
  text-shadow:none!important;
}

body.pe116Loader .loadingStatus{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  inline-size:auto!important;
  min-block-size:1.16em!important;
  margin:0!important;
  color:#0f595f!important;
  font-size:clamp(20px,5.15vw,43px)!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}

body.pe116Loader .loadingStatus::before,
body.pe116Loader .loadingStatus::after{
  content:"✦"!important;
  position:absolute!important;
  top:50%!important;
  color:#75ddb1!important;
  font-size:.72em!important;
  font-weight:900!important;
  line-height:1!important;
  transform:translateY(-52%)!important;
  text-shadow:0 0 14px rgba(64,213,167,.22)!important;
}

body.pe116Loader .loadingStatus::before{right:calc(100% + clamp(10px,2.9vw,28px))!important}
body.pe116Loader .loadingStatus::after{left:calc(100% + clamp(10px,2.9vw,28px))!important}

body.pe116Loader .loadingBar{
  position:relative!important;
  display:block!important;
  inline-size:100%!important;
  block-size:clamp(61px,14.1vw,122px)!important;
  max-inline-size:none!important;
  margin:clamp(5px,1.25vw,14px) 0 0!important;
  padding:clamp(4px,.9vw,8px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:clamp(4px,.8vw,7px) solid rgba(255,255,255,.98)!important;
  border-radius:999px!important;
  background:#e7f1f1!important;
  box-shadow:
    0 0 0 clamp(1px,.22vw,2px) rgba(94,212,184,.34),
    0 13px 32px rgba(38,104,119,.16),
    inset 0 0 0 1px rgba(35,132,145,.08)!important;
}

body.pe116Loader .loadingFill{
  position:absolute!important;
  inset:clamp(4px,.9vw,8px) auto clamp(4px,.9vw,8px) clamp(4px,.9vw,8px)!important;
  inline-size:0%;
  block-size:auto!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#59df7e 0%,#20c99d 49%,#13bfd0 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.23),
    0 0 20px rgba(31,196,168,.17)!important;
  transition:inline-size .18s linear,width .18s linear!important;
}

body.pe116Loader .loadingFill::after{
  content:""!important;
  position:absolute!important;
  inset:0 -2px 0 auto!important;
  inline-size:clamp(20px,5vw,42px)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),rgba(255,255,255,.12))!important;
  filter:blur(1px)!important;
}

body.pe116Loader #loader .loadingPercent{
  position:absolute!important;
  z-index:5!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  inline-size:100%!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(29px,7.9vw,66px)!important;
  font-weight:1000!important;
  letter-spacing:-.045em!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
  -webkit-text-stroke:0!important;
  text-shadow:0 2px 3px rgba(9,91,111,.14)!important;
}

body.pe116Loader .loadingShine{
  position:absolute!important;
  z-index:4!important;
  top:-35%!important;
  bottom:-35%!important;
  left:-30%;
  inline-size:22%!important;
  opacity:.42!important;
  transform:skewX(-18deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)!important;
  animation:peReferenceLoaderShine 1.9s ease-in-out infinite!important;
}

body.pe116Loader #loader .loadingHint{
  position:relative!important;
  display:block!important;
  inline-size:100%!important;
  min-block-size:1.3em!important;
  margin:clamp(10px,2.6vw,26px) 0 0!important;
  color:#537378!important;
  font-size:clamp(11px,2.65vw,22px)!important;
  font-weight:500!important;
  letter-spacing:0!important;
  line-height:1.2!important;
  text-align:center!important;
  text-shadow:none!important;
  white-space:nowrap!important;
}

body.pe116Loader .loadingHint::before,
body.pe116Loader .loadingHint::after{
  content:"✦"!important;
  display:inline-block!important;
  margin:0 clamp(10px,2.5vw,24px)!important;
  color:#68d9ae!important;
  font-size:.82em!important;
  vertical-align:.08em!important;
}

@keyframes peReferenceLoaderShine{
  0%,24%{left:-30%}
  76%,100%{left:112%}
}

/* Extremely short portrait webviews scale the hero slightly so the helper
   line remains visible; normal iPhone portrait layouts stay full width. */
@media (orientation:portrait) and (max-height:620px){
  body.pe116Loader .pe116LoadingHero{inline-size:min(88vw,1100px)!important}
  body.pe116Loader .pe116LoadingMessage{margin-top:2px!important}
  body.pe116Loader .loadingUi{margin-top:10px!important}
  body.pe116Loader #loader .loadingHint{margin-top:8px!important}
}

@media (orientation:landscape) and (max-height:620px){
  body.pe116Loader #loader{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important;
    grid-template-rows:1fr auto!important;
    align-items:center!important;
    padding:0 max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
  }
  body.pe116Loader .pe116LoadingHero{grid-row:1 / 3;inline-size:min(61vw,700px)!important}
  body.pe116Loader .pe116LoadingMessage{grid-column:2;inline-size:min(34vw,430px)!important;margin:0!important}
  body.pe116Loader .loadingUi{grid-column:2;inline-size:min(36vw,470px)!important;margin:10px 0 0!important}
  body.pe116Loader .loadingStatus{font-size:clamp(18px,2.7vw,30px)!important}
  body.pe116Loader .loadingBar{block-size:clamp(50px,7vw,68px)!important;margin-top:10px!important}
  body.pe116Loader #loader .loadingHint{margin-top:9px!important}
}

@media (prefers-reduced-motion:reduce){
  body.pe116Loader .loadingShine{animation:none!important}
  body.pe116Loader #loader{transition:none!important}
}