/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --brand:#32a7eb; --brand-dim:#1d7ab8;
  --brand-glow:rgba(50,167,235,.2); --brand-glow2:rgba(50,167,235,.08);
  --bg:#0b0f14; --bg2:#0d1219; --bg3:#0f1520;
  --glass:rgba(255,255,255,.04); --glass-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.07); --border-brand:rgba(50,167,235,.25);
  --fg:#e8eaf0; --fg2:#b0b8c8; --muted:#7a8499;
  --green:#34d399; --purple:#a78bfa; --red:#e05260; --gold:#f2a900;
  --radius:14px; --radius-sm:8px; --radius-xs:5px;
  --highlight:#32a7eb; --highlight-border:rgba(50,167,235,.35); --highlight-bg:rgba(50,167,235,.07);
}

/* ── THEME HELPERS ───────────────────────────────────────────────────────── */
/* compact mode */
.theme-compact .stat-pill .val{font-size:1.1rem}
.theme-compact .stat-pill{padding:10px 14px}
.theme-compact .match-card{padding:10px 12px;gap:6px}
.theme-compact .quick-stat{padding:10px 14px}
/* avatar border styles */
.avatar-border-none   #player-avatar{border-color:transparent!important;box-shadow:none!important}
.avatar-border-subtle #player-avatar{border:2px solid rgba(255,255,255,.25)!important;box-shadow:none!important}
.avatar-border-glow   #player-avatar{border:2px solid var(--brand)!important;box-shadow:0 0 14px var(--brand-glow),0 0 30px var(--brand-glow2)!important}
.avatar-border-pulse  #player-avatar{border:2px solid var(--brand)!important;animation:avatar-pulse 2.4s ease-in-out infinite!important}
@keyframes avatar-pulse{0%,100%{box-shadow:0 0 8px var(--brand-glow)}50%{box-shadow:0 0 22px var(--brand-glow),0 0 40px var(--brand-glow2)}}
/* glass opacity levels */
.glass-low  .glass,.glass-low  .profile-card,.glass-low  .match-card{background-color:rgba(255,255,255,.02)!important}
.glass-high .glass,.glass-high .profile-card,.glass-high .match-card{background-color:rgba(255,255,255,.09)!important}

/* ── RESET + BASE ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}
a{color:var(--brand);text-decoration:none}
img,svg{display:block}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}

/* ── SHARED COMPONENTS ───────────────────────────────────────────────────── */
.container{max-width:1120px;margin:0 auto;padding:0 28px}
.glass{background-color:var(--glass);border:1px solid var(--border);border-radius:var(--radius)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.4rem;border-radius:var(--radius-sm);
     font-weight:700;font-size:.9rem;border:none;text-decoration:none;white-space:nowrap;cursor:pointer;
     transition:filter .15s,transform .15s,box-shadow .15s}
.btn:active{transform:translateY(0)!important}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 20px var(--brand-glow)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 32px var(--brand-glow)}
.btn-discord{background:#5865f2;color:#fff;box-shadow:0 4px 20px rgba(88,101,242,.3)}
.btn-discord:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-ghost{background:var(--glass);color:var(--fg2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--glass-hover);color:var(--fg)}
.btn-sm{padding:.5rem 1rem;font-size:.84rem}
@keyframes hero-badge-in{from{opacity:0;transform:translateY(-8px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hero-badge-pulse-alpha{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 10px 2px rgba(255,200,0,.35),0 0 24px 4px rgba(255,160,0,.2),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px 5px rgba(255,210,0,.55),0 0 36px 8px rgba(255,170,0,.3),0 2px 8px rgba(0,0,0,.5)}}
@keyframes hero-badge-pulse-packleader{0%,100%{box-shadow:0 0 10px 2px rgba(139,92,246,.4),0 0 24px 4px rgba(109,40,217,.2),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:0 0 18px 5px rgba(167,139,250,.6),0 0 36px 8px rgba(139,92,246,.3),0 2px 8px rgba(0,0,0,.5)}}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.4rem 1rem;border-radius:999px;white-space:nowrap;animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both;cursor:default}
.hero-badge__icon{font-size:1rem;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 4px currentColor)}
.hero-badge__label{line-height:1}
.hero-badge--alpha{background:linear-gradient(135deg,#c8820a,#f5c518 45%,#e6a800);border:1px solid rgba(255,220,80,.7);color:#1a1000;text-shadow:0 1px 0 rgba(255,255,255,.25);animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both,hero-badge-pulse-alpha 2.8s ease-in-out .4s infinite}
.hero-badge--packleader{background:linear-gradient(135deg,#5b21b6,#8b5cf6 45%,#7c3aed);border:1px solid rgba(196,181,253,.5);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both,hero-badge-pulse-packleader 2.8s ease-in-out .4s infinite}
.hero-badge--packmate{background:linear-gradient(135deg,rgba(52,211,153,.22),rgba(16,185,129,.12));border:1px solid rgba(52,211,153,.5);color:#6ee7b7;box-shadow:0 0 14px rgba(52,211,153,.2),0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.hero-badge--recruit{background:linear-gradient(135deg,rgba(148,163,184,.18),rgba(100,116,139,.1));border:1px solid rgba(148,163,184,.4);color:#cbd5e1;box-shadow:0 0 10px rgba(148,163,184,.12),0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}

/* ── NAV ──────────────────────────────────────────────────────────────── */
#site-header{position:sticky;top:0;z-index:300;background:rgba(11,15,20,.82);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--border);transition:background .2s}
#site-header.scrolled{background:rgba(11,15,20,.96)}
.nav-inner{display:flex;align-items:center;gap:8px;padding:10px 28px;max-width:1120px;margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.96rem;color:var(--fg);flex-shrink:0;margin-right:8px;text-decoration:none}
.nav-logo img{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);object-fit:contain;background:#111827}
.nav-links{display:flex;align-items:center;gap:2px;flex:1}
.nav-link{color:var(--muted);padding:.32rem .6rem;border-radius:var(--radius-xs);font-size:.82rem;font-weight:600;white-space:nowrap;transition:color .15s,background .15s;text-decoration:none}
.nav-link:hover,.nav-link.active{color:var(--fg);background:var(--glass)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.nav-install{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--brand);padding:.3rem .7rem;border-radius:var(--radius-xs);border:1px solid var(--border-brand);background:rgba(50,167,235,.07);transition:background .15s,color .15s;text-decoration:none}
.nav-install:hover{background:rgba(50,167,235,.15);color:var(--brand)}
.nav-install-mobile{display:none;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--brand);padding:.3rem .7rem;border-radius:var(--radius-xs);border:1px solid var(--border-brand);background:rgba(50,167,235,.07);transition:background .15s,color .15s;text-decoration:none;margin-top:6px}
.nav-install-mobile:hover{background:rgba(50,167,235,.15);color:var(--brand)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px}
@media(max-width:720px){
  .hamburger{display:flex}
  .nav-links{display:none;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:rgba(9,13,19,.97);backdrop-filter:blur(20px);padding:14px 24px 22px;border-bottom:1px solid var(--border);z-index:300}
  .nav-links.open{display:flex}
  #site-header{position:relative}
  .container{padding:0 14px}
  .nav-right .nav-install{display:none}
  .nav-install-mobile{display:inline-flex}
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:56px 0 32px;color:var(--muted);font-size:.87rem}
.footer-grid{display:grid;gap:40px;margin-bottom:40px}
@media(min-width:700px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand-name{font-size:1rem;font-weight:800;color:var(--fg);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.footer-brand-name img{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:#111827}
.footer-tagline{font-size:.86rem;color:var(--muted);line-height:1.55}
.footer-col-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--fg2);margin-bottom:14px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--muted);font-size:.87rem;transition:color .15s}
.footer-links a:hover{color:var(--fg)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--border)}
.footer-social{display:flex;gap:8px}
.social-btn{width:34px;height:34px;border-radius:var(--radius-xs);background:var(--glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;transition:color .15s,background .15s}
.social-btn:hover{color:var(--fg);background:var(--glass-hover)}