/* SkyClaws · Apex topbar — JS-included (approach B post-Phase-4-round-2).
 *
 * Source of truth for topbar markup + behavior. Imported on every page
 * along with topbar.js. Replaced 11× inline-duplicated copies that grew
 * organically through Phases 3-4. See:
 *   journal/active/2026-04-28_skyclaws_phase4_round2_bugfixes_investigator.md
 *
 * Tokens (--bone, --accent, etc.) come from /_shared.css which every
 * page already imports. This file does NOT redefine them.
 */

/* ── desktop topbar ───────────────────────────────────────── */
.topbar-apex {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  background:linear-gradient(180deg,
    rgba(10,9,8,0.85) 0%,
    rgba(10,9,8,0.6) 80%,
    rgba(10,9,8,0) 100%);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  border-bottom:1px solid var(--bone-08);
  gap:14px;
}
.topbar-apex .brand { display:flex; align-items:center; gap:14px; text-decoration:none; flex:0 0 auto; }
.topbar-apex .brand-mark {
  width:46px; height:46px; border-radius:9px;
  background:radial-gradient(circle at 30% 30%, rgba(125,211,255,0.18), transparent 60%),
             linear-gradient(135deg, #1a1614 0%, #0a0908 100%);
  border:1px solid rgba(125,211,255,0.18);
  box-shadow:0 0 22px rgba(125,211,255,0.16), inset 0 0 0 1px rgba(232,227,216,0.06);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:24px; color:var(--accent);
  text-shadow:0 0 12px var(--accent-glow);
  transition:transform 0.5s var(--ease);
  flex:0 0 auto;
}
.topbar-apex .brand:hover .brand-mark { transform:rotate(8deg); }
.topbar-apex .brand-text { line-height:1.05; min-width:0; }
.topbar-apex .brand-text .name { font-family:var(--display); font-size:20px; letter-spacing:0.18em; color:var(--bone); white-space:nowrap; }
.topbar-apex .brand-text .sub { font-size:9px; color:var(--bone-62); letter-spacing:0.28em; text-transform:uppercase; margin-top:3px; white-space:nowrap; }

.topbar-apex .nav {
  display:flex; gap:4px; padding:5px 6px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
}
.topbar-apex .nav a {
  padding:8px 18px; border-radius:8px;
  color:var(--bone-62); font-size:11px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
  transition:color 0.2s var(--ease), background 0.2s var(--ease);
  white-space:nowrap;
}
.topbar-apex .nav a:hover { color:var(--bone); background:rgba(125,211,255,0.10); }
.topbar-apex .nav a.active {
  color:var(--bone); background:rgba(125,211,255,0.10);
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 16px -4px var(--accent-glow);
}

.topbar-apex .right-cluster { display:flex; align-items:center; gap:10px; flex:0 0 auto; }

.topbar-apex .balance-mini {
  display:flex; align-items:center; gap:14px;
  padding:8px 16px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:10px;
  font-family:var(--mono); font-size:13px;
}
.topbar-apex .balance-mini .stat { display:flex; align-items:baseline; gap:6px; }
.topbar-apex .balance-mini .num { color:var(--amber); text-shadow:0 0 8px var(--amber-glow); font-variant-numeric:tabular-nums; }
.topbar-apex .balance-mini .stat.points-stat .num { color:var(--accent); text-shadow:0 0 8px var(--accent-glow); }
.topbar-apex .balance-mini .lbl { font-family:var(--ui); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bone-34); }
.topbar-apex .balance-mini.flash { animation:topbarBalFlash 700ms var(--ease); }
@keyframes topbarBalFlash {
  0%   { box-shadow:inset 0 0 0 1px var(--glass-border); }
  30%  { box-shadow:inset 0 0 0 1px var(--amber), 0 0 24px var(--amber-glow); }
  100% { box-shadow:inset 0 0 0 1px var(--glass-border); }
}

.topbar-apex .user-chip {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:10px;
  font-size:12px; color:var(--bone-80); letter-spacing:0.04em;
  cursor:pointer; user-select:none; transition:border-color 0.18s ease;
}
.topbar-apex .user-chip:hover { border-color:rgba(125,211,255,0.50); }
.topbar-apex .user-chip .avatar {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #4d8db5 100%);
  box-shadow:0 0 8px var(--accent-glow);
  flex:0 0 auto;
  background-size:cover; background-position:center;
}
.topbar-apex .user-chip .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.topbar-apex .user-chip .caret { color:var(--bone-62); font-size:10px; margin-left:2px; }

.user-chip-wrap { position:relative; }
.user-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:180px; z-index:120;
  display:flex; flex-direction:column;
  padding:6px;
  background:rgba(10,9,8,0.94);
  border:1px solid rgba(232,227,216,0.18);
  border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(125,211,255,0.30), 0 4px 16px rgba(0,0,0,0.6);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
}
.user-menu a, .user-menu button {
  display:block; width:100%; text-align:left;
  padding:9px 12px; border-radius:6px;
  background:transparent; border:none;
  color:var(--bone-80); font:inherit; font-size:12px;
  letter-spacing:0.10em; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:background 0.15s, color 0.15s;
}
.user-menu a:hover, .user-menu button:hover { background:rgba(125,211,255,0.10); color:var(--bone); }
.user-menu .sep { height:1px; background:rgba(232,227,216,0.08); margin:4px 0; }
.user-menu .signout { color:var(--crimson); }
.user-menu .signout:hover { background:rgba(200,35,44,0.12); color:#ff6b73; }
.user-menu[hidden] { display:none !important; }  /* beats display:flex */

/* ── B2: prominent SIGN IN button for anon visitors ──────── */
.signin-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:10px;
  background:linear-gradient(180deg, rgba(125,211,255,0.20) 0%, rgba(125,211,255,0.08) 100%);
  border:1px solid var(--accent);
  color:var(--bone);
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 6px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  white-space:nowrap;
}
.signin-btn:hover {
  background:linear-gradient(180deg, rgba(125,211,255,0.30) 0%, rgba(125,211,255,0.14) 100%);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.08);
}
.signin-btn .signin-icon {
  color:var(--accent); text-shadow:0 0 8px var(--accent-glow);
  font-size:14px;
}

/* ── C1: hamburger + nav drawer (≤768px) ─────────────────── */
.hamburger {
  display:none;
  width:42px; height:42px; border-radius:9px;
  background:var(--glass); border:1px solid var(--glass-border);
  align-items:center; justify-content:center;
  color:var(--bone); font-size:20px; cursor:pointer;
  flex:0 0 auto;
  transition:border-color 0.18s ease;
}
.hamburger:hover { border-color:rgba(125,211,255,0.50); }
.hamburger .bars { display:flex; flex-direction:column; gap:4px; align-items:center; }
.hamburger .bars span {
  display:block; width:18px; height:2px;
  background:var(--bone-80); border-radius:1px;
  transition:transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.hamburger.open .bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.open .bars span:nth-child(2) { opacity:0; }
.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:rgba(10,9,8,0.96);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  border-bottom:1px solid var(--bone-08);
  transform:translateY(-100%);
  transition:transform 0.28s var(--ease);
  padding-top:74px;  /* clear the topbar */
  pointer-events:none;
}
.nav-drawer.open { transform:translateY(0); pointer-events:auto; }
.nav-drawer a {
  display:block; padding:18px 28px;
  color:var(--bone-80);
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
  border-top:1px solid var(--bone-08);
  transition:background 0.15s, color 0.15s;
}
.nav-drawer a:first-child { border-top:none; }
.nav-drawer a.active { color:var(--bone); background:rgba(125,211,255,0.10); box-shadow:inset 3px 0 0 var(--accent); }
.nav-drawer a:hover { color:var(--bone); background:rgba(125,211,255,0.06); }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar-apex { padding:10px 14px; gap:10px; }
  .topbar-apex .nav { display:none; }
  .topbar-apex .hamburger { display:inline-flex; }
  .topbar-apex .balance-mini { gap:8px; padding:6px 10px; }
  .topbar-apex .balance-mini .lbl { display:none; }
  .topbar-apex .balance-mini .num { font-size:12px; }
  .topbar-apex .user-chip { padding:6px 10px; }
  .topbar-apex .user-chip .name { max-width:80px; font-size:11px; }
  .topbar-apex .brand-text .name { font-size:18px; }
  .topbar-apex .brand-text .sub  { display:none; }
  .topbar-apex .brand-mark { width:40px; height:40px; font-size:20px; }
  .signin-btn { padding:8px 12px; font-size:10px; gap:6px; }
  .signin-btn .signin-icon { font-size:12px; }
  /* condense long Steam display names that don't fit alongside the hamburger */
}

@media (max-width: 480px) {
  .topbar-apex .brand-text { display:none; }
  .signin-btn span:not(.signin-icon) { display:none; }  /* button collapses to icon-only on tiny phones */
  .signin-btn { padding:8px 10px; }
}