@font-face {
  font-family: "DIN-Black";
  src: url("./assets/DIN-Black.ttf?v=5731307d3580093aaf96ff3e408080ae87006d2d") format("truetype");
  font-display: block;
}

@font-face {
  font-family: "DIN-Medium";
  src: url("./assets/DIN-Medium.ttf?v=5731307d3580093aaf96ff3e408080ae87006d2d") format("truetype");
  font-display: block;
}

:root {
  color-scheme: dark;
  background: #00010c;
  font-family: "DIN-Black", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #00010c;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#game-shell {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

#game-canvas {
  display: block;
  width: min(100vw, calc(100vh * 0.75));
  height: min(100vh, calc(100vw * 1.333333));
  background: #000033;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game-canvas[hidden] {
  display: none;
}

#report-bug-link {
  display: block;
  position: fixed;
  z-index: 1;
}

#report-bug-link[hidden] {
  display: none;
}

#loading {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  margin: 0;
  color: #ffae41;
  font-size: 18px;
}

#startup-artwork {
  width: min(100%, calc(100vh * 0.75));
  max-height: 100%;
  aspect-ratio: 3 / 4;
  justify-self: center;
  background: #00010c url("./assets/startup/startup-1536x2048.jpg?v=5731307d3580093aaf96ff3e408080ae87006d2d") center / contain no-repeat;
}

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

#loading[hidden] {
  display: none;
}

#loading button {
  min-width: 112px;
  min-height: 44px;
  border: 1px solid #ffae41;
  border-radius: 4px;
  background: #151936;
  color: #fff;
  font: 16px "DIN-Black", sans-serif;
  cursor: pointer;
}

#loading button:active {
  background: #292f5c;
}

#loading button:disabled {
  cursor: wait;
  opacity: 0.7;
}