:root {
  --background: 26 38% 8%;
  --foreground: 39 38% 92%;
  --primary: 25 88% 52%;
  --secondary: 43 78% 62%;
  --muted: 38 20% 72%;
  --destructive: 0 72% 54%;
  --border: 31 30% 24%;
  --card: 28 34% 13%;
  --shadow-sm: 0 2px 10px hsl(20 50% 4% / 0.22);
  --shadow-md: 0 14px 34px hsl(20 50% 4% / 0.34);
  --shadow-lg: 0 28px 70px hsl(20 60% 3% / 0.48);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 24 44% 6%;
  --foreground: 38 45% 94%;
  --primary: 22 92% 55%;
  --secondary: 46 90% 66%;
  --muted: 36 20% 76%;
  --destructive: 0 76% 58%;
  --border: 30 34% 22%;
  --card: 26 40% 11%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, hsl(var(--primary) / 0.16), transparent 28rem),
    radial-gradient(circle at 92% 8%, hsl(var(--secondary) / 0.12), transparent 26rem),
    linear-gradient(135deg, hsl(var(--background)), hsl(20 42% 6%));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding-top: env(safe-area-inset-top);
}

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

button:focus-visible, a:focus-visible {
  outline: 3px solid hsl(var(--secondary));
  outline-offset: 3px;
}

.temple-glow {
  background:
    linear-gradient(90deg, hsl(var(--background) / 0.1), hsl(var(--primary) / 0.12), hsl(var(--background) / 0.1)),
    repeating-linear-gradient(90deg, transparent 0 42px, hsl(var(--secondary) / 0.035) 42px 44px);
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.temple-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, hsl(var(--card) / 0.94), hsl(var(--card) / 0.72)),
    radial-gradient(circle at 20% 0%, hsl(var(--secondary) / 0.08), transparent 16rem);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}

.boss-card {
  border: 1px solid hsl(var(--primary) / 0.45);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 10% 20%, hsl(var(--primary) / 0.18), transparent 18rem),
    linear-gradient(135deg, hsl(var(--card) / 0.96), hsl(10 42% 10% / 0.9));
  box-shadow: var(--shadow-lg);
}

.cinema-panel {
  border: 1px solid hsl(var(--secondary) / 0.42);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, hsl(42 70% 18% / 0.42), hsl(var(--card) / 0.96)),
    radial-gradient(circle at 50% 0%, hsl(var(--secondary) / 0.2), transparent 20rem);
  box-shadow: var(--shadow-lg);
}

.chip {
  align-items: center;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.75rem;
  text-transform: uppercase;
}

strong {
  color: hsl(var(--secondary));
}

em {
  color: hsl(var(--secondary));
  font-style: normal;
  font-weight: 800;
}

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