#nav-placeholder {
  min-height: 74px;
  contain: layout;
}

#footer-placeholder {
  min-height: 400px;
  contain: layout;
}

.site-navbar {
  background: rgba(56,16,72,.92);
  border-bottom: 1px solid rgba(176,56,248,.38);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  z-index: 1040;
}
.site-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  max-width: 180px;
}
.site-navbar .navbar-brand img {
  width: min(176px, 42vw);
  height: auto;
}
.site-navbar .navbar-toggler {
  border: 1px solid rgba(176,56,248,.55);
  border-radius: 12px;
  padding: .5rem .65rem;
  background: rgba(96,40,112,.72);
}
.site-navbar .navbar-toggler-icon { filter: invert(1); }
.site-navbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin: .18rem;
  padding: .58rem .75rem;
  border-radius: 14px;
  color: var(--color-text);
  font-weight: 900;
  font-size: .9rem;
  border: 1px solid transparent;
}
.site-navbar .nav-link img { object-fit: contain; }
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
  background: rgba(176,56,248,.32);
  border-color: rgba(176,56,248,.62);
  color: var(--color-text);
  box-shadow: 0 0 18px rgba(176,56,248,.35);
}
.btn-login {
  color: var(--color-text);
  border-color: rgba(176,56,248,.68);
  background: rgba(17,0,28,.5);
}
.btn-login:hover { color: var(--color-text); background: rgba(176,56,248,.3); }
.btn-join { white-space: nowrap; }

.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  background: linear-gradient(180deg, rgba(56,16,72,.88), rgba(17,0,28,.98));
  border-top: 1px solid rgba(176,56,248,.45);
  color: var(--color-text-muted);
}
.site-footer h2 {
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 .85rem;
}
.footer-logo {
  width: min(220px, 70vw);
  height: auto;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer a { color: var(--color-text-muted); text-decoration: none; font-weight: 700; }
.site-footer a:hover { color: var(--color-primary); }
.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  color: var(--color-btn-text);
  background: var(--color-accent-yellow);
  font-weight: 900;
}
.footer-disclaimer {
  border-radius: 18px;
  padding: 1rem;
  background: rgba(17,0,28,.55);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--color-text-muted);
  font-weight: 700;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
  color: var(--color-text-muted);
  font-size: .94rem;
}

@media (max-width: 991.98px) {
  #nav-placeholder { min-height: 68px; }
  .site-navbar .navbar-collapse {
    margin-top: .8rem;
    padding: .8rem;
    border-radius: 18px;
    background: rgba(17,0,28,.55);
    border: 1px solid rgba(176,56,248,.32);
  }
  .site-navbar .nav-link { width: 100%; }
}