@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rajdhani:wght@400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  --obsidian:    #0a0a0c;
  --stone:       #141418;
  --deepstone:   #0f0f13;
  --surface:     #1a1a20;
  --lava:        #e84118;
  --lava-bright: #ff6b35;
  --lava-glow:   rgba(232,65,24,0.35);
  --ember:       #f0a500;
  --blue:        #4a6cf7;
  --blue-glow:   rgba(74,108,247,0.35);
  --purple:      #7c3aed;
  --green:       #22c55e;
  --steel:       #9ca3af;
  --bone:        #d1d5db;
  --white:       #f9fafb;
  --card:        #111116;
  --card-border: rgba(232,65,24,0.18);
  --discord:     #5865F2;
  --twitch:      #9146FF;
  --microsoft:   #00a4ef;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  font-family:'Rajdhani',sans-serif;
  background:var(--obsidian);
  color:var(--bone);
  overflow-x:hidden;
  min-height:100vh;
}

body::before {
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.012) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;z-index:0;
}

/* SCANLINES */
.scanlines{position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);pointer-events:none;z-index:999;}

/* PARTICLES */
.particles{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.particle{position:absolute;bottom:-10px;width:4px;height:4px;background:var(--lava);animation:rise linear infinite;}
.particle:nth-child(odd){background:var(--ember);width:5px;height:5px;}
.particle:nth-child(3n){background:var(--lava-bright);}
.particle:nth-child(1){left:5%;animation-duration:8s;animation-delay:0s;opacity:.5;}
.particle:nth-child(2){left:15%;animation-duration:12s;animation-delay:2s;opacity:.35;}
.particle:nth-child(3){left:25%;animation-duration:9s;animation-delay:.5s;opacity:.6;}
.particle:nth-child(4){left:38%;animation-duration:11s;animation-delay:3s;opacity:.4;}
.particle:nth-child(5){left:50%;animation-duration:7s;animation-delay:1s;opacity:.55;}
.particle:nth-child(6){left:62%;animation-duration:13s;animation-delay:4s;opacity:.35;}
.particle:nth-child(7){left:72%;animation-duration:10s;animation-delay:1.5s;opacity:.6;}
.particle:nth-child(8){left:83%;animation-duration:8.5s;animation-delay:2.5s;opacity:.4;}
.particle:nth-child(9){left:91%;animation-duration:11s;animation-delay:.8s;opacity:.5;}
@keyframes rise{0%{transform:translateY(0) translateX(0) scale(1);opacity:.7;}50%{transform:translateY(-50vh) translateX(12px) scale(.6);opacity:.4;}100%{transform:translateY(-100vh) translateX(-8px) scale(.2);opacity:0;}}

/* NAVBAR */
nav {
  position:sticky;top:0;z-index:200;
  background:rgba(10,10,12,0.94);
  backdrop-filter:blur(14px);
  border-bottom:2px solid rgba(232,65,24,0.35);
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;
  box-shadow:0 4px 30px rgba(0,0,0,.8);
}

.nav-logo {
  font-family:'Press Start 2P',monospace;font-size:.9rem;
  color:var(--white);text-decoration:none;
  display:flex;align-items:center;gap:.7rem;
  letter-spacing:1px;transition:color .2s;
}
.nav-logo:hover{color:var(--lava-bright);}
.logo-hex{
  display:inline-flex;width:36px;height:36px;
  background:var(--lava);
  clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
  align-items:center;justify-content:center;font-size:1.1rem;
  flex-shrink:0;box-shadow:0 0 14px var(--lava-glow);
}

.nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;}
.nav-links a,.nav-links button {
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:1.5px;
  color:var(--steel);text-decoration:none;
  padding:7px 14px;border-radius:4px;background:none;border:1px solid transparent;
  cursor:pointer;transition:color .2s,background .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links button:hover{color:var(--lava-bright);background:rgba(232,65,24,.08);border-color:rgba(232,65,24,.2);}
.nav-links a.active{color:var(--lava-bright);border-color:rgba(232,65,24,.3);background:rgba(232,65,24,.06);}

.nav-right{display:flex;align-items:center;gap:.8rem;}

.nav-user-chip{
  display:flex;align-items:center;gap:.5rem;
  background:var(--stone);border:1px solid rgba(255,255,255,.1);
  border-radius:4px;padding:5px 12px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.85rem;
  color:var(--bone);letter-spacing:.5px;cursor:pointer;transition:border-color .2s;
}
.nav-user-chip:hover{border-color:rgba(232,65,24,.4);}
.nav-user-avatar{width:24px;height:24px;border-radius:4px;object-fit:cover;}

.nav-coin-chip{
  display:flex;align-items:center;gap:5px;
  background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.3);
  border-radius:4px;padding:5px 12px;
  font-family:'Bebas Neue',sans-serif;font-size:1rem;
  color:var(--ember);letter-spacing:1px;cursor:default;
}

.btn-nav-login{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:1.5px;
  padding:8px 20px;background:var(--lava);color:white;
  border:none;border-radius:4px;cursor:pointer;text-decoration:none;
  box-shadow:0 0 16px rgba(232,65,24,.35);transition:all .2s;white-space:nowrap;
}
.btn-nav-login:hover{background:var(--lava-bright);box-shadow:0 0 26px rgba(232,65,24,.6);transform:translateY(-1px);}

/* PAGE WRAPPER */
.page{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:3.5rem 2.5rem 5rem;}

/* BUTTONS */
.btn-lava{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:2px;padding:13px 32px;background:var(--lava);color:white;border:none;cursor:pointer;text-decoration:none;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);box-shadow:0 0 20px rgba(232,65,24,.4);transition:all .2s;display:inline-block;}
.btn-lava:hover{background:var(--lava-bright);box-shadow:0 0 36px rgba(232,65,24,.7);transform:translateY(-2px);}
.btn-lava:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-outline{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:2px;padding:12px 30px;background:transparent;color:var(--bone);border:2px solid rgba(255,255,255,.2);cursor:pointer;text-decoration:none;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);transition:all .2s;display:inline-block;}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:rgba(74,108,247,.08);}
.btn-blue{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:2px;padding:11px 28px;background:var(--blue);color:white;border:none;cursor:pointer;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);box-shadow:0 0 18px rgba(74,108,247,.35);transition:all .2s;display:inline-block;text-decoration:none;}
.btn-blue:hover{background:#6e8eff;box-shadow:0 0 30px rgba(74,108,247,.6);transform:translateY(-2px);}
.btn-green{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:2px;padding:11px 28px;background:var(--green);color:#000;border:none;cursor:pointer;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);box-shadow:0 0 18px rgba(34,197,94,.3);transition:all .2s;display:inline-block;}
.btn-green:hover{background:#4ade80;box-shadow:0 0 30px rgba(34,197,94,.5);transform:translateY(-2px);}

/* CARDS */
.card{background:var(--card);border:1px solid rgba(255,255,255,.07);padding:2rem;position:relative;overflow:hidden;}
.card-lava{border-color:rgba(232,65,24,.2);}
.card-corner::after{content:'';position:absolute;top:0;right:0;width:14px;height:14px;background:var(--lava);clip-path:polygon(100% 0,100% 100%,0 0);}
.card-clip{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}

/* INPUTS */
.dark-input{background:var(--deepstone);border:1px solid rgba(255,255,255,.1);color:var(--bone);font-family:'Rajdhani',sans-serif;font-weight:600;font-size:1rem;padding:11px 16px;outline:none;transition:border-color .2s;width:100%;}
.dark-input:focus{border-color:var(--lava);}
.dark-input::placeholder{color:rgba(156,163,175,.45);}
.input-label{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--steel);margin-bottom:.4rem;display:block;}
.input-group{margin-bottom:1.1rem;}

/* SECTION HEADERS */
.section-kicker{font-family:'Press Start 2P',monospace;font-size:.48rem;letter-spacing:3px;color:var(--lava);text-transform:uppercase;margin-bottom:.5rem;display:flex;align-items:center;gap:8px;}
.section-kicker::before{content:'';display:inline-block;width:22px;height:2px;background:var(--lava);}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:2px;color:var(--white);line-height:1;}
.section-title .accent{color:var(--lava);}
.section-title .blue{color:var(--blue);}

/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;background:var(--stone);border:1px solid rgba(232,65,24,.5);border-left:4px solid var(--lava);color:var(--bone);padding:14px 22px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.5px;z-index:9999;transform:translateX(130%);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:340px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));box-shadow:0 8px 32px rgba(0,0,0,.6);}
.toast.show{transform:translateX(0);opacity:1;}
.toast.success{border-left-color:var(--green);}
.toast.info{border-left-color:var(--blue);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* MODAL OVERLAY */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--stone);border:1px solid rgba(232,65,24,.25);max-width:480px;width:100%;padding:2.5rem;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));}
.modal::after{content:'';position:absolute;top:0;right:0;width:18px;height:18px;background:var(--lava);clip-path:polygon(100% 0,100% 100%,0 0);}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--steel);font-size:1.3rem;cursor:pointer;transition:color .2s;z-index:1;}
.modal-close:hover{color:var(--lava-bright);}

/* TABS */
.tabs{display:flex;gap:.3rem;margin-bottom:2rem;border-bottom:2px solid rgba(255,255,255,.06);padding-bottom:0;}
.tab-btn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:1.5px;padding:10px 20px;background:none;border:none;color:var(--steel);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;}
.tab-btn:hover{color:var(--bone);}
.tab-btn.active{color:var(--lava-bright);border-bottom-color:var(--lava);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* BADGE RANKS */
.rank-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:3px;font-family:'Press Start 2P',monospace;font-size:.5rem;letter-spacing:1px;font-weight:normal;}
.rank-default{background:rgba(156,163,175,.15);color:var(--steel);border:1px solid rgba(156,163,175,.25);}
.rank-vip    {background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3);}
.rank-mvp    {background:rgba(74,108,247,.12);color:#818cf8;border:1px solid rgba(74,108,247,.3);}
.rank-mvpp   {background:rgba(240,165,0,.12);color:var(--ember);border:1px solid rgba(240,165,0,.3);}
.rank-legend {background:rgba(232,65,24,.15);color:var(--lava-bright);border:1px solid rgba(232,65,24,.35);box-shadow:0 0 10px rgba(232,65,24,.2);}
.rank-wolf   {background:linear-gradient(90deg,rgba(124,58,237,.2),rgba(232,65,24,.2));color:#c084fc;border:1px solid rgba(124,58,237,.4);box-shadow:0 0 14px rgba(124,58,237,.2);}

@media(max-width:900px){
  nav{padding:0 1rem;}
  .page{padding:2rem 1.2rem 4rem;}
}
@media(max-width:600px){
  .nav-links li:not(:last-child):not(:nth-last-child(2)){display:none;}
}