@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --accent: #ff00b8;
  --ink: #f3f1ed;
  --muted: #8b8b8b;
  --line: #292929;
  --surface: #111111;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

body { font-family: var(--font-sans); }

.shared-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(9, 9, 9, .78);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shared-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: rgba(9, 9, 9, .94);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

.shared-nav {
  width: min(1200px, calc(100% - 40px));
  min-height: 74px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.shared-brand,
.shared-brand:hover,
.shared-brand:focus-visible {
  width: 190px;
  height: 64px;
  display: block;
  overflow: hidden;
  color: inherit;
}

.shared-brand img,
.shared-brand:hover img,
.shared-brand:focus-visible img {
  width: 190px;
  height: 64px;
  display: block;
  object-fit: contain;
}

.shared-brand .trophy-glow-layer { display: none; }

.shared-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.shared-links a {
  padding: 11px 14px;
  border-radius: 10px;
  color: #999;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.shared-links a:hover,
.shared-links a.is-active {
  color: var(--ink);
  background: #171717;
  box-shadow: inset 0 -2px var(--accent);
}

.shared-auth {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shared-auth a,
.shared-auth button,
.shared-links .shared-mobile-auth {
  min-height: 38px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #c7c7c7;
  background: transparent;
  font: 800 10px/1 var(--font-sans);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.shared-auth a,
.shared-auth button { display: inline-flex; }
.shared-auth svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shared-auth .nav-login-link:hover { border-color: #686868; color: #fff; }
.shared-auth .nav-register-link,
.shared-auth .nav-dashboard-link {
  border-color: var(--accent);
  color: #090909 !important;
  background: var(--accent);
}
.shared-auth .nav-register-link:hover,
.shared-auth .nav-dashboard-link:hover { background: #ff37c5; }
.shared-links .shared-mobile-auth { display: none; }

.forum-page,
.content-page,
.dashboard-page,
.admin-page { padding-top: 74px; }

.home-footer-brand,
.forum-footer .forum-logo {
  overflow: hidden;
}
.home-footer-brand img,
.forum-footer .forum-logo img {
  display: block;
  max-width: 100%;
}

/* Signed-in navigation */
.shared-auth .nav-account-link {
  min-height: 42px;
  padding: 3px 12px 3px 3px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink) !important;
  background: #101010;
}
.shared-auth .nav-account-link:hover { border-color: #626262; }
.nav-account-name {
  max-width: 150px;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-account-badge {
  padding: 3px 6px;
  color: #090909;
  background: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-avatar-image {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  background: #1a1a1a;
  object-fit: cover;
}
.shared-links .shared-mobile-account { gap: 8px; padding: 5px !important; }
.shared-links .shared-mobile-account .nav-avatar-image { width: 26px; height: 26px; }

/* Dashboard avatar editor */
.dashboard-page .dashboard-shell { position: relative; z-index: 2; }
.dashboard-identity { display: flex; align-items: center; gap: 20px; }
.avatar-frame {
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #090909;
}
.avatar-image {
  width: 88px;
  height: 88px;
  display: block;
  border-radius: 50%;
  background: #181818;
  object-fit: cover;
}
.avatar-frame-large { margin: 0 auto 4px; }
.avatar-frame-large .avatar-image { width: 128px; height: 128px; }
.avatar-editor { display: grid; gap: 13px; justify-items: center; text-align: center; }
.avatar-hint { margin: 0; color: #777; font-size: 11px; line-height: 1.6; }
.avatar-upload,
.avatar-reset {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font: 800 10px var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.avatar-upload { border: 1px solid var(--accent); color: #090909; background: var(--accent); }
.avatar-reset { border: 1px solid var(--line); color: #c8c8c8; background: transparent; }
.avatar-reset:hover { border-color: #666; color: #fff; }
.avatar-upload:has(input:disabled) { opacity: .6; cursor: wait; }
.avatar-message { display: none; margin: 0; font-size: 11px; line-height: 1.5; }
.avatar-message.is-visible { display: block; }
.avatar-message.is-error { color: #ff8da7; }
.avatar-message.is-success { color: #8ce8b1; }
.avatar-message.is-pending { color: #aaa; }
.quick-links-title { margin-top: 26px !important; }
.chat-channel.is-locked { opacity: .42; cursor: not-allowed; }

@media (max-width: 900px) {
  .shared-nav {
    width: min(100% - 24px, 1200px);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 4px;
  }
  .shared-brand,
  .shared-brand:hover,
  .shared-brand img,
  .shared-brand:hover img {
    width: 165px;
    height: 55px;
    margin: 0 auto;
  }
  .shared-links {
    justify-self: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }
  .shared-links a { padding: 10px 8px 9px; font-size: 9px; }
  .shared-links .shared-mobile-auth { display: inline-flex; min-height: 30px; padding: 0 8px; }
  .shared-links .shared-mobile-register { border-color: var(--accent); color: #090909 !important; background: var(--accent); }
  .shared-auth { display: none !important; }
  .forum-page,
  .content-page,
  .dashboard-page,
  .admin-page { padding-top: 111px; }
}

@media (max-width: 720px) {
  .dashboard-identity { flex-direction: column; align-items: flex-start; gap: 14px; }
  .avatar-image { width: 74px; height: 74px; }
}

@media (max-width: 420px) {
  .shared-links a { padding-inline: 6px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}