/* контейнер растягивается по ширине, высоту задаёт SVG */
.map-wrapper {
  width: 100%;
  /* убрали aspect-ratio и overflow:hidden */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; /* чтобы даже на узком экране остались поля */
}

/* SVG масштабируется под ширину контейнера, сохраняя своё соотношение сторон */
.map-wrapper svg {
  width: 100%;
  height: auto;
  max-height: 90vh; /* не вылезает за пределы экрана по высоте */
  display: block;
}

/* страны */
.country {
  transition: fill .2s ease;
}
.country--blocked {
  fill: #8d8c8c;
  cursor: default;
}
.country--active {
  fill: var(--mono-dark);
  cursor: pointer;
}
.country--active:hover {
  fill: #490000;
}

.country--hover,
.country--active:hover {
  fill: #490000 !important;
}

/* флаги внутри SVG */
.flag-marker {
  pointer-events: all;
  image-rendering: pixelated;
  cursor: pointer;
}

.flag-marker image {
  /* для современного рендера SVG: */
  clip-path: circle(50% at 50% 50%);
  image-rendering: auto;
}

/* тултип поверх всего */
#map-tooltip {
  position: absolute;
  z-index: 10;
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: .3em .6em;
  font-size: .875rem;
  border-radius: .25rem;
  transform: translate(-50%, -120%);
  pointer-events: none;
  white-space: nowrap;
}