/* Шапка: тёмная полупрозрачная полоса с полем от краёв, слева знак, дальше
   жирное меню разделов. Наведение белит пункт и растит из середины золотую черту; у открытого раздела черта стоит. */

.site-nav {
  position: sticky;
  top: var(--page-gutter);
  z-index: 10;
  display: flex;
  align-items: stretch;
  height: var(--nav-height);
  margin: var(--page-gutter) var(--page-gutter) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  transition: background-color var(--speed) var(--ease);
  animation: site-nav-enter var(--speed-slow) var(--ease) both;
}

/* Прокрутили — шапка плотнеет. */
.site-nav.is-scrolled {
  background: var(--color-surface-strong);
}

/* Логотип крупнее полосы: чуть выше её верхнего края и свисает вниз шипом и потёками. */
.site-nav__logo {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: flex-start;
  padding: 0 var(--space-4);
}

/* Логотип держит свои пропорции: на узком экране шапка ужимала блок, и картинка сплющивалась (reset даёт
   картинкам max-width: 100%). */
.site-nav__logo-image {
  width: auto;
  max-width: none;
  height: var(--logo-height);
  margin-top: calc(var(--logo-lift) * -1);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
  transition: transform var(--speed) var(--ease);
}

.site-nav__logo:hover .site-nav__logo-image {
  transform: scale(1.04);
}

.site-nav__menu {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: 0 var(--space-3);
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--nav-size);
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}

/* Золотая черта под пунктом: растёт из середины. */
.site-nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  height: var(--accent-line);
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--speed) var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active {
  color: var(--color-text);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.site-nav__link:active {
  transform: translateY(1px);
}

.site-nav__link:focus-visible {
  outline: none;
}

/* «Скачать игру» (автор, 2026-09-26) — справа от всех разделов и не похожа на них: золотая плашка того же цвета, что
   черта под пунктом, светлая сверху и тёмная снизу, надпись тёмная прописными. */
.site-nav__download {
  display: flex;
  align-self: center;
  align-items: center;
  height: var(--control-height);
  margin-left: var(--space-2);
  padding: 0 var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--nav-size);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-on-accent);
  background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent) 45%, var(--color-accent-deep));
  border: 1px solid var(--color-accent-deep);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: filter var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}

.site-nav__download:hover,
.site-nav__download:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

.site-nav__download:active {
  transform: translateY(1px);
}

@keyframes site-nav-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Телефон: поля уже, чтобы логотип, меню и переключатель языка встали в одну строку и на 320 точках. Пункт «Главная»
   прячется — с ним и «Героями» строка не влезает, а на главную ведёт логотип. */
@media (max-width: 600px) {
  .site-nav__link--home {
    display: none;
  }

  .site-nav__logo {
    padding: 0 var(--space-2);
  }

  .site-nav__menu {
    padding: 0;
  }

  .site-nav__link {
    padding: 0 var(--space-2);
  }

  .site-nav__link::after {
    left: var(--space-2);
    right: var(--space-2);
  }
}

/* Узкое окно и телефон: логотип, разделы, «Скачать игру» и переключатель языка в одну строку не встают — меню уходит
   вторым рядом шапки, прижатое вправо: слева над ним свисает логотип. Первый ряд — логотип и язык; «Главная»
   прячется и здесь — на главную ведёт логотип, а с ней ряд залезал под логотип. Порог — ширина одной строки шапки:
   с «Боссами» (2026-09-30) по-русски ей нужно 1435 точек страницы, плюс полоса прокрутки окна 17 — 1460; прежние
   1200 уже с «Скачать игру» давали строку шире окна на 1280. С «Богиней Эурой» (2026-10-01) русской строке нужно 1586
   точек страницы (меню 1537 и поля 49), с полосой — 1603. С «Заданиями» (2026-10-04) — сумма детей шапки на 2400:
   русская 1662 (логотип 208, меню 1324, язык 130) и рамка 2 и поля 32 — 1696 точек страницы, с полосой — 1713;
   английской хватает 1646. Новый пункт меню — перемерить (сумма ширин детей `.site-nav` на широком окне). */
@media (max-width: 1713px) {
  .site-nav__link--home {
    display: none;
  }

  .site-nav {
    flex-wrap: wrap;
    height: auto;
  }

  .site-nav__logo,
  .lang-switch {
    height: var(--nav-height);
  }

  /* Второй ряд переносится: на телефоне пять разделов в одну строку не встают — «Таблица уровней» уходит ниже. */
  .site-nav__menu {
    order: 3;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    border-top: 1px solid var(--color-line);
  }

  .site-nav__menu > * {
    height: var(--nav-row-height);
  }

  /* Кнопка не липнет к краю шапки: справа и снизу — поле. */
  .site-nav__menu > .site-nav__download {
    height: var(--control-height);
    margin: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
  }
}

/* Окно шире телефона, шапка в два ряда: первый ряд меню не заходит под свисающий логотип (с «Заданиями», 2026-10-04,
   на 1100 «Герои» и «Боссы» легли под него) — слева поле шириной логотипа (картинка 4:3 и поля блока). */
@media (min-width: 601px) and (max-width: 1713px) {
  .site-nav__menu {
    padding-left: calc(var(--logo-height) * 4 / 3 + var(--space-4) * 2);
  }
}