/* ==========================================================================
   CULTUS DESIGN SYSTEM — CORE TOKENS v1.0.0
   Brand: Ágora (SLU)
   Fonte da verdade: DESIGN_SYSTEM_CULTUS_SPEC.md
   ========================================================================== */

:root {
  --brand-primary:   #5B2C6F;
  --brand-action:    #D4AF37;
  --brand-text:      #0F0E17;
  --brand-bg:        #161426;
  --brand-surface:   #221F3B;
  --brand-warn:      #FF8C00;
  --brand-alert:     #E5484D;

  --color-text-primary:    #F4F1EA;
  --color-text-secondary:  #B8B0CD;
  --color-text-muted:      #7C7393;
  --color-text-gold:       #F1D279;

  --bg-canvas:             #0D0C17;
  --bg-surface-elevated:   #2D284B;
  --bg-surface-overlay:    rgba(22, 20, 38, 0.85);

  --border-subtle:         rgba(212, 175, 55, 0.15);
  --border-medium:         rgba(212, 175, 55, 0.35);
  --border-active:         #D4AF37;
  --border-alert:          #E5484D;

  --glass-bg:              rgba(34, 31, 59, 0.65);
  --glass-border:          rgba(212, 175, 55, 0.20);
  --glass-backdrop-filter: blur(12px) saturate(140%);

  --shadow-ritual-sm:      0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-ritual-md:      0 8px 24px rgba(15, 14, 23, 0.6);
  --shadow-ritual-lg:      0 16px 48px rgba(91, 44, 111, 0.35);
  --glow-gold:             0 0 20px rgba(212, 175, 55, 0.45);
  --glow-purple:           0 0 25px rgba(91, 44, 111, 0.60);
  --glow-alert:            0 0 20px rgba(229, 72, 77, 0.50);

  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'EB Garamond', system-ui, -apple-system, sans-serif;
  --font-code:    'Fira Code', 'JetBrains Mono', 'Courier New', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1.000rem;
  --text-md:    1.250rem;
  --text-lg:    1.563rem;
  --text-xl:    1.953rem;
  --text-2xl:   2.441rem;
  --text-3xl:   3.052rem;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: #FFFFFF;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}

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

code, .code {
  font-family: var(--font-code);
}

::selection { background: rgba(212,175,55,0.3); }

/* ---- LAYOUT SHELL ---- */
.cultus-shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }

.cultus-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: var(--bg-surface-overlay);
  backdrop-filter: var(--glass-backdrop-filter);
  border-bottom: 1px solid var(--border-subtle);
}
.cultus-nav .brand {
  font-family: var(--font-display);
  color: var(--brand-action);
  font-size: var(--text-md);
  font-weight: 700;
  display: flex; align-items: center; gap: var(--space-2);
}
.cultus-nav .brand svg { width: 28px; height: 28px; }
.cultus-nav ul { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; flex-wrap: wrap; }
.cultus-nav ul a {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-1);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.cultus-nav ul a:hover, .cultus-nav ul a.active {
  color: var(--brand-action);
  border-color: var(--brand-action);
  text-decoration: none;
}

footer.cultus-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* ---- COMPONENTS ---- */
.card {
  background: var(--brand-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-ritual-sm);
}
.card.elevated { background: var(--bg-surface-elevated); box-shadow: var(--shadow-ritual-md); }
.card.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-backdrop-filter);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand-action); color: var(--brand-text); box-shadow: var(--glow-gold); }
.btn-primary:hover { box-shadow: 0 0 30px rgba(212,175,55,0.65); }
.btn-secondary { background: transparent; color: var(--color-text-gold); border-color: var(--border-medium); }
.btn-secondary:hover { border-color: var(--border-active); }
.btn-alert { background: var(--brand-alert); color: #FFF; }
.btn-warn { background: var(--brand-warn); color: var(--brand-text); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.badge {
  display: inline-block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .06em; padding: 2px var(--space-2); border-radius: var(--radius-full);
  border: 1px solid var(--border-medium); color: var(--color-text-gold);
}
.badge.alert { border-color: var(--brand-alert); color: var(--brand-alert); }
.badge.warn { border-color: var(--brand-warn); color: var(--brand-warn); }

input[type="text"], input[type="email"], input[type="number"], textarea {
  width: 100%;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  color: var(--color-text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
input:focus, textarea:focus { outline: none; border-color: var(--border-active); box-shadow: var(--glow-gold); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- NAV MOBILE (hamburger) ---- */
.nav-mobile-toggle {
  display: none; background: transparent; border: 1px solid var(--border-medium);
  color: var(--color-text-secondary); width: 36px; height: 36px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 16px; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-mobile-toggle:hover { border-color: var(--border-active); color: #fff; }

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  .cultus-nav { flex-wrap: wrap; }
  .cultus-nav .brand { order: 1; }
  .nav-mobile-toggle { display: inline-flex; order: 2; }
  .cultus-nav #navAuthSlot { order: 3; }
  .cultus-nav ul {
    display: none; order: 4; flex-basis: 100%;
    flex-direction: column; gap: 0;
    margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
  }
  .cultus-nav ul.open { display: flex; }
  .cultus-nav ul a { display: block; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); }
  .cultus-nav .nav-more { width: 100%; }
  .cultus-nav .nav-more-btn { width: 100%; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); justify-content: space-between; }
  .cultus-nav .nav-more-menu { position: static; box-shadow: none; border: none; background: transparent; min-width: 0; padding-left: var(--space-4); }
}

.progress-track { width: 100%; height: 10px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-action)); }

.seal-icon { filter: drop-shadow(0 0 6px rgba(212,175,55,0.4)); }

.hairline { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-gold { color: var(--color-text-gold); }

/* ---- NAV PROFILE DROPDOWN ---- */
.nav-profile { position: relative; }
.nav-profile-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid var(--border-medium); color: var(--color-text-gold);
  font-size: var(--text-xs); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-profile-btn:hover { border-color: var(--border-active); }
.nav-profile-btn .caret { font-size: 9px; opacity: .7; }
.nav-profile-menu {
  display: none; position: absolute; right: 0; top: calc(100% + var(--space-2));
  background: var(--brand-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-md);
  box-shadow: var(--shadow-ritual-md); min-width: 200px; overflow: hidden; z-index: 60;
}
.nav-profile-menu.open { display: block; }
.nav-profile-menu a, .nav-profile-menu button {
  display: block; width: 100%; text-align: left; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: var(--color-text-secondary); background: none; border: none;
  cursor: pointer; font-family: var(--font-body);
}
.nav-profile-menu a:hover, .nav-profile-menu button:hover { background: var(--bg-surface-elevated); color: #fff; text-decoration: none; }
.nav-profile-menu .divider { border-top: 1px solid var(--border-subtle); margin: 0; }
.nav-profile-menu .sair { color: var(--brand-alert); }

/* ---- NAV "MAIS" (páginas secundárias, fora da barra principal) ---- */
.nav-more { position: relative; }
.nav-more-btn { background: transparent; border: none; color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.nav-more-btn:hover, .nav-more-btn.active { color: #fff; }
.nav-more-btn .caret { font-size: 9px; opacity: .7; }
.nav-more-menu { display: none; position: absolute; left: 0; top: calc(100% + var(--space-3)); background: var(--brand-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-ritual-md); min-width: 180px; overflow: hidden; z-index: 60; }
.nav-more-menu.open { display: block; }
.nav-more-menu a { display: block; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; }
.nav-more-menu a:hover, .nav-more-menu a.active { background: var(--bg-surface-elevated); color: #fff; text-decoration: none; }

/* ---- NAV NOTIFICATION BELL ---- */
.nav-auth-row { display: flex; align-items: center; gap: var(--space-3); }
.nav-bell-btn { position: relative; background: transparent; border: 1px solid var(--border-medium); color: var(--color-text-secondary); width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; line-height: 1; }
.nav-bell-btn:hover { border-color: var(--border-active); color: #fff; }
.nav-bell-badge { position: absolute; top: -6px; right: -6px; background: var(--brand-alert); color: #fff; font-size: 10px; line-height: 1; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; font-weight: 700; }
.nav-bell-menu { display: none; position: absolute; right: 0; top: calc(100% + var(--space-2)); background: var(--brand-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-ritual-md); width: 300px; max-height: 360px; overflow-y: auto; z-index: 60; }
.nav-bell-menu.open { display: block; }
.nav-bell-menu .notif-item { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--color-text-secondary); text-decoration: none; }
.nav-bell-menu .notif-item:last-child { border-bottom: none; }
.nav-bell-menu .notif-item:hover { background: var(--bg-surface-elevated); color: #fff; text-decoration: none; }
.nav-bell-menu .notif-item .quando { display: block; color: var(--color-text-muted); margin-top: 2px; }
.nav-bell-menu .notif-empty { padding: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

/* ---- NOVO ÆON — BOTÃO MÍSTICO CINTILANTE ---- */
.aeon-shimmer-btn {
  position: relative; display: block; overflow: hidden; text-align: center;
  padding: var(--space-12) var(--space-6); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212,175,55,.32) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 115%, rgba(139,92,246,.32) 0%, transparent 55%),
    var(--brand-surface);
  border: 1px solid rgba(212,175,55,.45);
  text-decoration: none;
  animation: aeonPulse 4s ease-in-out infinite;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.aeon-shimmer-btn:hover {
  border-color: rgba(212,175,55,.9);
  box-shadow: 0 0 55px rgba(212,175,55,.35), 0 0 100px rgba(139,92,246,.25);
  text-decoration: none;
  transform: translateY(-2px);
}
.aeon-shimmer-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 45%, rgba(212,175,55,.32) 50%, rgba(255,255,255,.16) 55%, transparent 70%);
  background-size: 260% 100%;
  animation: aeonShimmer 3.2s linear infinite;
}
.aeon-shimmer-btn .seal-spin, .aeon-shimmer-btn .titulo, .aeon-shimmer-btn .sub, .aeon-shimmer-btn .cta {
  position: relative; z-index: 2;
}
.aeon-shimmer-btn .seal-spin {
  width: 64px; height: 64px; margin-bottom: var(--space-4);
  filter: drop-shadow(0 0 18px rgba(212,175,55,.75));
  animation: aeonSealSpin 30s linear infinite;
}
.aeon-shimmer-btn .titulo {
  display: block; font-family: var(--font-display); font-size: var(--text-xl); color: #fff;
  margin-bottom: var(--space-3); text-shadow: var(--glow-gold); letter-spacing: .03em;
}
.aeon-shimmer-btn .sub {
  display: block; font-size: var(--text-sm); color: var(--color-text-secondary);
  max-width: 46ch; margin: 0 auto;
}
.aeon-shimmer-btn .cta {
  display: inline-block; margin-top: var(--space-6); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .12em; color: var(--brand-action);
  border: 1px solid rgba(212,175,55,.5); padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
}
@keyframes aeonShimmer { from { background-position: 220% 0; } to { background-position: -60% 0; } }
@keyframes aeonPulse { 0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,.15); } 50% { box-shadow: 0 0 45px rgba(212,175,55,.3), 0 0 80px rgba(139,92,246,.2); } }
@keyframes aeonSealSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- CÂMARA DO ÆON — portal para quem já foi aceito (sem passar por novo-aeon.html) ---- */
.aeon-portal-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; margin: 0 auto var(--space-6);
  border-radius: 50%; border: 1px solid rgba(255,255,255,.65);
  background: radial-gradient(circle at 50% 42%, #fff 0%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.06) 78%);
  text-decoration: none;
  animation: aeonPortalPulse 3.6s ease-in-out infinite;
  transition: transform .25s ease;
}
.aeon-portal-btn:hover { transform: scale(1.07); text-decoration: none; }
.aeon-portal-btn .titulo {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 700;
  letter-spacing: .05em; color: #111; text-shadow: 0 0 14px rgba(255,255,255,.9);
}
@keyframes aeonPortalPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255,255,255,.3), 0 0 50px rgba(255,255,255,.12); }
  50%      { box-shadow: 0 0 38px rgba(255,255,255,.6), 0 0 85px rgba(255,255,255,.32); }
}

/* ---- CONQUISTAS (badges + toast de desbloqueio) ---- */
.conquista-toast-wrap { position: fixed; top: 84px; right: var(--space-4); z-index: 200; display: flex; flex-direction: column; gap: var(--space-3); max-width: 320px; }
.conquista-toast {
  display: flex; gap: var(--space-3); align-items: flex-start; background: var(--brand-surface);
  border: 1px solid var(--border-active); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-ritual-lg); opacity: 0; transform: translateX(40px); transition: opacity .35s, transform .35s;
}
.conquista-toast.show { opacity: 1; transform: translateX(0); }
.conquista-toast .ic { font-size: 28px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(212,175,55,.6)); }
.conquista-toast .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-action); font-weight: 700; }
.conquista-toast .nome { font-family: var(--font-display); color: #fff; font-size: var(--text-sm); margin: 2px 0; }
.conquista-toast .desc { font-size: var(--text-xs); color: var(--color-text-secondary); }
.conquista-toast.raridade-epica { border-color: #a78bfa; box-shadow: 0 0 30px rgba(167,139,250,.35); }
.conquista-toast.raridade-lendaria { border-color: #facc15; box-shadow: 0 0 40px rgba(250,204,21,.45); }

.conquista-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--space-3); }
.conquista-slot { text-align: center; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); cursor: default; }
.conquista-slot .ic { font-size: 28px; line-height: 1; margin-bottom: var(--space-2); }
.conquista-slot.locked .ic { filter: grayscale(1) opacity(.3); }
.conquista-slot .nome { font-size: 10px; color: var(--color-text-secondary); line-height: 1.3; }
.conquista-slot.locked .nome { color: var(--color-text-muted); }
.conquista-slot.unlocked { border-color: var(--border-active); background: rgba(212,175,55,.06); }
.conquista-slot.unlocked.raridade-epica { border-color: #a78bfa; background: rgba(167,139,250,.08); }
.conquista-slot.unlocked.raridade-lendaria { border-color: #facc15; background: rgba(250,204,21,.1); }
.conquista-slot.selectable { cursor: pointer; transition: transform .15s; }
.conquista-slot.selectable:hover { transform: translateY(-2px); }
.conquista-slot.active-title { box-shadow: var(--glow-gold); }

.perfil-bio { width: 100%; background: var(--bg-canvas); border: 1px solid var(--border-subtle); color: var(--color-text-primary); padding: var(--space-3); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); resize: vertical; min-height: 60px; }
.perfil-bio:focus { outline: none; border-color: var(--border-active); box-shadow: var(--glow-gold); }
.titulo-ativo-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-gold); border: 1px solid var(--border-medium); padding: 2px var(--space-3); border-radius: var(--radius-full); margin-top: var(--space-2); }

/* ---- MOLDURAS DE AVATAR POR RARIDADE ---- */
.perfil-avatar.frame-rara { border-color: #60a5fa; box-shadow: 0 0 20px rgba(96,165,250,.45); }
.perfil-avatar.frame-epica { border-color: #a78bfa; box-shadow: 0 0 26px rgba(167,139,250,.55); }
.perfil-avatar.frame-lendaria { border-width: 3px; border-color: #facc15; animation: molduraLendariaPulse 3s ease-in-out infinite; }
@keyframes molduraLendariaPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(250,204,21,.5), 0 0 30px rgba(250,204,21,.25); }
  50% { box-shadow: 0 0 16px rgba(250,204,21,.7), 0 0 55px rgba(250,204,21,.45); }
}

/* ---- PROGRESSO EM BADGES BLOQUEADOS ---- */
.conquista-slot .progresso { font-size: 9px; color: var(--color-text-muted); margin-top: 2px; }
.conquista-slot .progresso-track { width: 100%; height: 3px; border-radius: var(--radius-full); background: rgba(255,255,255,.08); overflow: hidden; margin-top: 3px; }
.conquista-slot .progresso-fill { height: 100%; background: var(--brand-action); }