@view-transition {
  navigation: auto;
}
html {
  background: #6f6d67;
  overscroll-behavior: none;
}
body {
  margin: 0;
  overscroll-behavior: none;
}
html[data-loading] body {
  visibility: hidden;
}
html[data-loading] #boot {
  visibility: visible;
}
#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-content: center;
  gap: 16px;
  display: grid;
  place-items: center;
  min-height: 100dvh;
}
#boot progress {
  width: 72px;
  height: 3px;
  accent-color: #d8ded7;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
}
/* The activated table (named by the lobby at pageswap) blooms toward the viewer while the game fades in. */
::view-transition-group(table-art) {
  animation-duration: 280ms;
}
::view-transition-old(table-art) {
  animation: 280ms cubic-bezier(0.4, 0, 0.8, 0.6) both bgos-table-out;
  transform-origin: 50% 50%;
}
@keyframes bgos-table-out {
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(table-art),
  ::view-transition-old(table-art) {
    animation: none;
  }
}