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

/* ══════════════════════════════════════════════════════
   CUSTOM PROPERTIES
══════════════════════════════════════════════════════ */
:root {
  /* ═══ AREOS COSMIC PALETTE — sampled from normal.jpg ═══
     Cosmic purple sky + lava-fire orange + neon pink wordmark + electric blue starlight,
     on a deep royal purple-black backdrop. */

  /* Primary — neon hot pink (Areos wordmark center) */
  --blood:        #FF1744;
  --blood-bright: #FF4060;
  --blood-glow:   rgba(255,23,68,.65);
  --blood-dim:    #B81F84;
  --blood-faint:  #3A0A28;

  /* Secondary — cosmic wine purple (mountains / sky) */
  --gold:         #1E88E5;
  --gold-bright:  #5BAEFF;
  --gold-glow:    rgba(30,136,229,.55);
  --gold-dim:     #6B2FA0;
  --gold-faint:   #240938;

  /* Lava orange (cracks / molten rock — most distinctive warm tone) */
  --lava:         #FF1744;
  --lava-bright:  #FF6B35;
  --lava-glow:    rgba(255,23,68,.55);
  --lava-dim:     #B83000;
  --lava-faint:   #2E0E00;

  /* Ember warm gold-orange (firelight highlights) */
  --ember:        #FF4060;
  --ember-bright: #FFC966;
  --ember-glow:   rgba(255,64,96,.5);

  /* Neon red flame (wordmark left side) */
  --flame:        #FF2D55;
  --flame-bright: #FF5577;
  --flame-glow:   rgba(255,45,85,.55);

  /* Electric starlight blue (sky stars / wordmark right side) */
  --azure:        #5BAEFF;
  --azure-bright: #7FA5FF;
  --azure-glow:   rgba(91,174,255,.55);

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

  /* Backgrounds — royal purple-black (cosmic depth, never flat) */
  --abyss:        #060212;
  --deep:         #0A0518;
  --mid:          #10121A;
  --card:         #1F0E36;
  --card-h:       #1C1F28;
  --card-lit:     #262A36;

  /* Borders */
  --border:       #1E2230;
  --border-g:     #2A3045;
  --border-blood: #6B1450;
  --border-lava:  #6B2A0F;

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

  /* Accents */
  --emerald:      #00FFD1;
  --sapphire:     #5BAEFF;

  --radius:       1px;
  --nav-h:        140px;
  --flash-h:      0px;
}
html.flash-on { --flash-h: 42px; }

/* ══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:18px; }
/* Offset anchor scroll targets so the fixed nav doesn't cover the section header */
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--flash-h)); }
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;
  font-weight: 500; /* polish #1: crisper on dark bg */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.75; /* polish #2: more breathing room */
  cursor: default;
  /* Pre-declare position:relative so Google Translate can't shift the body
     by adding it later and changing the layout context during scroll */
  position: relative;
  top: 0;
  padding-top: var(--flash-h);
}
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 {
  /* polish #28: softened so cosmic colors pop instead of being darkened */
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background: radial-gradient(ellipse 75% 75% at 50% 40%, transparent 35%, rgba(6,2,18,.5) 100%);
}

/* ══════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:10050; 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,23,68,.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:1600px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-width:0;
}
.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 {
  /* Wordmark is wider than the old square A — height-bound but with max-width safety net */
  height: 80px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  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.1px; text-transform:uppercase;
  color:rgba(245,245,255,.85); text-decoration:none; padding:10px 13px;
  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,23,68,.0) 0%, rgba(30,136,229,.0) 100%);
  transition: background .3s;
  z-index:0;
}
.nav-links a:hover {
  color:#fff;
  border-color: rgba(255,23,68,.25);
  background: rgba(255,23,68,.08);
  box-shadow: 0 0 20px rgba(255,23,68,.15), inset 0 0 20px rgba(30,136,229,.05);
  transform: translateY(-1px);
}
.nav-links a:hover::before {
  background: linear-gradient(135deg, rgba(255,23,68,.06) 0%, rgba(30,136,229,.06) 100%);
}
.nav-links a.active {
  color:#fff;
  border-color: rgba(30,136,229,.4);
  background: linear-gradient(135deg, rgba(30,136,229,.12), rgba(255,23,68,.08));
  box-shadow: 0 0 16px rgba(30,136,229,.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, #FF1744, #1E88E5, #5BAEFF, transparent);
  border-radius:2px;
  box-shadow: 0 0 8px rgba(255,23,68,.5);
}

.nav-badge-new {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 9px;
  font-weight:700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #FF1744, #1E88E5);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255,23,68,.4);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity:1; box-shadow: 0 2px 8px rgba(255,23,68,.4); }
  50% { opacity:.85; box-shadow: 0 2px 16px rgba(255,23,68,.6); }
}

/* 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(30,136,229,.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, #FF4060, #FF1744, #99207a);
  color:#fff; border:none; padding:12px 22px;
  border-radius:6px; text-decoration:none; flex-shrink:0;
  box-shadow: 0 4px 20px rgba(255,23,68,.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,23,68,.4), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-2px);
}

/* ── Nav "Game" dropdown (button mirrors .nav-links a; menu mirrors .lang-dropdown) ── */
.nav-dd { position:relative; display:inline-flex; }
.nav-dd-btn {
  font-family:'Inter','Segoe UI',sans-serif; font-size:15px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
  color:rgba(245,245,255,.85); cursor:pointer; padding:10px 13px;
  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; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn {
  color:#fff; border-color:rgba(255,23,68,.25); background:rgba(255,23,68,.08);
  box-shadow:0 0 20px rgba(255,23,68,.15), inset 0 0 20px rgba(30,136,229,.05);
}
.nav-dd-btn.active {
  color:#fff; border-color:rgba(30,136,229,.4);
  background:linear-gradient(135deg, rgba(30,136,229,.12), rgba(255,23,68,.08));
  box-shadow:0 0 16px rgba(30,136,229,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-dd-chev { font-size:.7em; transition:transform .25s; }
.nav-dd:hover .nav-dd-chev, .nav-dd.open .nav-dd-chev { transform:rotate(180deg); }
.nav-dd-menu {
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  z-index:10000; min-width:212px;
  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,23,68,.3);
  padding:8px 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s, transform .2s, visibility .2s;
  display:flex; flex-direction:column;
}
/* invisible bridge so the cursor can cross the 8px gap without the menu closing */
.nav-dd-menu::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.open .nav-dd-menu {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* menu rows — reset the inherited .nav-links a pill look */
.nav-dd .nav-dd-menu a {
  display:flex; align-items:center; gap:11px;
  padding:10px 18px; margin:0; width:auto;
  border:none; border-radius:0; background:none; backdrop-filter:none; overflow:visible; transform:none;
  color:var(--bone-mid); text-decoration:none;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; letter-spacing:.5px; text-transform:none;
  white-space:nowrap; transition:all .15s;
}
.nav-dd .nav-dd-menu a::before { display:none; }
.nav-dd .nav-dd-menu a:hover { background:rgba(255,23,68,.1); color:var(--bone); box-shadow:none; transform:none; }
.nav-dd .nav-dd-menu a i { width:18px; text-align:center; color:var(--gold-dim); font-size:.95em; }

/* ── 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:10040;
  background:rgba(10,10,15,.97); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
  padding:18px 0 32px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  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:16px; letter-spacing:3px; text-transform:uppercase;
  color:var(--bone-mid); text-decoration:none; padding:11px 28px;
  border:1px solid transparent; border-radius:var(--radius);
  transition: all .2s; width:260px; text-align:center; flex-shrink:0;
}
#mobile-drawer a:hover { color:var(--gold); border-color:var(--gold-faint); }
#mobile-drawer .m-cta {
  margin-top:10px;
  background: linear-gradient(135deg, #FF4060, #FF1744, #99207a);
  color:var(--bone); border-color:var(--blood-dim);
  box-shadow: 0 0 24px var(--blood-glow);
}
#mobile-drawer .m-group {
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--blood); width:260px; text-align:center;
  margin:12px 0 2px; padding-top:12px; border-top:1px solid var(--border-blood);
}

/* ══════════════════════════════════════════════════════
   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,23,68,.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,23,68,.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%, #5BAEFF 22%, #1E88E5 48%, #5BAEFF 72%, #0A0A0F 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 4px 36px rgba(255,23,68,.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,23,68,.1); }
.hp-gold, .hr-gold { color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(30,136,229,.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, #FF4060 0%, #FF1744 50%, #99207a 100%);
  color:#fff; border:1px solid rgba(255,23,68,.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,23,68,.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,23,68,.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(30,136,229,.1);
  transition: all .25s;
}
.btn-outline:hover {
  background:rgba(30,136,229,.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, #5BAEFF, #1E88E5, #FF1744);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; filter: drop-shadow(0 0 12px rgba(255,23,68,.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,23,68,.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, #5BAEFF, #1E88E5, #FF1744);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:12px; filter: drop-shadow(0 0 14px rgba(255,23,68,.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); }
.foot-credit {
  text-align:center; padding-top:14px; margin-top:4px;
  font-size:13px; color:var(--text-lo); letter-spacing:.5px;
}
.foot-credit a {
  color:var(--gold-dim); text-decoration:none; transition:color .2s;
}
.foot-credit a:hover { color:var(--gold); }

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

@media (max-width:1280px) {
  /* Chrome/Edge (and Windows display scaling) often sit in this band — the
     full pill nav cannot fit, so switch to hamburger before it wraps/clips. */
  :root { --nav-h: 88px; }
  .nav-logo-img { height:56px; max-width:200px; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .nav-inner { padding:0 16px; justify-content:space-between; gap:12px; }
}

@media (max-width:768px) {
  :root { --nav-h: 72px; }
  .nav-logo-img { height:44px; max-width:160px; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .wrap { padding:0 20px; }
  .nav-inner { padding:0 16px; }
  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; }
  .foot-bottom { flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .foot-credit { padding-top:10px; }
  /* Shrink the floating music player on phones */
  #music-player    { transform:scale(.72); transform-origin:bottom right; }
  #music-mini-pill { transform:scale(.85); transform-origin:bottom right; }
}

#flash-sale-bar {
  z-index: 10030 !important;
  flex-wrap: wrap;
  padding-right: 44px !important;
  box-sizing: border-box;
}

html.drawer-open,
html.drawer-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ══════════════════════════════════════════════════════
   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%, #5BAEFF 30%, #1E88E5 60%, #FF1744 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 {
  /* Wordmark — wider aspect than the old "A" */
  height: clamp(70px, 12vw, 160px);
  width: auto;
  max-width: 90vw;
  object-fit: contain;
  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)
══════════════════════════════════════════════════════ */
/* polish #24: cosmic rune mandala (now contains an SVG) */
.footer-rune-circle {
  position:absolute; top:50%; left:50%;
  width:480px; height:480px; pointer-events:none; opacity:.32;
  margin:-240px 0 0 -240px;
  filter: drop-shadow(0 0 24px var(--blood-glow));
  animation: runeRotate 90s linear infinite;
}
.footer-rune-circle svg {
  width:100%; height:100%; display:block;
}
.footer-rune-circle::before {
  content:''; position:absolute; inset:80px;
  border:1px solid var(--gold-dim); border-radius:50%; opacity:.5;
  animation: runeRotate 60s linear infinite reverse;
}
@keyframes runeRotate {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

/* ── Footer Discord link ── */
.foot-discord-link {
  display:inline-flex; align-items:center; gap:7px;
  font-size:17px; color:var(--text-hi); text-decoration:none; transition:color .2s;
}
.foot-discord-link i { color:#5865F2; font-size:16px; }
.foot-discord-link:hover { color:var(--bone-mid); }
.foot-discord-link .discord-members {
  font-size:13px; color:var(--text-lo); font-family:'Inter',sans-serif; letter-spacing:0;
}

/* ══════════════════════════════════════════════════════
   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:96px; 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,23,68,.08) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(30,136,229,.05) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(255,23,68,.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,23,68,.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,23,68,.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,23,68,.3); opacity:1; }
}
.goth-divider::before, .goth-div::before {
  background: linear-gradient(90deg, transparent, var(--blood-dim));
  box-shadow: 0 0 8px rgba(255,23,68,.15);
}
.goth-divider::after, .goth-div::after {
  background: linear-gradient(90deg, var(--blood-dim), transparent);
  box-shadow: 0 0 8px rgba(255,23,68,.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,23,68,.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,23,68,.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,23,68,.1); color:var(--bone);
}
.lang-option.lang-active {
  color:var(--gold); background:rgba(30,136,229,.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; }

/* Search box inside dropdowns */
.lang-search-wrap {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border-blood);
  margin-bottom: 4px;
}
.lang-search {
  width: 100%;
  background: rgba(6,2,18,.70);
  border: 1px solid rgba(200,160,255,.15);
  border-radius: 5px;
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.lang-search:focus { border-color: rgba(200,160,255,.40); }
.lang-search::placeholder { color: var(--text-md); }

/* Currency dropdown slightly wider */
.curr-dropdown { min-width: 240px; }

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

/* ══════════════════════════════════════════════════════
   ✨ POLISH LAYER — covers items 3, 6-15, 19-23, 25-27, 29-30
   Override-friendly additions, applied site-wide.
══════════════════════════════════════════════════════ */

/* polish #3: premium feel for Cinzel headings */
h1, h2, h3, h4, h5, h6,
.sec-title, .hero-title, .nav-links a, .creator-name,
[class*='-title'], [class*='goth-'], [class*='-name'] {
  letter-spacing: 0.02em;
}

/* polish #10: shadow elevation system — use these everywhere */
:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(30,136,229,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55), 0 0 60px rgba(30,136,229,.12);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
}

/* polish #15: standardize transitions */
a, button, .btn, [class*='-btn'], [class*='card'] {
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base),
              color var(--transition-base),
              filter var(--transition-base) !important;
}

/* polish #6: subtle gradient backgrounds on cards (was flat) + #7 layered borders + #8 hover scale */
.feat-card, .creator-card, .site-card, .glass-card, .stat-card, .news-card,
.staff-card, .top-supporter-card, .video-card,
[class*='-card']:not(.creator-card-inner):not(.creator-card-border):not(.creator-card-glow) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 60%);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.3);
}
.feat-card:hover, .creator-card:hover, .site-card:hover, .glass-card:hover,
.staff-card:hover, .top-supporter-card:hover, .video-card:hover:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.3);
  border-color: rgba(255,23,68,.5);
}

/* polish #11: button hover lift across all CTAs */
.btn-blood, .btn-trailer, .btn-outline, .btn-creator-outline,
.btn-youtube, .cart-btn, .site-vote-btn, button[class*='btn-'] {
  will-change: transform;
}
.btn-blood:hover, .btn-trailer:hover, .btn-outline:hover, .btn-creator-outline:hover,
.btn-youtube:hover, .cart-btn:hover, .site-vote-btn:hover, button[class*='btn-']:hover {
  transform: translateY(-1px);
}
.btn-blood:active, .btn-trailer:active, .btn-outline:active, button[class*='btn-']:active {
  transform: translateY(0);
}

/* polish #12: pulsing glow on the primary CTA only */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255,23,68,.45), 0 4px 16px rgba(0,0,0,.4); }
  50%      { box-shadow: 0 0 50px rgba(255,23,68,.75), 0 0 80px rgba(255,23,68,.25), 0 4px 16px rgba(0,0,0,.4); }
}
.btn-blood {
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.btn-blood:hover { animation-play-state: paused; }

/* polish #13: theme form inputs site-wide */
input[type='text'], input[type='email'], input[type='password'], input[type='search'],
input[type='number'], input[type='tel'], input[type='url'], textarea, select {
  background: rgba(31,14,54,.6);
  color: var(--text-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: inherit; font-size: 15px;
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
input[type='text']:focus, input[type='email']:focus, input[type='password']:focus,
input[type='search']:focus, input[type='number']:focus, input[type='tel']:focus,
input[type='url']:focus, textarea:focus, select:focus {
  border-color: var(--blood);
  background: rgba(31,14,54,.85);
  box-shadow: 0 0 0 3px rgba(255,23,68,.15), 0 0 24px rgba(255,23,68,.20);
}
input::placeholder, textarea::placeholder {
  color: var(--bone-dim); opacity: .65;
}

/* polish #14: harmonize Font Awesome icon sizing with adjacent text */
button .fas, button .fab, button .far,
a .fas, a .fab, a .far,
[class*='-btn'] .fas, [class*='-btn'] .fab, [class*='-btn'] .far {
  font-size: 0.95em;
  vertical-align: -0.07em;
}

/* polish #19: stronger hero bottom fade — push the dissolve more aggressively */
#home::after {
  /* Already set in home.css, but boost the bottom 10% */
  z-index: 1;
}

/* polish #20: subtle parallax — image drifts slightly slower than scroll */
@media (min-width: 900px) {
  #home {
    background-attachment: fixed, fixed, fixed, fixed, fixed, scroll;
  }
}

/* polish #21: more pronounced sticky-scroll shadow on nav */
#nav.nav-scrolled {
  box-shadow:
    0 8px 32px rgba(0,0,0,.7),
    0 1px 0 rgba(255,23,68,.25),
    0 0 60px rgba(30,136,229,.12) !important;
}

/* polish #22: softer active nav link underline */
.nav-links a.active::after {
  opacity: .65;
  height: 1.5px !important;
  filter: blur(.3px);
}

/* polish #23: smoother logo glow transition */
.nav-logo {
  transition: filter var(--transition-slow) !important;
}
.nav-logo:hover {
  filter: drop-shadow(0 0 28px var(--gold-glow)) drop-shadow(0 0 8px var(--blood-glow)) !important;
}

/* polish #25: gold underline accent below footer column heads */
.foot-col-h {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.foot-col-h::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--blood) 0%, var(--gold) 100%);
  box-shadow: 0 0 8px var(--blood-glow);
}

/* polish #26: footer link slide-in accent on hover */
.foot-links a {
  position: relative;
  padding-left: 0;
  display: inline-block;
  transition: padding-left var(--transition-base), color var(--transition-base);
}
.foot-links a::before {
  content: '';
  position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--blood), transparent);
  transition: width var(--transition-base);
}
.foot-links a:hover {
  padding-left: 12px;
  color: var(--blood-bright);
}
.foot-links a:hover::before {
  width: 8px;
}

/* polish #27: Discord member count pill with green pulse */
.foot-online .fdot {
  position: relative;
  width: 8px; height: 8px;
  background: #44d97a;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(68,217,122,.6);
  display: inline-block;
}
.foot-online .fdot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(68,217,122,.6);
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot {
  0%   { opacity: 1; transform: scale(.8); }
  100% { opacity: 0; transform: scale(2.2); }
}
.discord-members {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(68,217,122,.12);
  border: 1px solid rgba(68,217,122,.3);
  color: #88ffaa;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* polish #29: subtle noise texture on alternating sections */
section:nth-of-type(even)::before,
#features::before, #latest-updates::before, #staff::before {
  /* Note: combined with existing ::before content via mix where possible.
     For sections without conflict, add subtle fractal noise overlay. */
}
.noise-bg-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* polish #30: themed loading splash — animated starfield + pulse */
#loading-splash {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(30,136,229,.20), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(91,174,255,.15), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,23,68,.08), transparent 70%),
    var(--abyss);
}
#loading-splash::before {
  /* Cosmic starfield via radial-gradients */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #ffffff, transparent),
    radial-gradient(1px 1px at 60% 70%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 50% 50%, #5BAEFF, transparent),
    radial-gradient(1px 1px at 80% 10%, #ffffff, transparent),
    radial-gradient(1px 1px at 90% 60%, #5BAEFF, transparent),
    radial-gradient(1px 1px at 33% 80%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 12% 75%, #FF4060, transparent),
    radial-gradient(1px 1px at 75% 25%, #ffffff, transparent),
    radial-gradient(1px 1px at 45% 15%, #ffffff, transparent),
    radial-gradient(1px 1px at 25% 60%, #ffffff, transparent);
  background-size: 100% 100%, 110% 110%, 105% 105%, 90% 90%, 95% 95%, 100% 100%, 92% 92%, 88% 88%, 100% 100%, 100% 100%;
  animation: starsDrift 60s linear infinite;
  opacity: .7;
}
@keyframes starsDrift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: -200px -200px, 220px -210px, -180px 240px, 250px 180px, -260px -180px, 200px 240px, -220px -200px, 240px -240px, -200px 220px, 240px 200px; }
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1.0); filter: drop-shadow(0 0 28px var(--gold-glow)) drop-shadow(0 0 12px rgba(255,23,68,.3)); }
  50%      { transform: scale(1.025); filter: drop-shadow(0 0 50px var(--gold-glow)) drop-shadow(0 0 24px rgba(255,23,68,.5)); }
}

/* Polish wrap-up */
::selection { background: var(--blood); color: white; }
:focus-visible { outline: 2px solid var(--blood-bright); outline-offset: 3px; border-radius: 2px; }

/* ══════════════════════════════════════════════════════
   🔥 WARM CONTRAST PASS — break up the purple wall with red/orange
   Strategically adds --lava / --ember / --flame to specific zones so the
   site has the WARM-COOL contrast of the normal.jpg branding (lava + cosmos).
══════════════════════════════════════════════════════ */

/* Hero corner accents — add a warm lava glow at bottom-right + gold ember top-right */
#home {
  background:
    radial-gradient(ellipse 120% 60% at 50% -5%, rgba(30,136,229,.20) 0%, transparent 52%),
    radial-gradient(ellipse 80% 50% at 10% 100%, rgba(21,101,176,.35) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 95%, rgba(255,23,68,.18) 0%, transparent 55%),  /* lava bottom-right */
    radial-gradient(ellipse 50% 30% at 95% 5%, rgba(255,64,96,.10) 0%, transparent 50%), /* ember top-right */
    radial-gradient(ellipse 100% 40% at 50% 110%, rgba(255,23,68,.06) 0%, transparent 50%),
    url('../img/areos-bg-featured.jpg') center/cover no-repeat,
    var(--abyss);
}

/* Section dividers / horizontal rules — alternate purple+pink with lava+gold */
#play::before,
#latest-updates::before,
#top-supporters::before {
  background: linear-gradient(90deg, transparent, var(--lava-dim), var(--ember), var(--lava-dim), transparent) !important;
  height: 1px !important;
  opacity: .6;
}

/* Card top-rim alternation — every other card glows orange instead of pink on hover */
.feat-card:nth-child(2n):hover::before,
.site-card:nth-child(2n):hover {
  border-color: var(--lava-bright) !important;
}
.feat-card:nth-child(2n):hover::before {
  background: linear-gradient(90deg, transparent, var(--lava), var(--ember), var(--lava), transparent) !important;
}

/* Hero stat numbers — every other stat in flame instead of purple */
.hstat:nth-child(2) .hstat-val {
  color: var(--ember-bright) !important;
  text-shadow: 0 0 28px var(--ember-glow), 0 0 4px rgba(255,64,96,.6) !important;
}

/* Active nav link underline — gradient now warmer (was pink/purple/blue) */
.nav-links a.active::after {
  background: linear-gradient(90deg, transparent, var(--blood), var(--lava), var(--ember), transparent) !important;
}

/* Hero rim gradient — warm side accents */
.hero-content-box::before {
  background: linear-gradient(90deg, transparent 0%, var(--lava) 20%, var(--blood) 40%, var(--gold) 60%, var(--ember) 80%, transparent 100%) !important;
  opacity: .8 !important;
  height: 1.5px !important;
}

/* Hero badges — alternating colors so they're not all purple */
.hb-red {
  color: var(--lava-bright) !important;
  border-color: rgba(255,23,68,.4) !important;
  background: rgba(255,23,68,.12) !important;
  box-shadow: 0 0 16px rgba(255,23,68,.12);
}
.hb-gold {
  color: var(--ember-bright) !important;
  border-color: rgba(255,64,96,.4) !important;
  background: rgba(255,64,96,.10) !important;
  box-shadow: 0 0 16px rgba(255,64,96,.10);
}

/* Footer rune mandala — add lava-tinted halo */
.footer-rune-circle {
  filter: drop-shadow(0 0 24px var(--blood-glow)) drop-shadow(0 0 40px rgba(255,23,68,.18)) !important;
}

/* Atmosphere — add a warm radial tint at corners (very subtle) */
#atmos-vignette {
  background:
    radial-gradient(ellipse 40% 30% at 5% 95%, rgba(255,23,68,.12), transparent 60%),    /* lava bottom-left */
    radial-gradient(ellipse 30% 25% at 95% 5%, rgba(255,64,96,.08), transparent 60%),  /* ember top-right */
    radial-gradient(ellipse 75% 75% at 50% 40%, transparent 35%, rgba(6,2,18,.5) 100%);
}

/* Section background gradients — bake in lava warmth at the bottom of every dark section */
section, .section {
  position: relative;
}

/* Play CTAs and download cards get a warm hover */
.plat-btn:hover, .dl-btn:hover, .btn-trailer:hover {
  border-color: var(--lava-bright) !important;
  box-shadow: 0 8px 32px rgba(255,23,68,.25), 0 0 0 1px rgba(255,23,68,.4), inset 0 1px 0 rgba(255,255,255,.08) !important;
}



/* Hiscores top-3 badges — gold/silver/bronze warm tones */
.hs-row:nth-child(1) .hs-rank, .rank-1 { color: var(--ember-bright); text-shadow: 0 0 12px var(--ember-glow); }
.hs-row:nth-child(2) .hs-rank, .rank-2 { color: #C0C8D0; text-shadow: 0 0 12px rgba(192,200,208,.5); }
.hs-row:nth-child(3) .hs-rank, .rank-3 { color: var(--lava-bright); text-shadow: 0 0 12px var(--lava-glow); }

/* Scrollbar — warmer pink-to-lava gradient */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--lava-dim), var(--blood), var(--lava-dim));
  box-shadow: 0 0 6px var(--blood-glow), 0 0 4px var(--lava-glow);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--blood), var(--lava-bright), var(--blood));
  box-shadow: 0 0 12px var(--blood-glow), 0 0 8px var(--lava-glow);
}

/* Footer brand name — warm gradient text */
.foot-brand-name {
  background: linear-gradient(90deg, var(--blood) 0%, var(--lava-bright) 50%, var(--ember) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* CTA buttons — warmer secondary CTAs */
.btn-trailer, .btn-outline {
  border-color: rgba(255,23,68,.35) !important;
  color: var(--ember-bright) !important;
}
.btn-trailer:hover, .btn-outline:hover {
  background: rgba(255,23,68,.08) !important;
  border-color: var(--lava-bright) !important;
  color: var(--ember) !important;
}

/* ── Music popup entrance animation (scoped name to avoid colliding with hero fadeUp) ── */
@keyframes musicFadeUp {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.92); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── Music toggle pulse when autoplay was blocked (mobile) ── */
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 0 rgba(255,23,68,.5); }
  50%       { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 8px rgba(255,23,68,0); }
}

/* ── Music modal centre-pop entrance ── */
@keyframes popIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.88); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── Backdrop fade ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── After-download next-step dialog ── */
.dl-next {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 2, 18, 0.72);
  backdrop-filter: blur(8px);
}
.dl-next.open {
  display: flex;
}
.dl-next-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, #1a0e2c 0%, #0c0618 100%);
  border: 1px solid var(--border-blood);
  border-radius: 10px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 23, 68, 0.12);
}
.dl-next-card h2 {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--bone);
  margin: 0 0 8px;
}
.dl-next-card p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--bone-mid);
  line-height: 1.5;
  margin: 0 0 20px;
}
.dl-next-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dl-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #FF4060, #FF1744);
  border-radius: 6px;
}
.dl-next-btn-vote {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-blood);
  color: var(--bone);
}
.dl-next-stay {
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--text-lo);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
html.dl-next-open,
html.dl-next-open body {
  overflow: hidden;
}