/* ==========================================================================
   AlertMe - mapa zasiegu
   Doklej na koniec style.css. Korzysta z istniejacych tokenow :root
   (--bg, --accent, --ink, --line, --font-head, --font-body, --ease, --radius).
   Prefiks .am- zeby nic nie kolidowalo z reszta strony.
   ========================================================================== */
/* ============================================================ SEKCJA ===== */
.am-section{padding:clamp(2.5rem,5vw,4.5rem) 1.25rem;max-width:var(--maxw);margin:0 auto}
.am-eyebrow{font-family:var(--font-body);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
.am-h2{font-family:var(--font-head);font-weight:700;font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.06;letter-spacing:-.02em;margin:0 0 1rem;max-width:18ch}
.am-lead{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6;color:var(--muted);
  margin:0 0 2.75rem;max-width:52ch}
.am-lead strong{color:var(--ink);font-weight:500}

/* ============================================================== MAPA ===== */
.am-map{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  max-width:52rem;   /* mniejsza mapa (byla na cala szerokosc = ogromna); wyrownana do lewej jak naglowek */
  background:
    radial-gradient(120% 90% at 52% 46%, rgba(238,212,1,.05), transparent 62%),
    linear-gradient(180deg,#15171b,#101216);
  overflow:hidden}

/* delikatna siatka wspolrzednych - tlo dyspozytorskie, nie dekoracja */
.am-map::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(245,247,250,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,247,250,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 45%,#000 35%,transparent 78%)}

.am-stage{position:relative;width:100%;aspect-ratio:1000/860}
@media(max-width:900px){.am-stage{aspect-ratio:1000/975}}
.am-stage canvas{position:absolute;inset:0;display:block}

.am-labels{position:absolute;inset:0;pointer-events:none}
.am-label{position:absolute;top:0;left:0;white-space:nowrap;font-size:.6875rem;
  font-weight:500;letter-spacing:.02em;color:var(--muted-2);
  will-change:transform,opacity;opacity:0;visibility:hidden;
  text-shadow:0 1px 6px rgba(10,11,13,.95),0 0 14px rgba(10,11,13,.8);
  transition:color .25s var(--ease)}
/* kreska laczaca etykiete z punktem na mapie - czytelniejsze przypisanie */
.am-label::before{content:"";position:absolute;left:-7px;top:50%;width:4px;height:1px;
  background:currentColor;opacity:.5}
.am-label.is-zone{color:rgba(238,212,1,.8)}
.am-label.is-hub::before{display:none}
.am-label.is-hub{font-family:var(--font-head);font-weight:700;font-size:.8125rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 0 12px rgba(0,0,0,.9)}
.am-label.is-focus{color:var(--accent-2);font-weight:600}

/* ---------------------------------------------------------- PANEL LEWY -- */
.am-panel{position:absolute;left:1rem;bottom:1rem;z-index:3;
  display:flex;flex-direction:column;gap:.35rem;max-width:16.5rem}

.am-tier{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .65rem;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(18,19,22,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);text-align:left}
.am-tier__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:.28rem;
  position:relative}
.am-tier__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid currentColor;opacity:.3}
.am-tier--base .am-tier__dot{background:rgba(245,247,250,.45);color:rgba(245,247,250,.45)}
.am-tier--patrol .am-tier__dot{background:var(--accent);color:var(--accent);
  box-shadow:0 0 14px rgba(238,212,1,.55)}
.am-tier__t{font-family:var(--font-head);font-weight:600;font-size:.75rem;
  letter-spacing:.01em;margin:0 0 .1rem;color:var(--ink)}
.am-tier__d{font-size:.6875rem;line-height:1.35;color:var(--muted);margin:0}

/* przyciski stref */
.am-zones{display:flex;flex-direction:column;gap:.3rem;margin-top:.1rem}
.am-zone{display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.45rem .6rem;border:1px solid var(--line);border-radius:9px;
  background:rgba(18,19,22,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink);font-family:var(--font-body);font-size:.75rem;font-weight:500;
  cursor:pointer;text-align:left;transition:border-color .3s var(--ease),
  background .3s var(--ease),transform .3s var(--ease)}
.am-zone:hover,.am-zone:focus-visible{border-color:var(--line-strong);
  background:rgba(27,29,33,.92);transform:translateX(2px)}
.am-zone[aria-pressed="true"]{border-color:rgba(238,212,1,.55);
  background:rgba(238,212,1,.07)}
.am-zone__mark{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(238,212,1,.7)}
.am-zone__km{margin-left:auto;font-family:var(--font-head);font-size:.6875rem;
  font-weight:600;color:var(--muted-2);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.am-zone[aria-pressed="true"] .am-zone__km{color:var(--accent)}

/* ------------------------------------------------------ PRZYCISK POWROTU */
.am-back{position:absolute;top:1.25rem;left:1.25rem;z-index:4;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(18,19,22,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink);font-family:var(--font-body);font-size:.75rem;font-weight:500;
  cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease)}
.am-back:hover{background:rgba(27,29,33,.95);border-color:var(--accent)}
.am-back[hidden]{display:none}
.am-back svg{width:12px;height:12px}

/* -------------------------------------------------------- SKALA / STOPKA */
.am-scale{position:absolute;right:1.25rem;bottom:1.4rem;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:.32rem;
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  pointer-events:none}
.am-scale__bar{width:74px;height:1px;background:var(--line-strong);position:relative}
.am-scale__bar::before,.am-scale__bar::after{content:"";position:absolute;bottom:0;
  width:1px;height:5px;background:var(--line-strong)}
.am-scale__bar::before{left:0}.am-scale__bar::after{right:0}

/* ========================================================= MIEJSCOWOSCI == */
.am-towns{margin-top:1.75rem;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.am-town-group{border-top:1px solid var(--line);padding-top:1rem}
.am-town-group__h{display:flex;align-items:baseline;gap:.55rem;margin:0 0 .2rem}
.am-town-group__n{font-family:var(--font-head);font-weight:600;font-size:.9375rem;
  color:var(--ink);margin:0}
.am-town-group__r{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:600}
.am-town-group__s{font-size:.75rem;color:var(--muted-2);margin:0 0 .8rem}
.am-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.am-chip{padding:.32rem .62rem;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);font-family:var(--font-body);
  font-size:.75rem;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),
  background .25s var(--ease)}
.am-chip:hover,.am-chip:focus-visible{border-color:rgba(238,212,1,.5);color:var(--ink);
  background:rgba(238,212,1,.06)}
.am-chip.is-active{border-color:var(--accent);color:var(--accent);
  background:rgba(238,212,1,.09)}

.am-note{margin:1.75rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.75rem;line-height:1.6;color:var(--muted-2);max-width:64ch}

/* =========================================================== RESPONSYWNE = */
@media(max-width:900px){
  .am-panel{position:static;max-width:none;padding:1rem;gap:.45rem;
    border-top:1px solid var(--line)}
  .am-tier,.am-zone{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(27,29,33,.6)}
  .am-scale{display:none}
  .am-back{top:.85rem;left:.85rem}
  /* MOBILE PERF: nie trzymaj ~50 etykiet (takze ukrytych) jako trwalych warstw kompozytora - na telefonie
     kompozytor przesuwa je przy KAZDEJ klatce scrolla (koszt niezalezny od petli rAF). Widoczne etykiety i tak
     dostaja warstwe od translate3d ustawianego w JS, wiec animacja bez zmian; znika tylko narzut przy scrollu. */
  .am-label{will-change:auto}
}
:where(button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}