/* Jetster stage: sized to the game's 4:3 aspect so phones don't get a tall empty box around the canvas */
.stage-fill #stage.canvas-stage { height: auto; aspect-ratio: 4 / 3; max-height: min(72vh, 620px); min-height: 0; width: 100%;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#stage canvas#game { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }   /* a held finger is thrust, never a scroll or a selection */
.jetster-help { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.jetster-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px 12px; }
.jetster-help .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .jetster-help .hint-kb { display: none; }
  .jetster-help .hint-touch { display: inline; }
}
.jetster-sound { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--line, #1c2b4a);
  background: #0b1328; color: #bfe9ff; font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.jetster-sound:hover { border-color: var(--accent, #55d6ff); }
.jetster-sound svg { width: 15px; height: 15px; flex: none; }
.jetster-sound .off { display: none; }
.jetster-sound[aria-pressed="true"] { color: var(--muted, #8aa3c4); }
.jetster-sound[aria-pressed="true"] .on { display: none; }
.jetster-sound[aria-pressed="true"] .off { display: inline; }
.jetster-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* full screen (shared mechanism in stage.js): the game takes every pixel, the help row shrinks to one line at the bottom */
.stage.is-immersive .stage-body { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stage.is-immersive #stage.canvas-stage { aspect-ratio: auto; height: auto; max-height: none; flex: 1 1 auto; min-height: 0; }
.stage.is-immersive .stage-body > .jetster-help { flex: none; gap: 4px 12px; padding: 6px 12px 8px; font-size: 12px; }
.jetster-help .hint-rotate { display: none; align-items: center; gap: 6px; }
.jetster-help .hint-rotate svg { width: 16px; height: 16px; flex: none; }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .stage.is-immersive .jetster-help .hint-touch { display: none; }
  .stage.is-immersive .jetster-help .hint-rotate { display: inline-flex; }
}
/* short landscape screens: the side bands are free, so the help row floats in the corner and the game gets the full height */
@media (orientation: landscape) and (max-height: 520px) {
  .stage.is-immersive .stage-body > .jetster-help { position: absolute; right: 10px; bottom: 10px; padding: 0; }
  .stage.is-immersive .jetster-help .hint-kb, .stage.is-immersive .jetster-help .hint-touch { display: none; }
}
.jetster-sound { touch-action: manipulation; }
#stage canvas#game:focus { outline: none; }