/* =====================================================================
   menu.css — ВЫПАДАЮЩЕЕ МЕНЮ ЗА КНОПКОЙ-БУРГЕРОМ и три его экрана
   ---------------------------------------------------------------------
   Меню снято с референсного кадра 786 x 1206; полоса шапки в нём
   90 px, плашка бургера 163 x 85, то есть высота бургера ≈ 2 полосы —
   ровно как у нашего .nav-burger (--plate-h = 2 × --head-h). Поэтому все
   размеры меню выражены долями ВЫСОТЫ СТРОКИ --mi-h, а сама она взята от
   --head-h: правка одной переменной в site.css уводит и шапку, и меню.

   ЗАМЕРЫ С КАДРА (в скобках — пиксели кадра при строке 99 px):
     • высота строки            = 1     (99)      → --mi-h
     • просвет между строками   = .364  (36)
     • ширина строки            = 3.495 (346) — ОДИНАКОВАЯ у всех восьми
     • скругление               = .06   (6) — угол почти прямой
     • чёрный кант по бокам     = .03   (3), снизу вдвое толще
     • фаска сверху             = .07   (7), цвет #6A6A8E
     • подтон у низа            = .08   (8), цвет #384359
     • тело                     =            #4B5676
     • светлый клин в правом
       верхнем углу             = .15   (15), цвет #9084AA
     • иконка                   = .69   (68), свисает влево за кромку
                                              плашки на .18 (18)
     • капитель подписи         = .293  (29) → кегль .404 (у lilitaone
       капитель составляет .725 кегля)
     • подпись начинается       = .94   (93) от левой кромки плашки
     • поле панели слева        = .657  (65)
     • отступ до первой строки  = .33   (33)
     • фон панели               =            #17161C

   НАКЛОН. Левые кромки восьми строк в кадре стоят на 223, 210, 200, 188,
   178, 170, 156 px при шаге 135 — то есть уезжают влево на 11.8 px за
   строку, что даёт 5.0°. Правые кромки первой плашки: 575 у верха и 568
   у низа, те же 5.0°. Это тот самый общий угол витрины 5.06° (--fb-skew,
   --plate-skew), поэтому берём его, а не «свои» пять градусов.

   Из этого следует главное про устройство разметки: строки НЕ скошены
   каждая по себе — скошена ПАНЕЛЬ, а строки внутри неё лежат обычными
   прямоугольниками одинаковой ширины. Наклон родителя и уводит каждую
   следующую строку влево ровно на нужную величину, как в кадре. Точка
   отсчёта — правый верхний угол (transform-origin), поэтому верх панели
   стоит там, где кончается бургер, а свисает она влево.

   Три экрана меню (промокод, рефералка, поддержка) набраны КЛАССАМИ
   ОКНА ВХОДА (au-* из auth.css): те же поля, те же кнопки-плитки, тот же
   заголовок шрифтом сцены. Своего здесь только то, чего у входа нет, —
   чип кода, плитки статистики, лестница ступеней, список друзей и
   предупреждение о списании.
   ===================================================================== */

/* =====================================================================
   ПАНЕЛЬ
   ===================================================================== */
.nav{position:relative}        /* точка отсчёта для панели; .nav — flex, раскладку не меняет */

/* Бургер должен лежать ПОВЕРХ панели: панель выезжает из-под него, и
   если бы она печаталась сверху, кнопка пропадала бы под своим меню. */
.site-head .nav-burger{z-index:3}

.nm-panel{
  /* Высота строки. 2.28 — то самое отношение 99/43.5 из кадра: строка
     чуть выше плашки бургера, а не равна ей. */
  --mi-h:calc(var(--head-h) * 2.28);
  --mi-gap:calc(var(--mi-h) * .364);
  --mi-skew:-5.06deg;
  --mi-unskew:5.06deg;
  --mi-r:calc(var(--mi-h) * .09);
  --mi-body:#4B5676;
  --mi-bevel:#6A6A8E;
  --mi-shade:#384359;
  --mi-wedge:#9084AA;

  position:absolute;
  /* Верх панели заходит ПОД бургер: его низ — 2.5 полосы от верхней
     кромки (.5 отступ + 2 высоты), и панель, начатая на 2.3, выезжает
     именно из-под кнопки, а не висит под ней отдельной деталью. */
  top:calc(var(--head-h) * 2.3);
  right:0;
  z-index:2;

  padding:calc(var(--mi-h) * .33) calc(var(--mi-h) * .657);
  background:#17161C;
  border:2px solid var(--ink);
  border-radius:calc(var(--mi-h) * .14);
  box-shadow:0 3px 0 var(--ink), 0 26px 50px -18px rgba(0,0,0,.85);

  /* Наклон от правого верхнего угла — см. шапку файла. */
  transform:skewX(var(--mi-skew));
  transform-origin:right top;

  /* Появление: панель «выпадает» из-под кнопки, поэтому анимируется не
     прозрачность сама по себе, а сдвиг вверх плюс сжатие по высоте.
     Наклон в обеих ключевых точках один и тот же, иначе панель на
     выезде ещё и распрямлялась бы. */
  transform-box:border-box;
  animation:nm-drop .2s cubic-bezier(.2,.9,.25,1.05) both;
}
.nm-panel[hidden]{display:none}

@keyframes nm-drop{
  from{opacity:0;transform:skewX(-5.06deg) translateY(-10px) scaleY(.9)}
  to  {opacity:1;transform:skewX(-5.06deg) translateY(0)     scaleY(1)}
}

/* Затемнение страницы под панелью. z-index 45 — НИЖЕ шапки (у неё 50):
   в кадре полоса с балансом не притушена, и клик по ней (например, по
   плашке профиля) должен работать при открытом меню. Закрывает меню сам
   этот слой — по клику где угодно мимо панели. */
.nm-scrim{
  position:fixed;inset:0;z-index:45;
  background:rgba(6,5,12,.62);
  border:0;padding:0;cursor:default;
  animation:nm-fade .2s ease both;
}
@keyframes nm-fade{from{opacity:0}to{opacity:1}}

/* Открытый бургер: полоски складываются в крест. Плашка при этом
   подсвечена так же, как на :hover, — кнопка читается нажатой.

   Крест НЕ из тех же полосок, что лежат в покое: полоска толщиной .226
   полосы, повёрнутая на 45°, требует по вертикали больше места, чем
   высота утопленной площадки, и упиралась в её скругления. Поэтому на
   открытии полоски тоньше (.17) и короче (scaleX), а площадка получает
   больше внутреннего поля — крест встаёт в неё с воздухом.

   Сдвиг = толщина + просвет: только при этом центры первой и третьей
   полоски съезжаются в одну точку, и крест выходит симметричным. */
.nav-burger.is-open{filter:brightness(1.22)}
.nav-burger.is-open .nb-bars{
  background:rgba(0,0,0,.5);
  padding:calc(var(--head-h) * .1);
  border-radius:calc(var(--head-h) * .13);
}
.nav-burger .nb-bars i{transition:transform .18s ease, opacity .14s ease, height .18s ease}
.nav-burger.is-open .nb-bars i{height:calc(var(--head-h) * .17)}
.nav-burger.is-open .nb-bars i:nth-child(1){
  transform:translateY(calc(var(--head-h) * .235)) rotate(45deg) scaleX(.8)}
.nav-burger.is-open .nb-bars i:nth-child(2){opacity:0}
.nav-burger.is-open .nb-bars i:nth-child(3){
  transform:translateY(calc(var(--head-h) * -.235)) rotate(-45deg) scaleX(.8)}

/* =====================================================================
   СТРОКИ МЕНЮ
   ---------------------------------------------------------------------
   align-items:stretch и есть то, что в кадре даёт восьми строкам ОДНУ
   ширину: её задаёт самая длинная подпись, остальные подтягиваются.
   Минимум 3.495 --mi-h — ширина строки из кадра; ниже него панель не
   сжимается, даже если все подписи короткие.
   ===================================================================== */
.nm-list{
  display:flex;flex-direction:column;align-items:stretch;
  gap:var(--mi-gap);
  min-width:calc(var(--mi-h) * 3.495);
}

.nm-item{
  position:relative;
  display:flex;align-items:center;
  /* Подпись стоит ПО ЦЕНТРУ свободного места, а не сразу за иконкой: в
     кадре центр «BRAWL TV» отходит от центра своей плашки всего на 5 px
     из 355, то есть короткие подписи там отцентрованы. Ширину всем
     строкам задаёт самая длинная, и без центрирования у коротких
     оставалась бы пустая правая половина. */
  justify-content:center;
  height:var(--mi-h);
  /* Слева поле под свисающую иконку: она шириной .69 и выходит за
     кромку на .18, то есть внутрь плашки заходит на .51. Подпись в
     кадре начинается на .94 — отсюда и поле. */
  padding:0 calc(var(--mi-h) * .42) 0 calc(var(--mi-h) * .94);
  cursor:pointer;text-align:left;text-decoration:none;
  /* Фаска, тело и донный подтон — три замеренные зоны, а не
     декоративный градиент «сверху светлее». Проценты — доли высоты из
     кадра: 7 px фаски и 8 px подтона на 99 px строки. */
  background:linear-gradient(180deg,
    #6F6E95 0%, var(--mi-bevel) 5%, #5B5F82 7%,
    #515C7C 11%, var(--mi-body) 14%, var(--mi-body) 90%,
    #434E69 92%, var(--mi-shade) 100%);
  border:2px solid var(--ink);
  border-radius:var(--mi-r);
  /* Утолщение канта снизу — то же решение, что у плашек шапки: в кадре
     нижняя чёрная кромка вдвое толще боковых. */
  box-shadow:0 3px 0 var(--ink), 0 8px 16px -8px rgba(2,10,45,.85);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}

/* Светлый клин в правом верхнем углу. Он есть у каждой плашки кадра, и
   это не блик от градиента: замер даёт (144,132,170) против (75,86,118)
   тела, причём область — прямой треугольник со сторонами по 15 px.
   225deg ведёт ось градиента из этого угла к противоположному, а резкая
   граница на 46 % и отрезает треугольник. */
.nm-item::after{
  content:"";position:absolute;top:0;right:0;
  width:calc(var(--mi-h) * .16);height:calc(var(--mi-h) * .16);
  background:linear-gradient(225deg,
    var(--mi-wedge) 0%, var(--mi-wedge) 44%, rgba(144,132,170,0) 46%);
  border-top-right-radius:calc(var(--mi-r) - 2px);
  pointer-events:none;
}

.nm-item:hover{filter:brightness(1.15)}
.nm-item:active{transform:translateY(3px);
  box-shadow:0 0 0 var(--ink), 0 5px 12px -8px rgba(2,10,45,.85)}
.nm-item:focus-visible{outline:none;filter:brightness(1.15);
  box-shadow:0 3px 0 var(--ink), 0 0 0 3px rgba(85,184,255,.55)}

/* ---------- иконка ----------
   В кадре это готовый цветной арт игры, свисающий за левую кромку
   плашки. Своего арта под три пункта у нас нет, поэтому иконка набрана
   тем же материалом, что окошко аватара в шапке (.profile-ava): синяя
   плитка с чернильным кантом и белым знаком внутри. Композиция при этом
   кадру не изменяет — плитка так же свисает влево за кромку. */
.nm-ico{
  position:absolute;left:calc(var(--mi-h) * -.18);
  top:50%;
  width:calc(var(--mi-h) * .69);height:calc(var(--mi-h) * .69);
  display:grid;place-items:center;flex:0 0 auto;
  border-radius:calc(var(--mi-h) * .17);
  background:linear-gradient(160deg,#6FC6FF 0%,#2278DE 70%,#1A5FB4 100%);
  border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.35);
  /* Иконка стоит ПРЯМО в наклонной панели — обратный скос, как у
     аватара в наклонной плашке профиля. translateY после skew, иначе
     скос сдвинул бы её ещё и по горизонтали на половину высоты. */
  transform:skewX(var(--mi-unskew)) translateY(-50%);
  /* В кадре иконка чуть выше центра строки (её центр на 167 при центре
     плашки 172.5) — те же .05 высоты. */
  margin-top:calc(var(--mi-h) * -.05);
}
.nm-ico svg{width:62%;height:62%;display:block;fill:none;
  stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 0 rgba(2,10,45,.55))}
.nm-ico svg .nm-fill{fill:#fff;stroke:none}

/* ---------- подпись ---------- */
.nm-label{
  font-size:calc(var(--mi-h) * .404);
  color:#fff;white-space:nowrap;
  transform:skewX(var(--mi-unskew));
  /* Обводка и выдавка приезжают из .bs-ink в разметке. Собственный
     line-height нужен, чтобы выдавка не толкала строку по высоте. */
  line-height:1;
}

/* Значок «внешняя ссылка» у поддержки: кнопка уводит с сайта, и в
   отличие от двух других пунктов об этом надо сказать заранее.
   Абсолютом, а не margin-left:auto — распорка сдвинула бы подпись из
   центра строки, и «Тех. поддержка» встала бы левее двух других. */
.nm-out{
  position:absolute;right:calc(var(--mi-h) * .26);top:50%;
  font-size:calc(var(--mi-h) * .3);
  color:#C7D8F2;opacity:.8;
  transform:skewX(var(--mi-unskew)) translateY(-50%);
}

/* =====================================================================
   СЧЁТЧИК БАЛЛОВ — ТОЛЬКО НА ТЕЛЕФОНЕ
   ---------------------------------------------------------------------
   Строки нет на широком экране, и это не «спрятанный дубль»: там баллы
   показывает свой язычок в шапке. Ниже 620 px язычок оттуда снят —
   строка шапки переполнялась, и кнопка меню уезжала за обрез (замеры в
   адаптиве css/site.css), — и меню остаётся единственным местом со
   счётчиком. Ровно тот же приём, что у пункта «Апгрейдер» ниже 900.

   Строка НЕ плашка меню: она ничего не открывает, и выглядеть как
   кнопка не должна. Поэтому вместо тела .nm-item — утопленное поле,
   такое же, как площадка под полосками бургера, а число набрано
   шрифтом сцены и золотом сайта: это значение, а не подпись.
   ===================================================================== */
.nm-points{display:none}
@media (max-width:620px){
  .nm-points{
    display:flex;align-items:center;
    gap:calc(var(--mi-h) * .28);
    margin-bottom:var(--mi-gap);
    padding:calc(var(--mi-h) * .2) calc(var(--mi-h) * .28);
    border-radius:var(--mi-r);
    background:rgba(0,0,0,.42);
    border:2px solid var(--ink);
    /* Стоит прямо в наклонной панели — как иконка и подпись строки.
       Ниже 560 наклон с панели снимается, и там его снимут вместе с
       остальным содержимым (см. блок «УЗКИЕ ЭКРАНЫ»). */
    transform:skewX(var(--mi-unskew));
  }
  .nm-points-val{
    flex:0 0 auto;
    font-size:calc(var(--mi-h) * .52);line-height:1;color:var(--gold);
  }
  .nm-points-txt{display:flex;flex-direction:column;min-width:0}
  .nm-points-txt b{
    font-family:'Manrope',sans-serif;font-weight:800;font-size:.86rem;color:#fff;
  }
  .nm-points-txt i{
    font-style:normal;font-family:'Manrope',sans-serif;font-weight:600;
    font-size:.72rem;line-height:1.3;color:#A9BEDD;
  }
}

/* =====================================================================
   УЗКИЕ ЭКРАНЫ
   ---------------------------------------------------------------------
   На телефоне панель в 3.5 строки ширины (при --head-h 28 это ~280 px)
   ещё влезает, но подпись «Реферальная система» тянет строку шире
   экрана. Поэтому там панель распахивается почти во всю ширину, а
   наклон СНИМАЕТСЯ: скошенная панель во всю ширину упирается краем в
   границу окна и режется по ней.
   ===================================================================== */
@media (max-width:560px){
  .nm-panel{
    left:0;right:0;
    padding:calc(var(--mi-h) * .3) calc(var(--mi-h) * .34);
    transform:none;
  }
  .nm-panel,
  .nm-list{min-width:0}
  .nm-item{padding-left:calc(var(--mi-h) * .88)}
  .nm-ico,.nm-label,.nm-out,.nm-points{transform:none}
  .nm-ico{margin-top:0;transform:translateY(-50%);left:calc(var(--mi-h) * -.1)}
  .nm-label{font-size:calc(var(--mi-h) * .36);white-space:normal}
  @keyframes nm-drop{
    from{opacity:0;transform:translateY(-10px) scaleY(.9)}
    to  {opacity:1;transform:translateY(0)     scaleY(1)}
  }
}

@media (prefers-reduced-motion:reduce){
  .nm-panel,.nm-scrim{animation:none!important}
  .nm-item,.nav-burger .nb-bars i{transition:none!important}
}

/* =====================================================================
   ОКНА МЕНЮ
   ---------------------------------------------------------------------
   Подложка, карточка, поля, кнопки и заголовок — это au-* из auth.css:
   окно промокода обязано быть тем же окном, что вход, иначе на сайте
   появится вторая манера рисовать формы. Здесь только то, чего у входа
   не было.
   ===================================================================== */
.nm-card{width:min(560px,100%)}
.nm-card .au-title{margin-bottom:6px}

/* ВЫСОКОЕ ОКНО. У .au-backdrop стоит align-items:center, и это годилось,
   пока в окне была форма входа: она всегда ниже экрана. Экран рефералки
   выше, а flex-элемент, не влезающий в центрированный контейнер,
   обрезается СВЕРХУ — прокрутка до его верха не доезжает, и заголовок с
   плитками статистики пропадали. margin:auto центрирует так же, но
   переполнение отдаёт прокрутке, а не режет. */
.nm-backdrop{align-items:flex-start}
.nm-backdrop .nm-card{margin:auto}

/* СТРОКИ ВНУТРИ ПЛАШЕК.
   Разметку окон строит menu.ui.js, и внутренности плашек там набраны
   <span>: вложить <div> в <span> нельзя, а обёртки как раз span. Прямые
   дети flex-контейнера блокируются браузером сами, а вот их содержимое —
   нет, поэтому «подпись» и «пояснение» шли одной строкой. */
.nm-total-label,.nm-total-sum,.nm-total-rest,
.nm-row-title,.nm-row-sub,
.nm-stat-val,.nm-stat-label,
.nm-chip-label,.nm-chip-value{display:block}

/* ---------- переключатель «активировать / создать» ----------
   Две вкладки одной плиткой: активная — синяя кнопка сайта, спящая —
   прозрачная с кантом. */
.nm-tabs{
  display:flex;gap:8px;margin:18px 0 20px;
  padding:6px;border-radius:16px;
  background:rgba(3,16,54,.45);
  border:2px solid rgba(255,255,255,.1);
}
.nm-tab{
  flex:1;cursor:pointer;border:none;border-radius:12px;padding:11px 10px 13px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:.98rem;letter-spacing:.04em;
  color:#BBD6F5;background:transparent;
  transition:color .16s ease, background .16s ease, box-shadow .09s ease, transform .09s ease;
}
.nm-tab:hover{color:#fff}
.nm-tab.is-on{
  color:#fff;
  background:linear-gradient(180deg,#55B8FF 0%,#2278DE 100%);
  box-shadow:0 3px 0 #14508F;
  -webkit-text-stroke:0.09em var(--au-ink);paint-order:stroke fill;
}
.nm-tab.is-on:active{transform:translateY(3px);box-shadow:0 0 0 #14508F}

.nm-pane{display:none}
.nm-pane.is-on{display:block}

/* ---------- строка «поле + кнопка» ----------
   Поле и кнопка стоят в одну строку: в поле код, справа действие. На
   узком экране кнопка уезжает под поле — иначе от поля остаётся
   огрызок в пару символов. */
.nm-inline{display:flex;gap:10px;align-items:flex-start}
.nm-inline .au-field{flex:1;min-width:0}
.nm-inline .au-submit{margin-top:0;flex:0 0 auto;padding:14px 22px 18px;align-self:stretch}
@media (max-width:480px){
  .nm-inline{flex-direction:column}
  .nm-inline .au-submit{width:100%}
}

/* Поле кода — крупнее и разряженнее обычного: код диктуют и сверяют по
   буквам, поэтому он набран тем же шрифтом сцены, что заголовки. */
.nm-code-input{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif!important;
  font-weight:900;
  font-size:1.15rem!important;letter-spacing:.12em;text-transform:uppercase;
}
/* Подсказка в поле — обычным шрифтом: набранная шрифтом сцены, она
   читалась как уже введённый код, а не как приглашение его ввести. */
.nm-code-input::placeholder{
  font-family:'Manrope',sans-serif;font-size:.9rem;font-weight:600;
  letter-spacing:0;text-transform:none;
}

/* ---------- «сначала привяжи Telegram» в блоке приглашения ----------
   Кнопка синяя, а не зелёная, как «Применить» рядом: это не то же
   действие, а шаг ПЕРЕД ним, и две одинаковые зелёные кнопки подряд
   читались бы как «нажми любую». */
.nm-attach-tg{
  width:100%;margin:2px 0 14px;
  background:linear-gradient(180deg,#4FB4F5 0%,#1E86D6 100%);
  box-shadow:0 5px 0 #14608F, 0 12px 20px -8px rgba(2,10,45,.7);
}

/* ---------- два поля в ряд (активации и сумма) ---------- */
.nm-pair{display:flex;gap:12px}
.nm-pair .au-field{flex:1;min-width:0}
@media (max-width:420px){.nm-pair{flex-direction:column}}

/* ---------- ИТОГ И ПРЕДУПРЕЖДЕНИЕ О СПИСАНИИ ----------
   Главное место всего экрана создания: игрок отдаёт деньги, и сумма
   должна быть видна до нажатия, а не в тосте после. Поэтому итог —
   не подпись мелким шрифтом, а отдельная плашка с числом шрифтом сцены.
   Цвет предупреждающий (золото сайта), а не тревожный красный: списание
   штатное, игрок сам его затеял. */
.nm-total{
  margin-top:16px;padding:16px 18px;border-radius:16px;
  background:rgba(255,228,92,.1);
  border:2px solid rgba(255,228,92,.34);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.nm-total-ic{
  width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  font-size:1.15rem;
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:0 3px 0 #A96A05;
}
.nm-total-body{flex:1;min-width:0}
.nm-total-label{font-size:.8rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#FFE45C}
.nm-total-sum{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.5rem;letter-spacing:.04em;color:#fff;line-height:1.15;
  -webkit-text-stroke:0.08em var(--au-ink);paint-order:stroke fill;
}
.nm-total-rest{font-size:.82rem;color:#BBD6F5;margin-top:3px}
.nm-total.is-short{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.42)}
.nm-total.is-short .nm-total-label{color:#FDA4AF}
.nm-total.is-short .nm-total-ic{background:linear-gradient(180deg,#FB7185,#E11D48);box-shadow:0 3px 0 #9F1239}

/* ---------- ЧИП КОДА ----------
   Готовый код и реферальная ссылка: крупная плашка, из которой код
   копируется одной кнопкой. Тёмная, а не синяя, — чтобы читалась как
   поле со значением, а не как ещё одна кнопка. */
.nm-chip{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px 14px 18px;border-radius:16px;
  background:rgba(3,16,54,.55);
  border:2px solid rgba(255,255,255,.16);
}
.nm-chip-body{flex:1;min-width:0}
.nm-chip-label{font-size:.74rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#BBD6F5;margin-bottom:4px}
.nm-chip-value{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.3rem;letter-spacing:.1em;color:#fff;line-height:1.2;
  -webkit-text-stroke:0.07em var(--au-ink);paint-order:stroke fill;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Ссылка длиннее кода и в шрифт сцены не влезает — она набрана обычным
   текстом и переносится, иначе от неё виден только домен. */
.nm-chip-link .nm-chip-value{
  font-family:'Manrope',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:0;
  -webkit-text-stroke:0;white-space:normal;word-break:break-all;line-height:1.4;
}
.nm-copy{
  flex:0 0 auto;cursor:pointer;border:none;border-radius:13px;
  padding:11px 15px 14px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.85rem;color:#fff;
  background:linear-gradient(180deg,#55B8FF 0%,#2278DE 100%);
  box-shadow:0 4px 0 #14508F;
  transition:filter .16s ease, transform .09s ease, box-shadow .09s ease;
}
.nm-copy:hover{filter:brightness(1.09)}
.nm-copy:active{transform:translateY(4px);box-shadow:0 0 0 #14508F}
.nm-copy.is-done{background:linear-gradient(180deg,#63E06E,#34B747);box-shadow:0 4px 0 #1C7A2E}
/* Красный корпус — у удаления кода. Тот же кубик, что у «Копировать»,
   но цветом отделён намеренно: кнопки стоят рядом в одной строке, и
   промахнуться мимо копирования в необратимое действие нельзя. */
.nm-copy.is-del{background:linear-gradient(180deg,#FF8878,#E03A2C);box-shadow:0 4px 0 #8E1E14}
.nm-copy.is-del:active{box-shadow:0 0 0 #8E1E14}
/* «Отмена» — серо-синяя, как в окне подтверждения создания. */
.nm-copy.is-ghost{background:linear-gradient(180deg,#5B6C8C,#3A4763);box-shadow:0 4px 0 #263149}
.nm-copy.is-ghost:active{box-shadow:0 0 0 #263149}

/* ---------- ПЛИТКИ СТАТИСТИКИ ---------- */
.nm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
@media (max-width:440px){.nm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nm-stat{
  padding:13px 12px;border-radius:15px;text-align:center;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.1);
}
.nm-stat-val{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.35rem;letter-spacing:.04em;color:#fff;line-height:1.15;
  -webkit-text-stroke:0.08em var(--au-ink);paint-order:stroke fill;
}
.nm-stat-label{font-size:.72rem;font-weight:700;color:#BBD6F5;margin-top:5px;line-height:1.3}
.nm-stat.is-money .nm-stat-val{color:var(--gold,#FFE45C)}

/* ---------- ЛЕСТНИЦА СТУПЕНЕЙ ---------- */
.nm-sec{margin-top:22px}
.nm-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:12px;
}
.nm-sec-head h3{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.05rem;letter-spacing:.04em;color:#fff;
  -webkit-text-stroke:0.08em var(--au-ink);paint-order:stroke fill;
}
.nm-sec-head span{font-size:.78rem;color:#BBD6F5;font-weight:700}

.nm-bar{
  height:12px;border-radius:999px;overflow:hidden;margin-bottom:14px;
  background:rgba(3,16,54,.6);
  border:2px solid rgba(255,255,255,.12);
}
.nm-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#63E06E,#34B747);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:width .45s cubic-bezier(.2,.9,.25,1.05);
}

.nm-ladder{display:flex;flex-direction:column;gap:8px}
.nm-tier{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.09);
}
.nm-tier-n{
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:.95rem;color:#fff;
  background:rgba(3,16,54,.6);border:2px solid rgba(255,255,255,.14);
}
.nm-tier-txt{flex:1;min-width:0;font-size:.86rem;font-weight:700;color:#DCE9FB}
.nm-tier-sum{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1rem;color:var(--gold,#FFE45C);letter-spacing:.04em;flex:0 0 auto;
  -webkit-text-stroke:0.07em var(--au-ink);paint-order:stroke fill;
}
.nm-tier.is-done{background:rgba(52,183,71,.14);border-color:rgba(99,224,110,.4)}
.nm-tier.is-done .nm-tier-n{background:linear-gradient(180deg,#63E06E,#34B747);
  border-color:rgba(255,255,255,.3);box-shadow:0 2px 0 #1C7A2E}

/* ---------- СПИСКИ (друзья, свои коды, выписка) ---------- */
.nm-rows{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;padding-right:4px}
.nm-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.09);
}
.nm-row-ava{
  width:36px;height:36px;flex:0 0 auto;border-radius:11px;overflow:hidden;
  background:linear-gradient(160deg,#55B8FF,#2278DE);
  border:2px solid var(--ink);display:grid;place-items:center;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;color:#fff;
}
.nm-row-ava img{width:100%;height:100%;object-fit:cover}
/* Плитка под значок Telegram: фирменный синий вместо общего синего
   плашек, чтобы белый самолёт логотипа (js/telegram.icon.js) стоял на
   своём цвете. Обводка и скругление остаются от .nm-row-ava — строка
   должна выглядеть строкой меню, а не наклейкой. */
.nm-row-ava.is-tg{background:linear-gradient(180deg,#2AABEE,#229ED9)}
.nm-row-body{flex:1;min-width:0}
.nm-row-title{font-size:.92rem;font-weight:800;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-row-sub{font-size:.76rem;color:#BBD6F5;margin-top:2px}
.nm-row-sum{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1rem;letter-spacing:.04em;color:#63E06E;flex:0 0 auto;
  -webkit-text-stroke:0.07em var(--au-ink);paint-order:stroke fill;
}
/* Исчерпанный код виден, но приглушён: он уже ничего не даёт, а из
   списка его убирать нельзя — по нему сверяют, что деньги ушли делом. */
.nm-row.is-spent{opacity:.55}
.nm-row.is-spent .nm-row-sum{color:#BBD6F5}

/* Кнопки внутри строки списка мельче отдельно стоящих: в строке их две
   («Код» и «✕»), и на телефоне полноразмерные выдавливают сам код. */
.nm-row .nm-copy{padding:9px 12px 12px;font-size:.8rem;border-radius:11px}
.nm-row .nm-copy.is-del{padding:9px 11px 12px}
/* Строка спрашивает подтверждение удаления: красная рамка отделяет её
   от соседних, чтобы ответ «Удалить» ушёл в тот код, о котором спросили.
   Вопрос занимает всю ширину, кнопки уходят под него: рядом с текстом на
   телефоне им остаётся сотня пикселей, и «На баланс вернётся…» рассыпался
   бы на пять строк. */
.nm-row.is-ask{
  flex-wrap:wrap;gap:8px;
  background:rgba(224,58,44,.16);
  border-color:rgba(255,136,120,.55);
}
.nm-row.is-ask .nm-row-body{flex:1 0 100%}
.nm-row.is-ask .nm-row-title{white-space:normal}
.nm-row.is-ask .nm-copy{flex:1}

/* ---------- СТРОКИ СОСТОЯНИЯ (Telegram, ящик за приглашение) ----------
   Это не списки, а ОДНА строка, которая отвечает «да» или «нет»: привязан
   ли Telegram, открылся ли ящик за друзей. Отсюда и цвет рамки — зелёный
   на «да», нейтральный на «нет»: ответ должен читаться раньше текста.

   Заголовок в них переносится (в списках он обрезан многоточием): здесь
   это не имя из чужого профиля, которое может быть любой длины, а своя
   фраза целиком — «Откроется при 10 приглашённых», — и обрывать её
   многоточием значит скрыть само условие. */
.nm-row.is-on{
  background:rgba(52,183,71,.14);
  border-color:rgba(99,224,110,.45);
}
.nm-row.is-on .nm-row-ava{
  background:linear-gradient(180deg,#63E06E,#34B747);
  box-shadow:0 2px 0 #1C7A2E;
}
.nm-row.is-off .nm-row-ava{opacity:.75}
.nm-row.is-on .nm-row-title,
.nm-row.is-off .nm-row-title{white-space:normal}
.nm-row.is-on .nm-row-sub,
.nm-row.is-off .nm-row-sub{line-height:1.45}
/* Кнопка привязки стоит ПОД своей строкой, а не в ней: строка объясняет,
   зачем это нужно, целым предложением, и кнопка рядом с ним ужалась бы
   до полутора слов. */
.nm-row.is-off + .nm-attach-tg{margin-top:10px}

.nm-empty{
  padding:22px 16px;border-radius:15px;text-align:center;
  background:rgba(255,255,255,.04);
  border:2px dashed rgba(255,255,255,.14);
  font-size:.86rem;color:#BBD6F5;line-height:1.55;
}

/* ---------- кнопка «забрать на баланс» ---------- */
.nm-claim{width:100%;margin-top:14px}
.nm-claim:disabled{filter:grayscale(.45)}

/* ---------- нумерованные шаги («как это работает») ----------
   Номер шага — не маркер списка, а отдельный столбец: правила выплат
   читаются взглядом по цифрам, а стандартный ol с точкой в такой
   вёрстке съезжает от строки к строке. */
.nm-steps{display:flex;flex-direction:column;gap:9px;margin:2px 0 0}
.nm-steps li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.87rem;color:#DCE9FB;line-height:1.5;list-style:none;
}
.nm-steps b{color:#fff}
.nm-steps i{
  flex:0 0 auto;font-style:normal;font-weight:800;color:#7FC7FF;
  width:20px;text-align:center;
}

/* ---------- пункт «Апгрейдер» ----------
   Он тут не всегда: на десктопе апгрейдер открывает своя плашка в
   шапке, и строка меню дублировала бы её. Ниже 900 px строка шапки
   переполнена (логотип, профиль, оба язычка баланса и кнопка меню
   занимают её целиком — см. адаптив в site.css), плашка апгрейдера
   оттуда снимается, и меню остаётся единственной дверью в раздел.
   Порядок в списке задан в js/menu.ui.js: пункт идёт первым. */
.nm-item[data-menu="upgrader"]{display:none}
@media (max-width:900px){
  .nm-item[data-menu="upgrader"]{display:flex}
}

/* =====================================================================
   ЯЗЫК И ВАЛЮТА — ПОДВАЛ ПАНЕЛИ МЕНЮ
   ---------------------------------------------------------------------
   Два ряда переключателей и оговорка про курс. Разметку строит
   switcherHTML в js/menu.ui.js, там же разобрано, почему они живут
   именно здесь, а не в шапке сайта.

   ОФОРМЛЕНЫ ТИШЕ, ЧЕМ ПУНКТЫ МЕНЮ, и это намеренно. Пункт меню —
   плашка с фаской, кантом и свисающей иконкой: он зовёт нажать.
   Переключатель языка нажимают один раз за визит, а стоит он последним
   в панели, — если набрать его тем же материалом, он перетянет на себя
   внимание с «Пополнить баланс», ради которого меню и открывают.
   Поэтому здесь плоские таблетки на полупрозрачной подложке: заметно,
   когда ищешь, и не мозолит, когда не ищешь.
   ===================================================================== */
.nm-switch{
  display:flex;flex-direction:column;gap:8px;
  margin-top:var(--mi-gap);
  padding-top:calc(var(--mi-gap) + 2px);
  /* Разделитель, а не отступ: без линии ряды читаются как ещё два
     пункта того же списка, только почему-то другого вида. */
  border-top:2px solid rgba(255,255,255,.14);
}

.nm-sw-row{display:flex;align-items:center;gap:10px;justify-content:space-between}

.nm-sw-label{
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  color:#9FB6D6;flex:0 0 auto;
}

/* Пара кнопок в одной обойме с общим кантом — так видно, что это выбор
   одного из двух, а не две независимые кнопки. */
.nm-sw-opts{
  display:flex;flex:0 0 auto;
  background:rgba(9,20,54,.55);
  border:2px solid var(--ink);
  border-radius:calc(var(--mi-r) * .6);
  overflow:hidden;
}

.nm-sw-opt{
  display:flex;align-items:center;gap:5px;
  padding:6px 10px;
  font:inherit;font-size:.8rem;font-weight:700;
  color:#B9CDEA;background:transparent;border:0;cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.nm-sw-opt + .nm-sw-opt{border-left:2px solid rgba(255,255,255,.12)}
.nm-sw-opt:hover{background:rgba(85,184,255,.14);color:#fff}
.nm-sw-opt:focus-visible{outline:none;background:rgba(85,184,255,.22);color:#fff}

/* Выбранный — залит, а не обведён: обводка внутри обоймы с собственным
   кантом читается как вложенная рамка и мельтешит. */
.nm-sw-opt.is-on{
  background:linear-gradient(180deg,#3E8BD8 0%,#2E6FB4 100%);
  color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28);
}

/* Значок валюты и флаг набраны крупнее подписи: на телефоне подпись
   ужимается (см. адаптив ниже), и значок остаётся единственным, по
   чему кнопку узнают, не читая. */
.nm-sw-ico{font-size:.95rem;line-height:1}

.nm-sw-note{
  margin:2px 0 0;
  font-size:.74rem;line-height:1.45;color:#8FA6C6;
}

/* На узком экране подписи «Русский / English» и «Рубли / Доллары»
   вместе с ярлыком ряда не помещаются в ширину панели. Ярлык остаётся
   (без него непонятно, что именно переключается), а подпись кнопки
   уходит — флаг и знак валюты опознаются и без слова. */
@media (max-width:420px){
  .nm-sw-txt{display:none}
  .nm-sw-opt{padding:7px 12px}
  .nm-sw-ico{font-size:1.05rem}
}