@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:ital,wght@0,300;0,400;0,500;1,300&display=swap");

:root {
  --bg: #06051a;
  --surface: #0e0c28;
  --card: rgba(14, 12, 40, 0.92);
  --card-border: rgba(212, 175, 55, 0.18);
  --border-strong: rgba(212, 175, 55, 0.34);
  --gold: #eab308;
  --gold-light: #fef08a;
  --purple: #7c3aed;
  --indigo: #4f46e5;
  --text: #f5f2fc;
  --text-muted: #c8c3e0;
  --text-secondary: #dedbf0;
  --error: #f87171;
  --success: #86efac;
  --font-h: "Cinzel", serif;
  --font-b: "Inter", sans-serif;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-card:
    0 4px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--card-border);
  --glass-surface: rgba(14, 12, 40, 0.78);
  --glass-border: rgba(212, 175, 55, 0.18);
  --glass-shadow:
    0 18px 55px rgba(0, 0, 0, 0.52), 0 0 0 1px var(--glass-border);
  --c-tropical: #f59e0b;
  --c-vedic: #8b5cf6;
  --c-egyptian: #d97706;
  --c-american: #10b981;
  --c-celtic: #059669;
  --c-chinese: #ef4444;
  --c-maya: #06b6d4;
  --c-azteca: #e5890a;
  --c-numerology: #e879f9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bg);
}

.stars-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 15% 10%,
      rgba(124, 58, 237, 0.14) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 80%,
      rgba(79, 70, 229, 0.11) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(212, 175, 55, 0.05) 0%,
      transparent 65%
    ),
    #06051a;
}

.stars-bg::before,
.stars-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

.stars-bg::before {
  background-image:
    radial-gradient(
      1px 1px at 12% 7%,
      rgba(255, 255, 255, 0.9) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 28% 20%,
      rgba(255, 255, 255, 0.65) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 45% 4%,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 63% 16%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 79% 8%,
      rgba(212, 175, 55, 0.9) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 91% 23%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 7% 42%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 34% 56%,
      rgba(255, 255, 255, 0.75) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 56% 49%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 72% 64%,
      rgba(255, 255, 255, 0.65) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 93% 46%,
      rgba(212, 175, 55, 0.8) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 11% 78%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 39% 89%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 68% 83%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 86% 92%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 51% 97%,
      rgba(212, 175, 55, 0.5) 0%,
      transparent 100%
    );
  animation: twinkleA 7s ease-in-out infinite alternate;
}

.stars-bg::after {
  background-image:
    radial-gradient(
      1px 1px at 4% 16%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 22% 37%,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 49% 27%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 71% 43%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 96% 29%,
      rgba(212, 175, 55, 0.9) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 26% 69%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 61% 77%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 82% 59%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 43% 93%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 100%
    );
  animation: twinkleB 10s ease-in-out infinite alternate;
}

.glass-panel {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cosmic-title {
  font-family: var(--font-h);
  font-weight: 700;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--gold-light) 35%,
    var(--gold) 75%,
    #ca8a04 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.cosmic-subtitle {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.6;
}

@keyframes twinkleA {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@keyframes twinkleB {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.4;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .stars-bg::before,
  .stars-bg::after {
    animation: none;
  }
}

@media (forced-colors: active) {
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}