/* Jet Combat Sim web kit: the in-flight avionics of the game rebuilt in HTML and CSS.
   Source of every shape, size and colour: the wired HUD code and its hot tuning (README.md has the per-component table):
     music unit        crates/aura_flight_hud/src/flight/hud/music_unit.rs (frame ui/flight_v2/music_frame.png, 400 x 120)
     points unit       crates/aura_flight_hud/src/flight/hud/points_unit/ + assets/ui/points_unit.json (340 x 478)
     flight computer   crates/aura_flight_hud/src/flight/hud/computer/ + assets/ui/flight_computer.json (540 x 296)
   The housings are CSS (the kit PNGs were themselves exported from the same layered HTML housing,
   tools/ui/flight-computer-v15/html/fc.css + music.css); the glass screens and key caps use the kit PNGs exactly as the
   game draws them (screen_inset.png 9-slice 44 px, key_cap*.png stretched, icons as tinted masks). Text, glows,
   readouts, pills, bars, segment arcs and the radar are CSS. Font: Russo One, the game's UI font for every HUD text
   (assets/fonts/fonts.json "default"; hud_text() sets no other face).
   Themes: default = the game's colours; .av-site = the website's violet + gold (tools/jbrostudio/src/site.css
   --licence #9b7bff, --licence-pale #d8ccff, --hazard #ffc21a, --ink #120c2c) on the same shapes. */
@font-face{font-family:'Russo One';src:url(fonts/RussoOne-Regular.ttf) format('truetype');font-display:block}
@font-face{font-family:B612;src:url(fonts/B612-Regular.ttf) format('truetype');font-weight:400}
@font-face{font-family:B612;src:url(fonts/B612-Bold.ttf) format('truetype');font-weight:700}

[class*="av-"],[class*="av-"] *{box-sizing:border-box}
/* ---------- tokens ---------- */
:root,.av-game{
  --av-font:'Russo One',sans-serif;
  --av-text:#f6f6f6;            /* tokens.json avionics.white */
  --av-label:#b8c2d1;           /* points_unit.json colours.label [0.72,0.76,0.82] */
  --av-hint:#8c949e;            /* fc.css card hint / dim count */
  --av-divider:#474c50;         /* tokens.json avionics.divider, flight_computer.json colours.divider */
  --av-divider-soft:rgba(255,255,255,.12); /* points_unit.json colours.divider */
  --av-track:#272c2e;           /* tokens.json settings.meter_track, FC colours.track */
  --av-gold:#ffca05;            /* points_unit.json colours.gold [1,0.79,0.02] */
  --av-amber:#ffc905;           /* tokens.json avionics.amber, FC keys.tone_flare */
  --av-cyan:#00eef2;            /* FC keys.tone_look / tone_info */
  --av-green:#00f07a;           /* FC keys.tone_mode / tone_range */
  --av-red:#ff4d4d;             /* tokens.json avionics.red */
  --av-music:#4dd9ff;           /* music_unit station_colour / progress_fill [0.3,0.85,1.0] */
  --av-radar:#9ee6a8;           /* FC palette.normal.ring [0.62,0.9,0.66] */
  --av-line:#19e6ff;            /* points_unit.json colours.line_lit */
  --av-seg-lit:#ffca05;         /* points_unit.json colours.seg_lit */
  --av-seg-dark:#180d03;        /* points_unit.json colours.seg_dark [0.093,0.053,0.013] */
  --av-accent:var(--av-cyan);   /* primary tone of a theme (pill, bar, card frame) */
  --av-accent-2:var(--av-green);
  --av-glass:#000;
  /* housing layers (fc.css .rim/.lip/.groove/.face-rim/.face) */
  --av-rim:linear-gradient(180deg,#6d7279 0%,#3a3e43 6%,#24272b 50%,#1a1c1f 100%);
  --av-lip:linear-gradient(180deg,#2b2e32 0%,#1b1d20 5%,#131518 40%,#0f1012 100%);
  --av-groove:#030304;
  --av-face-rim:linear-gradient(180deg,#3a3e44 0%,#24272b 30%,#1b1d20 100%);
  --av-face:radial-gradient(120% 90% at 50% 0%,#1b1e22 0%,#121417 45%,#0d0f11 100%);
  --av-page:#05070a;
}
.av-site{
  --av-text:#f4f1ff;
  --av-label:#c9bff0;
  --av-hint:#9d93c4;
  --av-divider:#3a3160;
  --av-divider-soft:rgba(216,204,255,.16);
  --av-track:#241d45;
  --av-gold:#ffc21a;            /* site --hazard */
  --av-amber:#ffc21a;
  --av-cyan:#d8ccff;            /* site --licence-pale takes the cyan roles */
  --av-music:#b79dff;
  --av-radar:#b79dff;
  --av-line:#9b7bff;
  --av-seg-lit:#ffc21a;
  --av-seg-dark:#1c1430;
  --av-accent:#9b7bff;          /* site --licence */
  --av-accent-2:#ffc21a;
  --av-glass:#06040f;
  --av-rim:linear-gradient(180deg,#8a7bc4 0%,#4a3f7a 6%,#2a2348 50%,#1c1733 100%);
  --av-lip:linear-gradient(180deg,#2e2650 0%,#1d1838 5%,#15112a 40%,#100d20 100%);
  --av-groove:#04030a;
  --av-face-rim:linear-gradient(180deg,#463c74 0%,#2a2348 30%,#1d1838 100%);
  --av-face:radial-gradient(120% 90% at 50% 0%,#211a40 0%,#161230 45%,#100d22 100%);
  --av-page:#0b0918;
}

/* ---------- housing: the chamfered rugged device body ----------
   Element = rim (2 px gradient border) + lip; ::before = dark groove; ::after = face rim + face.
   --c top chamfer, --cb bottom chamfer, --g groove inset (music 5.8, FC 9.1 design px). */
.av-housing{
  --c:24px;--cb:20px;--g:9px;
  position:relative;isolation:isolate;border:2px solid transparent;
  background:var(--av-lip) padding-box,var(--av-rim) border-box;
  padding:calc(var(--g) + 12px);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--cb)),calc(100% - var(--cb)) 100%,var(--cb) 100%,0 calc(100% - var(--cb)),0 var(--c));
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));
  color:var(--av-text);font-family:var(--av-font);
}
.av-housing::before,.av-housing::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  --ci:calc(var(--c) - var(--g) * .4);--cbi:calc(var(--cb) - var(--g) * .4);
  clip-path:polygon(var(--ci) 0,calc(100% - var(--ci)) 0,100% var(--ci),100% calc(100% - var(--cbi)),calc(100% - var(--cbi)) 100%,var(--cbi) 100%,0 calc(100% - var(--cbi)),0 var(--ci))}
.av-housing::before{inset:var(--g);background:var(--av-groove)}
.av-housing::after{inset:calc(var(--g) + 1.5px);border:1px solid transparent;background:var(--av-face) padding-box,var(--av-face-rim) border-box}
/* pod: the points unit outline, chamfered top and a round bottom (points_unit.json chamfer_px 22, bottom_radius_px 128) */
.av-housing--pod{--c:22px;--cb:0px;border-radius:0 0 128px 128px}
.av-housing--pod::before{border-radius:0 0 120px 120px}
.av-housing--pod::after{border-radius:0 0 118px 118px}
/* lit outline (points_unit line_lit.png: the cyan rim line when the unit is live) */
.av-housing--lit::after{border-width:2px;background:var(--av-face) padding-box,linear-gradient(var(--av-line),var(--av-line)) border-box;filter:drop-shadow(0 0 3px var(--av-line))}
.av-housing--flat{filter:none}

/* ---------- glass: kit screen_inset.png, 9-slice 44 px (FC objective / card, points table) ---------- */
.av-screen{border:9px solid transparent;border-image:url(kit/flight_v2/screen_inset.png) 44 fill / 9px stretch;background-clip:padding-box;padding:4px 6px;color:var(--av-text);min-width:0}
.av-site .av-screen,.av-screen.av-site{border-image:none;border:2px solid #1b1636;border-radius:9px;background:var(--av-glass);box-shadow:inset 0 0 0 1px #000,0 0 0 1px #2e2650;padding:11px 13px}
/* plain glass: black rounded screen with the thin ring, the music unit's screen (screen_radius_px 9) */
.av-glass{background:var(--av-glass);border-radius:9px;box-shadow:inset 0 0 0 1px #1a1d20,0 0 0 1px #000}

/* ---------- key cap: kit key_cap_v16.png drawn unsliced over the pocket (FC), key + label centred ---------- */
.av-key{--tone:var(--av-amber);position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:68px;height:81px;flex:none;background:url(kit/flight_v2/key_cap_v16.png) 0 0/100% 100% no-repeat;font-family:var(--av-font);line-height:1;gap:7px;padding-top:2px;text-decoration:none}
.av-key.is-lit{background-image:url(kit/flight_v2/key_cap_v16_lit.png)}
.av-key>b{font-weight:400;font-size:24px;color:var(--av-text);text-shadow:0 0 4px rgba(255,255,255,.25)}
.av-key>i{font-style:normal;font-size:12.4px;color:var(--tone);text-shadow:0 0 5px color-mix(in srgb,var(--tone) 55%,transparent);white-space:nowrap}
.av-key.is-dim>b,.av-key.is-dim>i{color:#73777e;text-shadow:none}
/* music caps: ui/flight_v2/key_cap.png (slice 23/27/23/25), 34 x 43.5, letter 11 px, icon 14 px, word 6.5 px */
.av-key--small{width:34px;height:43.5px;gap:1px;padding-top:0;background-image:none;border:3px solid transparent;border-image:url(kit/flight_v2/key_cap.png) 23 23 25 23 fill / 3px stretch}
.av-key--small>b{font-size:11px}
.av-key--small>i{font-size:6.5px;color:var(--av-text)}
.av-key--small .av-ico{width:13px;height:13px}

/* tinted kit icons (white PNG glyphs tinted by the game) */
.av-ico{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.av-ico--prev{-webkit-mask-image:url(kit/flight_v2/icon_prev.png);mask-image:url(kit/flight_v2/icon_prev.png)}
.av-ico--next{-webkit-mask-image:url(kit/flight_v2/icon_next.png);mask-image:url(kit/flight_v2/icon_next.png)}
.av-ico--music{-webkit-mask-image:url(kit/flight_v2/icon_music.png);mask-image:url(kit/flight_v2/icon_music.png)}
.av-ico--comms{-webkit-mask-image:url(kit/flight_v2/icon_comms.png);mask-image:url(kit/flight_v2/icon_comms.png)}
.av-ico--flare{-webkit-mask-image:url(kit/flight_v2/icon_flare.png);mask-image:url(kit/flight_v2/icon_flare.png)}
.av-ico--look{-webkit-mask-image:url(kit/flight_v2/icon_look.png);mask-image:url(kit/flight_v2/icon_look.png)}
.av-ico--mode{-webkit-mask-image:url(kit/flight_v2/icon_mode.png);mask-image:url(kit/flight_v2/icon_mode.png)}
.av-ico--info{-webkit-mask-image:url(kit/flight_v2/icon_info.png);mask-image:url(kit/flight_v2/icon_info.png)}
.av-ico--ring{-webkit-mask-image:url(kit/flight_v2/icon_ring.png);mask-image:url(kit/flight_v2/icon_ring.png)}
.av-ico--arrow{-webkit-mask-image:url(kit/flight_v2/icon_bearing_arrow.png);mask-image:url(kit/flight_v2/icon_bearing_arrow.png)}
.av-ico.glow{filter:drop-shadow(0 0 3px currentColor)}

/* ---------- pill (FC "UNDETECTED", music "DNB": tone border, tone text, soft glow) ---------- */
.av-pill{--tone:var(--av-accent);display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:2px 12px;border:1.5px solid var(--tone);border-radius:999px;
  font:12px/1 var(--av-font);color:var(--tone);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 5px color-mix(in srgb,var(--tone) 55%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--tone) 45%,transparent),inset 0 0 6px color-mix(in srgb,var(--tone) 18%,transparent)}
.av-pill--lg{min-height:28px;font-size:16.5px;border-width:2px;padding:3px 18px}

/* ---------- progress / meter bar (music progress, FC BOOST / HULL) ---------- */
.av-bar{--tone:var(--av-accent);--v:.5;position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;min-width:40px}
.av-bar--fc{height:11px;background:var(--av-track)}
.av-bar>i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--tone);box-shadow:0 0 8px color-mix(in srgb,var(--tone) 60%,transparent)}

/* ---------- segment strip (points bar segments / FC bunker track: flat lit and dark cells) ---------- */
.av-segs{--n:18;--on:9;--tone:var(--av-seg-lit);display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;height:12px;min-width:60px}
.av-segs>i{display:block;border-radius:2px;background:var(--av-seg-dark);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.av-segs>i.on{background:var(--tone);box-shadow:0 0 6px color-mix(in srgb,var(--tone) 55%,transparent)}

/* ---------- points table rows (RUN / RUN PB / STREAK / STREAK PB: label left, value right, soft divider) ---------- */
.av-table{display:flex;flex-direction:column}
.av-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 12px;border-top:1px solid var(--av-divider-soft);font-family:var(--av-font)}
.av-row:first-child{border-top:0}
.av-row>.l{font-size:17px;color:var(--av-label);text-transform:uppercase;white-space:nowrap}
.av-row>.v{font-size:24px;color:var(--av-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.av-row>.v.gold{color:var(--av-gold);text-shadow:0 0 6px color-mix(in srgb,var(--av-gold) 40%,transparent)}
.av-row.you>.l,.av-row.you>.v{color:var(--av-cyan)}
.av-row>.rk{width:32px;flex:none;color:var(--av-label);font-size:17px}

/* ---------- count rows (FC threat card: label left, big glowing count right, #474c50 divider) ---------- */
.av-count{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--av-divider);font-family:var(--av-font)}
.av-count:first-child{border-top:0}
.av-count>.l{font-size:15.3px;color:#f0f0f0;text-transform:uppercase}
.av-count>.v{--tone:var(--av-red);font-size:22.3px;color:var(--tone);font-variant-numeric:tabular-nums;text-shadow:0 0 7px color-mix(in srgb,var(--tone) 60%,transparent)}
.av-count>.v.dim{color:var(--av-hint);text-shadow:none}
.av-hint{font:13px/1.2 var(--av-font);color:#8c949e;letter-spacing:1.3px;text-transform:uppercase;text-align:center}
.av-label{font:15.5px/1.1 var(--av-font);color:var(--av-text);text-transform:uppercase}

/* ---------- status card (FC card screen: tone frame with glow on the glass) ---------- */
.av-card{--tone:var(--av-green);border:2px solid var(--tone);border-radius:8px;background:var(--av-glass);padding:12px 14px;
  box-shadow:0 0 8px color-mix(in srgb,var(--tone) 45%,transparent),inset 0 0 10px color-mix(in srgb,var(--tone) 14%,transparent)}

/* ---------- objective strip (FC header: badge ring + arrow, amber order, separator, white distance) ---------- */
.av-objective{display:flex;align-items:center;gap:14px;min-width:0;font-family:var(--av-font)}
.av-badge{--tone:var(--av-amber);position:relative;width:28px;height:28px;flex:none;border:2.5px solid var(--tone);border-radius:50%;color:var(--tone);display:grid;place-items:center;box-shadow:0 0 6px color-mix(in srgb,var(--tone) 45%,transparent)}
.av-badge>.av-ico{width:15px;height:15px;transform:rotate(var(--bearing,-45deg))}
.av-badge>b{font:13px/1 var(--av-font);font-weight:400}
.av-objective>.o{flex:1;min-width:0;font-size:23.5px;line-height:1.1;color:var(--av-amber);text-transform:uppercase;text-shadow:0 0 8px color-mix(in srgb,var(--av-amber) 40%,transparent);overflow-wrap:anywhere}
.av-objective>.sep{width:1px;align-self:stretch;margin:2px 0;background:var(--av-divider)}
.av-objective>.d{font-size:21.5px;color:var(--av-text);white-space:nowrap}

/* ---------- radar (FC radar glass: green rings, cross, range text) ---------- */
.av-radar{--tone:var(--av-radar);position:relative;aspect-ratio:1;border-radius:50%;
  background:
    linear-gradient(color-mix(in srgb,var(--tone) 40%,transparent),color-mix(in srgb,var(--tone) 40%,transparent)) center/1px 100% no-repeat,
    linear-gradient(color-mix(in srgb,var(--tone) 40%,transparent),color-mix(in srgb,var(--tone) 40%,transparent)) center/100% 1px no-repeat,
    radial-gradient(circle closest-side,transparent 0 51%,color-mix(in srgb,var(--tone) 35%,transparent) 51.5% 52.3%,transparent 52.8% 81%,color-mix(in srgb,var(--tone) 30%,transparent) 81.5% 82.3%,transparent 82.8%),
    rgba(0,5,3,.92);
  box-shadow:0 0 0 2.5px var(--tone),0 0 10px color-mix(in srgb,var(--tone) 55%,transparent)}
.av-radar>.blip{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--av-amber);box-shadow:0 0 5px var(--av-amber)}
.av-radar>.me{position:absolute;left:50%;top:76%;width:0;height:0;transform:translate(-50%,-50%);border:9px solid transparent;border-bottom:22px solid var(--av-text);border-top:0}
.av-radar>.rng{position:absolute;left:0;right:0;bottom:3%;text-align:center;font:15px/1 var(--av-font);color:var(--tone)}

/* ---------- dial (points dial: round glass in a bezel, segmented arcs both sides, glowing multiplier) ----------
   --fill 0..1 lights the arcs from the bottom (points_unit.json bar.segments 18, gap 3.5 px; arc 133.5..223.5 deg,
   r 118.3..132.7 around a 92.9 px glass in a 113.7 px bezel). Size with --d (glass diameter). */
.av-dial{--d:186px;--fill:.55;--tone:var(--av-gold);--seg:var(--av-seg-lit);position:relative;width:calc(var(--d) * 1.43);height:calc(var(--d) * 1.43);display:grid;place-items:center;font-family:var(--av-font)}
.av-dial>.bezel{position:absolute;inset:calc(var(--d) * .101);border-radius:50%;background:radial-gradient(circle closest-side,#000 0 80%,#2c3035 81.5%,#15171a 86%,#2a2d32 93%,#101215 98%,#050607 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,.08),0 0 0 2px #050607}
.av-site .av-dial>.bezel{background:radial-gradient(circle closest-side,#000 0 80%,#3a3168 81.5%,#17122e 86%,#2e2650 93%,#120e24 98%,#07050f 100%)}
.av-dial>.glass{position:relative;width:var(--d);height:var(--d);border-radius:50%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--tone) 9%,#000) 0,#000 70%);box-shadow:0 0 0 2px color-mix(in srgb,var(--tone) 35%,#000),inset 0 0 18px rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.av-dial .num{font-size:calc(var(--d) * .38);line-height:1;color:var(--tone);text-shadow:0 0 6px var(--tone),0 0 18px color-mix(in srgb,var(--tone) 60%,transparent)}
.av-dial .num small{font-size:.55em}
.av-dial .cap{font-size:calc(var(--d) * .085);color:var(--av-label);margin-top:4px;text-transform:uppercase}
.av-dial>.arc{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  --span:90deg;
  background:conic-gradient(from 225deg,var(--seg) 0 calc(var(--fill) * var(--span)),var(--av-seg-dark) 0 var(--span),transparent 0);
  -webkit-mask:repeating-conic-gradient(from 225deg,#000 0 3.7deg,transparent 3.7deg 5deg),radial-gradient(circle closest-side,transparent 0 88.8%,#000 89% 99.6%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--seg) 55%,transparent))}
.av-dial>.arc.r{transform:scaleX(-1)}
/* donut inside the dial glass (web use of the dial: slices drawn by inline SVG arcs) */
.av-dial svg{position:absolute;inset:0;margin:auto;width:calc(var(--d) * .92);height:calc(var(--d) * .92)}
.av-dial .glass>*:not(svg){position:relative}

/* ---------- section header: the objective strip on glass ---------- */
.av-head{display:flex;align-items:center;gap:14px;min-width:0}
.av-head>.av-screen{flex:1}
.av-head .o{font-size:26px}
.av-head .sub{display:block;font:14px/1.3 var(--av-font);color:var(--av-label);text-transform:none;text-shadow:none;margin-top:2px}

/* ---------- data row: label left, gauge (bar or segments) in the middle, value right; divider between rows ---------- */
.av-data{display:flex;flex-direction:column}
.av-data>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,40%) auto;gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--av-divider);font-family:var(--av-font)}
.av-data>div:first-child{border-top:0}
.av-data .l{font-size:15.5px;color:var(--av-text);min-width:0}
.av-data .l small{display:block;font-size:12.5px;color:var(--av-label)}
.av-data .v{font-size:20px;color:var(--av-gold);text-align:right;white-space:nowrap;min-width:52px;text-shadow:0 0 6px color-mix(in srgb,var(--av-gold) 35%,transparent)}

/* =====================================================================================================
   Fixed game units, laid out in the game's design pixels (1080p); scale with zoom (e.g. style="zoom:2").
   ===================================================================================================== */

/* ---- music unit 400 x 120 (music_unit.rs defaults / assets/ui/hud.json music_unit) ---- */
.av-music{position:relative;width:400px;height:120px;--c:16.6px;--cb:14.9px;--g:5.8px;padding:0;font-family:var(--av-font)}
.av-music>*{position:absolute}
.av-music>.scr{left:48px;top:8px;width:304px;height:104px}
.av-music>.cover{left:60px;top:12px;width:96px;height:96px;border-radius:7px;overflow:hidden;background:url(kit/flight_v2/cover_fallback.png) center/cover;box-shadow:0 0 0 1px #1a1d20,0 0 0 2px #000}
.av-music>.title{left:168px;top:18px;width:150px;height:22px;font-size:15px;line-height:22px;color:#f2f5f7;white-space:nowrap;overflow:hidden}
.av-music>.av-pill{left:168px;top:48px;width:56px;height:22px;min-height:0;padding:0;--tone:var(--av-music)}
.av-music>.av-bar{left:168px;top:84px;width:150px;--tone:var(--av-music)}
.av-music>.side{width:18px;height:18px;left:326px;color:#f2f5f7}
.av-music>.k1{left:9px;top:11.5px}.av-music>.k2{left:9px;top:65px}.av-music>.k3{left:357px;top:11.5px}.av-music>.k4{left:357px;top:65px}

/* ---- points unit 340 x 478 (assets/ui/points_unit.json layout) ---- */
.av-points{position:relative;width:340px;height:478px;padding:0;--g:9px}
.av-points>*{position:absolute}
.av-points>.scr{left:92.5px;top:40.2px;width:227.1px;height:162.6px;display:flex;flex-direction:column;justify-content:center;padding:2px 0}
.av-points .av-row{flex:1;align-items:center;padding:0 12px;line-height:1}
.av-points .av-table{height:100%}
.av-points .av-row>.l{font-size:14px}
.av-points .av-row>.v{font-size:20px}
.av-points>.av-key{width:66.7px;height:82.3px;background-image:none;border:solid transparent;border-width:11px;border-image:url(kit/points_unit/key_cap.png) 23 23 25 23 fill / 11.5px 11.5px 12.5px 11.5px stretch;gap:6px}
.av-points>.av-key.is-lit{border-image-source:url(kit/points_unit/key_cap_lit.png)}
.av-points>.av-key>b{font-size:30px}
.av-points>.av-key>i{font-size:11px;color:var(--av-gold)}
.av-points>.k1{left:21.2px;top:44px}.av-points>.k2{left:21.2px;top:128.9px;height:81.5px}
.av-points>.av-dial{left:calc(170px - var(--d) * .715);top:calc(319.6px - var(--d) * .715);--d:186px}
/* the recessed arc slots of the housing (dark troughs left and right of the bezel) */
.av-points>.av-dial::before{content:'';position:absolute;inset:-1%;border-radius:50%;background:radial-gradient(circle closest-side,transparent 0 85%,#050607 86% 100%,transparent 100%);
  -webkit-mask:conic-gradient(from 222deg,#000 0 96deg,transparent 0 180deg,#000 0 276deg,transparent 0);mask:conic-gradient(from 222deg,#000 0 96deg,transparent 0 180deg,#000 0 276deg,transparent 0)}
.av-site .av-points>.av-dial::before{background:radial-gradient(circle closest-side,transparent 0 85%,#07050f 86% 100%,transparent 100%)}

/* ---- flight computer 540 x 296 (assets/ui/flight_computer.json landscape.parts) ---- */
.av-fc{position:relative;width:540px;height:296px;--c:29px;--cb:24.9px;--g:9.1px;padding:0;font-family:var(--av-font)}
.av-fc>*{position:absolute}
.av-fc>.top{left:70px;top:23.5px;width:402.4px;height:44.2px;padding:0 12px 0 30px;display:flex}
.av-fc>.low{left:67.3px;top:70.5px;width:404.1px;height:196.2px;padding:0}
.av-fc>.av-radar{left:81px;top:78px;width:178px}
.av-fc>.av-card{left:274.8px;top:78.7px;width:187.2px;height:178.3px;padding:0}
.av-fc>.av-card>*{position:absolute}
.av-card>.c-pill{left:17px;top:14.6px;width:120px;height:28.1px;min-height:0;padding:0;font-size:14px}
.av-card>.c-r1{left:11.6px;right:12.4px;top:43px;height:30px}
.av-card>.c-r2{left:11.6px;right:12.4px;top:76px;height:30px;border-top:1px solid var(--av-divider)}
.av-card>.c-r1>.l,.av-card>.c-r2>.l{font-size:13px}
.av-card>.c-r1>.v,.av-card>.c-r2>.v{font-size:19px}
.av-card>.c-bl{left:12.8px;top:112px;font-size:13px}
.av-card>.c-bt{left:12.8px;top:131px;width:76.7px}
.av-card>.c-hl{left:99.4px;top:112px;font-size:13px}
.av-card>.c-ht{left:99.4px;top:131px;width:76.7px}
.av-card>.c-hint{left:2px;right:2px;top:158px;font-size:10.5px}
.av-fc>.av-key{width:67.97px;height:80.91px}
.av-fc>.kl1{left:2.07px;top:53.26px}.av-fc>.kl2{left:2.07px;top:123.44px}.av-fc>.kl3{left:2.07px;top:193.62px}
.av-fc>.kr1{left:469.96px;top:53.26px}.av-fc>.kr2{left:469.96px;top:123.44px}.av-fc>.kr3{left:469.96px;top:193.62px}
.av-fc>.st{width:18.2px;height:18.2px;opacity:.9}
.av-fc .av-objective>.o{font-size:15.5px;white-space:nowrap;overflow:hidden} /* the game shrinks the order to fit its 213.8 px box (BR-DBBD8C) */
.av-fc .av-objective>.d{font-size:21.5px}