/* Codex UX oomph layer: add after your current Mirror CSS */
:root {
  --codex-bg: #050508;
  --codex-card: #0c0c14;
  --codex-panel: #101018;
  --codex-gold: #C8A76A;
  --codex-gold-bright: #E7CE83;
  --codex-bone: #F3EDE2;
  --codex-muted: #7A7A8E;
  --codex-line: #3C3C50;
  --codex-wine: #08081A;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(200,167,106,.055), transparent 34rem),
    radial-gradient(circle at 18% 32%, rgba(200,167,106,.025), transparent 24rem),
    linear-gradient(180deg, rgba(6,6,18,.10), transparent 42%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .34;
  background-image: url('/static/images/codex/codex-atmospheric-texture.svg');
  background-size: cover;
  mix-blend-mode: screen;
}

.codex-card,
.mirror-card,
.dashboard-panel,
.pathway-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(200,167,106,.04), transparent 50%),
    linear-gradient(180deg, rgba(14,14,20,.94), rgba(6,6,12,.97));
  border: 1px solid rgba(200,167,106,.12);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(200,167,106,.05);
}

.codex-card--hero,
.mirror-hero {
  position: relative;
  overflow: hidden;
}

.codex-card--hero::before,
.mirror-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 22%, rgba(200,167,106,.08), transparent 42%);
  filter: blur(20px);
  opacity: .6;
  pointer-events: none;
}

.codex-gold-button,
.gold-button,
button.primary {
  background: linear-gradient(135deg, #E3C978, #C8A76A 48%, #9B753D);
  box-shadow:
    0 10px 30px rgba(200,167,106,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
  letter-spacing: .22em;
}

.codex-gold-button:hover,
.gold-button:hover,
button.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 38px rgba(200,167,106,.24),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.codex-section-title,
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--codex-gold);
  letter-spacing: .32em;
}

.codex-section-title::after,
.section-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(200,167,106,.5), transparent);
}

.codex-orb,
.avatar-orb,
.depth-orb {
  box-shadow:
    0 0 0 1px rgba(200,167,106,.32),
    0 0 60px rgba(200,167,106,.06),
    0 0 120px rgba(200,167,106,.03),
    inset 0 0 20px rgba(200,167,106,.06);
}

@media (prefers-reduced-motion: no-preference) {
  .codex-orb,
  .avatar-orb,
  .depth-orb {
    animation: codex-breathe 6s ease-in-out infinite;
  }
  .seal-earned,
  .seal-card {
    animation: codex-soft-reveal .65s ease both;
  }
}

@keyframes codex-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(200,167,106,.22), 0 0 40px rgba(200,167,106,.05), 0 0 80px rgba(200,167,106,.02), inset 0 0 18px rgba(200,167,106,.05); }
  50%       { box-shadow: 0 0 0 1px rgba(231,206,131,.38), 0 0 70px rgba(200,167,106,.10), 0 0 140px rgba(200,167,106,.04), inset 0 0 28px rgba(200,167,106,.08); }
}

@keyframes codex-soft-reveal {
  from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}