/* Pack Boys intro / loading screen */
#pbLoad{position:fixed;inset:0;z-index:2147483000;background:#07090b;color:#fff;overflow:hidden;
  font-family:"Oswald",system-ui,sans-serif;-webkit-user-select:none;user-select:none;
  transition:opacity .7s ease}
#pbLoad.pb-out{opacity:0;pointer-events:none}

/* painted sunset panel, cut on a diagonal */
#pbLoad .pb-art{position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,100% 82%,0 100%);
  background:
    radial-gradient(circle at 72% 28%,rgba(255,149,76,.95) 0,rgba(254,113,113,.8) 18%,rgba(245,73,158,0) 46%),
    linear-gradient(170deg,#1646BB 0%,#7447C5 30%,#953ABF 45%,#CB3EC7 62%,#F5499E 80%,#FE7171 100%)}
#pbLoad .pb-art::before{content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:multiply;
  background-image:radial-gradient(#000 1.1px,transparent 1.4px);background-size:7px 7px}
#pbLoad .pb-art::after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(5,6,10,.95),rgba(5,6,10,0));}

/* palm-ish skyline silhouette */
#pbLoad .pb-city{position:absolute;left:0;right:0;bottom:16%;height:22%;opacity:.85;
  background:
    linear-gradient(#0b0710,#0b0710) 4% 100%/7% 55% no-repeat,
    linear-gradient(#0b0710,#0b0710) 12% 100%/5% 80% no-repeat,
    linear-gradient(#0b0710,#0b0710) 18% 100%/9% 40% no-repeat,
    linear-gradient(#0b0710,#0b0710) 63% 100%/6% 70% no-repeat,
    linear-gradient(#0b0710,#0b0710) 70% 100%/4% 95% no-repeat,
    linear-gradient(#0b0710,#0b0710) 75% 100%/8% 50% no-repeat,
    linear-gradient(#0b0710,#0b0710) 85% 100%/6% 65% no-repeat,
    linear-gradient(#0b0710,#0b0710) 93% 100%/9% 35% no-repeat}

#pbLoad .pb-hero{position:absolute;right:4%;bottom:0;height:88%;max-width:80%;
  filter:drop-shadow(0 0 0 #000) drop-shadow(6px 0 0 rgba(0,0,0,.85)) drop-shadow(-3px 0 0 rgba(0,0,0,.85));
  transform-origin:60% 100%;animation:pbPan 15s ease-out forwards}
@keyframes pbPan{from{transform:scale(1.12) translateX(4%)}to{transform:scale(1) translateX(0)}}

#pbLoad .pb-title{position:absolute;left:5%;top:7%;line-height:.85;transform:rotate(-4deg);
  font-family:"Bangers","Oswald",sans-serif;letter-spacing:.02em}
#pbLoad .pb-title b{display:block;font-weight:400;font-size:clamp(56px,14vw,150px);color:#fff;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:5px 5px 0 #000}
#pbLoad .pb-title i{display:inline-block;margin-top:.35em;font-style:normal;font-size:clamp(16px,3.6vw,30px);
  letter-spacing:.3em;background:#000;padding:.15em .55em;color:#ffd166}

#pbLoad .pb-name{position:absolute;left:5%;bottom:9%;font-family:"Bangers","Oswald",sans-serif;
  font-size:clamp(28px,6vw,54px);letter-spacing:.04em;-webkit-text-stroke:2px #000;paint-order:stroke fill;
  text-shadow:3px 3px 0 #000;transform:rotate(-3deg)}

#pbLoad .pb-status{position:absolute;right:max(16px,4%);bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;font-size:clamp(13px,2.4vw,17px);letter-spacing:.04em;
  text-shadow:0 1px 3px #000;max-width:calc(100% - 32px)}
#pbLoad .pb-spin{flex:none;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:pbSpin .8s linear infinite}
@keyframes pbSpin{to{transform:rotate(360deg)}}

#pbLoad .pb-tip{position:absolute;left:5%;right:5%;top:42%;max-width:520px;font-size:clamp(14px,2.6vw,18px);
  background:rgba(0,0,0,.72);border-left:4px solid #ffd166;padding:10px 14px;opacity:0;transition:opacity .4s}
#pbLoad .pb-tip.on{opacity:1}

/* tap-to-enter gate */
#pbLoad .pb-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:22vh;gap:10px;background:rgba(0,0,0,.35);cursor:pointer;border:0;color:#fff;font:inherit;width:100%}
#pbLoad .pb-gate span{font-size:clamp(18px,4vw,26px);letter-spacing:.35em;text-transform:uppercase;
  background:#000;padding:.4em 1em;animation:pbBlink 1.4s ease-in-out infinite}
@keyframes pbBlink{50%{opacity:.45}}
#pbLoad.pb-run .pb-gate{display:none}
#pbLoad:not(.pb-run) .pb-status,#pbLoad:not(.pb-run) .pb-tip{display:none}

#pbLoad .pb-skip{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;background:rgba(0,0,0,.6);
  color:#fff;border:1px solid rgba(255,255,255,.4);font:500 13px "Oswald",sans-serif;letter-spacing:.12em;
  padding:8px 14px;min-height:40px;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  #pbLoad .pb-hero,#pbLoad .pb-spin,#pbLoad .pb-gate span{animation:none}
}

@media (max-width:700px){
  #pbLoad .pb-tip{top:auto;bottom:calc(9% + 64px);font-size:13px;padding:8px 12px}
  #pbLoad .pb-name{bottom:calc(9% + 4px)}
  #pbLoad .pb-status{bottom:max(14px,env(safe-area-inset-bottom))}
}