:root {
  color-scheme: dark;
  --page-bg: #05070a;
  --frame: #171a1f;
  --frame-edge: #30343b;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(88, 97, 113, 0.22), transparent 34%),
    linear-gradient(180deg, #090b0f 0%, var(--page-bg) 100%);
  font-family: Arial, Helvetica, sans-serif;
}

.game-shell {
  width: min(100vw, 691px);
  aspect-ratio: 691 / 657;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--frame);
  border: 1px solid var(--frame-edge);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  background: #000;
}

@media (max-height: 680px) {
  .game-shell {
    width: min(100vw, calc(100vh * 691 / 657));
  }
}