/* zcrisis.com shared design system, v2 (2026-10-31). Every page loads this + /site.js. Reference page: /style/.
   Look: Knox County, Kentucky, 1993, seen through the game itself. Panels are Project Zomboid windows (same family as
   /perso/charwin.css), items sit in inventory slots, status is shown with the game's moodles; the survivor's field kit
   adds the paper map (grid, margin ticks), US guide signs for places, index cards for tips, hazard tape for warnings
   and red grease pencil for annotations. Type: Barlow Condensed (highway-sign lineage) for display, Barlow for text.
   Language: <html data-lang="fr|en">; write both versions as <span lang="fr">…</span><span lang="en">…</span>
   (or any element with lang=), the other one is hidden. site.js sets data-lang before paint.

   RULES
   - Game item icons (/icons/*.png, 32 px art) only at 32, 64 or 96 px (1x/2x/3x), pixelated, object-fit: contain
     (a few are 23x32 or 32x34: they must not stretch). Use .zc-ico--32/64/96 or ZC.icon(). Never 36/40/48 px.
   - Moodles only at their own 32/48/64 px files (.zc-moodle--32/48/64, ZC.moodle()). Other game UI art
     (/img/game/ui/, ZC.ui()) only at its native size.
   - ANTI-FLICKER (see docs/website.md): site.js loads in <head> (no defer) and draws nav/banner/footer before paint;
     anything that arrives later (data, login chip, Join button) gets a box of its final size first. Page transitions
     are cross-document View Transitions (bottom of the banner section).
   - This file loads after each page's own <style>, so it never styles bare elements (no margins on h1/p/table…);
     everything new is a .zc-* class. Old shared classes (.btn, .panel, .paper, .section…) keep working.

   COMPONENTS (one-line usage; full examples on /style/)
   .zc-ico .zc-ico--32|64|96         <img class="zc-ico zc-ico--32" src="/icons/Axe.png" width="32" height="32" alt="">
   .zc-slot .zc-slot--32|64|96       inventory slot around an icon; <b class="zc-slot-n">3</b> count, .zc-slot-cond bar,
                                     .is-on selected, .zc-slot--empty; ZC.slot(name, {size, count, title, lines, href})
   .zc-moodle --32|48|64 + --good1..4|--bad1..4|--neutral   round moodle badge, ZC.moodle("hungry", {level:"bad2"})
   .zc-panel > .zc-panel-bar (img.zc-ico + .zc-panel-title + .zc-panel-meta) + .zc-panel-body   game window;
                                     --flush (body without padding, for lists/tables), --hazard (warning window)
   .zc-card (a.zc-card = link card, --me = yours)    lighter block inside a grid or a window
   .zc-stat > .zc-stat-k / .zc-stat-v / .zc-stat-d  label, value, detail; --good|--warn|--bad colour the value
   .zc-meter --good|--warn|--bad|--seg  <div class="zc-meter" style="--v:.7"><i></i></div>
   .zc-tag --ok|--warn|--bad|--sign|--gold          small label;  .zc-dot --on|--idle|--off  status light
   .zc-list > li (img.zc-ico + .zc-list-main + .zc-list-end), .zc-list-head   inventory rows
   .zc-table-wrap > table.zc-table (td.num)         data table
   .zc-tabs > .zc-tab[aria-selected=true]           flat game tabs
   .zc-input, .zc-field                             text field / select, label wrapper
   .zc-btn --primary|--sign|--discord|--ghost|--sm|--lg   (same as .btn .primary .discord .ghost .small .big)
   .zc-note (--tape, --kraft, --tilt-r) > .zc-note-t + p     index card / taped paper note for tips
   .zc-sign (--sm, --bolts) > .zc-sign-name + .zc-sign-sub; .zc-shield   US guide sign for place names
   .zc-hazard > .zc-hazard-t + p; .zc-hazard-strip  warnings only
   .zc-pencil, .zc-circled                           red grease-pencil annotation / circled number
   .zc-stamp (--blue, --on-dark) > text + <small>    rubber stamp = an official ruling (closed, not found, quarantine)
   .zc-note--clip                                    note held by a paper clip; .zc-note--kraft has road-map folds
   .zc-knox, .zc-page-ctx                            banner's Knox County strip / red-pencil page note (site.js)
   .zc-tip                                           game tooltip (site.js draws it for [data-zc-tip])
   .zc-empty > .zc-slot + .zc-empty-t + p + .btn    empty / logged-out state with an action
   .zc-skel --line|--title|--slot|--block            loading placeholders
   .zc-h                                             section heading with a map rule (optional 32 px icon first)
   .zc-grid (--min), .zc-cols-2|3|4, .zc-split, .zc-stack, .zc-cluster   layout helpers (gap via --gap) */

:root {
  /* palette (v1 names, kept) */
  --night: #161a19; --slate: #232927; --slate-2: #2c3331; --line: #3a4240; --text: #ece7dc; --dim: #a6aaa1;
  --sign: #0f5b3b; --sign-hi: #13704a; --sign-text: #f2f4ef;
  --paper: #e5dbc2; --paper-ink: #2b2a24; --paper-dim: #6b6556;
  --pencil: #c8402e; --pencil-hi: #db5440; --amber: #e0a33a; --ok: #8bd06a; --discord: #5865f2;
  --display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif; --body: Barlow, "Barlow Fallback", system-ui, sans-serif;
  --radius: 4px; --wrap: 1120px;
  /* v2: game windows and slots */
  --win: rgba(17, 20, 19, .9); --win-solid: #131615; --win-line: rgba(255, 255, 255, .2); --win-line-soft: rgba(255, 255, 255, .1);
  --win-title: linear-gradient(#4a4f4d, #272b2a); --win-ink: #f1efe8;
  --win-shade: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -60px 60px -60px rgba(0, 0, 0, .45);
  --win-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .42);
  --r-win: 3px; --r-slot: 2px;
  --slot: #0c0f0e; --slot-line: rgba(255, 255, 255, .16);
  --sel: rgba(120, 160, 220, .17);          /* the game's row highlight */
  --good: var(--ok); --warn: var(--amber); --bad: #e0675a; --gold: #e4c15a;
  /* v2: field kit */
  --hazard-y: #e3b23c; --hazard-k: #1c1c1a;
  --card-paper: #f3efe3; --card-rule: rgba(84, 124, 196, .34); --card-top: rgba(200, 64, 46, .6);
  --tape: rgba(236, 230, 208, .74);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* moodle disc tints: the game tints its grey disc green when good, yellow to red when bad */
  --m-neutral: #8e9290; --m-good1: #b5df98; --m-good2: #7cc65c; --m-good3: #47a03a; --m-good4: #2a7a2c;
  --m-bad1: #ecd97a; --m-bad2: #eaa53c; --m-bad3: #dc672c; --m-bad4: #c22e20;
  /* aliases so older page styles keep working while they move over */
  --bg: var(--night); --bg2: #1b201f; --card: var(--slate); --accent: var(--pencil); --accent2: var(--amber); --bar: var(--slate-2);
}
/* Web fonts swap in late on a cold visit (Google Fonts, display=swap). These local fallbacks are scaled to Barlow's
   width and line metrics (measured: Barlow 400 = 93 % of Arial, Barlow Condensed 700 = 90.6 % of Arial Narrow Bold;
   Barlow ascent 1.0 em, descent 0.2 em), so text keeps its size and line breaks when the real font arrives. */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 93%;
  ascent-override: 107.5%; descent-override: 21.5%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 600 700; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow");
  size-adjust: 90.6%; ascent-override: 110.4%; descent-override: 22.1%; line-gap-override: 0%; }
:root[data-lang="fr"] [lang="en"]:not(html), :root[data-lang="en"] [lang="fr"]:not(html) { display: none !important; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* scrollbar-gutter: the scrollbar space is kept even while a new page is still short, so the viewport never changes
   width between pages (a width change aborts the View Transition and jumps the layout sideways) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #4a524f var(--night); scrollbar-gutter: stable; }
/* the night map case: faint survey grid and film grain under everything (scrolls with the page, no fixed layers) */
body { margin: 0; color: var(--text); font: 17px/1.6 var(--body);
  background: var(--grain),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(236, 231, 220, .045), transparent 70%),
    linear-gradient(rgba(236, 231, 220, .026) 1px, transparent 1px) 0 0 / 128px 128px,
    linear-gradient(90deg, rgba(236, 231, 220, .026) 1px, transparent 1px) 0 0 / 128px 128px,
    linear-gradient(rgba(236, 231, 220, .011) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(236, 231, 220, .011) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--night); }
::selection { background: rgba(200, 64, 46, .5); color: #fff; }
a { color: inherit; }
/* No margin here: site.css loads after each page's own styles, so it must not override their spacing. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: .005em; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--amber); color: #111; padding: 8px 12px; border-radius: 3px; }
.skip:focus { left: 8px; }
main { display: block; }
.muted { color: var(--dim); }
@media (max-width: 520px) { .wrap { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- buttons: the game's flat grey buttons; .btn (v1) and .zc-btn are the same component ---------- */
.btn, .zc-btn { --b-bg: linear-gradient(#3b413f, #2a2f2e); --b-line: rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px;
  border: 1px solid var(--b-line); border-radius: 4px; background: var(--b-bg); color: var(--text); cursor: pointer;
  font: 600 16px/1.1 var(--body); text-decoration: none; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .35); transition: filter .15s, border-color .15s; }
.btn:hover, .zc-btn:hover { background: var(--b-bg); filter: brightness(1.14); border-color: rgba(255, 255, 255, .34); }
.btn:active, .zc-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); }
.btn:disabled, .zc-btn:disabled, .zc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.btn.primary, .zc-btn--primary { --b-bg: linear-gradient(#d44c39, #b1382a); --b-line: #e2604c; color: #fff; }
.btn.discord, .zc-btn--discord { --b-bg: linear-gradient(#6873f4, #4a56df); --b-line: #7a85f6; color: #fff; }
.btn.sign, .zc-btn--sign { --b-bg: linear-gradient(#177a52, var(--sign)); --b-line: var(--sign); color: var(--sign-text);
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px rgba(242, 244, 239, .85), 0 1px 2px rgba(0, 0, 0, .35); }
.btn.ghost, .zc-btn--ghost { --b-bg: transparent; box-shadow: none; }
.btn.small, .zc-btn--sm { min-height: 34px; padding: 6px 12px; font-size: 14.5px; }
.btn.big, .zc-btn--lg { min-height: 52px; padding: 12px 24px; font-size: 18px; }
.btn > .zc-ico, .zc-btn > .zc-ico { margin: -8px 0 -8px -8px; }

/* ---------- nav, header v2 (site.js nav(), docs/design/header-v2.html): the Knox County radio strip (30 px, scrolls
   away: the nav sticks at top -30px) over an asphalt bar (66 px) with a yellow centre line; the logo, then one game
   icon over each section's name (Persos, Safehouse, Carte, Boutique, Roue, Votes), the crate that opens the one menu
   ("Plus"), and the player plate. The current section is a green highway sign. Height in --zc-navh (/map uses it). ---------- */
.zc-nav { position: sticky; top: -30px; z-index: 50; background: #181b1a var(--grain); border-bottom: 1px solid #0b0d0c;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.zc-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(227, 178, 60, .75) 0 30px, transparent 30px 54px); }
.zc-nav .wrap { display: flex; align-items: center; gap: 18px; height: 66px; max-width: 1400px; }
.zc-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* the logo's splashes spill a little over the yellow line */
.zc-brand .zc-logo { display: block; width: auto; height: 60px; margin-bottom: 0; position: relative; z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); image-rendering: auto; }
.zc-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.zc-nt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 74px; height: 56px;
  padding: 0 8px; border: 0; border-radius: 6px; background: none; color: #b3b6ae; cursor: pointer; text-decoration: none;
  font: 600 13px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.zc-nt > img, .zc-nt .zc-bulbs { width: 32px; height: 32px; flex: none; }
.zc-nt:hover, .zc-nt[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .06); }
.zc-nt:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.zc-nt[aria-current="page"] { color: var(--sign-text); background: var(--sign);
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px var(--sign-text), 0 3px 8px rgba(0, 0, 0, .4); }
img.zc-crate { image-rendering: auto; }
/* the wheel: two frames of the same wheel, bulbs blink while today's spin is there; grey once spun */
.zc-bulbs { position: relative; display: inline-block; width: 32px; height: 32px; }
.zc-bulbs img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.zc-bulbs img + img { animation: zc-bulb 1.1s steps(1) infinite; }
.zc-bulbs.off img + img { animation: none; opacity: 0; }
.zc-bulbs.off { filter: saturate(.35) brightness(.8); }
@keyframes zc-bulb { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zc-bulbs img + img { animation: none; } }
.zc-spacer { flex: 1; }
.zc-tools { display: flex; align-items: center; gap: 10px; flex: none; }
/* header buttons scoped to .zc-nav: the in-page game tabs (.zc-tabs > .zc-tab, further down) share the class */
.zc-nav .zc-tab { position: static; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 3px; background: none;
  color: var(--dim); font: 500 15.5px/1.2 var(--body); cursor: pointer; white-space: nowrap; }
.zc-nav .zc-tab:hover, .zc-nav .zc-tab[aria-expanded="true"] { color: var(--text); background: rgba(255, 255, 255, .06); }
/* the player plate: energy moodle | portrait + ZC Level | name, one framed plate (and the admin switch beside it) */
.zc-nav .zc-me-b, .zc-nav .zc-admin { border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px;
  background: linear-gradient(#2c3230, #1e2322); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.zc-nav .zc-me-b { height: 52px; gap: 10px; padding: 0 12px 0 6px; color: var(--text); }
.zc-nav .zc-me-b:hover, .zc-nav .zc-me-b[aria-expanded="true"], .zc-nav .zc-admin:hover { border-color: rgba(255, 255, 255, .3); background: linear-gradient(#323836, #232827); }
.zc-nav .zc-me-b[aria-current="page"] { border-color: var(--sign-text); box-shadow: inset 0 0 0 1px var(--sign); }
.zc-pl-en { display: inline-flex; align-items: center; gap: 9px; height: 100%; }
.zc-pl-en[hidden] { display: none; }
.zc-pl-mood { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: radial-gradient(#2f3331, #151817); border: 2px solid #7cc65c; }
.zc-pl-en--mid .zc-pl-mood { border-color: var(--amber); } .zc-pl-en--low .zc-pl-mood { border-color: #d9503d; }
.zc-pl-mood img { width: 26px; height: 26px; image-rendering: pixelated; }
.zc-pl-mood .zc-cf-dot { right: -1px; bottom: 0; }
.zc-pl-num { display: flex; flex-direction: column; gap: 3px; line-height: 1; text-align: left; }
.zc-pl-num small { font: 600 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #9da199; }
.zc-pl-num b { font: 700 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.zc-pl-num .zc-cf-e { width: 56px; height: 5px; border: 0; }
.zc-pl-sep { width: 1px; align-self: stretch; margin: 8px 0 8px 2px; background: rgba(255, 255, 255, .12); }
.zc-pl-port { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 2px #000; background: linear-gradient(#4a504e, #2c3130); }
.zc-me .zc-pl-port > img, .zc-me .zc-pl-port > .zc-me-noav { width: 100%; height: 100%; border-radius: 0; box-shadow: none; font-size: 20px; }
.zc-pl-lv { position: absolute; right: -6px; bottom: -6px; padding: 0 5px; border-radius: 2px; background: var(--amber); color: #1b1b1b;
  font: 700 12px/17px var(--display); font-style: normal; }
.zc-pl-who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.zc-pl-who b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font: 600 15px/1.1 var(--body); }
.zc-caret { width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; opacity: .7; transition: transform .12s; }
[aria-expanded="true"] > .zc-caret { transform: rotate(180deg); }
.zc-nav .zc-lang1 { font-weight: 600; font-size: 13px; border: 1px solid var(--win-line); padding: 7px 9px; }
.zc-me { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.zc-me img, .zc-me-noav { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--win-line); flex: none; }
.zc-me .zc-pl-mood img, .zc-me .zc-admin img, .zc-dd img { border-radius: 0; box-shadow: none; }
.zc-me-noav { display: inline-grid; place-items: center; background: linear-gradient(#4a504e, #2c3130); color: var(--text);
  font: 700 14px/1 var(--display); font-style: normal; text-transform: uppercase; }
/* ZC Level under the player's name (src/zclevel.js, /niveau/) */
.zc-lvl { color: var(--amber); font: 600 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* energy dot (where the character is) and bars, shared by the plate and its menu */
.zc-cf-dot { position: absolute; right: -2px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #777; box-shadow: 0 0 0 2px #1a1e1d; }
.zc-cf-on { background: #6fcf6f; box-shadow: 0 0 0 2px #1a1e1d, 0 0 6px rgba(111, 207, 111, .7); } .zc-cf-rest { background: #6fb7e0; } .zc-cf-off { background: #777; }
.zc-cf-e { display: inline-block; width: 38px; height: 7px; border: 1px solid rgba(0, 0, 0, .5); border-radius: 1px; background: #0b0d0c; overflow: hidden; }
.zc-cf-e i { display: block; height: 100%; }
.zc-cf-e.s i { background: linear-gradient(#f0c95c, #c98a26); } .zc-cf-e.g i { background: linear-gradient(#8fd0f0, #4f93bd); }
/* ten tabs in the bar: they tighten before anything overflows */
@media (max-width: 1440px) { .zc-nt { min-width: 60px; padding: 0 4px; font-size: 12px; letter-spacing: .05em; } .zc-links { gap: 2px; } .zc-nav .wrap { gap: 12px; } }
@media (max-width: 1240px) { .zc-pl-num .zc-cf-e { display: none; } }
@media (max-width: 1140px) { .zc-nav .zc-me-b .zc-pl-who, .zc-nav .zc-admin > span { display: none; } .zc-nt { min-width: 64px; padding: 0 5px; } .zc-nav .wrap { gap: 12px; } }
/* admin mode switch (Matt only), left of the plate: grey LED off, red button + lit LED on */
.zc-nav .zc-admin { height: 52px; gap: 7px; padding: 0 10px; font-size: 14px; font-weight: 600; }
.zc-admin img { width: 20px; height: 20px; }
.zc-admin-led { width: 8px; height: 8px; border-radius: 50%; background: #4b4f4d; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.zc-nav .zc-admin.on { color: #fff; background: linear-gradient(#b8402f, #8a2a1e); border-color: #e0675a; }
.zc-nav .zc-admin.on:hover { background: linear-gradient(#c8473a, #962f22); }
.zc-admin.on .zc-admin-led { background: #ff8a6e; box-shadow: 0 0 6px #ff6a4d; }
.zc-adminview .zc-nav { box-shadow: inset 0 -2px 0 rgba(200, 64, 46, .85), 0 8px 22px rgba(0, 0, 0, .22); }
/* dropdowns: the game's right-click menu (same look as /perso/ctxmenu.js): dark translucent panel, thin light frame,
   small light text, icon at the left, plain white hover band */
.zc-more { position: relative; display: inline-flex; }
.zc-dd { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: none; min-width: 210px; padding: 3px 0;
  background: rgba(12, 12, 12, .93); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
  color: #e6e6e6; font: 13.5px/1.3 "Noto Sans", "Segoe UI", Arial, sans-serif; text-shadow: 0 1px 0 #000; letter-spacing: 0; text-transform: none; }
.zc-dd.open { display: block; }
.zc-dd--right { left: auto; right: 0; }
.zc-dd-it { display: flex; width: 100%; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border: 0; background: none;
  color: inherit; font: inherit; text-shadow: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.zc-dd-it:hover, .zc-dd-it:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; outline: none; }
.zc-dd-it[aria-current="page"] { color: #fff; box-shadow: inset 2px 0 0 #2fa36d; }
.zc-dd-it img, .zc-dd-noic, .zc-dd-check { width: 20px; height: 20px; object-fit: contain; flex: none; image-rendering: pixelated; }
.zc-dd-it span { flex: 1; }
.zc-dd-it em { margin-left: 14px; color: #9a9a9a; font-style: normal; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.zc-dd-check { display: grid; place-items: center; }
.zc-dd-it[aria-checked="true"] .zc-dd-check::before { content: "✔"; color: #9ad27a; font-size: 12px; }
.zc-dd-sep { height: 1px; margin: 3px 6px; background: rgba(255, 255, 255, .18); }
.zc-dd-title { padding: 3px 12px 5px; color: #a9a9a9; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, .15); margin-bottom: 2px; white-space: nowrap; }
.zc-dd-title small { color: #808080; }
.zc-nav .zc-menu, .zc-tb-more { display: none; }
@media (max-width: 960px) {
  .zc-links { display: none; }
  .zc-links .zc-more { display: none !important; }
  .zc-nav .zc-menu { display: inline-flex; }
  /* the open menu is an inventory: one slot per page */
  .zc-nav.open .zc-links { display: grid; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 96px); overflow-y: auto;
    padding: 12px 16px 16px; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    background: var(--win-solid); border-bottom: 1px solid var(--win-line); box-shadow: 0 18px 30px rgba(0, 0, 0, .5); }
  .zc-nav.open .zc-links a { flex-direction: row; justify-content: flex-start; gap: 10px; height: auto; padding: 6px 10px 6px 6px; color: var(--text);
    background: rgba(255, 255, 255, .03); border: 1px solid var(--win-line-soft); border-radius: 3px; font-size: 15px; }
  .zc-me .name, .zc-tools [data-zc-join] { display: none; }
}
@media (max-width: 520px) { .zc-nav .wrap { gap: 10px; padding: 0 14px; } .zc-tools { gap: 6px; } }

/* tabs of a section under its banner (site.js sectionTabs(): Persos = Characters, Diary; Safehouse = my safehouse,
   Storage, Garage, Activity, Skull shop) */
.zc-ptabs { background: #151918; border-bottom: 1px solid #262c2a; }
.zc-ptabs .wrap { display: flex; gap: 4px; padding-top: 6px; overflow-x: auto; scrollbar-width: none; }
.zc-ptabs a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 12px 9px; border-radius: 4px 4px 0 0; color: #a6aaa1; text-decoration: none;
  font: 600 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.zc-ptabs a img { width: 22px; height: 22px; image-rendering: pixelated; }
.zc-ptabs a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.zc-ptabs a[aria-current="page"] { color: #fff; background: #1f2423; box-shadow: inset 0 2px 0 #2fa36d; }

/* ---------- page banner (site.js, PAGES): a town strip cut from the game map, survey grid, margin ruler,
   the tab's item in a slot, title, and a guide sign that opens that town on the live map ---------- */
.zc-page { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid rgba(0, 0, 0, .65);
  background: linear-gradient(90deg, rgba(22, 26, 25, .97) 0%, rgba(22, 26, 25, .84) 40%, rgba(22, 26, 25, .34) 100%),
    linear-gradient(0deg, rgba(22, 26, 25, .92), transparent 58%), var(--town) 60% 50% / cover, var(--slate); }
.zc-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(236, 231, 220, .08) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(236, 231, 220, .08) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.zc-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--pencil), var(--pencil)) 0 100% / 120px 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(236, 231, 220, .5) 0 1px, transparent 1px 120px) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(236, 231, 220, .28) 0 1px, transparent 1px 24px) 0 100% / 100% 6px no-repeat; }
.zc-page .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic txt sign";
  align-items: center; gap: 24px; padding-top: 40px; padding-bottom: 42px; }
.zc-page .zc-page-ic { grid-area: ic; transform: rotate(-2deg); border-color: rgba(255, 255, 255, .3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 4px rgba(0, 0, 0, .35), 0 14px 26px rgba(0, 0, 0, .5);
  animation: zc-settle .55s cubic-bezier(.2, .9, .3, 1.25) both; }
.zc-page-txt { grid-area: txt; min-width: 0; }
.zc-page h1 { font-size: clamp(40px, 6vw, 64px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55); overflow-wrap: break-word; }
.zc-page p { margin: 10px 0 0; max-width: 64ch; color: #d6d4ca; font-size: 17.5px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.zc-town { grid-area: sign; align-self: start; animation: zc-swing .7s .1s ease-out both; transform-origin: 50% -40px; }
/* the sign hangs from the top of the banner on two straps, like an overhead highway sign */
.zc-page .zc-town::before { content: ""; position: absolute; bottom: 100%; left: 24px; right: 24px; height: 80px; pointer-events: none;
  background: linear-gradient(90deg, #6a716d 0 3px, transparent 3px calc(100% - 3px), #6a716d calc(100% - 3px)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
@keyframes zc-settle { from { opacity: 0; transform: translateY(-10px) rotate(-8deg) scale(.92); } }
@keyframes zc-swing { from { opacity: 0; transform: rotate(3deg) translateY(-6px); } }
@media (max-width: 760px) {
  .zc-page .wrap { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sign sign" "ic txt" "desc desc";
    gap: 14px 16px; padding-top: 22px; padding-bottom: 28px; }
  .zc-page-txt { display: contents; }
  .zc-page h1 { grid-area: txt; align-self: center; font-size: clamp(30px, 8.6vw, 40px); }
  .zc-page p { grid-area: desc; margin: 0; font-size: 15.5px; }
  .zc-town { justify-self: start; }
}
/* the same gap under the banner on every tab, whatever each page's own main padding. The min-height keeps the footer
   below the fold while the page's data loads, so a growing page never pushes a visible footer (layout shift) */
.zc-page ~ main { padding-top: 34px; min-height: calc(100vh - 66px); }

/* Knox County strip: the header's top band on every page, a radio readout of the game world (site.js knox()). Fixed
   30 px whatever the data (skeleton, values, "no signal"), so it never moves the page. */
.zc-knox { position: relative; z-index: 2; height: 30px; color: var(--dim); font-size: 13.5px;
  background: repeating-linear-gradient(0deg, rgba(236, 231, 220, .028) 0 1px, transparent 1px 3px), #090b0a;
  border-bottom: 1px solid #222; }
.zc-knox-row { display: flex; align-items: center; height: 30px; max-width: 1400px; margin: 0 auto; padding: 0 24px; overflow: hidden; white-space: nowrap; }
.zc-knox-tag { flex: none; margin-right: 4px; padding: 3px 7px 2px; border-radius: 2px; color: var(--sign-text); background: var(--sign);
  box-shadow: inset 0 0 0 1px rgba(242, 244, 239, .55); font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.zc-knox-seg { display: inline-flex; align-items: center; gap: 7px; height: 20px; padding: 0 12px; color: var(--text); text-decoration: none;
  border-left: 1px solid rgba(255, 255, 255, .1); }
.zc-knox-tag + .zc-knox-seg { border-left: 0; }
a.zc-knox-seg:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.zc-knox-clock { font: 700 16px/1 var(--display); letter-spacing: .06em; color: #ffcf6b; text-shadow: 0 0 6px rgba(255, 180, 60, .4); font-variant-numeric: tabular-nums; }
.zc-knox-date, .zc-knox-wxt, .zc-knox-static { color: var(--dim); }
.zc-knox-wx .zc-moodle, .zc-knox-art { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -2px; }
.zc-knox-wx .zc-moodle { width: 26px; height: 26px; margin: -3px 0; }
.zc-knox .zc-tag { padding-top: 1px; padding-bottom: 1px; font-size: 12px; }
.zc-knox-power { margin-left: 6px; }
.zc-knox-skel { width: 130px; height: 10px; margin: 0 0 0 14px; } .zc-knox-skel--s { width: 70px; }
@media (max-width: 760px) { .zc-knox-day, .zc-knox-wxt { display: none; } .zc-knox-seg { padding: 0 9px; } }
@media (max-width: 520px) { .zc-knox-row { padding: 0 12px; } .zc-knox-tag, .zc-knox-date { display: none; } .zc-knox-row > .zc-knox-seg:first-of-type { padding-left: 0; border-left: 0; } }

/* page context: red-pencil note in the banner's bottom padding (absolute, so it never moves anything; site.js context()) */
.zc-page-txt { position: relative; }
.zc-page .zc-page-ctx { position: absolute; left: 2px; top: 100%; margin: 7px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--pencil-hi); font: 600 17px/1.15 var(--display); letter-spacing: .03em; text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  transform: rotate(-1.2deg); transform-origin: 0 50%; }
.zc-page .zc-page-ctx:not(:empty)::before { content: ""; display: inline-block; width: 22px; height: 2px; margin: 0 8px 4px 0; vertical-align: middle;
  background: currentColor; border-radius: 2px; opacity: .8; }
@media (max-width: 760px) {
  .zc-page .wrap { grid-template-areas: "sign sign" "ic txt" "desc desc" "ctx ctx"; }
  .zc-page .zc-page-ctx { grid-area: ctx; position: static; min-height: 20px; margin: -4px 0 0; font-size: 16px; }
}

/* banner entrance (slot settles, sign swings) only on the first page of a visit; site.js sets .zc-calm after that */
.zc-calm .zc-page .zc-page-ic, .zc-calm .zc-town, .zc-calm .hero .hero-town { animation: none; }

/* ---------- page transitions (cross-document View Transitions, Chrome/Edge 126+, Safari 18.2+; ignored elsewhere).
   The nav, the Knox strip and the banner are named, so they stay put (or morph in place) while the rest of the page
   cross-fades quickly. No motion at all with prefers-reduced-motion. ---------- */
@view-transition { navigation: auto; }
.zc-nav { view-transition-name: zc-nav; }
.zc-page { view-transition-name: zc-banner; }
::view-transition-group(*) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: zc-vt-out .14s ease-in both; }
::view-transition-new(root) { animation: zc-vt-in .26s .04s ease-out both; }
::view-transition-old(zc-banner), ::view-transition-new(zc-banner) { animation-duration: .26s; }
@keyframes zc-vt-out { to { opacity: 0; } }
@keyframes zc-vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* the nav box exists before site.js fills it (site.js in <head> fills it before paint; this is the fallback) */
[data-zc-nav]:empty { min-height: var(--zc-navh); }
/* a page's own closing note (e.g. "numbers update every 10 s"), above the site footer */
.pagefoot { margin: 40px 0 0; color: var(--dim); font-size: 15px; }

/* ---------- footer (site.js renders it into <footer|div class="zc-foot" data-zc-foot>): the map's legend margin ---------- */
.zc-foot { position: relative; margin-top: 96px; padding: 44px 0 0; color: var(--dim); font-size: 15px;
  background: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .4)); border-top: 1px solid rgba(255, 255, 255, .08); }
.zc-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(236, 231, 220, .3) 0 1px, transparent 1px 120px) 0 0 / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(236, 231, 220, .14) 0 1px, transparent 1px 24px) 0 0 / 100% 5px no-repeat; }
.zc-foot a { text-decoration: none; } .zc-foot a:hover { color: var(--text); }
.zc-foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 28px 44px; align-items: start; }
.zc-foot-brand p { margin: 10px 0 0; max-width: 34ch; }
.zc-foot-brand .zc-brand span { font-size: 23px; color: var(--text); }
.zc-foot-grid > * { min-width: 0; }
.zc-foot-links { columns: 3 118px; column-gap: 18px; }
.zc-foot-links a { display: block; padding: 3px 0; }
.zc-foot-margin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 34px; padding: 14px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13.5px; }
.zc-scale { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font: 600 13px/1 var(--display); letter-spacing: .04em; }
.zc-scale i { display: inline-grid; grid-template-columns: repeat(4, 20px); height: 6px; border: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 25%, transparent 25% 50%, currentColor 50% 75%, transparent 75%); }
.zc-foot-margin small { margin-left: auto; font-size: 13px; }
@media (max-width: 860px) {
  .zc-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .zc-foot-margin small { margin-left: 0; }
}

/* ---------- legacy shared blocks (v1 names), restyled ---------- */
.section { padding: 84px 0 0; }
.section-head { max-width: 62ch; margin-bottom: 30px; }
.section-head h2 { font-size: clamp(34px, 5vw, 50px); }
.section-head p { color: var(--dim); margin: 10px 0 0; font-size: 18px; }
.panel { background: var(--win); border: 1px solid var(--win-line); border-radius: var(--r-win); padding: 22px; box-shadow: var(--win-shade), var(--win-shadow); }
.paper { background: var(--paper-grain), var(--paper); color: var(--paper-ink); border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 18px 40px rgba(0, 0, 0, .35); }

/* ---------- icons, slots ---------- */
.zc-ico { display: inline-block; flex: none; width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; vertical-align: middle; }
.zc-ico--64 { width: 64px; height: 64px; } .zc-ico--96 { width: 96px; height: 96px; }
.zc-ico.is-missing { visibility: hidden; }
img.zc-glyph { image-rendering: pixelated; vertical-align: middle; flex: none; }   /* /img/game/ui art at native size */
.zc-slot { --s: 32px; --pad: 5px; position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
  width: calc(var(--s) + 2 * var(--pad) + 2px); height: calc(var(--s) + 2 * var(--pad) + 2px); color: var(--text); text-decoration: none;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .06), transparent 68%), var(--slot);
  border: 1px solid var(--slot-line); border-radius: var(--r-slot); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .04); }
.zc-slot--64 { --s: 64px; --pad: 6px; } .zc-slot--96 { --s: 96px; --pad: 8px; }
.zc-slot > .zc-ico { width: var(--s); height: var(--s); }
.zc-slot-n { position: absolute; right: 3px; bottom: 1px; font: 700 12.5px/1 var(--body); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.zc-slot--64 .zc-slot-n, .zc-slot--96 .zc-slot-n { font-size: 15px; right: 5px; bottom: 3px; }
.zc-slot-cond { --v: 1; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; background: rgba(0, 0, 0, .7); }
.zc-slot-cond::after { content: ""; position: absolute; inset: 0; right: auto; width: calc(var(--v) * 100%); background: var(--ok); }
a.zc-slot:hover, .zc-slot[tabindex]:hover, button.zc-slot:hover { border-color: rgba(255, 255, 255, .42); background-color: #161a19; }
.zc-slot.is-on { border-color: var(--amber); box-shadow: inset 0 0 0 1px rgba(224, 163, 58, .55), inset 0 2px 6px rgba(0, 0, 0, .6); }
.zc-slot--empty, .zc-slot.is-missing { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 4px, transparent 4px 8px), var(--slot); }
.zc-slot.is-missing::after { content: "?"; position: absolute; font: 700 18px/1 var(--display); color: #6d736f; }
button.zc-slot { padding: 0; cursor: pointer; font: inherit; }

/* ---------- moodles: the game's tinted disc + ring + the moodle art, all at one native size ---------- */
.zc-moodle { --ms: 48px; --tint: var(--m-neutral); position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: var(--ms); height: var(--ms); border-radius: 50%;
  --bgs: url(/img/game/moodles/48/_Moodles_BGsolid.png); --bgo: url(/img/game/moodles/48/_Moodles_BGoutline.png); }
.zc-moodle::before, .zc-moodle::after { content: ""; position: absolute; inset: 0; }
.zc-moodle::before { background: var(--bgs) center / 100% 100% no-repeat, var(--tint); background-blend-mode: multiply;
  -webkit-mask: var(--bgs) center / 100% 100% no-repeat; mask: var(--bgs) center / 100% 100% no-repeat; }
.zc-moodle::after { background: var(--bgo) center / 100% 100% no-repeat; }
.zc-moodle > img { position: relative; z-index: 1; display: block; width: var(--ms); height: var(--ms); image-rendering: pixelated; }
.zc-moodle--32 { --ms: 32px; --bgs: url(/img/game/moodles/32/_Moodles_BGsolid.png); --bgo: url(/img/game/moodles/32/_Moodles_BGoutline.png); }
.zc-moodle--64 { --ms: 64px; --bgs: url(/img/game/moodles/64/_Moodles_BGsolid.png); --bgo: url(/img/game/moodles/64/_Moodles_BGoutline.png); }
.zc-moodle--good1 { --tint: var(--m-good1); } .zc-moodle--good2 { --tint: var(--m-good2); } .zc-moodle--good3 { --tint: var(--m-good3); } .zc-moodle--good4 { --tint: var(--m-good4); }
.zc-moodle--bad1 { --tint: var(--m-bad1); } .zc-moodle--bad2 { --tint: var(--m-bad2); } .zc-moodle--bad3 { --tint: var(--m-bad3); } .zc-moodle--bad4 { --tint: var(--m-bad4); }
.zc-moodle[tabindex] { cursor: help; }
.zc-moodle--wiggle { animation: zc-wiggle .8s ease-in-out 2; }
@keyframes zc-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }

/* ---------- game window ---------- */
.zc-panel { position: relative; min-width: 0; background: var(--win); border: 1px solid var(--win-line); border-radius: var(--r-win);
  color: var(--text); box-shadow: var(--win-shade), var(--win-shadow); }
.zc-panel-bar { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 4px; background: var(--win-title);
  border-bottom: 1px solid var(--win-line); border-radius: var(--r-win) var(--r-win) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); }
.zc-panel-bar:not(:has(> .zc-ico)) { padding-left: 14px; }
.zc-panel-title { margin: 0; min-width: 0; font: 700 17px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--win-ink); text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-panel-meta { margin-left: auto; color: #b9bcb5; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.zc-panel-body { padding: 16px 18px 18px; }
.zc-panel--flush > .zc-panel-body { padding: 0; }
.zc-panel--hazard { border-color: rgba(227, 178, 60, .55); }
.zc-panel--hazard > .zc-panel-bar { padding-top: 6px; background: repeating-linear-gradient(-45deg, var(--hazard-y) 0 10px, var(--hazard-k) 10px 20px) 0 0 / 100% 6px no-repeat, var(--win-title); }

/* ---------- card, stat, meter, tag, dot ---------- */
.zc-card { position: relative; min-width: 0; padding: 16px; color: var(--text); border: 1px solid var(--win-line-soft); border-radius: 4px;
  background: linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), var(--slate); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
a.zc-card { display: block; text-decoration: none; transition: border-color .15s, background-color .15s; }
a.zc-card:hover { border-color: rgba(255, 255, 255, .3); background: linear-gradient(var(--sel), var(--sel)), var(--slate); }
.zc-card--me { box-shadow: inset 3px 0 0 var(--pencil), inset 0 1px 0 rgba(255, 255, 255, .04); }
.zc-stat { display: flex; align-items: center; gap: 14px; min-width: 0; }
.zc-stat > div { min-width: 0; }
.zc-stat-k { display: block; color: var(--dim); font-size: 14px; line-height: 1.25; }
.zc-stat-v { display: block; font: 700 34px/1.08 var(--display); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.zc-stat-v small { margin-left: 3px; font: 500 15px var(--body); color: var(--dim); }
.zc-stat-d { display: block; color: var(--dim); font-size: 14px; line-height: 1.35; }
.zc-stat--good .zc-stat-v { color: var(--good); } .zc-stat--warn .zc-stat-v { color: var(--warn); } .zc-stat--bad .zc-stat-v { color: var(--bad); }
.zc-meter { --v: .5; position: relative; height: 8px; margin: 8px 0 4px; background: #0b0d0c; border: 1px solid rgba(255, 255, 255, .18); overflow: hidden; }
.zc-meter > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(#a3e384, #6aa94e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: width .5s; }
.zc-meter--warn > i { background: linear-gradient(#f0bd5c, #c98a26); } .zc-meter--bad > i { background: linear-gradient(#ec7a69, #b83a2b); }
.zc-meter--seg { height: 10px; }
.zc-meter--seg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #0b0d0c calc(10% - 2px) 10%); }
.zc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 2px;
  background: rgba(255, 255, 255, .04); color: #d8d5cb; font: 600 12.5px/1.5 var(--body); white-space: nowrap; vertical-align: middle; }
.zc-tag--ok { color: var(--ok); border-color: rgba(139, 208, 106, .45); background: rgba(139, 208, 106, .08); }
.zc-tag--warn { color: var(--amber); border-color: rgba(224, 163, 58, .5); background: rgba(224, 163, 58, .08); }
.zc-tag--bad { color: #f0907f; border-color: rgba(224, 103, 90, .5); background: rgba(200, 64, 46, .1); }
.zc-tag--gold { color: var(--gold); border-color: rgba(228, 193, 90, .45); background: rgba(228, 193, 90, .07); }
.zc-tag--sign { color: var(--sign-text); background: var(--sign); border-color: var(--sign); box-shadow: inset 0 0 0 1px rgba(242, 244, 239, .5); }
.zc-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #7b7f7c; vertical-align: middle; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4); }
.zc-dot--on { background: var(--ok); animation: zc-ping 2.2s infinite; }
.zc-dot--idle { background: var(--amber); } .zc-dot--off { background: var(--pencil); }
@keyframes zc-ping { 0% { box-shadow: 0 0 0 0 rgba(139, 208, 106, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(139, 208, 106, 0); } }

/* ---------- inventory list, table, tabs, inputs ---------- */
.zc-list { list-style: none; margin: 0; padding: 0; }
.zc-list > li, .zc-list > a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 42px; padding: 4px 14px 4px 10px; color: inherit; text-decoration: none; }
.zc-list > li:nth-child(even), .zc-list > a:nth-child(even) { background: rgba(255, 255, 255, .03); }
.zc-list > li:hover, .zc-list > a:hover { background: var(--sel); }
.zc-list > .zc-list-head { min-height: 26px; padding-top: 0; padding-bottom: 0; font-size: 13px; color: var(--dim);
  background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important; border-bottom: 1px solid var(--win-line); }
.zc-list-main { min-width: 0; line-height: 1.3; }
.zc-list-main b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-list-main small { display: block; color: var(--dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-list-end { color: var(--dim); font-size: 14.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zc-table-wrap { overflow-x: auto; background: var(--win); border: 1px solid var(--win-line); border-radius: var(--r-win); box-shadow: var(--win-shade); }
.zc-panel .zc-table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.zc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zc-table th { padding: 7px 12px; text-align: left; white-space: nowrap; font: 600 13px/1.3 var(--body); color: var(--dim);
  background: linear-gradient(rgba(255, 255, 255, .065), rgba(255, 255, 255, .02)); border-bottom: 1px solid var(--win-line); letter-spacing: 0; text-transform: none; }
.zc-table td { padding: 8px 12px; text-align: left; vertical-align: middle; border-top: 0; border-bottom: 1px solid var(--win-line-soft); }
.zc-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.zc-table tbody tr:hover { background: var(--sel); }
.zc-table tbody tr:last-child td { border-bottom: 0; }
.zc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.zc-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--win-line); overflow-x: auto; scrollbar-width: none; }
.zc-tab { appearance: none; flex: none; padding: 6px 14px; border: 1px solid var(--win-line); border-bottom: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(#2c3130, #191d1c); color: var(--dim); font: 600 14.5px/1.2 var(--body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.zc-tab:hover { color: var(--text); }
.zc-tab[aria-selected="true"], .zc-tab.is-on { position: relative; top: 1px; background: linear-gradient(#555b59, #343938); color: #fff; }
.zc-input { width: 100%; min-height: 40px; padding: 8px 11px; color: var(--text); background: #0b0d0c; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px; font: inherit; font-size: 16px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.zc-input:focus { outline: none; border-color: var(--amber); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 2px rgba(224, 163, 58, .25); }
.zc-input::placeholder { color: #7d827c; }
select.zc-input { cursor: pointer; }
.zc-field { display: grid; gap: 6px; }
.zc-field > span { color: var(--dim); font-size: 14px; }

/* ---------- field kit: index card, sign, hazard, pencil ---------- */
.zc-note { --tilt: -.6deg; position: relative; padding: 8px 20px 18px; color: var(--paper-ink); border-radius: 2px; transform: rotate(var(--tilt));
  font-size: 16px; line-height: 26px;
  background: linear-gradient(var(--card-top), var(--card-top)) 0 34px / 100% 1.5px no-repeat,
    repeating-linear-gradient(transparent 0 25px, var(--card-rule) 25px 26px) 0 36px / 100% calc(100% - 36px) no-repeat,
    linear-gradient(160deg, #f7f4ea, var(--card-paper) 60%, #e9e3d2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 3px rgba(0, 0, 0, .25), 0 14px 28px rgba(0, 0, 0, .35); }
.zc-note-t { display: block; height: 28px; margin-bottom: 0; font: 700 21px/28px var(--display); letter-spacing: .02em; color: var(--paper-ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zc-note p, .zc-note ul, .zc-note ol { margin: 0; }
.zc-note-t + p, .zc-note-t + ul, .zc-note-t + ol { margin-top: 0; }
.zc-note p + p { margin-top: 26px; }
.zc-note [lang="fr"] + [lang="en"] { margin-top: 0; }   /* a FR/EN pair is one paragraph */
.zc-note ul, .zc-note ol { padding-left: 20px; }
.zc-note a { color: #9c2c1d; }
.zc-note--tilt-r { --tilt: .7deg; }
/* kraft paper was folded in four to fit a pocket, like a road map: faint creases at the halves */
.zc-note--kraft { padding: 18px 20px; line-height: 1.55;
  background: linear-gradient(90deg, transparent calc(50% - 2px), rgba(70, 52, 24, .13) 50%, rgba(255, 250, 235, .2) calc(50% + 1px), transparent calc(50% + 3px)),
    linear-gradient(transparent calc(50% - 2px), rgba(70, 52, 24, .1) 50%, rgba(255, 250, 235, .16) calc(50% + 1px), transparent calc(50% + 3px)),
    var(--paper-grain), var(--paper); }
/* a steel paper clip holding the note (instead of tape) */
.zc-note--clip::after { content: ""; position: absolute; top: -16px; left: 22px; width: 22px; height: 54px; transform: rotate(-8deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 54'%3E%3Cpath d='M7 16V40a4 4 0 0 0 8 0V9a6.5 6.5 0 0 0-13 0v33a9 9 0 0 0 18 0V18' fill='none' stroke='%23262a28' stroke-width='3.4' stroke-linecap='round' opacity='.35' transform='translate(.8 1.2)'/%3E%3Cpath d='M7 16V40a4 4 0 0 0 8 0V9a6.5 6.5 0 0 0-13 0v33a9 9 0 0 0 18 0V18' fill='none' stroke='%23c3cac6' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M3.4 12a5 5 0 0 1 4-7' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* rubber stamp: an official mark on paper (QUARANTINE, KNOX COUNTY EMERGENCY, NOT FOUND). Means "this is a ruling",
   never decoration. --red (default) or --blue ink; <small> for the second line. Worn ink comes from a noise mask. */
.zc-stamp { --ink: #b3372b; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 14px 6px; color: var(--ink);
  border: 3px double currentColor; border-radius: 5px; font: 700 21px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(var(--tilt, -5deg)); opacity: .88;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); }
.zc-stamp small { font: 700 11px/1 var(--display); letter-spacing: .22em; }
.zc-stamp--blue { --ink: #2e4f93; }
.zc-stamp.zc-stamp--on-dark { --ink: #e0675a; } .zc-stamp--blue.zc-stamp--on-dark { --ink: #8fa9e6; }
.zc-note--kraft .zc-note-t { height: auto; margin-bottom: 4px; line-height: 1.1; }
.zc-note--tape::before { content: ""; position: absolute; top: -12px; left: 50%; width: 104px; height: 26px; margin-left: -52px; transform: rotate(-2.5deg);
  background: linear-gradient(90deg, rgba(0, 0, 0, .05), transparent 12% 88%, rgba(0, 0, 0, .05)), var(--tape); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.zc-sign { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 16px 11px;
  color: var(--sign-text); text-decoration: none; border-radius: 9px; font: 700 24px/1 var(--display); letter-spacing: .03em; white-space: nowrap;
  background: linear-gradient(160deg, #1b7853, var(--sign) 55%, #0b4a30);
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px var(--sign-text), inset 0 1px 0 6px rgba(255, 255, 255, .06), 0 10px 22px rgba(0, 0, 0, .45); }
.zc-sign-name { display: block; }
.zc-sign-sub { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.zc-sign-sub svg { width: 16px; height: 16px; flex: none; }
a.zc-sign:hover { background: linear-gradient(160deg, #208a60, var(--sign-hi) 55%, #0d5538); }
.zc-sign--sm { padding: 7px 12px 8px; font-size: 18px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px var(--sign-text), 0 6px 14px rgba(0, 0, 0, .4); }
.zc-sign--sm .zc-sign-sub { font-size: 12px; }
.zc-sign--bolts { --bolt: radial-gradient(circle at 40% 35%, #dfe4df 0 1px, #8b938d 2px, #4d5550 3px, transparent 3.5px);
  background: var(--bolt) 9px 50% / 8px 8px no-repeat, var(--bolt) calc(100% - 9px) 50% / 8px 8px no-repeat, linear-gradient(160deg, #1b7853, var(--sign) 55%, #0b4a30);
  padding-left: 26px; padding-right: 26px; }
a.zc-sign--bolts:hover { background: var(--bolt) 9px 50% / 8px 8px no-repeat, var(--bolt) calc(100% - 9px) 50% / 8px 8px no-repeat, linear-gradient(160deg, #208a60, var(--sign-hi) 55%, #0d5538); }
.zc-shield { display: inline-grid; place-items: center; width: 38px; height: 42px; flex: none; background: var(--sign-text); color: #111;
  font: 700 21px/1 var(--display); clip-path: polygon(50% 0, 100% 12%, 100% 62%, 50% 100%, 0 62%, 0 12%); }
.zc-hazard { position: relative; padding: 22px 18px 14px; color: var(--text); background: linear-gradient(rgba(227, 178, 60, .09), rgba(227, 178, 60, .04)), var(--win-solid);
  border: 1px solid rgba(227, 178, 60, .5); border-radius: var(--r-win); }
.zc-hazard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: var(--r-win) var(--r-win) 0 0;
  background: repeating-linear-gradient(-45deg, var(--hazard-y) 0 12px, var(--hazard-k) 12px 24px); }
.zc-hazard-t { display: block; font: 700 20px/1.15 var(--display); letter-spacing: .02em; color: var(--hazard-y); }
.zc-hazard p { margin: 4px 0 0; color: #ddd8cb; }
.zc-hazard-strip { display: block; height: 10px; border-radius: 1px; background: repeating-linear-gradient(-45deg, var(--hazard-y) 0 12px, var(--hazard-k) 12px 24px); }
.zc-pencil { display: inline-block; padding-bottom: 5px; color: var(--pencil-hi); font: 600 1.12em/1.1 var(--display); letter-spacing: .02em; transform: rotate(-2.5deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 20 2, 34 7, 52 4 S 88 2, 118 5' fill='none' stroke='%23db5440' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 7px no-repeat; }
.zc-circled { position: relative; display: inline-block; padding: 0 .4em; }
.zc-circled::after { content: ""; position: absolute; inset: -.32em -.2em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath d='M10 30 C 4 12, 58 2, 86 12 S 96 42, 52 47 S 3 41, 12 17 L 22 9' fill='none' stroke='%23db5440' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ---------- tooltip (site.js), empty state, loading ---------- */
.zc-tip { position: fixed; z-index: 5000; left: 0; top: 0; max-width: min(300px, calc(100vw - 16px)); padding: 7px 11px 8px; pointer-events: none;
  background: rgba(8, 9, 9, .95); border: 1px solid rgba(255, 255, 255, .3); border-radius: 2px; color: #e4e4e4; box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  font: 14px/1.35 var(--body); text-shadow: 0 1px 0 #000; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.zc-tip.on { opacity: 1; transform: none; }
.zc-tip b { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.zc-tip dl { display: grid; grid-template-columns: auto auto; gap: 1px 16px; margin: 4px 0 0; }
.zc-tip dt { color: #a9aba7; } .zc-tip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.zc-tip p { margin: 3px 0 0; color: #c9c9c4; }
.zc-tip-bar { --v: 1; display: inline-block; width: 46px; height: 6px; margin-right: 7px; vertical-align: 1px; border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(90deg, var(--ok) calc(var(--v) * 100%), #111 0); }
.zc-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 22px 36px; text-align: center; border: 1px dashed rgba(255, 255, 255, .2); border-radius: var(--r-win);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .02) 0 8px, transparent 8px 16px), rgba(0, 0, 0, .2); }
.zc-empty-t { display: block; margin: 6px 0 0; font: 700 27px/1.1 var(--display); color: var(--text); }
.zc-empty p { margin: 0; max-width: 46ch; color: var(--dim); }
.zc-empty .btn, .zc-empty .zc-btn { margin-top: 8px; }
/* the empty state's item is circled in red grease pencil, like a survivor marking what's missing (64 px slot first) */
.zc-empty > .zc-slot--64:first-child { position: relative; }
.zc-empty > .zc-slot--64:first-child::before { content: ""; position: absolute; inset: -15px -20px -13px -17px; pointer-events: none; transform: rotate(-7deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90' preserveAspectRatio='none'%3E%3Cpath d='M14 58 C 2 30, 30 4, 60 6 S 99 34, 90 58 S 50 92, 24 78 S 4 44, 26 18 L 36 10' fill='none' stroke='%23db5440' stroke-width='2.3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.85'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.zc-skel { display: block; height: 16px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .045) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .045) 70%) 0 0 / 300% 100%;
  animation: zc-shimmer 1.5s linear infinite; }
.zc-skel--line { width: 100%; margin: 6px 0; } .zc-skel--title { width: 45%; height: 26px; margin: 4px 0 12px; }
.zc-skel--slot { display: inline-block; width: 44px; height: 44px; } .zc-skel--block { height: 120px; }
@keyframes zc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- headings and layout helpers ---------- */
.zc-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 27px/1.1 var(--display); letter-spacing: .02em; color: var(--text); }
.zc-h::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, rgba(236, 231, 220, .28), transparent); }
.zc-grid { display: grid; gap: var(--gap, 14px); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); }
.zc-cols-2, .zc-cols-3, .zc-cols-4 { display: grid; gap: var(--gap, 14px); }
.zc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zc-split { display: grid; gap: var(--gap, 24px); grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; }
.zc-stack { display: grid; gap: var(--gap, 16px); align-content: start; min-width: 0; }
.zc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 10px); }
@media (max-width: 960px) { .zc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zc-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .zc-cols-2, .zc-cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .zc-cols-4 { grid-template-columns: 1fr; } }

/* ---------- a3's Join button (join.js) in the site type ---------- */
.zj-btn { font-family: var(--body) !important; font-size: 15px !important; border-radius: 4px !important; }
.zj-btn.big { font-size: 18px !important; min-height: 52px; }
.zj-card { font-family: var(--body) !important; background: var(--win-solid) !important; border-color: var(--win-line) !important; border-radius: var(--r-win) !important; }
.zj-card h2 { font-family: var(--display) !important; font-size: 28px !important; }

/* ---------- "add to home screen" hint (site.js) ---------- */
.zc-install { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; align-items: center; gap: 12px;
  max-width: 520px; margin: 0 auto; padding: 12px 12px 12px 14px; background: var(--win-solid); border: 1px solid var(--win-line);
  border-radius: var(--r-win); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.zc-install img { border-radius: 9px; flex: none; }
.zc-install div { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.zc-install b { display: block; font-size: 15.5px; }
.zc-install span { color: var(--dim); }
.zc-x { background: none; border: 0; color: var(--dim); font-size: 16px; cursor: pointer; padding: 6px; }

/* ---------- chat panel (chat.js): game <-> Discord <-> site, drawn like Project Zomboid's chat window (zcrisis-18,
   Matt 2026-11-01): see-through black box, tab strip ("General"), one line per message "[hh:mm] Name: text" in Noto Sans
   with a black text shadow, name colour by source, a dark input line at the bottom ---------- */
.zc-chat.full .zc-chat-box { height: min(70vh, 640px); }
.zc-chat-box { display: flex; flex-direction: column; background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .28);
  overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); font-family: "Noto Sans", "Segoe UI", Arial, sans-serif; text-shadow: 0 1px 1px #000; }
.zc-chat-head { display: flex; align-items: flex-end; gap: 2px; padding: 5px 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .35); }
.zc-chat-head b { padding: 4px 14px 5px; font-weight: 600; font-size: 13.5px; line-height: 1.2; font-family: inherit; color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28); border-bottom: 0; }
.zc-chat-head > .zc-ico { display: none; }
.zc-chat-sub { align-self: center; margin-left: 8px; color: #9a9a9a; font-size: 12px; }
.zc-chat-x { margin-left: auto; align-self: center; background: none; border: 0; color: #bbb; font-size: 14px; cursor: pointer; text-shadow: inherit; }
.zc-chat-list { list-style: none; margin: 0; padding: 6px 8px 8px; flex: 1; min-height: 0; overflow-y: auto; display: block; }
.zc-chat-list li { display: block; padding: 1px 0; font-size: 14.5px; line-height: 1.38; color: #fff; overflow-wrap: anywhere; }
.zc-chat-list time { color: #a8a8a8; margin-right: 4px; font-variant-numeric: tabular-nums; }
.zc-chat-list .tag { color: #a8a8a8; margin-right: 4px; }
.zc-chat-list .nm { font-weight: 600; }
.zc-chat-list .src-game .nm { color: #fff; }
.zc-chat-list .src-web .nm { color: #ffd27a; }
.zc-chat-list .src-discord .nm { color: #a9b4ff; }
.zc-chat-list .src-server .nm, .zc-chat-list .src-server .txt { color: #ff8a6e; }
.zc-chat-list .empty { color: #a8a8a8; padding: 12px 0; }
.zc-chat-form { display: flex; gap: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .55); }
.zc-chat-form input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 9px 10px; font: inherit; font-size: 14.5px;
  text-shadow: inherit; outline: none; }
.zc-chat-form input::placeholder { color: #8d8d8d; }
.zc-chat-form button.btn { border-radius: 0; min-height: 0; box-shadow: none; border-left: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; font-size: 13.5px; line-height: 1; font-family: inherit; padding: 0 14px; }
.zc-chat-form button.btn:hover { background: rgba(255, 255, 255, .2); }
.zc-chat-note { margin: 0; padding: 4px 10px 6px; color: #8d8d8d; font-size: 12px; background: rgba(0, 0, 0, .55); }
.zc-chat-gate p { margin: 0 0 14px; color: var(--dim); }
/* chat button + window at the bottom right of every page (site.js chat(), Matt 2026-11-03). The window opens in the
   button's place; phones: above the bottom tab bar, full width. Pages with something in that corner move it with
   --zc-chat-b (bottom offset), e.g. /map (zoom buttons). */
.zc-chat.float { position: fixed; z-index: 1150; right: 16px; bottom: calc(var(--zc-tabh) + var(--zc-chat-b, 16px)); display: flex; flex-direction: column; align-items: flex-end; }
.zc-chat.float[hidden] { display: none; }
.zc-chat.float .zc-chat-box { width: min(400px, calc(100vw - 32px)); height: min(520px, calc(100dvh - var(--zc-safe-t) - var(--zc-navh) - var(--zc-tabh) - var(--zc-chat-b, 16px) - 24px));
  background: rgba(8, 10, 10, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: zc-chat-in .16s ease-out; }
.zc-chat.float .zc-chat-gatebox { height: auto; }
.zc-chat-gatebox .zc-empty { padding: 18px 16px 20px; font-family: var(--body); text-shadow: none; }
@keyframes zc-chat-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .zc-chat.float .zc-chat-box { animation: none; } }
.zc-chat-dc { align-self: center; margin-left: auto; padding: 3px 8px; color: #a9b4ff; font-size: 12px; font-weight: 600; text-decoration: none; border-radius: 2px; }
.zc-chat-dc:hover { background: rgba(169, 180, 255, .14); }
.zc-chat-x { margin-left: 2px; padding: 4px 8px; }
.zc-chat.full .zc-chat-x { display: none; }
.zc-chat-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; border-radius: 999px; cursor: pointer;
  background: rgba(20, 24, 23, .96); border: 1px solid var(--win-line); color: var(--text); font: 600 15px/1 var(--body); box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .12s ease, border-color .12s ease; }
.zc-chat-tab:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .4); }
.zc-chat-tab:focus-visible { outline: 2px solid var(--accent, #d9462b); outline-offset: 2px; }
.zc-chat-tab img { width: 28px; height: 28px; image-rendering: pixelated; }
.zc-chat-tab i { position: absolute; top: -6px; right: -4px; min-width: 20px; padding: 3px 6px; font-style: normal; font-size: 11.5px; line-height: 1;
  text-align: center; border-radius: 999px; background: #c8341f; color: #fff; box-shadow: 0 0 0 2px rgba(20, 24, 23, .96); }
@media (max-width: 760px) {
  .zc-chat.float { right: 8px; left: 8px; bottom: calc(var(--zc-tabh) + var(--zc-chat-b, 10px)); }
  .zc-chat.float .zc-chat-box { width: 100%; height: min(520px, calc(100dvh - var(--zc-safe-t) - var(--zc-navh) - var(--zc-tabh) - var(--zc-chat-b, 10px) - 16px)); }
  .zc-chat.float:not(.open) { left: auto; }
  .zc-chat-tab { padding: 5px 12px 5px 6px; font-size: 14px; }
  .zc-chat-form input { font-size: 16px; }   /* no zoom-in on focus (iOS) */
  body:has(#zc-install) .zc-chat.float:not(.open) { display: none; }   /* the install hint sits in the same spot until dismissed */
}

/* ---------- app shell (Matt 2026-11-03: "use it like a real app", site.js appShell()). Desktop: a tighter banner, the
   rest unchanged. Phones (<= 760 px): 52 px top bar with the page name (+ back arrow in the installed app), bottom tab
   bar (Map, Characters, Safehouse, Store, More), "More" sheet with every other page, compact banner (Knox strip, one-line
   description that opens on tap, page note), no footer (the sheet has every link). Safe areas for notches and the
   home bar. Fixed things that sit at the bottom use var(--zc-tabh); things under the top bar use
   calc(var(--zc-safe-t) + var(--zc-navh)). ---------- */
:root { --zc-safe-t: 0px; --zc-navh: 96px; --zc-tabh: 0px; }
.zc-app { --zc-safe-t: env(safe-area-inset-top, 0px); }
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], summary, label { touch-action: manipulation; }
.zc-nav, .zc-tabbar, .zc-sheet-box { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.zc-app .zc-nav { padding-top: env(safe-area-inset-top, 0px); }
.zc-tabbar, .zc-sheet, .zc-apptitle, .zc-back { display: none; }
/* desktop: the banner is ~25 % shorter (less scrolling before the page itself) */
.zc-page .wrap { padding-top: 28px; padding-bottom: 32px; }
.zc-page h1 { font-size: clamp(38px, 5vw, 54px); }
.zc-page p.zc-page-desc { font-size: 16.5px; margin-top: 8px; }
.zc-page ~ main { padding-top: 28px; }
.zc-foot { margin-top: 32px; }
/* desktop, 2026-11-04 "too much scrolling": a short page must fit the window. Slim banner (title and red note on one
   line, description under them), slim footer (one row), and main no longer reserves a whole screen by itself. */
@media (min-width: 761px) {
  .zc-page .wrap { gap: 16px; padding-top: 10px; padding-bottom: 20px; }
  .zc-page-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 18px; }
  .zc-page h1 { font-size: 38px; line-height: 1; }
  .zc-page p.zc-page-desc { grid-area: 2 / 1 / 2 / -1; max-width: none; margin-top: 2px; font-size: 15px; line-height: 1.35; }
  .zc-page h1 { grid-area: 1 / 1; }
  .zc-page .zc-page-ctx { grid-area: 1 / 2; position: static; margin: 0; font-size: 16px; }
  .zc-page ~ main { padding-top: 20px; min-height: calc(100vh - 376px); }
  .zc-foot { padding-top: 16px; }
  .zc-foot-grid { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; }
  .zc-foot-brand p { display: none; }
  .zc-foot-links { columns: auto; display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 14px; }
  .zc-foot-links a { padding: 1px 0; }
  .zc-foot-margin { margin-top: 10px; padding: 8px 0 12px; }
}

@media (max-width: 760px) {
  :root { --zc-navh: 78px; --zc-tabh: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* Knox strip 26 px over a 52 px bar; it scrolls away (sticky at -26px); /map keeps it (fixed nav) */
  .zc-nav { top: -26px; } .zc-knox, .zc-knox-row { height: 26px; }
  body { padding-bottom: var(--zc-tabh); }
  /* top bar */
  .zc-nav .wrap { height: 52px; gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .zc-nav .zc-menu, .zc-nav.open .zc-links, .zc-pl-en, .zc-nav .zc-me-b .zc-pl-who, .zc-nav .zc-admin > span, .zc-nav .zc-me-b .zc-caret { display: none !important; }
  .zc-brand .zc-logo { height: 40px; margin-bottom: 0; }
  /* the crate opens the sheet with every other page (site.js appShell) */
  .zc-tb-more { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px; background: linear-gradient(#2c3230, #1e2322); cursor: pointer; }
  .zc-tb-more img { width: 32px; height: 32px; }
  .zc-tb-more[aria-expanded="true"], .zc-tb-more[aria-current="page"] { background: var(--sign); border-color: var(--sign-text); }
  .zc-apptitle { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
  .zc-back { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: -8px; padding: 0; border: 0;
    border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
  .zc-back:active { background: rgba(255, 255, 255, .1); }
  .zc-back + .zc-brand { display: none; }
  .zc-nav .zc-me-b { height: 42px; padding: 0 4px; border-color: transparent; background: none; }
  .zc-pl-port { width: 34px; height: 34px; }
  .zc-nav .zc-admin { height: 34px; padding: 0 8px; }
  .zc-nav .zc-lang1 { padding: 6px 8px; }
  .zc-nav .zc-tools .btn.small { min-height: 34px; padding: 5px 12px; }
  /* bottom tab bar: the game's dark toolbar, item icons, red pencil over the current tab */
  .zc-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1160;
    height: var(--zc-tabh); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: linear-gradient(rgba(30, 35, 34, .97), rgba(16, 19, 18, .98)); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 -10px 24px rgba(0, 0, 0, .3); }
  .zc-tabbar > a, .zc-tabbar > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; height: 60px; padding: 0 2px; border: 0; background: none; color: var(--dim); cursor: pointer; text-decoration: none;
    font: 600 12px/1.1 var(--body); letter-spacing: .01em; }
  .zc-tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zc-tabbar img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; opacity: .78; filter: saturate(.7);
    transition: transform .15s, opacity .15s, filter .15s; }
  .zc-tabbar svg { width: 26px; height: 26px; margin: 3px 0; opacity: .8; }
  .zc-tabbar [aria-current="page"], .zc-tabbar [aria-expanded="true"] { color: var(--text); }
  .zc-tabbar [aria-current="page"] img { opacity: 1; filter: none; }
  .zc-tabbar [aria-current="page"] { background: rgba(15, 91, 59, .45); box-shadow: inset 0 3px 0 #2fa36d; }
  .zc-tabbar .zc-bulbs { width: 32px; height: 32px; }
  .zc-tabbar > :active img, .zc-tabbar > :active svg { transform: scale(.9); }
  /* "More" sheet */
  .zc-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1150; }
  .zc-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s; }
  .zc-sheet-box { position: absolute; left: 0; right: 0; bottom: var(--zc-tabh); max-height: calc(100% - var(--zc-safe-t) - var(--zc-tabh) - 30px); overflow-y: auto; overscroll-behavior: contain;
    padding: 0 max(14px, env(safe-area-inset-right)) 16px max(14px, env(safe-area-inset-left));
    background: var(--grain), var(--win-solid); border-top: 1px solid var(--win-line); border-radius: 12px 12px 0 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .55); transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .zc-sheet.open .zc-sheet-bg { opacity: 1; }
  .zc-sheet.open .zc-sheet-box { transform: none; }
  .zc-sheet-grip { display: grid; place-items: center; height: 24px; cursor: pointer; }
  .zc-sheet-grip i { width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
  .zc-sh-me { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; border-bottom: 1px solid var(--win-line-soft); }
  .zc-sh-me:empty { display: none; }
  .zc-sh-me > img, .zc-sh-me > .zc-me-noav { flex: none; width: 44px; height: 44px; border-radius: 50%; }
  .zc-sh-me > .zc-me-noav { display: grid; place-items: center; background: var(--slate-2); font: 700 20px/1 var(--display); font-style: normal; }
  .zc-sh-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .zc-sh-who b { font: 700 19px/1.1 var(--display); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zc-sh-who span { color: var(--dim); font-size: 13.5px; line-height: 1.3; }
  .zc-sh-who a { color: var(--amber); text-decoration: none; }
  .zc-sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0 4px; }
  .zc-sh-grid--admin { padding-top: 12px; border-top: 1px dashed rgba(200, 64, 46, .5); margin-top: 8px; }
  .zc-sh-it { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px 9px; border-radius: 4px;
    background: rgba(255, 255, 255, .035); border: 1px solid var(--win-line-soft); color: var(--text); text-decoration: none; font: 600 13.5px/1.15 var(--body); text-align: center; }
  .zc-sh-it span { max-width: 100%; overflow-wrap: anywhere; }
  .zc-sh-it:active { background: var(--sel); }
  .zc-sh-it[aria-current="page"] { border-color: rgba(200, 64, 46, .7); box-shadow: inset 0 -3px 0 var(--pencil); }
  .zc-sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0 0; margin-top: 10px; border-top: 1px solid var(--win-line-soft); }
  .zc-sh-row [data-zc-install] { margin-left: auto; }
  .zc-sh-lang { display: inline-flex; border: 1px solid var(--win-line); border-radius: 4px; overflow: hidden; }
  .zc-sh-lang button { min-width: 46px; height: 34px; border: 0; background: none; color: var(--dim); font: 700 14px/1 var(--body); cursor: pointer; }
  .zc-sh-lang button[aria-checked="true"] { background: rgba(255, 255, 255, .12); color: var(--text); }
  .zc-sh-ios { margin: 10px 0 0; color: var(--dim); font-size: 13.5px; }
  .zc-sheet-on, .zc-sheet-on body { overflow: hidden; }
  /* compact banner: the title is in the top bar; Knox strip + one-line description (tap: all of it) + page note */
  .zc-page .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 10px; padding-bottom: 18px; }
  .zc-page .zc-page-ic, .zc-page .zc-town { display: none; }
  .zc-page-txt { display: flex; flex-direction: column; gap: 4px; }
  .zc-page h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zc-page p.zc-page-desc { margin: 0; font-size: 14.5px; line-height: 1.4; color: #cfcdc3; cursor: pointer;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  .zc-page--open p.zc-page-desc { -webkit-line-clamp: unset; line-clamp: none; }
  .zc-page .zc-page-ctx { position: static; min-height: 0; margin: 2px 0 0; font-size: 15px; }
  .zc-page .zc-page-ctx:empty { display: none; }
  .zc-page ~ main { padding-top: 16px; min-height: 0; }
  .zc-foot { display: none; }
  /* the install hint sits above the tab bar */
  .zc-install { bottom: calc(var(--zc-tabh) + 10px); }
  /* no zoom-in when a form field gets focus on iPhone (it zooms under 16 px) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}