/* ── TOPBAR ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0; gap: 12px;
  position: relative; z-index: 1000;
}
.topbar-logo {
  font-family: 'Playfair Display', serif; font-size: 18px;
  font-weight: 900; color: var(--accent); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1;
}
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-user-info {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 2px;
}
.user-badge { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text); font-weight: 500; }
.user-badge:hover { text-decoration: underline; text-underline-offset: 2px; }
.elo-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--accent); background: rgba(173, 98, 255, 0.14);
  border: 1px solid rgba(173, 98, 255, 0.35); padding: 1px 8px; border-radius: 2px;
}
.pts-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--warn); background: #e5a55015;
  border: 1px solid #e5a55030; padding: 1px 8px; border-radius: 2px;
}

@media (max-width: 720px) {
  .topbar { padding: 10px 14px; }
  .topbar-logo { font-size: 15px; }
}