/* Instruments printed on a shared visor: curved tracks and open readouts. */
body #vitals, body #flight-console, body #flight-heading {
  background:none; border:0; border-radius:0; box-shadow:none;
  text-shadow:0 1px 3px #021316,0 0 8px #02131680;
}
/* The compass follows the crown, with a clear centre for the live bearing. */
body #flight-heading, body:not(.hud-expanded) #flight-heading {
  top:12px; width:300px; height:86px; padding:0; display:block;
}
body:not(.hud-expanded) #flight-heading { width:218px; height:68px; }
body #flight-heading::before { display:none; }
.heading-visor { display:block; width:100%; height:100%; overflow:visible; }
.heading-glass { fill:url(#heading-glass); }
.heading-rail { fill:none; stroke:var(--hud-orange); stroke-width:1; opacity:.8; }
.heading-calibration { fill:none; stroke:#83c9bc; stroke-width:.6; stroke-dasharray:1 9; opacity:.5; }
.heading-index { fill:var(--hud-orange); }
.heading-tick line { stroke:#8bb6ad; stroke-width:1; }
.heading-tick.major line { stroke:var(--hud-cyan); }
.heading-tick text { fill:#b0c9bf; font:9px 'Share Tech Mono',monospace; text-anchor:middle; }
.heading-tick.major text { fill:var(--hud-cyan); }
body #flight-heading > .micro { position:absolute; top:0; width:100%; text-align:center; font-size:7px; }
body #flight-heading #hud-heading {
  position:absolute; left:50%; top:29%; transform:translateX(-50%); min-width:0;
  font-size:25px; line-height:1; text-align:center;
}
body:not(.hud-expanded) #flight-heading #hud-heading { font-size:21px; }
body #flight-heading #hud-bearing {
  position:absolute; top:66%; left:50%; transform:translateX(-50%); min-width:0;
  font-size:9px; line-height:1; letter-spacing:.13em;
}
body #colonycompass { top:104px!important; background:none!important; text-shadow:0 1px 3px #021316!important; }
@media(max-width:1200px) {
  body #flight-heading { width:242px; height:80px; }
  body #colonycompass { top:96px!important; }
}
@media(max-width:620px) {
  body #flight-heading, body:not(.hud-expanded) #flight-heading { top:12px; width:154px; height:50px; right:12px; }
  body #flight-heading #hud-heading, body:not(.hud-expanded) #flight-heading #hud-heading { font-size:18px; }
  body #flight-heading #hud-bearing { font-size:8px; }
  body #colonycompass { left:14px!important; top:94px!important; right:auto!important; transform:none!important; max-width:150px; font-size:7px!important; }
}
@media(max-height:450px) and (min-width:621px) {
  body.touch #flight-heading, body.touch:not(.hud-expanded) #flight-heading { top:7px; width:180px; height:44px; }
  body.touch #flight-heading #hud-heading, body.touch:not(.hud-expanded) #flight-heading #hud-heading { font-size:16px; }
  body.touch #flight-heading #hud-bearing { font-size:7px; top:68%; }
  body.touch #flight-heading > .micro { display:none; }
}

/* The left wing falls toward the chin; each live track follows that contour. */
body #vitals { padding:0 8px 3px; }
body #vitals::before {
  inset:0 -32px -9px -8px; border:0; border-radius:0; z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 125' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%2306181c' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%2306181c' stop-opacity='.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0Q100 33 260 42V124Q100 115 0 70Z' fill='url(%23g)'/%3E%3Cpath d='M0 77Q100 122 260 124' fill='none' stroke='%23eb8055' stroke-opacity='.65'/%3E%3Cpath d='M2 84Q100 129 255 132' fill='none' stroke='%2389c6b5' stroke-dasharray='1 10' stroke-opacity='.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
body #vitals .instrument-header { margin:0; padding:4px 0 8px; background:none; }
body #vitals .vital-values { margin:0; padding:0 0 11px; gap:19px; }
body #vitals .vital-values > :last-child { translate:0 12px; }
body #vitals .vital-values strong { margin-top:3px; }
body #vit-hpwrap, body #vit-enwrap { display:none; }
.vital-arcs { display:block; width:100%; height:35px; overflow:visible; fill:none; }
.vital-track, #vit-health-arc { stroke-width:4; }
.vital-shield-track, #vit-shield-arc { stroke-width:2; }
.vital-track, .vital-shield-track { stroke:#718f8855; }
#vit-health-arc, #vit-shield-arc { stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset .26s ease-out; }
#vit-health-arc { stroke:var(--hud-orange); }
#vit-shield-arc { stroke:var(--hud-cyan); }
body #vitals.low #vit-health-arc { stroke:var(--bad); }
body:not(.hud-expanded) #vitals { padding-top:0; padding-bottom:3px; }
body:not(.hud-expanded) #vitals .vital-values { gap:15px; }

/* Boost is the centre dial; speed and altitude sit along its curved wings. */
#hud-launch-boost {
  position:absolute; left:0; right:0; bottom:calc(100% + 10px);
  padding:9px 12px; background:rgba(4, 20, 24, .9);
  border-left:2px solid var(--hud-cyan); color:var(--hud-cyan);
  font-size:9px; letter-spacing:.08em;
}
#hud-launch-boost[hidden] { display:none; }
.launch-boost-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.launch-boost-heading strong { font-size:18px; font-weight:400; }
.launch-boost-track { height:4px; margin:6px 0; background:#76bbb32b; overflow:hidden; }
.launch-boost-track > span { display:block; height:100%; background:currentColor; transform-origin:left; transition:transform .1s linear; }
#hud-launch-phase { font-size:8px; color:#b1ccc6; }
#hud-launch-boost.low { color:var(--hud-orange); border-color:var(--hud-orange); }
@media(max-width:1000px) {
  #hud-launch-boost { padding:5px 8px; bottom:calc(100% + 4px); font-size:7px; }
  .launch-boost-heading strong { font-size:14px; }
  #hud-launch-phase { font-size:6px; }
}
@media(max-height:560px) and (orientation:landscape) {
  body.touch #hud-launch-boost { bottom:auto; top:calc(100% + 8px); }
}
body #flight-console::before {
  inset:0 -10px -7px; border:0; border-radius:0; z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%2306181c' stop-opacity='.05'/%3E%3Cstop offset='1' stop-color='%2306181c' stop-opacity='.87'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 30Q180 0 360 30V110Q180 154 0 110Z' fill='url(%23g)'/%3E%3Cpath d='M0 111Q180 155 360 111' fill='none' stroke='%237dcabc' stroke-opacity='.5'/%3E%3Cpath d='M8 117Q180 158 352 117' fill='none' stroke='%23adcec1' stroke-dasharray='1 11' stroke-opacity='.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
body #flight-console::after { bottom:-5px; }
body #flight-console .instrument-header { background:none; padding:5px 16px 0; }
body #flight-console .flight-body {
  display:grid; grid-template-columns:minmax(0,1fr) 132px minmax(0,1fr); align-items:center;
  padding:8px 10px 8px; gap:4px 8px;
}
body #flight-console .energy-dial { grid-column:2; grid-row:1; }
body #flight-console .flight-metrics { display:contents; }
body #flight-console .metric { grid-row:1; text-align:center; align-self:center; padding-top:15px; }
body #flight-console .metric:first-child { grid-column:1; }
body #flight-console .metric:nth-child(2) { grid-column:3; }
body #flight-console .metric .unit { display:block; margin:2px 0 0; font-size:8px; }
body #flight-console .metric .micro { font-size:8px; letter-spacing:.07em; }
body #flight-console .metric strong { font-size:24px; }
body #flight-console .flight-meta { grid-column:1/-1; grid-row:2; border:0; padding-top:5px; }
body:not(.hud-expanded) #flight-console .flight-body { grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr); padding:6px 8px 8px; gap:5px; }
body:not(.hud-expanded) #flight-console .metric strong { font-size:18px; }
body:not(.hud-expanded) #flight-console .metric .micro { font-size:7px; }

@media(max-width:1000px) {
  body #vitals, body.touch #vitals { padding:0 8px 3px; }
  body #vitals .vital-values, body:not(.hud-expanded) #vitals .vital-values { gap:12px; }
  body #vitals .instrument-header { font-size:8px; }
  body #vitals .instrument-header > :last-child { font-size:7px; }
  body #flight-console .flight-body, body:not(.hud-expanded) #flight-console .flight-body { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); gap:3px; padding:7px 5px 8px; }
  body #flight-console .energy-dial, body:not(.hud-expanded) #flight-console .energy-dial { width:72px; }
  body #flight-console .energy-dial svg { width:72px; height:56px; }
  body #flight-console .energy-value { top:16px; }
  body #flight-console .energy-value > strong { font-size:23px; }
  body #flight-console .metric { padding-top:9px; }
  body #flight-console .metric strong { font-size:16px; }
  body #flight-console .metric .micro { font-size:6px; }
  body #flight-console .metric .unit { font-size:7px; }
  body #flight-console .energy-value > span { font-size:5px; }
  body #hud-energy-state { font-size:5px; }
}
@media(max-width:620px) {
  body #vitals .vital-values { padding-bottom:8px; }
  .vital-arcs { height:30px; }
  body #vitals::before { right:-15px; }
  body #flight-console::before { left:0; right:0; }
  body #flight-heading::before { left:-8px; right:-8px; }
}
@media(prefers-reduced-motion:reduce) {
  #vit-health-arc, #vit-shield-arc { transition:none; }
}