/* Game menu screens of the browser edition (menu.js): a 1:1 simplified port of the desktop game's UI.
   Every size is a design pixel of the game's 1920x1080 reference: calc(N * var(--u)), --u set by ui/kit.js.
   Ported sources:
     assets/ui/tokens.json 1-381           avionics palette, gaps, fonts, kit 9-slice parts, menu / modal / settings sizes
     assets/ui/menu_v2/slices.json         panel 80, screen 48, key 44, link 30, cta 44 (drawn at texel x 0.5)
     assets/ui/screens/menu.json 1-215     home panel anchors and sizes (margin = screen_margin 20 + panel inset)
     assets/ui/screens/news.json 1-50, assets/ui/news/manifest.json      NEWS key and panel
     assets/ui/screens/hangar.json 1-100, assets/ui/hangar_v4/manifest.json   hangar column (native texel insets)
     assets/ui/screens/run_pause.json 1-87, assets/ui/pause_v2/manifest.json  RUN PAUSED card (source_scale 2)
     assets/ui/screens/run_results.json 1-73                                 result column
     crates/aura_flight_ui/src/flight/ui/difficulty_picker.rs 345-534       HOW HARD? overlay, chips, keys
     crates/aura_ui_kit/src/settings_kit.rs 249-613, aura_flight_ui settings.rs 1750-2643   settings page
   9-slice art is CSS border-image (slice = texel inset, width = drawn inset). */

@font-face { font-family: 'Russo One'; src: url('assets/fonts/RussoOne-Regular.ttf') format('truetype'); font-display: block; }

.gm {
  --amber: #ffc905; --cyan: #00eef2; --green: #00f07a; --red: #ff4d4d; --white: #f6f6f6;
  --text2: #b8c1c9; --hint: #727478; --divider: #474c50; --link: #e9edf0; --version: #9aa3ab;
  --text: #f2f5fa; --muted: #91a1b8;
  --h-teal: rgb(26, 230, 217); --h-green: rgb(115, 255, 153); --h-text: rgb(240, 245, 250); --h-muted: rgb(140, 158, 173);
  font-family: 'Russo One', sans-serif; color: var(--text); font-size: calc(17 * var(--u)); line-height: 1.2;
  user-select: none; -webkit-user-select: none;
  /* ── size / spacing system (design px of the 1920x1080 reference, scaled by --u) ──
     Spacing scale  tokens.json gap xs 4 / s 8 / m 12 / l 22; modal.key_gap 14 (icon | divider | legend gap).
     Key heights    button.height 46 / primary_height 56 / small_height 38; settings action_height 54, tab_height 40,
                    toggle / slot / mute 38; modal key_height 62 / 76; keycap_height 28.
     Kit paddings   kit.key pad 20 x 6, kit.link pad 12 x 4, kit.screen pad 10, kit.panel pad 16; settings keys use
                    half the part pad (settings_kit KeyLook::soft / action_key: pad_x * 0.5).
     Hairlines      2 design px rules (menu_kit::separator), never thinner than one device pixel, snapped to whole px. */
  --gap-xs: calc(4 * var(--u)); --gap-s: calc(8 * var(--u)); --gap-m: calc(12 * var(--u)); --gap-l: calc(22 * var(--u));
  --key-gap: calc(14 * var(--u));                 /* tokens modal.key_gap / menu.key_gap */
  --key-pad-x: calc(20 * var(--u)); --key-pad-y: calc(6 * var(--u));   /* kit.key pad */
  --link-pad-x: calc(12 * var(--u)); --link-pad-y: calc(4 * var(--u)); /* kit.link pad */
  --screen-pad: calc(10 * var(--u));              /* kit.screen pad */
  --panel-pad: calc(16 * var(--u));               /* kit.panel pad */
  --btn-h: calc(46 * var(--u)); --btn-h-primary: calc(56 * var(--u)); --btn-h-small: calc(38 * var(--u));
  --keycap-h: calc(28 * var(--u)); --keycap-pad: calc(9 * var(--u)); --keycap-font: calc(14 * var(--u));
  --hair: max(1px, round(calc(2 * var(--u)), 1px));   /* menu_kit::separator 2 px, pixel-snapped */
  --hair-1: 1px;                                   /* settings row_divider 1 */
  --focus-w: max(1px, round(calc(2 * var(--u)), 1px)); /* settings focus_outline 2 */
  --focus-off: calc(2 * var(--u));                 /* settings focus_offset 2 */
  --disabled-alpha: .4;                            /* modal.disabled_alpha */
  --hit-min: max(40px, calc(40 * var(--u)));       /* minimum hit height of a pointer target */
}
.gm .hidden { display: none !important; }
/* Browser button chrome reset at zero specificity: every kit class below wins over it (a `.gm button` reset used to
   beat the single-class kit rules and strip their padding, so icons sat on the key edges). */
:where(.gm) button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  outline: none; box-sizing: border-box; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
:where(.gm) button:disabled { cursor: default; opacity: var(--disabled-alpha); }
/* Keyboard Tab focus draws the settings focus outline (focus_outline 2, offset 2, cyan); arrow focus uses .is-focus art. */
:where(.gm) button:focus-visible { outline: var(--focus-w) solid var(--cyan); outline-offset: var(--focus-off); }

/* Tinted kit glyph: white PNG used as a mask over the tone colour (menu_kit icon_bundle). */
.gm-ico { display: inline-block; flex: none; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.gm-img { display: inline-block; flex: none; object-fit: contain; }
/* Key divider: 2 px, divider colour (menu_kit::separator). */
.gm-sep { display: inline-block; flex: none; width: var(--hair); background: var(--divider); }
.gm-rule-h { display: block; flex: none; height: var(--hair); background: var(--divider); width: 100%; }
.gm-rule-v { display: block; flex: none; width: var(--hair); align-self: stretch; background: var(--divider); }

/* ── kit parts (menu_v2, texel x 0.5) ── */
.gm-unit {
  box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/menu_v2/panel.png') 80 fill / calc(40 * var(--u)) / 0 stretch;
  padding: calc(16 * var(--u));
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
}
.gm-screen {
  box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/menu_v2/screen.png') 48 fill / calc(24 * var(--u)) / 0 stretch;
  padding: calc(10 * var(--u));
}
.gm-key {
  box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/menu_v2/key.png') 44 fill / calc(22 * var(--u)) / 0 stretch;
  padding: var(--key-pad-y) var(--key-pad-x);
  display: flex; align-items: center; justify-content: center; gap: var(--key-gap); width: 100%; min-width: 0;
  min-height: var(--hit-min); overflow: hidden;
}
.gm-key:hover { border-image-source: url('assets/ui/menu_v2/key_hover.png'); }
.gm-key:active { border-image-source: url('assets/ui/menu_v2/key_pressed.png'); }
.gm-key.is-focus { border-image-source: url('assets/ui/menu_v2/key_focus.png'); }
.gm-soft {
  box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/menu_v2/link.png') 30 fill / calc(15 * var(--u)) / 0 stretch;
  padding: var(--link-pad-y) var(--link-pad-x); color: var(--link);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); flex: none; white-space: nowrap;
}
/* Selected soft key (settings_kit spawn_key `selected`): every state rests on the cyan focus cut, cyan legend. */
.gm-soft.is-selected, .gm-soft.is-selected:hover, .gm-soft.is-selected:active { border-image-source: url('assets/ui/menu_v2/link_focus.png'); color: var(--cyan); }
.gm-soft:hover { border-image-source: url('assets/ui/menu_v2/link_hover.png'); }
.gm-soft:active { border-image-source: url('assets/ui/menu_v2/link_pressed.png'); }
.gm-soft.is-focus { border-image-source: url('assets/ui/menu_v2/link_focus.png'); }

/* ── home (menu.json) ── */
#menu.gm { background: transparent; }
.gm-home { position: absolute; inset: 0; }
.gm-panel { position: absolute; box-sizing: border-box; }
.gm-p-title { left: calc(36 * var(--u)); top: calc(32 * var(--u)); width: min(calc(540 * var(--u)), 36vw); }
.gm-logo { display: block; width: 100%; aspect-ratio: 3.2; object-fit: contain; }
.gm-p-play { left: calc(36 * var(--u)); top: calc(230 * var(--u)); width: min(calc(720 * var(--u)), 40vw); max-height: 62vh; overflow-y: auto; }
.gm-p-settings { left: calc(36 * var(--u)); bottom: calc(32 * var(--u)); width: min(calc(304 * var(--u)), 24vw); min-width: min(calc(240 * var(--u)), 40vw); }
.gm-text-title { font-size: calc(44 * var(--u)); color: var(--text); }
.gm-text-body { font-size: calc(17 * var(--u)); color: var(--muted); }
.gm-spacer-l { height: calc(22 * var(--u)); flex: none; }
.gm-row { display: flex; gap: calc(12 * var(--u)); }
.gm-row > * { flex: 1 1 0; }
.gm-home-key { color: var(--white); }
.gm-home-key-label { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.gm-home-key.is-stacked { flex-direction: column; justify-content: center; gap: var(--gap-xs); }
/* START FLYING: cyan outline (screen.rs spawn_icon_button PrimaryRun: Outline menu.you_border 2, offset 0). The
   outline hugs the key art's visible face (its 9-slice keeps a 6 design px shadow margin), so it is inset by that. */
.gm-home-key.is-primary { outline: var(--hair) solid var(--cyan); outline-offset: calc(-6 * var(--u)); border-radius: calc(12 * var(--u)); }
.gm-home-key.is-primary.is-focus, .gm-home-key.is-primary:hover { outline-color: var(--white); }

/* ── news (news.json) ── */
.gm-news-key {
  position: absolute; right: calc(16 * var(--u)); bottom: calc(12 * var(--u)); width: calc(240 * var(--u)); height: calc(72 * var(--u));
  box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/news/card.png') 40 fill / calc(20 * var(--u)) / 0 stretch;
  padding: 0 calc(16 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u));
  color: var(--link); font-size: calc(24 * var(--u));
}
.gm-news-key:hover, .gm-news-key.is-focus { border-image-source: url('assets/ui/news/card_hover.png'); }
.gm-news-badge { position: absolute; right: calc(-6 * var(--u)); top: calc(-6 * var(--u)); }
.gm-news { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: none; place-items: center; }
#menu .gm-news:not(.hidden) { display: grid; }
.gm-news-frame {
  box-sizing: border-box; width: min(calc(1040 * var(--u)), 90vw); max-height: 88vh;
  border: 0 solid transparent;
  border-image: url('assets/ui/news/panel_frame.png') 92 36 52 36 fill / calc(92 * var(--u)) calc(36 * var(--u)) calc(52 * var(--u)) / 0 stretch;
  padding: 0 calc(28 * var(--u)) calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u));
}
.gm-news-head { height: calc(92 * var(--u)); display: flex; align-items: center; justify-content: space-between; flex: none; }
.gm-news-title { font-size: calc(34 * var(--u)); color: var(--white); }
.gm-news-close { height: var(--btn-h-small); min-width: calc(110 * var(--u)); font-size: calc(20 * var(--u)); color: var(--link);
  box-sizing: border-box; border: 0 solid transparent; border-image: url('assets/ui/menu_v2/link.png') 30 fill / calc(15 * var(--u)) / 0 stretch;
  padding: 0 var(--link-pad-x); display: inline-flex; align-items: center; justify-content: center; }
.gm-news-close:hover { border-image-source: url('assets/ui/menu_v2/link_hover.png'); }
.gm-news-close.is-focus { border-image-source: url('assets/ui/menu_v2/link_focus.png'); color: var(--cyan); }
.gm-news-list { display: flex; flex-direction: column; gap: calc(12 * var(--u)); overflow: hidden; }
.gm-news-card {
  box-sizing: border-box; width: 100%; flex: none; border: 0 solid transparent;
  border-image: url('assets/ui/news/card.png') 40 fill / calc(20 * var(--u)) / 0 stretch;
  padding: calc(16 * var(--u)) calc(28 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  display: flex; gap: calc(16 * var(--u)); align-items: flex-start; text-align: left;
}
.gm-news-card:hover, .gm-news-card.is-focus { border-image-source: url('assets/ui/news/card_hover.png'); }
.gm-news-text { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
.gm-news-meta { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.gm-news-tag {
  height: calc(28 * var(--u)); min-width: calc(110 * var(--u)); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0 solid transparent; border-image: url('assets/ui/news/tag_dev.png') 0 26 fill / 0 calc(13 * var(--u)) / 0 stretch;
  padding: 0 calc(10 * var(--u)); font-size: calc(15 * var(--u)); color: #0b0f14;
}
.gm-news-tag.tag-update { border-image-source: url('assets/ui/news/tag_update.png'); }
.gm-news-tag.tag-event { border-image-source: url('assets/ui/news/tag_event.png'); }
.gm-news-tag.tag-community { border-image-source: url('assets/ui/news/tag_community.png'); }
.gm-news-date { font-size: calc(15 * var(--u)); color: var(--cyan); }
.gm-news-card-title { font-size: calc(24 * var(--u)); color: var(--white); }
.gm-news-body { font-size: calc(17 * var(--u)); color: var(--text2); }
.gm-news-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-m); flex: none; padding: 0 calc(8 * var(--u)); }
.gm-news-hint, .gm-news-empty { font-size: calc(16 * var(--u)); color: var(--text2); }

/* ── hangar (hangar.json, hangar_v4 native texels) ── */
#menu .gm-hangar { position: absolute; inset: 0; pointer-events: none; }
.gm-hangar-col {
  pointer-events: auto; position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u)); bottom: calc(14 * var(--u));
  width: clamp(calc(340 * var(--u)), 25vw, calc(620 * var(--u))); box-sizing: border-box;
  border: 0 solid transparent;
  border-image: url('assets/ui/hangar_v4/bezel.png') 66 56 85 55 fill / calc(66 * var(--u)) calc(56 * var(--u)) calc(85 * var(--u)) calc(55 * var(--u)) / 0 stretch;
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
}
.gm-softkeys { display: flex; flex: none; }
.gm-softkey-slot { width: 20%; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); }
.gm-softkey-label { display: flex; align-items: center; justify-content: center; line-height: 1; }
.gm-softkey {
  width: calc(58 * var(--u)); height: calc(58 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/hangar_v4/softkey.png') 40 fill / calc(20 * var(--u)) / 0 stretch;
  display: grid; place-items: center;
}
.gm-softkey.is-active { border-image-source: url('assets/ui/hangar_v4/softkey_active.png'); }
.gm-softkey-glyph { width: 60%; height: 60%; background: var(--h-text); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.gm-softkey.is-active .gm-softkey-glyph { background: var(--h-teal); }
.gm-softkey-label { height: calc(22 * var(--u)); font-size: calc(12 * var(--u)); color: var(--h-muted); }
.gm-softkey-label.is-active { color: var(--h-teal); }
.gm-hangar-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.gm-hangar-row {
  flex: none; height: calc(50 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/hangar_v4/row.png') 20 28 20 28 fill / calc(20 * var(--u)) calc(28 * var(--u)) / 0 stretch;
  padding: 0 calc(14 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); width: 100%;
  color: var(--h-text); font-size: calc(16 * var(--u)); text-align: left;
}
.gm-hangar-row:hover:not(.is-selected) { color: var(--h-teal); }
.gm-hangar-row.is-selected { border-image-source: url('assets/ui/hangar_v4/row_selected.png'); color: var(--h-teal); }
.gm-hangar-row.is-focus { outline: var(--focus-w) solid var(--h-teal); outline-offset: calc(-4 * var(--u)); border-radius: calc(6 * var(--u)); }
.gm-hangar-plane { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.gm-hangar-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-hangar-chev { color: var(--h-muted); }
.gm-hangar-back {
  flex: none; height: calc(50 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/hangar_v4/button_outline.png') 20 28 20 28 fill / calc(20 * var(--u)) calc(28 * var(--u)) / 0 stretch;
  font-size: calc(15 * var(--u)); color: var(--h-text); width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.gm-hangar-back.is-focus, .gm-hangar-back:hover { color: var(--h-teal); }
.gm-hangar-fly {
  flex: none; height: calc(70 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/hangar_v4/fly.png') 24 58 24 102 fill / calc(24 * var(--u)) calc(58 * var(--u)) calc(24 * var(--u)) calc(102 * var(--u)) / 0 stretch;
  font-size: calc(30 * var(--u)); color: var(--h-green); width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.gm-hangar-fly:hover, .gm-hangar-fly.is-focus { border-image-source: url('assets/ui/hangar_v4/fly_hover.png'); }
.gm-hangar-fly:active { border-image-source: url('assets/ui/hangar_v4/fly_pressed.png'); }

/* ── HOW HARD? (difficulty_picker.rs: overlay black 0.88) ── */
#menu .gm-picker { position: absolute; inset: 0; box-sizing: border-box; padding: calc(20 * var(--u)); background: rgba(0, 0, 0, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--u)); }
.gm-picker-title { line-height: 1; white-space: nowrap; }
.gm-picker-title { font-size: calc(72 * var(--u)); color: var(--white); }
.gm-chip-row { height: calc(224 * var(--u)); display: flex; gap: calc(26 * var(--u)); align-items: flex-start; }
.gm-chip-slot { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: calc(188 * var(--u)); flex: none; }
.gm-chip-holder { height: calc(188 * var(--u)); display: grid; place-items: center; }
.gm-chip {
  width: calc(164 * var(--u)); height: calc(164 * var(--u)); border-radius: 50%; box-sizing: border-box;
  background: rgba(0, 0, 0, .85); border: max(1px, round(calc(2 * var(--u)), 1px)) solid var(--divider); display: grid; place-items: center;
}
/* difficulty_picker chip(): black disc + divider hairline, hover divider 0.9; picked = cyan wash 0.10 (hover 0.20), 3 px ring. */
.gm-chip:hover { background: rgba(71, 76, 80, .9); }
.gm-chip.is-picked { width: calc(188 * var(--u)); height: calc(188 * var(--u)); background: rgba(0, 238, 242, .10); border: max(1px, round(calc(3 * var(--u)), 1px)) solid var(--cyan); }
.gm-chip.is-picked:hover { background: rgba(0, 238, 242, .20); }
.gm-chip > .gm-ico { width: 15% !important; height: 15% !important; }
.gm-chip > .gm-chip-joy { width: 55% !important; height: 55% !important; }
.gm-news-key-label { white-space: nowrap; line-height: 1; }
.gm-news-thumb { width: calc(136 * var(--u)); height: calc(136 * var(--u)); border-radius: calc(8 * var(--u)); }
.gm-chip-name { height: calc(30 * var(--u)); display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: calc(18 * var(--u)); color: var(--white); text-align: center; }
.gm-chip-name.is-picked { color: var(--cyan); }
.gm-picker-card { width: min(calc(1064 * var(--u)), 94vw); box-sizing: border-box; padding: calc(24 * var(--u)) calc(28 * var(--u)); }
.gm-picker-head { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.gm-picker-heading { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(34 * var(--u)); line-height: 1.1; color: var(--white); }
.gm-picker-pitch { font-size: calc(19 * var(--u)); color: var(--text2); }
.gm-picker-rule { height: var(--hair); flex: none; background: rgba(145, 161, 184, .65); }
.gm-picker-keys { height: calc(92 * var(--u)); display: flex; align-items: center; gap: calc(24 * var(--u)); flex: none; }
.gm-picker-keys .gm-kitkey { max-width: 46vw; }

/* Kit modal keys (kit_card spawn_kit_key): Plain = key art + white legend, Primary = cta art + amber legend. */
.gm-kitkey {
  box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/menu_v2/key.png') 44 fill / calc(22 * var(--u)) / 0 stretch;
  padding: var(--key-pad-y) var(--key-pad-x); display: flex; align-items: center; justify-content: center; gap: var(--key-gap);
  color: var(--white); flex: none; min-width: 0; overflow: hidden;
}
.gm-kitkey:hover { border-image-source: url('assets/ui/menu_v2/key_hover.png'); }
.gm-kitkey:active { border-image-source: url('assets/ui/menu_v2/key_pressed.png'); }
.gm-kitkey.is-focus { border-image-source: url('assets/ui/menu_v2/key_focus.png'); }
.gm-kitkey.role-primary { border-image-source: url('assets/ui/menu_v2/cta_purple.png'); color: var(--amber); }
.gm-kitkey.role-primary:hover, .gm-kitkey.role-primary.is-focus { border-image-source: url('assets/ui/menu_v2/cta_purple_hover.png'); }
.gm-kitkey.role-primary:active { border-image-source: url('assets/ui/menu_v2/cta_purple_pressed.png'); }
.gm-kitkey-words { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(2 * var(--u)); min-width: 0; }
.gm-kitkey-legend { white-space: nowrap; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gm-kitkey-sub { font-size: calc(14 * var(--u)); color: var(--text2); }
.gm-keycap {
  flex: none; height: calc(28 * var(--u)); box-sizing: border-box; display: inline-flex; align-items: center;
  border: 0 solid transparent; border-image: url('assets/ui/pause_v2/key_chip.png') 24 fill / calc(12 * var(--u)) / 0 stretch;
  padding: 0 var(--keycap-pad); font-size: var(--keycap-font); line-height: 1; color: var(--cyan); white-space: nowrap; justify-content: center;
}

/* ── settings / controls page (settings.rs, settings_kit.rs) ── */
#settings.gm { background: #050607; overflow-y: auto; z-index: 15; }
/* settings_kit page_root_node: page_pad_x 24, page_pad_top 14, page_pad_bottom 10, page_gap 10;
   page width 82 % clamped to 720-1120 (controls 780-1080). */
.gm-page { min-height: 100%; display: flex; justify-content: center; box-sizing: border-box; padding: 0 calc(24 * var(--u)); }
.gm-page-col {
  width: clamp(min(calc(720 * var(--u)), 100%), 82vw, calc(1120 * var(--u))); max-width: 100%; box-sizing: border-box;
  padding: calc(14 * var(--u)) 0 calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u));
}
.gm-page-col.is-controls { width: clamp(min(calc(780 * var(--u)), 100%), 82vw, calc(1080 * var(--u))); }
/* The bindings panel fills the page height (oled_panel flex_grow) instead of stopping at 60 % of the window:
   page chrome = pad 14 + 10, title 72, panel housing 2 x 16 + header 22 + gap 8, actions 54, nav hint 28, gaps 3 x 10. */
.gm-page-col.is-controls .gm-oled { max-height: max(calc(200 * var(--u)), calc(100vh - 270 * var(--u))); }
.gm-page-col > * { flex: none; }
/* page_title: screen box (pad 10 + 8 x 10 + 4), height 72, glyph 30 | divider | title 40, left. */
.gm-title-plate { height: calc(72 * var(--u)); box-sizing: border-box; display: flex; align-items: center; gap: var(--key-gap); padding: 0 calc(18 * var(--u)); }
.gm-title-plate-text { font-size: calc(40 * var(--u)); line-height: 1; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* tab_key: soft key, auto width, height 40, padding link pad_x 12, gap 6; the active tab rests on the focus cut. */
.gm-tabs { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.gm-tab { height: calc(40 * var(--u)); font-size: calc(16 * var(--u)); padding: 0 var(--link-pad-x); }
/* oled_panel: housing pad 16, gap 8, header 18 cyan with screen pad_x 10, OLED screen pad 10. */
.gm-oled-panel { gap: var(--gap-s); }
.gm-oled-header { font-size: calc(18 * var(--u)); line-height: 1.2; color: var(--cyan); padding: 0 var(--screen-pad); }
.gm-oled { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--divider) transparent; }
.gm-oled-body { display: flex; flex-direction: column; }
/* group_title: label 14 cyan over a 2 px divider, 3 px apart, group_gap 12 above. */
.gm-group { display: flex; flex-direction: column; gap: calc(3 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.2; color: var(--cyan); margin-top: calc(12 * var(--u)); }
.gm-group:first-child { margin-top: calc(4 * var(--u)); }
.gm-group-rule { display: block; width: 100%; height: var(--hair); background: var(--divider); }
.gm-vrow {
  position: relative; min-height: calc(50 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u)); border-bottom: var(--hair-1) solid var(--divider); box-sizing: border-box;
}
.gm-vrow:last-child { border-bottom: 0; }
.gm-vrow-focus { position: absolute; inset: var(--focus-off); border: var(--focus-w) solid var(--cyan); display: none; pointer-events: none; }
.gm-vrow.is-focus > .gm-vrow-focus { display: block; }
.gm-vrow-label { flex: 1 1 auto; min-width: calc(120 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-vrow-value { width: calc(360 * var(--u)); max-width: 62%; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-s); }
.gm-vrow-value.is-wide { width: auto; max-width: none; }
.gm-arrow { width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: 0; }
.gm-arrow::before { content: ''; width: calc(16 * var(--u)); height: calc(16 * var(--u)); background: var(--cyan);
  -webkit-mask: url('assets/ui/menu_v2/icons/chevron.png') center / contain no-repeat; mask: url('assets/ui/menu_v2/icons/chevron.png') center / contain no-repeat; }
.gm-arrow.is-left::before { transform: scaleX(-1); }
.gm-cycle-value { width: calc(240 * var(--u)); min-width: 0; flex: 0 1 auto; white-space: nowrap; text-align: center; font-size: calc(18 * var(--u)); color: var(--cyan); }
/* toggle_chips: soft keys 92 x 38, font 16, no padding, link legend; the shown state is selected (focus cut, cyan). */
.gm-toggle { width: calc(92 * var(--u)); height: calc(38 * var(--u)); font-size: calc(16 * var(--u)); padding: 0; color: var(--link); }
/* Bus rows (settings.rs BusStepper): readout bus_readout_width 56, font 17, cyan, right; meter height 12, radius 6,
   track #272c2e, amber fill (bus_meter_tone). The web meter is a range input drawn as that meter (audio/panel.js). */
.gm-readout { width: calc(56 * var(--u)); flex: none; text-align: right; font-size: calc(17 * var(--u)); line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-meter { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; margin: 0; height: calc(34 * var(--u)); background: transparent; cursor: pointer; }
.gm-meter::-webkit-slider-runnable-track { height: calc(12 * var(--u)); border-radius: calc(6 * var(--u));
  background: linear-gradient(90deg, var(--amber) 0 var(--fill, 50%), #272c2e var(--fill, 50%) 100%); }
.gm-meter::-moz-range-track { height: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: #272c2e; }
.gm-meter::-moz-range-progress { height: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--amber); }
.gm-meter::-webkit-slider-thumb { -webkit-appearance: none; width: calc(6 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(-5 * var(--u));
  border-radius: calc(2 * var(--u)); background: var(--white); border: 0; }
.gm-meter::-moz-range-thumb { width: calc(6 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--white); border: 0; }
.gm-meter:focus-visible { outline: var(--focus-w) solid var(--cyan); outline-offset: var(--focus-off); }
/* Page actions (action_key): action_height 54, font 20, glyph 22 | divider 22, legend centred, pad = kit key pad / 2,
   gap = key_gap / 2, action_gap 14 between keys. */
.gm-page-actions { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); }
.gm-page-actions .gm-kitkey { padding: 0 calc(10 * var(--u)); gap: calc(7 * var(--u)); max-width: 100%; }
.gm-page-actions .gm-kitkey-words { align-items: center; }
.gm-nav-hint { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)) calc(22 * var(--u)); font-size: calc(14 * var(--u)); color: var(--hint); }
.gm-nav-item { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap; }
.gm-bind-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: calc(12 * var(--u));
  min-height: calc(50 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-bottom: var(--hair-1) solid var(--divider); box-sizing: border-box; }
.gm-bind-head { color: var(--hint); font-size: calc(14 * var(--u)); min-height: calc(32 * var(--u)); }
.gm-bind-label { font-size: calc(19 * var(--u)); line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.gm-bind-head .gm-bind-label { font-size: inherit; }
.gm-bind-keys { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); min-width: 0; }
.gm-slot {
  min-width: calc(150 * var(--u)); height: calc(38 * var(--u)); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0 solid transparent; border-image: url('assets/ui/menu_v2/link.png') 30 fill / calc(15 * var(--u)) / 0 stretch;
  padding: 0 calc(10 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1; color: var(--link); white-space: nowrap; max-width: 100%;
}

/* ── RUN PAUSED (run_pause.json: art at source_scale 2) ── */
#pause.gm { background: rgba(0, 0, 0, .35); z-index: 12; }
.gm-pause-card { position: absolute; left: 50%; top: calc(90 * var(--u)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); }
.gm-pause-title {
  width: calc(680 * var(--u)); height: calc(146 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/pause_v2/title_plate.png') 96 fill / calc(48 * var(--u)) / 0 stretch;
  display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--u)); font-size: calc(66 * var(--u)); line-height: 1; color: var(--white);
  white-space: nowrap;
}
.gm-mfds { display: flex; gap: calc(20 * var(--u)); }
.gm-mfd {
  width: calc(620 * var(--u)); height: calc(500 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/pause_v2/mfd_actions.png') 96 fill / calc(48 * var(--u)) / 0 stretch;
  /* run_pause.json stats: padding 23 (+ padding_x 18 at the sides), gap 18, content centred. */
  padding: calc(23 * var(--u)) calc(41 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u));
}
.gm-mfd-stats { border-image-source: url('assets/ui/pause_v2/mfd_screen_cyan.png'); justify-content: center; }
/* Actions MFD: rows.padding 16, the four rows spread over the height (SpaceBetween). */
.gm-mfd-actions { justify-content: space-between; gap: 0; padding: calc(16 * var(--u)); align-items: center; }
.gm-strip { display: flex; gap: calc(10 * var(--u)); align-items: stretch; flex: none; }
.gm-cell { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); text-align: center; min-width: 0; line-height: 1.1; }
.gm-cell-value { color: var(--white); overflow-wrap: anywhere; }
.gm-cell-caption { font-size: calc(21 * var(--u)); color: var(--text2); }
/* Footer: white run kind / difficulty line, 22 px (spawn_run_footer_line). */
.gm-pause-footer { font-size: calc(22 * var(--u)); line-height: 1.2; color: var(--white); text-align: center; }
/* spawn_action_row: a 588 x 104 slot; the keycap button reaches key_margin 14 beyond it on every side (focus glow art),
   padding margin + icon_left 24 / margin + chevron_right 24; icon 40, words margin-left label_gap 30, chevron 30,
   key chip margin-left chip_gap 12. */
.gm-pause-slot { position: relative; width: calc(588 * var(--u)); height: calc(104 * var(--u)); flex: none; }
.gm-pause-row {
  position: absolute; inset: calc(-14 * var(--u)); box-sizing: border-box; border: 0 solid transparent;
  border-image: url('assets/ui/pause_v2/row.png') 88 88 88 200 fill / calc(44 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u)) calc(100 * var(--u)) / 0 stretch;
  padding: 0 calc(38 * var(--u)); display: flex; align-items: center; gap: 0; color: var(--white); text-align: left;
}
.gm-pause-row:hover { border-image-source: url('assets/ui/pause_v2/row_hover.png'); }
.gm-pause-row:active { border-image-source: url('assets/ui/pause_v2/row_pressed.png'); }
.gm-pause-row.is-focus { border-image-source: url('assets/ui/pause_v2/row_focus.png'); }
.gm-pause-words { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: calc(3 * var(--u)); min-width: 0;
  margin-left: calc(30 * var(--u)); overflow: hidden; }
.gm-pause-caption { font-size: calc(32 * var(--u)); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-pause-sub { font-size: calc(21 * var(--u)); line-height: 1.15; color: var(--text2); }
.gm-pause-chip {
  margin-left: calc(12 * var(--u)); flex: none; line-height: 1; height: calc(44 * var(--u)); min-width: calc(64 * var(--u)); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0 solid transparent; border-image: url('assets/ui/pause_v2/key_chip.png') 24 fill / calc(12 * var(--u)) / 0 stretch;
  padding: 0 calc(10 * var(--u)); font-size: calc(22 * var(--u)); color: var(--cyan);
}

/* ── result column (run_results.json: right third, dim 0.45) ── */
#results.gm { z-index: 12; }
.gm-results-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.gm-results-col { position: absolute; right: 0; top: 0; bottom: 0; width: 33.333vw; min-width: min(calc(560 * var(--u)), 100vw); box-sizing: border-box; padding: calc(24 * var(--u)); overflow-y: auto; }
.gm-results-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.gm-results-housing { gap: calc(10 * var(--u)); }
/* results.rs screen_box: padding kit screen pad + screen_pad (10 + 8 x 10 + 4), head_gap 8; stats stat_gap_y 6. */
.gm-results-screen { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); box-sizing: border-box; }
.gm-results-screen:not(.is-centered) { gap: calc(6 * var(--u)); }
.gm-results-screen.is-centered { align-items: center; text-align: center; }
.gm-results-header { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); max-width: 100%; }
.gm-results-title { font-size: clamp(calc(30 * var(--u)), 3.1vw, calc(60 * var(--u))); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gm-pill { display: inline-block; border: var(--hair) solid var(--cyan); border-radius: 999px; padding: calc(2 * var(--u)) calc(14 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.2; color: var(--cyan); white-space: nowrap; }
.gm-hero { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.gm-hero-caption { font-size: calc(20 * var(--u)); color: var(--text2); }
.gm-hero-score { font-size: calc(84 * var(--u)); line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
.gm-badge { border-color: var(--amber); color: var(--amber); font-size: calc(24 * var(--u)); padding: calc(2 * var(--u)) calc(16 * var(--u)); animation: gm-throb 1.05s ease-in-out infinite; }
/* badge_throb 0.07 at speed 6 rad/s (period ~1.05 s). */
@keyframes gm-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.gm-stat { display: flex; justify-content: space-between; align-items: baseline; gap: calc(20 * var(--u)); font-size: calc(23 * var(--u)); line-height: 1.2; }
.gm-stat-caption { color: var(--text2); }
.gm-stat-value { color: var(--white); font-variant-numeric: tabular-nums; }
/* Result keys: rows_gap 6, key 58 / primary 72, key_gap 12, icon 34 | divider 36 | words | chevron 28. */
.gm-result-keys { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.gm-result-key { height: calc(58 * var(--u)); color: var(--white); text-align: left; gap: calc(12 * var(--u)); flex: none; }
.gm-result-key.is-primary { height: calc(72 * var(--u)); border-image-source: url('assets/ui/menu_v2/cta_purple.png'); }
.gm-result-key.is-primary:hover, .gm-result-key.is-primary.is-focus { border-image-source: url('assets/ui/menu_v2/cta_purple_hover.png'); }
.gm-result-words { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--u)); min-width: 0; }
.gm-result-legend { font-size: clamp(calc(20 * var(--u)), 1.6vw, calc(30 * var(--u))); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-result-key.is-primary .gm-result-legend { color: var(--amber); }
.gm-result-sub { font-size: calc(20 * var(--u)); line-height: 1.15; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── portrait phones: panels stack full width (web-only; the game has no portrait layout) ── */
.gm-portrait .gm-p-title { width: 70vw; }
.gm-portrait .gm-p-play { width: calc(100vw - 72 * var(--u)); top: calc(260 * var(--u)); max-height: 60vh; }
.gm-portrait .gm-hangar-col { width: calc(100vw - 28 * var(--u)); top: auto; height: 55vh; }
.gm-portrait .gm-mfds { flex-direction: column; }
.gm-portrait .gm-results-col { width: 100vw; }
.gm-portrait .gm-chip-row { flex-wrap: wrap; height: auto; }