/* map.css — единые стили карты участников для ВСЕХ страниц (см. map.js).
   Цвета через CSS-переменные страницы (--cyan/--line/--ink/--muted/--shadow-cyan).
   Высоту карты страница задаёт сама (inline style или своё правило на .hov-map). */

/* Бренд-вордмарк «HackOnVibe» в подписи карты — всегда mixed-case даже в капс-слоте. */
.brand-name {
  text-transform: none;
}

.hov-map-frame {
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(14, 17, 22, 0.94);
  box-shadow: inset 0 0 60px rgba(59, 91, 255, 0.12);
}

.hov-map {
  width: 100%;
  height: 360px;
  /* Мобайл: палец вертикально скроллит страницу ПОВЕРХ карты. jsvectormap ставит на свой контейнер
     ИНЛАЙНОВЫЙ touch-action:none, который перебивал наше внешнее правило без !important → свайп над
     картой не листал. Поэтому pan-y объявляем с !important (внешнее !important бьёт инлайн): палец
     вертикально листает страницу, зум на тач — только кнопками +/− (pan-y запрещает пинч; тач-пан не
     вяжется — bindTouchEvents:false в map.js); мышиный пан на десктопе не затронут (touch-action
     влияет лишь на тач). Подсветка стран по тапу/наведению при этом сохраняется. */
  touch-action: pan-y !important;
}

/* Контейнер и svg, на которые jsvectormap кладёт инлайновый touch-action:none — перебиваем !important. */
.hov-map .jvm-container,
.hov-map .jvm-container svg,
.hov-map svg {
  touch-action: pan-y !important;
}

/* увеличенное при наведении/зуме не должно вылезать за рамку карты */
.hov-map-frame svg {
  overflow: hidden;
}

/* Единственный источник заливки — стайлшит (никакого inline fill/series), чтобы глобальный
   рестайл (Dark Reader, forced-colors, инверсия) перекрашивал ВСЕ страны одинаково. */
.hov-map path[data-code] {
  fill: #1b222c;
}

.hov-map path.is-participant {
  fill: #d8c08a;
  cursor: pointer;
}

.hov-map path.is-hover {
  fill: var(--cyan) !important;
  stroke: rgba(59, 91, 255, 0.9) !important;
  stroke-width: 1 !important;
}

.hov-map-frame .jvm-tooltip {
  background: #161b22;
  border: 1px solid rgba(59, 91, 255, 0.6);
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-weight: 700;
  box-shadow: var(--shadow-cyan);
}

/* Кнопки зума +/− — по-Google: крупные, в правом-нижнем углу, глиф по центру. */
.hov-map-frame .jvm-zoom-btn {
  width: 40px;
  height: 40px;
  left: auto;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(14, 17, 22, 0.9);
  border: 1px solid rgba(59, 91, 255, 0.5);
  color: var(--cyan);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(59, 91, 255, 0.18);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Специфичность (0,3,0) — жёстко выигрывает у собственных правил jsvectormap
   `.jvm-zoom-btn.jvm-zoomin{top:10px}` / `.jvm-zoomout{top:30px}` (0,2,0). Раньше наши правила были (0,2,0),
   т.е. НИЧЬЯ, решаемая порядком подключения → на части браузеров/кэша их `top` побеждал и кнопки
   «сваливались вверх». Держим их внизу-справа независимо от порядка стилей. */
.hov-map-frame .jvm-zoom-btn.jvm-zoomin {
  top: auto;
  bottom: 62px;
}

.hov-map-frame .jvm-zoom-btn.jvm-zoomout {
  top: auto;
  bottom: 14px;
}

.hov-map-frame .jvm-zoom-btn:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-cyan);
}

/* Легенда стран-участниц под картой. */
.hov-legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.hov-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}

.hov-legend .dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}