/* Load entity-stack.css AFTER this file (mobs above zone art). */
/* forge/map.css — v0.86.0 (banner position overridden by cinematic.css)
 * Map shell only: wrap, viewport, world layer, fog, coords, side banner.
 * Terrain art → terrain.css + zone-art.css
 * Tokens/mobs → tokens.css
 * HUD chrome → hud.css
 */

/* ── Layout ─────────────────────────────────────────────── */
.forge-map-wrap {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.forge-world-stage.has-map {
  display: flex;
  flex-direction: column;
}

.forge-map-wrap.is-live {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.forge-map-wrap[hidden] {
  display: none !important;
}

/* ── Viewport ───────────────────────────────────────────── */
.map-viewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 136, 0.35);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at center, #041208 0%, #020a06 55%, #010604 100%);
  box-shadow: inset 0 0 60px rgba(0, 40, 15, 0.5);
}

.world-layer {
  position: absolute;
  left: 0;
  top: 0;
  /* size set in JS to world width/height */
  background-color: #020a06;
  background-image:
    linear-gradient(rgba(0, 255, 100, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 100, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  will-change: transform;
  transform-origin: 0 0;
}

/* Layer z-stack (children of world-layer or viewport) */
/* #mob-layer z-index set in entity stack below */

.map-coords {
  position: absolute;
  left: 10px;
  right: auto;
  bottom: 10px;
  font-size: 0.65rem;
  opacity: 0.55;
  z-index: 31;
  pointer-events: none;
}

/* ── Fog of war (v0.72.2) — viewport-centered, restored strength ── */
.map-fog {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  /* Player is always viewport-centered → clear pocket (--fog-clear owner-tunable) */
  --fog-clear: 14%;
  --fog-soft: 26%;
  --fog-mid: 40%;
  --fog-dark: 56%;
  --fog-edge: 74%;
  --fog-a1: 0.18;
  --fog-a2: 0.5;
  --fog-a3: 0.82;
  --fog-a4: 0.94;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent var(--fog-clear),
    rgba(0, 10, 4, var(--fog-a1)) var(--fog-soft),
    rgba(0, 6, 2, var(--fog-a2)) var(--fog-mid),
    rgba(0, 3, 1, var(--fog-a3)) var(--fog-dark),
    rgba(0, 0, 0, var(--fog-a4)) var(--fog-edge),
    #000 100%
  );
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
}

/* Nearby float sits above fog */
.forge-nearby-float {
  z-index: 36;
}

/* ── Side opening banner ────────────────────────────────── */
.forge-side-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(920px, 92vw);
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 4px;
  pointer-events: none;
  text-align: center;
  background: rgba(4, 18, 10, 0.88);
  border: 1px solid rgba(80, 220, 120, 0.35);
  color: #b8f0c8;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
}
.forge-side-banner.is-white {
  border-color: rgba(230, 230, 240, 0.45);
  color: #e8e8f0;
}
.forge-side-banner.is-black {
  border-color: rgba(180, 140, 255, 0.45);
  color: #d8c8ff;
}

/* ── Responsive map shell ───────────────────────────────── */
@media (max-width: 800px) {
  .forge-map-wrap {
    flex-direction: column;
  }
  .map-viewport {
    min-height: 48vh;
  }
}

/* ── v0.70.5 viewport zone floor (always visible when zone has art) ── */
.zone-floor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0a140c;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.25s ease, background-image 0.15s ease;
  opacity: 1;
}
.zone-floor.is-empty {
  background-image: none !important;
  background-color: transparent;
}
.zone-floor.is-active {
  opacity: 1;
}
/* world entities above floor */
.world-layer {
  z-index: 1 !important;
  /* let floor show in gaps; keep faint grid only */
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(0, 255, 100, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 100, 0.04) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
}
/* terrain sits on world-layer; keep semi-transparent so floor reads if huge-layer paint fails */
.zone-terrain.has-art.is-full-bg {
  /* do not hide floor completely if browser skips huge bg paint */
  background-color: transparent !important;
}

/* coords show active backdrop */
.map-coords {
  z-index: 31;
}

/* v0.71.0 — smaller world, no photo-tile floor */
.zone-floor {
  background-color: #0e1a12;
  background-size: cover;
  background-repeat: no-repeat;
}
.world-layer {
  /* light grid only — never ground photos */
  background-color: #020a06 !important;
  background-image:
    linear-gradient(rgba(0, 255, 100, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 100, 0.05) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
}

/* v0.71.2 — French Fields / zone floor must read clearly */
.zone-floor {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #0a140c;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
.zone-floor.is-active {
  opacity: 1 !important;
}
.zone-floor.is-empty {
  background-image: none !important;
}
/* world above floor but grid only — do not paint opaque green sheet */
.world-layer {
  z-index: 1 !important;
  background-color: transparent !important;
}
/* Terrain with full art: let photo dominate */
.zone-terrain.has-art.is-full-bg {
  background-color: transparent !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}
.zone-terrain.has-art.is-full-bg .zone-bg-img {
  opacity: 1 !important;
  filter: none !important;
}


/* ── v0.73.4 entity layer stack (inside #world-layer) ──
 * 1 terrain floors
 * 2 barriers
 * 3 markers / landmarks
 * 4 no-walk overlays
 * 10 mobs
 * 11 other players
 */
#world-layer .zone-terrain,
#world-layer .zone-terrain.has-art,
#world-layer .zone-terrain.has-art.is-full-bg {
  z-index: 1 !important;
  /* contain backdrop paint so it cannot cover later siblings */
  isolation: isolate;
}
#world-layer .zone-terrain .zone-bg-img {
  z-index: 0 !important;
  position: absolute !important;
}
#world-layer .zone-barrier {
  z-index: 2 !important;
}
#world-layer .zone-marker,
#world-layer .zone-landmark {
  z-index: 3 !important;
}
#world-layer #blocker-layer,
#world-layer .blocker-layer {
  z-index: 4 !important;
}
#world-layer #mob-layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
  pointer-events: none; /* clicks hit child buttons */
}
#world-layer #mob-layer .mob-avatar {
  transition: none; /* positions driven by rAF vector tween */
  pointer-events: auto;
  z-index: 10 !important;
}
#world-layer #mob-layer .mob-avatar.is-agro,
#world-layer #mob-layer .mob-avatar.is-chasing,
#world-layer #mob-layer .mob-avatar.is-target {
  z-index: 12 !important;
}
#world-layer #player-layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 11 !important;
  pointer-events: none;
}
#world-layer #player-layer .player-avatar-token {
  pointer-events: auto;
  z-index: 11 !important;
}