/* Page shell overlay (shell.js): FULLSCREEN key top right. The lifetime figures live on jbrostudio.com/webdemo only.
   The canvas keeps the whole viewport (ui.css #game); the shell layer lets every click through except on the key.
   Both keys are JETS design-system glass keys (menu.css .jt-btn recipe, set by shell.js) in the avionics palette.
   Visibility follows the game layers through body classes mirrored by shell_layers.js (shellLayerClasses: shell-flying =
   HUD shown and pause hidden, shell-paused, shell-loading; :has() is not used: Chrome < 105 drops those rules), so
   main.js never toggles the shell:
     key    ─ everywhere except active flight (HUD shown and pause card hidden) and the loading screen
   Right-to-left languages (ui/text.js setLocale: body.is-rtl) take their paragraph direction from the text itself;
   the layout stays the game's (the desktop game does not mirror its screens either). */
#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-edge: calc(20 * var(--u));
}
body.is-rtl :is(#menu, #settings, #pause, #results, #hud, #shell) * { unicode-bidi: plaintext; }
/* Connected scripts (Devanagari, Thai, Arabic): the UI's tracked capitals (letter-spacing) split their letter clusters
   ("पा य ल ट" instead of "पायलट", broken Arabic joins), so text in those languages is never tracked. :lang() also
   catches the picker's native names (menu.js sets lang on each), whatever the UI language. */
:is(:lang(hi), :lang(th), :lang(ar)) { letter-spacing: 0 !important; }
/* While paused the shell keys sit above the pause layer (menu.css #pause z-index 35), so MUTE and FULLSCREEN stay clickable. */
body.shell-paused #shell { z-index: 36; }

/* Top-right key row (shell.js): MUTE (always) then FULLSCREEN (hidden in active flight). */
#shell .shell-keys { position: absolute; right: var(--shell-edge); top: var(--shell-edge); display: flex; gap: var(--gap-m);
  align-items: center; pointer-events: none; }
#shell .shell-fs {
  /* JETS glass key (.jt-btn) at button.height 46 (min hit 40 px), pad 20, glyph 24, legend 20, gap m 12. */
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--gap-m);
  box-sizing: border-box; border: 0; margin: 0;
  height: max(var(--touch-min), var(--btn-h)); padding: 0 var(--key-pad-x); font-size: max(var(--font-min), calc(20 * var(--u))); line-height: 1; color: var(--white);
  white-space: nowrap; pointer-events: auto;
}
.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.shell-flying #shell .shell-fs,
body.shell-loading #shell .shell-fs { display: none; }

/* MUTE key: the FULLSCREEN glass key, square, speaker glyph (cyan; amber when muted). Hidden only on the loading screen.
   Phones: never under 44 px; in active flight it sits in the top-right thumb row, just left of the pause key, with the
   RECENTRE key (shown only while the gyro is held off-centre) moved one MUTE slot further left (mobile.css). The old
   top-centre place sat in the pilot's sight line over the pitch ladder (UI-FLIGHT #2). */
#shell .shell-mute {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 0; margin: 0;
  width: max(var(--touch-min), var(--btn-h)); height: max(var(--touch-min), var(--btn-h)); padding: 0; pointer-events: auto;
}
#shell .shell-mute .shell-fs-ico { width: max(20px, calc(26 * var(--u))); height: max(20px, calc(26 * var(--u))); }
#shell .shell-mute.is-muted .shell-fs-ico { background: var(--amber); }
body.shell-loading #shell .shell-mute { display: none; }
body.is-touch #shell .shell-mute { width: 44px; height: 44px; }
/* In flight the MUTE key is a thumb key beside PAUSE: the 48 px Android touch target (UI-FLIGHT #5; 44 px in menus). */
body.is-touch.shell-flying #shell .shell-mute { width: 48px; height: 48px; }
body.is-touch.shell-flying #shell .shell-keys { right: calc(var(--safe-r) + var(--thumb) + 10px); top: calc(var(--safe-t) + (var(--thumb) - 48px) / 2); }

/* Build id (shell.js showBuild): bottom-left, small and dim; same visibility as the FULLSCREEN key (menus and pause only). */
#shell .shell-build { position: absolute; left: var(--shell-edge); bottom: calc(6 * var(--u)); font-size: max(var(--font-min), calc(13 * var(--u)));
  color: var(--version); opacity: .7; letter-spacing: .04em; pointer-events: none; user-select: text; }
body.shell-flying #shell .shell-build,
body.shell-loading #shell .shell-build { display: none; }