/* Campaign map page shell -------------------------------------------------- */
.campaign-map-page {
  width: min(var(--campaign-map-max-width, 1400px), calc(100vw - 48px));
  margin: 0 auto;
  padding: 0;
}

.campaign-map-heading {
  margin: 0 0 1rem;
}

.campaign-map-heading h1 {
  margin: 0 0 .3rem;
}

.campaign-map-intro {
  opacity: .78;
}

.campaign-map-intro p {
  margin: .25rem 0;
}

/* The frame uses the same paper, border and shadow language as the rest of
   the wiki.  The actual Leaflet canvas is locked to the source image's aspect
   ratio by JavaScript, so the image fills it without letterboxing. */
.campaign-map-frame {
  position: relative;
  overflow: hidden;
  padding: clamp(8px, 1vw, 14px);
  border: 1px solid var(--line, #d3ba97);
  border-radius: 18px;
  background: var(--paper, #fbf5e9);
  box-shadow: var(--shadow, 0 18px 50px rgba(66, 43, 22, .15));
}

#campaign-map {
  width: 100%;
  aspect-ratio: 2048 / 1447;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: #d8d4c4;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong, #b68d58) 74%, transparent);
  cursor: grab;
  outline: none;
}

#campaign-map.leaflet-drag-target,
#campaign-map:active {
  cursor: grabbing;
}

#campaign-map:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #b88332) 35%, transparent);
}

#campaign-map .leaflet-pane,
#campaign-map .leaflet-control-container {
  user-select: none;
}

#campaign-map .leaflet-image-layer {
  -webkit-user-drag: none;
  user-select: none;
}

/* Leaflet controls are intentionally hidden. Mouse-wheel, drag, pinch and
   keyboard interaction remain enabled. */
#campaign-map .leaflet-control-zoom,
#campaign-map .leaflet-control-layers,
#campaign-map .leaflet-control-attribution {
  display: none !important;
}

@media (max-width: 760px) {
  .campaign-map-page {
    width: calc(100vw - 20px);
  }

  .campaign-map-frame {
    padding: 6px;
    border-radius: 13px;
  }

  #campaign-map {
    border-radius: 8px;
  }
}

.fantasy-marker {
  background: transparent;
  border: 0;
}

.marker-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--marker-size);
  height: var(--marker-size);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.48));
}

.marker-core {
  display: grid;
  place-items: center;
  width: var(--core-size);
  height: var(--core-size);
  border: 2px solid #1a1712;
  border-radius: 50%;
  color: #211d17;
  background: #eee4d0;
  font-size: var(--icon-font-size);
  font-weight: 900;
}

.marker-wrap.teleport::before,
.marker-wrap.teleport::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 3px solid #9b6de1;
  border-radius: 50%;
}

.marker-wrap.teleport::after {
  inset: -9%;
  border-color: rgba(182,129,255,.48);
}

.marker-wrap.teleport .marker-core {
  z-index: 1;
  color: #fff;
  border-color: #c29af8;
  background: #2b1d3f;
}

.marker-wrap.minor {
  opacity: .94;
}

.marker-wrap.minor .marker-core {
  border-width: 1.5px;
}

.marker-wrap.current .marker-core {
  color: #fff;
  border-color: #fff;
  border-radius: 6px;
  background: #bd3b37;
  transform: rotate(45deg);
}

.marker-wrap.current .marker-core span {
  transform: rotate(-45deg);
}

.quest-badge {
  position: absolute;
  z-index: 4;
  right: -5px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 26px;
  border: 2px solid #322900;
  border-radius: 10px;
  color: #201a00;
  background: #ffd43b;
  font-size: 17px;
  font-weight: 1000;
}

.poi-tooltip {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.poi-tooltip::before {
  display: none;
}

.poi-name-text,
.map-text-label {
  white-space: nowrap;
}

.map-label-icon {
  overflow: visible !important;
  border: 0;
  background: transparent;
}

.map-text-label {
  display: inline-block;
  transform: translate(-50%, -50%);
}

/* ---- Popups (bubbles): compact, and kept fully inside the container ----
   The bubble is positioned by viewer.js (above the marker, or flipped below near the top,
   clamped horizontally). We hide Leaflet's built-in tip and draw our own tail so it can
   sit at the bottom (default) or the top (flipped) and point at the marker via --tip-x. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  color: #f3f0e8;
  background: #1d2129;
}

.leaflet-popup.cm-popup {
  margin-bottom: 0;
}

.cm-popup .leaflet-popup-tip-container {
  display: none;
}

.cm-popup .leaflet-popup-content-wrapper {
  position: relative;
  border-radius: 12px;
}

.cm-popup .leaflet-popup-content-wrapper::after {
  content: "";
  position: absolute;
  left: var(--tip-x, 50%);
  width: 13px;
  height: 13px;
  background: #1d2129;
  transform: translateX(-50%) rotate(45deg);
}

.cm-popup:not(.cm-below) .leaflet-popup-content-wrapper::after {
  bottom: -5px;
}

.cm-popup.cm-below .leaflet-popup-content-wrapper::after {
  top: -5px;
}

.cm-popup .leaflet-popup-content {
  margin: 9px 22px 10px 13px;
  font-size: 12px;
  line-height: 1.3;
}

.popup-type {
  color: #f0c263;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.popup-title {
  margin: .12rem 0 .22rem;
  font-size: 14.5px;
  line-height: 1.2;
}

.popup-description {
  color: #cfd3da;
  margin: .18rem 0 0;
  line-height: 1.3;
}

.popup-quest {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px solid #444a55;
}

.popup-quest strong {
  color: #ffd43b;
}

@media (max-width: 760px) {
  .campaign-map-page {
    width: calc(100vw - 1rem);
    padding-top: .5rem;
  }

  .campaign-map-frame {
    border-radius: 10px;
  }
}

/* --- Theme-bleed fix ---
   quark2 is built on Pico CSS, whose `[role="button"]` rule applies form-button padding
   + a focus ring. Leaflet gives interactive markers role="button", so every settlement/label
   icon inherited 12px/16px padding (shoving the art down-right of its anchor) and showed a
   purple focus square on click. Neutralise it on map markers only. */
.leaflet-container .leaflet-marker-icon {
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  line-height: normal;
  font-weight: inherit;
  -webkit-appearance: none;
          appearance: none;
}
.leaflet-container .leaflet-marker-icon:focus,
.leaflet-container .leaflet-marker-icon:focus-visible,
.leaflet-container .leaflet-marker-icon:active {
  box-shadow: none !important;
  outline: none !important;
}

/* --- Declutter: zoom/screen-aware reveal of names & map labels ---
   viewer.js tags each name/label cm-t1 (always) / cm-t2 (medium zoom) / cm-t3 (close zoom),
   and sets the state on the map container: cm-reveal-1/2/3 by zoom on small screens, or
   cm-show-all on large screens. cm-reveal-3 and cm-show-all hide nothing (everything visible). */
.leaflet-container.cm-reveal-1 .cm-t2,
.leaflet-container.cm-reveal-1 .cm-t3,
.leaflet-container.cm-reveal-2 .cm-t3 {
  display: none !important;
}


/* Interaction and popup colour lock ---------------------------------------
   The site theme previously intercepted map gestures. The JS fix removes
   that interception; these declarations ensure browsers, especially iPadOS
   Safari, hand drag and pinch gestures to Leaflet instead of the page. */
#campaign-map,
#campaign-map .leaflet-map-pane,
#campaign-map .leaflet-tile-pane,
#campaign-map .leaflet-overlay-pane {
  touch-action: none !important;
}

#campaign-map {
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

/* Popups deliberately keep the same dark/night palette in both site themes.
   High-specificity selectors and !important prevent the global heading and
   link colours from bleeding into the Leaflet bubble in light mode. */
#campaign-map .leaflet-popup.cm-popup,
#campaign-map .leaflet-popup.cm-popup .leaflet-popup-content-wrapper,
#campaign-map .leaflet-popup.cm-popup .leaflet-popup-tip {
  color-scheme: dark;
  color: #f3f0e8 !important;
  background: #1d2129 !important;
}

#campaign-map .leaflet-popup.cm-popup .leaflet-popup-content-wrapper::after {
  background: #1d2129 !important;
}

#campaign-map .leaflet-popup.cm-popup .popup-type {
  color: #f0c263 !important;
}

#campaign-map .leaflet-popup.cm-popup .popup-title {
  color: #f3f0e8 !important;
  background: transparent !important;
}

#campaign-map .leaflet-popup.cm-popup .popup-description,
#campaign-map .leaflet-popup.cm-popup p {
  color: #cfd3da !important;
}

#campaign-map .leaflet-popup.cm-popup .popup-quest {
  border-color: #444a55 !important;
}

#campaign-map .leaflet-popup.cm-popup .popup-quest strong {
  color: #ffd43b !important;
}

#campaign-map .leaflet-popup.cm-popup .leaflet-popup-close-button {
  width: 28px !important;
  height: 28px !important;
  padding: 3px 7px !important;
  border: 0 !important;
  color: #aeb4be !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

#campaign-map .leaflet-popup.cm-popup .leaflet-popup-close-button:hover,
#campaign-map .leaflet-popup.cm-popup .leaflet-popup-close-button:focus-visible {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Map search and current-location controls -------------------------------- */
.campaign-map-tools {
  position: absolute;
  z-index: 1200;
  top: clamp(16px, 1.5vw, 24px);
  left: clamp(16px, 1.5vw, 24px);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: calc(100% - 32px);
}

.campaign-map-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.campaign-map-search {
  position: relative;
  width: clamp(220px, 28vw, 330px);
  color: var(--ink, #30271f);
}

.campaign-map-search > input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 42px 0 42px;
  border: 1px solid color-mix(in srgb, var(--line-strong, #b68d58) 78%, transparent);
  border-radius: 12px;
  outline: 0;
  color: var(--ink, #30271f);
  background: color-mix(in srgb, var(--paper, #fbf5e9) 94%, transparent);
  box-shadow: 0 8px 24px rgba(24, 18, 12, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 650 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  appearance: none;
}

.campaign-map-search > input::-webkit-search-cancel-button {
  display: none;
}

.campaign-map-search > input::placeholder {
  color: color-mix(in srgb, var(--ink-muted, #75695d) 82%, transparent);
  opacity: 1;
}

.campaign-map-search > input:focus {
  border-color: var(--gold, #b88332);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #b88332) 24%, transparent), 0 10px 28px rgba(24, 18, 12, .24);
}

.campaign-map-search__icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-muted, #75695d);
  transform: translateY(-50%);
  pointer-events: none;
}

.campaign-map-search__icon svg,
.campaign-map-current-button svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campaign-map-search__clear {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 7px;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--ink-muted, #75695d);
  background: transparent;
  box-shadow: none;
  font: 500 22px/1 system-ui, sans-serif;
  transform: translateY(-50%);
  cursor: pointer;
}

.campaign-map-search__clear:hover,
.campaign-map-search__clear:focus-visible {
  color: var(--ink, #30271f);
  background: color-mix(in srgb, var(--accent, #963f3d) 10%, transparent);
}

.campaign-map-search__results {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  width: 100%;
  max-height: 282px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line-strong, #b68d58) 80%, transparent);
  border-radius: 12px;
  color: var(--ink, #30271f);
  background: color-mix(in srgb, var(--paper, #fbf5e9) 97%, transparent);
  box-shadow: 0 14px 36px rgba(24, 18, 12, .3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.campaign-map-search__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 43px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--ink, #30271f);
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.campaign-map-search__result + .campaign-map-search__result {
  margin-top: 2px;
}

.campaign-map-search__result:hover,
.campaign-map-search__result:focus-visible,
.campaign-map-search__result.is-active {
  color: var(--ink, #30271f);
  background: color-mix(in srgb, var(--accent, #963f3d) 12%, var(--paper, #fbf5e9));
  outline: 0;
}

.campaign-map-search__name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-map-search__kind {
  color: var(--accent, #963f3d);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.campaign-map-search__empty {
  padding: 12px 10px;
  color: var(--ink-muted, #75695d);
  font-size: 13px;
  text-align: center;
}

.campaign-map-current-button {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line-strong, #b68d58) 78%, transparent);
  border-radius: 12px;
  color: var(--accent, #963f3d);
  background: color-mix(in srgb, var(--paper, #fbf5e9) 94%, transparent);
  box-shadow: 0 8px 24px rgba(24, 18, 12, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.campaign-map-current-button:hover,
.campaign-map-current-button:focus-visible {
  color: #fff;
  background: var(--accent, #963f3d);
  box-shadow: 0 10px 28px rgba(24, 18, 12, .28);
  outline: 0;
  transform: translateY(-1px);
}

.campaign-map-current-button:active {
  transform: translateY(0) scale(.97);
}

.campaign-map-current-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 620px) {
  .campaign-map-tools {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
  }

  .campaign-map-search {
    width: min(72vw, 285px);
  }

  .campaign-map-search__kind {
    display: none;
  }

  .campaign-map-search__result {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* MAP TOOLBAR LAYER FIX: ui-fix-2 */
/*
   Leaflet's internal panes use z-index values up to 700. The earlier tablet
   layout lowered the toolbar to z-index: 30 without making the map itself a
   stacking context, allowing those panes to paint over the toolbar.

   The map is now isolated as one low-level layer and the toolbar is kept as a
   higher sibling layer. This applies on desktop, tablet and mobile.
*/
body.campaign-site .campaign-map-page,
body.campaign-site .campaign-map-frame {
  position: relative;
  isolation: isolate;
}

body.campaign-site #campaign-map {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate;
}

body.campaign-site .campaign-map-tools {
  z-index: 20 !important;
  pointer-events: auto;
}

body.campaign-site .campaign-map-search__results {
  z-index: 30 !important;
}

@media (max-width: 1100px) {
  body.campaign-site .campaign-map-frame {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.campaign-site .campaign-map-tools {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    order: -1;
    display: flex !important;
    flex: 0 0 auto;
    align-items: flex-start;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.campaign-site .campaign-map-search {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: none;
  }

  body.campaign-site #campaign-map {
    order: 0;
    flex: 0 0 auto;
  }
}
/* END MAP TOOLBAR LAYER FIX */