/* ==========================================================================
   SHIP INTERFACE (Alliance Fleet) — prototype (project: Nexus Exodus / NEX)
   In-universe UI chrome: English (Bebas Neue). Content & Fate terms: Russian.
   ========================================================================== */

/* Oswald's capital У / Ў hang below the baseline like a lowercase letter; these tiny fonts hold only those two letters
   with the body lifted onto the baseline (tools/fonts/oswald_u.py) and come first in every stack that uses Oswald */
@font-face { font-family: 'NEX U'; src: url(fonts/oswald-u-400.woff) format('woff'); font-weight: 100 449; unicode-range: U+0423, U+040E; font-display: block; }
@font-face { font-family: 'NEX U'; src: url(fonts/oswald-u-500.woff) format('woff'); font-weight: 450 549; unicode-range: U+0423, U+040E; font-display: block; }
@font-face { font-family: 'NEX U'; src: url(fonts/oswald-u-600.woff) format('woff'); font-weight: 550 900; unicode-range: U+0423, U+040E; font-display: block; }
/* Bebas Neue's Cyrillic (Dharma Type's Bold = the weight of the classic Bebas, from the GM's Windows fonts; only U+0400–04FF): used where a label must stay Bebas in Russian */
@font-face { font-family: 'Bebas Neue Cyr'; src: url(fonts/bebas-cyr-400.woff) format('woff'); font-weight: 400; unicode-range: U+0400-04FF, U+2116; font-display: swap; }

:root {
  /* surfaces */
  --bg-0: #02050a;
  --bg-1: #050c17;
  --fill-top: #0b1c30;
  --fill-bot: #050e1a;

  /* lines */
  --line: rgba(86, 190, 255, 0.16);
  --line-2: rgba(86, 190, 255, 0.42);

  /* signal colours — one job each */
  --cyan: #4cc9ff;      /* interactive, primary data */
  --cyan-hi: #a3e6ff;   /* active / hover text */
  --amber: #ff9a3c;     /* attention: trouble, restricted, missing pages */
  --red: #ff3d55;       /* unread, damage */
  --green: #3fe0a0;     /* valid / online */
  --gold: #e8b84a;      /* rank pips */

  /* departments = player colour = uniform colour */
  --d-cmd: #4f8dff;
  --d-ops: #ff9d3a;
  --d-eng: #ffc277;
  --d-sec: #ff5a5f;
  --d-sci: #c9d3dc;
  --d-med: #4fd18b;
  --dept: var(--d-cmd);
  --gm: #a98bff;          /* game master role colour */

  /* text */
  --text: #d6e7f5;
  --text-2: #93abc0;
  --text-3: #5f7a93;

  /* type */
  --f-label: 'Bebas Neue', 'Bebas Neue Cyr', 'NEX U', 'Oswald', sans-serif;   /* Bebas has Cyrillic now (GM 2026-10-23) */
  --f-head: 'NEX U', 'Oswald', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --cut: 14px;
  --topbar-h: 60px;
  --rail-w: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 15px/1.6 var(--f-body);
  background-color: var(--bg-0);
  background-image:
    repeating-linear-gradient(180deg, rgba(150, 210, 255, 0.022) 0 1px, transparent 1px 3px), /* monitor lines */
    radial-gradient(1200px 600px at 78% -12%, rgba(30, 100, 190, 0.34), transparent 65%),
    radial-gradient(900px 500px at -10% 110%, rgba(20, 70, 140, 0.26), transparent 60%),
    linear-gradient(165deg, #071428 0%, #040a14 45%, #02050a 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* one background pattern per screen: hexagons (archive, crew, log) or grid (codex) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.bg-hex::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 15L52 30V60L26 75L0 60V30Z M26 0V15 M26 75V90' fill='none' stroke='%234cc9ff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 52px 90px;
  opacity: 0.1;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 92% 8%, #000, transparent 70%), radial-gradient(ellipse 45% 50% at 4% 98%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 55% 60% at 92% 8%, #000, transparent 70%), radial-gradient(ellipse 45% 50% at 4% 98%, #000, transparent 70%);
}
body.bg-grid::before {
  background-image:
    linear-gradient(rgba(76, 201, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 201, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(76, 201, 255, 0.35); color: #fff; }

/* ---------- type ---------- */
.lbl {
  font-family: var(--f-label);
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-3);
  text-transform: uppercase;
}
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-2); }
.sample { font: 500 10px var(--f-mono); letter-spacing: 0.08em; color: var(--amber); border: 1px dashed rgba(255, 154, 60, 0.55); padding: 1px 6px; vertical-align: 2px; }

.h-sect {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--f-label);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--cyan-hi);
}
.h-sect::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.h-sect .mono { font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; }

/* ---------- panels: 1px frame, chamfered corners ---------- */
.panel {
  --pad: 20px;
  position: relative;
  isolation: isolate;
  padding: var(--pad);
  background: var(--line-2);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: linear-gradient(180deg, var(--fill-top), var(--fill-bot));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.panel.tight { --pad: 16px; --cut: 10px; }

.panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 16px;
  padding: 11px var(--pad) 10px calc(var(--pad) + 6px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(76, 201, 255, 0.11), transparent 70%);
}
.panel-h .lbl { color: var(--cyan-hi); font-size: 15px; }

/* glow line: the glow fades exactly with the line */
.glow-rule {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(76, 201, 255, 0.55) 40%, transparent 85%);
}
.glow-rule::after {
  content: "";
  position: absolute;
  inset: -4px 0;
  background: linear-gradient(90deg, rgba(76, 201, 255, 0.55) 0%, rgba(76, 201, 255, 0.25) 40%, transparent 85%);
  filter: blur(5px);
  pointer-events: none;
}

/* ---------- emblem (white PNG used as tintable mask) ---------- */
.emblem {
  display: inline-block;
  flex: none;
  width: var(--w, 22px);
  aspect-ratio: 262 / 480;
  color: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(76, 201, 255, 0.55));
}
.emblem::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("alliance-mark.png") center / contain no-repeat;
          mask: url("alliance-mark.png") center / contain no-repeat;
}

/* ---------- rank pips ---------- */
.pips { display: inline-flex; align-items: center; gap: 5px; }
.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4cf 0%, #f0c35a 40%, #a8741a 100%);
  box-shadow: 0 0 6px rgba(255, 190, 80, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}
.pip.hollow { background: #120d05; border: 2px solid var(--gold); box-shadow: 0 0 5px rgba(255, 190, 80, 0.3); }
.pips.flag { padding: 4px 7px; background: #000; border: 1px solid #2a2f36; }
.pips.flag .pip { background: radial-gradient(circle at 35% 30%, #fff, #c9d1d9 60%, #8a949e); box-shadow: 0 0 5px rgba(255, 255, 255, 0.35); }

/* ---------- controls ---------- */
.btn {
  --c: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px 7px;
  font-family: var(--f-label);
  font-size: 16px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--cyan-hi);
  text-decoration: none;
  background: rgba(76, 201, 255, 0.07);
  border: 1px solid var(--line-2);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: rgba(76, 201, 255, 0.18); color: #fff; }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cyan-hi); }
.btn svg { width: 15px; height: 15px; margin-top: -2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: rgba(76, 201, 255, 0.07); color: var(--cyan-hi); }
.btn-primary { color: #021120; background: linear-gradient(180deg, #52cfff, #1f86c4); border-color: transparent; }
.btn-primary:hover { background: linear-gradient(180deg, #7bdcff, #2a9ad9); color: #021120; }
.btn-sm { padding: 6px 10px 4px; font-size: 14px; --c: 5px; }
.btn[aria-pressed="true"] { background: rgba(76, 201, 255, 0.24); color: #fff; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-2);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--cyan-hi); border-color: var(--line); background: rgba(76, 201, 255, 0.06); }
.icon-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.icon-btn svg { width: 20px; height: 20px; }

.badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font: 600 11px/17px var(--f-mono);
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 61, 85, 0.7);
}
.badge[hidden] { display: none; }

.field { display: grid; gap: 7px; }
.field input, .input, .select {
  width: 100%;
  padding: 11px 12px;
  color: var(--text);
  font: 500 15px var(--f-mono);
  background: rgba(3, 10, 20, 0.85);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--cyan);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .input:focus, .select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(76, 201, 255, 0.15); }
.field input::placeholder, .input::placeholder { color: var(--text-3); }
.select { width: auto; padding: 6px 30px 5px 10px; font: 500 13px var(--f-body); border-left-width: 1px; appearance: none; cursor: pointer;
  background: rgba(3, 10, 20, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234cc9ff'/%3E%3C/svg%3E") right 10px center no-repeat; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 3px;
  font-family: var(--f-label);
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  text-decoration: none;
}
a.chip:hover { color: var(--cyan-hi); border-color: var(--cyan); }
.chip.ok { color: var(--green); border-color: rgba(63, 224, 160, 0.45); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.live { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.wl { color: var(--cyan-hi); text-decoration: none; border-bottom: 1px solid rgba(76, 201, 255, 0.4); transition: background 0.15s; }
.wl:hover { background: rgba(76, 201, 255, 0.13); border-bottom-color: var(--cyan); }
.wl.missing { color: var(--amber); border-bottom: 1px dashed rgba(255, 154, 60, 0.6); }
.wl.missing:hover { background: rgba(255, 154, 60, 0.1); }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 24px;
  background: linear-gradient(180deg, rgba(4, 12, 24, 0.97), rgba(4, 12, 24, 0.9));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-t { display: block; font-family: var(--f-label); font-size: 23px; letter-spacing: 0.14em; line-height: 1; color: #eaf6ff; white-space: nowrap; }
.brand-s { display: block; margin-top: 3px; font-size: 11px; white-space: nowrap; }

.search {
  flex: 1;
  max-width: 520px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px 0 12px;
  background: rgba(3, 10, 20, 0.7);
  border: 1px solid var(--line);
}
.search:focus-within { border-color: var(--cyan); }
.search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 14px var(--f-body); }
.search input::placeholder { color: var(--text-3); font-family: var(--f-label); font-size: 15px; letter-spacing: 0.14em; }
.search-toggle { display: none !important; }
.kbd { font: 500 11px var(--f-mono); color: var(--text-3); border: 1px solid var(--line-2); padding: 1px 6px; }

.stardate { text-align: right; white-space: nowrap; }
.stardate .lbl { font-size: 11px; display: block; }
.stardate .mono { font-size: 13px; color: var(--cyan-hi); }

.user { display: flex; align-items: center; gap: 10px; padding-left: 6px; text-decoration: none; }
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  font: 500 13px var(--f-mono);
  color: #0b0620;
  background: linear-gradient(180deg, color-mix(in srgb, var(--role, var(--gm)) 75%, #fff), color-mix(in srgb, var(--role, var(--gm)) 80%, #000));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.user-n { display: block; font-size: 14px; line-height: 1.2; }
.user .lbl { font-size: 11px; color: var(--role, var(--gm)); }

/* notifications */
.notif-wrap { position: relative; }
.notif { position: absolute; right: -8px; top: calc(100% + 10px); width: min(520px, calc(100vw - 24px)); --pad: 0px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.notif[hidden] { display: none; }
.notif .panel-h { margin: 0; padding: 12px 16px 11px 20px; }
.notif ul { list-style: none; margin: 0; padding: 4px 0; max-height: 60vh; overflow: auto; }
.notif li { display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.notif li:last-child { border-bottom: 0; }
.notif li.unread { background: linear-gradient(90deg, rgba(255, 61, 85, 0.07), transparent 60%); }
.notif li .lbl { padding-top: 3px; font-size: 13px; }
.notif li .t { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.notif li .t b { color: var(--cyan-hi); font-weight: 600; }
.notif li .mono { font-size: 11px; white-space: nowrap; color: var(--text-3); padding-top: 2px; }
.notif li.unread .lbl::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); vertical-align: 2px; }
.notif .foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--f-label); font-size: 14px; letter-spacing: 0.14em; color: var(--cyan); }
.linkish:hover { color: var(--cyan-hi); }

/* shell */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.main { min-width: 0; padding: 24px 28px 56px; }

/* ---------- rail: console bus with chamfered tiles ---------- */
.rail {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 10px 14px 24px;
  background: linear-gradient(90deg, rgba(3, 9, 18, 0.9), rgba(3, 9, 18, 0.65));
  border-right: 1px solid var(--line);
}
.rail::before { /* the bus */
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 60px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 6%, var(--line-2) 94%, transparent);
}
.ri { position: relative; display: block; color: var(--text-3); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; }
.ri::before { /* node on the bus */
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.ri::after { /* connector */
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--line-2);
}
.ri-tile {
  --c: 9px;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px 9px;
  background: var(--line);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background 0.15s, color 0.15s;
}
.ri-tile::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: linear-gradient(180deg, #08172a, #050d19);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.ri-tile svg { width: 22px; height: 22px; }
.ri-tile span { font-family: var(--f-label); font-size: 13px; letter-spacing: 0.14em; line-height: 1; }
.ri:hover { color: var(--cyan-hi); }
.ri:hover .ri-tile { background: var(--line-2); }
.ri:focus-visible { outline: none; }
.ri:focus-visible .ri-tile { background: var(--cyan); }
.ri[aria-current="page"] { color: #eafaff; }
.ri[aria-current="page"] .ri-tile { background: var(--cyan); }
.ri[aria-current="page"] .ri-tile::before { background: linear-gradient(180deg, rgba(40, 140, 200, 0.55), rgba(10, 50, 85, 0.85)); }
.ri[aria-current="page"] .ri-tile span { text-shadow: 0 0 8px rgba(120, 220, 255, 0.8); }
.ri[aria-current="page"]::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.ri[aria-current="page"]::after { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.rail .build { margin-top: auto; text-align: center; font-size: 10px; color: var(--text-3); line-height: 1.5; }

/* ---------- ship AI drawer (global) ---------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(1, 4, 9, 0.55); backdrop-filter: blur(2px); }
.drawer-scrim[hidden], .drawer[hidden] { display: none; }
.drawer {
  position: fixed;
  z-index: 51;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0a1a2e, #040b16);
  border-left: 1px solid var(--line-2);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
}
.drawer-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(76, 201, 255, 0.12), transparent 70%); }
.drawer-h .lbl { font-size: 18px; color: var(--cyan-hi); }
.drawer-ctx { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.drawer-ctx .lbl { width: 100%; font-size: 12px; margin-bottom: 2px; }
.ctx { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 13px; color: var(--text); border: 1px solid var(--line-2); background: rgba(76, 201, 255, 0.07); cursor: pointer; }
.ctx[aria-pressed="false"] { color: var(--text-3); background: none; border-style: dashed; }
.ctx::before { content: "✓"; font-size: 11px; color: var(--cyan); }
.ctx[aria-pressed="false"]::before { content: "+"; color: var(--text-3); }
.chat { flex: 1; overflow: auto; padding: 18px 22px; display: grid; gap: 14px; align-content: start; }
.msg { max-width: 92%; font-size: 14.5px; line-height: 1.6; }
.msg .lbl { display: block; margin-bottom: 5px; font-size: 12px; }
.msg.user { justify-self: end; padding: 10px 14px; background: rgba(76, 201, 255, 0.1); border: 1px solid var(--line-2); }
.msg.ai { padding: 2px 0 2px 14px; border-left: 2px solid var(--cyan); }
.msg.ai .lbl { color: var(--cyan); }
.msg .src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.composer { padding: 14px 22px 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.composer textarea {
  width: 100%;
  min-height: 88px;
  max-height: 40vh;
  resize: vertical;
  padding: 12px 14px;
  color: var(--text);
  font: 15px/1.55 var(--f-body);
  background: rgba(3, 10, 20, 0.85);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--cyan);
  outline: none;
}
.composer textarea:focus { border-color: var(--cyan); }
.composer .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ==========================================================================
   ARCHIVE (wiki)
   ========================================================================== */
.archive { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; max-width: 1440px; margin: 0 auto; }

.doc { --pad: 30px; --cut: 18px; }
.doc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cyan-hi); }
.crumbs .sep { color: var(--text-3); }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.view-as { display: inline-flex; align-items: center; gap: 8px; }
.view-as .lbl { font-size: 12px; }

.doc-title { margin: 20px 0 10px; font-family: var(--f-head); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: 0.03em; text-transform: uppercase; color: #ecf7ff; }
.doc-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.doc .glow-rule { margin: 18px 0 26px; }

.prose { font-size: 16px; line-height: 1.75; color: #cfe0ee; }
.prose p { margin: 0 0 1.05em; max-width: 72ch; }
.prose h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 1.8em 0 0.7em;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-hi);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.prose h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.prose strong { color: #eef8ff; font-weight: 600; }

/* infobox */
.infobox { float: right; width: 300px; margin: 0 0 22px 30px; --pad: 0px; --cut: 12px; }
.infobox .panel-h { margin: 0; padding: 10px 14px 9px 18px; }
.infobox .panel-h .lbl { font-size: 13px; }
.infobox-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  background: radial-gradient(circle at 50% 55%, rgba(255, 178, 80, 0.16), transparent 60%), radial-gradient(circle at 50% 50%, rgba(76, 201, 255, 0.08), transparent 70%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.infobox-art > img { height: 160px; width: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); }
.infobox-name { padding: 12px 16px 2px; font-family: var(--f-head); font-weight: 500; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; color: #ecf7ff; }
.infobox dl { margin: 0; padding: 6px 16px 14px; display: grid; grid-template-columns: 96px 1fr; }
.infobox dt, .infobox dd { padding: 8px 0; border-top: 1px solid var(--line); }
.infobox dt { font-family: var(--f-label); font-size: 13px; letter-spacing: 0.12em; color: var(--text-3); padding-top: 10px; }
.infobox dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.infobox .open-file { display: flex; justify-content: center; padding: 0 16px 16px; }
.infobox .open-file .btn { width: 100%; }

/* character portrait with vertical rank strip */
.infobox-art.portrait {
  height: 330px;
  place-items: end center;
  background:
    radial-gradient(ellipse 70% 60% at 55% 45%, color-mix(in srgb, var(--dept) 28%, transparent), transparent 70%),
    linear-gradient(180deg, #0b1b30, #050c17);
}
.infobox-art.portrait > img { height: 100%; width: 100%; object-fit: cover; object-position: center top; padding-left: 34px; filter: none; }
.rank-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dept) 42%, #04101e), color-mix(in srgb, var(--dept) 14%, #04101e));
  border-right: 1px solid var(--dept);
  box-shadow: 4px 0 14px -6px var(--dept);
}
.rank-strip .rank { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-label); font-size: 17px; letter-spacing: 0.3em; color: #eef4ff; }
.rank-strip .code { font: 500 10px var(--f-mono); letter-spacing: 0.06em; color: color-mix(in srgb, var(--dept) 70%, #fff); }

.transmission { margin: 24px 0; padding: 12px 18px 14px; border-left: 2px solid var(--cyan); background: linear-gradient(90deg, rgba(76, 201, 255, 0.08), transparent 80%); max-width: 72ch; }
.transmission .lbl { display: block; margin-bottom: 8px; font-size: 12px; color: var(--cyan); }
.transmission p { margin: 0; font-style: italic; color: #e3f1fb; }
.transmission cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--text-2); }

/* clearance-restricted block */
.clearance {
  clear: right;
  margin: 26px 0;
  padding: 14px 18px 16px;
  border: 1px solid rgba(255, 154, 60, 0.45);
  background: repeating-linear-gradient(135deg, rgba(255, 154, 60, 0.05) 0 10px, transparent 10px 20px), rgba(30, 16, 4, 0.35);
  max-width: 76ch;
}
.clearance-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.clearance-h .lbl { color: var(--amber); font-size: 15px; }
.clearance-h .mono { color: rgba(255, 154, 60, 0.8); font-size: 11px; }
.clearance .tag { font-family: var(--f-head); font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: #ffd2a6; }
.clearance p { margin: 0; color: #f1e2d2; }
.clearance .redacted { display: none; }
.redacted span { display: block; height: 12px; margin: 9px 0; background: rgba(255, 154, 60, 0.26); }
.redacted span:nth-child(2) { width: 82%; }
.redacted span:nth-child(3) { width: 64%; }
.clearance.denied { border-color: rgba(255, 61, 85, 0.5); background: repeating-linear-gradient(135deg, rgba(255, 61, 85, 0.05) 0 10px, transparent 10px 20px), rgba(30, 6, 10, 0.4); }
.clearance.denied .clearance-h .lbl { color: var(--red); }
.clearance.denied .clearance-h .mono { color: rgba(255, 61, 85, 0.85); }
.clearance.denied .cl-body { display: none; }
.clearance.denied .redacted { display: block; }
.clearance.denied .redacted span { background: rgba(255, 61, 85, 0.2); }

/* aside */
.aside { display: grid; gap: 18px; align-content: start; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 7px 10px; font-size: 14px; color: var(--text-2); text-decoration: none; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--cyan-hi); background: rgba(76, 201, 255, 0.06); }
.toc a.active { color: var(--cyan-hi); border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(76, 201, 255, 0.12), transparent); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.list li:first-child { border-top: 0; padding-top: 0; }
.list .mono { display: block; margin-top: 2px; font-size: 11px; color: var(--text-3); }

/* ==========================================================================
   DOSSIER (character sheet)
   ========================================================================== */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px 400px;
  grid-template-areas: "sheet vitals figure";
  gap: 22px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: start;
}
.sheet { grid-area: sheet; --pad: 26px; --cut: 18px; }
.vitals { grid-area: vitals; display: grid; gap: 18px; }
.figure { grid-area: figure; position: sticky; top: calc(var(--topbar-h) + 20px); }

.sheet .doc-top { margin-bottom: 18px; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font: 11.5px/1.6 var(--f-mono); letter-spacing: 0.04em; color: var(--text-3); }
.doc-meta b { color: var(--text-2); font-weight: 500; }
.sheet-sect + .sheet-sect { margin-top: 28px; }

.aspect { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-left: 2px solid var(--line-2); background: linear-gradient(90deg, rgba(76, 201, 255, 0.05), transparent 70%); }
.aspect + .aspect { margin-top: 6px; }
.aspect .lbl { font-size: 13px; }
.aspect .txt { font-size: 16.5px; font-weight: 500; color: #eaf5ff; line-height: 1.4; }
.aspect.hc { border-left-color: var(--cyan); }
.aspect.hc .lbl { color: var(--cyan); }
.aspect.tr { border-left-color: var(--amber); background: linear-gradient(90deg, rgba(255, 154, 60, 0.08), transparent 70%); }
.aspect.tr .lbl { color: var(--amber); }

.ladder { display: grid; gap: 6px; }
.rung { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; }
.rung-v { display: flex; align-items: baseline; gap: 8px; }
.rung-v .val { font-family: var(--f-label); font-size: 30px; line-height: 1; color: var(--cyan-hi); min-width: 34px; text-align: right; }
.rung-v .name { font-family: var(--f-head); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.rung-s { display: flex; flex-wrap: wrap; gap: 6px; }
.skill { padding: 7px 12px 6px; font-size: 14px; color: var(--text); background: rgba(76, 201, 255, 0.06); border: 1px solid var(--line-2); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.skill:hover { background: rgba(76, 201, 255, 0.15); border-color: var(--cyan); }
.skill[aria-pressed="true"] { background: rgba(76, 201, 255, 0.26); border-color: var(--cyan); color: #fff; box-shadow: 0 0 12px rgba(76, 201, 255, 0.3); }
.skill:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.stunts { display: grid; gap: 10px; }
.stunt { padding: 13px 16px; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.45); }
.stunt-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; }
.stunt-n { font-family: var(--f-head); font-weight: 500; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cyan-hi); }
.stunt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #c7d9e8; }

.fp { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-n { font-family: var(--f-label); font-size: 68px; line-height: 0.9; color: var(--cyan-hi); text-shadow: 0 0 18px rgba(76, 201, 255, 0.55); min-width: 60px; }
.fp-meta { display: grid; gap: 6px; justify-items: end; }
.fp-btns { display: flex; gap: 6px; }

.track + .track { margin-top: 14px; }
.track-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.track-h .mono { font-size: 11px; color: var(--text-3); }
.boxes { display: flex; gap: 8px; }
.box { position: relative; width: 40px; height: 40px; font: 500 14px var(--f-mono); color: var(--text-2); background: rgba(3, 10, 20, 0.7); border: 1px solid var(--line-2); cursor: pointer; }
.box:hover { border-color: var(--cyan); color: var(--cyan-hi); }
.box:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.box[aria-pressed="true"] { color: #fff; background: rgba(255, 61, 85, 0.22); border-color: var(--red); box-shadow: 0 0 12px rgba(255, 61, 85, 0.35); }
.box[aria-pressed="true"]::after { content: ""; position: absolute; inset: 6px; background: linear-gradient(45deg, transparent 46%, var(--red) 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--red) 46% 54%, transparent 54%); opacity: 0.7; }

.cons { display: grid; gap: 8px; }
.con { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); }
.con .lbl { font-size: 13px; line-height: 1.2; }
.con .lbl b { display: block; font-weight: 400; font-size: 20px; color: var(--text-2); }
.con .txt { font-size: 14px; color: var(--text-3); font-style: italic; }
.con.filled { border-color: rgba(255, 154, 60, 0.55); background: rgba(255, 154, 60, 0.07); }
.con.filled .lbl, .con.filled .lbl b { color: var(--amber); }
.con.filled .txt { color: #ffe3c7; font-style: normal; font-weight: 500; }

.dice-skill { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 14px; }
.dice-skill b { font-weight: 500; color: var(--cyan-hi); }
.dice { display: flex; gap: 8px; margin-bottom: 12px; }
.die { display: grid; place-items: center; width: 46px; height: 46px; font: 600 24px var(--f-mono); color: var(--text-2); background: rgba(3, 10, 20, 0.7); border: 1px solid var(--line-2); }
.die.plus { color: var(--cyan-hi); border-color: var(--cyan); }
.die.minus { color: var(--red); border-color: rgba(255, 61, 85, 0.6); }
.dice-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-height: 40px; }
.dice-total .v { font-family: var(--f-label); font-size: 40px; line-height: 1; color: var(--tier, #fff); }
.dice-total .r { font-family: var(--f-head); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-hi); text-align: right; }
.dice-total .r .mono { text-transform: none; font-size: 11px; color: var(--text-3); letter-spacing: 0.02em; }

/* figure: 3D model + name card */
.figure { --pad: 0px; --cut: 16px; }
.figure-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(76, 201, 255, 0.1), transparent 70%); }
.figure-tabs .lbl { margin-right: auto; color: var(--cyan-hi); font-size: 14px; }
.stage {
  position: relative;
  overflow: hidden;
  height: clamp(380px, calc(100vh - var(--topbar-h) - 400px), 720px);   /* the whole figure column (tabs + stage + name card) fits a 16:9 window, so the sticky column never jumps */
  background:
    radial-gradient(ellipse 55% 14% at 50% 93%, color-mix(in srgb, var(--dept) 35%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--dept) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #071426, #040a14);
}
.stage model-viewer { z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.stage-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--cyan); font-size: 15px; }
.stage-load[hidden] { display: none; }
.floor { position: absolute; left: 50%; bottom: 18px; width: 62%; height: 34px; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--dept) 70%, transparent); border-radius: 50%; box-shadow: 0 0 22px color-mix(in srgb, var(--dept) 40%, transparent); pointer-events: none; }
.namecard { position: relative; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.namecard::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 3px; background: var(--dept); box-shadow: 0 0 12px var(--dept); }
.pc-name { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: 0.05em; text-transform: uppercase; color: #ecf7ff; }
.rankline { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rankline .lbl { color: #f2dca6; font-size: 15px; }
.namecard .glow-rule { margin: 14px 0; }
.idlist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font: 12px/1.5 var(--f-mono); }
.idlist dt { color: var(--text-3); letter-spacing: 0.04em; }
.idlist dd { margin: 0; color: var(--text); font-family: var(--f-body); font-size: 13.5px; }
.dept-tag { display: inline-flex; align-items: center; gap: 7px; }
.dept-tag::before { content: ""; width: 9px; height: 9px; background: var(--dept); box-shadow: 0 0 6px var(--dept); }
.namecard .btn { width: 100%; margin-top: 16px; }

/* ==========================================================================
   PERSONAL LOG
   ========================================================================== */
.log { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; max-width: 1280px; margin: 0 auto; align-items: start; }
.entries { --pad: 0px; --cut: 12px; }
.entries .panel-h { margin: 0; padding: 12px 14px 11px 20px; }
.entries ul { list-style: none; margin: 0; padding: 6px 0; }
.entries a { display: block; padding: 10px 16px; text-decoration: none; border-left: 2px solid transparent; }
.entries a:hover { background: rgba(76, 201, 255, 0.06); }
.entries a[aria-current="true"] { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(76, 201, 255, 0.12), transparent); }
.entries .t { display: block; font-size: 14.5px; color: var(--text); }
.entries .mono { font-size: 11px; color: var(--text-3); }
.editor { --pad: 0px; --cut: 18px; }
.editor .panel-h { margin: 0; padding: 12px 18px 11px 24px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.tb { min-width: 34px; height: 32px; padding: 0 8px; font: 600 13px var(--f-mono); color: var(--text-2); background: none; border: 1px solid transparent; cursor: pointer; }
.tb:hover { color: var(--cyan-hi); border-color: var(--line-2); background: rgba(76, 201, 255, 0.06); }
.tb svg { width: 16px; height: 16px; vertical-align: -3px; }
.tb-sep { width: 1px; margin: 4px 6px; background: var(--line); }
.page { padding: 26px 34px 34px; min-height: 60vh; outline: none; font-size: 16px; line-height: 1.75; color: #d2e2ef; }
.page h1 { margin: 0 0 6px; font-family: var(--f-head); font-weight: 500; font-size: 30px; letter-spacing: 0.03em; text-transform: uppercase; color: #ecf7ff; }
.page h2 { margin: 1.4em 0 0.5em; font-family: var(--f-head); font-weight: 500; font-size: 19px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-hi); }
.page p { margin: 0 0 1em; max-width: 74ch; }
.page ul { margin: 0 0 1em; padding-left: 1.3em; }
.page li::marker { color: var(--cyan); }
.page blockquote { margin: 1em 0; padding: 4px 16px; border-left: 2px solid var(--amber); color: #f1e2d2; font-style: italic; }
.page figure { margin: 1.2em 0; max-width: 360px; }
.page figure img { display: block; width: 100%; border: 1px solid var(--line-2); }
.page figcaption { margin-top: 6px; font: 12px var(--f-mono); color: var(--text-3); }
.editor-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px 14px 24px; border-top: 1px solid var(--line); }

/* ==========================================================================
   ACCESS TERMINAL (login)
   ========================================================================== */
body.login { display: grid; place-items: center; padding: 32px 16px; }
body.login::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 32%, rgba(60, 140, 255, 0.07) 46%, transparent 58%); }
.login-wrap { position: relative; z-index: 1; width: min(440px, 100%); display: grid; gap: 26px; justify-items: center; }
.login-mark { --w: 84px; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { filter: drop-shadow(0 0 18px rgba(76, 201, 255, 0.9)); } }
.login-title { text-align: center; }
.login-title .pre { display: block; margin-bottom: 10px; font-size: 13px; color: var(--text-2); }
.login-title h1 { margin: 0; font-family: var(--f-label); font-weight: 400; font-size: clamp(34px, 9.5vw, 52px); letter-spacing: 0.16em; line-height: 1; color: #ecf7ff; text-shadow: 0 0 24px rgba(76, 201, 255, 0.45); padding-left: 0.16em; white-space: nowrap; }
.login-title .sub { display: block; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.login-panel { width: 100%; --pad: 24px; }
.tabs { display: flex; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 22px; border-bottom: 1px solid var(--line); }
.tab { flex: 1; padding: 14px 10px 11px; font-family: var(--f-label); font-size: 16px; letter-spacing: 0.16em; color: var(--text-3); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.tab:hover { color: var(--cyan-hi); }
.tab[aria-selected="true"] { color: var(--cyan-hi); border-bottom-color: var(--cyan); background: linear-gradient(180deg, transparent, rgba(76, 201, 255, 0.1)); }
.tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.form { display: grid; gap: 16px; }
.form[hidden] { display: none; }
.form .btn { width: 100%; padding: 13px 16px 11px; font-size: 18px; margin-top: 4px; }
.form-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.status-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font: 11px var(--f-mono); color: var(--text-3); letter-spacing: 0.05em; }
.status-line span { display: inline-flex; align-items: center; gap: 7px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1440px) {
  .dossier { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "sheet figure" "vitals figure"; }
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 1120px) {
  .archive { grid-template-columns: minmax(0, 1fr); }
  .aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stardate { display: none; }
  .log { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .dossier { grid-template-columns: minmax(0, 1fr); grid-template-areas: "figure" "sheet" "vitals"; }
  .figure { position: relative; top: 0; }
  .stage { height: 460px; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed;
    z-index: 40;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: row;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(3, 9, 18, 0.97);
    border-right: 0;
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
  }
  .rail::before, .ri::before, .ri::after, .rail .build { display: none; }
  .ri { flex: 1; }
  .ri-tile { padding: 8px 2px 6px; gap: 4px; --c: 6px; }
  .ri-tile svg { width: 20px; height: 20px; }
  .ri-tile span { font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .main { padding: 18px 16px 100px; }
  .topbar { padding: 0 8px 0 16px; gap: 8px; }
  .brand-s, .user-t, .search .kbd { display: none; }
  .vitals { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .search { display: none; }
  .search-toggle { display: grid !important; }
  .notif-wrap { margin-left: auto; }
  .aside { grid-template-columns: minmax(0, 1fr); }
  .doc { --pad: 18px; --cut: 12px; }
  .sheet { --pad: 18px; --cut: 12px; }
  .infobox { float: none; width: 100%; margin: 0 0 22px; }
  .infobox-art { height: 130px; }
  .infobox-art > img { height: 100px; }
  .infobox-art.portrait { height: 360px; }
  .infobox-art.portrait > img { height: 100%; }
  .aspect, .rung { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .prose { font-size: 15.5px; }
  .notif { right: -52px; }
  .brand-t { font-size: 19px; letter-spacing: 0.14em; }
  .page { padding: 20px 18px 26px; }
  .doc-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   v0.3 — skill tiers, tooltips, popups, clearance tags, codex, quick ref
   ========================================================================== */

/* skill tier colours: −1 ice → +5 gold; each tier clearly distinct */
.tm2 { --tier: #872d73; }   /* Ужасный */
.tm1 { --tier: #87555d; }   /* Плохой */
.t0  { --tier: #6d8295; }   /* Посредственный */
.t1  { --tier: #a3e6ff; }   /* Средний */
.t2  { --tier: #5e8dff; }   /* Неплохой — bluer, clearly apart from +1 */
.t3  { --tier: #42c84a; }   /* Хороший */
.t4  { --tier: #f0bf00; }   /* Отличный */
.t5  { --tier: #e87f1f; }   /* Великолепный */
.t6  { --tier: #ff4b3a; }   /* Фантастический */
.t7  { --tier: #ff3f86; }   /* Эпический */
.t8  { --tier: #b66bff; }   /* Легендарный — palette picked by the user */
.rung-v .val { color: var(--tier, var(--cyan-hi)); }
.rung-v .name { color: color-mix(in srgb, var(--tier, #5f7a93) 60%, #5f7a93); }
.skill.tiered { color: var(--tier); border-color: color-mix(in srgb, var(--tier) 50%, transparent); background: color-mix(in srgb, var(--tier) 7%, transparent); }
.skill.tiered:hover { border-color: var(--tier); background: color-mix(in srgb, var(--tier) 15%, transparent); }
.skill.tiered[aria-pressed="true"] { color: #fff; border-color: var(--tier); background: color-mix(in srgb, var(--tier) 28%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--tier) 40%, transparent); }
.sk { color: var(--tier, var(--cyan-hi)); font-weight: 600; border-bottom: 1px dotted color-mix(in srgb, var(--tier, #a3e6ff) 60%, transparent); cursor: help; }
:is(.t5, .t6, .t7, .t8):is(.sk, .v), :is(.t5, .t6, .t7, .t8) :is(.val, .v, .n) { text-shadow: 0 0 10px color-mix(in srgb, var(--tier) 45%, transparent); }
.tier-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-legend span { padding: 3px 8px 2px; font: 600 12px var(--f-mono); color: var(--tier); border: 1px solid color-mix(in srgb, var(--tier) 50%, transparent); }

/* Fate term tooltips */
.term { border-bottom: 1px dotted rgba(163, 230, 255, 0.55); cursor: help; }
.term:hover, .term:focus-visible { color: var(--cyan-hi); outline: none; }
.tip {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  padding: 11px 13px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: linear-gradient(180deg, #0d2036, #071322);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--cyan);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
.tip[hidden] { display: none; }
.tip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--f-head); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan-hi); }
.tip-h svg { width: 22px; height: 22px; color: var(--cyan); flex: none; }
.tip a { display: inline-block; margin-top: 6px; font-family: var(--f-label); font-size: 13px; letter-spacing: 0.12em; color: var(--cyan); text-decoration: none; }
.tip a:hover { color: var(--cyan-hi); }

/* clickable aspects + popup */
button.aspect { width: 100%; font: inherit; color: inherit; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; transition: background 0.15s; }
button.aspect:hover { background: linear-gradient(90deg, rgba(76, 201, 255, 0.13), transparent 80%); }
button.aspect.tr:hover { background: linear-gradient(90deg, rgba(255, 154, 60, 0.15), transparent 80%); }
button.aspect:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button.aspect .more { justify-self: end; font: 500 10px var(--f-mono); color: var(--text-3); letter-spacing: 0.08em; opacity: 0; transition: opacity 0.15s; }
button.aspect:hover .more, button.aspect:focus-visible .more { opacity: 1; }
.aspect { grid-template-columns: 116px 1fr auto; }

.modal-scrim { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; background: rgba(1, 4, 9, 0.62); backdrop-filter: blur(2px); }
.modal-scrim[hidden] { display: none; }
.modal { width: min(580px, 100%); max-height: calc(100vh - 32px); overflow: auto; --pad: 24px; }
.modal-title { margin: 4px 0 14px; font-family: var(--f-head); font-weight: 500; font-size: 23px; line-height: 1.3; color: #ecf7ff; }
.modal p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: #cfe0ee; }
.modal h3 { margin: 18px 0 8px; font-family: var(--f-head); font-weight: 500; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-hi); }
.modal ul { margin: 0; padding-left: 1.2em; font-size: 14.5px; line-height: 1.6; color: #cfe0ee; }
.modal li::marker { color: var(--cyan); }
.grant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 18px; padding: 11px 14px; border: 1px solid rgba(63, 224, 160, 0.45); background: rgba(63, 224, 160, 0.06); font-size: 14px; }
.grant .lbl { color: var(--green); }
.grant b { color: #eaf6ff; font-weight: 600; }

/* segmented switch */
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg button { padding: 5px 9px 3px; font-family: var(--f-label); font-size: 12px; letter-spacing: 0.1em; color: var(--text-3); background: none; border: 0; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { color: var(--cyan-hi); background: rgba(76, 201, 255, 0.18); }
.seg button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* clearance tags: word in a rectangular frame, rank pips outside it */
.clearance-h .lbl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctag { display: inline-flex; align-items: center; gap: 8px; }
.ctag-box { padding: 2px 8px 1px; border: 1px solid currentColor; font-family: var(--f-head); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; line-height: 1.35; text-transform: uppercase; }
.pips.sm { gap: 3px; }
.pips.sm .pip { width: 8px; height: 8px; }
.gm-only { position: relative; isolation: isolate; overflow: hidden; clear: right; margin: 26px 0; padding: 14px 18px 16px; max-width: 76ch; border: 1px dashed color-mix(in srgb, var(--gm) 55%, transparent);
  background:
    repeating-linear-gradient(180deg, rgba(220, 205, 255, 0.035) 0 1px, transparent 1px 3px),   /* faint monitor lines */
    linear-gradient(120deg, color-mix(in srgb, var(--gm) 20%, transparent), color-mix(in srgb, var(--gm) 6%, transparent) 55%, color-mix(in srgb, var(--gm) 2%, transparent)); }
.gm-only::before { /* larger hex pattern, dense on the right, fading out to the left */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 15L52 30V60L26 75L0 60V30Z M26 0V15 M26 75V90' fill='none' stroke='%23a98bff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 52px 90px; background-position: right top; opacity: 0.26;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.45) 35%, transparent 75%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.45) 35%, transparent 75%); }
.gm-only .clearance-h .lbl, .gm-only .clearance-h .mono { color: color-mix(in srgb, var(--gm) 80%, #fff); }
.gm-only p { margin: 0; color: #d9ecf8; }
body:not(.is-gm) .gm-only { display: none; }

/* 3D stage: floor ring is a hotspot anchored at the feet */
.floor-ring { position: absolute; z-index: 0; width: 0; height: 0; border: 1px solid color-mix(in srgb, var(--dept) 75%, transparent); border-radius: 50%; box-shadow: 0 0 22px color-mix(in srgb, var(--dept) 40%, transparent), inset 0 0 16px color-mix(in srgb, var(--dept) 30%, transparent); pointer-events: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.stage canvas:active { cursor: grabbing; }
.stage-ctl { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.stage-ctl button, .stage-view { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; color: var(--cyan-hi); background: rgba(3, 10, 20, 0.72); border: 1px solid var(--line-2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.stage-ctl button:hover, .stage-view:hover { background: rgba(76, 201, 255, 0.2); border-color: var(--cyan); color: #fff; }
.stage-ctl button:focus-visible, .stage-view:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.stage-ctl svg, .stage-view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* full height <-> profile toggle (remembered per viewer) */
.stage-view { position: absolute; z-index: 3; right: 10px; top: 10px; width: 30px; height: 28px; }
.stage-view svg { width: 16px; height: 16px; }
.stage-view .i-full, .stage-view[aria-pressed="true"] .i-bust { display: none; }
.stage-view[aria-pressed="true"] .i-full { display: block; }

/* holographic monitor ripple behind the model (canvas is transparent); full holographic blue while the model loads */
.stage-holo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55); }
.stage-holo i { position: absolute; left: 0; right: 0; }
.stage-holo .hb { inset: 0; opacity: 0; transition: opacity 0.7s ease;
  background: radial-gradient(ellipse 75% 60% at 50% 48%, #2a86ff 0%, #1257d6 38%, #0a2f86 72%, #061a4c 100%); }
.stage-holo .hl { top: -48px; bottom: -48px; opacity: 0.85;
  background: repeating-linear-gradient(180deg, rgba(140, 210, 255, 0.09) 0 1px, transparent 1px 4px);
  animation: holo-lines 4s linear infinite; }
.stage-holo .hs { height: 34%; top: -34%;
  background: linear-gradient(180deg, transparent, rgba(90, 180, 255, 0.05) 40%, rgba(150, 220, 255, 0.11) 50%, rgba(90, 180, 255, 0.05) 60%, transparent);
  animation: holo-sweep 7.5s linear infinite; }
@keyframes holo-lines { to { transform: translateY(48px); } }
@keyframes holo-sweep { to { top: 100%; } }
.stage canvas { transition: opacity 0.6s ease; }
.stage.loading canvas { opacity: 0; }
.stage.loading .hb { opacity: 1; }
.stage.loading .hl { opacity: 1; background: repeating-linear-gradient(180deg, rgba(190, 235, 255, 0.16) 0 2px, transparent 2px 8px); animation-duration: 1.6s; }
.stage-holo .hband { top: 0; background: linear-gradient(90deg, transparent, rgba(110, 200, 255, 0.11) 12%, rgba(130, 210, 255, 0.13) 50%, rgba(110, 200, 255, 0.11) 88%, transparent); }
.stage.loading .hband { background: linear-gradient(90deg, rgba(200, 240, 255, 0.12), rgba(220, 245, 255, 0.26) 50%, rgba(200, 240, 255, 0.12)); }
.stage.loading .hs { animation-duration: 2.4s; background: linear-gradient(180deg, transparent, rgba(200, 240, 255, 0.12) 45%, rgba(230, 250, 255, 0.24) 50%, rgba(200, 240, 255, 0.12) 55%, transparent); }
.stage.loading .stage-load { z-index: 2; color: #e8f7ff; text-shadow: 0 0 12px rgba(140, 220, 255, 0.9); letter-spacing: 0.24em; }
@media (prefers-reduced-motion: reduce) { .stage-holo i { animation: none !important; } }
.stage-hint { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-size: 10px; color: var(--text-3); pointer-events: none; }

/* ---------- CODEX ---------- */
.codex { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 24px; max-width: 1480px; margin: 0 auto; align-items: start; }
.chapters { position: sticky; top: calc(var(--topbar-h) + 20px); --pad: 0px; --cut: 12px; }
.chapters .panel-h { margin: 0; padding: 12px 14px 11px 20px; }
.chapters .grp { display: block; padding: 14px 18px 6px; font-size: 12px; }
.chapters ol { list-style: none; margin: 0; padding: 0 0 8px; }
.chapters a { display: block; padding: 7px 18px; font-size: 14px; color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; }
.chapters a:hover { color: var(--cyan-hi); background: rgba(76, 201, 255, 0.06); }
.chapters a[aria-current="page"] { color: var(--cyan-hi); border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(76, 201, 255, 0.12), transparent); }
.lead { font-size: 17.5px; line-height: 1.7; color: #e1eef8; max-width: 70ch; }
.actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 26px; }
.action { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.45); }
.action svg { width: 56px; height: 56px; color: var(--cyan-hi); filter: drop-shadow(0 0 8px rgba(76, 201, 255, 0.35)); }
.action h3 { margin: 2px 0 4px; font-family: var(--f-head); font-weight: 500; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; color: #ecf7ff; }
.action p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #c7d9e8; }
.ai-ic { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.3em; color: var(--cyan-hi); }
.otable { width: 100%; max-width: 76ch; border-collapse: collapse; margin: 8px 0 22px; font-size: 14.5px; }
.otable th, .otable td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.otable th { font-family: var(--f-label); font-weight: 400; font-size: 14px; letter-spacing: 0.12em; color: var(--text-3); }
.otable td:first-child { white-space: nowrap; font-family: var(--f-head); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: #ecf7ff; }
.example { margin: 18px 0 24px; padding: 12px 16px 14px; max-width: 72ch; border-left: 2px solid var(--amber); background: linear-gradient(90deg, rgba(255, 154, 60, 0.07), transparent 85%); font-size: 15px; }
.example .lbl { display: block; margin-bottom: 6px; color: var(--amber); font-size: 13px; }
.chapter-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.chapter-nav a { display: grid; gap: 4px; text-decoration: none; color: var(--text-2); }
.chapter-nav a:last-child { text-align: right; }
.chapter-nav a span:last-child { font-family: var(--f-head); font-size: 16px; color: var(--cyan-hi); }
.chapter-nav a:hover span:last-child { color: #fff; }

/* skills table (codex + quick ref) */
.skills-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.skills-table th, .skills-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.skills-table th { font-family: var(--f-label); font-weight: 400; font-size: 13px; letter-spacing: 0.12em; color: var(--text-3); }
.skills-table .ic { width: 34px; padding: 6px 2px; text-align: center; }
.skills-table th.ic svg { width: 20px; height: 20px; color: var(--text-2); }
.skills-table td.ic svg { width: 24px; height: 24px; color: var(--cyan-hi); }
.skills-table td.ic.off svg { color: rgba(163, 230, 255, 0.12); }
.skills-table .nm { font-weight: 600; white-space: nowrap; }
.skills-table .ds { color: #c7d9e8; }
.skills-table .mine { font: 600 13px var(--f-mono); color: var(--tier, var(--text-3)); white-space: nowrap; }
.skills-table tr.grouprow td { padding-top: 16px; font-family: var(--f-label); font-size: 13px; letter-spacing: 0.14em; color: var(--cyan); border-bottom-color: var(--line-2); }
.table-wrap { overflow-x: auto; }

/* ---------- QUICK REF ---------- */
.qref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 0.85fr); grid-template-areas: "act out lad" "asp str lad" "sk sk sk"; gap: 18px; max-width: 1560px; margin: 0 auto; align-items: stretch; }
.qref > .panel { display: flex; flex-direction: column; }
.qref .a-act { grid-area: act; } .qref .a-out { grid-area: out; } .qref .a-asp { grid-area: asp; } .qref .a-str { grid-area: str; } .qref .a-lad { grid-area: lad; } .qref .a-sk { grid-area: sk; }
.ladder-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.qref-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; max-width: 1560px; margin: 0 auto 18px; }
.qref-title h1 { margin: 0; font-family: var(--f-label); font-weight: 400; font-size: 34px; letter-spacing: 0.16em; color: #ecf7ff; }
.ladder-ref { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ladder-ref li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.ladder-ref .v { font-family: var(--f-label); font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; color: var(--tier, var(--text-2)); }
.ladder-ref .n { font-family: var(--f-head); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tier, var(--text-2)); }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: #c7d9e8; }
.qlist li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.qlist li svg { width: 32px; height: 32px; color: var(--cyan-hi); }
.qlist b { color: #ecf7ff; font-weight: 600; }
.qk { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; font-size: 14px; line-height: 1.5; }
.qk dt { font-family: var(--f-head); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-hi); padding-top: 1px; }
.qk dd { margin: 0; color: #c7d9e8; }

/* ---------- ALLIANCE DATABASE (main page) ---------- */
.home { max-width: 1440px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.hero-id { --pad: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-content: start; }
.hero-emblem { height: 96px; width: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)); }
.hero-title { margin: 6px 0 4px; font-family: var(--f-head); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.countdown { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.5); }
.cd { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 6px; }
.cd .n { font-family: var(--f-label); font-size: 38px; line-height: 1; color: var(--cyan-hi); text-shadow: 0 0 14px rgba(76, 201, 255, 0.5); font-variant-numeric: tabular-nums; }
.cd .u { margin-left: 3px; font-family: var(--f-label); font-size: 13px; letter-spacing: 0.12em; color: var(--text-3); }
.hero-id > .btn { grid-column: 1 / -1; justify-self: start; }
.cover { --pad: 0px; --cut: 14px; position: relative; display: flex; flex-direction: column; text-decoration: none; }
.cover img { display: block; width: 100%; flex: 1; min-height: 160px; object-fit: cover; }
.cover-k { position: absolute; z-index: 2; left: 14px; top: 12px; padding: 4px 8px 3px; color: var(--cyan-hi); background: rgba(3, 10, 20, 0.72); }
.cover-t { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.cover-t b { font-family: var(--f-head); font-weight: 500; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.cover:hover .cover-t b { color: var(--cyan-hi); }
.home-h { display: flex; align-items: center; gap: 16px; margin: 34px 0 16px; font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: 0.14em; color: var(--cyan-hi); white-space: nowrap; }
.home-h::before, .home-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.home-h::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.crew-grid.npc { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.crew-card { position: relative; display: flex; flex-direction: column; color: var(--text); text-decoration: none; background: linear-gradient(180deg, #0b1c30, #050e1a); border: 1px solid color-mix(in srgb, var(--dept) 45%, transparent); }
.crew-card:hover { border-color: var(--dept); box-shadow: 0 0 18px color-mix(in srgb, var(--dept) 25%, transparent); }
.pf { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 2px solid var(--dept); background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--dept) 30%, transparent), transparent 70%), linear-gradient(180deg, #0b1b30, #050c17); }
.pf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.3s; }
.crew-card:hover .pf img { transform: scale(1.04); }
.cc-b { display: grid; gap: 4px; padding: 9px 11px 11px; }
.cc-b b { font-family: var(--f-head); font-weight: 500; font-size: 14.5px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.cc-b .mono { font-size: 10.5px; color: var(--text-3); }

/* sessions list */
.sessions { max-width: 1100px; margin: 0 auto; }
.sess-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sess-list li { display: grid; grid-template-columns: 120px 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.45); }
.sess-list li:target { border-color: var(--cyan); }
.sess-list img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; }
.sess-list b { font-family: var(--f-head); font-weight: 500; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- SHIP AI page ---------- */
.aiwrap { display: grid; grid-template-columns: 280px minmax(0, 1fr) 270px; gap: 20px; max-width: 1500px; margin: 0 auto; height: calc(100vh - var(--topbar-h) - 48px); min-height: 560px; }
.aiwrap > .panel { display: flex; flex-direction: column; min-height: 0; }
.threads { --pad: 0px; --cut: 12px; }
.threads .panel-h { margin: 0; padding: 10px 12px 9px 20px; }
.th-search { display: block; padding: 12px 14px 8px; }
.th-search .input { font: 14px var(--f-body); padding: 8px 10px; }
.th-list { list-style: none; margin: 0; padding: 4px 0 10px; overflow: auto; flex: 1; }
.th-item { display: block; width: 100%; padding: 10px 16px 10px 18px; text-align: left; background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; color: var(--text); }
.th-item:hover { background: rgba(76, 201, 255, 0.06); }
.th-item[aria-current="true"] { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(76, 201, 255, 0.13), transparent); }
.th-item .t { display: block; font-size: 14px; line-height: 1.35; }
.th-item .mono { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo { --pad: 0px; --cut: 16px; }
.convo .panel-h { margin: 0; padding: 12px 18px 11px 24px; }
.convo .chat { flex: 1; min-height: 0; }
.th-tools { display: inline-flex; align-items: center; gap: 12px; }
.btn.danger { color: #ffb3bd; border-color: rgba(255, 61, 85, 0.45); background: rgba(255, 61, 85, 0.06); }
.btn.danger:hover { background: rgba(255, 61, 85, 0.18); color: #fff; }
.btn.danger.armed { background: rgba(255, 61, 85, 0.3); color: #fff; border-color: var(--red); }
.ctxp { --pad: 16px; --cut: 12px; overflow: auto; }
.ctx-note { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.ctx-list { display: flex; flex-wrap: wrap; gap: 6px; }
.quota { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.quota-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.quota-h b { color: var(--cyan-hi); font-weight: 500; }
.quota-bar { height: 4px; background: rgba(76, 201, 255, 0.12); margin-bottom: 10px; }
.quota-bar span { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.drawer-thread { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 22px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }

@media (max-width: 1240px) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-id { grid-column: 1 / -1; }
  .aiwrap { grid-template-columns: 250px minmax(0, 1fr); }
  .ctxp { display: none; }
  .qref { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "act out" "asp str" "lad lad" "sk sk"; }
  .codex { grid-template-columns: 230px minmax(0, 1fr); }
  .codex .onpage { display: none; }
}
@media (max-width: 900px) {
  .codex { grid-template-columns: minmax(0, 1fr); }
  .chapters { position: relative; top: 0; }
  .actions-grid { grid-template-columns: minmax(0, 1fr); }
  .qref { grid-template-columns: minmax(0, 1fr); grid-template-areas: "act" "out" "asp" "str" "lad" "sk"; }
  .aiwrap { grid-template-columns: minmax(0, 1fr); height: auto; }
  .threads .th-list { max-height: 200px; }
  .convo { min-height: 70vh; }
}
@media (max-width: 640px) {
  .aspect { grid-template-columns: minmax(0, 1fr); }
  button.aspect .more { display: none; }
  .skills-table .grp { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-emblem { height: 70px; }
  .home-h { font-size: 17px; white-space: normal; }
  .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-grid.npc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sess-list li { grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; }
  .sess-list img { width: 84px; grid-row: span 3; }
  .otable { font-size: 13.5px; }
  .otable th, .otable td { padding: 8px 6px; }
  .otable td:first-child { white-space: normal; font-size: 13px; }
}

/* ==========================================================================
   v0.4 additions: separators, login extras, guests, session tags, link previews,
   database folders, sessions list, missions, timeline
   ========================================================================== */

/* dimmed "//" separator (wrapped automatically in visible text) */
.dsl { font-style: normal; color: var(--text-3); opacity: 0.55; margin: 0 0.15em; letter-spacing: 0; }

/* ---------- login ---------- */
.field-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.linkish.sm { font-size: 12px; letter-spacing: 0.12em; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 44px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 34px; padding: 0; color: var(--text-3); background: none; border: 0; cursor: pointer; }
.eye:hover, .eye[aria-pressed="true"] { color: var(--cyan-hi); }
.eye:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eye[aria-pressed="true"] .slash { display: none; }
.form-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: -4px 0 2px; }
.form-h .lbl { color: var(--cyan-hi); }
.form-note.err { color: #ffb3bd; }
.reset-step { display: grid; gap: 16px; }
.reset-step[hidden] { display: none; }
.crew-out { display: block; padding: 11px 13px; font-size: 15px; color: var(--cyan-hi); border: 1px dashed var(--line-2); background: rgba(76, 201, 255, 0.05); }
.guest-btn { padding: 10px 22px 8px; font-size: 16px; letter-spacing: 0.16em; color: var(--text-2); background: rgba(3, 10, 20, 0.5); }
.guest-btn[hidden] { display: none; }

/* ---------- guests: read only ---------- */
.is-guest [data-ai], .is-guest [data-edit], .is-guest .notif-wrap, .is-guest .m-form, .is-guest .view-as { display: none !important; }
.is-guest .m-check { pointer-events: none; }

/* ---------- boxed session tag ---------- */
.stag { display: inline-block; padding: 2px 6px 1px; font: 500 11.5px var(--f-mono); letter-spacing: 0.04em; color: var(--cyan-hi); text-decoration: none; border: 1px solid var(--line-2); background: rgba(76, 201, 255, 0.06); vertical-align: 1px; }
.stag:hover { border-color: var(--cyan); background: rgba(76, 201, 255, 0.16); color: #fff; }

/* ---------- link preview card ---------- */
.lp { position: fixed; z-index: 60; width: 320px; color: var(--text); background: linear-gradient(180deg, #0c1f35, #050d19); border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); pointer-events: auto; animation: lp-in 0.14s ease-out; }
.lp[hidden] { display: none; }
.lp img { display: block; width: 100%; max-height: 190px; object-fit: cover; object-position: center top; border-bottom: 1px solid var(--line-2); background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(76, 201, 255, 0.22), transparent 70%), linear-gradient(180deg, #0b1b30, #050c17); }
.lp.wide img { aspect-ratio: 16 / 9; max-height: none; object-position: center; }
.lp-b { display: grid; gap: 5px; padding: 11px 14px 13px; }
.lp-b .lbl { font-size: 11.5px; color: var(--cyan); }
.lp-b b { font-family: var(--f-head); font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.lp-b p { margin: 0; font-size: 13px; line-height: 1.5; color: #c7d9e8; }
@keyframes lp-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- main page ---------- */
.hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cover img { flex: none; min-height: 0; aspect-ratio: 16 / 9; }

/* database sections: sci-fi folders that open on hover */
.folders { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 34px 0 6px; }
.folder { position: relative; display: block; height: 158px; perspective: 700px; color: var(--text); text-decoration: none; outline: none; }
.f-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--fc) 60%, transparent);
  clip-path: polygon(0 8px, 8px 0, 44% 0, calc(44% + 12px) 12px, 100% 12px, 100% 100%, 0 100%); }
.f-back::before { content: ""; position: absolute; inset: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 22%, #07111f), #040a14);
  clip-path: polygon(0 7px, 7px 0, calc(44% - 1px) 0, calc(44% + 11px) 12px, 100% 12px, 100% 100%, 0 100%); }
.f-sheet { position: absolute; left: 9%; right: 9%; top: 20px; height: 62%; display: flex; align-items: flex-start; justify-content: flex-end; padding: 7px 9px;
  background: repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in srgb, var(--fc) 22%, transparent) 9px 10px), linear-gradient(180deg, #13263c, #0a1828);
  border: 1px solid color-mix(in srgb, var(--fc) 55%, transparent); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.f-sheet .mono { font-size: 10px; color: color-mix(in srgb, var(--fc) 80%, #fff); background: #0a1828; padding: 0 3px; }
.f-front { position: absolute; left: 0; right: 0; bottom: 0; height: 76%; display: grid; grid-template-rows: auto 1fr auto; align-items: end; padding: 10px 14px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 30%, #0a1626) 0%, color-mix(in srgb, var(--fc) 10%, #071120) 45%, #050d19 100%);
  border-top: 1px solid var(--fc); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transform-origin: 50% 100%; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.35s; }
.f-front::after { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 1px; background: linear-gradient(90deg, var(--fc), transparent); opacity: 0.5; }
.f-code { font-size: 10px; color: color-mix(in srgb, var(--fc) 70%, var(--text-3)); align-self: start; }
.f-ic svg { width: 40px; height: 40px; fill: none; stroke: var(--fc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fc) 60%, transparent)); }
.f-ic svg circle[r=".9"] { fill: var(--fc); }
.f-name { margin-top: 6px; font-family: var(--f-head); font-weight: 500; font-size: 15px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: #ecf7ff; }
.folder:hover .f-sheet, .folder:focus-visible .f-sheet { transform: translateY(-22px); }
.folder:hover .f-front, .folder:focus-visible .f-front { transform: rotateX(-22deg); filter: brightness(1.18); }
.folder:hover .f-name, .folder:focus-visible .f-name { color: color-mix(in srgb, var(--fc) 45%, #fff); }
.folder:focus-visible .f-back { background: var(--fc); }
@media (prefers-reduced-motion: reduce) { .f-sheet, .f-front { transition: none; } }

.crew-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.crew-grid.npc { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

/* ---------- sessions: chronological, compact ---------- */
.season { margin-top: 22px; }
.season-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); font-weight: 400; }
.season-h b { font-family: var(--f-head); font-weight: 500; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.season-h .mono { margin-left: auto; }
.sess-list { gap: 6px; }
.sess-list li { grid-template-columns: 96px 64px minmax(0, 1fr) auto; gap: 12px; padding: 5px 12px 5px 5px; }
.sess-list img { width: 96px; }
.sess-list b { font-size: 15.5px; }
.sess-list .sid { color: var(--cyan-hi); }
.sess-list li.next { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: rgba(76, 201, 255, 0.07); }
.sess-list .sdate { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- missions ---------- */
.missions .doc-actions .sync { margin-right: 6px; }
.m-form { display: grid; gap: 14px; margin: 18px 0 6px; }
.m-form[hidden] { display: none; }
.m-form textarea { width: 100%; resize: vertical; font: inherit; }
.m-form-row { display: flex; justify-content: flex-end; gap: 8px; }
.m-filter { margin: 18px 0 14px; }
.m-filter button { padding: 7px 12px 5px; font-size: 13px; }
.m-filter .n { margin-left: 4px; color: var(--text-2); }
.m-list { display: grid; gap: 10px; }
.mission { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 14px 14px 12px; border: 1px solid var(--line); border-left: 2px solid var(--amber); background: rgba(3, 10, 20, 0.5); }
.mission.done { border-left-color: var(--green); }
.mission.done .m-title { color: var(--text-2); }
.m-check { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; padding: 0; color: transparent; background: rgba(3, 10, 20, 0.7); border: 1px solid var(--line-2); cursor: pointer; }
.m-check:hover { border-color: var(--cyan); }
.m-check[aria-pressed="true"] { color: var(--green); border-color: var(--green); background: rgba(63, 224, 160, 0.1); }
.m-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-check:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.m-title { margin: 2px 0 6px; font-family: var(--f-head); font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.m-desc { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: #c7d9e8; }
.mission.editing .m-desc { padding: 8px 10px; outline: 1px solid var(--cyan); background: rgba(76, 201, 255, 0.06); }
.mission.editing .m-edit { color: var(--cyan-hi); border-color: var(--cyan); }
.m-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.m-tag { display: inline-flex; align-items: center; gap: 7px; }
.m-tag .lbl { font-size: 11.5px; color: var(--text-3); }
.m-by { margin-left: auto; font-size: 10.5px; color: var(--text-3); }
.empty { color: var(--text-3); }

/* ---------- timeline ---------- */
.tl { list-style: none; margin: 26px 0 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 130px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 4%, var(--line-2) 96%, transparent); }
.tl-ev { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 36px; padding: 0 0 22px; }
.tl-ev::before { content: ""; position: absolute; left: 126px; top: 6px; width: 9px; height: 9px; transform: rotate(45deg); background: #050d19; border: 1px solid var(--cyan); box-shadow: 0 0 8px rgba(76, 201, 255, 0.5); }
.tl-y { font-family: var(--f-label); font-size: 20px; line-height: 1.1; letter-spacing: 0.06em; text-align: right; color: var(--cyan-hi); }
.tl-b b { display: block; margin-bottom: 4px; font-family: var(--f-head); font-weight: 500; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.tl-b p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: #c7d9e8; max-width: 72ch; }
.tl-b .mono { font-size: 11px; color: var(--text-3); }
.tl-ev.now .tl-y { color: var(--amber); }
.tl-ev.now::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 12px rgba(255, 154, 60, 0.7); }

@media (max-width: 1240px) {
  .folders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .folder { height: 150px; }
  .f-front { padding: 8px 10px 10px; }
  .f-name { font-size: 13px; }
  .sess-list li { grid-template-columns: 84px minmax(0, 1fr); gap: 2px 12px; }
  .sess-list img { width: 84px; grid-row: span 3; }
  .mission { grid-template-columns: auto minmax(0, 1fr); }
  .m-edit { grid-column: 2; justify-self: start; }
  .tl::before { left: 6px; }
  .tl-ev { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 26px; }
  .tl-ev::before { left: 2px; }
  .tl-y { text-align: left; }
}

.doc-meta .back { font: 600 11.5px/1.6 var(--f-mono); letter-spacing: 0.08em; text-decoration: none; color: var(--cyan); margin-right: 6px; }
.doc-meta .back:hover { color: var(--cyan-hi); }

/* ==========================================================================
   v0.5: crew roster, missions checklists + story missions, AI quota refresh
   ========================================================================== */

/* main page: centred square character cards, no subtitles */
.crew-grid, .crew-grid.npc { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.crew-grid .crew-card { width: 150px; }
.crew-grid.npc .crew-card { width: 128px; }
.crew-grid .pf { aspect-ratio: 1 / 1; }
#cd-when { white-space: nowrap; }

/* crew roster: all player characters in one scene */
.roster { --pad: 0px; --cut: 16px; }
.roster .panel-h { padding: 12px 18px; margin: 0; border-bottom: 1px solid var(--line); }
.roster-stage { height: clamp(440px, calc(100vh - var(--topbar-h) - 222px), 860px); }   /* the plates end level with the chat button (GM, 2026-10-18) */
.main:has(> .roster) { padding-bottom: 18px; }
.plates { position: relative; height: 136px; border-top: 1px solid var(--line); }
.plate { position: absolute; top: 12px; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; padding: 10px 10px 11px; text-align: center; color: var(--text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--dept) 40%, transparent); border-top: 2px solid var(--dept);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dept) 12%, #071120), #050d19); transition: border-color 0.15s, box-shadow 0.15s; }
.plate b { font-family: var(--f-head); font-weight: 500; font-size: 16px; line-height: 1.15; letter-spacing: 0.05em; text-transform: uppercase; color: #ecf7ff; }
.plate .rankline { margin: 0; gap: 6px; }
.plate .rankline .lbl { font-size: 11px; color: color-mix(in srgb, var(--dept) 70%, #fff); }
.plate .post { font-size: 12.5px; line-height: 1.3; color: #c7d9e8; }
.plate .mono { font-size: 10.5px; color: var(--text-3); }
.plate.pending b { color: var(--text-2); }
.plate.hot, .plate:focus-visible { border-color: var(--dept); box-shadow: 0 0 18px color-mix(in srgb, var(--dept) 30%, transparent); outline: none; }

/* missions */
.m-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 14px; }
.m-bar .m-filter { margin: 0; }
#m-role button { padding: 6px 10px 4px; font-size: 12px; }
.m-tags { align-items: center; }
.m-tag { display: inline-flex; align-items: center; gap: 8px; height: 24px; }
.m-tag .lbl { display: inline-flex; align-items: center; height: 24px; line-height: 1; padding-top: 2px; }
.stag { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 7px; line-height: 1; vertical-align: middle; }
.m-prog { font: 500 12px var(--f-mono); color: var(--cyan-hi); }
.mission.story { position: relative; isolation: isolate; overflow: hidden; border-color: rgba(232, 184, 74, 0.45); border-left: 3px solid var(--gold);
  background: repeating-linear-gradient(180deg, rgba(255, 230, 170, 0.03) 0 1px, transparent 1px 3px),
              linear-gradient(250deg, rgba(232, 184, 74, 0.2), rgba(232, 184, 74, 0.06) 45%, rgba(232, 184, 74, 0.015) 75%);   /* gold on the right: text side stays clear */ box-shadow: inset 0 0 24px rgba(232, 184, 74, 0.06); }
.mission.story::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 15L52 30V60L26 75L0 60V30Z M26 0V15 M26 75V90' fill='none' stroke='%23e8b84a' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 52px 90px; background-position: left top;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.45) 35%, transparent 75%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.45) 35%, transparent 75%); }
.mission.story .m-title { color: #fff3d6; }
.mission.story .m-check { border-color: rgba(232, 184, 74, 0.6); }
.m-edit[aria-pressed="true"] { color: var(--cyan-hi); border-color: var(--cyan); background: rgba(76, 201, 255, 0.12); }
.m-story { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-family: var(--f-label); font-size: 12px; letter-spacing: 0.16em; color: var(--gold); }
.m-story svg { width: 27px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-items { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.m-items li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #c7d9e8; }
.m-item { display: grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; color: transparent; background: rgba(3, 10, 20, 0.7); border: 1px solid var(--line-2); cursor: pointer; }
.m-item svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-item[aria-pressed="true"] { color: var(--green); border-color: var(--green); }
.m-item[aria-pressed="true"] + .m-it { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(163, 230, 255, 0.35); }
.m-item:hover { border-color: var(--cyan); }
.m-item:disabled, .m-check:disabled { cursor: default; }
.m-del { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; margin-left: 2px; color: var(--text-3); background: none; border: 0; cursor: pointer; opacity: 0; }
.m-items li:hover .m-del, .m-del:focus-visible { opacity: 1; }
.m-del:hover { color: #ffb3bd; }
.m-del svg { width: 14px; height: 14px; }
.m-add-item .input { width: min(360px, 100%); padding: 5px 9px; font-size: 13px; background: transparent; border-style: dashed; }
.m-story-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gold); cursor: pointer; }
.m-story-opt[hidden] { display: none; }
.m-story-opt .mono { font-size: 10.5px; color: var(--text-3); }

/* Ship AI quota: at the limit it becomes a refresh button */
.q-refresh { width: 100%; margin-bottom: 10px; color: #021120; background: linear-gradient(180deg, #ffc46b, #d98a1f); border-color: transparent; }
.q-refresh:hover { background: linear-gradient(180deg, #ffd38c, #e99a2f); color: #021120; }
.q-refresh[hidden] { display: none; }
.quota.out .quota-bar span { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.quota.out .quota-h b { color: var(--amber); }

@media (max-width: 640px) {
  .crew-grid .crew-card { width: calc(50% - 7px); }
  .crew-grid.npc .crew-card { width: calc(33.33% - 10px); }
  .plates { height: 84px; }
  .plate { padding: 6px 4px; }
  .plate b { font-size: 11px; }
  .plate .post, .plate .rankline .lbl, .plate .mono { display: none; }
}

/* ---------- Alliance Fleet emblem: large background silhouette (crew roster, character sheet) ---------- */
.fleet-mark { position: absolute; aspect-ratio: 262 / 480; pointer-events: none; }
.fleet-mark .fm-fill, .fleet-mark .fm-sheen { position: absolute; inset: 0;
  -webkit-mask: url("alliance-mark-smooth.png") center / contain no-repeat; mask: url("alliance-mark-smooth.png") center / contain no-repeat; }
.fleet-mark .fm-sheen { background: linear-gradient(115deg, transparent 35%, rgba(150, 215, 255, 0.10) 48%, transparent 60%) 0 0 / 300% 100% no-repeat;
  animation: fm-sheen 9s ease-in-out infinite; }
@keyframes fm-sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .fleet-mark .fm-sheen { animation: none; opacity: 0; } }

/* crew roster: the logo's own shapes only (no outline), quiet, centred behind the models */
.roster-mark { left: 50%; top: 3%; height: 94%; transform: translateX(-50%); }   /* the whole emblem fits, its top is no longer cut */
.roster-mark .fm-fill { background: linear-gradient(170deg, rgba(76, 170, 255, 0.13), rgba(40, 100, 200, 0.06) 60%, rgba(20, 60, 140, 0.02)); }
.stage.loading .roster-mark { opacity: 0.5; }

/* character sheet: the whole PERSONNEL FILE panel gets monitor lines; the emblem shows through them faintly, like on the crew roster */
.sheet { position: relative; isolation: isolate; overflow: hidden; }
.sheet > :not(.sheet-mark):not(.sheet-lines) { position: relative; z-index: 1; }
.sheet-mark { z-index: 0; right: 3%; top: 90px; height: min(700px, 76%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.sheet-mark .fm-fill { background: linear-gradient(170deg, rgba(76, 170, 255, 0.10), rgba(40, 100, 200, 0.05) 60%, rgba(20, 60, 140, 0.02)); }
.sheet-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(120, 200, 255, 0.045) 0 1px, transparent 1px 4px); }

.crew-grid.crew-npc { margin-top: 14px; }
.cc-b .pips { justify-self: start; }

/* breadcrumbs: every item in the label font (like ARCHIVE); the current page a little brighter */
.crumbs a, .crumbs > span:not(.sep) { font-family: var(--f-label); font-size: 14px; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; color: var(--text-3); }
.crumbs > span:not(.sep):last-child { color: var(--text-2); }
.crumbs a:hover { color: var(--cyan-hi); }

/* ---------- character sheet: header row (title, sync, file meta, actions), empty values, edit mode ---------- */
.sheet { container: sheet / inline-size; }
.sheet-h { display: flex; align-items: center; gap: 10px 16px; flex-wrap: nowrap; }
.sheet-h .lbl { white-space: nowrap; }
.sync-tag { display: inline-flex; align-items: center; gap: 8px; font: 12px var(--f-mono); letter-spacing: 0.06em; color: var(--text-2); white-space: nowrap; }
.sync-tag #sync.err { color: #ffb3bd; }
.ph-meta { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.ph-meta b { color: var(--text-2); font-weight: 500; }
.ph-meta .gap { width: 10px; }
.ph-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
@container sheet (max-width: 760px) { .ph-meta { display: none; } }
@container sheet (max-width: 560px) { #sync { display: none; } }
@container sheet (max-width: 480px) { .ph-actions .btn:not([data-edit]):not(#sheet-cancel) { display: none; } }
.sheet > .panel-h + * { margin-top: 4px; }
.empty-v { font-style: italic; font-weight: 400; color: var(--text-3); }
button.aspect:disabled { cursor: default; }
.chip.warn { color: var(--amber); border-color: rgba(255, 154, 60, 0.5); }
.pc-name.pending { color: var(--text-2); }
.nc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet.editing .aspect.edit { grid-template-columns: 116px 1fr; }
.aspect.edit .input { width: 100%; font-size: 15px; }
.sk-sel { width: auto; min-width: 150px; padding: 6px 8px; font-size: 14px; }
.sk-sel.dup { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255, 61, 85, 0.2); }
.stunt.edit { display: grid; gap: 8px; }
.stunt.edit .stunt-h { align-items: center; flex-wrap: nowrap; }
.stunt.edit .st-n { flex: 1; min-width: 0; }
.stunt.edit textarea { width: 100%; resize: vertical; font: inherit; font-size: 14px; }
.st-add { justify-self: start; }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.btn[hidden] { display: none; }
#s-skills, #s-stunts { margin-top: 28px; }
.nc-actions .btn { flex: 1; text-align: center; }

/* missions: failed (Ctrl+click) = red cross */
.m-item.fail, .m-check.fail { color: var(--red); border-color: var(--red); background: rgba(255, 61, 85, 0.1); }
.m-item.fail + .m-it { color: #ffb3bd; text-decoration: line-through; text-decoration-color: rgba(255, 61, 85, 0.5); }
.mission.failed { border-left-color: var(--red); }
.mission.failed .m-title { color: #ffb3bd; }
.m-tag.fail .lbl { color: #ffb3bd; }
.m-prog-fail { font-style: normal; color: var(--red); margin-left: 4px; }

/* department / position icons: outlined in the rail, filled on the roster plates */
.dept-ic { display: block; }
.ri-tile .dept-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.rail .ri-me { margin-top: auto; }
.ri-me .ri-tile .dept-ic { color: color-mix(in srgb, var(--dept) 70%, #fff); }
.plate { overflow: hidden; padding-left: 60px; }
.plate .plate-ic { position: absolute; left: 10px; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); fill: color-mix(in srgb, var(--dept) 45%, transparent); opacity: 0.55; }
.plate.hot .plate-ic { opacity: 0.9; }
@media (max-width: 640px) { .plate { padding-left: 4px; justify-items: center; text-align: center; } .plate .plate-ic { display: none; } }

/* breadcrumbs: one font for Latin and Cyrillic — Bebas (its Cyrillic face, GM 2026-10-23; was Oswald) */
.crumbs a, .crumbs > span:not(.sep), .crumbs .lbl { font-family: var(--f-label); font-weight: 400; font-size: 15px; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; }

/* Russian interface labels: Bebas Neue's own Cyrillic face (GM 2026-10-23; until then Oswald, slightly tighter) */
.lang-ru .ri-tile span { font-size: 11.5px; }
.lang-ru .brand-t { font-size: 17px; letter-spacing: 0.06em; }
.lang-ru .login-title h1 { font-size: clamp(26px, 7vw, 38px); letter-spacing: 0.08em; padding-left: 0.08em; }

/* profile menu */
.topbar { position: sticky; }
.user { cursor: pointer; }
.user-menu { position: absolute; right: 12px; top: calc(100% + 6px); z-index: 45; width: 290px; --pad: 0px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.user-menu[hidden] { display: none; }
.user-menu .panel-h { margin: 0; padding: 12px 16px 11px; }
.um-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.um-row .lbl { font-size: 13px; color: var(--text-2); }
.um-link { display: block; padding: 12px 16px; font-family: var(--f-label); font-size: 14px; letter-spacing: 0.14em; color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--line); }
.um-link:hover { background: rgba(76, 201, 255, 0.08); color: var(--cyan-hi); }
.um-link.danger { color: #ffb3bd; border-bottom: 0; }

/* leaving the page: the 3D stage turns into the holographic blue screen at once (no white canvas flash) */
.stage.leaving canvas { visibility: hidden; }
.stage.leaving .stage-holo .hb { opacity: 1; transition: none; }

/* aspect editing: title + description + invoke / compel lines */
.asp-edit { display: grid; gap: 6px; }
.asp-edit textarea { width: 100%; resize: vertical; font: inherit; font-size: 13.5px; }
.asp-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 640px) { .asp-ic { grid-template-columns: 1fr; } }

/* skill points: [ + ] on each rung and its pick list */
.chip.pts { color: var(--gold); border-color: rgba(232, 184, 74, 0.55); }
.rung-add-wrap { position: relative; display: inline-flex; }
.rung-add { width: 34px; height: 33px; padding: 0; font: 600 18px var(--f-mono); color: var(--gold); background: rgba(232, 184, 74, 0.08); border: 1px dashed rgba(232, 184, 74, 0.6); cursor: pointer; }
.rung-add:hover:not(:disabled) { background: rgba(232, 184, 74, 0.2); border-style: solid; }
.rung-add:disabled { color: var(--text-3); border-color: var(--line); background: none; cursor: not-allowed; }
.rung-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; min-width: 220px; max-height: 280px; overflow: auto; --pad: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.rung-menu .lbl { padding: 4px 6px 6px; color: var(--gold); font-size: 12px; }
.rung-pick { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; font-size: 14px; text-align: left; color: var(--text); background: none; border: 0; cursor: pointer; }
.rung-pick:hover { background: rgba(232, 184, 74, 0.14); }
.rung-pick .mono { font-size: 11px; color: var(--text-3); }

/* campaign settings (GM) */
.c-block { margin-top: 26px; }
.c-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.c-row .lbl { font-size: 15px; color: var(--cyan-hi); }
.c-note { margin: 6px 0 0; max-width: 70ch; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.c-row .seg button { padding: 7px 14px 5px; font-size: 15px; }
.c-stepper { display: inline-flex; align-items: center; gap: 12px; }
.c-stepper b { min-width: 34px; text-align: center; font-family: var(--f-label); font-size: 30px; font-weight: 400; color: var(--gold); }
.c-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.c-table th, .c-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.c-table th { font-family: var(--f-label); font-weight: 400; font-size: 13px; letter-spacing: 0.12em; color: var(--text-3); }
.c-table .tbl-ic { width: 22px; height: 22px; fill: color-mix(in srgb, var(--dept) 70%, transparent); }
.c-table td.left { color: var(--gold); }

/* GM-prepared missions hidden from players (eye toggle) */
.m-tools { display: inline-flex; gap: 6px; align-self: start; }
.m-eye[aria-pressed="false"] { color: var(--gm); border-color: color-mix(in srgb, var(--gm) 55%, transparent); }
.mission.hidden-m { border-style: dashed; opacity: 0.75; }
.mission.hidden-m:hover { opacity: 1; }
.m-hidden-tag { display: inline-block; margin: 0 10px 4px 0; font-family: var(--f-label); font-size: 12px; letter-spacing: 0.16em; color: var(--gm); }
.m-hide-opt { color: var(--gm); }

.c-season { display: inline-flex; gap: 8px; }
.c-season .select { width: auto; }
.c-season .input { width: 220px; }
.c-table td .dot { margin-right: 6px; }
.c-table .dot:not(.live) { background: var(--text-3); box-shadow: none; }

/* ---------- sessions list rows = links to session pages ---------- */
.sess-list li > a { display: contents; color: inherit; text-decoration: none; }
.sess-list li:has(a:hover) { border-color: var(--line-2); background: rgba(76, 201, 255, 0.06); }
.sess-list li:has(a:hover) b { color: var(--cyan-hi); }

/* ---------- wiki links: stub character (no page yet) ---------- */
.wl.stub { color: #9aa7b3; border-bottom: 1px dashed rgba(154, 167, 179, 0.55); }
.wl.stub:hover { background: rgba(154, 167, 179, 0.12); color: #d4dde5; }
.stag.missing { color: var(--amber); border-color: rgba(255, 154, 60, 0.5); background: none; }

/* ---------- session page ---------- */
.sp .doc-title { margin-top: 16px; }
.sp .h-sect { margin: 30px 0 14px; }
.sp .h-sect .icon-btn { margin-left: auto; width: auto; min-width: 34px; height: 30px; }
.sp .h-sect .icon-btn .lbl { padding: 0 6px; font-size: 13px; color: var(--cyan-hi); }
.sp .empty { color: var(--text-3); font-style: italic; }
.sp-mgroup { display: grid; gap: 6px; margin-bottom: 14px; }
.sp-mgroup > .lbl { font-size: 12px; color: var(--text-3); }
.sp-mgroup.done > .lbl { color: var(--green); }
.sp-mgroup.fail > .lbl { color: var(--red); }
.sp-m { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 14px 9px 10px; color: var(--text); text-decoration: none; border: 1px solid var(--line); border-left: 2px solid var(--line-2); background: rgba(3, 10, 20, 0.45); }
.sp-m:hover { border-color: var(--line-2); background: rgba(76, 201, 255, 0.06); }
.sp-m b { font-family: var(--f-head); font-weight: 500; font-size: 15.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.sp-m .mono { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sp-m .m-hidden-tag { margin: 0; }
.sp-m.story { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(232, 184, 74, 0.1), rgba(3, 10, 20, 0.45) 60%); }
.sp-m.done { border-left-color: var(--green); }
.sp-m.fail { border-left-color: var(--red); }
.sp-m.fail b { color: #ffb3bd; text-decoration: line-through; text-decoration-color: rgba(255, 61, 85, 0.6); }
.sp-m.hidden-m { border-style: dashed; opacity: 0.8; }
.sp-chev { width: 26px; height: 11px; fill: none; stroke: var(--gold); stroke-width: 2; }
.sp-dot { justify-self: center; width: 7px; height: 7px; background: var(--cyan); transform: rotate(45deg); }
.sp-m.done .sp-dot { background: var(--green); }
.sp-m.fail .sp-dot { background: var(--red); }
.sp-cast { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.crew-card.cameo { opacity: 0.55; }
.crew-card.cameo:hover { opacity: 0.85; }
.crew-card.stub { border-style: dashed; filter: grayscale(1); }
.crew-card.stub .pf img { opacity: 0.45; }
.cc-tag { justify-self: start; padding: 1px 6px 0; font: 500 10px var(--f-mono); letter-spacing: 0.08em; color: var(--text-2); border: 1px solid var(--line-2); }
.crew-card.stub .cc-tag { color: var(--cyan-hi); }
.cc-st { font: 500 10px var(--f-mono); letter-spacing: 0.06em; color: var(--red); }
.crew-card.stub .cc-st { filter: none; }
.cc-edit { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 8px 8px; }
.cc-edit .icon-btn { width: 28px; height: 28px; }
.cc-edit .icon-btn svg { width: 16px; height: 16px; }
.sp-cast.editing .crew-card.cameo { opacity: 0.7; }
.sp-add { display: flex; gap: 10px; align-items: center; margin-top: 12px; max-width: 640px; }
.sp-cameo-opt { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.toc a.sub { padding-left: 22px; font-size: 13px; }
@media (max-width: 640px) {
  .sp-m { grid-template-columns: 24px minmax(0, 1fr); }
  .sp-m .mono, .sp-m .m-hidden-tag { grid-column: 2; }
  .sp-add { flex-wrap: wrap; }
}

/* ---------- wiki editor ---------- */
.ed-meta { display: grid; gap: 14px; margin: 18px 0 16px; }
.ed-title .input { font: 500 26px/1.2 var(--f-head); letter-spacing: 0.03em; text-transform: uppercase; color: #ecf7ff; }
.ed-title, .ed-field { display: grid; gap: 5px; }
.ed-title > .lbl, .ed-field > .lbl, .ed-cats > .lbl { font-size: 12px; color: var(--text-3); }
.ed-row { display: flex; flex-wrap: wrap; gap: 14px; }
.ed-row .select { min-width: 220px; }
.ed-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-cats > .lbl { margin-right: 6px; }
.ed-cats .chip button { margin-left: 6px; padding: 0; color: var(--text-3); background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; }
.ed-cats .chip button:hover { color: var(--red); }
.ed-cats .input { width: 170px; padding: 4px 8px; font-size: 13px; }
.ed-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.4); }
.ed-card legend { padding: 0 6px; font-size: 13px; color: var(--cyan-hi); }
.ed-card .ed-field[hidden] { display: none; }
.ed-card .select { width: 100%; }
.ed-calc { font-size: 11px; color: var(--cyan); }
.ed-cover { grid-column: 1 / -1; }
.ed-img { display: flex; align-items: center; gap: 12px; }
.ed-img img { width: 64px; height: 80px; object-fit: cover; object-position: center top; border: 1px solid var(--line); }
.ed-img.wide img { width: 240px; height: auto; aspect-ratio: 16 / 9; }
.ed-tools { position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line-2); background: rgba(5, 12, 23, 0.94); backdrop-filter: blur(6px); }
.ed-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.ed-tb { min-width: 32px; height: 30px; padding: 0 8px; font: 500 13px var(--f-mono); color: var(--cyan-hi); background: rgba(76, 201, 255, 0.06); border: 1px solid var(--line); cursor: pointer; }
.ed-tb:hover:not(:disabled) { border-color: var(--cyan); background: rgba(76, 201, 255, 0.16); color: #fff; }
.ed-tb:disabled { opacity: 0.35; cursor: not-allowed; }
.ed-tb.clr { color: var(--amber); border-color: rgba(255, 154, 60, 0.4); font-family: var(--f-label); letter-spacing: 0.08em; }
.ed-tb.gm { color: color-mix(in srgb, var(--gm) 80%, #fff); border-color: color-mix(in srgb, var(--gm) 45%, transparent); font-family: var(--f-label); letter-spacing: 0.08em; }
.ed-body { display: grid; margin-top: 14px; min-height: 300px; }
.ed-chunk { min-height: 1.75em; padding: 4px 10px; outline: none; border-left: 2px solid transparent; transition: border-color 0.15s, background 0.15s; }
.ed-chunk:hover { border-left-color: var(--line); }
.ed-chunk:focus { border-left-color: var(--cyan); background: rgba(76, 201, 255, 0.03); }
.ed-chunk:empty::before { content: attr(data-ph); color: var(--text-3); font-style: italic; }
.ed-chunk a.wl, .ed-chunk .stag { cursor: default; }
.ed-chunk.in-block { padding: 2px 6px; }
.ed-src { width: 100%; margin: 4px 0; font: 13.5px/1.6 var(--f-mono); resize: vertical; }
.ed-block { margin: 16px 0; }
.ed-block .clearance-h .icon-btn, .ed-tags .icon-btn { width: 28px; height: 28px; margin-left: auto; }
.ed-block .clearance-h .icon-btn svg, .ed-tags .icon-btn svg { width: 15px; height: 15px; }
.ed-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ed-tags .lbl { font-size: 12px; color: var(--amber); }
.ed-tags .input { max-width: 340px; padding: 4px 8px; font-size: 13px; }
.ed-cl .cl-body { display: block !important; }
.ed-locked { user-select: none; }
.ed-lock { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 10.5px var(--f-mono); letter-spacing: 0.06em; color: var(--text-3); }
.ed-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.ed-pin { height: 0; }
.ed-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.ed-stat .ed-field > .lbl { color: color-mix(in srgb, var(--gm) 75%, #fff); }
.ed-auto { margin: 16px 0; padding: 10px 14px; border: 1px dashed var(--line-2); background: rgba(76, 201, 255, 0.03); }
.ed-auto .lbl { font-size: 13px; color: var(--cyan); }
.ed-auto p { margin: 4px 0 0; }
.ed-save { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px calc(var(--pad) * -1) calc(var(--pad) * -1); padding: 12px var(--pad); border-top: 1px solid var(--line-2); background: rgba(5, 12, 23, 0.96); }
.ed-save .input { flex: 1; min-width: 200px; }
.ed-save .mono { font-size: 11px; color: var(--text-3); }
.ed-hidden p { margin: 0 0 8px; font-size: 14px; }
.ed-hidden .mono, .ed-note { font-size: 11px; line-height: 1.55; color: var(--text-3); margin: 0; }
.ed-cheat { display: grid; gap: 2px; margin: 0 0 10px; }
.ed-cheat dt { font: 500 12px var(--f-mono); color: var(--cyan-hi); }
.ed-cheat dd { margin: 0 0 6px; font-size: 12.5px; color: var(--text-2); }
.ed-cheat code { font: 12px var(--f-mono); color: var(--cyan-hi); }
.ed-source { width: 100%; font: 11.5px/1.5 var(--f-mono); resize: vertical; color: var(--text-2); }
.ed-ac { position: fixed; z-index: 60; min-width: 260px; max-width: 360px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line-2); background: #06101d; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.ed-ac[hidden] { display: none; }
.ed-ac li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 14px; cursor: pointer; }
.ed-ac li .mono { font-size: 10.5px; color: var(--text-3); }
.ed-ac li[aria-selected="true"], .ed-ac li:hover { background: rgba(76, 201, 255, 0.14); color: #fff; }
@media (max-width: 640px) {
  .ed-row .select { min-width: 0; width: 100%; }
  .ed-img.wide img { width: 160px; }
}
.sp .h-sect .icon-btn[hidden] { display: none; }
.ed-media { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.ed-media > .lbl { font-size: 12px; color: var(--text-3); }
.ed-media-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-mtab { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid var(--line); background: rgba(76, 201, 255, 0.05); }
.ed-mtab.on { border-color: var(--cyan); }
.ed-mtab .mono { font-size: 10px; color: var(--cyan); }
.ed-mtab .input { width: 130px; padding: 3px 6px; font-size: 12px; }
.ed-mtab button { padding: 0 2px; color: var(--text-3); background: none; border: 0; cursor: pointer; }
.ed-mtab button:hover { color: var(--red); }
.ed-media > .mono { font-size: 11px; color: var(--text-3); margin: 0; }
@media (max-width: 640px) { .ed-save .mono { display: none; } .ed-save { gap: 8px; } }

/* main page title: EN labels → big English, small Russian; RU labels → big Russian, small English (never translated, so the phrase is not repeated) */
.ru-only { display: none; }
.lang-ru .ru-only { display: inline; }
.lang-ru .en-only { display: none; }
.hero-small .en-only { font-family: 'Bebas Neue', 'Bebas Neue Cyr', sans-serif; letter-spacing: 0.14em; }
.hero-title .en-only { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.2em; letter-spacing: 0.06em; }
.lang-ru .hero-small .ru-only { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.14em; }

/* session page datacard (like a wiki episode infobox): cover always full 16:9 */
.sp-info { width: 340px; }
.sp-info .panel-h { justify-content: space-between; }
.sp-info .panel-h .mono { font-size: 10.5px; color: var(--text-3); }
.sp-info .infobox-name { padding: 12px 16px 10px; font-size: 16px; line-height: 1.3; text-align: center; }
.sp-cover { aspect-ratio: 16 / 9; overflow: hidden; border-block: 1px solid var(--line); background: #02050a; }
.sp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-info-h { padding: 10px 16px 0; text-align: center; }
.sp-info-h .lbl { font-size: 13px; color: var(--cyan-hi); }
.sp-info dl { grid-template-columns: 104px 1fr; }
.sp-info dd .stag.full { white-space: normal; }
body:not(.is-gm) .sp-gm-only { display: none; }

/* full session tag {{1x03}} → [1x03 - Title] */
.stag.full { padding: 1px 7px 0; font: 500 13.5px/1.45 var(--f-body); letter-spacing: 0; }
.stag.full .sid { font: 500 11.5px var(--f-mono); letter-spacing: 0.04em; }
.stag.full .st-sep { color: var(--text-3); }

/* datacard media tabs: thumbnail, label, reorder (drag or ‹ ›) */
.ed-mtab { cursor: grab; }
.ed-mtab.drag { opacity: 0.4; }
.ed-mtab.over { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(76, 201, 255, 0.25); }
.ed-mthumb { display: grid; place-items: center; width: 44px; height: 30px; overflow: hidden; border: 1px solid var(--line); background: #02050a; }
.ed-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.ed-mthumb b { font: 500 10px var(--f-mono); color: var(--cyan); }
.ed-mtxt { display: grid; gap: 1px; }
.ed-mtxt .mono { font-size: 9.5px; color: var(--text-3); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-mbtns { display: inline-flex; }
.ed-mbtns button:disabled { opacity: 0.3; cursor: default; }
.ed-tagf { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ed-tagf .chip button { margin-left: 6px; padding: 0; color: var(--text-3); background: none; border: 0; cursor: pointer; }
.ed-tagf .chip.warn { color: var(--amber); border-color: rgba(255, 154, 60, 0.45); }
.ed-tagf .input { flex: 1; min-width: 120px; padding: 5px 8px; font-size: 13px; }
@media (max-width: 640px) { .sp-info .panel-h .mono { display: none; } }

/* character datacard: media tabs (3D model / portrait) — the same viewer as the personnel file */
.ib-tabs { gap: 6px; padding: 8px 12px; }
.infobox-art.ib-media { height: 400px; }
.ib-media .ib-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 34px; height: auto; }
.ib-media .ib-image { position: absolute; top: 0; right: 0; bottom: 0; left: 34px; width: calc(100% - 34px); height: 100%; padding: 0; object-fit: cover; object-position: center top; }
.ib-media[data-show="model"] .ib-image { visibility: hidden; }
.ib-media[data-show="image"] .ib-stage { visibility: hidden; }
.ib-media .rank-strip { z-index: 2; }
.ib-stage .stage-ctl { right: 8px; bottom: 8px; gap: 4px; }
.ib-stage .stage-ctl button { width: 30px; height: 28px; }
.ib-stage .stage-view { right: 8px; top: 8px; }
.ib-stage .stage-load { font-size: 12px; white-space: nowrap; }
@media (max-width: 900px) { .infobox-art.ib-media { height: 440px; } }

/* ---------- rail: every tab has its own colour (subtle) ---------- */
.ri { --tab: var(--cyan); color: color-mix(in srgb, var(--tab) 50%, var(--text-3)); }
.ri:hover { color: color-mix(in srgb, var(--tab) 80%, #fff); }
.ri:hover .ri-tile { background: color-mix(in srgb, var(--tab) 45%, transparent); }
.ri[aria-current="page"] { color: #fff; }
.ri[aria-current="page"] .ri-tile { background: var(--tab); }
.ri[aria-current="page"] .ri-tile::before { background: linear-gradient(180deg, color-mix(in srgb, var(--tab) 42%, #06142a), color-mix(in srgb, var(--tab) 14%, #050d19)); }
.ri[aria-current="page"] .ri-tile span { text-shadow: 0 0 8px color-mix(in srgb, var(--tab) 80%, transparent); }
.ri[aria-current="page"]::before { background: var(--tab); border-color: var(--tab); box-shadow: 0 0 10px var(--tab); }
.ri[aria-current="page"]::after { background: var(--tab); box-shadow: 0 0 6px var(--tab); }
.ri-me::before, .ri-me::after { display: none; }   /* the bus ends above ME: no node, no connector */
.rail .ri-low { margin-top: auto; }            /* CAMPAIGN (GM) sits at the bottom with ME */
.rail .ri-low ~ .ri-me { margin-top: 0; }
/* MAP: a round porthole with drifting deep space, set apart from the tile groups (GM, 2026-10-18) */
.ri-map { display: grid; justify-items: center; margin: 4px 0; padding: 2px 0; }
.ri-map::before { border-radius: 50%; transform: translateY(-50%); }
.ri-orb {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--tab) 16%, #07101f), #02040a 72%);
  box-shadow: 0 0 0 4px #050b16, inset 0 0 14px rgba(0, 0, 0, 0.95);   /* no thin ring of its own: the scanner ring is the frame */
  transition: box-shadow 0.2s;
}
/* scanner / navigation ring over the porthole's dark rim (GM, 2026-10-18): fine ticks + three arcs with two markers, all thin and
   only in the rim band, so the space stays visible; it turns while the pointer is on the tab (ticks one way, arcs the other) */
.ri-scope { position: relative; display: block; }
.ri-hud { position: absolute; inset: -5px; z-index: 2; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; overflow: visible;
  fill: none; stroke: var(--tab); opacity: 0.6; transition: opacity 0.2s, filter 0.2s; }
.ri-hud g { transform-box: view-box; transform-origin: 0 0; animation: hud-spin 30s linear infinite paused; }   /* view-box starts at the viewBox's 0,0 = the centre (−32…32), so the origin is 0 0, not 50% */
.ri-hud .hud-ticks circle { stroke-width: 2.6; stroke-dasharray: 1.15 1.85; }       /* 64 bold strokes, r 29.1–31.7 (keep: GM likes it) */
.ri-hud .hud-sight { animation-duration: 11s; animation-direction: reverse; }
.ri-hud .hud-sight circle { stroke-width: 1.5; stroke-dasharray: 39 4.83; stroke-dashoffset: -2.4; }   /* sight: four quarter arcs, gaps at 0/90/180/270° */
/* outside the hatched ring: two half-arcs (gaps at 0° and 180°) with navigation arrows in the gaps — only while hovered */
.ri-hud .hud-out { animation-duration: 17s; opacity: 0; transition: opacity 0.25s; }
.ri-hud .hud-out circle { stroke-width: 1.4; stroke-dasharray: 93.8 11.73; stroke-dashoffset: -5.86; stroke-linecap: round; }
.ri-hud .hud-out path { fill: var(--tab); stroke: none; }
.ri-map:hover .ri-hud .hud-out, .ri-map:focus-visible .ri-hud .hud-out { opacity: 1; }
.ri-map:hover .ri-hud, .ri-map:focus-visible .ri-hud, .ri-map[aria-current="page"] .ri-hud { opacity: 1; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--tab) 70%, transparent)); }
/* every part turns at its own speed / direction: while hovered and for as long as the MAP tab is open */
.ri-map:hover .ri-hud g, .ri-map:focus-visible .ri-hud g, .ri-map[aria-current="page"] .ri-hud g { animation-play-state: running; }
@keyframes hud-spin { to { transform: rotate(360deg); } }
.ri-orb::before, .ri-orb::after, .ri-orb i { content: ""; position: absolute; z-index: -1; inset: -64px; animation: ri-drift var(--t) linear infinite; }
.ri-orb::before {   /* far, faint, dense */
  --t: 22s; --dx: -17px; --dy: 17px;
  background: radial-gradient(circle at 3px 5px, rgba(220, 235, 255, 0.5) 0 0.5px, transparent 1px), radial-gradient(circle at 12px 13px, rgba(200, 220, 255, 0.35) 0 0.5px, transparent 1px);
  background-size: 17px 17px;
}
.ri-orb::after {    /* middle */
  --t: 15s; --dx: -29px; --dy: 29px;
  background: radial-gradient(circle at 7px 9px, rgba(235, 245, 255, 0.8) 0 0.7px, transparent 1.3px), radial-gradient(circle at 21px 23px, rgba(210, 225, 255, 0.6) 0 0.6px, transparent 1.2px);
  background-size: 29px 29px;
}
.ri-orb i {         /* near, few bright stars tinted by the tab colour */
  --t: 9s; --dx: -47px; --dy: 47px;
  background: radial-gradient(circle at 13px 31px, #fff 0 0.9px, color-mix(in srgb, var(--tab) 60%, transparent) 1.4px, transparent 2.6px), radial-gradient(circle at 38px 8px, rgba(255, 255, 255, 0.9) 0 0.7px, transparent 1.6px);
  background-size: 47px 47px;
}
.ri-orb > i::after { content: none; }
@keyframes ri-drift { to { transform: translate(var(--dx), var(--dy)); } }
/* the label lives inside the porthole and shows only on hover / keyboard focus (GM, 2026-10-18) */
.ri-orb .ri-lbl { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding-left: 0.14em;
  font-family: var(--f-label); font-size: 13px; letter-spacing: 0.14em; line-height: 1; color: #fff;
  background: radial-gradient(circle, rgba(2, 5, 12, 0.62) 0 38%, transparent 72%);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tab) 90%, transparent); opacity: 0; transition: opacity 0.18s; }
.ri-map:hover .ri-lbl, .ri-map:focus-visible .ri-lbl { opacity: 1; }
.ri-map:hover .ri-orb { box-shadow: 0 0 0 4px #050b16, 0 0 12px color-mix(in srgb, var(--tab) 30%, transparent), inset 0 0 14px rgba(0, 0, 0, 0.95); }
.ri-map[aria-current="page"] .ri-orb { box-shadow: 0 0 0 4px #050b16, 0 0 14px color-mix(in srgb, var(--tab) 45%, transparent), inset 0 0 12px rgba(0, 0, 0, 0.9); }
@media (prefers-reduced-motion: reduce) { .ri-orb::before, .ri-orb::after, .ri-orb i, .ri-hud g { animation: none; } }
@media (min-width: 901px) and (max-height: 940px) {   /* 16:9 at 125 %: every tab + MAP + ME must fit without scrolling */
  .rail { gap: 7px; padding-top: 12px; }
  .ri-tile { padding: 9px 4px 7px; gap: 5px; }
  .ri-map { margin: 2px 0; }
  .ri-orb { width: 48px; height: 48px; }
}
@media (max-width: 900px) {
  .ri-map { margin: 0; align-content: center; }
  .ri-orb { width: 34px; height: 34px; box-shadow: 0 0 0 3px #050b16, inset 0 0 10px rgba(0, 0, 0, 0.95); }
  .ri-hud { inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); }
  .ri-orb .ri-lbl { font-size: 10px; letter-spacing: 0.04em; }
}
@media (max-width: 600px) {
  .ri-tile span { display: none; }   /* too narrow for labels: icons only */
  .ri-tile { padding: 10px 2px; }
  .ri-tile svg { width: 22px; height: 22px; }
}

/* ---------- avatar: GM = Alliance emblem; players = position icon ---------- */
.avatar .av-emblem { --w: 13px; color: #120a2a; filter: none; }
.avatar .av-ic { width: 20px; height: 20px; fill: #06101f; }

/* ---------- top bar = console frame ---------- */
.topbar {
  background:
    repeating-linear-gradient(180deg, rgba(76, 201, 255, 0.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(8, 22, 40, 0.98), rgba(4, 12, 24, 0.95));
  border-bottom: 1px solid rgba(76, 201, 255, 0.55);
  box-shadow: 0 2px 14px -2px rgba(76, 201, 255, 0.32), 0 6px 26px -6px rgba(76, 201, 255, 0.28); /* soft glow below the bar, like light through a curved screen */
}
.topbar::before { /* top edge of the console frame */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76, 201, 255, 0.45) 12%, rgba(76, 201, 255, 0.45) 88%, transparent);
}
.brand { position: relative; }
.brand .emblem { /* glowing, semi-transparent console logo */
  --w: 22px; color: rgba(150, 225, 255, 0.6);
  filter: drop-shadow(0 0 3px rgba(76, 201, 255, 0.9)) drop-shadow(0 0 10px rgba(76, 201, 255, 0.55));
  animation: logo-hum 6s ease-in-out infinite;
}
.brand .emblem::before {
  background: repeating-linear-gradient(180deg, rgba(200, 240, 255, 0.95) 0 1px, rgba(110, 200, 255, 0.5) 1px 3px);
  -webkit-mask-image: url("alliance-mark-smooth.png"); mask-image: url("alliance-mark-smooth.png");
}
@keyframes logo-hum { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.next-sess .mono { color: var(--green); }
.next-sess.tbd .mono { color: var(--text-3); }
@media (max-width: 1100px) { .next-sess { display: none; } }

/* one line = one font (see unifyScripts) */
/* (GM 2026-10-23) no override any more: Bebas has Cyrillic, so a label keeps Bebas for both scripts and a heading keeps Oswald */

/* ladder +1: saturated turquoise, so it no longer looks like an info link */
.t1 { --tier: #19d3c5; }

/* official English Fate terms next to the Russian ones (profile setting) */
.fate-en .term[data-en]::after { content: " " attr(data-en); font: 500 0.62em/1 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.fate-en .chip .term[data-en]::after, .fate-en .btn .term[data-en]::after, .fate-en .rail .term[data-en]::after { content: none; }

/* main page title: bigger, holographic; the Alliance emblem as a glowing console hologram (not gold) */
.hero-title .en-only, .lang-ru .hero-title .ru-only {
  display: inline-block; font-size: 1.55em; line-height: 1;
  background: repeating-linear-gradient(180deg, #f4fcff 0 2px, #9fdcff 2px 3px); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(76, 201, 255, 0.65)) drop-shadow(0 0 18px rgba(76, 201, 255, 0.3));
}
.lang-ru .hero-title .ru-only { font-size: 1.15em; }
.holo-emblem {
  --w: 54px; align-self: center; color: rgba(150, 225, 255, 0.55);
  filter: drop-shadow(0 0 4px rgba(76, 201, 255, 0.9)) drop-shadow(0 0 16px rgba(76, 201, 255, 0.45));
  animation: logo-hum 6s ease-in-out infinite;
}
.holo-emblem::before {
  background: repeating-linear-gradient(180deg, rgba(210, 244, 255, 0.95) 0 1px, rgba(110, 200, 255, 0.45) 1px 3px);
  -webkit-mask-image: url("alliance-mark-smooth.png"); mask-image: url("alliance-mark-smooth.png");
}
@media (max-width: 900px) { .holo-emblem { --w: 40px; } }

/* narrow screens: cover labels become centred tags under the image, titles shrink to fit */
@media (max-width: 1240px) {
  .cover img { order: 1; }
  .cover-k { position: static; order: 2; align-self: center; margin: 10px auto 0; padding: 3px 8px 2px; font-size: 12px; background: none; border: 1px solid var(--line-2); }
  .cover-t { order: 3; align-items: center; text-align: center; border-top: 0; }
  .cover-t b { font-size: clamp(14px, 2.6vw, 19px); overflow-wrap: anywhere; }
  .cover-t .mono { font-size: 11px; }
}

/* ---------- Ship AI: animated monitor stripes (like the outfit stage), hexagon-with-diamond mark ---------- */
.convo { position: relative; isolation: isolate; overflow: hidden; }
.convo > :not(.chat-holo) { position: relative; z-index: 1; }
.chat-holo { z-index: 0; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.5); }
.chat-holo .hl { background: repeating-linear-gradient(180deg, rgba(120, 200, 255, 0.05) 0 1px, transparent 1px 4px); }
.msg .lbl svg, .drawer-h .lbl svg { width: 15px; height: 15px; margin: -2px 6px 0 0; vertical-align: middle; color: var(--gold); }
.ask-gm { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- personal log: folder tabs per character, monitor stripes, portrait ---------- */
.log { display: block; max-width: 1280px; }
.log-tabs { display: flex; gap: 4px; padding-left: 34px; }
.log-tab { position: relative; padding: 9px 18px 7px; font: 500 15px var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
  background: rgba(5, 13, 25, 0.8); border: 1px solid var(--line); border-bottom: 0; cursor: pointer;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.log-tab .mono { margin-left: 8px; font-size: 9.5px; color: var(--text-3); }
.log-tab:hover { color: var(--text); }
.log-tab[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--dept) 30%, #0b1c30), #0b1c30); border-color: color-mix(in srgb, var(--dept) 60%, transparent); }
.log-file { --pad: 0px; --cut: 26px; position: relative; isolation: isolate; overflow: hidden; }
.log-file > :not(.sheet-lines) { position: relative; z-index: 1; }
.log-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px 16px 40px; border-bottom: 1px solid var(--line); }
.log-title { margin: 0 0 4px; font-family: var(--f-label); font-weight: 400; font-size: 40px; letter-spacing: 0.08em; line-height: 1; color: #eaf6ff; }
.log-head .mono { font-size: 11px; color: var(--text-3); }
.log-portrait { width: 110px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border: 1px solid color-mix(in srgb, var(--dept) 55%, transparent);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--dept) 30%, transparent), transparent 70%), linear-gradient(180deg, #0b1b30, #050c17); }
.log-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.log-body .entries { --pad: 0px; border-right: 1px solid var(--line); background: rgba(3, 9, 18, 0.35); }
.log-body .entries .empty { padding: 12px 18px; color: var(--text-3); font-size: 13px; }
.log-body .editor { --pad: 0px; background: none; }
.log-body .editor::before, .log-body .entries::before { display: none; }
.log-sess { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 18px 8px 24px; border-bottom: 1px solid var(--line); }
.log-sess .lbl { font-size: 12px; color: var(--text-3); }
.log-sess .mono { font-size: 10.5px; color: var(--text-3); }
@media (max-width: 900px) { .log-body { grid-template-columns: minmax(0, 1fr); } .log-body .entries { border-right: 0; border-bottom: 1px solid var(--line); } .log-portrait { width: 76px; } .log-title { font-size: 30px; } .log-tabs { padding-left: 12px; overflow-x: auto; } }

/* session page: intro = Discord announcement (italics); 7 small character cards per row; death ribbon */
.sp-intro > p { font-style: italic; color: #d9e8f4; }
.sp-cast { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.sp-cast .cc-b { padding: 7px 8px 8px; gap: 3px; }
.sp-cast .cc-b b { font-size: 12px; letter-spacing: 0.03em; }
.sp-cast .pips.sm .pip { width: 6px; height: 6px; }
.sp-cast .cc-edit { flex-wrap: wrap; padding: 0 6px 6px; }
.sp-cast .cc-edit .btn { padding: 4px 6px 3px; font-size: 11px; }
.crew-card.dead .pf img { filter: grayscale(0.6) brightness(0.85); }
.crew-card .pf { position: relative; }
.ribbon { position: absolute; top: 10px; right: -24px; width: 86px; height: 11px; transform: rotate(45deg); background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.6); }
.sp-logs { margin-top: 4px; }
.sp-logs .log-tabs { padding-left: 18px; }
.sp-log { --pad: 22px; position: relative; isolation: isolate; overflow: hidden; }
.sp-log > :not(.sheet-lines) { position: relative; z-index: 1; }
.sp-log h3 { margin: 0 0 10px; font: 500 20px var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.sp-log-body { font-size: 15px; line-height: 1.7; color: #d2e2ef; max-width: 74ch; }
.sp-log-body h2 { font: 500 16px var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-hi); }
.sp-log-body blockquote { margin: 1em 0; padding: 4px 16px; border-left: 2px solid var(--amber); font-style: italic; }

/* datacard media spans the whole datacard width; the rank strip lies on top */
.ib-media .ib-stage, .ib-media .ib-image { left: 0; }
.ib-media .ib-image { width: 100%; }
.ib-media .rank-strip { background: linear-gradient(180deg, color-mix(in srgb, var(--dept) 42%, rgba(4, 16, 30, 0.75)), color-mix(in srgb, var(--dept) 14%, rgba(4, 16, 30, 0.6))); backdrop-filter: blur(2px); }

/* character datacard: English name, relations (the death ribbon is only on the session where the character died) */
.ib-en { padding: 0 16px 4px; font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; }
.ib-rel { padding: 2px 16px 14px; }
.ib-rel > .lbl { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-3); }
.ib-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ib-rel a { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; color: var(--text); text-decoration: none; padding: 4px; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.4); }
.ib-rel a:hover { border-color: color-mix(in srgb, var(--dept) 60%, transparent); }
.ib-rel img { width: 34px; height: 42px; object-fit: cover; object-position: center top; border-bottom: 2px solid var(--dept); background: linear-gradient(180deg, #0b1b30, #050c17); }
.ib-rel b { display: block; font: 500 13px/1.2 var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; }
.ib-rel b + span { font-size: 12.5px; color: var(--text-2); }
.ch-appear { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }

/* ---------- FAQ ---------- */
.faq { max-width: 1100px; margin: 0 auto; }
.faq-lead { margin: 6px 0 0; max-width: 80ch; color: var(--text-2); font-size: 14.5px; }
.faq-tabs { margin-bottom: 16px; }
.faq-tabs .n { margin-left: 4px; color: var(--text-3); }
.faq-form { display: grid; gap: 10px; margin-bottom: 18px; }
.faq-form-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.faq-form-row .seg { margin-right: auto; }
#faq-list { display: grid; gap: 12px; }
.faq-item { padding: 14px 18px 16px; border: 1px solid var(--line); border-left: 2px solid #6fe0b0; background: rgba(3, 10, 20, 0.5); }
.faq-item.open { border-left-color: var(--amber); }
.faq-item.private { border-style: dashed; border-left-style: solid; }
.faq-q { margin: 0 0 4px; font: 500 17px/1.35 var(--f-head); letter-spacing: 0.03em; color: #ecf7ff; }
.faq-meta { font-size: 11px; color: var(--text-3); }
.faq-a { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.faq-a > .lbl { margin-right: 8px; font-size: 12px; color: #6fe0b0; }
.faq-a p { margin: 6px 0 0; max-width: 80ch; line-height: 1.6; }
.faq-tools { display: flex; gap: 8px; margin-top: 10px; }
.faq-answer { display: grid; gap: 8px; margin-top: 10px; }
.faq-wait { margin: 8px 0 0; font-size: 11px; color: var(--amber); }

/* skill pick list: fixed popover above everything, opaque */
.rung-menu { position: fixed; top: 0; left: 0; z-index: 60; }   /* the panel's own fill is opaque */
.prose .gm-only { clear: none; }   /* a GM block right after the intro sits beside the datacard (it is its own formatting context, so it narrows instead of overlapping) */
.faq-form[hidden] { display: none; }

/* log tabs: small portrait of the log's owner */
.log-tab { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; }
.lt-pf { width: 26px; height: 32px; object-fit: cover; object-position: center top; border-bottom: 2px solid var(--dept);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--dept) 30%, transparent), transparent 70%), #07121f; }
.log-tab:not([aria-selected="true"]) .lt-pf { opacity: 0.7; }
/* GM logs tab («OTHER LOGS» for players, «GM LOGS» for the GM): the Alliance emblem in GM purple instead of a portrait */
.lt-emblem { display: grid; place-items: center; }
.lt-emblem .emblem { --w: 13px; color: color-mix(in srgb, var(--gm) 75%, #fff); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gm) 70%, transparent)); }
/* pinned entries stand first (a pin before the title, a dashed line under the last one) */
.le-pin { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; fill: var(--gold); }
.entries li.pinned:has(+ li:not(.pinned)) { border-bottom: 1px dashed var(--line); padding-bottom: 4px; margin-bottom: 4px; }
/* GM logs are written as wiki characters: each entry shows its author's mini portrait (only these lists, never the players') */
.entries a.le-npc { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 11px; align-items: center; padding-left: 12px; }
.le-pf { grid-row: span 2; width: 42px; height: 42px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--dept, var(--gm)) 55%, transparent);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--dept, var(--gm)) 28%, transparent), transparent 70%), #07121f; }
.entries a.le-npc .t, .entries a.le-npc .mono { min-width: 0; }
.log-author .select { max-width: 340px; }
.log-readers { flex-wrap: wrap; gap: 6px 8px; }
.log-readers .chip { cursor: pointer; font: inherit; font-size: 12px; }
.log-readers .chip[aria-pressed="true"] { color: #fff; border-color: var(--gm); background: color-mix(in srgb, var(--gm) 22%, transparent); }

/* Ship AI: large faint hexagon-with-diamond emblem behind the chat (like the fleet emblem on the crew roster):
   the hexagon ring + diamond fade downward, a slow sheen passes over them, the diamond core breathes; the monitor lines run over it */
.ai-mark { position: absolute; left: 50%; top: 47%; height: min(66%, 560px); aspect-ratio: 200 / 230; transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(76, 201, 255, 0.18)); }
.ai-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ai-mark .am-core { animation: am-breathe 7s ease-in-out infinite; }
@keyframes am-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ai-mark .am-sheen { position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cpath fill-rule='evenodd' d='M100 5L195.3 60V170L100 225L4.7 170V60Z M100 37L167.6 76V154L100 193L32.4 154V76Z M100 68L135 115L100 162L65 115Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cpath fill-rule='evenodd' d='M100 5L195.3 60V170L100 225L4.7 170V60Z M100 37L167.6 76V154L100 193L32.4 154V76Z M100 68L135 115L100 162L65 115Z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(150, 215, 255, 0.13) 48%, transparent 58%) 0 0 / 300% 100% no-repeat;
  animation: fm-sheen 11s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ai-mark .am-core, .ai-mark .am-sheen { animation: none; } }

/* Ship AI side panels: hex pattern dense at the outer edge, fading toward the chat */
.threads::after, .ctxp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 15L52 30V60L26 75L0 60V30Z M26 0V15 M26 75V90' fill='none' stroke='%234cc9ff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 52px 90px; }
.threads::after { background-position: left bottom;
  -webkit-mask-image: radial-gradient(ellipse 150% 80% at 0% 100%, #000, rgba(0, 0, 0, 0.4) 45%, transparent 85%);
          mask-image: radial-gradient(ellipse 150% 80% at 0% 100%, #000, rgba(0, 0, 0, 0.4) 45%, transparent 85%); }
.ctxp::after { background-position: right top;
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 100% 25%, #000, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
          mask-image: radial-gradient(ellipse 100% 60% at 100% 25%, #000, rgba(0, 0, 0, 0.35) 45%, transparent 80%); }

/* main page (GM, 2026-10-17): title block, season cover and last-session cover are level; the cover tag sits under the
   image so nothing covers the picture (the app puts it on the SEASON / date line, see app/src/app.css) */
.hero { align-items: stretch; }
.cover img { order: 1; }
.cover .cover-k { position: static; order: 2; align-self: flex-start; margin: 10px 16px 0; padding: 3px 8px 2px; font-size: 12px;
  background: rgba(3, 10, 20, 0.72); }
.cover-t { order: 3; margin-top: auto; border-top: 0; }
/* «ВСЕ СЕССИИ →» lives in the last-session card (bottom right), so the title block keeps its original look */
.cover .cover-all { position: relative; z-index: 2; margin-left: auto; }   /* on the line above the title (GM: long titles were cut) */
.cover .cover-k { border: 1px solid rgba(147, 171, 192, 0.35); }   /* thin blue-grey frame: readable on the dark card */

/* dice roller (2026-10-17): «Результат:» + ladder name in the result colour; the whole frame takes the result colour */
.dice-total .r .r-k { color: var(--text-3); text-transform: none; letter-spacing: 0.02em; }
.dice-total .r .r-n { color: var(--tier, var(--cyan-hi)); }
.dice-panel.rolled { background: color-mix(in srgb, var(--tier) 75%, transparent); transition: background 0.3s; }
.dice-panel.rolled::before { background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 9%, var(--fill-top)), var(--fill-bot)); }
.dice-panel .dice-total .v { color: var(--tier, #fff); }
/* «‹ CREW»: a real chevron instead of the tiny «‹» glyph */
[data-back-crew] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.back-chev { width: 10px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- CREW CHANNEL: players' chat (chat.js). Pixel-art envelope button bottom right → turns into the chat window.
   Look: modern Discord without avatars (small position icon next to the nick), its own near-black grey (not the blue UI),
   dark vignette edges and slowly pulsing monitor lines behind ---------- */
.px-env { width: 30px; height: 22px; fill: currentColor; }
.px-env .px-fill { fill: rgba(76, 201, 255, 0.12); }
.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  display: grid; place-items: center; width: 54px; height: 50px; padding: 0;
  color: var(--cyan-hi); cursor: pointer;
  background: linear-gradient(180deg, #0c2138, #061220);
  border: 1px solid var(--line-2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 18px rgba(76, 201, 255, 0.18) inset;
}
.chat-fab[hidden] { display: none; }
.chat-fab:hover { color: #fff; border-color: var(--cyan); box-shadow: 0 0 22px rgba(76, 201, 255, 0.35) inset; }
.chat-fab .px-env { filter: drop-shadow(0 0 4px rgba(76, 201, 255, 0.55)); }
.chat-badge { position: absolute; top: 4px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font: 600 10px/16px var(--f-mono); color: #fff; text-align: center; background: var(--red); }
.chat-badge[hidden] { display: none; }

/* .chat-dock = the fixed outer box (position, size, glow — a drop-shadow follows the cut corner); .chat-win = the chamfered window inside */
.chat-dock {
  /* default = black terminal with azure frames (GM, 2026-10-18); other window colours below */
  --c-bg: #030508; --c-panel: rgba(4, 14, 26, 0.92); --c-field: #040b14; --c-line: rgba(30, 167, 255, 0.5); --c-frame: #1ea7ff; --c-text: #e8f2fa; --c-mute: #7f9bb3; --c-scan: rgba(255, 255, 255, 0.055); --c-sweep: rgba(30, 167, 255, 0.14);
  --c-cut: 16px;
  position: fixed; right: 16px; bottom: 16px; z-index: 29;   /* under the top bar (30): its profile menu opens over the chat */
  width: 480px; height: calc(100vh - var(--topbar-h) - 28px);
  filter: drop-shadow(0 0 7px rgba(30, 167, 255, 0.5)) drop-shadow(0 16px 28px rgba(0, 0, 0, 0.65));
}
.chat-dock[hidden] { display: none; }
.chat-win {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; width: 100%; height: 100%;
  color: var(--c-text); font: 13px/1.45 var(--f-body);
  background: radial-gradient(120% 55% at 50% 0%, rgba(30, 140, 255, 0.17), transparent 70%), linear-gradient(180deg, #030a14, #020305);
  border: 1px solid var(--c-frame);
  clip-path: polygon(var(--c-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c-cut));   /* sci-fi cut top-left corner, like the site's panels */
  animation: chat-in 0.16s ease-out;
}
.chat-win.restored { animation: none; }
/* monitor lines (drifting + pulsing), a slow bright sweep, and dark vignette edges — all behind the content */
.chat-win::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 48%, transparent 45%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0.88) 100%),
    repeating-linear-gradient(180deg, var(--c-scan) 0 1px, transparent 1px 3px);
  background-size: 100% 100%, 100% 3px;
  animation: chat-lines 0.9s linear infinite, chat-pulse 4.5s ease-in-out infinite;
}
.chat-win::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0 44%, var(--c-sweep) 50%, transparent 56%) 0 0 / 100% 320%;   /* the sweep takes the window colour */
  animation: chat-sweep 9s linear infinite;
}
@keyframes chat-lines { to { background-position: 0 0, 0 3px; } }
@keyframes chat-pulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes chat-sweep { from { background-position: 0 100%; } to { background-position: 0 -220%; } }
@media (prefers-reduced-motion: reduce) { .chat-win::before, .chat-win::after { animation: none; } }
/* resize handles: left edge, top edge, top-left corner (the window is anchored bottom right) */
.chat-edge-l { position: absolute; left: 0; top: var(--c-cut); bottom: 0; width: 6px; cursor: ew-resize; z-index: 2; }
.chat-edge-t { position: absolute; top: 0; left: var(--c-cut); right: 0; height: 5px; cursor: ns-resize; z-index: 2; }
.chat-grip { position: absolute; left: 0; top: 0; width: calc(var(--c-cut) + 6px); height: calc(var(--c-cut) + 6px); cursor: nwse-resize; z-index: 3;
  /* the frame line along the cut corner (clip-path removes the border there) */
  /* the band starts exactly on the cut (x + y = cut) and runs 1px inward, so it meets the 1px top and left borders without a step */
  background: linear-gradient(135deg, transparent calc(var(--c-cut) * 0.7071), var(--c-frame) calc(var(--c-cut) * 0.7071) calc(var(--c-cut) * 0.7071 + 1px), transparent calc(var(--c-cut) * 0.7071 + 1px)); }
.chat-edge-l:hover, .chat-edge-t:hover { background-color: rgba(76, 201, 255, 0.15); }
.chat-grip:hover { filter: drop-shadow(0 0 3px var(--c-frame)); }
.chat-h { display: flex; align-items: center; gap: 9px; padding: 7px 8px 6px 18px; background: var(--c-panel); border-bottom: 1px solid var(--c-line); color: #b9bec6; }
.chat-h .px-env { width: 15px; height: 11px; color: var(--cyan-hi); }
.chat-h .lbl { font-size: 15px; letter-spacing: 0.14em; color: #c9ced6; }
.chat-sess { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 10.5px var(--f-mono); color: var(--c-mute); }
.chat-x { width: 26px; height: 26px; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.chat-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: 11px; color: var(--c-mute); }
.chat-sep::before, .chat-sep::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
/* Discord-like message: header «icon Nick time», text below; follow-ups grouped without a header */
.cm { position: relative; margin-top: 10px; padding: 2px 6px 2px 8px; border-radius: 3px; }
.cm.cont { margin-top: 0; }
.cm:hover { background: rgba(255, 255, 255, 0.035); }
.cm-h { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.cm-ic { width: 13px; height: 13px; flex: none; fill: color-mix(in srgb, var(--who, currentColor) 85%, transparent); }
.gm-ic { display: inline-block; background: var(--gm); -webkit-mask: url("alliance-mark-smooth.png") center / contain no-repeat; mask: url("alliance-mark-smooth.png") center / contain no-repeat; }
.cm-n { font-weight: 600; font-size: 13.5px; color: var(--who, var(--c-text)); }
.cm-t { font: 10.5px var(--f-mono); color: #5d626b; }
.cm-h .cm-t { margin-left: 4px; }
.cm-t-hover { position: absolute; right: 6px; top: 4px; opacity: 0; }
.cm.cont:hover .cm-t-hover { opacity: 1; }
.cm-x { overflow-wrap: anywhere; color: var(--c-text); }
.cm-x code { font: 12px var(--f-mono); padding: 0 4px; background: var(--c-field); }
.cm-x del { color: var(--c-mute); }
.cm-x .wl { color: var(--cyan); }
/* Ship AI answer: gold frame, hexagon icon */
.cm-ai { --who: var(--gold); margin: 10px 0 4px; padding: 9px 12px 9px 12px; border: 1px solid rgba(232, 184, 74, 0.45); border-left-width: 3px;
  background: linear-gradient(100deg, rgba(232, 184, 74, 0.11), rgba(232, 184, 74, 0.02) 60%), rgba(10, 10, 12, 0.6);
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.08) inset; }
.cm-ai { isolation: isolate; overflow: hidden; }
.cm-ai::before { /* gold hex pattern on the dark gradient: dense on the right, fading toward the text */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.32;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 15L52 30V60L26 75L0 60V30Z M26 0V15 M26 75V90' fill='none' stroke='%23e8b84a' stroke-width='1.3'/%3E%3C/svg%3E") right top / 26px 45px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.4) 35%, transparent 70%); mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.4) 35%, transparent 70%); }
.cm-ai:hover { background: linear-gradient(100deg, rgba(232, 184, 74, 0.14), rgba(232, 184, 74, 0.03) 60%), rgba(10, 10, 12, 0.6); }
.cm-ai .cm-h { margin-bottom: 4px; }
.ai-ic { width: 16px; height: 16px; fill: rgba(232, 184, 74, 0.15); stroke: var(--gold); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(232, 184, 74, 0.5)); }
.cm-ai .cm-n { color: var(--gold); letter-spacing: 0.04em; }
.cm-src { margin-top: 6px; font-size: 11.5px; color: var(--c-mute); }
.cm-src .lbl { margin-right: 6px; font-size: 11px; letter-spacing: 0.12em; color: rgba(232, 184, 74, 0.7); }
/* roll card: portrait · character / skill / dice · result (result colour) · time */
.cm-rollwrap { margin-top: 10px; padding: 0; }
.cm-rollwrap:hover { background: none; }
.rc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); border-left: 3px solid var(--tier);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 13%, transparent), transparent 70%), rgba(10, 10, 12, 0.65);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.rc.secret { border-style: dashed; border-left-style: solid; }
.rc-pf { width: 46px; height: 46px; object-fit: cover; object-position: center; border: 1px solid color-mix(in srgb, var(--dept) 60%, transparent); background: #050608; }
.rc-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-char { font-size: 11.5px; font-weight: 600; color: var(--dept); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sk { font: 500 18px/1.15 var(--f-head); letter-spacing: 0.03em; color: #f1f3f6; }
.rc-res { display: flex; flex-direction: column; align-items: flex-end; color: var(--tier); text-shadow: 0 0 12px color-mix(in srgb, var(--tier) 45%, transparent); }
.rc-res b { font: 400 30px/0.95 var(--f-label); }
.rc-res span { font: 500 12px var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.rc > .cm-t { align-self: start; }
.cr-dice { display: inline-flex; gap: 3px; margin-top: 2px; }
.cr-dice i { display: inline-grid; place-items: center; width: 15px; height: 15px; font: 600 10px var(--f-mono); font-style: normal; color: var(--c-mute); border: 1px solid #3a3d44; background: #0c0d0f; }
.cr-dice i.p { color: var(--cyan-hi); border-color: var(--cyan); }
.cr-dice i.m { color: var(--red); border-color: rgba(255, 61, 85, 0.6); }
.cr-secret { margin-left: 4px; padding: 0 5px; font: 400 9.5px var(--f-mono); color: var(--gm); border: 1px dashed color-mix(in srgb, var(--gm) 60%, transparent); }
/* input row: › prompt · field · SEND · [−] (closes the chat like ×) */
.chat-in { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 5px; background: var(--c-panel); border-top: 1px solid var(--c-line); }
.chat-prompt { align-self: center; font: 16px var(--f-mono); color: var(--cyan); animation: chat-blink 1.1s steps(2) infinite; }
@keyframes chat-blink { 50% { opacity: 0.25; } }
.chat-field { flex: 1; display: flex; min-width: 0; background: var(--c-field); border: 1px solid var(--c-line); }   /* frame + fill on the wrapper: the field's grayscale filter must not grey them */
.chat-field:focus-within { border-color: var(--c-frame); }
.chat-ta { flex: 1; resize: none; min-height: 32px; overflow-y: hidden; padding: 6px 9px; font: 13px/1.45 var(--f-body); color: var(--c-text); background: transparent; border: 0; outline: none; }
.chat-min { display: grid; place-items: center; flex: none; width: 34px; height: 32px; padding: 0; cursor: pointer; }
.chat-min { font: 600 20px/1 var(--f-mono); color: var(--cyan-hi); background: rgba(76, 201, 255, 0.12); border: 1px solid var(--cyan); }
.chat-min:hover { color: #fff; background: rgba(76, 201, 255, 0.25); }
.chat-hint { padding: 0 10px 6px; font: 9.5px var(--f-mono); color: #5d626b; background: var(--c-panel); }
/* window colours (profile menu → CHAT WINDOW) */
.chat-dock[data-theme="black"], .chat-dock[data-theme="grey"], .chat-dock[data-theme="blue"], .chat-dock[data-theme="orange"], .chat-dock[data-theme="green"] { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.65)); }
.chat-dock[data-theme="black"] .chat-win, .chat-dock[data-theme="grey"] .chat-win, .chat-dock[data-theme="blue"] .chat-win, .chat-dock[data-theme="orange"] .chat-win, .chat-dock[data-theme="green"] .chat-win { background: var(--c-bg); }
.chat-dock[data-theme="black"] { --c-bg: #030303; --c-panel: rgba(9, 9, 9, 0.9); --c-field: #0b0b0b; --c-line: #242424; --c-frame: #2e2e2e; --c-text: #e8e8e8; --c-mute: #7c7c7c; --c-scan: rgba(255, 255, 255, 0.06); --c-sweep: rgba(255, 255, 255, 0.1); }
.chat-dock[data-theme="grey"] { --c-bg: #121316; --c-panel: rgba(28, 29, 33, 0.82); --c-field: #1f2024; --c-line: #2c2e33; --c-frame: #2c2e33; --c-text: #d8dadf; --c-mute: #80858e; --c-scan: rgba(160, 205, 255, 0.055); --c-sweep: rgba(190, 200, 215, 0.075); }
/* default «black-blue»: electric-azure frames (#1ea7ff, like the glowing rail icons) — brighter and more saturated than the site's
   muted panel lines, so the chat never blends into the page; azure glow and gradient; the white ripple stays (base .chat-dock vars) */
.chat-dock:not([data-theme]) .chat-h, .chat-dock[data-theme="black-blue"] .chat-h { background: linear-gradient(90deg, rgba(30, 167, 255, 0.2), rgba(4, 14, 26, 0.92) 70%); }
.chat-dock[data-theme="black-blue"] .chat-h .px-env, .chat-dock[data-theme="black-blue"] .chat-prompt { color: #4dbdff; filter: drop-shadow(0 0 3px rgba(30, 167, 255, 0.8)); }
.chat-dock[data-theme="black-blue"] .chat-min { color: #bfe6ff; border-color: #1ea7ff; background: rgba(30, 167, 255, 0.16); }
.chat-dock[data-theme="blue"] { --c-bg: #050d19; --c-panel: rgba(11, 28, 48, 0.85); --c-field: #081729; --c-line: rgba(86, 190, 255, 0.24); --c-frame: rgba(86, 190, 255, 0.24); --c-text: #d6e7f5; --c-mute: #6f8ba3; --c-scan: rgba(120, 200, 255, 0.07); --c-sweep: rgba(76, 201, 255, 0.12); }
.chat-dock[data-theme="orange"] { --c-bg: #140c05; --c-panel: rgba(40, 24, 10, 0.85); --c-field: #1f140a; --c-line: #3d2a17; --c-frame: #3d2a17; --c-text: #ecdccb; --c-mute: #9a8068; --c-scan: rgba(255, 170, 90, 0.055); --c-sweep: rgba(255, 157, 58, 0.11); }
.chat-dock[data-theme="green"] { --c-bg: #06110b; --c-panel: rgba(13, 33, 21, 0.85); --c-field: #0b1b12; --c-line: #1e3b2a; --c-frame: #1e3b2a; --c-text: #d4eadb; --c-mute: #6f9a80; --c-scan: rgba(110, 255, 170, 0.05); --c-sweep: rgba(79, 230, 150, 0.10); }
.chat-swatches button { padding: 5px 7px; }
.sw { display: block; width: 16px; height: 12px; border: 1px solid rgba(255, 255, 255, 0.25); }
.sw-grey { background: #2a2c31; } .sw-black { background: #000; border-color: rgba(255, 255, 255, 0.45); } .sw-black-blue { background: #000; border-color: #1ea7ff; box-shadow: 0 0 5px rgba(30, 167, 255, 0.8); } .sw-blue { background: #0d2846; border-color: rgba(86, 190, 255, 0.6); } .sw-orange { background: #4a2c10; border-color: rgba(255, 157, 58, 0.6); } .sw-green { background: #123422; border-color: rgba(79, 209, 139, 0.6); }
/* the page makes room: centred content shifts left (the chat takes the freed right column) */
.chat-left .main > .kept > *, .chat-left .main > * { margin-left: 0 !important; margin-right: 0 !important; }
/* character sheet with too little room left: hide the OUTFIT / 3D stage, keep the name card under the vitals */
body.chat-no-outfit .dossier { grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "sheet vitals" "sheet figure"; grid-template-rows: auto 1fr; }
body.chat-no-outfit .vitals { grid-template-columns: minmax(0, 1fr); }
body.chat-no-outfit .figure { position: static; }
body.chat-no-outfit .figure-tabs, body.chat-no-outfit .figure .stage { display: none; }
body.chat-narrow .dossier { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "vitals" "figure"; grid-template-rows: auto; }
body.chat-narrow .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* other pages with little room left: the main page title block goes above the two covers */
body.chat-tight .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.chat-tight .hero-id { grid-column: 1 / -1; container-type: normal; }
@media (max-width: 900px) {
  .chat-fab { bottom: 84px; right: 12px; }
  .chat-dock { left: 8px; right: 8px !important; width: auto !important; bottom: 76px; height: min(560px, calc(100vh - 150px)) !important; }
  .chat-grip, .chat-edge-l, .chat-edge-t { display: none; }
}

/* main page title block fills its frame (GM mockup 2026-10-17) — but the row height still comes from the covers:
   the block is a size container (its content never stretches the row), and everything inside scales with its height (cqh) */
@media (min-width: 1241px) {
  .hero-id { container-type: size; --pad: 24px; align-content: space-evenly; gap: 14px 22px; }   /* cqh on the container itself would refer to an outer container */
  .hero-id .holo-emblem { --w: min(19cqh, 72px); }
  .hero-id .hero-small { font-size: clamp(12px, 4cqh, 15px); }
  .hero-id .hero-title { font-size: clamp(22px, min(11cqh, 7.6cqw), 42px); margin: 0.6cqh 0; }
  .hero-id .countdown { padding: 4cqh 20px 3.6cqh; }
  .hero-id .countdown > .lbl { font-size: clamp(12px, 4cqh, 15px); }
  .hero-id .cd { margin: 2.2cqh 0; gap: 4px 22px; }
  .hero-id .cd .n { font-size: clamp(30px, 12.5cqh, 48px); }
  .hero-id .cd .u { font-size: clamp(12px, 4cqh, 15px); }
  .hero-id #cd-when { font-size: clamp(11px, 3.7cqh, 14px); }
}

/* personal log: the portrait sits in the left column (in the header it made the header too tall); session page logs: portrait on the right */
.log-body .entries .log-portrait { display: block; width: calc(100% - 36px); margin: 18px 18px 4px; aspect-ratio: 1; }
.sp-log-pf { float: right; width: 110px; aspect-ratio: 4 / 5; margin: 0 0 12px 22px; object-fit: cover; object-position: center top;
  border: 1px solid color-mix(in srgb, var(--dept) 55%, transparent); background: #02060c; }
@media (max-width: 900px) { .log-body .entries .log-portrait { width: 96px; } .sp-log-pf { width: 76px; } }

/* RU labels: the big title shows only «База данных Альянса» (the «display: inline-block» of the holographic title rule above re-showed the English one) */
.lang-ru .hero-title .en-only, body:not(.lang-ru) .hero-title .ru-only { display: none; }

.cover-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }

/* the scrollbar's place is always reserved: pages that render their content after the first paint (FAQ, missions…)
   no longer shift sideways by the scrollbar width when it appears (GM: «all pages shake when switching tabs») */
html { scrollbar-gutter: stable; }

/* emoji in the chat: Twemoji through the console filter — black-and-white, bright, monitor lines, soft glow (GM's idea, 2026-10-18;
   his own try came out too dark → brightness up). Glow follows the window colour. Emoji-only messages are large («jumbo»). */
/* the mask is cut to the element's box, so the box gets padding for the glow (negative margins keep the layout) — else the glow ends in a hard square */
.emo { display: inline-block; box-sizing: content-box; width: 1.35em; height: 1.35em; padding: 0.4em; margin: -0.4em calc(1px - 0.4em); vertical-align: -0.32em;
  filter: grayscale(1) brightness(1.45) contrast(1.2) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 5px var(--c-emo-glow, rgba(255, 255, 255, 0.25)));
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 1.6px, rgba(0, 0, 0, 0.8) 1.6px 2.6px); mask: repeating-linear-gradient(180deg, #000 0 1.6px, rgba(0, 0, 0, 0.8) 1.6px 2.6px); }   /* faint lines: the emoji must stay readable */
.cm-x.jumbo .emo { width: 42px; height: 42px; padding: 12px; margin: -10px -10px -12px -12px; vertical-align: middle;
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, 0.72) 2px 3.2px); mask: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, 0.72) 2px 3.2px); }
.chat-dock { --c-emo-glow: rgba(30, 167, 255, 0.45); }
.chat-dock[data-theme] { --c-emo-glow: var(--c-sweep); }
.chat-dock[data-theme="black-blue"] { --c-emo-glow: rgba(30, 167, 255, 0.45); }
/* while typing: the field cannot show the filtered pictures, so it at least turns the system emoji black-and-white (text is white anyway) */
.chat-ta { filter: grayscale(1) brightness(1.08); }
/* «:» emoji picker above the input */
.chat-ac { margin: 0; padding: 4px; list-style: none; border-top: 1px solid var(--c-line); background: var(--c-panel); max-height: 260px; overflow-y: auto; }
.chat-ac[hidden] { display: none; }
.chat-ac li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; font-size: 12.5px; color: var(--c-text); }
.chat-ac li .emo { width: 20px; height: 20px; vertical-align: middle; }
.chat-ac li span:not(.ac-k) { font-family: var(--f-mono); }
.chat-ac .ac-k { margin-left: auto; font-size: 11px; color: var(--c-mute); }
.chat-ac li[aria-selected="true"], .chat-ac li:hover { background: color-mix(in srgb, var(--c-frame) 18%, transparent); }

/* top bar: «+» = new archive page from scratch (next to the search; GM 2026-10-18: there was no way to start a page from zero) */
.topbar .new-page { flex: none; }
.topbar .new-page svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* personnel file name card: RACE_ / ORIGIN_ / FACTION_ as boxed clearance tags linking to their archive pages */
.idlist dd.id-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.id-tag { padding: 1px 7px 0; font-size: 12.5px; color: var(--cyan-hi); text-decoration: none; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); background: rgba(76, 201, 255, 0.06); }
.id-tag:hover { color: #fff; border-color: var(--cyan); background: rgba(76, 201, 255, 0.14); }
.id-sep { margin-left: -4px; color: var(--text-3); }

/* video in the wiki: a 16:9 picture + caption that opens the video in a new tab (no player inside the wiki) */
.vid { display: flow-root; max-width: 560px;   /* flow-root: sits beside a floated datacard instead of running under it */
  margin: 1em 0; color: inherit; text-decoration: none; border: 1px solid var(--line-2); background: #03080f;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.vid-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #0d2540, #03080f 75%); }
.vid-pic img, .vid-pic video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform 0.3s, filter 0.3s; }
.vid-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid rgba(163, 230, 255, 0.7); border-radius: 50%;
  background: rgba(3, 10, 20, 0.55); box-shadow: 0 0 18px rgba(76, 201, 255, 0.4); }
.vid-play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--cyan-hi); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.vid-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 14px 10px; border-top: 1px solid var(--line); }
.vid-cap b { font: 500 15px var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: #ecf7ff; }
.vid-cap .mono { flex: none; font-size: 10.5px; color: var(--text-3); }
.vid:hover { border-color: var(--cyan); }
.vid:hover .vid-pic img, .vid:hover .vid-pic video { transform: scale(1.03); filter: brightness(1.1); }
.vid:hover .vid-cap .mono { color: var(--cyan-hi); }

/* GM-only controls (e.g. DELETE on a wiki page) disappear in VIEW AS a player */
body:not(.is-gm) [data-gm-only] { display: none !important; }

/* wiki editor: one text box per run of text sections, × removes a box; PREVIEW = the page as readers see it */
.ed-twrap { position: relative; }
.ed-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; padding: 0; font: 16px/1 var(--f-mono); color: var(--text-3);
  background: rgba(3, 10, 20, 0.8); border: 1px solid var(--line); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.ed-twrap:hover .ed-del, .ed-del:focus-visible { opacity: 1; }
.ed-del:hover { color: var(--red); border-color: rgba(255, 61, 85, 0.6); }
.ed-preview { padding: 6px 4px 12px; border-top: 1px dashed var(--line); }
.ed-addtext { display: block; margin: 6px 0; padding: 4px 10px; font: 500 12px var(--f-head); letter-spacing: 0.08em; color: var(--text-3); background: none; border: 1px dashed var(--line); cursor: pointer; }
.ed-addtext:hover { color: var(--cyan-hi); border-color: var(--cyan); }

/* roll toasts next to the closed chat's envelope: newest at the bottom, older ones pushed up, each fades after ~1 s */
.roll-toasts { position: fixed; right: 84px; bottom: 18px; z-index: 44; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.roll-toast { pointer-events: auto; cursor: pointer; max-width: 360px; padding: 7px 14px 8px; font: 500 14px/1.3 var(--f-body); color: #dcebf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, rgba(5, 12, 23, 0.94), rgba(8, 20, 36, 0.94)); border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); border-right: 3px solid var(--tier);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); box-shadow: 0 0 16px color-mix(in srgb, var(--tier) 25%, transparent);
  animation: rt-in 0.25s ease-out; transition: opacity 0.8s ease; }
.roll-toast .rt-who { color: var(--dept); font-weight: 600; }
.roll-toast .rt-res { font: 400 19px/1 var(--f-label); color: var(--tier); letter-spacing: 0.02em; }
.roll-toast.secret { border-style: dashed; }
.roll-toast.out { opacity: 0; }
@keyframes rt-in { from { opacity: 0; } }
.chat-open .roll-toasts { display: none; }
@media (max-width: 900px) { .roll-toasts { right: 78px; bottom: 84px; } .roll-toast { max-width: calc(100vw - 100px); } }
@media (prefers-reduced-motion: reduce) { .roll-toast { animation: none; } }

/* session recording at the bottom of the datacard: thumbnail + the video's title, opens in a new tab (ported from the prototype) */
.sp-rec { display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: center; margin: 0 16px 14px; padding: 5px;
  color: inherit; text-decoration: none; border: 1px solid var(--line-2); background: #03080f; transition: border-color 0.2s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.sp-rec-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #0d2540, #03080f 75%); }
.sp-rec-pic img, .sp-rec-pic video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform 0.3s, filter 0.3s; }
.sp-rec .vid-play { width: 26px; height: 26px; margin: -13px 0 0 -13px; box-shadow: 0 0 10px rgba(76, 201, 255, 0.4); }
.sp-rec .vid-play::after { left: 10px; top: 7.5px; border-left-width: 8px; border-top-width: 5.5px; border-bottom-width: 5.5px; }
.sp-rec-cap { flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 0; border: 0; }
.sp-rec-cap .lbl { font-size: 11px; color: var(--text-3); }
.sp-rec-cap b { font-size: 13px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-rec:hover { border-color: var(--cyan); }
.sp-rec:hover .sp-rec-pic img, .sp-rec:hover .sp-rec-pic video { transform: scale(1.05); filter: brightness(1.1); }
.sp-rec:hover .vid-cap .mono { color: var(--cyan-hi); }
.ed-rec-prev:empty { display: none; }
.ed-rec-prev .sp-rec { margin: 2px 0 4px; max-width: 320px; }

/* ---- wiki markup additions (docs/WIKI_MARKUP.md) ---- */
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.5em; max-width: 72ch; }
.prose li { margin: 0.2em 0; }
.prose li > ul, .prose li > ol { margin: 0.2em 0 0; }
.prose h3 { font: 600 19px/1.3 var(--f-head); letter-spacing: 0.04em; margin: 1.4em 0 0.5em; color: #e6f3ff; }
.prose h4 { font: 600 16px/1.3 var(--f-head); letter-spacing: 0.04em; margin: 1.2em 0 0.4em; color: #cfe0ee; }
.prose sup, .prose sub { font-size: 0.75em; line-height: 0; }
.prose blockquote { margin: 0 0 1em; padding: 4px 14px; border-left: 2px solid var(--line-2); color: var(--text-2); }
.prose table { border-collapse: collapse; margin: 0 0 1em; }
.prose td, .prose th { border: 1px solid var(--line); padding: 4px 10px; }
.prose pre, .prose code { font-family: var(--f-mono); font-size: 0.9em; }
.wiki-img { display: inline-block; max-width: 100%; vertical-align: top; }
.wiki-img img { max-width: 100%; height: auto; display: block; }
.wiki-img.plain img { display: inline-block; }
.wiki-img.left { float: left; margin: 4px 16px 8px 0; }
.wiki-img.right { float: right; margin: 4px 0 8px 16px; }
.wiki-img.center { display: block; margin: 8px auto; text-align: center; }
.wiki-img.center img { margin: 0 auto; }
.wiki-img.thumb { padding: 6px; background: rgba(76, 201, 255, 0.05); border: 1px solid var(--line); box-sizing: content-box; max-width: 50%; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.wiki-img.thumb img { width: 100%; }
.wiki-cap { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.wiki-img.miss { padding: 10px 14px; border: 1px dashed var(--line-2); font: 500 12px var(--f-mono); color: var(--amber); letter-spacing: 0.06em; }
.wiki-gallery { --gw: 160px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gw), 1fr)); gap: 12px; margin: 0 0 1.1em; clear: both; }
.wg-item { margin: 0; }
.wg-item a { display: block; border: 1px solid var(--line); aspect-ratio: 16 / 10; overflow: hidden; }
.wg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.wg-item a:hover img { transform: scale(1.04); }
.wg-item figcaption { margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--text-2); }
.wg-item.miss { padding: 10px; border: 1px dashed var(--line-2); font: 500 12px var(--f-mono); color: var(--amber); }
.navboxes { clear: both; margin: 28px 0 8px; display: grid; gap: 10px; }
.navbox { border: 1px solid var(--line); background: rgba(76, 201, 255, 0.03); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.navbox-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 18px 8px 14px; }
.navbox-h .lbl { font-family: var(--f-label); letter-spacing: 0.1em; font-size: 15px; color: var(--cyan-hi); }
.navbox-b { padding: 4px 14px 12px; font-size: 14px; line-height: 1.7; }
.navbox-b b { color: #fff; }
.navbox-b .dsl { color: var(--text-3, #6d8295); }
.ed-fmt { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ed-fmt label.ed-tb { display: inline-flex; align-items: center; cursor: pointer; }
.ed-upnote { color: var(--amber); font-size: 12px; margin-left: 8px; }

/* wiki quotes «> текст» + «> — автор» (GM 2026-10-20) */
.doc blockquote.wq, blockquote.wq { margin: 1em 0; padding: 6px 18px; border-left: 2px solid var(--amber); color: #f1e2d2; font-style: italic; }
blockquote.wq p { margin: 0; }
blockquote.wq cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--text-2, #93abc0); }
/* classic navbox: title bar + «group | links» rows */
.navbox-h { position: relative; justify-content: center; background: rgba(76, 201, 255, 0.08); border-bottom: 1px solid var(--line); }
.navbox-h .linkish { position: absolute; right: 16px; }
.navbox-t { display: grid; gap: 2px; padding: 2px; }
.navbox-r { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 2px; }
.navbox-g { display: flex; align-items: center; justify-content: center; padding: 8px 12px; text-align: center; font: 500 13px/1.3 var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan-hi); background: rgba(76, 201, 255, 0.06); }
.navbox-t .navbox-b { padding: 8px 14px; text-align: center; background: rgba(3, 10, 20, 0.35); }
@media (max-width: 700px) { .navbox-r { grid-template-columns: 1fr; } }
/* editor: the «N лет назад» hint no longer pushes the field down */
.ed-field:has(.ed-calc) { position: relative; }
.ed-field .ed-calc { position: absolute; right: 10px; bottom: 9px; margin: 0; pointer-events: none; font-size: 12px; color: var(--text-2, #93abc0); }
/* folder navboxes (GM 2026-10-21): title in the folder's colour, links to the folder's article / list */
.navbox { --fc: var(--cyan-hi); border-color: color-mix(in srgb, var(--fc) 35%, transparent); }
.navbox-h { background: color-mix(in srgb, var(--fc) 12%, transparent); }
.navbox-h .lbl, .navbox-h a.lbl { color: var(--fc); text-decoration: none; }
.navbox-h a.lbl:hover { text-decoration: underline; }
.navbox-act { position: absolute; right: 16px; display: flex; gap: 12px; align-items: center; }
.navbox-h .navbox-act .linkish { position: static; }
.navbox-g { color: color-mix(in srgb, var(--fc) 80%, #fff); background: color-mix(in srgb, var(--fc) 7%, transparent); }
.category .navboxes { margin: 14px 0 18px; }
.navbox-sub { color: color-mix(in srgb, var(--fc) 70%, #fff); } /* brackets in the box colour; links keep the normal link look */

/* credit sign « %кр» (GM 2026-10-21) */
.cr-sym { display: inline-block; width: 0.78em; height: 0.95em; vertical-align: -0.12em; }
.cr-sym svg { width: 100%; height: 100%; display: block; }
/* «Все файлы» (GM 2026-10-21) */
.files-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }
.files-bar .input { flex: 1 1 200px; max-width: 320px; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.files-card { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--line); background: rgba(3, 10, 20, 0.4); display: grid; grid-template-rows: 130px auto 1fr; }   /* min-width 0: a long file name must not widen the card past its column */
.files-card > a { display: block; min-width: 0; overflow: hidden; }
.files-card img { width: 100%; height: 130px; object-fit: contain; display: block; background: #020509; }
.files-3d { display: grid; place-items: center; height: 130px; width: 100%; border: 0; background: radial-gradient(circle, rgba(76, 201, 255, 0.16), transparent 70%); color: var(--cyan-hi); font: 26px var(--f-label); letter-spacing: 0.1em; cursor: pointer; text-decoration: none; }
.files-card figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px 5px; font-size: 12px; align-items: center; min-width: 0; }
.files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); }
.files-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.7); display: grid; place-items: center; }
.files-modal-box { width: min(720px, 92vw); padding: 12px; }
.files-modal-h { display: flex; justify-content: space-between; margin-bottom: 8px; }
.files-stage { position: relative; height: min(70vh, 620px); }
.ed-cover-name { min-width: 180px; }
.files-link { margin: 8px 0 0; text-align: right; }

/* ---- clearance block picker (editor, GM): rank pips + department icons + race / tag chips ---- */
.cl-pick { display: grid; gap: 8px; margin-bottom: 10px; }
.cl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cl-row > .lbl { min-width: 112px; }
.cl-pips { display: inline-flex; gap: 2px; }
.cl-pip { width: 28px; height: 28px; border: 1px solid rgba(147,171,192,.35); background: rgba(0,0,0,.25); color: var(--text-3); cursor: pointer; font-size: 17px; line-height: 1; }
.cl-pip.on { color: var(--gold); border-color: rgba(232,184,74,.6); }
.cl-rank { font-size: 11px; letter-spacing: .08em; color: var(--text-2); }
.cl-x { padding: 0 4px; background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: 16px; }
.cl-x:hover { color: var(--red); }
.cl-depts { display: inline-flex; gap: 4px; }
.cl-dept { width: 32px; height: 32px; padding: 5px; border: 1px solid rgba(147,171,192,.25); background: rgba(0,0,0,.25); color: var(--dc); opacity: .45; cursor: pointer; }
.cl-dept svg { width: 100%; height: 100%; fill: currentColor; }
.cl-dept:hover { opacity: .8; }
.cl-dept.on { opacity: 1; border-color: var(--dc); background: color-mix(in srgb, var(--dc) 18%, transparent); }
.cl-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cl-tags .chip button { margin-left: 6px; padding: 0; color: var(--text-3); background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; }
.cl-tags .chip button:hover { color: var(--red); }
.cl-hint { margin: 0; font-size: 11px; color: var(--text-3); }

/* ---- image lightbox (ui/Lightbox.tsx), 2026-10-21 ---- */
.lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 12, 0.94); padding: 24px 64px 64px; cursor: zoom-out; }
.lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
.lightbox .lb-x { position: absolute; top: 10px; right: 14px; font-size: 34px; line-height: 1; color: #cfe3f5; background: none; border: 0; cursor: pointer; padding: 4px 10px; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 44px; line-height: 1; color: #cfe3f5; background: none; border: 0; cursor: pointer; padding: 12px 16px; opacity: 0.75; }
.lightbox .lb-nav:hover, .lightbox .lb-x:hover { opacity: 1; color: #fff; }
.lightbox .lb-prev { left: 6px; } .lightbox .lb-next { right: 6px; }
.lightbox .lb-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 16px; align-items: center; justify-content: center; padding: 14px 24px; cursor: default; color: #cfe3f5; font-size: 14px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent); }
.lightbox .lb-orig { color: var(--cyan-hi, #7fd8ff); font-family: var(--f-label, inherit); letter-spacing: 0.08em; text-decoration: none; }
.infobox-art a[data-lightbox] { display: block; cursor: zoom-in; }
.wiki-img a[data-lightbox], .wg-item a[data-lightbox] { cursor: zoom-in; }

/* ---- redirects, datacard model tabs, star-map placeholder, 2026-10-21 ---- */
.redirected-from { margin: -6px 0 10px; font-size: 13px; color: var(--text-2); }
.redirect-block { padding: 14px 16px; border: 1px solid var(--line); background: rgba(76, 201, 255, 0.05); font-family: var(--f-label, inherit); letter-spacing: 0.08em; }
.infobox-art.ib-media.ib-generic[data-show="model"] .ib-image, .infobox-art.ib-media.ib-generic[data-show="image"] .ib-stage { visibility: hidden; }
.starmap-ph { margin: 10px 14px 14px; }
.starmap-ph .smp-box { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); text-align: center;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: repeating-linear-gradient(0deg, rgba(120, 180, 255, 0.07) 0 1px, transparent 1px 4px), #050b14; }
.starmap-ph .smp-box b { font-family: var(--f-label, inherit); letter-spacing: 0.1em; font-weight: 500; color: var(--text-2); }
.starmap-ph .smp-sys { font-size: 12px; color: var(--cyan-hi, #7fd8ff); }
.starmap-ph button { margin-top: 8px; width: 100%; }

.ed-redir { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-2); }

/* clearance: department tags = short code in the department colour (GM 2026-10-21) */
.ctag-dept .ctag-box { color: var(--dc); border-color: color-mix(in srgb, var(--dc) 70%, transparent); background: color-mix(in srgb, var(--dc) 10%, transparent); font-family: var(--f-label); letter-spacing: 0.1em; }

/* datacard images are wrapped in a lightbox link (2026-10-21): keep the old sizes (the logo grew to the full width) */
.infobox-art > a[data-lightbox] { display: grid; place-items: center; width: 100%; height: 100%; }
.infobox-art > a > img { height: 160px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); }
.infobox-art.portrait > a { place-items: end center; }
.infobox-art.portrait > a > img { height: 100%; width: 100%; max-width: none; object-fit: cover; object-position: center top; padding-left: 34px; filter: none; }
.infobox-art.ib-generic .ib-image { object-fit: contain; padding: 24px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); }
.infobox-art.ib-generic { height: 300px; }
@media (max-width: 900px) { .infobox-art > a > img { height: 100px; } .infobox-art.portrait > a > img { height: 100%; } }

/* editor toolbar: list icons (GM 2026-10-21) */
.ed-tb .ed-ico { width: 18px; height: 14px; display: block; margin: 0 auto; }

/* ---------- scrollbars (GM 2026-10-23): one glowing, bluish console scrollbar for every scroll area of the app (map too).
   Chrome ignores ::-webkit-scrollbar on elements that set scrollbar-width / scrollbar-color, so no rule may set those
   (Firefox, which has no ::-webkit-scrollbar, gets the colours below instead). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, transparent 4px, rgba(76, 201, 255, 0.13) 4px 6px, transparent 6px),
    linear-gradient(90deg, rgba(3, 9, 18, 0.55), rgba(8, 20, 36, 0.55));
}
::-webkit-scrollbar-track:horizontal {
  background:
    linear-gradient(180deg, transparent 4px, rgba(76, 201, 255, 0.13) 4px 6px, transparent 6px),
    linear-gradient(180deg, rgba(3, 9, 18, 0.55), rgba(8, 20, 36, 0.55));
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent; border-radius: 2px; background-clip: padding-box;
  background-color: rgba(76, 201, 255, 0.55);
  background-image: linear-gradient(180deg, rgba(170, 236, 255, 0.85), rgba(76, 201, 255, 0.55) 30%, rgba(40, 130, 230, 0.6));
  box-shadow: inset 0 0 0 1px rgba(170, 236, 255, 0.55), inset 0 0 6px rgba(120, 220, 255, 0.9);
}
::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(90deg, rgba(170, 236, 255, 0.85), rgba(76, 201, 255, 0.55) 30%, rgba(40, 130, 230, 0.6)); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 220, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(210, 246, 255, 0.8), inset 0 0 9px rgba(170, 240, 255, 1); }
::-webkit-scrollbar-thumb:active { background-color: rgba(170, 236, 255, 0.85); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(76, 201, 255, 0.6) rgba(5, 14, 26, 0.6); }
}

/* wiki years («2074 году»): hover = how long ago from the ship year (lib/markup.ts years(), ui/tooltips.ts) */
.yr { border-bottom: 1px dotted rgba(147, 171, 192, 0.55); cursor: help; }
.yr:hover, .yr:focus-visible { color: var(--cyan-hi); outline: none; }
.files-act { display: flex; flex-wrap: wrap; align-items: end; gap: 4px 12px; padding: 0 8px 7px; }
.files-act .danger { margin-left: auto; color: var(--red); }
.files-act .danger:hover { color: #ff8a96; }

/* crew channel cards (ported 2026-10-26 with the app chat): log access grant, shared coordinates, a roll's outcome */
.cm-grant { --who: var(--green); margin: 10px 0 4px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); border-left-width: 3px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 65%), rgba(10, 10, 12, 0.6); }
.cm-grant .cm-n { font: 400 15px/1 var(--f-label); letter-spacing: 0.1em; color: var(--green); }
.gr-ic { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 1.5; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--green) 50%, transparent)); }
.gr-entry { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 5px 8px 5px 5px; color: inherit; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--dept) 30%, transparent); background: rgba(0, 0, 0, 0.3); }
.gr-entry:hover { border-color: color-mix(in srgb, var(--dept) 65%, transparent); }
.gr-pf { flex: none; width: 34px; height: 34px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--dept) 55%, transparent); }
.gr-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gr-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text, #e6eef6); }
.gr-a { font: 400 10.5px var(--f-mono); color: var(--dept); }
.gr-go { flex: none; font: 400 12px var(--f-label); letter-spacing: 0.1em; color: var(--green); }
.cm-coord { margin: 10px 0 4px; padding: 9px 12px; border: 1px solid color-mix(in srgb, #ffd27a 40%, transparent); border-left-width: 3px;
  background: linear-gradient(100deg, rgba(255, 210, 122, 0.1), transparent 65%), rgba(10, 10, 12, 0.6); }
.cm-coord .cm-n { font: 400 15px/1 var(--f-label); letter-spacing: 0.1em; color: #ffd27a; }
.cm-coord .cm-ic { width: 15px; height: 15px; fill: none; stroke: #ffd27a; stroke-width: 1.5; }
.co-entry { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 5px 8px 5px 5px; color: inherit; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--dept) 30%, transparent); background: rgba(0, 0, 0, 0.3); }
.co-entry:hover { border-color: color-mix(in srgb, var(--dept) 65%, transparent); }
.co-who { font: 400 11px var(--f-body); color: var(--dept); }
.co-entry .gr-t i { font-style: normal; color: var(--text-3); font-size: 0.9em; }
.co-entry .gr-go { color: #ffd27a; }
.co-gm { display: grid; place-items: center; background: var(--gm); }
.co-gm .emblem { --w: 13px; color: #120a2a; filter: none; }
.rc-vs { font: 11.5px/1.35 var(--f-body); color: var(--text-3); }
.rc-vs b { color: #5fe39a; font-weight: 600; }
.rc-vs.fail b { color: #ff6b5a; }

/* session page: SHIP ROUTE (the ship's arrivals in that session; ported 2026-10-26 with the star map) */
.sp-route { list-style: none; counter-reset: rt; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0 0 18px; padding: 0; }
.sp-route li { counter-increment: rt; display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px 6px 10px; border: 1px solid var(--line-2); background: rgba(9, 20, 36, 0.6); }
.sp-route li::before { content: counter(rt); font: 600 11px/1 var(--f-mono); color: var(--text-3); }
.sp-route li + li { margin-left: 26px; position: relative; }
.sp-route li + li::after { content: '›'; position: absolute; left: -19px; top: 50%; transform: translateY(-52%); font-size: 18px; color: var(--cyan); opacity: 0.7; }
.sp-route a { font: 500 15px/1.1 var(--f-head); letter-spacing: 0.04em; color: var(--cyan-hi); text-decoration: none; }
.sp-route a:hover { text-decoration: underline; }
.sp-route .mono { font-size: 11px; color: var(--text-3); }

/* missions: ЛОКАЦИЯ (GM edit mode) + the mini window of the bound system (ported 2026-10-26 with the star map) */
.m-loc-ed { display: flex; align-items: center; gap: 10px; margin-top: 10px; max-width: 520px; }
.m-loc-ed .lbl { font-size: 11.5px; color: #b9a8f0; white-space: nowrap; }
.m-loc-ed .input { flex: 1; min-width: 0; }
.m-loc-x { width: 26px; height: 26px; flex: none; color: var(--text-2); background: none; border: 1px solid var(--line); cursor: pointer; font-size: 16px; line-height: 1; }
.m-loc-x:hover { color: var(--red, #ff5a5f); border-color: currentColor; }

/* mission → its system: a mini window of the map (GM 2026-10-20 mock-up), right of the text */
.mission.has-sys { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.m-sys { --v: #9b86e0; position: relative; display: block; width: 236px; height: 92px; flex: none; overflow: hidden; text-decoration: none; isolation: isolate;
  background: #04030b; border: 1px solid rgba(155, 134, 224, 0.55); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: border-color 0.2s, box-shadow 0.2s; }
.m-sys::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px), linear-gradient(90deg, transparent 40%, rgba(30, 140, 110, 0.12)); }
.m-sys::after { content: ''; position: absolute; inset: 5px; z-index: 4; pointer-events: none;
  background: linear-gradient(var(--v), var(--v)) 0 0 / 22px 2px, linear-gradient(var(--v), var(--v)) 0 0 / 2px 22px,
    linear-gradient(var(--v), var(--v)) 100% 100% / 14px 2px, linear-gradient(var(--v), var(--v)) 100% 100% / 2px 14px; background-repeat: no-repeat; opacity: 0.85; }
.m-sys-star { position: absolute; left: -70px; top: 50%; width: 118px; height: 118px; margin-top: -59px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 70% 45%, #fff 0, color-mix(in srgb, var(--sc) 55%, #fff) 30%, var(--sc) 62%, color-mix(in srgb, var(--sc) 60%, #000) 100%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--sc) 70%, transparent), 0 0 60px color-mix(in srgb, var(--sc) 30%, transparent); }
.m-sys-bh { position: absolute; left: -6px; top: 50%; width: 200px; height: 100px; margin-top: -50px; z-index: 1; }
.m-sys-bh .bh-art { width: 100%; height: 100%; display: block; }
.m-sys-fun { position: absolute; left: -46px; top: 50%; width: 92px; height: 92px; margin-top: -46px; border-radius: 50%; z-index: 1; background: #000; box-shadow: 0 0 0 3px #ff9b4a, 0 0 18px 4px rgba(255, 140, 60, 0.6); }
.m-sys-wh { position: absolute; left: -40px; top: 50%; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; z-index: 1; background: radial-gradient(circle, #000 18%, #2bd0ff 40%, transparent 70%); }
.m-sys-pls { position: absolute; left: 60px; right: 30px; top: 30px; height: 34px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; }
.m-sys-pls i { flex: none; width: var(--ps); height: var(--ps); border-radius: 50%; display: grid; place-items: center; font: 600 max(8px, calc(var(--ps) * 0.48))/1 var(--f-head); font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 60%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 55%, #000)); text-shadow: 0 1px 2px #000; }
.m-sys-name { position: absolute; left: 30px; right: 30px; top: 9px; z-index: 2; font: 500 13px/1.1 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; color: #ece6ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9); text-align: center; }
.m-sys-open { position: absolute; left: 0; right: 0; bottom: 7px; z-index: 2; text-align: center; font-size: 15px; letter-spacing: 0.08em; color: var(--v); text-shadow: 0 0 8px rgba(155, 134, 224, 0.6); }
.m-sys-arr { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; z-index: 4; fill: none; stroke: var(--v); stroke-width: 2.6; stroke-linecap: square; }
.m-sys:hover, .m-sys:focus-visible { border-color: rgba(190, 170, 255, 0.95); box-shadow: 0 0 16px rgba(155, 134, 224, 0.35); --v: #c4b2ff; }
@media (max-width: 760px) { .mission.has-sys { grid-template-columns: auto minmax(0, 1fr) auto; } .mission.has-sys .m-sys { grid-column: 2; width: 100%; max-width: 280px; } }
.infobox .ib-sysmini { margin-top: 12px; } .infobox .ib-sysmini .m-sys { width: 100%; }   /* world datacard: its star system (2026-10-26) */

/* crew channel (GM 2026-10-26): delete a message (own; the GM any) — a small × on hover; the achievement card */
.cm-del { position: absolute; top: 1px; right: 2px; z-index: 2; width: 20px; height: 20px; display: none; place-items: center; padding: 0;
  font: 400 15px/1 var(--f-body); color: var(--c-mute, #80858e); background: var(--c-field, #1f2024); border: 1px solid var(--c-frame, #2c2e33); cursor: pointer; }
.cm:hover > .cm-del, .cm-del:focus-visible { display: grid; }
.cm-del:hover { color: #ff6b5a; border-color: #ff6b5a; }
.cm-ach { margin: 10px 0 4px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-left-width: 3px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 65%), rgba(10, 10, 6, 0.55); }
.cm-ach .cm-n { font: 400 15px/1 var(--f-label); letter-spacing: 0.1em; color: var(--gold); }
.cm-ach .ach-ic { width: 14px; height: 14px; background: var(--gold); -webkit-mask: url(/assets/achievements/creator.png) center / contain no-repeat; mask: url(/assets/achievements/creator.png) center / contain no-repeat; }
.ach-card { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ach-big { flex: none; width: 40px; height: 40px; background: var(--gold); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 60%, transparent));
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ach-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ach-mid b { font: 500 15px/1.15 var(--f-head); color: var(--c-text, #e6eef6); }
.ach-mid i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.ach-who { font-size: 12.5px; color: var(--c-mute, #9aa7b4); }
.ach-task { font-size: 12px; color: var(--text-3); font-style: italic; }

/* ported 2026-10-26 with the app DMs (ui/Dm.tsx) */
/* ---------- personal messages (GM 2026-10-20): button by the bell + a window with vertical tabs (Discord DMs), over every other popup */
.dm-btn { position: relative; }
.dm-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dm-btn .badge[hidden] { display: none; }
.dm-scrim { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(2, 6, 14, 0.55), rgba(0, 0, 0, 0.78)); backdrop-filter: blur(2px); }
.dm-scrim[hidden] { display: none; }
.dm-win { --a: #6fb8ff; width: min(940px, 100%); height: min(620px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr); color: var(--text);
  background: linear-gradient(180deg, #0a1220, #05080f 30%); border: 1px solid rgba(111, 184, 255, 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 20px 70px rgba(0, 0, 0, 0.7), 0 0 30px rgba(111, 184, 255, 0.12);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.dm-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 24px; border-bottom: 1px solid rgba(111, 184, 255, 0.28); background: linear-gradient(90deg, rgba(111, 184, 255, 0.16), transparent 70%); }
.dm-h > .lbl { flex: 1; font-size: 16px; letter-spacing: 0.14em; color: #dff0ff; }
.dm-hic { width: 20px; height: 20px; fill: none; stroke: var(--a); stroke-width: 1.6; stroke-linejoin: round; }
.dm-as { display: inline-flex; align-items: center; gap: 6px; } .dm-as .lbl { font-size: 11px; color: var(--gm); }
.dm-as select { background: #0b1322; color: var(--text); border: 1px solid var(--line-2); font: 12px var(--f-body); padding: 3px 6px; }
.dm-x { width: 30px; height: 30px; font-size: 22px; line-height: 1; color: var(--text-3); background: none; border: 0; cursor: pointer; } .dm-x:hover { color: #fff; }
.dm-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
.dm-tabs { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; overflow-y: auto; border-right: 1px solid rgba(111, 184, 255, 0.18); background: rgba(0, 0, 0, 0.28); }
.dm-tab { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; text-align: left; color: var(--text-2);
  background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s; }
.dm-tab:hover { background: rgba(111, 184, 255, 0.08); color: #fff; }
.dm-tab.on { background: linear-gradient(90deg, rgba(111, 184, 255, 0.2), rgba(111, 184, 255, 0.04)); border-left-color: var(--a); color: #fff; }
.dm-tab.npc.on { border-left-color: var(--gm); background: linear-gradient(90deg, rgba(169, 139, 255, 0.2), rgba(169, 139, 255, 0.04)); }
.dm-tt { min-width: 0; display: grid; gap: 2px; }
.dm-tt b { font: 500 14px/1.15 var(--f-head); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-tt i { font-style: normal; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-badge { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; font: 600 11px/1 var(--f-mono); font-style: normal; color: #fff; background: var(--red, #ff4d5e); border-radius: 9px; }
.dm-av { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--d, var(--line-2)); background: #0b1220;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.dm-av img { width: 100%; height: 100%; object-fit: cover; }
.dm-av.gm { background: rgba(169, 139, 255, 0.22); border-color: var(--gm); }
.dm-av.gm .emblem { --w: 15px; color: color-mix(in srgb, var(--gm) 80%, #fff); filter: drop-shadow(0 0 4px var(--gm)); }
.dm-av.npc { border-color: rgba(169, 139, 255, 0.6); }
.dm-tab .dm-to { grid-row: 1; grid-column: -2; display: flex; }   /* GM 2026-10-20: NPC chats show the player on the other side, right of the name */
.dm-tab:has(.dm-to) { grid-template-columns: 36px minmax(0, 1fr) auto 36px; }
.dm-new { margin-top: auto; padding-top: 8px; display: grid; gap: 6px; }
.dm-add { padding: 8px; font: 500 12.5px/1 var(--f-label); letter-spacing: 0.08em; color: #c9b8ff; background: rgba(169, 139, 255, 0.08); border: 1px dashed rgba(169, 139, 255, 0.45); cursor: pointer; }
.dm-add:hover { background: rgba(169, 139, 255, 0.16); color: #fff; }
.dm-form { display: grid; gap: 6px; }
.dm-form select { background: #0b1322; color: var(--text); border: 1px solid var(--line-2); font: 12.5px var(--f-body); padding: 5px; }
.dm-npc { display: flex; align-items: center; gap: 8px; padding: 5px 6px; text-align: left; font: 13px var(--f-body); color: var(--text-2); background: none; border: 1px solid transparent; cursor: pointer; }
.dm-npc:hover { border-color: rgba(169, 139, 255, 0.5); color: #fff; } .dm-npc .dm-av { width: 28px; height: 28px; }
.dm-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.dm-th { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(111, 184, 255, 0.14); }
.dm-th .dm-tt b { font-size: 16px; }
.dm-log { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
  background: repeating-linear-gradient(180deg, rgba(111, 184, 255, 0.025) 0 1px, transparent 1px 4px); }
.dm-m { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.dm-m.grp { margin-top: 0; } .dm-m.grp > div { grid-column: 2; }
.dm-mh { display: flex; align-items: baseline; gap: 8px; } .dm-mh b { font: 500 14px var(--f-head); letter-spacing: 0.03em; color: #e8f4ff; }
.dm-m.me .dm-mh b { color: var(--a); }
.dm-mh time { font: 11px var(--f-mono); color: var(--text-3); }
.dm-m p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.dm-empty { margin: auto; padding: 30px; color: var(--text-3); font-size: 13px; text-align: center; }
.dm-in { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 10px 14px 14px; border-top: 1px solid rgba(111, 184, 255, 0.14); }
.dm-pr { font: 600 18px/30px var(--f-mono); color: var(--a); }
.dm-in textarea { flex: 1; min-height: 30px; max-height: 140px; resize: none; padding: 6px 10px; font: 14px/1.4 var(--f-body); color: var(--text); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(111, 184, 255, 0.3); outline: none; }
.dm-in.ro textarea { opacity: 0.6; cursor: not-allowed; border-style: dashed; }
.dm-in textarea:focus { border-color: var(--a); box-shadow: 0 0 0 1px rgba(111, 184, 255, 0.25); }
@media (max-width: 700px) { .dm-body { grid-template-columns: 76px minmax(0, 1fr); } .dm-tt, .dm-tab .dm-badge, .dm-tab .dm-to { display: none; } .dm-tab, .dm-tab:has(.dm-to) { grid-template-columns: 36px; justify-content: center; } .dm-new { display: none; } }
/* NPC datacard: «ЛИЧНЫЕ СООБЩЕНИЯ» toggle (GM) / «НАПИСАТЬ» (players) */
.ib-dm { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ib-dm .lbl { font-size: 12px; color: var(--text-3); }
.ib-dm-tog { padding: 4px 10px; font: 500 12px/1 var(--f-label); letter-spacing: 0.08em; color: var(--text-3); background: none; border: 1px solid var(--line-2); cursor: pointer; }
.ib-dm-tog[aria-pressed="true"] { color: #fff; border-color: var(--gm); background: rgba(169, 139, 255, 0.22); box-shadow: 0 0 10px rgba(169, 139, 255, 0.3); }

/* personal log read receipts (ported 2026-10-26) */
.log-foot-r { display: inline-flex; align-items: center; gap: 10px; }
.log-reads { display: inline-flex; align-items: center; gap: 6px; }
.lr-pfs { display: inline-flex; }
.lr-pf { width: 20px; height: 20px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--dept) 70%, transparent); background: #0a0f17; }
.lr-pf + .lr-pf { margin-left: -4px; }
.lr-pf:hover { position: relative; z-index: 1; border-color: var(--dept); }
.lr-ticks { width: 16px; height: 16px; fill: none; stroke: var(--text-3, #6d8295); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.log-reads.all .lr-ticks { stroke: var(--cyan); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cyan) 60%, transparent)); }

/* MAP rail button, the GM-approved HUD (prototype 2026-10-18; ported 2026-10-26): weaker hatched ring, a smaller sight, outer half-arcs that close in on hover; no MAP on phones */
.ri-hud .hud-ticks circle { stroke-width: 2.6; stroke-dasharray: 1.15 1.85; stroke-opacity: 0.42; }   /* 64 bold strokes, r 29.1–31.7 (keep: GM likes it), a weaker shade so the parts don't merge */
.ri-hud .hud-sight circle { stroke-width: 1.4; stroke-dasharray: 35.5 4.4; stroke-dashoffset: -2.2; }   /* sight: four quarter arcs (r 24.7–26.1, a clear gap to the strokes), gaps at 0/90/180/270° */
.ri-hud .hud-out { animation-duration: 17s; opacity: 0; transition: opacity 0.3s; }
.ri-hud .hud-zoom { transform-box: view-box; transform-origin: 0 0; transform: scale(1.25); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); animation: none; }
.ri-map:hover .ri-hud .hud-zoom, .ri-map:focus-visible .ri-hud .hud-zoom { transform: scale(1); }
.ri-hud .hud-out circle { stroke-width: 1.4; stroke-dasharray: 82.1 23.45; stroke-dashoffset: -11.73; stroke-linecap: round; }   /* two 140° arcs, 40° gaps around the arrows */
.ri-hud .hud-out path { fill: var(--tab); stroke: none; }
@media (max-width: 900px) and (pointer: coarse) { .ri-map { display: none; } }
/* kept pages (Shell): the wrapper of every rail section's last page; only the current one is shown */
.main > .kept { display: contents; }
.main > .kept[hidden] { display: none; }

/* NPC picker (GM 2026-10-26): a grid of square portraits, name = tooltip (hundreds of NPCs) — GM log АВТОР, star map signal sender (ui/NpcPicker.tsx) */
.npk { position: relative; display: inline-block; min-width: 220px; max-width: 100%; }
.npk-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px 4px 4px; font: 500 13.5px/1.2 var(--f-body); color: var(--text);
  text-align: left; background: rgba(8, 18, 32, 0.9); border: 1px solid var(--line-2); cursor: pointer; }
.npk-btn:hover, .npk-btn[aria-expanded="true"] { border-color: var(--cyan); }
.npk-btn img { width: 28px; height: 28px; flex: none; object-fit: cover; border: 1px solid var(--line-2); background: #0a0f17; }
.npk-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npk-btn i { font-style: normal; color: var(--text-3); }
.npk-pop { position: absolute; z-index: 60; left: 0; top: calc(100% + 4px); width: 438px; max-width: min(438px, calc(100vw - 32px)); padding: 8px; display: grid; gap: 8px;
  background: rgba(4, 10, 20, 0.98); border: 1px solid var(--cyan); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.npk-pop .input { width: 100%; }
.npk-grid { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 4px; max-height: 312px; overflow: auto; align-content: start; }
.npk-grid > button { width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-2); background: #0a0f17; cursor: pointer; }
.npk-grid > button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.npk-grid > button:hover { border-color: var(--cyan); box-shadow: 0 0 8px rgba(76, 201, 255, 0.45); }
.npk-grid > button[aria-selected="true"] { border-color: var(--cyan); outline: 1px solid var(--cyan); outline-offset: 1px; }
.npk-none { grid-column: 1 / -1; margin: 6px 2px; color: var(--text-3); }
.npk-tip { position: fixed; z-index: 600; transform: translate(-50%, -100%); padding: 4px 8px; pointer-events: none; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; background: rgba(4, 10, 20, 0.97); border: 1px solid var(--line-2); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.npk-tip[hidden] { display: none; }
.npk-tip b { font: 500 13px/1.25 var(--f-body); color: var(--text); }
.npk-tip i { font-style: normal; font-size: 11px; color: var(--text-3); }