/* ═══════════════════════════════════════════════════════════════════
   AetherionMC  ·  Main Stylesheet  ·  v4 – Animations + Mobile
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────────────── */
:root{
  --bg0:#0f0820;--bg1:#150f2e;--bg2:#1e1545;--bg3:#261c56;--bg4:#2e2268;
  --bd0:#2d2060;--bd1:#4a33a0;--bd2:#7c5cdc;
  --p0:#7c3aed;--p1:#9333ea;--p2:#a855f7;--p3:#c084fc;--p4:#ddb8ff;--p5:#f0e0ff;
  --grn:#4ade80;--grn2:#16a34a;--warn:#fbbf24;--red:#f87171;--red2:#dc2626;--cyan:#38bdf8;
  --txt:#f0ebff;--txt2:#cbbfee;--txt3:#a090d4;--muted:#6b57a8;
  --fh:'Rajdhani',sans-serif;--fb:'Inter',sans-serif;
  --r:10px;--r2:16px;--nav:64px;
  --sh0:0 2px 12px rgba(0,0,0,.4);--sh1:0 8px 32px rgba(0,0,0,.5);--sh2:0 16px 56px rgba(0,0,0,.6);
  --glow:0 0 28px rgba(168,85,247,.35);--glow2:0 0 56px rgba(168,85,247,.25);
  --t:.18s ease;--ts:.35s ease;
}

/* ── RESET ────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);font-size:15px;line-height:1.65;
  background:var(--bg1);color:var(--txt);min-height:100vh;overflow-x:hidden;
}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
button{font-family:var(--fb);cursor:pointer;border:none}
input,textarea,select{font-family:var(--fb);font-size:14px}
ul{list-style:none}h1,h2,h3,h4,h5{line-height:1.2}

/* ── SCROLLBAR ────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--bd1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--p2)}

/* ── CANVAS STARS ────────────────────────────────────────────────── */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}
main{position:relative;z-index:1;min-height:calc(100vh - var(--nav));padding-top:var(--nav)}

body::before{content:'';position:fixed;top:-150px;left:-150px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 70%);
  pointer-events:none;z-index:0;border-radius:50%}
body::after{content:'';position:fixed;bottom:-100px;right:-100px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(168,85,247,.1) 0%,transparent 70%);
  pointer-events:none;z-index:0;border-radius:50%}

/* ══════════════════════════════════════════════════════════════════
   PAGE ENTRANCE ANIMATION – Dramatic opening effect
   ══════════════════════════════════════════════════════════════════ */

/* Hero entrance – staggered multi-part reveal */
.reveal-hero .hero-badge,
.reveal-hero .hero-title,
.reveal-hero .hero-sub,
.reveal-hero .hero-btns,
.reveal-hero .ip-badge,
.reveal-hero > div:last-child{
  opacity:0;transform:translateY(25px);
  animation:heroPartIn .8s cubic-bezier(.16,1,.3,1) forwards;
}
.reveal-hero .hero-badge{animation-delay:.1s;transform:translateY(-15px) scale(.85)}
.reveal-hero .hero-title{animation-delay:.2s}
.reveal-hero .hero-sub{animation-delay:.45s}
.reveal-hero .hero-btns{animation-delay:.6s;transform:translateY(20px) scale(.95)}
.reveal-hero > div:last-child{animation-delay:.75s}

@keyframes heroPartIn{
  0%{opacity:0}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Title – split into two lines, each with own animation */
.reveal-hero .hero-title{
  overflow:hidden;
}
.reveal-hero .hero-title br + .hl,
.reveal-hero .hero-title .hl{
  display:inline-block;
  opacity:0;
  animation:hlReveal 1s .35s cubic-bezier(.16,1,.3,1) forwards, titleGlow 3s 1.5s ease-in-out infinite;
}
@keyframes hlReveal{
  0%{opacity:0;transform:translateY(40px) scale(.8);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes titleGlow{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
  50%{filter:brightness(1.18) drop-shadow(0 0 25px rgba(168,85,247,.5))}
}

/* Hero buttons – slide in from bottom with stagger */
.reveal-hero .hero-btns .btn:nth-child(1){opacity:0;animation:btnPop .6s .65s cubic-bezier(.34,1.56,.64,1) forwards}
.reveal-hero .hero-btns .btn:nth-child(2){opacity:0;animation:btnPop .6s .8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes btnPop{
  0%{opacity:0;transform:translateY(30px) scale(.8)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Navbar entrance – slide down */
.nav{animation:navSlideDown .7s cubic-bezier(.16,1,.3,1) both}
@keyframes navSlideDown{
  0%{opacity:0;transform:translateY(-100%)}
  100%{opacity:1;transform:translateY(0)}
}

/* Brand logo – spin in */
.nav-brand .brand-logo{animation:logoSpinIn 1s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes logoSpinIn{
  0%{opacity:0;transform:rotate(-180deg) scale(.3)}
  100%{opacity:1;transform:rotate(0) scale(1)}
}

/* Nav links – stagger fade in */
.nav-links li{opacity:0;animation:navLinkIn .5s cubic-bezier(.16,1,.3,1) forwards}
.nav-links li:nth-child(1){animation-delay:.3s}
.nav-links li:nth-child(2){animation-delay:.35s}
.nav-links li:nth-child(3){animation-delay:.4s}
.nav-links li:nth-child(4){animation-delay:.45s}
.nav-links li:nth-child(5){animation-delay:.5s}
.nav-links li:nth-child(6){animation-delay:.55s}
.nav-links li:nth-child(7){animation-delay:.6s}
.nav-links li:nth-child(8){animation-delay:.65s}
.nav-links li:nth-child(9){animation-delay:.7s}
@keyframes navLinkIn{
  0%{opacity:0;transform:translateY(-15px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Floating glow orbs animate continuously */
body::before{
  animation:orbFloat1 12s ease-in-out infinite;
}
body::after{
  animation:orbFloat2 15s ease-in-out infinite;
}
@keyframes orbFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(80px,40px) scale(1.15)}
}
@keyframes orbFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-60px,-50px) scale(1.1)}
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS – Robust system with CSS fallback
   ══════════════════════════════════════════════════════════════════ */

/* Elements are visible by default (no-JS fallback) */
/* JS adds .sr-hidden, then .sr-show triggers animation */

.sr-hidden{
  opacity:0 !important;
  transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}

/* Default: slide up */
.sr-hidden{transform:translateY(35px)}

/* Direction variants */
.sr-hidden.sr-left{transform:translateX(-60px) translateY(8px)}
.sr-hidden.sr-right{transform:translateX(60px) translateY(8px)}
.sr-hidden.sr-scale{transform:scale(.75) translateY(12px)}
.sr-hidden.sr-up{transform:translateY(50px)}
.sr-hidden.sr-flip{transform:perspective(600px) rotateX(15deg) translateY(30px)}

/* Reveal state */
.sr-show{
  opacity:1 !important;
  transform:translateY(0) translateX(0) scale(1) rotateX(0deg) !important;
}

/* Feature cards alternate slide */
.feature-grid > .sr-hidden:nth-child(odd){transform:translateX(-45px) translateY(15px)}
.feature-grid > .sr-hidden:nth-child(even){transform:translateX(45px) translateY(15px)}

/* Stats bar bounce */
.stats-bar.sr-hidden{
  transform:translateY(50px) scale(.96);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.34,1.56,.64,1);
}

/* Team members pop in */
.tmember.sr-hidden{transform:translateY(25px) scale(.85)}
.tmember.sr-hidden{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}

/* Cards float up */
.card.sr-hidden{transform:translateY(35px)}

/* Forum rows slide from left */
.frow.sr-hidden{transform:translateX(-30px)}
.cat-header.sr-hidden{transform:translateX(-25px)}

/* Rank cards */
.rcard.sr-hidden{transform:translateY(30px) scale(.92)}

/* Quick links cards wobble in */
.sr-hidden.sr-wobble{transform:translateY(30px) rotate(-2deg)}

/* Section labels slide in */
.sec-lbl.sr-hidden{transform:translateX(-40px)}

/* Online players bar expand */
.online-players-bar.sr-hidden{transform:translateY(20px) scaleY(.8);transform-origin:top}

/* Subtle glow on revealed cards */
.fc.sr-show{transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1), box-shadow .8s .3s ease}
.fc.sr-show:nth-child(odd){box-shadow:0 0 30px rgba(168,85,247,.08)}
.fc.sr-show:nth-child(even){box-shadow:0 0 30px rgba(56,189,248,.06)}

/* ══ ENHANCED HOVER & FLOATING ANIMATIONS ══ */

/* Feature cards have subtle continuous glow */
.fc.sr-show{transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), box-shadow .8s ease, border-color .25s}

/* Feature card hover – 3D tilt effect via JS */
.fc{transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .35s;perspective:1000px;transform-style:preserve-3d}
.fc:hover{
  box-shadow:0 20px 50px rgba(168,85,247,.25),0 0 60px rgba(124,58,237,.15) !important;
  border-color:var(--bd2) !important;
}
.fc:hover .fc-icon{
  transform:scale(1.25) rotate(8deg);
  filter:drop-shadow(0 0 12px rgba(168,85,247,.6));
}
.fc-icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s}

/* Stats cells – animated underline on hover */
.stat-cell{position:relative;overflow:hidden}
.stat-cell::after{
  content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;
  background:linear-gradient(90deg,var(--p2),var(--cyan));
  transition:left .35s cubic-bezier(.16,1,.3,1), right .35s cubic-bezier(.16,1,.3,1);
}
.stat-cell:hover::after{left:10%;right:10%}
.stat-cell:hover .stat-val{transform:scale(1.08);filter:brightness(1.2)}
.stat-val{transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s}

/* IP Badge pulsing */
.ip-badge{animation:ipPulse 4s ease-in-out infinite}
@keyframes ipPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,.3)}
  50%{box-shadow:0 0 0 10px rgba(168,85,247,0)}
}
.ip-badge:hover{transform:scale(1.05);background:rgba(168,85,247,.2);cursor:pointer}

/* Section labels animate the line */
.sec-lbl::after{transition:background .5s, height .3s}
.sec-lbl.sr-show::after{
  background:linear-gradient(90deg,var(--p3),transparent);
  animation:lineExpand .8s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes lineExpand{
  0%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}
}

/* Quick access cards bounce on hover */
.card[href]:hover, a.card:hover{
  transform:translateY(-5px) scale(1.03) !important;
  border-color:var(--p3) !important;
  box-shadow:0 12px 30px rgba(168,85,247,.25), 0 0 0 1px rgba(168,85,247,.3) !important;
}
.card[href], a.card{transition:transform .3s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .3s}

/* Online player chips wiggle on hover */
.op-chip{transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s}
.op-chip:hover{transform:translateY(-3px) scale(1.05) rotate(-1deg)}

/* Hero badge dot continuous wave */
.hero-badge::before{
  animation:blink 2s infinite, dotWave 4s ease-in-out infinite;
}
@keyframes dotWave{
  0%,100%{box-shadow:0 0 10px var(--grn)}
  50%{box-shadow:0 0 20px var(--grn), 0 0 30px var(--grn)}
}

/* ── LAYOUT ───────────────────────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap-sm{max-width:860px;margin:0 auto;padding:0 20px}
.wrap-xs{max-width:520px;margin:0 auto;padding:0 20px}
.page-wrap{padding:40px 0 80px}

/* ── NAVBAR ───────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav);z-index:900;
  background:rgba(15,8,32,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd0);
  transition:box-shadow var(--t);
}
.nav.scrolled{box-shadow:0 2px 30px rgba(124,58,237,.3)}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;gap:16px}

.nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-logo{height:150px;width:auto;filter:drop-shadow(0 0 10px rgba(196,132,252,.5));transition:filter var(--t)}
.nav-brand:hover .brand-logo{filter:drop-shadow(0 0 18px rgba(196,132,252,.9))}
.brand-text{font-family:var(--fh);font-size:20px;font-weight:700;color:#fff;letter-spacing:.5px}
.brand-text span{color:var(--p3)}

.nav-links{display:flex;gap:1px;justify-content:center;flex:1;margin-left:8px}
.nl{
  font-family:var(--fh);font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;
  color:var(--txt3);padding:7px 13px;border-radius:8px;
  transition:color var(--t),background var(--t);position:relative;overflow:hidden;
}
.nl::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--p3);border-radius:1px;transition:left var(--t),right var(--t)}
.nl:hover,.nl.act{color:var(--p4);background:rgba(168,85,247,.1)}
.nl:hover::after,.nl.act::after{left:10px;right:10px}

.nav-right{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:var(--r);
  font-family:var(--fh);font-weight:700;font-size:13px;
  letter-spacing:.6px;text-transform:uppercase;
  cursor:pointer;transition:all var(--t);white-space:nowrap;border:none;
}
.btn-purple{background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;box-shadow:0 0 20px rgba(147,51,234,.4)}
.btn-purple:hover{background:linear-gradient(135deg,var(--p2),var(--p3));box-shadow:0 4px 28px rgba(168,85,247,.6);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--bd1);color:var(--txt2)}
.btn-outline:hover{border-color:var(--p3);color:var(--p4);background:rgba(168,85,247,.08);box-shadow:0 0 16px rgba(168,85,247,.2)}
.btn-green{background:linear-gradient(135deg,#15803d,var(--grn2));color:#fff}
.btn-green:hover{background:linear-gradient(135deg,var(--grn2),#22c55e);transform:translateY(-1px);box-shadow:0 4px 20px rgba(74,222,128,.3)}
.btn-red{background:linear-gradient(135deg,var(--red2),#ef4444);color:#fff}
.btn-red:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(248,113,113,.3)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--bd0);color:var(--txt2)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--bd1);color:var(--txt)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:12px}
.btn-full{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none !important;box-shadow:none !important}

/* ── USER MENU ────────────────────────────────────────────────────── */
.umenu{position:relative}
.uchip{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r);padding:6px 12px 6px 8px;transition:all var(--t);cursor:pointer}
.uchip:hover{border-color:var(--bd1);box-shadow:var(--glow);background:var(--bg3)}
.uchip img{width:26px;height:26px;border-radius:6px;object-fit:cover}
.uchip span{font-size:13px;font-weight:600;color:var(--txt)}
.chevron{color:var(--muted);transition:transform var(--t);flex-shrink:0}
.umenu.open .chevron{transform:rotate(180deg)}
.udrop{display:none;position:absolute;top:calc(100%+8px);right:0;background:var(--bg3);border:1px solid var(--bd1);border-radius:var(--r2);min-width:220px;box-shadow:var(--sh2),0 0 30px rgba(168,85,247,.15);overflow:hidden;z-index:200;animation:dropIn .2s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.umenu.open .udrop{display:block}
.udrop-top{padding:14px 16px;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.2)}
.udrop-top img{width:40px;height:40px;border-radius:9px;border:2px solid var(--bd1)}
.udrop-top strong{display:block;font-size:14px;color:var(--txt);margin-bottom:3px}
.udrop a{display:block;padding:10px 16px;font-size:13px;color:var(--txt2);transition:all var(--t)}
.udrop a:hover{background:rgba(168,85,247,.1);color:var(--p4);padding-left:22px}
.udrop a.gold{color:var(--warn)}.udrop a.red{color:var(--red)}
.udrop-sep{height:1px;background:var(--bd0);margin:4px 0}

/* ── HAMBURGER ────────────────────────────────────────────────────── */
.burger{display:none;flex-direction:column;gap:5px;background:none;padding:8px;border-radius:8px;border:1px solid var(--bd0);transition:border-color var(--t)}
.burger:hover{border-color:var(--bd1)}
.burger span{display:block;width:20px;height:2px;background:var(--txt3);border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--p3)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--p3)}

/* ── MOBILE NAV ───────────────────────────────────────────────────── */
.mob-nav{
  display:none;position:fixed;top:var(--nav);left:0;right:0;
  background:rgba(15,8,32,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd0);
  padding:16px 20px 24px;z-index:850;
  flex-direction:column;gap:2px;
  pointer-events:none;opacity:0;transform:translateY(-12px);
  transition:opacity .25s,transform .25s;
  max-height:calc(100vh - var(--nav));overflow-y:auto;
}
.mob-nav.open{display:flex;pointer-events:all;opacity:1;transform:none}
.mob-nav a{padding:12px 16px;border-radius:9px;font-size:15px;color:var(--txt2);transition:all var(--t)}
.mob-nav a:hover{background:rgba(168,85,247,.12);color:var(--p4);padding-left:22px}
.mob-nav a.gold{color:var(--warn)}.mob-nav a.red{color:var(--red)}
.mob-sep{height:1px;background:var(--bd0);margin:8px 0}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{text-align:center;padding:30px 20px 70px;position:relative}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
  border-radius:20px;padding:6px 18px;
  font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--p4);
  margin-bottom:24px;
  box-shadow:0 0 20px rgba(168,85,247,.15);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 20px rgba(168,85,247,.15)}50%{box-shadow:0 0 35px rgba(168,85,247,.35)}}
.hero-badge::before{content:'';width:7px;height:7px;background:var(--grn);border-radius:50%;box-shadow:0 0 10px var(--grn);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-title{
  font-family:var(--fh);font-size:clamp(40px,6vw,76px);font-weight:700;line-height:1.05;
  color:#fff;margin-bottom:16px;letter-spacing:-1px;
  text-shadow:0 0 40px rgba(168,85,247,.25);
}
.hero-title .hl{background:linear-gradient(135deg,var(--p3),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:17px;color:var(--txt2);max-width:540px;margin:0 auto 36px;line-height:1.7}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── STATS BAR ────────────────────────────────────────────────────── */
.stats-bar{
  display:flex;background:var(--bd0);border:1px solid var(--bd0);
  border-radius:var(--r2);overflow:hidden;gap:1px;margin-bottom:36px;
}
.stat-cell{
  flex:1;padding:24px 20px;background:var(--bg2);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:background var(--t);cursor:default;
}
.stat-cell:hover{background:var(--bg3)}
.stat-val{
  font-family:var(--fh);font-size:34px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--p4),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  transition:transform .3s;
}
.stat-val.g{background:linear-gradient(135deg,var(--grn),#86efac);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-val.w{background:linear-gradient(135deg,var(--warn),#fde68a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-lbl{font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;font-weight:500}

/* ── ONLINE PLAYERS BAR ──────────────────────────────────────────── */
.online-players-bar{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;
  padding:16px;background:var(--bg2);border:1px solid var(--bd0);
  border-radius:var(--r2);
}
.op-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 5px;background:rgba(168,85,247,.08);
  border:1px solid rgba(168,85,247,.15);border-radius:20px;
  font-size:12px;font-weight:500;color:var(--txt2);
  transition:all var(--t);
}
.op-chip:hover{background:rgba(168,85,247,.18);border-color:rgba(168,85,247,.3);transform:translateY(-1px)}
.op-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.op-chip.op-more{padding:5px 14px;color:var(--muted);font-style:italic;border-color:var(--bd0)}

/* ── CARDS & GRID ─────────────────────────────────────────────────── */
.card{
  background:var(--bg2);border:1px solid var(--bd0);
  border-radius:var(--r2);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.card:hover{border-color:var(--bd1);box-shadow:var(--glow)}
.card-head{padding:16px 22px;border-bottom:1px solid var(--bd0);display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(168,85,247,.07),transparent)}
.card-title{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--txt);letter-spacing:.3px}
.card-body{padding:20px 22px}

/* ── FORUM ────────────────────────────────────────────────────────── */
.cat-group{margin-bottom:28px}
.cat-header{display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(90deg,rgba(168,85,247,.1),rgba(124,58,237,.04),transparent);border:1px solid var(--bd0);border-radius:var(--r) var(--r) 0 0;border-bottom:none}
.cat-icon{font-size:18px}.cat-name{font-family:var(--fh);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt)}
.cat-cnt{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.8px}

.frow{display:flex;align-items:center;gap:16px;padding:15px 20px;background:var(--bg2);border:1px solid var(--bd0);border-top:none;color:inherit;text-decoration:none;transition:all var(--t);position:relative;overflow:hidden}
.frow:last-child{border-radius:0 0 var(--r) var(--r)}
.frow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background var(--t);border-radius:0 2px 2px 0}
.frow:hover{background:var(--bg3);border-color:var(--bd1);transform:translateX(3px)}
.frow:hover::before{background:linear-gradient(180deg,var(--p2),var(--p1))}

.frow-icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;border:1px solid rgba(168,85,247,.12);transition:transform var(--t)}
.frow:hover .frow-icon{transform:scale(1.06) rotate(-3deg)}
.fi-a{background:rgba(168,85,247,.1)}.fi-b{background:rgba(56,189,248,.08)}.fi-c{background:rgba(74,222,128,.08)}.fi-d{background:rgba(251,191,36,.08)}.fi-e{background:rgba(248,113,113,.08)}

.frow-info{flex:1;min-width:0}
.frow-title{font-family:var(--fh);font-size:15px;font-weight:600;color:var(--txt);letter-spacing:.2px}
.frow-desc{font-size:12px;color:var(--txt3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.frow-stats{display:flex;gap:20px;flex-shrink:0}
.frs{text-align:center}.frs-v{font-family:var(--fh);font-weight:700;font-size:17px;color:var(--txt2)}.frs-l{font-size:10px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}

.frow-last{flex-shrink:0;text-align:right;min-width:110px}
.frl-n{font-size:12px;font-weight:600;color:var(--p4)}.frl-t{font-size:11px;color:var(--muted)}

/* Thread list */
.thread-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--bd0);transition:background var(--t);position:relative;text-decoration:none;color:inherit}
.thread-row:last-child{border:none}.thread-row:hover{background:var(--bg3)}.thread-row.pinned{background:rgba(168,85,247,.04)}
.tr-pin{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--p3);font-size:13px}
.tr-avatar{width:38px;height:38px;border-radius:8px;flex-shrink:0;object-fit:cover}
.tr-info{flex:1;min-width:0}.tr-title{font-size:14px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-meta{font-size:12px;color:var(--txt3);margin-top:2px}.tr-stats{display:flex;gap:14px;flex-shrink:0;font-size:12px;color:var(--txt3)}
.tr-stats span{display:flex;align-items:center;gap:4px}
.locked-badge{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);color:var(--warn);padding:1px 7px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.6px}

/* Thread post */
.post{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:24px;border-bottom:1px solid var(--bd0);transition:background var(--t)}
.post:last-child{border:none}.post.is-op .post-body-wrap{border-left:3px solid var(--p2);padding-left:16px}
.post-author{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:60px}
.post-avatar{width:48px;height:48px;border-radius:10px;object-fit:cover;border:2px solid var(--bd0);transition:border-color var(--t)}
.post:hover .post-avatar{border-color:var(--bd1)}
.post-uname{font-size:11px;font-weight:600;color:var(--p4);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}
.post-cnt{font-size:10px;color:var(--muted);white-space:nowrap}
.post-meta{font-size:12px;color:var(--txt3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.post-content{font-size:14px;color:var(--txt);line-height:1.75;word-break:break-word}
.post-content p{margin-bottom:.8em}
.post-content code{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2);border-radius:4px;padding:1px 6px;font-size:12px;color:var(--p4);font-family:monospace}
.post-content pre{background:var(--bg0);border:1px solid var(--bd0);border-radius:8px;padding:14px;overflow-x:auto;margin:.8em 0;font-size:13px}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-search-wrap{position:relative;margin-bottom:36px}
.faq-search{width:100%;padding:14px 20px 14px 52px;background:var(--bg2);border:1px solid var(--bd0);border-radius:14px;color:var(--txt);font-size:15px;outline:none;transition:all var(--t)}
.faq-search:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(168,85,247,.15),var(--glow)}
.faq-search::placeholder{color:var(--muted)}
.faq-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:18px;pointer-events:none}

.faq-cat{margin-bottom:24px}
.faq-cat-head{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;background:linear-gradient(90deg,rgba(168,85,247,.09),transparent);border:1px solid var(--bd0);border-radius:var(--r);font-family:var(--fh);font-size:14px;font-weight:700;color:var(--txt);text-transform:uppercase;letter-spacing:1px;transition:all var(--t);user-select:none}
.faq-cat-head:hover{border-color:var(--bd1);background:rgba(168,85,247,.12)}
.faq-cat-head .cc{margin-left:auto;font-size:18px;transition:transform .3s}
.faq-cat-head.open .cc{transform:rotate(180deg)}
.faq-items{display:none;flex-direction:column;gap:0;border:1px solid var(--bd0);border-top:none;border-radius:0 0 var(--r) var(--r);overflow:hidden}
.faq-items.open{display:flex}
.faq-item{border-bottom:1px solid var(--bd0)}.faq-item:last-child{border:none}
.faq-q{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;font-size:14px;font-weight:600;color:var(--txt);background:var(--bg2);transition:all var(--t);user-select:none}
.faq-q:hover{background:var(--bg3);color:var(--p4)}
.faq-q .qa{margin-left:auto;font-size:16px;flex-shrink:0;transition:transform .3s;color:var(--p3)}
.faq-q.open .qa{transform:rotate(180deg)}
.faq-a{display:none;padding:14px 18px 16px;background:rgba(168,85,247,.04);font-size:14px;color:var(--txt2);line-height:1.7}
.faq-a.open{display:block;animation:fadeDown .2s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-a code{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2);border-radius:4px;padding:1px 6px;color:var(--p4);font-family:monospace;font-size:12px}
.faq-a strong{color:var(--txt);font-weight:600}

/* ── FORMS ────────────────────────────────────────────────────────── */
.form-card{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r2);padding:36px;box-shadow:var(--sh1);animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fg{margin-bottom:18px}.fg2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.flabel{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt3);margin-bottom:7px;font-family:var(--fh)}
.flabel .req{color:var(--red)}
.finput{width:100%;background:var(--bg4);border:1px solid var(--bd0);border-radius:var(--r);padding:11px 14px;color:var(--txt);outline:none;transition:border-color var(--t),box-shadow var(--t),background var(--t);-webkit-appearance:none}
.finput:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(168,85,247,.14);background:var(--bg2)}
.finput:hover:not(:focus){border-color:var(--bd1)}
.finput::placeholder{color:var(--muted)}
textarea.finput{resize:vertical;min-height:100px;line-height:1.65}
select.finput{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%238b6fbf' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
select.finput option{background:var(--bg2)}
.finput.ok{border-color:var(--grn)}.finput.err{border-color:var(--red)}
.fhint{font-size:11px;margin-top:5px;color:var(--muted)}.fhint.ok{color:var(--grn)}.fhint.err{color:var(--red)}
.char-cnt{text-align:right;font-size:11px;color:var(--muted);margin-top:3px}.char-cnt.warn{color:var(--warn)}

.pw-bars{display:flex;gap:4px;margin-top:8px}.pw-bar{flex:1;height:3px;background:var(--bd0);border-radius:2px;transition:background .3s}
.pw-bar.w{background:var(--red)}.pw-bar.m{background:var(--warn)}.pw-bar.s{background:var(--grn)}

.checkbox-row{display:flex;gap:10px;align-items:flex-start}
.checkbox-row input[type=checkbox]{margin-top:3px;accent-color:var(--p2);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.checkbox-row label{font-size:13px;color:var(--txt2);line-height:1.5;cursor:pointer}
.checkbox-row a{color:var(--p4);text-decoration:underline}

/* ── ALERTS ───────────────────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--r);font-size:13px;margin-bottom:16px;animation:slideIn .25s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.alert-err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);color:#fca5a5}
.alert-ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);color:#86efac}
.alert-warn{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);color:#fde68a}
.alert-info{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.25);color:var(--p4)}

/* ── PAGE HERO ────────────────────────────────────────────────────── */
.page-hero{margin-bottom:36px}
.page-hero h1{font-family:var(--fh);font-size:clamp(26px,4vw,44px);font-weight:700;color:#fff;letter-spacing:-.5px;margin-bottom:6px}
.page-hero h1 .hl{background:linear-gradient(135deg,var(--p3),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{font-size:15px;color:var(--txt2);max-width:580px;line-height:1.65}
.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:10px}
.breadcrumb a{color:var(--txt3);transition:color var(--t)}.breadcrumb a:hover{color:var(--p4)}
.breadcrumb span{margin:0 5px}

/* ── RANK BADGES ──────────────────────────────────────────────────── */
.rbadge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:1.4}
.rb-owner{background:rgba(220,38,38,.2);color:#fca5a5;border:1px solid rgba(220,38,38,.4);box-shadow:0 0 8px rgba(220,38,38,.2)}
.rb-admin{background:rgba(248,113,113,.15);color:#fca5a5;border:1px solid rgba(248,113,113,.3)}
.rb-mgr{background:rgba(251,191,36,.15);color:#fde68a;border:1px solid rgba(251,191,36,.3)}
.rb-mod{background:rgba(74,222,128,.12);color:#86efac;border:1px solid rgba(74,222,128,.25)}
.rb-dev{background:rgba(74,222,128,.15);color:#86efac;border:1px solid rgba(74,222,128,.3)}
.rb-tech{background:rgba(99,102,241,.15);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}
.rb-build{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.rb-sup{background:rgba(74,222,128,.15);color:#86efac;border:1px solid rgba(74,222,128,.3)}
.rb-ht{background:rgba(148,163,184,.15);color:#cbd5e1;border:1px solid rgba(148,163,184,.3)}
.rb-mem{background:rgba(74,54,112,.2);color:var(--txt3);border:1px solid var(--bd0)}
.rb-content{background:rgba(236,72,153,.15);color:#f9a8d4;border:1px solid rgba(236,72,153,.3)}
.rb-team{background:rgba(148,163,184,.15);color:#cbd5e1;border:1px solid rgba(148,163,184,.3)}
.rb-tester{background:rgba(148,163,184,.12);color:#94a3b8;border:1px solid rgba(148,163,184,.25)}
.rb-media{background:rgba(236,72,153,.12);color:#f9a8d4;border:1px solid rgba(236,72,153,.25)}
.rb-titan{background:linear-gradient(135deg,rgba(220,38,38,.15),rgba(251,191,36,.15));color:#fde68a;border:1px solid rgba(251,191,36,.35);box-shadow:0 0 6px rgba(251,191,36,.15)}
.rb-legend{background:rgba(168,85,247,.18);color:#d8b4fe;border:1px solid rgba(168,85,247,.35);box-shadow:0 0 6px rgba(168,85,247,.15)}
.rb-ultimate{background:rgba(99,102,241,.15);color:#c7d2fe;border:1px solid rgba(99,102,241,.3)}
.rb-elite{background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.25)}
.rb-supreme{background:rgba(74,222,128,.12);color:#86efac;border:1px solid rgba(74,222,128,.25)}
.rb-premium{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.25)}
.rb-sponsor{background:rgba(236,72,153,.12);color:#f9a8d4;border:1px solid rgba(236,72,153,.25)}
.rb-partner{background:rgba(168,85,247,.1);color:#c4b5fd;border:1px solid rgba(168,85,247,.2)}
.rb-booster{background:rgba(236,72,153,.1);color:#f9a8d4;border:1px solid rgba(236,72,153,.2)}

/* ── STATUS DOTS ──────────────────────────────────────────────────── */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-g{background:var(--grn);box-shadow:0 0 8px var(--grn);animation:blink 2.5s infinite}
.dot-r{background:var(--red)}.dot-w{background:var(--warn)}
.dot-y{background:var(--warn);box-shadow:0 0 8px var(--warn);animation:blink 2.5s infinite}
.dot-p{background:var(--p2);box-shadow:0 0 8px var(--p2);animation:blink 2.5s infinite}

/* ── SECTION LABEL ────────────────────────────────────────────────── */
.sec-lbl{font-family:var(--fh);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--muted);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--bd0)}

/* ── MODALS ───────────────────────────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}
.modal-bg.open{display:flex}
.modal{background:var(--bg3);border:1px solid var(--bd1);border-radius:var(--r2);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh2),var(--glow);animation:modalIn .22s ease}
@keyframes modalIn{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
.modal-hd{padding:22px 24px 0;display:flex;align-items:flex-start;gap:14px}
.modal-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.modal-title{font-family:var(--fh);font-size:22px;font-weight:700;color:#fff}
.modal-sub{font-size:13px;color:var(--txt3);margin-top:3px}
.modal-close{margin-left:auto;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);color:var(--txt3);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--t)}
.modal-close:hover{background:rgba(248,113,113,.15);color:var(--red);transform:rotate(90deg)}
.modal-bd{padding:18px 24px}
.modal-ft{padding:0 24px 22px;display:flex;gap:10px;border-top:1px solid var(--bd0);padding-top:18px;margin-top:4px}

/* ── RANK CARDS ───────────────────────────────────────────────────── */
.rank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-bottom:48px}
.rcard{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:all var(--t);position:relative}
.rcard::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(168,85,247,.08) 0%,transparent 60%);opacity:0;transition:opacity var(--t);pointer-events:none}
.rcard:hover{border-color:var(--bd2);transform:translateY(-4px);box-shadow:var(--sh2),0 0 30px rgba(124,58,237,.25)}
.rcard:hover::after{opacity:1}
.rcard.closed{opacity:.5;cursor:not-allowed}
.rcard.closed:hover{transform:none;box-shadow:none;border-color:var(--bd0)}
.rc-bar{height:3px}.rc-body{padding:20px}
.rc-head{display:flex;gap:13px;margin-bottom:14px;align-items:flex-start}
.rc-icon{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:transform var(--t);border:1px solid rgba(168,85,247,.15)}
.rcard:hover .rc-icon{transform:scale(1.08) rotate(-4deg)}
.rc-name{font-family:var(--fh);font-size:19px;font-weight:700;color:#fff;margin-bottom:5px}
.rc-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.rp-open{background:rgba(74,222,128,.1);color:var(--grn);border:1px solid rgba(74,222,128,.25)}
.rp-lim{background:rgba(251,191,36,.1);color:var(--warn);border:1px solid rgba(251,191,36,.25)}
.rp-cls{background:rgba(74,54,112,.1);color:var(--muted);border:1px solid var(--bd0)}
.rc-desc{font-size:13px;color:var(--txt2);line-height:1.6;margin-bottom:14px}
.rc-foot{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--bd0)}
.rc-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.rc-arrow{margin-left:auto;color:var(--muted);font-size:16px;transition:transform var(--t),color var(--t)}
.rcard:hover .rc-arrow{transform:translateX(5px);color:var(--p4)}

/* ── INFO LISTS ───────────────────────────────────────────────────── */
.info-sec{margin-bottom:18px}
.info-sec h3{font-family:var(--fh);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.info-sec h3::before{content:'';width:3px;height:11px;background:var(--p2);border-radius:2px}
.chk-list,.arr-list{display:flex;flex-direction:column;gap:7px}
.chk-list li,.arr-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--txt);line-height:1.5}
.chk-list li::before{content:'✓';color:var(--grn);font-weight:700;flex-shrink:0;margin-top:1px}
.arr-list li::before{content:'›';color:var(--p3);font-weight:700;font-size:15px;flex-shrink:0;line-height:1.4}
.perk-chips{display:flex;flex-wrap:wrap;gap:7px}
.pchip{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);border-radius:6px;padding:4px 11px;font-size:12px;color:var(--p4);transition:all var(--t)}
.pchip:hover{background:rgba(168,85,247,.18);transform:translateY(-2px)}

/* ── ADMIN PANEL ──────────────────────────────────────────────────── */
.admin-wrap{display:flex;min-height:calc(100vh - var(--nav))}
.admin-side{width:240px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--bd0);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
.asec{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);padding:12px 8px 5px}
.alink{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;font-size:13px;color:var(--txt3);transition:all var(--t);cursor:pointer;text-decoration:none;background:none;border:none;width:100%;text-align:left}
.alink:hover{background:rgba(168,85,247,.09);color:var(--txt);padding-left:16px}
.alink.on{background:rgba(168,85,247,.15);color:var(--p4)}
.alink .ico{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.abadge{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;padding:1px 7px;font-size:10px;font-weight:700}
.admin-body{flex:1;padding:28px;overflow-auto}
.admin-topbar{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.admin-topbar h1{font-family:var(--fh);font-size:26px;font-weight:700;color:#fff}

.a-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.astat{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;transition:all var(--t)}
.astat:hover{border-color:var(--bd1);transform:translateY(-2px);box-shadow:var(--glow)}
.astat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.astat.p::before{background:linear-gradient(90deg,var(--p1),transparent)}
.astat.g::before{background:linear-gradient(90deg,var(--grn),transparent)}
.astat.w::before{background:linear-gradient(90deg,var(--warn),transparent)}
.astat.r::before{background:linear-gradient(90deg,var(--red),transparent)}
.astat-lbl{font-family:var(--fh);font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:8px}
.astat-val{font-family:var(--fh);font-size:36px;font-weight:700;color:#fff;line-height:1}
.astat-sub{font-size:11px;color:var(--txt3);margin-top:5px}

.dtable-wrap{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r);overflow:hidden}
.dt-hd{padding:14px 20px;border-bottom:1px solid var(--bd0);display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,rgba(168,85,247,.06),transparent)}
.dt-title{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--txt)}
.dt-acts{margin-left:auto;display:flex;gap:8px}
.srchbox{background:var(--bg4);border:1px solid var(--bd0);border-radius:7px;padding:7px 12px;color:var(--txt);font-size:13px;outline:none;width:200px;transition:border-color var(--t)}
.srchbox:focus{border-color:var(--p2)}
table.dtable{width:100%;border-collapse:collapse}
table.dtable th{text-align:left;padding:11px 18px;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--bd0)}
table.dtable td{padding:12px 18px;border-bottom:1px solid rgba(45,32,96,.5);font-size:13px;vertical-align:middle;color:var(--txt2);transition:background var(--t)}
table.dtable tr:last-child td{border:none}
table.dtable tr:hover td{background:rgba(168,85,247,.03)}
.no-rows{text-align:center;padding:32px;color:var(--muted);font-size:13px}
.toggle-wrap{position:relative;width:40px;height:22px;display:inline-block;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0}
.tslider{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--bd1);border-radius:22px;transition:.25s;cursor:pointer}
.tslider::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.25s}
.toggle-wrap input:checked + .tslider{background:rgba(168,85,247,.3);border-color:var(--p3)}
.toggle-wrap input:checked + .tslider::before{transform:translateX(18px);background:var(--p4)}

/* Application status badges */
.as-pending{color:var(--warn);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.as-reviewing{color:#60a5fa;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.25);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.as-accepted{color:var(--grn);background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.25);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.as-denied{color:var(--red);background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.25);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}

/* ── TEAM PAGE ────────────────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}
.tmember{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r2);padding:24px;text-align:center;transition:all var(--t)}
.tmember:hover{border-color:var(--bd1);transform:translateY(-4px);box-shadow:var(--glow)}
.tm-avatar{width:72px;height:72px;border-radius:16px;object-fit:cover;margin:0 auto 12px;border:3px solid var(--bd0);transition:border-color var(--t),box-shadow var(--t)}
.tmember:hover .tm-avatar{border-color:var(--p2);box-shadow:0 0 20px rgba(168,85,247,.3)}
.tm-name{font-family:var(--fh);font-size:16px;font-weight:700;color:#fff;margin-bottom:5px}
.tm-desc{font-size:12px;color:var(--txt3);margin-top:6px;line-height:1.5}

/* ── VERIFY PAGE ──────────────────────────────────────────────────── */
.verify-code{font-family:var(--fh);font-size:44px;font-weight:700;letter-spacing:12px;color:#fff;background:linear-gradient(135deg,rgba(168,85,247,.14),rgba(124,58,237,.08));border:1px solid rgba(168,85,247,.3);border-radius:var(--r2);padding:22px 30px;text-align:center;margin:24px 0;box-shadow:0 0 40px rgba(168,85,247,.2);animation:codeGlow 3s ease-in-out infinite}
@keyframes codeGlow{0%,100%{box-shadow:0 0 40px rgba(168,85,247,.2)}50%{box-shadow:0 0 60px rgba(168,85,247,.4)}}
.cmd-display{background:var(--bg0);border:1px solid var(--bd1);border-radius:var(--r);padding:14px 120px 14px 20px;font-family:monospace;font-size:18px;color:var(--p4);letter-spacing:2px;text-align:center;margin:12px 0}
.vstep{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r);margin-bottom:8px;transition:all var(--t)}
.vstep:hover{border-color:var(--bd1);transform:translateX(4px)}
.vsnum{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--p1),var(--p2));display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.vstxt{font-size:13px;color:var(--txt2);line-height:1.55}
.vstxt code{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2);border-radius:4px;padding:1px 6px;color:var(--p4);font-family:monospace;font-size:12px}

/* ── AUTH ─────────────────────────────────────────────────────────── */
.auth-wrap{min-height:calc(100vh - var(--nav));display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{width:100%;max-width:440px;background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r2);padding:38px;box-shadow:var(--sh1);animation:fadeUp .35s ease}
.auth-icon{width:66px;height:66px;border-radius:var(--r2);background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(124,58,237,.1));border:1px solid rgba(168,85,247,.25);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;box-shadow:0 0 30px rgba(168,85,247,.2)}
.auth-title{font-family:var(--fh);font-size:28px;font-weight:700;color:#fff;text-align:center;margin-bottom:5px}
.auth-sub{font-size:13px;color:var(--txt2);text-align:center;margin-bottom:26px}
.auth-sub a{color:var(--p4);transition:color var(--t)}.auth-sub a:hover{color:var(--p5);text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;color:var(--muted)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--bd0)}
.discord-btn{width:100%;padding:11px;background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.25);border-radius:var(--r);color:#818cf8;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;transition:all var(--t);cursor:pointer}
.discord-btn:hover{background:rgba(88,101,242,.22);border-color:rgba(88,101,242,.45);transform:translateY(-1px)}

/* ── ONLINE USER ──────────────────────────────────────────────────── */
.ou-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid rgba(45,32,96,.5);transition:padding var(--t)}
.ou-row:last-child{border:none}.ou-row:hover{padding-left:5px}
.ou-av{width:30px;height:30px;border-radius:7px;object-fit:cover;border:1px solid var(--bd0);transition:border-color var(--t)}
.ou-row:hover .ou-av{border-color:var(--bd1)}.ou-name{font-size:13px;font-weight:500;color:var(--txt)}

.rt-row{padding:8px 0;border-bottom:1px solid rgba(45,32,96,.5);transition:padding var(--t)}
.rt-row:last-child{border:none}.rt-row:hover{padding-left:5px}
.rt-link{font-size:13px;font-weight:500;color:var(--txt);transition:color var(--t);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-link:hover{color:var(--p4)}.rt-meta{font-size:11px;color:var(--muted);margin-top:2px}

.ip-badge{display:inline-block;font-family:monospace;font-size:15px;font-weight:700;color:var(--p4);background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);border-radius:8px;padding:8px 18px;letter-spacing:1px}

.announce{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,rgba(168,85,247,.09),rgba(124,58,237,.04));border:1px solid rgba(168,85,247,.22);border-radius:var(--r);padding:13px 18px;margin-bottom:24px;font-size:13px;animation:slideIn .3s ease}
.announce strong{color:var(--p4)}
.ann-close{margin-left:auto;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;transition:color var(--t);cursor:pointer}
.ann-close:hover{color:var(--txt)}

.pagination{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:24px 0}
.pg-btn{padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600;background:var(--bg2);border:1px solid var(--bd0);color:var(--txt3);transition:all var(--t);text-decoration:none;cursor:pointer}
.pg-btn:hover,.pg-btn.on{background:var(--bg3);border-color:var(--bd1);color:var(--p4)}
.pg-btn.on{background:rgba(168,85,247,.15);color:var(--p4)}

/* Feature cards */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:40px}
.fc{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r2);padding:24px;text-align:center;transition:all var(--t);position:relative;overflow:hidden}
.fc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p1),var(--p3),transparent);opacity:0;transition:opacity var(--t)}
.fc:hover{border-color:var(--bd1);transform:translateY(-4px);box-shadow:var(--sh1),0 0 20px rgba(124,58,237,.15)}
.fc:hover::before{opacity:1}
.fc-icon{font-size:36px;margin-bottom:14px;display:block;transition:transform var(--t)}
.fc:hover .fc-icon{transform:scale(1.1)}
.fc-name{font-family:var(--fh);font-size:17px;font-weight:700;color:#fff;margin-bottom:8px}
.fc-desc{font-size:13px;color:var(--txt2);line-height:1.6}

/* ── ADMIN RANK CONFIG ────────────────────────────────────────────── */
.rank-cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}
.rank-cfg-card{background:var(--bg2);border:1px solid var(--bd0);border-radius:var(--r);padding:16px;transition:all var(--t);cursor:grab}
.rank-cfg-card:hover{border-color:var(--bd1);box-shadow:var(--glow)}
.rank-cfg-card.dragging{opacity:.5;cursor:grabbing}
.rank-cfg-preview{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rank-cfg-inputs{display:grid;gap:8px}
.rank-cfg-inputs label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px}
.rank-cfg-inputs input{width:100%;padding:6px 10px;background:var(--bg4);border:1px solid var(--bd0);border-radius:6px;color:var(--txt);font-size:12px;outline:none;transition:border-color var(--t)}
.rank-cfg-inputs input:focus{border-color:var(--p2)}
.rank-cfg-inputs input[type=color]{width:40px;height:28px;padding:2px;cursor:pointer;border-radius:6px}

/* ── FOOTER ───────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--bd0);padding:48px 0 24px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-bottom:32px;justify-content:center;justify-items:center}
.foot-logo{height:200px;width:auto;margin-bottom:1px;filter:drop-shadow(0 0 5px rgba(168,85,247,.4))}
.foot-brand p{font-size:13px;color:var(--txt3);line-height:1.7;max-width:280px;margin-bottom:16px}
.foot-col h5{font-family:var(--fh);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--txt3);margin-bottom:14px}
.foot-col a{display:block;font-size:13px;color:var(--muted);margin-bottom:9px;transition:all var(--t)}
.foot-col a:hover{color:var(--p4);padding-left:5px}
.foot-bottom{text-align:center;font-size:12px;color:var(--muted);border-top:1px solid var(--bd0);padding-top:20px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap}

/* ── UTILS ────────────────────────────────────────────────────────── */
.text-p4{color:var(--p4)}.text-muted{color:var(--muted)}.text-center{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.flex{display:flex}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.ml-auto{margin-left:auto}
/* .anim class kept for backward compatibility, now uses new system */
.anim{animation:fadeUp .4s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.anim:nth-child(2){animation-delay:.07s}.anim:nth-child(3){animation-delay:.14s}
.anim:nth-child(4){animation-delay:.21s}.anim:nth-child(5){animation-delay:.28s}

/* Ensure nav doesn't break on auto-hide */
.nav{will-change:transform}

/* Application bubbles */
.app-bubble-right{margin-left:auto;background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3)}
.app-bubble-left{margin-right:auto;background:var(--bg4);border:1px solid var(--bd1)}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .nav-links{display:none}.nav-right .btn{display:none}.nav-right .umenu{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr}
  .a-grid{grid-template-columns:1fr 1fr}
  .admin-wrap{flex-direction:column}
  .admin-side{width:100%;height:auto;position:static;display:flex;flex-wrap:wrap;padding:10px;gap:4px;border-right:none;border-bottom:1px solid var(--bd0)}
  .asec{display:none}
  .alink{padding:7px 12px;border-left:none;border-radius:6px;font-size:12px;white-space:nowrap}
  .alink.on{background:rgba(168,85,247,.15);color:var(--p4);border-left:none}
  .admin-body{padding:16px}
  .admin-topbar{flex-wrap:wrap;gap:8px}.admin-topbar h1{font-size:20px}
  .dtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dtable{min-width:500px}
  .mob-nav{display:flex;flex-direction:column;padding:16px 0}
  .mob-nav a{padding:12px 20px;font-size:15px;font-weight:500}
  .mob-nav .mob-sep{height:1px;background:var(--bd0);margin:8px 16px}
}
@media(max-width:768px){
  :root{--nav:58px}
  .hero{padding:20px 20px 50px}
  .stats-bar{flex-wrap:wrap}.stats-bar .stat-cell{min-width:calc(50% - 1px)}
  .fg2{grid-template-columns:1fr}.rank-grid{grid-template-columns:1fr}
  .post{grid-template-columns:42px 1fr;gap:12px}
  .frow-stats{display:none}
  .modal-bg{padding:0;align-items:flex-end}
  .modal{border-radius:var(--r2) var(--r2) 0 0;max-width:100%!important;max-height:92vh;overflow-y:auto}
  .modal-bd{max-height:60vh;overflow-y:auto}
  .modal-hd{padding:16px 16px 12px}
  .modal-ft{padding:12px 16px;gap:8px;flex-wrap:wrap}
  .modal-ft .btn{flex:1;min-width:0;font-size:13px}
  .modal-bd{padding:0 16px 12px}
  .dtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dtable td,.dtable th{padding:8px 10px;font-size:12px}
  .dtable .hide-mobile{display:none}
  .online-players-bar{gap:6px;padding:12px}
  .op-chip{font-size:11px;padding:4px 10px 4px 4px}
  .op-chip img{width:18px;height:18px}
}
@media(max-width:600px){
  .fg2{grid-template-columns:1fr}
  .finput,.finput[type=number]{font-size:16px}
  textarea.finput{font-size:15px}
  .rank-grid{grid-template-columns:1fr}.rcard{min-height:auto}
  .team-grid{grid-template-columns:repeat(2,1fr)!important}
  .tmember{padding:14px 10px}
  .card-head{padding:12px 16px}.card-head .card-title{font-size:14px}
  [style*="max-width:85%"]{max-width:95%!important}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}
  .rank-cfg-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .form-card,.auth-card{padding:22px 18px}
  .modal{border-radius:var(--r)}
  .a-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-title{font-size:36px}
  .stat-val{font-size:26px}
  .stat-lbl{font-size:9px;letter-spacing:1px}
  .feature-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .pagination{gap:3px}.pg-btn{padding:6px 9px;font-size:12px}
  .stats-bar .stat-cell{padding:16px 10px}
}
@media(max-width:360px){
  .hero-btns{flex-direction:column;align-items:center}
  .hero-btns .btn{width:100%}
}


/* ── Profile page mobile ────────────────────────────────────────────── */
@media(max-width:600px){
  .profile-header-inner{flex-direction:column;text-align:center}
  [style*="display:flex;align-items:center;gap:24px;flex-wrap:wrap"]{justify-content:center;text-align:center}
}

/* ══════════════════════════════════════════════════════════════════
   DARK / LIGHT MODE
   ══════════════════════════════════════════════════════════════════ */
/* Light mode = dunkleres Lila-Grau, kein reines Weiss */
[data-theme="light"]{
  --bg0:#1c1828;--bg1:#252033;--bg2:#2e2840;--bg3:#38304e;--bg4:#43395c;
  --bd0:#3d3560;--bd1:#5a4e88;--bd2:#7c66b8;
  --p0:#9d6eff;--p1:#a87cff;--p2:#b890ff;--p3:#d0b8ff;--p4:#ece0ff;--p5:#f5eeff;
  --grn:#4ade80;--grn2:#16a34a;--warn:#fbbf24;--red:#f87171;--red2:#dc2626;--cyan:#38bdf8;
  --txt:#e8e0ff;--txt2:#c4b8ee;--txt3:#9888cc;--muted:#6a5a9a;
  --sh0:0 2px 12px rgba(0,0,0,.5);--sh1:0 8px 32px rgba(0,0,0,.55);--sh2:0 16px 56px rgba(0,0,0,.6);
  --glow:0 0 28px rgba(157,110,255,.4);--glow2:0 0 56px rgba(157,110,255,.25);
}
[data-theme="light"] body{background:var(--bg1);color:var(--txt)}
[data-theme="light"] #stars{opacity:.45}
[data-theme="light"] .nav{
  background:rgba(28,24,40,.93) !important;
  border-bottom-color:var(--bd0);
}
[data-theme="light"] .card{background:var(--bg2);border-color:var(--bd0)}
[data-theme="light"] .hero-badge{
  background:rgba(157,110,255,.15);border-color:rgba(157,110,255,.4);color:var(--p2);
}

/* Theme toggle button */
.theme-toggle-btn{
  background:transparent;border:1px solid var(--bd1);
  color:var(--txt2);border-radius:8px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--t);margin-right:8px;flex-shrink:0;
}
.theme-toggle-btn:hover{background:var(--bg3);color:var(--txt);border-color:var(--bd2)}

/* Show moon in dark mode, sun in light mode */
[data-theme="dark"]  .theme-toggle-btn svg:nth-child(1){display:block}
[data-theme="dark"]  .theme-toggle-btn svg:nth-child(2){display:none}
[data-theme="light"] .theme-toggle-btn svg:nth-child(1){display:none}
[data-theme="light"] .theme-toggle-btn svg:nth-child(2){display:block}

/* ══════════════════════════════════════════════════════════════════
   KONAMI CODE EASTER EGG
   ══════════════════════════════════════════════════════════════════ */
#konami-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,5,25,.88);backdrop-filter:blur(8px);
  animation:konamiFadeIn .35s ease;
}
@keyframes konamiFadeIn{from{opacity:0}to{opacity:1}}

.konami-box{
  text-align:center;padding:48px 56px;
  background:var(--bg2);border:2px solid var(--bd2);
  border-radius:20px;box-shadow:var(--glow),var(--sh2);
  animation:konami-pop .5s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;max-width:420px;
}
@keyframes konami-pop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

.konami-pixels{
  font-size:72px;margin-bottom:12px;
  animation:konami-spin 1s cubic-bezier(.34,1.56,.64,1);
}
.konami-pixels::before{content:'🎮'}
@keyframes konami-spin{from{transform:rotateY(360deg) scale(0)}to{transform:rotateY(0) scale(1)}}

.konami-title{
  font-family:var(--fh);font-size:52px;font-weight:700;
  background:linear-gradient(135deg,#a855f7,#38bdf8,#4ade80);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;letter-spacing:2px;
  animation:konami-glow 2s ease-in-out infinite;
}
@keyframes konami-glow{
  0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 20px rgba(168,85,247,.8))}
}

.konami-sub{font-size:16px;color:var(--txt2);margin-bottom:8px}
.konami-code{
  font-family:monospace;font-size:18px;color:var(--p3);
  letter-spacing:3px;margin-bottom:28px;
  background:var(--bg3);padding:8px 16px;border-radius:8px;display:inline-block;
}

/* Pixel confetti */
.konami-pixel{
  position:absolute;top:-20px;
  image-rendering:pixelated;border-radius:2px;
  animation:pixelFall linear forwards;
}
@keyframes pixelFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}

/* ══════════════════════════════════════════════════════════════════
   DISCORD WIDGET
   ══════════════════════════════════════════════════════════════════ */
.discord-widget-wrap{
  background:var(--bg2);border:1px solid var(--bd0);
  border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--sh1);transition:var(--ts);
}
.discord-widget-wrap:hover{box-shadow:var(--sh2);border-color:var(--bd1)}
.discord-widget-wrap iframe{
  display:block;width:100%;border:none;
}

/* ══════════════════════════════════════════════════════════════════
   STEVE V2 – ANIMATIONEN
   ══════════════════════════════════════════════════════════════════ */


#steve-body{
  width:100%;position:relative;
}

#steve-img{
  width:100%;image-rendering:pixelated;display:block;
}

/* Speech bubble */
#steve-speech{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--bd1);
  color:var(--txt);font-size:11px;font-family:var(--fb);
  padding:5px 10px;border-radius:8px;white-space:nowrap;
  box-shadow:var(--sh0);
  transition:opacity .3s;
  pointer-events:none;
}
#steve-speech::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--bd1);
}
.steve-hidden{opacity:0 !important;pointer-events:none}

/* ── Walk: classic bob ── */
#steve-body[data-action="walk"] #steve-img{
  animation:steve-walk .38s ease-in-out infinite;
}
@keyframes steve-walk{
  0%  {transform:translateY(0) rotate(-1.5deg)}
  25% {transform:translateY(-6px) rotate(0deg)}
  50% {transform:translateY(0) rotate(1.5deg)}
  75% {transform:translateY(-3px) rotate(0deg)}
  100%{transform:translateY(0) rotate(-1.5deg)}
}

/* ── Wave: arm swing + head tilt ── */
#steve-body[data-action="wave"] #steve-img{
  animation:steve-wave .5s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes steve-wave{
  0%  {transform:rotate(-4deg) translateY(0)}
  25% {transform:rotate(4deg)  translateY(-5px)}
  50% {transform:rotate(-6deg) translateY(-2px)}
  75% {transform:rotate(5deg)  translateY(-6px)}
  100%{transform:rotate(-4deg) translateY(0)}
}

/* ── Jump: big bounce ── */
#steve-body[data-action="jump"] #steve-img{
  animation:steve-jump .55s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes steve-jump{
  0%  {transform:translateY(0) scaleY(1)}
  30% {transform:translateY(-30px) scaleY(1.05)}
  55% {transform:translateY(-40px) rotate(10deg) scaleY(1)}
  80% {transform:translateY(-5px) scaleY(.92)}
  90% {transform:translateY(0) scaleY(1.04)}
  100%{transform:translateY(0) scaleY(1)}
}

/* ── Sneak: crouched look ── */
#steve-body[data-action="sneak"] #steve-img{
  transform:scaleY(.75) translateY(15px);
  transform-origin:bottom center;
  animation:steve-sneak .6s ease-in-out infinite;
  filter:brightness(.8);
}
@keyframes steve-sneak{
  0%,100%{transform:scaleY(.75) translateY(15px) rotate(-1deg)}
  50%    {transform:scaleY(.75) translateY(12px) rotate(1deg)}
}

/* ── Idle ── */
#steve-body[data-action="idle"] #steve-img{
  animation:steve-idle 2s ease-in-out infinite;
}
@keyframes steve-idle{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}

/* ══════════════════════════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════════════════════════ */
.page-404{
  min-height:calc(100vh - 120px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px 20px;
}
.p404-inner{max-width:520px;width:100%}

.p404-creeper{
  font-size:90px;margin-bottom:0;
  display:inline-block;
  animation:creeper-bob 2.5s ease-in-out infinite;
  filter:drop-shadow(0 0 24px rgba(74,222,128,.4));
}
@keyframes creeper-bob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-12px) rotate(2deg)}
}

.p404-code{
  font-family:var(--fh);font-size:110px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,#a855f7 0%,#38bdf8 50%,#4ade80 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:titleGlow 3s ease-in-out infinite;
  margin-bottom:8px;
}
.p404-title{
  font-family:var(--fh);font-size:26px;font-weight:600;
  color:var(--txt);margin-bottom:12px;
}
.p404-sub{
  font-size:15px;color:var(--txt3);margin-bottom:32px;line-height:1.7;
}

.p404-console{
  background:var(--bg0);border:1px solid var(--bd0);
  border-radius:var(--r);padding:16px 20px;
  font-family:monospace;font-size:13px;color:var(--grn);
  text-align:left;margin-bottom:32px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3);
}
.p404-console .line{margin-bottom:4px}
.p404-console .line.err{color:var(--red)}
.p404-console .line.warn{color:var(--warn)}
.p404-console .cursor{
  display:inline-block;width:8px;height:14px;
  background:var(--grn);vertical-align:middle;
  animation:blink .8s step-end infinite;margin-left:2px;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.p404-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════
   DISCORD WIDGET SECTION (für index.php)
   ══════════════════════════════════════════════════════════════════ */
.discord-section{
  margin-bottom:48px;
}
.discord-section .discord-widget-wrap{
  border-radius:var(--r2);overflow:hidden;
}

/* ══════════════════════════════════════════════════════════════════
   STEVE v3 – Canvas-Charakter
   ══════════════════════════════════════════════════════════════════ */
#steve-v3{
  position:fixed;bottom:0;left:-70px;z-index:9999;
  pointer-events:none;width:60px;
}
#steve-canvas{
  display:block;image-rendering:pixelated;
}
.steve-bubble{
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--bd1);
  color:var(--txt);font-size:11px;font-family:var(--fb);
  padding:5px 10px;border-radius:8px;white-space:nowrap;
  box-shadow:var(--sh0);transition:opacity .25s;
  pointer-events:none;
}
.steve-bubble::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--bd1);
}
.steve-hidden{opacity:0}

/* ══════════════════════════════════════════════════════════════════
   VOTE-SEITE  (vorher inline in vote.php – jetzt zentral hier)
   ══════════════════════════════════════════════════════════════════ */
.vote-hero {
  text-align: center;
  padding: 64px 24px 40px;
}
.vote-hero-icon {
  font-size: 64px;
  display: block;
  margin-bottom: 18px;
  animation: voteFloatIcon 3s ease-in-out infinite;
}
@keyframes voteFloatIcon {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.vote-hero h1 {
  font-family: var(--fh);
  font-size: clamp(28px,5vw,44px);
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 12px;
}
.vote-hero p {
  color: var(--txt3);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* Reward banner */
.reward-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(139,92,246,.18) 0%, rgba(109,40,217,.10) 100%);
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 16px;
  padding: 14px 28px;
  font-family: var(--fh);
  font-size: 15px;
  color: var(--txt);
  margin-bottom: 48px;
  box-shadow: 0 0 32px rgba(139,92,246,.15);
}
.reward-banner .reward-key-icon {
  font-size: 28px;
  animation: voteSpinKey 4s linear infinite;
}
@keyframes voteSpinKey {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(30deg); }
  40%  { transform: rotate(-15deg); }
  60%  { transform: rotate(20deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.reward-banner strong { color: var(--purple); }

/* Vote card */
.vote-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
}
.vote-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--purple));
  opacity: .7;
}
.vote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  border-color: var(--purple);
}
.vote-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vote-card-num {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 18px;
  color: var(--purple);
  flex-shrink: 0;
}
.vote-card-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 17px;
  color: var(--txt);
  line-height: 1.3;
}
.vote-card-sub {
  font-size: 12px;
  color: var(--txt3);
  margin-top: 2px;
}
.vote-card-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--txt2);
}
.vote-card-reward .ri { font-size: 18px; }
.vote-card-reward strong { color: var(--txt); }
.vote-card-cooldown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--txt3);
}
.vote-card-cooldown-done { color: #16a34a !important; }

/* Sichtbar angezeigte Vote-URL */
.vote-link-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.vote-link-label {
  font-size: 12px;
  color: var(--txt3);
  font-weight: 600;
  flex-shrink: 0;
}
.vote-link-url {
  flex: 1;
  min-width: 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--p4, var(--purple));
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.vote-link-url:hover { text-decoration: underline; }
.vote-link-copy {
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.3);
  color: var(--purple);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.vote-link-copy:hover { background: rgba(139,92,246,.25); }

.btn-vote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(139,92,246,.35);
  width: 100%;
  margin-top: auto;
}
.btn-vote:hover {
  background: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139,92,246,.5);
}
.btn-vote:active { transform: translateY(0); }
.btn-vote-done {
  background: #16a34a !important;
  box-shadow: 0 4px 16px rgba(22,163,74,.35) !important;
}

/* How-it-works steps */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.how-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.how-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 14px;
  color: var(--purple);
  flex-shrink: 0;
}
.how-step-text {
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.5;
}
.how-step-text strong {
  display: block;
  font-family: var(--fh);
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 2px;
  font-size: 14px;
}

/* Total votes counter */
.vote-total-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  text-align: center;
}
.vote-total-bar .vtb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.vote-total-bar .vtb-item:last-child { border-right: none; }
.vote-total-bar .vtb-val {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 800;
  color: var(--purple);
}
.vote-total-bar .vtb-lbl {
  font-size: 12px;
  color: var(--txt3);
}

/* Crate-Info-Card */
.vote-crate-card { padding: 28px; margin-bottom: 48px; }
.vote-crate-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.vote-crate-icon { font-size: 56px; flex-shrink: 0; }
.vote-crate-body { flex: 1; min-width: 220px; }
.vote-crate-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 18px;
  color: var(--txt);
  margin-bottom: 8px;
}
.vote-crate-desc {
  color: var(--txt3);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.vote-code {
  background: rgba(139,92,246,.15);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--purple);
}
.vote-crate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vote-crate-tag {
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--txt2);
}

/* Reminder-Block */
.vote-reminder {
  padding: 20px 24px;
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vote-reminder-icon { font-size: 32px; flex-shrink: 0; }
.vote-reminder-body { flex: 1; min-width: 200px; }
.vote-reminder-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 15px;
  color: var(--txt);
  margin-bottom: 4px;
}
.vote-reminder-text {
  font-size: 13px;
  color: var(--txt3);
}
.vote-reminder-btn { flex-shrink: 0; }

/* Toast */
#voteToast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 24px;
  font-size: 14px;
  color: var(--txt);
  z-index: 9999;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  white-space: nowrap;
}
#voteToast.show { transform: translateX(-50%) translateY(0); }

@media(max-width:600px){
  .vote-total-bar { flex-direction: column; gap: 4px; }
  .vote-total-bar .vtb-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    width: 100%;
    justify-content: center;
  }
  .vote-total-bar .vtb-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════════
   INFO-TOOLTIP (bei Email-Feld in der Registrierung)
   ══════════════════════════════════════════════════════════════════ */
.email-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.optional-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--txt3);
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.18);
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(168,85,247,.15);
  border: 1px solid rgba(168,85,247,.4);
  color: var(--p4, #d8b4fe);
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background .15s, transform .15s;
}
.info-tooltip:hover .info-icon,
.info-tooltip:focus .info-icon {
  background: rgba(168,85,247,.3);
  transform: scale(1.1);
}

.info-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg2, #1a0d33);
  border: 1px solid rgba(168,85,247,.35);
  color: var(--txt);
  font-size: 12px;
  font-weight: 400;
  font-family: var(--fb);
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 10px;
  width: 260px;
  max-width: 85vw;
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(168,85,247,.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 100;
  text-transform: none;
  letter-spacing: 0;
}
.info-bubble strong {
  display: block;
  color: var(--p4, #d8b4fe);
  font-size: 13px;
  margin-bottom: 4px;
  font-weight: 700;
}
.info-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(168,85,247,.35);
}
.info-tooltip:hover .info-bubble,
.info-tooltip:focus .info-bubble,
.info-tooltip:focus-within .info-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .info-bubble {
    left: auto;
    right: -8px;
    transform: translateY(4px);
    width: min(280px, calc(100vw - 40px));
  }
  .info-bubble::after {
    left: auto;
    right: 14px;
    transform: none;
  }
  .info-tooltip:hover .info-bubble,
  .info-tooltip:focus .info-bubble,
  .info-tooltip:focus-within .info-bubble {
    transform: translateY(0);
  }
}