/* Адаптив для всех трёх частей выше: три точки перелома.
   Часть v3/header.css; порядок частей важен — см. static/README.md. */
/* ─── Адаптив: все три раздела выше ───────────────────────────────────── */
@media (min-width: 901px) {
  /* Height starts at 0 (closed); open state animates to the JS-measured value */
  .site-header__surface {
    height: 0;
    transition:
      height var(--motion-dur-panel) var(--motion-ease-in),
      display var(--motion-dur-panel) allow-discrete;
  }

  .site-header[data-open="true"] .site-header__surface {
    height: var(--site-header-surface-height, 0);
    transition:
      height var(--motion-dur-panel) var(--motion-ease),
      display var(--motion-dur-panel) allow-discrete;
  }

  @starting-style {
    .site-header[data-open="true"] .site-header__surface {
      height: 0;
    }
  }

  .site-header__nav {
    display: flex;
  }

  [data-site-menu-toggle] {
    pointer-events: none;
  }

  .site-menu.is-single-scope [data-site-menu-grid] {
    grid-template-columns: minmax(320px, 560px);
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .site-header {
    --site-header-bar-height: 46px;
    --site-header-mobile-panel-clearance: calc(var(--quick-bar-safe-reserve) + 8px);
    --site-header-search-results-clearance: calc(var(--site-header-mobile-panel-clearance) + 10px);
  }

  .site-menu,
  #site-menu {
    --site-menu-columns-gap-mobile: var(--control-padding-x-wide);
    --site-menu-title-gap-mobile: var(--control-gap-base);
    --site-menu-title-padding-mobile: 0 var(--control-gap-2xs);
    --site-menu-list-offset-mobile: var(--control-gap-tight);
    --site-menu-link-padding-mobile: var(--control-gap-loose) var(--control-padding-x-wide);
  }

  .site-header__inner {
    min-height: 46px;
    height: 46px;
    padding: 0 10px;
  }

  .site-header__brand {
    min-height: 42px;
    padding: 0 8px;
  }

  .site-header__actions {
    margin-right: var(--control-gap-base);
  }

  .site-header__game-progress {
    min-width: 0;
    min-height: var(--site-header-game-progress-height-mobile);
    padding: var(--site-header-game-progress-padding-mobile);
  }

  .site-header__trigger--icon {
    --button-icon-box-size: var(--header-control-size);
  }

  .site-header__surface {
    top: var(--site-header-bar-height);
    height: auto;
    max-height: calc(var(--visual-viewport-height, 100dvh) - var(--site-header-bar-height));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /*
    Mobile panel animation. The desktop surface uses `display: none ↔ block`
    (no transition possible). On mobile we keep it permanently in the layout
    and fade + slide it in/out — same motion tokens as `.site-header__backdrop`
    and `.blackout` so all overlays stay in lockstep. The base `display: none`
    from the desktop rule is overridden here.
  */
  .site-header__surface {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--header-panel-slide-distance) * -1));
    transition:
      opacity var(--header-panel-close-duration) var(--motion-ease),
      transform var(--header-panel-close-duration) var(--motion-ease),
      visibility var(--header-panel-close-duration) var(--motion-ease);
    will-change: opacity, transform;
  }

  .site-header[data-open="true"] .site-header__surface {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-duration:
      var(--header-panel-open-duration),
      var(--header-panel-open-duration),
      var(--header-panel-open-duration);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__surface {
      transform: none;
      transition: none;
    }
  }

  /*
    Search panel: the suggestions dropdown is `position: absolute` inside the
    `.search-form`, so it doesn't contribute to the surface's content height.
    On mobile, with `overflow-y: auto`, the surface collapses to the form
    height (~80px) and the dropdown gets trapped behind a tiny scroll region.
    Let overflow be visible here so the dropdown renders below the surface's
    natural bounds. The dropdown has its own background, border, and a capped
    `max-height` (`--site-header-search-results-clearance`), so it stays
    within the viewport.
  */
  .site-header__surface[data-open-panel="search"] {
    overflow: visible;
  }

  .site-header__panel {
    padding: var(--control-gap-wide) var(--control-padding-x-compact) max(16px, env(safe-area-inset-bottom));
  }

  .site-header .language-switcher {
    --segmented-control-width: 104px;
    --segmented-control-min-width: 104px;
    --segmented-control-height: 32px;
    --segmented-control-padding: var(--site-header-language-switcher-padding-mobile);
    --segmented-control-option-padding: 0 8px;
  }

  .site-header .language-label-full {
    display: none;
  }

  .site-header .language-label-short {
    display: inline;
    font-size: var(--font-size-xs);
    line-height: var(--type-control-line);
  }

  [data-site-menu-grid] {
    grid-template-columns: 1fr;
    gap: var(--site-menu-columns-gap-mobile);
  }

  [data-site-menu-title] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-menu-title-gap-mobile);
    min-height: 44px;
    margin: 0;
    padding: var(--site-menu-title-padding-mobile);
    font-size: var(--font-size-sm);
    letter-spacing: var(--hierarchy-status-track);
    cursor: pointer;
  }

  [data-site-menu-title]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  [data-site-menu-group][data-open="true"] [data-site-menu-title]::after {
    transform: rotate(225deg);
  }

  /* Меню: анимированное раскрытие/скрытие через fade+slide.
     allow-discrete позволяет transition на display:none↔grid.
     @starting-style задаёт начальное состояние при появлении. */
  [data-site-menu-list] {
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity    160ms ease,
      transform  160ms ease,
      display    160ms allow-discrete,
      margin-top 160ms ease;
  }

  [data-site-menu-group][data-open="true"] [data-site-menu-list] {
    display: grid;
    margin-top: var(--site-menu-list-offset-mobile);
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity    240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform  240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      display    240ms allow-discrete,
      margin-top 200ms ease;
  }

  @starting-style {
    [data-site-menu-group][data-open="true"] [data-site-menu-list] {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  .site-menu .menu-button {
    --menu-button-min-height: 44px;
    --menu-button-padding: var(--site-menu-link-padding-mobile);
    --menu-button-font-size: var(--site-header-menu-link-size-mobile);
  }
}

@media (max-width: 640px) {
  .site-header {
    --site-header-bar-height: 42px;
    --site-header-mobile-panel-clearance: calc(var(--quick-bar-safe-reserve) + 6px);
    --site-header-search-results-clearance: calc(var(--site-header-mobile-panel-clearance) + 8px);
    --search-bar-height: 52px;
    --search-action-size: 36px;
    --search-selector-width: 84px;
    --search-input-font-size: var(--site-header-search-input-font-size-mobile);
    --search-action-icon-size: 16px;
    --search-language-font-size: var(--site-header-search-language-font-size-mobile);
  }

  .site-header__inner {
    min-height: 42px;
    height: 42px;
    /* Respect iPhone notch/Dynamic Island in landscape */
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  }

  .site-header__icon {
    width: 18px;
    height: 18px;
  }

  /* Touch target: 36px box fits 42px bar; 16px icon is readable without crowding */
  .site-header__trigger--icon {
    --button-icon-box-size: 36px;
    --button-icon-size: 16px;
  }

  .site-header__actions {
    gap: var(--control-gap-2xs);
    margin-right: 0;
  }

  .site-header__logo {
    --site-header-logo-height: max(20px, calc(var(--site-header-bar-height) - 14px));
  }

  .site-header__logo-mark--full {
    display: none;
  }

  .site-header__logo-mark--mini {
    display: block;
  }

  .site-header .language-button {
    font-size: var(--site-header-language-button-size-mobile);
  }

  .site-header .language-switcher {
    --segmented-control-width: 116px;
    --segmented-control-min-width: 116px;
    --segmented-control-height: 30px;
    --segmented-control-padding: var(--site-header-language-switcher-padding-mobile);
    --segmented-control-option-padding: 0 8px;
    /* Абсолютное центрирование как на desktop: без search/account в шапке нет конфликта */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex: none;
  }

  .site-header__panel {
    padding: var(--control-gap-wide) var(--control-padding-x-mobile) max(16px, env(safe-area-inset-bottom));
  }

  /* Allow prefs row to wrap on very narrow phones */
  .site-menu__prefs {
    flex-wrap: wrap;
    row-gap: var(--control-gap-base);
  }

  .site-menu__prefs-label {
    flex: 0 0 100%;
  }

  .site-menu__prefs-theme {
    margin-left: auto;
  }

  .quick-bar.quick-bar--floating {
    width: auto;
    right: auto;
    left: 50%;
    --quick-bar-bottom-offset: 8px;
    bottom: max(var(--quick-bar-bottom-offset), env(safe-area-inset-bottom));
    transform: translate3d(-50%, 0, 0);
  }

  .quick-bar__shell {
    width: auto;
    justify-content: center;
    margin: 0;
  }

  /* ── Убираем search + account из шапки: переедут в панель меню ── */
  #site-header-search-trigger,
  #site-header-account-trigger {
    display: none;
  }

  /* ── iOS spring-анимация для мобильной панели ───────────────────
     backdrop-filter на .site-header создаёт containing block для
     fixed-потомков (WebKit/Blink), поэтому position:fixed(bottom)
     не работает ожидаемо. Оставляем position:absolute(top), но
     заменяем кривую на iOS UIKit spring и увеличиваем slide.
     Открытие: cubic-bezier(0.32, 0.72, 0, 1) — «живая» пружина.
     Закрытие:  cubic-bezier(0.4, 0, 1, 1) — резкий уход.           */
  .site-header__surface {
    border-radius: var(--surface-radius);
    transform: translateY(-20px);
    transition:
      opacity var(--header-panel-close-duration) var(--motion-ease),
      transform 200ms cubic-bezier(0.4, 0, 1, 1),
      visibility var(--header-panel-close-duration) var(--motion-ease);
  }

  .site-header[data-open="true"] .site-header__surface {
    transform: translateY(0);
    transition:
      opacity var(--header-panel-open-duration) var(--motion-ease),
      transform 460ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s;
  }

  /* ── Мобильные quick-actions (поиск + аккаунт) в меню ─────────── */
  .site-menu__mobile-actions {
    display: flex;
    gap: var(--control-gap-base);
    padding: var(--control-gap-base) 0 var(--control-gap-wide);
    border-bottom: 1px solid var(--theme-border-subtle);
    margin-bottom: var(--control-gap-base);
  }

  .site-menu__mobile-actions .app-button {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

}