html,
body,
#app {
  min-height: 100%;
}

#app {
  display: grid;
  place-items: center;
}

.game-shell {
  height: min(56.25vw, 540px);
  max-height: 100vh;
  max-width: 177.7778vh;
  padding: 0;
  width: min(100vw, 960px);
}

@media (orientation: landscape) {
  .game-shell {
    height: 100vh;
    width: 177.7778vh;
  }
}

@media (max-width: 700px), (pointer: coarse) {
  .game-shell {
    height: min(56.25vw, 540px);
    max-height: 100vh;
    max-width: 177.7778vh;
    padding: 0;
    width: min(100vw, 960px);
  }

  .campaign-card {
    max-height: calc(100% - 12px);
  }
}