@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Quicksand:wght@300;400;500;600;700&display=swap");

:root {
  --bg-deep: #0a0f0d;
  --bg-mid: #111a16;
  --bg-card: #14201a;
  --bg-card-hover: #1a2b23;
  --text-primary: #e8f0eb;
  --text-secondary: #8aa896;
  --text-muted: #5a7a68;
  --accent-glow: #3ddc84;
  --accent-gold: #f0c040;
  --border-subtle: rgba(61,220,132,0.12);
  --common: #e0e0e0;
  --common-bg: rgba(255, 255, 255, 0.08);
  --common-border: rgba(255, 255, 255, 0.25);
  --rare: #42a5f5;
  --rare-bg: rgba(66, 165, 245, 0.08);
  --rare-border: rgba(66, 165, 245, 0.25);
  --legendary: #ffa726;
  --legendary-bg: rgba(255, 167, 38, 0.08);
  --legendary-border: rgba(255, 167, 38, 0.25);
  --mythical: #dc2828;
  --mythical-bg: rgba(220, 40, 40, 0.08);
  --mythical-border: rgba(220, 40, 40, 0.25);
  --guardian: #dc32b4;
  --guardian-bg: rgba(220, 50, 180, 0.06);
  --guardian-border: rgba(220, 50, 180, 0.3);
  --enchanted: #8c32dc;
  --enchanted-bg: rgba(140, 50, 220, 0.08);
  --enchanted-border: rgba(140, 50, 220, 0.25);
  --ancient: #2eaa5e;
  --ancient-bg: rgba(46, 170, 94, 0.08);
  --ancient-border: rgba(46, 170, 94, 0.25);
  --rainbow: #e040a0;
  --rainbow-bg: rgba(224, 64, 160, 0.08);
  --rainbow-border: rgba(224, 64, 160, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Quicksand', sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Background ── */
.bg-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(61,220,132,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(176,96,232,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240,192,64,0.02) 0%, transparent 50%);
}

/* ── Fireflies ── */
.fireflies { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.firefly {
  position: absolute; width: 3px; height: 3px;
  background: var(--accent-glow); border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(61,220,132,0.4);
  animation: drift linear infinite, flicker ease-in-out infinite;
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(30px,-60px) scale(1.2); }
  50%  { transform: translate(-20px,-120px) scale(0.8); }
  75%  { transform: translate(40px,-180px) scale(1.1); }
  100% { transform: translate(10px,-240px) scale(0.9); }
}
@keyframes flicker {
  0%,100% { opacity:0; } 20% { opacity:0.8; } 50% { opacity:0.3; } 70% { opacity:1; } 90% { opacity:0.5; }
}

/* ── Header ── */
.header {
  position: relative; z-index: 10;
  text-align: center; padding: 60px 20px 28px;
}
.header h1 { line-height: 1; margin:0; }
.header-logo {
  max-width: clamp(200px, 40vw, 400px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(61,220,132,0.15));
}
.header .subtitle {
  font-size: 0.85rem; color: var(--text-muted); margin-top: 6px;
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
}
.header .page-title {
  font-family: 'Cinzel Decorative', serif; font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--accent-gold);
  margin-top: 10px; letter-spacing: 0.06em;
}
.social-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.social-icon {
  width: 22px;
  height: 22px;
  opacity: 0.7;
  transition: opacity 0.25s, transform 0.25s;
  vertical-align: middle;
}
.social-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* ── Nav Links ── */
.nav-links {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px;
}
.nav-link {
  display: inline-block; padding: 6px 18px; border-radius: 100px;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; font-weight: 600; transition: opacity 0.2s, transform 0.2s;
}
.nav-link:hover { opacity: 0.75; transform: translateY(-1px); }
.nav-link-green  { background: rgba(61,220,132,0.08);  border: 1px solid rgba(61,220,132,0.2);  color: var(--accent-glow); }
.nav-link-gold   { background: rgba(240,192,64,0.08);  border: 1px solid rgba(240,192,64,0.2);  color: var(--accent-gold); }
.nav-link-purple { background: rgba(176,96,232,0.08);  border: 1px solid rgba(176,96,232,0.2);  color: #b060e8; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(61,220,132,0.2); border-radius: 10px; }