/* App shell: layering only. Everything visual lives in ui/* blocks and the renderer. */

html,
body {
  height: 100%;
  overflow: hidden;
}

.app-arena {
  position: fixed;
  inset: 0;
  /* A thumb on the arena drives the ship; it must never scroll or select. */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: none; /* the renderer draws the crosshair */
  touch-action: none;
}

.app-arena[hidden] {
  display: none;
}

#screen,
#overlay {
  position: relative;
}

#overlay {
  z-index: 30;
}

.app-noscript {
  padding: 48px;
  text-align: center;
  color: var(--qc-text-dim);
}

/* The menu can be taller than a short viewport (the page itself never
   scrolls), so its screen scrolls. The arena HUD never does. */
#screen[data-screen="menu"],
#screen[data-screen="leaderboard"] {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}