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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-midnight-900);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

#app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* Ambient background atmosphere */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(85,51,168,0.25), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 100%, rgba(45,27,94,0.2), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(212,160,23,0.06), transparent 70%),
    linear-gradient(180deg, var(--c-midnight-800) 0%, var(--c-midnight-900) 100%);
  z-index: -2;
  pointer-events: none;
}

#app::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.03) 0%, transparent 1px),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,0.02) 0%, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.025) 0%, transparent 1px);
  background-size: 200px 200px, 300px 300px, 250px 250px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }

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

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

button:disabled { cursor: not-allowed; }

a { color: var(--c-gold-400); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--c-gold-400);
  color: var(--c-ink);
}

/* ─── Utility Classes ─────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-top);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-gold-400);
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--sp-4);
}

.noscript-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-8);
  text-align: center;
  gap: var(--sp-4);
}

/* ─── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-purple-600);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-purple-500); }

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