/* ============================================================
Профиль игрока — новый дизайн (resources/views/pages/profile_redesign.blade.php).
Раньше эти правила висели инлайном в самом шаблоне и уезжали
к игроку заново при каждой загрузке профиля — 62,7 КБ поверх
разметки, которые браузер не мог закэшировать.
Подключается через @push('styles') в шаблоне, адрес с ?v=md5:
после правки хэш меняется сам, старая версия из кэша не залипает.
Правила задуманы под .pf — общие имена (.pf-head, .pf-chip и т.д.)
живут только внутри этого контейнера, за его пределы не выходят.
============================================================ */
/* Мобильные — основной сценарий этой страницы: 37% посетителей сайта
заходят с телефона, и /profile/{id} у них самая посещаемая страница.
Поэтому базовые стили пишутся под узкий экран, а десктоп добирается
медиазапросами вверх, а не наоборот. */
/* Шкала текста. Раньше на странице было 21 разное значение прозрачности
для цвета текста — от .22 до .88, — и восемь из них давали меньше 4.5:1:
«Сортировка» давала 2.7:1 при пороге 4.5, неактивные варианты сортировки,
счётчики вкладок и подпись «на счету» — 3.7:1. Разница между .44 и .45
глазом не видна, но каждое такое значение — отдельное решение, которое
потом надо помнить.
Теперь уровней четыре, и самый тихий даёт 7.4:1 — это проходит даже AAA
(порог 7:1). Иерархию держат кегль и насыщенность, а не прозрачность:
11px против 13px против 23px и веса от 600 до 900 разводят уровни
надёжнее, чем 15% альфы.
t5 — не текст, а значки-украшения в пустых карточках: к ним применяется
порог 3:1 для нетекстовых элементов, и .45 даёт 4.4:1 с запасом. */
.pf{--pf-t2:rgba(255,255,255,.85); /* 14.5:1 — активное состояние, ховер */
--pf-t3:rgba(255,255,255,.75); /* 11.4:1 — вторичный текст, плашки */
--pf-t4:rgba(255,255,255,.60); /* 7.4:1 — подписи, счётчики */
--pf-t5:rgba(255,255,255,.45); /* 4.4:1 — значки-заглушки */
max-width:1000px;margin:0 auto;padding:20px 14px 56px;}
/* --- шапка --- */
/* Шапка без рамки и фона: раньше это была карточка, из-за чего страница
начиналась с прямоугольника внутри прямоугольника. Держат её теперь
воздух и типографика, а не границы. */
.pf-head{display:flex;flex-direction:column;align-items:center;text-align:center;
gap:16px;padding:6px 0 22px;}
/* display:block — чтобы обёртка-ссылка была ровно по картинке: у строчной
img высота строки считается по базовой линии, и снизу у оставалась бы
щель. Родительский line-height:0 её гасил, но только для картинки. */
.pf-head__avatar{display:block;width:88px;height:88px;border-radius:50%;
object-fit:cover;border:2px solid rgba(255,152,0,.45);
background:rgba(255,255,255,.05);flex-shrink:0;}
.pf-head__main{min-width:0;width:100%;}
.pf-head__name{font-size:22px;font-weight:900;color:#fff;margin:0 0 8px;line-height:1.2;
word-break:break-word;}
/* Интервал крупнее обычного: разделителей между пунктами нет,
отделяет их именно расстояние. */
/* 12px, а не 18. Интервал был крупнее обычного, потому что у пунктов
не было разделителей — но плашки давно с рамкой и подложкой, они и так
читаются раздельно, а лишние 6px × 5 промежутков — это 30px, которых
ряду не хватало, чтобы уместиться в 824px строкой. */
.pf-head__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:8px 12px;font-size:13px;color:var(--pf-t3);margin-top:12px;}
/* Кнопки разделов — не плашки под ником, а отдельные действия, и раньше
ряды разделяли одинаковые 14px: второй ряд читался как продолжение
первого. Отделяем воздухом и волосяной чертой. */
.pf-head__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-top:18px;padding-top:16px;
border-top:1px solid rgba(255,255,255,.07);}
.pf-act{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
border-radius:9px;font-size:12px;font-weight:700;text-decoration:none;
color:var(--pf-t2);background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.2);transition:border-color .2s,color .2s;}
.pf-act:hover{color:#fff;border-color:rgba(255,152,0,.5);text-decoration:none;}
.pf-act--admin{color:#90caf9;border-color:rgba(33,150,243,.35);background:rgba(33,150,243,.1);}
/* Привязка ВК. Цвет фирменный вэкашный, а не оранжевый: оранжевый —
цвет денег на сайте, и «получить деньги» не должно путаться
с «привязать соцсеть». Отделка та же, что была у плашки. */
.pf-act--vk{color:#a9cfff;background:rgba(0,119,255,.14);border-color:rgba(0,119,255,.4);}
a.pf-act--vk:hover{color:#fff;background:rgba(0,119,255,.34);border-color:#0077ff;}
.pf-act--vk img{display:block;opacity:1;}
/* Сам бонус — отдельная плашка тёплого цвета: это деньги, и в синей
кнопке они читаются как награда, а не как часть названия соцсети.
Медленный ореол тянет взгляд, но не мельтешит. */
.pf-act__bonus{font-weight:800;font-size:11px;line-height:1;
color:#1d1608;background:#ffb74d;border-radius:5px;padding:3px 7px;
animation:pf-bonus 2.8s ease-in-out infinite;}
a.pf-act--vk:hover .pf-act__bonus{background:#ffc97a;animation:none;}
button.pf-act{font-family:inherit;cursor:pointer;}
.pf-alert{margin-top:10px;padding:2px 0 2px 14px;border-left:2px solid #ef5350;
font-size:13px;font-weight:600;color:#ef5350;}
/* Ссылки и статусы в строке под именем — не кнопки, поэтому и выглядят
как текст, а не как ещё один прямоугольник. */
/* Пункты меты. Разделителей нет — роль «границы» играет иконка каждого
пункта плюс увеличенный интервал. */
/* Вторичный текст держим на читаемом уровне: .45 и 12px на тёмном фоне
при низкой яркости экрана приходилось разглядывать. */
/* Плашки строки под именем. Форма у всех одна, поведение — разное:
справочные без ховера и курсора, ссылки и действия с ними. */
/* Текст .75, а не .65. Формально и прежнее значение проходило WCAG —
белый на 65% поверх чёрного даёт 8,6:1 при пороге 4,5, — но плашки
набраны 11-12 кеглем, и на телефоне при низкой яркости их приходилось
разглядывать. Контраст считается для идеального экрана, а читают
с реального. */
.pf-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;
background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
color:var(--pf-t3);text-decoration:none;font-family:inherit;
transition:border-color .2s,color .2s,background .2s;}
/* Значки поднимаем вместе с текстом, иначе они начинают отставать */
.pf-chip i{font-size:11px;opacity:.9;}
/* Логотипы сервисов — 14px, служебные значки — 11px. Правило появилось
из-за пары Steam/ВК: обе плашки про одно и то же, статус привязки,
но логотип ВК рисуется картинкой 14×14, а Steam был шрифтовым глифом
на 11px — 10,7px чернил против 14. Они читались как разные категории.
Цветным Steam не делаем: его фирменные цвета #171a21 и #1b2838 почти
чёрные и на нашем фоне пропадают, поэтому его везде рисуют белым.
Селектор из двух классов — иначе .pf-chip i (класс + тип) окажется
специфичнее и кегль не применится. */
.pf-chip .fab{font-size:14px;}
/* Баланс в общем ряду. Цветом не выделяем — оранжевый тут читался
как кнопка. Отличают его только порядок (первый) и насыщенность
самой цифры: это значение, а не подпись. */
.pf-chip--balance b{font-weight:700;color:var(--pf-t2);letter-spacing:-.01em;}
.pf-chip img{display:block;opacity:.9;}
/* Справочные: не кликаются и не притворяются */
.pf-chip--static{cursor:default;}
/* Копируемые: обычная плашка, но с курсором-рукой и подсказкой на ховере */
.pf-chip--copy{cursor:pointer;}
button.pf-chip--copy:hover i{color:#ff9800;opacity:1;}
/* Привязано: зелёная галочка справа. Селектор с типом обязателен —
у .pf-chip i специфичность (0,1,1) против (0,1,0) у одного класса,
и объявленные здесь 10px до сих пор не применялись: галочка молча
рисовалась одиннадцатым кеглем, как обычный значок. */
.pf-chip i.pf-chip__ok{color:#81c784;opacity:1;font-size:10px;}
/* Привязанный сервис — не просто плашка с галочкой. Steam и ВК должны
читаться парой, а класс pf-chip--on до этого не имел ни одного правила:
всё различие держала одна галочка. Оттенок едва заметный — ряд мы
только что успокаивали, и второй яркий акцент тут не нужен. */
.pf-chip--on{border-color:rgba(129,199,132,.28);background:rgba(129,199,132,.06);}
/* Кликабельные */
a.pf-chip:hover,button.pf-chip:hover{color:#fff;border-color:rgba(255,255,255,.28);
background:rgba(0,0,0,.45);text-decoration:none;}
/* Ниже общего ховера намеренно: специфичность у обоих одинаковая (0,2,1),
и стоя выше это правило просто не срабатывало — Steam на наведении
терял зелёный и возвращался к белой рамке. */
a.pf-chip--on:hover{border-color:rgba(129,199,132,.5);background:rgba(129,199,132,.12);}
/* Пульсация бонуса за привязку ВК — сама кнопка живёт в ряду действий
(.pf-act--vk), сюда вынесены только кадры анимации. */
@keyframes pf-bonus{
0%,72%,100%{box-shadow:0 0 0 0 rgba(255,183,77,.5);}
36%{box-shadow:0 0 0 5px rgba(255,183,77,0);}
}
/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce){
.pf-act__bonus{animation:none;}
}
/* Действие — светлее справочных, на ховере уходит в оранжевый */
.pf-chip--act{cursor:pointer;color:var(--pf-t2);
border-color:rgba(255,255,255,.18);}
button.pf-chip--act:hover{color:#ff9800;border-color:rgba(255,152,0,.55);
background:rgba(255,152,0,.12);}
/* justify-content:center — на время подсказки скрипт фиксирует ширину
плашки по прежнему тексту, а «Скопировано!» короче «Скопировать
ссылку», и в широкой коробке оно прижималось к левому краю. */
.pf-chip.is-done{color:#81c784;border-color:rgba(129,199,132,.45);
background:rgba(129,199,132,.12);justify-content:center;}
.pf-chip.is-done i{color:#81c784;opacity:1;}
/* Кнопка синхронизации со Steam — на краю аватарки */
.pf-head__ava{position:relative;flex-shrink:0;line-height:0;}
/* Ссылка в Steam поверх аватарки: на наведении картинка притухает
и на ней проступает логотип.
Завеса кладётся ровно по краю картинки, без отступа, а оранжевое кольцо
рисуется заново поверх неё внутренней тенью. Сначала было наоборот —
завеса с отступом в 2px, чтобы не закрывать кольцо, — но по краю круга
оставался незатемнённый ободок толщиной меньше пикселя. Дело в
сглаживании: у двух отдельно нарисованных кругов края растушёвываются
независимо, прозрачность завесы спадает раньше, чем кончается картинка,
и разница видна. Совпадающие края эту щель убирают, а кольцо от
перерисовки только выигрывает — оно перестаёт притухать вместе
с картинкой (потому и .55 вместо .45: поверх затемнения тот же цвет
читался бы тусклее).
Стороны расписаны по одной, без inset: shorthand появился в Chrome 87,
а посетители сайта заходят и с более старого.
grid + place-items вместо flex — по той же причине, что и у кнопки
синхронизации: у значка внутри флекса остаётся базовая линия
и он встаёт чуть ниже центра. */
.pf-head__link{display:block;position:relative;border-radius:50%;}
.pf-head__veil{position:absolute;top:0;left:0;right:0;bottom:0;
display:grid;place-items:center;border-radius:50%;
background:rgba(0,0,0,.55);color:#fff;font-size:30px;line-height:1;
box-shadow:inset 0 0 0 2px rgba(255,152,0,.55);
opacity:0;transition:opacity .18s;}
.pf-head__link:hover .pf-head__veil{opacity:1;}
/* grid + place-items вместо flex: у inline-svg внутри flex остаётся
базовая линия, из-за неё значок стоял не по центру, а scale на ховере
этот сдвиг ещё и раскачивал. line-height:1 обязателен — родитель
.pf-head__ava обнуляет его ради картинки. Масштабирования на ховере
больше нет, меняется только цвет. */
.pf-sync{position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;
border-radius:50%;background:#1b1825;border:2px solid #ff9800;color:#ff9800;
display:grid;place-items:center;line-height:1;cursor:pointer;padding:0;
box-shadow:0 4px 14px rgba(0,0,0,.45);transition:background .15s,color .15s;}
.pf-sync svg{display:block;}
.pf-sync:hover{background:#ff9800;color:#1b1825;}
.pf-sync.is-loading{pointer-events:none;}
.pf-sync.is-loading svg{animation:pf-spin .8s linear infinite;}
.pf-sync.is-done{border-color:#81c784;color:#81c784;}
.pf-sync::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;
transform:translateX(-50%);white-space:nowrap;background:#15131b;color:#fff;
border:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:600;
padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;
transition:opacity .15s;box-shadow:0 6px 18px rgba(0,0,0,.45);z-index:20;}
.pf-sync:hover::after{opacity:1;}
@keyframes pf-spin{to{transform:rotate(360deg);}}
/* --- статистика --- */
/* Единственные плитки с рамкой на странице — опорные числа профиля.
Внутреннего пространства меньше, само число крупнее, подпись мельче
и приглушённее: работает контраст размеров, а не толщина коробки. */
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:10px;margin-top:4px;}
/* Радиус 14 — общий для всех коробок страницы: денежный блок, карточки
витрины и памятки скруглены так же. У плиток он был 12, и ряд из трёх
выбивался из общего ритма ровно настолько, чтобы это было заметно. */
.pf-stat{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
border-radius:14px;padding:11px 10px;text-align:center;}
.pf-stat b{display:block;font-size:23px;font-weight:800;color:#fff;line-height:1.15;
margin-bottom:2px;white-space:nowrap;letter-spacing:-.01em;}
.pf-stat b.is-long{font-size:18px;}
/* Сумма дропа — единственное денежное число в ряду, поэтому тёплый цвет.
Ровная заливка, без градиента: любой перепад по высоте цифр читался
как украшение, а плитки статистики должны читаться как данные. */
.pf-stat--money b{color:#ffb74d;}
.pf-stat span{font-size:11px;letter-spacing:.02em;color:var(--pf-t4);}
/* --- любимый кейс --- */
.pf-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px;}
.pf-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
border-radius:14px;padding:16px;text-decoration:none;display:block;
transition:border-color .2s;}
/* border-bottom-color повторяем явно: сокращение border-color выше
стёрло бы цветную черту редкости на время наведения. */
a.pf-card:hover{border-color:rgba(255,152,0,.4);border-bottom-color:var(--pf-glow);
background:rgba(255,255,255,.06);text-decoration:none;}
a.pf-card:hover .pf-card__title{color:#fff;}
.pf-card__label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--pf-t4);margin-bottom:12px;}
.pf-card__row{display:flex;align-items:center;gap:14px;}
.pf-card__img{width:64px;height:48px;object-fit:contain;flex-shrink:0;}
.pf-card__text{min-width:0;}
.pf-card__title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-card__price{font-size:13px;font-weight:800;color:var(--pf-glow,#ff9800);}
/* Приписка справа от цифры — «из кейса X», «28% всех открытий» */
.pf-card__from{margin-left:8px;font-size:11px;font-weight:600;
color:var(--pf-t4);}
/* Общая отделка обеих карточек: метка с иконкой, цветная нижняя черта,
свечение вокруг картинки. Цвет один на карточку — переменная --pf-glow.
Свечение именно псевдоэлементом обёртки: отдельный div тут уже стоял
и правило для дочерних элементов сбивало ему position:absolute —
блок вставал в поток и растягивал страницу на всю высоту. */
.pf-card--best,.pf-card--fav{border-bottom:2px solid var(--pf-glow);}
.pf-card--best .pf-card__label,.pf-card--fav .pf-card__label{
display:flex;align-items:center;gap:7px;}
.pf-card--best .pf-card__label i,.pf-card--fav .pf-card__label i{
color:var(--pf-glow);font-size:11px;}
.pf-card__thumb{position:relative;display:grid;place-items:center;flex-shrink:0;
width:72px;height:56px;}
.pf-card__thumb::before{content:'';position:absolute;inset:-12px;
background:radial-gradient(circle,var(--pf-glow) 0%,transparent 68%);
opacity:.3;pointer-events:none;}
.pf-card__thumb .pf-card__img{position:relative;width:72px;height:56px;}
/* Картинка не загрузилась. Класс вешает onerror у самой картинки, она же
себя и убирает, — иначе браузер рисует свой значок битого изображения,
а он в тёмной карточке читается как сломанная страница.
Значок берём по смыслу карточки: коробка для кейса, самоцвет для скина.
Свечение под ним остаётся — это отделка карточки, а не картинки. */
.pf-card__thumb--broken::after{position:relative;font-size:24px;
font-family:'Font Awesome 6 Free';font-weight:900;font-style:normal;
-webkit-font-smoothing:antialiased;color:var(--pf-t5);}
.pf-card--fav .pf-card__thumb--broken::after{content:'\f49e';}
.pf-card--best .pf-card__thumb--broken::after{content:'\f3a5';}
/* --- лучший дроп: отделка внутри той же компактной карточки --- */
/* Цвет задаёт класс редкости — тот же набор, что у карточек дропа.
Высота карточки при этом не меняется: строение общее с .pf-card--fav. */
.pf-card--best{--pf-glow:#7fc4ff;}
.pf-card--best.milspec{--pf-glow:#3d8bf2;}
.pf-card--best.restricted{--pf-glow:#9d3cf5;}
.pf-card--best.classified{--pf-glow:#f23cb0;}
.pf-card--best.covert{--pf-glow:#f24f28;}
.pf-card--best.knife,.pf-card--best.rare{--pf-glow:#ffc600;}
/* Любимый кейс: редкости у кейса нет, цвет фирменный оранжевый */
.pf-card--fav{--pf-glow:#ff9800;}
/* margin к пробелу между «AK-47» и названием скина: одного пробела мало,
части названия слипались. */
.pf-best__weapon{color:var(--pf-t4);font-weight:600;margin-right:3px;}
.pf-card--best .pf-best__price{color:var(--pf-glow);}
/* --- список дропа --- */
/* scroll-margin-top — чтобы при переходе по #drop заголовок не уезжал
под шапку сайта. */
.pf-inv{margin-top:26px;scroll-margin-top:90px;}
/* Панель управления списком: заголовок слева, вкладки, порядок справа —
всё на одной черте. flex-wrap обязателен: одной строкой панель встаёт
от 945px ширины окна (у рекордсмена сайта с 6183 дропами — от 963px),
а ниже сортировка целиком съезжает под вкладки вместо того, чтобы
их сплющивать. align-items:center — про сортировку: она сама себе
плашка и центрируется по ряду. Заголовок и вкладки из этого
выравнивания выходят и садятся на черту, см. ниже. */
/* padding-bottom — воздух между чертой и тем, что на ней не стоит.
Рост панели задают вкладки (36px), плашка сортировки ростом 32px
и центрируется по ряду, так что снизу у неё оставалось 1,5px до черты —
черта подпирала плашку и в этом месте читалась как лишняя. Восемь
пикселей поля отодвигают её; вкладки при этом остаются на черте —
их отрицательное поле снизу увеличено ровно на столько же. Отступ
до карточек не меняется: поле внутри рамки, margin снаружи. */
.pf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
margin:0 0 24px;padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,.09);}
/* Когда под панелью есть подстрочник, отступ до карточек держит он */
.pf-bar--sub{margin-bottom:0;}
/* Заголовок стоит на черте вместе с вкладками, а не центрируется по ряду:
иначе его базовая линия оказывалась ниже, чем у названий вкладок. Кегли
разные (20px против 13px), а при выравнивании по центру базовая линия
отстоит от середины коробки тем дальше, чем крупнее шрифт, — расхождение
выходило 2,4px и читалось как «заголовок просел».
Поэтому: line-height задан явно (иначе наследуется жёсткие 20px от body
и коробка у 20px шрифта схлопывается), низ прижат к низу панели, а
padding поднимает базовую линию ровно на уровень названий вкладок —
расхождение остаётся 0,1px. Считано по метрикам Roboto: ascender .9277em,
descender .2441em, высота вкладки 36px с 3px подчёркиванием внутри,
box-sizing:border-box из глобального сброса. Пока панель стояла без
нижнего поля, здесь было 9px; с полем в 8px вкладки съехали вниз
относительно низа панели, и подпор заголовку почти не нужен. */
.pf-inv__title{font-size:17px;font-weight:800;color:#fff;margin:0;
line-height:1.2;align-self:flex-end;padding-bottom:1px;}
/* Подстрочник под чертой: сумма инвентаря и/или пояснение про семь дней.
space-between разводит их по краям строки: сумма встаёт под вкладками,
к которым относится, подсказка — под сортировкой. Рядом друг с другом
они сливались в одну фразу: одинаковый кегль, одинаковый цвет, и глаз
читал «Доступно к выводу: 18 ₽ Вывести можно 7 дней…» одной строкой.
Тонкая черта между ними эту склейку не разбивала, только добавляла
лишнюю вертикаль — теперь их разделяет 139px воздуха при ширине
контейнера в 972px (81px даже у самого крупного инвентаря на сайте).
space-between, а не margin-left:auto у подсказки: при переносе (окно
уже ~880px) подсказка остаётся одна на второй строке, и auto прижал бы
её к правому краю — а space-between ставит одиночку по началу строки,
то есть ровно туда, где ей и место. Тем же правилом обходится случай,
когда суммы нет вовсе и подсказка стоит одна. */
.pf-sub{display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:5px 16px;margin:10px 0 24px;}
.pf-sub p{margin:0;font-size:12px;line-height:1.45;color:var(--pf-t4);}
/* Число — единственное, что здесь читают взглядом, а не текстом:
на кегль крупнее подписи и заметно ярче её. Подсказку при этом
не приглушаем — ниже .60 белого начинается зона хуже 4.5:1. */
.pf-sub__sum b{font-size:13px;font-weight:700;color:var(--pf-t2);}
/* --- заявка на выплату --- */
/* Плашка-ссылка, не карточка: это уведомление о состоянии, а не раздел.
Цвет жёлтый пока деньги в пути и красный при отказе — те же роли,
что на самой странице заявок. */
/* Контейнер — не ссылка: внутри две цели, сама ссылка и крестик.
Кнопка внутри была бы невалидной разметкой и ловила бы переход. */
.pf-payout{display:flex;align-items:stretch;margin-top:14px;
border-radius:12px;
background:rgba(255,212,0,.06);border:1px solid rgba(255,212,0,.2);
transition:background .18s,border-color .18s;}
.pf-payout:hover{background:rgba(255,212,0,.1);border-color:rgba(255,212,0,.35);}
.pf-payout--bad{background:rgba(226,48,0,.07);border-color:rgba(226,48,0,.25);}
.pf-payout--bad:hover{background:rgba(226,48,0,.11);border-color:rgba(226,48,0,.4);}
.pf-payout__link{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:13px;
padding:13px 15px;border-radius:12px;text-decoration:none;}
.pf-payout__link:hover{text-decoration:none;}
/* Крестик и стрелка вместе не нужны — при закрываемой полосе остаётся крестик */
.pf-payout--closable .pf-payout__go{display:none;}
.pf-payout__close{flex:0 0 30px;align-self:center;height:30px;margin-right:9px;
display:grid;place-items:center;box-sizing:border-box;padding:0;
border:none;border-radius:8px;background:transparent;
color:var(--pf-t4);cursor:pointer;
transition:background .18s,color .18s;}
.pf-payout__close:hover{background:rgba(255,255,255,.09);color:#fff;}
/* svg внутри флекса тянет за собой базовую линию и уезжает вниз */
.pf-payout__close svg{display:block;}
/* flex:0 0 — иначе кружок сплющивается в овал под длинным текстом */
.pf-payout__icon{flex:0 0 34px;height:34px;display:grid;place-items:center;
box-sizing:border-box;border-radius:9px;
background:rgba(255,212,0,.12);color:#ffd400;font-size:14px;}
.pf-payout--bad .pf-payout__icon{background:rgba(226,48,0,.14);color:#ff6a4d;}
.pf-payout__body{flex:1 1 auto;min-width:0;}
.pf-payout__line{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;}
.pf-payout__line b{font-size:14px;font-weight:800;color:#fff;}
.pf-payout__state{font-size:11px;font-weight:700;letter-spacing:.02em;
padding:2px 8px;border-radius:5px;background:rgba(255,212,0,.16);color:#ffd400;}
.pf-payout--bad .pf-payout__state{background:rgba(226,48,0,.16);color:#ff6a4d;}
.pf-payout__sub{display:block;margin-top:3px;font-size:12px;color:var(--pf-t4);}
.pf-payout__reason{display:block;margin-top:3px;color:rgba(255,140,110,.92);font-weight:600;}
.pf-payout__go{flex:0 0 auto;color:var(--pf-t4);font-size:13px;
transition:transform .18s,color .18s;}
.pf-payout__link:hover .pf-payout__go{color:var(--pf-t2);transform:translateX(3px);}
/* --- порядок списка --- */
/* Рамка и фон переехали с внутренней группы на весь блок: «Сначала»
стояло отдельным словом рядом с обведённой парой кнопок и читалось
как чужая подпись. Теперь это один предмет — подпись внутри рамки,
а кнопки продолжают её. */
.pf-sort{display:inline-flex;align-items:center;gap:0;margin:0;
padding:3px 3px 3px 10px;border-radius:9px;box-sizing:border-box;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
/* Подпись отделена чертой во всю высоту плашки. Без неё «Сначала»
срасталось с кнопками и читалось как первый вариант выбора, а не как
название фильтра. Черта — border-right у самой подписи, отдельного
элемента в разметке не нужно; align-self:stretch тянет её на всю
внутреннюю высоту, иначе она была бы ростом со строку текста. */
.pf-sort__label{display:flex;align-items:center;align-self:stretch;gap:6px;
font-size:11px;font-weight:600;letter-spacing:.02em;
color:var(--pf-t4);white-space:nowrap;
margin-right:8px;padding-right:9px;
border-right:1px solid rgba(255,255,255,.1);}
.pf-sort__label i{font-size:12px;}
/* Слово — только на телефоне, см. медиазапрос ниже */
.pf-sort__word{display:none;}
.pf-sort__group{display:inline-flex;gap:2px;padding:0;border:0;background:none;}
/* Тише вкладок во всём: мельче, бледнее и без оранжевого. Оранжевый —
цвет главного фильтра, и второй оранжевый рядом спорил с ним
за внимание. Активный порядок теперь выделен просто светлой
подложкой, этого хватает. */
.pf-sort__opt{display:inline-flex;align-items:center;height:24px;padding:0 10px;
border-radius:6px;font-size:11px;font-weight:700;text-decoration:none;
color:var(--pf-t4);transition:color .18s,background .18s;}
.pf-sort__opt:hover{color:var(--pf-t2);text-decoration:none;}
.pf-sort__opt.is-active{background:rgba(255,255,255,.09);
color:var(--pf-t2);}
/* Вкладки прижаты к нижней черте панели, а не отцентрованы по ней:
margin-bottom:-1px заводит их 3px-подчёркивание поверх черты, и у
активной вкладки оно перекрывает её собой. У остальных подчёркивание
прозрачное — сквозь него видно ту же черту. */
.pf-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 -9px;
align-self:flex-end;}
/* Вкладки подчёркиванием, а не пилюлями: пять обведённых прямоугольников
в ряд добавляли странице ещё пять границ ни за что. */
/* Активную вкладку держат три вещи сразу: мягкая подсветка, более
толстая черта и белый текст. Одной тонкой полоски снизу не хватало,
чтобы выделить её среди пяти одинаковых строк. */
.pf-tab{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;
font-size:13px;font-weight:700;text-decoration:none;color:var(--pf-t3);
border-radius:9px 9px 0 0;border-bottom:3px solid transparent;
transition:color .2s,border-color .2s,background .2s;}
.pf-tab:hover{color:var(--pf-t2);background:rgba(255,255,255,.05);
text-decoration:none;}
.pf-tab.is-active{color:#fff;border-bottom-color:#ff9800;
background:rgba(255,152,0,.12);}
/* Название занимает остаток и при нехватке места обрезается: иначе
длинная вкладка вроде «В инвентаре 37 на 156 ₽» ломала бы ряд. */
.pf-tab__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Счётчик в своей подложке. Прежняя возня с position:top ушла вместе
с голым текстом: у бейджа коробка своя, и align-items:center панели
центрирует именно её, а текст внутри держит line-height:1 плюс
симметричные поля. Отбивка от названия — только gap:6px вкладки,
меньше её бокового поля в 10px: бейдж должен группироваться
с названием, а не висеть посередине между ним и краем. */
.pf-tab__num{flex:0 0 auto;font-size:11px;font-weight:700;line-height:1;
padding:3px 5px;border-radius:5px;
background:rgba(255,255,255,.07);color:var(--pf-t4);}
.pf-tab.is-active .pf-tab__num{background:rgba(255,152,0,.2);color:#ffb74d;}
/* Пагинация. Разметку даёт vendor/pagination/elopub_nav.blade.php, но стилей
к ней в общем CSS нет — они лежали только внутри blog.blade.php, поэтому
на новой странице список ссылок выглядел как неоформленный текст.
Держим правила здесь, чтобы страница не зависела от чужого шаблона. */
/* Основной разрыв давал глобальный .drops{margin-bottom:80px} — своими
отступами пагинации его было не перебить. Гасим здесь. */
.pf .drops{margin-bottom:0;}
.pf-pagination{display:flex;justify-content:center;margin:22px 0 34px;}
.pf-pagination .elopub-pag{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
justify-content:center;list-style:none;margin:0;padding:0;}
/* Страницы — просто числа, без десятка обведённых квадратов. Рамку
и заливку получает только текущая: она одна здесь что-то значит. */
.pf-pagination .elopub-pag__item{min-width:34px;height:34px;padding:0 10px;
display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
font-size:14px;font-weight:700;text-decoration:none;color:var(--pf-t4);
background:none;border:1px solid transparent;
transition:color .2s,background .2s;}
.pf-pagination .elopub-pag__item:hover:not(.is-active):not(.is-disabled):not(.is-dots){
color:#fff;background:rgba(255,255,255,.06);text-decoration:none;}
/* Активная страница раньше была залита оранжевым и на фоне голых цифр
читалась как более крупная плашка. Метрики у всех одинаковые, разницу
создавала заливка — поэтому она стала приглушённой, а вес взяли
цвет и насыщенность текста. */
.pf-pagination .elopub-pag__item.is-active{color:#ff9800;
background:rgba(255,152,0,.16);border-color:transparent;cursor:default;}
.pf-pagination .elopub-pag__item.is-disabled{opacity:.3;cursor:default;}
/* Стрелки. Глифы «‹ › « »» мелкие по своей природе — при том же кегле,
что у цифр, они читались как точки. Поэтому им отдельный размер,
вес и подложка: это органы управления, а не подписи. */
.pf-pagination .elopub-pag__item--nav{font-size:20px;font-weight:400;line-height:1;
padding:0 8px;color:var(--pf-t3);background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.12);}
.pf-pagination .elopub-pag__item--nav:hover:not(.is-disabled){color:#ff9800;
background:rgba(255,152,0,.14);border-color:rgba(255,152,0,.4);}
.pf-pagination .elopub-pag__item.is-dots{background:transparent;border-color:transparent;
cursor:default;}
/* Счётчик «3 из 47» — запасной вид пагинации для узкого экрана.
На десктопе не нужен: там номера видны сами. */
.pf-pagination .elopub-pag__pos{display:none;align-items:center;height:34px;padding:0 4px;
font-size:13px;font-weight:600;color:var(--pf-t4);white-space:nowrap;}
.pf-pagination .elopub-pag__pos b{color:#ff9800;font-weight:800;font-size:15px;
margin-right:3px;}
.pf-empty{text-align:center;padding:52px 16px;color:var(--pf-t4);font-size:14px;}
.pf-empty__text{margin:0;}
/* Тихая ссылка — для «Показать всё», где выбор не главный. */
.pf-empty__link{display:block;margin-top:10px;color:#ff9800;font-weight:700;
text-decoration:none;}
/* Главный клик новичка. Оранжевым текстом на тёмной подложке он терялся,
поэтому это настоящая кнопка с мягким свечением. */
.pf-empty__cta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
height:46px;padding:0 28px;border-radius:12px;
background:linear-gradient(180deg,#ffa726,#f57c00);
color:#1a1206;font-size:14px;font-weight:800;letter-spacing:.01em;
text-decoration:none;box-shadow:0 8px 24px rgba(255,152,0,.26);
transition:transform .18s,box-shadow .18s,filter .18s;}
.pf-empty__cta:hover{color:#1a1206;text-decoration:none;filter:brightness(1.06);
transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,152,0,.4);}
.pf-empty__cta:active{transform:translateY(0);}
/* --- заглушки на месте будущих карточек --- */
/* Пунктир и приглушённый текст: место видно, но оно явно пустое
и не притворяется данными. Высота та же, что у настоящей карточки. */
.pf-card--empty{border-style:dashed;border-color:rgba(255,255,255,.11);
background:rgba(255,255,255,.015);}
.pf-card--empty .pf-card__label{color:var(--pf-t4);
display:flex;align-items:center;gap:7px;}
.pf-card--empty .pf-card__label i{color:var(--pf-t5);font-size:11px;}
.pf-card--empty .pf-card__title{color:var(--pf-t4);font-weight:600;}
.pf-card--empty .pf-card__price{color:var(--pf-t4);font-weight:600;
font-size:12px;}
.pf-card__thumb--empty{display:grid;place-items:center;flex:0 0 72px;height:56px;
box-sizing:border-box;border-radius:10px;
border:1px dashed rgba(255,255,255,.13);
color:var(--pf-t5);font-size:22px;font-weight:800;}
/* --- ссылка на обмен --- */
/* Обычное состояние — просто строка на фоне, без коробки. */
/* Снизу отступ: у .pf-stats сверху всего 4px, и плитки статистики
прилипали к блоку обмена. Соседние поля схлопываются, так что
итоговый зазор — эти 18px. */
.pf-trade{margin-top:10px;margin-bottom:18px;padding:0;}
/* Ссылки нет — вывод недоступен. Это единственный случай, когда блок
имеет право кричать, и делает он это полоской слева, а не рамкой. */
.pf-trade--empty{padding:2px 0 2px 14px;border-left:2px solid #ff9800;}
.pf-trade__hint{font-size:12px;margin:8px 0 0;}
/* Пунктирное подчёркивание убрано — его роль взял на себя знак вопроса,
а вместе они выглядели шумно. flex:0 0 16px обязателен: иначе кружок
сжимается под текстом и становится овалом. */
.pf-trade__help{display:inline-flex;align-items:center;gap:7px;
color:#ffb74d;font-weight:700;text-decoration:none;transition:color .2s;}
.pf-trade__help:hover{color:#fff;text-decoration:none;}
.pf-trade__help-mark{flex:0 0 16px;height:16px;box-sizing:border-box;
display:grid;place-items:center;border-radius:50%;
background:rgba(255,152,0,.2);color:#ffb74d;
font-size:10px;font-weight:800;line-height:1;
transition:background .2s,color .2s;}
.pf-trade__help:hover .pf-trade__help-mark{background:#ff9800;color:#191510;}
/* Стрелка стоит сразу за текстом, а не у правого края, и inline-flex
ужимает область до содержимого — иначе строка читалась как абзац.
На наведении меняются цвет текста и подложка стрелки; подчёркивание
не используем, оно тянулось на всю строку и мешало. */
.pf-trade__fold>summary{display:inline-flex;align-items:center;gap:8px;
cursor:pointer;list-style:none;font-size:13px;font-weight:700;
color:var(--pf-t2);padding:12px 0;transition:color .2s;}
.pf-trade__fold>summary:hover{color:#fff;text-decoration:none;}
.pf-trade--empty .pf-trade__fold>summary{color:#ffb74d;}
.pf-trade--empty .pf-trade__fold>summary:hover{color:#ffc98a;}
.pf-trade__fold>summary::-webkit-details-marker{display:none}
/* Значок один и тот же, при раскрытии он поворачивается: подмена символа
через content анимироваться не может, а transform — может.
Font Awesome и поправка padding-bottom — см. подробный разбор
у .pf-note__title::after, стрелка здесь ровно та же. */
/* flex:0 0 18px обязателен: без него псевдоэлемент — обычный flex-item,
он сжимается под длинным текстом и круг превращается в овал.
На телефоне текст в summary переносится, там это и вылезало. */
.pf-trade__fold>summary::after{content:'\f0d7';font-family:'Font Awesome 6 Free';font-weight:900;
font-style:normal;-webkit-font-smoothing:antialiased;
font-size:10px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
flex:0 0 18px;width:18px;height:18px;box-sizing:border-box;
padding-bottom:1.25px;border-radius:50%;
background:rgba(255,255,255,.1);color:var(--pf-t3);
transition:transform .25s ease,background .2s,color .2s;}
.pf-trade__fold[open]>summary::after{transform:rotate(180deg);}
.pf-trade__fold>summary:hover::after{background:rgba(255,152,0,.25);color:#ffb74d;}
.pf-trade__row{display:flex;flex-direction:column;gap:10px;margin-top:12px;
padding-bottom:14px;}
/* Глобальные .input-text и .button--blue тянут сюда чужие тени, свечение
и высоту на 50px, из-за чего поле «подсвечивалось», а кнопка выглядела
больше самого поля. Переопределяем локально, форма скромная. */
.pf-trade__input.input-text{width:100%;min-width:0;height:42px;padding:0 14px;
box-shadow:none;background:rgba(0,0,0,.28);color:#fff;font-size:13px;
border:1px solid rgba(255,255,255,.12);border-radius:9px;}
.pf-trade__input.input-text:focus{outline:none;border-color:rgba(255,152,0,.55);
box-shadow:none;background:rgba(0,0,0,.35);}
.pf-trade__input.input-text::placeholder{color:var(--pf-t4);}
.pf-trade__save.button{height:42px;padding:0 20px;font-size:13px;font-weight:700;
border-radius:9px;background:rgba(255,152,0,.14);background-image:none;
border:1px solid rgba(255,152,0,.45);color:#ffb74d;box-shadow:none;
text-transform:none;letter-spacing:0;min-width:0;width:100%;}
.pf-trade__save.button:hover{background:#ff9800;background-image:none;
border-color:#ff9800;color:#1b1825;box-shadow:none;transform:none;}
.pf-trade__msg{display:none;margin-top:10px;font-size:13px;color:var(--pf-t3);}
/* --- памятки --- */
/* Памятки — текст на фоне. Это справка, ей рамка не нужна. */
/* Подложка без рамки: текст перестаёт «висеть» в пустоте у дна страницы,
но и не превращается обратно в обведённую карточку. */
/* 26 вместо 34: это был самый большой разрыв на странице — и стоял он
перед самым второстепенным блоком. */
/* Растяжение по умолчанию (align-items:stretch) и нужно: две раскрытые
карточки стоят вровень, хотя текста в них разное количество. А вот
свёрнутая из растяжения выходит сама — иначе она тянулась бы в рост
раскрытой соседки и превращалась в пустую коробку на пол-экрана. */
.pf-notes{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;}
.pf-note:not([open]){align-self:start;}
/* Поля у карточки нулевые, их держат заголовок и текст по отдельности.
Иначе поля принадлежали бы карточке, а нажимается только summary —
и по краям подложки, где на глаз всё ещё заголовок, клик не срабатывал:
развернуть удавалось, только попав мышью в саму строку. Теперь summary
занимает всю верхнюю часть карточки вместе с полями, и нажимается
любая её точка. */
.pf-note{padding:0;border-radius:14px;background:rgba(255,255,255,.035);}
.pf-note--warn{background:rgba(255,152,0,.07);}
/* Заголовок карточки — он же summary. Внешне это прежний заголовок, только
со стрелкой у правого края и курсором-рукой. margin снизу убран: отступ
до текста теперь держит сам текст, иначе у свёрнутой карточки внизу
оставалось бы 10px пустоты. */
.pf-note__title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;
color:#fff;margin:0;padding:18px 20px 10px;
cursor:pointer;list-style:none;transition:color .2s;}
/* У свёрнутой карточки нижнее поле заголовка — это нижнее поле всей
карточки, поэтому оно полное. У раскрытой между заголовком и текстом
остаётся 10px, как было у прежнего margin-bottom заголовка. */
.pf-note:not([open])>.pf-note__title{padding-bottom:18px;}
/* Родной треугольник гасят два разных правила: list-style:none — в Firefox,
::-webkit-details-marker — в Safari и старом Chrome. */
.pf-note__title::-webkit-details-marker{display:none;}
/* Стрелка у правого края, а не сразу за текстом, как в блоке трейд-ссылки:
там summary ужат до содержимого, здесь карточка во всю колонку, и рядом
с текстом стрелка висела бы посреди пустой строки. Поворот, а не подмена
символа: content анимироваться не может, transform может.
flex:0 0 18px обязателен: иначе кружок сплющивается в овал, когда
заголовок переносится на вторую строку.
Значок из Font Awesome, а не символ ▾ (U+25BE). Того символа нет ни
в одном начертании Roboto, и браузер брал его из системного шрифта —
у каждой ОС своего. Краска у него сидела заметно выше середины строки,
поэтому в свёрнутом виде стрелка липла к верху кружка, а на повороте
уезжала вниз: она вращалась вокруг центра кружка, а не вокруг себя.
Font Awesome мы отдаём сами, и положение краски в нём известно точно.
Взят caret-down — тот же маленький сплошной треугольник, который рисовал
символ ▾. Пробовали chevron-down, галочку: при кегле 11px её краска
занимала 9.62 x 5.50px в кружке диаметром 18, больше половины его ширины,
и весила в заголовке больше самого заголовка. У caret-down при кегле 10px
краска 6.45 x 3.75px — вдвое меньше по площади.
padding-bottom:1.25px — поправка на положение краски. У caret-down она
занимает 64..256 из 512 единиц em, её центр при кегле 10px стоит
на 5.625px от верха строки вместо 5.0px, то есть на 0.625px ниже.
Нижнее поле при box-sizing:border-box поджимает строку вверх ровно
на половину своей величины, 1.25 / 2 = 0.625 — и центр краски садится
точно в центр кружка. Дальше поворот вокруг центра оставляет значок
на месте. */
.pf-note__title::after{content:'\f0d7';font-family:'Font Awesome 6 Free';font-weight:900;
font-style:normal;-webkit-font-smoothing:antialiased;
font-size:10px;line-height:1;margin-left:auto;
display:inline-flex;align-items:center;justify-content:center;
flex:0 0 18px;width:18px;height:18px;box-sizing:border-box;
padding-bottom:1.25px;border-radius:50%;
background:rgba(255,255,255,.1);color:var(--pf-t3);
transition:transform .25s ease,background .2s,color .2s;}
.pf-note[open]>.pf-note__title::after{transform:rotate(180deg);}
.pf-note__title:hover{color:#fff;}
.pf-note__title:hover::after{background:rgba(255,152,0,.25);color:#ffb74d;}
.pf-note--warn .pf-note__title{color:#ffb74d;}
.pf-note--warn .pf-note__title:hover{color:#ffc98a;}
.pf-note__body{padding:0 20px 18px;}
/* Нативный details высоту не анимирует, а интерполяция height требует
свежего CSS (Chrome 117+) и на старых браузерах просто дёрнется.
Поэтому анимируем появление содержимого — подъём с растворением:
выглядит плавно и работает везде. */
.pf-note[open]>.pf-note__body{animation:pf-note-in .22s ease-out;}
@keyframes pf-note-in{from{opacity:0;transform:translateY(-6px);}
to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
.pf-note[open]>.pf-note__body{animation:none;}
}
.pf-note p{font-size:13px;line-height:1.55;color:var(--pf-t3);margin:0 0 8px;}
.pf-note p:last-child{margin-bottom:0;}
.pf-note a{color:#ff9800;text-decoration:none;}
.pf-note a:hover{text-decoration:underline;}
.pf-note b{color:#fff;}
/* --- десктоп --- */
/* ---------- телефон ---------- */
@media(max-width:719px){
/* Вкладки сеткой по две в ряд. Лента с прокруткой не читалась:
по горизонтали ничто не намекает на продолжение, а текст уходил
за край экрана. В сетке видно сразу всё, и это две строки,
а не четыре, как было столбиком.
Подчёркивание снизу здесь не работает — в сетке это выглядит
случайной чертой, поэтому на телефоне вкладки становятся
обычными кнопками с рамкой. */
/* Панель разбирается в столбик: черта под ней на телефоне не нужна —
вкладки тут не подчёркиваются, а обводятся, и черта под сеткой 2х2
читалась бы как случайный разделитель. */
.pf-bar{flex-direction:column;align-items:stretch;gap:12px;
border-bottom:0;padding-bottom:0;margin-bottom:22px;}
/* В столбик заголовок обычный блок: flex-end в колонке прижал бы
его к правому краю — поперечная ось тут горизонтальная. */
.pf-inv__title{padding-bottom:0;align-self:flex-start;}
.pf-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;
justify-content:stretch;align-self:stretch;margin:0;}
/* Поля и зазор поуже: каждые 4px здесь — это 4px под название */
.pf-tab{height:38px;padding:0 9px;font-size:12px;gap:4px;
border:1px solid rgba(255,255,255,.1);border-radius:9px;
border-bottom-width:1px;background:rgba(255,255,255,.03);}
.pf-tab.is-active{border-color:rgba(255,152,0,.5);
background:rgba(255,152,0,.13);}
/* На телефоне название растянуто (flex:1), цифры и так прижаты
к правому краю — отбивку приводим к тем же 9px, что и поле. */
.pf-tab__label{flex:1;}
/* Карточки в две колонки. Глобально у .drop-list__item ширина 170px,
и на экране 360px помещалась ровно одна — десять предметов
превращались в бесконечную прокрутку. Внутри .pf переводим список
в сетку, а элементу отдаём ширину ячейки. */
.pf .drop-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.pf .drop-list__item{width:auto;min-width:0;margin:0;}
/* Три плитки в один ряд: auto-fit ломал их на 2+1 и ряды выходили
разной длины. */
.pf-stats{grid-template-columns:repeat(3,1fr);gap:7px;}
.pf-stat{padding:10px 6px;}
.pf-stat b{font-size:18px;}
.pf-stat b.is-long{font-size:14px;}
.pf-stat span{font-size:9px;line-height:1.25;display:block;}
/* Плашки компактнее — так они укладываются в два ряда вместо пяти */
.pf-head__meta{gap:6px 8px;}
.pf-chip{height:27px;padding:0 9px;font-size:11px;gap:6px;}
.pf-chip i{font-size:10px;}
.pf-head__acts{gap:6px;margin-top:16px;padding-top:14px;}
.pf-act{height:32px;padding:0 12px;font-size:11px;}
/* Заявка компактнее: стрелку убираем — на телефоне вся плашка нажимается,
а лишние 13px ширины забирает текст. */
.pf-payout{margin-top:12px;}
.pf-payout__link{padding:11px 12px;gap:10px;}
/* Палец крупнее курсора — крестику даём площадь побольше */
.pf-payout__close{flex:0 0 34px;height:34px;margin-right:6px;}
.pf-payout__icon{flex:0 0 30px;height:30px;font-size:13px;}
.pf-payout__line b{font-size:13px;}
.pf-payout__state{font-size:10px;padding:2px 7px;}
.pf-payout__sub{font-size:11px;}
.pf-payout__go{display:none;}
/* Сортировка: подпись короче, сегменты шире под палец */
/* На телефоне плашка во всю ширину, как вкладки и сетка карточек:
маленький островок по центру выпадал из строя блоков. Подпись
слева, две кнопки делят остаток поровну — тот же ритм, что
у вкладок сеткой 2х2 над ней. */
.pf-sort{align-self:stretch;width:100%;padding:3px 3px 3px 11px;}
.pf-sort__word{display:inline;}
.pf-sort__group{flex:1 1 auto;}
.pf-sort__opt{flex:1 1 0;justify-content:center;height:30px;padding:0 8px;}
/* Подстрочник в столбик: разводить сумму и подсказку по краям экрана
на 360px незачем — они и так на разных строках. */
.pf-sub{flex-direction:column;justify-content:flex-start;gap:6px;
margin:10px 0 22px;}
/* Пагинация в один ряд. Номеров с многоточиями получалось до
одиннадцати штук — на 360px они переносились во вторую строку.
На телефоне оставляем только органы управления и счётчик
положения: «« ‹ 3 из 47 › »». Прыжок в начало и в конец никуда
не делся, а промежуточные страницы листаются стрелками. */
.pf-pagination .elopub-pag{flex-wrap:nowrap;gap:6px;}
.pf-pagination .elopub-pag__item:not(.elopub-pag__item--nav){display:none;}
.pf-pagination .elopub-pag__pos{display:inline-flex;}
.pf-pagination{margin:18px 0 26px;}
/* Под памятками оставалось полэкрана пустоты: нижний отступ страницы
складывался с внешним отступом блока памяток. */
.pf{padding-bottom:24px;}
.pf-notes{margin-top:24px;gap:10px;}
.pf-note__title{padding:15px 16px 9px;}
.pf-note:not([open])>.pf-note__title{padding-bottom:15px;}
.pf-note__body{padding:0 16px 15px;}
}
@media(min-width:720px){
.pf-trade__row{flex-direction:row;align-items:center;}
/* Селекторы с .input-text/.button — иначе базовые правила специфичнее
и ширина 100% отсюда не сбрасывается: поле сжималось, а кнопка
занимала всю строку и вылезала за край блока. */
.pf-trade__input.input-text{flex:1 1 auto;}
.pf-trade__save.button{width:auto;flex:0 0 auto;}
.pf-notes{grid-template-columns:1fr 1fr;gap:14px;}
.pf{padding:32px 24px 52px;}
.pf-head{flex-direction:row;align-items:center;text-align:left;gap:24px;
padding:10px 0 26px;}
.pf-head__avatar{width:104px;height:104px;}
.pf-head__veil{font-size:34px;}
.pf-head__name{font-size:30px;}
.pf-head__meta,.pf-head__acts{justify-content:flex-start;}
.pf-stats{gap:12px;margin-top:6px;}
.pf-stat{padding:13px 12px;}
.pf-stat b{font-size:27px;}
.pf-stat b.is-long{font-size:21px;}
/* Обе карточки одинаковые по строению и размеру — колонки равные */
.pf-cards{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.pf-cards--one{grid-template-columns:1fr;}
.pf-inv__title{font-size:20px;}
/* Порядок списка прижат к правому краю панели. margin-left:auto,
а не space-between: вкладок может не быть вовсе (чужой профиль
или игрок, у которого весь дроп продан), и space-between развёл бы
по краям заголовок и сортировку, оставив посередине дыру. */
.pf-sort{flex:0 0 auto;margin-left:auto;}
}