/* Global reset + typography shared by every screen. Screen/component-
   specific rules live in their own files (lobby.css, hud.css, ...). */
* {
  box-sizing: border-box;
  /* iOS Safari selecting the D-pad arrows (and anything else) on a
     touch-and-hold instead of just registering the hold — plain
     `user-select: none` alone doesn't fix this on iOS, it needs the
     -webkit- prefixed property specifically; some elements here already
     had unprefixed user-select (touchControls.css), which is why it
     wasn't already covered. -webkit-touch-callout is the separate
     property for iOS's long-press callout menu (copy/look up/share) —
     user-select doesn't govern that, this does. Applied to `*` rather
     than just html/body so it's unambiguous ("anything in the entire
     document") rather than relying on inheritance not getting overridden
     somewhere. Doesn't stop typing/editing in #player-name — form control
     text editing isn't governed by an ancestor's user-select in any
     current browser. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* the canvas + fixed overlays fill the viewport on their own */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
}

button {
  font-family: inherit;
  font-weight: inherit;
  cursor: pointer;
}

/* Toggled from JS instead of setting style.display directly, so no inline
   styles are ever written from script either. */
.hidden {
  display: none !important;
}