/* The shared page chrome: one header component for every surface on this origin, written on the
   --ig-* tokens (load web/lobby/tokens.css first — nothing here names a colour of its own).
   Promoted verbatim from the two surfaces that already had a header: the leaderboard's
   .topbar, .wordmark, .home-link and its identity/button classes (web/shell/src/styles.css) and
   astroball.io's sticky-nav links (plans/SHELL_PLAN.md Stage 1).

   NOT in the lobby's file lists (ship.sh LOBBY_FILES / tools/sync-lobby.sh): a game page builds
   its header inside lobby.js and never loads this. astroball.io links it directly (ship.sh copies
   it into dist/astroball-home/ next to tokens.css); the React surfaces adopt it with <SiteHeader>
   in Stage 1's later chunk, which is why classes it does not use yet are already here.

   Standing rule (Jordan): nothing in this file may skew, tilt or rotate. Flat, front-on only. */

/* A three-column grid rather than space-between, because only a grid keeps the wordmark centred
   on the PAGE instead of on whatever gap the two side items happen to leave — the account chip
   changes width when it goes from "Sign in" to a display name, and space-between would slide the
   title every time somebody signed in. Equal 1fr shoulders, auto middle. */
.ig-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.ig-wordmark {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-family: var(--ig-display);
  font-weight: 900;
  /* The lobby's --lobby-title-size, verbatim, so every header is the same size at every
     breakpoint. */
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 0 26px rgba(163, 75, 255, 0.55);
}

/* The HOME pill, matching the lobby's `.lobby-home` — same height, radius, hairline, tracking
   and caps. Skin only; the topbar below places it. */
.ig-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ig-edge);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ig-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ig-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

/* A plain way off the page (astroball.io's sticky nav). No font-family of its own: it inherits
   the surface's body face, which is Space Grotesk there and the system stack elsewhere. */
.ig-nav-link {
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.08em;
  color: #c9bdf5;
  text-decoration: none;
  white-space: nowrap;
}

.ig-nav-link:hover {
  color: var(--ig-ink);
}

.ig-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ig-account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ig-card);
  border: 1px solid var(--ig-edge);
  border-radius: 999px;
  padding: 7px 8px 7px 14px;
  max-width: 100%;
}

.ig-account-name {
  font-family: var(--ig-display);
  font-weight: 700;
  font-size: 13px;
  /* Names are capped at 16 chars server-side, but a 16-char Unbounded string is wide — clip
     rather than let the chip push the wordmark onto its own line. */
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The pill and the identity take the topbar's two shoulders. */
.ig-topbar .ig-pill {
  grid-column: 1;
  justify-self: start;
}

.ig-topbar .ig-account {
  grid-column: 3;
  justify-self: end;
}

.ig-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--ig-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ig-cta-ink);
  background: linear-gradient(100deg, var(--ig-cta-grad-a), var(--ig-cta-grad-b));
  cursor: pointer;
  transition: filter 0.16s ease, opacity 0.16s ease;
}

.ig-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.ig-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.ig-btn-quiet {
  background: transparent;
  border: 1px solid var(--ig-edge);
  color: var(--ig-ink-dim);
  padding: 8px 14px;
  font-weight: 700;
}

.ig-btn-quiet:hover:not(:disabled) {
  color: var(--ig-ink);
  border-color: color-mix(in srgb, var(--ig-accent) 55%, transparent);
  filter: none;
}

/* Below the lobby's own 760px header breakpoint the three-up row stops fitting: the wordmark
   takes its own line, with the pill and identity shoulders above it. */
@media (max-width: 759px) {
  .ig-topbar {
    grid-template-columns: auto 1fr;
  }

  .ig-wordmark {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}