/* ============================================================
   Parcel Empire — Phase 10.3
   Loading-screen matched map, grid, camera and Buy Land overhaul
   ============================================================ */

body.pe-v10-map{
  --pe10-map-cyan:#31d8ff;
  --pe10-map-blue:#087eea;
  --pe10-map-deep:#031433;
  --pe10-map-gold:#ffc83d;
  --pe10-map-green:#58ec91;
  --pe10-map-top:108px;
  --pe10-map-bottom:112px;
}

body.pe-v10-map[data-pe-page="map"],
body.pe-v10-map[data-pe-page="buy"]{
  overflow:hidden!important;
  background:#020a20!important;
}

/* The playable map now reads as a premium game board instead of a raw map. */
body.pe-v10-map[data-pe-page="map"] #map,
body.pe-v10-map[data-pe-page="buy"] #map,
body.pe-v10-map[data-pe-page="map"] .worldShade,
body.pe-v10-map[data-pe-page="buy"] .worldShade,
body.pe-v10-map[data-pe-page="map"] .scanGlow,
body.pe-v10-map[data-pe-page="buy"] .scanGlow{
  border-radius:26px!important;
}

body.pe-v10-map[data-pe-page="map"] #map,
body.pe-v10-map[data-pe-page="buy"] #map{
  overflow:hidden!important;
  border:1px solid rgba(69,211,255,.38)!important;
  background:#061a44!important;
  box-shadow:
    0 0 0 2px rgba(5,90,177,.34),
    0 20px 70px rgba(0,4,25,.68),
    0 0 42px rgba(29,156,255,.14),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.pe-v10-map[data-pe-page="buy"] #map{
  border-color:rgba(255,203,63,.62)!important;
  box-shadow:
    0 0 0 2px rgba(255,194,37,.12),
    0 20px 70px rgba(0,4,25,.7),
    0 0 52px rgba(255,192,40,.12)!important;
}

body.pe-v10-map .mapboxgl-canvas{
  filter:saturate(1.12) contrast(1.06) brightness(.97)!important;
}
body.pe-v10-map.buyGridMode .mapboxgl-canvas{
  filter:saturate(1.24) contrast(1.09) brightness(1.02)!important;
}
body.pe-v10-map .worldShade{
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(ellipse at 50% 54%,transparent 35%,rgba(1,7,28,.12) 73%,rgba(1,6,23,.43) 100%),
    linear-gradient(180deg,rgba(8,75,154,.08),transparent 28%,transparent 72%,rgba(2,9,31,.16))!important;
}
body.pe-v10-map .scanGlow{
  opacity:.42!important;
  mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,rgba(40,210,255,.12),transparent 52%)!important;
}
body.pe-v10-map.buyGridMode .scanGlow{
  opacity:.72!important;
  background:
    radial-gradient(circle at 50% 58%,rgba(255,205,63,.12),transparent 36%),
    radial-gradient(circle at 50% 52%,rgba(40,216,255,.15),transparent 58%)!important;
}

/* Decorative game-board corners. */
.pe10MapCorners{position:fixed;z-index:31;pointer-events:none;inset:0}
.pe10MapCorners i{position:absolute;width:42px;height:42px;opacity:.78;filter:drop-shadow(0 0 7px rgba(49,216,255,.5))}
.pe10MapCorners i::before,.pe10MapCorners i::after{content:"";position:absolute;background:linear-gradient(90deg,var(--pe10-map-gold),var(--pe10-map-cyan));border-radius:99px}
.pe10MapCorners i::before{width:38px;height:2px}
.pe10MapCorners i::after{width:2px;height:38px}
.pe10MapCorners .tl::before,.pe10MapCorners .tl::after{left:0;top:0}
.pe10MapCorners .tr::before,.pe10MapCorners .tr::after{right:0;top:0}.pe10MapCorners .tr::before{transform:scaleX(-1)}
.pe10MapCorners .bl::before,.pe10MapCorners .bl::after{left:0;bottom:0}.pe10MapCorners .bl::after{top:auto;bottom:0}
.pe10MapCorners .br::before,.pe10MapCorners .br::after{right:0;bottom:0}.pe10MapCorners .br::after{top:auto;bottom:0}

/* Map information ribbon. */
.pe10MapHud{
  position:fixed;
  z-index:1030;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
}
.pe10MapHud>*{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border:1px solid rgba(72,211,255,.28);
  border-radius:12px;
  color:#dff7ff;
  background:linear-gradient(180deg,rgba(8,48,100,.90),rgba(3,22,57,.94));
  box-shadow:0 9px 25px rgba(0,7,31,.38),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}
.pe10MapHud .pe10BoardTitle{
  border-color:rgba(255,205,63,.5);
  color:#fff;
  font-family:"Arial Black",Inter,system-ui,sans-serif;
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.pe10MapHud .pe10BoardTitle::before{content:"◆";color:var(--pe10-map-gold);font-size:9px;filter:drop-shadow(0 0 7px rgba(255,200,61,.55))}
.pe10MapHud small{color:#a9cde5;font-size:8px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.pe10MapHud strong{font-size:10px;white-space:nowrap}
.pe10MapHud .pe10GpsLive::before{content:"";width:7px;height:7px;border-radius:50%;background:#4af0a1;box-shadow:0 0 0 4px rgba(74,240,161,.10),0 0 12px #4af0a1;animation:pe10MapPulse 2s ease-in-out infinite}
.pe10MapHud .pe10GpsLive.warn::before{background:#ffd05b;box-shadow:0 0 0 4px rgba(255,208,91,.1),0 0 12px #ffd05b}
.pe10MapHud .pe10GpsLive.bad::before{background:#ff6d82;box-shadow:0 0 0 4px rgba(255,109,130,.1),0 0 12px #ff6d82}
@keyframes pe10MapPulse{50%{opacity:.42;transform:scale(.78)}}

/* Premium Buy Land control inspired by the chosen loading screen. */
body.pe-v10-map .buyLandButton{
  isolation:isolate!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 62px!important;
  align-items:center!important;
  gap:10px!important;
  width:min(410px,calc(100vw - 24px))!important;
  min-height:72px!important;
  padding:8px 9px!important;
  border:2px solid rgba(255,211,80,.86)!important;
  border-radius:23px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 15% 45%,rgba(58,220,255,.28),transparent 27%),
    linear-gradient(180deg,#0b7ee6 0%,#0757b7 52%,#053678 100%)!important;
  box-shadow:
    0 15px 42px rgba(0,12,51,.62),
    0 0 0 3px rgba(15,128,232,.2),
    0 0 28px rgba(41,190,255,.2),
    inset 0 2px 0 rgba(255,255,255,.22)!important;
  text-align:left!important;
  transform:translateX(-50%)!important;
}
body.pe-v10-map .buyLandButton::before{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  z-index:-1!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:18px!important;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.11) 43%,transparent 62%)!important;
  transform:translateX(-115%);
  animation:pe10BuyShine 4.8s ease-in-out infinite;
}
body.pe-v10-map .buyLandButton::after{display:none!important}
@keyframes pe10BuyShine{0%,68%{transform:translateX(-115%)}88%,100%{transform:translateX(115%)}}
body.pe-v10-map .buyLandButton:active{transform:translateX(-50%) scale(.976)!important;filter:brightness(1.08)}
body.pe-v10-map .buyLandButton .pe10BuyIcon{
  width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,226,116,.74);border-radius:15px;
  background:radial-gradient(circle,#25b7ee 0%,#0955a9 66%,#03295f 100%);
  box-shadow:0 0 19px rgba(42,210,255,.34),inset 0 1px rgba(255,255,255,.22);
  color:#ffe15f;font-size:24px;text-shadow:0 2px 0 rgba(3,38,87,.8);
}
body.pe-v10-map .buyLandButton .pe10BuyCopy{display:flex;min-width:0;flex-direction:column;justify-content:center}
body.pe-v10-map .buyLandButton .pe10BuyCopy small{display:block!important;color:#bfeaff!important;font-size:8px!important;font-weight:900!important;letter-spacing:.14em!important;text-transform:uppercase!important}
body.pe-v10-map .buyLandButton .pe10BuyCopy strong{display:block!important;margin-top:2px;color:#fff!important;font-family:"Arial Black",Inter,system-ui,sans-serif!important;font-size:23px!important;line-height:1!important;letter-spacing:-.035em!important;text-shadow:0 3px 0 rgba(1,35,92,.7),0 0 12px rgba(46,216,255,.3)!important}
body.pe-v10-map .buyLandButton .pe10BuyPrice{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,230,131,.72);border-radius:14px;color:#07234e;background:linear-gradient(180deg,#ffe66f,#ffc62e 57%,#ed8a00);box-shadow:0 7px 17px rgba(0,8,31,.32),inset 0 1px rgba(255,255,255,.55)}
body.pe-v10-map .buyLandButton .pe10BuyPrice b{font-size:17px;line-height:1;font-weight:950}
body.pe-v10-map .buyLandButton .pe10BuyPrice small{display:block!important;margin-top:2px!important;color:#17305a!important;font-size:8px!important;font-weight:950!important;letter-spacing:.08em!important}
body.pe-v10-map.buyGridMode .buyLandButton{border-color:#6bf3b2!important;background:linear-gradient(180deg,#0c91d8,#0867b7 52%,#06407b)!important}
body.pe-v10-map.buyGridMode .buyLandButton .pe10BuyIcon{color:#69f0ab}

/* Map controls now belong to the same visual family. */
body.pe-v10-map .mapboxgl-ctrl-group{
  overflow:hidden!important;
  border:1px solid rgba(76,210,255,.32)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(8,49,100,.94),rgba(3,22,57,.96))!important;
  box-shadow:0 10px 26px rgba(0,8,35,.45),inset 0 1px rgba(255,255,255,.07)!important;
  backdrop-filter:blur(12px);
}
body.pe-v10-map .mapboxgl-ctrl-group button{width:43px!important;height:43px!important;background-color:transparent!important;border-color:rgba(79,208,255,.14)!important}
body.pe-v10-map .mapboxgl-ctrl-group button:hover{background:rgba(31,151,239,.25)!important}
body.pe-v10-map .mapboxgl-ctrl-icon{filter:invert(94%) sepia(25%) saturate(996%) hue-rotate(164deg) brightness(107%)}
body.pe-v10-map .mapboxgl-ctrl-scale{padding:4px 8px!important;border:1px solid rgba(75,211,255,.28)!important;border-top:0!important;border-radius:0 0 9px 9px!important;color:#d9f6ff!important;background:rgba(3,24,56,.8)!important;font-size:9px!important}
body.pe-v10-map .gpsButton{
  width:50px!important;height:50px!important;border:2px solid rgba(255,209,67,.72)!important;border-radius:17px!important;
  color:transparent!important;font-size:0!important;
  background:linear-gradient(180deg,#0b7ee6,#064488)!important;
  box-shadow:0 10px 28px rgba(0,8,35,.48),0 0 18px rgba(48,206,255,.2),inset 0 1px rgba(255,255,255,.18)!important;
}
body.pe-v10-map .gpsButton::before{content:"⌖";display:grid;place-items:center;color:#fff;font-size:28px;line-height:1;text-shadow:0 0 12px #54dcff}
body.pe-v10-map .gpsButton.gpsTracking::after{border-color:#48f1a2!important}

/* Selected parcel panel is cleaner and no longer resembles an unrelated popup. */
body.pe-v10-map .parcelCard{
  overflow:hidden!important;
  border:1px solid rgba(75,210,255,.34)!important;
  border-radius:22px!important;
  background:linear-gradient(160deg,rgba(8,47,96,.97),rgba(3,20,50,.99))!important;
  box-shadow:0 18px 48px rgba(0,6,29,.62),inset 0 1px rgba(255,255,255,.07)!important;
}
body.pe-v10-map .parcelCardHeader{border-bottom:1px solid rgba(73,205,255,.14)!important}
body.pe-v10-map .parcelMiniMap{
  border:1px solid rgba(76,211,255,.18)!important;
  background:
    linear-gradient(rgba(77,211,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,211,255,.08) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(34,154,238,.16),rgba(3,21,52,.74))!important;
  background-size:25% 25%,25% 25%,auto!important;
  box-shadow:inset 0 0 24px rgba(0,8,31,.3)!important;
}
body.pe-v10-map .parcelMiniMap .miniGrid{opacity:.45!important}
body.pe-v10-map .parcelStats div{border-color:rgba(79,206,255,.11)!important}
body.pe-v10-map .parcelStats dd{color:#e6f8ff!important}
body.pe-v10-map .rarityPill{border-color:rgba(255,205,62,.46)!important;background:rgba(255,205,62,.11)!important;color:#ffe26e!important}

/* Buy-mode cells read more clearly against the board. */
body.pe-v10-map.buyGridMode #map{animation:pe10BoardCharge .42s ease both}
@keyframes pe10BoardCharge{from{filter:brightness(.78);transform:scale(.994)}to{filter:none;transform:none}}

@media (min-width:1101px){
  body.pe-v10-map[data-pe-page="map"] #map,
  body.pe-v10-map[data-pe-page="map"] .worldShade,
  body.pe-v10-map[data-pe-page="map"] .scanGlow{
    top:106px!important;left:92px!important;right:378px!important;bottom:98px!important;
  }
  body.pe-v10-map[data-pe-page="buy"] #map,
  body.pe-v10-map[data-pe-page="buy"] .worldShade,
  body.pe-v10-map[data-pe-page="buy"] .scanGlow{
    top:106px!important;left:18px!important;right:18px!important;bottom:98px!important;
  }
  body.pe-v10-map .pe10MapHud{top:118px;left:50%;transform:translateX(-50%)}
  body.pe-v10-map[data-pe-page="map"] .pe10MapHud{margin-left:-143px}
  body.pe-v10-map .pe10MapCorners{top:118px;bottom:111px;left:104px;right:390px}
  body.pe-v10-map[data-pe-page="buy"] .pe10MapCorners{left:30px;right:30px}
  body.pe-v10-map .buyLandButton{bottom:112px!important}
  body.pe-v10-map .gpsButton{right:395px!important;bottom:112px!important}
  body.pe-v10-map[data-pe-page="buy"] .gpsButton{right:30px!important}
  body.pe-v10-map .mapboxgl-ctrl-top-right{top:118px!important;right:390px!important}
  body.pe-v10-map[data-pe-page="buy"] .mapboxgl-ctrl-top-right{right:30px!important}
  body.pe-v10-map .mapboxgl-ctrl-bottom-left{left:104px!important;bottom:111px!important}
  body.pe-v10-map[data-pe-page="buy"] .mapboxgl-ctrl-bottom-left{left:30px!important}
}

@media (max-width:1100px){
  body.pe-v10-map{--pe10-map-top:calc(151px + env(safe-area-inset-top,0px));--pe10-map-bottom:calc(151px + env(safe-area-inset-bottom,0px))}
  body.pe-v10-map[data-pe-page="map"] #map,
  body.pe-v10-map[data-pe-page="buy"] #map,
  body.pe-v10-map[data-pe-page="map"] .worldShade,
  body.pe-v10-map[data-pe-page="buy"] .worldShade,
  body.pe-v10-map[data-pe-page="map"] .scanGlow,
  body.pe-v10-map[data-pe-page="buy"] .scanGlow{
    top:var(--pe10-map-top)!important;
    right:7px!important;bottom:var(--pe10-map-bottom)!important;left:7px!important;
    border-radius:22px!important;
  }
  body.pe-v10-map .pe10MapHud{top:calc(158px + env(safe-area-inset-top,0px));left:50%;width:calc(100% - 34px);transform:translateX(-50%);justify-content:space-between;gap:5px}
  body.pe-v10-map .pe10MapHud>*{min-height:30px;padding:5px 8px;border-radius:10px}
  body.pe-v10-map .pe10MapHud small{display:none}
  body.pe-v10-map .pe10MapHud strong,.pe10MapHud .pe10BoardTitle{font-size:8px}
  body.pe-v10-map .pe10MapCorners{top:calc(164px + env(safe-area-inset-top,0px));right:16px;bottom:calc(163px + env(safe-area-inset-bottom,0px));left:16px}
  .pe10MapCorners i{width:27px;height:27px}.pe10MapCorners i::before{width:25px}.pe10MapCorners i::after{height:25px}
  body.pe-v10-map .buyLandButton{bottom:calc(83px + env(safe-area-inset-bottom,0px))!important;height:65px!important;min-height:65px!important;grid-template-columns:42px minmax(0,1fr) 55px!important;gap:8px!important;width:calc(100vw - 20px)!important;max-width:520px!important;border-radius:20px!important}
  body.pe-v10-map .buyLandButton .pe10BuyIcon{width:40px;height:40px;border-radius:13px;font-size:21px}
  body.pe-v10-map .buyLandButton .pe10BuyCopy strong{font-size:20px!important}
  body.pe-v10-map .buyLandButton .pe10BuyPrice{height:42px;border-radius:12px}
  body.pe-v10-map .buyLandButton .pe10BuyPrice b{font-size:15px}
  body.pe-v10-map .gpsButton{right:13px!important;bottom:calc(157px + env(safe-area-inset-bottom,0px))!important;width:46px!important;height:46px!important;border-radius:15px!important}
  body.pe-v10-map .mapboxgl-ctrl-top-right{top:calc(196px + env(safe-area-inset-top,0px))!important;right:11px!important}
  body.pe-v10-map .mapboxgl-ctrl-bottom-left{left:11px!important;bottom:calc(159px + env(safe-area-inset-bottom,0px))!important}
  body.pe-v10-map .mapboxgl-ctrl-group button{width:40px!important;height:40px!important}
  body.pe-v10-map .parcelCard{left:9px!important;right:9px!important;bottom:calc(158px + env(safe-area-inset-bottom,0px))!important;max-height:min(54vh,470px)!important;border-radius:20px!important}
}

@media (max-width:380px){
  body.pe-v10-map .pe10MapHud{width:calc(100% - 24px)}
  body.pe-v10-map .pe10MapHud>*{padding-inline:6px}
  body.pe-v10-map .buyLandButton{grid-template-columns:38px minmax(0,1fr) 50px!important;padding-inline:7px!important}
  body.pe-v10-map .buyLandButton .pe10BuyIcon{width:36px;height:36px}
  body.pe-v10-map .buyLandButton .pe10BuyCopy strong{font-size:18px!important}
  body.pe-v10-map .buyLandButton .pe10BuyCopy small{font-size:6.8px!important}
}

@media (max-height:670px) and (max-width:1100px){
  body.pe-v10-map{--pe10-map-top:calc(135px + env(safe-area-inset-top,0px));--pe10-map-bottom:calc(137px + env(safe-area-inset-bottom,0px))}
  body.pe-v10-map .pe10MapHud{top:calc(141px + env(safe-area-inset-top,0px))}
  body.pe-v10-map .pe10MapCorners{top:calc(147px + env(safe-area-inset-top,0px));bottom:calc(149px + env(safe-area-inset-bottom,0px))}
  body.pe-v10-map .buyLandButton{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;min-height:58px!important;height:58px!important}
  body.pe-v10-map .gpsButton{bottom:calc(141px + env(safe-area-inset-bottom,0px))!important}
  body.pe-v10-map .mapboxgl-ctrl-bottom-left{bottom:calc(143px + env(safe-area-inset-bottom,0px))!important}
}

@media (prefers-reduced-motion:reduce){
  body.pe-v10-map .buyLandButton::before,.pe10MapHud .pe10GpsLive::before,body.pe-v10-map.buyGridMode #map{animation:none!important}
}