/* Shared touch navigation. Desktop keeps its existing layout. */
@media (max-width: 1099px) {
  :root {
    --nav-h: 64px; --nav-offset: var(--nav-h); --mnav-h: 66px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --mnav-space: calc(var(--mnav-h) + var(--safe-b)); --gutter: 24px;
  }
  html { scroll-padding-top: calc(var(--nav-h) + 16px); }
  body { padding-bottom: var(--mnav-space); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  :is(button, a, input, select, textarea) { touch-action: manipulation; }
  :is(input, textarea, select) { scroll-margin-block: 90px 140px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
  textarea, select { font-size: 16px !important; }
  :is(.btn,.pg-btn,.btn-ghost,.btn-shimmer,.auth2-submit,.pg-tabs > button,.pg-tabs > a) { min-height: 46px; }
  :is(.msheet__x,.co-close,.pdp-share,.p-followers__close) { min-width: 44px; min-height: 44px; }
  :is(button, a, input, select, textarea):focus-visible { outline-offset: 3px; }

  .nav .nav__inner, .nav--scrolled .nav__inner { height: var(--nav-h); min-height: var(--nav-h); padding-block: 0; flex-wrap: nowrap; gap: 12px; }
  .nav .nav__logo { flex: none; display: flex; align-items: center; }
  .nav .nav__logo img, .nav:has(.nav__actions--user) .nav__logo img { width: 66px; height: auto; }
  .nav .nav__games { display: none; }
  .nav .search, .nav .nav__games ~ .search { order: 0; flex: 1 1 0; flex-basis: 0; min-width: 0; height: 44px; padding: 0 13px; gap: 8px; }
  .nav .search__input { min-width: 0; width: 100%; font-size: 16px; }
  .nav .search__icon { width: 18px; height: 18px; flex: none; }
  .nav .search .fx-kbd { display: none; }
  .nav .nav__actions { flex: none; gap: 6px; margin-left: 0; }
  .nav .nav__actions > :not(.bell):not(.hd-lang) { display: none; }
  .nav .nav__actions > .hd-lang { display: inline-flex; gap: 0; padding: 2px; }
  .nav .hd-lang button { min-width: 40px; height: 40px; padding: 0 6px; font-size: 12px; }
  .nav .nav__actions .bell .hd-ico { width: 44px; height: 44px; }
  .nav .bell__panel {
    position: fixed; top: calc(var(--nav-h) + 6px); left: auto; right: 16px;
    width: min(420px, calc(100vw - 32px)); max-height: calc(var(--mobile-vh, 100dvh) - var(--nav-h) - var(--mnav-space) - 20px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav .bell__list { max-height: none; }
  .mnav {
    position: fixed; inset: auto 0 0; z-index: 800; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--mnav-space); padding: 0 max(8px, calc((100% - 760px)/2)) var(--safe-b);
    background: var(--bg-1); border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgb(0 0 0 / .12);
    transition: transform .2s ease, visibility .2s;
  }
  .mnav__i {
    position: relative; min-width: 0; min-height: 60px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 4px; padding-block: 6px; color: var(--txt-3);
    font: 600 11px/1.2 var(--font-body, inherit); text-decoration: none; user-select: none; -webkit-user-select: none;
  }
  .mnav__ico, .mnav__plus { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 10px; }
  .mnav__ico svg { width: 23px; height: 23px; }
  .mnav__i.is-active { color: var(--txt); }
  .mnav__i.is-active .mnav__ico { background: color-mix(in srgb, var(--acc) 17%, transparent); color: var(--acc); }
  .mnav__plus { background: var(--grad); color: white; }
  .mnav__plus svg { width: 22px; height: 22px; }
  .mnav__lbl { max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav__badge { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; display: grid; place-items: center; background: #E5484D; color: white; font-size: 11px; }
  .mnav__badge[hidden] { display: none; }
  html.kb-open .mnav { transform: translateY(110%); visibility: hidden; }
  html.kb-open body { padding-bottom: 0; }
  /* iOS may shrink only the visual viewport: anchor overlays above the keyboard. */
  html.kb-open :is(.msheet, .fx-dlg-overlay, .co-modal) {
    top: 0; bottom: auto; height: var(--mobile-vh, 100dvh);
    max-height: var(--mobile-vh, 100dvh); box-sizing: border-box;
  }
  .msheet__panel { max-height: calc(var(--mobile-vh, 100dvh) - 16px); }
  .fx-dlg { min-width: 0; max-height: calc(var(--mobile-vh, 100dvh) - 16px); overflow-y: auto; overscroll-behavior: contain; }
  .msheet__body { scroll-padding-bottom: 16px; }
  .msheet__title { line-height: 1.35; }
  .msheet__foot { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .fx-toasts, body .tp-toasts, body .cc { bottom: calc(var(--mnav-space) + 12px); }
  body .stf-dock, body .tp-me { bottom: calc(var(--mnav-space) + 8px); }
  body .stf-fab, body .stf-2fa { bottom: calc(var(--mnav-space) + 10px); }
  html.is-staff:root body { padding-bottom: calc(var(--mnav-space) + 70px); }
  html.kb-open .fx-toasts { bottom: 12px; }
  html.kb-open .stf-dock, html.kb-open .stf-fab { display: none; }
  .footer__bar { flex-wrap: wrap; gap: 16px; }
  .footer__col a, .footer__legal a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .msheet:not(.msheet--side) { align-items: center; }
  .msheet:not(.msheet--side) .msheet__panel { width: min(600px, calc(100% - 40px)); }
  .hd-menu--sheet .hd-menu__item { min-height: 48px; }
  .mnav__i { font-size: 12px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .nav .nav__inner { gap: 8px; width: calc(100% - 24px); }
  .nav .nav__logo img, .nav:has(.nav__actions--user) .nav__logo img { width: 56px; }
  .nav .search, .nav .nav__games ~ .search { padding-inline: 11px; }
  .nav .nav__actions--user > .hd-lang { display: none; }
  .nav .bell__panel { left: 12px; right: 12px; width: auto; }
  .msheet__panel { border-radius: 22px 22px 0 0; }
  .msheet__head { padding-inline: 18px 12px; }
  .msheet__body { padding-inline: 16px; }
  .co-modal__body { max-height: calc(var(--mobile-vh, 100dvh) - 12px); }
  .footer { padding-bottom: 20px; }
  .footer__links { column-gap: 20px; }
  .footer__col { min-width: 0; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .mnav, .msheet__panel, .msheet__back { transition: none; }
}
