/**
 * Shared top nav: logo (left) | Alpha badge (center) | YouTube, X, account (right).
 * White background. Used on all pages except gameplay (court, set-lineup) and training screens.
 */
body.has-auth-bar {
  padding-top: 50px;
}

.auth-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  z-index: 9998;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Left: logo */
.auth-bar-left,
.auth-bar-spacer {
  display: flex;
  align-items: center;
}
.auth-bar .logo-link {
  display: block;
}
.auth-bar .logo {
  height: 40px;
  width: auto;
  display: block;
}

/* Center: Alpha badge – keep column width when badge hidden so right stays right */
.auth-bar .alpha-badge {
  justify-self: center;
  height: 44px;
  width: auto;
  position: static !important;
  top: auto !important;
  right: auto !important;
  grid-column: 2;
}
.auth-bar .alpha-badge.visible {
  display: block;
}
.auth-bar .alpha-badge:not(.visible) {
  display: none;
}

/* Right: icons + account – stick to right edge */
.auth-bar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  justify-self: end;
  grid-column: 3;
}

.auth-bar .nav-icon {
  color: #1a1a1a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.auth-bar .nav-icon svg {
  width: 24px;
  height: 24px;
}
.auth-bar .nav-icon:hover {
  color: #ff7a00;
}

.auth-bar .auth-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-bar .auth-link {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s;
}
.auth-bar .auth-link:hover {
  color: #ff7a00;
}

.auth-bar .auth-divider {
  color: #999;
  font-size: 14px;
}

.auth-bar .auth-email {
  color: #1a1a1a;
  font-size: 14px;
  margin-right: 8px;
}

.auth-bar .auth-logout-btn {
  background: transparent;
  border: 1px solid #ccc;
  color: #1a1a1a;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-bar .auth-logout-btn:hover {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
}