/* The Zeden map page: the landing page's tokens, the map filling the screen under a thin bar. Phone first.
   Copyright (c) 2026 Zeden. All rights reserved. */

:root {
  --ink: #0f1113;
  --ink-2: #16191c;
  --ink-3: #1d2024;
  --paper: #e7e9ec;
  --paper-soft: #b7bcc2;
  --grey: #9aa0a6;
  --rule: rgba(255, 255, 255, 0.12);
  --green: #46D839;            /* Livonia's toxic green */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bar: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper-soft); font-family: var(--font-body); -webkit-text-size-adjust: 100%; }
html { overflow: hidden; touch-action: pan-x pan-y; }   /* never a sideways scroll; no pinch or double tap zooms the page,
                                                       only the map (Leaflet's own touch rule on it) */
body { display: flex; flex-direction: column; height: 100dvh; height: var(--app-h, 100dvh); overflow: hidden; }
a { color: var(--paper); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

/* the bar */
.bar { flex: 0 0 var(--bar); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; background: var(--ink); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top); }
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); flex: 0 0 auto; }
.bar__mark { width: 34px; height: 30px; display: block; }
.bar__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; display: flex; flex-direction: column; }
.bar__sub { font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--green); margin-top: 3px; }
.bar__spot { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar__hint { font-size: 12px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__coords { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .04em; color: var(--paper); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar__copy { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--green); border: 0; border-radius: 3px; padding: 7px 10px 6px; cursor: pointer; }
.bar__copy.is-done { background: var(--paper); }
.bar__share { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }   /* Share: the link (2026-10-25) */
.bar__share.is-done { background: var(--paper); color: var(--ink); box-shadow: none; }
.bar__copy-icon { display: none; }
.bar__clear { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--rule); background: var(--ink-3); color: var(--paper); cursor: pointer; display: grid; place-items: center; padding: 0; }
.bar__clear[hidden] { display: none; }
/* under the bar after Share on a PC, or a copy the browser refused: what was copied, or the link to copy by hand */
.sharebox { position: absolute; top: calc(var(--bar) + env(safe-area-inset-top) + 8px); right: 12px; z-index: 1250; width: min(380px, calc(100vw - 24px)); box-sizing: border-box; background: var(--ink-3); border: 1px solid var(--green); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); padding: 10px 12px 12px; }
.sharebox[hidden] { display: none; }
.sharebox__msg { display: block; font-size: 14px; color: var(--paper); margin-bottom: 8px; }
.sharebox__link { width: 100%; box-sizing: border-box; font: 500 14px/1.3 var(--font-body); color: var(--paper); background: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: 8px 10px; outline: none; }
.bar__search { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 3px; border: 1px solid var(--rule); background: var(--ink-3); color: var(--paper); cursor: pointer; display: grid; place-items: center; padding: 0; }
.bar__search[aria-expanded="true"] { background: var(--green); color: var(--ink); border-color: var(--green); }
@media (min-width: 720px) { .bar__title { font-size: 26px; } .bar__hint { font-size: 14px; } }
@media (max-width: 400px) {                          /* a phone: room for the x beside Copy, which shows an icon there */
  .bar__hint { display: none; } .bar__coords { font-size: 18px; }
  .bar__copy { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
  .bar__copy[hidden] { display: none; }
  .bar__copy-text { display: none; } .bar__copy-icon { display: block; }
}

/* search */
.search { position: absolute; top: calc(var(--bar) + env(safe-area-inset-top)); left: 0; right: 0; z-index: 1200; background: var(--ink-2); border-bottom: 1px solid var(--rule); padding: 10px 12px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.search[hidden] { display: none; }   /* the search over everything, the phone's button strip too (Cole, 2026-10-25: half under it) */
.search__in { width: 100%; font: 500 17px/1.3 var(--font-body); color: var(--paper); background: var(--ink); border: 1px solid var(--rule-strong, rgba(255,255,255,.22)); border-radius: 3px; padding: 11px 12px; outline: none; }
.search__in:focus { border-color: var(--green); }
.search__list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.search__list:empty { display: none; }
.search__list button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; text-align: left; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; color: var(--paper); background: var(--ink-3); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px 8px; cursor: pointer; }
.search__list button span { font-weight: 600; font-size: 12px; letter-spacing: .12em; color: var(--green); }
.search__list button:hover, .search__list button:focus { border-color: var(--green); }

/* the map */
.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }   /* nothing past the screen's edge: a phone */
.map { position: absolute; inset: 0; background: #d9d4c7; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-bar { border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.leaflet-bar a { background: var(--ink-3); color: var(--paper); border-bottom: 1px solid var(--rule); width: 40px; height: 40px; line-height: 40px; font-size: 22px; }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--ink-2); color: var(--green); }
.leaflet-bar a.leaflet-disabled { color: #555; }
.leaflet-bar a.leaflet-control-zoom-whole { display: flex; align-items: center; justify-content: center; border-bottom: 0; }   /* the whole map, under + and - */
.leaflet-bottom.leaflet-left .leaflet-control-zoom { margin: 0 0 calc(12px + var(--map-b, 0px)) calc(12px + var(--side-left, 0px)); }   /* the corner */
.leaflet-popup-content-wrapper { background: var(--ink-3); color: var(--paper-soft); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.leaflet-popup-tip { background: var(--ink-3); }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.45; max-width: 240px; }
.leaflet-popup-content strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; color: var(--paper); margin-bottom: 3px; }
.leaflet-popup-content .popup__where { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--green); }
.leaflet-container a.leaflet-popup-close-button { color: var(--grey); font-size: 20px; padding: 6px 6px 0 0; }

/* place names: text on the map, no pin */
.place { font-family: var(--font-display); font-weight: 800; color: #2b2622; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; text-shadow: 0 0 3px #ece8dd, 0 0 6px #ece8dd, 0 0 2px #ece8dd; pointer-events: none; transform: translate(-50%, -50%); width: auto !important; height: auto !important; }
.place--city { font-size: 17px; letter-spacing: .1em; }
.place--village { font-size: 13px; }
.place--local, .place--camp, .place--marine, .place--ruin { font-size: 11px; font-weight: 600; color: #4a4038; }
.place--hill { font-size: 11px; font-weight: 600; color: #5a4a3a; font-style: italic; text-transform: none; letter-spacing: .02em; }
.is-wide .place--city { font-size: 13px; }                         /* the whole map in view: smaller names */
.is-wide .place--village { font-size: 10px; letter-spacing: .03em; }

/* the Sites button's places: an icon by kind, the name beside it (Cole, 2026-10-21) */
.site__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; border: 2px solid #f2efe6; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); box-sizing: border-box; }
.site--military .site__icon { background: #4b5a27; }
.site--industry .site__icon { background: #7a5528; }
.site--castle .site__icon { background: #555b66; }
.site__name { position: absolute; left: 33px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #2b2622; white-space: nowrap; text-shadow: 0 0 3px #ece8dd, 0 0 6px #ece8dd, 0 0 2px #ece8dd; pointer-events: none; }
.is-wide .site__name { font-size: 10px; letter-spacing: .03em; }
.site--left .site__name { left: auto; right: 33px; }
.points__icon .site__icon { width: 18px; height: 18px; border-width: 1.5px; box-shadow: none; }   /* a site's row in the list */                   /* by the east edge: the name on the left */

/* our markers */
.mark { transform: translate(-50%, -50%); width: auto !important; height: auto !important; }
.mark__metro { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 30px; text-align: center; border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.spot svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }   /* the clicked spot: a pin, its tip on it */
.spot path { fill: var(--green); stroke: #0f1113; stroke-width: 1.6; }
.spot circle { fill: #0f1113; }
.leaflet-container.leaflet-grab { cursor: default; }   /* an arrow on the map, its tip where a click lands (not the open hand) */
.zone-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1d5a16; text-shadow: 0 0 3px #ece8dd, 0 0 5px #ece8dd; white-space: nowrap; pointer-events: none; transform: translate(-50%, 12px); width: auto !important; height: auto !important; }
.zone-label--above { transform: translate(-50%, -110%); }

/* the grid's numbers ride the edges */
.gridlabels { position: absolute; pointer-events: none; z-index: 500; overflow: hidden; }   /* the letters of columns off the
                                                       screen kept in: they made a phone's page about 870 px wide (2026-10-25) */
.gridlabels--top { left: 0; right: 0; top: 0; height: 18px; }
.gridlabels--left { top: 0; bottom: 0; left: 0; width: 22px; }
.gridlabels span { position: absolute; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .06em; color: var(--paper); background: rgba(15, 17, 19, .72); padding: 1px 4px 0; border-radius: 2px; line-height: 15px; transform: translateX(-50%); }
.gridlabels--left span { transform: translateY(-50%); }

/* the layer buttons in one strip under the bar, the Points button at its right end, the map starting under it so its
   top row shows: first a phone's layout, a PC's too since 2026-10-25 (Cole: "I like the buttons and the search all in
   the header, can we do that with PC too"). The zoom and the tier key ride the map's left side while it is narrower than
   the window: just outside it while there is room (--side-left), at its bottom (--map-b), else in the window's corner;
   set by hugMap in map.js */
.stage { --strip: 46px; }
.map { top: var(--strip); }
.gridlabels--top { margin-top: var(--strip); }
.gridlabels--left { top: var(--strip); }
.layers { position: absolute; top: 0; left: 0; right: 0; height: var(--strip); box-sizing: border-box; z-index: 1100; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: rgba(15, 17, 19, .92); border-bottom: 1px solid var(--rule); }
.layers__btn { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); background: rgba(15, 17, 19, .85); border: 1px solid var(--rule); border-radius: 3px; padding: 7px 12px 6px; cursor: pointer; }
.layers__btn.is-on { color: var(--ink); background: var(--green); border-color: var(--green); }

/* the Points button and its list: each kind of point on and off on its own (Cole, 2026-10-21) */
.layers__btn--points { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--paper); margin-left: auto; }
.layers__btn--points::after { content: ''; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.layers__btn--points.is-open { border-color: var(--paper); }
.layers__btn--points.is-open::after { transform: rotate(180deg); }
.layers__count { display: inline-block; box-sizing: border-box; width: 26px; height: 18px; border-radius: 9px; background: var(--green); color: var(--ink); font-size: 12px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; }
.layers__count[hidden] { display: inline-block; visibility: hidden; }   /* its room kept, so the button, and the open list,
                                                       never shift as rows are ticked (Cole, 2026-10-25: "shuffles left and right") */
.points { position: absolute; top: 100%; right: 12px; margin-top: 6px; width: 258px; max-height: max(170px, calc(var(--app-h, 100dvh) - var(--bar) - var(--strip) - 24px)); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-3); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); padding: 4px 0 8px; }
.points[hidden] { display: none; }
.points__group { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); padding: 10px 14px 2px; }
.points__row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; color: var(--paper); font-size: 15px; }
.points__group--tick { display: flex; align-items: center; gap: 10px; padding-top: 12px; cursor: pointer; }   /* a heavy group's heading: ticks its rows */
.points__group--tick input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; flex: 0 0 auto; }
.points__all { font-weight: 700; border-bottom: 1px solid var(--rule); padding-bottom: 11px; margin-bottom: 2px; }   /* every row at once */
.points__row input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; flex: 0 0 auto; }
.points__icon { flex: 0 0 18px; display: grid; place-items: center; }
.points__icon.mark { transform: none; }               /* the map markers' centring (.mark) is not for the list's icons */
.points__name { flex: 1 1 auto; }
.points__n { font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; }

/* the points' marks. Water: a drop, solid for a hand pump (clean), pale for a trough (pond water). The rest: a white
   sign on a coloured badge, the clinic's a red cross on white */
.mark svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
.mark--pump path { fill: #1f6fd1; stroke: #fff; stroke-width: 2; }
.mark--trough path { fill: #e4f0fb; stroke: #1f6fd1; stroke-width: 2.4; }
.mark--badge rect { stroke: #fff; stroke-width: 1.4; }
.mark--badge path { fill: #fff; }
.mark .ln { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mark--fuel rect { fill: #f5c400; }                 /* yellow, the sign dark: apart from the vehicles' orange */
.mark--fuel path { fill: #2b2100; }
.mark--fuel .ln { stroke: #2b2100; }
.mark--police rect { fill: #1a3d8f; }
.mark--fire rect { fill: #c62828; }
.mark--store rect { fill: #11806a; }
.mark--church rect { fill: #6b4f3a; }
.mark--rowboat rect, .mark--box rect { fill: #0a7ea4; }   /* the coast: sea blue */
.mark--planks rect { fill: #9c6b30; }              /* the plank piles: wood */
.mark--mil rect { fill: #9b1414; }                 /* the military buildings: a white sign on dark red, as iZurvive's (Cole) */
.mark--mil .hole { fill: #9b1414; }
.mark--mil .cut { fill: none; stroke: #9b1414; stroke-width: 1.2; }
.mark--animal img { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }   /* the animals: grey, no box */
.mark--hunt rect { fill: #b2ff00; stroke: #1a2a00; }   /* hunting: a dark sign on bright lime (Cole, 2026-10-21) */
.mark--hunt path { fill: #1a2a00; }
.mark--hunt .ln { stroke: #1a2a00; }
.mark--hunt .hole { fill: #b2ff00; }
.mark--ev rect { fill: #ec407a; }                  /* the wreck events: a white sign on pink (Cole, 2026-10-25: "more of a pink colour") */
.mark--ev .hole { fill: #ec407a; }
.mark--ev .rim { stroke: #ec407a; stroke-width: 1; }
.mark--spawn rect { fill: #7b1fa2; }               /* the fresh spawns: purple, apart from every other badge */
.mark--gas rect { fill: #d32f2f; }                 /* the gas zones: a white biohazard on red (Cole, 2026-10-21) */
.mark--gas .lobe { fill: #fff; }
.mark--gas .hole { fill: #d32f2f; }
.mark--gas .gap { fill: none; stroke: #d32f2f; stroke-width: 1; }
.mark--box .cut { fill: none; stroke: #0a7ea4; stroke-width: 1.2; }
.mark--veh rect { fill: #f57c00; }                  /* the vehicles: a spawn orange, a wreck grey, the type a letter */
.mark--veh.mark--wreck rect { fill: #6e6e6e; }
.mark text { fill: #fff; font-family: var(--font-display); font-weight: 800; font-size: 12px; }
.mark--clinic rect { fill: #fff; stroke: #c62828; stroke-width: 1.6; }
.mark--clinic path { fill: #d32f2f; }

/* the Tiers button's key: the three loot bands' colours, beside the "i" while the tint is on (Cole, 2026-10-21) */
.tier-key { position: absolute; left: calc(58px + var(--side-left, 0px)); bottom: calc(14px + var(--map-b, 0px)); z-index: 600; display: flex; gap: 12px; align-items: center; background: rgba(15, 17, 19, .85); border: 1px solid var(--rule); border-radius: 3px; padding: 7px 11px 6px; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .06em; color: var(--paper); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tier-key[hidden] { display: none; }
.tier-key span { display: flex; align-items: center; gap: 5px; }
.tier-key i { width: 11px; height: 11px; border-radius: 2px; display: block; }
.tier-key__1 { background: #3f9b35; }
.tier-key__2 { background: #d9a400; }
.tier-key__3 { background: #d23a2f; }
.tier-key__4 { background: #6c2bd9; }

/* the licence notice, at the foot of the Points list (the "i" and its panel gone, 2026-10-25) */
.points__about { margin: 10px 14px 4px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11px; line-height: 1.5; color: var(--grey); }
.points__about a { color: var(--paper-soft); }

/* the buttons, the zoom, the "i", the key and the grid's numbers glide with a zoom (Leaflet's own zoom timing); while
   the map is dragged they follow it at once */
.stage.is-zooming .tier-key,
.stage.is-zooming .leaflet-control-zoom, .stage.is-zooming .gridlabels, .stage.is-zooming .gridlabels span { transition: top .25s cubic-bezier(0, 0, .25, 1), right .25s cubic-bezier(0, 0, .25, 1), bottom .25s cubic-bezier(0, 0, .25, 1), left .25s cubic-bezier(0, 0, .25, 1), margin .25s cubic-bezier(0, 0, .25, 1); }

/* a phone (Cole, 2026-10-25: "the buttons sit over the entire screen so you cant see any map"): a compact bar, a slimmer
   strip, the Points list a sheet from the bottom, at most half the screen */
@media (max-width: 600px) {
  :root { --bar: 52px; }
  .bar { gap: 6px; padding: 0 6px 0 8px; }               /* the bar: the mark alone, small numbers and buttons, so all of it fits */
  .bar__title { display: none; }
  .bar__mark { width: 46px; height: 41px; }   /* bigger again (Cole, 2026-10-25) */
  .bar__hint { display: block; font-size: 12px; }
  .bar__hint[hidden] { display: none; }
  .bar__coords { font-size: 16px; }
  .bar__copy { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
  .bar__copy[hidden] { display: none; }
  .bar__copy-text { display: none; } .bar__copy-icon { display: block; }
  .bar__clear { width: 28px; height: 28px; }
  .bar__search { width: 34px; height: 34px; }
  .stage { --strip: 42px; }
  .layers { gap: 4px; padding: 0 6px; }
  .layers__btn { letter-spacing: .06em; padding: 7px 10px 6px; }
  .points { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55dvh; margin: 0; border-radius: 10px 10px 0 0; border-bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(0, 0, 0, .5); }
}
@media (max-width: 359px) {                         /* the smallest phones: the strip's buttons a size down, so they fit */
  .stage { --strip: 38px; }
  .layers__btn { font-size: 12.5px; padding: 6px 8px 5px; }
  .layers__count { width: 22px; height: 16px; font-size: 11px; line-height: 17px; }
}