/* HeyVen Arcade: dark theme of the HeyVen palette (heyven-web design tokens 0.1.0), only these values. */
:root {
  --hv-ink-950: #141210;
  --hv-ink-900: #1d1a17;
  --hv-ink-800: #2f2a25;
  --hv-paper-50: #fbf8f2;
  --hv-paper-100: #f3ede3;
  --hv-paper-200: #ece3d4;
  --hv-brass-200: #e9c77a;
  --hv-brass-400: #d4a24a;
  --hv-brass-500: #b8893a;
  --hv-brass-600: #9a6f28;
  --hv-brass-700: #7a5a22;
  --hv-green-300: #3fa06c;
  --hv-green-600: #2c6e4a;
  --hv-rust-400: #e2825a;
  --hv-rust-700: #8f3f1c;
  color-scheme: dark;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--hv-ink-950);
  color: var(--hv-paper-100);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas {
  display: block;
  width: 100%;
  max-width: calc(100vh * 16 / 9);
  aspect-ratio: 16 / 9;
  background: var(--hv-ink-900);
  image-rendering: pixelated;
  touch-action: none;
}

canvas:focus-visible {
  outline: 2px solid var(--hv-brass-200);
  outline-offset: -2px;
}

noscript p {
  margin: 0;
  padding: 24px;
  color: var(--hv-brass-400);
}