/* wgf-worldmap - POI pin overlay on the zone worldmap composite (map-poi-pins lane).
   In-game style: a small squared gold diamond per landmark, built in the site's
   canonical gold (--wgf-gold-primary #f0c040, static/css/_tokens.css). Pins are
   percent-positioned inside the zero-CLS figure, so they ride the responsive image
   at every width. Labels reveal on hover/focus with pure CSS - no JS, no gradients,
   no rounded pills, no backdrop-filter. */

.wgf-worldmap {
  position: relative;
  margin: 0;
}

.wgf-worldmap img {
  display: block;
  width: 100%;
  height: auto;
}

.wgf-worldmap__pin {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  cursor: default;
}

/* The marker itself: a squared diamond (rotated square), gold fill, dark rim. */
.wgf-worldmap__pin::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--wgf-gold-primary, #f0c040);
  border: 1px solid var(--wgf-gold-shadow, #352808);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.wgf-worldmap__pin:hover::before,
.wgf-worldmap__pin:focus::before {
  background: var(--wgf-gold-bright, #ffd978);
}

.wgf-worldmap__pin:focus {
  outline: none;
}

.wgf-worldmap__pin:focus-visible::before {
  box-shadow: 0 0 0 2px var(--wgf-gold-primary, #f0c040);
}

/* Name label: hidden until hover/focus, floats above the pin, never catches the
   pointer, never shifts layout. Dark plate + gold text, same family as tooltips. */
.wgf-worldmap__label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -4px);
  padding: 4px 7px;
  white-space: nowrap;
  background: #0d0a05;
  border: 1px solid var(--wgf-border-strong, rgba(240, 192, 64, 0.42));
  color: var(--wgf-gold-bright, #ffd978);
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

.wgf-worldmap__pin:hover,
.wgf-worldmap__pin:focus {
  z-index: 3;
}

.wgf-worldmap__pin:hover .wgf-worldmap__label,
.wgf-worldmap__pin:focus .wgf-worldmap__label {
  opacity: 1;
  visibility: visible;
}