body {
  --size: min(100vw, 100vh);
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.pregame {
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  font-size: calc(var(--size) * 0.05);
}

.pregame:first-of-type {
  margin-top: auto;
}

.pregame:nth-of-type(2) {
  font-size: calc(var(--size) * 0.2);
}

.pregame:last-of-type {
  margin-bottom: auto;
}

.spinner {
  border: 0.25em solid rgb(222, 226, 230);
  border-right-color: transparent;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: 0.75s linear infinite spinner-border;
  position: relative;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

@keyframes spinner-border {
  100% {
    transform: rotate(360deg);
  }
}

.risked {
  font-family: 'Trebuchet', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  padding-inline: calc(var(--size) * 0.02);
  font-size: calc(var(--size) * 0.2);
  border: currentColor calc(var(--size) * 0.02) solid;
  border-radius: calc(var(--size) * 0.03);
  translate: -50% -50%;
  margin: 0;
  color: rgb(214, 0, 0);
  font-weight: bold;
  rotate: -25deg;
}