/* ============================================================
   ZEKTORA — "vectorheart" design system
   Designers-Republic / WipEout neo-brutalist HUD. Flat bold blocks,
   hard offset shadows (no blur), registration ticks, katakana sublabels,
   cheerful-corporate dystopia. Mobile-first, responsive.
   ============================================================ */

:root {
  /* surfaces */
  --void: #0B0E14;
  --void-2: #090c11;
  --panel: #11151F;
  --panel-2: #161b29;
  --line: #2a3245;
  --line-bright: #3b4763;
  --ink: #E7ECF5;
  --ink-dim: #8a97b3;
  --ink-faint: #5b6781;

  /* accents — one punchy hue per context */
  --cyan: #27E5FF;     /* legit / credits / Concordat */
  --magenta: #FF2D7E;  /* crime / danger / Cinder Pact / the "heart" */
  --lime: #B6FF3C;     /* success / contracts */
  --amber: #FFB020;    /* warnings / Combine */
  --slate: #9AA7BF;    /* neutral / free operators */

  --gov-CN: var(--cyan);
  --gov-MC: var(--amber);
  --gov-CP: var(--magenta);
  --gov-WK: #7CF6C2;
  --gov-FO: var(--slate);

  /* type */
  /* Blinker is the game's main typeface (display + body + labels). IBM Plex Mono
     is retained only for aligned data/HUD readouts; Noto Sans JP for katakana. */
  --f-display: "Blinker", system-ui, sans-serif;
  --f-body: "Blinker", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-jp: "Noto Sans JP", sans-serif;

  /* structure */
  --bw: 2px;                       /* border width */
  --shadow: 5px 5px 0 #000;        /* hard offset shadow, no blur */
  --shadow-lg: 8px 8px 0 #000;
  --radius: 0;                     /* neo-brutalist: sharp */
  --gap: 14px;
  --tick: 11px;                     /* corner registration tick size */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, #11203a 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #1a0f22 0%, transparent 55%),
    var(--void);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;       /* never sideways-scroll */
  overflow-y: auto;         /* always allow vertical scroll when content overflows */
  min-height: 100%;
}

a { color: var(--cyan); }
button { font-family: inherit; }
::selection { background: var(--magenta); color: #000; }

/* ---------- scrollbars: neo-brutalist, replaces Chrome's default ---------- */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }
/* WebKit / Chromium / Edge */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void-2); }
::-webkit-scrollbar-thumb {
  background: var(--line-bright);
  border: 2px solid var(--void-2);   /* hard inset block, sharp corners */
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
::-webkit-scrollbar-thumb:active { background: var(--magenta); }
::-webkit-scrollbar-corner { background: var(--void-2); }

/* ---------- overlays: grain + scanlines ---------- */
.grain, .scan { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
.grain {
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan {
  opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.22) 3px 4px);
}

/* ---------- type helpers ---------- */
.display { font-family: var(--f-display); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mono { font-family: var(--f-mono); }
.jp { font-family: var(--f-jp); }
.label {
  font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim);
}
.code { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

/* tones */
.t-good { color: var(--lime); }
.t-bad, .t-crime { color: var(--magenta); }
.t-warn { color: var(--amber); }
.t-cyan { color: var(--cyan); }

/* ============================================================
   BOOT SCREEN
   ============================================================ */
.boot { display:grid; place-content:center; gap:14px; height:100dvh; text-align:center; }
.boot__mark { font-size:54px; color:var(--cyan); animation: spin 6s linear infinite; }
.boot__title { font-family:var(--f-display); font-weight:900; font-size:40px; letter-spacing:.12em; }
.boot__sub { font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; color:var(--ink-dim); }
.boot__bar { width:min(360px,70vw); height:8px; border:var(--bw) solid var(--line-bright); margin:8px auto 0; }
.boot__bar span { display:block; height:100%; width:0; background:var(--magenta); animation: load 1.4s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
.boot__legal { font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--ink-faint); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes load { 0%{width:4%} 60%{width:96%} 100%{width:4%} }

/* ---------- brand logo (chrome wordmark) ---------- */
.boot__logo {
  width: min(420px, 78vw); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.6));
  animation: logoin .6s cubic-bezier(.2,.9,.2,1.1) both;
}
.auth__logo {
  width: min(340px, 72vw); height: auto; display: block; margin: 0 auto 4px;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.55));
  animation: logoin .55s cubic-bezier(.2,.9,.2,1.1) both;
}
.brand-logo { height: 26px; width: auto; display: block; filter: drop-shadow(2px 2px 0 #000); }
@keyframes logoin {
  0% { opacity: 0; transform: translateY(8px) scale(.96) skewX(-6deg); filter: drop-shadow(0 0 16px var(--cyan)); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   PANELS — the core neo-brutalist surface
   ============================================================ */
.app { min-height: 100dvh; }

.panel {
  position: relative;
  background: var(--panel);
  border: var(--bw) solid var(--line-bright);
  box-shadow: var(--shadow);
  /* Vectorheart baseline grid pattern on panel background */
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 16px 16px;
}
.panel::before, .panel::after {
  /* corner registration ticks */
  content: ""; position: absolute; width: var(--tick); height: var(--tick);
  border-color: var(--accent, var(--ink-dim)); border-style: solid; pointer-events:none;
  z-index: 4;
}
.panel::before { top:-2px; left:-2px; border-width: 3px 0 0 3px; }
.panel::after  { bottom:-2px; right:-2px; border-width: 0 3px 3px 0; }

.panel__head {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom: var(--bw) solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  position: relative;
}
.panel__head h2 {
  margin:0; font-family:var(--f-display); font-weight:900; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  display: flex; align-items: center; gap: 8px;
}
.panel__head .jp { font-size:11px; color:var(--ink-faint); }
.panel__head .code { margin-left:auto; }

/* Micro-Telemetry prefixes and Japanese sub-markers */
.panel__head::before {
  content: "[ SYS // 01 ]";
  font-family: var(--f-mono);
  font-size: 8px;
  color: var(--accent, var(--cyan));
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.area-comms .panel__head h2::after { content: " // コミュ"; font-family: var(--f-jp); font-weight: normal; font-size: 9px; color: var(--accent, var(--cyan)); }
.area-map .panel__head h2::after { content: " // ナビ"; font-family: var(--f-jp); font-weight: normal; font-size: 9px; color: var(--accent, var(--cyan)); }
.area-market .panel__head h2::after { content: " // 取引"; font-family: var(--f-jp); font-weight: normal; font-size: 9px; color: var(--accent, var(--cyan)); }
.area-crew .panel__head h2::after { content: " // クルー"; font-family: var(--f-jp); font-weight: normal; font-size: 9px; color: var(--accent, var(--cyan)); }
.area-jobs .panel__head h2::after { content: " // ミッション"; font-family: var(--f-jp); font-weight: normal; font-size: 9px; color: var(--accent, var(--cyan)); }

.panel__body { 
  padding:14px; 
  /* Faint telemetry dot-grid background */
  background-image: radial-gradient(rgba(39, 229, 255, 0.02) 1px, transparent 0);
  background-size: 14px 14px;
}

/* accent bar on the left of a headed panel */
.panel[data-accent]::before { border-color: var(--accent); }
.panel .accent-tab {
  position:absolute; left:-1px; top:34px; bottom:8px; width:3px; background:var(--accent, var(--cyan));
}

/* gov accent contexts */
[data-gov="CN"]{ --accent: var(--gov-CN); }
[data-gov="MC"]{ --accent: var(--gov-MC); }
[data-gov="CP"]{ --accent: var(--gov-CP); }
[data-gov="WK"]{ --accent: var(--gov-WK); }
[data-gov="FO"], [data-gov="NEUTRAL"]{ --accent: var(--gov-FO); }

/* ============================================================
   BUTTONS / CONTROLS
   ============================================================ */
.btn {
  --b: var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--panel-2);
  border:var(--bw) solid var(--b); padding:10px 16px; cursor:pointer;
  box-shadow: 4px 4px 0 #000; transition: transform .06s, box-shadow .06s, background .12s;
  user-select:none;
  border-radius: 0;
}
.btn:hover { background:#1c2334; }
.btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 #000; }
.btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.btn--cyan { --b: var(--cyan); color: var(--cyan); }
.btn--lime { --b: var(--lime); color: var(--lime); }
.btn--amber { --b: var(--amber); color: var(--amber); }
.btn--magenta { --b: var(--magenta); color: var(--magenta); }
.btn--solid { background: var(--accent, var(--cyan)); color:#000; border-color:#000; }
.btn--solid:hover { filter: brightness(1.08); background: var(--accent, var(--cyan)); }
.btn--block { width:100%; }
.btn--sm { padding:6px 11px; font-size:11px; }

.input, select.input {
  width:100%; background:var(--void-2); color:var(--ink);
  border:var(--bw) solid var(--line-bright); padding:10px 12px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.8);
}
.input:focus { outline:none; border-color:var(--cyan); box-shadow: inset 2px 2px 0 rgba(0,0,0,0.8), 0 0 0 2px rgba(39,229,255,.18); }

.chev { /* hazard chevron strip for danger/criminal UI */
  background-image: repeating-linear-gradient(45deg, #000 0 10px, var(--magenta) 10px 20px);
  height:10px;
}

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth {
  position:relative; min-height:100dvh; display:grid; justify-items:center; align-content:safe center;
  padding:clamp(16px,5vw,40px); overflow:hidden;
}
/* atmospheric drifting glow blobs behind the card */
.auth__bg { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.auth__bg span { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.auth__bg span:nth-child(1){ width:55vmax; height:55vmax; top:-22vmax; right:-18vmax; background:radial-gradient(circle,#16415a,transparent 70%); animation:drift1 26s ease-in-out infinite; }
.auth__bg span:nth-child(2){ width:48vmax; height:48vmax; bottom:-20vmax; left:-16vmax; background:radial-gradient(circle,#3a0f28,transparent 70%); animation:drift2 32s ease-in-out infinite; }
.auth__bg span:nth-child(3){ width:30vmax; height:30vmax; top:30%; left:55%; background:radial-gradient(circle,#1a3a44,transparent 70%); animation:drift1 38s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6%,8%)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(7%,-6%)} }

.auth__card { position:relative; z-index:1; width:min(440px, 100%); box-shadow:var(--shadow-lg); }
.auth__crop { position:absolute; top:-1px; right:-1px; width:22px; height:22px; border-top:3px solid var(--magenta); border-right:3px solid var(--magenta); pointer-events:none; }
.auth__brand { text-align:center; margin-bottom:18px; }
.auth__logo { width:min(320px,78%); }
.auth__tag { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-dim); margin-top:4px; }
.auth__pitch { font-family:var(--f-body); font-size:12.5px; color:var(--ink-faint); margin-top:8px; letter-spacing:.02em; }
.auth__tabs { display:flex; gap:0; margin-bottom:16px; }
.auth__tabs .btn { flex:1; box-shadow:none; border-right-width:0; padding:11px 12px; }
.auth__tabs .btn:last-child { border-right-width:var(--bw); }
.auth__tabs .btn[aria-selected="true"] { background:var(--accent,var(--cyan)); color:#000; }
.auth__form { display:block; }
.field { margin-bottom:13px; }
.field label { display:block; margin-bottom:5px; }
.btn--lg { padding:13px 16px; font-size:13px; margin-top:4px; }
.auth__msg { min-height:18px; font-family:var(--f-mono); font-size:12px; }
.auth__note {
  display:flex; gap:8px; align-items:flex-start; margin-top:14px; padding:10px 12px;
  border:var(--bw) solid var(--line-bright); background:var(--void-2);
  font-size:12px; line-height:1.45; color:var(--ink-dim);
}
.auth__note .ic-svg { color:var(--cyan); margin-top:2px; }
.auth__legal { margin-top:14px; font-family:var(--f-mono); font-size:10px; color:var(--ink-faint); letter-spacing:.1em; text-align:center; }
.auth__legal b { color:var(--magenta); }
.dangerzone { margin-top:18px; border:var(--bw) solid var(--magenta); background:#160309; padding:0 0 12px; }
.dangerzone .chev { height:8px; }
.dangerzone__hd { font-family:var(--f-display); font-weight:900; letter-spacing:.14em; color:var(--magenta); font-size:13px; padding:8px 12px 0; }
.dangerzone__txt { font-size:11.5px; color:var(--ink-dim); line-height:1.45; padding:6px 12px 10px; }
.dangerzone .btn { margin:0 12px; width:calc(100% - 24px); }

/* BYOK connect screen */
.connect-copy { margin-bottom:12px; }
.connect-copy p { font-size:13px; line-height:1.5; margin:0 0 9px; color:var(--ink-dim); }
.connect-copy b { color:var(--ink); }
.connect-copy .t-cyan b { color:var(--cyan); }
.connect-how { border:var(--bw) solid var(--line-bright); background:var(--void-2); padding:9px 11px; }
.connect-how a { text-decoration:none; }

/* ============================================================
   CHARACTER BUILDER
   ============================================================ */
.builder { max-width:1100px; margin:0 auto; padding:18px clamp(12px,3vw,28px) 90px; }
.builder__title { text-align:center; margin: 8px 0 4px; }
.builder__title h1 { font-family:var(--f-display); font-weight:900; font-size:clamp(26px,5vw,40px); letter-spacing:.1em; margin:0; }
.origins { display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); margin:16px 0; }
.origin {
  cursor:pointer; padding:0; text-align:left; background:var(--panel); color:var(--ink);
  border:var(--bw) solid var(--line-bright); box-shadow:var(--shadow); transition:transform .08s;
}
.origin:hover { transform: translateY(-2px); }
.origin[aria-pressed="true"] { border-color:var(--cyan); box-shadow: 6px 6px 0 var(--cyan); }
.origin h3 { font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:.06em; margin:0 0 2px; }
.origin .blurb { font-size:12.5px; color:var(--ink-dim); }
.origin .perk { margin-top:8px; font-family:var(--f-mono); font-size:11px; color:var(--lime); }
.origin .bonus { margin-top:6px; font-family:var(--f-mono); font-size:11px; color:var(--cyan); }

.pips { display:flex; gap:4px; flex-wrap:wrap; }
.pip { width:18px; height:14px; border:2px solid var(--line-bright); background:var(--void-2); }
.pip.on { background:var(--cyan); border-color:var(--cyan); }
.pip.base { background:var(--ink-faint); border-color:var(--ink-faint); }

/* stat allocation — explained, restyled cards */
.alloc-help { border:1px solid var(--line); background:var(--void-2); padding:10px 12px; margin-bottom:14px; }
.alloc-help p { margin:0 0 8px; font-size:13px; color:var(--ink-dim); line-height:1.5; }
.alloc-help b { color:var(--ink); }
.alloc-legend { display:flex; gap:18px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-faint); }
.alloc-legend span { display:inline-flex; align-items:center; gap:6px; }
.alloc-legend .pip { width:14px; height:11px; }

.stats { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:640px) { .stats { grid-template-columns:1fr 1fr; } }
.stat { border:var(--bw) solid var(--line-bright); background:var(--void-2); padding:12px 13px; box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s; }
.stat.raised { border-color:var(--cyan); box-shadow:var(--shadow), 0 0 0 1px rgba(39,229,255,.25); }
.stat__hd { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.stat__name { font-family:var(--f-display); font-weight:800; font-size:14px; letter-spacing:.08em; }
.stat__num { font-family:var(--f-mono); font-weight:600; font-size:19px; color:var(--cyan); font-variant-numeric:tabular-nums; }
.stat__num i { font-style:normal; font-size:12px; color:var(--ink-faint); }
.stat .pips { margin:9px 0; }
.stat__desc { margin:0 0 11px; font-size:12.5px; line-height:1.5; color:var(--ink-dim); }
.stat__step { display:flex; align-items:center; gap:8px; }
.stepbtn { width:36px; height:34px; flex:0 0 auto; font-family:var(--f-mono); font-size:18px; line-height:1; color:var(--ink);
  background:var(--panel-2); border:var(--bw) solid var(--line-bright); cursor:pointer; box-shadow:2px 2px 0 #000; }
.stepbtn:hover:not(:disabled) { background:#1c2334; }
.stepbtn:active:not(:disabled) { transform:translate(2px,2px); box-shadow:none; }
.stepbtn:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.stat__put { flex:1; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-dim); }
.stat.raised .stat__put { color:var(--cyan); }

/* ============================================================
   TRANSIT — timed lane travel + interdiction minigame
   ============================================================ */
.transit { position:fixed; inset:0; z-index:8600; display:grid; place-items:center; padding:20px; overflow-y:auto;
  background:radial-gradient(120% 100% at 50% 50%, #0a1020 0%, #05070d 70%, #020306 100%); opacity:0; transition:opacity .35s; }
.transit.show { opacity:1; }
.transit__warp { position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:repeating-linear-gradient(90deg, transparent 0 6px, rgba(39,229,255,.06) 6px 7px); animation:warp .5s linear infinite; }
@keyframes warp { from { background-position:0 0; } to { background-position:-140px 0; } }
.transit__box { position:relative; width:min(560px,100%); max-height:calc(100dvh - 40px); overflow-y:auto; border:var(--bw) solid var(--line-bright); background:var(--panel); box-shadow:var(--shadow-lg); padding:18px 20px; }
.transit__hd { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.transit__route { font-family:var(--f-mono); font-size:15px; letter-spacing:.1em; color:var(--cyan); }
.transit__route i { color:var(--ink-faint); font-style:normal; margin:0 4px; }
.transit__name { font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:.04em; margin:6px 0 14px; }
.transit__track { height:10px; border:2px solid var(--line-bright); background:var(--void-2); overflow:hidden; }
.transit__track i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),#8be9ff); box-shadow:0 0 12px var(--cyan); }
.transit__status { font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; color:var(--ink-dim); margin-top:9px; text-transform:uppercase; }
.transit__mg { display:none; margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.transit__mg.on { display:block; animation:mgin .25s ease; }
.transit__mg.cleared { opacity:.45; transition:opacity .5s; }
@keyframes mgin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.mg__t { font-family:var(--f-display); font-weight:900; letter-spacing:.08em; color:var(--magenta); font-size:14px; }
.mg__s { font-size:12.5px; color:var(--ink-dim); line-height:1.45; margin:3px 0 11px; }
/* pre-roll gate — a beat to read the rules before a timed encounter starts */
.mg__gate { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px;
  border-top:1px solid var(--line); padding-top:11px; }
.mg__gate-lbl { font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; color:var(--ink-dim); text-transform:uppercase; }
.mg__gate-lbl.countdown { color:var(--cyan); }
.mg__bar { position:relative; height:32px; border:var(--bw) solid var(--line-bright); background:var(--void); overflow:hidden; }
.mg__bar.hit { box-shadow:inset 0 0 0 2px var(--lime); }
.mg__zone { position:absolute; top:0; bottom:0; background:rgba(182,255,60,.18); border-left:2px solid var(--lime); border-right:2px solid var(--lime); transition:left .15s, width .15s; }
.mg__needle { position:absolute; top:-2px; bottom:-2px; width:3px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); transform:translateX(-50%); will-change:left; }
.mg__needle.miss { background:var(--magenta); box-shadow:0 0 10px var(--magenta); }
.mg__row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:11px; }
.mg__row #mg-locks { font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-dim); }
/* speech check */
.mg__opts { display:grid; gap:7px; }
.mg__opt { text-align:left; font-family:var(--f-body); font-size:13px; color:var(--ink); background:var(--void-2);
  border:var(--bw) solid var(--line-bright); padding:9px 11px; cursor:pointer; transition:background .12s; }
.mg__opt:hover:not(:disabled) { background:#1c2334; }
.mg__opt:disabled { opacity:.5; cursor:default; }
.mg__opt.good { border-color:var(--lime); color:var(--lime); }
.mg__opt.bad { border-color:var(--magenta); color:var(--magenta); }
.mg__res { margin-top:9px; font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; }
.mg__res.good { color:var(--lime); } .mg__res.bad { color:var(--magenta); }
/* signal-decrypt sequence */
.mg__seq { display:flex; gap:10px; justify-content:center; margin:4px 0 9px; }
.mg__key { width:54px; height:46px; font-size:22px; color:var(--c,var(--cyan)); background:var(--void);
  border:var(--bw) solid var(--line-bright); cursor:pointer; box-shadow:2px 2px 0 #000; transition:transform .05s; }
.mg__key.lit { background:var(--c,var(--cyan)); color:#000; box-shadow:0 0 16px var(--c,var(--cyan)); }
.mg__key:active { transform:translate(2px,2px); box-shadow:none; }
.mg__seqlbl { text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase; }
/* spatial anomaly — two wormholes */
.mg__holes { display:flex; gap:10px; }
.mg__hole { flex:1; font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; color:var(--ink); background:var(--void-2);
  border:var(--bw) solid var(--line-bright); padding:14px 10px; cursor:pointer; box-shadow:2px 2px 0 #000; }
.mg__hole:hover:not(:disabled) { background:#1c2334; }
.mg__hole:disabled { opacity:.5; cursor:default; }
.mg__hole:active:not(:disabled) { transform:translate(2px,2px); box-shadow:none; }
/* raiders — pay / cargo / refuse */
.mg__row3 { display:flex; gap:8px; } .mg__row3 .btn { flex:1; }
/* align-the-relay puzzle (lights-out) */
.mg__grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:216px; margin:4px auto 9px; }
.mg__node { aspect-ratio:1; border:var(--bw) solid var(--line-bright); background:var(--void); cursor:pointer; box-shadow:2px 2px 0 #000; transition:background .12s, box-shadow .12s, border-color .12s; }
.mg__node.lit { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 12px var(--cyan), 2px 2px 0 #000; }
.mg__node.cold { background:var(--magenta); border-color:var(--magenta); box-shadow:0 0 12px var(--magenta), 2px 2px 0 #000; }
.mg__node:active { transform:translate(2px,2px); box-shadow:none; }
/* vector-lock skill gauge — sweeping cursor + target window */
.mg__gauge { position:relative; height:30px; margin:8px 0 10px; border:var(--bw) solid var(--line-bright); background:var(--void-2); box-shadow:inset 0 0 0 2px #000; overflow:hidden; }
.mg__zone { position:absolute; top:0; bottom:0; background:rgba(182,255,60,.22); border-left:2px solid var(--lime); border-right:2px solid var(--lime); }
.mg__cursor { position:absolute; top:-2px; bottom:-2px; width:4px; margin-left:-2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); will-change:left; }
/* the target window flares as the cursor passes through it — fair telegraph for the lock */
.mg__gauge .mg__zone.hot { background:rgba(182,255,60,.42); box-shadow:0 0 14px var(--lime), inset 0 0 8px rgba(182,255,60,.5); }
/* run-the-blockade gauntlet — real-time hull threading */
.mg__lane { position:relative; height:240px; margin:6px 0 10px; overflow:hidden; cursor:crosshair; touch-action:none;
  border:var(--bw) solid var(--line-bright); box-shadow:inset 0 0 0 2px #000;
  background:repeating-linear-gradient(0deg, var(--void-2) 0 22px, #0a0e16 22px 24px); }
.mg__ship { position:absolute; left:0; top:0; width:26px; height:18px; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan); clip-path:polygon(50% 0, 100% 100%, 0 100%); will-change:transform; }
/* Scope the gauntlet's scrolling cordon to .mg__lane — otherwise this absolute rule
   clobbers the lane-lock gauge's .mg__bar (line ~383), flinging that green-bar gauge
   up to the top of the popup instead of sitting in its normal in-flow slot. */
.mg__lane .mg__bar { position:absolute; left:0; top:0; width:100%; height:16px; will-change:transform; }
.mg__lane .mg__bar i { position:absolute; top:0; bottom:0; background:var(--magenta); box-shadow:0 0 10px var(--magenta), 0 2px 0 #000; }
/* breach-the-lock — concentric tumbler lock on canvas */
.mg__lock { position:relative; width:100%; height:clamp(220px,42vh,300px); margin:8px 0 10px;
  border:var(--bw) solid var(--line-bright); box-shadow:inset 0 0 0 2px #000, inset 0 0 60px -20px var(--cyan);
  background:radial-gradient(120% 120% at 50% 50%, #0b1322 0%, var(--void) 70%); overflow:hidden; touch-action:manipulation; cursor:pointer; }
.mg__lock canvas { display:block; width:100%; height:100%; }
.mg__lock-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-weight:600; font-size:13px; letter-spacing:.12em; color:#cfe6f2;
  pointer-events:none; text-shadow:0 0 8px #000; transition:color .2s; }
.mg__lock-core.hot { color:var(--cyan); }
/* free-text conversation */
.mg__talk { display:flex; gap:8px; }
.mg__talk .mg__say { flex:1; min-width:0; }
.mg__reply { margin-top:9px; min-height:16px; font-family:var(--f-mono); font-size:12px; letter-spacing:.03em; }
.mg__reply.good { color:var(--lime); } .mg__reply.bad { color:var(--magenta); }

/* NPC direct-offer contracts — highlighted, player-runnable */
.job.npc { border-color:var(--cyan); box-shadow:inset 3px 0 0 var(--cyan); animation:jobpulse 2.4s ease-in-out infinite; }
@keyframes jobpulse { 0%,100% { box-shadow:inset 3px 0 0 var(--cyan); } 50% { box-shadow:inset 3px 0 0 var(--cyan), 0 0 14px -4px var(--cyan); } }
.job-npc { color:var(--cyan); }
.job-note { font-size:11.5px; color:var(--ink-dim); margin:5px 0 2px; line-height:1.4; }
.job.npc .job-note { color:var(--ink); }

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
/* DEFAULT: flowing, scrollable layout (tablets, laptops, short windows).
   The locked full-viewport HUD is re-applied only on big+tall screens below. */
.hud { display:grid; grid-template-rows:auto auto auto auto; min-height:100dvh; }

/* top vitals bar */
.topbar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px clamp(10px,2vw,18px); border-bottom:var(--bw) solid var(--line-bright);
  background: linear-gradient(180deg, #0e1320, var(--void));
}
.topbar .brand { font-family:var(--f-display); font-weight:900; letter-spacing:.12em; font-size:16px; }
.topbar .brand .mk { color:var(--magenta); }
.vital { display:flex; flex-direction:column; line-height:1; gap:3px; }
.vital .label { font-size:9.5px; }
.vital .val { font-family:var(--f-mono); font-weight:600; font-size:15px; }
.vital .val.credits { color:var(--cyan); }
.spacer { flex:1; }

.bars { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.meter { width:90px; }
.meter .label { display:flex; justify-content:space-between; font-size:9px; }
.meter .track { height:8px; border:2px solid var(--line-bright); background:var(--void-2); margin-top:3px; }
.meter .fill { height:100%; }
.meter.legit .fill { background:var(--cyan); }
.meter.crim .fill { background:var(--magenta); }
.meter.heat .fill { background:var(--amber); }

/* ticker */
.ticker { overflow:hidden; white-space:nowrap; border-bottom:var(--bw) solid var(--line);
  background:#0a0d14; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; }
.ticker__track { display:inline-block; padding:5px 0; animation: marquee 38s linear infinite; }
.ticker__track:hover { animation-play-state: paused; }
.ticker span { margin:0 22px; color:var(--ink-dim); }
.ticker .sep { color:var(--magenta); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__track { animation-duration: 76s; }   /* half speed — slower, readable scroll */

/* main grid — DEFAULT: 2 columns, prioritized horizontal expansion for Comms chat */
.grid {
  display:grid; gap:var(--gap); padding:var(--gap);
  grid-template-columns: 1fr 1.25fr;
  grid-template-areas: "map map" "market comms" "crew jobs";
  overflow:visible;
}
.area-map { grid-area:map; } .area-market { grid-area:market; }
.area-comms { grid-area:comms; } .area-crew { grid-area:crew; }
.area-jobs { grid-area:jobs; } .area-codex { display:none; }
.panel.area { display:flex; flex-direction:column; min-height:300px; }

/* Dedicated expanded vertical footprint for the chat workspace on desktop */
.panel.area.area-comms { min-height: 560px; }

.panel.area.area-map { min-height:360px; }
.panel.area .panel__body { overflow:auto; flex:1; min-height:0; }

/* staggered reveal */
.grid > .panel { animation: rise .45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.grid > .panel:nth-child(1){ animation-delay:.02s }
.grid > .panel:nth-child(2){ animation-delay:.08s }
.grid > .panel:nth-child(3){ animation-delay:.14s }
.grid > .panel:nth-child(4){ animation-delay:.20s }
.grid > .panel:nth-child(5){ animation-delay:.26s }
@keyframes rise { from { opacity:0; transform: translateY(14px); filter: blur(1px); } to { opacity:1; transform:none; filter: none; } }

/* ---------- galaxy map ---------- */
.map-wrap { position:relative; flex:1; min-height:220px; }
.map-wrap canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.map-legend { position:absolute; left:8px; bottom:8px; display:flex; gap:10px; font-family:var(--f-mono); font-size:10px; }
.map-legend i { display:inline-block; width:9px; height:9px; margin-right:4px; vertical-align:middle; }

/* ---------- market table ---------- */
.market { width:100%; border-collapse:collapse; font-size:13px; }
.market th { text-align:left; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-faint);
  border-bottom:var(--bw) solid var(--line); padding:6px 6px; position:sticky; top:0; background:var(--panel); }
.market td { padding:6px 6px; border-bottom:1px solid var(--line); }
.market tr.illegal td { color:var(--magenta); }
.market .g-name { font-family:var(--f-mono); }
.market .price { text-align:right; font-family:var(--f-mono); }
.market .owned { color:var(--ink-dim); font-family:var(--f-mono); }
.market .act { display:flex; gap:5px; justify-content:flex-end; }
.qtybar { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.qtybar .input { width:90px; }

/* ---------- comms / chat ---------- */
.comms { display:flex; flex-direction:column; height:100%; min-height:0; }
.msglist { flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; min-height:0; }
.msg { border-left:4px solid var(--line-bright); padding:8px 11px; background:var(--void-2); border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.msg.kind-mail { border-color:var(--cyan); }
.msg.kind-chat.you { border-color:var(--ink-faint); }
.msg.kind-chat { border-color:var(--magenta); }
.msg .from { font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-dim); display:flex; justify-content:space-between; margin-bottom: 3px; }
.msg .subj { font-family:var(--f-display); font-weight:900; font-size:12px; letter-spacing:.04em; margin:2px 0; }
.msg .body { font-size:13px; white-space:pre-wrap; }
.chatbar { display:flex; gap:8px; margin-top:8px; }
.chatbar .input { flex:1; }
.contact-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }

/* ---------- crew & recruits ---------- */
.cards { display:grid; gap:10px; }
.ccard { border:var(--bw) solid var(--line-bright); background:var(--void-2); padding:9px 10px; }
.ccard h4 { margin:0; font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:.05em; }
.ccard .role { font-family:var(--f-mono); font-size:10px; color:var(--amber); letter-spacing:.12em; }
.ccard .bio { font-size:12px; color:var(--ink-dim); margin:5px 0; }
.ccard .stats-mini { display:flex; gap:12px; font-family:var(--f-mono); font-size:11px; }
.ccard .foot { display:flex; gap:8px; align-items:center; margin-top:7px; }
.ccard .warn { color:var(--amber); font-size:11px; }
.bar-mini { height:6px; border:1px solid var(--line-bright); background:var(--void); min-width:54px; }
.bar-mini i { display:block; height:100%; background:var(--lime); }

/* ---------- jobs ---------- */
.job { border:var(--bw) solid var(--line-bright); padding:9px 10px; margin-bottom:10px; background:var(--void-2); position:relative; }
.job.black { border-color:var(--magenta); }
.job h4 { margin:0 0 2px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; }
.job .meta { display:flex; gap:12px; flex-wrap:wrap; font-family:var(--f-mono); font-size:11px; color:var(--ink-dim); }
.job .payout { color:var(--lime); }
.job .risk { color:var(--amber); }
.job .progress { height:8px; border:2px solid var(--line-bright); margin:8px 0; }
.job .progress i { display:block; height:100%; background:var(--cyan); transition:width .5s; }
.job.black .progress i { background:var(--magenta); }
.job .foot { display:flex; gap:8px; align-items:center; }

/* ---------- codex ---------- */
.codex { display:grid; grid-template-columns: 180px 1fr; gap:14px; }
.codex__nav { display:flex; flex-direction:column; gap:4px; }
.codex__nav .btn { justify-content:flex-start; }
.codex__entry h3 { font-family:var(--f-display); font-weight:800; letter-spacing:.06em; }
.codex__entry .year { font-family:var(--f-mono); color:var(--amber); font-size:11px; letter-spacing:.12em; }
.codex__entry .body { color:var(--ink-dim); }
.codex__entry .item { border-left:3px solid var(--accent,var(--cyan)); padding:6px 10px; margin-bottom:10px; background:var(--void-2); }

/* ============================================================
   MODAL (events) — hazard framed
   ============================================================ */
.modal-scrim { position:fixed; inset:0; background:rgba(4,6,10,.78); display:grid; justify-items:center; align-content:safe center; z-index:8000; padding:18px; overflow-y:auto; }
.modal { width:min(560px,96vw); max-height:92vh; overflow-y:auto; background:var(--panel); border:var(--bw) solid var(--ink); box-shadow:var(--shadow-lg); }
.modal .chev { }
.modal__head { padding:10px 14px; border-bottom:var(--bw) solid var(--line); display:flex; align-items:center; gap:10px; }
.modal__head h2 { margin:0; font-family:var(--f-display); font-weight:900; letter-spacing:.06em; font-size:16px; }
.modal__head .sev { margin-left:auto; font-family:var(--f-mono); font-size:10px; padding:2px 7px; border:1px solid var(--amber); color:var(--amber); }
.modal__body { padding:14px; }
.modal__body .narr { white-space:pre-wrap; margin-bottom:12px; }
.choices { display:grid; gap:8px; }
.choice { text-align:left; }
.choice .hint { display:block; font-family:var(--f-mono); font-size:10px; color:var(--ink-faint); margin-top:3px; letter-spacing:.08em; }

/* ============================================================
   MOBILE
   ============================================================ */
.tabbar { display:none; }

/* ENHANCEMENT: Immersive, full-viewport HUD — optimized layout.
   comms/chat occupies the full-height right-most column for massive vertical space. */
@media (min-width: 1100px) and (min-height: 760px) {
  .hud { height:100dvh; grid-template-rows:auto auto 1fr auto; }
  .grid {
    grid-template-columns: 1.15fr 0.9fr 1.35fr;
    grid-template-areas: "map market comms" "crew jobs comms";
    grid-template-rows: 1.15fr 0.85fr; min-height:0; overflow:hidden;
  }
  .panel.area, .panel.area.area-map { min-height:0; }
  .panel.area.area-comms { min-height:0; } /* fills the grid template area vertical span */
}

@media (max-width: 760px) {
  body { font-size:14px; }
  .hud { grid-template-rows:auto auto 1fr auto; }
  .grid {
    grid-template-columns:1fr; grid-template-areas:"view"; padding:10px; overflow:visible;
  }
  .panel.area { display:none; }
  .panel.area.active { display:flex; grid-area:view; min-height:60dvh; }
  .area-codex.active { display:flex; }
  .topbar .bars { width:100%; order:5; justify-content:space-between; }
  .tabbar {
    display:flex; position:sticky; bottom:0; z-index:50;
    border-top:var(--bw) solid var(--line-bright); background:#0a0d14;
  }
  .tabbar button {
    flex:1; background:transparent; color:var(--ink-dim); border:0; border-right:1px solid var(--line);
    padding:10px 4px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  .tabbar button .ic { font-size:16px; }
  .tabbar button[aria-selected="true"] { color:var(--cyan); background:#0e1422; }
  .tabbar button .badge { color:var(--magenta); font-size:9px; }
  .codex { grid-template-columns:1fr; }
}

/* ============================================================
   COMPLIANCE LOCKDOWN — full dashboard takeover
   ============================================================ */
.lockdown {
  position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:20px; overflow-y:auto;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.5) 2px 3px),
    radial-gradient(120% 120% at 50% 0%, #2a0414 0%, #0a0207 70%, #000 100%);
  animation: lockflick .12s steps(2) infinite;
}
.lockdown .chev { position:absolute; left:0; right:0; height:14px; }
.lockdown .chev.top { top:0; } .lockdown .chev.bot { bottom:0; }
.lockdown__box {
  width:min(620px,96vw); max-height:92vh; overflow-y:auto;
  border:3px solid var(--magenta); background:#10040a;
  box-shadow: 0 0 0 3px #000, 10px 10px 0 #000; padding:0;
}
.lockdown__hdr {
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:3px solid var(--magenta);
  background:repeating-linear-gradient(45deg,#000 0 12px,#1a0410 12px 24px);
}
.lockdown__hdr .mk { font-size:26px; color:var(--magenta); animation: spin 3s linear infinite; }
.lockdown__hdr h2 { margin:0; font-family:var(--f-display); font-weight:900; letter-spacing:.18em; color:var(--magenta);
  font-size:clamp(18px,4vw,26px); text-shadow:2px 0 #00e5ff, -2px 0 #ff0; animation: glitch 2.2s infinite; }
.lockdown__body { padding:16px; }
.lockdown__body .narr { white-space:pre-wrap; color:#ffd7e4; font-size:14px; }
.lockdown__eye { text-align:center; font-size:40px; color:var(--magenta); margin:6px 0 12px; letter-spacing:.3em; }
.lockdown .choices .btn { border-color:var(--magenta); color:#ffd7e4; }
.lockdown__legal { margin-top:12px; font-family:var(--f-mono); font-size:10px; color:#a04; letter-spacing:.16em; text-align:center; }

/* SOFT variant — a "tone advisory": calmer cyan, no red strobe/glitch/siren. */
.lockdown--soft { animation:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.35) 2px 3px),
    radial-gradient(120% 120% at 50% 0%, #042029 0%, #02070a 70%, #000 100%); }
.lockdown--soft .lockdown__box { border-color:#27E5FF; background:#04141a; }
.lockdown--soft .lockdown__hdr { border-bottom-color:#27E5FF; background:repeating-linear-gradient(45deg,#000 0 12px,#04141a 12px 24px); }
.lockdown--soft .lockdown__hdr .mk { color:#27E5FF; animation:spin 6s linear infinite; }
.lockdown--soft .lockdown__hdr h2 { color:#27E5FF; text-shadow:none; animation:none; }
.lockdown--soft .lockdown__hdr h2::before, .lockdown--soft .lockdown__hdr h2::after { content:none; }
.lockdown--soft .lockdown__body .narr { color:#bfeefc; }
.lockdown--soft .lockdown__eye { color:#27E5FF; animation:none; }
.lockdown--soft .lockdown .choices .btn, .lockdown--soft .choices .btn { border-color:#27E5FF; color:#bfeefc; }
.lockdown--soft .lockdown__legal { color:#2a8aa0; }

/* ---- THE LIBERATION arc panel ---- */
.lib-meters { margin-bottom:14px; display:grid; gap:8px; }
.lib-meters .meter .track { height:8px; background:#0b0f18; border:1px solid var(--line); }
.lib-meters .meter .fill { height:100%; }
.lib-moon { display:inline-block; font-family:var(--f-mono); font-size:11px; color:#9fd; margin:0 8px 4px 0; letter-spacing:.04em; }
.lib-manifest { border:1px solid var(--line); border-left:3px solid var(--magenta); background:#120810; padding:10px 12px; }
.lib-manifest h4 { margin:0; font-size:13px; letter-spacing:.06em; }
.lib-manifest .body { font-size:13px; color:#cdd3dd; margin-top:6px; line-height:1.5; }
.btn.pulse { animation:chippulse 1.2s infinite; }

/* ---- THE LIBERATION / THE BETRAYAL — run-ending epilogue cinematic ---- */
.epilogue { position:fixed; inset:0; z-index:9800; display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 120% at 50% 30%, #0a0710 0%, #030305 70%, #000 100%); overflow:hidden; }
.epilogue.epi-hero { background:radial-gradient(120% 120% at 50% 30%, #04140f 0%, #02060a 70%, #000 100%); }
.epilogue__bg { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 2px 3px); animation:lockflick .14s steps(2) infinite; }
.epilogue__year { position:absolute; top:8%; left:0; right:0; z-index:2; font-family:"Science Gothic",var(--f-display),sans-serif;
  font-weight:900; font-size:clamp(64px,16vw,180px); line-height:.9; color:#1a1622; letter-spacing:.02em; user-select:none; }
.epi-hero .epilogue__year { color:#13312a; }
.epi-coward .epilogue__year { color:#2a1020; }
.epilogue__line { position:relative; z-index:3; width:min(820px,86vw); margin:0 auto; padding:0 18px;
  font-family:var(--f-body); font-weight:300; font-size:clamp(18px,2.4vw,28px); line-height:1.75; letter-spacing:.04em;
  color:#cfd5df; opacity:0; transform:translateY(14px); transition:opacity 1.2s ease, transform 1.2s ease;
  text-shadow:0 0 18px rgba(0,0,0,.9); }
.epilogue__line.show { opacity:1; transform:none; }
.epilogue__foot { position:absolute; bottom:8%; left:0; right:0; z-index:4; display:grid; gap:18px; justify-items:center;
  opacity:0; transition:opacity 1.6s ease; }
.epilogue__foot.show { opacity:1; }
.epilogue__verdict { font-family:var(--f-mono); font-size:clamp(13px,1.6vw,16px); letter-spacing:.22em;
  color:#9aa7bf; text-transform:uppercase; }
.epi-hero .epilogue__verdict { color:#7fe0b0; }
.epi-coward .epilogue__verdict { color:#e88; }

/* ---- CURRENT STORYLINE banner — always-on arc tracker / next-step ---- */
.storyline { margin:6px clamp(8px,2vw,16px) 0; }
.storyline[hidden] { display:none; }
.sl-chip { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:12px; width:100%;
  text-align:left; background:linear-gradient(90deg, rgba(255,45,126,.10), rgba(8,11,16,.55)); border:1px solid #3a2336;
  border-left:3px solid var(--magenta); padding:8px 14px; cursor:pointer; color:var(--ink); font-family:var(--f-mono);
  box-shadow:3px 3px 0 rgba(0,0,0,.5); transition:border-color .15s, background .15s; }
.sl-chip:hover { background:linear-gradient(90deg, rgba(255,45,126,.18), rgba(8,11,16,.55)); }
.sl-label { font-size:10px; letter-spacing:.2em; color:var(--magenta); white-space:nowrap; }
.sl-arc { font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:.08em; white-space:nowrap; color:#f0d6e2; }
.sl-arc .jp { font-style:normal; font-size:11px; color:var(--ink-faint); margin-left:4px; }
.sl-step { font-size:12px; letter-spacing:.02em; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-go { font-size:11px; letter-spacing:.12em; color:#cad0d9; white-space:nowrap; }
.storyline.urgent .sl-chip { border-left-color:var(--amber); animation:chippulse 1.4s infinite; }
.storyline.urgent .sl-go { color:var(--amber); }
@media (max-width:760px){ .sl-chip{ grid-template-columns:1fr auto; gap:4px 10px; } .sl-label,.sl-arc{ grid-column:auto; }
  .sl-step{ grid-column:1 / -1; white-space:normal; } }

/* ---- charting minigame (Threshold) ---- */
.cm-gauge { position:relative; height:30px; margin:14px 0; border:1px solid var(--line); background:#080d14; overflow:hidden; }
.cm-gauge.cm-miss { animation:whshake .16s steps(2) 2; }
.cm-win { position:absolute; top:0; bottom:0; background:rgba(124,246,194,.22); box-shadow:inset 0 0 0 1px #7CF6C2; }
.cm-needle { position:absolute; top:-3px; bottom:-3px; width:3px; background:#27E5FF; box-shadow:0 0 10px #27E5FF; transform:translateX(-1px); }

/* ---- rare NPC stock in the market ---- */
.mk-row.rare-offer { box-shadow:inset 3px 0 0 var(--lime); background:#0c130d; }
.mk-row.rare-owned { box-shadow:inset 3px 0 0 var(--cyan); background:#0a1014; }
.mk-row.rare-offer .mk-good, .mk-row.rare-owned .mk-good { color:#dffae0; }

/* ---- second-system map (under the main map) ---- */
.map-split { font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:#7CF6C2;
  margin:12px 2px 6px; text-transform:uppercase; opacity:.85; }
.map-wrap--second { position:relative; min-height:200px; border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px rgba(124,246,194,.08); }
.map-wrap--second canvas { width:100%; height:100%; display:block; }

/* ---- WORMHOLE CROSSING cinematic ---- */
.wormhole { position:fixed; inset:0; z-index:9700; background:#020306; opacity:0; transition:opacity .9s ease; }
.wormhole.show { opacity:1; }
.wormhole.wh-out { opacity:0; transition:opacity .9s ease; }
.wormhole #wh-canvas { position:absolute; inset:0; width:100vw; height:100dvh; display:block; }
.wormhole .wh-ui { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; padding-bottom:14vh; pointer-events:none; text-align:center; }
.wormhole .wh-phase { font-family:var(--f-display),sans-serif; font-weight:900; letter-spacing:.34em; text-indent:.34em;
  font-size:clamp(20px,4vw,40px); color:#dffaf0; text-shadow:0 0 24px rgba(124,246,194,.5), 2px 0 #27E5FF, -2px 0 #ff2d7e; }
.wormhole .wh-phase.pop { animation:whpop .5s cubic-bezier(.2,1.4,.3,1); }
@keyframes whpop { 0%{ transform:scale(.7); opacity:.2; filter:blur(6px); } 100%{ transform:scale(1); opacity:1; filter:none; } }
.wormhole .wh-sub { font-family:var(--f-mono); font-size:13px; letter-spacing:.22em; color:#7fb8c8; margin-top:10px; }
.wormhole .wh-bar { width:min(420px,70vw); height:3px; margin-top:14px; background:rgba(255,255,255,.08); overflow:hidden; }
.wormhole .wh-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#27E5FF,#7CF6C2); box-shadow:0 0 12px #7CF6C2; }
.wormhole.wh-shake #wh-canvas { animation:whshake .16s steps(2) infinite; }
@keyframes whshake { 0%{ transform:translate(-4px,3px); } 50%{ transform:translate(4px,-3px); } }
.wormhole.wh-flash::after { content:""; position:absolute; inset:0; z-index:3; background:#eafff7; animation:whflash 1.6s cubic-bezier(.1,1,.2,1) forwards; pointer-events:none; }
@keyframes whflash { 0%{ opacity:0; } 4%{ opacity:1; } 100%{ opacity:0; } }
@keyframes lockflick { 0%{opacity:1} 50%{opacity:.97} 100%{opacity:1} }
@keyframes glitch {
  0%,92%,100% { transform: none; text-shadow:2px 0 #00e5ff,-2px 0 #ff0; }
  93% { transform: translate(-2px,1px); }
  95% { transform: translate(3px,-1px); text-shadow:-3px 0 #00e5ff,3px 0 #ff2d7e; }
  97% { transform: translate(-1px,0); }
}

/* ============================================================
   TOAST
   ============================================================ */
#toast {
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,16px);
  background:var(--panel); border:var(--bw) solid var(--accent,var(--cyan));
  box-shadow:var(--shadow); color:var(--ink); padding:9px 16px; z-index:9700;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; max-width:90vw;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#toast.show { opacity:1; transform:translate(-50%,0); }
#toast.t-bad { border-color:var(--magenta); }
#toast.t-good { border-color:var(--lime); }
#toast.t-warn { border-color:var(--amber); }

/* ============================================================
   VIRUS CORRUPTION (dashboard infected)
   ============================================================ */
body.corrupt .scan { opacity:.6; animation: corruptscan .4s steps(3) infinite; }
body.corrupt .topbar { animation: corruptjit 4s infinite; }
body.corrupt .panel__head h2 { text-shadow: 1.5px 0 var(--magenta), -1.5px 0 var(--cyan); }
@keyframes corruptscan { 0%{transform:translateY(0)} 100%{transform:translateY(4px)} }
@keyframes corruptjit { 0%,96%,100%{transform:none} 97%{transform:translateX(-2px)} 98%{transform:translateX(3px)} 99%{transform:translateX(-1px)} }

/* ============================================================
   OVERLAY THEMES — darknet (glitchy) + codex
   ============================================================ */
.modal-scrim.theme-net { background:
  repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.45) 2px 3px),
  radial-gradient(120% 120% at 50% 0%, #150226 0%, #04030a 75%); }
.modal-scrim.theme-net .modal { border-color:var(--magenta); box-shadow:0 0 0 2px #000, 8px 8px 0 #000; }
.modal-scrim.theme-net .ccard { background:#0c0410; border-color:#3a1030; }
.modal-scrim.theme-net .ccard h4 { color:#ff9ec7; }
.modal-scrim.theme-net .panel__body { animation: netflicker 6s infinite; }
@keyframes netflicker { 0%,93%,100%{filter:none} 94%{filter:hue-rotate(20deg) saturate(1.3)} 96%{filter:none} }

.modal-scrim.theme-codex .modal { border-color:var(--cyan); }
.modal-scrim.theme-codex { background:radial-gradient(120% 120% at 50% 0%, #06121f 0%, #04060b 80%); }

/* utility */
.row { display:flex; gap:10px; align-items:center; }
.between { justify-content:space-between; }
.wrap { flex-wrap:wrap; }
.mt { margin-top:10px; } .mb { margin-bottom:10px; }
.hidden { display:none !important; }
.muted-toggle { cursor:pointer; }
/* ============================================================
   POLISH v2 — animations, transitions, micro-interactions
   ============================================================ */

/* screen enter transitions with transient analog chromatic tear simulation */
.auth.enter, .builder.enter, .hud.enter { animation: screenin .48s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes screenin {
  0% { 
    opacity:0; 
    transform: translateY(22px) scale(.98); 
    clip-path: inset(0 0 100% 0); 
    filter: saturate(1.8) contrast(1.15); 
  }
  50% { 
    clip-path: inset(0 0 10% 0); 
    filter: drop-shadow(3px 0 var(--magenta)) drop-shadow(-3px 0 var(--cyan)); 
  }
  100% { 
    opacity:1; 
    transform:none; 
    filter:none; 
    clip-path: inset(0 0 0 0); 
  }
}

/* boot flourish */
.boot { animation: screenin .48s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* panels: header scan sweep + interactive vector heart depth shifts */
.panel__head { position:relative; overflow:hidden; }
.panel__head::after {
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent,#27e5ff) 22%, transparent), transparent);
  animation: sweep 6s ease-in-out infinite; pointer-events:none;
}
@keyframes sweep { 0%,70%{left:-45%} 100%{left:140%} }

.panel.area { transition: box-shadow .24s cubic-bezier(0.16, 1, 0.3, 1), transform .24s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s; }
.panel.area:hover { 
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #000, 0 0 20px color-mix(in srgb, var(--accent,#27e5ff) 18%, transparent); 
  border-color: var(--accent, var(--cyan));
}
.panel::before, .panel::after { transition: border-color .3s; }
.panel.area:hover::before, .panel.area:hover::after { border-color: var(--accent,#27e5ff); }

/* corner tick pulse on active mobile panel */
.panel.area.active { box-shadow: 6px 6px 0 #000, 0 0 22px -6px var(--accent,#27e5ff); }

/* high-level button shimmer sweep */
.btn { position:relative; overflow:hidden; }
.btn::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%) skewX(-15deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
}
.btn:hover::after { animation: shimmer .5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes shimmer { to { transform:translateX(100%) skewX(-15deg); } }
.btn--solid { box-shadow: 3px 3px 0 #000, 0 0 16px -6px var(--accent,#27e5ff); }

/* meter fills animate; heat pulses when hot */
.meter .fill { transition: width .65s cubic-bezier(0.16, 1, 0.3, 1); }
.meter.heat.hot .fill { animation: heatpulse 1s ease-in-out infinite; }
.meter.heat.hot .label span { color: var(--amber); }
@keyframes heatpulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.6)} }

/* credit rollup flashes */
.val.credits { transition: color .1s; }
.flash-up { color: var(--lime) !important; text-shadow:0 0 10px color-mix(in srgb,var(--lime) 60%, transparent); }
.flash-dn { color: var(--magenta) !important; text-shadow:0 0 10px color-mix(in srgb,var(--magenta) 60%, transparent); }

/* objective chip in topbar */
.objchip {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer;
  background:var(--panel-2); border:var(--bw) solid var(--lime); padding:5px 12px;
  box-shadow:3px 3px 0 #000; color:var(--ink); max-width:230px;
}
.objchip:active { transform:translate(3px,3px); box-shadow:none; }
.objchip .label { color:var(--lime); }
.objchip .ot { font-family:var(--f-display); font-weight:800; font-size:12px; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.objchip .op { font-family:var(--f-mono); font-size:10px; color:var(--ink-dim); }
.objchip { animation: chippulse 2.6s ease-in-out infinite; }
@keyframes chippulse { 0%,100%{box-shadow:3px 3px 0 #000} 50%{box-shadow:3px 3px 0 #000, 0 0 16px -4px var(--lime)} }

/* objective complete banner */
.objbanner {
  position:fixed; top:54px; left:50%; transform:translate(-50%,-26px); opacity:0; z-index:9600;
  transition: transform .35s cubic-bezier(.1,.9,.2,1.2), opacity .35s; pointer-events:none;
  /* Own compositor layer + no sub-pixel back-face: stops Chrome leaving a ghost
     repaint of the hard box-shadow while the banner slides in. */
  will-change: transform, opacity; backface-visibility:hidden;
}
.objbanner.show { transform:translate(-50%,0); opacity:1; }
.objbanner__in {
  display:flex; gap:14px; align-items:center; background:#0c1206;
  border:3px solid var(--lime); box-shadow:0 0 0 2px #000, 8px 8px 0 #000; padding:10px 22px;
}
.objbanner .tag { font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--lime); }
.objbanner .ttl { font-family:var(--f-display); font-weight:900; letter-spacing:.06em; font-size:18px; }

/* objectives overlay items */
.codex__entry .item.tut { border-color:var(--lime); }
.codex__entry .item .progress { height:7px; border:2px solid var(--line-bright); margin-top:8px; }
.codex__entry .item .progress i { display:block; height:100%; background:var(--lime); transition:width .5s; }

/* ===== LOCKDOWN: sudden + scary ===== */
body.lockdown-active .hud { animation: violentshake .18s steps(2) infinite; }
body.lockdown-active::after {
  content:""; position:fixed; inset:0; z-index:9400; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(120% 120% at 50% 50%, rgba(255,45,126,.0) 40%, rgba(255,0,40,.5) 100%);
  animation: redstrobe .22s steps(2) infinite;
}
@keyframes violentshake {
  0%{transform:translate(0,0)} 25%{transform:translate(-4px,2px)} 50%{transform:translate(3px,-3px)}
  75%{transform:translate(-2px,-1px)} 100%{transform:translate(3px,2px)}
}
@keyframes redstrobe { 0%{opacity:.25} 100%{opacity:.7} }

/* the lockdown appears INSTANTLY (no transition). booting = static pre-roll, box hidden */
.lockdown { animation: none; }
.lockdown__static {
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: staticmove .12s steps(4) infinite; display:none;
}
.lockdown__signal {
  position:absolute; top:38%; left:0; right:0; text-align:center; display:none;
  font-family:var(--f-display); font-weight:900; font-size:clamp(20px,6vw,46px); letter-spacing:.12em;
  color:var(--magenta); text-shadow:3px 0 #00e5ff, -3px 0 #ffec00; animation: sigflick .1s steps(2) infinite;
}
.lockdown.booting .lockdown__static, .lockdown.booting .lockdown__signal { display:block; }
.lockdown.booting .lockdown__box { display:none; }
.lockdown__box { animation: slam .25s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes slam { 0%{transform:scale(1.6); opacity:0; filter:blur(6px)} 60%{opacity:1} 100%{transform:scale(1); filter:none} }
@keyframes staticmove { to { transform:translate(8px,6px) } }
@keyframes sigflick { 0%{opacity:.4; transform:translateX(-3px)} 100%{opacity:1; transform:translateX(3px)} }

/* glitchy header via data-text RGB split */
.lockdown__hdr h2 { position:relative; }
.lockdown__hdr h2::before, .lockdown__hdr h2::after {
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; clip-path:inset(0 0 0 0);
}
.lockdown__hdr h2::before { color:#00e5ff; transform:translate(-2px,0); animation: gl1 1.4s infinite steps(2); }
.lockdown__hdr h2::after { color:#ffec00; transform:translate(2px,0); animation: gl2 1.1s infinite steps(2); }
@keyframes gl1 { 0%,90%,100%{clip-path:inset(0 0 80% 0)} 45%{clip-path:inset(40% 0 20% 0)} }
@keyframes gl2 { 0%,90%,100%{clip-path:inset(70% 0 0 0)} 45%{clip-path:inset(10% 0 60% 0)} }
.lockdown__eye { font-size:clamp(48px,12vw,90px); animation: eyepulse 1.1s ease-in-out infinite; }
@keyframes eyepulse { 0%,100%{transform:scale(1); text-shadow:0 0 0 var(--magenta)} 50%{transform:scale(1.18); text-shadow:0 0 40px var(--magenta)} }

/* heat: WANTED tier */
.meter.heat.wanted .fill { background: var(--magenta); animation: heatpulse .7s ease-in-out infinite; }
.meter.heat.wanted .label span:last-child { color: var(--magenta); }

/* ============================================================
   PROCESSING — the loss cinematic (structural shell only;
   the full bespoke visual system lives in the block far below)
   ============================================================ */
.processing {
  position: fixed; inset: 0; z-index: 9800; height: 100dvh; overflow: hidden; background: #000;
}
body.proc-active #app { display: none; }   /* the game UI can never bleed through */
@keyframes procfade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   v3 — VECTORHEART NEO-BRUTALIST POLISH + new components
   Hard stamped offset shadows, thick borders, structural mono type,
   vector (Lucide) iconography, aligned data readouts.
   ============================================================ */

/* ---------- inline vector icons ----------
   Hardened: fixed box, inline-block, middle-aligned, never grows, never wraps.
   Width/height are also set as attributes in icon() as a fail-safe. */
.ic-svg { width:16px; height:16px; min-width:16px; flex:0 0 auto; display:inline-block; vertical-align:-0.18em; }
.ic-svg.i12 { width:12px; height:12px; min-width:12px; }
.ic-svg.i14 { width:14px; height:14px; min-width:14px; }
.ic-svg.i16 { width:16px; height:16px; min-width:16px; }
.panel__head .ic-svg { color:var(--accent, var(--cyan)); }
.tabbar .ic .ic-svg { width:20px; height:20px; min-width:20px; vertical-align:middle; }
.sysitem__ic .ic-svg { width:22px; height:22px; min-width:22px; }

/* ---------- buttons: harder, stamped ---------- */
.btn { border-radius:0; box-shadow:4px 4px 0 #000; transition:transform .07s, box-shadow .07s, background .12s; }
.btn--xs { padding:5px 7px; font-size:10px; box-shadow:2px 2px 0 #000; display:inline-flex; align-items:center; gap:4px; }
.btn--xs:active { transform:translate(2px,2px); box-shadow:none; }

/* ============================================================
   MARKET — aligned grid data-readout (fixes row misalignment)
   ============================================================ */
.mk-table { display:flex; flex-direction:column; }
.mk-row {
  display:grid; align-items:center; gap:10px;
  grid-template-columns: minmax(0,1fr) 96px 70px 78px;
  padding:8px 8px; border-bottom:1px solid var(--line);
}
.mk-row.mk-head {
  position:sticky; top:0; z-index:2; background:var(--panel);
  border-bottom:var(--bw) solid var(--line-bright);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--ink-faint);
}
.mk-row:not(.mk-head):hover { background:#161c2b; }
.mk-row.illegal { box-shadow: inset 3px 0 0 var(--magenta); }
.mk-name { display:flex; flex-direction:column; gap:1px; min-width:0; }
.mk-good { font-family:var(--f-mono); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-flag { font-family:var(--f-mono); font-size:9px; color:var(--magenta); letter-spacing:.1em; }
.mk-flag.vice { display:inline-flex; align-items:center; gap:3px; color:#ff5a86; border:1px solid #ff2d7e; padding:0 4px; }
.mk-row.vice { box-shadow: inset 3px 0 0 #ff2d7e; background:#15060d; }
.mk-row.vice .mk-good { color:#ffd0dd; }
.mk-kana { font-size:10px; color:var(--ink-faint); }
.mk-sig { font-family:var(--f-mono); font-size:10px; color:var(--cyan); display:flex; align-items:center; gap:4px; margin-top:2px; }
.mk-price { font-family:var(--f-mono); font-size:14px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; color:var(--cyan); }
.mk-row.illegal .mk-price { color:var(--magenta); }
.mk-price .mk-tk { font-size:9px; color:var(--ink-faint); margin-left:3px; }
.mk-hold { font-family:var(--f-mono); font-size:12px; text-align:right; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.mk-pl { display:block; font-size:10px; }
.mk-act { display:flex; gap:5px; justify-content:flex-end; }
.mk-act .btn { padding:6px; }

/* ============================================================
   COMMS — contacts + clarity + optimistic
   ============================================================ */
.ct-strip {
  display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px;
  border-bottom:var(--bw) solid var(--line); scrollbar-width:thin;
}
.ct-chip {
  flex:0 0 auto; display:flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--void-2); color:var(--ink-dim); border:var(--bw) solid var(--line-bright);
  padding:6px 9px; box-shadow:2px 2px 0 #000; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  white-space:nowrap; transition:transform .07s, box-shadow .07s;
}
.ct-chip:active { transform:translate(2px,2px); box-shadow:none; }
.ct-chip.on { color:#000; background:var(--accent,var(--cyan)); border-color:#000; }
.ct-chip.g-CN.on { background:var(--gov-CN); } .ct-chip.g-MC.on { background:var(--gov-MC); }
.ct-chip.g-CP.on { background:var(--gov-CP); } .ct-chip .ct-ic { display:flex; }
.ct-here { font-size:8px; color:var(--lime); border:1px solid var(--lime); padding:0 3px; letter-spacing:.1em; }
.ct-chip.on .ct-here { color:#000; border-color:#000; }

.ct-active { border:var(--bw) solid var(--accent,var(--cyan)); background:var(--void-2); padding:8px 10px; margin-bottom:8px; box-shadow:3px 3px 0 #000; }
.ct-active__hd { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ct-active__name { font-family:var(--f-display); font-weight:800; letter-spacing:.05em; font-size:14px; }
.ct-active__role { font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; color:var(--amber); border:1px solid var(--amber); padding:1px 5px; }
.ct-sec { margin-left:auto; display:flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; }
.ct-sec.safe { color:var(--lime); } .ct-sec.open { color:var(--amber); }
.ct-active__desc { font-size:12px; color:var(--ink-dim); margin-top:5px; line-height:1.45; }
.ct-hint { font-size:11px; color:var(--ink-faint); margin-top:6px; line-height:1.4; }
.ct-hint b { color:var(--cyan); }
.ct-hint b.t-good { color:var(--lime); } .ct-hint b.t-bad { color:var(--magenta); }
/* secure-tunnel active banner in comms */
.ct-secure-banner { margin-top:7px; padding:7px 10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em;
  line-height:1.45; color:var(--lime); background:rgba(182,255,60,.06); border:1px solid var(--lime);
  box-shadow:inset 3px 0 0 var(--lime); }
.ct-secure-note { display:block; margin-top:4px; color:var(--ink-dim); letter-spacing:.02em; }
.vital.v-secure { animation:securepulse 2.6s ease-in-out infinite; }
@keyframes securepulse { 0%,100% { opacity:.85; } 50% { opacity:1; } }

/* ============================================================
   CUSTOM INPUTS — numeric keypad + dropdown picker
   ============================================================ */
.kpad-input { cursor:pointer; caret-color:transparent; }
.picker { font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; color:var(--ink); background:var(--void-2);
  border:var(--bw) solid var(--line-bright); padding:9px 12px; cursor:pointer; text-align:left; min-width:130px;
  display:inline-flex; align-items:center; justify-content:space-between; gap:8px; box-shadow:2px 2px 0 #000; }
.picker::after { content:'▾'; color:var(--ink-faint); }
.picker:active { transform:translate(2px,2px); box-shadow:none; }
.picker--wide { width:100%; min-width:0; font-size:13px; }

.kpad-scrim, .pick-scrim { position:fixed; inset:0; z-index:9200; display:grid; align-content:end; justify-items:center;
  background:rgba(2,4,8,.6); opacity:0; transition:opacity .2s; padding:0 0 max(14px,env(safe-area-inset-bottom)); }
.kpad-scrim.show, .pick-scrim.show { opacity:1; }
@media (min-width:640px) { .kpad-scrim, .pick-scrim { align-content:center; padding-bottom:0; } }
.kpad { width:min(360px,94vw); background:var(--panel); border:var(--bw) solid var(--line-bright); box-shadow:var(--shadow-lg);
  padding:14px; transform:translateY(24px); transition:transform .25s cubic-bezier(.2,.9,.2,1.05); }
.kpad-scrim.show .kpad { transform:none; }
.kpad__hd { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.kpad__val { font-family:var(--f-mono); font-size:30px; font-weight:600; text-align:right; color:var(--cyan);
  font-variant-numeric:tabular-nums; padding:5px 10px; border:2px solid var(--line); background:var(--void-2); margin-bottom:12px; }
.kpad__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kpad__k { font-family:var(--f-mono); font-size:22px; padding:14px 0; color:var(--ink); background:var(--panel-2);
  border:var(--bw) solid var(--line-bright); cursor:pointer; box-shadow:2px 2px 0 #000; }
.kpad__k:active { transform:translate(2px,2px); box-shadow:none; }
.kpad__k.kpad__fn { font-size:14px; color:var(--ink-dim); }
.kpad__row { display:flex; gap:8px; margin-top:12px; } .kpad__row .btn { flex:1; }

.picksheet { width:min(420px,96vw); background:var(--panel); border:var(--bw) solid var(--line-bright); box-shadow:var(--shadow-lg);
  transform:translateY(24px); transition:transform .25s cubic-bezier(.2,.9,.2,1.05); max-height:72vh; overflow-y:auto; }
.pick-scrim.show .picksheet { transform:none; }
.picksheet__hd { padding:12px 14px; border-bottom:var(--bw) solid var(--line); position:sticky; top:0; background:var(--panel); z-index:1; }
.picksheet__list { display:flex; flex-direction:column; }
.pickopt { display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; font-family:var(--f-body);
  font-size:14px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:13px 14px; cursor:pointer; }
.pickopt:hover { background:#161c2b; }
.pickopt.on { background:#0e1422; box-shadow:inset 3px 0 0 var(--cyan); }
.pickopt__s { font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); }

.msg.kind-sys { border-color:var(--amber); }
.msg.you { border-color:var(--lime); }
.msg.you .from span:first-child { color:var(--lime); }
.msg.pending { opacity:.7; }
/* Open-channel broadcast posts — each anonymous poster is its own message. */
.msg.kind-cast { border-color:var(--ink-faint); border-style:dashed; background:#0c1119; }
.msg.kind-cast .from span:first-child { color:#8fb6c8; font-family:var(--f-mono); letter-spacing:.02em; }
/* Grouped contact picker section headers. */
.picksheet__grp { padding:9px 14px 6px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--ink-faint); text-transform:uppercase; background:#0b0f18; border-bottom:1px solid var(--line);
  position:sticky; top:0; }
.msg.typing .body { padding:4px 0; }
.dots { display:inline-flex; gap:4px; }
.dots i { width:6px; height:6px; background:var(--ink-dim); display:block; border-radius:50%; animation:typing 1s infinite; }
.dots i:nth-child(2){ animation-delay:.15s } .dots i:nth-child(3){ animation-delay:.3s }
@keyframes typing { 0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

/* ============================================================
   MOBILE — comprehensive (not just an adjustment)
   ============================================================ */
@media (max-width:760px) {
  /* compact, sticky topbar that wraps cleanly */
  .topbar { gap:8px 10px; padding:7px 10px; position:sticky; top:0; z-index:40; }
  .topbar .brand-logo { height:20px; }
  .topbar .vital .label { font-size:8.5px; }
  .topbar .vital .val { font-size:13px; }
  .objchip { order:6; max-width:none; flex:1 1 100%; }
  .topbar .btn--sm { padding:6px 8px; }
  /* the active panel becomes a contained, scrollable card; never pushes the page */
  .panel.area.active { min-height:0; flex:1 1 auto; }
  .panel.area.active .panel__body { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* comms fills the panel and scrolls INSIDE — history can't push the page down */
  .comms { height:100%; }
  .msglist { flex:1 1 auto; min-height:0; }
  /* contact chips: taller + bigger text so they're readable and tappable */
  .ct-strip { margin:0 0 10px; gap:8px; padding-bottom:10px; }
  .ct-chip { padding:11px 12px; font-size:12px; min-height:44px; box-shadow:3px 3px 0 #000; }
  .ct-chip .ct-ic .ic-svg { width:16px; height:16px; min-width:16px; }
  .ct-here { font-size:9px; padding:1px 4px; }
  /* market columns tighten on phones */
  .mk-row { grid-template-columns: minmax(0,1fr) 76px 52px 66px; gap:6px; }
  .mk-good { font-size:12px; }
  /* bigger tap targets in the bottom nav */
  .tabbar button { padding:9px 3px; }
  /* modals/overlays use full width on phones */
  .modal, .modal-scrim .modal { width:96vw; }
  .codex { grid-template-columns:1fr; }
  .codex__nav { flex-direction:row; flex-wrap:wrap; }
}

/* ============================================================
   EVENT / NOTIFICATION pop — distinct, animated entrances
   ============================================================ */
/* Clean slide+fade only — no scale/3D/overshoot. Scaling this hard-shadow box left
   a duplicate "ghost" repaint on Chrome (same bug as the objective banner), which
   replayed every time an overlay (fleet, objectives, darknet…) re-rendered. */
.modal { animation: modalpop .3s cubic-bezier(0.16, 1, 0.3, 1) both; will-change: transform, opacity; backface-visibility: hidden; }
@keyframes modalpop {
  0% { opacity:0; transform: translateY(18px); }
  100% { opacity:1; transform: translateY(0); }
}
.modal-scrim { animation: scrimin .2s ease both; }
@keyframes scrimin { from { background:rgba(4,6,10,0); backdrop-filter:blur(0); } to { backdrop-filter:blur(2px); } }
/* severity-tinted event modal accent */
.modal__head .sev { animation: sevpulse 1.6s ease-in-out infinite; }
@keyframes sevpulse { 0%,100%{opacity:.7} 50%{opacity:1} }

/* richer toast with an accent slab + icon room */
#toast { display:flex; align-items:center; gap:9px; border-left-width:6px; animation: toastin .36s cubic-bezier(0.175, 0.885, 0.32, 1.22); }
@keyframes toastin { 
  0% { transform:translate(-50%,24px) scaleY(0.8); opacity:0; filter: blur(2px); } 
  70% { transform:translate(-50%,-4px) scaleY(1.04); }
  100% { transform:translate(-50%,0) scale(1); opacity:1; filter: none; } 
}

/* ============================================================
   FLEET — passive-ops ships
   ============================================================ */
.modal-scrim.theme-fleet { background:radial-gradient(120% 120% at 50% 0%, #07131e 0%, #04060b 80%); }
.modal-scrim.theme-fleet .modal { border-color:var(--lime); width:min(820px,96vw); max-height:88vh; overflow:auto; }
.ccard.ship { border-color:var(--cyan); }
.ccard.ship.smuggle { border-color:var(--magenta); }
.ccard.ship.dead { opacity:.6; border-color:var(--ink-faint); }
.ship-meta { display:flex; flex-wrap:wrap; gap:10px; font-family:var(--f-mono); font-size:11px; color:var(--ink-dim); margin:6px 0; }
.hullbar { position:relative; height:14px; border:var(--bw) solid var(--line-bright); background:var(--void); margin-top:4px; }
.hullbar__fill { height:100%; background:var(--lime); transition:width .5s; }
.hullbar__fill.low { background:var(--magenta); animation:heatpulse 1s infinite; }
.hullbar__txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--ink); text-shadow:0 0 3px #000; }
.fr-ev { font-size:12.5px; border-left:3px solid var(--line-bright); padding:5px 9px; margin-bottom:6px; background:var(--void-2); }
.fr-ev.fr-raid { border-color:var(--amber); }
.fr-ev.fr-mutiny, .fr-ev.fr-lost { border-color:var(--magenta); color:#ffd7e4; }
.fr-ev.fr-docked { border-color:var(--cyan); }
#toast.t-cyan { border-color:var(--cyan); }

/* ============================================================
   v4 — COMPREHENSIVE MOBILE HUD (full redesign, not an adjustment)
   ============================================================ */

/* desktop defaults for the new mobile-only chrome (so large screens are unchanged) */
.topbar__sys { display: contents; }   /* children lay out in the topbar flex as before */
.topbar__menu { display: none; }

/* the slide-up system menu sheet (mobile) — hidden container on desktop too */
.sheet { position: fixed; inset: 0; z-index: 9100; pointer-events: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(2,4,8,.6); opacity: 0; transition: opacity .25s; }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--panel); border-top: 3px solid var(--cyan); box-shadow: 0 -8px 0 #000;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.9,.2,1.05);
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); max-height: 86vh; overflow-y: auto; overflow-x: hidden;
}
.sheet.open { pointer-events: auto; }
.sheet.open .sheet__scrim { opacity: 1; }
.sheet.open .sheet__panel { transform: none; }
.sheet__grab { width: 44px; height: 4px; background: var(--line-bright); margin: 4px auto 10px; }
.sheet__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet__hd .display { font-size: 16px; letter-spacing: .14em; }
.sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.sysitem {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer;
  background: var(--void-2); border: var(--bw) solid var(--line-bright); box-shadow: 3px 3px 0 #000;
  color: var(--ink); padding: 14px 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
  position: relative; min-height: 64px; min-width: 0; overflow: hidden; transition: transform .07s, box-shadow .07s;
}
.sysitem__lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sysitem:active { transform: translate(3px,3px); box-shadow: none; }
.sysitem__ic { color: var(--cyan); }
.sysitem__ic .ic-svg { width: 22px; height: 22px; }
.sysitem.danger { border-color: var(--magenta); } .sysitem.danger .sysitem__ic { color: var(--magenta); }
.sysitem__badge { position: absolute; top: 8px; right: 10px; font-size: 9px; color: var(--ink-dim); }

@media (max-width: 760px) {
  :root { --gap: 10px; }

  /* ---- HARD viewport clamp: nothing may exceed screen width ---- */
  html, body { max-width: 100%; overflow-x: hidden; }
  .hud, .grid, .topbar, .panel, .panel.area, .panel.area.active,
  .comms, .msglist, .panel__body { min-width: 0; max-width: 100%; }
  .topbar > *, .grid > * { min-width: 0; }   /* let grid children shrink instead of overflowing */

  /* ---- HEADER: compact two-row, safe-area aware, sticky ---- */
  .hud {
    height: 100dvh; overflow: hidden;             /* lock the HUD to the viewport — the page itself never grows */
    grid-template-rows: auto auto 1fr auto;       /* header · ticker · panel(fills) · tabbar */
  }
  .topbar {
    display: grid; width: 100%;
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas: "brand vitals menu" "bars bars bars" "obj obj obj";
    align-items: center; gap: 6px 8px; padding: calc(6px + env(safe-area-inset-top)) 10px 7px;
    position: sticky; top: 0; z-index: 45;
    border-bottom: var(--bw) solid var(--line-bright); background: #0c1018;
  }
  .topbar .brand { grid-area: brand; }
  .topbar .brand-logo { height: 18px; }
  /* keep only TOKENS inline in the header; the rest live in panels/sheet */
  .topbar .v-handle, .topbar .v-day, .topbar .v-dock { display: none; }
  .topbar .v-tokens { grid-area: vitals; flex-direction: row; align-items: baseline; gap: 6px; }
  .topbar .v-tokens .label { font-size: 9px; }
  .topbar .v-tokens .val { font-size: 16px; }
  .topbar .spacer { display: none; }

  /* heat as a compact tier chip top-right */
  .topbar .bars { grid-area: bars; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
  .topbar .bars::-webkit-scrollbar { display: none; }
  .topbar .meter { width: auto; min-width: 74px; flex: 0 0 auto; }
  .objchip { grid-area: obj; max-width: none; width: 100%; margin: 0; }

  /* hide the desktop system buttons; show the hamburger */
  .topbar__sys { display: none; }
  .topbar__menu {
    grid-area: menu; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; font-size: 24px; line-height: 1;
    background: var(--panel-2); color: var(--cyan); border: var(--bw) solid var(--cyan);
    box-shadow: 2px 2px 0 #000; cursor: pointer;
  }
  .topbar__menu:active { transform: translate(2px,2px); box-shadow: none; }

  /* ticker: thin, under header */
  .ticker { font-size: 10px; }

  /* ---- PANELS: one fills the screen between header & tabbar, scrolls inside ---- */
  .grid { display: flex; flex-direction: column; padding: 0; min-height: 0; overflow: hidden; }
  .panel.area { display: none; }
  .panel.area.active {
    display: flex; flex-direction: column; border: 0; box-shadow: none;
    flex: 1 1 auto; min-height: 0;                /* fill the 1fr row exactly; the body scrolls, not the page */
  }
  .panel.area.active .panel__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .panel.area::before, .panel.area::after { display: none; }   /* drop corner ticks fullscreen */
  .accent-tab { display: none; }

  /* comms fills + scrolls inside (history never pushes the page) */
  .comms { height: 100%; }
  .msglist { flex: 1 1 auto; min-height: 0; }
  .msg, .msg .body, .ct-active__desc, .ct-hint { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .chatbar { padding-bottom: 4px; }
  .chatbar .input { min-width: 0; }

  /* market: tighter, bigger tap rows */
  .mk-row { grid-template-columns: minmax(0,1fr) 72px 48px 64px; gap: 6px; padding: 10px 6px; }
  .mk-act .btn { padding: 8px; }

  /* ---- BOTTOM NAV: thumb-reachable, safe-area, big targets ---- */
  .tabbar {
    display: flex; position: sticky; bottom: 0; z-index: 50;
    border-top: var(--bw) solid var(--line-bright); background: #0a0d14;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar button {
    flex: 1; min-height: 56px; background: transparent; color: var(--ink-dim);
    border: 0; border-right: 1px solid var(--line); padding: 8px 2px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; position: relative;
  }
  .tabbar button .ic .ic-svg { width: 22px; height: 22px; }
  .tabbar button[aria-selected="true"] { color: var(--cyan); background: #0e1422; box-shadow: inset 0 3px 0 var(--cyan); }
  .tabbar button .badge { position: absolute; top: 6px; right: 22%; color: var(--magenta); font-size: 9px; }

  /* ---- OVERLAYS as BOTTOM SHEETS ---- */
  .modal-scrim { align-content: end; padding: 0; }
  .modal, .modal-scrim .modal {
    width: 100%; max-height: 88vh; border-width: 3px 0 0 0;
    box-shadow: 0 -6px 0 #000; animation: sheetup .3s cubic-bezier(.2,.9,.2,1.05) both;
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
  .modal__body, .panel__body { overscroll-behavior: contain; }

  /* builder/auth/connect breathe on phones */
  .builder { padding: 14px 12px 80px; }
  .origins { grid-template-columns: 1fr; }
  .auth { padding: 18px 14px calc(24px + env(safe-area-inset-bottom)); align-content: safe start; padding-top: max(24px, 8vh); }
  .auth__card { width: 100%; }
  .auth__pitch { font-size: 13px; }
  .field .input { font-size: 16px; padding: 12px 12px; }   /* 16px stops iOS zoom-on-focus */
  .btn--lg { padding: 15px 16px; }
  .auth__tabs .btn { padding: 13px 12px; }
  .stat-row { grid-template-columns: 84px 1fr auto; gap: 8px; }
  .stat-row .pips { min-width: 0; flex-wrap: wrap; gap: 3px; }
  .stat-row .pip { width: 12px; height: 12px; }
  .stat-row .stepper .btn { padding: 6px 10px; }
  .codex { grid-template-columns: 1fr; }
  .codex__nav { flex-direction: row; flex-wrap: wrap; }

  /* fleet/cards stack cleanly */
  .ship-meta { gap: 8px 12px; }
}

/* very small phones */
@media (max-width: 380px) {
  .topbar .vital .val { font-size: 13px; }
  .tabbar button { font-size: 8px; }
  .mk-row { grid-template-columns: minmax(0,1fr) 60px 40px 56px; }
}

/* ============================================================
   TUTORIAL — spotlight coachmarks
   ============================================================ */
#tutorial { position: fixed; inset: 0; z-index: 9300; }
.tut-spot {
  position: fixed; border: 2px solid var(--cyan); border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(4,6,10,.82), 0 0 22px var(--cyan);
  pointer-events: none; transition: all .25s cubic-bezier(.2,.8,.2,1); animation: tutpulse 1.6s ease-in-out infinite;
}
@keyframes tutpulse { 0%,100%{ box-shadow:0 0 0 9999px rgba(4,6,10,.82), 0 0 14px var(--cyan); } 50%{ box-shadow:0 0 0 9999px rgba(4,6,10,.82), 0 0 30px var(--cyan); } }
.tut-card {
  position: fixed; width: min(330px, 90vw); background: var(--panel);
  border: var(--bw) solid var(--cyan); box-shadow: var(--shadow-lg); padding: 14px;
  z-index: 9301; animation: modalpop .25s cubic-bezier(.2,1.3,.3,1) both;
}
.tut-card__step { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--cyan); }
.tut-card__title { font-family: var(--f-display); font-weight: 900; letter-spacing: .06em; font-size: 16px; margin: 4px 0 6px; }
.tut-card__text { font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.tut-card__row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

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

/* ============================================================
   PROCESSING — bespoke cinematic: losing your mind to the Continuity.
   The black ROOT never moves; only .proc-inner vibrates/glitches, so
   the game UI behind can never bleed in. Generation loss ramps via
   .processing[data-gen="0..4"]. Sans-serif throughout.
   Layers (z low→high): vignette · VHS noise · scanlines · cracks ·
   flash · the ticking year — then the foreground type above it all.
   ============================================================ */
.processing {
  display:grid; grid-template-rows:auto 1fr auto;
  align-items:center; justify-items:center; text-align:center;
  padding:clamp(16px,4vh,40px) clamp(14px,4vw,48px);
  color:#cdd3dd; font-family:var(--f-body);
  --sx:0px; --sy:0px;                                   /* VHS micro-vibration amplitude */
  animation:procfade 2.4s ease both;
}

/* the moving content layer — vibrates / glitches without exposing the root */
.proc-inner { position:absolute; inset:0; z-index:0; pointer-events:none; will-change:transform,filter;
  animation:procshake .16s steps(2) infinite; }
@keyframes procshake { 0%{ transform:translate(calc(var(--sx) * -1), var(--sy)); } 50%{ transform:translate(var(--sx), calc(var(--sy) * -1)); } }

/* vignette — a slow dread breath */
.proc-vign { position:absolute; inset:0;
  background:radial-gradient(120% 95% at 50% 48%, rgba(18,4,12,.35) 0%, rgba(3,1,2,.96) 60%, #000 100%);
  animation:procbreath 7s ease-in-out infinite; }
@keyframes procbreath { 0%,100%{ opacity:.92; } 50%{ opacity:1; } }

/* VHS luminance noise (generation loss) — opacity rises hard with --gen */
.proc-noise { position:absolute; inset:-30%; mix-blend-mode:screen; opacity:calc(.04 + var(--gen,0) * .14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:procnoise .22s steps(3) infinite; }
@keyframes procnoise { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

/* scanlines + a rolling tracking bar — heavier as it degrades */
.proc-scan { position:absolute; inset:0; mix-blend-mode:overlay; opacity:calc(.18 + var(--gen,0) * .22);
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.55) 2px 3px); }
.proc-scan::after { content:""; position:absolute; left:0; right:0; top:-25%; height:24%;
  background:linear-gradient(180deg, transparent, rgba(150,200,255,.07) 45%, rgba(255,255,255,.12) 50%, rgba(150,200,255,.07) 55%, transparent);
  opacity:calc(.25 + var(--gen,0) * .6); animation:proctrack 5.5s linear infinite; }
@keyframes proctrack { 0%{ top:-25%; } 100%{ top:120%; } }

/* the cracks — hairline glass fractures that accumulate (drawn by spawnCrack) */
.proc-cracks { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 0 1.2px rgba(150,210,255,.45)); }
.crack-line { fill:none; stroke:rgba(214,236,255,.7); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.crack-fork { stroke:rgba(190,222,255,.42); }

/* flash overlay — soft (a cut) and hard (the crash / the wipe) */
.proc-flash { position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(170,210,255,.16), transparent 70%); }
.processing.flash-soft .proc-flash { animation:procflashsoft 1.12s ease-out; }
@keyframes procflashsoft { 0%{opacity:0} 16%{opacity:.7} 100%{opacity:0} }
.processing.flash-hard .proc-flash { background:#fff; animation:procflashhard .5s ease-out; }
@keyframes procflashhard { 0%{opacity:0} 6%{opacity:1} 30%{opacity:.5} 100%{opacity:0} }
/* the crash STROBE — several violent white flashes in under a second */
.processing.strobe .proc-flash { background:#fff; animation:procstrobe .95s steps(1,end); }
@keyframes procstrobe {
  0%{opacity:0} 4%{opacity:1} 9%{opacity:0} 14%{opacity:.95} 19%{opacity:0}
  26%{opacity:1} 31%{opacity:0} 42%{opacity:.85} 47%{opacity:0} 60%{opacity:.6} 66%{opacity:0} 100%{opacity:0}
}

/* the ticking year — huge, faint, dead behind it all */
.proc-year { position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:900; letter-spacing:.04em; line-height:1;
  font-size:clamp(110px,30vw,360px); color:#7a1a2c; text-shadow:0 0 70px rgba(150,24,46,.55);
  font-variant-numeric:tabular-nums; user-select:none; }
.processing.dropped .proc-year { color:#b3243f; text-shadow:0 0 100px rgba(200,32,60,.7), 0 0 20px #c4263f; transition:color 3s, text-shadow 3s; }
.processing[data-gen="4"] .proc-year { color:#c92847; }

/* ---- foreground type (sans-serif throughout) ---- */
.proc-top { position:relative; z-index:3; align-self:start; margin-top:clamp(8px,3vh,26px); }
.proc-title { font-family:var(--f-mono); letter-spacing:.62em; text-indent:.62em; font-size:12px; font-weight:500; color:#7a1430; }
.processing.dropped .proc-title { color:#b21c3e; transition:color 2s; }
.proc-sub { font-family:var(--f-mono); letter-spacing:.28em; font-size:9.5px; color:#3c4150; margin-top:6px; }

.proc-stage { position:relative; z-index:3; align-self:center; width:100%; max-width:680px; height:1px; }
.proc-line { position:absolute; left:0; right:0; bottom:0; text-align:center; transform:translateY(40px);
  font-family:var(--f-body); font-weight:400; font-size:clamp(17px,2.5vw,25px); line-height:1.5;
  letter-spacing:.012em; color:#aeb4c0; text-shadow:0 0 18px #000; opacity:0; will-change:transform,opacity; }
.proc-line.build { color:#838b97; }
.proc-line.descent { color:#c6ccd6; }
.proc-line.wake { color:#ff9bbb; font-weight:600; font-family:var(--f-display); letter-spacing:.04em; }
.proc-line.static { position:relative; transform:none; opacity:1; }
.proc-line.run { animation:procline var(--life,7.2s) cubic-bezier(.33,0,.2,1) forwards; }
@keyframes procline {
  0%   { opacity:0; transform:translateY(46px);  filter:blur(3px); }
  14%  { opacity:1; transform:translateY(0);     filter:blur(0); }
  64%  { opacity:1; transform:translateY(-46px); }
  100% { opacity:0; transform:translateY(-112px); filter:blur(2px); }
}
/* chromatic split on the lore grows with generation loss */
.processing[data-gen="3"] .proc-line, .processing[data-gen="4"] .proc-line {
  text-shadow:0 0 18px #000, 2px 0 rgba(255,45,126,.35), -2px 0 rgba(39,229,255,.32);
}

/* ---- foot / come-to ---- */
.proc-foot { position:relative; z-index:3; align-self:end; opacity:0; transform:translateY(10px);
  transition:opacity 1.6s, transform 1.6s; display:grid; gap:14px; justify-items:center;
  width:100%; max-width:620px; padding-bottom:max(2vh, env(safe-area-inset-bottom)); }
.proc-foot.show { opacity:1; transform:none; }
.proc-return { font-family:var(--f-body); font-size:clamp(14px,1.8vw,17px); line-height:1.55; color:#9aa0aa; }
.proc-return b { color:#e7ecf5; }
.proc-return .shatter { color:#ff6f9c; }
.proc-linger { font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; color:#4f4a52; opacity:.75; animation:proclinger 5s steps(2) infinite; }
@keyframes proclinger { 0%,90%,100%{opacity:.4} 95%{opacity:.85} }

/* ---- the smiling things — a slow, smooth surfacing (no spasm) ---- */
.proc-mascot { position:absolute; transform:translate(-50%,-50%) scale(.9); font-size:clamp(40px,9vw,92px);
  color:#d98aa6; opacity:0; text-shadow:0 0 22px rgba(255,45,126,.5); will-change:transform,opacity; }
.proc-mascot.big { font-size:clamp(86px,18vw,190px); }
.proc-mascot.show { animation:procmascot var(--life,3.6s) cubic-bezier(.4,0,.2,1) forwards; }
@keyframes procmascot {
  0%   { opacity:0;  transform:translate(-50%,-50%) scale(.84); filter:blur(3px); }
  26%  { opacity:.85; transform:translate(-50%,-50%) scale(1);  filter:blur(0); }
  72%  { opacity:.8; transform:translate(-50%,-50%) scale(1.03); }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(1.06); filter:blur(2px); }
}

/* ---- generation-loss: vibration amplitude + colour grade (0 calm → 4 broken) ---- */
.processing[data-gen="1"] { --sx:.4px; --sy:.4px; }
.processing[data-gen="2"] { --sx:.7px; --sy:.6px; }
.processing[data-gen="3"] { --sx:1.3px; --sy:1px; }
.processing[data-gen="4"] { --sx:2px; --sy:1.5px; }
.processing[data-gen="2"] .proc-inner { filter:saturate(.88) contrast(1.04); }
.processing[data-gen="3"] .proc-inner { filter:saturate(.74) contrast(1.1) drop-shadow(1.6px 0 rgba(39,229,255,.5)) drop-shadow(-1.6px 0 rgba(255,45,126,.5)); }
.processing[data-gen="4"] .proc-inner { filter:saturate(.55) contrast(1.18) brightness(.94) drop-shadow(2.6px 0 rgba(39,229,255,.6)) drop-shadow(-2.6px 0 rgba(255,45,126,.6)); }

/* ---- glitch — chromatic tear via filter/clip on .proc-inner only (root never moves) ---- */
.processing.glitch .proc-inner { animation:procglitch .3s steps(2,end) !important; }
.processing.glitch-hard .proc-inner { animation:procglitchhard .5s steps(3,end) !important; }
@keyframes procglitch {
  0%,100%{ filter:none; transform:none; }
  30%{ filter:drop-shadow(2px 0 #27e5ff) drop-shadow(-2px 0 #ff2d7e); transform:translate(-1px,0); }
  65%{ filter:drop-shadow(-3px 0 #27e5ff) drop-shadow(3px 0 #ff2d7e) saturate(1.3); transform:translate(2px,0); }
}
@keyframes procglitchhard {
  0%{ filter:none; clip-path:inset(0 0 0 0); transform:none; }
  10%{ filter:drop-shadow(9px 0 #27e5ff) drop-shadow(-9px 0 #ff2d7e) brightness(1.6); transform:translate(-8px,2px) skewX(-2.5deg); clip-path:inset(4% 0 56% 0); }
  26%{ filter:drop-shadow(-12px 0 #27e5ff) drop-shadow(12px 0 #ffec00) saturate(1.9) brightness(1.3); transform:translate(9px,-3px); clip-path:inset(62% 0 6% 0); }
  44%{ filter:drop-shadow(8px 0 #ff2d7e) brightness(1.4); transform:translate(-6px,1px) skewX(2deg); clip-path:inset(30% 0 36% 0); }
  62%{ filter:drop-shadow(-7px 0 #27e5ff) drop-shadow(7px 0 #ff2d7e); transform:translate(6px,0); clip-path:inset(46% 0 20% 0); }
  80%{ filter:brightness(1.25); transform:translate(-3px,0); clip-path:inset(16% 0 48% 0); }
  100%{ filter:none; transform:none; clip-path:inset(0 0 0 0); }
}

/* ---- mobile: bespoke fit — one screen, no overflow ---- */
@media (max-width: 760px) {
  .processing { padding:16px 14px calc(14px + env(safe-area-inset-bottom)); }
  .proc-year { font-size:clamp(84px,40vw,220px); }
  .proc-title { font-size:10px; letter-spacing:.5em; text-indent:.5em; }
  .proc-sub { font-size:8.5px; letter-spacing:.22em; }
  .proc-top { margin-top:max(8px, env(safe-area-inset-top)); }
  .proc-line { font-size:clamp(16px,5vw,21px); line-height:1.45; }
  .proc-mascot { font-size:clamp(38px,14vw,84px); }
  .proc-mascot.big { font-size:clamp(70px,26vw,150px); }
  .proc-return { font-size:14px; }
}

/* ============================================================
   BOUNTY DESK (dark-web hitmen) — ◢ NET
   ============================================================ */
.bountydesk .bd-list { display:grid; gap:8px; }
.bd-row { border:1px solid var(--line-bright); background:var(--void); padding:7px 9px; box-shadow:2px 2px 0 #000; }
.bd-row.grudge { border-color:var(--magenta); box-shadow:inset 3px 0 0 var(--magenta), 2px 2px 0 #000; }
.bd-who { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bd-name { font-family:var(--f-display); font-weight:800; letter-spacing:.04em; font-size:13px; }
.bd-crime { font-size:11.5px; color:var(--ink-dim); margin:3px 0 0; line-height:1.4; }
.bd-pending { display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; padding:3px 0; }
.bd-pending .dot { width:8px; height:8px; border-radius:50%; background:var(--magenta); box-shadow:0 0 8px var(--magenta); animation: chippulse 1.2s infinite; }
.bd-pend-label { flex:1; color:var(--ink); }
.bountydesk.locked { opacity:.9; }

/* ---- dead / betrayer crew cards ---- */
.ccard.dead { border-color:#5a2230; opacity:.9; background:repeating-linear-gradient(45deg,#140a0e 0 8px,#0e0709 8px 16px); }
.ccard.dead h4 { color:#caa; }
.ccard.dead .stats-mini .t-bad { letter-spacing:.06em; }

/* ============================================================
   MOBILE — comms contacts, lockdown fit, date readout
   ============================================================ */
@media (max-width: 760px) {
  /* COMMS: the contacts row must be fully visible & tappable — wrap it, pin it,
     and let ONLY the message list scroll (no nested/!competing scroll regions). */
  .panel.area.active .panel__body.comms { overflow: hidden; }
  .comms { height: 100%; min-height: 0; }
  /* reading/typing is the focus: contacts collapse to one compact scroll row,
     and the verbose desc/hint are hidden to give the message list the screen. */
  .comms .ct-strip {
    flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border-bottom: var(--bw) solid var(--line-bright); padding-bottom: 7px; margin-bottom: 7px;
  }
  .comms .ct-strip::-webkit-scrollbar { display: none; }
  .comms .ct-active { flex: 0 0 auto; padding: 7px 9px; }
  .comms .ct-active__desc, .comms .ct-hint { display: none; }
  .comms .ct-secure-banner { margin: 5px 0 0; }
  .comms .msglist { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .comms .chatbar { flex: 0 0 auto; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .ct-chip { min-height: 42px; padding: 9px 11px; font-size: 12px; }

  /* reveal the in-world DATE in the header (Y·M·D) so you always know when it is */
  .topbar .v-day { display: flex !important; grid-area: vitals; align-items: baseline; flex-direction: row; gap: 6px; }
  .topbar .v-tokens { justify-self: start; }
  .topbar .v-day { justify-self: end; }
  .topbar .v-day .label { font-size: 9px; }

  /* COMPLIANCE LOCKDOWN: fit the takeover to the phone, keep it scrollable */
  .lockdown { padding: 12px; }
  .lockdown__box { width: 100%; max-height: calc(100dvh - 24px); }
  .lockdown__hdr { padding: 10px 12px; }
  .lockdown__hdr h2 { font-size: 17px; letter-spacing: .08em; }
  .lockdown__body { padding: 12px; }
  .lockdown__body .narr { font-size: 13px; }
  .lockdown__eye { font-size: clamp(40px, 11vw, 64px); margin: 4px 0 10px; }
  .lockdown .choices .btn { padding: 13px 12px; }
  .lockdown__legal { font-size: 9px; letter-spacing: .1em; }
}