/* The header every FRAGLITE page shares - the site pages (about, how to play, maps, FAQ)
   and the league - so moving between them feels like one site. Markup: tools/build_site.py
   (header()) and site/league/index.html. */
.site-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  padding: 14px 24px; border-bottom: 1px solid rgba(102, 148, 230, 0.45);
  background: rgba(11, 17, 32, 0.92); backdrop-filter: blur(6px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;
}
.site-brand {
  font-size: 26px; font-weight: 800; font-style: italic; letter-spacing: 3px; line-height: 1.2; text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, #c9d6f2 45%, #6a7a9c 55%, #e6eeff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-brand:hover { text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.site-nav a, .site-nav .who {
  color: #dfe8ff; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.site-nav a:hover { color: #ffb54d; text-decoration: none; }
.site-nav a[aria-current] { color: #ff9e1f; }
.site-nav .who { color: #9aa9c4; text-transform: none; letter-spacing: 0; font-size: 14px; }
.site-nav .who a { text-transform: none; letter-spacing: 0; font-size: 14px; color: #ffb54d; }
.site-nav a.site-play {
  background: #ff9e1f; color: #140a00; padding: 7px 16px; border-radius: 3px; font-weight: 700;
}
.site-nav a.site-play:hover { background: #ffb54d; color: #140a00; }
@media (max-width: 600px) {
  .site-top { padding: 10px 16px; }
  .site-brand { font-size: 22px; }
}