/* The Ninth Gate — "Transit, defaced".
 *
 * The interface is the dead city's transit wayfinding: enamel signs with an inset keyline,
 * platform nameplates over a coloured line strip, line colours that tell places and kinds
 * apart, mixed-case signage lettering (Overpass, after Highway Gothic). The cult has written
 * over it in red chalk: the sigil on the title, rings round unspent points, a scratch under a
 * boss, the death screen. Chalk marks are the only decoration; everything else stays plain.
 *
 * Line colours: Station green, Blackout sodium amber, Fields chalk red, towers essence violet.
 * Panels take the line of what they hold (inventory amber, skills violet, passives green).
 * Factions run on their own lines: Iron Covenant rust, Ashen Directorate blue, Veiled Synod violet.
 *
 * Fonts are served by the game itself (no third-party requests). Overpass: SIL OFL 1.1,
 * assets/fonts/OFL-Overpass.txt.
 */

@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/overpass-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/overpass-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/overpass-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/overpass-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/overpass-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/overpass-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/overpass-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/overpass-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* enamel */
  --void: #070b10;
  --deep: #0c131b;
  --enamel: #16202b;
  --enamel-2: #1e2b38;
  --enamel-a: rgba(22, 32, 43, 0.95);
  --white: #e6e2d6;
  --keyline: rgba(230, 226, 214, 0.5);
  --rule: rgba(230, 226, 214, 0.14);
  --text: #d6d3c9;
  --muted: #8e99a6;
  --faint: #5d6875;
  /* lines */
  --sodium: #f0a030;
  --sodium-hi: #ffc46a;
  --chalk: #d93a2b;
  --chalk-hi: #ff6a55;
  --essence: #8c6fe6;
  --exit: #3dbe7a;
  --shield: #6fd3ef;
  /* faction lines */
  --f-iron: #c8553a;
  --f-ashen: #4b8fc9;
  --f-veiled: var(--essence);
  /* item rarity (genre standard) */
  --normal: #e6e2d6;
  --magic: #8495ff;
  --rare: #f4d65e;
  --unique: #e8822e;
  /* the line of the thing in front of you (zones, panels) */
  --line: var(--sodium);
  --sans: "Overpass", "Highway Gothic", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --r: 4px;
  /* HUD unit: 1px at a 1500px-wide viewport, clamped */
  --u: clamp(0.72px, calc(100vw / 1500), 1.15px);
  --slot: calc(52 * var(--u));
  /* chalk marks (masks: the colour comes from the background) */
  --sigil: url("assets/ui/marks/sigil.svg");
  --ring: url("assets/ui/marks/ring.svg");
  --scratch: url("assets/ui/marks/scratch.svg");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  cursor: url("assets/cursor/arrow.svg") 3 2, default;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button, input, select { font: inherit; color: inherit; }
a { color: var(--sodium-hi); text-underline-offset: 2px; }
b { color: var(--white); font-weight: 700; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.12em 0.35em 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.35;
  text-align: center;
  color: var(--white);
  background: var(--deep);
  border: 1px solid var(--keyline);
  border-radius: 2px;
}
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: 0.84rem; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap { gap: 12px; }
.center { justify-content: center; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }
.center-text { text-align: center; }

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  outline: none;
  background: #000;
  touch-action: none;
  cursor: url("assets/cursor/arrow.svg") 3 2, default;
}

* { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }

@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ backdrop: the station wall */
/* Behind the menus: Lantern Station's tiled wall in the dark, one sodium lamp still burning. */

#backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background: var(--void);
}
body.in-game #backdrop { display: none; }
#backdrop .tiles {
  position: absolute;
  inset: -2%;
  /* glazed subway tiles, 3:1, brick bond */
  background:
    url("assets/ui/marks/tiles.svg") 0 0 / 96px 64px repeat,
    linear-gradient(180deg, #1a2026, #11161b 60%, #0b0f13);
  opacity: 0.9;
}
#backdrop .tiles::after {
  /* the line band running along the wall at nameplate height */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(9vh + 0.5 * clamp(2.2rem, 7.2vw, 5.4rem) + 14px);
  height: 22px;
  background: linear-gradient(180deg, #2a5a3c 0 5px, transparent 5px 17px, #2a5a3c 17px);
  opacity: 0.55;
}
#backdrop .lamp {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 52% at 18% 8%, rgba(240, 160, 48, 0.2), transparent 70%),
    radial-gradient(ellipse 30% 26% at 82% 96%, rgba(217, 58, 43, 0.12), transparent 70%);
  animation: lamp 7s infinite steps(1);
}
#backdrop .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 75% at 45% 40%, transparent 35%, rgba(4, 6, 9, 0.92) 100%);
}
@keyframes lamp { 0%, 100% { opacity: 1; } 61% { opacity: 0.82; } 63% { opacity: 1; } 64% { opacity: 0.7; } 66% { opacity: 1; } }

/* ------------------------------------------------------------------ screens and boards */

.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.screen.dim { background: rgba(5, 8, 12, 0.74); backdrop-filter: blur(2px); z-index: 40; }

/* A board: an enamel sign with an inset keyline. */
.panel {
  position: relative;
  background: var(--enamel-a);
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: -6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  padding: 22px 26px;
  --line: var(--white);
}
.panel.narrow { width: min(460px, 94vw); }
.panel.wide { width: min(980px, 96vw); }
.panel > * + * { margin-top: 16px; }

/* Board titles: left, heavy, over the board's line strip. */
.title-sm, .title-xs { margin: 0; font-weight: 800; color: var(--white); line-height: 1.15; }
.title-sm { font-size: 1.4rem; text-align: left; }
.title-sm::after { content: ""; display: block; height: 5px; margin-top: 10px; background: var(--line); }
.title-xs { font-size: 1rem; }
.panel-head { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 5px solid var(--line); }
.panel-head .title-sm::after { display: none; }
.panel-head .points { margin-left: auto; color: var(--muted); font-size: 0.9rem; }
.panel-head .points b { color: var(--sodium-hi); }
.close {
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--white);
  background: var(--enamel-2);
  border: 1.5px solid var(--keyline);
  border-radius: 3px;
  cursor: pointer;
}
.panel-head .points + .close { margin-left: 0; }
.close:hover { background: var(--chalk); border-color: var(--chalk); }

/* ------------------------------------------------------------------ buttons and fields */

.btn {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 10px 18px 8px;
  color: var(--white);
  background: var(--enamel-2);
  border: 1.5px solid var(--keyline);
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: #283849; border-color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
/* the yellow sign: the way forward */
.btn.primary { color: #1c1306; background: var(--sodium); border-color: var(--sodium); font-weight: 800; }
.btn.primary:hover { background: var(--sodium-hi); border-color: var(--sodium-hi); }
.btn.ghost { color: var(--muted); background: transparent; border-color: var(--rule); }
.btn.ghost:hover { color: var(--white); border-color: var(--keyline); background: rgba(230, 226, 214, 0.05); }
.btn.danger { color: var(--chalk-hi); border-color: rgba(217, 58, 43, 0.6); }
.btn.danger:hover { color: #fff; background: var(--chalk); border-color: var(--chalk); }
.btn.small { padding: 7px 12px 5px; font-size: 0.84rem; }
.btn.tiny { padding: 3px 8px 2px; font-size: 0.72rem; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 600; font-size: 0.86rem; color: var(--muted); }
input, select {
  height: 44px;
  padding: 10px 12px 8px;
  color: var(--white);
  font-size: 1rem;
  background: var(--deep);
  border: 1.5px solid var(--rule);
  border-bottom-color: var(--keyline);
  border-radius: 3px;
  outline: none;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--sodium); }
select option { background: var(--deep); }
.check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--sodium); }
.vol-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.vol-grid label { color: var(--muted); font-size: 0.9rem; }
.vol-grid input[type="range"] { height: 22px; padding: 0; border: none; background: none; accent-color: var(--sodium); min-width: 0; }
.form-row { align-items: flex-end; }

.seg { display: flex; height: 42px; }
.seg-btn {
  padding: 2px 14px 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--deep);
  border: 1.5px solid var(--rule);
  cursor: pointer;
}
.seg-btn:first-child { border-radius: 3px 0 0 3px; }
.seg-btn:last-child { border-radius: 0 3px 3px 0; }
.seg-btn + .seg-btn { border-left: none; }
.seg-btn:hover { color: var(--white); }
.seg-btn.selected { color: #1c1306; background: var(--sodium); border-color: var(--sodium); }

.pill { font-weight: 600; font-size: 0.72rem; padding: 3px 8px 1px; border: 1px solid var(--rule); border-radius: 2px; background: rgba(7, 11, 16, 0.6); color: var(--muted); }
.pill.on { color: var(--exit); border-color: rgba(61, 190, 122, 0.4); }
.pill.off { color: var(--faint); text-decoration: line-through; }

/* status dots: a lamp, lit green (ok) or red (down) */
.dot { display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--faint); vertical-align: middle; }
.dot.ok { background: var(--exit); box-shadow: 0 0 8px rgba(61, 190, 122, 0.8); }
.dot.err { background: var(--chalk-hi); box-shadow: 0 0 8px rgba(255, 106, 85, 0.8); }

/* the chalked sigil: static, or drawing itself (loading, connecting) */
.sigil {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  background: var(--chalk);
  -webkit-mask: var(--sigil) center / contain no-repeat;
  mask: var(--sigil) center / contain no-repeat;
}
.sigil.spin { --sigil: url("assets/ui/marks/sigil-draw.svg"); }
.sigil.small { width: 48px; height: 48px; }

/* ------------------------------------------------------------------ title screen */

#screen-menu { justify-content: flex-start; padding-top: 9vh; overflow-y: auto; }
.title-block { display: flex; flex-direction: column; align-items: center; margin-bottom: 5vh; }
/* The station nameplate, with the cult's sigil chalked over its end. */
.game-title {
  position: relative;
  margin: 0;
  padding: 0.2em 0.62em 0.42em;
  font-weight: 800;
  font-size: clamp(2.2rem, 7.2vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  background: var(--enamel);
  border-radius: 6px;
  box-shadow: inset 0 -0.2em 0 #2a8a55, 0 24px 60px rgba(0, 0, 0, 0.65);
}
.game-title::before {
  /* the enamel keyline, above the line band */
  content: "";
  position: absolute;
  inset: 0.1em 0.1em 0.3em;
  border: 2px solid var(--keyline);
  border-radius: 3px;
  pointer-events: none;
}
.game-title::after {
  content: "";
  position: absolute;
  right: -0.78em;
  top: 50%;
  width: 1.55em;
  height: 1.55em;
  transform: translateY(-58%) rotate(-11deg);
  background: var(--chalk);
  -webkit-mask: var(--sigil) center / contain no-repeat;
  mask: var(--sigil) center / contain no-repeat;
  opacity: 0.95;
  pointer-events: none;
}
.subtitle { margin: 22px 0 0; font-style: italic; font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--muted); }

.menu-list { display: flex; flex-direction: column; gap: 10px; width: min(440px, 92vw); }
.menu-btn {
  display: grid;
  grid-template-columns: 6px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 15px 18px 12px 14px;
  text-align: left;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--white);
  background: var(--enamel-a);
  border: 0;
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: -5px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  --mline: var(--faint);
}
.menu-btn::before { content: ""; grid-row: span 2; align-self: stretch; margin: 4px 0; background: var(--mline); border-radius: 1px; }
.menu-btn small { grid-column: 2; font-weight: 400; font-size: 0.92rem; color: var(--muted); }
.menu-btn .rune { display: none; }
.menu-btn.main { --mline: var(--sodium); }
.menu-btn:hover { background: var(--enamel-2); --mline: var(--sodium-hi); }

.menu-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  font-size: 0.8rem;
  pointer-events: none;
}
.menu-foot a { pointer-events: auto; }
.menu-foot .legal-links { display: flex; gap: 14px; }
.caps { display: flex; gap: 6px; }

/* ------------------------------------------------------------------ sign-in gate, settings, credits, account */

.online { display: flex; justify-content: center; width: 100%; }
.panel.gate { width: min(760px, 96vw); --line: var(--exit); }
#menu-settings, #menu-credits { --line: var(--white); }
.auth-tabs { margin: 4px 0 14px; }
.auth-tabs .seg-btn { flex: 1; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .form-row { align-items: flex-end; flex-wrap: wrap; }
.auth-form .field.grow { min-width: 150px; }
.auth-error { min-height: 1.3em; margin: 8px 0 0; color: var(--chalk-hi); }
.auth-error.ok { color: var(--exit); }
.legal-links a, .legal-accept a { color: var(--sodium-hi); }
.legal-accept { margin: 0.4rem 0 0.6rem; }
/* the invite gate: the key typed like a ticket number */
.panel.gate.invite-gate { width: min(520px, 94vw); }
.invite-lede { margin-bottom: 0; color: var(--text); line-height: 1.45; }
.invite-input {
  height: 60px;
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.invite-input::placeholder { color: var(--faint); }
.invite-have a, .invite-chip a { color: var(--sodium-hi); }
.invite-chip { margin: 0 0 0.2rem; color: var(--muted); }
.invite-chip b { font-family: var(--mono); color: var(--exit); letter-spacing: 0.06em; }
.invite-chip.missing { color: var(--text); }
.credit-list { margin: 0; display: grid; gap: 3px; }
.credit-list dt { font-weight: 700; color: var(--white); margin-top: 12px; }
.credit-list dt:first-child { margin-top: 0; }
.credit-list dd { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.45; }
.credit-list dd a { color: var(--text); }

.account-pop {
  position: fixed;
  top: 66px;
  right: 14px;
  z-index: 30;
  width: min(600px, calc(100vw - 28px));
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--enamel-a);
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: -6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
.account-line #online-kind { color: var(--muted); font-style: italic; }
.account-form { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; padding: 12px; background: var(--deep); border: 1.5px solid var(--rule); border-radius: 3px; }
.account-pop .account-form { margin: 0; }
.account-form p { margin: 0; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; min-width: 0; padding-right: 60px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 6px; background: none; border: none; cursor: pointer; font-weight: 600; font-size: 0.78rem; color: var(--muted); }
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--white); }
.caps-hint { color: var(--sodium-hi); }
.device-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: rgba(12, 19, 27, 0.7); border: 1.5px solid var(--rule); border-radius: 3px; }
.device-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device-row b { overflow-wrap: anywhere; }
.device-row .here { margin-left: 6px; color: var(--exit); font-weight: 400; }

/* ------------------------------------------------------------------ character select */
/* Roster | stage (the wasm preview canvas) | the survivor's details and gear; one column on phones. */

#screen-menu[data-view="chars"] { padding: 0; overflow: hidden; }
#screen-menu[data-view="chars"] .title-block,
#screen-menu[data-view="chars"] .menu-foot { display: none; }

.char-select {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(290px, 370px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "roster stage detail";
}

/* the station's header strip, on the green line */
.cs-top {
  grid-area: top;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 10px 20px 8px;
  background: rgba(12, 19, 27, 0.96);
  border-bottom: 5px solid #2a8a55;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.cs-brand { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.cs-logo { font-weight: 800; font-size: 1.35rem; color: var(--white); white-space: nowrap; }
.cs-station { font-weight: 600; font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.cs-account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cs-account .account-line { color: var(--muted); margin-right: 6px; white-space: nowrap; }

.cs-roster, .cs-detail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 14px;
  padding: 20px 20px 18px;
  background: var(--enamel-a);
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: -6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
.cs-roster { grid-area: roster; margin-right: 0; }
.cs-detail { grid-area: detail; margin-left: 0; }
.cs-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-weight: 800; font-size: 1.15rem; color: var(--white); }
.cs-h::after { content: ""; flex: 1; height: 1.5px; background: var(--rule); align-self: center; }
.cs-count { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.cs-h.small-h { font-size: 0.95rem; margin: 16px 0 8px; color: var(--muted); }

.char-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; padding: 2px 4px 6px 2px; margin: 0 -4px 0 -2px; }
/* a survivor: their line bullet (initial), name, last stop, level */
.char-card {
  --cc: #3f7fbf;
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px 7px 9px;
  text-align: left;
  color: inherit;
  font: inherit;
  background: rgba(12, 19, 27, 0.72);
  border: 1.5px solid var(--rule);
  border-left: 5px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
}
.char-card[data-body="female"] { --cc: #b7578a; }
.char-card:hover { border-color: var(--keyline); border-left-color: var(--keyline); }
.char-card.selected { background: var(--enamel-2); border-color: var(--keyline); border-left-color: var(--sodium); }
.cc-sigil {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding-top: 3px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  background: var(--cc);
}
.cc-main { display: flex; flex-direction: column; min-width: 0; }
.cc-name, .cc-sub, .cc-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-name { font-weight: 700; font-size: 1.02rem; color: var(--white); }
.cc-sub { font-size: 0.86rem; color: var(--muted); }
.cc-meta { font-size: 0.8rem; color: var(--faint); }
.cc-level { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.cc-level::before { content: "Level"; font-weight: 600; font-size: 0.66rem; color: var(--muted); margin-bottom: 3px; }
.char-empty { margin: 6px 2px; color: var(--muted); }

.new-char {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 12px 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  background: transparent;
  border: 1.5px dashed var(--keyline);
  border-radius: 3px;
  cursor: pointer;
}
.new-char .plus { font-size: 1.3rem; line-height: 1; color: var(--sodium); }
.new-char:hover, .new-char.selected { background: var(--enamel-2); border-style: solid; }
.cs-back { margin-top: auto; align-self: flex-start; }
.cs-roster .cs-back { margin-top: 12px; }

.cs-stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.stage-host { position: absolute; inset: 0; }
.stage-canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: pan-y; }
.stage-canvas.dragging { cursor: grabbing; }
.cs-stage::before {
  /* melt the canvas edges into the wall */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 78% at 50% 52%, transparent 55%, rgba(7, 11, 16, 0.9) 100%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.6), transparent 14%, transparent 86%, rgba(7, 11, 16, 0.7));
}
.stage-plate {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 8px 18px 12px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
  background: var(--enamel);
  border-radius: var(--r);
  box-shadow: inset 0 -5px 0 var(--sodium), 0 10px 24px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
}
.stage-plate span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* beside the details panel the plate would only repeat the name */
@media (min-width: 1181px) { .stage-plate { display: none; } }
.stage-wait {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
.stage-wait.failed { padding: 0 24px; text-align: center; }
.stage-wait.failed .sigil { --sigil: url("assets/ui/marks/sigil.svg"); opacity: 0.4; }
.stage-hint { position: absolute; z-index: 2; right: 18px; bottom: 12px; margin: 0; font-size: 0.8rem; color: var(--faint); pointer-events: none; }

.cs-view, .cs-create { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cs-create { gap: 14px; }
.cs-nameplate { padding-bottom: 12px; border-bottom: 5px solid var(--sodium); }
.cs-name { margin: 0; font-weight: 800; font-size: 1.7rem; line-height: 1.1; color: var(--white); overflow-wrap: anywhere; }
.cs-sub { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }
.cs-when { margin: 2px 0 0; color: var(--faint); font-size: 0.85rem; }
.cs-when:empty { display: none; }
.cs-tip { margin: auto 0 0; padding-top: 14px; color: var(--faint); text-align: center; }
.cs-tip + .cs-actions { margin-top: 0; padding-top: 8px; }
.cs-gear { list-style: none; margin: 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.gear-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 3px 8px 3px 3px;
  background: rgba(12, 19, 27, 0.72);
  border: 1.5px solid var(--rule);
  border-left: 3px solid var(--rc, var(--rule));
  border-radius: 3px;
}
.gear-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: var(--deep); border-radius: 2px; }
.gear-icon i { width: 78%; height: 78%; display: grid; place-items: center; background: center / contain no-repeat; font-style: normal; font-size: 1.1rem; color: var(--rc, var(--faint)); }
.gear-text { display: flex; flex-direction: column; min-width: 0; }
.gear-text b { color: var(--rc, var(--text)); font-weight: 700; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-text small { font-size: 0.78rem; color: var(--muted); }
.gear-row.empty { opacity: 0.6; border-style: dashed; }
.gear-row.empty b { color: var(--faint); font-weight: 400; }
.gear-none { color: var(--muted); }

.cs-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.cs-actions .btn.ghost { flex: none; }
.cs-play { flex: 1; padding: 13px 18px 10px; font-size: 1.2rem; }
.cs-confirm { margin-top: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: rgba(217, 58, 43, 0.12); border: 1.5px solid var(--chalk); border-radius: 3px; }
.cs-confirm p { margin: 0; }
.cs-status { min-height: 1.3em; margin: 10px 0 0; color: var(--muted); }

@media (max-width: 1180px) {
  .char-select {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "roster stage" "roster detail";
  }
  .cs-detail { margin: 0 14px 14px 0; max-height: 42vh; }
  .char-card { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .cc-sigil { width: 36px; height: 36px; font-size: 1.05rem; }
  .cs-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 18px; }
  .cs-view[hidden] { display: none; }
  .cs-nameplate { grid-column: 1; grid-row: 1; }
  .cs-view .cs-h.small-h { display: none; }
  .cs-gear { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .cs-actions, .cs-confirm { grid-column: 1; grid-row: 3; }
  .cs-tip { grid-column: 1; grid-row: 2; align-self: end; text-align: left; }
}
@media (max-width: 760px) {
  .char-select { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .cs-top, .cs-detail, .cs-roster { flex: none; }
  .cs-top { position: sticky; top: 0; flex-wrap: wrap; padding: 8px 12px 6px; gap: 6px 10px; }
  .cs-brand { gap: 10px; }
  .cs-logo { font-size: 1.1rem; }
  .cs-account .account-line { display: none; }
  .cs-account .btn.small { padding: 6px 9px 4px; font-size: 0.78rem; }
  .cs-stage { flex: none; height: min(58vh, 520px); min-height: 300px; order: 1; }
  .cs-detail { order: 2; margin: 0 8px 10px; max-height: none; }
  .cs-roster { order: 3; margin: 0 8px 16px; }
  .cs-view { display: flex; }
  .cs-view .cs-h.small-h { display: flex; }
  .cs-gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .gear-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
  .gear-icon { width: 34px; height: 34px; }
  .gear-text b { font-size: 0.86rem; }
  .char-list { overflow: visible; }
  .account-pop { top: auto; bottom: 10px; right: 8px; width: calc(100vw - 16px); max-height: 80vh; }
  .stage-hint, .cs-tip { display: none; }
  .cs-tip + .cs-actions { padding-top: 14px; }
}
@media (max-width: 420px) {
  .cs-gear { grid-template-columns: 1fr; }
  .cs-station { display: none; }
}

/* ------------------------------------------------------------------ loading and errors */

.loading-box { text-align: center; width: min(420px, 90vw); }
.loading-box .sigil { width: 110px; height: 110px; }
.loading-box h2 { margin: 18px 0 14px; font-weight: 800; font-size: 1.5rem; color: var(--white); }
.bar { height: 6px; background: var(--deep); border-radius: 1px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.bar > div { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--sodium); transition: transform 0.2s; }
.panel.error-panel { width: min(620px, 94vw); --line: var(--chalk); }
.error-panel .row { flex-wrap: wrap; }
.error-text { font-size: 1.05rem; color: var(--white); }
.error-detail { max-height: 30vh; overflow: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); background: var(--deep); padding: 10px; border-radius: 3px; white-space: pre-wrap; user-select: text; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; background: var(--void); color: var(--text); }

/* ------------------------------------------------------------------ HUD */

#hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
#hud button, #hud .slot, #hud .flask, #hud .orb { pointer-events: auto; }

/* top left: the platform nameplate (zone), who you are, the connection */
.hud-top-left { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.zone-plate {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
  min-width: calc(200 * var(--u));
  padding: calc(9 * var(--u)) calc(15 * var(--u)) calc(14 * var(--u));
  background: var(--enamel-a);
  border-radius: var(--r);
  box-shadow: inset 0 calc(-6 * var(--u)) 0 var(--line), 0 6px 18px rgba(0, 0, 0, 0.5);
  font-weight: 800;
  font-size: calc(19 * var(--u));
  line-height: 1.1;
  color: var(--white);
  white-space: nowrap;
}
.zone-plate small { font-weight: 600; font-size: calc(12.5 * var(--u)); color: var(--muted); }
.zone-plate small:empty { display: none; }
.zone-plate[data-zone="Town"] { --line: var(--exit); }
.zone-plate[data-zone="Crypt"] { --line: var(--sodium); }
.zone-plate[data-zone="Arena"] { --line: var(--chalk); }
.zone-plate[data-zone="Tower"] { --line: var(--essence); }
.char-plate, .net-plate, .dev-plate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 2px;
  font-size: calc(13 * var(--u));
  color: var(--text);
  background: rgba(12, 19, 27, 0.82);
  border-radius: 3px;
  text-shadow: 0 1px 1px #000;
  width: max-content;
}
.char-plate b { font-weight: 700; }
.char-plate span { color: var(--sodium-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.dev-plate { color: var(--sodium-hi); }
.net-plate { color: var(--muted); font-variant-numeric: tabular-nums; }
.net-plate .dot { margin: 0 0 1px; background: var(--exit); box-shadow: 0 0 6px var(--exit); }
.net-plate.warn .dot { background: var(--sodium); box-shadow: 0 0 6px var(--sodium); }
.net-plate.bad .dot { background: var(--chalk-hi); box-shadow: 0 0 6px var(--chalk-hi); animation: pulse 1s infinite; }

/* top right: pictogram signs */
.hud-top-right { position: absolute; top: 12px; right: 12px; display: flex; gap: calc(6 * var(--u)); }
.icon-btn {
  position: relative;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  padding: 0;
  background: var(--enamel-a);
  border: 0;
  border-radius: 3px;
  outline: 1.5px solid var(--keyline);
  outline-offset: -4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 22%;
  background: var(--white);
  -webkit-mask: var(--pict) center / contain no-repeat;
  mask: var(--pict) center / contain no-repeat;
}
#btn-inventory { --pict: url("assets/ui/marks/pict-bag.svg"); }
#btn-skills { --pict: url("assets/ui/marks/pict-skills.svg"); }
#btn-passives { --pict: url("assets/ui/marks/pict-passives.svg"); }
#btn-menu { --pict: url("assets/ui/marks/pict-menu.svg"); }
.icon-btn:hover { background: var(--enamel-2); }
.icon-btn:hover::before { background: var(--sodium-hi); }
.icon-btn kbd { position: absolute; right: -5px; bottom: -6px; font-size: calc(10 * var(--u)); min-width: 0; }
/* unspent points: the count, ringed in chalk */
.badge {
  position: absolute;
  top: calc(-11 * var(--u));
  right: calc(-11 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  display: grid;
  place-items: center;
  padding-top: 2px;
  font-weight: 800;
  font-size: calc(13 * var(--u));
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  /* above the neighbouring signs; the ring stays behind the count */
  z-index: 2;
}
.badge::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  background: var(--chalk);
  -webkit-mask: var(--ring) center / contain no-repeat;
  mask: var(--ring) center / contain no-repeat;
  animation: pulse 1.8s infinite;
}

/* the network map */
.minimap {
  position: absolute;
  top: calc(26px + 46 * var(--u));
  right: 12px;
  width: calc(214 * var(--u));
  aspect-ratio: 1.2;
  padding: calc(7 * var(--u));
  background: var(--enamel-a);
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: -4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}
.minimap canvas { display: block; width: 100%; height: 100%; border-radius: 2px; image-rendering: pixelated; background: var(--deep); }
.minimap kbd { position: absolute; right: -5px; bottom: -6px; font-size: calc(10 * var(--u)); }
#hud.has-minimap .toasts { top: calc(40px + (46 + 214 / 1.2) * var(--u)); }

.map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.map-legend {
  position: absolute;
  top: calc(26px + 46 * var(--u));
  right: 12px;
  padding: 12px 16px 10px;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--enamel-a);
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: -4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}
.map-legend .ml-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 6px; padding-bottom: 6px; font-weight: 800; color: var(--white); border-bottom: 3px solid var(--line); }
.map-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.map-legend li { display: flex; align-items: center; gap: 9px; }
.map-legend i { display: inline-block; width: 9px; height: 9px; background: var(--c); box-shadow: 0 0 0 1px #0a0807; }
.map-legend .ml-you { --c: #f4d65e; width: 10px; height: 10px; clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); box-shadow: none; }
.map-legend .ml-party { --c: #7fe07a; }
.map-legend .ml-monster { --c: #d1362a; width: 6px; height: 6px; margin: 0 1.5px; }
.map-legend .ml-elite { --c: #ff9a3c; width: 7px; height: 7px; margin: 0 1px; }
.map-legend .ml-boss { --c: #e04cff; transform: rotate(45deg) scale(0.9); }
.map-legend .ml-portal { --c: #5aa0ff; transform: rotate(45deg) scale(0.85); }
.map-legend .ml-service { --c: #f1d79a; }
.map-legend .ml-envoy { --c: #ef8f6a; border-radius: 50% 50% 1px 1px; }
.map-legend .ml-board { --c: #e6e2d6; height: 7px; background: linear-gradient(var(--c) 0 1px, #0a0807 1px 2px, var(--c) 2px 4px, #0a0807 4px 5px, var(--c) 5px); }
.map-legend .ml-shrine { --c: #6fdcc4; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); box-shadow: none; }
.map-legend .ml-chest { --c: #b88446; height: 7px; }
.map-legend .ml-door { --c: #ffb347; width: 7px; height: 10px; margin: 0 1px; }
.map-legend .ml-exit { --c: #e8584a; width: 7px; height: 10px; margin: 0 1px; }
.map-legend .ml-stairs { --c: #62e08a; clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }

/* top centre: what's under the cursor; a boss is struck through in chalk */
.target-frame {
  position: absolute;
  top: 14px;
  left: 50%;
  width: min(calc(360 * var(--u)), 60vw);
  transform: translateX(-50%);
  text-align: center;
}
.target-name { font-weight: 700; font-size: calc(16 * var(--u)); color: var(--white); text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
.target-frame.elite .target-name { color: var(--magic); }
.target-frame.unique .target-name { color: var(--unique); font-weight: 800; }
.target-bar { position: relative; margin-top: 4px; height: calc(9 * var(--u)); background: rgba(7, 11, 16, 0.85); border-radius: 1px; box-shadow: 0 0 0 1px rgba(230, 226, 214, 0.25), 0 3px 8px rgba(0, 0, 0, 0.6); }
.target-bar > div { position: absolute; inset: 0; background: var(--chalk); clip-path: inset(0 calc((1 - var(--v, 1)) * 100%) 0 0); transition: clip-path 0.1s; }
.target-frame.unique .target-bar::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  top: calc(100% + 1px);
  height: calc(16 * var(--u));
  background: var(--chalk);
  -webkit-mask: var(--scratch) center / 100% 100% no-repeat;
  mask: var(--scratch) center / 100% 100% no-repeat;
}
.target-frame.loot .target-bar, .target-frame.object .target-bar { display: none; }

/* bottom: one board with life, essence, experience, flasks and skills */
.hud-bottom {
  position: absolute;
  left: 50%;
  bottom: calc(10 * var(--u));
  transform: translateX(-50%);
  /* sized by its contents (at left: 50% shrink-to-fit would cap it at half the screen) */
  width: max-content;
  max-width: 98vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "life mana" "cluster cluster";
  gap: calc(6 * var(--u)) calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u));
  background: var(--enamel-a);
  border-radius: var(--r);
  outline: 1.5px solid var(--keyline);
  outline-offset: calc(-5 * var(--u));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.orb { position: relative; height: calc(26 * var(--u)); }
.orb.life { grid-area: life; --bar: #c4302a; }
.orb.mana { grid-area: mana; --bar: #6f55cf; }
.orb-disc { position: absolute; inset: 0; overflow: hidden; background: var(--deep); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--rule); }
.orb-disc::before {
  content: "Life";
  position: absolute;
  z-index: 2;
  left: calc(9 * var(--u));
  top: 50%;
  transform: translateY(-42%);
  font-weight: 700;
  font-size: calc(12.5 * var(--u));
  color: var(--white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.orb.mana .orb-disc::before { content: "Essence"; }
.orb-empty, .orb-surface, .orb-frame { display: none; }
.orb-fill { position: absolute; inset: 0; background: var(--bar); clip-path: inset(0 calc((1 - var(--fill, 1)) * 100%) 0 0); transition: clip-path 0.12s linear; }
.orb.life.low .orb-fill { animation: pulse 0.9s infinite; }
.orb-es { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: calc(4 * var(--u)); background: linear-gradient(90deg, var(--shield) calc(var(--es, 0) * 100%), transparent 0); box-shadow: 0 0 6px rgba(111, 211, 239, 0.5); }
.orb-text { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 2px calc(9 * var(--u)) 0; font-weight: 700; font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums; color: var(--white); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); }
.orb-text b { font-weight: 700; }
.orb-text small { order: -1; color: var(--shield); font-weight: 600; font-size: calc(11.5 * var(--u)); }

.bar-cluster { grid-area: cluster; display: flex; flex-direction: column; align-items: stretch; gap: calc(9 * var(--u)); }
.xp-bar { position: relative; height: calc(5 * var(--u)); min-height: 3px; background: var(--deep); border-radius: 1px; }
.xp-track { position: absolute; inset: 0; overflow: hidden; border-radius: 1px; }
#xp-fill { position: absolute; inset: 0; background: var(--sodium); clip-path: inset(0 calc((1 - var(--v, 0)) * 100%) 0 0); transition: clip-path 0.3s; }
.xp-bar span { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--sodium-hi); text-shadow: 0 1px 2px #000; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
#hud .xp-bar { pointer-events: auto; }
.xp-bar:hover span { opacity: 1; }
.actions { display: flex; gap: calc(10 * var(--u)); align-items: flex-end; }

/* flasks: narrow tiles filled to their charges */
.flasks { display: flex; gap: calc(5 * var(--u)); padding-right: calc(10 * var(--u)); border-right: 1.5px solid var(--rule); }
.flask { position: relative; width: calc(34 * var(--u)); height: var(--slot); overflow: hidden; background: var(--deep); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--rule); --liquid: #c4302a; }
.flask.mana { --liquid: #6f55cf; }
.flask-empty { display: none; }
.flask-fill { position: absolute; inset: 0; background: var(--liquid); clip-path: inset(calc((1 - var(--fill, 1)) * 100%) 0 0 0); transition: clip-path 0.2s; }
.flask.empty .flask-fill { opacity: 0; }
/* what it is: a bandage, a candle */
.flask::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 40%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.85);
  -webkit-mask: var(--pict) center / contain no-repeat;
  mask: var(--pict) center / contain no-repeat;
  pointer-events: none;
}
.flask.life { --pict: url("assets/ui/marks/pict-bandage.svg"); }
.flask.mana { --pict: url("assets/ui/marks/pict-candle.svg"); }
.flask.empty::after { opacity: 0.35; }
.flask kbd { position: absolute; z-index: 1; left: 3px; top: 3px; font-size: calc(9.5 * var(--u)); min-width: 0; padding: 0.1em 0.3em 0; }
.flask .charges { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(4 * var(--u)); text-align: center; font-weight: 800; font-size: calc(14 * var(--u)); color: #fff; text-shadow: 0 1px 2px #000; }

/* skill tiles: the icon, its key, its level; the strip under it is the skill's line colour and
   fills with its experience */
.skillbar { display: flex; gap: calc(5 * var(--u)); }
.slot { position: relative; width: var(--slot); aspect-ratio: 1; background: var(--deep); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--rule); cursor: help; }
.slot .icon, .slot .glyph, .slot .cd, .slot .cd-text, .slot::after { position: absolute; inset: 0; border-radius: 2px; }
.slot .icon { background: var(--icon, none) center / cover no-repeat; transition: filter 0.15s; }
.slot .glyph { display: grid; place-items: center; font-size: calc(26 * var(--u)); line-height: 1; color: var(--sc, var(--white)); }
.slot.has-icon .glyph { display: none; }
.slot .cd { background: conic-gradient(rgba(7, 11, 16, 0.78) calc(var(--cd, 0) * 1turn), transparent 0); }
.slot.cooling .icon { filter: brightness(0.75) saturate(0.7); }
.slot .cd-text { display: grid; place-items: center; font-weight: 800; font-size: calc(17 * var(--u)); color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-variant-numeric: tabular-nums; }
.slot kbd { position: absolute; z-index: 2; right: 2px; bottom: calc(7 * var(--u)); font-size: calc(9.5 * var(--u)); min-width: 0; padding: 0.1em 0.3em 0; background: rgba(7, 11, 16, 0.88); }
.slot::after { content: ""; box-shadow: inset 0 0 0 2px var(--sodium); opacity: 0; transition: opacity 0.1s; pointer-events: none; }
.slot.held::after, .slot.casting::after { opacity: 1; }
.slot.oom .icon { filter: saturate(0.35) brightness(0.55); }
.slot.oom .cd { background: rgba(111, 85, 207, 0.35); }
.slot.locked .icon, .slot.no-gun .icon { filter: grayscale(1) brightness(0.4); }
.slot.no-gun .cd-text { font-size: calc(10 * var(--u)); color: var(--muted); }
.slot.locked .cd-text { font-size: calc(12 * var(--u)); color: var(--muted); }
.slot.locked .glyph { opacity: 0.25; }
.slot.empty { cursor: default; }
.slot .slot-lvl { position: absolute; z-index: 2; left: 2px; top: 2px; min-width: 0; padding: 1px 4px 0; display: none; font-weight: 800; font-size: calc(10 * var(--u)); line-height: 1.3; color: var(--white); background: rgba(7, 11, 16, 0.88); border-radius: 2px; pointer-events: none; }
.slot.has-xp .slot-lvl { display: block; }
.slot.has-points .slot-lvl { color: #1c1306; background: var(--sodium); }
.slot .slot-xp { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(4 * var(--u)); min-height: 3px; display: none; overflow: hidden; background: color-mix(in srgb, var(--sc, var(--white)) 26%, var(--deep)); border-radius: 0 0 2px 2px; pointer-events: none; }
.slot.has-xp .slot-xp { display: block; }
.slot .slot-xp i, .sk-xp i { position: absolute; inset: 0; background: var(--sc, var(--sodium)); clip-path: inset(0 calc((1 - var(--v, 0)) * 100%) 0 0); transition: clip-path 0.3s; }
.slot.xp-max .slot-xp i { background: var(--sc, var(--sodium)); }

/* ------------------------------------------------------------------ tooltips and item cards */
/* An information panel: the rarity's colour as the band across the top. */

.tooltip {
  position: fixed;
  z-index: 60;
  max-width: 340px;
  min-width: 220px;
  padding: 4px 0 9px;
  font-size: 0.9rem;
  text-align: left;
  background: rgba(22, 32, 43, 0.97);
  border-radius: var(--r);
  box-shadow: inset 0 4px 0 var(--tc, var(--keyline)), inset 0 0 0 1px var(--rule), 0 14px 34px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.tooltip .tt-head { display: flex; flex-direction: column; padding: 9px 14px 7px; }
.tooltip .tt-name { font-weight: 800; font-size: 1rem; color: var(--tc, var(--white)); }
.tooltip .tt-base { color: var(--tc, var(--white)); opacity: 0.85; }
.tooltip .tt-icon { width: 44px; height: 44px; margin: 0 0 6px; background: var(--icon) center / contain no-repeat; border-radius: 2px; }
.tooltip .tt-line { padding: 2px 14px; color: var(--muted); }
.tooltip .tt-line b { color: var(--white); }
.tooltip .tt-req { padding: 6px 14px 0; color: var(--chalk-hi); font-weight: 600; font-size: 0.84rem; }
.tooltip .tt-mod { padding: 1px 14px; color: var(--magic); }
.tooltip .tt-sep { height: 1px; margin: 7px 14px; background: var(--rule); }
.tooltip .tt-desc { padding: 2px 14px; color: var(--text); }
.tooltip .tt-hint { padding: 5px 14px 0; font-size: 0.8rem; color: var(--faint); }

.tooltip.cards { max-width: none; min-width: 0; padding: 0; background: none; box-shadow: none; }
.ic-row { display: flex; gap: 10px; align-items: flex-start; }
.ic {
  width: 300px;
  padding: 4px 0 9px;
  background: rgba(22, 32, 43, 0.97);
  border-radius: var(--r);
  box-shadow: inset 0 4px 0 var(--tc), inset 0 0 0 1px var(--rule), 0 14px 34px rgba(0, 0, 0, 0.7);
}
.ic + .ic { background: rgba(18, 27, 37, 0.98); }
.ic-title { padding: 8px 14px 0; font-weight: 600; font-size: 0.78rem; color: var(--muted); }
.ic-head { padding: 9px 14px 8px; }
.ic-name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: var(--tc); }
.ic-base { color: var(--tc); opacity: 0.85; font-size: 0.94rem; }
.ic-kind { margin-top: 3px; padding: 0 14px; font-size: 0.82rem; color: var(--muted); }
.ic-props { margin-top: 2px; padding: 0 14px; }
.ic-prop { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.ic-prop b { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-prop b.aug { color: var(--magic); }
.ic-sep { height: 1px; margin: 7px 14px; background: var(--rule); }
.ic-imp { padding: 0 14px; color: #b8c4f0; font-size: 0.9rem; line-height: 1.4; }
.ic-mod { position: relative; padding: 0 44px 0 14px; color: var(--magic); font-size: 0.92rem; line-height: 1.42; }
.ic-tier { position: absolute; right: 14px; top: 1px; font-size: 0.7rem; font-weight: 600; color: var(--faint); }
.ic-flavor { padding: 0 14px; color: #c08a52; font-style: italic; font-size: 0.88rem; }
.ic-req { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0 14px; font-size: 0.82rem; color: var(--muted); }
.ic-req b { color: var(--white); }
.ic-req .bad, .ic-req .bad b { color: var(--chalk-hi); }
.ic-hint { margin-top: 5px; padding: 0 14px; font-size: 0.78rem; color: var(--faint); }

/* ground item labels (Z / Alt): enamel tags with the rarity as their left edge.
   labels.ts sizes them as text + 22px in the same font (keep them in step). */
.loot-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.loot-label {
  position: absolute;
  left: 0;
  top: 0;
  height: 22px;
  padding: 3px 8px 0 6px;
  text-align: center;
  white-space: nowrap;
  font: 600 12.5px/19px var(--sans);
  color: var(--lc, var(--normal));
  background: rgba(12, 19, 27, 0.9);
  border-left: 3px solid var(--lc, var(--normal));
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
.loot-label:hover { background: var(--enamel-2); box-shadow: 0 0 0 1px var(--lc, var(--normal)), 0 2px 8px rgba(0, 0, 0, 0.7); }
.loot-label.r0 { --lc: var(--normal); }
.loot-label.r1 { --lc: var(--magic); }
.loot-label.r2 { --lc: var(--rare); }
.loot-label.r3 { --lc: var(--unique); font-weight: 800; }
.loot-label.coin { --lc: #e8c66a; opacity: 0.92; }

/* speech bubbles over the yard's survivors (station life): an enamel card with a chalk tail */
.speech { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 260px;
  padding: 5px 10px 4px;
  color: var(--text);
  background: var(--enamel-a);
  border-left: 3px solid var(--sodium);
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  font: 600 12.5px/1.3 var(--sans);
  will-change: transform, opacity;
}
.bubble::after {
  content: "";
  position: absolute;
  left: calc(50% - 6px);
  bottom: -6px;
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--enamel-a);
}
.bubble.mine { border-left-color: var(--white); }
.bubble[hidden] { display: none; }
.bubble-name { font-size: 11.5px; font-weight: 800; color: var(--sodium-hi); }
.bubble-name:empty { display: none; }
.bubble-text { white-space: normal; }

/* toasts: announcement strips; the left edge is what kind of news it is */
.toasts { position: absolute; top: calc(30px + 46 * var(--u)); right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.toast {
  display: flex;
  align-items: center;
  min-width: 220px;
  max-width: 360px;
  padding: 8px 14px 6px 12px;
  font-size: 0.92rem;
  color: var(--toast, var(--text));
  background: var(--enamel-a);
  border-left: 4px solid var(--toast, var(--stripe, var(--keyline)));
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.22s ease-out, toast-out 0.6s ease-in forwards;
  animation-delay: 0s, var(--life, 3.4s);
}
.toast .ti { display: none; }
.toast .tt small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--text); }
.toast[data-icon="gold"] { --stripe: var(--sodium); }
.toast[data-icon="levelup"] { --stripe: var(--exit); }
.toast[data-icon="trophy"] { --stripe: var(--essence); }
.toast[data-icon="alert"] { --stripe: var(--chalk); }
.toast.error { --toast: var(--chalk-hi); }
@keyframes toast-in { from { transform: translateX(16px); opacity: 0; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(10px); } }

/* the banner: a platform nameplate dropping into view (zones, floors, levels) */
.banner {
  position: absolute;
  top: 19%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: 90vw;
  padding: 14px 30px 24px;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  color: var(--white);
  background: var(--enamel-a);
  border-radius: var(--r);
  box-shadow: inset 0 -8px 0 var(--line), 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: banner 3.1s ease-out forwards;
}
.banner small { margin-top: 6px; font-weight: 600; font-size: 0.4em; color: var(--muted); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -14px); } 10% { opacity: 1; transform: translate(-50%, 0); } 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* ------------------------------------------------------------------ side boards: inventory, town services */
/* Below the top-right signs, above the bottom board. */

.panel.side {
  position: fixed;
  z-index: 30;
  top: calc(26px + 46 * var(--u));
  right: 12px;
  bottom: calc(124 * var(--u) + 18px);
  width: min(460px, 94vw);
  padding: 20px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.panel.side > * + * { margin-top: 12px; }
.panel.side.left { right: auto; left: 12px; }
#panel-inventory { --line: var(--sodium); }
#panel-stash { --line: var(--white); }
#panel-vendor { --line: var(--sodium); }
#panel-occultist { --line: var(--essence); }

.char-summary { color: var(--muted); font-size: 0.95rem; }
.char-summary b { font-weight: 800; }

.paperdoll {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* explicit rows: the middle row only holds spanning items and would collapse otherwise */
  grid-template-rows: repeat(4, 54px);
  grid-template-areas:
    "weapon helmet amulet offhand"
    "weapon body body offhand"
    "gloves body body boots"
    "ring1 belt belt ring2";
  gap: 6px;
  padding: 10px;
  background: var(--deep);
  border-radius: 3px;
}
.eq-slot { position: relative; min-height: 0; display: grid; place-items: center; background: rgba(22, 32, 43, 0.6); border: 1.5px solid var(--rule); border-radius: 2px; cursor: pointer; }
.eq-slot .label { position: absolute; left: 5px; bottom: 2px; font-weight: 600; font-size: 0.64rem; color: var(--faint); }
.eq-slot .ig { font-size: 24px; }
.eq-slot .ia { inset: 10% 10% 18%; }
.eq-slot.filled { border-color: var(--ic, var(--keyline)); background: color-mix(in srgb, var(--ic, #000) 9%, #121b25); }
.eq-slot.fits { border-color: var(--exit); background: rgba(61, 190, 122, 0.14); }
.eq-slot.lifted .ig, .eq-slot.lifted .ia { opacity: 0.22; }

.inv-grid {
  display: grid;
  /* minmax(0, …): an item's content never widens its columns (cells stay square) */
  grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), auto);
  gap: 2px;
  padding: 6px;
  background: var(--deep);
  border-radius: 3px;
  user-select: none;
}
.inv-cell { aspect-ratio: 1; background: rgba(22, 32, 43, 0.55); border-radius: 1px; }
/* Items sit on the same grid lines as the cells and span their w × h footprint. */
.inv-item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--ic, #000) 10%, #121b25);
  border: 1.5px solid color-mix(in srgb, var(--ic, var(--faint)) 60%, transparent);
  border-radius: 2px;
}
.inv-item.r-magic, .inv-item.r-rare, .inv-item.r-unique { border-width: 2px; border-color: var(--ic); }
.inv-item:hover, .eq-slot.filled:hover { border-color: var(--white); }
.inv-item.lifted { opacity: 0.22; }
/* painted icon (turns with the item; square tiles stay centred) */
.ia { position: absolute; inset: 6%; background: center / contain no-repeat; pointer-events: none; }
.ia.rot { transform: rotate(90deg); }
.inv-item .qty { position: absolute; z-index: 1; top: 2px; left: 4px; font-weight: 800; font-size: 11px; color: var(--white); text-shadow: 0 1px 1px #000; }
.ig { color: var(--ic, var(--normal)); }
.ig.rot { display: inline-block; transform: rotate(90deg); }
#panel-inventory.holding .inv-item, #panel-inventory.holding .inv-cell { cursor: url("assets/cursor/arrow.svg") 3 2, default; }
/* placement preview under the cursor while holding: free, swap, blocked */
.inv-preview { z-index: 2; pointer-events: none; border: 2px solid; border-radius: 2px; }
.inv-preview.ok { border-color: var(--exit); background: rgba(61, 190, 122, 0.2); }
.inv-preview.swap { border-color: var(--sodium); background: rgba(240, 160, 48, 0.2); }
.inv-preview.bad { border-color: var(--chalk); background: rgba(217, 58, 43, 0.24); }
/* the held item, following the cursor (fixed, outside the panel's overflow) */
.inv-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ic, #000) 14%, rgba(18, 27, 37, 0.9));
  border: 2px solid var(--ic, var(--keyline));
  border-radius: 2px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
}
.inv-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-height: 960px) { .paperdoll { grid-template-rows: repeat(4, 46px); } }
.gold { flex: none; font-weight: 800; color: var(--sodium-hi); font-variant-numeric: tabular-nums; }
.gold::after { content: " scrip"; font-weight: 600; color: var(--muted); }
.stats-box summary { cursor: pointer; font-weight: 800; color: var(--white); }
.stat-list { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 8px 2px; font-size: 0.92rem; }
.stat-list span:nth-child(odd) { color: var(--muted); }
.stat-list span:nth-child(even) { color: var(--white); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.svc-sub { font-style: italic; margin-top: 8px; }
.svc-h { margin: 0; font-weight: 800; font-size: 1rem; color: var(--white); }
.stash-tabs { display: flex; }
.stash-tab { min-width: 52px; padding: 7px 12px 5px; font-weight: 700; color: var(--muted); background: var(--deep); border: 1.5px solid var(--rule); cursor: pointer; }
.stash-tab:first-child { border-radius: 3px 0 0 3px; }
.stash-tab:last-child { border-radius: 0 3px 3px 0; }
.stash-tab + .stash-tab { border-left: none; }
.stash-tab small { color: var(--faint); font-size: 0.74rem; }
.stash-tab:hover { color: var(--white); }
.stash-tab.active { color: #1c1306; background: var(--sodium); border-color: var(--sodium); }
.stash-tab.active small { color: #4a3410; }
#panel-stash.holding .inv-item, #panel-stash .inv-grid:hover .inv-cell { cursor: pointer; }
/* stock and buyback use the backpack grid; services.ts packs the items */
.inv-item.vend .price { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2px 2px 0; font-weight: 700; font-size: 10px; line-height: 1.25; text-align: center; color: var(--sodium-hi); background: rgba(7, 11, 16, 0.85); }
.inv-item.vend .price.dear { color: var(--chalk-hi); }
.inv-item.vend.sold { opacity: 0.35; cursor: default; }
.inv-item.vend.sold .price { color: var(--muted); }
/* holding a backpack item: the Quartermaster's window takes it (sell) */
#panel-inventory.holding ~ #panel-vendor .vendor-stock { outline: 2px dashed var(--sodium); outline-offset: 2px; }
.occ-slot { display: grid; place-items: center; min-height: 132px; padding: 10px; text-align: center; color: var(--muted); background: var(--deep); border: 1.5px dashed rgba(140, 111, 230, 0.6); border-radius: 3px; cursor: pointer; }
.occ-slot.filled { border-style: solid; border-color: var(--essence); }
.occ-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.occ-action { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 9px 10px 7px; white-space: normal; text-align: left; }
.occ-action b { font-weight: 800; }
.occ-action span { color: var(--sodium-hi); font-weight: 700; font-size: 0.9rem; }
.occ-action em { color: var(--muted); font-style: normal; font-weight: 400; font-size: 0.8rem; line-height: 1.2; }
.occ-action:disabled { opacity: 0.55; cursor: not-allowed; }
.occ-card { display: flex; justify-content: center; }
.occ-card .ic { width: 100%; max-width: 340px; }

/* ------------------------------------------------------------------ factions: envoys, bounty boards, the sheet's line */
/* Each faction runs on its own line (--fx): the strip under its boards' nameplate, its bullet
 * (the line's letter on a disc, like a metro line bullet), its bars and its rank ladder. */

[data-faction="iron"] { --fx: var(--f-iron); }
[data-faction="ashen"] { --fx: var(--f-ashen); }
[data-faction="veiled"] { --fx: var(--f-veiled); }
.panel.fx { --line: var(--fx, var(--white)); }
.fx-bullet {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  padding-top: 0.14em;
  border-radius: 50%;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--fx, var(--faint));
  box-shadow: 0 0 0 1.5px rgba(7, 11, 16, 0.6);
}
.fx-plate { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.fx-plate .fx-bullet { font-size: 1.15rem; }
.fx-name { display: flex; flex-direction: column; min-width: 0; }
.fx-name .title-sm { overflow-wrap: anywhere; }
.fx-name small { margin-top: 3px; font-weight: 600; font-size: 0.84rem; color: var(--muted); }
.fx-body { display: flex; flex-direction: column; gap: 12px; }
.fx-body p { margin: 0; }
.fx-body .svc-sub { margin-top: 2px; }

/* the envoy: creed, the envoy's word, your standing, the ranks, the stock */
.fx-creed { padding: 1px 0 2px 12px; border-left: 3px solid var(--fx); }
.fx-belief { font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: var(--white); }
.fx-creed .fx-favour { margin-top: 4px; }
.fx-envoy b { font-weight: 800; }
.fx-standing { padding: 10px 12px 9px; background: var(--deep); border-radius: 3px; }
.fx-st-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fx-st-title { font-weight: 800; font-size: 1.1rem; }
.fx-track { position: relative; height: 8px; margin: 7px 0 6px; overflow: hidden; background: rgba(230, 226, 214, 0.08); border-radius: 1px; }
.fx-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0)); background: var(--fx, var(--sodium)); }
.fx-st-nums { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-st-nums b { color: var(--white); font-weight: 700; }
.fx-st-nums .fx-max { color: var(--fx); font-weight: 800; }
.fx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fx-h span { font-weight: 600; text-align: right; }
.fx-hint { margin-top: -4px !important; }
.fx-foot .grow { line-height: 1.3; }

/* the ranks as stops on the line: solid where you've been, faint ahead; a stop is 14px down */
.fx-ladder { list-style: none; margin: 0; padding: 0; }
.fx-stop { position: relative; display: grid; grid-template-columns: 22px 112px minmax(0, 1fr) 36px; align-items: start; column-gap: 10px; padding: 4px 8px 4px 4px; border-radius: 3px; }
.fx-stop::before, .fx-stop::after { content: ""; position: absolute; left: 13px; width: 4px; background: rgba(230, 226, 214, 0.16); }
.fx-stop::before { top: 0; height: 14px; }
.fx-stop::after { top: 14px; bottom: 0; }
.fx-stop:first-child::before, .fx-stop:last-child::after { display: none; }
.fx-stop.got::before, .fx-stop.got:not(.here)::after { background: var(--fx); }
.fx-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 3px auto 0; background: var(--enamel); border: 3px solid rgba(230, 226, 214, 0.28); border-radius: 50%; }
.fx-stop.got .fx-dot { background: var(--white); border-color: var(--fx); }
.fx-stop.here { background: color-mix(in srgb, var(--fx) 14%, transparent); }
.fx-stop.here .fx-dot { width: 18px; height: 18px; margin-top: 1px; border-width: 4px; }
.fx-stop-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding-top: 1px; font-size: 0.95rem; line-height: 1.25; }
.fx-stop-name b { font-weight: 800; color: var(--muted); }
.fx-stop.got .fx-stop-name b { color: var(--white); }
.fx-you { padding: 2px 6px 0; font-style: normal; font-weight: 800; font-size: 0.7rem; line-height: 1.3; color: #fff; background: var(--fx); border-radius: 2px; }
.fx-perks { display: flex; flex-direction: column; padding-top: 3px; font-size: 0.8rem; line-height: 1.25; color: var(--faint); }
.fx-stop.got .fx-perks { color: var(--text); }
.fx-at { padding-top: 3px; font-size: 0.8rem; line-height: 1.25; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.fx-stop.got .fx-at { color: var(--muted); }

/* join, switch, leave: a question asked in the panel, struck in chalk */
.fx-join { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; background: var(--deep); border-radius: 3px; }
.fx-join .btn { white-space: normal; text-align: left; }
.fx-sworn .fx-bullet { margin-right: 7px; font-size: 0.7rem; vertical-align: 0.1em; }
.fx-confirm { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 11px 12px 12px; background: rgba(217, 58, 43, 0.1); border: 1.5px solid rgba(217, 58, 43, 0.5); border-left: 5px solid var(--chalk); border-radius: 3px; }
.fx-confirm b { color: var(--chalk-hi); }
.fx-confirm .btn { white-space: normal; text-align: left; }

/* the stock: the Quartermaster's shelf; pieces above your rank are greyed with the rank they need */
.inv-item.vend.locked { cursor: not-allowed; background: #10171f; border-color: var(--rule); }
.inv-item.vend.locked .ia, .inv-item.vend.locked .ig { filter: grayscale(1) brightness(0.5); }
.inv-item.vend .price.rank { display: flex; flex-direction: column; padding-bottom: 1px; font-weight: 600; line-height: 1.15; color: var(--muted); }
.inv-item.vend .price.rank b { font-weight: 800; color: var(--text); }
.inv-item.vend .price.rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the board: notices on the faction's line, your bounties with their progress */
.fx-note { padding: 9px 12px 8px; color: var(--text); background: var(--deep); border-left: 4px solid var(--fx); border-radius: 3px; }
.fx-full { color: var(--sodium-hi); }
.fx-bounty { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 9px; background: rgba(12, 19, 27, 0.72); border: 1.5px solid var(--rule); border-left: 5px solid var(--fx); border-radius: 3px; }
.fx-bounty.active, .fx-bounty.done { border-left-color: var(--rule); }
.fx-bounty.done > :not(.fx-b-head), .fx-bounty.done .fx-b-title { opacity: 0.55; }
.fx-bounty.complete { border-left-color: var(--exit); }
.fx-b-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.fx-bounty .btn.small { padding: 5px 11px 3px; }
#panel-board .fx-body { gap: 10px; }
.fx-b-title { min-width: 0; font-weight: 800; color: var(--white); }
.fx-b-btns { flex: none; display: flex; gap: 6px; }
.fx-b-task { font-size: 0.92rem; color: var(--text); }
.fx-bounty.slim { padding: 4px 10px 4px 12px; }
.fx-bounty.slim .fx-b-title { flex: none; }
.fx-bounty.slim .fx-b-task { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--muted); }
.fx-age { margin-left: 8px; font-style: normal; font-weight: 600; font-size: 0.76rem; color: var(--sodium-hi); }
.fx-state { flex: none; padding: 3px 8px 1px; font-weight: 700; font-size: 0.8rem; color: var(--muted); border: 1.5px solid var(--rule); border-radius: 2px; }
.fx-state.done { color: var(--exit); border-color: rgba(61, 190, 122, 0.45); }
.fx-b-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.fx-reward { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-r-standing { font-weight: 700; color: var(--white); }
.fx-r-scrip { font-weight: 700; color: var(--sodium-hi); }
.fx-r-item { font-weight: 700; color: var(--ic, var(--normal)); }
.fx-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 1px; }
.fx-progress .fx-track { flex: 1; height: 7px; margin: 0; }
.fx-count { flex: none; min-width: 64px; text-align: right; font-weight: 700; font-size: 0.85rem; color: var(--white); font-variant-numeric: tabular-nums; }
.fx-bounty.complete .fx-fill { background: var(--exit); }
.fx-bounty.complete .fx-count { color: var(--exit); }

/* the sheet's faction line, under the name */
.char-faction { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.9rem; }
.char-faction .fx-bullet { font-size: 0.7rem; }
.cf-name { font-weight: 800; color: var(--white); }
.cf-title { padding: 2px 6px 0; font-weight: 600; font-size: 0.82rem; color: var(--text); border: 1.5px solid var(--fx); border-radius: 2px; }
.cf-standing { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-standing b { font-weight: 700; color: var(--white); }

/* ------------------------------------------------------------------ big boards: skill tree, passive tree, instances */

.panel.modal { position: fixed; z-index: 35; inset: 5vh 4vw; padding: 20px 24px; display: flex; flex-direction: column; }
.panel.modal > * + * { margin-top: 0; }
#panel-skills { inset: 6vh 8vw; overflow: hidden; --line: var(--essence); }
#panel-passives { --line: var(--exit); }
.tree-wrap { position: relative; flex: 1; margin-top: 14px; background: var(--deep); border-radius: 3px; overflow: hidden; }
#panel-passives .panel-head { flex-wrap: wrap; row-gap: 10px; }
/* search: matches get an amber ring on the canvas, the rest of the tree dims */
.tree-search { position: relative; display: flex; align-items: center; gap: 12px; margin-left: 12px; }
.tree-search::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--muted);
  -webkit-mask: url("assets/ui/marks/pict-search.svg") center / contain no-repeat;
  mask: url("assets/ui/marks/pict-search.svg") center / contain no-repeat;
  pointer-events: none;
}
.tree-search:focus-within::before { background: var(--sodium); }
.tree-search input { width: min(300px, 32vw); height: 38px; padding: 9px 12px 7px 36px; font-size: 0.95rem; }
.tree-search input::-webkit-search-cancel-button { filter: invert(0.7); }
#tree-search-count { min-width: 7em; color: var(--sodium-hi); font-weight: 700; white-space: nowrap; }
#tree-search-count.none { color: var(--chalk-hi); }
/* the relic picker, beside the socket it was opened on */
.relic-picker {
  position: absolute;
  z-index: 3;
  width: 300px;
  max-height: min(420px, 80%);
  overflow-y: auto;
  padding: 12px 12px 10px;
  background: var(--enamel-a);
  border-radius: var(--r);
  box-shadow: inset 0 4px 0 var(--chalk), inset 0 0 0 1px var(--rule), 0 14px 34px rgba(0, 0, 0, 0.7);
}
.rp-title { margin: 2px 2px 8px; font-weight: 800; color: var(--white); }
.rp-empty { margin: 0 2px 6px; color: var(--muted); font-size: 0.88rem; }
.rp-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; margin-top: 4px; padding: 6px 8px 5px; text-align: left; background: var(--deep); border: 1.5px solid var(--rule); border-radius: 3px; cursor: pointer; }
.rp-row:hover, .rp-row:focus-visible { border-color: var(--sodium); background: #101a24; }
.rp-icon { flex: none; width: 36px; height: 36px; background: center / contain no-repeat; border-radius: 2px; }
.rp-text { display: flex; flex-direction: column; min-width: 0; }
.rp-text b { font-weight: 800; font-size: 0.92rem; }
.rp-text small { color: var(--magic); font-size: 0.78rem; line-height: 1.35; }
.rp-out { width: 100%; margin-top: 8px; }
#tree-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#tree-canvas.dragging { cursor: grabbing; }
.tree-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 96%; padding: 4px 10px 2px; text-align: center; background: rgba(7, 11, 16, 0.82); border-radius: 2px; pointer-events: none; }

.sk-bar { display: flex; justify-content: center; gap: 6px; margin-top: 16px; padding-bottom: 6px; }
.sk-bar .slot { --slot: 58px; cursor: pointer; border: 0; padding: 0; }
.sk-bar .slot.selected::after { opacity: 1; }
.sk-bar .slot:last-child { margin-left: 14px; }
.sk-hint { text-align: center; margin-top: 8px; }
.sk-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 12px; }
.sk-tab { padding: 8px 14px 6px; font-weight: 700; font-size: 0.92rem; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid var(--rule); cursor: pointer; }
.sk-tab:hover { color: var(--white); }
.sk-tab.active { color: var(--white); border-bottom-color: var(--essence); }
.sk-tab small { margin-left: 6px; font-weight: 600; color: var(--faint); }
.sk-book { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 514px); justify-content: center; align-content: start; gap: 10px 16px; margin-top: 14px; padding: 4px; }
.sk-branch { position: relative; width: 512px; background: var(--deep); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); }
.sk-branch.locked { opacity: 0.6; }
.sk-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sk-lines path { fill: none; stroke: rgba(230, 226, 214, 0.16); stroke-width: 2.5; }
.sk-lines path.on { stroke: var(--sodium); stroke-width: 3; }
.sk-node { position: absolute; padding: 0; border: 0; transform: translate(-50%, -50%); cursor: pointer; }
.sk-root { width: 52px; height: 52px; background: var(--enamel); border: 1.5px solid var(--keyline); border-radius: 2px; }
.sk-root:hover:not(:disabled) { border-color: var(--white); }
.sk-root.on-bar { border: 2px solid var(--sodium); }
.sk-root:disabled { cursor: default; }
.sk-root:disabled .sk-icon { filter: grayscale(1) brightness(0.45); }
.sk-icon { width: 100%; height: 100%; display: grid; place-items: center; font-size: 22px; color: var(--white); background: var(--icon, none) center / contain no-repeat; }
.sk-at { position: absolute; top: -10px; right: -12px; padding: 1px 4px 0; font-weight: 700; font-size: 0.64rem; color: var(--white); background: var(--deep); border-radius: 2px; }
.sk-name { position: absolute; width: 104px; transform: translateX(-50%); text-align: center; line-height: 1.15; pointer-events: none; }
.sk-name b { display: block; font-weight: 800; font-size: 0.78rem; color: var(--white); }
.sk-name small { font-size: 0.7rem; color: var(--muted); }
.sk-branch.locked .sk-name small { color: var(--chalk-hi); }
.sk-mod { width: 40px; height: 40px; display: grid; place-items: center; padding-top: 2px; border-radius: 50%; font-weight: 800; font-size: 0.62rem; color: var(--faint); background: var(--enamel); border: 2px solid var(--rule); transition: background 0.12s, border-color 0.12s; }
.sk-mod.major { width: 48px; height: 48px; border-radius: 3px; transform: translate(-50%, -50%) rotate(45deg); }
.sk-mod.major span { transform: rotate(-45deg); font-size: 0.66rem; }
.sk-mod.available { color: var(--white); border-color: var(--sodium); animation: sk-pulse 1.6s ease-in-out infinite; }
.sk-mod.learned { color: #1c1306; background: var(--sodium); border-color: var(--sodium); }
.sk-mod.dim { opacity: 0.5; cursor: default; }
.sk-mod:hover { border-color: var(--white); }
@keyframes sk-pulse { 50% { box-shadow: 0 0 0 4px rgba(240, 160, 48, 0.25); } }
.sk-lvl { position: absolute; left: -9px; top: -9px; min-width: 18px; height: 17px; padding: 2px 4px 0; display: grid; place-items: center; font-weight: 800; font-size: 0.64rem; color: var(--white); background: var(--deep); border: 1px solid var(--keyline); border-radius: 2px; }
.sk-lvl.max { color: #1c1306; background: var(--sodium); border-color: var(--sodium); }
/* unspent points on a branch: the count, ringed in chalk */
.sk-pts { position: absolute; right: -18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; padding-top: 2px; font-weight: 800; font-size: 0.7rem; color: #fff; text-shadow: 0 1px 2px #000; isolation: isolate; }
.sk-pts::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--chalk); -webkit-mask: var(--ring) center / contain no-repeat; mask: var(--ring) center / contain no-repeat; }
.sk-prog { position: absolute; width: 52px; padding: 2px 0; transform: translateX(-50%); cursor: help; }
.sk-xp { position: relative; width: 100%; height: 5px; overflow: hidden; background: rgba(230, 226, 214, 0.1); border-radius: 1px; }
/* off the bar: the skill keeps its experience but gains none */
.sk-prog:not(.on-bar):not(.max) .sk-xp i { filter: grayscale(0.8) brightness(0.7); }
@media (max-width: 900px) { #panel-skills { inset: 3vh 3vw; } .sk-book { grid-template-columns: 1fr; } }

#panel-instances { left: 50%; right: auto; top: 14vh; bottom: auto; transform: translateX(-50%); width: min(480px, 94vw); max-height: 72vh; }
.inst-zone { margin: 14px 0 10px; font-weight: 800; font-size: 1.05rem; color: var(--white); }
.inst-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 60px; }
.inst-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 6px; background: var(--deep); border: 1.5px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 3px; }
.inst-row.here { border-left-color: var(--sodium); }
.inst-name { font-weight: 700; color: var(--white); }
.inst-tag { margin-left: 8px; padding: 2px 5px 0; font-weight: 700; font-size: 0.7rem; color: #1c1306; background: var(--sodium); border-radius: 2px; }
.inst-info { color: var(--muted); font-size: 0.85rem; }
.inst-row .btn[disabled] { opacity: 0.55; cursor: default; }
.inst-empty { text-align: center; padding: 10px; }
.inst-actions { justify-content: center; margin-top: 14px; }
.inst-hint { text-align: center; margin-top: 10px; }

/* the Esc menu and the connection screen */
#panel-menu > .panel { --line: var(--white); }

/* ------------------------------------------------------------------ death: the sigil, chalked big */

.screen.death { z-index: 45; background: radial-gradient(ellipse at 50% 45%, rgba(70, 10, 8, 0.5), rgba(5, 4, 4, 0.94) 70%); animation: fade-in 0.8s ease-out; }
.death-box { display: flex; flex-direction: column; align-items: center; text-align: center; }
.death-box::before {
  content: "";
  width: min(40vmin, 320px);
  aspect-ratio: 1;
  margin-bottom: 18px;
  background: var(--chalk);
  -webkit-mask: var(--sigil) center / contain no-repeat;
  mask: var(--sigil) center / contain no-repeat;
  animation: fade-in 1.6s ease-out;
}
.death-box h2 { margin: 0 0 8px; font-weight: 800; font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1; color: var(--white); }
.death-box p { margin: 0; max-width: 32em; }
.death-box .btn { margin-top: 24px; padding: 12px 34px 10px; font-size: 1.1rem; }

/* ------------------------------------------------------------------ perf overlay (F3, developers) */

.perf { position: fixed; z-index: 50; top: 120px; left: 12px; min-width: 300px; padding: 8px 10px; background: rgba(7, 11, 16, 0.86); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); font-family: var(--mono); font-size: 11.5px; color: #c8d0c0; pointer-events: auto; }
.perf-head { display: flex; justify-content: space-between; color: var(--exit); margin-bottom: 4px; }
.perf-head span { color: var(--sodium-hi); }
.perf pre { margin: 0; font: inherit; line-height: 1.4; white-space: pre; }
.perf .warn { color: var(--sodium-hi); }
.perf .bad { color: var(--chalk-hi); }
.perf-actions { margin-top: 6px; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 900px) { .panel { padding: 18px 16px; } }
@media (max-width: 720px) {
  /* the bottom board scales with the viewport width */
  :root { --slot: 8.2vw; }
  .hud-bottom { bottom: 4px; padding: 1.4vw 1.6vw; gap: 0.8vw 1vw; }
  .orb { height: 4.4vw; }
  .orb-disc::before, .orb-text { font-size: 2.4vw; }
  .orb-text small { display: none; }
  .actions { gap: 1.2vw; }
  .skillbar, .flasks { gap: 0.6vw; }
  .flasks { padding-right: 1.2vw; }
  .flask { width: 5vw; }
  .slot .glyph { font-size: 4vw; }
  .slot .cd-text { font-size: 3vw; }
  .slot kbd, .flask kbd, .slot .slot-lvl { display: none; }
  .zone-plate { min-width: 0; font-size: 0.92rem; padding: 6px 10px 11px; }
  .zone-plate small { font-size: 0.72rem; }
  #hud-level { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .minimap { top: 62px; width: 36vw; }
  #hud.has-minimap .toasts { top: calc(72px + 30vw); }
  /* under the nameplate, clear of the map */
  .target-frame { top: 96px; left: 12px; width: 44vw; transform: none; text-align: left; }
  .target-name { font-size: 0.8rem; }
  .toasts { top: 64px; }
  .toast { font-size: 0.85rem; min-width: 0; }
  .panel.side { top: 62px; bottom: calc(26vw + 12px); }
}

/* ------------------------------------------------------------------ legal pages (privacy.html, terms.html) */

html:has(body.legal), body.legal { height: auto; overflow: auto; user-select: text; background: var(--void); }
.legal-page { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; line-height: 1.6; }
.legal-page h1 { margin: 0.4rem 0; font-weight: 800; font-size: 2rem; color: var(--white); }
.legal-page h1::after { content: ""; display: block; height: 5px; margin-top: 10px; background: var(--exit); }
.legal-page h2 { margin: 2rem 0 0.5rem; font-weight: 800; font-size: 1.15rem; color: var(--white); }
.legal-page a { color: var(--sodium-hi); }
.legal-page ul { padding-left: 1.3rem; }
.legal-page li { margin: 0.35rem 0; }
.legal-page mark { background: rgba(240, 160, 48, 0.25); color: var(--sodium-hi); padding: 0 0.25em; border-radius: 2px; }
.legal-draft { padding: 0.6rem 0.8rem; font-size: 0.9rem; background: rgba(217, 58, 43, 0.12); border-left: 4px solid var(--chalk); border-radius: 2px; }
@media (max-width: 600px) {
  .menu-foot { flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; }
  .menu-foot .caps { display: none; }
}