/* Page shell overlay (shell.js): FULLSCREEN key top right, lifetime metrics strip bottom centre of the home screen.
   The canvas keeps the whole viewport (ui.css #game); the shell layer lets every click through except on its two
   parts. Kit art and palette are the game's menu_v2 parts and avionics tokens (menu.css .gm variables, Russo One).
   Visibility follows the game layers with :has(), so main.js never toggles the shell:
     strip  ─ home screen visible (#menu shown, .gm-home shown, news panel closed)
     key    ─ everywhere except active flight (HUD shown and pause card hidden) and the loading screen */
#shell {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  /* Placement tuning (design px), mirroring the game's home grid:
     --shell-edge      tokens screen_margin 20: the key sits on the screen margin like every menu panel corner
     --shell-bottom    menu.json settings panel: screen_margin 20 + inset_y 12 = 32, the strip shares that baseline
     --shell-bgload    lift of the strip while the bottom-centre background-load pill (#bgload, loader.css) shows:
                       its 16 px offset + ~44 px height + gap m 12 */
  --shell-edge: calc(20 * var(--u));
  --shell-bottom: calc(32 * var(--u));
  --shell-bgload: calc(16px + 44px + 12 * var(--u));
}

.shell-metrics {
  position: absolute; left: 50%; bottom: var(--shell-bottom); transform: translateX(-50%);
  display: none; align-items: center; gap: var(--gap-l);
  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;
  /* kit screen box padding (screen_box: pad 10 + 8 x 10 + 4), widened to the 24 px corner art. */
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  pointer-events: auto; white-space: nowrap; max-width: calc(100vw - 2 * var(--shell-edge));
}
/* Background-load pill visible: the strip moves above it instead of overlapping it. */
body:has(#bgload:not(.hidden)) .shell-metrics { bottom: max(var(--shell-bottom), var(--shell-bgload)); }
body:has(#menu:not(.hidden) > .gm-home:not(.hidden)):not(:has(#menu .gm-news:not(.hidden))) .shell-metrics.is-ready { display: flex; }
.shell-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-xs); min-width: calc(150 * var(--u)); }
.shell-value { font-size: calc(34 * var(--u)); color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.shell-label { font-size: calc(15 * var(--u)); color: var(--text2); line-height: 1; letter-spacing: .06em; }
.shell-rule { display: block; flex: none; width: var(--hair); align-self: stretch; background: var(--divider); }

#shell .shell-fs {
  /* Kit key at button.height 46 (min hit 40 px), pad kit.key 20, glyph link_icon 24, legend link_font 20, gap m 12. */
  position: absolute; right: var(--shell-edge); top: var(--shell-edge);
  display: flex; align-items: center; justify-content: center; gap: var(--gap-m);
  box-sizing: border-box; border: 0 solid transparent; margin: 0;
  border-image: url('assets/ui/menu_v2/key.png') 44 fill / calc(22 * var(--u)) / 0 stretch;
  height: max(40px, var(--btn-h)); padding: 0 var(--key-pad-x); font-size: calc(20 * var(--u)); line-height: 1; color: var(--white);
  white-space: nowrap; pointer-events: auto;
}
#shell .shell-fs:hover { border-image-source: url('assets/ui/menu_v2/key_hover.png'); }
#shell .shell-fs:active { border-image-source: url('assets/ui/menu_v2/key_pressed.png'); }
#shell .shell-fs:focus-visible { border-image-source: url('assets/ui/menu_v2/key_focus.png'); outline: none; }
.shell-fs-ico { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); background: var(--cyan);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
body:has(#hud:not(.hidden)):not(:has(#pause:not(.hidden))) .shell-fs,
body:has(#loading:not(.hidden)) .shell-fs { display: none; }

/* Portrait phones: the strip shrinks so the three cells fit the width. */
body.gm-portrait .shell-cell { min-width: 0; }
body.gm-portrait .shell-metrics { gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); }