/* ============================================================
   Parcel Empire — Phase 9.9
   Mobile header, stable GPS follow, closer buy board, purchase card
   and rarity scan/reveal sequence.
============================================================ */

:root{
  --pe99-safe-top:env(safe-area-inset-top,0px);
  --pe99-safe-bottom:env(safe-area-inset-bottom,0px);
  --pe99-header-h:144px;
}

body.pe99-confirm-open,
body.pe99-scan-open,
body.pe99-reveal-open{overflow:hidden!important}

/* ------------------------------------------------------------
   Clean two-row mobile header: identity/GPS then four stat cards.
------------------------------------------------------------ */
@media (max-width:1100px){
  :root{
    --pe96-map-top:calc(var(--pe99-header-h) + var(--pe99-safe-top));
    --pe96-map-bottom:calc(151px + var(--pe99-safe-bottom));
  }

  body[data-pe-page="map"] #map,
  body[data-pe-page="map"] .worldShade,
  body[data-pe-page="map"] .scanGlow,
  body[data-pe-page="buy"] #map,
  body[data-pe-page="buy"] .worldShade,
  body[data-pe-page="buy"] .scanGlow{
    top:calc(var(--pe99-header-h) + var(--pe99-safe-top))!important;
    bottom:calc(151px + var(--pe99-safe-bottom))!important;
    left:0!important;
    right:0!important;
  }

  .pe-v9-shell .gameTopbar{
    position:fixed!important;
    top:calc(7px + var(--pe99-safe-top))!important;
    left:9px!important;
    right:auto!important;
    width:58px!important;
    height:58px!important;
    z-index:80!important;
    overflow:visible!important;
  }
  .pe-v9-shell .gameTopbar .topChips{display:none!important}
  .pe-v9-shell .brandChip.pePlayerCard{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    padding:5px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:17px!important;
    box-sizing:border-box!important;
  }
  .pe-v9-shell .brandChip.pePlayerCard>img{
    width:46px!important;
    height:46px!important;
    padding:5px!important;
    box-sizing:border-box!important;
  }
  .pe-v9-shell .brandChip.pePlayerCard>span,
  .pe-v9-shell .brandChip.pePlayerCard .levelHud,
  .pe-v9-shell .levelHud{display:none!important}

  .pe-v9-shell .statsHud{
    position:fixed!important;
    top:calc(73px + var(--pe99-safe-top))!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    height:62px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    z-index:79!important;
    transform:none!important;
  }
  .pe-v9-shell .statsHud>.statCard:not(.peGpsStatCard){
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:62px!important;
    padding:7px 3px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .pe-v9-shell .statsHud>.statCard:not(.peGpsStatCard) span{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-size:6.8px!important;
    letter-spacing:.07em!important;
  }
  .pe-v9-shell .statsHud>.statCard:not(.peGpsStatCard) strong{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-size:clamp(12px,3.6vw,16px)!important;
    line-height:1!important;
  }
  .pe-v9-shell .statsHud>.peGpsStatCard{
    position:fixed!important;
    top:calc(7px + var(--pe99-safe-top))!important;
    right:9px!important;
    left:auto!important;
    bottom:auto!important;
    width:148px!important;
    height:58px!important;
    padding:7px 10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border-radius:17px!important;
    box-sizing:border-box!important;
    z-index:82!important;
  }
  .pe-v9-shell .statsHud>.peGpsStatCard span{font-size:7px!important;white-space:nowrap}
  .pe-v9-shell .statsHud>.peGpsStatCard strong{font-size:18px!important;line-height:1!important}

  .pe-v9-shell .mapboxgl-ctrl-top-right{
    top:calc(var(--pe99-header-h) + 10px + var(--pe99-safe-top))!important;
  }
  .pe-v9-shell .buyLandButton{
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    bottom:calc(84px + var(--pe99-safe-bottom))!important;
    height:64px!important;
  }
  .pe-v9-shell .gpsButton{
    bottom:calc(158px + var(--pe99-safe-bottom))!important;
  }
  .pe-v9-shell .bottomNav.peFiveNav{
    left:7px!important;
    right:7px!important;
    bottom:calc(6px + var(--pe99-safe-bottom))!important;
    height:72px!important;
  }
}

@media (max-width:390px){
  .pe-v9-shell .statsHud>.peGpsStatCard{width:136px!important}
  .pe-v9-shell .statsHud>.statCard:not(.peGpsStatCard) strong{font-size:12px!important}
}

/* Live GPS tracking pulse. */
.pe-v9-shell .gpsButton.gpsTracking{
  box-shadow:0 0 0 2px rgba(44,244,164,.3),0 0 24px rgba(44,244,164,.45)!important;
}
.pe-v9-shell .gpsButton.gpsTracking::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:2px solid rgba(44,244,164,.52);
  border-radius:50%;
  animation:pe99GpsPulse 1.7s ease-out infinite;
  pointer-events:none;
}
@keyframes pe99GpsPulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ------------------------------------------------------------
   Purchase confirmation — accessible, fixed above all navigation,
   styled as a strong game purchase card rather than a hidden sheet.
------------------------------------------------------------ */
.pePurchaseConfirm{
  z-index:1200!important;
  padding:calc(10px + var(--pe99-safe-top)) 10px calc(10px + var(--pe99-safe-bottom))!important;
  place-items:center!important;
  align-items:center!important;
  background:rgba(3,17,29,.94)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
body.pe99-confirm-open :is(.bottomNav,.buyLandButton,.gpsButton,.mapboxgl-control-container){
  visibility:hidden!important;
  pointer-events:none!important;
}
.pePurchaseCard{
  position:relative!important;
  width:min(480px,calc(100vw - 20px))!important;
  height:auto!important;
  max-height:calc(100dvh - 20px - var(--pe99-safe-top) - var(--pe99-safe-bottom))!important;
  padding:0 12px 14px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  border:4px solid #c69a3a!important;
  border-radius:26px!important;
  background:#f5ecd2!important;
  color:#21344a!important;
  box-shadow:0 28px 85px rgba(0,0,0,.72)!important;
}
.pePurchaseCard .peConfirmHeading{
  position:relative!important;
  display:block!important;
  margin:0 -12px 12px!important;
  padding:22px 58px 18px 18px!important;
  border-radius:21px 21px 0 0!important;
  background:linear-gradient(145deg,#0d78c8,#07569d)!important;
  border-bottom:4px solid #06477e!important;
  color:white!important;
}
.pePurchaseCard .peConfirmHeading h2{
  margin:0!important;
  color:white!important;
  text-align:center!important;
  text-transform:uppercase!important;
  font-size:clamp(26px,7vw,38px)!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  text-shadow:0 3px 0 rgba(0,0,0,.27)!important;
}
.pePurchaseCard .peConfirmHeading p{
  margin:9px auto 0!important;
  max-width:360px!important;
  color:#d7efff!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.4!important;
}
.pePurchaseCard .peConfirmHeading .eyebrow{display:none!important}
.pePurchaseCard .peConfirmBadges{
  justify-content:center!important;
  margin-top:12px!important;
}
.pePurchaseCard .peConfirmBadge{
  min-height:28px!important;
  background:rgba(0,34,61,.28)!important;
  border-color:rgba(255,255,255,.35)!important;
  color:white!important;
}
.pePurchaseConfirm .confirmClose{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:4!important;
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  border:0!important;
  background:rgba(255,255,255,.16)!important;
  color:white!important;
  font-size:30px!important;
}
.pePurchaseCard .peConfirmMain{
  display:block!important;
  margin-top:0!important;
}
.pePurchaseCard .peConfirmPreview{
  min-height:250px!important;
  padding:8px!important;
  border:0!important;
  border-radius:18px!important;
  background:#e9ddbd!important;
  box-shadow:inset 0 0 0 1px rgba(92,71,36,.16)!important;
  overflow:hidden!important;
}
.pePurchaseCard .peConfirmPreview::before,
.pePurchaseCard .peConfirmPreviewGrid,
.pePurchaseCard .peConfirmMystery{display:none!important}
.pe99CommonPreview{
  display:block!important;
  width:100%!important;
  height:224px!important;
  object-fit:contain!important;
  border-radius:14px!important;
  filter:drop-shadow(0 14px 13px rgba(54,38,16,.2));
}
.pePurchaseCard .peConfirmPreview small{
  position:static!important;
  display:block!important;
  margin:1px 8px 4px!important;
  color:#6d5a3e!important;
  font-size:10px!important;
  text-align:center!important;
}
.pe99EarnBlock{
  margin:12px 0!important;
  padding:13px 12px!important;
  border:3px solid #d69208!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#ffba21,#f09c0d)!important;
  color:#4d3614!important;
  text-align:center!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.24)!important;
}
.pe99EarnBlock>span{
  display:block!important;
  font-size:11px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  line-height:1.35!important;
}
.pe99EarnBlock>strong{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin-top:8px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:#fff7e6!important;
  color:#76552e!important;
  font-size:18px!important;
  white-space:nowrap!important;
}
.pePurchaseCard .peConfirmLocation{
  background:#fff9ea!important;
  border:1px solid rgba(99,73,37,.18)!important;
  color:#27384c!important;
}
.pePurchaseCard .peConfirmLocation span,
.pePurchaseCard .peConfirmStats span{color:#7f6e56!important}
.pePurchaseCard .peConfirmLocation strong,
.pePurchaseCard .peConfirmStats strong{color:#21344a!important}
.pePurchaseCard .peConfirmStats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:9px!important;
}
.pePurchaseCard .peConfirmStats>div{
  min-height:58px!important;
  padding:9px 10px!important;
  border:1px solid rgba(99,73,37,.16)!important;
  border-radius:13px!important;
  background:#fff9ea!important;
}
.pePurchaseCard .peConfirmLegal{
  margin:10px 4px 0!important;
  color:#766a58!important;
  text-align:center!important;
  font-size:9px!important;
}
.pePurchaseCard .peConfirmActions{
  position:sticky!important;
  bottom:-14px!important;
  z-index:5!important;
  display:grid!important;
  grid-template-columns:92px 1fr!important;
  gap:9px!important;
  margin:12px -2px -12px!important;
  padding:10px 2px calc(2px + var(--pe99-safe-bottom))!important;
  background:linear-gradient(180deg,rgba(245,236,210,0),#f5ecd2 24%)!important;
}
.pePurchaseCard .peConfirmActions button{
  min-height:58px!important;
  border-radius:13px!important;
  font-size:14px!important;
  font-weight:950!important;
}
.pePurchaseCard .peConfirmBuyButton{
  border:3px solid #235d1f!important;
  background:linear-gradient(180deg,#63d653,#39aa31)!important;
  color:white!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 #1c651d,0 12px 24px rgba(33,105,31,.24)!important;
  text-transform:uppercase!important;
}
.pePurchaseCard .peConfirmBuyButton:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 2px 0 #1c651d!important}
.pePurchaseCard .compactGhost{
  border:1px solid rgba(76,61,38,.22)!important;
  background:#e8dcc0!important;
  color:#604f37!important;
}

@media (max-width:480px){
  .pePurchaseCard{max-height:calc(100dvh - 14px - var(--pe99-safe-top) - var(--pe99-safe-bottom))!important;border-radius:23px!important}
  .pePurchaseCard .peConfirmPreview{min-height:222px!important}
  .pe99CommonPreview{height:198px!important}
  .pePurchaseCard .peConfirmHeading{padding-top:19px!important;padding-bottom:15px!important}
  .pePurchaseCard .peConfirmStats>div{min-height:54px!important}
}

/* ------------------------------------------------------------
   Rarity scanner — sits between payment and the final 3D reveal.
------------------------------------------------------------ */
.pe99RarityScan{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:22px;
  background:
    radial-gradient(circle at 50% 48%,rgba(32,225,255,.18),transparent 36%),
    linear-gradient(180deg,#071b31,#03101e 70%);
  overflow:hidden;
}
.pe99RarityScan[hidden]{display:none!important}
.pe99RarityScan::before{
  content:"";
  position:absolute;
  left:-15%;right:-15%;bottom:-18%;height:65%;
  background-image:linear-gradient(rgba(92,204,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(92,204,255,.22) 1px,transparent 1px);
  background-size:58px 58px;
  transform:perspective(560px) rotateX(64deg);
  transform-origin:50% 100%;
  opacity:.68;
}
.pe99ScanCard{
  position:relative;
  z-index:2;
  width:min(430px,92vw);
  text-align:center;
  color:white;
}
.pe99ScanTitle{
  display:block;
  color:#d8efff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.pe99ScanStatus{
  display:block;
  margin-top:10px;
  font-size:clamp(27px,8vw,45px);
  font-weight:950;
  line-height:1;
  text-shadow:0 0 25px rgba(58,221,255,.55);
}
.pe99ScanStage{
  position:relative;
  width:230px;
  height:230px;
  margin:28px auto 22px;
  display:grid;
  place-items:center;
}
.pe99ScanTile{
  width:132px;
  height:132px;
  border-radius:25px;
  background:linear-gradient(145deg,#41ef91,#0d9b55);
  border:3px solid #a5ffd0;
  box-shadow:0 0 0 9px rgba(62,243,157,.12),0 0 55px rgba(41,231,149,.75),0 24px 42px rgba(0,0,0,.48);
  transform:rotateX(58deg) rotateZ(-45deg) scale(.78);
  animation:pe99TileCharge 1.25s ease-in-out infinite alternate;
}
.pe99ScanQuestion{
  position:absolute;
  display:grid;
  place-items:center;
  width:70px;height:70px;
  border-radius:22px;
  background:rgba(3,24,39,.88);
  border:2px solid rgba(255,255,255,.65);
  color:white;
  font-size:42px;
  font-weight:950;
  box-shadow:0 0 30px rgba(51,224,255,.55);
  animation:pe99QuestionPulse .9s ease-in-out infinite alternate;
}
.pe99ScanRing{
  position:absolute;
  inset:4px;
  border:2px solid rgba(73,224,255,.55);
  border-radius:50%;
  animation:pe99Ring 1.4s linear infinite;
}
.pe99ScanRing.r2{inset:28px;animation-direction:reverse;animation-duration:1.05s}
.pe99ScanProgress{
  height:11px;
  overflow:hidden;
  border:1px solid rgba(104,219,255,.35);
  border-radius:999px;
  background:rgba(1,11,22,.76);
}
.pe99ScanProgress i{
  display:block;
  width:0;height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2bd9ff,#39f39d);
  box-shadow:0 0 18px #2bd9ff;
  animation:pe99Progress 1.75s cubic-bezier(.2,.7,.25,1) forwards;
}
.pe99RarityScan.is-found .pe99ScanStatus{color:var(--pe99-rarity,#45ef9a);text-shadow:0 0 30px var(--pe99-rarity,#45ef9a)}
.pe99RarityScan.is-found .pe99ScanTile{background:var(--pe99-rarity,#45ef9a);border-color:white;animation:pe99Found .45s ease both}
.pe99RarityScan.is-found .pe99ScanQuestion{font-size:0;background:var(--pe99-rarity,#45ef9a)}
.pe99RarityScan.is-found .pe99ScanQuestion::after{content:"✓";font-size:42px;color:white}
.pe99ScanSpark{position:absolute;width:8px;height:18px;border-radius:999px;background:#ffe66d;box-shadow:0 0 14px currentColor;animation:pe99Spark 1.6s ease-out infinite;animation-delay:var(--d);transform:rotate(var(--r)) translateY(-92px)}
@keyframes pe99TileCharge{to{transform:rotateX(58deg) rotateZ(-45deg) scale(1);filter:brightness(1.22)}}
@keyframes pe99QuestionPulse{to{transform:scale(1.12)}}
@keyframes pe99Ring{to{transform:rotate(360deg)}}
@keyframes pe99Progress{to{width:100%}}
@keyframes pe99Found{0%{transform:rotateX(58deg) rotateZ(-45deg) scale(.7)}60%{transform:rotateX(58deg) rotateZ(-45deg) scale(1.2)}100%{transform:rotateX(58deg) rotateZ(-45deg) scale(1)}}
@keyframes pe99Spark{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(-150px) scale(.25)}}

/* Buy-page final reveal must not remain trapped inside the hidden desktop rail. */
body[data-pe-page="buy"] #rarityReveal.pe99FullReveal{
  position:fixed!important;
  inset:0!important;
  z-index:1250!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  display:grid!important;
  place-items:center!important;
  padding:calc(12px + var(--pe99-safe-top)) 10px calc(12px + var(--pe99-safe-bottom))!important;
  background:radial-gradient(circle at 50% 36%,rgba(61,236,166,.18),transparent 37%),rgba(3,14,26,.95)!important;
  border-radius:0!important;
  overflow:auto!important;
}
body[data-pe-page="buy"] #rarityReveal.pe99FullReveal[hidden]{display:none!important}
body[data-pe-page="buy"] #rarityReveal.pe99FullReveal .revealCard{
  width:min(480px,100%)!important;
  max-height:calc(100dvh - 28px - var(--pe99-safe-top) - var(--pe99-safe-bottom))!important;
  overflow:auto!important;
  border-radius:25px!important;
}

@media (prefers-reduced-motion:reduce){
  .pe99ScanTile,.pe99ScanQuestion,.pe99ScanRing,.pe99ScanProgress i,.pe99ScanSpark,.gpsButton.gpsTracking::after{animation:none!important}
}