/* ═══════════════════════════════════════════════════════════
   МАПА — спільні стилі для обох світів
   Leaflet тримає геометрію й тайли; усе оформлення тут.
   ═══════════════════════════════════════════════════════════ */

.map-page{height:100svh;overflow:hidden}
.map-page #web{display:none}   /* полотно ефектів під мапою не потрібне */

.map-wrap{
  position:fixed;inset:var(--nav-h) 0 0 0;
  background:#07060a;
}
#map{
  width:100%;height:100%;
  background:#0a1424;   /* колір «моря» під тайлами */
  outline:none;
}

/* Leaflet за замовчуванням світлий — приводимо до нашої мови */
.leaflet-container{
  font-family:var(--ui);
  background:transparent;
}
.leaflet-control-zoom{
  border:none!important;
  box-shadow:none!important;
  margin:18px!important;
}
.leaflet-control-zoom a{
  width:38px!important;height:38px!important;line-height:36px!important;
  background:rgba(10,8,16,.82)!important;
  color:var(--text-dim)!important;
  border:1px solid var(--glass-line)!important;
  border-radius:10px!important;
  margin-bottom:8px!important;
  backdrop-filter:blur(10px);
  font-size:19px!important;
  transition:color .3s,border-color .3s,background-color .3s;
}
.leaflet-control-zoom a:hover{
  color:var(--text)!important;
  border-color:color-mix(in srgb,var(--acc) 55%,transparent)!important;
  background:color-mix(in srgb,var(--acc) 14%,rgba(10,8,16,.82))!important;
}
.leaflet-control-attribution{
  background:rgba(10,8,16,.7)!important;
  color:var(--text-dim)!important;
  font-size:10.5px!important;
  border-radius:8px 0 0 0;
  padding:4px 9px!important;
}
.leaflet-control-attribution a{color:var(--acc-soft)!important}

/* ── панель світу ─────────────────────────────────────── */
.map-panel{
  position:absolute;left:18px;top:18px;z-index:500;
  width:min(300px,calc(100vw - 36px));
  border:1px solid var(--glass-line);border-radius:14px;
  background:rgba(10,8,16,.80);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  overflow:hidden;
}
.map-panel-h{
  padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.07);
}
.map-panel-h b{
  display:block;font-family:var(--display);font-weight:600;font-size:17px;color:#fff;
}
.map-panel-h span{
  display:block;margin-top:5px;
  font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.26em;
  color:var(--acc-soft);
}
.map-panel-b{padding:14px 18px 17px}
.map-hint{
  font-size:14.5px;line-height:1.5;color:rgba(239,233,222,.62);
  font-family:var(--ui);font-weight:500;
}
.map-hint kbd{
  display:inline-block;padding:1px 6px;margin:0 2px;border-radius:5px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.05);
  font-family:ui-monospace,monospace;font-size:12px;color:var(--text);
}
.map-soon{
  margin-top:14px;padding:11px 13px;border-radius:10px;
  border:1px solid rgba(240,208,128,.20);background:rgba(240,208,128,.05);
  font-family:var(--ui);font-weight:500;font-size:13.5px;line-height:1.5;
  color:rgba(239,233,222,.72);
}
.map-soon b{
  display:block;margin-bottom:4px;
  font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--gold-2);
}

/* ── координати під курсором ──────────────────────────── */
.map-coords{
  position:absolute;right:18px;bottom:18px;z-index:500;
  padding:8px 13px;border-radius:9px;
  border:1px solid var(--glass-line);background:rgba(10,8,16,.78);
  backdrop-filter:blur(10px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:var(--text-dim);
  pointer-events:none;
}
.map-coords b{color:var(--acc-soft);font-weight:600}

@media (max-width:760px){
  .map-panel{left:12px;right:12px;top:12px;width:auto}
  .map-coords{display:none}
}

/* ═══════════════════════════════════════════════════════════
   ЗОНИ
   Колір і пульсація — тільки тут. JS задає геометрію й клас.
   Анімуються opacity й stroke-dashoffset: перше — композитор,
   друге — дешевий SVG-атрибут, layout не чіпається.
   ═══════════════════════════════════════════════════════════ */
.zone{transition:fill-opacity .4s ease}

.zone-danger{
  color:#ff3b30;
  stroke:#ff5b4a;
  fill:#ff2d20;
  fill-opacity:.14;
  animation:zoneCrawl 3.4s linear infinite, zoneBreathe 4.2s ease-in-out infinite;
}
.zone-danger:hover{fill-opacity:.26}

.zone-dead{
  color:#9aa0ad;
  stroke:#aab0bd;
  fill:#6d7482;
  fill-opacity:.16;
  animation:zoneCrawl 9s linear infinite;
}
.zone-dead:hover{fill-opacity:.26}

@keyframes zoneCrawl{ to{ stroke-dashoffset:-36 } }
@keyframes zoneBreathe{
  0%,100%{ stroke-opacity:.55 }
  50%    { stroke-opacity:1 }
}

/* ── підказка зони ────────────────────────────────────── */
.leaflet-tooltip.zone-tip{
  padding:11px 15px;border-radius:11px;
  background:rgba(10,8,16,.92);
  border:1px solid var(--glass-line);
  box-shadow:0 12px 44px rgba(0,0,0,.55);
  color:var(--text);
  font-family:var(--ui);
  white-space:normal;max-width:280px;
}
.leaflet-tooltip.zone-tip::before{display:none}
.zone-tip b{
  display:block;font-family:var(--display);font-weight:600;font-size:15.5px;
  margin-bottom:5px;
}
.zone-tip span{
  display:block;font-size:13.5px;line-height:1.5;
  color:rgba(239,233,222,.68);font-weight:500;
}
.zone-tip-danger{border-color:rgba(255,59,48,.45)}
.zone-tip-danger b{color:#ff6b5e}
.zone-tip-dead{border-color:rgba(154,160,173,.35)}
.zone-tip-dead b{color:#c3c9d4}

/* стан «скопійовано» для рядка координат */
.map-coords.ok{
  border-color:rgba(54,255,135,.45);
  color:#36FF87;
}


/* ── вінʼєтка поверх мапи ─────────────────────────────
   Фон під тайлами залитий тоном краю карти, тож без
   затемнення екран виглядав би плоскою плямою. Вінʼєтка
   збирає погляд у центр і віддає краї інтерфейсу. */
.map-vig{
  position:absolute;inset:0;z-index:400;pointer-events:none;
  background:radial-gradient(ellipse 78% 78% at 50% 50%,
    transparent 38%, rgba(4,3,9,.34) 72%, rgba(4,3,9,.80) 100%);
}