/* ══════════════════════════════════════════════════════
   GOTHIC.CSS — Shared styles across all Areos pages
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   CUSTOM PROPERTIES
══════════════════════════════════════════════════════ */
:root {
  /* Primary */
  --blood:        #FF2FB3;
  --blood-bright: #FF4FD8;
  --blood-glow:   rgba(255,47,179,.55);
  --blood-dim:    #99207a;
  --blood-faint:  #33001a;

  /* Secondary (was gold, now purple/blue) */
  --gold:         #8A2BE2;
  --gold-bright:  #CFA6FF;
  --gold-glow:    rgba(138,43,226,.5);
  --gold-dim:     #6B1FA0;
  --gold-faint:   #1A0033;

  /* Neutrals */
  --bone:         #F5F5FF;
  --bone-mid:     #D8D0E8;
  --bone-dim:     #A898C0;

  /* Backgrounds */
  --abyss:        #0A0A0F;
  --deep:         #0D0818;
  --mid:          #12101E;
  --card:         #140E22;
  --card-h:       #1C1430;
  --card-lit:     #241A3A;

  /* Borders */
  --border:       #201838;
  --border-g:     #302448;
  --border-blood: #4D1040;

  /* Text */
  --text-hi:      #F5F5FF;
  --text-md:      #D8D0E8;
  --text-lo:      #A898C0;

  /* Accents */
  --emerald:      #00FFD1;
  --sapphire:     #00BFFF;

  --radius:       1px;
  --nav-h:        140px;
}

/* ══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:18px; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--abyss);
  color: var(--text-hi);
  overflow-x: hidden;
  min-height: 100vh;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  cursor: default;
}
a, button, [onclick], input, select, textarea, .clickable { cursor: pointer; }

/* ══════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--abyss); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blood-dim), var(--blood), var(--blood-dim));
  border-radius:3px;
  box-shadow: 0 0 6px var(--blood-glow);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--blood), var(--blood-bright), var(--blood));
  box-shadow: 0 0 12px var(--blood-glow);
}

/* ══════════════════════════════════════════════════════
   PERSISTENT ATMOSPHERE LAYERS
══════════════════════════════════════════════════════ */
#atmos-grain {
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.045'/%3E%3C/svg%3E");
  opacity:.8; mix-blend-mode:overlay;
}
#atmos-vignette {
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background: radial-gradient(ellipse 75% 75% at 50% 40%, transparent 35%, rgba(10,10,15,.75) 100%);
}

/* ══════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(10,10,15,.97) 0%, rgba(13,8,24,.9) 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-blood);
  transition: background .3s, box-shadow .3s;
}
#nav.nav-scrolled {
  background: linear-gradient(180deg, rgba(10,10,15,.98) 0%, rgba(13,8,24,.96) 100%);
  box-shadow: 0 4px 30px rgba(0,0,0,.5), 0 1px 0 rgba(255,47,179,.15);
}
#nav::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 0%, var(--blood-dim) 30%, var(--gold-dim) 50%, var(--blood-dim) 70%, transparent 100%);
}
.nav-inner {
  width:100%; max-width:1440px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:center; gap:20px;
}
.nav-logo {
  text-decoration:none; flex-shrink:0;
  display:flex; align-items:center;
  filter: drop-shadow(0 0 12px var(--gold-glow));
  transition: filter .3s;
}
.nav-logo:hover { filter: drop-shadow(0 0 22px var(--gold-glow)); }
.nav-logo-img {
  height: 180px;
  width: auto;
  display: block;
}
.nav-links { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; flex-wrap:nowrap; }
.nav-links a {
  font-family:'Inter','Segoe UI',sans-serif; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(245,245,255,.85); text-decoration:none; padding:10px 18px;
  border:1px solid rgba(255,255,255,.06); border-radius:6px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(4px);
  transition: all .3s ease;
  position:relative; overflow:hidden;
  white-space:nowrap;
}
.nav-links a::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,47,179,.0) 0%, rgba(138,43,226,.0) 100%);
  transition: background .3s;
  z-index:0;
}
.nav-links a:hover {
  color:#fff;
  border-color: rgba(255,47,179,.25);
  background: rgba(255,47,179,.08);
  box-shadow: 0 0 20px rgba(255,47,179,.15), inset 0 0 20px rgba(138,43,226,.05);
  transform: translateY(-1px);
}
.nav-links a:hover::before {
  background: linear-gradient(135deg, rgba(255,47,179,.06) 0%, rgba(138,43,226,.06) 100%);
}
.nav-links a.active {
  color:#fff;
  border-color: rgba(138,43,226,.4);
  background: linear-gradient(135deg, rgba(138,43,226,.12), rgba(255,47,179,.08));
  box-shadow: 0 0 16px rgba(138,43,226,.2), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.nav-links a.active::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px;
  background: linear-gradient(90deg, transparent, #FF2FB3, #8A2BE2, #00BFFF, transparent);
  border-radius:2px;
  box-shadow: 0 0 8px rgba(255,47,179,.5);
}
/* Kushy nav link — YouTube red accent */
.nav-links a.nav-kushy {
  color: #ff6666;
  border-color: rgba(255,0,0,.12);
}
.nav-links a.nav-kushy:hover {
  color: #fff;
  border-color: rgba(255,0,0,.35);
  background: rgba(255,0,0,.1);
  box-shadow: 0 0 20px rgba(255,0,0,.2);
}
.nav-links a.nav-kushy.active {
  color: #fff;
  border-color: rgba(255,0,0,.3);
  background: linear-gradient(135deg, rgba(255,0,0,.12), rgba(255,0,0,.06));
}
/* Casino nav link — neon magenta accent */
.nav-links a.nav-casino-link {
  color: #FF4FD8 !important;
  border-color: rgba(255,47,179,.15);
  position: relative;
}
.nav-links a.nav-casino-link:hover {
  color: #fff !important;
  border-color: rgba(255,47,179,.4);
  background: rgba(255,47,179,.12);
  box-shadow: 0 0 24px rgba(255,47,179,.25);
}
.nav-links a.nav-casino-link.active {
  color: #fff !important;
  border-color: rgba(255,47,179,.35);
  background: linear-gradient(135deg, rgba(255,47,179,.12), rgba(138,43,226,.08));
}
.nav-badge-new {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 9px;
  font-weight:700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #FF2FB3, #8A2BE2);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255,47,179,.4);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity:1; box-shadow: 0 2px 8px rgba(255,47,179,.4); }
  50% { opacity:.85; box-shadow: 0 2px 16px rgba(255,47,179,.6); }
}
/* Mobile drawer casino link */
.m-casino-link {
  color: #FF2FB3 !important;
  text-shadow: 0 0 10px rgba(255,47,179,.3);
}
/* Nav utility icons (cart, translate) */
.nav-cart, .lang-btn {
  color: rgba(245,245,255,.7) !important;
  font-size: 20px !important;
  transition: all .3s;
}
.nav-cart:hover, .lang-btn:hover {
  color: #fff !important;
  filter: drop-shadow(0 0 8px rgba(138,43,226,.4));
}
.nav-cta {
  font-family:'Inter','Segoe UI',sans-serif; font-size:15px; letter-spacing:2px;
  text-transform:uppercase; font-weight:700;
  background: linear-gradient(135deg, #FF4FD8, #FF2FB3, #99207a);
  color:#fff; border:none; padding:12px 28px;
  border-radius:6px; text-decoration:none; flex-shrink:0;
  box-shadow: 0 4px 20px rgba(255,47,179,.3), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all .3s;
  position:relative; overflow:hidden;
}
.nav-cta::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}
.nav-cta:hover::after { left:100%; }
.nav-cta:hover {
  box-shadow: 0 6px 30px rgba(255,47,179,.4), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-2px);
}

/* ── Hamburger ── */
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;
}
.hamburger span {
  display:block; width:24px; height:1.5px;
  background:var(--bone-mid); border-radius:1px; transition:.3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════════════════ */
#mobile-drawer {
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:999;
  background:rgba(10,10,15,.97); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition: opacity .3s, transform .3s;
}
#mobile-drawer.open { opacity:1; pointer-events:all; transform:translateY(0); }
#mobile-drawer a {
  font-family:'Cinzel',serif; font-size:18px; letter-spacing:5px; text-transform:uppercase;
  color:var(--bone-mid); text-decoration:none; padding:14px 32px;
  border:1px solid transparent; border-radius:var(--radius);
  transition: all .2s; width:260px; text-align:center;
}
#mobile-drawer a:hover { color:var(--gold); border-color:var(--gold-faint); }
#mobile-drawer .m-cta {
  margin-top:20px;
  background: linear-gradient(135deg, #FF4FD8, #FF2FB3, #99207a);
  color:var(--bone); border-color:var(--blood-dim);
  box-shadow: 0 0 24px var(--blood-glow);
}

/* ══════════════════════════════════════════════════════
   SHARED LAYOUT UTILITIES
══════════════════════════════════════════════════════ */
section { position:relative; }
.wrap { max-width:1320px; margin:0 auto; padding:0 40px; }

/* ── Reveal animation ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1, .rd1 { transition-delay:.08s; }
.reveal-delay-2, .rd2 { transition-delay:.16s; }
.reveal-delay-3, .rd3 { transition-delay:.24s; }
.reveal-delay-4, .rd4 { transition-delay:.32s; }
.reveal-delay-5, .rd5 { transition-delay:.40s; }
.rd6 { transition-delay:.48s; }

/* ── Section labels ── */
.sec-label,
.pg-label {
  display:flex; align-items:center; gap:14px; justify-content:center;
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:8px; text-transform:uppercase;
  color:var(--blood); margin-bottom:16px;
}
.sec-label::before, .sec-label::after,
.pg-label::before, .pg-label::after {
  content:''; width:32px; height:1px;
}
.sec-label::before, .pg-label::before {
  background: linear-gradient(90deg, transparent, var(--blood-dim));
}
.sec-label::after, .pg-label::after {
  background: linear-gradient(90deg, var(--blood-dim), transparent);
}

/* ── Section eyebrow (store variant) ── */
.sec-eyebrow {
  display:flex; align-items:center; gap:12px; justify-content:center;
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:4px; text-transform:uppercase;
  color:var(--blood-bright); margin-bottom:13px;
}
.sec-eyebrow::before, .sec-eyebrow::after { content:''; width:26px; height:1px; }
.sec-eyebrow::before { background:linear-gradient(90deg,transparent,var(--blood-dim)); }
.sec-eyebrow::after { background:linear-gradient(90deg,var(--blood-dim),transparent); }

/* ── Section titles ── */
.sec-title {
  font-family:'Cinzel Decorative',serif; font-weight:700;
  font-size: clamp(30px, 4.5vw, 52px); line-height:1.08;
  color:var(--text-hi); text-align:center; margin-bottom:14px;
  filter: drop-shadow(0 2px 24px rgba(255,47,179,.25));
}
.sec-title .hl {
  font-style:normal;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, #6B1FA0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 16px var(--gold-glow));
}
.sec-sub {
  font-family:'Inter',sans-serif; font-size:18px;
  color:var(--bone-mid); text-align:center; max-width:640px;
  margin:0 auto 48px; line-height:1.7;
}

/* ── Gothic divider ── */
.goth-divider,
.goth-div {
  display:flex; align-items:center; gap:0; margin:0 auto 48px; max-width:380px;
}
.goth-divider::before, .goth-div::before {
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--blood-dim));
}
.goth-divider::after, .goth-div::after {
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, var(--blood-dim), transparent);
}
.goth-divider-center,
.goth-div-c {
  display:flex; align-items:center; gap:10px; padding:0 20px;
}
.goth-pip,
.gdot {
  width:7px; height:7px; background:var(--blood); transform:rotate(45deg);
  box-shadow: 0 0 10px var(--blood-glow);
}
.goth-line,
.gline { width:26px; height:1px; background:var(--border-blood); }

/* ── Border shimmer ── */
.border-shimmer {
  border:1px solid var(--border-blood);
  box-shadow: 0 0 0 1px rgba(255,47,179,.1), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ══════════════════════════════════════════════════════
   SHARED HERO ELEMENTS (sub-pages)
══════════════════════════════════════════════════════ */
#ember-canvas { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.hero-crest {
  display:block; font-size:32px; color:var(--blood); margin-bottom:18px;
  filter: drop-shadow(0 0 14px var(--blood-glow));
  animation: fadeUp .6s ease both;
}
.hero-eyebrow {
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:6px; text-transform:uppercase;
  color:var(--blood); margin-bottom:22px;
  animation: fadeUp .65s .06s ease both;
}
.hero-title {
  font-family:'Cinzel Decorative',serif; font-weight:900;
  line-height:.92; letter-spacing:-2px; margin-bottom:16px;
  animation: fadeUp .65s .12s ease both;
}
.hero-title .t-line {
  display:block;
  background: linear-gradient(175deg, #ffffff 0%, #CFA6FF 22%, #8A2BE2 48%, #00BFFF 72%, #0A0A0F 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 4px 36px rgba(255,47,179,.4));
}
.hero-sub {
  font-size: clamp(18px, 2.2vw, 24px); color:var(--bone);
  max-width:600px; margin:0 auto 28px; line-height:1.72;
  animation: fadeUp .65s .18s ease both;
}
.hero-sub strong { color:var(--text-hi); font-style:normal; }

/* Hero pill badges (hiscores, store, vote) */
.hero-pills,
.hero-rewards {
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  animation: fadeUp .65s .26s ease both;
}
.hpill,
.hr-pill {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:7px 16px; border-radius:1px; border:1px solid;
}
.hp-red, .hr-blood { color:#ee5555; border-color:var(--blood-dim); background:rgba(255,47,179,.1); }
.hp-gold, .hr-gold { color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(138,43,226,.08); }
.hp-bone, .hr-bone { color:var(--bone-mid); border-color:var(--border-g); background:rgba(168,152,192,.06); }

/* Scroll cue */
.scroll-cue,
.scroll-hint {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2;
  animation: fadeUp .8s .9s ease both;
}
.scroll-cue span,
.scroll-hint span {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:4px;
  text-transform:uppercase; color:var(--blood);
}
.scroll-line {
  width:1px; height:38px;
  background: linear-gradient(180deg, var(--blood-dim), transparent);
  animation: lineDown 1.8s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   SHARED KEYFRAME ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes lineDown {
  0%,100% { transform:scaleY(0); transform-origin:top; }
  50%     { transform:scaleY(1); transform-origin:top; }
  51%     { transform:scaleY(1); transform-origin:bottom; }
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}

/* ══════════════════════════════════════════════════════
   SHARED BUTTON STYLES
══════════════════════════════════════════════════════ */
.btn-blood {
  font-family:'Cinzel',serif; font-size:18px; letter-spacing:2px;
  text-transform:uppercase; font-weight:700;
  background: linear-gradient(160deg, #FF4FD8 0%, #FF2FB3 50%, #99207a 100%);
  color:#fff; border:1px solid rgba(255,47,179,.6); padding:18px 48px;
  border-radius:var(--radius); text-decoration:none; display:inline-block;
  box-shadow: 0 4px 32px var(--blood-glow), 0 0 0 1px rgba(255,47,179,.2), inset 0 1px 0 rgba(255,255,255,.08);
  transition: all .25s; position:relative; overflow:hidden;
}
.btn-blood::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events:none;
}
.btn-blood:hover {
  transform:translateY(-2px);
  box-shadow: 0 8px 48px var(--blood-glow), 0 0 0 1px rgba(255,47,179,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-outline {
  font-family:'Cinzel',serif; font-size:18px; letter-spacing:2px;
  text-transform:uppercase; font-weight:700;
  color:var(--gold-bright); background:transparent;
  border:1px solid var(--gold-dim); padding:18px 48px;
  border-radius:var(--radius); text-decoration:none; display:inline-block;
  box-shadow: 0 0 0 1px rgba(138,43,226,.1);
  transition: all .25s;
}
.btn-outline:hover {
  background:rgba(138,43,226,.07); border-color:var(--gold);
  transform:translateY(-2px); box-shadow:0 4px 24px var(--gold-glow);
}

/* ── Mode badge (shared across hiscores on home + hiscores page) ── */
.mode-badge {
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  padding:4px 10px; border-radius:1px; border:1px solid;
}

/* ══════════════════════════════════════════════════════
   FOOTER (compact variant used on sub-pages)
══════════════════════════════════════════════════════ */
footer {
  background:var(--abyss);
  border-top:1px solid var(--border-blood);
  padding:48px 40px 32px; position:relative; overflow:hidden;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blood-dim), var(--gold-dim), var(--blood-dim), transparent);
}
.foot-inner {
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.foot-brand {
  font-family:'Cinzel Decorative',serif; font-weight:900; font-size:24px; letter-spacing:4px;
  background: linear-gradient(135deg, #CFA6FF, #8A2BE2, #FF2FB3);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; filter: drop-shadow(0 0 12px rgba(255,47,179,.2));
}
.foot-back {
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--bone-mid); text-decoration:none; border:1px solid var(--border-blood);
  padding:10px 22px; border-radius:var(--radius); transition:all .25s;
}
.foot-back:hover { color:var(--gold); border-color:var(--gold-faint); }
.foot-copy { font-size:16px; color:var(--text-md); }
.foot-runes {
  font-size:16px; color:var(--border-blood); letter-spacing:8px;
  text-shadow: 0 0 8px rgba(255,47,179,.25);
}

/* ── Full footer (home page) ── */
.footer-inner { max-width:1320px; margin:0 auto; }
.footer-grid {
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:56px; margin-bottom:56px;
}
.foot-brand-name {
  font-family:'Cinzel Decorative',serif; font-weight:900; font-size:28px; letter-spacing:4px;
  background: linear-gradient(135deg, #CFA6FF, #8A2BE2, #FF2FB3);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:12px; filter: drop-shadow(0 0 14px rgba(255,47,179,.2));
}
.foot-brand-p {
  font-size:17px; color:var(--text-md); line-height:1.75; margin-bottom:22px;
}
.foot-online {
  display:flex; align-items:center; gap:9px;
  font-family:'Cinzel',serif; font-size:15px; color:#44cc66;
}
.fdot {
  width:7px; height:7px; border-radius:50%; background:#33aa55;
  box-shadow: 0 0 8px rgba(30,130,70,.5); animation: pulse 2.5s ease-in-out infinite;
}
.foot-col-h {
  font-family:'Cinzel',serif; font-size:16px; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.foot-links { list-style:none; }
.foot-links li { margin-bottom:10px; }
.foot-links a {
  font-size:17px; color:var(--text-hi); text-decoration:none;
  transition:color .2s;
}
.foot-links a:hover { color:var(--bone-mid); }
.foot-bottom {
  padding-top:28px; border-top:1px solid var(--border-blood);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.foot-disc { font-size:16px; color:var(--text-md); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — SHARED COMPONENTS
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:768px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .wrap { padding:0 20px; }
  .nav-inner { padding:0 20px; }
  footer { padding:36px 20px 24px; }
  .hero-title { letter-spacing:-1px; }
}

@media (max-width:540px) {
  .footer-grid { grid-template-columns:1fr; }
  .hero-title { letter-spacing:-1px; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .btn-blood, .btn-outline { width:100%; max-width:300px; text-align:center; }
  .foot-inner { flex-direction:column; align-items:center; text-align:center; gap:14px; }
}

/* ══════════════════════════════════════════════════════
   LOADING SPLASH SCREEN
══════════════════════════════════════════════════════ */
#loading-splash {
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:var(--abyss);
  transition:opacity .6s ease;
}
#loading-splash.fade-out {
  opacity:0; pointer-events:none;
}
#loading-splash .splash-text {
  font-family:'Cinzel Decorative',serif; font-weight:900;
  font-size:clamp(36px, 8vw, 72px); letter-spacing:8px;
  background: linear-gradient(160deg, #fff 0%, #CFA6FF 30%, #8A2BE2 60%, #FF2FB3 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 28px var(--gold-glow));
  animation: splashPulse 1.2s ease-in-out infinite alternate;
}
#loading-splash .splash-logo {
  height: clamp(120px, 25vw, 300px);
  width: auto;
  filter: drop-shadow(0 0 28px var(--gold-glow));
  animation: splashPulse 1.2s ease-in-out infinite alternate;
}
@keyframes splashPulse {
  from { filter: drop-shadow(0 0 18px var(--gold-glow)); opacity:.85; }
  to   { filter: drop-shadow(0 0 36px var(--gold-glow)); opacity:1; }
}

/* ══════════════════════════════════════════════════════
   ACCESSIBILITY — SCREEN READER ONLY
══════════════════════════════════════════════════════ */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only:focus {
  position:fixed; top:8px; left:8px; z-index:100000;
  width:auto; height:auto; padding:12px 20px; margin:0;
  clip:auto; white-space:normal;
  background:var(--blood); color:var(--bone);
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:1px;
  border:2px solid var(--gold); border-radius:var(--radius);
  text-decoration:none;
}

/* ══════════════════════════════════════════════════════
   DISCORD MEMBER COUNT (footer)
══════════════════════════════════════════════════════ */
.discord-members {
  font-size:15px; color:var(--text-md); margin-left:6px;
}

/* ══════════════════════════════════════════════════════
   FOOTER: Animated rune circle decoration (#31)
══════════════════════════════════════════════════════ */
.footer-rune-circle {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:300px; height:300px; pointer-events:none; opacity:.04;
  border:1px solid var(--blood-dim); border-radius:50%;
  animation: runeRotate 60s linear infinite;
}
.footer-rune-circle::before {
  content:''; position:absolute; inset:20px;
  border:1px solid var(--gold-dim); border-radius:50%;
  animation: runeRotate 45s linear infinite reverse;
}
.footer-rune-circle::after {
  content:''; position:absolute; inset:40px;
  border:1px solid var(--blood-dim); border-radius:50%;
  animation: runeRotate 30s linear infinite;
}
@keyframes runeRotate {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

/* ══════════════════════════════════════════════════════
   FOOTER: Social icons with brand-color glow (#32)
══════════════════════════════════════════════════════ */
.social-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border-blood); background:var(--card);
  color:var(--text-md); font-size:16px;
  text-decoration:none; transition: all .3s;
}
.social-icon:hover {
  transform:translateY(-3px);
}
.social-discord:hover {
  color:#5865F2; border-color:#5865F2;
  box-shadow: 0 0 16px rgba(88,101,242,.4);
  background:rgba(88,101,242,.1);
}
.social-twitter:hover {
  color:#1DA1F2; border-color:#1DA1F2;
  box-shadow: 0 0 16px rgba(29,161,242,.4);
  background:rgba(29,161,242,.1);
}
.social-youtube:hover {
  color:#FF0000; border-color:#FF0000;
  box-shadow: 0 0 16px rgba(255,0,0,.4);
  background:rgba(255,0,0,.1);
}
.social-github:hover {
  color:#fff; border-color:#fff;
  box-shadow: 0 0 16px rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}

/* ══════════════════════════════════════════════════════
   BACK-TO-TOP FLOATING BUTTON (#33)
══════════════════════════════════════════════════════ */
#back-to-top {
  position:fixed; bottom:28px; right:28px; z-index:9990;
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--blood), var(--blood-dim));
  border:1px solid var(--blood-dim); color:var(--bone);
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition: opacity .3s, transform .3s, box-shadow .3s;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
#back-to-top.visible {
  opacity:1; transform:translateY(0); pointer-events:all;
}
#back-to-top:hover {
  box-shadow: 0 4px 24px var(--blood-glow), 0 0 16px var(--blood-glow);
  transform:translateY(-3px);
}

/* ══════════════════════════════════════════════════════
   HERO FOG BACKGROUND
══════════════════════════════════════════════════════ */
.hero-fog { position:relative; overflow:hidden; }
.hero-fog-layer {
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,47,179,.08) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(138,43,226,.05) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(255,47,179,.06) 0%, transparent 50%);
  animation: fogDrift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes fogDrift {
  0% { transform: scale(1) translate(0,0); opacity:.6; }
  50% { transform: scale(1.1) translate(-2%,1%); opacity:.8; }
  100% { transform: scale(1) translate(2%,-1%); opacity:.6; }
}

/* ══════════════════════════════════════════════════════
   LOADING SPLASH PROGRESS BAR
══════════════════════════════════════════════════════ */
#loading-splash .splash-bar {
  position:absolute; bottom:0; left:0; height:2px;
  background: linear-gradient(90deg, var(--blood), var(--gold-bright), var(--blood));
  animation: splashProgress .8s ease-out forwards;
  box-shadow: 0 0 12px var(--gold-glow);
}
@keyframes splashProgress {
  from { width:0; }
  to { width:100%; }
}

/* ══════════════════════════════════════════════════════
   GOLD DUST PARTICLES
══════════════════════════════════════════════════════ */
.gold-dust {
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.gold-dust span {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--gold); opacity:0;
  animation: dustFloat linear infinite;
}
@keyframes dustFloat {
  0% { opacity:0; transform:translateY(100vh) translateX(0); }
  10% { opacity:.4; }
  90% { opacity:.4; }
  100% { opacity:0; transform:translateY(-20px) translateX(40px); }
}

/* ══════════════════════════════════════════════════════
   BACKGROUND TEXTURE OVERLAY
══════════════════════════════════════════════════════ */
#atmos-texture {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.4' numOctaves='3' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
  opacity:.5;
}

/* ══════════════════════════════════════════════════════
   TOASTR GOTHIC THEME
══════════════════════════════════════════════════════ */
.toast-success { background:linear-gradient(135deg, #0a2a12, #143d1a) !important; border:1px solid #1e5528 !important; }
.toast-error { background:linear-gradient(135deg, #2a0a1a, #3d1428) !important; border:1px solid #55102e !important; }
.toast-info { background:linear-gradient(135deg, #0a0a2a, #14143d) !important; border:1px solid #1e1e55 !important; }
.toast-warning { background:linear-gradient(135deg, #1a0033, #2d1448) !important; border:1px solid #44105e !important; }
.toast-success, .toast-error, .toast-info, .toast-warning {
  background-image:none !important;
  font-family:'Cinzel',serif !important; font-size:15px !important;
  letter-spacing:1px !important; box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
  border-radius:var(--radius) !important;
  color:#F5F5FF !important;
}
#toast-container > .toast { opacity:1 !important; background-image:none !important; }
#toast-container > .toast::before { display:none !important; }
.toast-message { color:#F5F5FF !important; }
.toast-title { color:#fff !important; font-weight:700 !important; }

/* ══════════════════════════════════════════════════════
   #14 — GLASSMORPHISM CARD UTILITY
══════════════════════════════════════════════════════ */
.glass-card {
  background: rgba(20,14,34,.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,47,179,.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ══════════════════════════════════════════════════════
   #15 — HOVER TILT / 3D EFFECT ON CARDS
══════════════════════════════════════════════════════ */
.tilt-card {
  transition: transform .4s ease, box-shadow .4s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.tilt-card:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(3deg) translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(255,47,179,.1);
}

/* ══════════════════════════════════════════════════════
   #16 — GRADIENT BORDER ANIMATION ON CARDS
══════════════════════════════════════════════════════ */
.glow-border {
  position:relative;
}
.glow-border::before {
  content:''; position:absolute; inset:-1px; z-index:-1;
  background: conic-gradient(from var(--border-angle, 0deg), var(--blood-dim), var(--gold-dim), var(--blood-dim), var(--gold-dim), var(--blood-dim));
  border-radius: inherit;
  animation: rotateBorder 8s linear infinite;
  opacity:0; transition:opacity .4s;
}
.glow-border:hover::before { opacity:1; }
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder {
  to { --border-angle: 360deg; }
}

/* ══════════════════════════════════════════════════════
   #18 — GLOWING RUNE DIVIDERS (enhanced)
══════════════════════════════════════════════════════ */
.goth-pip, .gdot {
  width:8px; height:8px; background:var(--blood); transform:rotate(45deg);
  box-shadow: 0 0 10px var(--blood-glow), 0 0 20px var(--blood-glow);
  animation: runePulse 3s ease-in-out infinite;
}
@keyframes runePulse {
  0%,100% { box-shadow: 0 0 8px var(--blood-glow); opacity:.8; }
  50% { box-shadow: 0 0 16px var(--blood-glow), 0 0 28px rgba(255,47,179,.3); opacity:1; }
}
.goth-divider::before, .goth-div::before {
  background: linear-gradient(90deg, transparent, var(--blood-dim));
  box-shadow: 0 0 8px rgba(255,47,179,.15);
}
.goth-divider::after, .goth-div::after {
  background: linear-gradient(90deg, var(--blood-dim), transparent);
  box-shadow: 0 0 8px rgba(255,47,179,.15);
}

/* ══════════════════════════════════════════════════════
   #19 — GOLD FOIL TEXTURE ON SECTION TITLES
══════════════════════════════════════════════════════ */
.sec-title {
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.sec-title .hl {
  position:relative;
}
.sec-title .hl::after {
  content: attr(data-text);
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 40%, rgba(255,255,255,.1) 60%, transparent 100%);
  background-size: 200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: foilShine 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes foilShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════
   #20 — TEXT GLOW ON HOVER FOR IMPORTANT ELEMENTS
══════════════════════════════════════════════════════ */
.sec-title:hover { text-shadow: 0 0 20px rgba(255,47,179,.3), 0 2px 4px rgba(0,0,0,.5); }
.foot-brand:hover { filter: drop-shadow(0 0 20px var(--gold-glow)); }
.foot-brand-name:hover { filter: drop-shadow(0 0 20px var(--gold-glow)); }

/* ══════════════════════════════════════════════════════
   #21 — DROP CAPS ON HERO DESCRIPTIONS
══════════════════════════════════════════════════════ */
.hero-sub::first-letter {
  font-family:'Cinzel Decorative',serif;
  font-size:2.5em; float:left; line-height:.8;
  margin-right:8px; margin-top:4px;
  color:var(--gold);
  filter: drop-shadow(0 0 8px var(--gold-glow));
}

/* ══════════════════════════════════════════════════════
   LANGUAGE SELECTOR
══════════════════════════════════════════════════════ */
.lang-selector {
  position:relative;
}
.lang-btn {
  background:none; border:1px solid var(--border-blood); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:var(--bone-mid); font-size:16px; cursor:pointer;
  transition: all .25s;
}
.lang-btn:hover {
  color:var(--gold); border-color:var(--gold-dim);
  box-shadow: 0 0 12px var(--gold-glow);
}
.lang-dropdown {
  position:absolute; top:calc(100% + 10px); right:0; z-index:10000;
  min-width:200px; max-height:400px; overflow-y:auto;
  background:rgba(13,8,24,.97); backdrop-filter:blur(20px);
  border:1px solid var(--border-blood); border-radius:var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 1px rgba(255,47,179,.3);
  padding:8px 0;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition: opacity .25s, transform .25s;
}
.lang-dropdown.open {
  opacity:1; pointer-events:all; transform:translateY(0);
}
.lang-dropdown-title {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:var(--blood);
  padding:8px 16px 10px; border-bottom:1px solid var(--border-blood);
  margin-bottom:4px;
}
.lang-option {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; color:var(--bone-mid); text-decoration:none;
  font-family:'Inter',sans-serif; font-size:15px;
  transition: all .15s; cursor:pointer;
}
.lang-option:hover {
  background:rgba(255,47,179,.1); color:var(--bone);
}
.lang-option.lang-active {
  color:var(--gold); background:rgba(138,43,226,.06);
}
.lang-option.lang-active::after {
  content:'✓'; margin-left:auto; font-size:14px; color:var(--gold);
}
.lang-flag {
  font-size:18px; line-height:1;
}
.lang-dropdown::-webkit-scrollbar { width:4px; }
.lang-dropdown::-webkit-scrollbar-track { background:transparent; }
.lang-dropdown::-webkit-scrollbar-thumb { background:var(--blood-dim); border-radius:2px; }

@media (max-width:768px) {
  .lang-dropdown { right:-40px; min-width:180px; }
}