/* Bone on black. Colour is earned by going further in — the chrome stays monochrome, with blood
   for damage and one thin rainbow sliver as a promise. No font files: the HUD and the title
   screens use a condensed system stack made crooked with rotation and hard shadows; windows
   (station menu, screens) are calm smoked glass in a plain system sans. */
:root {
  --bg: #0d0a10;
  --bone: #f2ead8;
  --ash: #8a8378;
  --blood: #ff1244;
  --quest: #ffe800;
  --rainbow: linear-gradient(100deg, #ff2fa0, #ff6a00, #ffe800, #aaff00, #00f0ff, #b000ff);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue Condensed Bold", sans-serif;
  --mono: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  /* windows (station menu, screens, faults): smoked glass — see the windows section */
  --ui: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --glass: rgba(148,153,160,0.30); --glass-menu: rgba(112,117,124,0.42); --glass-bar: rgba(176,181,188,0.26);
  --glass-rim: rgba(230,232,235,0.34); --glass-line: rgba(230,232,235,0.16);
  --ink: #e4e2da; --ink-dim: #b6b7b4; --well: rgba(10,10,14,0.34); --well-line: rgba(230,232,235,0.22); --sel: rgba(230,232,235,0.15);
  --btn: #e4e2da; --btn-ink: #17161a; --btn-edge: #a9a79f;
  /* a station's services each own a colour, borrowed from the rainbow; work is --quest, repair is --blood */
  --svc-workshop: #ff6a00; --svc-shipyard: #00f0ff; --svc-bank: #ff2fa0; --svc-charts: #aaff00; --svc-registry: #b000ff;
  /* state, inside a screen: enough (the rainbow's green) and not enough (blood), muted toward ink
     where they are text or a bar; and amber, for amounts of units and nothing else */
  --ok: #aaff00; --short: var(--blood); --amber: #ffc44d;
  --ok-ink: color-mix(in srgb, var(--ok) 72%, var(--ink)); --short-ink: color-mix(in srgb, var(--short) 78%, var(--ink));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--bone); font-family: var(--mono); }
#game, #map { display: block; position: fixed; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.hidden { display: none !important; }

.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  text-align: center;
  background:
    repeating-linear-gradient(-38deg, rgba(242,234,216,0.018) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, rgba(13,10,16,0.55), rgba(13,10,16,0.93) 70%);
}

h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(64px, 13vw, 170px); line-height: 0.86; letter-spacing: 1px;
  text-transform: uppercase; transform: rotate(-3deg) skewX(-6deg);
  color: var(--bone);
  text-shadow: 5px 5px 0 #000, 9px 9px 0 rgba(242,234,216,0.16);
}
.sliver { width: min(560px, 70vw); height: 5px; background: var(--rainbow); transform: rotate(-3deg) translateY(-8px); box-shadow: 3px 3px 0 #000; }
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 8vw, 104px); line-height: 0.92; text-transform: uppercase;
  transform: rotate(-2deg); color: var(--blood);
  text-shadow: 4px 4px 0 #000, 8px 8px 0 rgba(255,18,68,0.25);
}
h2 span { color: var(--bone); }
.doomline {
  font-family: var(--display); font-size: 15px; letter-spacing: 8px; text-transform: uppercase;
  color: var(--ash); transform: rotate(-1deg); text-shadow: 2px 2px 0 #000;
}

form { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
#name {
  font-family: var(--mono); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; text-align: center;
  width: 300px; padding: 14px 12px; color: var(--bone); background: #000;
  border: 3px solid var(--bone); border-radius: 0; outline: none;
  transform: rotate(1deg); box-shadow: 6px 6px 0 rgba(242,234,216,0.2);
}
#name::placeholder { color: #5b564f; letter-spacing: 1px; }
#name:focus { box-shadow: 6px 6px 0 var(--bone); }
.big-btn {
  font-family: var(--display); font-size: 24px; letter-spacing: 5px; text-transform: uppercase; cursor: pointer;
  color: #000; background: var(--bone); border: 3px solid #000; border-radius: 0; padding: 13px 40px;
  transform: rotate(-2deg); box-shadow: 7px 7px 0 #000, 10px 10px 0 var(--ash);
  transition: transform 0.07s, box-shadow 0.07s;
}
.big-btn:hover {
  background: #000; color: var(--bone); border-color: var(--bone);
  transform: rotate(1deg) translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--blood);
}
.ghost-btn {
  font-family: var(--display); font-size: 14px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer;
  color: var(--bone); background: none; border: 2px solid var(--ash); padding: 9px 18px;
  transform: rotate(1.5deg); box-shadow: 3px 3px 0 #000;
}
.ghost-btn:hover { background: var(--bone); color: #000; }
.error { min-height: 18px; color: var(--blood); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

/* A ship is lost: the poster says which, over the place it happened. Nothing ends. */
#wreck { position: fixed; left: 0; right: 0; top: 26%; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.9s; }
#wreck.show { opacity: 1; transition: opacity 0.12s; }
#wreck h2 { font-size: clamp(36px, 6vw, 84px); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
/* the new-pilot intro holds the HUD back, then lets it fade in */
#hud { transition: opacity 1.8s; }
#hud.veiled { opacity: 0; visibility: hidden; transition: none; }
#hud .label { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--ash); margin-right: 8px; }
#hp { position: absolute; left: 26px; top: 22px; display: flex; gap: 7px; transform: rotate(-2deg); }
.pip { width: 26px; height: 18px; background: var(--bone); transform: skewX(-18deg); box-shadow: 3px 3px 0 #000; }
.pip.lost { background: none; outline: 2px solid var(--blood); outline-offset: -2px; opacity: 0.7; }
/* Shield points: thinner, hollow-edged, after the hull. They come back by themselves; hull does not. */
.pip.shield { width: 14px; height: 18px; background: none; outline: 2px solid var(--bone); outline-offset: -2px; box-shadow: 3px 3px 0 #000; }
.pip.shield:not(.lost) { background: var(--bone); }
.pip.shield.lost { outline-color: var(--ash); opacity: 0.5; }
#purse #hold-row .unit { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--ash); text-shadow: none; }
#hold-row.full #hold { color: var(--blood); }
#hp.hurt { animation: hurt 0.35s; }
@keyframes hurt { 0%, 40% { transform: rotate(-2deg) translate(4px, -3px) scale(1.12); } 100% { transform: rotate(-2deg); } }
#place { position: absolute; left: 50%; top: 18px; transform: translateX(-50%) rotate(-1.5deg); text-align: center; white-space: nowrap; }
#place-val { font-family: var(--display); font-size: 34px; letter-spacing: 3px; text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
#purse { position: absolute; right: 26px; top: 16px; text-align: right; transform: rotate(1.5deg); }
#purse span:not(.label) { font-family: var(--display); font-size: 24px; letter-spacing: 2px; text-shadow: 3px 3px 0 #000; }
#purse #xp-next { font-size: 14px; color: var(--ash); margin-left: 4px; }
#xp-bar { width: 150px; height: 5px; margin: 3px 0 6px auto; background: rgba(242,234,216,0.12); box-shadow: 2px 2px 0 #000; }
#xp-bar i { display: block; height: 100%; width: 0; background: var(--bone); transition: width 0.3s; }

/* Quest tracker: under the purse. Ready quests turn bone and point home. */
#side { position: absolute; right: 26px; top: 176px; width: 270px; text-align: right; transform: rotate(1deg); }
.quest { margin-bottom: 12px; color: var(--ash); }
.quest .q-title { font-family: var(--display); font-size: 17px; letter-spacing: 3px; text-transform: uppercase; color: var(--bone); text-shadow: 2px 2px 0 #000; }
.quest .q-goal { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.quest .q-bar { display: inline-block; width: 120px; height: 5px; margin-top: 5px; background: rgba(242,234,216,0.12); box-shadow: 2px 2px 0 #000; }
.quest .q-bar i { display: block; height: 100%; background: var(--ash); }
.quest.ready .q-bar i { background: var(--bone); }
.quest.ready .q-goal { color: var(--bone); }
.quest.waiting .q-goal { color: var(--bone); }
.quest.lead .q-title { color: var(--ash); }
.quest.lead .q-bar i { background: var(--bone); }

/* ---------- windows: smoked glass ----------
   The HUD is the poster; windows are the instrument panel. Translucent grey over the
   grainy world, square and flat: no rotation, no offset shadows, no display face, nothing
   black. The only solid fills in a window are the buttons — what you can press is the
   brightest thing in it. */
.win {
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-rim); border-radius: 3px; overflow: hidden;
  font-family: var(--ui); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.win .bar {
  position: relative; display: flex; align-items: center; gap: 12px; flex: none; height: 31px; padding: 0 10px;
  background: var(--glass-bar); border-bottom: 1px solid var(--glass-line);
  font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
}
/* Rim light: on a titled window the top rim is the title screen's sliver, one pixel of it, and
   its light falls a little way into the bar — the one decoration a window gets. The click menu
   and the fault notice, which have no bar, keep a plain rim. */
.win:has(> .bar) { border-top: none; }
.win:has(> .bar)::before { content: ""; display: block; flex: none; height: 1px; background: var(--rainbow); }
.win .bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none; background: var(--rainbow); opacity: 0.16;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.win .bar .stat { font-weight: 400; letter-spacing: 1.5px; opacity: 0.8; }
#menu .bar .stat { margin-left: auto; }
.win .bar .close { margin-left: auto; font: inherit; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: inherit; opacity: 0.8; background: none; border: none; cursor: pointer; }
.win .bar .close:hover { opacity: 1; }

/* ---------- station menu: what this station can do for you, one row per service ---------- */
#menu { position: absolute; left: 26px; top: 84px; width: 330px; pointer-events: auto; background: var(--glass-menu); }
/* Read at a glance, not word by word: every service has an icon and a colour of its own
   (muted at rest), quantities are drawn rather than written, and a row that has something
   for you is LIT — solid icon tile, bar and wash in its colour, and a chip at the right. */
#menu .row {
  --hue: var(--ink); --tint: color-mix(in srgb, var(--hue) 72%, var(--ink));
  display: grid; grid-template-columns: 18px 30px auto 1fr; column-gap: 10px; align-items: center;
  width: 100%; height: 46px; padding: 0 10px 0 8px; text-align: left; cursor: pointer; font-family: var(--ui);
  color: var(--ink); background: none; border: none; border-top: 1px solid var(--glass-line); border-left: 3px solid transparent;
}
#menu .row[data-svc="npc"] { --hue: var(--quest); }
#menu .row[data-svc="repair"] { --hue: var(--blood); }
#menu .row[data-svc="workshop"] { --hue: var(--svc-workshop); }
#menu .row[data-svc="shipyard"] { --hue: var(--svc-shipyard); }
#menu .row[data-svc="bank"] { --hue: var(--svc-bank); }
#menu .row[data-svc="map"] { --hue: var(--svc-charts); }
#menu .row[data-svc="registry"] { --hue: var(--svc-registry); }
#menu .row[data-svc="hangar"] { --hue: var(--ink); } /* yours, like the hold: no colour of its own */
#menu .row:first-of-type { border-top: none; }
#menu .row:hover, #menu .row.on { background: var(--sel); border-left-color: var(--tint); }
#menu .row.lit { border-left-color: var(--hue); background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 20%, transparent), transparent 70%); }
#menu .row.lit:hover, #menu .row.lit.on { background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 28%, transparent), var(--sel) 70%); }
#menu .row .key { font-family: var(--mono); font-size: 10px; line-height: 16px; height: 18px; text-align: center; color: var(--ink-dim); border: 1px solid var(--well-line); border-radius: 2px; }
#menu .row .icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; background: color-mix(in srgb, var(--hue) 13%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 50%, transparent); }
#menu .row .icon svg, .win .bar .svc svg { width: 22px; height: 22px; fill: none; stroke: var(--tint); stroke-width: 2.6; stroke-linejoin: miter; }
#menu .row.lit .icon { background: var(--hue); border-color: var(--hue); }
#menu .row.lit .icon svg { stroke: #17150a; stroke-width: 3; }
#menu .row .what { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
#menu .row .state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
#menu .row .note { font-size: 10.5px; letter-spacing: 0.4px; color: var(--ink-dim); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu .row.lit .note { color: var(--ink); }
/* quantities, drawn: hull points as pips (lost ones in blood), jumps in range as chart diamonds */
#menu .row .pips, #menu .row .jumps { display: flex; gap: 3px; flex: none; }
#menu .row .pips i { width: 7px; height: 12px; border-radius: 1px; background: var(--ink); }
#menu .row .pips i.lost { background: none; outline: 1px solid var(--blood); outline-offset: -1px; }
#menu .row .jumps i { width: 10px; height: 10px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--tint); }
/* Something waits for you here: a solid chip in the row's colour. Yellow is the NPC's — work. */
#menu .row .mark { display: flex; align-items: center; justify-content: center; flex: none; min-width: 18px; height: 18px; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1; color: #17150a; background: var(--hue); border-radius: 2px; }
/* a screen's bar carries its service's icon and colour, so you know where you are without reading */
.win .bar .svc { display: flex; --tint: color-mix(in srgb, var(--hue, var(--ink)) 72%, var(--ink)); margin-right: -4px; }
.win .bar .svc svg { width: 16px; height: 16px; stroke-width: 3; }
#modal-box.screen-npc { --hue: var(--quest); } #modal-box.screen-repair { --hue: var(--blood); }
#modal-box.screen-workshop { --hue: var(--svc-workshop); } #modal-box.screen-bank { --hue: var(--svc-bank); } #modal-box.screen-shipyard, #modal-box.screen-hold { --hue: var(--svc-shipyard); }
#modal-box.screen-registry { --hue: var(--svc-registry); }

/* the registry's form: two fields in a row, plain wells, the price line under them */
.fields { display: grid; grid-template-columns: 1fr 96px; gap: 10px; padding: 8px 0 4px; }
.fields label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.fields input {
  width: 100%; padding: 7px 9px; font-family: var(--ui); font-size: 13px; color: var(--ink); background: var(--well); border: 1px solid var(--well-line); border-radius: 2px; outline: none;
}
.fields input:focus { border-color: var(--ink); }
.fields input.tag { font-family: var(--mono); text-transform: uppercase; letter-spacing: 2px; }
.roster .item .founder { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tint, var(--ink)); margin-left: 8px; }
.roster .item .off b { color: var(--ink-dim); font-weight: 400; }

/* ---------- screens: one modal at a time ---------- */
#modal { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: rgba(13,10,16,0.5); }
#modal-box { display: flex; flex-direction: column; width: min(560px, 92vw); max-height: 84vh; }
#modal-box.screen-workshop { width: min(660px, 94vw); } #modal-box.screen-shipyard { width: min(780px, 94vw); }
#modal-box .body { padding: 12px 14px 14px; overflow-y: auto; }
.who { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; }
.who .portrait { width: 64px; height: 64px; flex: none; background: var(--well); border: 1px solid var(--well-line); border-radius: 2px; }
.who .name { font-size: 14px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.who .role { font-size: 10.5px; letter-spacing: 0.6px; color: var(--ink-dim); margin-top: 1px; }
.who .line { font-size: 12px; line-height: 1.45; font-style: italic; margin-top: 5px; }
.tabs { display: inline-flex; border: 1px solid var(--well-line); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.tabs .tab { font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; color: var(--ink-dim); background: none; border: none; border-left: 1px solid var(--well-line); border-bottom: 2px solid transparent; padding: 6px 18px 4px; }
.tabs .tab:first-child { border-left: none; }
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.on { color: var(--ink); background: var(--sel); border-bottom-color: var(--ink); }

/* Rows, not cards: what it is, what to do, the facts — and at the right, the button. */
.rows .item { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--glass-line); }
.rows .item:first-child { border-top: none; }
.rows .item b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.rows .item.blocked b { color: var(--ink-dim); font-weight: 400; }
/* What to do: the one line a quest row is read for, led by the yellow that means work. */
.rows .item .objective { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-top: 4px; }
.rows .item .objective::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--quest); border: 1px solid #17150a; }
.rows .item .tag { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px; color: var(--ink-dim); margin-top: 4px; }
.rows .item .missing { font-size: 11px; letter-spacing: 0.4px; color: var(--ink-dim); margin-top: 6px; }
.rows .item p, .rows .item .hint { grid-column: 1 / 3; font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); margin-top: 7px; max-width: 62ch; }
.rows .item .hint { color: var(--ink); }
.rows .item .buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rows .item.wide .buttons { grid-column: 1 / 3; justify-content: flex-start; margin-top: 9px; }
.rows button, .bench .foot button {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  color: var(--btn-ink); background: var(--btn); border: 1px solid var(--btn); border-bottom: 2px solid var(--btn-edge); border-radius: 2px; padding: 8px 16px 7px;
}
.rows button:hover, .bench .foot button:hover { background: var(--bone); border-color: var(--bone); border-bottom-color: var(--btn-edge); }
.rows button:active, .bench .foot button:active { border-bottom-width: 1px; margin-top: 1px; }
.rows button:focus-visible, .bench .foot button:focus-visible, #menu .row:focus-visible, .tabs .tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.empty, .purse-line { padding: 10px 0 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--ink-dim); }
.hull { display: flex; gap: 6px; margin: 2px 0 6px; }
/* the hangar: a row per stored ship — its silhouette, what is fitted, its hull points, the way in */
.rows.hangar .item { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; column-gap: 14px; }
.rows.hangar .item .hull-pic { display: flex; justify-content: center; }
.rows.hangar .item:not(:has(.hull-pic)) { grid-template-columns: 1fr auto; }
.hull.small { gap: 3px; margin: 7px 0 0; } .hull.small .pip { width: 16px; height: 7px; }
.unarmed { margin-left: 10px; vertical-align: 1px; font-weight: 400; padding: 1px 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--blood); border: 1px solid var(--blood); border-radius: 2px; }
.bench .rig { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--ink); margin: 2px 0 8px; }
.hull .pip { width: 40px; height: 14px; background: var(--ink); border-radius: 1px; transform: none; box-shadow: none; }
.hull .pip.lost { background: none; outline: 1px solid var(--blood); outline-offset: -1px; opacity: 0.8; }

/* Inventory: what is fitted, and what is in the hold. Wells, a tone below the glass. */
.inventory-grid { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; }
.inventory-grid .group { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 16px; position: relative; min-height: 72px; }
.inventory-grid .group::before { content: attr(data-label); position: absolute; top: 0; left: 0; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); }
.slot {
  position: relative; width: 56px; height: 56px; background: var(--well); border: 1px solid var(--well-line); border-radius: 2px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slot svg { width: 30px; height: 30px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linejoin: miter; }
.slot .n { position: absolute; right: 4px; bottom: 2px; font-family: var(--mono); font-size: 10px; color: var(--ink); }
.slot.fitted { border-color: var(--ink-dim); }
.inventory-grid .hold-grid { display: grid; grid-template-columns: repeat(5, 56px); align-content: start; }
/* Fitting is a drag: loose gear is carried from the hold onto the slot it belongs in. */
.slot.draggable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.slot.lifted { opacity: 0.25; }
.slot.ghost { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; cursor: grabbing; background: var(--glass-menu); border: 2px solid var(--ink); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.slot.ghost::before { content: none; }
.slot.wanted, .slot.accepts { border: 1px dashed var(--ink); opacity: 1; animation: wanted 0.9s steps(2) infinite; }
.slot.accepts.over { background: var(--btn); animation: none; }
.slot.accepts.over svg { stroke: var(--btn-ink); }
.slot.refuses { opacity: 0.2; }
@keyframes wanted { 50% { box-shadow: 0 0 0 3px var(--sel); } }
.slot.empty { background: none; border-style: dashed; opacity: 0.6; cursor: default; }
.hold-grid .slot.empty { opacity: 0.35; }
.slot.empty::after { content: attr(data-slot); font-size: 7.5px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-dim); }
.slot.gear.loose::before { content: "fit"; position: absolute; left: 3px; top: 1px; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- state: enough, not enough, units ---------- */
.ok { color: var(--ok-ink); } .short { color: var(--short-ink); } .units { color: var(--amber); }
.lbl { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); }
.chip { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px; padding: 2px 6px; margin: 0 4px 3px 0; background: var(--well); border: 1px solid var(--well-line); border-radius: 2px; }
.purse { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.purse .units { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.purse .units::before, .ctx .mi .units::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.3em; border-radius: 50%; background: currentColor; vertical-align: 0.12em; }

/* A price, one line per material: banked here (solid), then the hold (hatched), against what is
   needed — green when the two cover it, blood when they do not. */
.mat { --c: var(--short-ink); display: grid; grid-template-columns: 22px 64px 1fr auto; align-items: center; gap: 2px 8px; padding: 5px 0; }
.mat.covered { --c: var(--ok-ink); }
.mat svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linejoin: miter; }
.mat .name { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.mat .num { font-family: var(--mono); font-size: 12px; color: var(--c); }
.mat .from { grid-column: 3 / 5; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3px; color: var(--ink-dim); }
.mat-bar { display: flex; height: 8px; background: var(--well); border: 1px solid var(--well-line); border-radius: 1px; overflow: hidden; }
.mat-bar i { display: block; height: 100%; }
.mat-bar .banked { background: var(--c); }
.mat-bar .held { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); }
/* a condition that is not a material: a solid green square, or a hollow blood one */
.check { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 11px; }
.check::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--ok-ink); }
.check.no { color: var(--short-ink); }
.check.no::before { background: none; outline: 1px solid var(--short-ink); outline-offset: -1px; }

/* ---------- the bench: workshop and shipyard — pick on the left, read on the right ---------- */
.bench { display: grid; grid-template-columns: 290px 1fr; gap: 16px; }
.screen-shipyard .bench { grid-template-columns: auto 1fr; }
.bench .detail { min-width: 0; padding-left: 16px; border-left: 1px solid var(--glass-line); }
.bench .hero { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bench .hero .slot { width: 72px; height: 72px; flex: none; cursor: default; }
.bench .hero .slot svg { width: 44px; height: 44px; }
.bench .hero .hull-pic { display: flex; justify-content: center; min-width: 72px; }
.bench .hero b { display: block; font-size: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 5px; }
.bench .detail p { font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); margin: 6px 0 10px; }
.bench .detail > .lbl { display: block; margin-top: 8px; }
.bench .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-line); }
.bench .foot .lbl { min-width: 0; line-height: 1.5; }
.bench .foot .missing { flex: none; max-width: 60%; font-size: 11.5px; color: var(--short-ink); text-align: right; }
.bench .foot button { font-size: 12px; padding: 10px 26px 9px; }
/* A tile: a box that knows whether you can have it. Green edge, wash and pip: now. Blood edge, dim glyph: not yet. */
.tiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; width: 64px; padding: 0; font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.tile .slot { width: 64px; height: 56px; }
.tile .cost, .hull-tile .cost { font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px; margin-top: 3px; }
.tile.can .slot, .hull-tile.can { border-color: color-mix(in srgb, var(--ok) 60%, transparent); background: color-mix(in srgb, var(--ok) 11%, var(--well)); }
.tile.cannot .slot, .hull-tile.cannot { border-color: color-mix(in srgb, var(--short) 45%, transparent); }
.tile.cannot svg, .hull-tile.cannot svg { opacity: 0.55; }
.tile .pip, .hull-tile .pip { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 1px; transform: none; box-shadow: none; background: var(--ok); }
.tile.cannot .pip, .hull-tile.cannot .pip { background: none; outline: 1px solid var(--short); outline-offset: -1px; }
.tile .bp { position: absolute; left: 4px; top: 2px; font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: color-mix(in srgb, var(--svc-workshop) 80%, var(--ink)); }
.tile.on .slot, .hull-tile.on { border: 2px solid var(--ink); background: var(--sel); }
.tile:focus-visible .slot, .hull-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tiers { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 0 10px; align-items: start; }
.tiers .col { display: flex; flex-direction: column; gap: 6px; }
.tiers .col .lbl { margin-bottom: -1px; }
.hull-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 84px; height: 100px; padding: 0 0 5px; font: inherit; color: inherit; background: var(--well); border: 1px solid var(--well-line); border-radius: 2px; cursor: pointer; }
.hull-tile .hull-pic { position: absolute; left: 0; right: 0; top: 5px; height: 64px; display: flex; align-items: center; justify-content: center; }
.hull-tile .nm { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.hull-tile.mine { border-color: var(--ink); } .hull-tile.mine .cost { color: var(--ink-dim); }
/* A hull's number against the one you fly: ink up to the smaller of the two, then the difference —
   solid green where this hull is better, hatched blood where it is worse — and a tick at yours. */
.stat { display: grid; grid-template-columns: 58px 1fr 52px 40px; align-items: center; gap: 8px; padding: 3px 0; font-family: var(--mono); font-size: 11px; }
.stat .k { font-family: var(--ui); font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim); }
.stat .track { position: relative; height: 8px; background: var(--well); border: 1px solid var(--well-line); border-radius: 1px; }
.stat .track i, .stat .track em, .stat .track u { position: absolute; top: 0; bottom: 0; }
.stat .track i { left: 0; background: var(--ink); }
.stat .track em.better { background: var(--ok-ink); }
.stat .track em.worse { background: repeating-linear-gradient(135deg, var(--short-ink) 0 2px, transparent 2px 4px); }
.stat .track u { top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--svc-shipyard); }
.stat .v, .stat .d { text-align: right; white-space: nowrap; } .stat .d { font-size: 10.5px; color: var(--ink-dim); }
.stat .d.better { color: var(--ok-ink); } .stat .d.worse { color: var(--short-ink); }
@media (max-width: 700px) { .bench, .screen-shipyard .bench { grid-template-columns: 1fr; } .bench .detail { padding-left: 0; border-left: none; } }

/* ---------- the click menu: what you can do with a box, at the box ----------
   A small window of its own, denser than the screen it lies on; its controls are rows that
   fill like a button under the pointer. It lives in #modal (a window clips), in fixed coordinates. */
.ctx {
  position: fixed; z-index: 12; min-width: 200px; max-width: 290px; padding: 0 0 4px; overflow: hidden;
  color: var(--ink); font-family: var(--ui); background: rgba(70,74,80,0.93); border: 1px solid var(--glass-rim); border-radius: 3px;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.ctx .hd { padding: 7px 10px 7px; margin-bottom: 4px; background: var(--glass-bar); border-bottom: 1px solid var(--glass-line); }
.ctx .hd b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.ctx .hd span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3px; color: var(--ink-dim); margin-top: 2px; }
.ctx p { padding: 3px 10px 6px; font-size: 11px; line-height: 1.45; color: var(--ink-dim); }
.ctx .mi {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; width: 100%; padding: 7px 10px; cursor: pointer; text-align: left;
  font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: none; border: none;
}
.ctx .mi .amt { font-family: var(--mono); font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; }
.ctx .mi .amt.dim { font-family: var(--ui); font-size: 10px; font-weight: 400; text-transform: none; color: var(--ink-dim); }
.ctx .mi:hover, .ctx .mi:focus-visible { color: var(--btn-ink); background: var(--btn); outline: none; }
.ctx .mi:hover .amt, .ctx .mi:focus-visible .amt { color: var(--btn-ink); }
.ctx .note { padding: 5px 10px 4px; font-size: 10.5px; line-height: 1.4; color: var(--ink-dim); }
.ctx .mi + .note { margin-top: 3px; border-top: 1px solid var(--glass-line); }
.slot.open { background: var(--sel); border: 2px solid var(--ink); }
.slot .price { position: absolute; left: 4px; top: 2px; font-family: var(--mono); font-size: 9px; color: var(--amber); }
.inventory-grid .stock-grid { display: grid; grid-template-columns: repeat(3, 56px); align-content: start; }

/* A mount's trigger: which mouse button fires it. Docked, a click flips it. */
.slot .trigger { position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; padding: 0; font-family: var(--mono); font-size: 9px; line-height: 13px; color: var(--ink); background: var(--well); border: 1px solid var(--well-line); border-radius: 2px; cursor: pointer; }
.slot .trigger:disabled { cursor: default; opacity: 0.6; }
.slot .trigger:hover:not(:disabled) { background: var(--ink); color: #000; }
.hold-grid.accepts { outline: 1px dashed var(--ink); outline-offset: 4px; }
.hold-grid.accepts.over { background: var(--sel); }
.hold-grid.refuses { opacity: 1; }
.bank-grid .slot.empty { opacity: 0.35; }
.bank-grid .slot { cursor: grab; }
/* The ship's silhouette, with its hitbox, to scale; and its numbers after the fit. */
.ship-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.ship-numbers { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; line-height: 1.7; color: var(--ink-dim); }
.hull-pic svg { display: block; }
.hull-pic path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; }
.hull-pic .hitbox { fill: none; stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 3 3; }

#map { z-index: 8; cursor: default; }

/* The new-pilot intro's captions: the poster voice, unsteady. The black behind them is the
   renderer's; position, tremble, glitches and echo offsets are driven per frame (intro.js). */
#intro { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#intro-line {
  position: absolute; left: 50%; top: 50%; width: max-content; max-width: min(1100px, 84vw); transform: translate(-50%, -50%);
  font-family: var(--display); font-size: clamp(21px, 2.9vw, 40px); line-height: 1.5; letter-spacing: 0.26em; text-transform: uppercase;
  text-align: center; text-wrap: balance; color: var(--bone); opacity: 0;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 0 0 22px #000;
  will-change: transform, opacity;
}
#intro-line.low { top: 72%; }
#intro-line::before, #intro-line::after { content: attr(data-text); position: absolute; inset: 0; text-shadow: none; }
#intro-line::before { transform: translate(var(--e1x, 0), var(--e1y, 0)); opacity: var(--e1o, 0); clip-path: var(--e1c, none); }
#intro-line::after { transform: translate(var(--e2x, 0), 2px); opacity: var(--e2o, 0); }
#intro-hint {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; opacity: 0; transition: opacity 1.2s;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #5b564f;
}
#intro-hint b { color: var(--ash); font-weight: 400; }

#toast {
  position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--display); font-size: 28px; letter-spacing: 6px; text-transform: uppercase;
  text-shadow: 3px 3px 0 #000; opacity: 0; transition: opacity 0.5s; white-space: nowrap;
}
#toast.show { opacity: 1; transition: none; }
#keys { position: absolute; left: 26px; bottom: 18px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #5b564f; }
#keys b { color: var(--ash); }

/* ---------- chat: the log above the key hints, and the line you type on ----------
   HUD, not window: mono on the world, hard shadows, no glass. Lines fade once said unless
   the line is focused, when the whole recent log stands. */
#chat { position: absolute; left: 26px; bottom: 44px; width: min(440px, 60vw); pointer-events: none; }
#chat-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; max-height: 40vh; overflow: hidden; }
#chat-log .line { font-size: 12px; line-height: 1.35; color: var(--bone); text-shadow: 2px 2px 0 #000; opacity: 1; transition: opacity 1.2s; word-break: break-word; }
#chat-log .line.faded { opacity: 0; }
#chat.typing #chat-log .line.faded { opacity: 0.85; transition: none; }
#chat-log .line .who { color: var(--ash); letter-spacing: 1px; text-transform: uppercase; font-size: 10px; margin-right: 6px; }
#chat-log .line .ch { color: var(--ash); font-size: 10px; letter-spacing: 1px; margin-right: 6px; }
#chat-log .line.party .ch, #chat-log .line.corp .ch { color: var(--bone); }
#chat-log .line.note { color: var(--ash); font-style: italic; }
#chat-line {
  display: block; width: 100%; margin-top: 6px; padding: 5px 8px; pointer-events: auto;
  font-family: var(--mono); font-size: 12px; color: var(--bone); background: rgba(13,10,16,0.55); border: 1px solid transparent; border-radius: 0;
  outline: none; opacity: 0; transition: opacity 0.3s;
}
#chat-line::placeholder { color: #5b564f; }
#chat.typing #chat-line { opacity: 1; border-color: var(--ash); }

/* ---------- party panel: under the tracker; a row per mate ---------- */
#party:not(:empty) { margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(242,234,216,0.12); }
#party .mate { margin-bottom: 8px; color: var(--ash); }
#party .mate .m-name { font-family: var(--display); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--bone); text-shadow: 2px 2px 0 #000; }
#party .mate .m-name .lvl { font-size: 11px; color: var(--ash); margin-left: 6px; letter-spacing: 1px; }
#party .mate .m-where { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 1px; }
#party .mate .m-pips { display: inline-flex; gap: 3px; margin-top: 3px; }
#party .mate .m-pips i { display: block; width: 12px; height: 6px; background: var(--bone); box-shadow: 2px 2px 0 #000; }
#party .mate .m-pips i.lost { background: none; outline: 1px solid var(--blood); outline-offset: -1px; opacity: 0.7; }
#party .mate .m-pips i.shield { width: 7px; background: none; outline: 1px solid var(--bone); outline-offset: -1px; }
#party .mate .m-pips i.shield:not(.lost) { background: var(--bone); }
#party .mate .m-pips i.shield.lost { outline-color: var(--ash); opacity: 0.5; }

/* ---------- an invite: a small window at the top, join or decline ---------- */
#invite { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); width: min(400px, 90vw); pointer-events: auto; }
#invite .body { padding: 10px 14px 12px; }
#invite .item b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
#invite .item .tag { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px; color: var(--ink-dim); margin-top: 4px; }
#debug { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 6; font-size: 11px; line-height: 1.5; color: var(--ash); text-align: center; pointer-events: none; }

/* Something in the client threw. Say so, loudly, instead of freezing. */
#fault {
  position: fixed; left: 0; right: 0; top: 84px; margin: 0 auto; width: fit-content; z-index: 20; max-width: min(760px, 90vw);
  padding: 9px 14px; border-color: var(--blood); color: var(--ink);
  font-size: 12px; letter-spacing: 0.4px; line-height: 1.6; text-align: center;
}