/* TBE Direct Map Page
   Removes the middle /vali-public/map.html iframe layer and gives /map one clean frame. */

.map-direct-page {
  position: relative !important;
  min-height: 100svh !important;
  color: white !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(82, 255, 74, 0.11), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.28) 45%, rgba(0,0,0,.78)),
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.72)),
    url("/vali-public/interactive-map/assets/bone-empire-backdrop.png") center / cover fixed no-repeat !important;
}

.map-direct-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.72) 100%),
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.18)) !important;
  z-index: 0 !important;
}

.map-direct-page > header {
  position: relative !important;
  z-index: 20 !important;
}

.map-direct-embed-shell {
  position: relative !important;
  z-index: 5 !important;

  width: min(1620px, calc(100vw - 64px)) !important;
  height: calc(100svh - 118px) !important;

  margin: 14px auto 0 !important;
  overflow: hidden !important;

  border: 1px solid rgba(125, 255, 69, 0.46) !important;
  border-radius: 28px !important;
  background: #020503 !important;

  box-shadow:
    0 0 0 1px rgba(125, 255, 69, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(125, 255, 69, 0.08) !important;
}

.map-direct-embed {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #020503 !important;
}

/* Short/cluttered browser screens */
@media (max-height: 850px) {
  .map-direct-embed-shell {
    height: calc(100svh - 104px) !important;
    margin-top: 10px !important;
  }
}

@media (max-height: 720px) {
  .map-direct-embed-shell {
    height: calc(100svh - 92px) !important;
    margin-top: 8px !important;
  }
}

/* Mobile should stack and scroll normally. */
@media (max-width: 760px) {
  .map-direct-page {
    overflow-y: auto !important;
  }

  .map-direct-embed-shell {
    width: calc(100vw - 18px) !important;
    height: calc(100svh - 92px) !important;
    margin-top: 8px !important;
    border-radius: 18px !important;
  }
}