/* Cuthelan BlueMap custom layer — v28
   Kept intentionally small: no menu/theme rewrites, no backdrop filters,
   no permanent animation, and no global layout overrides. */

:root {
  --cuthelan-region-scale: .78;
}

/* -------------------------------------------------------------------------
   Parchment atlas chrome
   ------------------------------------------------------------------------- */
#cuthelan-atlas-brand {
  position: fixed;
  z-index: 9000;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 96px;
  padding: 6px 14px 7px;
  pointer-events: none;

  border: 1px solid rgba(83, 67, 42, .46);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(235, 226, 202, .82),
    rgba(191, 174, 137, .72)
  );
  box-shadow:
    0 3px 10px rgba(26, 21, 13, .24),
    inset 0 1px rgba(255,255,255,.42);

  color: #332919;
  text-shadow: 0 1px rgba(255,255,255,.36);
}

.cuthelan-clock-icon {
  display: block;
  font-size: 19px;
  line-height: 1;
  color: #a36d11;
  filter: drop-shadow(0 1px 1px rgba(57,42,16,.22));
}

.cuthelan-clock-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.cuthelan-clock-time {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
}

.cuthelan-clock-sub {
  margin-top: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(59, 48, 31, .72);
}

#cuthelan-compass-rose {
  position: fixed;
  z-index: 8500;

  /* Below the navbar so it never obscures coordinate/buttons. */
  top: 52px;
  right: 18px;

  width: 158px;
  height: 158px;

  pointer-events: none;
  opacity: .78;
  filter:
    drop-shadow(0 2px 2px rgba(25,20,12,.38))
    drop-shadow(0 0 5px rgba(245,237,213,.12));
}

#cuthelan-compass-rose > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 85ms linear;
}

#cuthelan-site-button {
  position: fixed;
  z-index: 9000;
  right: 12px;
  bottom: 11px;
  padding: 6px 9px;
  border: 1px solid rgba(74, 60, 38, .38);
  border-radius: 2px;
  background: rgba(222, 211, 184, .78);
  box-shadow: 0 2px 8px rgba(24,19,12,.19);
  color: #403421;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

#cuthelan-site-button:hover {
  background: rgba(239, 230, 207, .9);
  color: #211a10;
}

/* -------------------------------------------------------------------------
   Region / ocean atlas labels
   ------------------------------------------------------------------------- */
.cuthelan-region-marker,
.cuthelan-region-marker * {
  pointer-events: none !important;
  user-select: none !important;
}

.cuthelan-map-region {
  position: relative;
  transform: rotate(var(--region-angle)) scale(var(--cuthelan-region-scale));
  transform-origin: 50% 50%;
  opacity: .94;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.75));
}

.cuthelan-map-region svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cuthelan-map-region text {
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 5px;
  fill: rgba(235,219,180,.96);
  stroke: rgba(25,20,13,.94);
  stroke-width: 2.6px;
  paint-order: stroke fill;
}

.cuthelan-map-region.ocean text {
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 5.1px;
  fill: rgba(199,220,226,.92);
  stroke: rgba(11,26,35,.95);
  stroke-width: 2.4px;
}

/* -------------------------------------------------------------------------
   Shared POI decoration
   BlueMap's original detail stays intact and is shown only when clicked.
   ------------------------------------------------------------------------- */
.cuthelan-decorated-poi {
  position: relative !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

.cuthelan-decorated-poi > .bm-marker-poi-label {
  display: none !important;
}

.cuthelan-decorated-poi.bm-marker-highlight > .bm-marker-poi-label {
  display: block !important;
}

.cuthelan-nameplate {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - var(--cuthelan-name-lift, 29px)));
  width: max-content;
  max-width: 190px;
  padding: 1px 4px;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: rgba(255,255,255,.99);
  background: transparent;
  border: 0;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-size: 13px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .65px;
  line-height: 1.05;
  text-shadow:
    0 2px 1px rgba(0,0,0,1),
    1px 0 1px rgba(0,0,0,.96),
    -1px 0 1px rgba(0,0,0,.96),
    0 0 5px rgba(0,0,0,.82);
}

.cuthelan-decorated-poi.bm-marker-highlight > .cuthelan-nameplate {
  opacity: 0;
  visibility: hidden;
}

.cuthelan-decorated-poi > .bm-marker-poi-icon {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50% !important;
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.88))
    drop-shadow(0 0 4px rgba(0,0,0,.48));
}

/* Town tiers use the user's exact icons, tightly cropped and centred. */
.cuthelan-towny-home.cuthelan-tier-settlement {
  --cuthelan-icon-size: 38px;
  --cuthelan-name-lift: 29px;
}
.cuthelan-towny-home.cuthelan-tier-town {
  --cuthelan-icon-size: 44px;
  --cuthelan-name-lift: 32px;
}
.cuthelan-towny-home.cuthelan-tier-city {
  --cuthelan-icon-size: 48px;
  --cuthelan-name-lift: 34px;
}

.cuthelan-towny-home > .bm-marker-poi-icon {
  width: var(--cuthelan-icon-size) !important;
  height: var(--cuthelan-icon-size) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.cuthelan-towny-home > .cuthelan-nameplate {
  font-size: 13px;
}

/* World-city / outpost / landmark labels such as Werfort or Shimmershore. */
.cuthelan-atlas-poi {
  --cuthelan-name-lift: var(--cuthelan-landmark-lift, 27px);
}

.cuthelan-atlas-poi > .cuthelan-nameplate {
  font-size: 12px;
  letter-spacing: .7px;
}

.cuthelan-outpost-poi > .cuthelan-nameplate {
  font-size: 11.5px;
  color: rgba(241,238,226,.98);
}

@media (max-width: 575.98px) {
  #cuthelan-atlas-brand {
    top: 42px;
    padding: 5px 8px 5px 6px;
  }
  #cuthelan-atlas-brand img { width: 25px; height: 25px; }
  .cuthelan-brand-name { font-size: 11px; }
  .cuthelan-brand-sub { font-size: 7px; }
  .cuthelan-nameplate { max-width: 150px; font-size: 11px; }
}


/* =========================================================================
   v21 — parchment BlueMap theme
   No blur effects and no animation loops: one lightweight compositing pass.
   ========================================================================= */

/* Warm, desaturated atlas treatment for the actual rendered world only. */
#map-container {
  background: #827659 !important;
}

#map-container canvas {
  filter:
    saturate(.68)
    sepia(.16)
    brightness(.93)
    contrast(.96);
}

/* Very light paper wash. Kept static and pointer-transparent. */
#map-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    linear-gradient(rgba(121, 96, 56, .08), rgba(121, 96, 56, .08)),
    radial-gradient(circle at 50% 42%, transparent 48%, rgba(40,31,18,.13) 100%);
}

/* Keep BlueMap marker/UI layers above the wash. */
#app {
  position: relative;
  z-index: 40;
}

/* BlueMap zoom controls: compact parchment tiles in the upper-left. */
#zoom-buttons {
  top: 9px !important;
  left: 9px !important;
  gap: 2px !important;
}

#zoom-buttons .svg-button,
.control-bar .svg-button,
.control-bar .menu-button {
  border: 1px solid rgba(75, 61, 39, .38) !important;
  border-radius: 2px !important;
  background: rgba(229, 220, 196, .86) !important;
  box-shadow:
    0 2px 7px rgba(24,19,12,.18),
    inset 0 1px rgba(255,255,255,.42) !important;
  color: #3b3020 !important;
}

#zoom-buttons .svg-button:hover,
.control-bar .svg-button:hover,
.control-bar .menu-button:hover {
  background: rgba(242, 234, 213, .94) !important;
}

#zoom-buttons .svg-button svg,
.control-bar .svg-button svg,
.control-bar .menu-button svg {
  fill: #423622 !important;
  stroke: #423622;
}

/* BlueMap's lower control strip becomes a subdued parchment HUD. */
.control-bar {
  border-top: 1px solid rgba(74, 60, 38, .28) !important;
  background: linear-gradient(
    90deg,
    rgba(211, 198, 165, .70),
    rgba(211, 198, 165, .27) 72%,
    transparent
  ) !important;
  box-shadow: 0 -2px 10px rgba(28,22,13,.08) !important;
}

.control-bar .space {
  opacity: .35;
}

.control-bar .pos-input,
.control-bar input {
  color: #3c3120 !important;
  background: rgba(229, 220, 196, .80) !important;
  border-color: rgba(75,61,39,.34) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

/* Large decorative compass replaces the tiny built-in compass visually. */
.control-bar .compass {
  opacity: .25 !important;
}

/* Side menu/panels remain readable but fit the atlas palette. */
.side-menu,
.side-menu .content,
.side-menu .title {
  color: #33291a !important;
}

.side-menu {
  background: rgba(229, 220, 196, .94) !important;
  border-right: 1px solid rgba(75,61,39,.33) !important;
  box-shadow: 5px 0 18px rgba(25,20,12,.18) !important;
}

.side-menu .title {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: .04em;
}

/* Region names get a parchment-friendly ivory instead of cool white. */
.cuthelan-map-region text {
  fill: rgba(239, 225, 188, .97);
  stroke: rgba(43, 34, 22, .96);
}

.cuthelan-map-region.ocean text {
  fill: rgba(221, 226, 216, .94);
  stroke: rgba(38, 42, 36, .95);
}

/* Marker shadows slightly stronger against the muted map. */
.cuthelan-decorated-poi > .bm-marker-poi-icon {
  filter:
    drop-shadow(0 2px 1px rgba(20,16,10,.96))
    drop-shadow(0 0 5px rgba(20,16,10,.56)) !important;
}

.cuthelan-nameplate {
  color: rgba(250, 244, 225, .99);
  text-shadow:
    0 2px 1px rgba(23,18,11,1),
    1px 0 1px rgba(23,18,11,.97),
    -1px 0 1px rgba(23,18,11,.97),
    0 0 5px rgba(23,18,11,.86);
}

@media (max-width: 700px) {
  #cuthelan-compass-rose {
    width: 104px;
    height: 104px;
    top: 10px;
    right: 10px;
  }

  #cuthelan-atlas-brand {
    top: 7px;
    padding: 5px 10px 6px;
  }

  .cuthelan-clock-sub {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #map-container canvas,
  #cuthelan-compass-rose {
    transition: none !important;
  }
}


/* =========================================================================
   v22 — organised parchment navbar
   ========================================================================= */

/*
 * BlueMap's own control bar stays functional, but visually becomes one
 * uninterrupted simple strip. The custom clock is centred above the same bar.
 */
.control-bar {
  min-height: 40px !important;
  box-sizing: border-box !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(74, 60, 38, .34) !important;
  background: rgba(204, 192, 160, .86) !important;

  box-shadow:
    0 2px 8px rgba(25,20,12,.16),
    inset 0 -1px rgba(255,255,255,.20) !important;
}

/* Individual controls are flat and consistent instead of separate heavy cards. */
.control-bar .svg-button,
.control-bar .menu-button,
.control-bar .pos-input,
.control-bar input {
  border-color: rgba(75,61,39,.24) !important;
  border-radius: 1px !important;
  background: rgba(231, 222, 199, .60) !important;
  box-shadow: none !important;
  color: #3c3120 !important;
}

.control-bar .svg-button:hover,
.control-bar .menu-button:hover {
  background: rgba(243, 235, 214, .82) !important;
}

/* Clock belongs to the bar and gets a reserved compact centre footprint. */
#cuthelan-atlas-brand {
  top: 3px !important;
  min-width: 108px;
  padding: 5px 13px 5px !important;

  border-color: rgba(75,61,39,.30) !important;
  background: rgba(225, 215, 190, .88) !important;
  box-shadow:
    0 1px 5px rgba(25,20,12,.16),
    inset 0 1px rgba(255,255,255,.30) !important;
}

/* Zoom stack starts below the navbar rather than colliding with left controls. */
#zoom-buttons {
  top: 50px !important;
  left: 10px !important;
  gap: 2px !important;
}

#zoom-buttons .svg-button {
  border: 1px solid rgba(75,61,39,.31) !important;
  border-radius: 2px !important;
  background: rgba(229,220,196,.86) !important;
  box-shadow: 0 2px 6px rgba(25,20,12,.14) !important;
}

/* We now supply the large working compass, so the native mini compass can vanish. */
.control-bar .compass {
  display: none !important;
}

/* Give navbar controls room without covering the central clock on normal desktop widths. */
@media (min-width: 901px) {
  .control-bar {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #cuthelan-atlas-brand {
    max-width: 132px;
  }
}

/* Narrow layouts: compass becomes smaller and the clock simplifies. */
@media (max-width: 900px) {
  #cuthelan-compass-rose {
    top: 50px;
    right: 10px;
    width: 118px;
    height: 118px;
  }

  #cuthelan-atlas-brand {
    min-width: 76px;
    padding: 5px 8px !important;
  }

  .cuthelan-clock-sub {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  #cuthelan-atlas-brand {
    top: 3px !important;
  }

  #cuthelan-compass-rose {
    top: 48px;
    width: 92px;
    height: 92px;
  }

  #zoom-buttons {
    top: 47px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cuthelan-compass-rose > img {
    transition: none !important;
  }
}


/* =========================================================================
   v23 — navbar alignment, coordinate colours, void palette, minor labels
   ========================================================================= */

/* Clock panel sits exactly inside the 40px top bar. */
#cuthelan-atlas-brand {
  top: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 13px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(225, 215, 190, .88) !important;
}

#cuthelan-atlas-brand .cuthelan-clock-icon,
#cuthelan-atlas-brand .cuthelan-clock-copy {
  align-self: center;
}

/* X / Y / Z prefix blocks: same family as the bar, one shade darker. */
.control-bar .position-input .number-input .label {
  display: inline-flex !important;
  align-items: center !important;
  align-self: stretch !important;
  padding: 0 7px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  color: #31291c !important;
  background: rgba(170, 159, 128, .96) !important;
  border-right: 1px solid rgba(71, 59, 39, .26) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
}

.control-bar .position-input .number-input input {
  background: rgba(204, 192, 160, .86) !important;
}

/* Fallback around the WebGL canvas; actual BlueMap void is set in JS. */
html,
body,
#map-container {
  background-color: #403a2c !important;
}

/* Smaller internal realm / regional names. */
.cuthelan-map-region.subregion {
  opacity: .76;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.58));
}

.cuthelan-map-region.subregion text {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: 4.1px;
  fill: rgba(236, 222, 188, .88);
  stroke: rgba(38, 30, 20, .88);
  stroke-width: 2.2px;
}

/* Seas, bays and straits: less prominent than full oceans. */
.cuthelan-map-region.sea {
  opacity: .67;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.50));
}

.cuthelan-map-region.sea text {
  font-size: 21px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 4.2px;
  fill: rgba(217, 224, 215, .84);
  stroke: rgba(35, 40, 34, .82);
  stroke-width: 2px;
}

/* VASTALA is intentionally a major land label, matching ANARION/etc. */

@media (max-width: 900px) {
  #cuthelan-atlas-brand {
    top: 0 !important;
    height: 40px !important;
  }
}

@media (max-width: 575.98px) {
  #cuthelan-atlas-brand {
    top: 0 !important;
    height: 40px !important;
  }
}


/* =========================================================================
   v24 — individual region-label tuning
   ========================================================================= */

/* Per-label scale supplied by the region definition. */
.cuthelan-map-region.land text {
  font-size: calc(35px * var(--region-font-scale, 1)) !important;
}

.cuthelan-map-region.subregion text {
  font-size: calc(25px * var(--region-font-scale, 1)) !important;
}

.cuthelan-map-region.sea text {
  font-size: calc(21px * var(--region-font-scale, 1)) !important;
}

.cuthelan-map-region.ocean text {
  font-size: calc(30px * var(--region-font-scale, 1)) !important;
}


/* =========================================================================
   v25 — exact toolbar centre + repaired coordinate blocks
   ========================================================================= */

/* Clock is now a child of BlueMap's actual bar. */
.control-bar {
  position: relative !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

.control-bar #cuthelan-atlas-brand {
  position: absolute !important;
  z-index: 50 !important;
  left: 50% !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;

  height: 40px !important;
  min-height: 40px !important;
  min-width: 108px !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 0 13px !important;
  transform: translateX(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-left: 1px solid rgba(75,61,39,.23) !important;
  border-right: 1px solid rgba(75,61,39,.23) !important;
  border-radius: 0 !important;

  background: rgba(225,215,190,.88) !important;
  box-shadow: none !important;
}

/*
 * Repair BlueMap's coordinate section as one continuous bar.
 * Make every nested wrapper parchment first, then darken only the
 * little X/Y/Z prefix cell.
 */
.control-bar .position-input,
.control-bar .number-input,
.control-bar .position-input *,
.control-bar .number-input * {
  box-sizing: border-box !important;
}

.control-bar .position-input,
.control-bar .number-input {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;

  background: rgba(204,192,160,.86) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Remove the black wrapper strips visible between X/Z and their values. */
.control-bar .position-input > div,
.control-bar .number-input > div,
.control-bar .position-input > span,
.control-bar .number-input > span {
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(204,192,160,.86) !important;
  box-shadow: none !important;
}

/* X/Y/Z prefix cells — one shade darker than the main bar. */
.control-bar .position-input .label,
.control-bar .number-input .label,
.control-bar .position-input label,
.control-bar .number-input label,
.control-bar .position-input > span:first-child,
.control-bar .number-input > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  min-height: 40px !important;
  min-width: 25px !important;

  margin: 0 !important;
  padding: 0 7px !important;

  color: #30281b !important;
  background: rgba(164,152,120,.98) !important;
  border: 0 !important;
  border-right: 1px solid rgba(69,57,37,.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  line-height: 40px !important;
}

/* Actual numeric values. */
.control-bar .position-input input,
.control-bar .number-input input,
.control-bar input[type="number"] {
  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 9px !important;

  color: #3c3120 !important;
  background: rgba(204,192,160,.86) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  font-family: Georgia, "Times New Roman", serif !important;
  line-height: 40px !important;
}

/* Force any pseudo separators off. */
.control-bar .position-input::before,
.control-bar .position-input::after,
.control-bar .number-input::before,
.control-bar .number-input::after {
  content: none !important;
  display: none !important;
}

/* Previous mobile overrides must not shift the clock off the bar. */
@media (max-width: 900px) {
  .control-bar #cuthelan-atlas-brand {
    left: 50% !important;
    top: 0 !important;
    height: 40px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 575.98px) {
  .control-bar #cuthelan-atlas-brand {
    left: 50% !important;
    top: 0 !important;
    height: 40px !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================================
   v26 — NPC town + Towny town icon split
   ========================================================================= */

/* Hand-placed NPC/world towns: Shimmershore, Werfort, Fort Iskharad, etc. */
.cuthelan-npc-town {
  --cuthelan-name-lift: 35px !important;
}

.cuthelan-npc-town > .bm-marker-poi-icon {
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.92))
    drop-shadow(0 0 5px rgba(0,0,0,.52)) !important;
}

/* Towny player towns use their separate uploaded town icon, same clean scale. */
.cuthelan-towny-home.cuthelan-tier-city {
  --cuthelan-icon-size: 48px !important;
  --cuthelan-name-lift: 35px !important;
}


/* =========================================================================
   v27 — larger town icons + sane popup width
   ========================================================================= */

/* Towny player towns */
.cuthelan-towny-home.cuthelan-tier-city {
  --cuthelan-icon-size: 68px !important;
  --cuthelan-name-lift: 46px !important;
}

/* NPC/world towns */
.cuthelan-npc-town {
  --cuthelan-name-lift: 46px !important;
}

.cuthelan-npc-town > .bm-marker-poi-icon {
  width: 68px !important;
  height: 68px !important;
}

/*
 * BlueMap's detail popup was collapsing because the marker root itself is 0px wide.
 * Give the highlighted detail box its own usable dimensions.
 */
.cuthelan-decorated-poi.bm-marker-highlight > .bm-marker-poi-label {
  display: block !important;

  width: max-content !important;
  min-width: 220px !important;
  max-width: 320px !important;

  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;

  padding: 9px 11px !important;
  line-height: 1.18 !important;
}

/* Keep popup content from inheriting the zero-width marker container. */
.cuthelan-decorated-poi.bm-marker-highlight > .bm-marker-poi-label > * {
  max-width: 298px !important;
}


/* =========================================================================
   v28 — NPC-town HTML-marker support
   NPC towns share the major-region visibility band in JS.
   ========================================================================= */

.cuthelan-npc-html-town {
  position: relative !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.cuthelan-npc-html-content {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* BlueMap HTML markers use their world point as the top-left anchor. */
  transform: translate(-50%, -100%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;

  width: max-content !important;
  pointer-events: auto !important;
}

.cuthelan-npc-html-icon {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;

  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.94))
    drop-shadow(0 0 5px rgba(0,0,0,.58)) !important;
}

.cuthelan-npc-html-name {
  width: max-content !important;
  max-width: 190px !important;
  padding: 1px 4px !important;

  color: rgba(255,255,255,.99) !important;
  background: transparent !important;
  border: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant: small-caps !important;
  letter-spacing: .65px !important;
  line-height: 1.05 !important;
  text-align: center !important;

  text-shadow:
    0 2px 1px rgba(0,0,0,1),
    1px 0 1px rgba(0,0,0,.96),
    -1px 0 1px rgba(0,0,0,.96),
    0 0 5px rgba(0,0,0,.84) !important;

  pointer-events: none !important;
}