/* wgf-zone-map - the clickable zone map on /wow-forever/zones/. Same in-game palette as
   wgf-zones.css: near-black slate plates, bronze rules, parchment text, gold accents.
   No gradients, no glows. Bump ?v= on the <link> (forever_zone_map_render.CSS_HREF) on change. */
.zm {
  --zm-bg: #0d0f13; --zm-panel: #14161c; --zm-metal: #6e5a2a; --zm-gold: #e8c56e;
  --zm-text: #ece3cf; --zm-muted: #a89c80;
  --zm-ally: #5b9bff; --zm-horde: #e0483c; --zm-neutral: #e8c56e;
  position: relative; color: var(--zm-text); font-size: 14px;
}
.zm *, .zm *::before, .zm *::after { box-sizing: border-box; }
.zm-bar, .zm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.zm-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.zm-btn, .zm-zoomin {
  font: inherit; color: var(--zm-text); background: var(--zm-panel);
  border: 1px solid var(--zm-metal); cursor: pointer; min-height: 36px; padding: 0 14px;
}
.zm-btn:hover, .zm-zoomin:hover { border-color: var(--zm-gold); color: var(--zm-gold); }
/* Tabs + layer toggles are the site's Blizzard red button (wgf-chrome.css .wgf-btn-red);
   the active one wears the same PRESSED slices as .wgf-btn-red[aria-current]. */
.zm-tab.wgf-btn-red, .zm-chip.wgf-btn-red { --wgf-btn-h: 34px; --wgf-btn-cap: 14px; min-width: 0; font-size: 14px; }
.zm-tab.is-on, .zm-chip[aria-pressed="true"] {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  transform: translateY(1px); filter: brightness(0.92);
}
.zm-tab.is-on { color: #ffd100; }
.zm-chip[aria-pressed="false"] { filter: grayscale(.55) brightness(.8); }
.zm-chip[aria-pressed="true"]::before { content: "\2713\00a0"; }
.zm-tab:focus-visible, .zm-chip:focus-visible, .zm-btn:focus-visible, .zm-zoomin:focus-visible,
.zm-open:focus-visible, .zm-vp:focus-visible, .zm-input:focus-visible { outline: 2px solid var(--zm-gold); outline-offset: 2px; }
.zm-search { position: relative; flex: 0 1 260px; min-width: 180px; }
.zm-input {
  width: 100%; min-height: 36px; padding: 0 10px; font: inherit; color: var(--zm-text);
  background: var(--zm-bg); border: 1px solid var(--zm-metal);
}
.zm-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none;
  background: var(--zm-panel); border: 1px solid var(--zm-metal);
}
.zm-results[hidden] { display: none; }
.zm-res { display: flex; justify-content: space-between; gap: 8px; padding: 10px 10px; cursor: pointer; }
.zm-res span { color: var(--zm-muted); font-size: 12px; }
.zm-res.is-on, .zm-res:hover { background: #22252e; color: var(--zm-gold); }
.zm-legend { margin-left: auto; display: flex; gap: 12px; color: var(--zm-muted); font-size: 12px; }
.zm-leg { display: inline-flex; align-items: center; gap: 5px; }

.zm-frame { position: relative; border: 1px solid var(--zm-metal); background: var(--zm-bg); overflow: hidden; }
.zm-vp {
  position: relative; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  height: clamp(420px, 78vh, 760px); height: clamp(420px, calc(100dvh - 230px), 760px);
}
.zm-vp.is-drag { cursor: grabbing; }
.zm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; will-change: transform; }
.zm-stage.zm-swap { animation: zm-in .28s ease-out; }
@keyframes zm-in { from { opacity: .35; } to { opacity: 1; } }
.zm-img { display: block; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; -webkit-user-drag: none; }
/* --px = one screen pixel in viewBox units, set by the JS on every zoom (CSS transforms on an
   HTML ancestor do not feed non-scaling-stroke, so stroke widths are computed instead). */
.zm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.zm-zone { fill: transparent; stroke: none; outline: none; pointer-events: none; }
.zm-zone, .zm-zone.is-hover, .zm-zone.is-sel, .zm-zone:focus-visible { fill: transparent; stroke: none; }
.zm-zlabel.is-hover, .zm-zlabel.is-sel { color: #ffd100; font-size: 15px; }
.zm-route { display: none; fill: none; stroke: #fff3c4; stroke-opacity: .9; stroke-width: calc(var(--px, .001) * 2); stroke-dasharray: calc(var(--px, .001) * 6) calc(var(--px, .001) * 4); }
.lay-routes .zm-route { display: block; }

.zm-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zm-zlabel, .zm-town, .zm-mk { position: absolute; left: 0; top: 0; }
.zm-zlabel {
  width: 0; display: none; justify-content: center; white-space: nowrap; font-weight: 600; font-size: 13px;
  color: var(--zm-text); text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px #000;
}
.lay-zones .zm-zlabel, .zm-zlabel.is-hover, .zm-zlabel.is-sel { display: flex; }
.zm-town {
  width: 0; display: none; justify-content: center; white-space: nowrap; font-size: 12px; font-style: italic; color: #f3e7c3;
  text-shadow: 0 0 3px #000, 0 1px 2px #000; margin-top: 8px;
}
.lay-towns .zm-town { display: flex; }
.zm-mk {
  display: none; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; font: inherit; color: var(--zm-text);
}
.lay-fp .zm-mk { display: block; }
.zm-mk::before { content: ""; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; }
.zm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #000; background: var(--zm-neutral); }
.zm-mk .zm-dot { position: absolute; left: -6px; top: -6px; }
.zm-dot.zm-alliance { background: var(--zm-ally); }
.zm-dot.zm-horde { background: var(--zm-horde); }
.zm-dot.zm-neutral { background: var(--zm-neutral); }
.zm-mkname { position: absolute; left: 9px; top: -8px; display: none; white-space: nowrap; font-size: 12px; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.zm-mk.show-name .zm-mkname { display: block; }
.zm-mk:focus-visible .zm-dot, .zm-mk:hover .zm-dot { outline: 2px solid #fff; outline-offset: 1px; }

.zm-tip {
  position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; padding: 6px 10px; max-width: 240px;
  background: var(--zm-panel); border: 1px solid var(--zm-metal);
}
.zm-tip[hidden] { display: none; }
.zm-tip-name { color: var(--zm-gold); font-weight: 600; }
.zm-tip-sub { color: var(--zm-muted); font-size: 12px; }

.zm-ctl { position: absolute; left: 10px; top: 10px; z-index: 10; display: flex; flex-direction: column; gap: 4px; }
.zm-ctl .zm-btn { width: 40px; min-height: 40px; padding: 0; font-size: 22px; line-height: 1; }
.zm-ctl .zm-btn--txt { font-size: 13px; }
.zm-crumb {
  position: absolute; left: 60px; top: 10px; z-index: 9; padding: 5px 10px; font-size: 12px; color: var(--zm-muted);
  background: rgba(13, 15, 19, .85); border: 1px solid var(--zm-metal); pointer-events: none; max-width: calc(100% - 80px);
}
.zm-panel {
  position: absolute; z-index: 20; right: 10px; top: 10px; width: 290px; max-height: calc(100% - 20px); overflow: auto;
  padding: 14px; background: var(--zm-panel); border: 1px solid var(--zm-metal);
}
.zm-panel[hidden] { display: none; }
.zm-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.zm-pt { margin: 0 0 6px; color: var(--zm-gold); font-size: 20px; }
.zm-btn--sm { min-height: 36px; width: 36px; padding: 0; font-size: 20px; flex: none; }
.zm-pl { margin: 2px 0; }
.zm-ph2 { margin: 10px 0 2px; color: var(--zm-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.zm-pd { margin: 0 0 6px; padding-left: 18px; }
.zm-pd a { color: var(--zm-gold); display: inline-block; padding: 4px 0; }
.zm-open {
  display: block; margin-top: 12px; padding: 12px 14px; text-align: center; font-weight: 700; text-decoration: none;
  color: #1a1305; background: var(--zm-gold); border: 1px solid var(--zm-gold); min-height: 44px;
}
.zm-open:hover { background: #f3d68c; }
.zm-zoomin { display: block; width: 100%; margin-top: 8px; min-height: 44px; }

@media (max-width: 720px) {
  .zm-vp { height: clamp(380px, calc(100dvh - 300px), 640px); }
  .zm-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 52%; border-width: 1px 0 0; }
  .zm-search { flex: 1 1 100%; }
  .zm-crumb { display: none; }
  .zm-legend { margin-left: 0; flex: 1 1 100%; }
}
@media (pointer: coarse) {
  .zm-tab.wgf-btn-red, .zm-chip.wgf-btn-red { --wgf-btn-h: 44px; }
  .zm-input { min-height: 44px; }
  .zm-ctl .zm-btn { width: 44px; min-height: 44px; }
  .zm-btn--sm { width: 44px; min-height: 44px; }
  .zm-mk::before { left: -22px; top: -22px; width: 44px; height: 44px; }
  .zm-pd a { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) { .zm-stage.zm-swap { animation: none; } }