:root {
  color-scheme: dark;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #090608;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 30%, #351018 0, #10070b 46%, #030203 100%);
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.game-shell {
  position: relative;
  width: min(100vw, calc(100dvh * 0.5625));
  height: min(100dvh, calc(100vw * 1.7777778));
  overflow: hidden;
  background: #050405;
  box-shadow: 0 0 80px rgb(0 0 0 / 72%);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-aspect-ratio: 9 / 16) {
  .game-shell {
    border-inline: 1px solid rgb(255 190 96 / 16%);
  }
}