:root {
  color-scheme: dark;
  background: #030511;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 20%, rgba(53, 81, 151, .28), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(102, 42, 127, .22), transparent 32%),
    #030511;
}

main {
  position: relative;
  width: min(100%, calc((100svh - 16px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #050817;
  border: 2px solid #5de5ff;
  box-shadow: 0 0 0 3px #141b43, 0 0 34px rgba(93, 229, 255, .22);
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #050817;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

#canvas:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain;
  background: #000;
}

#spinner {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 48px;
  height: 48px;
  margin: -24px;
  border: 7px solid rgba(93, 229, 255, .2);
  border-left-color: #5de5ff;
  border-radius: 50%;
  display: none;
  text-indent: -9999px;
}

#spinner.pending,
#spinner.loading {
  display: block;
  animation: spin 1s steps(8) infinite;
}

#spinner.error {
  display: block;
  border-color: #ff5577;
  animation: none;
}

noscript {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: white;
  font: 700 16px monospace;
  text-align: center;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-aspect-ratio: 1/1) {
  body { padding: 0; }
  main { width: 100%; border-left: 0; border-right: 0; }
}