/* 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; web two-column layout, operator 2026-10-28) ──
   Left column: logo, READY TO FLY? unit with START FLYING, SETTINGS and the language key. Right column: the news,
   open by default, starting below the shell's FULLSCREEN key. The middle stays free for the world behind the menu.
   Portrait phones stack both columns and the home scrolls (news below, collapsible).
     --home-x / --home-y   screen_margin 20 + panel inset 16 / 12 (menu.json title and settings anchors: 36 / 32)
     --home-main-w         left column (menu.json play panel 720, trimmed so both columns fit 1366 x 768 at --u 0.71)
     --home-news-w         news column width
     --home-news-top       FULLSCREEN key top 20 + key height + gap l 22 */
#menu.gm { background: transparent; }
.gm-home {
  --home-x: calc(36 * var(--u)); --home-y: calc(32 * var(--u));
  --home-main-w: calc(620 * var(--u)); --home-news-w: calc(640 * var(--u));
  --home-news-top: calc(20 * var(--u) + max(40px, var(--btn-h)) + 22 * var(--u));
  position: absolute; inset: 0; box-sizing: border-box; padding: var(--home-y) var(--home-x);
  display: grid; grid-template-columns: minmax(0, var(--home-main-w)) minmax(0, 1fr) minmax(0, var(--home-news-w));
  grid-template-rows: minmax(0, 1fr); column-gap: var(--gap-l);
}
.gm-home-main { grid-column: 1; display: flex; flex-direction: column; gap: calc(18 * var(--u)); min-height: 0; max-height: 100%;
  overflow-y: auto; scrollbar-width: none; }
.gm-p-title { width: min(calc(540 * var(--u)), 100%); flex: none; }
.gm-logo { display: block; width: 100%; aspect-ratio: 3.2; object-fit: contain; }
.gm-p-play, .gm-p-settings { flex: none; }
.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); }
/* START FLYING wraps onto two lines instead of an ellipsis: translations run up to twice the English length
   ("COMMENCER À VOLER"), and the 200 design px key holds two lines of its 52 px legend. */
.gm-home-key.is-primary .gm-home-key-label { white-space: normal; text-align: center; overflow-wrap: anywhere; line-height: 1.05; }
.gm-home-tools { gap: calc(12 * var(--u)); }

/* Language key (language_picker.rs spawn_language_key): flag (key_flag_width, 3:2) | divider | LANGUAGE caption over
   the native name, chevron at the end; a click opens the LANGUAGE picker card below. */
.gm-lang { position: relative; justify-content: flex-start; cursor: pointer; }
.gm-lang::after { content: ''; flex: none; margin-inline-start: auto; width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-right: var(--hair) solid var(--cyan); border-bottom: var(--hair) solid var(--cyan); transform: translateY(-25%) rotate(45deg); }
.gm-lang-flag { flex: none; display: block; width: calc(var(--lp-key-flag, 30) * var(--u) * var(--lp-k, 1));
  aspect-ratio: 3 / 2; object-fit: cover; }
.gm-lang-flag.is-empty { visibility: hidden; }
.gm-lang-words { display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0; text-align: start; }
.gm-lang-caption { font-size: calc(14 * var(--u)); color: var(--text2); letter-spacing: .08em; line-height: 1; }
.gm-lang-name { font-size: calc(26 * var(--u)); color: var(--white); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* LANGUAGE picker (language_picker.rs build_language_picker, assets/ui/screens/language_picker.json as --lp-* design px):
   black wash `dim`, kit panel card `card_width` (cap max_width_percent / max_height_percent), globe + title header,
   grid of `columns` link keys `cell_height` tall with `cell_gap`: flag `flag_width` (3:2), native name `native_font`
   in white over the English name `english_font` in text_2; the current language outlined 2 px in `selected_tone`.
   Portrait phones: two columns and --lp-k 1.6 (the portrait home scales its keys the same way, 26 → 40). The wash is
   fixed to the window: the portrait home scrolls, and an absolute wash would scroll away with it. */
#menu .gm-langpick { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: calc(12 * var(--u)); }
.gm-langpick-card { --lp-k: 1; width: min(calc(var(--lp-card) * var(--u)), var(--lp-maxw)); max-height: var(--lp-maxh);
  gap: calc(var(--lp-gap) * var(--u)); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.gm-langpick-header { display: flex; align-items: center; gap: var(--key-gap); flex: none; padding: 0 calc(4 * var(--u)); }
.gm-langpick-icon { width: calc(var(--lp-icon) * var(--u) * var(--lp-k)); height: calc(var(--lp-icon) * var(--u) * var(--lp-k)); }
.gm-langpick-title { font-size: calc(var(--lp-title) * var(--u) * var(--lp-k)); color: var(--white); line-height: 1; white-space: nowrap; }
.gm-langpick-grid { display: grid; grid-template-columns: repeat(var(--lp-cols), minmax(0, 1fr)); gap: calc(var(--lp-cell-gap) * var(--u)); }
.gm-langpick-cell {
  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;
  min-height: max(var(--hit-min), calc(var(--lp-cell) * var(--u) * var(--lp-k))); min-width: 0;
  display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(12 * var(--u)); overflow: hidden; text-align: start;
}
.gm-langpick-cell:hover { border-image-source: url('assets/ui/menu_v2/link_hover.png'); }
.gm-langpick-cell:active { border-image-source: url('assets/ui/menu_v2/link_pressed.png'); }
.gm-langpick-cell.is-focus { border-image-source: url('assets/ui/menu_v2/link_focus.png'); }
.gm-langpick-cell.is-selected { outline: max(1px, round(calc(2 * var(--u)), 1px)) solid var(--lp-sel); outline-offset: calc(-4 * var(--u));
  border-radius: calc(8 * var(--u)); }
.gm-langpick-flag { flex: none; display: block; width: calc(var(--lp-flag) * var(--u) * var(--lp-k)); aspect-ratio: 3 / 2; object-fit: cover; }
.gm-langpick-names { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.gm-langpick-native { font-size: calc(var(--lp-native) * var(--u) * var(--lp-k)); color: var(--white); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-langpick-english { font-size: calc(var(--lp-english) * var(--u) * var(--lp-k)); color: var(--text2); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── news column (news.js createNewsColumn) ──
   Smoked-glass housing in the avionics palette; HTML/CSS cards with a tag-coloured edge, tag and date chips, title,
   body (four lines at most), optional thumbnail and Read more; the list scrolls with fades on hidden edges. */
.gm-newscol {
  grid-column: 3; align-self: start; margin-top: calc(var(--home-news-top) - var(--home-y));
  max-height: calc(100% - var(--home-news-top) + var(--home-y)); min-height: 0;
  display: flex; flex-direction: column; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(12, 19, 26, .86), rgba(6, 10, 14, .80));
  border: 1px solid rgba(0, 238, 242, .22); border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden;
}
.gm-newscol-head { display: flex; align-items: center; gap: calc(12 * var(--u)); flex: none;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, .07); }
.gm-newscol.is-collapsed .gm-newscol-head { border-bottom-color: transparent; }
.gm-newscol-title { margin: 0; font: inherit; font-size: calc(30 * var(--u)); color: var(--white); letter-spacing: .04em; line-height: 1; }
.gm-newscol-count { min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); box-sizing: border-box; padding: 0 calc(8 * var(--u));
  border-radius: 999px; background: var(--cyan); color: #04161a; font-size: calc(15 * var(--u)); line-height: calc(26 * var(--u)); text-align: center; }
.gm-newscol-fill { flex: 1 1 auto; }
.gm-newscol-toggle { width: max(40px, var(--btn-h)); height: max(40px, var(--btn-h)); flex: none; display: grid; place-items: center;
  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; }
.gm-newscol-toggle:hover { border-image-source: url('assets/ui/menu_v2/link_hover.png'); }
.gm-newscol-toggle.is-focus { border-image-source: url('assets/ui/menu_v2/link_focus.png'); }
.gm-newscol-chev { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-left: var(--hair) solid var(--cyan); border-top: var(--hair) solid var(--cyan);
  transform: translateY(25%) rotate(45deg); transition: transform .2s; }
.gm-newscol.is-collapsed .gm-newscol-chev { transform: translateY(-25%) rotate(225deg); }
.gm-newscol-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u));
  scrollbar-width: thin; scrollbar-color: rgba(0, 238, 242, .35) transparent;
  --fade-t: 0px; --fade-b: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
}
.gm-newscol-list.fade-top { --fade-t: calc(36 * var(--u)); }
.gm-newscol-list.fade-bottom { --fade-b: calc(48 * var(--u)); }
.gm-newscol.is-collapsed .gm-newscol-list { display: none; }

.gm-nc-card {
  --tag: var(--cyan);
  position: relative; flex: none; display: flex; gap: calc(16 * var(--u)); align-items: flex-start; box-sizing: border-box;
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
  border-radius: calc(12 * var(--u)); border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035);
  color: inherit; text-decoration: none; outline: none; transition: border-color .15s, background-color .15s, transform .15s;
}
.gm-nc-card::before { content: ''; position: absolute; left: 0; top: calc(14 * var(--u)); bottom: calc(14 * var(--u));
  width: calc(4 * var(--u)); border-radius: 0 4px 4px 0; background: var(--tag); box-shadow: 0 0 calc(10 * var(--u)) var(--tag); }
a.gm-nc-card { cursor: pointer; }
a.gm-nc-card:hover, .gm-nc-card.is-focus { border-color: color-mix(in srgb, var(--tag) 60%, transparent);
  background: color-mix(in srgb, var(--tag) 7%, rgba(255, 255, 255, .03)); transform: translateY(-1px); }
.gm-nc-card.tag-update { --tag: var(--green); }
.gm-nc-card.tag-event { --tag: var(--amber); }
.gm-nc-card.tag-community { --tag: #b99bff; }
.gm-nc-card.tag-dev { --tag: var(--cyan); }
.gm-nc-thumb { flex: none; width: calc(132 * var(--u)); aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(8 * var(--u));
  border: 1px solid rgba(255, 255, 255, .1); background: #0b1116; }
.gm-nc-main { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; flex: 1 1 auto; }
.gm-nc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.gm-nc-tag { font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: .1em; padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: 999px; color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent); }
.gm-nc-date { font-size: calc(13 * var(--u)); line-height: 1; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u));
  color: var(--text2); background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.gm-nc-dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 calc(8 * var(--u)) var(--cyan); }
.gm-nc-card.is-pinned .gm-nc-date::before { content: '▲ '; color: var(--tag); }
.gm-nc-title { margin: 0; font: inherit; font-size: calc(23 * var(--u)); line-height: 1.2; color: var(--white); }
.gm-nc-body { margin: 0; font-family: system-ui, 'Segoe UI', Roboto, 'Russo One', sans-serif; font-weight: 450;
  font-size: calc(16 * var(--u)); line-height: 1.45; color: var(--text2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.gm-nc-more { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: var(--tag); letter-spacing: .04em; }
.gm-nc-arrow { transition: transform .15s; }
a.gm-nc-card:hover .gm-nc-arrow, .gm-nc-card.is-focus .gm-nc-arrow { transform: translateX(calc(4 * var(--u))); }
body.is-rtl .gm-nc-arrow { transform: scaleX(-1); }

/* Loading skeleton: card-sized blocks with a sweeping shine. */
.gm-nc-skel { flex: none; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u));
  border-radius: calc(12 * var(--u)); border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .03); }
.gm-nc-skel-line { display: block; height: calc(14 * var(--u)); width: 92%; border-radius: calc(6 * var(--u));
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, .05) 80%) 0 0 / 300% 100%;
  animation: gm-nc-shine 1.4s linear infinite; }
.gm-nc-skel-line.is-meta { width: 38%; height: calc(22 * var(--u)); }
.gm-nc-skel-line.is-title { width: 70%; height: calc(24 * var(--u)); }
.gm-nc-skel-line.is-short { width: 54%; }
@keyframes gm-nc-shine { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .gm-nc-skel-line { animation: none; } .gm-nc-card, .gm-nc-arrow { transition: none; } }

/* Empty / failed feed. */
.gm-nc-empty { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); padding: calc(36 * var(--u)) calc(16 * var(--u)); text-align: center; }
.gm-nc-empty-icon { opacity: .45; }
.gm-nc-empty p { margin: 0; font-size: calc(18 * var(--u)); color: var(--text2); }

/* Portrait phones: one column that scrolls; the news follows the play block, its list grows with its cards. */
body.gm-portrait #menu .gm-home { display: flex; flex-direction: column; gap: calc(28 * var(--u)); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--safe-t, 0px) + var(--home-news-top)) calc(var(--safe-r, 0px) + 40 * var(--u)) calc(var(--safe-b, 0px) + 40 * var(--u)) calc(var(--safe-l, 0px) + 40 * var(--u)); }
body.gm-portrait #menu .gm-home-main { flex: none; max-height: none; overflow: visible; }
body.gm-portrait #menu .gm-p-title { width: min(calc(760 * var(--u)), 100%); }
body.gm-portrait #menu .gm-newscol { margin-top: 0; max-height: none; flex: none; }
body.gm-portrait #menu .gm-newscol-list { overflow: visible; -webkit-mask-image: none; mask-image: none; }
body.gm-portrait #menu .gm-text-body { font-size: calc(32 * var(--u)); }
body.gm-portrait #menu .gm-nc-card { padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)) calc(32 * var(--u)); gap: calc(14 * var(--u)); }
body.gm-portrait #menu .gm-nc-main { gap: calc(14 * var(--u)); }
body.gm-portrait #menu .gm-nc-title { font-size: calc(44 * var(--u)); }
body.gm-portrait #menu .gm-nc-body { font-size: calc(36 * var(--u)); }
body.gm-portrait #menu .gm-nc-tag, body.gm-portrait #menu .gm-nc-date, body.gm-portrait #menu .gm-nc-more { font-size: calc(28 * var(--u)); }
body.gm-portrait #menu .gm-nc-thumb { width: calc(200 * var(--u)); }
body.gm-portrait #menu .gm-newscol-title { font-size: calc(44 * var(--u)); }
body.gm-portrait #menu .gm-lang-caption { font-size: calc(24 * var(--u)); }
body.gm-portrait #menu .gm-lang-name { font-size: calc(40 * var(--u)); }
body.gm-portrait #menu .gm-lang-flag { --lp-k: 1.6; }
body.gm-portrait #menu .gm-langpick-card { --lp-k: 1.6; --lp-cols: 2 !important; }

/* ── hangar JETS page (web glass pass, operator hangar UI request: megamix of the eight concepts) ──
   Smoked-glass MFD column over the live terrain: JETS key + heading tape, six jet rows sharing the free height, the
   PUBLISHED PERFORMANCE card of the viewed jet (aero_profiles.json figures only), Back (secondary) | FLY (hero).
   Row states:  rest      clear glass, white silhouette and name, dim chevron
                hover / arrow focus (.is-focus)   cyan HUD corner brackets + chevron nudge, no fill
                selected (.is-selected)          lit cyan slab, backlight bar, cyan silhouette, slow light sweep
                keyboard Tab (:focus-visible)    the kit's 2 px cyan outline, offset outside the row
                pressed (:active)                slab sinks (scale .985, darker)
   Local tokens (all on .gm-hangar-col so mobile.css can retune them in one place):
     --hu          one panel design pixel; = --u on desktop, floored on phones so text and keys stay finger-sized
     --hg-glass-*  smoked-glass fill (top / bottom) of the column        --hg-edge    edge-light colour (tokens cyan)
     --hg-line     hairline colour of separators and borders             --hg-lit     selected-row cyan (tokens cyan)
     --hg-go       FLY green (tokens avionics.green)                     --hg-row-min / --hg-row-max   row height range
     --pick        index 0..5 of the viewed jet (menu.js), drives the heading-tape pointer
   Performance: the only backdrop-filter of the screen is on this column; nothing filters the 3D canvas. */
#menu .gm-hangar { position: absolute; inset: 0; pointer-events: none; }
.gm-hangar-col {
  --hu: var(--u);
  --hg-glass-top: rgba(14, 24, 32, .74); --hg-glass-bot: rgba(4, 8, 12, .86);
  --hg-edge: var(--cyan); --hg-line: rgba(170, 225, 235, .13); --hg-lit: var(--cyan); --hg-go: var(--green);
  --hg-row-min: calc(58 * var(--hu)); --hg-row-max: calc(112 * var(--hu));
  --pick: 2;
  pointer-events: auto; position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u)); bottom: calc(14 * var(--u));
  width: clamp(calc(380 * var(--hu)), 25vw, calc(560 * var(--hu))); box-sizing: border-box;
  padding: calc(18 * var(--hu)) calc(18 * var(--hu)) calc(18 * var(--hu));
  display: flex; flex-direction: column; gap: calc(12 * var(--hu));
  border-radius: calc(16 * var(--hu));
  border: 1px solid var(--hg-line);
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(0, 238, 242, .10), transparent 60%),
    linear-gradient(180deg, var(--hg-glass-top), var(--hg-glass-bot));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 calc(18 * var(--hu)) calc(48 * var(--hu)) rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  isolation: isolate;
}
/* Edge light: a 1 px cyan-to-violet gradient ring that fades out down the column (mask-composite ring trick). */
.gm-hangar-col::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(160deg, rgba(0, 238, 242, .85), rgba(124, 92, 255, .45) 28%, rgba(0, 238, 242, .08) 55%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Header: JETS key and label, then the heading tape. */
.gm-softkeys { display: flex; flex: none; align-items: center; gap: calc(14 * var(--hu));
  padding-bottom: calc(12 * var(--hu)); border-bottom: 1px solid var(--hg-line); }
.gm-softkey-slot { display: flex; align-items: center; gap: calc(12 * var(--hu)); flex: none; }
.gm-softkey {
  width: calc(50 * var(--hu)); height: calc(50 * var(--hu)); border-radius: calc(10 * var(--hu));
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(0, 238, 242, .16), rgba(0, 238, 242, .04));
  box-shadow: inset 0 0 0 1px rgba(0, 238, 242, .45), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 calc(16 * var(--hu)) rgba(0, 238, 242, .18);
}
.gm-softkey-glyph { width: 62%; height: 62%; 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(--hg-lit); }
.gm-softkey-label { display: flex; align-items: center; gap: calc(8 * var(--hu)); line-height: 1;
  font-size: calc(28 * var(--hu)); letter-spacing: .14em; color: var(--white); }
/* Cyan chevron before JETS (wordmark direction: flat letterforms, cyan chevron). */
.gm-softkey-label::before { content: ''; width: calc(10 * var(--hu)); height: calc(16 * var(--hu)); background: var(--hg-lit);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }
.gm-softkey-label.is-active { color: var(--white); }
/* Heading tape: minor ticks every 8, major every 40 design px, fading at both ends; the pointer follows --pick. */
.gm-hangar-tape { position: relative; flex: 1 1 auto; height: calc(26 * var(--hu)); align-self: center;
  background:
    repeating-linear-gradient(90deg, rgba(0, 238, 242, .55) 0 1px, transparent 1px calc(40 * var(--hu))) bottom / 100% calc(14 * var(--hu)) no-repeat,
    repeating-linear-gradient(90deg, rgba(200, 230, 235, .32) 0 1px, transparent 1px calc(8 * var(--hu))) bottom / 100% calc(7 * var(--hu)) no-repeat,
    linear-gradient(rgba(200, 230, 235, .25), rgba(200, 230, 235, .25)) bottom / 100% 1px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.gm-hangar-tape::after { content: ''; position: absolute; top: 0; width: calc(12 * var(--hu)); height: calc(9 * var(--hu));
  left: calc((var(--pick) + .5) / 6 * 100% - 6 * var(--hu)); background: var(--hg-lit);
  clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 4px rgba(0, 238, 242, .8));
  transition: left .28s cubic-bezier(.2, .8, .2, 1); }

/* Jet rows: share the page height (flex 1 1 0) between --hg-row-min and --hg-row-max. */
.gm-hangar-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: calc(6 * var(--hu)); justify-content: safe center; scrollbar-width: none; }
.gm-hangar-row {
  position: relative; flex: 1 1 0; min-height: var(--hg-row-min); max-height: var(--hg-row-max); width: 100%;
  display: grid; grid-template-columns: calc(92 * var(--hu)) minmax(0, 1fr) calc(22 * var(--hu)); align-items: center;
  gap: calc(16 * var(--hu)); padding: 0 calc(18 * var(--hu)) 0 calc(16 * var(--hu));
  border-radius: calc(10 * var(--hu)); text-align: left; color: var(--h-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: background-color .18s, box-shadow .18s, transform .12s;
}
.gm-hangar-plane { align-self: stretch; margin: calc(8 * var(--hu)) 0; flex: none;
  background: linear-gradient(180deg, #ffffff, #9fb2c0);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.gm-hangar-words { display: flex; flex-direction: column; gap: calc(4 * var(--hu)); min-width: 0; }
.gm-hangar-name { font-size: calc(25 * var(--hu)); line-height: 1.05; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-hangar-sub { font-family: system-ui, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: calc(14 * var(--hu)); letter-spacing: .04em;
  color: var(--h-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-hangar-sub:empty { display: none; }
/* Chevron: drawn, not a ">" glyph, with its own padding column. */
.gm-hangar-chev { justify-self: end; width: calc(11 * var(--hu)); height: calc(11 * var(--hu)); margin-right: calc(4 * var(--hu));
  border-top: calc(3 * var(--hu)) solid var(--h-muted); border-right: calc(3 * var(--hu)) solid var(--h-muted);
  transform: rotate(45deg); opacity: .7; transition: transform .2s, border-color .2s, opacity .2s; }
/* Hover / arrow focus: HUD corner brackets only (eight gradient strokes), clearly lighter than the selected slab. */
.gm-hangar-row::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  --b: calc(16 * var(--hu)); --w: max(1px, calc(2 * var(--hu))); --c: rgba(0, 238, 242, .9);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--b) no-repeat;
  transition: opacity .15s; }
.gm-hangar-row:hover::after, .gm-hangar-row.is-focus::after { opacity: 1; }
.gm-hangar-row:hover, .gm-hangar-row.is-focus { background-color: rgba(0, 238, 242, .04); }
.gm-hangar-row:hover .gm-hangar-chev, .gm-hangar-row.is-focus .gm-hangar-chev { border-color: var(--hg-lit); opacity: 1; transform: translateX(calc(3 * var(--hu))) rotate(45deg); }
/* Selected: lit slab, cyan backlight bar on the left edge, cyan silhouette, light sweep layer (animated below). */
.gm-hangar-row.is-selected {
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .10) 45%, transparent 55%) -200% 0 / 250% 100% no-repeat,
    linear-gradient(90deg, rgba(0, 238, 242, .26), rgba(0, 238, 242, .08) 55%, rgba(0, 238, 242, .03));
  box-shadow: inset 0 0 0 1px rgba(0, 238, 242, .55), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 calc(22 * var(--hu)) rgba(0, 238, 242, .16);
}
.gm-hangar-row.is-selected::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: calc(4 * var(--hu));
  border-radius: 0 calc(3 * var(--hu)) calc(3 * var(--hu)) 0; background: var(--hg-lit); box-shadow: 0 0 calc(12 * var(--hu)) var(--hg-lit); }
.gm-hangar-row.is-selected .gm-hangar-plane { background: linear-gradient(180deg, #b9fdff, var(--hg-lit)); transform: scale(1.06); }
.gm-hangar-row.is-selected .gm-hangar-name { color: #e9feff; text-shadow: 0 0 calc(14 * var(--hu)) rgba(0, 238, 242, .55); }
.gm-hangar-row.is-selected .gm-hangar-sub { color: rgba(160, 240, 245, .85); }
.gm-hangar-row.is-selected .gm-hangar-chev { border-color: var(--hg-lit); opacity: 1; }
.gm-hangar-row:active { transform: scale(.985); background-color: rgba(0, 0, 0, .25); }
@keyframes gm-hangar-sweep { 0%, 55% { background-position: -200% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .gm-hangar-row.is-selected { animation: gm-hangar-sweep 4.2s ease-in-out infinite; }
}

/* PUBLISHED PERFORMANCE card: LCD glass, segmented gauges relative to the six jets, Mach and load-limit chips. */
.gm-hangar-spec { flex: none; display: flex; flex-direction: column; gap: calc(10 * var(--hu));
  padding: calc(14 * var(--hu)) calc(16 * var(--hu)); border-radius: calc(10 * var(--hu));
  background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 20, 24, .38));
  box-shadow: inset 0 0 0 1px rgba(0, 238, 242, .16), inset 0 calc(10 * var(--hu)) calc(24 * var(--hu)) rgba(0, 0, 0, .35); }
.gm-hangar-spec-title { font-size: calc(13 * var(--hu)); letter-spacing: .18em; color: var(--h-muted); display: flex; align-items: center; gap: calc(10 * var(--hu)); }
.gm-hangar-spec-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hg-line), transparent); }
.gm-hangar-spec-body { display: flex; flex-direction: column; gap: calc(9 * var(--hu)); }
.gm-hangar-gauge { display: grid; grid-template-columns: calc(104 * var(--hu)) minmax(0, 1fr) calc(128 * var(--hu)); align-items: center; gap: calc(12 * var(--hu)); }
.gm-hangar-gauge-label { font-size: calc(14 * var(--hu)); letter-spacing: .1em; color: var(--text2); }
.gm-hangar-gauge-value { font-size: calc(19 * var(--hu)); color: var(--hg-lit); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(10 * var(--hu)) rgba(0, 238, 242, .45); }
/* Segmented bar: unlit segments always drawn, lit ones up to --fill (0..1 of the roster maximum). */
.gm-hangar-bar { position: relative; height: calc(9 * var(--hu)); background: rgba(0, 238, 242, .10);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(7 * var(--hu)), transparent calc(7 * var(--hu)) calc(9 * var(--hu)));
  mask: repeating-linear-gradient(90deg, #000 0 calc(7 * var(--hu)), transparent calc(7 * var(--hu)) calc(9 * var(--hu))); }
.gm-hangar-bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--fill, 0) * 100%);
  background: linear-gradient(90deg, rgba(0, 238, 242, .55), var(--hg-lit)); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.gm-hangar-chips { display: flex; gap: calc(8 * var(--hu)); flex-wrap: wrap; }
.gm-hangar-chip { font-size: calc(14 * var(--hu)); letter-spacing: .06em; color: var(--white); padding: calc(5 * var(--hu)) calc(10 * var(--hu));
  border-radius: calc(5 * var(--hu)); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hg-line); }
.gm-hangar-chips:empty { display: none; }

/* Back (secondary ghost key) | FLY (hero, two thirds of the width). */
.gm-hangar-actions { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: calc(12 * var(--hu));
  height: calc(76 * var(--hu)); min-height: 44px; }
.gm-hangar-back {
  border-radius: calc(10 * var(--hu)); font-size: calc(21 * var(--hu)); letter-spacing: .06em; color: var(--h-text);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: color .15s, box-shadow .15s, transform .1s;
}
.gm-hangar-back:hover, .gm-hangar-back.is-focus { color: var(--hg-lit); box-shadow: inset 0 0 0 1px rgba(0, 238, 242, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.gm-hangar-back:active { transform: translateY(1px); background: rgba(0, 0, 0, .3); }
.gm-hangar-fly {
  position: relative; overflow: hidden; border-radius: calc(10 * var(--hu));
  display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--hu));
  font-size: calc(36 * var(--hu)); letter-spacing: .16em; color: #03170c;
  background: linear-gradient(180deg, #52ffad 0%, var(--hg-go) 48%, #00c463 100%);
  box-shadow: 0 0 0 1px rgba(0, 240, 122, .7), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 calc(-4 * var(--hu)) 0 rgba(0, 60, 30, .28),
    0 calc(8 * var(--hu)) calc(28 * var(--hu)) rgba(0, 240, 122, .30);
  transition: box-shadow .18s, filter .18s, transform .1s;
}
.gm-hangar-fly-label { position: relative; z-index: 1; padding-left: .16em; }
/* Double chevron after FLY, slides forward on hover / focus. */
.gm-hangar-fly-chev { position: relative; z-index: 1; width: calc(26 * var(--hu)); height: calc(20 * var(--hu)); background: currentColor;
  clip-path: polygon(0 0, 22% 0, 52% 50%, 22% 100%, 0 100%, 30% 50%, 0 0, 48% 0, 70% 0, 100% 50%, 70% 100%, 48% 100%, 78% 50%, 48% 0);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
/* Shine pass across FLY (animated below when motion is allowed). */
.gm-hangar-fly::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 47%, transparent 58%) -150% 0 / 250% 100% no-repeat; }
.gm-hangar-fly:hover, .gm-hangar-fly.is-focus { filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 0 0 1px rgba(160, 255, 200, .95), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 calc(-4 * var(--hu)) 0 rgba(0, 60, 30, .28),
    0 calc(10 * var(--hu)) calc(36 * var(--hu)) rgba(0, 240, 122, .5); }
.gm-hangar-fly:hover .gm-hangar-fly-chev, .gm-hangar-fly.is-focus .gm-hangar-fly-chev { transform: translateX(calc(6 * var(--hu))); }
.gm-hangar-fly:active { transform: translateY(calc(2 * var(--hu))); filter: brightness(.92);
  box-shadow: 0 0 0 1px rgba(0, 240, 122, .7), inset 0 calc(3 * var(--hu)) calc(8 * var(--hu)) rgba(0, 50, 25, .45); }
@keyframes gm-hangar-shine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .gm-hangar-fly::after { animation: gm-hangar-shine 3.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-hangar-row, .gm-hangar-plane, .gm-hangar-chev, .gm-hangar-tape::after, .gm-hangar-bar::before, .gm-hangar-fly, .gm-hangar-fly-chev { transition: none; }
}
/* Short windows: the card yields its height to the rows first. */
@media (max-height: 600px) { .gm-hangar-spec { display: none; } }

/* ── 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; }
/* Portrait: the hangar column spans the width; its panel unit follows the column width (mobile.css sets the height). */
.gm-portrait .gm-hangar-col { --hu: calc((100vw - 28 * var(--u)) / 500); width: calc(100vw - 28 * var(--u)); top: auto; height: 62vh; }
.gm-portrait .gm-mfds { flex-direction: column; }
.gm-portrait .gm-results-col { width: 100vw; }
.gm-portrait .gm-chip-row { flex-wrap: wrap; height: auto; }

/* Hangar BACK as a real kit key (operator 2026-10-29): menu_v2 key art (plain = the kit's secondary role, hover /
   pressed / focus art from .gm-kitkey), cyan ‹ chevron, upper-case legend, on the FLY row at FLY's height. */
#menu .gm-hangar-back.gm-kitkey { width: 100%; height: 100%; min-height: 44px; border-radius: 0; background: none; box-shadow: none;
  gap: calc(10 * var(--hu, var(--u))); padding: 0 calc(14 * var(--hu, var(--u))); justify-content: center; color: var(--white);
  font-size: calc(24 * var(--hu, var(--u))); letter-spacing: .08em; text-transform: uppercase; }
#menu .gm-hangar-back.gm-kitkey:hover, #menu .gm-hangar-back.gm-kitkey.is-focus { color: var(--cyan); box-shadow: none; }
#menu .gm-hangar-back.gm-kitkey:active { transform: translateY(1px); }
.gm-hangar-back-chev { color: var(--cyan); font-size: 1.5em; line-height: .8; transform: translateY(-.04em); }
.gm-hangar-back-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }