<style>
html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #1c1c1c;
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: flex-start; /* Top aligned */
  min-height: 100vh;
  overflow: auto;
}

.outer-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.voluspa-container {
  position: relative;
  width: 2260px;
  height: 2061px;
}

#map_vol {
  position: absolute;
  top: 0;
  left: 0;
  width: 2260px;
  height: 2061px;
  display: block;
}


.map-nav-but {
  top: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  position: absolute;
  z-index: 9999;
}

.nav-btn-hm,
.nav-btn-pv, .nav-btn-1st {
  background-color: rgba(41, 41, 41, 0.9);
  border: 2px solid #fbffbb;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Cinzel Decorative', cursive;
  font-size: 18px;
  color: #fbffbb;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-btn-hm:hover,
.nav-btn-pv:hover, .nav-btn-1st:hover {
  background-color: rgba(251, 255, 187, 0.2);
  transform: scale(1.05);
}

#voluspa-cont {
  position: absolute;
  left: 0; top: 0;
  width: 2260px;   /* match #map_vol */
  height: 2061px;  /* match #map_vol */
  z-index: 101;    /* above the image */
}

/* Image shouldn't block pointer events */
#map_vol { pointer-events: none; }

/* Dots */
.map-dot, .wyrd-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 102;
}

/* Circles */
.map-dot {
  width: 20px; height: 20px;
  background: red;
  border: 2px solid black;    /* black stroke */
  border-radius: 50%;
}

.dot-wrap{
  position:absolute;
  width:32px;height:32px;
  transform:translate(-50%,-50%);
  z-index:102;
}
.wyrd-dot{
  position:absolute; inset:2px; /* center inside wrapper */
  background:#000;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* CSS-only tooltip from data-summary */
.map-dot::after, .dot-wrap::after{
  content: attr(data-summary);
  position: absolute;
  left: 28px;
  top: -20px;;
  padding: 4px 8px;
  background: rgba(0,0,0,0.9);
  color: #fff;
  font-size: 48px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 103;
}

.map-dot:hover::after,
.dot-wrap:hover::after{ opacity:1; }{
  opacity: 1;
}

/* Tooltip style */
.map-tooltip {
  position: fixed;
  padding: 4px 8px;
  background: rgba(0,0,0,0.9);
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
</style>