/* German Dominion · topbar — shared horizontal nav (family design).
 *
 * SELF-CONTAINED: all colors/fonts are scoped --tb-* tokens defined on the
 * bar itself, so this file can be dropped onto any page (home, skin, map,
 * live, voice) without depending on that page's :root.
 *
 * Paired with topbar.js (injects markup into <header id="sky-topbar"> and a
 * mobile drawer). Layout contract: body{padding-top:72px} clears the fixed
 * bar on every page.
 */

.topbar-apex,
.nav-drawer {
  --tb-ink:#f2f6ef;
  --tb-ink-72:rgba(242,246,239,.72);
  --tb-ink-46:rgba(242,246,239,.46);
  --tb-ink-28:rgba(242,246,239,.28);
  --tb-ink-14:rgba(242,246,239,.13);
  --tb-ink-07:rgba(242,246,239,.06);
  --tb-red:#e63b2e;
  --tb-red-hot:#ff6a5b;
  --tb-red-glow:rgba(230,59,46,.55);
  --tb-grn:#39c977;
  --tb-grn-soft:#63e79c;
  --tb-grn-glow:rgba(57,201,119,.45);
  --tb-panel:rgba(4,8,6,.86);
  --tb-panel-solid:rgba(4,8,6,.94);
  --tb-disp:'Anton','Impact','Arial Narrow',sans-serif;
  --tb-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --tb-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── desktop bar ──────────────────────────────────────────── */
.topbar-apex {
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  z-index:1000 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center; justify-content:space-between;
  gap:20px;
  padding:13px clamp(18px, 4vw, 40px);
  padding-left:max(clamp(18px,4vw,40px), env(safe-area-inset-left));
  padding-right:max(clamp(18px,4vw,40px), env(safe-area-inset-right));
  background:var(--tb-panel);
  backdrop-filter:blur(9px) saturate(115%);
  -webkit-backdrop-filter:blur(9px) saturate(115%);
  border-bottom:1px solid var(--tb-ink-07);
  max-width:100%; box-sizing:border-box;
  transition:background .35s var(--tb-ease), border-color .35s var(--tb-ease), padding .35s var(--tb-ease);
}
.topbar-apex.scrolled {
  background:var(--tb-panel-solid);
  border-bottom-color:var(--tb-ink-14);
  padding-top:9px; padding-bottom:9px;
}

/* ── brand (text wordmark) ────────────────────────────────── */
.topbar-apex .brand {
  display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 1 auto; min-width:0;
  padding:0; background:none; border:0; border-radius:0;
}
.topbar-apex .brand-word {
  font-family:var(--tb-disp); font-weight:400; font-size:18px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tb-ink);
  white-space:nowrap; line-height:1;
}

/* ── inline nav ───────────────────────────────────────────── */
.topbar-apex .tb-nav { display:flex; align-items:center; gap:clamp(14px, 2vw, 26px); }
.topbar-apex .tb-nav a {
  position:relative; display:inline-flex; align-items:center;
  padding:6px 0;
  color:var(--tb-ink-72); font-family:var(--tb-mono);
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:color .25s var(--tb-ease);
}
.topbar-apex .tb-nav a::after {
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--tb-red); transition:width .3s var(--tb-ease);
}
.topbar-apex .tb-nav a:hover { color:var(--tb-ink); }
.topbar-apex .tb-nav a:hover::after { width:100%; }
.topbar-apex .tb-nav a.active { color:var(--tb-red-hot); }
.topbar-apex .tb-nav a.active::after { width:100%; }

/* ── right cluster ────────────────────────────────────────── */
/* right-group keeps the persistent tools (sound toggle) snug against the
   name/sign-in, while the bar's space-between keeps brand + nav + this group
   as the three balanced regions. */
.topbar-apex .right-group { display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; justify-content:flex-end; }
.topbar-apex .tb-tools { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.topbar-apex .right-cluster { display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; justify-content:flex-end; }

/* sound on/off toggle */
.topbar-apex .sound-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:9px; flex:0 0 auto;
  background:rgba(255,255,255,.03); border:1px solid var(--tb-ink-14);
  color:var(--tb-ink-72); cursor:pointer;
  transition:border-color .18s var(--tb-ease), color .18s var(--tb-ease), background .18s var(--tb-ease);
}
.topbar-apex .sound-toggle svg { width:18px; height:18px; display:block; }
.topbar-apex .sound-toggle:hover { border-color:var(--tb-grn); color:var(--tb-ink); background:rgba(57,201,119,.08); }
.topbar-apex .sound-toggle.muted { color:var(--tb-ink-46); }
.topbar-apex .sound-toggle.muted:hover { color:var(--tb-ink-72); border-color:var(--tb-ink-28); }

/* Steam sign-in (secondary, green-outline) */
.topbar-apex .signin-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:9px;
  border:1px solid var(--tb-ink-14); background:rgba(255,255,255,.02);
  color:var(--tb-ink-72);
  font-family:var(--tb-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:.25s var(--tb-ease);
}
.topbar-apex .signin-btn:hover { border-color:var(--tb-grn); color:var(--tb-ink); background:rgba(57,201,119,.08); }
.topbar-apex .signin-btn .signin-icon { color:var(--tb-grn-soft); font-size:13px; }

/* user chip + dropdown */
.topbar-apex .user-chip-wrap { position:relative; }
.topbar-apex .user-chip {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--tb-ink-14);
  font-family:var(--tb-mono); font-size:12px; color:var(--tb-ink-72); letter-spacing:.04em;
  cursor:pointer; user-select:none; transition:border-color .18s ease, color .18s ease;
}
.topbar-apex .user-chip:hover { border-color:var(--tb-grn); color:var(--tb-ink); }
.topbar-apex .user-chip .avatar {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--tb-grn) 0%, #2f8f6a 100%);
  background-size:cover; background-position:center;
  box-shadow:0 0 8px var(--tb-grn-glow); flex:0 0 auto;
}
.topbar-apex .user-chip .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.topbar-apex .user-chip .points {
  white-space:nowrap; font-size:11px; letter-spacing:.02em;
  color:var(--tb-grn); border-left:1px solid var(--tb-ink-14);
  padding-left:9px; margin-left:1px; flex:0 0 auto;
}
.topbar-apex .user-chip .caret { color:var(--tb-ink-46); font-size:10px; }
.user-chip-wrap .user-menu {
  position:absolute; top:calc(100% + 6px); right:0; min-width:170px; z-index:120;
  display:flex; flex-direction:column; padding:6px;
  background:var(--tb-panel-solid); border:1px solid var(--tb-ink-14); border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.user-chip-wrap .user-menu[hidden] { display:none !important; }
.user-chip-wrap .user-menu .signout {
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:6px;
  background:transparent; border:none; color:#ff8c86; font:inherit;
  font-family:var(--tb-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:background .15s, color .15s;
}
.user-chip-wrap .user-menu .signout:hover { background:rgba(230,59,46,.12); color:#ff6b73; }
.user-chip-wrap .user-menu .admin-link {
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:6px;
  background:transparent; color:var(--tb-ink-72); font:inherit;
  font-family:var(--tb-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:background .15s, color .15s;
}
.user-chip-wrap .user-menu .admin-link:hover { background:rgba(57,201,119,.10); color:var(--tb-ink); }

/* ── hamburger + drawer (mobile) ──────────────────────────── */
.topbar-apex .hamburger {
  display:none; width:44px; height:44px; border-radius:9px;
  background:rgba(255,255,255,.03); border:1px solid var(--tb-ink-14);
  align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  transition:border-color .18s ease;
}
.topbar-apex .hamburger:hover { border-color:var(--tb-grn); }
.topbar-apex .hamburger .bars { display:flex; flex-direction:column; gap:4px; align-items:center; }
.topbar-apex .hamburger .bars span { display:block; width:18px; height:2px; background:var(--tb-ink); border-radius:1px; transition:transform .22s var(--tb-ease), opacity .22s var(--tb-ease); }
.topbar-apex .hamburger.open .bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.topbar-apex .hamburger.open .bars span:nth-child(2) { opacity:0; }
.topbar-apex .hamburger.open .bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position:fixed; top:0; left:0; right:0; z-index:49;
  background:var(--tb-panel-solid);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tb-ink-07);
  transform:translateY(-100%); transition:transform .3s var(--tb-ease);
  padding-top:70px; pointer-events:none;
}
.nav-drawer.open { transform:translateY(0); pointer-events:auto; }
.nav-drawer a {
  display:block; padding:16px 28px;
  color:var(--tb-ink-72); font-family:var(--tb-mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  border-top:1px solid var(--tb-ink-07); transition:background .15s, color .15s;
}
.nav-drawer a:first-child { border-top:none; }
.nav-drawer a.active { color:var(--tb-red-hot); background:rgba(230,59,46,.08); box-shadow:inset 3px 0 0 var(--tb-red); }
.nav-drawer a:hover { color:var(--tb-ink); background:rgba(57,201,119,.06); }

/* ── page offset for the fixed bar ───────────────────────── */
body { padding-top:72px; }

/* reserved for a future embedded view; no page currently sets this */
html[data-embedded="true"] body,
body[data-embedded="true"] { padding-top:0 !important; }
html[data-embedded="true"] #sky-topbar,
html[data-embedded="true"] #nav-drawer,
body[data-embedded="true"] #sky-topbar,
body[data-embedded="true"] #nav-drawer { display:none !important; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar-apex { gap:10px; }
  .topbar-apex .tb-nav { display:none; }
  .topbar-apex .hamburger { display:inline-flex; }
  .topbar-apex .signin-btn { padding:9px 12px; font-size:10px; }
  .topbar-apex .user-chip .name { max-width:90px; font-size:11px; }
  .topbar-apex .user-chip .points { font-size:10px; padding-left:7px; }
}
@media (max-width: 480px) {
  .topbar-apex .brand-word { font-size:14px; }
  .topbar-apex .signin-btn span:not(.signin-icon) { display:none; }
  .topbar-apex .signin-btn { padding:0; width:44px; height:44px; justify-content:center; }
}
@media (pointer: coarse) {
  .topbar-apex .hamburger { width:44px; height:44px; }
  .topbar-apex .user-chip { min-height:44px; }
  .topbar-apex .signin-btn { min-height:44px; }
  .topbar-apex .sound-toggle { width:44px; height:44px; }
  .nav-drawer a { min-height:44px; display:flex; align-items:center; }
}

/* Friends tab pending-request badge (topbar.js refreshFriendsBadge). */
.topbar-apex .tb-nav a .friends-badge {
  position:absolute; top:-4px; right:-16px;
  min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  background:var(--tb-red-hot); color:#fff;
  font-family:var(--tb-mono); font-size:9px; font-weight:700;
  line-height:15px; text-align:center; letter-spacing:0;
}
.nav-drawer a .friends-badge {
  display:inline-block; margin-left:8px;
  min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  background:var(--tb-red-hot); color:#fff;
  font-family:var(--tb-mono); font-size:9px; font-weight:700;
  line-height:15px; text-align:center; letter-spacing:0;
}