/* =====================================================================
   profile.css — Профиль игрока и инвентарь
   ---------------------------------------------------------------------
   Оформление переведено на язык сайта тем же приёмом, каким это уже
   сделано в auth.css: тот же синий, что у панелей витрины, шрифт сцены с
   обводкой и выдавкой у всего «игрового» текста, кнопки-«плитки» с
   жёсткой нижней тенью, тёмные плашки шапки у служебных кнопок. Прежняя
   фиолетово-циановая палитра осталась только у окна открытия ящика
   (case.css) — оно живёт своей сценой.

   РАЗМЕТКУ НЕ ТРОГАЛИ: её строит js/profile.ui.js, и переименование хоть
   одного хука сломало бы и профиль, и инвентарь. Единственное изъятие —
   из открытия убран `.cx-scene` с фиолетовыми «орбами»: это была
   декорация именно той палитры, которой здесь больше нет.

   ПАНЕЛИ ЗДЕСЬ НЕ СКОШЕНЫ, И ЭТО НЕ ЗАБЫВЧИВОСТЬ. У сайта два набора
   блоков: наклонные полки витрины (.gpanel с карточками ящиков) и прямые
   информационные (.step, .banner, .upg-card). Профиль — сплошной текст,
   списки и формы, то есть второй случай: наклон полки на строке
   «Email и пароль» с двумя кнопками читался бы как сбитая вёрстка. Из
   полки взято всё остальное — заливка, обводка, полоса заголовка и набор
   заголовка шрифтом сцены, — поэтому родство с витриной видно и без
   скоса.
   ===================================================================== */

/* ---------- кнопка профиля в шапке ----------
   От прежней «пилюли» тут остались только внутренности аватара: форму,
   цвет и размеры плашки задаёт site.css по референсному кадру шапки. */
.profile-btn{cursor:pointer;font-family:'Manrope',sans-serif;font-weight:700}
.profile-ava{
  position:relative;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;
}
.profile-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-ava span{font-weight:900;color:#fff}
.profile-name{white-space:nowrap}

/* =====================================================================
   ОБЩИЙ НАБОР «ИГРОВОГО» ТЕКСТА
   ---------------------------------------------------------------------
   Та же связка, что и в .bs-ink на витрине: шрифт сцены, обводка 0.1em и
   выдавка вниз. Утилитой .bs-ink воспользоваться нельзя — её пришлось бы
   дописывать в разметку, которую строит profile.ui.js, поэтому свойства
   перечислены здесь списком селекторов.
   ===================================================================== */
.pf-title,
.pf-nick,
.pf-ava-fallback,
.pf-stat-value,
.pf-sec-head h2,
.pf-inv-title h2,
.pf-inv-count b,
.pf-sellall,
.inv-value,
.inv-name,
.inv-empty-title,
.pf-ask h3{
  font-family:"MegaBoxFont","Arial Black","Segoe UI",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.04em;word-spacing:-.09em;   /* трекинг — см. .bs-ink */
  text-shadow:var(--so),var(--extrude);
  line-height:1.1;
}

/* =====================================================================
   ЭКРАН ПРОФИЛЯ
   ---------------------------------------------------------------------
   Это НЕ окно поверх главной, а ОТДЕЛЬНЫЙ ЭКРАН САЙТА — устроен точно
   так же, как экран ящика (см. шапку case.css), и по тем же причинам:

     • .pf-backdrop встаёт в ОБЫЧНЫЙ ПОТОК документа и ничем не залит —
       сквозь него виден фоновый ролик страницы (.bg-stage), то есть тот
       же фон, что и везде. Прежние размытие и синий градиент отсюда
       убраны: они давали профилю свой собственный фон, отличавшийся от
       страницы плотностью;
     • главная на это время прячется (body.pf-open ниже), а шапка
       остаётся на месте — она и есть верхняя чёрная полоса с балансом и
       баллами;
     • своей плашки баланса и крестика у экрана больше нет: баланс
       показывает язычок шапки, а закрывает экран кнопка «назад».
   ===================================================================== */
.pf-backdrop{
  position:relative;z-index:1;
  color:var(--text,#fff);font-family:'Manrope',sans-serif;
  opacity:0;transition:opacity .28s ease;
}
.pf-backdrop.show{opacity:1}

/* Экран профиля открыт — главная страница спрятана. Шапка НЕ прячется:
   она и есть верхушка сайта с балансом. Ровно то же правило есть у
   экрана ящика (body.case-open в case.css). */
body.pf-open > main,
body.pf-open > footer{display:none}

.pf{
  position:relative;z-index:2;
  width:min(1120px,100%);margin:0 auto;
  /* Верхнее поле — те же 2.64 полосы от кромки шапки до кнопки «назад»,
     что и на экране ящика; заодно это запас под свисающие из шапки
     логотип, плашку профиля и язычки баланса. */
  padding:calc(var(--head-h) * 2.64) clamp(16px,4vw,40px) 90px;
  display:flex;flex-direction:column;gap:22px;
  transform:translateY(14px);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.05);
}
/* Разделы не ужимаются ни при каких обстоятельствах: у панелей внутри
   свои поля и полосы заголовков, и flex-сжатие резало их содержимое. */
.pf > *{flex:0 0 auto}
/* СБРОС ПОЛЕЙ СЕКЦИЙ. Разделы профиля набраны тегом <section>, а site.css
   задаёт всем секциям страницы `padding:52px 0` и подключён ПОСЛЕ этого
   файла. Без сброса каждая панель получала 52 px пустоты сверху и снизу
   ВНУТРИ обводки: полоса заголовка отъезжала от края, а между разделами
   зияла дыра в 126 px вместо gap в 22. Отступы держат сами блоки внутри
   панели, поэтому здесь ноль. Перечислены поимённо, а не через
   `.pf > section`: тот селектор весомее (0,1,1), чем .pf-header (0,1,0),
   и обнулил бы поля и у шапки профиля. */
.pf > .pf-stats,
.pf > .pf-privacy,
.pf > .pf-history,
.pf > .pf-security,
.pf > .pf-inventory{padding:0}
.pf-backdrop.show .pf{transform:none}

/* ---------- верхняя строка: «назад» и название экрана ----------
   Собрана как .cx-bar у экрана ящика: кнопка и название в одну строку,
   просвет между ними — 1.07 полосы шапки. Сама кнопка приезжает готовой
   тёмной плашкой из case.css (.cx-back и «птичка» .cx-back-ico), здесь
   ей ничего не дописывается: две кнопки «назад» на сайте должны быть
   одной кнопкой, а не двумя похожими. Плашки баланса и крестика тут
   больше нет — баланс показывает язычок шапки над экраном. */
.pf-topbar{
  display:flex;align-items:center;
  gap:calc(var(--head-h) * 1.07);
}
/* Название набрано как название ящика: капитель .70 полосы (кегль .97 —
   у lilitaone капитель составляет .725 кегля), прописными. Обводку и
   выдавку даёт общий набор «игрового» текста в шапке этого файла. */
.pf-title{
  font-size:calc(var(--head-h) * .97);margin:0;
  text-transform:uppercase;color:#fff;
}

/* =====================================================================
   ПАНЕЛЬ РАЗДЕЛА
   ---------------------------------------------------------------------
   Заливка, обводка и радиус — те же числа, что у полки витрины
   (.gpanel в site.css): полупрозрачный синий rgba(21,27,243,.328) под
   обводкой rgba(0,30,170,.40). Полупрозрачность здесь важна так же, как
   там: под панелью идёт фоновый ролик страницы, и сплошная заливка
   сделала бы её плоской нашлёпкой.
   Полоса заголовка — тоже оттуда: на четверть темнее тела.
   ===================================================================== */
.pf-privacy,
.pf-history,
.pf-security,
.pf-inventory{
  border:3px solid rgba(0,30,170,.40);
  border-radius:20px;
  background:rgba(21,27,243,.328);
  /* Полосы заголовка идут во всю ширину панели и обрезаются по её
     скруглению — отсюда hidden, и отсюда же нулевые поля самой панели:
     отступы держат уже внутренние блоки. */
  overflow:hidden;
}
.pf-sec-head,
.pf-inv-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px clamp(16px,3vw,24px);
  background:rgba(55,0,230,.25);
  margin:0;
}
.pf-sec-head h2,
.pf-inv-title h2{
  font-size:clamp(1.25rem,3vw,1.7rem);
  text-transform:uppercase;   /* как заголовки полок на витрине */
  color:#fff;
}
.pf-sec-head span{color:var(--text-dim,#BBD6F5);font-size:.84rem;font-weight:600}
.pf-inv-count{display:block;margin-top:7px;color:var(--text-dim,#BBD6F5);font-size:.88rem;font-weight:600}
.pf-inv-count b{color:var(--gold,#FFE45C);font-size:1rem}

/* =====================================================================
   ШАПКА ПРОФИЛЯ
   ---------------------------------------------------------------------
   Собрана как .banner на главной: синий градиент, светлый кант, жёсткая
   нижняя тень. Аватар — увеличенная плашка из шапки сайта, чтобы
   маленькая кнопка в углу и большой портрет здесь читались как один
   элемент в двух размерах.
   ===================================================================== */
.pf-header{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:28px clamp(20px,3vw,34px) 30px;border-radius:24px;
  background:
    radial-gradient(80% 130% at 8% 0%, rgba(85,184,255,.28), transparent 62%),
    linear-gradient(180deg,#2555bb 0%,#12327f 60%,#0c2360 100%);
  border:3px solid rgba(255,255,255,.16);
  box-shadow:0 8px 0 #07184a, 0 22px 36px -14px rgba(2,10,45,.8);
}
.pf-ava{
  position:relative;width:124px;height:124px;flex:0 0 auto;
  border-radius:24px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,#55B8FF,#2278DE);
  border:3px solid var(--ink);
  box-shadow:0 5px 0 var(--ink), 0 16px 28px -14px rgba(2,10,45,.9);
}
.pf-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pf-ava-fallback{font-size:3rem;color:#fff}
.pf-id{flex:1 1 260px;min-width:0}
.pf-nick{
  font-size:clamp(1.8rem,4.4vw,2.8rem);color:#fff;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.pf-sub{margin-top:10px;color:var(--text-dim,#BBD6F5);font-size:.95rem;font-weight:600}
.pf-sub b{color:#fff;font-weight:800}

/* Карандаш возле ника — маленькая синяя плитка витрины. Обводка и
   выдавка ему НЕ нужны: это иконка, а не игровой текст, и на глифе в
   14 px stroke 0.1em съедает сам знак. */
.pf-edit{
  width:40px;height:40px;flex:0 0 auto;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  /* Шрифт задан явно: кнопка лежит внутри .pf-nick, а тот набран
     шрифтом сцены, в котором знака «✎» нет — глиф уезжал в случайный
     запасной шрифт и выходил разного размера в разных браузерах. */
  font-family:'Manrope',sans-serif;font-size:1.05rem;line-height:1;
  border:3px solid rgba(255,255,255,.2);border-radius:13px;
  background:linear-gradient(180deg,var(--btn-blue-1,#55B8FF),var(--btn-blue-2,#2278DE));
  box-shadow:0 4px 0 var(--btn-blue-sh,#14508F);
  -webkit-text-stroke:0;text-shadow:none;
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.pf-edit:hover{filter:brightness(1.1);transform:none}
.pf-edit:active{transform:translateY(4px);box-shadow:0 0 0 var(--btn-blue-sh,#14508F)}

/* =====================================================================
   СТАТИСТИКА
   ---------------------------------------------------------------------
   Плитки набраны как .step в разделе «Как это работает»: тот же
   градиент, тот же светлый кант и та же жёсткая тень 0 7px 0.
   ===================================================================== */
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.pf-stat{
  padding:18px 20px 20px;border-radius:20px;
  background:linear-gradient(180deg,rgba(24,72,166,.72),rgba(9,36,102,.72));
  border:3px solid var(--panel-line,rgba(255,255,255,.16));
  box-shadow:0 6px 0 rgba(4,20,66,.6);
  transition:filter .14s ease;
}
.pf-stat:hover{filter:brightness(1.08)}
.pf-stat-label{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim,#BBD6F5);margin-bottom:10px;
}
/* Значение может быть длинным адресом почты — переносим по буквам, иначе
   оно вылезает за плитку (в прежней вёрстке так и было: «alexey@examp…»
   уходил под соседнюю). */
.pf-stat-value{font-size:1.05rem;color:#fff;overflow-wrap:anywhere}

/* =====================================================================
   ПРИВАТНОСТЬ / РЕЖИМ СТРИМЕРА
   ---------------------------------------------------------------------
   Раздел собран из тех же деталей, что «Безопасность»: панель, полоса
   заголовка и одна строка .sec-row со значком слева. Своего вида ему
   не полагается — это такая же настройка аккаунта, просто из одной
   строки, и отдельная «карточка режима» рядом с ними читалась бы
   баннером.
   ===================================================================== */
/* Строка сама по себе кнопка (см. privacySection в js/profile.ui.js) —
   курсор и подсветка обещают это заранее, как у полосы заголовка
   выписки. */
.pf-stream{cursor:pointer;user-select:none}

/* Закрытое значение. Manrope задан явно: точки стоят внутри .pf-sub и
   плиток статистики, набранных шрифтом сцены, где «•» приезжает из
   случайного запасного шрифта и в каждом браузере своего размера.
   Выделять их мышью незачем — за ними ничего нет. */
.pf-mask{
  font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:.14em;
  color:var(--text-dim,#BBD6F5);vertical-align:baseline;
  -webkit-text-stroke:0;text-shadow:none;user-select:none;
}

/* Переключатель — тумблер, а не кнопка «Включить»: у кнопки подпись
   говорит о будущем («включить» — значит сейчас выключено), и её
   каждый раз приходится читать дважды. У тумблера состояние видно
   положением, и подпись рядом только называет его. */
.pf-switch{
  cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  padding:0;border:0;background:none;color:#fff;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.84rem;line-height:1;
}
.pf-switch-track{
  position:relative;flex:0 0 auto;width:62px;height:32px;border-radius:999px;
  background:rgba(3,16,54,.5);
  border:3px solid rgba(255,255,255,.18);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.25);
  transition:background .16s ease, border-color .16s ease;
}
.pf-switch-knob{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#C9D8F2);
  box-shadow:0 2px 0 rgba(4,20,66,.6);
  transition:transform .16s cubic-bezier(.2,.9,.25,1.05);
}
/* Включённый режим — тот же зелёный, что у значка «Подключен» рядом:
   на этом экране зелёное значит «работает». */
.pf-switch[aria-checked="true"] .pf-switch-track{
  background:linear-gradient(180deg,var(--green-1,#63E06E),var(--green-2,#34B747));
  border-color:rgba(0,0,0,.2);
}
.pf-switch[aria-checked="true"] .pf-switch-knob{transform:translateX(30px)}
/* Ширина под «Выкл» задана заранее: без неё строка дёргалась бы на
   каждом щелчке — «Вкл» короче на пол-сантиметра. */
.pf-switch-text{min-width:34px;text-align:left}
.pf-stream:hover .pf-switch-track{filter:brightness(1.12)}

/* =====================================================================
   БЕЗОПАСНОСТЬ
   ===================================================================== */
.pf-security{margin-bottom:0}
.sec-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:14px clamp(16px,3vw,24px);
  padding:16px 20px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(24,72,166,.72),rgba(9,36,102,.72));
  border:3px solid var(--panel-line,rgba(255,255,255,.16));
  box-shadow:0 5px 0 rgba(4,20,66,.6);
  transition:filter .14s ease;
}
.sec-row:hover{filter:brightness(1.08)}
/* Значок способа входа — тёмная плашка шапки, а не синяя плитка. Метки
   провайдеров приходят из profile.ui.js со своими фирменными цветами
   (красная «G» у Google, голубой самолётик у Telegram), и на синей
   плитке голубой знак на синем просто пропадал. На тёмном читаются оба. */
.sec-ic{
  width:48px;height:48px;flex:0 0 auto;border-radius:15px;
  display:grid;place-items:center;font-size:1.15rem;
  background:linear-gradient(180deg,
    #6B697E 0%, #6B697E 6%, #4B4A60 13%, #3A3F53 20%, #343C4E 70%, #2F3747 100%);
  border:2px solid var(--ink);
  box-shadow:0 2px 0 var(--ink);
}
.sec-main{flex:1;min-width:190px}
.sec-title{font-weight:800;font-size:1rem;margin-bottom:6px;color:#fff}
.sec-status{font-size:.86rem;font-weight:600;color:var(--text-dim,#BBD6F5);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sec-badge{
  display:inline-block;padding:4px 12px 6px;border-radius:999px;
  font-size:.72rem;font-weight:800;line-height:1.2;
  background:rgba(3,16,54,.5);border:2px solid rgba(255,255,255,.18);
  color:var(--text-dim,#BBD6F5);
}
.sec-badge.ok  {background:linear-gradient(180deg,var(--green-1,#63E06E),var(--green-2,#34B747));
  border-color:rgba(0,0,0,.2);color:#0A2A10;box-shadow:0 3px 0 var(--green-sh,#1C7A2E)}
.sec-badge.warn{background:linear-gradient(180deg,#FFD84D,#F5A524);
  border-color:rgba(0,0,0,.2);color:#241000;box-shadow:0 3px 0 #A96A05}
.sec-dim{color:var(--text-dim,#BBD6F5);font-size:.84rem}
.sec-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.sec-lock{font-size:.78rem;color:var(--text-dim,#BBD6F5);opacity:.85;font-weight:600}

/* Кнопки раздела — те же плитки витрины, только на размер меньше.
   Обводки и выдавки у них нет: подписи мелкие («Выйти на всех
   устройствах»), и на 13 px stroke 0.1em слипает буквы в кашу. */
.sec-btn{
  cursor:pointer;border-radius:14px;padding:11px 17px 14px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.84rem;line-height:1;
  color:#fff;border:3px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#2a72e6,#123a92);
  box-shadow:0 4px 0 #07204f;
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.sec-btn:hover{filter:brightness(1.1)}
.sec-btn:active{transform:translateY(4px);box-shadow:0 0 0 #07204f}
.sec-btn.primary{
  background:linear-gradient(180deg,var(--green-1,#63E06E),var(--green-2,#34B747));
  box-shadow:0 4px 0 var(--green-sh,#1C7A2E);border-color:rgba(0,0,0,.18);
}
.sec-btn.primary:active{box-shadow:0 0 0 var(--green-sh,#1C7A2E)}
.sec-btn.danger{
  background:linear-gradient(180deg,#FF6B6B,#D62828);
  box-shadow:0 4px 0 #8A1414;border-color:rgba(0,0,0,.18);
}
.sec-btn.danger:active{box-shadow:0 0 0 #8A1414}
.pf-sec-foot{display:flex;gap:10px;flex-wrap:wrap;padding:6px clamp(16px,3vw,24px) 22px}

/* =====================================================================
   ИСТОРИЯ БАЛАНСА
   ---------------------------------------------------------------------
   Выписка по счёту: строка на каждое движение денег. Панель и полоса
   заголовка — общие с «Безопасностью» (см. ПАНЕЛЬ РАЗДЕЛА выше), а вот
   строка собрана НЕ как .sec-row, и это разница по существу.

   Строк безопасности три, и каждая — самостоятельная плашка с кнопкой.
   Строк выписки полтора десятка подряд, и та же плашка (свой фон, кант
   в 3 px, выдавка, поля по 10 px) давала 78 px на событие: пятнадцать
   движений занимали больше экрана, чем весь остальной профиль, а раздел
   между статистикой и инвентарём превращался в стену. Здесь строки
   лежат СПИСКОМ: общий фон панели, волосяная линия между соседями,
   44 px на событие. Тот же приём, что в банковской выписке, и по той же
   причине — такие строки не разглядывают по одной, их просматривают
   колонкой сверху вниз.

   Числа справа: сумма проводки крупно, баланс после неё — серым в
   подстрочнике вместе со временем. Второе число здесь не для красоты.
   Именно по нему видно, что деньги никуда не пропали между строками:
   «стало» предыдущей обязано быть началом следующей (ту же цепь
   сервер проверяет в ledger.verify).
   ===================================================================== */
/* Полоса заголовка сама по себе кнопка: в свёрнутом виде раздел из неё
   одной и состоит. Курсор и подсветка обещают это заранее — иначе
   заголовок читался бы как надпись, а «Показать» рядом с ним как
   единственное живое место. */
.hs-head{cursor:pointer;user-select:none}
.hs-head:hover{background:rgba(75,10,240,.34)}
/* Селектор через .hs-head (0,2,0), а не просто .hs-toggle: в адаптиве
   кнопки раздела растягиваются (.sec-btn{flex:1}), и без этого веса
   правило проиграло бы ему на любой ширине. Свою растяжку на телефоне
   раздел получает ниже — и по-другому. */
.hs-head .hs-toggle{
  flex:0 0 auto;margin-left:auto;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 11px;
}
/* Уголок вниз — «раздел откроется»; развёрнутый смотрит вверх. Рисуется
   двумя гранями рамки, а не значком: одна фигура из двух линий, ради
   которой не нужен ни файл, ни шрифт. */
.hs-chev{
  width:8px;height:8px;margin-top:-4px;
  border-right:3px solid currentColor;border-bottom:3px solid currentColor;
  transform:rotate(45deg);transition:transform .16s ease;
}
[aria-expanded="true"] .hs-chev{transform:rotate(-135deg);margin-top:3px}
.hs-body{padding:2px 0 14px}
.hs-list{display:flex;flex-direction:column;padding:0 clamp(16px,3vw,24px)}
/* Заголовок дня: «Сегодня», «Вчера», «8 августа». Липким его не делаем —
   раздел прокручивается вместе со страницей, и прилипал бы он не к
   панели, а к верху окна, где уже стоит шапка сайта. */
.hs-day{
  padding:12px 0 4px;
  color:var(--text-dim,#BBD6F5);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
}
.hs-day:first-child{padding-top:4px}
.hs-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;gap:12px;
  padding:7px 2px;
  border-top:1px solid rgba(255,255,255,.10);
}
/* Первая строка дня идёт сразу под заголовком — линия там лишняя. */
.hs-day + .hs-row{border-top:0}
.hs-row:hover{background:rgba(255,255,255,.05)}
/* Значок — арт сайта (ящик, монеты, «+» и «−» из шапки), и плашка ему
   не нужна: у эмодзи её ставили потому, что на синем терялся прозрачный
   символ, а нарисованные предметы с чёрной обводкой читаются сами. */
.hs-ic{
  width:30px;height:30px;object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(3,20,60,.55));
}
.hs-main{min-width:0}
/* Заголовок приходит с сервера и бывает длинным («Открытие: Ящик
   Ностальгии ×10»): переносим, а не режем многоточием — из обрезанной
   строки не понять, за что списали. */
.hs-title{color:#fff;font-weight:800;font-size:.88rem;line-height:1.25;overflow-wrap:anywhere}
.hs-meta{display:flex;flex-wrap:wrap;gap:0 7px;margin-top:1px;
  color:var(--text-dim,#BBD6F5);font-size:.71rem;font-weight:600}
.hs-after::before{content:'·';margin-right:7px}
.hs-amount{font-weight:900;font-size:.95rem;line-height:1.1;white-space:nowrap}
/* Знак суммы цветом, а не только плюсом: список читают взглядом сверху
   вниз, и зелёное/красное отвечает на «куда ушли деньги» раньше, чем
   успеваешь прочитать заголовок. Зелёный и красный — те же, что у кнопок
   .sec-btn.primary и .sec-btn.danger. */
.is-up .hs-amount{color:#7BE87B}
.is-down .hs-amount{color:#FF8A8A}
/* Событие без денег (прокрут апгрейдера предметами) — строка есть, суммы
   нет. Место под неё не держим: пустая колонка выглядела бы как
   потерянное число. */
.is-flat .hs-amount{display:none}
.hs-empty{padding:26px clamp(16px,3vw,24px) 30px;text-align:center}
.hs-empty-title{
  color:#fff;font-weight:900;font-size:1.05rem;margin-bottom:8px;
  font-family:"MegaBoxFont","Arial Black","Segoe UI",system-ui,sans-serif;
  letter-spacing:.04em;text-shadow:var(--so),var(--extrude);
}
.hs-empty-text{color:var(--text-dim,#BBD6F5);font-size:.88rem;font-weight:600;
  max-width:46ch;margin:0 auto;line-height:1.45}
.hs-more{margin:8px clamp(16px,3vw,24px) 4px;width:calc(100% - 2 * clamp(16px,3vw,24px))}

/* =====================================================================
   ИНВЕНТАРЬ
   ===================================================================== */
.pf-sellall{
  margin-left:auto;cursor:pointer;border-radius:16px;padding:12px 22px 16px;
  display:inline-flex;align-items:center;gap:9px;
  font-size:.95rem;color:#fff;
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  border:3px solid rgba(0,0,0,.18);
  box-shadow:0 5px 0 #A96A05, 0 10px 14px -6px rgba(2,10,45,.6);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.pf-sellall:hover{filter:brightness(1.08)}
.pf-sellall:active{transform:translateY(5px);box-shadow:0 0 0 #A96A05}
.pf-sellall-sum{color:var(--gold,#FFE45C)}

.inv-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:18px;
  padding:22px clamp(16px,3vw,24px) 26px;
}
.inv-grid.is-gone{opacity:0;transform:scale(.98);transition:opacity .3s ease, transform .3s ease}

/* Карточка предмета собрана по карточке ящика с витрины: обводка
   #000E3C в 3 px, ВДВОЕ толще снизу, и жёсткая тень 0 6px 0 под ней.
   Цвет редкости остался — но не как свечение по всей карточке, а как
   полоса по низу и кант площадки арта: на синем теле цветной ореол
   размазывался в грязь. */
.inv-card{
  position:relative;overflow:hidden;border-radius:18px;padding:14px 12px 14px;
  background:linear-gradient(180deg,#1a63d8 0%,#0b2f7f 100%);
  border:3px solid #000E3C;border-bottom-width:6px;
  box-shadow:0 6px 0 rgba(0,0,22,.42);
  /* backwards, а НЕ both. При `both` кадр `to{transform:none}` остаётся
     на элементе и после конца анимации, а анимационные значения весомее
     обычных объявлений — карточка переставала подниматься на наведении
     (так было и в прежней вёрстке). backwards держит только стартовый
     кадр до начала и отпускает элемент, когда анимация закончилась. */
  animation:inv-in .45s cubic-bezier(.2,.9,.25,1.1) backwards;
  transition:filter .2s ease, transform .12s ease, box-shadow .12s ease, opacity .26s ease;
}
@keyframes inv-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.inv-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--rc);opacity:.95;
}
.inv-card:hover{filter:brightness(1.08);transform:translateY(-3px);
  box-shadow:0 9px 0 rgba(0,0,22,.42)}
.inv-card.is-gone{opacity:0;transform:scale(.9) translateY(6px)}

/* «Ультралегендарный» — радужная обводка вместо чёрной. Тело задаётся
   padding-box, рамка — border-box, поэтому градиент виден только на
   канте и не заливает карточку. */
.inv-card.is-ultra{
  border-color:transparent;
  background:linear-gradient(180deg,#1a63d8 0%,#0b2f7f 100%) padding-box,
             linear-gradient(120deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#a855f7) border-box;
}
.inv-card.is-ultra::after{background:linear-gradient(90deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#a855f7)}

/* Площадка арта — светлое поле, как тело карточки ящика на витрине, с
   кантом цвета редкости. */
.inv-thumb{
  --tile:92px;position:relative;width:100%;height:112px;
  display:grid;place-items:center;margin:0 0 10px;
  border-radius:14px;
  background:radial-gradient(60% 60% at 50% 45%,
    color-mix(in srgb,var(--rc) 34%, #0d3f9e) 0%,
    color-mix(in srgb,var(--rc) 12%, #0a2f7c) 70%, #092a70 100%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 55%, transparent);
}
.inv-thumb .lt-inner{position:relative;width:92px;height:92px;display:grid;place-items:center}

.inv-value{
  width:-moz-fit-content;width:fit-content;margin:0 auto 9px;position:relative;z-index:2;
  display:flex;align-items:center;gap:7px;padding:5px 14px 8px;border-radius:999px;
  background:linear-gradient(180deg,#FFD84D,#F5A524);color:#fff;
  border:3px solid rgba(0,0,0,.18);
  font-size:.92rem;
  box-shadow:0 4px 0 #A96A05;
}
.inv-name{text-align:center;font-size:.9rem;color:#fff;margin-bottom:7px}
.inv-rar{
  text-align:center;font-size:.66rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rc);margin-bottom:6px;
}
.inv-date{text-align:center;font-size:.72rem;font-weight:600;
  color:var(--text-dim,#BBD6F5);opacity:.85;margin-bottom:13px}

.inv-actions{display:flex;gap:9px}
/* ПОДПИСИ НАБРАНЫ КАК ВЕЗДЕ НА САЙТЕ — шрифтом сцены с обводкой .1em и
   выдавкой (та же связка, что у .bs-ink и у кнопок витрины). Раньше это
   были единственные кнопки профиля обычным Manrope без обводки: белые
   буквы ложились прямо на светлую заливку — на золотой «Продать» контраст
   белого с #FFD84D почти нулевой, на зелёной и фиолетовой не лучше, — и
   подпись читалась хуже, чем на соседней «Продать все предметы», которая
   обводку имеет. Кант плашки заодно потемнел с rgba(0,0,0,.18) до синего
   чернильного: светлая рамка на светлой заливке не отделяла кнопку от
   карточки. */
.inv-btn{
  /* min-width:0 обязателен: у flex-элемента минимум по умолчанию равен
     ширине содержимого, и длинная подпись не ужималась, а вылезала за
     карточку — на узкой колонке кнопка обрезалась. */
  flex:1 1 0;min-width:0;
  cursor:pointer;border-radius:13px;padding:10px 8px 13px;
  font-family:"MegaBoxFont","Arial Black","Segoe UI",system-ui,sans-serif;
  font-weight:900;font-size:.86rem;line-height:1.1;
  letter-spacing:.04em;word-spacing:-.09em;   /* трекинг — см. .bs-ink */
  color:#fff;border:3px solid rgba(2,12,45,.5);
  text-shadow:var(--so),var(--extrude);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
/* Подпись белая, а не коричневая: с обводкой тёмная краска на золоте
   сливалась бы с самой обводкой в одно пятно. Ровно так набрана
   золотая «Апгрейд» на экране апгрейдера. */
.inv-sell{background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:0 4px 0 #A96A05}
.inv-sell:hover{filter:brightness(1.08)}
.inv-sell:active{transform:translateY(4px);box-shadow:0 0 0 #A96A05}

/* «Апгрейд» — отдельной строкой под парой «Вывести/Продать»: действие
   другого рода (предмет уходит в ставку, а не в деньги), и втроём в
   одном ряду кнопки не помещаются. Цвет фиолетовый — свой, чтобы
   случайное нажатие вместо «Продать» было исключено. */
.inv-upgrade{
  display:block;width:100%;margin-top:9px;
  background:linear-gradient(180deg,#A66BFF,#6A31D8);
  box-shadow:0 4px 0 #43169b;
}
.inv-upgrade:hover{filter:brightness(1.08)}
.inv-upgrade:active{transform:translateY(4px);box-shadow:0 0 0 #43169b}

/* Счётчик стопки. Одинаковые предметы складываются (Inventory.add), и без
   этой цифры две монеты и двести выглядели бы одинаково. */
.inv-qty{
  position:absolute;right:8px;bottom:8px;
  min-width:28px;padding:2px 8px 4px;border-radius:999px;
  background:rgba(3,10,32,.82);border:2px solid rgba(255,255,255,.22);
  font-weight:800;font-size:13px;line-height:1.25;color:#fff;text-align:center;
  pointer-events:none;
}

/* ---------- пустой инвентарь ----------
   Ящик, свечение и тень «на полу» — те же, что в апгрейдере: замеры с
   референсного кадра апгрейдера расписаны в css/upgrader.css («пустой
   инвентарь»). Здесь плита шире (это целая полоса профиля, а не колонка
   выбора), поэтому картинка крупнее, а свечение легло поверх заливки
   плиты, а не вместо неё. */
.inv-empty{
  /* в vw, а не в процентах плиты — см. css/upgrader.css */
  --art:clamp(150px,17vw,220px);
  text-align:center;margin:22px clamp(16px,3vw,24px) 26px;
  padding:48px 24px 54px;border-radius:22px;
  background:
    radial-gradient(
      calc(var(--art) * 1.80) calc(var(--art) * 1.02) at 50% calc(48px + var(--art) * .77),
      rgba(0,130,247,.86)  0%,
      rgba(0,120,240,.70) 32%,
      rgba(0, 98,226,.50) 48%,
      rgba(0, 74,210,.30) 62%,
      rgba(0, 54,184,.12) 78%,
      rgba(0, 36,163,  0) 100%),
    linear-gradient(180deg,rgba(24,72,166,.72),rgba(9,36,102,.72));
  border:3px dashed rgba(255,255,255,.22);
  animation:inv-in .45s ease backwards;
}
.inv-empty-art{
  position:relative;width:var(--art);aspect-ratio:1;
  /* нижнее поле внутри файла — см. css/upgrader.css */
  margin:0 auto calc(var(--art) * -.198);display:grid;place-items:center;
  animation:cx-bob 4.6s ease-in-out infinite;
}
.inv-empty-art::before{
  content:'';position:absolute;left:53.4%;top:73.7%;
  width:72%;height:15%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(0,8,34,.45) 0%, rgba(0,8,34,.45) 55%, rgba(0,8,34,0) 100%);
}
.inv-empty-art img{position:relative;width:100%;height:100%;object-fit:contain}
.inv-empty-title{font-size:1.9rem;color:#fff;margin-bottom:12px;
  text-shadow:var(--extrude), 0 0.14em 0.22em rgba(0,8,34,.55)}
.inv-empty-text{color:var(--text-dim,#BBD6F5);font-weight:600;
  max-width:44ch;margin:0 auto 26px;line-height:1.6;
  text-shadow:0 2px 4px rgba(0,8,34,.55)}
/* Кнопка приезжает из case.css классом .rs-btn — перекрашиваем в зелёную
   плитку витрины, как «Забрать за сегодня» на главной. */
.inv-empty-btn{
  min-width:220px;max-width:320px;
  padding:13px 24px 17px;border-radius:16px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1rem;letter-spacing:.04em;color:#fff;
  text-shadow:var(--so),var(--extrude);
  background:linear-gradient(180deg,var(--green-1,#63E06E),var(--green-2,#34B747));
  border:3px solid rgba(0,0,0,.18);
  box-shadow:0 5px 0 var(--green-sh,#1C7A2E), 0 10px 14px -6px rgba(2,10,45,.6);
}
.inv-empty-btn:hover{filter:brightness(1.08);transform:none}
.inv-empty-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--green-sh,#1C7A2E)}

/* =====================================================================
   ДИАЛОГ ВВОДА
   ---------------------------------------------------------------------
   Живёт в <body>, а не внутри .pf-backdrop, поэтому оформление у него
   своё — то же, что у карточки входа в auth.css: синий градиент, обводка
   и жёсткая нижняя тень. Поля (.au-field / .au-input) приезжают оттуда
   же и уже набраны в этом стиле, править их не нужно.
   ===================================================================== */
.pf-ask-backdrop{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(47,131,253,.30), transparent 60%),
    rgba(3,12,40,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:inv-in .25s ease both;
}
.pf-ask{
  width:min(430px,100%);padding:28px 26px 24px;border-radius:20px;
  background:linear-gradient(180deg,#2555bb 0%,#12327f 60%,#0c2360 100%);
  border:3px solid rgba(0,30,170,.55);
  box-shadow:0 10px 0 #07184a, 0 40px 90px -30px rgba(0,0,0,.9);
  display:flex;flex-direction:column;gap:14px;
  color:#fff;font-family:'Manrope',sans-serif;
  /* Поля из auth.css смотрят на эти переменные — там они объявлены на
     .au-backdrop, которого здесь нет. */
  --cx-text:#FFFFFF; --cx-dim:#BBD6F5;
}
.pf-ask h3{font-size:1.25rem;margin-bottom:2px;color:#fff;text-transform:uppercase}
.pf-ask-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.pf-ask-actions .sec-btn{padding:12px 20px 15px}

/* =====================================================================
   АДАПТИВ / ДОСТУПНОСТЬ
   ===================================================================== */
@media (max-width:720px){
  /* Верхнее поле остаётся в долях полосы шапки: в пикселях кнопка
     «назад» уехала бы под свисающую из шапки плашку профиля. */
  .pf{padding:calc(var(--head-h) * 2.64) 14px 70px;gap:16px}
  .pf-header{gap:18px;padding:20px 18px 22px}
  .pf-ava{width:88px;height:88px;border-radius:18px}
  .pf-ava-fallback{font-size:2.1rem}
  .pf-sellall{margin-left:0;width:100%;justify-content:center}
  /* «Показать/Свернуть» — во всю ширину под заголовком, как «Продать все
     предметы» в шапке инвентаря. Рядом с названием она помещается впритык
     (на 375 px не хватает двух пикселей), а прижатая к правому краю на
     своей строке выглядела бы оброненной. Заодно по ней проще попасть
     пальцем. */
  .hs-head .hs-toggle{flex:1 1 100%;margin-left:0;justify-content:center}
  .sec-actions{margin-left:0;width:100%}
  .sec-btn{flex:1}
  /* Тумблер во всю ширину не растягивается: кнопки раздела там подписи
     («Сменить пароль»), а это фигура постоянного размера — растянутая,
     она превратилась бы в полосу с шариком в углу. Остаётся справа от
     подписи строки, как на большом экране. */
  .pf-stream .sec-actions{width:auto;margin-left:auto}
  .pf-sec-foot .sec-btn{flex:1}
  .inv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  /* Ниже 480 auto-fill срывается в ОДНУ колонку, причём с обидным
     промахом: на 375 px сетке достаётся 309 px, а двум колонкам по
     150 с просветом 14 нужно 314 — не хватает пяти пикселей, и каждый
     предмет разворачивается во всю ширину. Пять вещей давали 8 000 px
     прокрутки. Здесь колонок ровно две; на 481 auto-fill даёт их же и
     почти той же ширины, так что на границе ничего не прыгает. */
  @media (max-width:480px){
    .inv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
      padding:16px 12px 20px}
    /* Площадка арта задана в пикселях и на узкой колонке съедала бы
       половину карточки: 112 из 125. Долей ширины она садится вместе
       с колонкой. */
    .inv-thumb{height:auto;aspect-ratio:1/1}
    .inv-btn{font-size:.8rem;padding:9px 6px 12px;border-width:2px}
  }
  /* В колонку 150 px две плитки в строку не встают: только на подписи
     «Вывести» и «Продать» уходит 104 px, а с полями и обводками — 140.
     Ставим их друг под другом, а не мельчим шрифт до нечитаемого. */
  .inv-actions{flex-direction:column}
  /* Строка журнала остаётся тремя колонками и в узкой ширине: сумма
     справа — то, за чем в выписку смотрят, и уводить её под текст
     нельзя. Место под неё освобождают значок и просветы, а заголовок
     переносится на второй ряд — он и задуман переносимым. */
  .hs-row{grid-template-columns:26px minmax(0,1fr) auto;gap:9px}
  .hs-ic{width:26px;height:26px}
  .hs-title{font-size:.85rem}
  /* Ник в шапке САЙТА, не в профиле: ниже 720 плашка ужимается до
     квадрата аватара (см. site.css). */
  .profile-name{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-backdrop,.pf,.inv-card,.inv-empty,.inv-empty-art,.pf-ask-backdrop,.hs-chev,
  .pf-switch-track,.pf-switch-knob{
    transition:none!important;animation:none!important;
  }
}