/* The game switcher.
 *
 * ONE component, identical markup and behaviour on every page including the
 * Flutter game shell. Before this, the site had two different navs: the static
 * pages listed "How to play" first with the games as plain grey links in the
 * middle, and the game page listed the games first in accent blue. Same site,
 * two answers to "where are the games", and neither told you which one you
 * were on or offered a way back to the main board except the logo.
 *
 * WHY A SWITCHER RATHER THAN LINKS IN A MENU
 *
 * Three blue links among four grey ones reads as "some of these are
 * highlighted, unclear why". Grouped in a bordered control with the current
 * one filled, the same four links read as "these are the games and you are
 * here", which is the question a player actually has. It also makes the main
 * board a peer of the others rather than an implicit home you get to via the
 * logo.
 *
 * THE TOKEN FALLBACKS ARE LOAD BEARING
 *
 * The static pages define --brand-*; the game shell defines the same palette
 * unprefixed because its CSS is inline and predates the shared theme. Rather
 * than rename either, each value here reads the prefixed name and falls back
 * to the bare one, so the identical stylesheet is correct in both.
 */

.gamenav {
  --gn-border:  var(--brand-border,  var(--border));
  --gn-muted:   var(--brand-muted,   var(--muted));
  --gn-accent:  var(--brand-accent,  var(--accent));
  --gn-surface: var(--brand-surface, var(--surface));
  --gn-bg:      var(--brand-bg,      var(--bg));

  display: flex;
  align-items: center;
  gap: 2px;
  /* Shrinks before the site links do, and scrolls inside itself rather than
     forcing the bar to a second row. Measured at 1000px on the 820px static
     header: brand 164 + switcher 406 + links 234 is 804 of 820, and the gaps
     tipped it over, so the links wrapped and the bar went from 59px to 78px.
     The switcher is the element that can absorb that, because it scrolls. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--gn-border);
  border-radius: 999px;
  background: var(--gn-surface);
  /* Scrolls rather than wraps. Four game names do not fit beside the wordmark
     on a phone, and a control that wraps to two rows stops reading as one
     control. Measured at 375px: the names need about 300px against 200px of
     free bar. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.gamenav::-webkit-scrollbar { display: none; }

.gamenav a {
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--gn-muted);
}
.gamenav a:hover,
.gamenav a:focus-visible {
  color: var(--gn-accent);
  background: color-mix(in srgb, var(--gn-accent) 12%, transparent);
}

/* The page you are on. aria-current is the styling hook AND the thing a screen
   reader announces, so the two cannot drift apart. */
.gamenav a[aria-current="page"] {
  background: var(--gn-accent);
  color: var(--gn-bg);
}
.gamenav a[aria-current="page"]:hover {
  background: var(--gn-accent);
  color: var(--gn-bg);
}

/* On a phone the switcher gets its OWN row.
 *
 * Sharing the row with the wordmark leaves it 137px of a 375px screen,
 * measured, which renders as a fragment of one pill that has to be scrolled
 * sideways to find anything. That is worse than the menu it replaced.
 *
 * A full-width second row is about 34px, and it is the row carrying the thing
 * this whole component exists to surface, so it is the right 34px to spend.
 * The type tightens just enough that all four fit at 375px without scrolling;
 * below that it still scrolls rather than wrapping, because a control that
 * wraps stops reading as one control. */
@media (max-width: 620px) {
  /* Bootstrap's .navbar-expand sets flex-wrap: nowrap, which is why the
     switcher stayed pinned beside the wordmark at 137px however wide it was
     told to be. The game shell's own bar already wraps, so this only has to
     undo Bootstrap on the static pages. */
  .navbar.navbar-expand { flex-wrap: wrap; }

  .gamenav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    justify-content: space-between;
  }
  .gamenav a { padding: 5px 8px; font-size: .78rem; }
}

/* The site links, behind one disclosure.
 *
 * WHY THEY ARE NOT INLINE ANY MORE
 *
 * The header bar is capped at 820px to line up with the content column, which
 * leaves 772px of usable width. Measured on 2026-09-08: the wordmark is 143,
 * the switcher 398 and four inline site links 249, which is 790 before gaps.
 * They have never fitted; the bar was simply wrapping to two rows, and on the
 * game page the taller header then sat on top of the boot text.
 *
 * Shrinking font sizes until it fits is a fix that breaks again at the next
 * font change or the fifth game. Putting the secondary links behind a
 * disclosure fits at any width, keeps the games always visible, which is the
 * point, and is identical on every page. The links stay in the DOM, so
 * crawlers and screen readers see them either way.
 */
.morenav {
  --mn-border: var(--brand-border, var(--border));
  --mn-muted:  var(--brand-muted,  var(--muted));
  --mn-accent: var(--brand-accent, var(--accent));
  --mn-bg:     var(--brand-bg,     var(--bg));
  position: relative;
  flex: 0 0 auto;
}
.morenav > summary {
  list-style: none;
  cursor: pointer;
  color: var(--mn-muted);
  font-size: .85rem;
  padding: 5px 12px;
  border: 1px solid var(--mn-border);
  border-radius: 999px;
  user-select: none;
  white-space: nowrap;
}
.morenav > summary::-webkit-details-marker { display: none; }
.morenav[open] > summary { color: var(--mn-accent); }

/* Absolute, so opening it never pushes the board down. */
.morenav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 170px;
  padding: 8px 12px;
  background: var(--mn-bg);
  border: 1px solid var(--mn-border);
  border-radius: 10px;
}
.morenav__panel a {
  color: var(--mn-muted);
  text-decoration: none;
  font-size: .95rem;
  padding: 6px 0;
}
.morenav__panel a:hover { color: var(--mn-accent); }