/* screens/map.js — «Карта»: посты на территории.

   Главное решение раскладки: карта ОДНА. В макете (docs/design/map/02-screens.md
   §2) так и нарисовано — общий снимок территории, поверх него четыре
   подписанных кластера локаций, в каждом два пина веток. Первая реализация
   разбила это на баннер плюс четыре отдельные карточки со своими снимками, и
   экран перестал читаться как одна территория: получилось «просто несколько
   картинок». Здесь возвращён исходный замысел.

   Снимок не растягивается во всю ширину экрана (владелец сказал это прямо —
   на полном растяжении качество спутниковой картинки плывёт): рамка
   ограничена по ширине и держит квадрат, потому что сам снимок квадратный
   2048×2048 и кадрировать его нечем. */

.map-canvas {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0A0A0C;
  border: 1px solid var(--edge);
}
.map-canvas-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.8) brightness(.92);
}

/* Кластер локации: подпись сверху, пины веток под ней. Позиционируется по
   центру своей точки на снимке — так подпись и пины не разъезжаются при
   любом размере карты, а координату задаёт только один якорь в JS. */
.map-cluster {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.map-cluster > * { pointer-events: auto; }
.map-cluster.locked { opacity: .6; }

.map-cluster-label {
  /* Подпись и табличка «заперто» — надписи, а не кнопки. Тач-цель пина
     (44px, канон) шире самой метки, и подпись соседнего кластера местами
     заходит в эту зону: без pointer-events:none она молча съедала бы тап по
     пину, ничего при этом не делая сама. */
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: rgba(10, 10, 12, .82);
  border: 1px solid var(--edge);
  white-space: nowrap;
}
.map-cluster-label > i { color: var(--gold-strong); font-size: 12px; }
.map-cluster-name {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}

/* Черепа опасности — вплотную друг к другу и сразу за названием, как на
   «Вылазках». В первой версии они стояли в шапке панели и разъезжались по
   всей её ширине: читалось как случайные значки, а не как шкала. */
.map-skulls { display: inline-flex; gap: 1px; margin-left: 2px; }
.map-skulls i { color: var(--red); font-size: 10px; }

.map-cluster-lock {
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: rgba(10, 10, 12, .82);
  border: 1px solid var(--edge);
  color: var(--muted); font-size: var(--font-min); white-space: nowrap;
}

/* Пин стоит на СВОЕЙ координате, а не в ряду под подписью локации: две ветки —
   это два разных объекта на снимке. Центрируем по самой метке, чтобы координата
   означала «сюда», а не «левый верхний угол». */
.map-pin-cell {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.map-pin-cap {
  font-size: var(--font-min); color: var(--text-2);
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  /* Переносим на вторую строку вместо многоточия: «Контейнерный д…» не
     сообщает ничего, а места на карте достаточно. */
  max-width: 92px; text-align: center; line-height: 1.15;
}

/* Три вида пина, тот же визуальный язык, что у узлов маршрута вылазки:
   пунктирный квадрат — «пока ничего», залитый золотой — занято,
   красный контур — сюда недавно заглядывали. */
.map-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0; background: transparent; border: none; cursor: pointer;
}
.map-pin .mark {
  width: 18px; height: 18px;
  border: 2px dashed var(--gold);
  background: rgba(10, 10, 12, .72);
  /* Тёмный ореол вокруг: пин стоит на спутниковом снимке, где фон бывает
     любым, и без него пунктирный квадрат тонет в застройке. */
  box-shadow: 0 0 0 2px rgba(8, 8, 10, .85), 0 0 6px rgba(0, 0, 0, .9);
}
.map-pin:hover .mark { border-color: var(--gold-strong); }
.map-pin.occupied .mark {
  border: 2px solid var(--gold-strong);
  background: #B0894A;
}
.map-pin.alert .mark {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 8px rgba(200, 70, 60, .8);
}

.map-legend {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 10px;
}
.map-legend-item { display: inline-flex; align-items: center; gap: 4px; }
/* В легенде пин — картинка, а не кнопка: тач-цель ей ни к чему. */
.map-legend .map-pin { width: 20px; height: 20px; cursor: default; }
.map-legend .map-pin .mark { width: 12px; height: 12px; }

/* ---------- список точек под картой ---------- */

.map-points-loc {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 0 4px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.map-points-loc > i { color: var(--gold-strong); font-size: 12px; }
.map-point-row { cursor: pointer; }
.map-point-row.locked { cursor: default; opacity: .6; }

/* Подсказка про список — только на телефоне, где подписи сняты с карты.
   Базовое правило стоит ВЫШЕ медиазапроса: при равной специфичности
   побеждает нижнее, и display:none перебивал бы display:block. */
.map-hint-mobile { display: none; text-align: center; margin-top: 8px; }

@media (max-width: 700px) {
  /* На телефоне карта занимает всю доступную ширину, но остаётся квадратной:
     кластеры считаются в процентах и переезжают вместе с ней.

     Подписи локаций и названия точек на телефоне СНЯТЫ с карты. При ширине
     карты около 330 пикселей четыре подписи налезают друг на друга — это
     измерено, а не предположено. Названия при этом никуда не деваются: они
     стоят в списке под картой, сгруппированные по локациям с той же иконкой
     и той же шкалой черепов, а тап по пину открывает карточку с названием.
     Табличка «РАДИОСТОЛ УР. N» остаётся: без неё непонятно, почему точка
     не нажимается. */
  .map-canvas { max-width: 100%; }
  .map-cluster-label { display: none; }
  .map-pin-cap { display: none; }
  .map-legend { gap: 10px; }
  .map-hint-mobile { display: block; }

  /* Пины на телефоне — ПОКАЗ, а не кнопки. Причина измеренная: при ширине
     карты около 330 пикселей восемь тач-целей по 44px физически налезают
     друг на друга (у «Цехов» и «Периметра» центры расходятся всего на 23px),
     и тап попадает в ту, что оказалась выше в разметке. Уменьшать цель ниже
     44px нельзя — это канон. Поэтому карта тут отвечает на «что где и что
     занято», а нажимается список под ней: его строки и так ≥44px и
     открывают ту же карточку. */
  .map-pin-cell { pointer-events: none; }
  .map-pin { cursor: default; }
  .map-pin-cell .map-pin { width: 24px; height: 24px; }
}