:root { --amber:#e8a317; --green:#6adf4a; --bg:#060814; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; font-family: system-ui, sans-serif; color:#e8f0e8; background:var(--bg); }
#view { position:fixed; inset:0; }
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
#hud * { pointer-events:auto; }
.top {
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:12px 16px; background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.brand { font-family: Orbitron, sans-serif; color:var(--amber); font-weight:700; }
.brand small { display:block; color:#8a9; font-size:.72rem; font-weight:600; font-family:system-ui,sans-serif; }
.objective {
  max-width:420px; background:rgba(8,14,10,.78); border:1px solid rgba(232,163,23,.45);
  border-radius:10px; padding:8px 12px; font-size:.85rem;
}
.objective strong { color:var(--amber); font-size:.72rem; letter-spacing:.06em; }
.objective p { margin:4px 0 0; }
.userbox { display:flex; gap:8px; align-items:center; }
.btn {
  display:inline-block; padding:6px 10px; border:1px solid #567; border-radius:8px;
  background:rgba(10,16,24,.8); color:#e8f0e8; text-decoration:none; font-weight:600; cursor:pointer; font-size:.85rem;
}
.btn.primary { background:linear-gradient(90deg,var(--amber),#c8c04a); color:#1a1400; border:none; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.res {
  position:absolute; top:78px; right:16px; display:flex; gap:8px;
}
.res-item {
  background:rgba(8,14,10,.8); border:1px solid rgba(232,163,23,.4); border-radius:8px;
  padding:6px 10px; min-width:88px;
}
.res-item span { display:block; font-size:.65rem; color:#9ab; }
.res-item b { color:var(--amber); font-variant-numeric:tabular-nums; }
.dock-panel {
  display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,92vw); background:rgba(8,12,18,.94); border:1px solid rgba(232,163,23,.5);
  border-radius:12px; padding:18px; z-index:20;
}
.dock-panel.open { display:block; }
.dock-panel h2 { margin:0 0 8px; font-family:Orbitron,sans-serif; color:var(--amber); font-size:1.05rem; }
.hint { position:absolute; bottom:148px; left:16px; font-size:.78rem; color:#9ab; background:rgba(0,0,0,.45); padding:6px 10px; border-radius:8px; max-width:46vw; }
.xyz-readout {
  position:absolute; left:16px; bottom:14px; font-variant-numeric:tabular-nums;
  font-family:ui-monospace,monospace; font-size:.8rem; color:#e8a317;
  background:rgba(6,10,16,.85); border:1px solid rgba(232,163,23,.35); border-radius:8px; padding:8px 12px;
}
.space-ctrl {
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:10px;
  background:rgba(6,10,16,.82); border:1px solid rgba(232,163,23,.35);
  border-radius:14px; padding:10px 14px 12px; min-width:min(520px,94vw);
}
.space-ctrl.hidden { display:none; }
.sc-col { display:flex; flex-direction:column; gap:4px; min-width:72px; }
.sc-col label { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#8a9; }
.sc-meter {
  width:72px; height:8px; background:#1a222c; border-radius:4px; overflow:hidden; border:1px solid #345;
}
.sc-meter > i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#2a6a8a,#6adf4a); }
.sc-meter.hull > i { background:linear-gradient(90deg,#844,#e8a317); }
.sc-speed {
  flex:1; min-width:180px;
}
.sc-speed-track {
  position:relative; height:22px; background:#121820; border:1px solid #456; border-radius:6px; cursor:pointer;
}
.sc-speed-fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#1a4a6a,#3a9ad4 60%,#6adf4a);
  border-radius:5px; pointer-events:none;
}
.sc-speed-mark {
  position:absolute; top:-3px; bottom:-3px; width:2px; background:#e8a317; pointer-events:none;
}
.sc-speed-val { font-variant-numeric:tabular-nums; color:#e8a317; font-weight:700; font-size:.95rem; margin-top:2px; }
.sc-speed-val small { color:#89a; font-weight:600; font-size:.72rem; }
kbd { border:1px solid var(--amber); padding:0 5px; border-radius:4px; }
#boot { position:fixed; inset:0; display:grid; place-items:center; background:#060814; z-index:5; font-family:Orbitron,sans-serif; color:var(--amber); }
#boot.hide { display:none; }
.radar-wrap {
  position:absolute; right:16px; bottom:118px; width:220px; max-height:280px; overflow:auto;
  background:rgba(6,10,16,.88); border:1px solid rgba(232,163,23,.4); border-radius:12px; padding:8px;
}
.radar-wrap.hidden { display:none; }
.radar-wrap label { display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#8a9; margin-bottom:6px; }
.env-item {
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid #234;
  color:#dce; padding:6px 2px; cursor:pointer; font-size:.78rem;
}
.env-item:hover { color:#e8a317; }
.env-item .dist { color:#89a; font-variant-numeric:tabular-nums; font-size:.7rem; }
.env-item .dock-mini { padding:2px 6px; font-size:.68rem; }
.station-view {
  display:none; position:fixed; inset:0; z-index:30;
  background:radial-gradient(ellipse at center, #121820 0%, #06080e 70%);
  flex-direction:column;
}
.station-view.open { display:flex; }
.station-view .sv-body { flex:1; display:grid; place-items:center; color:#456; font-size:.9rem; }
.station-view .sv-bar {
  display:flex; justify-content:flex-end; gap:10px; padding:14px 18px;
  border-top:1px solid rgba(232,163,23,.35); background:rgba(0,0,0,.4);
}