:root {
  --background: 22 46% 8%;
  --foreground: 38 45% 94%;
  --primary: 38 95% 52%;
  --secondary: 166 70% 42%;
  --muted: 34 20% 68%;
  --destructive: 10 88% 58%;
  --border: 34 28% 26%;
  --card: 24 38% 13%;
  --shadow-sm: 0 6px 18px hsl(18 70% 4% / 0.28);
  --shadow-md: 0 16px 40px hsl(18 70% 4% / 0.36);
  --shadow-lg: 0 30px 80px hsl(18 70% 4% / 0.52);
  --transition-fast: 150ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 220 35% 5%;
  --foreground: 42 44% 95%;
  --primary: 42 96% 58%;
  --secondary: 174 72% 45%;
  --muted: 220 18% 70%;
  --destructive: 4 84% 62%;
  --border: 220 22% 22%;
  --card: 220 32% 10%;
}

* {
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 8%, hsl(var(--primary) / 0.18), transparent 28rem),
    linear-gradient(180deg, hsl(23 52% 10%), hsl(var(--background)) 58%);
  color: hsl(var(--foreground));
  touch-action: none;
  overscroll-behavior: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.glass-card {
  background: linear-gradient(135deg, hsl(var(--card) / 0.88), hsl(var(--card) / 0.62));
  border: 1px solid hsl(var(--border));
  backdrop-filter: blur(16px);
}

.temple-panel {
  position: relative;
  overflow: hidden;
}

.temple-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.22), transparent 12rem),
    radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.16), transparent 13rem);
  opacity: 0.9;
}

.temple-panel > * {
  position: relative;
  z-index: 1;
}

button {
  transition: transform var(--transition-fast), box-shadow var(--transition-smooth), background-color var(--transition-fast), opacity var(--transition-fast);
}

button:focus-visible {
  outline: 3px solid hsl(var(--primary) / 0.45);
  outline-offset: 3px;
}

.hidden {
  display: none !important;
}

@media (min-width: 640px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.2), transparent 34rem),
      radial-gradient(circle at 10% 80%, hsl(var(--secondary) / 0.12), transparent 28rem),
      linear-gradient(180deg, hsl(23 52% 10%), hsl(var(--background)) 58%);
  }
}

@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;
  }
}