/* Shared site-navigation contract. Game controls are styled by game-shell.css. */
.game-page-header {
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

/* Desktop: one quiet, clearly grouped row containing home, language and theme. */
nav#siteNav,
nav#scSiteNav {
  display: flex !important;
  position: static !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid var(--line, var(--line-strong, #d9dee8)) !important;
  border-radius: 12px !important;
  background: var(--panel, var(--surface, #fff)) !important;
  box-shadow: var(--shadow, var(--soft-shadow, 0 5px 18px rgba(20, 30, 50, .10))) !important;
}

nav#siteNav > a[href="../"],
nav#scSiteNav > a[href="../"] { order: 1; }
nav#siteNav > #languageBtn,
nav#scSiteNav > #languageBtn { order: 2; }
nav#siteNav > button:not(#languageBtn),
nav#scSiteNav > button:not(#languageBtn) { order: 3; }

.nav-toggle,
.site-menu-toggle,
.site-nav-toggle,
.sc-nav-toggle {
  display: none !important;
}

@media (max-width: 520px) {
  .wrap {
    width: 100% !important;
  }

  .nav-toggle,
  .site-menu-toggle,
  .site-nav-toggle,
  .sc-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  nav#siteNav,
  nav#scSiteNav {
    display: none !important;
    position: fixed !important;
    top: var(--site-nav-top, 58px) !important;
    right: var(--site-nav-right, 8px) !important;
    left: auto !important;
    z-index: 100 !important;
    width: min(230px, calc(100vw - 16px)) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: var(--panel, var(--surface, #fff)) !important;
    box-shadow: 0 16px 38px rgba(20, 30, 50, .20) !important;
  }

  nav#siteNav.open,
  nav#siteNav.is-open,
  nav#scSiteNav.open,
  nav#scSiteNav.is-open,
  .site-nav-shell.open nav#siteNav,
  .sc-site-shell.open nav#scSiteNav {
    display: flex !important;
  }

  nav#siteNav > *,
  nav#scSiteNav > * {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text, var(--ink, #202735)) !important;
    text-decoration: none !important;
    flex: 0 0 44px !important;
  }

  nav#siteNav > *:hover,
  nav#siteNav > *:focus-visible,
  nav#scSiteNav > *:hover,
  nav#scSiteNav > *:focus-visible {
    background: var(--panel-2, var(--surface-2, #f1f4f8)) !important;
  }

  nav#siteNav > *::after,
  nav#scSiteNav > *::after {
    content: attr(aria-label);
    overflow: hidden;
    font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
    letter-spacing: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  nav#siteNav > #languageBtn::after,
  nav#scSiteNav > #languageBtn::after {
    content: "Language";
  }
  html[lang="nl"] nav#siteNav > #languageBtn::after,
  html[lang="nl"] nav#scSiteNav > #languageBtn::after {
    content: "Taal";
  }
}