#hud, #hangar { position: fixed; inset: 0; color: #dfe8ee; font-family: Orbitron, sans-serif; pointer-events: none; }
.hidden { display: none !important; }
#brand { position: absolute; top: 18px; left: 20px; color: #e0a050; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 2px 10px #000; }
#brand span { color: #8ba4b5; margin-left: 8px; font-size: 10px; }
/* Crew Alerting System — red = warning, amber = caution (real-aircraft CAS pattern). */
#cas { position: absolute; top: 48px; left: 18px; width: 210px; z-index: 4; pointer-events: none; }
.cas-masters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 5px; }
.cas-master { padding: 6px 4px; text-align: center; font: 700 8px/1.25 Orbitron,sans-serif; letter-spacing: 1px; color: #3a4248; background: #0a1014; border: 1px solid #243038; opacity: 0.55; }
.cas-master.warn.lit { color: #fff; background: #8a1218; border-color: #ff5555; opacity: 1; box-shadow: 0 0 14px #ff303088; animation: casFlash 0.45s steps(2) infinite; }
.cas-master.caution.lit { color: #1a1200; background: #c48920; border-color: #ffc14d; opacity: 1; box-shadow: 0 0 12px #e0a05088; animation: casFlash 0.7s steps(2) infinite; }
.cas-lamps { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.cas-lamp { padding: 5px 4px; text-align: center; font: 700 8px/1.2 Orbitron,sans-serif; letter-spacing: 0.5px; color: #2a333a; background: #0a1014cc; border: 1px solid #1c262c; min-height: 28px; display: grid; place-items: center; }
.cas-lamp.warn.lit { color: #fff; background: #7a1418ee; border-color: #ff6969; box-shadow: inset 0 0 0 1px #ff696955; animation: casFlash 0.5s steps(2) infinite; }
.cas-lamp.caution.lit { color: #1a1200; background: #b8861fee; border-color: #ffb46f; box-shadow: inset 0 0 0 1px #ffb46f55; }
.cas-lamp.advisory.lit { color: #cfe8f2; background: #123040ee; border-color: #6fd6ff; }
@keyframes casFlash { 50% { filter: brightness(1.35); } }
@media(max-width:700px) {
  #cas { top: auto; bottom: 300px; left: 10px; width: 160px; transform: scale(0.9); transform-origin: bottom left; }
}
.gauge { position: absolute; top: 40%; padding: 12px 16px; background: linear-gradient(110deg,#06090ddd,#111921cc); border: 1px solid #6fd6ff55; border-left: 2px solid #e0a050; font-size: 12px; letter-spacing: 1px; line-height: 1.8; min-width: 150px; box-shadow: 0 8px 30px #0008; }
.gauge b { color: #fff; font-size: 23px; letter-spacing: 0; } #left { left: 18px; } #right { right: 18px; text-align: right; }
/* Mission / trip / status stack — flex so trip timer never covers fuel/cargo line. */
#hudTop { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(920px, 92vw); z-index: 2; pointer-events: none; }
#mission { position: static; transform: none; background: #070a0ddd; border: 1px solid #e0a05088; border-top: 2px solid #e0a050; padding: 9px 20px; font-size: 11px; letter-spacing: 1px; text-align: center; line-height: 1.55; min-width: 300px; box-sizing: border-box; width: 100%; }
#mission b { color: #e0a050; }
#status { position: static; transform: none; color: #b1c4cf; text-align: center; font-size: 10px; letter-spacing: 1px; line-height: 1.55; background: #070a0d99; padding: 6px 14px; box-sizing: border-box; width: 100%; max-width: 100%; }
#atis { position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; width: 100%; box-sizing: border-box; padding: 6px 12px; background: #07141add; border: 1px solid #6fd6ff44; border-left: 2px solid #6fd6ff; color: #9eb8c4; font: 700 9px/1.35 Orbitron,sans-serif; letter-spacing: 1px; text-align: center; }
#atis .atis-k { color: #6fd6ff; }
#atis .hot { color: #ffb46f; }
#atis .warn { color: #ff6969; }
#atis .ok { color: #9dffb0; }
#radar { position: absolute; bottom: 18px; left: 18px; width: 170px; height: 170px; border-radius: 50%; background: #06131be8; border: 1px solid #6fd6ff88; box-shadow: 0 0 22px #000a; }
#attitudeWrap { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); text-align: center; color: #8ba4b5; font-size: 9px; letter-spacing: 2px; }
#attitude { width: 108px; height: 108px; display: block; margin-top: 6px; filter: drop-shadow(0 5px 12px #000); }
#radio { position: absolute; bottom: 18px; right: 18px; width: 310px; min-height: 100px; background: #070a0dee; border: 1px solid #9e7549aa; border-top: 2px solid #e0a050; padding: 10px 12px; font-family: Inter,sans-serif; font-size: 12px; box-shadow: 0 8px 30px #0009; pointer-events: auto; }
.rt { color: #e0a050; font-family: Orbitron,sans-serif; font-size: 10px; letter-spacing: 1.5px; }
#radioLog { min-height: 38px; max-height: 64px; overflow: hidden; color: #ccd4d9; margin-top: 5px; } #radioLog div { margin: 3px 0; }
#radioOpts { display: flex; gap: 5px; margin-top: 5px; } #radioOpts button { flex: 1; background: #17130f; color: #d4b18c; border: 1px solid #634b32; padding: 5px; font-size: 9px; cursor: pointer; }
#radioOpts button:hover { border-color: #e0a050; color: white; }
#msg { position: absolute; top: 29%; width: 100%; text-align: center; font-size: clamp(18px,3vw,30px); color: #e0a050; letter-spacing: 1px; text-shadow: 0 3px 16px #000; }
#lookHint { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); padding: 7px 14px; background: #07141add; border: 1px solid #6fd6ff88; color: #9fdfff; font: 700 11px Orbitron,sans-serif; letter-spacing: 2px; text-shadow: 0 2px 8px #000; pointer-events: none; }
#navigator { position:absolute; right:18px; top:132px; width:245px; padding:10px 13px; box-sizing:border-box; color:#a9bec8; background:#070a0ddd; border:1px solid #6fd6ff66; border-left:2px solid #e0a050; font-size:10px; letter-spacing:1px; line-height:1.8; box-shadow:0 8px 25px #0008; }
#navigator b { color:#e0a050; font-size:12px; }
#nearestNav { position:absolute; right:18px; top:268px; width:245px; padding:8px 13px; box-sizing:border-box; color:#8ba4b5; background:#070a0ddd; border:1px solid #6fd6ff44; border-left:2px solid #6fd6ff; font-size:10px; letter-spacing:1px; line-height:1.7; box-shadow:0 8px 25px #0008; }
#nearestNav b { color:#6fd6ff; font-size:11px; }
#tripTimer { position:static; transform:none; min-width:180px; padding:8px 16px; text-align:center; background:#070a0dee; border:1px solid #e0a05088; border-top:2px solid #e0a050; color:#e0a050; font:700 13px Orbitron,sans-serif; letter-spacing:2px; box-shadow:0 8px 24px #0008; box-sizing:border-box; }
#tripTimer.warn { color:#ffb46f; border-color:#ffb46f88; }
#tripTimer.critical { color:#ff6969; border-color:#ff696988; animation: tripPulse 0.9s ease-in-out infinite; }
@keyframes tripPulse { 50% { opacity: 0.55; } }
#mapPanel { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; padding:0; box-sizing:border-box; background:#050709f2; pointer-events:auto; }
.map-card { flex:1; min-height:0; width:100%; height:100%; display:flex; flex-direction:column; padding:14px 16px 12px; box-sizing:border-box; background:linear-gradient(180deg,#12181e 0%,#090c10 40%); border:none; border-top:3px solid #e0a050; box-shadow:none; }
.map-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-shrink:0; }
.map-card h2 { margin:0; color:#fff; font:700 18px Orbitron,sans-serif; letter-spacing:2px; }
.map-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.map-tools button { background:#11191e; color:#b9cbd3; border:1px solid #406070; padding:8px 12px; font:600 10px Orbitron,sans-serif; letter-spacing:1px; cursor:pointer; }
.map-tools button:hover { color:#fff; border-color:#e0a050; }
#mapZoomInBtn, #mapZoomOutBtn { min-width:36px; font-size:14px; padding:6px 10px; }
#mapZoomLbl { color:#e0a050; font:600 11px Orbitron,sans-serif; letter-spacing:1px; min-width:48px; text-align:center; }
.map-canvas-wrap { flex:1; min-height:0; position:relative; border:1px solid #6fd6ff44; background:#0a1218; cursor:grab; }
.map-canvas-wrap.dragging { cursor:grabbing; }
#areaMap { width:100%; height:100%; display:block; background:#0a1218; touch-action:none; }
.map-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; color:#8ba4b5; font:10px Orbitron,sans-serif; letter-spacing:1px; flex-shrink:0; }
.map-legend .leg::before { content:''; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; vertical-align:middle; }
.map-legend .you::before { background:#e0a050; box-shadow: 0 0 0 2px #e0a05066; }
.map-legend .apt::before { background:#c5d0d6; }
.map-legend .rwy::before { background:#9aa8b0; }
.map-legend .pick::before { background:#e0a050; }
.map-legend .drop::before { background:#ff7b75; }
.map-legend .fbo::before { background:#6fd6ff88; }
.map-legend .wx::before { background:#6fd6ff; box-shadow:0 0 0 3px #6fd6ff33; border-radius:2px; }
.map-legend .rival::before { background:#ff6969; box-shadow:0 0 0 3px #ff696933; border-radius:2px; }
.map-legend .bogey::before { background:#ff9a55; }
#refuelPrompt { position:fixed; bottom:210px; left:50%; transform:translateX(-50%); padding:10px 16px; background:#07141add; border:1px solid #6fd6ffaa; color:#cfe8f2; font:12px Orbitron,sans-serif; letter-spacing:1px; pointer-events:auto; z-index:5; }
#refuelPrompt button { margin-left:10px; background:#12232b; color:#6fd6ff; border:1px solid #6fd6ff88; padding:6px 10px; cursor:pointer; font:600 10px Orbitron,sans-serif; }
#dispatchPanel { position:fixed; inset:0; z-index:22; display:grid; place-items:center; padding:20px; box-sizing:border-box; background:#050709d9; backdrop-filter:blur(8px); color:#dfe8ee; pointer-events:auto; }
.dispatch-card { width:min(920px,96vw); max-height:90vh; overflow:auto; padding:clamp(18px,3vw,32px); box-sizing:border-box; background:linear-gradient(135deg,#17130f,#090c10 65%); border:1px solid #e0a05088; border-top:3px solid #e0a050; box-shadow:0 25px 100px #000; }
.dispatch-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:end; margin-bottom:14px; }
.dispatch-card h2 { color:#fff; font-family:Orbitron,sans-serif; letter-spacing:2px; margin:4px 0 0; }
#dispatchMeta { color:#8ba4b5; font:11px Inter,sans-serif; text-align:right; }
#dispatchJobs { display:flex; flex-direction:column; gap:8px; }
.job-card { background:linear-gradient(105deg,#13171a,#101112); border:1px solid #ffffff22; padding:12px 14px; font:13px/1.55 Inter,sans-serif; }
.job-card.won { border-color:#6fd6ff; }
.job-card.lost { opacity:.45; }
.job-card.active-contract { border-color:#e0a050; background:#1a1510; }
.job-tags { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 4px; }
.job-tags .tag, span.tag { display:inline-block; padding:2px 7px; font:700 9px Orbitron,sans-serif; letter-spacing:1px; border:1px solid #ffffff22; color:#b9cbd3; background:#0c1216; }
.job-tags .tag.priority, span.tag.priority { color:#ffb46f; border-color:#ffb46f66; }
.job-tags .tag.economy { color:#8ba4b5; }
.job-tags .tag.wx { color:#6fd6ff; border-color:#6fd6ff66; }
.job-tags .tag.milk { color:#e0a050; border-color:#e0a05066; }
.job-tags .tag.stand { color:#9dffb0; border-color:#9dffb066; }
.job-tags .tag.rival { color:#ff6969; border-color:#ff696966; }
.job-tags .tag.tier { color:#dfa25d; border-color:#dfa25d66; }
.diff-note { color:#8ba4b5; font:12px/1.45 Inter,sans-serif; margin:0 0 10px; }
.diff-presets { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin-bottom:12px; }
.diff-preset { text-align:left; background:#10161a; color:#dfe8ee; border:1px solid #314048; padding:10px 12px; cursor:pointer; font:12px Inter,sans-serif; }
.diff-preset b { display:block; font:700 12px Orbitron,sans-serif; letter-spacing:1px; color:#e0a050; margin-bottom:4px; }
.diff-preset small { color:#8ba4b5; font-size:11px; line-height:1.35; }
.diff-preset.active { border-color:#e0a050; background:#1a1510; box-shadow:inset 0 0 0 1px #e0a05055; }
.diff-toggles label { display:inline-flex; align-items:center; gap:6px; color:#b9cbd3; font:11px Orbitron,sans-serif; letter-spacing:0.5px; }
.job-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:6px; }
.job-top b { color:#e0a050; font-family:Orbitron,sans-serif; font-size:12px; letter-spacing:1px; }
.job-meta { color:#8c9ca5; font-size:12px; }
.job-auction { margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.job-auction input { width:96px; background:#0d1418; color:#e0a050; border:1px solid #634b32; padding:6px 8px; }
.job-auction button { background:#11191e; color:#b9cbd3; border:1px solid #406070; padding:7px 10px; font:600 10px Orbitron,sans-serif; letter-spacing:1px; cursor:pointer; }
.job-auction button:hover { color:#fff; border-color:#e0a050; }
.job-auction button.ask { border-color:#e0a050; color:#e0a050; }
.npc-bid { color:#ffb46f; font-size:11px; }
.dispatch-foot { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; color:#687d88; font:10px Orbitron,sans-serif; letter-spacing:1px; }
.dispatch-foot button { background:#11191e; color:#b9cbd3; border:1px solid #406070; padding:9px 12px; font:600 10px Orbitron,sans-serif; letter-spacing:1px; cursor:pointer; }
#targetBox { position:absolute; width:48px; height:48px; border:1px solid #ff7b75; color:#ff8781; font-size:9px; text-align:center; text-shadow:0 1px 5px #000; }
#targetBox span { position:absolute; inset:7px; border:1px solid #ff7b7580; }
#targetBox b { position:absolute; top:-15px; left:0; }
#combatWarn { position:absolute; top:21%; left:50%; transform:translateX(-50%); padding:7px 16px; border:1px solid #ff6969; background:#260c0de8; color:#ff7777; font-size:13px; letter-spacing:2px; font-weight:700; text-shadow:0 0 10px #f33; }
#pauseOverlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; box-sizing:border-box; background:#050709d9; backdrop-filter:blur(8px); color:#dfe8ee; }
.pause-card { width:min(780px,96vw); max-height:90vh; overflow:auto; padding:clamp(20px,4vw,38px); box-sizing:border-box; background:linear-gradient(135deg,#17130f,#090c10 65%); border:1px solid #e0a05088; border-top:3px solid #e0a050; box-shadow:0 25px 100px #000; }
.pause-card h2 { color:#fff; font-family:Orbitron,sans-serif; letter-spacing:2px; margin:4px 0 18px; }
#overlayActions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
#overlayActions button,.hangar-actions button { background:#11191e; color:#b9cbd3; border:1px solid #406070; padding:9px 12px; font:600 10px Orbitron,sans-serif; letter-spacing:1px; cursor:pointer; }
#overlayActions button:hover,.hangar-actions button:hover { color:#fff; border-color:#e0a050; }
#overlayActions button.active { color:#e0a050; border-color:#e0a050; }
#overlayContent { font:13px/1.7 Inter,sans-serif; color:#b4c0c7; }
#overlayContent h3 { color:#e0a050; font:700 12px Orbitron,sans-serif; letter-spacing:1px; }
.bind-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; }
.bind-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 9px; background:#ffffff08; border:1px solid #ffffff16; }
.bind-row button { min-width:96px; background:#11191e; color:#6fd6ff; border:1px solid #436070; padding:6px; cursor:pointer; }
.bind-row button.listening { color:#e0a050; border-color:#e0a050; }
.settings-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0; }
.settings-row select,.settings-row input { accent-color:#e0a050; }
#bindNotice { min-height:22px; color:#e0a050; }
.overlay-footer { margin-top:18px; color:#687d88; font:10px Orbitron,sans-serif; letter-spacing:1px; }
.hangar-actions { display:flex; gap:8px; margin-top:12px; }
@media(max-width:700px) { #navigator { right:10px; top:111px; width:185px; font-size:9px; } #nearestNav { right:10px; top:230px; width:185px; font-size:9px; } .bind-list { grid-template-columns:1fr; } }
#hangar { pointer-events: auto; background: radial-gradient(ellipse at 70% 10%,#322418 0,#17130f 35%,#07090b 100%); padding: clamp(22px,5vh,52px) clamp(20px,6vw,80px); overflow: auto; box-sizing: border-box; }
.eyebrow { color: #9b7956; letter-spacing: 3px; font-size: 10px; margin-bottom: 12px; }
#hangar h1 { margin: 0; color: #fff; letter-spacing: 3px; line-height: 1.05; font-size: clamp(29px,5vw,52px); } #hangar h1 span { color: #e0a050; font-size: .68em; }
.sub { color: #98b4c4; margin: 12px 0 22px; letter-spacing: 1px; } #cash { color: #e0a050; font-size: 20px; margin-bottom: 14px; }
.cols { display: flex; gap: 28px; flex-wrap: wrap; max-width: 1480px; } .cols > div { flex: 1; min-width: min(280px,100%); }
.cols h2 { font-size: 13px; letter-spacing: 3px; color: #8ba4b5; border-bottom: 1px solid #ffffff20; padding-bottom: 8px; }
.card { background: linear-gradient(105deg,#13171a,#101112); border: 1px solid #ffffff20; padding: 11px 13px; margin: 7px 0; cursor: pointer; font-family: Inter,sans-serif; font-size: 13px; line-height: 1.6; transition: border-color .15s, transform .15s; }
.card:hover { border-color: #e0a050; transform: translateX(2px); } .card.sel { border-color: #6fd6ff; background: #10202a; } .card.lock { opacity: .45; }
.card.home-field { padding: 9px 12px; font-size: 12px; }
.card.home-field.sel { border-color: #e0a050; background: #1a1510; }
.card.home-field b { color: #e0a050; font-family: Orbitron,sans-serif; letter-spacing: 1px; }
#homeFields { max-height: min(52vh, 520px); overflow: auto; padding-right: 4px; }
.card small { color: #8c9ca5; }
.help { margin-top: 20px; color: #87939a; font-family: Inter,sans-serif; font-size: 11px; line-height: 1.9; }
.help b { color: #e0a050; letter-spacing: 2px; }
@media(max-width:700px) { #left,#right { top:auto; bottom:205px; transform:scale(.82); transform-origin:bottom left; } #right { transform-origin:bottom right; } #radio { width:230px; right:10px; bottom:10px; } #radar { width:125px;height:125px;left:10px;bottom:10px; } #attitudeWrap { bottom:145px; } #hudTop { top:10px; max-width:94vw; gap:6px; } #mission { min-width:0; font-size:9px; padding:7px 12px; } #tripTimer { font-size:11px; padding:6px 12px; } #status { font-size:9px; padding:5px 10px; } #atis { font-size:8px; gap:4px 8px; padding:5px 8px; } }