:root {
  --ink: #d6ecff;
  --dim: rgba(214, 236, 255, 0.55);
  --faint: rgba(214, 236, 255, 0.18);
  --panel: rgba(6, 11, 18, 0.86);
  --edge: rgba(150, 180, 210, 0.35);
  --bg: #04060a;
  --mono: "SF Mono", Menlo, Consolas, ui-monospace, monospace;
  --sans: "Avenir Next Condensed", "DIN Alternate", "Bahnschrift", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--sans); }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { pointer-events: auto; }
body.flying #hud { cursor: crosshair; }
#ui { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
#ui.show { display: flex; }
#ui.scrim { background: radial-gradient(ellipse at center, rgba(4, 6, 10, 0.25), rgba(4, 6, 10, 0.75)); }
#ui.pause { background: rgba(4, 6, 10, 0.6); }

.title { text-align: center; max-width: 960px; width: 100%; }
.title h1 { font-size: clamp(40px, 9vw, 104px); letter-spacing: 0.16em; margin: 0 0 0 0.16em; font-weight: 700; line-height: 1;
  color: #e9f2fb; text-shadow: 0 2px 0 #6f8193, 0 6px 30px rgba(120, 170, 230, 0.45); }
.title .sub { font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); margin: 14px 0 36px; }
.title .foot { color: var(--dim); font-size: 13px; margin-top: 28px; letter-spacing: 0.05em; }
.menu { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 360px; margin: 0 auto; }
.menu button span { display: block; font-size: 12px; color: var(--dim); letter-spacing: 0.05em; text-transform: none; margin-top: 3px; }

button { font: 600 16px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: rgba(10, 18, 28, 0.75);
  border: 1px solid var(--edge); padding: 12px 20px; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
button:hover, button:focus-visible { background: rgba(40, 60, 85, 0.85); border-color: var(--ink); outline: none; }
button.primary { background: var(--ink); color: #071018; border-color: var(--ink); font-weight: 700; }
button.primary:hover { background: #fff; }
button.primary span { color: #31414f; }

.panel { background: var(--panel); border: 1px solid var(--edge); padding: 28px 32px; max-width: 620px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); backdrop-filter: blur(6px); }
.panel.wide { max-width: 1040px; }
.panel h2 { font-size: 34px; letter-spacing: 0.08em; text-transform: uppercase; margin: 2px 0 16px; font-weight: 700; }
.panel h3 { letter-spacing: 0.1em; text-transform: uppercase; font-size: 16px; margin: 20px 0 8px; }
.panel p, .panel li { font-size: 17px; line-height: 1.5; color: #c6d6e6; }
.panel p.note { font-size: 14px; color: var(--dim); }
.label { font: 600 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 16px 0 6px; }
.row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { font-size: 14px; padding: 9px 14px; }
.seg button.on { border-color: var(--ink); background: rgba(214, 236, 255, 0.14); }
.field { display: flex; align-items: center; gap: 12px; margin: 18px 0; font: 600 14px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.field input[type=text], .field input:not([type]) { flex: 1; font: 600 22px var(--mono); color: var(--ink); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--edge); padding: 10px 12px; letter-spacing: 0.06em; }
.field input[type=range] { flex: 1; accent-color: var(--ink); }
.field b { font-size: 22px; color: var(--ink); min-width: 2ch; }
.check { display: flex; gap: 10px; align-items: center; font-size: 17px; margin: 8px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }

.ships { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ship { border: 1px solid var(--edge); padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; position: relative; }
.ship input { position: absolute; opacity: 0; }
.ship b { font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; }
.ship span { font-size: 13px; color: var(--dim); }
.ship:has(input:checked) { border: 2px solid var(--ink); background: rgba(214, 236, 255, 0.12); padding: 11px; }
.ship:has(input:checked) b::before { content: "● "; }
.ship:not(:has(input:checked)) b::before { content: "○ "; color: var(--dim); }

.brief-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; border-bottom: 1px solid var(--faint); padding-bottom: 12px; margin-bottom: 16px; }
.brief-head h2 { margin: 0; }
.pilot { text-align: right; }
.pilot b { font-size: 18px; display: block; }
.pilot span { font-size: 13px; color: var(--dim); }
.pilot .label { margin-top: 0; }
.brief-body { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }
.speaker { display: flex; align-items: center; gap: 10px; font: 600 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.insignia { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2; }
.objs { list-style: none; padding: 0; margin: 6px 0; }
.objs li { padding: 3px 0; }
.objs li i { font-style: normal; font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-left: 8px; }
.objs li.done { color: var(--ink); font-weight: 600; }
.objs li.failed, .objs li.pending { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.navmap { width: 300px; height: 300px; display: block; }
.navmap .bg { fill: rgba(0, 0, 0, 0.45); stroke: var(--edge); }
.navmap .grid { stroke: var(--faint); stroke-width: 0.5; }
.navmap .route { fill: none; stroke: var(--dim); stroke-width: 1.4; stroke-dasharray: 5 4; }
.navmap .nav { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.navmap .carrier { fill: var(--ink); }
.navmap .lbl { fill: var(--ink); font: 600 10px var(--mono); text-anchor: middle; letter-spacing: 0.1em; }
.stats { display: flex; gap: 36px; flex-wrap: wrap; }
.stats b { font: 700 30px var(--mono); display: block; }
.stats span { font-size: 13px; color: var(--dim); }
.news { color: var(--ink) !important; font-weight: 600; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.keys { border-collapse: collapse; width: 100%; }
.keys th { text-align: left; font: 600 12px var(--mono); letter-spacing: 0.06em; color: var(--ink); padding: 6px 12px 6px 0; vertical-align: top; white-space: nowrap; }
.keys td { font-size: 15px; color: #c6d6e6; padding: 6px 0; border-bottom: 1px solid var(--faint); }

@media (max-width: 760px) {
  .panel { padding: 20px 18px; }
  .panel h2 { font-size: 26px; }
  .brief-body, .cols { grid-template-columns: 1fr; }
  .navmap { width: 100%; height: auto; max-width: 300px; }
  .ships { grid-template-columns: 1fr; }
  .pilot { text-align: left; }
}

/* ---- 1991 edition: hard pixels, a 256-colour look, DOS-era menus ---- */
@font-face { font-family: Silkscreen; src: url(../fonts/Silkscreen-Regular.woff2) format("woff2"); font-display: block; }
body.retro { --pixel: Silkscreen, monospace; --ink: #f4f4f4; --dim: #a8a8a8; --faint: #545454; --panel: #00006c; --edge: #a8a8a8; }
body.retro canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
body.retro #ui.scrim { background: rgba(0, 0, 0, 0.35); }
body.retro .panel { background: var(--panel); clip-path: none; backdrop-filter: none; border: 0;
  box-shadow: inset 2px 2px 0 #5454fc, inset -2px -2px 0 #000030, 4px 4px 0 #000; padding: 22px 26px; }
body.retro .panel p, body.retro .panel li, body.retro .keys td { font: 16px/1.45 "Courier New", Courier, monospace; color: #fcfcfc; }
body.retro .panel h2, body.retro .panel h3, body.retro .label, body.retro button, body.retro .title .sub, body.retro .field, body.retro .speaker,
body.retro .ship b, body.retro .keys th, body.retro .stats b, body.retro .objs li i, body.retro .navmap .lbl, body.retro .pilot b { font-family: var(--pixel); font-weight: 400; letter-spacing: 0.04em; }
body.retro .panel h2 { font-size: 24px; color: #fcfc54; text-shadow: 2px 2px 0 #000; }
body.retro .label { font-size: 8px; color: #54fcfc; }
body.retro button { font-size: 16px; background: #a8a8a8; color: #000; border: 0; clip-path: none; text-transform: uppercase;
  box-shadow: inset 2px 2px 0 #fcfcfc, inset -2px -2px 0 #545454; padding: 10px 18px; }
body.retro button:hover, body.retro button:focus-visible { background: #fcfcfc; color: #000; }
body.retro button.primary { background: #fcfc54; color: #000; box-shadow: inset 2px 2px 0 #fcfcfc, inset -2px -2px 0 #a85400; }
body.retro button.primary:hover { background: #fcfcfc; }
body.retro .menu button span, body.retro button.primary span { color: #303030; font-size: 8px; }
body.retro .seg button.on { background: #fcfcfc; box-shadow: inset 2px 2px 0 #545454, inset -2px -2px 0 #fcfcfc; }
body.retro .title h1 { font-family: var(--pixel); font-weight: 400; font-size: clamp(36px, 10vw, 96px); letter-spacing: 0.06em; margin: 0;
  color: #fcfc54; text-shadow: 4px 4px 0 #a85400, 8px 8px 0 #000; }
body.retro .title .edition { font-family: var(--pixel); font-size: 32px; color: #54fcfc; text-shadow: 3px 3px 0 #000; margin-top: 10px; }
body.retro .title .sub { font-size: 16px; color: #fcfcfc; text-shadow: 2px 2px 0 #000; }
body.retro .title .foot { font: 14px "Courier New", monospace; color: #fcfcfc; text-shadow: 1px 1px 0 #000; }
body.retro .field input { font-family: var(--pixel); background: #000; color: #54fc54; border: 2px solid #a8a8a8; }
body.retro .ship { border: 2px solid #545454; }
body.retro .ship:has(input:checked) { border: 2px solid #fcfc54; background: #0000a8; }
body.retro .navmap .bg { fill: #000; stroke: #a8a8a8; }
body.retro .navmap .grid { stroke: #00a8a8; }
body.retro .navmap .route { stroke: #fcfc54; }
body.retro .navmap .nav { stroke: #fcfcfc; }
body.retro .navmap .carrier { fill: #fcfcfc; }
body.retro .navmap .lbl { fill: #fcfcfc; font-size: 8px; }
body.retro .objs li.done { color: #fcfcfc; }
body.retro .news { color: #fcfc54 !important; }