:root {
  color-scheme: light;
  --background: 222 45% 96%;
  --foreground: 228 37% 12%;
  --primary: 266 89% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 185 78% 38%;
  --secondary-foreground: 0 0% 100%;
  --muted: 226 26% 88%;
  --destructive: 350 83% 56%;
  --border: 226 20% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(228 37% 12% / 0.08);
  --shadow-md: 0 16px 42px hsl(228 37% 12% / 0.14);
  --shadow-lg: 0 28px 80px hsl(228 37% 12% / 0.20);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  color-scheme: dark;
  --background: 229 46% 8%;
  --foreground: 218 55% 96%;
  --primary: 275 96% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 92% 52%;
  --secondary-foreground: 228 37% 12%;
  --muted: 229 28% 18%;
  --destructive: 350 92% 66%;
  --border: 228 26% 24%;
  --card: 229 38% 12%;
  --shadow-sm: 0 8px 24px hsl(0 0% 0% / 0.24);
  --shadow-md: 0 16px 42px hsl(0 0% 0% / 0.32);
  --shadow-lg: 0 28px 80px hsl(0 0% 0% / 0.42);
}

* {
  box-sizing: border-box;
}

html {
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100dvh;
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, hsl(var(--primary) / 0.18), transparent 30rem),
    radial-gradient(circle at 90% 16%, hsl(var(--secondary) / 0.16), transparent 28rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.62));
}

button {
  -webkit-tap-highlight-color: transparent;
}

.bg-1 { background-color: hsl(var(--background)); }
.bg-2 { background-color: hsl(var(--card)); }
.bg-3 { background-color: hsl(var(--muted)); }
.bg-4 { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--foreground) / 0.72); }
.text-tertiary { color: hsl(var(--foreground) / 0.52); }
.accent { color: hsl(var(--primary)); }

.arena-grid {
  background-image:
    linear-gradient(hsl(var(--border) / 0.42) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.42) 1px, transparent 1px),
    radial-gradient(circle at center, hsl(var(--primary) / 0.18), transparent 58%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  opacity: 0.82;
}

.arena-preview {
  background:
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / 0.78)),
    radial-gradient(circle at center, hsl(var(--primary) / 0.22), transparent 60%);
}

.game-orb {
  animation: pulse-orb 1.35s ease-in-out infinite;
}

@keyframes pulse-orb {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}