/* ==============================================================
   Phone / tablet header, menu and search (below 992px).
   Header bar: logo · search · menu, as square outlined buttons.
   Menu (templates/mobile-menu.html, mobile-nav.js): side sheet from
   the right with icon rows, expandable Blog / Campaign, language chips
   and Discord / Download. Search: the header flyout as a strip under
   the header, results in one column.
   ============================================================== */
.mnav { display: none; }

@media (max-width: 991px) {
  html.mnav-open, html.mnav-open body { overflow: hidden; }

  /* ---------- header bar ---------- */
  #header .vs-header__right { gap: 8px; }
  #header .sideMenuToggler { display: none !important; }
  #header .searchBoxTggler,
  .mnav-toggle { position: relative; display: grid !important; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--title-color); background: rgba(5, 10, 9, 0.5); border: 1px solid rgba(246, 245, 245, 0.2); transition: border-color .2s, background-color .2s; }
  #header .searchBoxTggler svg { width: 17px; height: 17px; }
  #header .search-flyout-wrap.is-open .searchBoxTggler,
  .mnav-toggle.is-open { border-color: var(--vs-theme-color2); background: rgba(84, 184, 147, 0.12); }
  .mnav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .3s, top .3s, right .3s; }
  .mnav-toggle span:first-child { top: 15px; }
  .mnav-toggle span:last-child { top: 24px; right: 17px; }
  .mnav-toggle.is-open span:first-child { top: 19px; transform: rotate(45deg); }
  .mnav-toggle.is-open span:last-child { top: 19px; right: 11px; transform: rotate(-45deg); }
  #header .vs-sticky-header.sticky { padding: 10px 0; background: rgba(5, 10, 9, 0.9); }

  /* ---------- search: strip under the header ---------- */
  #header .search-flyout { position: fixed; top: var(--search-flyout-top, 72px); left: 10px; right: 10px; width: auto; max-height: calc(100vh - var(--search-flyout-top, 72px) - 20px); padding: 12px; }
  #header .search-flyout__input { height: 46px; font-size: 1rem; }
  #header .search-flyout__submit { width: 46px; height: 46px; }
  #header .search-flyout__results,
  #header .nav-empty { grid-template-columns: 1fr; }
  #header .search-flyout__foot { display: none; }

  /* ---------- menu: side sheet ---------- */
  .mnav { display: block; position: fixed; inset: 0; z-index: 1001; pointer-events: none; }
  .mnav.is-open { pointer-events: auto; }
  .mnav__scrim { position: absolute; inset: 0; background: rgba(3, 6, 5, 0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
  .mnav.is-open .mnav__scrim { opacity: 1; }
  .mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(86vw, 380px); overflow-y: auto; background: #070d0c; border-left: 1px solid rgba(84, 184, 147, 0.3); transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s; }
  .mnav.is-open .mnav__panel { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
  .mnav__logo { width: 130px; }
  .mnav__close { position: relative; width: 42px; height: 42px; background: none; border: 1px solid rgba(246, 245, 245, 0.2); }
  .mnav__close::before, .mnav__close::after { content: ""; position: absolute; left: 11px; right: 11px; top: 19px; height: 2px; background: var(--title-color); transform: rotate(45deg); }
  .mnav__close::after { transform: rotate(-45deg); }
  .mnav__list { margin: 0; padding: 0 16px; list-style: none; }
  .mnav__item { border-bottom: 1px solid rgba(246, 245, 245, 0.08); }
  .mnav__row { display: flex; align-items: stretch; }
  .mnav__link { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 0; font-family: var(--title-font); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--title-color); }
  .mnav__link:hover { color: var(--title-color); }
  .mnav__icon { color: var(--vs-theme-color2); }
  .mnav__icon svg { display: block; width: 22px; height: 22px; }
  .mnav__item.is-current .mnav__link { padding-left: 14px; box-shadow: inset 3px 0 0 var(--vs-theme-color2); }
  .mnav__item.is-current .mnav__label { color: #fff; text-shadow: 0 0 14px rgba(84, 184, 147, 0.6); }
  .mnav__expand { position: relative; width: 52px; background: none; border: 0; border-left: 1px solid rgba(246, 245, 245, 0.08); }
  .mnav__expand::before, .mnav__expand::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--vs-theme-color2); transition: transform .25s; }
  .mnav__expand::after { transform: rotate(90deg); }
  .mnav__item.is-expanded .mnav__expand::after { transform: rotate(0); }
  .mnav__sub { display: grid; gap: 6px; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s; }
  .mnav__item.is-expanded .mnav__sub { max-height: 520px; padding: 0 0 14px; }
  .mnav__subitem { display: flex; align-items: center; gap: 12px; padding: 8px; background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.06); }
  .mnav__subitem img { flex: none; width: 72px; height: 40px; object-fit: cover; }
  .mnav__subitem b { display: block; font-family: var(--title-font); font-size: 0.78rem; text-transform: uppercase; color: var(--title-color); }
  .mnav__subitem small { display: block; font-size: 0.74rem; color: var(--text-color4); }
  .mnav__subitem.is-all b { color: var(--vs-theme-color2); }
  .mnav__foot { display: grid; gap: 12px; margin-top: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .mnav__langs { display: flex; flex-wrap: wrap; gap: 6px; }
  .mnav__lang { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; color: var(--text-color1); background: rgba(8, 17, 15, 0.9); border: 1px solid rgba(246, 245, 245, 0.12); }
  .mnav__lang img { width: 16px; height: 11px; }
  .mnav__lang.is-on { color: #8affd4; border-color: var(--vs-theme-color2); background: rgba(84, 184, 147, 0.12); }
  .mnav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mnav__cta a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; font-family: var(--title-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  .mnav__discord { color: var(--title-color); border: 1px solid rgba(246, 245, 245, 0.2); }
  .mnav__download { color: #050a09; background: var(--vs-theme-color2); }
  .mnav__download:hover { color: #050a09; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav__panel, .mnav__scrim, .mnav__sub { transition: none !important; }
}