/* Стили браузерного клиента карты maphub-pi-server.
   Портировано 1:1 из lib/server/map_http_server_map_html.part.dart (раздел <style>). */

/* Material Icons раздаём со своего сервера (/assets/fonts/), а не с CDN Google:
   иначе на клиенте у стола без интернета шрифт не догружается и метки-лигатуры
   показываются текстом «place»/«menu_book». Файл codepoint-only (без фичи 'liga'),
   поэтому map.js рисует иконки по кодпоинту (см. iconCpByName/miGlyph).
   font-display:block — до готовности шрифта значок невидим, без вспышки текста. */
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; src: url('/assets/fonts/MaterialIcons-Regular.woff2') format('woff2'), url('/assets/fonts/MaterialIcons-Regular.otf') format('opentype'); }
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; }

* { box-sizing: border-box; }
/* user-select/tap-highlight off: без этого drag/клик по карте выделяет картинку —
   браузер заливает весь <img> синим (выглядит как синий фильтр на карте). */
body { margin: 0; background: #000; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.zoom-controls { position: fixed; top: 12px; right: 12px; z-index: 10; display: flex; gap: 4px; }
.zoom-controls button { width: 40px; height: 40px; border: none; border-radius: 8px; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; font-size: 20px; }
.zoom-controls button:hover { background: rgba(255,255,255,0.25); }
.zoom-controls span { align-self: center; color: rgba(255,255,255,0.8); font-size: 14px; min-width: 48px; text-align: center; }
.pan-zoom { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; overflow: hidden; cursor: grab; }
.pan-zoom:active { cursor: grabbing; }
.pan-zoom-inner {
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}
/* Без container-type/size на flex-ребёнке (иначе cqh=0 и карта схлопывается). Явные vw/vh как во Flutter LayoutBuilder на весь вьюпорт. */
.map-wrap {
  position: relative;
  box-sizing: border-box;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
}
#mapImg, #mapVideo { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; background: #000; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
#mapVideoSeasonLayer,
#mapNightLayer,
#mapFogLayer,
#mapGridLayer {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
}
#mapVideoSeasonLayer {
  display: none;
  mix-blend-mode: screen;
  background: transparent;
}
#mapNightLayer {
  display: none;
}
#mapFogLayer {
  background:
    radial-gradient(ellipse 120% 100% at 50% 38%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 28%, rgba(185,205,228,0.22) 55%, rgba(148,168,195,0.5) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(175,192,215,0.38) 100%),
    radial-gradient(ellipse 70% 55% at 88% 92%, rgba(255,255,255,0) 20%, rgba(130,150,178,0.42) 100%);
}
#mapFogLayer.map-fog-on { opacity: 1; }
#mapRainLayer {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  display: block; width: 100%; height: 100%;
}
#mapRainLayer.map-rain-on { opacity: 1; }
#mapGridLayer { display: none; }
#mapGridLayer.map-grid-on { display: block; opacity: 1; }
.markers { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
/* Маркеры-иконки кроме границы — вдвое меньше (граница/explored_border без уменьшения). */
.marker { position: absolute; pointer-events: auto; transform: translate(-50%, -50%) scale(0.45); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.marker.border,
.marker.explored_border { transform: translate(-50%, -50%) scale(1); }
.marker .material-icons { font-size: 19px; color: inherit; }
.marker.squad { color: #ff5252; }
.marker.house { color: #ff9800; }
.marker.landmark { color: #4caf50; }
.marker.explored { color: #2196f3; font-size: 11px; width: 14px; height: 14px; }
.marker.explored .material-icons { font-size: 13px; }
.marker.normal { color: #90caf9; }
.marker.secret { color: #e040fb; }
/* Метки мастера (Глубоководье, D&D) — на 30% мельче базового маркера. */
.marker.gm_note { transform: translate(-50%, -50%) scale(0.315); }
.marker.border { color: #69f0ae; width: 57px; height: 57px; }
.marker.explored_border { color: #42a5f5; width: 57px; height: 57px; }
.marker.border .hex-icon, .marker.explored_border .hex-icon { position: absolute; inset: 0; width: 100%; height: 100%; }
.marker.border .hex-icon svg, .marker.explored_border .hex-icon svg { width: 100%; height: 100%; display: block; }
/* Подсветка метки, на которую перешли с вкладки «Места» листа персонажа
   (зеркало блока в map_http_server_map_html.part.dart). Кольцо крупное
   намеренно: метки уменьшены transform-scale (gm_note — 0.315). */
.marker.focus-hit { z-index: 6; }
.marker.focus-hit::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%; border: 6px solid #ffd54f;
  box-shadow: 0 0 24px rgba(255,213,79,0.9);
  animation: markerFocusPulse 1.3s ease-out infinite;
  pointer-events: none;
}
@keyframes markerFocusPulse {
  0% { transform: scale(0.45); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
.map-alert-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.6);
  pointer-events: none;
}
.map-alert-overlay.map-alert-on { display: flex; }
.map-alert-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
}
/* Тост броска кубов (POST /api/roll с часов/пульта). Показ ~8с, затем плавное угасание. */
.roll-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 90; /* под алертом (100), над картой и зумом */
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(20, 22, 30, 0.92);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  font: 15px/1.25 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.roll-toast.roll-toast-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.roll-toast-total { font-size: 34px; font-weight: 700; color: #ffd54f; }
.roll-toast-meta { display: flex; flex-direction: column; gap: 1px; }
.roll-toast-meta #rollToastFormula { font-weight: 600; }
.roll-toast-meta #rollToastDetail { color: #b9c2d0; font-size: 13px; }
.roll-toast-meta #rollToastSource { color: #8d97a5; font-size: 12px; }
/* Индикатор связи: показывается, когда опрос/WS перестаёт отвечать. */
#connState {
  position: fixed; left: 12px; bottom: 12px; z-index: 30; display: none; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; background: rgba(140,28,28,0.88); color: #fff;
  font: 14px/1.2 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#connState .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff8585; display: inline-block; }
@media (max-width: 600px) {
  .zoom-controls {
    top: 6px;
    right: 6px;
    gap: 2px;
  }
  .zoom-controls button {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .zoom-controls span { font-size: 12px; }
  .marker .material-icons { font-size: 17px; }
  .marker.explored { font-size: 10px; }
  .marker.explored .material-icons { font-size: 12px; }
}