/* Invisible clickable regions */
.valblanc-click     { left: 33.35%; top: 48.37%; }
.fleuret-click      { left: 36.13%; top: 48.45%; }
.dreibach-click     { left: 37.85%; top: 49.00%; }
.fortresse-click    { left: 39.55%; top: 48.05%; }
.grenzwacht-click   { left: 32.45%; top: 49.20%; }
.hautville-click    { left: 31.83%; top: 46.85%; }
.blutsumpf-click    { left: 34.30%; top: 46.25%; }
.steinhof-click     { left: 34.85%; top: 50.05%; }


body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  background-color: #477573;
}

#centerButton {
  position: absolute;
  font-size:20px;
  border-radius:10px;
  top: 10px;
  left: 10px;
  z-index: 10;
  background-color: black;
  color:white;
  border: 1px solid #000;
  padding: 8px 12px;
  cursor: pointer;
}

iframe {
  flex: 0 0 400px;
  height: 100vh;
  background: transparent; /* Make iframe element background transparent */
  border: none;
  overflow: hidden;
}

#info-frame {
  position: fixed;
  top: 2vh;
  right: 2vh;
  width: 400px;
  height: 95vh;
  padding:0px;
  margin:0 auto;
  border: none;
  z-index: 1001; 
  background: transparent; 
  overflow: hidden;  
  pointer-events: none;
}

#iframe-container {
  position: fixed;
  top: 2vh;
  right: 2vh;
  width: 400px;
  height: 95vh;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background-image: url('Cities/Papyurs.jpeg'); /* Background behind iframe */
  background-size: cover;
  background-position: center;
  z-index: 1000;
  display: none;
  overflow: hidden;
}


#main-content {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

#map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

#map-wrapper.dragging {
  cursor: grabbing;
}

.hotspots {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; /* allow events to bubble through */
}

.hotspots div {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.4);
  pointer-events: auto; /* re-enable events only on actual hotspots */
  cursor: pointer;
  z-index: 10;
}