/*
 * The dark background before the app has loaded (UX-5). The page grows with its content and the
 * browser scrolls it, so phones get their native scrolling (the address bar collapses).
 */
html,
body {
  min-height: 100%;
  margin: 0;
  background: #14110e;
  color: #f1e9dc;
}

#root {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* Keyboard focus (go-ui-design §4), as on the landing page. `:focus-visible` leaves mouse and touch
   alone. It outranks react-native-web's single-class styles. */
[role='button']:focus-visible,
a:focus-visible {
  outline: 2px solid #f6d38f;
  outline-offset: 3px;
}

/* Board coordinates and move numbers use lining figures, as printed game records do. */
svg text {
  font-variant-numeric: lining-nums;
}