@font-face {
  font-family: "PressStart2P";
  src: url("./assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: block;
}

@font-face {
  font-family: "DotGothic16";
  src: url("./assets/fonts/DotGothic16-Regular.ttf") format("truetype");
  font-display: block;
}

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

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top, #7fe2ff 0%, #4c8dff 32%, #15264d 72%, #07101d 100%);
  font-family: "PressStart2P", "DotGothic16", "Trebuchet MS", Arial, sans-serif;
  color: #ffffff;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

@supports not (height: 100dvh) {
  #app {
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
  }
}

#game-shell {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(5, 11, 24, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

#game-shell canvas {
  display: block;
  width: 100%;
  height: 100%;
}