/* The studio's game bar, the thin strip at the top of every page on bigoathgames.com: "Big Oath Games"
   and a tab per game, the current one lit in that game's colour. Each game keeps its own look below
   it, so the bar stays neutral and brings its own font. To add a game, add an <li> to the bar in
   every page (see docs/website.md) and give its link a --accent below. */

:root {
  --gamebar-h: 40px;
}

.gamebar {
  position: relative;
  z-index: 20;
  height: var(--gamebar-h);
  background: #0b0b0c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
  color: #9d9da6;
}
.gamebar-in {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: min(1160px, 100% - 32px);
  height: 100%;
  margin-inline: auto;
}
.gamebar-studio {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6f78;
}
.gamebar ul {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.gamebar ul::-webkit-scrollbar {
  display: none;
}
.gamebar a {
  --accent: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}
.gamebar a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.gamebar a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 6px;
}
.gamebar a[aria-current] {
  color: #ffffff;
}
.gamebar a[aria-current]::after {
  content: "";
  position: absolute;
  inset: auto 8px 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
.gamebar img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.gamebar a:hover img,
.gamebar a[aria-current] img {
  opacity: 1;
}

/* each game's own colour, for its tab's underline and focus ring */
.gamebar .g-battle-oath {
  --accent: #ffd23f;
}
.gamebar .g-asteroids-siege {
  --accent: #4ed971;
}

@media (max-width: 560px) {
  .gamebar-studio {
    display: none;
  }
  .gamebar-in {
    justify-content: center;
  }
}
@media (max-width: 370px) {
  .gamebar-in {
    width: 100%;
  }
  .gamebar a {
    gap: 6px;
    padding: 0 9px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gamebar a,
  .gamebar img {
    transition: none;
  }
}