/* ============================================================
   Parcel Empire — Phase 9.8
   Full-page navigation, overlap-free mobile header, 9x9 map board.
============================================================ */

html,body{max-width:100%;overflow-x:hidden!important}
body.pe-v9-shell{width:100%;max-width:100vw}

/* Dedicated route pages use the existing real game panels as full pages,
   rather than floating sheets over the map. */
body[data-pe-page="daily"],
body[data-pe-page="myland"],
body[data-pe-page="profile"]{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 0,rgba(30,221,197,.10),transparent 38%),
    linear-gradient(180deg,#071827,#04111d 72%);
}
body[data-pe-page="daily"] :is(#map,.worldShade,.scanGlow,.fxLayer,.gameTopbar,.statsHud,.peLeftRail,.peRightRail,.atlasStatusStrip,.buyLandButton,.gpsButton,.installButton,.updateButton,.onlineStatus,.mapboxgl-control-container,.parcelCard),
body[data-pe-page="myland"] :is(#map,.worldShade,.scanGlow,.fxLayer,.gameTopbar,.statsHud,.peLeftRail,.peRightRail,.atlasStatusStrip,.buyLandButton,.gpsButton,.installButton,.updateButton,.onlineStatus,.mapboxgl-control-container,.parcelCard),
body[data-pe-page="profile"] :is(#map,.worldShade,.scanGlow,.fxLayer,.gameTopbar,.statsHud,.peLeftRail,.peRightRail,.atlasStatusStrip,.buyLandButton,.gpsButton,.installButton,.updateButton,.onlineStatus,.mapboxgl-control-container,.parcelCard){display:none!important}

body[data-pe-page="daily"] .sheetPanel,
body[data-pe-page="myland"] .sheetPanel,
body[data-pe-page="profile"] .sheetPanel{display:none!important}

body[data-pe-page="daily"] #dailyPanel,
body[data-pe-page="myland"] #myLandPanel,
body[data-pe-page="profile"] #morePanel{
  display:block!important;
  position:fixed!important;
  z-index:70!important;
  inset:env(safe-area-inset-top,0px) 0 calc(82px + env(safe-area-inset-bottom,0px)) 0!important;
  width:100vw!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:18px clamp(14px,4vw,42px) 32px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(7,24,38,.99),rgba(4,17,29,.99))!important;
  box-shadow:none!important;
  transform:none!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body[data-pe-page="daily"] #dailyPanel>.sheetHeader,
body[data-pe-page="myland"] #myLandPanel>.sheetHeader,
body[data-pe-page="profile"] #morePanel>.sheetHeader{
  position:sticky!important;
  top:-18px!important;
  z-index:10!important;
  margin:-18px calc(clamp(14px,4vw,42px) * -1) 18px!important;
  padding:calc(15px + env(safe-area-inset-top,0px)) clamp(14px,4vw,42px) 14px!important;
  min-height:76px;
  display:flex!important;
  align-items:center!important;
  background:linear-gradient(180deg,#081d2e 80%,rgba(8,29,46,.96))!important;
  border-bottom:1px solid rgba(75,217,235,.14)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
body[data-pe-page="daily"] .sheetHeader h2,
body[data-pe-page="myland"] .sheetHeader h2,
body[data-pe-page="profile"] .sheetHeader h2{font-size:clamp(24px,6vw,34px)!important;margin:2px 0 0!important}
body[data-pe-page="daily"] .closeSheet,
body[data-pe-page="myland"] .closeSheet,
body[data-pe-page="profile"] .closeSheet{
  width:46px!important;height:46px!important;min-width:46px!important;
  font-size:0!important;border-radius:15px!important;
}
body[data-pe-page="daily"] .closeSheet::before,
body[data-pe-page="myland"] .closeSheet::before,
body[data-pe-page="profile"] .closeSheet::before{content:"←";font-size:25px;line-height:1}
body[data-pe-page="profile"] #morePanel .sheetHeader h2{font-size:0!important}
body[data-pe-page="profile"] #morePanel .sheetHeader h2::after{content:"Profile & More";font-size:clamp(24px,6vw,34px)}
body[data-pe-page="profile"] #morePanel .eyebrow{font-size:0!important}
body[data-pe-page="profile"] #morePanel .eyebrow::after{content:"Parcel Empire account";font-size:10px}

/* Full-page panels must never inherit old mobile sheet handles/transforms. */
body[data-pe-page="daily"] .pe96SheetHandle,
body[data-pe-page="myland"] .pe96SheetHandle,
body[data-pe-page="profile"] .pe96SheetHandle{display:none!important}

/* Navigation remains fixed and is shared by all routes. */
body[data-pe-page] .bottomNav.peFiveNav{z-index:180!important}
body[data-pe-page] .bottomNav button{touch-action:manipulation}

/* Buy is its own map page. Remove the instructional popup but keep buy mode active. */
body[data-pe-page="buy"] .buyModeOverlay{display:none!important}
body[data-pe-page="buy"] .peRightRail{display:none!important}
@media (min-width:1101px){
  body[data-pe-page="buy"] #map,
  body[data-pe-page="buy"] .worldShade,
  body[data-pe-page="buy"] .scanGlow{right:18px!important}
  body[data-pe-page="buy"] .gpsButton{right:26px!important}
  body[data-pe-page="buy"] .mapboxgl-ctrl-top-right{right:22px!important}
}

/* Mobile header: one compact identity row and four equal stat cards.
   This removes the horizontal overflow seen on iPhone Safari. */
@media (max-width:1100px){
  :root{
    --pe96-map-top:calc(148px + env(safe-area-inset-top,0px));
    --pe96-map-bottom:calc(150px + env(safe-area-inset-bottom,0px));
  }
  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:var(--pe96-map-top)!important;
    bottom:var(--pe96-map-bottom)!important;
    left:0!important;right:0!important;
    min-height:300px!important;
  }
  .pe-v9-shell .gameTopbar{
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    left:8px!important;width:64px!important;height:62px!important;
  }
  .pe-v9-shell .brandChip.pePlayerCard{
    display:flex!important;justify-content:center!important;
    width:64px!important;height:62px!important;padding:7px!important;
    border-radius:17px!important;
  }
  .pe-v9-shell .brandChip.pePlayerCard>img{width:46px!important;height:46px!important;padding:6px!important}
  .pe-v9-shell .brandChip.pePlayerCard>span,
  .pe-v9-shell .levelHud{display:none!important}

  .pe-v9-shell .statsHud{
    top:calc(78px + env(safe-area-inset-top,0px))!important;
    left:7px!important;right:7px!important;
    width:auto!important;height:62px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;padding:0!important;
    overflow:visible!important;
  }
  .pe-v9-shell .statsHud .statCard:not(.peGpsStatCard){
    position:relative!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    height:60px!important;flex:none!important;
    padding:7px 4px!important;border-radius:14px!important;
  }
  .pe-v9-shell .statsHud .statCard span{font-size:7px!important;letter-spacing:.06em!important;white-space:nowrap}
  .pe-v9-shell .statsHud .statCard strong{font-size:clamp(13px,4vw,17px)!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .pe-v9-shell .statsHud .peGpsStatCard{
    position:fixed!important;
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    right:8px!important;left:auto!important;
    width:176px!important;height:62px!important;
    z-index:45!important;padding:8px!important;border-radius:17px!important;
  }
  .pe-v9-shell .statsHud .peGpsStatCard strong{font-size:19px!important}

  .pe-v9-shell .atlasStatusStrip{display:none!important}
  .pe-v9-shell .buyLandButton{
    bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;
    width:calc(100vw - 24px)!important;max-width:520px!important;
    height:62px!important;border-radius:19px!important;
  }
  .pe-v9-shell .buyLandButton strong{font-size:22px!important}
  .pe-v9-shell .buyLandButton small{display:none!important}
  .pe-v9-shell .gpsButton{
    right:12px!important;
    bottom:calc(158px + env(safe-area-inset-bottom,0px))!important;
  }
  .pe-v9-shell .mapboxgl-ctrl-top-right{
    top:calc(158px + env(safe-area-inset-top,0px))!important;
    right:8px!important;
  }
  .pe-v9-shell .mapboxgl-ctrl-bottom-left{
    left:8px!important;
    bottom:calc(158px + env(safe-area-inset-bottom,0px))!important;
  }
  .pe-v9-shell .bottomNav.peFiveNav{
    left:7px!important;right:7px!important;
    bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
    height:72px!important;
  }
  .pe-v9-shell .parcelCard{
    left:8px!important;right:8px!important;
    bottom:calc(158px + env(safe-area-inset-bottom,0px))!important;
    max-height:50vh!important;
  }
}

@media (max-width:430px){
  .pe-v9-shell .statsHud .peGpsStatCard{width:162px!important}
  .pe-v9-shell .statsHud .statCard strong{font-size:13px!important}
  .pe-v9-shell .statsHud .statCard span{font-size:6.5px!important}
}

/* Large board emphasis: crisp but thinner lines so 9x9 remains readable. */
body[data-parcel-board-size="9"] .mapboxgl-map{--pe-grid-size:9}
body.buyGridMode .mapboxgl-canvas{filter:saturate(1.06) contrast(1.02)}

/* Dedicated destinations never reopen the starter tutorial as a modal. */
body:not([data-pe-page="map"]) #tutorialOverlay,
body[data-pe-page="daily"] #rarityReveal,
body[data-pe-page="myland"] #rarityReveal,
body[data-pe-page="profile"] #rarityReveal{display:none!important}