/* ═════════════════════════════════════════════════════════════════════════
   mobile-menu.css — переиспользуемые стили для гамбургера + slide-in меню.
   Извлечено из dj.css (originally lines 312-326, 969-1122).
   Подключается на всех страницах, где есть <header> с .menu-btn и
   <nav class="mobile-menu">.

   ── Ревизия 2026-10 ────────────────────────────────────────────────────
   • Профиль-блок сверху: аватар + email + баланс MUNM
   • 4 навигационные плашки с SVG-иконками (mask-image)
   • Segmented-тоглер EN/RU
   • Единая кнопка Login/Logout
   • Переопределение nav a[aria-current]:after из styles.css
   • Backdrop светлее + blur мягче
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Header floater (появляется когда header collapsed) ─── */
.header-floater{
  position:fixed;top:12px;right:12px;
  width:40px;height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#47317488,#8d42bb55);
  border:1px solid #b393ff;
  display:none;place-items:center;
  cursor:pointer;z-index:100;
  color:#fff;font-size:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.4),inset 0 0 10px rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .15s,box-shadow .15s;
}
.header-floater:hover{transform:scale(1.08);box-shadow:0 4px 26px rgba(0,0,0,.5)}
body.header-collapsed .header-floater{display:grid}

/* ─── Menu button (hamburger) — по умолчанию скрыт (desktop) ─── */
.menu-btn{
  display:none;
  background:transparent;border:0;
  width:36px;height:36px;
  padding:8px;cursor:pointer;
  position:relative;
  flex-shrink:0;
}
.menu-btn-line{
  display:block;
  height:1.5px;
  width:100%;
  background:#e5d7ff;
  margin:4px 0;
  border-radius:1px;
  transition:transform .22s,opacity .18s;
}
.menu-btn[aria-expanded="true"] .menu-btn-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn-line:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ─── Backdrop + menu — базово скрыты (desktop) ─── */
.mobile-menu-backdrop{display:none}
.mobile-menu{display:none}

/* ═════════════════════════════════════════════════════════════════════════
   Mobile (≤ 1000px) — hamburger visible, menu is a slide-in overlay
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px){

  /* Header: скрываем nav / account / collapse-btn — оставляем brand + hamburger */
  header .brand small,
  header nav,
  header .account,
  header .header-collapse-btn{display:none !important}

  .header-floater{display:none !important}

  .menu-btn{display:block}

  .mobile-menu-backdrop{
    display:block;
    position:fixed;inset:0;
    background:rgba(3,2,15,.42);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;
    z-index:200;
    transition:opacity .22s ease-out;
    pointer-events:none;
  }
  .mobile-menu-backdrop[hidden]{display:none !important}
  .mobile-menu-backdrop.open{opacity:1;pointer-events:auto}

  .mobile-menu{
    display:flex;
    flex-direction:column;
    position:fixed;top:0;right:0;bottom:0;
    width:min(340px,88vw);
    background:linear-gradient(155deg,rgba(20,15,50,.97),rgba(10,8,30,.985));
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-left:1px solid #3a2b64;
    box-shadow:-8px 0 40px rgba(0,0,0,.5);
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:210;
    padding:20px 20px 22px;
  }
  .mobile-menu[hidden]{display:none !important}
  .mobile-menu.open{transform:translateX(0)}

  /* ─── Header (brand + swipe hint) ──────────────────────────────────── */
    .mobile-menu-header{
    display:flex;
    justify-content:center;      /* ← было space-between, теперь по центру */
    align-items:center;
    margin-bottom:16px;
    padding-bottom:12px;
    padding-right:56px;          /* резерв справа под absolute-кнопку «>» */
    padding-left:56px;           /* симметричный резерв слева — иначе центр уедет */
    border-bottom:1px solid #251b40;
  }
  
    /* Кнопка «>» — закрыть меню */
  
  
    /* Кнопка «>» — абсолютно в правом верхнем углу меню */
  .mobile-menu-close{
    position:absolute;
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid #3a2b64;
    border-radius:50%;
    background:rgba(15,10,35,.7);
    color:#eabaff;
    cursor:pointer;
    z-index:2;
    transition:all .18s;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-close:hover,
  .mobile-menu-close:focus-visible{
    border-color:#cf75f3;
    color:#fff;
    background:rgba(141,66,187,.45);
    box-shadow:0 0 14px rgba(217,78,255,.35);
  }
  .mobile-menu-close:active{
    transform:scale(.94);
  }
  .mobile-menu-close svg{
    display:block;
    margin-left:1px;   /* визуальная центровка шеврона */
  }
  
  
  .mobile-menu-close:hover,
  .mobile-menu-close:focus-visible{
    border-color:#cf75f3;
    color:#fff;
    background:rgba(141,66,187,.35);
    box-shadow:0 0 14px rgba(217,78,255,.35);
  }
  .mobile-menu-close:active{
    transform:scale(.94);
  }
  .mobile-menu-close svg{
    display:block;
    margin-left:1px;   /* визуальная центровка шеврона */
  }
  
  
  
  
  .mobile-menu-brand{
    font-size:23px;              /* было 18px → +28% */
    font-weight:600;
    letter-spacing:2px;
    color:#eabaff;
    text-shadow:0 0 8px rgba(217,78,255,.35);
  }
  .mobile-menu-hint{
    font-size:11px;color:#a89bd0;letter-spacing:.6px;
  }

  /* ─── Профиль-блок: аватар + email + баланс ────────────────────────── */
    .mobile-menu-profile{
    display:flex;align-items:center;gap:12px;
    padding:12px 12px;
    margin-bottom:18px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(217,78,255,.10),rgba(42,207,241,.06));
    border:1px solid rgba(217,78,255,.22);
    text-decoration:none;
    color:inherit;
    transition:background .18s,border-color .18s,transform .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-profile:hover,
  .mobile-menu-profile:focus-visible{
    border-color:rgba(217,78,255,.5);
    background:linear-gradient(135deg,rgba(217,78,255,.18),rgba(42,207,241,.10));
  }
  .mobile-menu-profile:active{
    transform:scale(.99);
  }
  /* Гость — блок полностью скрыт (не рендерим пустые «—» и «0») */
  .mobile-menu-profile[data-state="guest"]{display:none}
  
  .mobile-menu-avatar{
    width:46px;height:46px;flex-shrink:0;
    border-radius:50%;
    display:grid;place-items:center;
    font-size:17px;font-weight:700;letter-spacing:.5px;
    color:#fff;
    background:linear-gradient(135deg,#6a1aa0 0%,#28cff1 100%);
    box-shadow:0 0 18px rgba(217,78,255,.28);
    overflow:hidden;
  }
  .mobile-menu-avatar img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .mobile-menu-identity{min-width:0;flex:1}
  .mobile-menu-email{
    font-size:13px;color:#e8e2ff;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    margin-bottom:2px;
  }
  .mobile-menu-balance{
    display:flex;align-items:baseline;gap:5px;
    font-size:13px;
  }
  .mobile-menu-balance-amount{
    font-weight:700;
    background:linear-gradient(100deg,#e04bff 0%,#6a9bff 50%,#2bb6ff 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    font-variant-numeric:tabular-nums;
  }
  .mobile-menu-balance-unit{
    font-size:10px;letter-spacing:1.5px;color:#a89bd0;
  }
  /* Если не залогинен — блок компактнее, без баланса */
  .mobile-menu-profile[data-state="guest"] .mobile-menu-balance{display:none}

  /* ─── Навигация — 4 плашки с иконками ──────────────────────────────── */
  .mobile-menu-list{
    list-style:none;margin:0;padding:0;
    flex:1;
    display:flex;flex-direction:column;gap:6px;
  }
  .mobile-menu-list li{
    opacity:0;
    transform:translateX(20px);
  }
  .mobile-menu.open .mobile-menu-list li{
    animation:menuStagger .3s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:calc(80ms + var(--i) * 40ms);
  }
  @keyframes menuStagger{
    to{opacity:1;transform:translateX(0)}
  }

  .mobile-menu-list a{
    display:flex;align-items:center;gap:12px;
    padding:13px 14px;
    color:#e5d7ff;
    text-decoration:none;
    font-size:15px;
    letter-spacing:.4px;
    border-radius:12px;
    border:1px solid transparent;
    transition:background .15s,color .15s,border-color .15s,transform .12s;
    position:relative;
  }
  /* Переопределяем подчёркивание из styles.css (nav a[aria-current]:after).
     У .mobile-menu-list <a> тоже есть aria-current, и глобальное правило
     рисует pink-полоску снизу — на плашках это лишнее. */
  .mobile-menu-list a[aria-current]::after{content:none !important}

  .mobile-menu-list a:active{
    transform:scale(.985);
  }
  .mobile-menu-list a:hover{
    background:rgba(139,66,187,.10);
  }
  .mobile-menu-list a[aria-current="page"]{
    background:linear-gradient(135deg,rgba(141,66,187,.32),rgba(106,47,153,.36));
    border-color:rgba(217,78,255,.35);
    color:#f8dcff;
  }

  /* ─── Иконки: mask-image + currentColor → перекрашиваются автоматически */
  .mobile-menu-list a::before{
    content:'';
    width:22px;height:22px;flex-shrink:0;
    background-color:currentColor;
    -webkit-mask-position:center;
            mask-position:center;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    -webkit-mask-size:contain;
            mask-size:contain;
    opacity:.9;
  }
  .mobile-menu-list a[data-icon="main"]::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 10v10h5v-6h4v6h5V10'/></svg>");
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 10v10h5v-6h4v6h5V10'/></svg>");
  }
  .mobile-menu-list a[data-icon="radio"]::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M7.8 7.8a6 6 0 0 0 0 8.4'/><path d='M16.2 7.8a6 6 0 0 1 0 8.4'/><path d='M4.9 4.9a10 10 0 0 0 0 14.2'/><path d='M19.1 4.9a10 10 0 0 1 0 14.2'/></svg>");
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M7.8 7.8a6 6 0 0 0 0 8.4'/><path d='M16.2 7.8a6 6 0 0 1 0 8.4'/><path d='M4.9 4.9a10 10 0 0 0 0 14.2'/><path d='M19.1 4.9a10 10 0 0 1 0 14.2'/></svg>");
  }
  .mobile-menu-list a[data-icon="dj"]::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14v-2a8 8 0 0 1 16 0v2'/><rect x='3' y='14' width='4' height='6' rx='1.5'/><rect x='17' y='14' width='4' height='6' rx='1.5'/></svg>");
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14v-2a8 8 0 0 1 16 0v2'/><rect x='3' y='14' width='4' height='6' rx='1.5'/><rect x='17' y='14' width='4' height='6' rx='1.5'/></svg>");
  }
  .mobile-menu-list a[data-icon="set"]::before{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h10'/><path d='M4 12h16'/><path d='M4 18h10'/><circle cx='17' cy='6' r='2'/><circle cx='17' cy='18' r='2'/></svg>");
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h10'/><path d='M4 12h16'/><path d='M4 18h10'/><circle cx='17' cy='6' r='2'/><circle cx='17' cy='18' r='2'/></svg>");
  }

  /* ─── Footer: EN/RU segmented + Login/Logout ───────────────────────── */
  .mobile-menu-footer{
    padding-top:14px;
    border-top:1px solid #251b40;
    display:flex;flex-direction:column;gap:12px;
  }

  /* Segmented control EN/RU — единый тоглер */
  .mobile-menu-lang{
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;
    padding:3px;
    border-radius:12px;
    background:rgba(15,10,35,.6);
    border:1px solid #2d1f55;
  }
  .mobile-menu-lang .lang-btn{
    position:relative;
    z-index:1;
    padding:8px 0;
    font-size:12px;font-weight:600;letter-spacing:1.5px;
    color:#a89bd0;
    background:transparent;border:0;
    font-family:inherit;cursor:pointer;
    border-radius:9px;
    transition:color .18s;
  }
  .mobile-menu-lang .lang-btn[aria-pressed="true"]{
    color:#fff;
  }
  /* Активная подложка едет слева/справа через CSS-only псевдоэлемент.
     Селекторы :has() не используем (нужна поддержка пошире) — вместо
     этого подсветка просто меняет фон активной кнопки. */
  .mobile-menu-lang .lang-btn[aria-pressed="true"]{
    background:linear-gradient(135deg,rgba(141,66,187,.55),rgba(106,47,153,.65));
    box-shadow:0 0 12px rgba(217,78,255,.28), inset 0 0 0 1px rgba(217,78,255,.4);
  }

  /* Кнопка Login / Logout */
  .mobile-menu-auth{
    width:100%;
    padding:12px;
    border-radius:12px;
    border:1px solid #5a3f70;
    background:rgba(15,10,35,.4);
    color:#e8e2ff;
    font-size:13px;font-family:inherit;font-weight:500;
    letter-spacing:.4px;
    cursor:pointer;
    transition:all .15s;
  }
  .mobile-menu-auth:hover{
    border-color:#cf75f3;
    background:rgba(30,20,60,.55);
  }
  /* Залогинен → Log out, красноватая подсветка при hover */
  .mobile-menu-auth[data-state="authed"]:hover{
    border-color:#ff7db1;
    color:#ff7db1;
    background:rgba(255,90,126,.06);
  }
}