:root {
  --ink: #1f2933;
  --land-stroke: #ffffff;
  --sea: #eaf1f8;
  --hover: #5489ec;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);

  -webkit-font-smoothing: antialiased;
}

.map-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;

  overflow: hidden;
}
#map { width: 100%; height: 100%; display: block; }

.map-status {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 14px; color: #5b6b7b; pointer-events: none; z-index: 5;
}
.map-status.is-hidden { display: none; }

/* Регионы */
.region {
  stroke: var(--land-stroke);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: fill .12s ease;
  vector-effect: non-scaling-stroke;
}

/* Активные регионы — реагируют на наведение, появляется тултип */
.region.is-highlight {
  cursor: pointer;
}
.region.is-highlight:hover { fill: var(--hover) !important; }

/* Неактивные регионы — вообще никакой реакции */
.region.is-inactive {
  pointer-events: none;
  cursor: default;
}

/* Контур страны */
.outline {
  fill: none;
  stroke: #93a4b8;
  stroke-width: 1;
  stroke-linejoin: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* Тултип */
.tooltip {
  position: absolute; z-index: 30; pointer-events: none;
  background: rgba(23,32,42,.95); color: #fff; padding: 7px 11px; border-radius: 8px;
  font-size: 13px; line-height: 1.3; box-shadow: var(--shadow); max-width: 240px;
  transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap;
}
.tooltip b { font-weight: 600; }