/* 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.
   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:
     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; }

/* 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 {
  /* 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: relative;
  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; }

/* MUTE key: the FULLSCREEN kit key, square, speaker glyph (cyan; amber when muted). Hidden only on the loading screen.
   Phones: never under 44 px; in active flight it moves to the top centre (the thumb keys own the top-right corner). */
#shell .shell-mute {
  display: flex; align-items: center; justify-content: center; 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;
  width: max(40px, var(--btn-h)); height: max(40px, var(--btn-h)); padding: 0; pointer-events: auto;
}
#shell .shell-mute:hover { border-image-source: url('assets/ui/menu_v2/key_hover.png'); }
#shell .shell-mute:active { border-image-source: url('assets/ui/menu_v2/key_pressed.png'); }
#shell .shell-mute:focus-visible { border-image-source: url('assets/ui/menu_v2/key_focus.png'); outline: none; }
#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:has(#loading:not(.hidden)) .shell-mute { display: none; }
body.is-touch #shell .shell-mute { width: 44px; height: 44px; }
body.is-touch:has(#hud:not(.hidden)):not(:has(#pause:not(.hidden))) #shell .shell-keys { right: auto; left: 50%; transform: translateX(-50%); }