@font-face{
  font-family:'Black Ops One';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/blackopsone.woff2') format('woff2');
}
@font-face{
  font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/sharetechmono.woff2') format('woff2');
}
:root{
  --toxic:#39ff14;
  --toxic-dim:#34a51f;
  --amber:#ffb000;
  --danger:#ff2d1a;
  --bg:#020503;
  /* PERVYI SNEG frost HUD */
  --frost:#b4bfce;        /* labels */
  --frost-dim:#98a7bc;
  --ink:#dfe8f6;          /* primary readout ink */
  --cold:#bcd4ff;         /* cold accent */
  --sodium:#ffb45e;       /* lamp-warm accent */
  --panel:rgba(10,17,27,.78);
  --pline:rgba(180,195,215,.2);
  --body:'Segoe UI',Arial,sans-serif;
  --mono:'Share Tech Mono', ui-monospace, 'Courier New', monospace;
  --display:'Black Ops One', 'Arial Black', sans-serif;
  /* GENSHIN FINISH (addendum 15e) — ONE radius scale, ONE spacing rhythm,
     ONE easing. The HUD shipped with seven unrelated corner radii
     (2/4/6/8/10/14/999) and two different corner insets (22 vs 24), which is
     exactly the drift that reads as "unfinished" next to a game whose UI is
     its calling card. Every rule below maps onto this scale:
       r0 hairline strips  r1 chips/keycaps  r2 buttons  r3 glass panels  */
  --r0:2px; --r1:4px; --r2:8px; --r3:12px; --rpill:999px;
  --hud-inset:24px;   /* every HUD corner, all four, one number */
  --hud-gap:12px;     /* vertical rhythm between stacked HUD panels */
  --hud-trh:118px;    /* clock + departure readout, including safe spacing */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t1:.14s;          /* press / hover */
  --t2:.28s;          /* panel + state changes */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:var(--frost);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  cursor:crosshair;
}
a{color:var(--sodium);text-decoration:none}
a:hover{color:#fff;text-shadow:0 0 8px rgba(255,180,94,.6)}
button{cursor:pointer;font-family:var(--body)}
.hidden{display:none !important}

#game{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ================= HUD (frost-blue over bright snow) ================= */
.z-hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.z-corner{position:fixed;z-index:6}
.z-tl{top:var(--hud-inset);left:var(--hud-inset)}
.z-tr{top:var(--hud-inset);right:var(--hud-inset);text-align:right;max-width:340px}
.z-bl{bottom:var(--hud-inset);left:var(--hud-inset)}
.z-br{bottom:var(--hud-inset);right:var(--hud-inset);text-align:right}
.z-br:has(> .z-speed.hidden){display:none}
/* glass panels: the map corner stays chrome-free (it is a circle) */
.z-tr,.z-bl,.z-br{
  background:var(--panel);
  border:1px solid var(--pline);
  border-radius:var(--r3);
  padding:10px 14px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 4px 18px rgba(4,8,18,.35);
}
.z-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--frost);
  text-shadow:0 1px 4px rgba(6,10,20,.8);
}
.dim{color:var(--frost-dim)}
.z-clock{
  font-family:var(--mono);font-size:clamp(28px,2.5vw,36px);color:var(--ink);letter-spacing:.04em;
  text-shadow:0 1px 4px rgba(6,10,20,.8);
  font-variant-numeric:tabular-nums;
}
.z-clock.z-danger{color:#fff;text-shadow:0 0 16px rgba(255,45,26,.95);animation:zblink 1s steps(1) infinite}
@keyframes zblink{50%{opacity:.55}}
.z-sub{font-family:var(--mono);font-size:10px;letter-spacing:.06em;margin-top:4px;color:var(--frost);line-height:1.4}

.z-map{
  width:clamp(150px,11vw,200px);height:auto;aspect-ratio:1;
  /* the minimap used to float chrome-free while the other three corners sat
     in glass — one ring on the same --pline puts it in the same system
     without boxing a circle */
  border-radius:50%;
  box-shadow:0 0 0 1px var(--pline), 0 4px 18px rgba(4,8,18,.35);
  filter:drop-shadow(0 2px 6px rgba(4,8,18,.25));
}
.z-map-n{margin-top:4px}

.z-dose{
  font-family:var(--mono);
  font-size:clamp(20px,2vw,30px);color:var(--ink);letter-spacing:.06em;
  text-shadow:0 0 10px rgba(188,212,255,.35), 0 1px 4px rgba(6,10,20,.8);
  font-variant-numeric:tabular-nums;
}
.z-dose.z-danger{color:#ffd2cc;text-shadow:0 0 14px rgba(255,45,26,.95)}
.z-speed{
  font-family:var(--mono);
  font-size:clamp(22px,2.2vw,34px);color:var(--ink);margin-bottom:8px;
  text-shadow:0 0 10px rgba(255,180,94,.55);
  font-variant-numeric:tabular-nums;
}

/* film-badge dose strip: pale emulsion that fogs dark as dose accumulates */
.z-badge{
  position:relative;overflow:hidden;
  width:clamp(150px,12vw,230px);height:10px;margin-top:var(--hud-gap);
  border:1px solid var(--pline);border-radius:var(--r0);
  background:linear-gradient(90deg,#e8ecf4,#cfd6e2 35%,#bfc8d6 70%,#aab3c2);
}
.z-badge::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, rgba(20,28,44,.28) 0 2px, rgba(0,0,0,0) 2px 14px);
}
.z-badge-film{
  position:absolute;inset:0;background:#170f05;opacity:0;
  transition:opacity .6s linear;
}

.z-bar{
  width:clamp(150px,12vw,230px);height:10px;margin-top:6px;
  border:1px solid var(--pline);border-radius:var(--r0);
  background:rgba(10,16,30,.6);
  box-shadow:0 0 8px rgba(143,160,192,.15);
}
.z-bar-fill{
  height:100%;transform-origin:left center;
  transition:transform .12s linear;
}
.z-health{background:linear-gradient(90deg,#5b8f66,#a9dfb4)}
.z-bar.z-danger{border-color:var(--danger);box-shadow:0 0 12px rgba(255,45,26,.5)}
.z-br .z-bar-fill{transform-origin:right center}

.z-objectives{
  position:fixed;right:var(--hud-inset);z-index:6;width:300px;max-width:330px;
  top:calc(var(--hud-inset) + var(--hud-trh) + var(--hud-gap));
  text-align:left;
  background:var(--panel);border:1px solid var(--pline);border-radius:var(--r3);
  padding:10px 14px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.z-objlist{margin-top:8px}
.z-obj{
  display:flex;gap:8px;align-items:baseline;
  font-size:14px;letter-spacing:.01em;line-height:1.45;color:var(--frost);
  margin-bottom:8px;text-shadow:0 1px 3px rgba(6,10,20,.8);
  transition:color var(--t2) var(--ease),opacity var(--t2) var(--ease);
}
/* GENSHIN FINISH (15e): three states that used to differ only in grey.
   ACTIVE now owns a sodium marker and a hairline rule so the eye lands on
   "what am I doing" without reading the list; DONE recedes instead of being
   struck through in the same weight as everything else. */
.z-obj.active{
  color:var(--ink);
  border-left:2px solid var(--sodium);
  margin-left:-10px;padding-left:8px;
}
.z-obj.active .z-objmark{color:var(--sodium)}
.z-obj.done{color:#99a9ba;text-decoration:line-through;opacity:.65}
.z-objmark{color:inherit;flex:none;width:1.1em;text-align:center}
.z-obj.z-checkpop{animation:zcheckpop .3s cubic-bezier(.34,1.56,.64,1)}
.z-obj.z-checkpop .z-objmark{animation:zmarkpop .3s ease-out;color:var(--cold)}
@keyframes zcheckpop{
  0%{transform:translateX(-6px) scale(.92);opacity:.2}
  60%{transform:translateX(1px) scale(1.06);opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes zmarkpop{0%{transform:scale(.4)}55%{transform:scale(1.5)}100%{transform:scale(1)}}

/* ---- interact prompt: world-anchored glass pill + keycap ----
   .z-prompt is the positioning shell (JS drives style.transform when
   anchored); .z-pill is the visible capsule so the scale-in animation
   never fights the placement transform. */
.z-prompt{
  position:fixed;left:50%;bottom:20vh;transform:translateX(-50%);z-index:7;
  pointer-events:none;white-space:nowrap;
}
.z-prompt.z-anchored{left:0;top:0;right:auto;bottom:auto}
.z-pill{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px 8px 10px;border-radius:var(--rpill);
  background:rgba(8,14,26,.6);
  border:1px solid rgba(143,160,192,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(4,8,18,.5), inset 0 1px 0 rgba(223,232,246,.08);
  color:var(--ink);font-size:14px;letter-spacing:.025em;
  text-shadow:0 1px 5px rgba(6,10,20,.85);
}
.z-prompt.z-in .z-pill{animation:zpillin .15s ease-out both}
@keyframes zpillin{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
.z-keycap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 7px;border-radius:var(--r1);
  background:linear-gradient(180deg,#3a4a6b,#232f47);
  border:1px solid rgba(223,232,246,.35);
  box-shadow:0 2px 0 rgba(10,18,34,.9), inset 0 1px 0 rgba(255,255,255,.18);
  color:#f2f6ff;font-size:12px;letter-spacing:.06em;
}
.z-parrow{
  display:inline-block;font-size:13px;line-height:1;color:var(--cold);
  text-shadow:0 0 8px rgba(188,212,255,.6);
  transition:transform .1s linear;
}
.z-prompt.z-clamped .z-pill{border-color:rgba(188,212,255,.45)}

/* ---- nameplate: who you are standing in front of ----
   Same glass family as the prompt pill, one step quieter (no keycap, no
   border glow) because it is a label, not an affordance. Cyrillic leads;
   the transliteration and the post sit under it at half the weight. */
.z-nameplate{
  position:fixed;left:0;top:0;z-index:6;
  pointer-events:none;white-space:nowrap;
  transition:opacity .18s linear;
}
.z-npcard{
  padding:7px 14px 8px;border-radius:var(--rpill);
  background:rgba(8,14,26,.52);
  border:1px solid rgba(143,160,192,.22);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 3px 14px rgba(4,8,18,.45), inset 0 1px 0 rgba(223,232,246,.06);
  text-align:center;text-shadow:0 1px 5px rgba(6,10,20,.9);
}
.z-npru{
  color:#eef3ff;font-size:13px;letter-spacing:.10em;line-height:1.2;
}
.z-npsub{
  margin-top:3px;color:rgba(188,212,255,.72);
  font-size:10px;letter-spacing:.13em;line-height:1.3;text-transform:uppercase;
}
.z-nameplate.z-in .z-npcard{animation:znpin .18s ease-out both}
@keyframes znpin{0%{transform:translateY(5px);opacity:0}100%{transform:none;opacity:1}}
body.touch .z-npru{font-size:11px}
body.touch .z-npsub{font-size:9px}

/* subtitles + toasts: glass capsules so they read over the brightest snow */
.z-subtitle{
  position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);z-index:7;
  width:max-content;max-width:min(760px,84vw);text-align:center;
  font-size:clamp(15px,1.25vw,18px);letter-spacing:.015em;line-height:1.5;
  color:#f2f4f7;background:rgba(8,14,26,.82);
  border:1px solid var(--pline);border-radius:var(--r3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:10px 20px;
  text-shadow:0 1px 5px rgba(6,10,20,.85);
}
.z-toast{
  position:fixed;left:50%;top:12vh;transform:translateX(-50%);z-index:7;
  max-width:min(680px,80vw);text-align:center;
  font-size:clamp(13px,1.1vw,15px);letter-spacing:.025em;color:#ffd9a8;
  background:rgba(8,14,26,.6);border:1px solid rgba(255,180,94,.35);
  border-radius:var(--r3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:10px 20px;text-shadow:0 0 8px rgba(255,180,94,.45), 0 1px 4px rgba(6,10,20,.85);
}
.z-toast.z-pop{animation:ztoast .35s ease-out}
@keyframes ztoast{0%{transform:translate(-50%,-14px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
/* ================= reticle =================
   Genshin Impact's aiming reticle, matched by proportion rather than copied
   pixel for pixel: a thin ring, four short ticks standing just OUTSIDE it at
   the cardinals, a small dot dead centre, and a soft shadow under every
   stroke so it survives a bright sky and a cave mouth alike. Genshin's ring
   is about 0.6 of the mark's full width, with a gap of roughly two thirds
   of a tick between ring and tick; that ratio is what is reproduced below
   (26 px ring, 5 px ticks, 3 px gap, 3 px dot — 42 px overall, ~0.62).

   Its one hard rule is the one that matters here: the mark lives at SCREEN
   CENTRE and never leaves it. So it is centred in CSS (left/top 50% of a
   fixed inset:0 wrapper) and ui.js NEVER writes a transform to it. The old
   pass projected a world strike point and slid the mark around the screen as
   the body turned — that is gone.

   Palette stays frost, not Genshin gold: this HUD is cold ink over snow and
   warm is already spoken for (--sodium is the lamp/hazard accent), so a gold
   mark would read as an alarm. The strike flash goes to pure white instead:
   the brightest thing the palette owns, and no new hue.

   --zspread is UNITLESS on purpose: the ring folds it into a scale() and
   each tick multiplies it by 1px, so one variable drives the whole mark and
   nothing but scale / opacity / tick-spread ever animates. The mark's centre
   of mass is fixed by construction.

   Readability rule: every stroke carries a 1 px near-black keyline via a
   zero-blur box-shadow spread. On lit snow the keyline is what you see; in
   an unlit basement the frost ink and the soft cold glow are. Neither
   background can swallow the mark. */
.z-retwrap{
  position:fixed;inset:0;z-index:6;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  --zspread:0;   /* extra opening (unitless): sprint / strike */
  --zink:rgba(238,244,255,.95);
  --zkey:0 0 0 1px rgba(3,7,16,.75), 0 0 7px rgba(150,190,255,.45);
}
.z-retwrap.z-on{opacity:1}
/* sprinting: the mark breathes open and dims — you are not aiming, you are
   running. The strike kick is louder and brighter, and wins (declared last). */
.z-retwrap.z-sprint{--zspread:4;--zink:rgba(238,244,255,.7)}
.z-retwrap.z-kick{--zspread:9;--zink:#ffffff}

/* the anchor: exact viewport centre, zero-size, NEVER transformed by JS. */
.z-ret{position:absolute;left:50%;top:50%;width:0;height:0}
.z-ret-ring{
  position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1.5px solid var(--zink);opacity:.78;
  box-shadow:0 0 0 1px rgba(3,7,16,.6), inset 0 0 0 1px rgba(3,7,16,.5),
             0 0 10px rgba(150,190,255,.3);
  transform:scale(calc(1 + var(--zspread) * 0.055));
  transition:transform .13s cubic-bezier(.2,.85,.3,1),
             border-color .13s linear,opacity .13s linear;
}
.z-retwrap.z-kick .z-ret-ring{opacity:1}
.z-ret-core{
  position:absolute;left:0;top:0;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:var(--zink);
  box-shadow:0 0 0 1px rgba(3,7,16,.75), 0 0 8px rgba(150,190,255,.5);
}
/* four cardinal ticks: 5 px long, a 3 px gap off the 13 px ring. They push
   straight out from the centre and come straight back — symmetric, so the
   mark opens without ever shifting its centre. */
.z-ret-t{
  position:absolute;left:0;top:0;background:var(--zink);
  box-shadow:var(--zkey);opacity:.55;border-radius:.75px;
  transition:transform .13s cubic-bezier(.2,.85,.3,1),opacity .13s linear;
}
.z-retwrap.z-kick .z-ret-t{opacity:.95}
.z-ret-n,.z-ret-s{width:1.5px;height:5px;margin-left:-.75px}
.z-ret-e,.z-ret-w{width:5px;height:1.5px;margin-top:-.75px}
.z-ret-n{margin-top:-21px;transform:translateY(calc(var(--zspread) * -1px))}
.z-ret-s{margin-top:16px;transform:translateY(calc(var(--zspread) * 1px))}
.z-ret-w{margin-left:-21px;transform:translateX(calc(var(--zspread) * -1px))}
.z-ret-e{margin-left:16px;transform:translateX(calc(var(--zspread) * 1px))}

/* ================= screens — "Night Over Pripyat" identity =================
   Boot/brief sit on the landing page's opaque night gradient with a CSS-only
   snowfall; pause and endings are frost-glass sheets over the live frame.
   The old toxic green survives only as the single .z-dot status dot. */
.z-screens{position:fixed;inset:0;z-index:20;pointer-events:none}
.z-screen{
  position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
  padding:24px 16px;pointer-events:auto;overflow-y:auto;
  color:var(--frost);cursor:default;
}
/* safe vertical centering: auto margins center the content group when it
   fits, and never clip the top when the screen has to scroll */
.z-screen > :first-child{margin-top:auto}
.z-screen > :last-child{margin-bottom:auto}
.z-boot,.z-brief{
  background:
    radial-gradient(620px 620px at 82% 16%, rgba(205,220,255,.14), transparent 62%),
    linear-gradient(180deg,#04060d 0%,#0a1224 55%,#131c33 85%,#1a2440 100%);
}
/* CSS-only snowfall: two repeating dot sheets drifting straight down
   (vertical travel = one tile height, so the loop is seamless) */
.z-boot::before,.z-boot::after{
  content:"";position:fixed;inset:0;pointer-events:none;
}
.z-boot::before{
  background-image:
    radial-gradient(1.6px 1.6px at 22% 14%, rgba(223,232,246,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 64% 42%, rgba(223,232,246,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 41% 73%, rgba(223,232,246,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 87%, rgba(223,232,246,.45), transparent 60%);
  background-size:290px 290px;
  animation:zsnowA 18s linear infinite;
}
.z-boot::after{
  background-image:
    radial-gradient(1.1px 1.1px at 12% 32%, rgba(188,212,255,.4), transparent 60%),
    radial-gradient(1px 1px at 55% 8%, rgba(188,212,255,.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 61%, rgba(188,212,255,.4), transparent 60%),
    radial-gradient(1px 1px at 33% 90%, rgba(188,212,255,.3), transparent 60%);
  background-size:430px 430px;
  animation:zsnowB 31s linear infinite;
}
@keyframes zsnowA{to{background-position:0 290px}}
@keyframes zsnowB{to{background-position:0 430px}}
.z-bootcol{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

.z-mark{
  font-size:30px;line-height:1;color:var(--frost);opacity:.7;
  margin-bottom:14px;user-select:none;-webkit-user-select:none;
}
.z-kicker{
  font-size:12px;letter-spacing:.35em;color:var(--frost);text-transform:uppercase;
}
.z-kicker-sm{font-size:10px;letter-spacing:.3em;color:var(--frost-dim)}
.z-title{
  margin-top:14px;font-family:var(--display);font-weight:normal;
  font-size:clamp(40px,7vw,92px);color:var(--ink);letter-spacing:.02em;
  text-shadow:0 0 40px rgba(120,150,220,.25);
}
.z-premise{
  margin-top:14px;max-width:min(560px,86vw);
  font-size:clamp(14px,1.2vw,16px);line-height:1.7;letter-spacing:.015em;
  color:#bdc7d6;
}

/* load progress: thin sodium rule + mono status */
.z-loadwrap{margin-top:30px;width:min(420px,80vw)}
.z-loadrule{
  height:2px;border-radius:1px;overflow:hidden;
  background:rgba(143,160,192,.18);
}
.z-loadfill{
  height:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sodium),#ffc178);
  box-shadow:0 0 8px rgba(255,180,94,.7);
  transition:transform .25s ease;
}
.z-loadrow{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}
.z-load{
  font-size:11px;letter-spacing:.3em;color:var(--frost);
  font-variant-numeric:tabular-nums;
}
/* the one green survivor: a tiny pulsing reactor status dot */
.z-dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#39ff14;box-shadow:0 0 6px rgba(57,255,20,.8);
  animation:zdot 2.4s ease-in-out infinite;
}
@keyframes zdot{0%,100%{opacity:1}50%{opacity:.35}}

/* sodium CTA — same family as the landing .btn-zone */
.z-cta{
  margin-top:30px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:normal;
  font-size:clamp(15px,2vw,20px);letter-spacing:.12em;
  color:#04060d;background:linear-gradient(180deg,#ffc178,#e8963c);
  border:0;border-radius:var(--r2);padding:14px 42px;min-height:48px;
  box-shadow:0 0 24px rgba(255,180,92,.28), 0 2px 10px rgba(0,0,0,.4);
  transition:box-shadow var(--t2) var(--ease),transform var(--t1) var(--ease);
}
.z-cta:hover:not(:disabled){box-shadow:0 0 42px rgba(255,180,92,.5), 0 2px 12px rgba(0,0,0,.5)}
.z-cta:active:not(:disabled){transform:scale(.97)}
.z-cta:focus-visible{outline:2px solid var(--cold);outline-offset:3px}
.z-cta:disabled{opacity:.45;filter:saturate(.4);cursor:progress}
.z-cta-sm{font-size:clamp(14px,1.6vw,17px);padding:11px 34px;min-height:44px}
.z-ghost{
  margin-top:14px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--frost);background:transparent;
  border:1px solid var(--pline);border-radius:var(--r2);padding:10px 22px;
  min-height:44px;
  transition:color var(--t2) var(--ease),border-color var(--t2) var(--ease),
             background var(--t2) var(--ease),transform var(--t1) var(--ease);
}
.z-ghost:active{transform:scale(.97)}
/* a primary + its secondary on one line: kill the stacked margins so the two
   buttons share a baseline instead of stepping down the screen (the boot
   screen shipped CONTINUE at 48 px next to NEW SHIFT at 34 px) */
.z-ctarow{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:30px}
.z-ctarow .z-cta,.z-ctarow .z-ghost{margin-top:0}
.z-ghost:hover{color:var(--ink);border-color:rgba(188,212,255,.45)}
.z-ghost:focus-visible{outline:2px solid var(--cold);outline-offset:3px}

/* glass cards (controls / objectives / settings) */
.z-card{
  margin-top:24px;width:min(460px,88vw);text-align:left;
  background:var(--panel);border:1px solid var(--pline);border-radius:var(--r3);
  padding:14px 18px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.z-ctrlgrid{
  margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 24px;
}
.z-ctrl{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12px;letter-spacing:.04em;
}
.z-ctrlkey{color:var(--ink);flex:none}
.z-ctrlact{color:var(--frost)}
.z-ctrlline{margin-top:8px;font-size:10px;letter-spacing:.18em;line-height:1.8;color:var(--frost)}

.z-fine{
  margin-top:16px;font-size:11px;letter-spacing:.07em;color:var(--frost);
  max-width:min(680px,80vw);line-height:1.7;
}
.z-link{pointer-events:auto;font-size:11px;letter-spacing:.2em;color:var(--sodium)}
.z-link:hover{color:var(--ink);text-shadow:none}

/* ---- pause: frost glass sheet over the live frame ---- */
.z-pause{
  background:rgba(4,6,13,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:zveilin var(--t2) var(--ease) both;
}
.z-pause .z-psheet,.z-end .z-endcard{animation:zsheetin var(--t2) var(--ease) both}
@keyframes zveilin{from{opacity:0}to{opacity:1}}
@keyframes zsheetin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.z-psheet{display:flex;flex-direction:column;align-items:center;width:min(940px,96vw)}
.z-h2{
  margin-top:10px;font-family:var(--display);font-weight:normal;color:var(--ink);
  font-size:clamp(26px,4vw,44px);letter-spacing:.06em;
  text-shadow:0 0 30px rgba(120,150,220,.3);
}
.z-pcols{
  margin-top:8px;display:flex;gap:28px;align-items:flex-start;justify-content:center;
  flex-wrap:wrap;
}
.z-pcol{display:flex;flex-direction:column;align-items:center;width:min(440px,92vw)}
.z-setcard{width:100%}
.z-row{
  margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.z-row:first-child{margin-top:0}
.z-rowlabel{font-size:11px;letter-spacing:.3em;color:var(--frost-dim);min-width:96px;text-align:right}
.z-rowopts{display:flex;gap:8px;flex-wrap:wrap}
.z-rownote{
  margin:6px 0 0 108px;font-size:10px;letter-spacing:.2em;color:var(--frost);
  opacity:.7;line-height:1.7;
}
.z-opt{
  background:transparent;border:1px solid rgba(143,160,192,.35);border-radius:var(--r1);
  color:var(--frost);font-size:12px;letter-spacing:.18em;padding:7px 14px;min-height:32px;
  transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease),
             box-shadow var(--t1) var(--ease),background var(--t1) var(--ease);
}
.z-opt:hover{border-color:rgba(188,212,255,.6);color:var(--ink);box-shadow:0 0 10px rgba(188,212,255,.2)}
.z-opt:focus-visible{outline:2px solid var(--cold);outline-offset:2px}
.z-opt.on{
  background:rgba(255,180,94,.14);border-color:rgba(255,180,94,.65);color:#ffd9a8;
  box-shadow:0 0 12px rgba(255,180,94,.3);
}
/* a button riding at the end of a slider row (the SOUND row's mute toggle) */
.z-opt-tail{flex:none}

/* ---- range sliders (mouse speed / master volume) ----
   A native <input type=range> repainted in the frost identity: pointer,
   touch, and arrow-key/Home/End handling come for free, and the pause
   screen is the one place the pointer is guaranteed unlocked. The filled
   part of the WebKit track is a gradient stop at --zfill, which ui.js sets
   through CSSOM (the CSP forbids inline style attributes). Gecko has a real
   ::-moz-range-progress and needs no variable. */
.z-srow{gap:10px}
.z-slider{
  -webkit-appearance:none;appearance:none;
  flex:1 1 140px;min-width:100px;max-width:220px;
  height:22px;margin:0;background:transparent;
  cursor:crosshair;touch-action:none;
}
.z-slider:focus{outline:none}
.z-slider:focus-visible{outline:2px solid var(--cold);outline-offset:4px;border-radius:var(--r1)}
.z-slider::-webkit-slider-runnable-track{
  height:4px;border-radius:var(--r0);border:1px solid rgba(143,160,192,.35);
  background:linear-gradient(90deg,
    rgba(255,180,94,.7) 0, rgba(255,180,94,.7) var(--zfill,50%),
    rgba(143,160,192,.16) var(--zfill,50%), rgba(143,160,192,.16) 100%);
}
.z-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;border-radius:50%;
  background:linear-gradient(180deg,#ffc178,#e8963c);
  border:1px solid rgba(8,14,26,.8);
  box-shadow:0 0 10px rgba(255,180,92,.45), 0 1px 4px rgba(0,0,0,.5);
  transition:box-shadow .15s ease,transform .1s ease;
}
.z-slider:hover::-webkit-slider-thumb{box-shadow:0 0 18px rgba(255,180,92,.7), 0 1px 4px rgba(0,0,0,.5)}
.z-slider:active::-webkit-slider-thumb{transform:scale(1.14)}
.z-slider::-moz-range-track{
  height:4px;border-radius:var(--r0);border:1px solid rgba(143,160,192,.35);
  background:rgba(143,160,192,.16);
}
.z-slider::-moz-range-progress{height:4px;border-radius:var(--r0);background:rgba(255,180,94,.7)}
.z-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(180deg,#ffc178,#e8963c);
  border:1px solid rgba(8,14,26,.8);
  box-shadow:0 0 10px rgba(255,180,92,.45);
}
.z-slidval{
  flex:none;min-width:54px;text-align:right;
  font-size:12px;letter-spacing:.08em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* quality hint: the height is RESERVED (3 lines) so hovering a tier previews
   its description without reflowing the sheet under the cursor */
.z-hint{
  margin:8px 0 0 108px;min-height:50px;
  font-size:10px;letter-spacing:.08em;line-height:1.6;
  color:var(--cold);opacity:.72;
}
.z-pfoot{
  margin-top:26px;display:flex;gap:22px;align-items:baseline;
  font-size:12px;letter-spacing:.24em;color:var(--frost-dim);
  font-variant-numeric:tabular-nums;
}

/* ---- brief ---- */
.z-briefcard{width:min(680px,90vw);padding:22px 26px;max-height:calc(100dvh - 190px);overflow-y:auto;scrollbar-color:#6e7e80 #172028;overscroll-behavior:contain}
.z-brief .z-brieftext{
  margin-top:14px;text-align:left;
  font-size:clamp(15px,1.3vw,17px);line-height:1.7;letter-spacing:.01em;
  color:var(--ink);white-space:pre-line;min-height:11em;
}

/* ---- ending cards: dossier-style glass sheet ---- */
.z-end{
  background:rgba(4,6,13,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.z-endcard{
  width:min(560px,92vw);
  background:rgba(8,14,26,.6);
  border:1px solid var(--pline);border-top:2px solid var(--cold);
  border-radius:var(--r3);padding:36px 34px 32px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.z-endcard.z-end-sodium{border-top-color:var(--sodium)}
.z-endcard.z-end-red{border-top-color:var(--danger)}
.z-verdict{
  margin-top:14px;font-family:var(--display);font-weight:normal;
  font-size:clamp(38px,6vw,68px);line-height:1.05;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.z-v-cold{color:var(--ink);text-shadow:0 0 26px rgba(188,212,255,.45)}
.z-v-sodium{color:var(--sodium);text-shadow:0 0 26px rgba(255,180,94,.5)}
.z-v-red{color:#ff5a48;text-shadow:0 0 26px rgba(255,45,26,.55)}
.z-endtext{
  margin-top:16px;
  font-size:clamp(14px,1.25vw,16px);line-height:1.7;letter-spacing:.01em;
  color:#aab6cf;
}
.z-end.z-bad .z-endtext{color:#c4b4b8}
.z-stats{margin-top:22px;width:100%;text-align:left}
.z-statrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:10px 2px;border-bottom:1px dashed rgba(143,160,192,.16);
  font-size:11px;letter-spacing:.3em;color:var(--frost);
}
.z-statrow:last-child{border-bottom:0}
.z-statrow b{
  font-weight:normal;font-size:14px;letter-spacing:.1em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.z-endlink{display:inline-block;margin-top:20px}

/* ---- dramatisation / memorial note (ending cards) ----
   Deliberately the quietest block on the card: a hairline rule, small caps,
   no accent colour, no animation. It is a caption, not a curtain call. */
.z-memorial{
  margin-top:22px;padding-top:16px;width:100%;text-align:left;
  border-top:1px solid rgba(143,160,192,.16);
}
.z-memtitle{
  font-size:10px;letter-spacing:.34em;color:rgba(143,160,192,.72);
}
.z-memtext{
  margin-top:8px;font-size:11.5px;line-height:1.72;letter-spacing:.03em;
  color:rgba(160,172,192,.82);
}
body.touch .z-memorial{margin-top:14px;padding-top:10px}
body.touch .z-memtext{font-size:10.5px;line-height:1.6}

/* ambient motion off */
@media (prefers-reduced-motion: reduce){
  .z-pause,.z-pause .z-psheet,.z-end .z-endcard{animation:none}
  .z-boot::before,.z-boot::after{animation:none}
  .z-dot{animation:none}
  .z-loadfill{transition:none}
  .z-cta,.z-ghost,.z-opt{transition:none}
  /* reticle: the mark still spreads (that is information), it just arrives
     instantly instead of easing */
  .z-retwrap,.z-ret-ring,.z-ret-t,
  .z-slider::-webkit-slider-thumb{transition:none}
}

/* ================= touch controls ================= */
.z-touch{position:absolute;inset:0;z-index:6;pointer-events:none}
.z-look{
  position:absolute;inset:0;pointer-events:auto;touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.z-stick{
  position:absolute;z-index:2;pointer-events:auto;touch-action:none;
  left:max(28px, env(safe-area-inset-left));
  bottom:max(72px, env(safe-area-inset-bottom));
  width:134px;height:134px;border-radius:50%;
  border:1px solid rgba(143,160,192,.45);
  background:rgba(8,14,26,.4);
  box-shadow:0 0 14px rgba(143,160,192,.15);
  -webkit-tap-highlight-color:transparent;
}
.z-stick-nub{
  position:absolute;left:50%;top:50%;width:54px;height:54px;
  margin:-27px 0 0 -27px;border-radius:50%;
  background:rgba(188,212,255,.22);border:1px solid var(--cold);
  pointer-events:none;
}
.z-tbtns{
  position:absolute;z-index:2;pointer-events:none;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  width:196px;height:206px;
}
/* only the buttons take taps — the container box must not swallow look-drags
   (pointer-events inherits, so the buttons opt back in explicitly) */
.z-tbtns .z-tbtn{pointer-events:auto}
.z-tbtns .z-tbtn{position:absolute}
.z-tbtns .z-tb-jump{right:0;bottom:0;width:80px;height:80px;font-size:12px}
.z-tbtns .z-tb-punch{right:88px;bottom:20px;width:66px;height:66px}
.z-tbtns .z-tb-crouch{right:4px;bottom:92px;width:62px;height:62px}
.z-tbtns .z-tb-kick{right:96px;bottom:96px;width:54px;height:54px}
.z-tbtns .z-tb-torch{right:44px;bottom:158px;width:46px;height:46px;font-size:9px}
.z-tbtn{
  width:72px;height:72px;border-radius:50%;touch-action:none;
  border:1px solid var(--pline);background:var(--panel);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  -webkit-tap-highlight-color:transparent;
  text-shadow:0 1px 4px rgba(6,10,20,.8);
}
.z-tbtn:active,.z-tbtn.on{
  background:rgba(188,212,255,.22);border-color:var(--cold);color:#fff;
}
.z-tbtn-sm{width:58px;height:58px;font-size:10px}
/* the tap target for interactions: visually the same glass pill family */
.z-tinteract{
  position:absolute;z-index:2;pointer-events:auto;
  right:max(120px, calc(env(safe-area-inset-right) + 116px));
  bottom:max(170px, calc(env(safe-area-inset-bottom) + 156px));
  width:92px;height:92px;font-size:14px;
  background:rgba(8,14,26,.6);
  color:#ffd9a8;border-color:rgba(255,180,94,.55);
  box-shadow:0 4px 18px rgba(4,8,18,.5), 0 0 18px rgba(255,180,94,.3),
    inset 0 1px 0 rgba(223,232,246,.08);
}
.z-tpause{
  position:absolute;z-index:2;pointer-events:auto;touch-action:none;
  top:max(12px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:56px;height:38px;border:1px solid var(--pline);border-radius:var(--r2);
  background:var(--panel);color:var(--frost);font-size:12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
}
/* ---- compact touch HUD: everything shrinks and clears the thumb zones ---- */
body.touch .z-tr,body.touch .z-bl,body.touch .z-br,body.touch .z-objectives{
  padding:6px 9px;border-radius:var(--r2);
}
body.touch .z-tl{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left))}
body.touch .z-map{width:106px}
body.touch .z-map-n{display:none}
body.touch .z-tr{top:max(10px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right))}
body.touch .z-tr .z-label{font-size:9px;letter-spacing:.2em}
body.touch .z-clock{font-size:20px}
body.touch .z-tr .z-sub{font-size:9px;margin-top:2px}
body.touch .z-objectives{top:94px;right:max(12px, env(safe-area-inset-right));max-width:46vw}
body.touch .z-obj{font-size:10px;margin-bottom:4px;letter-spacing:.06em}
body.touch .z-bl{left:max(20px, env(safe-area-inset-left));bottom:224px}
body.touch .z-bl .z-label{font-size:9px}
body.touch .z-dose{font-size:16px}
body.touch .z-bl .z-sub{font-size:9px}
body.touch .z-br{right:max(18px, env(safe-area-inset-right));bottom:238px}
body.touch .z-br .z-label{font-size:9px}
body.touch .z-speed{font-size:20px;margin-bottom:4px}
body.touch .z-bar{width:118px;height:6px;margin-top:4px}
/* :not() keeps this from outranking .z-prompt.z-anchored — without it the
   anchored shell keeps bottom:32vh, stretches from top:0 to it, and the
   pill's -130% self-translate hurls it off the top of the screen */
body.touch .z-prompt:not(.z-anchored){bottom:32vh}
body.touch .z-pill{font-size:11px;padding:6px 13px 6px 8px;gap:8px}
body.touch .z-keycap{min-width:20px;height:20px;font-size:10px}
body.touch .z-bl .z-badge,body.touch .z-bl .z-bar{width:118px}
body.touch .z-badge{height:7px;margin-top:4px}
body.touch .z-subtitle{bottom:236px;font-size:11px;max-width:70vw;padding:8px 12px}
body.touch .z-toast{top:52px;font-size:10px;max-width:74vw;padding:7px 12px}
body.touch .z-tinteract{
  right:auto;left:50%;transform:translateX(-50%);
  bottom:max(30px, env(safe-area-inset-bottom));
  width:84px;height:84px;font-size:13px;
}
/* ---- compact touch screens: boot / pause / endings fit a phone in landscape ---- */
body.touch .z-screen{padding:14px 12px}
body.touch .z-mark{font-size:22px;margin-bottom:8px}
body.touch .z-title{font-size:clamp(28px,7vw,44px);margin-top:8px}
body.touch .z-premise{margin-top:8px;font-size:12px;line-height:1.55}
body.touch .z-loadwrap{margin-top:16px}
body.touch .z-cta{margin-top:18px;padding:11px 28px;min-height:44px;font-size:15px}
body.touch .z-card{margin-top:14px;padding:10px 14px;width:min(420px,92vw)}
body.touch .z-fine{margin-top:10px;line-height:1.7}
body.touch .z-pcols{gap:12px;margin-top:4px}
/* fat-finger floor: every pause/menu control clears 40px on touch */
body.touch .z-opt{min-height:40px;padding:9px 16px}
/* sliders: a taller hit strip (the thumb is the same 14px, the invisible
   track box around it is what the thumb has to be grabbed inside) */
body.touch .z-slider{height:34px;flex:1 1 120px;min-width:92px}
body.touch .z-slider::-webkit-slider-thumb{width:18px;height:18px;margin-top:-8px}
body.touch .z-slider::-moz-range-thumb{width:18px;height:18px}
body.touch .z-slidval{min-width:46px;font-size:11px}
/* no hover on touch: the hint simply describes the SELECTED tier, so it
   does not need three reserved lines held open for a preview */
body.touch .z-hint{margin-left:0;min-height:0;font-size:9px;letter-spacing:.07em}
body.touch .z-ghost{min-height:40px}
body.touch .z-h2{margin-top:4px}
body.touch .z-pfoot{margin-top:12px}
body.touch .z-endcard{padding:20px 18px 18px;width:min(480px,94vw)}
body.touch .z-verdict{font-size:clamp(28px,6vw,40px);margin-top:8px}
body.touch .z-endtext{margin-top:10px;font-size:12px;line-height:1.6}
body.touch .z-statrow{padding:7px 2px}

/* ---- landscape phone (short viewport): repack the panels around the thumb
   zones. Portrait-tuned anchors (dosimeter bottom:224, objectives top:70 +
   the 820px block's bottom:120px) stretch or collide on a 375px-tall screen:
   the objectives panel lands on the TORCH/KICK/CROUCH arc and the dosimeter
   covers the minimap. Left column: map → dosimeter → stick; objectives sit
   between the map and the pause button along the top. ---- */
@media (orientation: landscape) and (max-height: 480px){
  body.touch .z-stick{bottom:max(16px, env(safe-area-inset-bottom))}
  body.touch .z-objectives{
    top:10px;bottom:auto;right:auto;
    left:158px;max-width:212px;
  }
  body.touch .z-bl{top:128px;bottom:auto;left:max(10px, env(safe-area-inset-left))}
  body.touch .z-subtitle{bottom:160px;max-width:54vw}
  body.touch .z-tpause{top:max(16px, env(safe-area-inset-top))}
  /* pause sheet: two columns fit side by side on a short viewport, halving
     the internal scroll distance */
  body.touch .z-pcol{width:min(380px,46vw)}
  /* 812x375 budget: at 46vw the settings card is ~345 px of usable width and
     the SOUND row now carries label + slider + readout + MUTE. Shrink the
     label gutter and the row rhythm so nothing wraps into the next row; the
     sheet keeps .z-screen's own overflow-y:auto for whatever still spills. */
  body.touch .z-row{margin-top:9px;gap:8px}
  body.touch .z-rowlabel{min-width:62px;font-size:10px;letter-spacing:.16em}
  body.touch .z-rownote{margin:5px 0 0 70px;font-size:8px;letter-spacing:.16em}
  body.touch .z-hint{margin-top:6px;font-size:9px;line-height:1.5}
  body.touch .z-slider{flex:1 1 96px;min-width:82px;height:30px}
  body.touch .z-slidval{min-width:40px;font-size:10px}
  body.touch .z-opt{min-height:36px;padding:7px 12px;font-size:11px}
  body.touch .z-opt-tail{padding:7px 9px;letter-spacing:.12em}
  /* width:100% is load-bearing, not tidying. The generic touch rule pins
     every card to min(420px, 92vw) = 420 px here, but this block narrows the
     pause COLUMN to min(380px, 46vw) = 373 px — so without this the settings
     card overhangs its column by ~46 px, sits at x=-4 and runs its quality
     hint under the objectives panel. Following the column makes the usable
     width 373 - 22 = ~351 px, which is what the row rhythm above is sized
     for. (The overhang predates the slider/hint rows; they only made it
     visible, because short option buttons never reached the card edge.) */
  body.touch .z-card{margin-top:10px;padding:9px 11px;width:100%}
  /* ending card: compact vertically so card + TRY AGAIN + link fit ~375px */
  body.touch .z-endcard{padding:12px 16px 12px}
  body.touch .z-verdict{font-size:24px;margin-top:4px}
  body.touch .z-endtext{margin-top:6px;font-size:11px;line-height:1.5}
  body.touch .z-stats{margin-top:10px}
  body.touch .z-statrow{padding:4px 2px}
  body.touch .z-endcard .z-cta{margin-top:12px}
  body.touch .z-endlink{margin-top:10px}
}

/* landscape is REQUIRED on a phone: portrait blocks play until rotated
   (iOS has no orientation-lock API; Android locks after fullscreen) */
@media (orientation: portrait){
  body.touch #ui::after{
    content:"⟳\A\A ROTATE TO LANDSCAPE";
    white-space:pre;
    position:fixed;inset:0;z-index:60;
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:rgba(4,6,13,.94);
    font-size:20px;line-height:1.6;letter-spacing:.3em;color:var(--sodium);
    text-shadow:0 0 14px rgba(255,180,94,.5);
    pointer-events:auto;
  }
}

/* ================= fallbacks ================= */
#nogl,#nojs{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:var(--bg);text-align:center;padding:24px;
}
#nogl .big,#nojs .big{font-size:64px;color:var(--sodium)}
#nogl h1,#nojs h1{font-family:var(--display);color:#fff;margin:12px 0;letter-spacing:.06em}
#nogl p,#nojs p{margin-top:10px;font-size:13px;letter-spacing:.12em}

@media (max-width:820px){
  .z-objectives{top:auto;bottom:120px;right:16px;max-width:60vw}
  :root{--hud-inset:16px;--hud-trh:82px}
  .z-tl{top:14px}
  .z-tr{top:14px}
  .z-map{width:120px}
}
/* Field notebook: diegetic evidence, readable choices, no hidden timer. */
.z-shift-status{margin-top:9px;color:#b5c4b8;font:11px/1.5 "Segoe UI",sans-serif;letter-spacing:.06em}
.z-field-panel{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,calc(100vw - 36px));max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;padding:30px;background:rgba(15,23,24,.98);border:1px solid #70877b;border-top:3px solid #c8b080;box-shadow:0 24px 90px #000a;color:#e8e9e1;font:16px/1.55 "Segoe UI",sans-serif;pointer-events:auto}
.z-field-panel h2{font-size:28px;font-weight:500;margin:22px 0 12px;letter-spacing:-.02em}.z-field-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.z-field-top .z-kicker{font-size:10px;line-height:1.6;margin:0}.z-field-close{color:#c4d0c9;background:none;border:0;cursor:pointer;white-space:nowrap}.z-field-intro{color:#aebeb6;font-size:14px}.z-field-question{border-top:1px solid #35433e;padding-top:20px;margin-top:24px}.z-field-choices{display:grid;gap:9px}.z-field-choices button{font:inherit;text-align:left;padding:12px 15px;border:1px solid #43594d;background:#1c2b27;color:#edf1e8;cursor:pointer}.z-field-choices button:hover,.z-field-choices button:focus-visible{background:#30463a;border-color:#d8c498;outline:2px solid #d8c498;outline-offset:2px}.z-field-feedback{font-size:12px;color:#d6be90;min-height:36px;margin:18px 0 0}@media(max-height:600px){.z-field-panel{padding:18px;max-height:calc(100dvh - 16px)}.z-field-panel h2{font-size:22px;margin:10px 0}.z-field-intro{font-size:12px}.z-field-question{margin-top:12px;padding-top:12px}.z-field-choices button{padding:8px 12px}}
.z-notebook{font-family:"Segoe UI",sans-serif}.z-notebook details{border-top:1px solid #33423c;padding:9px 0}.z-notebook summary{font-size:13px;color:#d8c498;cursor:pointer}.z-notebook p{font-size:12px;line-height:1.6;color:#b3c1b9}

/* Operable field equipment: enamel instrument case beside a paper docket. */
.z-field-workbench{width:min(1040px,calc(100vw - 40px));padding:26px 30px 30px;background:#131d1c;border:1px solid #6c7767;border-top:3px solid #c9b589;box-shadow:0 0 0 100vmax #050d0b96,0 24px 90px #000b;scrollbar-color:#6e7c6c #18231f}
.z-field-workbench h2{font-size:30px;margin:12px 0 8px;color:#f1eee3}.z-field-workbench>.z-field-intro{max-width:83ch;margin:0 0 22px;line-height:1.6}
.z-field-workbench .z-field-close{min-height:44px;padding:8px 12px;border:1px solid #627064;border-radius:3px;font:12px "Segoe UI",sans-serif;color:#e5e7d9}
.z-work-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:22px;align-items:start}
.z-equipment{position:relative;padding:22px;background:linear-gradient(135deg,#34463c,#25372e);border:1px solid #60725c;border-radius:9px;box-shadow:inset 0 1px #82927b55,0 5px 10px #0005;min-width:0}
.z-equipment:before,.z-equipment:after{content:'+';position:absolute;top:7px;font:15px/1 monospace;color:#869580;transform:rotate(18deg)}.z-equipment:before{left:8px}.z-equipment:after{right:8px}
.z-work-serial{font:10px/1.5 "Consolas",monospace;letter-spacing:.1em;color:#c2cbb7;margin:0 0 8px}.z-equipment h3,.z-work-docket h3{font:500 22px/1.2 "Segoe UI",sans-serif;letter-spacing:-.02em;margin:6px 0 10px}.z-work-instruction{font-size:13px;line-height:1.55;color:#d4dbc9;margin:0 0 20px;white-space:pre-wrap}
.z-work-meter{position:relative;max-width:390px;margin:0 auto 16px;overflow:hidden;border:7px solid #18251e;border-radius:75px 75px 16px 16px;background:#dfdfc5;box-shadow:inset 0 5px 12px #25312655,0 1px #80916c66;color:#263328}
.z-work-meter svg{display:block;width:100%;height:auto}.z-work-meter svg text{fill:#303b2d;font:12px "Consolas",monospace}.z-work-reading{display:block;position:relative;margin:-8px 14px 12px;text-align:center;font:600 15px/1.5 "Consolas",monospace;background:#cbd2b6;border-top:1px solid #87987c;padding:7px 3px;color:#263328}
.z-work-meter-source{text-align:center;font:10px/1.4 "Consolas",monospace;letter-spacing:.08em;color:#46533c;margin:-5px 10px 13px}
.z-work-button{font:500 12px/1.35 "Segoe UI",sans-serif;border:1px solid #869780;border-radius:4px;min-height:44px;padding:10px 13px;color:#e9ebdc;background:linear-gradient(#455b48,#324735);cursor:pointer;box-shadow:0 3px #13271b, inset 0 1px #95a88344;text-align:left;touch-action:manipulation}
.z-equipment>.z-work-button{width:100%;margin:6px 0 10px}.z-work-button:hover{background:#4c664e}.z-work-button:active{transform:translateY(1px);box-shadow:0 1px #13271b}.z-work-button[aria-pressed="true"]{border-color:#e6ce89;background:#dbca98;color:#243126;box-shadow:inset 0 2px 3px #1115,0 1px #a7b49133}.z-work-button[disabled]{color:#b9cfaa;border-color:#63805d;background:#273d2d;cursor:default;box-shadow:none}
.z-field-workbench button:focus-visible,.z-field-workbench input:focus-visible{outline:3px solid #eed78e;outline-offset:4px}.z-field-workbench button:focus:not(:focus-visible){outline:none}
.z-work-controls{border:0;padding:0;margin:14px 0 18px;min-width:0}.z-work-controls legend{font:10px "Consolas",monospace;letter-spacing:.1em;text-transform:uppercase;color:#c6d1ba;padding:0 0 9px}.z-work-switches{display:flex;gap:8px}.z-work-switches .z-work-button{flex:1;text-align:center}
.z-work-slider{display:grid;grid-template-columns:1fr auto;gap:8px;margin:17px 0;color:#dce3d1;font-size:12px}.z-work-slider output{font:600 13px "Consolas",monospace;color:#f0d894}.z-work-slider input{grid-column:1/-1;width:100%;min-height:36px;margin:0;accent-color:#dac28a;cursor:pointer;touch-action:pan-y}
.z-work-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}.z-work-actions>.z-work-button{flex:1;min-width:145px}
.z-work-docket{position:relative;background:#e4dcc4;color:#2e382d;padding:23px 21px 20px;box-shadow:0 6px 17px #0005;border-top:7px solid #acaa8a;min-width:0}.z-work-docket:before{content:'';position:absolute;top:-13px;left:calc(50% - 30px);width:60px;height:13px;border:3px solid #99a08c;border-bottom:0;border-radius:5px 5px 0 0;background:#29382e}.z-work-docket .z-work-serial{color:#5c6650}.z-work-docket h3{font-size:24px}.z-work-checklist{list-style:none;padding:0;margin:20px 0}.z-work-checklist li{display:flex;gap:10px;border-bottom:1px solid #969c7a66;padding:10px 0;font-size:13px;line-height:1.45}.z-work-checklist li>span:first-child{color:#6a7257;font-weight:700;min-width:14px}.z-work-checklist li.done>span:first-child{color:#315733}.z-work-checklist li.done{color:#315733}
.z-work-docket .z-field-feedback{font-size:12px;line-height:1.55;color:#694922;min-height:56px;margin:15px 0}.z-work-sign{width:100%;text-align:center;color:#dce2d0;background:#475d46;border-color:#6c7e5f}.z-work-sign.ready{background:#244b35;color:#f5edcf;border-color:#48784b}.z-work-sign[aria-disabled="true"]{background:#777c67;border-color:#8a8e79;color:#f1efd9}.z-work-live{font:10px/1.65 "Consolas",monospace;color:#62684f;margin:16px 0 0;letter-spacing:.01em}.z-work-log{border-bottom:1px solid #929a7655}.z-work-log>p:not(.z-work-serial){font-size:11px;line-height:1.6;margin:9px 0}.z-work-log strong,.z-work-log span{display:block}.z-work-log span{font-family:"Consolas",monospace;color:#646d52}
.z-work-dial{width:154px;height:154px;border:15px double #24352b;border-radius:50%;margin:18px auto 22px;box-sizing:border-box;display:grid;place-items:center;background:repeating-conic-gradient(#668264 0 2deg,#1b2e22 2deg 30deg);box-shadow:0 5px 8px #10281b88}.z-work-dial output{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;border:3px solid #889177;background:#d9d9bb;color:#213626;font:500 35px "Consolas",monospace}
.z-work-carrier{font:11px/1.5 "Consolas",monospace;color:#c6bd99;padding:10px;border:1px solid #687859;background:#192b20}.z-work-carrier.connected{color:#b2d991}.z-work-comparison{font:12px/1.6 "Consolas",monospace;color:#d6dcbf}
.z-work-route-map{padding:16px 4px;background:#182b21;border:1px solid #66785a;border-radius:4px}.z-work-route-map svg{width:100%;height:auto;display:block}.z-work-route-map text{fill:#d2dabf;font:10px "Consolas",monospace}
.z-work-ticket{white-space:pre-line;text-align:center;font:500 17px/1.9 "Consolas",monospace;color:#314135;background:#e7dec4;border:1px dashed #667054;padding:22px 12px;margin:15px 5px 22px;box-shadow:0 4px 6px #0005;transform:rotate(-1deg)}.z-work-ticket.superseded{color:#77775c;text-decoration:line-through;background:#bdbda4}
.z-work-fuel-stock{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px;height:70px;margin:24px 0 12px;padding:7px;background:#162a1f;border:1px solid #73836a}.z-work-fuel-stock i{background:#4d5d49;border:1px solid #6d7b5e}.z-work-fuel-stock i.assigned{background:#9cab82}.z-work-fuel-stock i.reserved{background:#e1c983}.z-work-balance{display:block;font:14px "Consolas",monospace;color:#ecdcac;margin:0 0 25px}
.z-work-patch{display:grid;grid-template-columns:1fr 50px 1fr;gap:7px;align-items:center;background:#162b20;border:1px solid #60745a;padding:13px 9px;margin:20px 0}.z-work-patch .z-work-controls{margin:0}.z-work-patch .z-work-switches{flex-direction:column}.z-work-patch .z-work-button{font:10px/1.4 "Consolas",monospace;text-align:left;padding:10px 8px;min-width:0}.z-work-cord{color:#7b8060;text-align:center;font:17px "Consolas",monospace}.z-work-cord.connected{color:#e4c57b}.z-work-transmission{border-left:3px solid #cdbd7c;padding:13px;background:#1b2f24;font:12px/1.7 "Consolas",monospace;color:#e0dbc2;min-height:70px}
@media(max-width:720px){.z-field-workbench{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px}.z-field-workbench h2{font-size:24px}.z-field-workbench>.z-field-intro{font-size:12px;margin-bottom:18px}.z-work-layout{grid-template-columns:1fr;gap:22px}.z-equipment{padding:20px 15px}.z-work-docket{padding:19px}.z-work-docket .z-field-feedback{min-height:0}.z-work-checklist{margin:12px 0}.z-work-checklist li{padding:8px 0}.z-field-workbench .z-field-top{align-items:flex-start}.z-field-workbench .z-field-close{white-space:nowrap}.z-work-docket .z-work-sign{min-height:48px}.z-work-patch{grid-template-columns:1fr 38px 1fr}}
@media(max-height:550px) and (min-width:721px){.z-field-workbench{padding:18px 22px;max-height:calc(100dvh - 16px)}.z-field-workbench h2{font-size:23px}.z-field-workbench>.z-field-intro{font-size:12px;margin-bottom:15px}.z-work-meter{max-width:290px}.z-equipment{padding:18px}.z-work-docket{padding:17px}}
@media(prefers-reduced-motion:reduce){.z-field-workbench *{scroll-behavior:auto}.z-work-button:active{transform:none}}
@media(min-width:721px){
  .z-field-workbench{padding:20px 26px 24px}.z-field-workbench h2{font-size:27px;margin:9px 0 6px}.z-field-workbench>.z-field-intro{margin-bottom:15px;font-size:13px}
  .z-equipment{padding:18px}.z-equipment h3{font-size:21px;margin:5px 0 8px}.z-work-instruction{margin-bottom:12px;font-size:12px}.z-work-meter{max-width:300px;margin-bottom:11px}
  .z-work-controls{margin:10px 0 12px}.z-work-controls legend{padding-bottom:7px}.z-work-slider{margin:9px 0;gap:4px}.z-equipment>.z-work-button{margin:4px 0 7px}.z-work-actions{margin:8px 0 2px}
}
.z-field-workbench .z-field-top{position:sticky;top:-20px;z-index:3;background:#131d1c;padding:3px 0 8px;margin-bottom:-5px}
@media(max-width:720px){.z-field-workbench .z-field-top{top:-16px}}
.z-notebook .z-notebook-stamp{color:#d8c498;font:11px "Consolas",monospace}.z-notebook-receipt{list-style:none;padding:0;margin:9px 0 15px;color:#c6d2bd;font:11px/1.7 "Consolas",monospace}.z-notebook-receipt li{padding:6px 0;border-bottom:1px solid #53634b55}
.z-work-cord{position:relative;align-self:stretch}.z-work-cord svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* Player-initiated crew conversations keep the face clear and the choices
   reachable by keyboard or touch. No backdrop blur over the portrait. */
.z-talk-hint{position:fixed;z-index:8;left:50%;bottom:23%;transform:translateX(-50%);max-width:80vw;min-height:44px;padding:11px 20px;border:1px solid #cabb91a0;border-radius:4px;background:#14201ee8;box-shadow:0 4px 20px #0006;color:#eee5cb;font:13px/1.4 var(--body);pointer-events:auto}
.z-talk-hint:hover,.z-talk-hint:focus-visible{background:#33433b;outline:2px solid #e4cf96;outline-offset:3px}
.z-conversation{position:fixed;inset:0;z-index:18;pointer-events:auto;background:linear-gradient(0deg,#071310e8 0%,#08100c50 24%,transparent 47%),linear-gradient(90deg,transparent 48%,#09131080 100%);color:#f0ead9;cursor:default}
.z-conversation::before{content:'';position:absolute;inset:0 0 auto;height:7vh;background:#050c0bcc;pointer-events:none}
.z-conversation-identity{position:absolute;left:max(5vw,24px);bottom:8vh;width:36vw;text-shadow:0 2px 12px #000}
.z-conversation-identity h2{font:500 clamp(23px,2.7vw,39px)/1.15 var(--body);letter-spacing:-.035em;margin:0 0 9px}
.z-conversation-identity p{font:13px/1.5 var(--body);color:#c4ccba;max-width:32ch}
.z-conversation-card{position:absolute;right:max(4vw,24px);bottom:6vh;width:min(410px,39vw);padding:20px 23px;border-top:1px solid #c9b885a0;background:linear-gradient(130deg,#132320ed,#0b1714ed);box-shadow:0 18px 40px #0004;border-radius:0 0 5px 5px;max-height:78vh;overflow-y:auto;scrollbar-color:#6e7c6c #18231f}
.z-conversation-label{font:10px/1.6 var(--mono);letter-spacing:.19em;color:#cdbb89;margin:0 0 12px}
.z-conversation-line{font:15px/1.55 var(--body);color:#e3e4d5;min-height:70px;margin:0 0 18px}
.z-conversation-topics{display:grid;gap:9px}
.z-conversation-topic{min-height:46px;text-align:left;padding:11px 14px;border:1px solid #76816a88;background:#26382ee6;color:#e3e7d5;border-radius:3px;font:13px/1.45 var(--body)}
.z-conversation-topic:hover{background:#3c4f3f}.z-conversation-topic[aria-pressed="true"]{color:#292f25;background:#ddcea6;border-color:#e9ddb9}
.z-conversation-topic:focus-visible,.z-conversation-leave:focus-visible{outline:2px solid #ead8a5;outline-offset:3px}
.z-conversation-leave{display:block;margin:13px 0 5px;padding:9px 0;min-height:44px;border:0;border-bottom:1px solid #8b927d50;background:none;color:#c9d3bd;font:12px/1.5 var(--body);width:100%;text-align:left}
.z-conversation-leave:hover{color:#fff0ca}.z-conversation-time{font:10px/1.6 var(--body);color:#a1ad99;margin:10px 0 0}
.z-in-conversation .z-hud,.z-in-conversation .z-touch{visibility:hidden}
@media(max-height:550px){
  .z-conversation::before{height:18px}.z-conversation-identity{left:24px;bottom:26px;width:40vw}.z-conversation-identity h2{font-size:25px}
  .z-conversation-card{right:20px;bottom:20px;max-height:calc(100dvh - 46px);padding:13px 17px;width:40vw}.z-conversation-label{margin-bottom:6px;font-size:9px}
  .z-conversation-line{min-height:30px;font-size:12px;margin-bottom:10px}.z-conversation-topics{gap:6px}.z-conversation-topic{font-size:12px;padding:8px 10px;min-height:44px}
  .z-conversation-leave{margin:6px 0 0;padding:8px 0}.z-conversation-time{font-size:9px;margin-top:6px}
}
@media(max-width:600px) and (min-height:551px){
  .z-conversation-identity{left:22px;bottom:auto;top:11vh;width:calc(100vw - 44px)}.z-conversation-identity h2{font-size:27px}
  .z-conversation-card{left:18px;right:18px;bottom:22px;width:auto;max-height:47vh;padding:17px 20px}.z-conversation-line{min-height:45px;font-size:13px}
}

/* Survey plan and field notebook. The large map is vector artwork built
   from world data; it stays legible at every resolution and quality tier. */
.z-atlas-toggle{display:block;margin:8px auto 0;padding:8px 11px;min-height:36px;border:1px solid #b7c5bd66;border-radius:4px;background:#14231eeb;color:#f0e7c9;font:10px var(--mono);letter-spacing:.1em;pointer-events:auto}
.z-in-conversation .z-atlas-toggle{visibility:hidden}
.z-atlas-screen{padding:18px!important;background:rgba(7,16,14,.91)!important;overflow:auto!important;cursor:default}
.z-atlas{width:min(1320px,100%);height:min(930px,calc(100dvh - 36px));margin:auto;background:#e3dfcf;color:#263c34;display:flex;flex-direction:column;box-shadow:0 25px 90px #0008;border:1px solid #b2ac94;border-radius:6px;overflow:hidden;font-family:"Segoe UI",sans-serif;text-align:left}
.z-atlas-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 28px 15px;border-bottom:1px solid #63776a44}
.z-atlas-eyebrow{font:10px/1.5 var(--mono);letter-spacing:.15em;color:#596c5d;margin-bottom:5px}
.z-atlas h2{font-size:27px;font-weight:550;letter-spacing:-.7px}.z-atlas-actions{display:flex;gap:10px;align-items:center}
.z-atlas button{border:1px solid #49645366;border-radius:3px;background:transparent;color:#294536;min-height:44px;padding:10px 14px;font:12px/1.3 "Segoe UI",sans-serif;cursor:pointer}
.z-atlas button:hover{background:#c6d0ba}.z-atlas button:focus-visible,.z-atlas-toggle:focus-visible{outline:3px solid #92651f;outline-offset:3px}
.z-atlas .z-atlas-return{background:#294b3e;color:#f8efd5;border-color:#294b3e}.z-atlas .z-atlas-return:hover{background:#3a6351}
.z-atlas-tabs{display:flex;gap:6px;padding:9px 28px;background:#d3d7c8;border-bottom:1px solid #63776a44}.z-atlas-tabs button{border-color:transparent;min-height:36px;padding:8px 14px;font-size:12px}.z-atlas-tabs button[aria-pressed=true]{background:#294b3e;color:#f4eedb}
.z-atlas-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0;flex:1}
.z-atlas-plan{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 22px 8px;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#eeeada,#dadac8)}
.z-atlas-map{width:100%;height:100%;min-height:0;flex:1;overflow:visible}.z-atlas-map.facility{max-height:490px}
.z-atlas-maptools{display:flex;gap:5px;margin-bottom:7px;align-self:flex-start;flex:none}.z-atlas-maptools button{padding:5px 12px;min-height:36px;background:#e6e7d4;font-size:11px}.z-atlas-maptools button:first-child,.z-atlas-maptools button:nth-child(2){font-size:18px;min-width:36px}.z-atlas-map{overflow:hidden;cursor:grab}
.z-atlas-map:focus-visible{outline:2px solid #92651f;outline-offset:2px}
.touch .z-atlas button,.touch .z-atlas-toggle{min-height:44px}.touch .z-atlas-maptools button{min-width:44px}
body.touch .z-tl{z-index:7}body.touch .z-atlas-toggle{position:fixed;top:max(16px,env(safe-area-inset-top));left:calc(50% + 36px);min-width:44px;margin:0;padding:7px;font-size:10px}
.z-atlas-map .map-label{font-size:calc(24px / var(--atlas-label-scale,1))}.z-atlas-map .map-label.small{font-size:calc(20px / var(--atlas-label-scale,1))}.z-atlas-map.facility .map-label.small{font-size:calc(2.8px / var(--atlas-label-scale,1))}.z-atlas-map .map-pin text{font-size:calc(18px / var(--atlas-label-scale,1))}.z-atlas-map.facility .map-pin text{font-size:calc(2.3px / var(--atlas-label-scale,1))}
.z-atlas-caption{text-align:center;font:9px/1.6 var(--mono);letter-spacing:.07em;color:#506452;margin-top:12px;flex:none}
.z-atlas-legend{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin:9px 0 5px;font-size:10px;color:#526552}.z-atlas-legend span{display:flex;align-items:center;gap:5px}.z-atlas-legend i{width:7px;height:7px;border-radius:50%;background:#a47923}.z-atlas-legend i.you{background:#254e84;clip-path:polygon(50% 0,100% 100%,50% 70%,0 100%);border-radius:0;width:10px;height:10px}.z-atlas-legend i.signed{background:#307059}.z-atlas-legend i.door{background:#f9f4dc;border:1px solid #55755c}
.z-atlas-side{overflow:auto;padding:24px 22px;background:#eef0df88;border-left:1px solid #63776a44;scrollbar-color:#8b9d83 #d9dfce}.z-atlas-objective{font-size:15px;line-height:1.4;font-weight:600;margin:0 0 9px}.z-atlas-advice{font-size:12px;line-height:1.6;color:#5b695a;margin:12px 0 19px}.z-atlas-stops{display:grid;gap:5px}
.z-atlas .z-atlas-stop{display:flex;gap:11px;text-align:left;padding:10px;border-color:transparent;align-items:center}.z-atlas-stop strong{display:block;font-size:12px;font-weight:600}.z-atlas-stop small{display:block;font-size:10px;color:#64715b;margin-top:3px}.z-atlas-number{font:14px var(--mono);color:#6b745f}.z-atlas .z-atlas-stop[aria-pressed=true]{background:#cbd4bc;border-color:#719276}
.z-atlas-detail{border-top:1px solid #85937b66;margin-top:18px;padding-top:16px;font-size:12px;line-height:1.65}.z-atlas-detail h3{font-size:17px;font-weight:600;line-height:1.4;margin-bottom:9px}.z-atlas-detail ul{padding-left:17px;font:11px/1.7 var(--mono);margin-top:12px}.z-atlas-detail .z-atlas-stamp{margin-top:10px;font:10px var(--mono);color:#377159}
.z-atlas-footer{display:flex;justify-content:space-between;gap:12px;padding:11px 28px;border-top:1px solid #63776a44;font:10px var(--mono);letter-spacing:.08em;color:#637059;flex:none}
.map-grid{stroke:#56715c;stroke-width:.6;fill:none;opacity:.17}.map-road{stroke:#9dac93;fill:none;stroke-linecap:round}.map-building{fill:#bbc4ad;stroke:#5e775d;stroke-width:.7}.map-plaza{fill:#d0d8be}.map-plant{fill:#b4bea8;stroke:#577153;stroke-width:2}
.map-label{fill:#425e46;font:500 24px "Segoe UI",sans-serif;letter-spacing:2px;paint-order:stroke;stroke:#e3e1ce;stroke-width:5;stroke-linejoin:round}.map-label.small{font-size:20px;letter-spacing:0}.facility .map-label.small{font-size:2.8px;stroke-width:1;letter-spacing:0}.facility .map-grid{stroke-width:.12}.map-room{fill:#d3dbc4;stroke:#688366;stroke-width:.3}.map-room.current-room{fill:#c3d6bd;stroke:#345f44;stroke-width:.6}.map-stair{stroke:#9bac8c;stroke-width:.18;fill:none}.map-door{fill:#f7f3d8;stroke:#4a795b;stroke-width:.25}.map-closed{fill:#b44f37;stroke:#823627;stroke-width:.3}
.map-pin circle{fill:#e3dfcf;stroke:#859474;stroke-width:2}.map-pin text{fill:#3a5542;font:600 18px "Segoe UI",sans-serif}.map-pin.current circle{fill:#a17421;stroke:#825912}.map-pin.current text,.map-pin.signed text{fill:#fff6dc}.map-pin.signed circle{fill:#43735b;stroke:#2d624c}.map-pin.closed circle{fill:#baafa0;stroke:#967d68}.facility .map-pin circle{stroke-width:.25}.facility .map-pin text{font-size:2.3px}.map-you path{fill:#2f588b;stroke:#f3eed4;stroke-width:3}.facility .map-you path{stroke-width:.3}
@media(max-width:950px){.z-atlas-body{grid-template-columns:minmax(0,1fr) 290px}.z-atlas-head{padding:15px 20px}.z-atlas h2{font-size:22px}.z-atlas-tabs{padding:8px 20px}.z-atlas-plan{padding:12px}.z-atlas-side{padding:18px 15px}.z-atlas-legend{gap:8px;font-size:9px}}
@media(max-width:620px){.z-atlas-screen{padding:6px!important}.z-atlas{height:calc(100dvh - 12px)}.z-atlas-head{padding:12px;align-items:flex-start;gap:8px}.z-atlas h2{font-size:19px}.z-atlas-actions{flex-direction:column;gap:4px}.z-atlas-actions button{min-height:32px;font-size:10px;padding:7px}.z-atlas-tabs{padding:5px;gap:1px}.z-atlas-tabs button{flex:1;padding:7px 4px;font-size:10px}.z-atlas-body{display:block;overflow:auto}.z-atlas-plan{height:520px}.z-atlas-plan:has(.facility){height:230px}.z-atlas-side{overflow:visible;border-left:0;border-top:1px solid #63776a44;padding:18px}.z-atlas-footer{padding:10px;font-size:8px;letter-spacing:0}.z-atlas-stops{grid-template-columns:1fr 1fr}.z-atlas .z-atlas-stop{padding:8px 4px;gap:7px}}
@media(max-height:500px) and (min-width:621px){.z-atlas-screen{padding:6px!important}.z-atlas{height:calc(100dvh - 12px)}.z-atlas-head{padding:8px 15px}.z-atlas h2{font-size:20px}.z-atlas-eyebrow{font-size:8px}.z-atlas-tabs{padding:3px 10px}.z-atlas-tabs button{min-height:30px}.z-atlas-plan{padding:5px 12px}.z-atlas-caption{margin-top:2px;font-size:8px}.z-atlas-legend{margin:4px;font-size:8px}.z-atlas-footer{padding:6px 15px}}