/* Flight-instrument overlay: quiet dark panels over a moving scene, amber for what is active. */
:root {
  --ink: #eef2f6;
  --ink-2: rgba(226, 233, 240, 0.72);
  --ink-3: rgba(226, 233, 240, 0.5);
  --panel: rgba(9, 13, 20, 0.66);
  --panel-solid: rgba(9, 13, 20, 0.86);
  --hair: rgba(255, 255, 255, 0.1);
  --hair-2: rgba(255, 255, 255, 0.18);
  --amber: #ffb547;
  --amber-ink: #1c1203;
  --r: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --cond: "Barlow Condensed", "Barlow", ui-sans-serif, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font: 500 14px/1.4 var(--sans); }
canvas { display: block; width: 100vw; height: 100vh; }
::selection { background: var(--amber); color: var(--amber-ink); }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 3px; border-radius: 5px;
  border: 1px solid var(--hair-2); border-bottom-width: 2px; background: rgba(255,255,255,0.05);
  font: 600 12px/1 var(--cond); letter-spacing: 0.02em; color: var(--ink); }

/* panels share one surface */
#instr, #find .field, #results, #where, #dock, #sheet, #toast, #boot .card {
  background: var(--panel); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--hair); border-radius: var(--r);
}
#ui { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
body.ready #ui { opacity: 1; }
#ui > *, #dockwrap > * { pointer-events: auto; }
body.locked #ui > *, body.locked #dockwrap > * { pointer-events: none; }
body.photo #ui { opacity: 0; }

/* ---- instruments ---- */
#instr { position: absolute; left: 16px; top: 16px; padding: 12px 16px 10px; min-width: 196px; font-variant-numeric: tabular-nums; }
.read { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 6px; }
.read + .read { margin-top: 2px; }
.lbl { font: 600 12px/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.val { font: 600 30px/1.05 var(--cond); letter-spacing: -0.01em; text-align: right; min-width: 3.4ch; }
.unit { font: 500 13px/1 var(--cond); color: var(--ink-2); min-width: 3ch; }
.sub { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-2); }
.sub b { color: var(--amber); font-weight: 600; }

/* ---- compass tape ---- */
#compass { position: absolute; left: 50%; top: 16px; width: min(420px, 44vw); height: 40px; transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
#tape { position: absolute; top: 0; left: 0; height: 26px; white-space: nowrap; will-change: transform; }
#tape span { position: absolute; top: 0; width: 1px; height: 7px; background: var(--ink-3); }
#tape span.maj { height: 12px; background: var(--ink-2); }
#tape b { position: absolute; top: 12px; transform: translateX(-50%); font: 600 12px/1 var(--cond); letter-spacing: 0.04em; color: var(--ink-2); }
#tape b.card { color: var(--ink); font-size: 14px; }
#cmark { position: absolute; left: 50%; top: 0; width: 2px; height: 16px; margin-left: -1px; background: var(--amber); border-radius: 1px; }
#cdeg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: 600 11px/1 var(--cond); color: var(--amber); font-variant-numeric: tabular-nums; }

/* ---- search ---- */
#find { position: absolute; right: 16px; top: 16px; width: min(340px, calc(100vw - 32px)); }
#find .field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; color: var(--ink-2); }
#find .field:focus-within { border-color: rgba(255, 181, 71, 0.6); color: var(--ink); }
#q { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--ink); caret-color: var(--amber); }
#q::placeholder { color: var(--ink-3); }
#q::-webkit-search-cancel-button { display: none; }
#results { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 50vh; overflow: auto; background: var(--panel-solid); }
#results li { padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); line-height: 1.3; }
#results li b { display: block; color: var(--ink); font-weight: 600; }
#results li[aria-selected="true"], #results li:hover { background: rgba(255, 255, 255, 0.07); }
#results li.msg { cursor: default; color: var(--ink-3); }
#where { display: inline-block; margin-top: 6px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; border-radius: 8px; float: right; }

/* ---- dock ---- */
#dockwrap { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
#dock { display: flex; align-items: center; gap: 6px; padding: 6px; }
.seg { display: flex; padding: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); }
.seg button { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--amber); color: var(--amber-ink); font-weight: 600; }
.seg.small { display: inline-flex; }
.seg.small button { height: 30px; font-size: 13px; }
.grp { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px; border-left: 1px solid var(--hair); }
.ib { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.ib:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.ib[aria-pressed="true"] { color: var(--amber); }
output { font: 600 15px/1 var(--cond); font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: center; }
.time { gap: 8px; padding: 0 10px; color: var(--ink-2); }
.time output { min-width: 4.4ch; color: var(--ink); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 120px; height: 20px; background: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #233046, #f0c27a 30%, #8fc3ff 50%, #f0a060 72%, #233046); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #233046, #f0c27a 30%, #8fc3ff 50%, #f0a060 72%, #233046); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--ink); border: 2px solid var(--amber); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--amber); }
.more { display: flex; align-items: center; gap: 7px; height: 38px; margin-left: 4px; padding: 0 10px 0 12px; border: 0; border-left: 1px solid var(--hair); border-radius: 0 8px 8px 0; background: none; color: var(--ink-2); }
.more:hover { color: var(--ink); }
.more .chev { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.more[aria-expanded="true"] { color: var(--amber); }
.more[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---- full controls sheet ---- */
#sheet { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 200px); overflow: auto;
  padding: 18px 22px 20px; background: var(--panel-solid); transform-origin: bottom center; animation: rise 0.35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(4px); } }
#sheet h2 { margin: 0 0 10px; font: 600 13px/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
#sheet .col > h2:not(:first-child) { margin-top: 20px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; align-items: center; }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; color: var(--ink-2); }
.dim { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 6px; border: 1px solid var(--hair); border-radius: 8px; background: rgba(255,255,255,0.03); color: var(--ink-2); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.chips button:hover { border-color: var(--hair-2); color: var(--ink); }
.chips kbd { margin: 0; min-width: 20px; height: 20px; }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 12px; }
.tg { display: flex; align-items: center; gap: 9px; height: 30px; cursor: pointer; color: var(--ink-2); }
.tg input { -webkit-appearance: none; appearance: none; width: 30px; height: 18px; margin: 0; border-radius: 9px; background: rgba(255,255,255,0.14); position: relative; cursor: pointer; transition: background 0.2s var(--ease); }
.tg input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform 0.25s var(--ease); }
.tg input:checked { background: var(--amber); }
.tg input:checked::after { transform: translateX(12px); background: var(--amber-ink); }
.tg:hover { color: var(--ink); }

/* ---- transient ---- */
#hint { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); font-size: 13px; color: var(--ink-2); text-shadow: 0 1px 8px rgba(0,0,0,0.7); pointer-events: none; transition: opacity 0.5s var(--ease); }
#toast { position: absolute; left: 50%; top: 72px; transform: translate(-50%, -6px); padding: 8px 14px; font-weight: 600; opacity: 0; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#flash { position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85); opacity: 0; pointer-events: none; }
#flash.on { animation: boom 1.1s var(--ease); }
@keyframes boom { 0% { opacity: 0.9; transform: scale(0.2); filter: blur(0); } 100% { opacity: 0; transform: scale(4); filter: blur(6px); } }
#foot { position: absolute; right: 16px; bottom: 8px; font-size: 11px; color: var(--ink-3); text-shadow: 0 1px 6px rgba(0,0,0,0.8); pointer-events: none; font-variant-numeric: tabular-nums; }

/* ---- boot ---- */
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(0,0,0,0.15), rgba(0,0,0,0.65)); transition: opacity 0.6s var(--ease); }
#boot.gone { opacity: 0; pointer-events: none; }
#boot .card { width: min(440px, calc(100vw - 32px)); padding: 24px 24px 20px; background: var(--panel-solid); }
#boot h1 { margin: 0 0 8px; font: 600 30px/1.05 var(--cond); letter-spacing: -0.01em; text-wrap: balance; }
#boot p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.5; }
.quick { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; padding: 0; color: var(--ink-2); font-size: 13px; }
.bar { height: 3px; margin-bottom: 14px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width 0.3s var(--ease); }
#go { width: 100%; height: 44px; border: 0; border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--ink-2); font-weight: 600; }
#go:not(:disabled) { background: var(--amber); color: var(--amber-ink); }
#go:not(:disabled):hover { filter: brightness(1.06); }
#go:disabled { cursor: progress; }

@media (max-width: 900px) {
  #compass { display: none; }
  .time input[type="range"] { width: 80px; }
  .more { font-size: 0; gap: 0; }
  #sheet { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #instr { min-width: 0; padding: 10px 12px 8px; }
  .val { font-size: 24px; }
  #find { top: auto; bottom: 96px; }
  #dockwrap { bottom: 30px; }
  #dock { flex-wrap: wrap; justify-content: center; }
  #foot { left: 16px; right: 16px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- planet labels (projected each frame) ---- */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
body.photo #labels { display: none; }
.blabel { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 12px/1 var(--cond); letter-spacing: 0.04em; color: var(--ink); text-shadow: 0 1px 6px rgba(0,0,0,0.9); will-change: transform; }
.blabel i { width: 7px; height: 7px; margin-left: -3.5px; border: 1.5px solid var(--amber); border-radius: 50%; }
.blabel span { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.sub b.body { color: var(--ink); }

/* ---- weapons ---- */
#reticle { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%;
  border: 1.5px solid rgba(255, 181, 71, 0.75); pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); }
#reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--amber); }
body.locked #reticle { opacity: 1; }
body.photo #reticle { opacity: 0; }
.ib.fire { color: var(--amber); }
.danger { display: block; height: 30px; margin: 0 0 12px; padding: 0 12px; border: 1px solid rgba(255, 120, 90, 0.45); border-radius: 8px; background: rgba(255, 90, 60, 0.08); color: #ffb3a0; }
.danger:hover { background: rgba(255, 90, 60, 0.16); }