.custom {
  --background: 0, 0%, 0%;
  --dark-gray: 0, 0%, 0%, 1;

  --background-gradient: radial-gradient(
    circle,
    hsla(var(--background)),
    hsla(var(--background))
  );

  --hero-gradient: linear-gradient(
    180deg,
    hsla(var(--background), 1) 0%,
    hsla(var(--background), 0.6) 50%,
    hsla(var(--background), 1) 100%
  );

  --foreground: 0 0% 98%;
  --card: 0 0% 98% / 0.05;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 25, 100%, 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 100% / 0.12;
  --secondary-foreground: 0 0% 98%;
  --tertiary: 0 0% 100%;
  --tertiary-foreground: 0 0% 0%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 40 100% 64%;
  --accent-foreground: 0, 0%, 0%;
  --destructive: 0 100% 74%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 100% / 0.12;
  --input: 0 0% 98% / 0.15;
  --ring: 0 0% 83.1%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  --highlight: 209.16, 73.9%, 52.95%;
  --game-shadow: 0 0 24px hsl(var(--highlight));
}

@media (width >= 64rem) {
  .custom {
    --hero-gradient: linear-gradient(
      180deg,
      hsla(var(--background), 1) 0%,
      hsla(var(--background), 0.5) 50%,
      hsla(var(--background), 1) 100%
    );
  }
}