/* =============================================================================
   zones.css — THE ZONE BADGE and the PvE ring layer (js/zones.js). Linked only
   where `web.live.zones.on` is true, on the live page and the map.

   EVERY COLOUR IS A THEME TOKEN, the way pack.css is: the badge is the owner's
   site, not a widget dropped onto it. The four states borrow the site's OWN
   words for them - `--ok` for a place you cannot be attacked, `--bad` for one
   where you can, `--warn` for the nursery, `--accent` for weather - so an
   island in any palette gets a badge in that palette and the colours already
   mean the same thing everywhere else on the page.

   ONE STATE IS DELIBERATELY COLOURLESS: `is-unk`. "We cannot read where you
   are" must not look like a verdict, and a grey chip is the only honest
   drawing of it.
   ============================================================================= */

.zn-badge {
  --zn-tone: var(--ink-2, var(--fg-dim));
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 18px;
  overflow: hidden;
  background: var(--surface, rgba(255, 255, 255, .02));
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: var(--r, 10px);
  color: var(--ink-1, var(--fg));
  font-family: var(--font-ui, inherit);
}

/* the state rule down the leading edge, and the faintest wash of the same
   colour across the plate: enough to read the state before the word is read */
.zn-badge::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--zn-tone);
}
.zn-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--zn-tone) 12%, transparent), transparent 42%);
}

.zn-badge.is-pve   { --zn-tone: var(--ok, #54e08a); }
.zn-badge.is-sanc  { --zn-tone: var(--warn, #ffc65c); }
.zn-badge.is-pvp   { --zn-tone: var(--bad, #d8453b); }
.zn-badge.is-shelt { --zn-tone: var(--accent, #6aa8ff); }
.zn-badge.is-unk   { --zn-tone: var(--ink-3, var(--fg-mute)); }

.zn-glyph {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  /* the glyph is decoration beside the word, never instead of it: a font
     without the emoji still leaves a readable badge */
  filter: saturate(1.1);
}

.zn-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.zn-word {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 10px;
  color: var(--zn-tone);
  font-family: var(--font-display, inherit);
  font-size: var(--tm-h-sec, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* the PLACE is the owner's own word for their own ground - it rides in the
   page's ink, not the state colour, so the state stays the loud thing */
.zn-place {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-1, var(--fg));
  font-family: var(--font-ui, inherit);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.zn-note {
  color: var(--ink-2, var(--fg-dim));
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---- the map: a heads-up chip across the top of the viewport ----
   TOP CENTRE, deliberately: the zoom control owns the top left, the pack
   plate owns the bottom left (pack.css:194) and the legend owns the right.
   It never takes a pointer - the map under it has to stay draggable. */
.zn-badge.zn-map {
  position: absolute;
  /* seated under the shell's own header by js/zones.js (seatOnMap): on the
     explorer shell #map-viewport is the whole page and the header is drawn
     over it. 14px is the fallback for a page with no header at all. */
  top: var(--zn-top, 14px);
  left: 50%;
  z-index: 500;
  width: max-content;
  max-width: min(420px, calc(100% - 32px));
  margin: 0;
  padding: 10px 16px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--bg-deep, #000) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.zn-map .zn-glyph { font-size: 20px; }
.zn-map .zn-word { font-size: 15px; }
.zn-map .zn-note { font-size: 11.5px; }

/* ---- the ring layer ----
   CSS beats an SVG presentation attribute, so these rules re-paint the
   polygons js/zones.js draws with the owner's palette and the plain colours it
   passes are only the fallback for a browser that never applies this sheet. */
.pve-zone {
  stroke: var(--ok, #54e08a);
  stroke-width: 2.5;
  stroke-opacity: .95;
  fill: var(--ok, #54e08a);
  fill-opacity: .07;
  /* the ring stays a hairline-plus at every zoom rather than thinning away
     when the whole island is in frame - the overlay's own fix, 2026-09-20 */
  vector-effect: non-scaling-stroke;
  /* ★ A GREEN RING ON A GREEN ISLAND. Measured on the live map 2026-09-21: the
     boundaries were readable but soft over jungle canopy, which is most of this
     island. A dark halo under the stroke separates it from whatever it crosses -
     canopy, rock or water - without changing the colour that carries the
     meaning. Cheap: one filter on a layer of eleven shapes. */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85));
}
.pve-zone-sanc {
  stroke: var(--warn, #ffc65c);
  stroke-dasharray: 6 4;
  fill: var(--warn, #ffc65c);
  fill-opacity: .12;
}
.pve-zone:hover { stroke-opacity: 1; fill-opacity: .14; }

.legend-swatch-zone {
  background: color-mix(in srgb, var(--ok, #54e08a) 22%, transparent);
  border: 1px solid var(--ok, #54e08a);
}

@media (max-width: 760px) {
  .zn-badge { gap: 11px; padding: 12px 14px; }
  .zn-glyph { font-size: 22px; }
  .zn-word { font-size: 16px; }
  /* the place drops under the state word rather than crushing it */
  .zn-word { flex-wrap: wrap; gap: 2px 8px; }
  .zn-place { white-space: normal; }
  .zn-badge.zn-map { max-width: calc(100% - 16px); padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .zn-badge { transition: none; }
}