/* ============================================================
   Parcel Empire — Phase 10.7
   Final interface polish, dynamic mobile viewport and QA hardening
   ============================================================ */
:root{
  --pe107-vh:100dvh;
  --pe107-vw:100vw;
  --pe107-safe-top:env(safe-area-inset-top,0px);
  --pe107-safe-right:env(safe-area-inset-right,0px);
  --pe107-safe-bottom:env(safe-area-inset-bottom,0px);
  --pe107-safe-left:env(safe-area-inset-left,0px);
  --pe107-tap:scale(.975);
}

html{
  min-height:100%;
  background:#020918;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body.pe-v10-final{
  min-width:280px;
  min-height:var(--pe107-vh);
  max-width:100%;
  overflow-x:clip!important;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
@supports not (overflow:clip){body.pe-v10-final{overflow-x:hidden!important}}
body.pe-v10-final *{box-sizing:border-box}
body.pe-v10-final :is(button,a,[role="button"],input,select,textarea){min-width:0}
body.pe-v10-final :is(button,a,[role="button"]){-webkit-user-select:none;user-select:none}
body.pe-v10-final :is(button,a,[role="button"]):focus-visible{
  outline:3px solid #ffe063!important;
  outline-offset:3px!important;
}
body.pe-v10-final button:disabled{cursor:not-allowed!important}
body.pe-v10-final .pe107Pressed{transform:var(--pe107-tap)!important;filter:brightness(1.08)}

/* Route hand-off overlay removes the white flash between real pages. */
.pe107RouteLoader{
  position:fixed;
  inset:0;
  z-index:4000;
  display:grid;
  place-items:center;
  padding:calc(20px + var(--pe107-safe-top)) calc(20px + var(--pe107-safe-right)) calc(20px + var(--pe107-safe-bottom)) calc(20px + var(--pe107-safe-left));
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(49,216,255,.23),transparent 31%),
    linear-gradient(180deg,#071f55,#020918 76%);
  transition:opacity .18s ease,visibility .18s step-end;
}
.pe107RouteLoader.is-active{visibility:visible;opacity:1;transition:opacity .16s ease}
.pe107RouteLoaderCard{display:grid;place-items:center;gap:13px;text-align:center}
.pe107RouteLoaderLogo{
  width:76px;height:76px;padding:8px;border:2px solid rgba(255,216,71,.82);border-radius:24px;
  background:radial-gradient(circle,#0d6bd4,#020d2c 74%);
  box-shadow:0 0 0 5px rgba(50,208,255,.10),0 0 36px rgba(49,216,255,.34);
}
.pe107RouteLoaderLogo img{display:block;width:100%;height:100%;object-fit:contain}
.pe107RouteLoaderCard strong{font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.pe107RouteDots{display:flex;gap:7px}
.pe107RouteDots i{width:8px;height:8px;border-radius:50%;background:#31d8ff;box-shadow:0 0 12px #31d8ff;animation:pe107Dot .8s ease-in-out infinite alternate}
.pe107RouteDots i:nth-child(2){animation-delay:.14s}.pe107RouteDots i:nth-child(3){animation-delay:.28s}
@keyframes pe107Dot{to{transform:translateY(-7px);background:#ffd43c;box-shadow:0 0 14px #ffd43c}}

/* Keep all persistent chrome stable while Safari changes its toolbars. */
body.pe-v10-final :is(.gameTopbar,.statsHud,.bottomNav,.buyLandButton,.gpsButton,.pe10MapHud){
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
body.pe-v10-final .gameTopbar,
body.pe-v10-final .statsHud,
body.pe-v10-final .bottomNav{max-width:calc(var(--pe107-vw) - var(--pe107-safe-left) - var(--pe107-safe-right))}

/* Final navigation polish: equal targets, contained labels and a clear active state. */
body.pe-v10-final .bottomNav.peFiveNav{isolation:isolate;overflow:hidden!important}
body.pe-v10-final .bottomNav.peFiveNav button{
  min-width:0!important;
  min-height:54px!important;
  overflow:hidden!important;
  border-radius:16px!important;
  transition:transform .14s ease,background .18s ease,border-color .18s ease,filter .18s ease!important;
}
body.pe-v10-final .bottomNav.peFiveNav button .peNavIcon{line-height:1!important}
body.pe-v10-final .bottomNav.peFiveNav button>span:last-child{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.pe-v10-final .bottomNav.peFiveNav button.active::after{
  content:"";position:absolute;left:25%;right:25%;bottom:4px;height:3px;border-radius:99px;
  background:#ffd43c;box-shadow:0 0 11px rgba(255,212,60,.9);
}

/* Game pages use the real dynamic viewport instead of a stale 100vh. */
body.pe-v10-final[data-pe-page="map"],
body.pe-v10-final[data-pe-page="buy"]{height:var(--pe107-vh)!important;min-height:var(--pe107-vh)!important;overflow:hidden!important}
body.pe-v10-final[data-pe-page="map"] :is(#map,.worldShade,.scanGlow),
body.pe-v10-final[data-pe-page="buy"] :is(#map,.worldShade,.scanGlow){max-height:var(--pe107-vh)!important}
body.pe-v10-final[data-pe-page] .pe10RoutePanel{
  scrollbar-width:thin;
  scrollbar-color:rgba(49,216,255,.42) transparent;
}
body.pe-v10-final[data-pe-page] .pe10RoutePanel::-webkit-scrollbar{width:5px}
body.pe-v10-final[data-pe-page] .pe10RoutePanel::-webkit-scrollbar-thumb{background:rgba(49,216,255,.38);border-radius:999px}

/* Buttons and cards share one final tactile language. */
body.pe-v10-final :is(.primaryAction,.ghostAction,.peOpenPortfolio,.compactAction,.compactGhost){
  min-height:48px!important;
  touch-action:manipulation;
}
@media (hover:hover) and (pointer:fine){
  body.pe-v10-final :is(.primaryAction,.ghostAction,.bottomNav button,.moreGrid>*):hover{filter:brightness(1.09)}
}

/* Modals stay inside every iPhone safe area and always sit over the nav. */
body.pe-v10-final :is(.pePurchaseConfirm,.tutorialOverlay,.rarityReveal,.pe99RarityScan,.milestonePopup){
  max-width:var(--pe107-vw)!important;
}
body.pe-v10-final .pePurchaseConfirm{padding-left:max(8px,var(--pe107-safe-left))!important;padding-right:max(8px,var(--pe107-safe-right))!important}
body.pe-v10-final .pePurchaseCard{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.pe-v10-final .toast{
  max-width:min(520px,calc(var(--pe107-vw) - 24px - var(--pe107-safe-left) - var(--pe107-safe-right)))!important;
  overflow-wrap:anywhere;
}

/* Clear online/offline state without adding another floating box. */
body.pe-v10-final.pe107Offline .onlineStatus{color:#fff!important;background:linear-gradient(180deg,#d83d59,#8b1433)!important;border-color:#ff8798!important}
body.pe-v10-final.pe107Online .onlineStatus{color:#eafff5!important}

@media (max-width:1100px){
  body.pe-v10-final .gameTopbar{left:calc(8px + var(--pe107-safe-left))!important}
  body.pe-v10-final .statsHud{left:calc(7px + var(--pe107-safe-left))!important;right:calc(7px + var(--pe107-safe-right))!important;width:auto!important}
  body.pe-v10-final .statsHud>.statCard{min-width:0!important;overflow:hidden!important}
  body.pe-v10-final .statsHud>.statCard strong{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.pe-v10-final .statsHud>.peGpsStatCard{right:calc(8px + var(--pe107-safe-right))!important}
  body.pe-v10-final .bottomNav.peFiveNav{
    left:calc(7px + var(--pe107-safe-left))!important;
    right:calc(7px + var(--pe107-safe-right))!important;
    width:auto!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  body.pe-v10-final .buyLandButton{max-width:calc(var(--pe107-vw) - 24px - var(--pe107-safe-left) - var(--pe107-safe-right))!important}
  body.pe-v10-final .pe10MapHud{left:calc(8px + var(--pe107-safe-left))!important;right:calc(8px + var(--pe107-safe-right))!important;max-width:none!important}
}

/* Narrow phones: retain the complete logo and readable stats without overlap. */
@media (max-width:390px){
  body.pe-v10-final .brandChip.pePlayerCard{grid-template-columns:48px minmax(0,1fr)!important;gap:1px 7px!important}
  body.pe-v10-final .brandChip.pePlayerCard>img{width:46px!important;height:46px!important;min-width:46px!important}
  body.pe-v10-final .brandChip.pePlayerCard>span{font-size:14px!important}
  body.pe-v10-final .pe10BrandTagline{font-size:6.5px!important;letter-spacing:.07em!important}
  body.pe-v10-final .statsHud>.statCard{padding-inline:3px!important}
  body.pe-v10-final .statsHud>.statCard .pe10StatIcon{width:22px!important;height:22px!important;font-size:12px!important}
  body.pe-v10-final .statsHud>.statCard span:not(.pe10StatIcon){font-size:6px!important;letter-spacing:.04em!important}
  body.pe-v10-final .statsHud>.statCard strong{font-size:12px!important}
  body.pe-v10-final .bottomNav.peFiveNav button{padding-inline:2px!important}
  body.pe-v10-final .bottomNav.peFiveNav button>span:last-child{font-size:8px!important}
}

@media (max-width:330px){
  body.pe-v10-final .brandChip.pePlayerCard>span{font-size:12px!important}
  body.pe-v10-final .statsHud>.statCard .pe10StatIcon{display:none!important}
  body.pe-v10-final .statsHud>.statCard strong{font-size:11px!important}
}

/* Landscape phone layout: compact chrome leaves the map usable. */
@media (max-width:950px) and (max-height:520px) and (orientation:landscape){
  :root{--pe99-header-h:82px!important;--pe96-map-top:calc(82px + var(--pe107-safe-top))!important;--pe96-map-bottom:calc(88px + var(--pe107-safe-bottom))!important}
  body.pe-v10-final .gameTopbar{top:calc(4px + var(--pe107-safe-top))!important;height:72px!important}
  body.pe-v10-final .brandChip.pePlayerCard{height:72px!important;grid-template-columns:52px minmax(0,1fr)!important;grid-template-rows:auto auto!important;grid-template-areas:"logo title" "logo level"!important}
  body.pe-v10-final .brandChip.pePlayerCard>img{width:50px!important;height:50px!important;min-width:50px!important}
  body.pe-v10-final .pe10BrandTagline{display:none!important}
  body.pe-v10-final .statsHud{top:calc(5px + var(--pe107-safe-top))!important;left:230px!important;right:calc(180px + var(--pe107-safe-right))!important;height:70px!important}
  body.pe-v10-final .statsHud>.statCard{height:68px!important}
  body.pe-v10-final .statsHud>.peGpsStatCard{top:calc(5px + var(--pe107-safe-top))!important;right:calc(7px + var(--pe107-safe-right))!important;width:165px!important;height:70px!important}
  body.pe-v10-final .pe10MapHud{display:none!important}
  body.pe-v10-final .buyLandButton{bottom:calc(7px + var(--pe107-safe-bottom))!important;left:50%!important;width:min(300px,38vw)!important;height:66px!important;z-index:520!important}
  body.pe-v10-final .bottomNav.peFiveNav{height:70px!important;max-width:330px!important;left:calc(7px + var(--pe107-safe-left))!important;right:auto!important}
  body.pe-v10-final .gpsButton{bottom:calc(8px + var(--pe107-safe-bottom))!important;right:calc(8px + var(--pe107-safe-right))!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}