:root {
  --bg-0: #2b3a34;
  --bg-1: #141a18;
  --hud: #f8fbff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 20% 15%, #426457, var(--bg-0) 40%, var(--bg-1));
  touch-action: none;
  font-family: "Trebuchet MS", "Avenir Next", sans-serif;
}

.app {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: max(env(safe-area-inset-top), 6px) max(env(safe-area-inset-right), 6px)
    max(env(safe-area-inset-bottom), 6px) max(env(safe-area-inset-left), 6px);
}

canvas {
  width: min(100vw - 12px, calc((100vh - 12px) * 0.5625));
  height: min(100vh - 12px, calc((100vw - 12px) * 1.7778));
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
  background: #112033;
  image-rendering: auto;
}