/* css/air-gauge.css: Launch Night's AIR gauge (js/moon/air-gauge.js), its default HUD's rules (.rui-hud.is-drive .rui-dash)
   with the theme variables they read. .ln-dash is a box of --g-d by 1.02 --g-d; the page places it. */
.ln-dash {
  --g-d: clamp(124px, 19vh, 184px);
  --hg-core: #FF6E56;
  --hg-hot: #FFEDE6;
  --hg-ink: #FF4A32;
  --hg-line: rgb(255 40 28 / .26);
  --hg-ring: #FF2A1C;
  --hg-under: 0 0 .1em rgb(0 0 0 / .78), 0 0 .3em rgb(0 0 0 / .42);
  --hg-t: 0 0 .03em currentColor, 0 0 .12em rgb(255 26 20 / .7), 0 0 .45em rgb(255 26 20 / .2), var(--hg-under);
  --rf-core: #FF9478;
  --rf-red: #FF1A14;
  --rf-warn: #FFB21F;
  --rf-under: 0 0 .05em rgb(0 0 0 / .95), 0 0 .18em rgb(0 0 0 / .75), 0 0 .5em rgb(0 0 0 / .5);
  --rf-t: 0 0 .03em currentColor, 0 0 .14em rgb(255 26 20 / .9), 0 0 .5em rgb(255 26 20 / .34), var(--rf-under);
  --rf-tv: 0 0 .03em currentColor, 0 0 .14em rgb(255 92 0 / .85), 0 0 .5em rgb(255 40 0 / .32), var(--rf-under);
  --rui-font: 'Saira', 'Eurostile', 'Bahnschrift', 'DIN Alternate', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rui-font-num: var(--rui-font);
  --rui-st-ext: 125%;
  position: relative;
  width: var(--g-d);
  height: calc(1.02 * var(--g-d));
  pointer-events: none;
  user-select: none;
}
.ln-dash::before { content: ''; position: absolute; left: calc(-.04 * var(--g-d)); top: calc(-.04 * var(--g-d)); width: calc(1.08 * var(--g-d)); height: calc(1.08 * var(--g-d)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0) 72%, rgb(4 0 0 / .12) 83%, rgb(0 0 0 / 0) 94%); }

.ln-dash .rui-gauge { --air-glow: .38; display: block; position: absolute; inset: 0; }
.ln-dash .rui-gauge::before { content: ''; position: absolute; left: calc(-.05 * var(--g-d)); top: calc(-.05 * var(--g-d)); width: calc(1.1 * var(--g-d)); height: calc(1.1 * var(--g-d)); border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 52 36 / .05) 0 1px, rgb(255 52 36 / 0) 1px 3px),
    radial-gradient(closest-side, rgb(24 2 2 / .26), rgb(14 1 1 / .18) 64%, rgb(10 0 0 / 0));
  -webkit-mask: radial-gradient(closest-side, #000 78%, transparent); mask: radial-gradient(closest-side, #000 78%, transparent); }

/* speed and gear inside the ring */
.ln-dash > .rui-speed { position: absolute; left: 50%; top: calc(.468 * var(--g-d)); width: 0; height: 0; display: block; line-height: 1; }
.ln-dash > .rui-speed::before { content: ''; position: absolute; left: 0; top: calc(.02 * var(--g-d)); width: calc(.66 * var(--g-d)); height: calc(.38 * var(--g-d)); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(6 0 0 / .2), rgb(6 0 0 / .09) 60%, rgb(6 0 0 / 0)); }
.ln-dash .rui-speed__n { position: absolute; left: 0; top: calc(.012 * var(--g-d)); transform: translate(-50%, -50%);
  font-family: var(--rui-font-num); font-stretch: var(--rui-st-ext); font-weight: 500; font-size: calc(.3 * var(--g-d)); line-height: 1; padding: .5em; margin: 0;
  text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: pre; color: var(--hg-core);
  text-shadow: 0 0 .02em #FF8A80, 0 0 .12em rgb(255 26 20 / .62), 0 0 .45em rgb(255 26 20 / .18), var(--hg-under); }
.ln-dash .rui-speed__u { position: absolute; left: 0; top: calc(.125 * var(--g-d) + 11px); transform: translate(-50%, -50%); margin: 0; padding: 0 0 0 .14em; white-space: nowrap;
  font-family: var(--rui-font); font-stretch: var(--rui-st-ext); font-weight: 650; font-size: max(11px, .07 * var(--g-d)); letter-spacing: .24em; line-height: 1; text-transform: uppercase;
  color: var(--hg-ink); text-shadow: var(--hg-t); opacity: .85; }
.ln-dash .rui-gauge__top { position: absolute; left: 50%; top: calc(.25 * var(--g-d)); transform: translate(-50%, -50%); display: flex; align-items: center; gap: max(5px, .036 * var(--g-d)); white-space: nowrap; line-height: 1; }
.ln-dash .rui-gauge__gear { display: grid; }
.ln-dash .rui-gauge__g { grid-area: 1 / 1; text-align: center; font-family: var(--rui-font); font-stretch: var(--rui-st-ext); font-weight: 650; font-size: calc(.118 * var(--g-d)); letter-spacing: 0;
  color: var(--hg-hot); text-shadow: 0 0 .03em currentColor, 0 0 .1em var(--rf-red), 0 0 .2em rgb(255 26 20 / .8), 0 0 .55em rgb(255 26 20 / .38), var(--hg-under); }

/* the ring: lit length = air */
.ln-dash .rui-ring { position: absolute; left: 0; top: 0; width: var(--g-d); height: var(--g-d); overflow: visible; mix-blend-mode: screen; opacity: .6; }
.ln-dash .rui-ring circle { fill: none; stroke-linecap: butt; }
.ln-dash .rui-ring__in { stroke: var(--hg-line); stroke-width: .45; opacity: .7; }
.ln-dash .rui-ring__track { stroke: var(--hg-line); stroke-width: .6; transition: stroke 200ms linear; }
.ln-dash .rui-ring__lit { stroke: var(--hg-ring); stroke-width: 1.05; stroke-linecap: round; opacity: .95; filter: drop-shadow(0 0 .6px rgb(255 60 40 / .95)); transition: stroke 200ms linear; }
.ln-dash .rui-ring__glow { stroke: rgb(255 30 20 / .55); stroke-width: 5.5; filter: blur(2.2px); opacity: var(--air-glow); transition: opacity 200ms linear, stroke 200ms linear; }
.ln-dash .rui-ring__ticks { fill: none; stroke: rgb(255 60 40 / .85); stroke-width: .75; filter: drop-shadow(0 0 .6px rgb(255 26 20 / .9)); }
.ln-dash .rui-ring__q { fill: none; stroke: rgb(255 60 40 / .3); stroke-width: .5; }
.ln-dash .rui-ring circle.rui-ring__head { fill: #FF8A70; stroke: none; opacity: 0; filter: drop-shadow(0 0 1px rgb(255 60 40 / .95)) drop-shadow(0 0 2.5px rgb(255 26 20 / .6)); transition: opacity 160ms linear, fill 200ms linear; }
.ln-dash .rui-gauge.is-mid .rui-ring__head { opacity: 1; }

/* "Thruster nn%" under the ring */
.ln-dash .rui-thrd { position: absolute; left: 50%; top: max(.9 * var(--g-d), .843 * var(--g-d) + 10px); transform: translate(-50%, -50%); display: flex; align-items: baseline; justify-content: center; column-gap: max(4px, .03 * var(--g-d)); white-space: nowrap; line-height: 1; isolation: isolate; }
.ln-dash .rui-thrd::before { content: ''; position: absolute; left: -12px; right: -12px; top: -7px; bottom: -7px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(6 0 0 / .28), rgb(6 0 0 / .14) 62%, rgb(6 0 0 / 0)); }
.ln-dash .rui-thrd__l { font-family: var(--rui-font); font-stretch: 100%; font-weight: 500; font-size: max(11px, .056 * var(--g-d)); letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  color: rgb(255 74 50 / .58); text-shadow: 0 0 .03em currentColor, 0 0 .14em rgb(255 26 20 / .45), var(--hg-under); }
.ln-dash .rui-thrd__v { display: inline-block; min-width: calc(3ch + .5em); text-align: left; font-family: var(--rui-font-num); font-stretch: var(--rui-st-ext); font-weight: 600; font-size: max(12px, .085 * var(--g-d)); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--hg-core); text-shadow: var(--hg-t); }
.ln-dash .rui-thrd[data-n="2"] .rui-thrd__v { min-width: calc(2ch + .5em); }
.ln-dash .rui-thrd[data-n="1"] .rui-thrd__v { min-width: calc(1ch + .5em); }
.ln-dash .rui-thrd__n { white-space: pre; }
.ln-dash .rui-thrd__pc { font-size: .7em; margin-left: .06em; }

/* firing, low (< 20 %), empty */
.ln-dash .rui-gauge.is-firing { --air-glow: .95; }
.ln-dash .rui-gauge.is-firing .rui-ring__lit { stroke: #FF6A4C; transition-duration: 60ms; }
.ln-dash .rui-gauge.is-firing .rui-ring__glow { stroke: rgb(255 70 36 / .85); transition-duration: 60ms; }
.ln-dash .rui-gauge.is-firing circle.rui-ring__head { fill: #FFA48E; transition-duration: 60ms; }
.ln-dash .rui-gauge.is-firing .rui-thrd__v { color: var(--rf-core); }
.ln-dash .rui-gauge.is-low .rui-ring__lit { stroke: #FFA21F; }
.ln-dash .rui-gauge.is-low .rui-ring__glow { stroke: rgb(255 140 0 / .5); }
.ln-dash .rui-gauge.is-low circle.rui-ring__head { fill: #FFE08A; }
.ln-dash .rui-gauge.is-low .rui-thrd__v { color: var(--rf-warn); text-shadow: var(--rf-tv); }
.ln-dash .rui-gauge.is-empty .rui-ring__track { stroke: #FF1A14; stroke-width: .8; }
.ln-dash .rui-gauge.is-empty .rui-thrd__v { color: var(--rf-red); text-shadow: var(--rf-t); }

/* The city's page: driving the Roadster (Launch Night physics), the gauge over the camera switch in place of the speed
   panel, and AUTO-LAND's state between them (as on the Moon page) */
#ln-air { position: absolute; right: 50%; transform: translateX(50%); bottom: calc(100% + 26px); display: none; }
#ln-al { position: absolute; right: 0; bottom: calc(100% + 6px); width: 100%; text-align: center; display: none;
  font: 650 11px/1 'Saira', Inter, system-ui, sans-serif; font-stretch: 125%; letter-spacing: .2em; color: #FF4A32;
  text-shadow: 0 0 .14em rgb(255 26 20 / .7), 0 0 .1em rgb(0 0 0 / .78), 0 0 .3em rgb(0 0 0 / .42); }
#ln-al:empty { visibility: hidden; }
body.ln-phys[data-mode='roadster'] #ln-air, body.ln-phys[data-mode='roadster'] #ln-al { display: block; }
body.ln-phys[data-mode='roadster'] #hud-cluster .gauge { display: none; }