@font-face {
  font-family: "VCR OSD Mono";
  src: url("fonts/VCR_OSD_MONO_1.001.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --bg: #181009;
  --panel: rgba(33, 22, 16, 0.94);
  --raise: #2a1d15;
  --line: #3a2a1e;
  --line-hi: #574131;
  --white: #f6ead5;
  --text: #e8d9c0;
  --grey: #b59f82;
  --muted: #8a7458;
  --accent: #e3cfa8;
  --accent-hi: #f6ead5;
  --copper: #c9794a;
  --chart: #e3cfa8;
  --ok: #9ccf6e;

  --head: "VT323", "IBM Plex Mono", ui-monospace, monospace;
  --pix: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
  --body: "VT323", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vcr: "VCR OSD Mono", "Silkscreen", ui-monospace, monospace;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --panel-solid: #211610;
  --top-h: 56px;
  --gutter: clamp(16px, 4vw, 48px);
  --panel-w: 290px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font: 400 1.2rem/1.35 var(--body); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--white); text-underline-offset: 3px; text-decoration-color: var(--line-hi); }
a:hover { text-decoration-color: var(--accent-hi); }
kbd { font-family: var(--mono); font-size: 0.75rem; }
:focus-visible { outline: 1px solid var(--white); outline-offset: 1px; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Top bar */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--top-h);
  display: flex; align-items: center; gap: 2rem; padding: 0 var(--gutter);
  background: rgba(24, 16, 9, 0.88); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line);
}
.logo { font: 400 1.25rem/1 var(--vcr); color: var(--white); text-decoration: none; white-space: nowrap; }
.logo em { font: 400 0.55rem var(--pix); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-left: 0.6rem; vertical-align: 0.25em; }
.nav nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav nav a { font-family: var(--pix); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--grey); transition: color 0.15s; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--white); }
.btn {
  display: inline-block; padding: 0.5rem 0.9rem; background: var(--panel-solid); color: var(--text);
  border: 2px solid var(--accent); box-shadow: 3px 3px 0 var(--line-hi);
  font-family: var(--pix); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background 0.1s, color 0.1s, transform 0.1s, box-shadow 0.1s;
}
.btn:hover, .btn:focus-visible { background: var(--accent); color: var(--bg); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line-hi); }
.search { position: relative; flex: 1; max-width: 460px; min-width: 140px; }
.search input {
  width: 100%; height: 38px; padding: 0 2.2rem 0 0.9rem;
  background: var(--panel-solid); color: var(--white);
  border: 2px solid var(--line); border-radius: 0;
  font: 400 1.15rem var(--body);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--accent); }
.search .hint { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--muted); border: 1px solid var(--line-hi); padding: 0 0.35rem; font: 0.6rem var(--pix); }
#results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; background: var(--panel-solid); border: 2px solid var(--line-hi); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  max-height: 60vh; overflow: auto;
}
#results li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; cursor: pointer; }
#results li small { color: var(--muted); white-space: nowrap; }
#results li[aria-selected="true"], #results li:hover { background: var(--raise); }
#results li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent-hi); }
.panel-toggle { display: none; background: var(--raise); border: 1px solid var(--line); padding: 0.35rem 0.7rem; }

/* Map */
#map { position: fixed; inset: var(--top-h) 0 0 0; background: #120c08; }
#map.over-point { cursor: pointer; }
.leaflet-pane > canvas.scene { pointer-events: none; }
body.tool-active #map { cursor: crosshair; }
.leaflet-container { background: #120c08; font: inherit; }
.leaflet-control-zoom { border: 1px solid var(--line) !important; border-radius: 0 !important; margin: 12px 12px 0 0 !important; }

.leaflet-control-zoom a { background: var(--panel) !important; color: var(--white) !important; border-color: var(--line) !important; border-radius: 0 !important; }
.leaflet-tooltip { background: var(--panel-solid); color: var(--white); border: 1px solid var(--line-hi); border-radius: 0; box-shadow: none; padding: 0.25rem 0.5rem; font: 500 0.85rem var(--body); }
.leaflet-tooltip::before { display: none; }
.hover-tip { pointer-events: none; white-space: nowrap; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-solid); color: var(--text); border-radius: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); border: 1px solid var(--line-hi); }
.leaflet-popup-content { margin: 0.85rem 1rem; font: inherit; min-width: 230px; }
.leaflet-popup-close-button { color: var(--grey) !important; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--white) !important; }
.leaflet-tooltip.place { background: none; border: 0; padding: 0; color: var(--white); text-shadow: 0 1px 2px #140d08, 0 0 8px #140d08, 0 0 2px #140d08; font: 600 0.8rem var(--body); letter-spacing: 0.04em; white-space: nowrap; }
.leaflet-tooltip.place.r0 { font: 400 1.35rem var(--head); letter-spacing: 0.08em; text-transform: uppercase; }
.leaflet-tooltip.place.r1 { font: 400 1.15rem var(--head); letter-spacing: 0.06em; text-transform: uppercase; }
.leaflet-tooltip.place.r3 { color: rgba(246, 234, 213, 0.7); font-weight: 500; font-size: 0.74rem; }
#map.hide-r0 .place.r0, #map.hide-r1 .place.r1, #map.hide-r2 .place.r2, #map.hide-r3 .place.r3 { display: none; }
.leaflet-tooltip.tier-label { background: rgba(24, 16, 9, 0.88); border: 1px solid var(--line-hi); color: var(--white); font: 600 0.72rem var(--body); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.05rem 0.4rem; pointer-events: none; }
.leaflet-tooltip.tier-label.t2 { border-color: #4ea1ff; }
.leaflet-tooltip.tier-label.t3 { border-color: #f2b134; }
.leaflet-tooltip.tier-label.t4 { border-color: #ff4d4d; }
.map-label { background: none !important; border: 0 !important; padding: 0 !important; color: var(--white) !important; font: 600 0.78rem var(--body) !important; letter-spacing: 0.06em; text-shadow: 0 1px 2px #140d08, 0 0 6px #140d08; white-space: nowrap; pointer-events: none; }

/* User markers */
.mk span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c); color: var(--c); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.mk .ic { width: 15px; height: 15px; }
.mk.locked span { background: var(--c); color: var(--bg); }
.mk-foot > span { display: flex; gap: 0.8rem; }

/* Panel */
.panel {
  position: fixed; z-index: 900; top: calc(var(--top-h) + 12px); left: 12px; bottom: 12px; width: var(--panel-w);
  overflow-y: auto; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px);
  scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; overscroll-behavior: contain;
}
.sec { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.sec > summary { list-style: none; cursor: pointer; margin: -0.7rem -0.9rem 0; padding: 0.7rem 0.9rem 0.35rem; display: flex; align-items: center; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; }
.sec:not([open]) > summary { padding-bottom: 0.7rem; margin-bottom: -0.7rem; }
.sec:not([open]) > summary::after { transform: rotate(-45deg); }
.panel h2 { font: 600 0.7rem var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); display: flex; align-items: center; gap: 0.5rem; }
.panel h2::before { content: ""; width: 12px; height: 2px; background: var(--accent); }
.row { display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0; cursor: pointer; user-select: none; }
.row:hover span { color: var(--white); }
.row input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--line-hi); flex: none; cursor: pointer; }
.row input[type="checkbox"]:checked { border-color: var(--white); background: var(--white); box-shadow: inset 0 0 0 2px var(--bg); }
.row .row-ic { width: 15px; height: 15px; color: var(--grey); }
.row input:checked ~ .row-ic { color: var(--white); }
.row .n { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pick { position: relative; display: block; margin-bottom: 6px; }
.pick select { appearance: none; width: 100%; padding: 0.36rem 2rem 0.36rem 0.8rem; background: none; border: 1px solid var(--line); color: var(--white); font-weight: 500; cursor: pointer; box-shadow: inset 0 -2px 0 var(--accent); }
.pick select:hover { border-color: var(--line-hi); }
.pick::after { content: ""; position: absolute; right: 0.8rem; top: 50%; width: 6px; height: 6px; border: solid var(--grey); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.base-row { display: flex; gap: 6px; }
.seg { display: flex; flex: 1; border: 1px solid var(--line); }
.seg button { flex: 1; background: none; border: 0; padding: 0.36rem 0.3rem; color: var(--grey); font-weight: 500; }
.seg button:hover:not(:disabled) { color: var(--white); }
.seg button[aria-pressed="true"] { background: var(--raise); color: var(--white); box-shadow: inset 0 -2px 0 var(--accent); }
.seg button:disabled { color: var(--muted); cursor: not-allowed; }
.tog { background: none; border: 1px solid var(--line); padding: 0.36rem 0.6rem; color: var(--grey); font-weight: 500; }
.tog:hover { color: var(--white); }
.tog[aria-pressed="true"] { background: var(--raise); color: var(--white); box-shadow: inset 0 -2px 0 var(--accent); }

/* Chips: loot types, vehicle types, animals */
.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chips[hidden] { display: none; }
.chips.types { display: grid; grid-template-columns: 1fr 1fr; margin: 0.2rem 0 0.45rem; }
.chips.sub { margin: 0.1rem 0 0.4rem; }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; padding: 0.12rem 0.4rem; border: 1px solid var(--line); background: var(--raise); color: var(--text); text-align: left; min-width: 0; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip b { margin-left: auto; padding-left: 0.3rem; font-weight: 500; color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.chip .ic { width: 13px; height: 13px; }
button.chip:hover { border-color: var(--line-hi); color: var(--white); }
button.chip[aria-pressed="false"] { background: none; color: var(--muted); border-style: dashed; }
button.chip[aria-pressed="false"] .sw { background: none !important; box-shadow: inset 0 0 0 1px var(--line-hi); }
.sw { width: 9px; height: 9px; flex: none; display: inline-block; }
.tier-key { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0.25rem 0 0.2rem; font-size: 0.78rem; color: var(--text); }
.tier-key[hidden] { display: none; }
.tier-key span, .tier-key label { display: flex; align-items: center; gap: 0.4rem; position: relative; }
.tier-key label { cursor: pointer; }
.tier-key label:hover .tk { border-width: 2px; }
.tier-key input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tier-key .link { grid-column: 1 / -1; justify-self: start; margin-top: 0.1rem; }
.tier-key .tk { width: 18px; height: 11px; flex: none; border: 1px solid var(--line-hi); }
.tier-key .tk[style] { border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 32%, transparent); }

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 0.25rem; }
.tools button { display: flex; align-items: center; justify-content: center; gap: 0.35rem; background: var(--raise); border: 1px solid var(--line); padding: 0.42rem 0.2rem; font-weight: 500; }
.tools button:hover { border-color: var(--line-hi); color: var(--white); }
.tools button[aria-pressed="true"] { border-color: var(--accent-hi); color: var(--white); }
.hint-line { margin-top: 0.55rem; font-size: 0.78rem; color: var(--muted); }
.link { background: none; border: 0; color: var(--grey); text-decoration: underline; text-decoration-color: var(--line-hi); font-size: 0.78rem; }
.link:hover { color: var(--white); }
.credit { padding: 0.7rem 0.9rem; color: var(--muted); font-size: 0.72rem; }

/* Lookup card */
.card { background: var(--raise); padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line); }
.card-head { display: flex; align-items: flex-start; gap: 0.5rem; }
.card h3 { font: 400 1.5rem/1.15 var(--head); color: var(--white); flex: 1; }
.card .x { background: none; border: 0; color: var(--grey); padding: 0.1rem; }
.card .x:hover { color: var(--white); }
.classes { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 0.2rem; }
.cls { background: none; border: 0; font: 0.74rem var(--mono); color: var(--muted); cursor: copy; text-align: left; padding: 0; word-break: break-all; }
.cls:hover { color: var(--white); }
.chips.static { margin: 0.55rem 0 0.1rem; }
.chip.t { border-color: rgba(227, 207, 168, 0.6); }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0.6rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.facts div { padding: 0.4rem 0.55rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.facts dd { font: 400 1.3rem/1.2 var(--head); color: var(--white); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wiki-link { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; }

/* Popup content */
.pop h4 { font: 400 1.35rem/1.15 var(--head); color: var(--white); display: flex; align-items: center; gap: 0.45rem; padding-right: 1rem; }
.pop > .cls { display: block; margin-top: 0.15rem; }
.pop .sub { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }
.pop .kv { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin-top: 0.55rem; font-size: 0.88rem; }
.pop .kv dt { color: var(--grey); }
.pop .kv dd { color: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
.pop .list { margin-top: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.pop .list input { width: 100%; background: var(--panel-solid); border: 1px solid var(--line); padding: 0.25rem 0.45rem; margin-bottom: 0.35rem; }
.pop .list ul { list-style: none; max-height: 200px; overflow: auto; font-size: 0.86rem; scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; }
.pop .list li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.15rem 0; cursor: pointer; }
.pop .list li span { display: flex; flex-direction: column; min-width: 0; }
.pop .list li code { font: 0.7rem var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .list li:hover span { color: var(--white); }
.pop .list li small { color: var(--muted); white-space: nowrap; }
.pop .coords { display: block; margin-top: 0.55rem; background: none; border: 0; padding: 0; font: 0.78rem var(--mono); color: var(--grey); cursor: copy; }
.pop .coords:hover { color: var(--white); }
.mk-edit input { width: 100%; background: var(--panel-solid); border: 1px solid var(--line); padding: 0.3rem 0.45rem; }
.symbols { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 0.5rem; }
.symbols button { display: grid; place-items: center; aspect-ratio: 1; background: var(--panel-solid); border: 1px solid var(--line); color: var(--grey); }
.symbols button:hover { color: var(--white); }
.symbols button[aria-pressed="true"] { border-color: var(--white); color: var(--white); }
.swatches { display: flex; gap: 6px; margin-top: 0.5rem; }
.swatches button { width: 20px; height: 20px; border: 1px solid #140d08; }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--white); outline-offset: 1px; }
.mk-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.mk-foot .coords { margin: 0; }
.del { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; color: var(--grey); font-size: 0.82rem; }
.del .ic { width: 14px; height: 14px; }
.del:hover { color: var(--hit); }

/* Right-click menu */
.ctx { position: fixed; z-index: 1200; min-width: 210px; background: var(--panel-solid); border: 1px solid var(--line-hi); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); padding: 0.25rem 0; }
.ctx-head { padding: 0.35rem 0.8rem 0.45rem; font: 0.78rem var(--mono); color: var(--grey); border-bottom: 1px solid var(--line); margin-bottom: 0.25rem; display: flex; justify-content: space-between; gap: 1rem; }
.ctx-head span { font-family: var(--body); color: var(--white); font-weight: 600; }
.ctx button { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; padding: 0.4rem 0.8rem; text-align: left; color: var(--text); }
.ctx button:hover, .ctx button:focus-visible { background: var(--raise); color: var(--white); outline: none; }
.ctx .ic { color: var(--grey); }

/* Readouts */
.readout { position: fixed; z-index: 900; left: calc(var(--panel-w) + 24px); bottom: 12px; background: var(--panel); border: 1px solid var(--line); padding: 0.3rem 0.65rem; font: 500 0.82rem var(--mono); color: var(--text); pointer-events: none; font-variant-numeric: tabular-nums; white-space: pre; }
.readout:empty { display: none; }
.scalebar { position: fixed; z-index: 900; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; pointer-events: none; }
.scalebar span { display: block; height: 6px; border: 2px solid var(--white); border-top: 0; }
.scalebar b { font: 600 0.75rem var(--body); color: var(--white); text-shadow: 0 1px 2px #140d08; }
.toast { position: fixed; z-index: 1300; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel-solid); border: 1px solid var(--line-hi); padding: 0.45rem 0.9rem; color: var(--white); font-weight: 500; }
.measure-label { background: rgba(24, 16, 9, 0.92); border: 1px solid var(--line-hi); color: var(--white); padding: 0.1rem 0.4rem; font: 600 0.78rem var(--mono); white-space: nowrap; }

@media (max-width: 760px) {
  :root { --top-h: 98px; }
  .nav { gap: 0.5rem 0.75rem; padding: 8px var(--gutter); flex-wrap: wrap; align-content: center; }
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
  .search { order: 5; flex: 1 1 100%; max-width: none; min-width: 0; }
  .logo em, .search .hint { display: none; }
  .panel-toggle { display: block; }
  .panel { z-index: 950; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-width: 1px 0 0; transform: translateY(105%); transition: transform 0.2s; }
  .panel.open { transform: none; }
  .readout { left: 10px; bottom: 10px; }
  .leaflet-control-zoom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .panel, .sec > summary::after { transition: none; } }

/* CYBERIA type */
.panel h2, .card h3, .pop h4, .facts dt, .facts dd, .leaflet-tooltip.place.r0, .leaflet-tooltip.place.r1, .leaflet-tooltip.tier-label { font-family: var(--head); }
.panel h2 { font: 400 0.58rem var(--pix); letter-spacing: 0.12em; }
.panel h2::before { height: 3px; background: var(--accent); }
.facts dt, .pop .sub, .leaflet-tooltip.tier-label, .panel-toggle { font-family: var(--pix); font-size: 0.55rem; letter-spacing: 0.1em; }
.card h3, .pop h4 { font-weight: 400; }
.panel { border-width: 2px; }
.pick select, .seg, .tog, .tools button, .leaflet-control-zoom { border-width: 2px !important; }
.seg button[aria-pressed="true"], .tog[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
.tools button[aria-pressed="true"] { border-color: var(--accent); }
.panel-toggle { border: 2px solid var(--accent); box-shadow: 2px 2px 0 var(--line-hi); }
.ctx { border-width: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); }
.leaflet-popup-content-wrapper { border-width: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); }
.leaflet-popup-tip { display: none; }

/* CYBERIA wordmark: copper to cream, with a quick prismatic sweep now and then */
.cy {
  position: relative; display: inline-block; font-family: var(--vcr); font-weight: 400; letter-spacing: 0.18em; text-indent: 0;
  background: linear-gradient(100deg, var(--copper) 0%, #d9a773 22%, var(--accent-hi) 48%, #d9a773 70%, var(--copper) 100%);
  background-size: 320% 320%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cy-drift 23s ease-in-out infinite;
}
/* the gradient wanders: uneven stops so the motion never settles into a beat */
@keyframes cy-drift {
  0% { background-position: 0% 50%; }
  17% { background-position: 38% 20%; }
  31% { background-position: 14% 76%; }
  48% { background-position: 71% 44%; }
  63% { background-position: 46% 90%; }
  79% { background-position: 92% 30%; }
  100% { background-position: 0% 50%; }
}
.cy::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, #ffb8b8 43%, #fff2a8 47%, #b8ffd9 51%, #b8dcff 55%, #e6bfff 59%, transparent 64%);
  background-size: 300% 100%; background-position: 160% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0;
  animation: cy-shine 13s linear infinite;
}
@keyframes cy-shine {
  0%, 90% { background-position: 160% 0; opacity: 0; }
  90.5% { opacity: 1; }
  99.5% { background-position: -60% 0; opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cy, .cy::after { animation: none; } }

/* Pixelify Sans ships odd fi/fl ligatures */
h1, h2, h3, .cy, .logo, .wordmark, .srv-map, .stat dd, .card h3, .pop h4, .tile h2, .panel h2, .facts dd { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }

/* VT323 runs small for its em: lift the body-font sizes */
.chip { font-size: 1rem; }
.chip b { font-size: 0.9rem; }
.row .n { font-size: 1rem; }
.tier-key { font-size: 1rem; }
.hint-line, .link { font-size: 1rem; }
.credit { font-size: 0.95rem; }
.pop .kv, .pop .list ul { font-size: 1.1rem; }
.pop .list li small { font-size: 1rem; }
.wiki-link { font-size: 1.1rem; }
.del { font-size: 1.05rem; }
.leaflet-tooltip { font: 400 1.05rem var(--body); }
.leaflet-tooltip.place { font: 400 1rem var(--body); letter-spacing: 0.04em; }
.map-label { font: 400 1rem var(--body) !important; }
.scalebar b { font: 400 0.95rem var(--body); }
.toast { font-size: 1.1rem; }
.ctx-head span { font-size: 1.1rem; }

/* Search groups and wiki-linked titles */
#results .grp { padding: 0.45rem 0.9rem 0.1rem; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: default; }
#results .grp:not(:first-child) { border-top: 1px solid var(--line); margin-top: 0.2rem; }
.pop h4 a.wl, .pop h3 a.wl { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--grey); text-underline-offset: 3px; }
.pop h4 a.wl:hover, .pop h3 a.wl:hover { text-decoration-style: solid; text-decoration-color: var(--accent); }
.leaflet-tooltip.place { pointer-events: auto; cursor: pointer; }