* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --white: #f2f4f7;
  --muted: #818b9b;
  --dark-blue: #2b4355;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #020304;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
}

.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 21% 72%, rgba(31, 55, 72, .26), transparent 30%),
    radial-gradient(circle at 56% 54%, rgba(13, 24, 32, .12), transparent 25%),
    linear-gradient(110deg, #030506 0%, #010203 60%, #000 100%);
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .24;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 4px
  );
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.48) 100%);
}

#particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding-top: 24px;
}

nav {
  display: flex;
  justify-content: center;
  gap: 30px;
}

nav a {
  color: #606775;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  transition: color .2s ease;
}

nav a:hover,
nav a.active {
  color: #e7e9ed;
}

main {
  position: relative;
  z-index: 5;
  min-height: 100vh;
}

.hero {
  position: absolute;
  left: 2.8vw;
  bottom: 8.5vh;
  width: min(620px, 90vw);
}

.eyebrow {
  margin-bottom: 31px;
  color: #737e90;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 7px;
}

h1 {
  display: flex;
  flex-direction: column;
  font-size: clamp(62px, 6.8vw, 94px);
  line-height: 1.02;
  letter-spacing: -3px;
  font-weight: 900;
}

h1 span {
  display: block;
}

h1 .muted {
  color: #818b9b;
}

.tagline {
  margin-top: 28px;
  color: #687385;
  font-size: 14px;
  letter-spacing: .2px;
}

.buttons {
  display: flex;
  gap: 12px;
  margin-top: 44px;
}

.button {
  min-height: 53px;
  padding: 0 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #f1f3f6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.primary {
  background: #2c4557;
  border: 1px solid #2c4557;
}

.primary:hover {
  background: #37566b;
}

.secondary {
  min-width: 177px;
  background: rgba(8, 13, 17, .55);
  border: 1px solid #3a434d;
}

.secondary:hover {
  border-color: #697582;
}

@media (max-width: 700px) {
  header {
    padding: 22px 15px 0;
  }

  nav {
    gap: 15px;
  }

  nav a {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .hero {
    left: 7vw;
    bottom: 8vh;
  }

  h1 {
    font-size: clamp(52px, 17vw, 78px);
    letter-spacing: -2px;
  }

  .buttons {
    flex-direction: column;
    width: min(340px, 86vw);
  }

  .button {
    width: 100%;
  }
}


nav button {
  background: none; border: 0; cursor: pointer; font: inherit;
}
.nav-link {
  color:#606775; font-size:11px; font-weight:700; letter-spacing:5px;
  transition:color .2s ease;
}
.nav-link:hover,.nav-link.active { color:#e7e9ed; }

.page {
  position:absolute; inset:0; min-height:100vh;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .42s ease, transform .42s ease, visibility .42s;
  pointer-events:none;
}
.page.active {
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.content-panel {
  position:absolute; left:2.8vw; top:50%; transform:translateY(-50%);
  width:min(650px,90vw);
}
.content-panel h2 {
  font-size:clamp(60px,7vw,100px); line-height:.95; letter-spacing:-3px;
  font-weight:900; margin-bottom:25px;
}
.content-panel > p:not(.eyebrow):not(.creator) {
  color:#7b8595; font-size:15px; line-height:1.8;
}
.creator {
  margin-top:22px; font-size:34px; font-weight:900; letter-spacing:2px; color:#e8ebef;
}
@media(max-width:700px){
  .content-panel{left:7vw;}
  .nav-link{font-size:9px;letter-spacing:2px;}
}

.credits-wrap{position:absolute;left:2.8vw;top:50%;transform:translateY(-46%);width:min(760px,92vw)}
.credits-wrap h2{font-size:clamp(58px,6vw,88px);line-height:.95;letter-spacing:-3px;font-weight:900}
.credits-intro{margin-top:18px;color:#7b8595;font-size:14px}
.profile-card{margin-top:30px;width:min(390px,100%);display:flex;align-items:center;gap:16px;padding:14px 17px;border:1px solid rgba(120,135,150,.22);border-radius:10px;background:rgba(10,15,19,.55);backdrop-filter:blur(8px)}
.profile-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#20262d}
.profile-label,.section-label{color:#657080;font-size:9px;font-weight:800;letter-spacing:3px}
.profile-name{margin-top:5px;color:#edf0f4;font-size:19px;font-weight:800}
.section-label{display:block;margin-top:34px;margin-bottom:12px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.service-card{min-height:105px;display:flex;align-items:center;gap:14px;padding:17px;border:1px solid rgba(120,135,150,.18);border-radius:9px;background:rgba(7,11,14,.5);transition:transform .2s ease,border-color .2s ease}
.service-card:hover{transform:translateY(-3px);border-color:rgba(130,150,170,.42)}
.service-icon{width:39px;height:39px;flex:0 0 39px;border:1px solid #46525e;border-radius:8px;display:grid;place-items:center;color:#c9d0d8;font-size:12px;font-weight:900}
.service-card h3{font-size:12px;letter-spacing:2px}
.service-card p{margin-top:7px;color:#687382;font-size:10px;line-height:1.45}
@media(max-width:700px){.credits-wrap{left:7vw;top:53%}.services-grid{grid-template-columns:1fr}.service-card{min-height:78px}.credits-wrap h2{font-size:55px}}

.legal-page{overflow-y:auto;overflow-x:hidden;padding-top:100px;padding-bottom:100px}
.legal-page.active{position:fixed}
.legal-wrap{width:min(770px,calc(100% - 48px));margin:0 auto;padding:10px 0 100px}
.legal-wrap h2{margin-top:20px;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-1.5px;font-weight:900;color:#f2f3f5}
.legal-updated{margin-top:18px;color:#566171;font-size:10px;font-weight:700;letter-spacing:4px}
.legal-intro{margin:48px 0 55px;padding:24px;color:#9aa2ae;font-size:14px;line-height:1.65;border:1px solid rgba(130,145,160,.28);border-radius:10px;background:rgba(8,11,14,.48)}
.legal-part{margin:48px 0 48px;color:#687383;font-size:11px;font-weight:800;letter-spacing:5px}
.legal-wrap h4{margin:0 0 18px;color:#eef0f3;font-size:17px;font-weight:900;letter-spacing:3px}
.legal-wrap h4:not(:first-of-type){margin-top:48px}
.legal-wrap p,.legal-wrap li{color:#969eaa;font-size:14px;line-height:1.65}
.legal-wrap ul{margin:12px 0 0 22px;padding:0}
.legal-wrap li{margin:7px 0}
.legal-wrap strong{color:#c6ccd3}
.legal-discord{display:inline-block;margin-top:22px;padding:16px 22px;border:1px solid rgba(130,145,160,.35);border-radius:8px;color:#e8ebef;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:2px;transition:background .2s,border-color .2s}
.legal-discord:hover{background:rgba(90,110,130,.16);border-color:rgba(150,170,190,.55)}
#legal::-webkit-scrollbar{width:8px}#legal::-webkit-scrollbar-thumb{background:#26303a;border-radius:8px}
@media(max-width:700px){.legal-page{padding-top:90px}.legal-wrap{width:calc(100% - 36px)}.legal-intro{margin-top:35px}.legal-wrap h4{font-size:15px}}

.socials-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-46%);
  width:min(450px,calc(100% - 40px));
}
.socials-wrap .eyebrow{margin-bottom:25px}
.social-cards{display:flex;flex-direction:column;gap:12px}
.social-card{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:17px;
  padding:0 25px;
  border:1px solid rgba(130,145,160,.28);
  border-radius:10px;
  background:rgba(8,11,14,.5);
  color:inherit;
  text-decoration:none;
  backdrop-filter:blur(7px);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.social-card:hover{
  transform:translateY(-3px);
  border-color:rgba(150,170,190,.55);
  background:rgba(20,25,31,.65);
}
.social-icon{
  width:22px;
  text-align:center;
  font-size:23px;
  font-weight:900;
}
.youtube-icon{color:#ff3347}
.tiktok-icon{color:#46e9ef}
.discord-icon{color:#7289da}
.social-card h3{
  color:#eef0f3;
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
}
.social-card p{
  margin-top:4px;
  color:#687383;
  font-size:11px;
}
@media(max-width:700px){
  .socials-wrap{top:52%;width:calc(100% - 36px)}
}

.site-footer{
  position:fixed;
  left:0;
  bottom:18px;
  z-index:20;
  width:100%;
  text-align:center;
  color:#515b69;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  pointer-events:none;
}

.game-info {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:30px;
  flex-wrap:wrap;
}


.info-box {
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;

  padding:12px 18px;

  min-width:150px;

  text-align:left;

  backdrop-filter:blur(8px);
}


.info-box b {
  display:block;
  font-size:14px;
}


.info-box small {
  opacity:.7;
  font-size:12px;
}


.online-dot {
  display:inline-block;

  width:8px;
  height:8px;

  background:#00ff66;

  border-radius:50%;

  margin-right:6px;

  box-shadow:0 0 8px #00ff66;
}