/* === The site header ===
 *
 * Loaded by every page, marketing and play alike.
 *
 * It used to be styled twice: `header.site` / `nav.site` in styles.css for
 * the marketing pages, and a bare `header` / `nav` in css/game-shell.css for
 * the play pages. The two had drifted apart in six ways, container width,
 * background, link colour, brand size, link size and hover treatment. So
 * the site showed a visibly different nav depending on which page you were
 * on, even though both were generated from the same list of links.
 *
 * The bar is full bleed; its contents line up with the 1060px content
 * column, so the nav sits at the same edge as the page body beneath it.
 *
 * Custom properties are read with fallbacks: styles.css and game-shell.css
 * define overlapping but not identical palettes, and this file has to look
 * the same under either.
 */

/* The header sets its own box model and line height rather than inheriting
   them. game-shell.css applies `* { box-sizing: border-box }` and a body
   line-height; styles.css does neither, so the same rules produced an inner
   column 48px wider on the marketing pages and a header 5px shorter on a
   phone. */
.site-header,
.site-header * { box-sizing: border-box; }

.site-header {
  background: var(--panel, #121821);
  border-bottom: 1px solid var(--edge, #1f2b3d);
}

.site-header-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.site-header .brand {
  font-family: var(--font-display, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink, #e6edf3);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.site-header nav a {
  position: relative;
  display: inline-block;
  line-height: 1.5;
  font-family: var(--font-display, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink, #e6edf3);
}

.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--accent, #7ce7a2); }

/* Left-to-right underline reveal. The marketing pages had this and the play
   pages did not, which was one of the tells that they were different navs. */
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--accent, #7ce7a2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .site-header nav a::after { transition: none; }
}

/* The pixel face is much wider than Inter, so below 880px the nav drops
   back to the body face rather than wrapping into a mess. */
@media (max-width: 879px) {
  .site-header .brand { font-size: 12px; }
  /* An explicit stack, not `inherit`: styles.css and game-shell.css set
     different body fonts, so inheriting gave the two page types different
     nav typography at exactly the widths this rule exists to tidy up. */
  .site-header nav a {
    font-family: Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
  }
}

/* On a phone the wordmark alone fills the row, so stack. */
@media (max-width: 700px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px;
  }
  .site-header .brand { font-size: 11px; }
  .site-header nav { gap: 6px 16px; }
}