


.mock-tag{
  position:fixed;bottom:14px;right:14px;z-index:90;
  font-family:var(--font-pixel);font-size:var(--fs-12);letter-spacing:.1em;
  color:var(--gold);background:#100b20d9;border:1px solid #ffcf7945;
  border-radius:var(--r-s);padding:7px 10px;pointer-events:none;
}


.site-header{
  position:sticky;top:var(--sp-3);z-index:50;
  width:calc(100% - 32px);max-width:1360px;margin:var(--sp-3) auto 0;
  background:#140e25ee;border:1px solid var(--edge);border-radius:var(--r-l);
  box-shadow:var(--shadow-2);backdrop-filter:blur(18px);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  max-width:1360px;margin:0 auto;padding:10px var(--sp-4);}
.brand{display:flex;align-items:center;gap:var(--sp-3);}
.brand img{width:44px;height:44px;border-radius:var(--r-s);}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-16);letter-spacing:-.02em;line-height:1.1;}
.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-14);
  color:var(--muted);padding:9px var(--sp-4);border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;
}
.nav a:hover{color:var(--text);background:#ffffff14;}
.nav a[aria-current="page"]{color:var(--text);background:#ffffff1a;}
.nav-cta{display:flex;align-items:center;gap:var(--sp-2);}
.nav-cta .btn{min-height:40px;padding:8px var(--sp-4);font-size:var(--fs-13);border-radius:var(--r-pill);}
.btn.vote{
  color:var(--cyan);border-color:#80e2df50;background:#80e2df0a;
}
.btn.vote:hover{background:#80e2df1c;}
.btn.vote svg{width:16px;height:16px;}
.btn.shop{
  background:linear-gradient(125deg,#ffe09a,#ffbf58);border-color:#ffdb8a;
  border-bottom:3px solid #b47b37;color:#25132a;font-weight:700;
}
.btn.account{
  width:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%;
  color:var(--muted);
}
.btn.account:hover{color:var(--text);}
.btn.account svg{width:19px;height:19px;}
.mobile-toggle{display:none;background:var(--panel);border:1px solid var(--edge-strong);
  color:var(--text);border-radius:var(--r-s);padding:8px 10px;}
@media (max-width:980px){
  .nav{display:none;position:absolute;top:calc(100% + 6px);left:-1px;right:-1px;
    flex-direction:column;align-items:stretch;background:#1a112bf2;
    border:1px solid #725289;border-radius:var(--r-m);padding:var(--sp-4);
    box-shadow:var(--shadow-2);backdrop-filter:blur(20px);}
  .nav.open{display:flex;}
  .mobile-toggle{display:inline-flex;}
}


.hero{
  position:relative;min-height:calc(100vh - 90px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--sp-7) var(--sp-5) var(--sp-8);
  overflow:hidden;
}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.hero-tagline{
  margin-top:var(--sp-4);max-width:600px;
  font-size:var(--fs-16);line-height:1.8;color:var(--muted);
}
.hero-tagline strong{color:var(--text);font-weight:600;}
.hero-players{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-5);
  font-family:var(--font-pixel);font-size:var(--fs-13);letter-spacing:.12em;
  color:#cfeee7;
  background:#1c142bba;border:1px solid #86609e50;border-radius:var(--r-pill);
  padding:10px 18px;
}
.hero-players .dot{width:8px;height:8px;border-radius:50%;background:#75838d;}
.hero-players.is-online .dot{background:var(--ok);box-shadow:0 0 12px #7ddb9e88;}
.hero-actions{margin-top:var(--sp-5);}
.btn.play{
  min-height:56px;padding:var(--sp-4) var(--sp-7);
  font-size:var(--fs-16);border-radius:var(--r-m);
}
.hero-scroll{
  position:absolute;bottom:var(--sp-5);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--font-pixel);font-size:var(--fs-12);letter-spacing:.22em;
  color:var(--faint);
}
.hero-scroll span:last-child{
  width:22px;height:34px;border:1px solid var(--edge-strong);border-radius:var(--r-pill);
  position:relative;
}
.hero-scroll span:last-child::after{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:3px;height:7px;border-radius:2px;background:var(--cyan);
}
@media (max-width:760px){
  .hero{min-height:calc(100svh - 120px);}
  .hero-deoxys{top:36%;opacity:.55;}
}


.join-band{
  max-width:var(--container);margin:0 auto;
  border:1px solid #86609e50;border-radius:var(--r-m);
  background:#1c142bba;border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);flex-wrap:wrap;
}
.join-band .join-txt{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-14);}
.join-band .join-txt svg{width:20px;height:20px;color:var(--cyan);}


.raid-banner{
  max-width:var(--container);margin:var(--sp-4) auto 0;
  border:1px solid #ff61614d;border-radius:var(--r-m);
  background:linear-gradient(120deg,#2b0f16f2,#1e0b20f2);
  box-shadow:var(--glow-red);
  padding:var(--sp-4) var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
}
.raid-left{display:flex;align-items:center;gap:var(--sp-4);}
.raid-left>svg{width:30px;height:30px;color:var(--red);}
.raid-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-18);}
.raid-sub{font-size:var(--fs-13);color:var(--faint);margin-top:2px;}
.raid-count{font-family:var(--font-pixel);font-size:var(--fs-22);letter-spacing:.08em;color:#ffb3b3;
  text-shadow:0 0 18px #ff616145;}


.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
.feature{
  position:relative;padding:var(--sp-6);
  background:radial-gradient(at 92% 0%, #683e8c40, transparent 72%), linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge);border-radius:var(--r-m);box-shadow:var(--shadow-1);
}
.feature:nth-child(2){background:radial-gradient(at 92% 0%, #466b8e3d, transparent 78%), linear-gradient(160deg,var(--panel-2),var(--panel));}
.feature:nth-child(3){background:radial-gradient(at 92% 0%, #8b685433, transparent 72%), linear-gradient(160deg,var(--panel-2),var(--panel));}
.feature:nth-child(4){background:radial-gradient(at 92% 0%, #5c3d7a40, transparent 72%), linear-gradient(160deg,var(--panel-2),var(--panel));}
.feature svg{width:32px;height:32px;color:var(--cyan);stroke-width:1.5;}
.feature h3{font-size:var(--fs-22);margin:var(--sp-4) 0 var(--sp-3);}
.feature p{font-size:var(--fs-14);line-height:1.8;}
@media (max-width:860px){.features{grid-template-columns:1fr;}}


.discord{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  background:radial-gradient(at 15%, #55426f77, transparent 65%), linear-gradient(120deg,#241936,#1a102a);
  border:1px solid #9672b95a;border-radius:var(--r-l);
  padding:var(--sp-6);box-shadow:var(--shadow-1);
}
.discord h2{font-size:clamp(var(--fs-22),2.6vw,var(--fs-28));margin-top:var(--sp-3);}


.site-footer{border-top:1px solid var(--edge);margin-top:var(--sp-9);
  padding:var(--sp-7) 0 var(--sp-6);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6);}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid h4{font-family:var(--font-pixel);font-weight:400;font-size:var(--fs-12);
  letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-bottom:var(--sp-4);}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);}
.foot-grid a{color:var(--muted);font-size:var(--fs-14);}
.foot-grid a:hover{color:var(--text);}
.foot-brand p{font-size:var(--fs-13);margin-top:var(--sp-3);max-width:300px;}
.foot-legal{border-top:1px solid var(--edge);margin-top:var(--sp-6);padding-top:var(--sp-4);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-12);color:var(--faint);}
.coming{font-family:var(--font-pixel);font-size:var(--fs-12);color:var(--gold);
  border:1px solid #ffcf7935;border-radius:5px;padding:1px 6px;margin-left:6px;}
