/* ============================================================
   REINCARNATION — CELESTIAL ORACLE DESIGN SYSTEM
   Source of truth: welcome.html
   Background : #131314
   Primary    : #f2ca50  (gold)
   Buttons    : solid gold #f2ca50, text #3c2f00
   Fonts      : Bodoni Moda (headings) / DM Sans (body)
   ============================================================ */

/* -- Google Fonts: force Bodoni Moda + DM Sans to load ---- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* -- Background override ----------------------------------- */
html, body {
  background-color: #131314 !important;
  background: #131314 !important;
  color: #e5e2e3 !important;
}

/* -- Kill purple/violet page background variants ----------- */
[style*='background:#0F0A19'],
[style*='background: #0F0A19'],
[style*='background-color:#0F0A19'],
[style*='background-color: #0F0A19'],
[style*='background:#1E1333'],
[style*='background: #1E1333'] {
  background: #131314 !important;
  background-color: #131314 !important;
}

/* -- Font override: replace Cinzel -> Bodoni Moda ---------- */
[style*='font-family:\'Cinzel\''],
[style*='font-family: \'Cinzel\''],
[style*=font-family:Cinzel] {
  font-family: 'Bodoni Moda', serif !important;
}

/* -- Font override: replace Plus Jakarta Sans -> DM Sans --- */
[style*='font-family:\'Plus Jakarta Sans\''],
[style*='font-family: \'Plus Jakarta Sans\''],
[style*=font-family:Plus Jakarta Sans] {
  font-family: 'DM Sans', sans-serif !important;
}

/* -- Global font fallbacks --------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bodoni Moda', serif !important;
}
body, p, span, div, button, input, select, textarea, a {
  font-family: 'DM Sans', sans-serif;
}

/* -- CTA / button color override --------------------------- */
.cta-btn,
.gold-btn,
.cta-primary,
button[class*='cta'],
button[class*='btn'] {
  background: #f2ca50 !important;
  background-color: #f2ca50 !important;
  color: #3c2f00 !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(242, 202, 80, 0.4) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}
.cta-btn:hover,
.gold-btn:hover {
  background: #ffe088 !important;
  box-shadow: 0 0 30px rgba(242, 202, 80, 0.6) !important;
}

/* -- Inline-style gradient button killer ------------------- */
button[style*='#D4AF55,#8B5CF6'],
button[style*='#8B5CF6,#D4AF55'],
a[style*='#D4AF55,#8B5CF6'],
a[style*='#8B5CF6,#D4AF55'] {
  background: #f2ca50 !important;
  background-image: none !important;
  color: #3c2f00 !important;
}

/* -- Glass cards ------------------------------------------- */
.glass-card {
  background: rgba(19, 19, 20, 0.85) !important;
  border-color: rgba(242, 202, 80, 0.25) !important;
}
.glass-card.selected,
.glass-card:focus {
  border-color: #f2ca50 !important;
  box-shadow: inset 0 0 20px rgba(242, 202, 80, 0.08), 0 0 12px rgba(242, 202, 80, 0.18) !important;
}

/* -- Progress bar: gold only ------------------------------- */
[style*='#D4AF55,#8B5CF6'],
[style*='linear-gradient(to right,#D4AF55,#8B5CF6)'] {
  background: linear-gradient(to right, #f2ca50, #e9c349) !important;
}

/* -- Header/nav background --------------------------------- */
header[style*='#0F0A19'],
.sticky-header,
nav {
  background-color: rgba(19, 19, 20, 0.85) !important;
}

/* -- Text colour fixes ------------------------------------- */
[style*='color:#EDE0FF'],
[style*='color: #EDE0FF'] {
  color: #e5e2e3 !important;
}
[style*='color:#BBA8D9'],
[style*='color: #BBA8D9'] {
  color: #d0c5af !important;
}
[style*='color:#c8b8e8'],
[style*='color: #c8b8e8'] {
  color: #d0c5af !important;
}
[style*='color:#5C4A7A'],
[style*='color: #5C4A7A'] {
  color: rgba(242, 202, 80, 0.5) !important;
}

/* -- Sticky CTA bar bg ------------------------------------- */
.cta-sticky {
  background: linear-gradient(to top, #131314 70%, transparent) !important;
}

/* -- Glowing button (welcome style) ------------------------ */
.glowing-button {
  background-color: #f2ca50 !important;
  background: #f2ca50 !important;
  color: #3c2f00 !important;
  box-shadow: 0 0 20px rgba(242, 202, 80, 0.4) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  /* CRITICAL: ensure button is clickable and visible */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  padding: 18px 40px !important;
  border-radius: 9999px !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  min-width: 220px !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}
.glowing-button:hover {
  box-shadow: 0 0 30px rgba(242, 202, 80, 0.6) !important;
  transform: translateY(-2px) !important;
}
.glowing-button:active {
  transform: scale(0.97) !important;
}
/* Ensure child elements inside glowing-button don't block clicks */
.glowing-button * {
  pointer-events: none !important;
}

/* === g3 ligature fix 2026-05-31 === */
/* Restore Material Symbols font-family overridden by design-system body/span rules */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
span.material-symbols-outlined,
span.material-symbols-rounded,
span.material-symbols-sharp {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}