html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #4a4f66; /* letterbox: deep indigo-grey, like a dim bedroom */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  /* Pinned to the screen: no rubber-band scroll or pull-to-refresh on phones. */
  position: fixed;
  inset: 0;
  height: 100dvh;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The canvas fills the stage; the arena and its bands are placed inside it (layout.js). */
#stage canvas {
  flex: none;
}

canvas {
  display: block;
  touch-action: none;
}

/* Visually hidden, still read by screen readers (the round-over announcement). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Chrome extension popup: pin to exactly 400 x 600 (the max is 800 x 600). */
html.popup,
html.popup body {
  position: static;
  width: 400px;
  height: 600px;
  padding: 0;
}