/* XERICORE home hero: live arena map in the banner slot (only when no admin banner is set) */
.home-map{position:absolute;left:0;right:0;top:0;height:0;z-index:1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.home-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.home-map-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.84) 26%,rgba(5,8,12,.36) 52%,rgba(5,8,12,0) 78%)}

/* the banner slot keeps its size (so the layout is identical) but its own picture area is hidden */
body.has-home-map #heroBannerSlider{visibility:hidden}
/* hero text sits above the map, exactly like it sits above the banner image */
body.has-home-map section.hero>.container{position:relative;z-index:3}

/* arena pill: sits under the title without moving anything else */
.home-map-chip{position:absolute;left:0;top:100%;margin-top:1.1rem;display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:999px;background:rgba(5,8,12,.55);border:1px solid rgba(255,255,255,.14);color:#cdd6e2;font-family:var(--font-body,'Inter',system-ui,sans-serif);font-size:.88rem;font-weight:500;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease;z-index:4}
.home-map-chip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.home-map-chip .hmc-dot{width:8px;height:8px;border-radius:50%;background:#00d4ff;flex-shrink:0}
.home-map-chip[data-mode="prep"] .hmc-dot{background:#e5c26a}
.home-map-chip[data-mode="fight"] .hmc-dot{background:#f43f5e}
.home-map-chip .hmc-go{color:#8b98a8}

@media (max-width:899px){
  .home-map-shade{background:linear-gradient(180deg,rgba(5,8,12,.8) 0%,rgba(5,8,12,.7) 60%,rgba(5,8,12,.92) 100%)}
  .home-map-chip{white-space:normal}
}

/* ---------- FULL MAP: lighter shade, thin bottom edge (desktop) ---------- */
@media (min-width:900px){
  .home-map{-webkit-mask-image:linear-gradient(to bottom,#000 94%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 94%,transparent 100%)!important}
  .home-map-shade{background:linear-gradient(90deg,rgba(5,8,12,.92) 0%,rgba(5,8,12,.8) 14%,rgba(5,8,12,.42) 30%,rgba(5,8,12,.1) 41%,rgba(5,8,12,0) 50%)!important}
}

/* ---------- PHONES (under 900px): pill in the flow, map centred above the title ---------- */
@media (max-width:899px){
  .home-map canvas{transform:translateY(40px)}
  .home-map-shade{background:linear-gradient(180deg,rgba(5,8,12,.22) 0%,rgba(5,8,12,.16) 42%,rgba(5,8,12,.9) 100%)!important}
  .home-map-chip{position:static!important;display:flex!important;align-items:center!important;width:100%!important;box-sizing:border-box!important;margin:1.1rem 0 0!important;padding:.65rem .95rem!important;font-size:.86rem!important;line-height:1.35!important;white-space:normal!important}
  .home-map-chip .hmc-text{flex:1 1 auto}
}

/* ---------- PHONES: map a little lower, closer to the title ---------- */
@media (max-width:899px){
  .home-map canvas{transform:translateY(64px)}
}

/* ---------- smooth fade-in ---------- */
.home-map{opacity:0;transition:opacity .7s ease}
.home-map.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){.home-map{transition:none}}