/* ============================================================
   SkinSignal - THE HEADER

   ONE HEADER, NINE PAGES. The markup is the same on every page (the
   copies are generated from one source), so this file is its only style.
   Loaded on every page right after css/footer.css. On the dashboard,
   css/shell.css loads after it and lays the same header out as a rail
   at desktop widths; everything here is the bar.

     the logo     the real wordmark, home
     the nav      the six pages; the page you are on is off-white with a
                  thin electric blue line under it and a bright point in
                  the middle of the line: an instrument's marker, not a pill
     the account  js/auth.js draws it from the session:
                    signed out   Sign in with Steam, outlined and quiet
                    signed in    Upgrade (free accounts only, the one gold
                                 thing on the bar), a hairline, and the
                                 account button (the Steam avatar and name)
                                 with its menu

   INTEGRATED, NOT FLOATING. A full width bar on the site's container, a
   dark surface, a 1px floor and, under it, a blue to gold hairline you
   have to look for. Sticky: after the first few pixels of scroll
   (js/header.js adds .is-scrolled) it turns more opaque and blurs what
   passes under it. It never resizes or hides.

   NARROWER SCREENS. The nav and the account side move into a full width
   menu behind a quiet menu button below 1180px, before they could touch.

   STILL, when asked. Reduced motion drops every transition and the
   menu's entrance.
   ============================================================ */

.topbar {
  --tb-h: 88px;
  --tb-ink: #f2f4f8;
  --tb-ink-2: #c3c9d3;
  --tb-ink-3: #8b929e;
  --tb-blue: 76, 141, 255;
  --tb-gold: 228, 174, 57;

  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(5, 8, 13, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

/* The material: a hairline under the floor, blue on the left through
   neutral to gold on the right, barely there. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--tb-blue), 0) 0%,
    rgba(var(--tb-blue), 0.26) 22%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(var(--tb-gold), 0.2) 78%,
    rgba(var(--tb-gold), 0) 100%);
}

/* The phone menu is open: the page under it does not scroll. */
html.topbar-locked { overflow: hidden; }

/* The landing's bar sits on the hero, so it starts lighter. */
.topbar--landing { background: rgba(5, 8, 13, 0.5); }

.topbar.is-scrolled {
  background: rgba(5, 8, 13, 0.95);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.85);
}

/* [logo | nav | account]. The side columns never shrink below what they
   hold, so while there is room the nav is centred, and when there is
   not it gives way rather than overlapping. */
.topbar__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: clamp(20px, 2vw, 32px);
  height: var(--tb-h);
}

.topbar .wordmark { justify-self: start; }
/* 3:1 artwork: 54px tall is 162px wide. Sharp, no glow. Under the
   pointer it brightens a touch, like every other link on the bar. */
.topbar .wordmark__img { display: block; height: 54px; width: auto; transition: filter var(--hover-dur, 200ms) ease; }
.topbar .wordmark:hover .wordmark__img { filter: brightness(1.14); }

/* ============================================================
   THE NAV
   ============================================================ */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(26px, 2.2vw, 36px);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--tb-ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
.nav__link:hover { color: #e9edf4; }
.nav__link:focus-visible {
  color: #e9edf4;
  outline: 2px solid rgba(var(--tb-blue), 0.8);
  outline-offset: 4px;
  border-radius: 3px;
}

/* The page you are on: off-white, and the precision line under it. */
.nav__link--active { color: var(--tb-ink); font-weight: 600; }
.nav__link--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--tb-blue), 0.2),
    rgb(var(--tb-blue)) 28%,
    rgb(var(--tb-blue)) 72%,
    rgba(var(--tb-blue), 0.2));
  box-shadow: 0 0 10px rgba(61, 127, 255, 0.45);
}
.nav__link--active::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -1px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #dfe9ff;
  box-shadow: 0 0 6px 1px rgba(120, 170, 255, 0.9);
}

/* ============================================================
   THE ACCOUNT SIDE
   ============================================================ */
.topbar__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Signed out: Sign in with Steam, the quiet outlined one ---------- */
.auth__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(var(--tb-blue), 0.55);
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #f4f6fa;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.auth__signin:hover,
.auth__signin:focus-visible {
  border-color: rgba(118, 166, 255, 0.9);
  background: rgba(14, 26, 48, 0.82);
}
.auth__signin:focus-visible { outline: 2px solid rgba(118, 166, 255, 0.85); outline-offset: 2px; }
.auth__mark { display: block; width: 18px; height: 18px; flex: none; color: #ffffff; }

/* ---------- The membership marks ----------
   Upgrade: the one gold action, for a signed in free account only. A
   member never sees it; their tier is stated quietly in the menu. */
.auth__tier {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.auth__tier--upgrade {
  gap: 9px;
  height: 42px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(var(--tb-gold), 0.6);
  border-radius: 10px;
  background: rgba(var(--tb-gold), 0.07);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #f1c65a;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.auth__tier--upgrade svg { display: block; width: 18px; height: 18px; flex: none; }
.auth__tier--upgrade:hover,
.auth__tier--upgrade:focus-visible {
  border-color: rgba(var(--tb-gold), 0.9);
  background: rgba(var(--tb-gold), 0.12);
}
.auth__tier--upgrade:focus-visible { outline: 2px solid rgba(var(--tb-gold), 0.8); outline-offset: 2px; }

.auth__tier--member {
  padding: 2px 8px;
  border: 1px solid rgba(var(--tb-gold), 0.4);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5d78a;
  background: rgba(var(--tb-gold), 0.06);
}

.auth__rule {
  display: block;
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Signed in: the account button ---------- */
.auth__user {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 12px 0 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.auth__user:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.auth__user[aria-expanded="true"] { background: rgba(255, 255, 255, 0.05); border-color: rgba(var(--tb-blue), 0.35); }
.auth__user:focus-visible { outline: 2px solid rgba(var(--tb-blue), 0.85); outline-offset: 2px; }

/* The Steam avatar, round. A failed load becomes a plain disc. */
.auth__avatar {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #141a24;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.auth__avatar--lg { width: 42px; height: 42px; }

.auth__name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth__chev { display: block; width: 10px; height: 7px; flex: none; color: var(--tb-ink-3); transition: transform 180ms ease; }
.auth__user[aria-expanded="true"] .auth__chev { transform: rotate(180deg); color: var(--tb-ink); }

/* ---------- The account menu ---------- */
.auth__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  width: 284px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(11, 15, 23, 0.97);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow:
    0 26px 60px -18px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: authMenuIn 160ms ease-out;
}
.auth__menu[hidden] { display: none; }
@keyframes authMenuIn {
  from { opacity: 0; translate: 0 -4px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Who you are, and the way to your public profile. */
.auth__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.auth__who-text { min-width: 0; }
.auth__whoname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-ink);
  overflow-wrap: anywhere;
}
.auth__whosub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--tb-ink-3);
  transition: color 160ms ease;
}
a.auth__who:hover,
a.auth__who:focus-visible { background: rgba(255, 255, 255, 0.05); }
a.auth__who:hover .auth__whosub,
a.auth__who:focus-visible .auth__whosub { color: #8fb6ff; }

.auth__sep {
  display: block;
  height: 1px;
  margin: 6px 6px;
  background: rgba(255, 255, 255, 0.07);
}

.auth__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: var(--tb-ink-2);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.auth__item svg { display: block; width: 18px; height: 18px; flex: none; color: var(--tb-ink-3); transition: color 140ms ease; }
.auth__item:hover,
.auth__item:focus-visible { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.auth__item:hover svg,
.auth__item:focus-visible svg { color: #c8d6f0; }
.auth__item:focus-visible,
a.auth__who:focus-visible { box-shadow: inset 0 0 0 1px rgba(var(--tb-blue), 0.6); }
.auth__item-ext { margin-left: auto; width: 13px !important; height: 13px !important; opacity: 0.7; }

/* Sign out: red, but restrained. */
.auth__item--out,
.auth__item--out svg { color: #ef6a70; }
.auth__item--out:hover,
.auth__item--out:focus-visible { background: rgba(239, 90, 97, 0.08); color: #ff8a8f; }
.auth__item--out:hover svg,
.auth__item--out:focus-visible svg { color: #ff8a8f; }

/* The dashboard's currency switcher sits in the same row: the same
   height and corners as the controls beside it. */
.topbar .currency__button { height: 42px; border-radius: 10px; border-color: rgba(255, 255, 255, 0.12); }

/* ============================================================
   THE MENU BUTTON AND THE PHONE MENU (below 1180px)
   ============================================================ */
.topbar__burger {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--tb-ink);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.topbar__burger:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); }
.topbar__burger:focus-visible { outline: 2px solid rgba(var(--tb-blue), 0.85); outline-offset: 2px; }

/* Three hairlines that fold into an X. */
.topbar__burger-bars,
.topbar__burger-bars::before,
.topbar__burger-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}
.topbar__burger-bars { position: relative; }
.topbar__burger-bars::before,
.topbar__burger-bars::after { content: ''; position: absolute; left: 0; }
.topbar__burger-bars::before { top: -6px; }
.topbar__burger-bars::after { top: 6px; }
.topbar__burger[aria-expanded="true"] .topbar__burger-bars { background: transparent; }
.topbar__burger[aria-expanded="true"] .topbar__burger-bars::before { transform: translateY(6px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] .topbar__burger-bars::after { transform: translateY(-6px) rotate(-45deg); }

.topbar__sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Full height: the menu is the screen while it is open. */
  height: calc(100vh - var(--tb-h));
  height: calc(100dvh - var(--tb-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(5, 8, 13, 0.98);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  animation: topbarSheetIn 180ms ease-out;
}
.topbar__sheet[hidden] { display: none; }
@keyframes topbarSheetIn {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}
.topbar__sheet-inner { padding-top: 8px; padding-bottom: 24px; }

.topbar__sheet-nav { display: grid; }
.topbar__sheet-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 0 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--tb-ink-2);
  text-decoration: none;
}
.topbar__sheet-link:hover,
.topbar__sheet-link:focus-visible { color: #ffffff; }
.topbar__sheet-link:focus-visible { outline: 2px solid rgba(var(--tb-blue), 0.8); outline-offset: -2px; border-radius: 6px; }
/* The page you are on: the same blue marker, stood on end. */
.topbar__sheet-link--active { color: var(--tb-ink); font-weight: 600; }
.topbar__sheet-link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  background: rgb(var(--tb-blue));
  box-shadow: 0 0 8px rgba(61, 127, 255, 0.6);
}

/* The account, in the menu: the same pieces, full width. */
.topbar__sheet-auth { margin-top: 20px; }
.topbar__sheet-auth .auth__signin,
.topbar__sheet-auth .auth__tier--upgrade { width: 100%; height: 48px; justify-content: center; }
.auth-sheet { display: grid; gap: 4px; }
.auth-sheet .auth__who {
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}
.auth-sheet .auth__tier--upgrade { margin-bottom: 8px; }
.auth-sheet .auth__item { padding: 13px 12px; font-size: 15px; }

/* ============================================================
   NARROWER BARS
   ============================================================ */
@media (max-width: 1359px) {
  .nav { gap: 24px; }
  .auth { gap: 12px; }
  .auth__name { max-width: 96px; }
}

/* Below 1180px the nav and the account side move into the menu. */
@media (max-width: 1179px) {
  .topbar__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar .nav,
  .topbar .auth { display: none; }
  .topbar__burger { display: inline-grid; }
}

@media (max-width: 620px) {
  .topbar { --tb-h: 68px; }
  .topbar .wordmark__img { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .topbar .wordmark__img,
  .nav__link,
  .auth__signin,
  .auth__tier--upgrade,
  .auth__user,
  .auth__chev,
  .auth__item,
  .auth__item svg,
  .auth__whosub,
  .topbar__burger,
  .topbar__burger-bars,
  .topbar__burger-bars::before,
  .topbar__burger-bars::after { transition: none; }
  .auth__menu,
  .topbar__sheet { animation: none; }
}