/* PHNX Games shared banner.
 * Loaded cross-origin from games.phnx.host into wordle, 2048, and hub.
 * Variables fall back to brand palette if hosting page hasn't defined them.
 */
.phnx-games-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--plum, #77161C);
  color: var(--cream, #F5EEE5);
  font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  box-shadow: 0 2px 8px rgba(3, 5, 25, 0.18);
}

.phnx-games-banner .brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.phnx-games-banner .links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.phnx-games-banner .links::-webkit-scrollbar { display: none; }
.phnx-games-banner .links a { white-space: nowrap; }

.phnx-games-banner .links a {
  color: rgba(245, 238, 229, 0.78);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}

.phnx-games-banner .links a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--cream, #F5EEE5);
}

.phnx-games-banner .links a[aria-current="page"] {
  background: var(--mustard, #FBD652);
  color: var(--rich-black, #030519);
}