@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("../fonts/sharetechmono.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #000;
  --fg: #e8fbff;
  --dim: #7fa6b3;
  --cyan: #29f0ff;
  --magenta: #ff2fd0;
  --accent: var(--cyan);
  --panel: rgba(2, 10, 16, 0.78);
  --line: rgba(41, 240, 255, 0.45);
  --mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Orbitron", "Share Tech Mono", sans-serif;
  --safe-t: calc(env(safe-area-inset-top, 0px) + 16px);   /* (the page starts under the status bar's black strip; the top HUD sits a little clear of it) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Landscape phones: the notch / Dynamic Island sits on the left or right edge. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--mono); overflow: hidden; }
/* No double-tap zoom anywhere (iOS zoomed the page on quick taps, e.g. at the grey controls when adrift: CALL A TOW);
   touch-action intersects down the tree, so every element gets it; pinch zoom stays. */
html, body { touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#map { user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
a { color: var(--accent); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#locks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* ---- buttons ---- */
.btn {
  font: 500 13px/1 var(--display); letter-spacing: .14em; color: var(--accent); background: rgba(0, 0, 0, .55);
  border: 1px solid var(--line); padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; text-transform: uppercase; transition: background .15s, color .15s, box-shadow .15s;
}
.btn.on { background: var(--accent); color: #000; box-shadow: 0 0 18px var(--accent); }
/* Touch browsers keep :hover on the last tapped element, which made toggles look stuck on. */
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--accent); color: #000; box-shadow: 0 0 18px var(--accent); } }
.btn:disabled { opacity: .7; cursor: wait; }
.btn.stalled { animation: blink 1s steps(2) infinite; border-color: var(--accent); }
.btn.big { font-size: 18px; padding: 16px 34px; border-width: 2px; }
.btn.ghost { border-color: transparent; color: var(--dim); font-size: 12px; }
.btn.small { font-size: 12px; padding: 8px 10px; min-width: 38px; min-height: 34px; }
/* The mute toggle: a speaker, with sound waves while it plays, crossed out while muted. */
.btn.icon { padding: 0 8px; }
/* HUD buttons carry an icon too, shown instead of the words on a phone held upright. */
.hud-buttons .ico { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.icon .spk { fill: currentColor; }
.btn.icon.muted .wave, .btn.icon:not(.muted) .x { display: none; }
.btn.icon .tap { display: none; }
.btn.icon.stalled .tap { display: inline; margin-left: 6px; }    /* iOS paused the audio: say so in words (no hover titles on touch) */

/* ---- splash ---- */
#splash {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at center, rgba(0, 30, 40, .55), rgba(0, 0, 0, .92) 70%); z-index: 20; transition: opacity .8s;
}
#splash.fade { opacity: 0; pointer-events: none; }
/* The galaxy's splash: the key art (art/splash.jpg, tools/splash_image.py), a framed marquee painting shown whole on black,
   the name set over its lower part in marquee lettering, the buttons under it. */
#splash.art { background: #000; padding: 0; }
#splash.art .splash-inner {
  position: relative; width: min(100vw, calc(100dvh * 2912 / 1632)); aspect-ratio: 2912 / 1632;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 8.5%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .35) 92%, rgba(0, 0, 0, 0)),
              url("/static/img/splash.webp") center / 100% 100% no-repeat;
}
/* Marquee lettering: heavy slanted capitals, a sunset from yellow to red, an extruded light-blue edge (drop shadows, as text-shadow
   doesn't sit under clipped type). */
.splash-game {
  font: 900 calc(min(100vw, 100dvh * 2912 / 1632) * .062)/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 3.2%;
  transform: skewX(-10deg); padding: 0 .2em;
  background: linear-gradient(to bottom, #fff7a8 0%, #ffd23a 30%, #ff8a1e 58%, #ff3d2e 82%, #c8102e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .03em 0 #bfeaf7) drop-shadow(0 .05em 0 #5bb7d6) drop-shadow(0 .07em 0 #1f6f93) drop-shadow(0 .1em .12em rgba(0, 0, 0, .85));
}
#splash.art .splash-buttons { flex-direction: row; justify-content: center; }
@media (orientation: landscape) and (max-height: 520px) {
  :root { --safe-t: env(safe-area-inset-top, 0px); }   /* (no height to spare, and no status bar) */
}
.splash-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Landscape only (2026-11-09): held upright, a prompt to turn the device on its side covers everything (the splash too:
   ENTER waits behind it), and the game pauses (main.js). It shows the splash's key art across the width, the name set on it as the
   splash has it, and under it the way to turn the device. */
#rotate { display: none; }
@media (orientation: portrait) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    padding: 24px 0; background: #000; color: var(--fg); text-align: center;
  }
  #rotate .rot-art { --aw: min(100vw, 720px); width: var(--aw); aspect-ratio: 2912 / 1632; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .35) 92%, rgba(0, 0, 0, 0)),
                url("/static/img/splash.webp") center / 100% 100% no-repeat; }
  #rotate .rot-game { font: 900 calc(var(--aw) * .068)/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; transform: skewX(-10deg); padding: 0 .2em;
    background: linear-gradient(to bottom, #fff7a8, #ffd23a 30%, #ff8a1e 58%, #ff3d2e 82%, #c8102e); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 .03em 0 #bfeaf7) drop-shadow(0 .05em 0 #5bb7d6) drop-shadow(0 .07em 0 #1f6f93) drop-shadow(0 .1em .12em rgba(0, 0, 0, .85)); }
  #rotate svg { width: 84px; height: 84px; stroke: var(--cyan); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  #rotate p { margin: 0 24px; font: 600 15px/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; }
}

/* ---- HUD ---- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l)); pointer-events: none; z-index: 5;
}
#hud > * { pointer-events: auto; }
.hud-buttons { flex: none; margin-left: auto; }
.hud-buttons { display: flex; gap: 6px; }

@keyframes blink { 50% { opacity: .35; } }

/* ---- lock-on reticles (positioned from JS) ---- */
.lock { --c: var(--cyan); --s: 44px; position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.lock > div {
  position: absolute; width: var(--s); height: var(--s); left: calc(var(--s) / -2); top: calc(var(--s) / -2);
  background:
    linear-gradient(var(--c), var(--c)) top left / 12px 2px, linear-gradient(var(--c), var(--c)) top left / 2px 12px,
    linear-gradient(var(--c), var(--c)) top right / 12px 2px, linear-gradient(var(--c), var(--c)) top right / 2px 12px,
    linear-gradient(var(--c), var(--c)) bottom left / 12px 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px 12px,
    linear-gradient(var(--c), var(--c)) bottom right / 12px 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px 12px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px var(--c)); animation: lock-in .25s ease-out;
}
.lock span { position: absolute; top: calc(var(--s) / -2 - 16px); left: 0; transform: translateX(-50%); font: 10px var(--display); color: var(--c); letter-spacing: .1em; white-space: nowrap; }
.lock.hover > div { opacity: .5; animation: none; }
/* The target's name and distance, under its brackets. */
.lock.tgt span { top: calc(var(--s) / 2 + 4px); font: 700 12px/1.25 var(--mono); letter-spacing: 0; white-space: pre; text-align: center; text-shadow: 0 0 3px #000, 0 0 3px #000; }
/* The cockpit's lead marker (where to point to hit: a small diamond) and edge arrows (off screen: the way to turn). */
.lock.lead > div { background: none; border: 2px solid var(--c); transform: rotate(45deg); animation: none; }
.lock.edge > div { background: none; width: 0; height: 0; left: -9px; top: -9px; border: 9px solid transparent; border-left: 16px solid var(--c);
  transform: rotate(var(--r, 0rad)); transform-origin: 9px 9px; animation: none; }
.lock.edge span { top: -30px; }
@keyframes lock-in { from { transform: scale(2.2) rotate(45deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- map / index overlay (also the crawlable content) ---- */
#map {
  position: fixed; inset: 0; overflow: auto; z-index: 15; background: rgb(0, 4, 8);   /* (opaque: nothing of the pause menu or the game through it) */
  padding: calc(60px + var(--safe-t)) calc(16px + var(--safe-r)) 60px calc(16px + var(--safe-l));
}
#map > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.map-bar { position: fixed; top: calc(14px + var(--safe-t)); right: calc(16px + var(--safe-r)); z-index: 1; display: flex; gap: 10px; max-width: none !important; }
.map-modes { display: flex; }
.map-modes .btn + .btn { border-left: 0; }
.map-modes .btn[aria-pressed="true"] { background: var(--accent); color: #000; }
/* Overhead chart mode: the list gives way to a live chart of the system under the search box. */
.map-chart { display: none; }
#map.chart { overflow: hidden; }
#map.chart > :not(.map-bar, #map-search, .map-chart) { display: none; }
/* Every part has its own place, nothing over the chart: the key and zoom in a strip above it, the sector's challenges beside it
   (over it on a tall or narrow screen), the radio's ticker below. */
#map.chart .map-chart {
  display: grid; position: fixed; left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(54px + var(--safe-b));
  top: calc(130px + var(--safe-t)); max-width: none; border: 1px solid var(--line); background: rgba(0, 10, 16, .6);
  grid-template: "side key tools" auto "side view view" minmax(0, 1fr) / auto minmax(0, 1fr) auto;
}
.map-chart canvas { grid-area: view; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; touch-action: none; cursor: grab; }
@media (max-width: 700px) {
  #map.chart .map-chart { grid-template: "key tools" auto "side side" auto "view view" minmax(0, 1fr) / minmax(0, 1fr) auto; }
  #map.chart .chart-sector { width: auto; max-height: 34vh; border-right: 0; border-bottom: 1px solid var(--line); }
}
/* A wide screen: the search on the bar's row. */
@media (min-width: 701px) {
  #map.chart #map-search { position: fixed; top: calc(14px + var(--safe-t)); left: calc(16px + var(--safe-l)); right: calc(382px + var(--safe-r)); width: auto; max-width: none; margin: 0; box-sizing: border-box; }
  #map.chart .map-chart, #map.galaxy .map-galaxy { top: calc(66px + var(--safe-t)); }
}
/* Galaxy mode (the warp drive): the sector grid in place of everything but the bar. */
.map-galaxy { display: none; }
#map.galaxy { overflow: hidden; }
#map.galaxy > :not(.map-bar, .map-galaxy) { display: none; }
#map.galaxy .map-galaxy {
  display: flex; flex-direction: column; position: fixed; left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(54px + var(--safe-b));
  top: calc(80px + var(--safe-t)); border: 1px solid var(--line); background: rgba(0, 10, 16, .6);
}
.map-galaxy canvas { display: block; width: 100%; flex: 1; min-height: 0; touch-action: manipulation; }
.galaxy-info { flex: none; padding: 8px 10px; display: flex; gap: 10px; align-items: center; justify-content: space-between;
  font-size: 12px; letter-spacing: .08em; color: var(--text, #dfefff); }
.galaxy-info-text { flex: 1; min-width: 0; }
.chart-tools { grid-area: tools; display: flex; gap: 6px; padding: 8px; }
.chart-sector { grid-area: side; width: 320px; box-sizing: border-box; overflow: auto; padding: 6px 8px; border-right: 1px solid var(--line); font-size: 12px; margin: 0; }
.chart-sector summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; min-height: 28px; align-items: center; }
.chart-sector-body { display: grid; gap: 6px; padding-top: 6px; }
.chart-key { grid-area: key; align-self: center; padding: 8px 10px; font-size: 12px; letter-spacing: .15em; color: var(--dim); pointer-events: none; }
.chart-key b { color: var(--accent); font-weight: normal; margin-left: 8px; }
.chart-key b:first-child { margin-left: 0; }
.chart-key b.hostile { color: #ff3b3b; }

/* ---- BOARD (leaderboards) and FACTIONS (standings) ---- */
#board, #factions, #settings {
  position: fixed; inset: 0; overflow: auto; z-index: 15; background: rgb(0, 4, 8);
  padding: calc(60px + var(--safe-t)) calc(16px + var(--safe-r)) 60px calc(16px + var(--safe-l));
}
#board > :not(.map-bar), #factions > :not(.map-bar), #settings > :not(.map-bar) { max-width: 980px; margin-left: auto; margin-right: auto; }
/* FACTIONS, after a CRPG faction ledger: emblems down the side, each with a standing bar and its tier written
   on it; the chosen one in detail (big emblem and bar, a text box, how to win its favour). */
.fac-heading { text-align: center; margin-bottom: 18px; }
.fac-layout { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 16px; align-items: start; }
.fac-list, .fac-detail { border: 1px solid var(--line); background: rgba(0, 10, 16, .6); box-shadow: inset 0 0 24px rgba(41, 240, 255, .06); }
.fac-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.fac-list button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 3px 10px; align-items: center;
  text-align: left; cursor: pointer; font: 12px var(--mono); color: var(--fg); background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .08); padding: 7px 9px;
}
.fac-list button .fac-emblem { grid-row: 1 / 3; }
.fac-list button .fac-bar { grid-column: 2 / 4; }
.fac-list .fac-name { color: var(--fc); font: 700 12px/1.2 var(--display); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-list button[aria-pressed="true"] { border-color: var(--fc); background: rgba(41, 240, 255, .08); box-shadow: 0 0 10px rgba(41, 240, 255, .15); }
.fac-list button:hover { border-color: var(--fc); }
.fac-trend { font: 800 15px/1 var(--display); min-width: 1ch; text-align: center; }
.fac-trend.up { color: #7dff6b; } .fac-trend.down { color: #ff8a3d; }
.fac-emblem {
  --s: 38px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--fc); background: radial-gradient(circle, rgba(255, 255, 255, .08), rgba(0, 0, 0, .6) 70%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--fc) 30%, transparent);
}
.fac-emblem svg { width: 58%; height: 58%; fill: none; stroke: var(--fc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fac-emblem.big { --s: 96px; border-width: 3px; }
.fac-bar { --tc: var(--dim); position: relative; display: block; height: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; }
.fac-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--tc); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc) 70%, transparent)); }
.fac-bar em { position: relative; display: block; text-align: center; font: normal 11px/14px var(--mono); color: #fff; letter-spacing: .08em; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.fac-bar b { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: rgba(255, 255, 255, .35); }
.fac-bar.t-hostile { --tc: #ff8a3d; } .fac-bar.t-unfriendly { --tc: #ffc46b; } .fac-bar.t-neutral { --tc: #7fa6b3; }
.fac-bar.t-friendly { --tc: #b8ff8a; } .fac-bar.t-allied { --tc: #7dff6b; }
.fac-tier { white-space: nowrap; }
.t-hostile { color: #ff8a3d; } .t-unfriendly { color: #ffc46b; } .t-neutral { color: var(--dim); } .t-friendly { color: #b8ff8a; } .t-allied { color: #7dff6b; }
.fac-detail { padding: 18px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fac-head { display: flex; gap: 16px; align-items: center; }
.fac-meter { flex: 1; min-width: 0; }
.fac-title { font: 700 17px/1.3 var(--display); margin: 0 0 10px; letter-spacing: .04em; }
.fac-who { color: var(--fc); }
.fac-meter .fac-bar { height: 22px; }
.fac-meter .fac-bar em { font-size: 13px; line-height: 20px; }
.fac-scale { margin: 6px 0 0; color: var(--dim); font-size: 12px; letter-spacing: .1em; }
.fac-box { border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); padding: 12px 16px; max-height: 46vh; overflow: auto; font-size: 13px; line-height: 1.6; }
.fac-box p { margin: 0 0 10px; }
.fac-info { color: var(--fg); }
.fac-go { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.fac-war { color: #ffc46b; }
.fac-sub { font: 500 12px/1 var(--display); letter-spacing: .3em; color: var(--magenta); text-transform: uppercase; margin-top: 4px !important; }
.fac-rel { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; font-size: 12px; }
.fac-rel li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted rgba(255, 255, 255, .1); }
.fac-other { color: var(--fc); }
.fac-note { color: var(--dim); font-size: 12px; margin-bottom: 0 !important; }
.fac-gain { align-self: center; min-width: min(280px, 100%); text-align: center; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); padding: 10px 22px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.fac-gain b { font: 700 12px/1.6 var(--display); letter-spacing: .06em; color: var(--accent); }
.board-title { font: 800 clamp(20px, 5vw, 32px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; text-shadow: 0 0 12px var(--cyan); }
.board-tabs { margin-bottom: 18px; }
.board-view td.skills { white-space: normal; color: var(--dim); font-size: 12px; min-width: 14em; }
.board-view td.co { color: var(--fg); opacity: .8; }
.board-stats { color: var(--dim); font-size: 12px; margin: 0 0 18px; }
.board-sort { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.board-sort span { font: 500 12px/1 var(--display); letter-spacing: .3em; color: var(--magenta); margin-right: 6px; }
.board-wrap { overflow-x: auto; }
.board-view table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board-view th { text-align: left; font: 500 12px/1 var(--display); letter-spacing: .2em; color: var(--magenta); text-transform: uppercase; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.board-view th button { font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.board-view th button.on { color: var(--accent); }
.board-view th button[data-dir]::after { content: attr(data-dir); margin-left: 4px; }
.board-view td { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); white-space: nowrap; }
.board-view .num { text-align: right; font-variant-numeric: tabular-nums; }
.board-view th.num { text-align: right; }
.board-view .pos { color: var(--dim); width: 2.5em; }
.board-view td.name { color: var(--fc, var(--fg)); font-weight: bold; }
.board-view td.fac { color: var(--fc, var(--dim)); }
.board-view td.rank { color: var(--accent); }
.board-view td.now, .board-view td.cls { color: var(--dim); text-transform: capitalize; }
.board-view td.now { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-view tbody tr { cursor: pointer; }
.board-view tbody tr:hover, .board-view tbody tr:focus-visible { background: rgba(41, 240, 255, .08); outline: none; }
.board-view tbody tr.current { background: rgba(41, 240, 255, .14); }
.board-view tbody tr.current td.pos::before { content: "▸"; color: var(--accent); }
#map .map-name { font: 800 clamp(26px, 6vw, 44px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; text-shadow: 0 0 12px var(--cyan); }
#map h2 { font: 500 13px/1 var(--display); letter-spacing: .35em; color: var(--magenta); text-transform: uppercase; margin: 46px 0 18px; }
#map h3 { font: 800 16px/1.3 var(--display); margin: 28px 0 4px; cursor: pointer; }
#map h3:hover { color: var(--accent); }
#map p { line-height: 1.6; font-size: 14px; }
.map-headline { color: var(--accent); }
.map-meta { color: var(--dim); font-size: 12px; }
.map-leaves { list-style: none; padding: 0; margin: 10px 0 0; border-left: 1px solid var(--line); }
.map-leaves h3 { margin: 0 0 2px !important; font-size: 14px !important; }
.map-section[data-stop] h2 { cursor: pointer; }
.map-leaves li { padding: 8px 0 8px 14px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.map-leaves li:hover { background: rgba(41, 240, 255, .06); }
.map-leaves strong { font-weight: normal; display: block; }
.map-desc { display: block; color: var(--dim); }
.map-foot { margin-top: 60px; color: var(--dim); font-size: 12px; letter-spacing: .2em; }


.map-skills .skill + .skill::before { content: " · "; color: var(--dim); }

/* ---- a stop's own page: the stop leads the MAP ---- */
.map-focus { border-left: 2px solid var(--accent); padding: 4px 0 4px 16px; margin: 0 0 30px; }
#map .map-focus h1 { font: 800 clamp(22px, 5vw, 34px)/1.15 var(--display); margin: 4px 0 8px; text-shadow: 0 0 12px var(--cyan); }
.map-body { white-space: pre-line; }
#map a.go { color: inherit; text-decoration: none; }
#map a.go:hover { color: var(--accent); }

button.link { font: inherit; letter-spacing: inherit; color: var(--dim); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* Exploration (Rez's "analyzation"), bottom right above the area bar. */
#analysis {
  position: fixed; right: calc(16px + var(--safe-r)); bottom: calc(54px + var(--safe-b)); z-index: 5; pointer-events: none;
  font: 500 10px/1 var(--display); letter-spacing: .3em; color: var(--dim);
}
#analysis b { color: var(--accent); font-weight: 800; letter-spacing: .1em; }

/* SUBSPACE RADIO: the news ticker along the bottom, just above the area bar. */
#ticker {
  position: fixed; left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); z-index: 5; height: 22px;
  display: flex; align-items: center; overflow: hidden; pointer-events: none;
  background: rgba(2, 10, 16, .72); border-top: 1px solid rgba(41, 240, 255, .25); border-bottom: 1px solid rgba(41, 240, 255, .25);
}
.ticker-tag { flex: none; padding: 0 10px; font: 500 9px/22px var(--display); letter-spacing: .25em; color: #000; background: var(--magenta); }
/* Flying: the radio joins the cockpit's green phosphor terminal (VT220): green on black, the mono face, a soft glow. */
body.flying #ticker { background: rgba(0, 14, 4, .9); border-color: rgba(57, 255, 106, .38); }
body.flying .ticker-tag { font: 700 11px/20px var(--mono); letter-spacing: .2em; color: #39ff6a; background: rgba(0, 14, 4, .95);
  border: 1px solid rgba(57, 255, 106, .6); text-shadow: 0 0 6px rgba(57, 255, 106, .8); box-shadow: inset 0 0 8px rgba(57, 255, 106, .18); }
/* (Report #46: flying, the radio's bigger: the lower corners' controls sit above it.) */
body.flying #ticker { height: 30px; }
body.flying .ticker-tag { font-size: 13px; line-height: 28px; }
body.flying .ticker-track { font-size: 15px; line-height: 30px; }
.ticker-view { position: relative; flex: 1; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker-track { position: absolute; left: 0; top: 0; white-space: nowrap; font: 12px/22px var(--mono); will-change: transform; }
.tk { padding-right: 46px; color: #b9c9d0; }
.tk::before { content: "◆ "; opacity: .6; }
.tk-combat { color: #ff8a7a; } .tk-faction { color: #29f0ff; } .tk-mission { color: #8dff7d; } .tk-rank { color: #ffd23f; }
.tk-war { color: #ffb36b; font-weight: bold; } .tk-patrol { color: #9fc5ff; } .tk-navy { color: #cfe3ff; } .tk-report { color: #b9c9d0; }
.tk-alien { color: #a6ff4d; font-weight: bold; } .tk-station { color: #ffe08a; }

/* Announcements: a band across the top that flashes in and fades. */
#banner {
  --c: var(--cyan); position: fixed; left: 0; right: 0; top: 34%; z-index: 8; pointer-events: none; text-align: center;
  font: 800 clamp(14px, 3.2vw, 26px)/1.2 var(--display); letter-spacing: .3em; color: #fff; text-transform: uppercase;
  padding: 14px 16px; opacity: 0; text-shadow: 0 0 16px var(--c), 0 0 4px var(--c);
  border-top: 1px solid var(--c); border-bottom: 1px solid var(--c); background: rgba(0, 0, 0, .55);
}
#banner.on { animation: banner 3s ease-out forwards; }
@keyframes banner {
  0% { opacity: 0; transform: scaleY(0.2); }
  8% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* MAP search and visited ticks. */
#map-search {
  display: block; width: 100%; box-sizing: border-box; margin: 0 auto 24px; padding: 12px 14px; font: 16px var(--mono);   /* 16px: iOS zooms in on smaller inputs */
  color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); outline: none;
}
#map-search:focus { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); }
#map .seen > :first-child::before, #map a.seen::before { content: "✓ "; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #banner.on { opacity: 1; }
}
@media (max-width: 700px) {
  .fac-layout { grid-template-columns: 1fr; }
  .fac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .fac-list .fac-emblem { --s: 30px; }
  .fac-list .fac-name { white-space: normal; font-size: 12px; letter-spacing: 0; }
  .fac-detail { padding: 14px; }
  .fac-emblem.big { --s: 64px; }
  .fac-box { max-height: none; }
  /* Narrow board: the less important columns go (they can still be sorted on). */
  .board-view .opt { display: none; }
  .board-view td, .board-view th { padding: 7px 5px; }
  #map.chart .map-chart { top: calc(120px + var(--safe-t)); }
  .chart-key { display: none; }
  .ticker-tag { padding: 0 7px; letter-spacing: .15em; }
  .ticker-tag .long { display: none; }
  /* The progress readout sits just under the HUD. */
  #analysis { bottom: auto; top: calc(var(--hud-b, 100px) + 8px); }
}
/* Phones on their side: icon buttons. */
@media (orientation: landscape) and (max-height: 520px) {
  .hud-buttons { gap: 5px; }
  .hud-buttons .btn.small { padding: 0; min-width: 38px; width: 38px; }
  .hud-buttons .txt { display: none; }
  .hud-buttons .btn.small.stalled { width: auto; padding: 0 8px; }      /* TAP FOR SOUND stays readable */
  .hud-buttons .btn .ico { display: block; }
}

/* A jump: the view whites out as the drive spools, then the next sector's page loads. */
body.warping #gl { animation: warp-out 1.8s ease-in forwards; }
@keyframes warp-out { 0% { filter: none; } 60% { filter: brightness(1.6) saturate(0.6); } 100% { filter: brightness(6) saturate(0); } }
@media (prefers-reduced-motion: reduce) { body.warping #gl { animation-duration: 0.6s; } }
.fac-strategy { margin: 4px 0; font-size: 12px; color: var(--dim, #9fb3c0); }

/* The FACTIONS screen's relationship web: the chosen faction in the middle, the ones that matter most to it round it. */
.fac-web { position: relative; height: 330px; margin: 4px 0; }
.fac-web svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fac-web-line { opacity: .85; }
.fac-web-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fac-web-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 50%; }
.fac-web-node:hover .fac-emblem, .fac-web-node:focus-visible .fac-emblem { box-shadow: 0 0 14px var(--fc); }
.fac-web-label { position: absolute; top: var(--y); transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; line-height: 1.25; max-width: 30%; pointer-events: none; }
.fac-web-label.right { left: calc(var(--x) + 26px); text-align: left; }
.fac-web-label.left { right: calc(100% - var(--x) + 26px); text-align: right; }
.fac-web-label b { color: var(--fc); font-family: "Orbitron", sans-serif; font-size: 12px; letter-spacing: .04em; }
@media (max-width: 640px) { .fac-web { height: 300px; } .fac-web-label { font-size: 10px; max-width: 34%; } }

/* ---- your ship: the cockpit (flight HUD) ---- */
body.flying #analysis { display: none !important; }
body.flying #gl { cursor: crosshair; }
#cockpit { position: fixed; inset: 0; z-index: 6; pointer-events: none; font: 12px/1.3 var(--mono); color: var(--fg); }
#cockpit button, #cockpit input { pointer-events: auto; }
/* The nose reticle: moved each frame to where the guns point (cockpit.js gunsight()); the aim-help ring round it, its
   radius the guns' arc by the fire-control cards (--rr). */
.ck-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.ck-ring::before { content: ""; position: absolute; left: calc(var(--rr, 40px) * -1); top: calc(var(--rr, 40px) * -1); width: calc(var(--rr, 40px) * 2); height: calc(var(--rr, 40px) * 2);
  border: 1px dashed rgba(57, 255, 106, .35); border-radius: 50%; }
.ck-cross { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; will-change: transform; border: 1px solid rgba(232, 246, 255, .7); border-radius: 50%; }
.ck-cross::before, .ck-cross::after { content: ""; position: absolute; background: rgba(232, 246, 255, .7); }
.ck-cross::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.ck-cross::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.ck-top { position: absolute; top: calc(var(--hud-b, 60px) + 8px); left: calc(16px + var(--safe-l)); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }   /* (upper left: the ship's status, then the target stack flush under it) */
/* One panel: the target's card, and under it on a job the job's own row: always there, amber like the NAV mark it goes with. Its name, when
   the target's something else, targets the objective. */
.ck-panel { display: flex; flex-direction: column; width: var(--tgt-w); }
.ck-obj { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; color: #ffd27a; background: rgba(2, 10, 16, .7); padding: 2px 4px 2px 0; border: 1px solid var(--line); border-left: 2px solid #ffd27a; pointer-events: auto; }
.ck-tgt:not(.hidden) + .ck-obj { border-top: 0; }
.ck-obj-go { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; background: none; border: 0; color: inherit; padding: 4px 8px; cursor: pointer; }
.ck-obj-go:disabled { cursor: default; color: inherit; }
.ck-obj-go b { font: 700 12px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-obj-go span { font: 12px/1.3 var(--mono); opacity: .9; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ck-obj-act { flex: none; pointer-events: auto; white-space: nowrap; }
#cockpit .ck-obj-act.waiting, #cockpit .ck-act.waiting { color: #000; background: #ffd27a; border-color: #ffd27a; font-weight: 700; }   /* (a button waiting on you: player.js actionHere()) */
#cockpit .ck-abort { flex: none; background: none; border: 0; color: #ff8a3d; font: 700 12px/1.3 var(--mono); letter-spacing: .04em; padding: 4px 6px; cursor: pointer; white-space: nowrap; pointer-events: auto; }
.ck-obj.new { animation: ck-obj-new 1.6s ease-out; }
@keyframes ck-obj-new { 0%, 35% { background-color: rgba(255, 210, 122, .45); box-shadow: 0 0 14px rgba(255, 210, 122, .7); } 100% { background-color: rgba(2, 10, 16, .7); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ck-obj.new { animation: none; } }
/* The target: the watch panel's look (collapsed: name, then its status line), a live picture of it on top. */
.ck-top { --tgt-w: min(300px, calc(100vw - 32px - var(--safe-l) - var(--safe-r))); }
.ck-tgt { --pip-h: 110px; --name-h: 44px; width: var(--tgt-w); background: linear-gradient(var(--panel) 0 var(--name-h), transparent var(--name-h) calc(var(--name-h) + var(--pip-h)), var(--panel) calc(var(--name-h) + var(--pip-h)));   /* (the picture isn't dimmed) */ border: 1px solid var(--line); border-right: 3px solid var(--tc, var(--accent));
  padding: 0 12px 10px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 0 30px rgba(0, 0, 0, .6); }
.ck-pip { height: var(--pip-h); margin: 0 -12px 4px; border-bottom: 1px solid var(--line); background: transparent; }
.ck-tgt-name { font: 800 16px/1.25 var(--display); letter-spacing: 0; overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; text-align: left; }
/* The header: ‹ name distance › ✕ (a tap on the name: more, or less). */
.ck-tgt-head { display: flex; align-items: center; gap: 4px; height: var(--name-h); flex: none; }
#cockpit .ck-tgt-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1px; background: none; border: 0; padding: 2px 0; color: inherit; cursor: pointer; pointer-events: auto; }
/* The strip: the layer's tag, the hull, the system chips, one row. */
.ck-tgt-strip { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.ck-tgt-strip .ck-bar { flex: 1; min-width: 30px; }
.ck-tgt-dist { font: 12px/1.2 var(--mono); text-align: left; }
.ck-tgt-name span { display: inline-block; }
/* A long name scrolls back and forth, ticker-tape style. */
.ck-tgt-name.scroll span { animation: tgt-tape var(--dur, 6s) linear infinite; }   /* (to the left, then back to the start: never reversing) */
@keyframes tgt-tape { 0%, 18% { transform: none; } 88%, 100% { transform: translateX(var(--shift)); } }
@media (prefers-reduced-motion: reduce) { .ck-tgt-name.scroll span { animation: none; } .ck-tgt-name { text-overflow: ellipsis; } }
.ck-tgt { position: relative; }
.ck-tgt-x { position: absolute; right: 2px; top: 2px; z-index: 1; }
.ck-tgt-head { padding-right: 22px; }   /* (room for ✕ in the corner) */
/* Open or closed: the name and ✕ on top, ‹ › on the picture's lower corners. */
.ck-tgt .ck-tgt-nav { position: absolute; top: calc(var(--name-h) + var(--pip-h) - 30px); z-index: 1; }
.ck-tgt .ck-tgt-nav.prev { left: 6px; }
.ck-tgt .ck-tgt-nav.next { right: 8px; }
/* Previous / next target: on the picture's bottom corners. */
.ck-tgt-nav { flex: none; width: 24px; height: 24px; padding: 0; pointer-events: auto; cursor: pointer;
  font: 700 16px/1 var(--mono, monospace); color: var(--tc, #29f0ff); background: rgba(0, 0, 0, .55); border: 1px solid var(--tc, #29f0ff); border-radius: 50%; }
.ck-tgt-row { display: flex; gap: 6px; margin-top: 4px; }
.ck-tgt-act { pointer-events: auto; }
.ck-tgt-status.hail { color: #ffd27a; -webkit-line-clamp: 8; }
/* Looking for work: FIND WORK on the job line (the BOARD, QUICK MATCH on top). */
/* Giving up a job: a second tap (the ✕ turns into GIVE UP? for a few seconds). */
#cockpit .ck-abort.armed { color: #fff; background: rgba(255, 90, 90, .35); box-shadow: inset 0 0 0 1px #ff5a5a; }
.ck-tgt-status { font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--accent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ck-tgt-status::before { content: "▸ "; }
.ck-tgt-status:empty { display: none; }
.ck-tgt-info { color: var(--dim); font-size: 12px; }
.ck-bar { display: block; height: 5px; background: #0b1a22; overflow: hidden; }
.ck-bar.wide { width: 160px; }
.ck-bar i { display: block; height: 100%; background: #7dff6b; transform-origin: left; }
#ck-tgt-hull { background: var(--hp, #7dff6b); }   /* (its hull: green, amber, red as it goes) */
#ck-hull.low i { background: #ff8a3d; }
/* The lean controls: a floating stick (drag anywhere), BOOST and STOP, FIRE, the context button. */
.ck-cross.hot { border-color: #ff3b3b; box-shadow: 0 0 14px #ff3b3b; }
.ck-cross.hot::before, .ck-cross.hot::after { background: #ff3b3b; }
.ck-stick { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.ck-stick::before { content: ""; position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(232, 246, 255, .35); background: rgba(41, 240, 255, .05); }
.ck-stick i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cyan); background: rgba(41, 240, 255, .18); box-shadow: 0 0 12px rgba(41, 240, 255, .5); }
.ck-x { pointer-events: auto; background: none; border: 0; color: #ff8a7a; font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer; min-width: 28px; min-height: 28px; }
.ck-sysd { display: block; max-width: 150px; white-space: normal; font: 12px/1.3 var(--mono); letter-spacing: .04em; color: #ff8a3d; }
.ck-status { position: relative; display: flex; gap: 12px; align-items: flex-end;
  background: rgba(2, 10, 16, .7); padding: 8px 12px; border: 1px solid rgba(41, 240, 255, .25); }
.ck-read { display: flex; flex-direction: column; gap: 3px; min-width: 64px; }
.ck-read b { font: 800 24px/1 var(--display); }
.ck-mode { font: 500 12px/1.2 var(--display); letter-spacing: .18em; color: var(--accent); }
.ck-bars { display: flex; flex-direction: column; gap: 5px; }
.ck-bar.shield i { background: #6bb8ff; }
.ck-cr { font: 500 12px/1.2 var(--display); letter-spacing: .15em; color: #ffd23f; }
/* Speed: no throttle (the flight computer sets it). BOOST (round: a ring for the boost left, else the recharge, --p 0..1) and STOP (held:
   the brake) beside it, above FIRE. */
.ck-speedctl { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
/* Nanobots and shield batteries: two small buttons over STOP / BOOST, the count in each. */
.ck-kit { display: flex; gap: 6px; pointer-events: auto; }
#cockpit .ck-kitb { min-width: 0; padding: 4px 8px; font-size: 12px; letter-spacing: .1em; touch-action: none; }
#cockpit .ck-kitb b { font-weight: 700; margin-left: 4px; }
#cockpit #ck-nano { color: #7dff6b; border-color: rgba(125, 255, 107, .55); }
#cockpit #ck-batt { color: #7fc8ff; border-color: rgba(127, 200, 255, .55); }
#cockpit .ck-kitb:disabled { opacity: .35; }
.ck-boost { --p: 0; position: relative; width: 72px; height: 72px; border-radius: 50%; padding: 0; font-size: 12px; letter-spacing: .12em; touch-action: none; }
.ck-boost::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--vt, #9ffcff) calc(var(--p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.ck-boost.ready { box-shadow: 0 0 14px rgba(57, 255, 106, .55); }
.ck-boost:disabled { opacity: .35; }
.ck-stop { width: 56px; height: 56px; border-radius: 50%; padding: 0; font-size: 12px; letter-spacing: .04em; touch-action: none; }
.ck-stop.on { background: rgba(255, 138, 61, .25); border-color: #ff8a3d; color: #ffb27a; }
.ck-right { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(76px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ck-act { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cockpit .ck-act.ck-prog { background: linear-gradient(to right, rgba(61, 255, 122, .38) calc(var(--prog) * 100%), rgba(0, 0, 0, .55) 0); cursor: default; }   /* (the Siege Anchor changing over) */
.ck-attack { width: 96px; height: 96px; border-radius: 50%; padding: 0; color: #ff8a7a; border-color: #ff8a7a; touch-action: none; font-size: 12px; letter-spacing: .1em; }
#cockpit .ck-attack.hot { box-shadow: 0 0 16px rgba(255, 90, 90, .6); }
#cockpit .ck-attack.on { background: rgba(255, 90, 90, .22); }
/* A pilot's ship targeted: its systems (engines, weapons, shields: what's left of each); ATTACK aims at the lit one. */
.ck-tgt-sys { flex: none; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }   /* (a readout: the targeting computer chooses, report #31) */
.ck-tgt-sys.hidden { display: none; }
.ck-sys { position: relative; font-size: 12px; letter-spacing: .06em; padding: 3px 6px 5px; opacity: .75; }
/* (What's left of the system: a bar along the chip's foot.) */
.ck-sys i { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; background: currentColor; transform-origin: left; transform: scaleX(var(--left, 1)); }
/* (Chips stay one line each, one compact row: the theme's button minimums would stack them a row apiece.) */
#cockpit .ck-sys, #cockpit .ck-wpn { line-height: 1.3; min-height: 0; min-width: 0; white-space: nowrap; }
#cockpit .ck-tgt-sys { flex-wrap: nowrap; gap: 3px; }
#cockpit .ck-sys.on { opacity: 1; color: #ffd27a; border-color: #ffd27a; background: rgba(255, 210, 122, .14); text-shadow: none; box-shadow: 0 0 8px rgba(255, 210, 122, .5); }
#cockpit .ck-sys.out { color: #ff5a5a; border-color: #ff5a5a; }
#cockpit .ck-sys.locked { opacity: .55; }   /* (no advanced targeting computer fitted) */
/* The weapon chips (more than one weapon fitted): ATTACK fires the lit one. */
.ck-weapons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 230px; pointer-events: auto; }   /* (above the kit, STOP / BOOST and FIRE) */
.ck-wpn { font-size: 12px; letter-spacing: .08em; padding: 4px 8px; opacity: .7; }
#cockpit .ck-wpn.on { opacity: 1; box-shadow: 0 0 10px rgba(255, 210, 122, .5); color: #ffd27a; border-color: #ffd27a; background: rgba(255, 210, 122, .14); text-shadow: none; }
/* Wide screens: the status box level with the HUD's buttons (their top), in the room to their left. */
@media (min-width: 960px) { .ck-top { top: calc(14px + var(--safe-t)); } }
/* Alerts while flying: lower left, above the radio, clear of the target stack (upper left) and FIRE / BOOST (lower right). */
body.flying #banner { top: calc(14px + var(--safe-t)); bottom: auto; left: 0; right: 0; width: fit-content; max-width: min(520px, 46vw); margin: 0 auto;
  text-align: center; font-size: clamp(12px, 1.5vw, 15px); letter-spacing: .12em; padding: 8px 12px; border: 1px solid var(--c); }
@media (max-width: 700px) {
  .ck-top { flex-direction: column; }
  /* A phone: the target smaller under the job line, the status above WATCH, BOOST and STOP above FIRE. */
  .ck-top { --tgt-w: min(250px, calc(100vw - 32px)); }
  .ck-tgt { --pip-h: 70px; padding: 0 10px 8px; gap: 3px; }
  .ck-act { max-width: calc(100vw - 48px - 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* (clear of the target stack) */
  .ck-tgt-status, .ck-tgt-info { font-size: 12px; }
  .ck-tgt-name { font-size: 13px; }
  .ck-status { padding: 6px 8px; max-width: calc(100vw - 32px); }
  .ck-read b { font-size: 20px; }
  .ck-bar.wide { width: 110px; }
}
/* Landscape on a phone (short and wide): the target window compact (not
   over BOOST), a smaller BOOST and FIRE, the status row along the bottom beside WATCH. */
@media (orientation: landscape) and (max-height: 520px) {
  .ck-top { top: calc(14px + var(--safe-t)); gap: 6px; }
  .ck-top { --tgt-w: 230px; }
  .ck-tgt { --pip-h: 64px; padding: 0 10px 6px; gap: 2px; }   /* (64: ‹ › clear of ✕ on the picture) */
  .ck-tgt-name { font-size: 13px; }
  .ck-tgt-status { font-size: 12px; -webkit-line-clamp: 1; }
  .ck-tgt-status.hail { -webkit-line-clamp: 5; }
  .ck-tgt-info { font-size: 12px; }
  .ck-tgt-act { margin-top: 2px; padding: 4px 10px; }
  .ck-right { bottom: calc(52px + var(--safe-b)); gap: 6px; }
  .ck-boost { width: 60px; height: 60px; font-size: 12px; letter-spacing: .04em; }
  .ck-stop { width: 46px; height: 46px; font-size: 12px; letter-spacing: 0; }
  .ck-attack { width: 76px; height: 76px; }
  /* (Short screen: the weapon chips a compact column left of STOP, not up over the HUD; the target
     window's system chips one compact row, no distance line; the status box clear of the target window.) */
  #cockpit .ck-weapons { position: absolute; right: calc(100% + 8px); bottom: 94px; gap: 3px; }
  #cockpit .ck-wpn { padding: 2px 6px; font-size: 12px; letter-spacing: .02em; }
  #cockpit .ck-sys { padding: 2px 5px; font-size: 12px; letter-spacing: 0; }
  #cockpit .ck-tgt-act { min-height: 0; padding: 3px 10px; }
  .ck-act { max-width: 40vw; padding: 6px 10px; }
  .ck-status { padding: 4px 8px; }
  .ck-read b { font-size: 18px; }
  .ck-bar.wide { width: 100px; }
}

/* ---- your ship: the hangar ---- */
#hangar { position: fixed; inset: 0; overflow: auto; z-index: 15; background: rgba(0, 4, 8, .95);
  padding: calc(60px + var(--safe-t)) calc(16px + var(--safe-r)) 90px calc(16px + var(--safe-l)); }
#hangar > :not(.map-bar):not(.hg-foot) { max-width: 980px; margin-left: auto; margin-right: auto; }
.hg-credits { font: 700 13px/34px var(--display); letter-spacing: .12em; color: #ffd23f; margin-right: auto; }
.hg-tabs { margin-bottom: 16px; }
.hg-tabs [aria-pressed="true"] { background: var(--accent); color: #000; }
.hg-note { color: var(--dim); font-size: 12px; margin: 4px 0 14px; }
.hg-mark { margin-top: 14px; }
.hg-mark-line { margin: 4px 0; font-size: 13px; }
.hg-mark-line.big { text-shadow: 0 0 8px currentColor; }
.hg-mark-work { margin: 2px 0; font-size: 12px; color: var(--dim); }
.hg-mark-work.grudge { color: #ffc04d; }   /* (a pilot who holds a grudge: amber, never the hostile red) */
.hg-head h3 { font: 800 18px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
#hangar h4 { font: 500 12px/1 var(--display); letter-spacing: .25em; color: var(--magenta); text-transform: uppercase; margin: 22px 0 10px; }
.hg-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hg-slot { position: relative; min-height: 84px; border: 1px dashed rgba(41, 240, 255, .35); padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.hg-slot.on { border-style: solid; border-color: var(--accent); box-shadow: 0 0 12px rgba(41, 240, 255, .4); }
.hg-skind { font: 500 12px/1 var(--display); letter-spacing: .12em; color: var(--dim); }
.hg-empty { color: var(--dim); opacity: .6; margin: auto; }
.hg-x { position: absolute; top: 2px; right: 2px; background: none; border: 0; color: #ff8a7a; font-size: 18px; cursor: pointer; }
.hg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.hg-card { --rc: #9ca3af; text-align: left; font: 12px/1.3 var(--mono); color: var(--fg); background: rgba(0, 10, 16, .7); border: 1px solid var(--rc);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--rc) 25%, transparent); padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.hg-card.small { padding: 5px 6px; gap: 2px; }
.hg-card.fitted { opacity: .55; }
.hg-card.unknown { cursor: default; filter: grayscale(1); opacity: .5; }
.hg-card .hg-icon { color: var(--rc); font-size: 14px; }
.hg-cname { font: 700 12px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.hg-meta { color: var(--dim); font-size: 12px; }
.hg-bar { display: block; height: 4px; background: #0b1a22; }
.hg-bar i { display: block; height: 100%; background: var(--rc); transform-origin: left; }
.hg-detail { grid-column: 1 / -1; border: 1px solid var(--line); padding: 10px 12px; background: rgba(0, 10, 16, .8); }
.hg-detail p { margin: 4px 0; }
/* The 3D views (preview.js): a stage with its caption; the selected card's beside its text (above it on a phone). */
.hg-detail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.hg-stage { position: relative; height: 170px; border: 1px solid var(--rc, var(--line)); background: radial-gradient(ellipse at 50% 70%, rgba(57, 255, 106, .08), transparent 70%); }
.hg-stage.big { height: 230px; margin: 6px 0 10px; }
.hg-view { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }   /* (it spins sideways: a vertical swipe still scrolls) */
.hg-view:active { cursor: grabbing; }
.hg-stage-cap { position: absolute; left: 8px; top: 6px; font: 500 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--rc, var(--accent)); pointer-events: none; }
.hg-stage-hint { position: absolute; right: 8px; bottom: 6px; font-size: 12px; color: var(--dim); pointer-events: none; }
.hg-hull { cursor: pointer; }
.hg-hull.sel { outline: 1px dashed var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { .hg-detail { grid-template-columns: 1fr; } .hg-stage.big { height: 190px; } }
.hg-stats { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 12px; }
.hg-stats dt { color: var(--dim); }
.hg-stats dd { margin: 0; color: var(--accent); word-break: break-all; }
.hg-stats dd.bad { color: #ff8a3d; }
.hg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.hg-name { font: 14px var(--mono); color: var(--fg); background: #000; border: 1px solid var(--line); padding: 7px 8px; user-select: text; -webkit-user-select: text; }
.hg-hulls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; }
/* The market mockup (after OpenLoot's): filters at the side, listings as cards in a grid. */
.mk-preview { color: #ffd23f; font: 500 12px/1.4 var(--display); letter-spacing: .12em; border: 1px dashed rgba(255, 210, 63, .5); padding: 8px 10px; margin: 0 0 12px; }
.mk-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 14px; }
.mk-stat { display: flex; flex-direction: column; gap: 2px; }
.mk-stat span { color: var(--dim); font-size: 12px; }
.mk-stat b { font: 700 15px/1.2 var(--display); }
.mk-stats .btn { margin-left: auto; }
.mk-main { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-side { display: flex; flex-direction: column; gap: 10px; }
.mk-side input, .mk-side select { width: 100%; background: #000; color: var(--fg); border: 1px solid var(--line); font: 12px var(--mono); padding: 7px 8px; }
.mk-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mk-card { --rc: #9ca3af; display: flex; flex-direction: column; background: rgba(0, 10, 16, .78); border: 1px solid var(--rc); overflow: hidden;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--rc) 22%, transparent); }
/* The system's picture fills the top (a still, preview.js), its level on it; then the name, what it is, the seller; the
   price and BUY along the foot. One read, top to bottom, like the COLLECTION's cards. */
.mk-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 72%); }
.mk-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-art i { position: absolute; left: 8px; top: 7px; font: 700 12px/1 var(--display); font-style: normal; letter-spacing: .1em; color: #000; background: var(--rc); padding: 3px 6px; }
.mk-info { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 6px; }
.mk-name { font: 700 12px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.mk-rarity { color: var(--rc); font-size: 12px; }
.mk-seller { color: var(--dim); font-size: 12px; }
.mk-buy { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding: 6px 10px 8px; border-top: 1px solid var(--line); }
.mk-price { color: #ffd23f; font: 700 12px/1 var(--display); }
@media (max-width: 700px) { .mk-main { grid-template-columns: 1fr; } .mk-side { display: grid; grid-template-columns: 1fr 1fr; } .mk-side input { grid-column: 1 / -1; } .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hg-hull { border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.hg-hull.on { border-color: var(--accent); box-shadow: 0 0 12px rgba(41, 240, 255, .35); }
.hg-hull p { margin: 0; }
.hg-hull .btn { margin-top: auto; align-self: flex-start; }
.hg-work { color: var(--dim); font-size: 12px; padding-left: 18px; }
.hg-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
.hg-ledger th { text-align: left; font: 500 12px/1 var(--display); letter-spacing: .14em; color: var(--magenta); padding: 6px; border-bottom: 1px solid var(--line); }
.hg-ledger td { padding: 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.mono { font-family: var(--mono); }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.hg-json { margin: 0; white-space: pre-wrap; color: var(--dim); font-size: 12px; user-select: text; -webkit-user-select: text; }
.hg-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: flex-end;
  padding: 10px calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l)); background: rgba(0, 6, 10, .96); border-top: 1px solid var(--line); }
.hg-check { color: #7dff6b; font-size: 12px; margin-right: auto; }
.hg-check.bad { color: #ff8a3d; }

/* ---- your ship's screens: a green phosphor terminal (VT220) ----
   The hangar and the cockpit's readouts take the old terminal's look: green on black, one monospaced face, a soft glow
   and faint scanlines. Rarity keeps its colours (the cards' edges); hostile red and the shield's blue stay as signals. */
#hangar, #cockpit {
  --vt: #39ff6a; --vt-dim: #23a84a; --vt-line: rgba(57, 255, 106, .38); --vt-bg: rgba(0, 14, 4, .9);
  --fg: var(--vt); --accent: var(--vt); --cyan: var(--vt); --dim: var(--vt-dim); --line: var(--vt-line); --panel: var(--vt-bg); --magenta: var(--vt);
  --display: var(--mono);
  color: var(--vt); text-shadow: 0 0 5px rgba(57, 255, 106, .55);
}
#hangar { background: rgb(0, 8, 2); }   /* (opaque: nothing of the watch panel through it) */
#hangar::after, #cockpit .ck-tgt::after, #cockpit .ck-status::after, #cockpit .ck-obj::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
#hangar::after { position: fixed; z-index: 1; }
#cockpit .ck-tgt, #cockpit .ck-obj, #cockpit .ck-status { position: relative; }
/* The status box heads the column: the target card's width, its bars stretched to fill it, a little space under it. */
#cockpit .ck-top > .ck-status { box-sizing: border-box; width: var(--tgt-w); max-width: none; margin-bottom: 8px; }
#cockpit .ck-top > .ck-status .ck-bars { flex: 1; min-width: 0; }
#cockpit .ck-top > .ck-status .ck-bar.wide { width: 100%; }
#cockpit .ck-status, #cockpit .ck-obj { background: var(--vt-bg); }
#cockpit .ck-cross, #cockpit .ck-cross::before, #cockpit .ck-cross::after { border-color: rgba(57, 255, 106, .75); }
#cockpit .ck-cross::before, #cockpit .ck-cross::after { background: rgba(57, 255, 106, .75); }
#cockpit .ck-cross.hot, #cockpit .ck-cross.hot::before, #cockpit .ck-cross.hot::after { border-color: #39ff6a; }
#cockpit .ck-cross.hot::before, #cockpit .ck-cross.hot::after { background: #39ff6a; }
#cockpit .ck-cross.hot { border-width: 2px; box-shadow: 0 0 14px #39ff6a; }   /* (a shot will land: brighter, the same green) */
#cockpit .ck-cross.warn, #cockpit .ck-cross.warn::before, #cockpit .ck-cross.warn::after { border-color: #ffc04d; }
#cockpit .ck-cross.warn::before, #cockpit .ck-cross.warn::after { background: #ffc04d; }
#cockpit .ck-cross.warn { box-shadow: 0 0 14px #ffc04d; }   /* (it'd land on someone you aren't fighting: it costs standing) */
#cockpit .ck-stick::before { border-color: var(--vt-line); background: rgba(57, 255, 106, .05); }
#cockpit .ck-stick i { border-color: var(--vt); background: rgba(57, 255, 106, .16); box-shadow: 0 0 12px rgba(57, 255, 106, .5); }
#cockpit .ck-cr, #hangar .hg-credits, #hangar .mk-price, #hangar .mk-preview { color: var(--vt); border-color: var(--vt-line); }
#cockpit .ck-bar { background: #04200c; }
#cockpit .ck-attack { color: #ff8a7a; border-color: #ff8a7a; text-shadow: 0 0 6px rgba(255, 138, 122, .6); }
#hangar .btn[aria-pressed="true"], #hangar .btn.on, #hangar .hg-tabs [aria-pressed="true"] { background: var(--vt); color: #000; font-weight: 700; text-shadow: none; transition: none; }
#hangar input, #hangar select { color: var(--vt); border-color: var(--vt-line); background: #000; }
#hangar h3, #hangar h2, #hangar h1, #hangar #hangar-title { color: var(--vt); text-shadow: 0 0 10px rgba(57, 255, 106, .7); }
#hangar .hg-check.bad { color: #ff8a3d; }

/* The BOARD's missions: QUICK MATCH (the best jobs for your ship as it is), then filters to dig deeper. */
.board-quick { margin: 0 0 14px; border: 1px solid var(--line); padding: 10px 12px; background: rgba(0, 10, 16, .6); }
/* The sector's challenges (challenges.js): a row each, its progress bar, its pay. */
.bq-chal { display: grid; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.bq-chal .bq-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bq-ch { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; font-size: 12px; }
.bq-ch.done { opacity: .6; }
.bq-chtext { min-width: 0; }
.bq-chbar { height: 5px; background: rgba(125, 255, 107, .15); overflow: hidden; }
.bq-chbar i { display: block; height: 100%; background: #7dff6b; transform-origin: left; }
.bq-chpay { font-size: 12px; color: var(--dim, #8aa); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .bq-ch { grid-template-columns: minmax(0, 1fr) 60px; } .bq-chpay { grid-column: 1 / -1; } }
.bq-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.bq-head b { font: 600 12px/1 var(--display); letter-spacing: .2em; color: var(--accent); }
.bq-head span, .bq-none { color: var(--dim); font-size: 12px; margin: 0; }
.bq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.bq-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 8px 10px; }
.bq-card.call { border-left-color: #ff5a5a; }
.bq-job { font: 700 12px/1.3 var(--mono); }
.bq-what { font-size: 12px; color: var(--fg); }
.bq-why { font-size: 12px; color: var(--dim); }
.bq-card .btn { align-self: flex-start; margin-top: 4px; }
.board-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.board-filter input, .board-filter select { background: #000; color: var(--fg); border: 1px solid var(--line); font: 12px var(--mono); padding: 7px 8px; }
.board-filter .bf-q { flex: 1 1 220px; }
/* FACTIONS: HERE (those active in this system first, the rest dimmed) or ALL. */
.fac-here { margin-right: auto; }
.fac-list button.away { opacity: .45; }
.fac-here-tag { grid-column: 2 / 4; font-size: 12px; letter-spacing: .06em; color: var(--accent); }
/* Over the hangar: the BOARD, FACTIONS and MAP open on top of it (its MISSIONS button). */
#board, #factions, #map, #settings { z-index: 16; }
/* SETTINGS: a row per choice. */
.set-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.set-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-name { font: 600 14px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.set-note { grid-row: 2; color: var(--dim); font-size: 12px; }
.set-row .map-modes { grid-row: 1 / 3; grid-column: 2; }

/* ---- the BUG button (in the icon bar) and its report dialog ---- */
#bugdlg { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 4, 8, .7); padding: 16px; }
#bugdlg.hidden { display: none; }
.bug-box { width: min(520px, 100%); background: var(--panel); border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bug-box .board-title { margin: 0; }
.bug-note { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
#bug-text { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; font: 16px/1.4 var(--mono);   /* (16px: iOS Safari zooms in on a smaller field, and stays zoomed: issue #23) */ color: var(--fg); background: rgba(2, 10, 16, .9); border: 1px solid var(--line); padding: 8px; }
#bug-text:focus { outline: 1px solid var(--accent); }
.bug-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bug-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.bug-state { flex: 1; font-size: 12px; color: var(--accent); }

/* Review fixes (2026-11-03). */
/* The hangar's messages (installs, upgrades, purchases) show over it. */
/* The hangar: no alerts over it (its own messages go in its footer: hangar.js say()); the radio runs along the bottom
   of every screen, over the overlays, so the universe stays in view (the hangar's: just above its footer). */
body:has(#hangar:not(.hidden)) #banner { display: none; }
#ticker { z-index: 18; }
body:has(#hangar:not(.hidden)) #ticker { bottom: calc(64px + var(--safe-b)); background: rgba(0, 14, 4, .92); border-color: rgba(57, 255, 106, .38); }
body:has(#hangar:not(.hidden)) .ticker-tag { color: #000; background: #39ff6a; font-size: 12px; letter-spacing: .15em; }
#hangar { padding-bottom: 124px; }
#map, #board, #factions, #settings { padding-bottom: 80px; }
/* HULLS: the top (the 3D view, callsign, repairs, kit) holds still; only the list of hulls scrolls. */
#hangar.hg-pin { overflow: hidden; display: flex; flex-direction: column; }
#hangar.hg-pin > .hg-body { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
#hangar.hg-pin .hg-yard { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#hangar.hg-pin .hg-yard > :not(.hg-hulls) { flex: none; }
#hangar.hg-pin .hg-hulls { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-right: 4px; }
@media (max-height: 760px) { #hangar.hg-pin .hg-stage.big { height: 150px; } }
/* Flying: the alerts in the cockpit's green phosphor face. */
body.flying #banner { font-family: var(--mono); --c: #39ff6a; }
/* Disabled cockpit buttons aren't loading: not an hourglass. */
#cockpit .btn:disabled, #hangar .btn:disabled { cursor: not-allowed; }
/* Reduced motion: a long target name ends in an ellipsis (an inline span, so it can). */
@media (prefers-reduced-motion: reduce) { .ck-tgt-name span { display: inline; } }
/* Touch: the cockpit's small controls get a thumb-sized hit area. */
@media (pointer: coarse) {
  #cockpit .ck-tgt-nav { width: 32px; height: 32px; }
  #cockpit .ck-x { min-width: 32px; min-height: 32px; }
  #cockpit .ck-sys, #cockpit .ck-wpn, #cockpit .ck-tgt-act { min-height: 32px; }
  #cockpit .ck-obj-go { min-height: 44px; justify-content: center; }
  #cockpit .ck-abort { min-height: 44px; }
  #cockpit .ck-obj-act { min-height: 32px; }
  #hangar .hg-x { min-width: 32px; min-height: 32px; top: -4px; right: -4px; }
}
/* iOS Safari zooms in on any field under 16px (and stays zoomed): every field on a touch screen is 16px (issue #23). */
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* FACTIONS: your own standing with the faction, and a bribe to buy some back (docked). */
.fac-you { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.fac-you .fac-note { margin: 0; }
.fac-you .fac-note.bad { color: #ff8a3d; }

/* The law's claim on you, in the status box: a fine due (amber), wanted (red). */
#cockpit .ck-law { font: 700 12px/1.4 var(--mono); letter-spacing: .1em; color: #ffc857; }
#cockpit .ck-law.wanted { color: #ff5a5a; text-shadow: 0 0 6px rgba(255, 90, 90, .6); }

/* TRADE: the sector's prices. */
#hangar .hg-prices { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
#hangar .hg-prices th, #hangar .hg-prices td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--vt-line, rgba(57, 255, 106, .25)); vertical-align: top; }
#hangar .hg-prices th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
#hangar .hg-scroll { overflow-x: auto; }
#hangar .hg-trade .hg-row > span { font: 400 13px/1.4 var(--mono); }
/* HULLS: the 3D view beside the callsign / repairs / kit (over them on a phone), the hull list the rest. */
#hangar .hg-yard-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#hangar .hg-yard-top .hg-stage.big { height: 210px; margin: 0; }
#hangar .hg-yard-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#hangar .hg-yard-side .hg-row { flex-wrap: wrap; margin: 0; }
#hangar .hg-yard-side .hg-name { min-width: 0; flex: 1 1 120px; }
#hangar.hg-pin .hg-hulls { min-height: 210px; }
#hangar .hg-hulls .hg-reset { grid-column: 1 / -1; justify-self: center; margin: 8px 0; }
@media (max-width: 760px) { #hangar .hg-yard-top { grid-template-columns: 1fr; gap: 8px; } #hangar .hg-yard-top .hg-stage.big { height: 140px; } }
@media (max-height: 760px) { #hangar .hg-yard-top .hg-stage.big { height: 160px; } }
/* Every hangar tab: the title and tabs hold still at the top, the tab's content scrolls under them (HULLS goes one
   further: its top holds still too, only its list of hulls scrolls: .hg-pin). */
#hangar { overflow: hidden; display: flex; flex-direction: column; }
#hangar > .hg-body { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
#hangar.hg-pin > .hg-body { overflow: hidden; }
/* MARKET (report #72): the preview line, the stats and the filters hold still; only the cards scroll. */
#hangar.hg-pin-mk > .hg-body { overflow: hidden; display: flex; flex-direction: column; }
#hangar.hg-pin-mk .mk { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#hangar.hg-pin-mk .mk > :not(.mk-main) { flex: none; }
#hangar.hg-pin-mk .mk-main { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
#hangar.hg-pin-mk .mk-side { overflow-y: auto; min-height: 0; }
#hangar.hg-pin-mk .mk-grid { overflow-y: auto; overscroll-behavior: contain; min-height: 0; align-content: start; grid-auto-rows: max-content; padding-right: 4px; }
#hangar .hg-keep { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 12px; }
#hangar .hg-keep .hg-row { margin: 0; }
#hangar > :not(.hg-body) { flex: none; }
/* The target card: its shields (blue) over its hull. */
#cockpit .ck-tgt-bars.hidden, #cockpit .ck-tgt-strip.hidden { display: none; }
#cockpit .ck-tgt-bars { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#cockpit .ck-tgt-bars .ck-bar { width: 100%; }
#cockpit .ck-tgt-sh i { background: #7fc8ff; transform-origin: left; }
/* The BOARD's fixer (fixers.js): who, the run's steps as pips, the step on offer. */
.bq-fixer { display: grid; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.bq-fixer .bq-head b { color: #ffd23f; }
.bq-pips { display: flex; gap: 6px; }
.bq-pips i { width: 26px; height: 6px; background: rgba(255, 210, 63, .18); border: 1px solid rgba(255, 210, 63, .4); }
.bq-pips i.done { background: #ffd23f; }
.bq-pips i.now { background: rgba(255, 210, 63, .55); }
.bq-card.fixer { border-left-color: #ffd23f; }
/* ---------- The target card on a phone (the 2026-11-04 review: Apple's HIG, the space games' target displays) ---------- */
/* The hull and shield bars: in their column `flex: 1` made them 0 px tall. */
#cockpit .ck-tgt-bars .ck-bar { flex: none; height: 5px; }
/* Under the name: the distance, then what it is to you (HOSTILE, ON YOU, WANTED), in words as well as colour. */
.ck-tgt-flags { font: 700 12px/1.2 var(--mono); letter-spacing: .08em; color: #ffd27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* (JOB, CLOSED, OWES YOU: amber; red only on a hostile's card) */
.ck-tgt.hostile .ck-tgt-flags { color: #ff5a5a; }
.ck-tgt-flags:empty { display: none; }
#cockpit .ck-tgt.hostile { border-color: rgba(255, 59, 59, .55); box-shadow: 0 0 22px rgba(255, 59, 59, .25), inset 0 0 40px rgba(255, 59, 59, .06); }
#cockpit .ck-tgt.hostile .ck-tgt-name { color: #ff6a5a; }
/* Thumb-sized (44 pt) hit areas on the card's small controls; the drawn size is unchanged. */
@media (pointer: coarse) {
  #cockpit .ck-tgt-act { position: relative; }
  #cockpit .ck-tgt-nav::after, #cockpit .ck-tgt-x::after, #cockpit .ck-tgt-act::after, #cockpit .ck-act::after, #cockpit .ck-kitb::after, #cockpit .ck-wpn::after, #cockpit .ck-sys::after, .hud-buttons .btn.small::after { content: ""; position: absolute; inset: -6px; }
  #cockpit .ck-act, #cockpit .ck-kitb, #cockpit .ck-wpn, .hud-buttons .btn.small { position: relative; overflow: visible; }
}
/* Edge arrows: the label reads inward from its edge; behind you the arrow's hollow. */
.lock.edge.l span { left: -6px; transform: none; }
.lock.edge.r span { left: 6px; transform: translateX(-100%); }
/* The target off screen: its name and distance by its chevron on the center ring, reading away from the ring. */
.lock.edge.tgt span { font: 700 12px/1.25 var(--mono); letter-spacing: 0; white-space: pre; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.lock.edge.tgt.r span { top: -15px; left: 18px; transform: none; text-align: left; }
.lock.edge.tgt.l span { top: -15px; left: -18px; transform: translateX(-100%); text-align: right; }
.lock.edge.tgt:not(.l):not(.r) span { left: 0; transform: translateX(-50%); text-align: center; }
.lock.edge.tgt.u:not(.l):not(.r) span { top: -48px; }
.lock.edge.tgt.d:not(.l):not(.r) span { top: 18px; }
.lock.edge.behind > div::after { content: ""; position: absolute; left: -13px; top: -5px; border: 5px solid transparent; border-left: 9px solid #000; }
/* Bigger type on phones: the name 15, nothing under 11. A taller picture in portrait. */
@media (max-width: 700px) {
  .ck-tgt { --pip-h: 96px; }
  .ck-tgt-name { font-size: 15px; }
  .ck-tgt-status, .ck-tgt-info { font-size: 12px; }
}
/* Landscape on a phone. */
@media (orientation: landscape) and (max-height: 520px) {
  .ck-tgt-name { font-size: 15px; }
  .ck-tgt-status, .ck-tgt-info { font-size: 12px; }
}

/* The ship you're docked in is under attack, or going down (player.js alarm()): the hangar's footer and LAUNCH go red and pulse. */
#hangar.red-alert .hg-foot { background: rgba(120, 10, 10, .85); }
/* (Report #70: LAUNCH is the hangar's way out, where CLOSE was, and it stands out: filled, bigger; dimmed while the fit won't fly.) */
#hangar .btn.hg-go { background: var(--vt); color: #000; border-color: var(--vt); font-weight: 700; font-size: 15px; padding: 10px 26px; min-height: 44px; box-shadow: 0 0 16px rgba(57, 255, 106, .45); }
#hangar .btn.hg-go:disabled { background: none; color: #bfd6c5; border-color: rgba(191, 214, 197, .45); box-shadow: none; }
#hangar.red-alert #hangar-check { color: #fff; font-weight: 700; }
#hangar.red-alert #hangar-launch { color: #fff; border-color: #ff3b3b; background: rgba(255, 59, 59, .4); animation: hg-red 1s steps(2) infinite; }
@keyframes hg-red { 50% { background: rgba(255, 59, 59, .85); } }
@media (prefers-reduced-motion: reduce) { #hangar.red-alert #hangar-launch { animation: none; } }

/* The HUD pass: pause on the health bars and its menu, alerts and hails top centre, the center ring with its radar and the target's
   tag, FIRE's radial cluster. The HUD's top buttons are on the pause menu while flying. */
/* Flying, of the HUD's top buttons only the MAP's toggle stays (the rest are on the pause menu); over the MAP it's all there is, in every mode. */
body.flying #hud .hud-buttons > :not(#btn-map):not(#ck-pause), body.map-open #hud .hud-buttons > :not(#btn-map) { display: none; }
/* PAUSE, flying only: upper right beside the MAP's toggle (report #32), both a thumb's size. */
#hud #ck-pause { display: none; }
body.flying:not(.map-open):not(.paused) #hud .hud-buttons > #ck-pause { display: inline-flex; align-items: center; justify-content: center; }
body.flying #hud #ck-pause, body.flying #hud #btn-map { min-width: 44px; min-height: 44px; }
@media (orientation: landscape) and (max-height: 520px) { body.flying #hud #ck-pause, body.flying #hud #btn-map { width: 44px; } }
body.paused:not(.map-open) #hud .hud-buttons { display: none; }
body.map-open #hud { z-index: 17; pointer-events: none; }
body.map-open .hud-id { display: none; }
#btn-map .ico-close { display: none; }
body.map-open #btn-map .ico:not(.ico-close), body.map-open #btn-map .txt { display: none; }
body.map-open #btn-map .ico-close { display: block; }
.ico-loc { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ico-loc .dot { fill: currentColor; stroke: none; }
#map > .map-bar { margin-right: 72px; }
/* The MAP's two sections: the info on the left (on top, narrow), the map. Flying, the target's card and job strip take the info's place (ui.js mapCard()); nothing else of the cockpit shows. */
body.map-open #cockpit { z-index: 17; }
body.map-open #cockpit > :not(.ck-top) { visibility: hidden; }
body.map-open #cockpit .ck-status { display: none; }
body.map-open.flying .ck-top { top: calc(66px + var(--safe-t)); max-height: calc(100vh - 124px - var(--safe-t) - var(--safe-b)); overflow-y: auto; }
body.map-open #map:not(.carded) ~ #cockpit .ck-top { visibility: hidden; }
#map.carded.chart .map-chart, #map.carded.galaxy .map-galaxy { max-width: none; margin: 0 0 0 var(--card-w); }
#map.carded .chart-sector, #map.carded .galaxy-info { display: none; }
#map.galaxy .map-galaxy { flex-direction: row; max-width: none; }
#map.galaxy .map-galaxy canvas { flex: 1; width: 0; min-width: 0; height: auto; }
#map.galaxy .galaxy-info { order: -1; width: 320px; box-sizing: border-box; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: auto; border-right: 1px solid var(--line); }
#map.galaxy .galaxy-info-text { flex: none; }
.ck-pip canvas { display: none; width: 100%; height: 100%; }
body.map-open .ck-pip canvas { display: block; }
@media (max-width: 700px) {
  body.map-open .ck-top { --tgt-w: calc(100vw - 32px - var(--safe-l) - var(--safe-r)); }
  body.map-open.flying .ck-top { top: calc(120px + var(--safe-t)); max-height: 40vh; }
  body.map-open.flying:has(#map.galaxy) .ck-top { top: calc(80px + var(--safe-t)); }
  #map.carded.chart .map-chart, #map.carded.galaxy .map-galaxy { margin: var(--card-h) 0 0; }
  #map.galaxy .map-galaxy { flex-direction: column; }
  #map.galaxy .map-galaxy canvas { width: 100%; height: 0; }
  #map.galaxy .galaxy-info { width: auto; max-height: 34vh; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--line); }
  #map.galaxy .galaxy-info-text { flex: 1; }
}
@media (min-width: 701px) and (orientation: landscape) and (min-height: 521px) {
  body.map-open .ck-top { --tgt-w: 312px; }   /* (with its gap, the info's 320 px: the map stays where it is) */
}
@media (min-width: 701px) { #map.galaxy .map-galaxy { top: calc(66px + var(--safe-t)); } }
body.flying .ck-top { top: calc(14px + var(--safe-t)); }
.ck-menu { --vt: #39ff6a; --vt-line: rgba(57, 255, 106, .45); position: fixed; inset: 0; z-index: 15; background: rgba(0, 34, 12, .34); font-family: var(--mono); }
.ck-menu-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; height: calc(52px + var(--safe-t)); padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l)); background: #000; border-bottom: 2px solid var(--vt-line); }
.ck-menu-title { margin: 0; font: 400 24px/1 var(--mono); color: var(--vt); text-shadow: 0 0 10px var(--vt); }
.ck-menu-small { margin-left: auto; display: flex; gap: 8px; }
.ck-menu-list { position: absolute; left: calc(32px + var(--safe-l)); top: calc(68px + var(--safe-t)); width: min(280px, calc(100vw - 64px)); display: flex; flex-direction: column; gap: 8px; }
/* (The notched corner: the fill's clipped inside the edge's, one pixel in.) */
.ck-mbtn { position: relative; display: block; min-height: 48px; padding: 0 18px; border: 0; background: var(--vt-line); color: var(--vt); font: 400 18px/1 var(--mono); letter-spacing: .12em; cursor: pointer; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); text-shadow: 0 0 6px rgba(57, 255, 106, .5); isolation: isolate; touch-action: manipulation; }
.ck-mbtn::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: rgb(0, 26, 9); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.ck-mbtn:hover::before, .ck-mbtn:focus-visible::before { background: rgb(0, 60, 22); }
.ck-mbtn.small { min-height: 44px; padding: 0 14px; font-size: 12px; }
.ck-menu-resume, .ck-menu-quit { position: absolute; right: calc(32px + var(--safe-r)); bottom: calc(66px + var(--safe-b)); width: 170px; }   /* (clear of the radio, 30 px tall from 24 up) */
.ck-menu-resume { bottom: calc(66px + 48px + 12px + var(--safe-b)); }   /* (report #52: RESUME on the right, over QUIT) */
/* Paused: nothing of the HUD but the radio, your ship in view. */
body.paused #cockpit .ck-stick, body.paused #cockpit .ck-top, body.paused #cockpit .ck-right, body.paused #cockpit .ck-focus, body.paused #cockpit .ck-cross, body.paused #cockpit .ck-ring, body.paused #cockpit .ck-comm { visibility: hidden; }
@media (orientation: landscape) and (max-height: 520px) {
  .ck-menu-list { top: calc(56px + var(--safe-t)); gap: 4px; width: 240px; }
  .ck-mbtn { min-height: 44px; font-size: 15px; }
  .ck-menu-quit { bottom: calc(40px + var(--safe-b)); }
  .ck-menu-resume { bottom: calc(40px + 44px + 8px + var(--safe-b)); }
}
.ck-focus { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
/* A hail's answer aside, the card's rules below are for when it's closed. */
#cockpit #ck-tgt.closed { padding: 0; gap: 0; box-shadow: none; }
#cockpit #ck-tgt.closed > :not(.ck-tgt-head):not(.ck-pip):not(.ck-tgt-row) { display: none !important; }   /* (what it is, what it's doing, its bars and systems: on the MAP) */
#cockpit #ck-tgt.closed .ck-tgt-head { padding: 0 30px 0 10px; }
#cockpit #ck-tgt.closed .ck-tgt-row { gap: 0; margin: 0; }
#cockpit #ck-tgt.closed .ck-tgt-act { flex: 1; margin: 0; min-height: 40px; border-width: 1px 0 0; background: rgba(0, 14, 4, .85); }
/* The comms (cockpit.js drawComm(), comms.js): whoever's talking, their live picture over their name (the picture's the view showing through: main.js pip()), what they say, the buttons, ✕. Its colour's your standing. */
.ck-comm { --cc: #39ff6a; --pic: 92px; position: absolute; top: calc(58px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; width: min(560px, 62vw); min-height: calc(var(--pic) + 22px); box-sizing: border-box; color: var(--ink, #e6ffec); font: 13px/1.35 var(--mono); pointer-events: auto;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.ck-comm-who { flex: none; width: var(--who, var(--pic)); display: flex; flex-direction: column; }
.ck-comm-pic { height: var(--pic); background: transparent; }
.ck-comm-name { flex: 1; min-height: 22px; padding: 3px 4px; box-sizing: border-box; font-size: 12px; line-height: 16px; text-align: center; color: var(--cc); background: rgba(0, 14, 4, .92); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ck-comm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 8px 40px 8px 12px; background: rgba(0, 14, 4, .88); border-left: 2px solid var(--cc); }
.ck-comm-text { margin: 0; }
.ck-comm-acts { display: flex; flex-wrap: wrap; gap: 6px; }
#cockpit .ck-comm-acts .btn { min-height: 44px; min-width: 88px; color: #000; background: var(--cc); border-color: var(--cc); font-weight: 700; }
.ck-comm-more { position: absolute; right: 12px; bottom: 16px; font-size: 12px; font-weight: 700; color: var(--cc); }
#cockpit .ck-comm-x { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: none; border: 0; color: var(--cc); font-size: 16px; cursor: pointer; }
#cockpit .ck-weapons { display: none; }
.ck-cluster { position: relative; width: 220px; height: 180px; pointer-events: none; }
.ck-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ck-wedge { fill: rgba(0, 14, 4, .55); stroke: var(--vt-line); stroke-width: 1; }
.ck-charge { fill: rgba(57, 255, 106, .26); stroke: none; pointer-events: none; }
.ck-charge.on { fill: var(--vt); }
#cockpit .ck-pad { position: absolute; width: 62px; height: 56px; min-width: 0; margin: -28px 0 0 -31px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: none; border: 0; box-shadow: none; font-size: 12px; letter-spacing: .06em; line-height: 1.1; pointer-events: auto; touch-action: none; }
#cockpit .ck-pad b { font-size: 12px; margin: 0; }
#cockpit .ck-pad:disabled { opacity: .4; }
#cockpit .ck-pad.on { color: #000; text-shadow: none; }
#cockpit .ck-pad:hover, #cockpit .ck-pad:active, #cockpit .ck-pad:focus { background: none; }
#cockpit .ck-pad::before, #cockpit .ck-pad::after { border-radius: 0; }
#cockpit .ck-boost.ready { box-shadow: none; text-shadow: 0 0 8px var(--vt); }
#cockpit .ck-boost::before { display: none; }
#cockpit .ck-cluster .ck-attack { position: absolute; right: 0; bottom: 0; width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; }
#cockpit .ck-attack small { font-size: 12px; letter-spacing: .06em; opacity: .85; }
#cockpit .ck-cluster .ck-stop { position: absolute; left: -22px; bottom: 6px; width: 52px; height: 52px; pointer-events: auto; }
@media (orientation: landscape) and (max-height: 520px) {
  .ck-right { bottom: calc(48px + var(--safe-b)); }
  .ck-comm { --pic: 56px; --who: 92px; top: calc(46px + var(--safe-t)); left: calc(256px + var(--safe-l)); right: calc(64px + var(--safe-r)); transform: none; width: auto; font-size: 12px; }
  .ck-comm-body { gap: 3px; padding: 5px 36px 5px 8px; }
  #cockpit .ck-comm-acts .btn { min-height: 36px; }
  body.flying #ticker { bottom: calc(var(--safe-b) / 4 + 2px); }   /* (under the weapons and the stick, not through them) */
}
@media (orientation: landscape) and (max-height: 520px) {
  body.flying #banner { max-width: 38vw; }
}
/* (A tall screen: the status box fills the top, so alerts and hails go just under them.) */

/* The readability pass (2026-11-06): the terminal's character stays, what cost legibility goes. Reading text in a pale ink, saturated
   green for accents and headings; no scanlines or glow on text; secondary text bright enough to read; nothing small; locked says so in amber. */
#hangar, #cockpit { --ink: #e6ffec; --vt-dim: #9be3ae; --vt-line: rgba(57, 255, 106, .55); --fg: var(--ink); color: var(--ink); text-shadow: none; }
#hangar::after, #cockpit .ck-tgt::after, #cockpit .ck-status::after, #cockpit .ck-obj::after { display: none; }
#hangar h3, #hangar h2, #hangar h1, #hangar #hangar-title { text-shadow: 0 0 6px rgba(57, 255, 106, .3); }
#hangar .hg-hull b { color: var(--vt); font-size: 16px; }
#hangar .hg-meta, #hangar .hg-note, #hangar .bq-what, #hangar .bq-why, #hangar .bq-none, #hangar .bq-head span, #hangar .bq-chpay, #hangar .board-stats { font-size: 13px; line-height: 1.45; letter-spacing: 0; color: var(--vt-dim); }
#hangar .hg-meta:first-of-type, #hangar .bq-what { color: var(--ink); }
#hangar .board-view td { font-size: 13px; }
#hangar .board-view th, #hangar .board-view td.now, #hangar .board-view td.fac { color: var(--vt-dim); }
#hangar .btn, #cockpit .btn { text-shadow: none; letter-spacing: .08em; }
#hangar .btn { font-size: 13px; color: var(--vt); }
#hangar .btn:disabled, #cockpit .btn:disabled { opacity: 1; color: #bfd6c5; border-color: rgba(191, 214, 197, .45); }
#hangar .btn.locked, #hangar .btn.locked:disabled { color: #ffd27a; border-color: rgba(255, 210, 122, .6); }
#hangar .hg-tabs .btn { letter-spacing: .1em; }
.hg-side-lore { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); max-width: 62ch; }
#cockpit .ck-mode, #cockpit .ck-cr, #cockpit .ck-tgt-info, #cockpit .ck-tgt-dist, #cockpit .ck-tgt-status, #cockpit .ck-obj { color: var(--ink); text-shadow: none; }
#cockpit .ck-mode, #cockpit .ck-cr { font-size: 12px; letter-spacing: .08em; }
#cockpit .ck-pad { color: var(--ink); text-shadow: 0 0 3px #000; font-size: 12px; }
#cockpit .ck-pad:disabled { opacity: 1; color: #8fa596; }
#cockpit .ck-attack small { font-size: 12px; opacity: 1; }
body.flying #banner { text-shadow: none; font-weight: 700; background: rgba(0, 14, 4, .92); color: var(--ink, #e6ffec); }
.ck-mbtn { color: #e6ffec; text-shadow: none; }
#hangar, #hangar * { scrollbar-color: rgba(57, 255, 106, .55) rgba(0, 14, 4, .9); }

/* The readability pass, the MAP, BOARD and FACTIONS (2026-11-06): their secondary text brighter, nothing under 12 px (above), a faction's dark colour lifted to read on black, and what's dimmed still readable. */
:root { --dim: #b4d2dc; }
.fac-name { color: color-mix(in srgb, var(--fc, #fff) 45%, #fff) !important; }
.fac-list button.away { opacity: 1; }
.fac-list button.away .fac-name { color: color-mix(in srgb, var(--fc, #fff) 30%, #9db4bd) !important; }
.fac-list em, #factions em { font-size: 12px; font-style: normal; color: var(--fg); }
.fac-tier, .fac-scale, .fac-here-tag { font-size: 12px; color: var(--fg); }
#board td, #board th { font-size: 13px; }
#board th button { letter-spacing: .06em; color: var(--fg); }
#board td.now, #board td.cls, #board td.fac, #board .pos, #board td.skills { color: var(--dim); font-size: 13px; }
.chart-key { font-size: 12px; color: var(--fg); }
.chart-key .hostile { color: #ff8f8f; }
.hud-buttons .btn.small, #map .btn.small, #board .btn.small, #factions .btn.small, #settings .btn.small { font-size: 12px; }
.bq-chpay { font-size: 12px; color: var(--fg); }

/* Alerts and hails keep between the corners (the status column on the left, 16 + 300 px, mirrored on the right), wrapping
   if they must: true centre where there's room for it, else centred in the gap. */
@media (min-width: 1020px) {
  body.flying #banner { max-width: min(520px, calc(100vw - 680px)); }
  .ck-comm { width: min(560px, calc(100vw - 680px)); }
}
@media (min-width: 701px) and (max-width: 1019px) and (min-height: 521px) {
  body.flying #banner { left: calc(328px + var(--safe-l)); right: calc(148px + var(--safe-r)); max-width: none; }
  .ck-comm { left: calc(328px + var(--safe-l)); right: calc(148px + var(--safe-r)); transform: none; width: auto; }
}
#hangar .hg-status { font-size: 13px; color: var(--ink, #e6ffec); margin: 2px 0; }
#hangar .hg-status.hg-look { color: #ffd27a; }

/* The touch stick: fixed, lower left, over the radio's ticker. */
#cockpit .ck-stick.pad { left: calc(16px + var(--safe-l) + 72px); top: auto; bottom: calc(56px + var(--safe-b) + 14px + 72px); }   /* (clear of the radio, report #46) */
.ck-stick.pad i { transition: transform .08s linear; }
@media (orientation: landscape) and (max-height: 520px) {
}
/* In orbit: the view's the ship and the world; the gunsight would only point at space. */
body.orbit-cam #cockpit .ck-cross, body.orbit-cam #cockpit .ck-ring { visibility: hidden; }
/* The target's card is the MAP's: flying, there's none (its brackets, or the chevron on the ring, and the job's strip). */
body:not(.map-open) #cockpit #ck-tgt { display: none; }
/* The job's strip is the MAP's too: flying, its button's on the comms, its waypoint the NAV mark. */
body:not(.map-open) #cockpit #ck-job { display: none; }
/* Alerts, flying: one place, the bottom centre above the radio, between the stick and the weapons; on a tall narrow screen, just above them. The comms have the top. */
body.flying #banner { top: auto; bottom: calc(62px + var(--safe-b)); left: calc(270px + var(--safe-l)); right: calc(270px + var(--safe-r)); width: fit-content; max-width: none; margin: 0 auto; }
@media (orientation: landscape) and (max-height: 520px) {
  body.flying #banner { bottom: calc(var(--safe-b) / 4 + 38px); font-size: 12px; letter-spacing: .08em; padding: 3px 8px; }
}
/* The ship's computer, on the comms: a drawn face, no live picture; compact, it's only a line. */
.ck-comm-face { display: none; }
.ck-comm.computer { --pic: 56px; --who: 92px; min-height: 0; }
.ck-comm.computer .ck-comm-pic { display: none; }
.ck-comm.computer .ck-comm-face { display: block; width: var(--pic); height: var(--pic); margin: 0 auto; }
.ck-comm.computer .ck-comm-who { background: rgba(0, 14, 4, .92); }
.ck-comm-face { fill: var(--cc); }
.ck-comm-face .line { fill: none; stroke: var(--cc); stroke-width: 2; stroke-linecap: round; }

/* The hangar on a screen on its side (report #36): the station's menus fit an iPhone and an iPad held sideways. The tab says which tab it
   is (no second title over MISSIONS); SHIP is two columns, the ship and its upkeep holding still beside the slots and cards. */
#hangar #hangar-jobs > .board-title { display: none; }
#hangar .hg-tabs { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 420px) { #hangar .hg-tabs .btn { padding: 8px 7px; letter-spacing: .04em; } }
@media (orientation: landscape) and (min-width: 640px) {   /* (an iPhone SE on its side too: 667) */
  #hangar .hg-ship { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
  #hangar .hg-ship-l { position: sticky; top: 0; }
  #hangar .hg-ship .hg-stage.big { margin-top: 0; }
  #hangar .hg-ship-r > .hg-slots { margin-top: 2px; }
}
@media (orientation: landscape) and (min-width: 1100px) { #hangar > :not(.map-bar):not(.hg-foot) { max-width: 1160px; } }
/* A phone on its side: one row up top (the station's name, the tabs, credits and CLOSE), one along the foot (the ship's line, the radio,
   LAUNCH), the rest for the tab; HULLS: the ship you're looking at on the left, the hulls beside it. */
@media (orientation: landscape) and (max-height: 520px) {
  #hangar { padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) calc(56px + var(--safe-b)) calc(16px + var(--safe-l)); }
  #hangar #hangar-title { position: absolute; left: calc(16px + var(--safe-l)); top: calc(14px + var(--safe-t)); max-width: calc(50% - 220px); margin: 0;
    font-size: 14px; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hangar .hg-tabs { margin-bottom: 8px; }
  .hg-foot { padding: 5px calc(16px + var(--safe-r)) calc(5px + var(--safe-b)) calc(16px + var(--safe-l)); }
  #hangar .hg-check { max-width: calc(36% - 16px); line-height: 1.25; }
  body:has(#hangar:not(.hidden)) #ticker { bottom: calc(12px + var(--safe-b)); left: calc(36% + 8px); right: calc(140px + var(--safe-r)); }
  #hangar .hg-head h3 { font-size: 14px; }
  #hangar .hg-ship .hg-stage.big { height: 150px; }
  #hangar .hg-ship .hg-note { margin: 4px 0 6px; }
  #hangar .hg-keep { margin: 4px 0; gap: 4px 12px; }
  #hangar .hg-keep .hg-row { margin: 0; }
  #hangar .hg-ship .hg-slots { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
  #hangar h4 { margin: 14px 0 8px; }
  #hangar.hg-pin .hg-yard { flex-direction: row; gap: 14px; }
  #hangar.hg-pin .hg-yard > .hg-yard-top { flex: 0 0 40%; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #hangar .hg-yard-top .hg-stage.big, #hangar.hg-pin .hg-stage.big { flex: none; height: 130px; }
  #hangar.hg-pin .hg-hulls { margin-top: 0; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  #hangar .mk-preview { margin-bottom: 8px; }
  #hangar .mk-stats { margin-bottom: 8px; }
  #hangar-jobs .board-stats { margin: 0 0 6px; }
  #hangar .board-quick { margin-bottom: 8px; padding: 8px 10px; }
}
/* MISSIONS: your job, first, with GIVE UP (report #43); armed, the second tap gives it up. */
.bq-card.mine { border-left-color: #ffd27a; }
#hangar .bq-card .btn.armed { color: #fff; border-color: #ff5a5a; background: rgba(255, 90, 90, .35); }
/* On touch, the stick and FIRE's cluster fade when left alone, each on its own, and come back to a thumb (cockpit.js fade(), report #42). */
#cockpit .ck-stick, #cockpit .ck-cluster, #cockpit .ck-weapons { transition: opacity .25s; }
#cockpit .ck-stick.idle, #cockpit .ck-right.idle > .ck-cluster, #cockpit .ck-right.idle > .ck-weapons { opacity: .18; transition: opacity 1.2s; }   /* (the ship's own button, CALL A TOW and the like, stays) */
/* The status box, streamlined (report #32): speed and what's setting it, the shields over the hull, credits; narrow, so the comms have the
   top row beside it, flush with it and the buttons (report #33). */
#cockpit .ck-top > .ck-status { width: 176px; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 10px; }
#cockpit .ck-status .ck-read { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
#cockpit .ck-status .ck-read b { font-size: 20px; }
#cockpit .ck-status .ck-mode { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#cockpit .ck-status .ck-bars { gap: 3px; }
#cockpit .ck-status .ck-bar.wide { width: 100%; }
.ck-comm { top: calc(14px + var(--safe-t)); }
@media (min-width: 701px) and (max-width: 1019px) and (min-height: 521px) { .ck-comm { left: calc(204px + var(--safe-l)); right: calc(200px + var(--safe-r)); } }
@media (orientation: landscape) and (max-height: 520px) { .ck-comm { top: calc(14px + var(--safe-t)); left: calc(204px + var(--safe-l)); right: calc(124px + var(--safe-r)); } }

/* The MAP's info section in the watch panel's treatment (2026-11-08, it reads better than the terminal's): the target's card and the job's
   strip (flying), the sector's panel and the galaxy's survey. Orbitron for names, a "// KIND" eyebrow, the mono face larger and spaced, pale
   ink on dark slate, a thin cyan edge and an accent bar on the right, as #panel. */
body.map-open #cockpit .ck-top, #map .chart-sector, #map .galaxy-info {
  --display: "Orbitron", "Share Tech Mono", sans-serif; --fg: #e8fbff; --ink: #e8fbff; --dim: #b4d2dc; --line: rgba(41, 240, 255, .45);
  --panel: rgba(2, 10, 16, .86); text-shadow: none;
}
body.map-open #cockpit #ck-tgt { --name-h: 76px; padding: 0 18px 16px; gap: 8px; color: var(--fg); border: 1px solid var(--line); border-right: 3px solid var(--tc, var(--accent));
  box-shadow: 0 0 30px rgba(0, 0, 0, .6), inset 0 0 40px rgba(41, 240, 255, .04); }
body.map-open #cockpit #ck-tgt .ck-pip { margin: 0 -18px 6px; }
body.map-open #cockpit #ck-tgt-open { gap: 4px; padding-top: 12px; }
body.map-open #cockpit #ck-tgt-open::before { content: "// " attr(data-kind); font: 500 12px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
body.map-open #cockpit .ck-tgt-name { font: 800 19px/1.25 var(--display); letter-spacing: .03em; color: #fff; }
body.map-open #cockpit .ck-tgt-dist { font: 12px/1.3 var(--mono); letter-spacing: .08em; color: var(--dim); }
body.map-open #cockpit .ck-tgt-info { font-size: 14px; line-height: 1.5; letter-spacing: .04em; color: var(--fg); opacity: .9; }
body.map-open #cockpit .ck-tgt-status { font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--accent); -webkit-line-clamp: 4; }
body.map-open #cockpit .ck-tgt-flags { font-size: 12px; letter-spacing: .1em; }
body.map-open #cockpit .ck-sys { font-size: 12px; }
body.map-open #cockpit #ck-tgt .btn, body.map-open #cockpit #ck-job .btn { font: 600 13px/1 var(--display); letter-spacing: .14em; min-height: 44px; padding: 0 16px; }
body.map-open #cockpit #ck-tgt .ck-tgt-row { margin-top: 6px; }
body.map-open #cockpit #ck-job { padding: 8px 10px 8px 4px; background: var(--panel); }
body.map-open #cockpit .ck-obj-go b { font: 800 15px/1.3 var(--display); letter-spacing: .03em; color: #fff; }
body.map-open #cockpit .ck-obj-go span { font-size: 13px; line-height: 1.5; letter-spacing: .04em; -webkit-line-clamp: 3; }
#map .chart-sector, #map.galaxy .galaxy-info { padding: 16px 18px; background: var(--panel); border-right: 3px solid var(--accent); color: var(--fg); font-size: 14px; line-height: 1.55; letter-spacing: .04em; }
#map .chart-sector summary b { font: 700 14px/1.3 var(--display); letter-spacing: .12em; color: #fff; }
#map .chart-sector .bq-ch, #map .chart-sector .bq-chpay, #map .chart-sector .bq-none { font-size: 13px; line-height: 1.5; }
#map .chart-sector .btn, #map .galaxy-info .btn { font: 600 13px/1 var(--display); letter-spacing: .14em; min-height: 44px; }
#map .galaxy-info-text { font-size: 14px; line-height: 1.6; letter-spacing: .05em; }
@media (orientation: landscape) and (max-height: 520px) {
  body.map-open #cockpit #ck-tgt { --name-h: 66px; padding: 0 14px 12px; gap: 5px; }
  body.map-open #cockpit #ck-tgt .ck-pip { margin: 0 -14px 4px; }
  body.map-open #cockpit #ck-tgt-open { padding-top: 8px; }
  body.map-open #cockpit .ck-tgt-name { font-size: 16px; }
  #map .chart-sector, #map.galaxy .galaxy-info { padding: 10px 12px; }
}

/* The hangar in the watch panel's treatment too (2026-11-08): the terminal's green stays for accents and buttons; names and headings in
   Orbitron, section headings as "// EYEBROWS", the mono face larger and spaced, pale ink on dark slate, thin cyan lines. */
#hangar {
  --display: "Orbitron", "Share Tech Mono", sans-serif; --fg: #e8fbff; --ink: #e8fbff; --dim: #b4d2dc; --vt-dim: #b4d2dc;
  --line: rgba(41, 240, 255, .45); --vt-line: rgba(41, 240, 255, .45); --panel: rgba(2, 10, 16, .86); --vt-bg: rgba(2, 10, 16, .86);
  background: rgb(2, 8, 12); color: var(--fg); letter-spacing: .03em;
}
#hangar #hangar-title, #hangar h2, #hangar h3, #hangar .hg-head h3 { font-family: var(--display); color: #fff; text-shadow: none; letter-spacing: .05em; }
#hangar h4 { font: 500 12px/1 var(--display); letter-spacing: .3em; color: var(--vt); text-transform: uppercase; }
#hangar h4::before { content: "// "; }
#hangar .hg-note, #hangar .hg-meta, #hangar .hg-status, #hangar .bq-what, #hangar .bq-why, #hangar .board-stats { font-size: 14px; line-height: 1.55; letter-spacing: .04em; }
#hangar .hg-note, #hangar .hg-meta, #hangar .bq-why, #hangar .board-stats { color: var(--dim); }
#hangar .hg-cname, #hangar .mk-name, #hangar .bq-job, #hangar .hg-hull b { font-family: var(--display); color: #fff; letter-spacing: .04em; }
#hangar .hg-card, #hangar .mk-card, #hangar .hg-hull, #hangar .bq-card, #hangar .board-quick, #hangar .hg-detail { background: var(--panel); }
#hangar .hg-slot { border-color: rgba(41, 240, 255, .35); }
#hangar .btn { font-family: var(--display); letter-spacing: .12em; }
#hangar .hg-tabs .btn { font-size: 13px; }
#hangar input, #hangar select { color: var(--fg); border-color: var(--line); }
.hg-foot { background: rgba(2, 10, 16, .96); border-top-color: rgba(41, 240, 255, .45); }
#hangar .hg-check { font-size: 13px; letter-spacing: .04em; }
@media (orientation: landscape) and (max-height: 520px) {
  #hangar .hg-tabs .btn { font-size: 12px; padding: 8px 9px; letter-spacing: .08em; }
  #hangar #hangar-title { font-size: 12px; letter-spacing: .02em; max-width: calc(50% - 212px); }
}
/* The MAP with nothing targeted: your ship's card, the main view live in it (main.js mainView()); the watch panel's treatment, as the target's card. */
body:not(.map-open) #cockpit #ck-view { display: none; }
#cockpit .ck-view { box-sizing: border-box; width: var(--tgt-w); display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--line); border-right: 3px solid var(--accent); box-shadow: 0 0 30px rgba(0, 0, 0, .6), inset 0 0 40px rgba(41, 240, 255, .04); }
#cockpit .ck-view-head { display: flex; flex-direction: column; gap: 4px; }
#cockpit .ck-view-head::before { content: "// Your ship"; font: 500 12px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
#cockpit .ck-view-name { font: 800 19px/1.25 var(--display); letter-spacing: .03em; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#cockpit .ck-view-info { font: 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--dim); }
#cockpit .ck-view-pic { aspect-ratio: 16 / 10; margin: 0 -18px -18px; border-top: 1px solid var(--line); background: #000; }
#cockpit .ck-view-pic canvas { display: block; width: 100%; height: 100%; }
@media (orientation: landscape) and (max-height: 520px) {
  #cockpit .ck-view { padding: 10px 14px 14px; gap: 5px; }
  #cockpit .ck-view-name { font-size: 16px; }
  #cockpit .ck-view-pic { aspect-ratio: auto; height: 120px; margin: 0 -14px -14px; }
}
/* The comms in the watch panel's treatment too (report #48: it reads better, and bigger): the speaker's name in Orbitron, what's said in the
   mono face larger and spaced, pale ink on dark slate with a thin cyan edge; the speaker's colour (--cc) stays on the edge bar and the buttons. */
#cockpit .ck-comm { --display: "Orbitron", "Share Tech Mono", sans-serif; --ink: #e8fbff; --line: rgba(41, 240, 255, .45); font: 15px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink); text-shadow: none; clip-path: none; }   /* (square corners: the terminal's notch read as a corner missing, report #62) */
#cockpit .ck-comm-body { background: rgba(2, 10, 16, .9); border: 1px solid var(--line); border-left: 3px solid var(--cc); padding: 10px 44px 10px 14px; }
#cockpit .ck-comm-name { font: 700 12px/16px var(--display); letter-spacing: .08em; text-transform: uppercase; background: rgba(2, 10, 16, .92); border: 1px solid var(--line); border-top: 0; }
#cockpit .ck-comm.computer .ck-comm-who { background: rgba(2, 10, 16, .92); }
#cockpit .ck-comm-acts .btn { font: 600 13px/1 var(--display); letter-spacing: .14em; padding: 0 16px; }
#cockpit .ck-comm-more { font: 700 12px/1 var(--display); letter-spacing: .1em; }
@media (orientation: landscape) and (max-height: 520px) {
  #cockpit .ck-comm { font-size: 13px; line-height: 1.4; --who: 108px; }   /* (the name column: "COMPUTER" whole, report #67) */
  #cockpit .ck-comm-name { letter-spacing: .02em; padding: 3px 2px; }
  #cockpit .ck-comm-body { padding: 6px 38px 6px 10px; }
}
.sa-probe { position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }   /* (main.js safeInsets(): for the BUG button's reports) */
/* (Report #63: on a short screen the MAP card's button comes right under the picture, so no length of words can push it out of view.) */
@media (orientation: landscape) and (max-height: 520px) {
  body.map-open #cockpit #ck-tgt .ck-tgt-row { order: 1; margin-top: 0; }
  body.map-open #cockpit #ck-tgt > .ck-tgt-flags, body.map-open #cockpit #ck-tgt > .ck-tgt-info, body.map-open #cockpit #ck-tgt > .ck-tgt-status, body.map-open #cockpit #ck-tgt > .ck-tgt-strip { order: 2; }
}
/* (Report #73: on a short screen the job's strip, with its GOTO and GIVE UP, holds still at the foot of the MAP's info; only the card above it scrolls.) */
@media (orientation: landscape) and (max-height: 520px) {
  body.map-open.flying #cockpit .ck-top { overflow: hidden; }
  body.map-open.flying #cockpit .ck-panel { flex: 0 1 auto; min-height: 0; }
  body.map-open.flying #cockpit .ck-panel > #ck-tgt, body.map-open.flying #cockpit .ck-panel > #ck-view { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background-attachment: local; }
  body.map-open.flying #cockpit .ck-panel > #ck-job { flex: none; }
  body.map-open.flying #cockpit .ck-panel > #ck-tgt > *, body.map-open.flying #cockpit .ck-panel > #ck-view > * { flex-shrink: 0; }   /* (its contents scroll, never squashed) */
}

/* ---------- The hangar on a phone on its side (2026-11-08, Thor's iPhone screenshots: the top and bottom rows and large text left a third of 428 px for the content)
   A rail down the left: the station, the tabs one over another, what the hangar says, credits, LAUNCH (report #70: where CLOSE was; there's no CLOSE).
   The content has the rest, full height, the radio a strip along its foot; the type a size denser (never under 12 px). ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  #hangar { --rail: 150px; --rx: calc(12px + var(--safe-l)); font-size: 13px; letter-spacing: .02em;
    padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(40px + var(--safe-b)) calc(var(--rail) + 24px + var(--safe-l)); }
  #hangar > :not(.map-bar):not(.hg-foot) { max-width: none; }
  #hangar::before { content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: calc(var(--rail) + 18px + var(--safe-l)); z-index: 1; background: rgba(0, 10, 4, .98); border-right: 1px solid var(--vt-line); pointer-events: none; }
  #hangar #hangar-title { position: fixed; z-index: 2; left: var(--rx); top: calc(10px + var(--safe-t)); width: var(--rail); max-width: none; margin: 0;
    font-size: 12px; line-height: 1.3; letter-spacing: .04em; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #hangar .hg-tabs { position: fixed; z-index: 2; left: var(--rx); top: calc(62px + var(--safe-t)); width: var(--rail); margin: 0; display: flex; flex-direction: column; gap: 4px; }
  #hangar .hg-tabs .btn { width: 100%; min-height: 34px; padding: 0 10px; text-align: left; font-size: 12px; letter-spacing: .1em; margin: 0; }
  #hangar .map-bar { position: fixed; z-index: 2; left: var(--rx); right: auto; top: auto; bottom: calc(10px + var(--safe-b)); width: var(--rail); display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  #hangar .map-bar .btn { min-height: 34px; padding: 0 10px; font-size: 12px; }
  #hangar .hg-credits { font-size: 12px; line-height: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hangar .hg-foot { left: var(--rx); right: auto; bottom: calc(78px + var(--safe-b)); width: var(--rail); padding: 0; z-index: 2; background: none; border: 0; flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  #hangar .map-bar .btn.hg-go { min-height: 44px; font-size: 14px; padding: 0 10px; }
  #hangar .hg-check { max-width: none; margin: 0; font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }   /* (what the hangar says, the captain aboard a liner: up to four lines under LAUNCH) */
  body:has(#hangar:not(.hidden)) #ticker { left: calc(var(--rail, 150px) + 24px + var(--safe-l)); right: calc(12px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); }
  /* (Denser type: the tabs' words a size down, nothing under 12 px.) */
  #hangar .hg-note, #hangar .board-stats, #hangar .hg-meta, #hangar p { font-size: 12px; line-height: 1.4; letter-spacing: .02em; }
  #hangar h4 { margin: 10px 0 6px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* (MISSIONS on a phone on its side: the jobs list without the # and PILOT columns, a pilot's only on a job under way; the table fits the width.) */
  #hangar #hangar-jobs .pos, #hangar #hangar-jobs .fac { display: none; }
  #hangar #hangar-jobs table { width: 100%; table-layout: auto; }
  #hangar #hangar-jobs td, #hangar #hangar-jobs th { padding: 6px 6px; font-size: 12px; }
  #hangar #hangar-jobs td.now { white-space: normal; min-width: 0; max-width: 140px; }   /* (who it's open to wraps: ACCEPT stays on screen) */
  #hangar #hangar-jobs td.skills { max-width: 170px; }
}
@media (orientation: landscape) and (max-height: 400px) {
  /* (A smaller phone on its side, an iPhone SE's 375: the rail tighter, its words fewer.) */
  #hangar #hangar-title { -webkit-line-clamp: 2; }
  #hangar .hg-tabs { top: calc(46px + var(--safe-t)); gap: 3px; }
  #hangar .hg-tabs .btn { min-height: 30px; }
  #hangar .hg-check { -webkit-line-clamp: 2; }
  #hangar .map-bar .btn.hg-go { min-height: 38px; }
  #hangar .hg-foot { bottom: calc(70px + var(--safe-b)); }
  #hangar .hg-ship .hg-stage.big { height: 120px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* (MARKET on a phone on its side: the filters a narrow column beside the cards, as on a big screen, however narrow the width; the stats on one line.) */
  #hangar .mk-main { grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
  #hangar .mk-side { display: flex; flex-direction: column; gap: 6px; }
  #hangar .mk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  #hangar .mk-stats { flex-wrap: nowrap; gap: 6px 16px; }
  #hangar .mk-stats .btn { margin-left: auto; white-space: nowrap; }
}

/* ---------- FACTIONS (report #76): the title and its buttons hold still, the list and the chosen faction's detail scroll each on their own.
   On a phone on its side: the title on one row with HERE and CLOSE, the list a narrow column beside the detail, both full height. ---------- */
#factions { display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(60px + var(--safe-b)); }
#factions > .fac-heading { flex: none; }
#factions > .fac-layout { flex: 1; min-height: 0; width: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
#factions .fac-list, #factions .fac-detail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#factions .fac-list > *, #factions .fac-detail > * { flex-shrink: 0; }
#factions .fac-box { max-height: none; overflow: visible; }
#factions .fac-web { margin-left: 100px; margin-right: 100px; }   /* (the detail clips now it scrolls: room for the labels either side) */
@media (orientation: landscape) and (max-height: 520px) {
  #factions { padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(54px + var(--safe-b)) calc(12px + var(--safe-l)); }
  #factions > :not(.map-bar) { max-width: none; }
  #factions .map-bar { top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); gap: 6px; }
  #factions .map-bar .btn { min-height: 34px; padding: 0 12px; }
  #factions > .fac-heading { text-align: left; font-size: 16px; line-height: 34px; margin: 0 0 8px; }
  #factions > .fac-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 10px; }
  #factions .fac-list { display: flex; flex-direction: column; padding: 4px; gap: 3px; }
  #factions .fac-list button { padding: 5px 7px; gap: 2px 8px; }
  #factions .fac-list .fac-emblem { --s: 30px; }
  #factions .fac-list .fac-name { white-space: nowrap; }
  #factions .fac-here-tag { font-size: 12px; letter-spacing: 0; line-height: 1.3; }
  #factions .fac-detail { padding: 10px 12px; gap: 10px; }
  #factions .fac-head { gap: 12px; }
  #factions .fac-emblem.big { --s: 56px; border-width: 2px; }
  #factions .fac-title { font-size: 15px; margin-bottom: 6px; }
  #factions .fac-web { height: 250px; margin-left: 96px; margin-right: 96px; }
  #factions .fac-box { padding: 10px 12px; font-size: 12px; line-height: 1.5; }
  body:has(#factions:not(.hidden)) #ticker { bottom: calc(10px + var(--safe-b)); }
}

/* ---------- The BOARD (report #77): simpler, and the tabs, the stats line and the table's headings hold still; only the rows scroll.
   Sorting is by the column headings (no SORT bar). On a phone on its side: the tabs on one row with CLOSE, no title (the tab says it). ---------- */
#board { display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(60px + var(--safe-b)); }
#board > * { flex: none; }
#board > .board-wrap { flex: 1; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; }
#board > .board-sort { display: none; }
#board thead th { position: sticky; top: 0; z-index: 1; background: rgb(0, 4, 8); }
@media (orientation: landscape) and (max-height: 520px) {
  #board { padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(54px + var(--safe-b)) calc(12px + var(--safe-l)); }
  #board > :not(.map-bar) { max-width: none; }
  #board .map-bar { top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
  #board .map-bar .btn { min-height: 34px; padding: 0 12px; }
  #board > .board-tabs { margin: 0 96px 6px 0; }
  #board > .board-tabs .btn { min-height: 34px; }
  #board > .board-title { display: none; }
  #board > .board-stats { margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #board .opt { display: none; }
  #board td, #board th { padding: 6px; }
  #board td.now { max-width: 220px; }
  body:has(#board:not(.hidden)) #ticker { bottom: calc(10px + var(--safe-b)); }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 720px) { #board .fac { display: none; } }   /* (an iPhone SE on its side: the name's in its faction's colour) */