:root{
  --moon-bg:        #0b0710;
  --moon-bg-alt:    #0d0712;
  --moon-panel:     #170d1f;
  --moon-panel-2:   #1f1229;
  --moon-border:    rgba(230,196,238,0.10);
  --moon-border-strong: rgba(230,196,238,0.20);
  --moon-text:      #f5eef8;
  --moon-text-dim:  rgba(245,238,248,0.55);
  --moon-text-dim2: rgba(245,238,248,0.75);

  --moon-1: #591c78;
  --moon-2: #7c2aa0;
  --moon-3: #b84fd6;
  --moon-4: #e9c9ee;
  --moon-glow: rgba(184,79,214,0.45);
  --moon-gold: #ffd76c;

  --moon-grad: linear-gradient(160deg, var(--moon-2) 0%, var(--moon-3) 100%);
  --moon-grad-soft: linear-gradient(160deg, var(--moon-3) 0%, var(--moon-4) 100%);
}

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

[hidden]{ display:none !important; }

html{ background-color: var(--moon-bg); }

body{
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--moon-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(60% 40% at 12% 0%, rgba(124,42,160,0.28) 0%, transparent 60%),
    radial-gradient(50% 35% at 92% 8%, rgba(184,79,214,0.20) 0%, transparent 60%),
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(245,238,248,0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 34% 68%, rgba(245,238,248,0.40), transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 30%, rgba(245,238,248,0.50), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 78%, rgba(245,238,248,0.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 45%, rgba(245,238,248,0.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 5% 85%, rgba(245,238,248,0.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 92%, rgba(245,238,248,0.35), transparent 60%);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  background-size: 100% 900px, 100% 900px, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px;
  transform: translateZ(0);
}
a{ color:inherit; text-decoration:none; }

.site-header{
  position:relative;
  background-image:
    radial-gradient(120% 220% at 22% -30%, rgba(184,79,214,0.28) 0%, transparent 55%),
    radial-gradient(90% 160% at 92% -20%, rgba(124,42,160,0.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(13,7,18,0.35) 0%, rgba(13,7,18,0.80) 100%),
    url('/assets/img/bannefivemMoonV3.png');
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 0 0, center;
  background-repeat: no-repeat;
  border-bottom:1px solid var(--moon-border);
}
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1220px; margin:0 auto;
  padding:22px 32px 20px;
  gap:20px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{
  height:46px; width:46px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 0 16px var(--moon-glow), 0 4px 10px rgba(0,0,0,0.45);
  flex-shrink:0;
}
.brand-text{ display:flex; flex-direction:column; gap:1px; }
.logo{
  font-size:26px; font-weight:900;
  letter-spacing:.5px;
  line-height:1;
  background:var(--moon-grad-soft);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.site-title{ font-size:15px; font-weight:600; color:var(--moon-text-dim2); }

.steam-btn{
  font-family:inherit;
  font-size:14px; font-weight:600;
  color:#fff;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(233,201,238,0.45);
  border-radius:4px;
  padding:11px 20px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.steam-btn:hover{ background:rgba(184,79,214,0.16); border-color:rgba(233,201,238,0.8); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.profile-btn{
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(233,201,238,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s ease;
}
.profile-btn:hover{ background:rgba(184,79,214,0.22); }
.profile-btn.active{ background:#fff; color:var(--moon-2); }

.main-nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1220px; margin:0 auto;
  padding:0 32px 18px;
  flex-wrap:wrap; gap:12px;
}
.nav-links{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-link{
  font-size:14.5px; font-weight:600;
  color:rgba(245,238,248,0.82);
  padding:9px 15px;
  border-radius:4px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.nav-link:hover{ background:rgba(184,79,214,0.16); }
.nav-link.active{ background:#fff; color:var(--moon-2); }
.nav-link.active:hover{ background:#fff; }

.nav-collapse{ display:contents; }
.burger-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px; height:38px;
  border:none; border-radius:6px;
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.burger-btn span{
  display:block;
  width:18px; height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.burger-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2){ opacity:0; }
.burger-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

main{
  flex:1 0 auto;
  width:100%;
  margin:0 auto;
}
h1{ font-size:32px; font-weight:600; margin-bottom:10px; }

footer{
  flex-shrink:0;
  border-top:1px solid var(--moon-border);
  background:var(--moon-bg-alt);
  padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-left{ font-size:13px; color:var(--moon-text-dim); }
.footer-mid{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-social{ display:flex; align-items:center; gap:12px; }
.footer-links{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.social-ic{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}
.social-ic:hover{ background:rgba(184,79,214,0.24); }
.social-ic svg{ width:19px; height:19px; }
.footer-link{
  font-size:13px; color:rgba(245,238,248,0.6);
  text-decoration:underline;
  cursor:pointer;
  transition:color .15s ease;
}
.footer-link:hover{ color:#fff; }
.footer-logo{
  height:44px;
  width:auto;
  flex-shrink:0;
  opacity:.92;
}

@media (max-width: 780px){
  .header-top{ padding:20px 18px 14px; flex-wrap:wrap; row-gap:12px; }
  .site-title{ display:none; }
  .brand-logo{ height:38px; width:38px; }
  .logo{ font-size:22px; }
  .steam-btn{ padding:9px 14px; font-size:13px; }

  .main-nav{ padding:0 18px 14px; }
  .burger-btn{ display:flex; }
  .nav-collapse{
    display:none;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    flex:1 1 100%;
    order:3;
    gap:6px;
    margin-top:12px;
  }
  .nav-collapse.open{ display:flex; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:4px; width:100%; }
  .nav-link{ width:100%; padding:12px 14px; }

  h1{ font-size:24px; }

  footer{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "mid mid"
      "copy age";
    align-items:center;
    gap:18px 12px;
    padding:24px 18px 20px;
  }
  .footer-mid{
    grid-area:mid;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:100%;
    padding-bottom:18px;
    border-bottom:1px solid var(--moon-border);
  }
  .footer-social{ gap:14px; }
  .footer-links{ justify-content:center; gap:4px 18px; }
  .footer-left{ grid-area:copy; }
  .footer-logo{ grid-area:age; justify-self:end; height:38px; }
}