.user-pin-icon {
  background: transparent;
  border: 0;
}

.user-pin {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 26px;
  height: 26px;
  background: linear-gradient(145deg, #c8fbff 0%, #4fd8e8 55%, #0e9db8 100%);
  border: 2px solid #eaffff;
  border-radius: 4px;
  box-shadow:
    0 0 14px rgb(79 216 232 / 85%),
    0 0 4px rgb(143 244 255 / 90%),
    inset 0 0 6px rgb(255 255 255 / 45%);
  transform: translateX(-50%) rotate(45deg);
}

.user-pin::after {
  position: absolute;
  inset: 7px;
  content: "";
  background: #04222c;
  border-radius: 2px;
}

.user-pin-coords {
  position: absolute;
  top: -24px;
  left: 50%;
  padding: 2px 7px;
  color: #8ff4ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  background: rgb(3 16 24 / 78%);
  border: 1px solid rgb(79 216 232 / 55%);
  border-radius: 4px;
  transform: translateX(-50%);
}

.palpedia-marker-icon {
  background: transparent;
  border: 0;
}

.palpedia-poi-icon {
  background: transparent;
  border: 0;
}

.area-level-label {
  background: transparent;
  border: 0;
  pointer-events: none;
}

.area-level-label span {
  display: block;
  color: var(--area-level-color);
  font-size: 13px;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
  text-shadow:
    -1px -1px 0 #071116,
    1px -1px 0 #071116,
    -1px 1px 0 #071116,
    1px 1px 0 #071116,
    0 0 4px #000;
  white-space: nowrap;
}

.area-name-icon {
  width: 240px !important;
  pointer-events: auto;
}

.area-name-marker {
  display: inline-block;
  min-width: 150px;
  padding: 1px 10px 3px;
  overflow: hidden;
  color: #72efff;
  font-size: 15px;
  font-weight: 650;
  line-height: 22px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #00131a, 0 0 3px #00131a;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(2 21 29 / 72%), rgb(2 21 29 / 10%));
  border-bottom: 1px solid rgb(104 231 244 / 78%);
}

.area-name-icon:hover .area-name-marker,
.area-name-icon:focus-visible .area-name-marker,
.area-name-marker.is-selected {
  color: #eaffff;
  border-bottom-color: #eaffff;
}

.poi-marker {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  opacity: .9;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 88%)) drop-shadow(0 0 2px rgb(0 20 28 / 72%));
  transition: opacity 130ms ease, transform 130ms ease, filter 130ms ease;
}

.poi-marker-images {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
}

.poi-marker-images img {
  position: absolute;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 94%));
}

.poi-marker.is-pal-result .poi-marker-images img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 92%)) drop-shadow(0 0 3px rgb(77 224 243 / 34%));
}

.poi-alpha-badge {
  position: absolute;
  z-index: 3;
  right: -3px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 92%));
  pointer-events: none;
}

.palpedia-poi-icon:hover .poi-marker,
.palpedia-poi-icon:focus-visible .poi-marker,
.poi-marker.is-selected {
  opacity: 1;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 88%)) drop-shadow(0 0 5px var(--poi-color));
  transform: scale(1.14);
}

.palpedia-poi-icon:focus-visible { outline: none; }

.marker-shell {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  transform-origin: center;
}

.map-marker {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: rgb(3 18 26 / 94%);
  border: 2px solid #eaffff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 55%), 0 0 0 2px rgb(16 216 228 / 45%);
  transition: transform 120ms ease;
}

.marker-shell:hover .map-marker,
.marker-shell.is-selected .map-marker,
.palpedia-marker-icon:focus-visible .map-marker { transform: scale(1.17); border-color: var(--amber); box-shadow: 0 3px 13px rgb(0 0 0 / 60%), 0 0 0 3px rgb(255 200 65 / 35%); }
.map-marker img { width: 26px; height: 26px; object-fit: contain; }
.map-marker--tower { border-radius: 8px; }
.map-marker--watchtower { border-color: #ffe183; box-shadow: 0 3px 10px rgb(0 0 0 / 55%), 0 0 0 2px rgb(255 200 65 / 38%); }

.map-marker--travel {
  width: 46px;
  height: 46px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 74%));
}

.map-marker--travel img {
  width: 46px;
  height: 46px;
  filter: brightness(0) saturate(100%) invert(76%) sepia(78%) saturate(1294%) hue-rotate(146deg) brightness(98%) contrast(95%);
}

.marker-shell:hover .map-marker--travel,
.marker-shell.is-selected .map-marker--travel,
.palpedia-marker-icon:focus-visible .map-marker--travel {
  border-color: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 78%)) drop-shadow(0 0 2px rgb(28 223 241 / 38%));
}

.marker-selection-frame {
  position: absolute;
  inset: 3px;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgb(10 219 239 / 74%));
  transform: scale(.76);
  transition: opacity 120ms ease, transform 150ms ease;
  pointer-events: none;
}

.marker-selection-frame i {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: #11ddf2;
  border-style: solid;
  border-width: 0;
}

.marker-selection-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 5px; border-left-width: 5px; }
.marker-selection-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 5px; border-right-width: 5px; }
.marker-selection-frame i:nth-child(3) { right: 0; bottom: 0; border-right-width: 5px; border-bottom-width: 5px; }
.marker-selection-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 5px; border-left-width: 5px; }

.marker-direction-cues {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgb(0 12 18 / 88%));
  pointer-events: none;
  transition: opacity 100ms ease;
}

.marker-direction-cues i {
  position: absolute;
  width: 11px;
  height: 11px;
  border-color: #f4ffff;
  border-style: solid;
  border-width: 4px 4px 0 0;
}

.marker-direction-cues i:nth-child(1) { top: -13px; left: 50%; transform: translateX(-50%) rotate(-45deg); }
.marker-direction-cues i:nth-child(2) { top: 50%; right: -13px; transform: translateY(-50%) rotate(45deg); }
.marker-direction-cues i:nth-child(3) { bottom: -13px; left: 50%; transform: translateX(-50%) rotate(135deg); }
.marker-direction-cues i:nth-child(4) { top: 50%; left: -13px; transform: translateY(-50%) rotate(225deg); }

.marker-shell:hover .marker-direction-cues,
.marker-shell.is-selected .marker-direction-cues,
.palpedia-marker-icon:focus-visible .marker-direction-cues { opacity: 1; }

.marker-shell:hover .marker-selection-frame,
.marker-shell.is-selected .marker-selection-frame,
.palpedia-marker-icon:focus-visible .marker-selection-frame { opacity: 1; transform: scale(1); }

.marker-shell:hover .marker-selection-frame,
.palpedia-marker-icon:focus-visible .marker-selection-frame {
  animation: marker-corner-breathe 920ms ease-in-out infinite;
}

.palpedia-marker-icon:focus-visible { outline: none; }

@keyframes marker-corner-breathe {
  0%, 100% { opacity: .82; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.08); }
}

#palworld-map[data-zoom-band="overview"] .marker-shell { transform: scale(.68); }
#palworld-map[data-zoom-band="overview"] .poi-marker { opacity: .78; transform: scale(.82); }
#palworld-map[data-zoom-band="overview"] .palpedia-poi-icon:hover .poi-marker,
#palworld-map[data-zoom-band="overview"] .palpedia-poi-icon:focus-visible .poi-marker,
#palworld-map[data-zoom-band="overview"] .poi-marker.is-selected { opacity: 1; transform: scale(.98); }

#palworld-map[data-zoom-band="close"] .poi-marker { transform: scale(.78); }
#palworld-map[data-zoom-band="close"] .palpedia-poi-icon:hover .poi-marker,
#palworld-map[data-zoom-band="close"] .palpedia-poi-icon:focus-visible .poi-marker,
#palworld-map[data-zoom-band="close"] .poi-marker.is-selected { transform: scale(.94); }

#palworld-map[data-zoom-band="exact"] .poi-marker { transform: scale(.68); }
#palworld-map[data-zoom-band="exact"] .palpedia-poi-icon:hover .poi-marker,
#palworld-map[data-zoom-band="exact"] .palpedia-poi-icon:focus-visible .poi-marker,
#palworld-map[data-zoom-band="exact"] .poi-marker.is-selected { transform: scale(.86); }

.leaflet-tooltip.map-label {
  width: 351px;
  max-width: min(351px, 52vw);
  padding: 0 34px 3px 10px;
  color: #76edf7;
  font-size: 22px;
  font-weight: 480;
  line-height: 1.1;
  background: linear-gradient(90deg, rgb(1 20 28 / 24%), transparent 88%);
  border: 0;
  border-bottom: 1px solid rgb(105 233 244 / 72%);
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 1px 2px #001219, 0 0 2px #001219;
}
.leaflet-tooltip.map-label::before { display: none; }
.leaflet-tooltip.map-label::after {
  position: absolute;
  right: 100%;
  bottom: -1px;
  width: 40px;
  height: 2px;
  background: rgb(105 233 244 / 76%);
  box-shadow: 0 0 3px rgb(25 220 238 / 36%);
  content: "";
  transform: rotate(-45deg);
  transform-origin: right center;
}

.leaflet-tooltip.poi-map-label {
  max-width: min(300px, 56vw);
  padding: 7px 11px 8px;
  color: #eaffff;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  background: linear-gradient(110deg, rgb(4 29 40 / 96%), rgb(7 51 66 / 92%));
  border: 1px solid rgb(98 226 240 / 72%);
  border-radius: 3px;
  box-shadow: 0 5px 18px rgb(0 8 13 / 58%), inset 3px 0 #19e7f4;
}

.leaflet-tooltip.poi-map-label::before {
  border-top-color: rgb(98 226 240 / 72%);
}

.leaflet-overlay-pane canvas {
  filter: drop-shadow(0 0 3px rgb(26 224 240 / 38%));
}