:root {
  --elix-header-height: clamp(150px, 14vw, 270px);
  --elix-header-bottom: 0px;
  --elix-header-bg-size: 100% auto;
  --elix-header-info-height: clamp(58px, 5vw, 100px);
}

@font-face {
  font-family: "ElixMinecraftLogo";
  src: url("/elixmap/minecraft-logo.ttf?v=20260614") format("truetype");
  font-display: swap;
}

html,
body,
#mcmap,
.leaflet-container,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-pane {
  background-color: transparent !important;
}

html,
body,
#mcmap,
.leaflet-container {
  background: #0c0c0f !important;
}

html[data-elixmap-embed="true"] .elixmap-header {
  display: none !important;
}

.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-pane {
  background: transparent !important;
}

.elixmap-header {
  position: fixed;
  right: 0;
  bottom: var(--elix-header-bottom);
  left: 0;
  z-index: 1200;
  height: var(--elix-header-height);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.elixmap-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/elixmap/header.svg?v=20260614-6");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: var(--elix-header-bg-size);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.38));
  transform: scaleY(-1);
  transform-origin: center;
}

.elixmap-header__content {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}

.elixmap-header__title {
  position: absolute;
  left: clamp(300px, 17vw, 400px);
  bottom: clamp(72px, 6.5vw, 118px);
  width: clamp(260px, 24vw, 480px);
  color: #5b351f;
  font-family: "ElixMinecraftLogo", "Minecraft", Arial, sans-serif;
  font-size: clamp(18px, 2.35vw, 44px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 238, 198, 0.82),
    0 4px 0 rgba(104, 68, 38, 0.28),
    0 9px 16px rgba(58, 35, 17, 0.24);
  white-space: nowrap;
}

.leaflet-top {
  top: 10px;
}

.leaflet-bottom {
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --elix-header-height: clamp(96px, 27vw, 126px);
    --elix-header-bottom: 0px;
    --elix-header-bg-size: auto clamp(126px, 36vw, 152px);
    --elix-header-info-height: 48px;
  }

  .elixmap-header__content {
    padding: 0 14px;
  }

  .elixmap-header__title {
    left: 50%;
    bottom: 38px;
    width: min(300px, calc(100vw - 40px));
    font-size: clamp(15px, 5vw, 22px);
    transform: translateX(-50%);
  }
}