/* ═══════════════════════════════════════════════════════════════════
   THECONCLAVE DOMINION — SHARED STYLES v12
   Smooth · Cinematic · Performance-first
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700;900&family=Exo+2:ital,wght@0,100;0,300;0,400;0,600;0,800;1,300&family=Share+Tech+Mono&display=swap');

:root {
  --void:#050508; --void-2:#07070f; --void-3:#0d0d1a;
  --panel:rgba(10,10,22,.82);
  --gold:#FFB800; --gold-glow:#FFC94D;
  --electric:#00D4FF; --plasma:#7B2FFF; --violet:#9B3FFF;
  --neon-green:#35ED7E; --hot-pink:#FF4CD2; --blurple:#5865F2;
  --crimson:#FF1744; --ember:#FF4500; --amber:#FF8C00;
  --spectral-text:linear-gradient(90deg,#FF4CD2 0%,#A855F7 25%,#5865F2 40%,#00D4FF 55%,#35ED7E 70%,#FFB800 85%,#FF4CD2 100%);
  --spectral-90:linear-gradient(90deg,#FF0080,#FF4CD2,#A855F7,#5865F2,#00D4FF,#35ED7E,#FFB800,#FF8C00,#FF0080);
  --glow-gold:0 0 20px rgba(255,184,0,.7),0 0 50px rgba(255,184,0,.3);
  --glow-electric:0 0 20px rgba(0,212,255,.7),0 0 50px rgba(0,212,255,.3);
  --glow-plasma:0 0 20px rgba(123,47,255,.8),0 0 50px rgba(123,47,255,.4);
  --glow-green:0 0 20px rgba(53,237,126,.7),0 0 50px rgba(53,237,126,.3);
  --glow-pink:0 0 20px rgba(255,76,210,.7),0 0 50px rgba(255,76,210,.3);
  --font-display:'Cinzel Decorative',serif;
  --font-heading:'Cinzel',serif;
  --font-body:'Exo 2',sans-serif;
  --font-mono:'Share Tech Mono',monospace;
  --nav-h:68px; --radius:12px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--void);
  color:rgba(255,255,255,.88);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

/* ── BACKGROUND CANVAS ── */
#starfield {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  will-change:transform;
}
#aurora {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:hidden;
}
#aurora::before {
  content:'';position:absolute;
  width:70vw;height:55vh;top:-10%;left:-15%;
  background:radial-gradient(ellipse,rgba(123,47,255,.12) 0%,transparent 70%);
  filter:blur(80px);border-radius:50%;
  animation:auroraA 12s ease-in-out infinite;
}
#aurora::after {
  content:'';position:absolute;
  width:55vw;height:45vh;bottom:-5%;right:-10%;
  background:radial-gradient(ellipse,rgba(0,212,255,.1) 0%,transparent 70%);
  filter:blur(80px);border-radius:50%;
  animation:auroraB 15s ease-in-out infinite;
}
@keyframes auroraA { 0%,100%{transform:translate(0,0) scale(1);opacity:.6} 50%{transform:translate(40px,-30px) scale(1.1);opacity:1} }
@keyframes auroraB { 0%,100%{transform:translate(0,0) scale(1);opacity:.5} 50%{transform:translate(-30px,20px) scale(1.08);opacity:.9} }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:500; height:var(--nav-h);
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(5,5,8,.92);
  backdrop-filter:blur(24px);
  border-bottom-color:rgba(255,255,255,.06);
}
.nav-inner {
  max-width:1320px; margin:0 auto;
  padding:0 2rem; height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-heading); font-size:.95rem;
  color:#fff; text-decoration:none; letter-spacing:.08em;
}
.nav-logo img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.nav-links { display:flex; align-items:center; gap:.25rem; }
.nav-links a {
  font-family:var(--font-heading); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.45); text-decoration:none;
  padding:.5rem .85rem; border-radius:8px;
  transition:color .2s, background .2s;
}
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.06); }
.nav-hamburger {
  display:none; background:none; border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:1.1rem; padding:.4rem .7rem; border-radius:6px; cursor:pointer;
}
@media(max-width:768px){
  .nav-hamburger{display:block;}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:rgba(5,5,8,.97);padding:1rem;flex-direction:column;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.07);}
  .nav-links.open{display:flex;}
}

/* ── REVEAL ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── FLOAT PANEL ── */
.float-panel {
  background:rgba(10,10,22,.75);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  backdrop-filter:blur(16px);
  position:relative; overflow:hidden;
}
.float-panel::before {
  content:''; position:absolute;
  top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  animation:glintSweep 5s ease-in-out infinite;
}
@keyframes glintSweep { 0%{left:-100%} 100%{left:200%} }

/* ── BUTTONS ── */
.btn-spectral, .btn-ghost, .btn-gold, .btn-discord,
.btn-electric, .btn-green, .btn-plasma {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-family:var(--font-heading);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.72rem 1.6rem; border-radius:10px;
  text-decoration:none; cursor:pointer; border:none;
  transition:transform .25s, box-shadow .25s, opacity .2s;
  white-space:nowrap;
}
.btn-spectral:hover,.btn-ghost:hover,.btn-gold:hover,
.btn-discord:hover,.btn-electric:hover,.btn-green:hover,.btn-plasma:hover {
  transform:translateY(-2px);
}
.btn-spectral {
  background:linear-gradient(135deg,#7B2FFF,#FF4CD2);
  color:#fff; box-shadow:0 4px 24px rgba(123,47,255,.35);
}
.btn-spectral:hover { box-shadow:0 8px 36px rgba(123,47,255,.55); }
.btn-ghost {
  background:transparent; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover { border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.06); }
.btn-gold {
  background:linear-gradient(135deg,#FFB800,#FF8C00);
  color:#000; font-weight:700; box-shadow:0 4px 24px rgba(255,184,0,.3);
}
.btn-gold:hover { box-shadow:0 8px 36px rgba(255,184,0,.5); }
.btn-discord { background:#5865F2; color:#fff; box-shadow:0 4px 20px rgba(88,101,242,.35); }
.btn-discord:hover { background:#4752C4; box-shadow:0 8px 32px rgba(88,101,242,.55); }
.btn-electric { background:linear-gradient(135deg,#00D4FF,#0090CC); color:#000; font-weight:700; }
.btn-green { background:linear-gradient(135deg,#35ED7E,#00C853); color:#000; font-weight:700; }
.btn-plasma { background:linear-gradient(135deg,#7B2FFF,#5500DD); color:#fff; }

/* ── LOOT FLOATERS ── */
.loot-float {
  position:absolute; pointer-events:none; z-index:4;
  animation:lootFloat linear infinite;
}
@keyframes lootFloat {
  0%{opacity:0;transform:translateY(0)}
  8%{opacity:.8}
  90%{opacity:.5}
  100%{opacity:0;transform:translateY(-100px)}
}

/* ── SPECTRAL DIVIDER ── */
.divs {
  height:1px;
  background:var(--spectral-90);
  background-size:300%;
  animation:spectralShift 8s linear infinite;
  opacity:.14;
}
@keyframes spectralShift { 0%{background-position:0%} 100%{background-position:200%} }

/* ── SCANLINE ── */
.scanline {
  position:fixed; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.12),transparent);
  pointer-events:none; z-index:9000;
  animation:scanMove 8s linear infinite;
}
@keyframes scanMove { 0%{top:-2px} 100%{top:100vh} }

/* ── BLINK ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── EMISSIVE CARD ── */
.emissive-card {
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  transition:border-color .4s, box-shadow .4s, transform .4s;
}
.emissive-card:hover {
  border-color:rgba(0,212,255,.3);
  box-shadow:0 12px 48px rgba(0,212,255,.1);
  transform:translateY(-4px);
}

/* ── GOAL BAR ── */
.goal-bar-track {
  height:10px; background:rgba(255,255,255,.06);
  border-radius:20px; overflow:hidden; margin:1.2rem 0;
}
.goal-bar-fill {
  height:100%;
  background:var(--spectral-90); background-size:200%;
  animation:spectralShift 5s linear infinite;
  border-radius:20px; width:0%;
  transition:width 1.8s cubic-bezier(.23,1,.32,1);
}

/* ── TABS ── */
.tab-btn-group { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
[data-tab] {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  padding:.45rem 1rem; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.4); transition:all .2s;
}
[data-tab].active,[data-tab]:hover { color:#fff; background:rgba(0,212,255,.1); border-color:rgba(0,212,255,.3); }
[data-panel] { display:none; }
[data-panel].active { display:block; }