/* Shared navigation skin for the public site, profiles, native selector and games.
 * Layout and destinations stay with each page; controls retain outer clearance. */
:root {
  --ko-header-surface: #f5fff9;
  --ko-header-control: rgba(19, 77, 51, .06);
  --ko-header-hover: rgba(36, 205, 99, .14);
  --ko-header-border: rgba(19, 77, 51, .12);
  --ko-header-shadow: inset 0 -1px var(--ko-header-border), 0 3px 12px rgba(7, 36, 25, .08);
}
.site-header,
#app :is(#header, .game-header, .user-page__header, .mobile-landing__header) {
  background: var(--ko-header-surface);
  box-shadow: var(--ko-header-shadow);
  border: 0;
  border-radius: 0;
}
.site-header { width: 100%; margin: 0; padding: 0; color: navy; }
.site-header :is(.header-inner, .site-header__inner) {
  box-sizing: border-box;
  max-width: 1180px;
  margin: auto;
  padding: 12px clamp(16px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.site-header :is(.brand, .site-header__brand) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
}
.site-header :is(.header-actions, .site-header__nav) { margin-left: auto; }
.site-header .header-actions { display: flex; align-items: center; gap: 8px; }
.site-header .header-inner { flex-wrap: nowrap; gap: clamp(8px, 2vw, 16px); }
.site-header .brand { flex: 0 1 202px; min-width: 0; }
.site-header .brand img { display: block; width: 100%; height: auto; }
.site-header .header-actions { flex-shrink: 0; }
.site-header .header-profile { width: 44px; padding: 0; }
.site-header .header-link { gap: 8px; font-size: 14px; }
.site-header .site-header__nav ul { gap: 8px; }
.site-header :is(.header-link, .site-header__nav a),
#app .user-page__header > a:not(.user-page__home) {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ko-header-border);
  border-radius: 12px;
  background: var(--ko-header-control);
  color: navy;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .15s ease;
}
.site-header .site-header__nav a[aria-current="page"] { background: var(--ko-header-hover); color: navy; }
.site-header a:hover,
#app :is(.user-page__header a, .mobile-landing__user):hover { background: var(--ko-header-hover); text-decoration: none; }
.site-header a:focus-visible,
#app :is(.user-page__header a, .mobile-landing__user):focus-visible {
  outline: 3px solid navy;
  outline-offset: -3px;
  border-radius: 12px;
}
#app .user-page__header { flex-wrap: wrap; }
#app .user-page__header > a:not(.user-page__home) { margin-left: auto; }
#app .user-page__home { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; border-radius: 8px; }
#app .user-page__home img { width: min(210px, 40vw); height: auto; }
#app .mobile-landing__user { background: var(--ko-header-control); border-color: var(--ko-header-border); }
@media (prefers-reduced-motion: reduce) {
  .site-header a, #app :is(.user-page__header a, .mobile-landing__user) { transition: none; }
}