:root {
  --background: #141318;
  --foreground: #f2f0f5;
  --accent: #b4a0f8;
  --muted: #a09da8;
  --track: rgb(255 255 255 / 0.07);
  --error: #f0a3a3;
  color-scheme: dark;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background);
}

#game-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--background);
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--background);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

#game-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

#game-title {
  color: var(--foreground);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.01em;
  text-align: center;
}

#game-progress {
  width: min(280px, 60vw);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--track);
}

#game-progress-fill {
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

#game-status {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

#game-loader.is-error #game-progress {
  display: none;
}

#game-loader.is-error #game-status {
  max-width: 40ch;
  color: var(--error);
  line-height: 1.5;
  text-align: center;
}