/* ============================================================
   Parcel Empire — Phase 9.6 final responsive polish
   Mobile-safe layout, laptop compaction and screenshot alignment.
   The bottom rarity strip remains intentionally removed.
============================================================ */

:root{
  --pe96-vh:100vh;
  --pe96-safe-top:env(safe-area-inset-top,0px);
  --pe96-safe-right:env(safe-area-inset-right,0px);
  --pe96-safe-bottom:env(safe-area-inset-bottom,0px);
  --pe96-safe-left:env(safe-area-inset-left,0px);
  --pe96-nav-bottom:18px;
  --pe96-nav-h:70px;
  --pe96-action-h:76px;
  --pe96-map-top:112px;
  --pe96-map-bottom:96px;
}

html,body{height:100%;overscroll-behavior:none}
body.pe-v9-shell{
  min-height:var(--pe96-vh);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
body.pe-v9-shell.pe96-keyboard-open .bottomNav,
body.pe-v9-shell.pe96-keyboard-open .buyLandButton,
body.pe-v9-shell.pe96-keyboard-open .atlasStatusStrip{opacity:0!important;pointer-events:none!important}

/* Crisp focus treatment that matches the game UI. */
.pe-v9-shell :is(button,[role="button"],select,input):focus-visible{
  outline:2px solid #4af4e2!important;
  outline-offset:2px!important;
}
.pe-v9-shell button{user-select:none;-webkit-user-select:none}

/* Final desktop geometry. */
@media (min-width:1101px){
  .pe-v9-shell #map,
  .pe-v9-shell .worldShade,
  .pe-v9-shell .scanGlow{
    top:var(--pe96-map-top)!important;
    bottom:var(--pe96-map-bottom)!important;
  }
  .pe-v9-shell .peRightRail{
    grid-template-rows:minmax(330px,43%) minmax(0,1fr);
  }
  .pe-v9-shell .peRightCard>header{flex:0 0 auto}
  .pe-v9-shell .pePortfolioPreview{min-height:0}
  .pe-v9-shell .pePortfolioLiveGrid{overscroll-behavior:contain}
  .pe-v9-shell .bottomNav.peFiveNav{bottom:var(--pe96-nav-bottom)!important;height:var(--pe96-nav-h)!important}
  .pe-v9-shell .buyLandButton{height:var(--pe96-action-h)!important}
}

/* Short laptop screens: compress vertically without hiding functionality. */
@media (min-width:1101px) and (max-height:820px){
  :root{--pe96-map-top:94px;--pe96-map-bottom:82px;--pe96-nav-bottom:10px;--pe96-nav-h:60px;--pe96-action-h:62px}
  .pe-v9-shell .gameTopbar{top:10px!important;height:68px!important}
  .pe-v9-shell .statsHud{top:10px!important;height:68px!important}
  .pe-v9-shell .statsHud .statCard{height:68px!important;padding:9px 11px!important}
  .pe-v9-shell .statsHud .statCard strong{font-size:17px!important}
  .pe-v9-shell .brandChip.pePlayerCard{padding:8px 11px!important}
  .pe-v9-shell .brandChip.pePlayerCard>img{width:44px!important;height:44px!important}
  .peLeftRail{top:94px;bottom:84px;gap:4px;padding:6px}
  .peLeftRail button{min-height:55px}
  .peRightRail{top:10px;bottom:10px;grid-template-rows:minmax(280px,42%) minmax(0,1fr)}
  .peRightCard>header{height:54px;padding:9px 14px}
  .pe-v9-shell .pePurchaseDock #rarityReveal{inset:54px 0 0!important}
  .pe-v9-shell .atlasStatusStrip{bottom:78px!important}
  .pe-v9-shell .atlasStatusStrip>div{height:56px!important;padding:8px 10px!important}
  .pe-v9-shell .buyLandButton{bottom:82px!important;width:280px!important}
  .pe-v9-shell .buyLandButton strong{font-size:21px!important}
  .pe-v9-shell .bottomNav button{height:48px!important}
  .pe-v9-shell .gpsButton{bottom:89px!important}
  .pe-v9-shell .mapboxgl-ctrl-bottom-left{bottom:89px!important}
}

/* Tablets and phones share a deliberate mobile game shell. */
@media (max-width:1100px){
  :root{
    --pe96-nav-bottom:calc(8px + var(--pe96-safe-bottom));
    --pe96-nav-h:72px;
    --pe96-action-h:64px;
    --pe96-controls-bottom:calc(226px + var(--pe96-safe-bottom));
    --pe96-map-top:calc(184px + var(--pe96-safe-top));
    --pe96-map-bottom:calc(220px + var(--pe96-safe-bottom));
  }

  body.pe-v9-shell{overflow:hidden;background:#06131f}
  body.pe-v9-shell::after{background:linear-gradient(180deg,rgba(3,13,23,.18),transparent 25%,transparent 72%,rgba(2,10,18,.18))}

  .pe-v9-shell #map,
  .pe-v9-shell .worldShade,
  .pe-v9-shell .scanGlow{
    top:var(--pe96-map-top)!important;
    bottom:var(--pe96-map-bottom)!important;
    min-height:220px;
  }

  /* Keep the player identity and GPS status on the top row. */
  .pe-v9-shell .gameTopbar{
    top:calc(9px + var(--pe96-safe-top))!important;
    left:calc(10px + var(--pe96-safe-left))!important;
    width:186px!important;
    height:66px!important;
  }
  .pe-v9-shell .brandChip.pePlayerCard{
    grid-template-columns:43px 1fr!important;
    column-gap:9px!important;
    padding:8px 10px!important;
    border-radius:16px!important;
  }
  .pe-v9-shell .brandChip.pePlayerCard>img{width:42px!important;height:42px!important;padding:6px!important}
  .pe-v9-shell .brandChip.pePlayerCard>span{font-size:13px!important}

  /* Scrollable stat row, never wrapped and never clipped by the notch. */
  .pe-v9-shell .statsHud{
    top:calc(84px + var(--pe96-safe-top))!important;
    left:calc(10px + var(--pe96-safe-left))!important;
    right:calc(10px + var(--pe96-safe-right))!important;
    height:82px!important;
    padding:0 2px 8px!important;
    scroll-padding-inline:2px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .pe-v9-shell .statsHud .statCard{
    flex:0 0 132px!important;
    height:70px!important;
    padding:10px 8px!important;
    border-radius:16px!important;
    scroll-snap-align:start;
  }
  .pe-v9-shell .statsHud .statCard span{font-size:8px!important;letter-spacing:.08em!important}
  .pe-v9-shell .statsHud .statCard strong{font-size:17px!important}
  .pe-v9-shell .statsHud .peGpsStatCard{
    position:fixed!important;
    top:calc(10px + var(--pe96-safe-top))!important;
    right:calc(10px + var(--pe96-safe-right))!important;
    width:154px!important;
    height:64px!important;
    z-index:43!important;
  }

  /* Three bottom status cards, then the action button, then navigation. */
  .pe-v9-shell .atlasStatusStrip{
    left:calc(10px + var(--pe96-safe-left))!important;
    right:calc(10px + var(--pe96-safe-right))!important;
    bottom:calc(162px + var(--pe96-safe-bottom))!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .pe-v9-shell .atlasStatusStrip>div{
    height:50px!important;
    min-width:0;
    padding:7px 6px!important;
    border-radius:13px!important;
  }
  .pe-v9-shell .atlasStatusStrip span{font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pe-v9-shell .atlasStatusStrip strong{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .pe-v9-shell .buyLandButton{
    left:50%!important;
    bottom:calc(89px + var(--pe96-safe-bottom))!important;
    width:min(360px,calc(100vw - 72px - var(--pe96-safe-left) - var(--pe96-safe-right)))!important;
    height:var(--pe96-action-h)!important;
    transform:translateX(-50%)!important;
    border-radius:19px!important;
  }
  .pe-v9-shell .buyLandButton strong{font-size:21px!important}
  .pe-v9-shell .buyLandButton small{font-size:9px!important}
  .pe-v9-shell .buyLandButton span{font-size:22px!important}

  .pe-v9-shell .bottomNav.peFiveNav{
    left:calc(8px + var(--pe96-safe-left))!important;
    right:calc(8px + var(--pe96-safe-right))!important;
    bottom:var(--pe96-nav-bottom)!important;
    width:auto!important;
    height:var(--pe96-nav-h)!important;
    padding:5px!important;
    border-radius:20px!important;
    transform:none!important;
  }
  .pe-v9-shell .bottomNav button{height:60px!important;border-radius:15px!important}
  .pe-v9-shell .bottomNav button .peNavIcon{font-size:19px!important}
  .pe-v9-shell .bottomNav button>span:last-child{font-size:9px!important}
  .pe-v9-shell .bottomNav button.active{box-shadow:inset 0 0 0 1px rgba(85,244,217,.15)}

  .pe-v9-shell .gpsButton{
    right:calc(12px + var(--pe96-safe-right))!important;
    bottom:var(--pe96-controls-bottom)!important;
    width:48px!important;height:48px!important;
  }
  .pe-v9-shell .mapboxgl-ctrl-top-right{top:calc(196px + var(--pe96-safe-top))!important;right:calc(8px + var(--pe96-safe-right))!important}
  .pe-v9-shell .mapboxgl-ctrl-bottom-left{left:calc(8px + var(--pe96-safe-left))!important;bottom:var(--pe96-controls-bottom)!important}

  /* Selected parcel is a true mobile bottom card above the controls. */
  .pe-v9-shell .parcelCard{
    left:calc(9px + var(--pe96-safe-left))!important;
    right:calc(9px + var(--pe96-safe-right))!important;
    top:auto!important;
    bottom:calc(224px + var(--pe96-safe-bottom))!important;
    width:auto!important;
    max-height:min(43vh,390px)!important;
    padding:15px!important;
    border-radius:20px!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }

  /* All existing panels behave as sheets and stay above the fixed nav. */
  .pe-v9-shell .sheetPanel{
    left:calc(8px + var(--pe96-safe-left))!important;
    right:calc(8px + var(--pe96-safe-right))!important;
    bottom:calc(88px + var(--pe96-safe-bottom))!important;
    width:auto!important;
    max-height:calc(var(--pe96-vh) - 106px - var(--pe96-safe-top) - var(--pe96-safe-bottom))!important;
    padding:18px!important;
    border-radius:24px 24px 20px 20px!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .pe-v9-shell .sheetPanel.pe96-sheet-ready{padding-top:30px!important}
  .pe96SheetHandle{
    position:absolute;top:8px;left:50%;z-index:5;width:52px;height:5px;transform:translateX(-50%);
    border:0;border-radius:999px;background:rgba(184,222,234,.35);padding:0;cursor:pointer;
  }
  .pe-v9-shell .sheetHeader{position:sticky;top:-30px;z-index:4;margin:-2px -2px 8px;padding:2px 2px 10px;background:linear-gradient(180deg,rgba(7,24,38,.99) 76%,transparent)}
  .pe-v9-shell .sheetHeader h2{font-size:23px!important}

  /* Purchase and portfolio sheets share the same safe bottom. */
  .pe-v9-shell .pePurchaseDock #rarityReveal{
    inset:auto calc(8px + var(--pe96-safe-right)) calc(88px + var(--pe96-safe-bottom)) calc(8px + var(--pe96-safe-left))!important;
    width:auto!important;
    height:min(68vh,620px)!important;
    max-height:calc(var(--pe96-vh) - 112px - var(--pe96-safe-top) - var(--pe96-safe-bottom))!important;
  }
  #myLandPanel.pePortfolioPanelV95{max-height:calc(var(--pe96-vh) - 106px - var(--pe96-safe-top) - var(--pe96-safe-bottom))!important}

  .pe-v9-shell .confirmOverlay{padding:calc(12px + var(--pe96-safe-top)) calc(10px + var(--pe96-safe-right)) calc(12px + var(--pe96-safe-bottom)) calc(10px + var(--pe96-safe-left))!important}
  .pe-v9-shell .pePurchaseCard{max-height:calc(var(--pe96-vh) - 24px - var(--pe96-safe-top) - var(--pe96-safe-bottom))!important;overflow:auto!important;overscroll-behavior:contain}

  .pe-v9-shell .toast{bottom:calc(168px + var(--pe96-safe-bottom))!important;max-width:calc(100vw - 28px)!important}
}

/* Narrow phones. */
@media (max-width:560px){
  :root{--pe96-map-top:calc(176px + var(--pe96-safe-top));--pe96-map-bottom:calc(214px + var(--pe96-safe-bottom))}
  .pe-v9-shell .gameTopbar{width:70px!important}
  .pe-v9-shell .brandChip.pePlayerCard{display:flex!important;justify-content:center!important;padding:7px!important}
  .pe-v9-shell .brandChip.pePlayerCard>span{display:none!important}
  .pe-v9-shell .statsHud .peGpsStatCard{width:150px!important}
  .pe-v9-shell .statsHud .statCard{flex-basis:124px!important}
  .pe-v9-shell .statsHud .statCard strong{font-size:16px!important}
  .pe-v9-shell .atlasStatusStrip{bottom:calc(158px + var(--pe96-safe-bottom))!important}
  .pe-v9-shell .buyLandButton{bottom:calc(88px + var(--pe96-safe-bottom))!important;width:calc(100vw - 62px - var(--pe96-safe-left) - var(--pe96-safe-right))!important}
  .pe-v9-shell .parcelCard{bottom:calc(218px + var(--pe96-safe-bottom))!important}
  .pe-v9-shell .gpsButton,.pe-v9-shell .mapboxgl-ctrl-bottom-left{bottom:calc(220px + var(--pe96-safe-bottom))!important}
  .pe-v9-shell .sheetPanel{padding:15px!important;padding-top:29px!important}
  .pe-v9-shell .sheetHeader h2{font-size:20px!important}
  .pe-v9-shell .pePurchaseDock .revealCard{padding:10px 13px 12px!important}
  .pe-v9-shell .pePurchaseDock .revealModelStage{min-height:145px!important}
}

/* Very small or browser-chrome-heavy phones: simplify controls to protect map space. */
@media (max-width:420px) and (max-height:740px){
  :root{--pe96-map-top:calc(154px + var(--pe96-safe-top));--pe96-map-bottom:calc(164px + var(--pe96-safe-bottom))}
  .pe-v9-shell .statsHud{top:calc(77px + var(--pe96-safe-top))!important;height:68px!important}
  .pe-v9-shell .statsHud .statCard{height:58px!important;flex-basis:116px!important;padding:7px!important}
  .pe-v9-shell .statsHud .statCard span{font-size:7px!important}
  .pe-v9-shell .statsHud .statCard strong{font-size:14px!important}
  .pe-v9-shell .atlasStatusStrip{display:none!important}
  .pe-v9-shell .buyLandButton{bottom:calc(87px + var(--pe96-safe-bottom))!important;height:58px!important}
  .pe-v9-shell .buyLandButton strong{font-size:18px!important}
  .pe-v9-shell .gpsButton,.pe-v9-shell .mapboxgl-ctrl-bottom-left{bottom:calc(164px + var(--pe96-safe-bottom))!important}
  .pe-v9-shell .parcelCard{bottom:calc(162px + var(--pe96-safe-bottom))!important;max-height:46vh!important}
  .pe-v9-shell .toast{bottom:calc(157px + var(--pe96-safe-bottom))!important}
}

/* Phone landscape: prioritise the map while keeping essential controls reachable. */
@media (max-width:950px) and (orientation:landscape) and (max-height:540px){
  :root{--pe96-map-top:calc(70px + var(--pe96-safe-top));--pe96-map-bottom:calc(74px + var(--pe96-safe-bottom));--pe96-nav-h:58px}
  .pe-v9-shell .gameTopbar{top:calc(5px + var(--pe96-safe-top))!important;left:calc(7px + var(--pe96-safe-left))!important;width:66px!important;height:58px!important}
  .pe-v9-shell .brandChip.pePlayerCard{padding:5px!important;border-radius:14px!important}
  .pe-v9-shell .brandChip.pePlayerCard>img{width:40px!important;height:40px!important}
  .pe-v9-shell .statsHud{display:none!important}
  .pe-v9-shell .atlasStatusStrip{display:none!important}
  .pe-v9-shell .buyLandButton{bottom:calc(8px + var(--pe96-safe-bottom))!important;width:220px!important;height:58px!important;z-index:46!important}
  .pe-v9-shell .bottomNav.peFiveNav{left:auto!important;right:calc(8px + var(--pe96-safe-right))!important;width:300px!important;height:58px!important;grid-template-columns:repeat(4,1fr)!important}
  .pe-v9-shell .bottomNav button{height:48px!important}
  .pe-v9-shell .bottomNav button[data-panel="buy"]{display:none!important}
  .pe-v9-shell .bottomNav button>span:last-child{font-size:8px!important}
  .pe-v9-shell .gpsButton{right:calc(10px + var(--pe96-safe-right))!important;bottom:calc(76px + var(--pe96-safe-bottom))!important}
  .pe-v9-shell .mapboxgl-ctrl-top-right{top:calc(76px + var(--pe96-safe-top))!important}
  .pe-v9-shell .mapboxgl-ctrl-bottom-left{bottom:calc(76px + var(--pe96-safe-bottom))!important}
  .pe-v9-shell .parcelCard{left:calc(80px + var(--pe96-safe-left))!important;right:auto!important;bottom:calc(72px + var(--pe96-safe-bottom))!important;width:min(330px,42vw)!important;max-height:calc(var(--pe96-vh) - 150px)!important}
  .pe-v9-shell .sheetPanel{left:auto!important;right:calc(8px + var(--pe96-safe-right))!important;bottom:calc(72px + var(--pe96-safe-bottom))!important;width:min(470px,58vw)!important;max-height:calc(var(--pe96-vh) - 86px - var(--pe96-safe-top) - var(--pe96-safe-bottom))!important}
}

/* Avoid animation strain and motion sickness. */
@media (prefers-reduced-motion:reduce){
  .pe-v9-shell *{scroll-behavior:auto!important}
  .pe-v9-shell :is(.peRightCard,.sheetPanel,.parcelCard,.buyLandButton,.bottomNav button){transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}