.custom-stats-wrapper,
.custom-stats-wrapper *,
.custom-stats-wrapper *::before,
.custom-stats-wrapper *::after {
    box-sizing: border-box;
}

/* ===== Обертка аватара и слой украшения ===== */
.profile-header {
    display: flex;
    align-items: flex-start;
    /* Зазор между аватаром и инфо. Вынесен в переменную, потому что при
     * выбранной рамке он должен быть больше: файлы рамок 224x224, аватарка
     * 180x180, и рамка вылезает на (224-180)/2 = 22px с каждой стороны.
     * Справа этот вылет упирался бы прямо в текст - дисплейнейм, ник и
     * бейджи. Класс has-avatar-frame увеличивает зазор ровно на этот
     * вылет, чтобы под рамкой было то же пустое поле, что было без неё.
     *
     * На узком экране .profile-header становится колонкой (см. медиазапрос
     * ниже), зазор становится вертикальным, и значение тут не важно. */
    --avatar-gap: 20px;
    gap: var(--avatar-gap);
}

.profile-header.has-avatar-frame {
    --avatar-gap: 42px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    /* margin-right убран - используем gap у родителя */
    flex-shrink: 0;
    /* Поля нет намеренно. Ушки заяц выходят за края аватарки на ~11px, но
   своих 20px внутренних отступов панели и gap'а в 20px хватает, чтобы
   они ничего не перекрывали. Раньше здесь стояло margin: 96px 24px 0 -
   оно сдвигало саму аватарку вниз, из-за чего корона висела над пустотой,
   а имя и бейджи оставались наверху. Место под корону резервирует панель
   (см. .profile-header.has-top-decoration ниже), а сама аватарка стоит
   там же, где текст. overflow здесь намеренно НЕ задан - иначе слой
   украшения обрезался бы по габаритам аватарки. */
    margin: 0;
}

/* Место под украшение, стоящее сверху (корона, огонь, рога, нимб).
   Такое украшение поднимается над аватаркой и выходит за верх панели на фон
   страницы - ровно как ушки зайца выходят за её боковые края. Сколько именно
   оставить сверху, решает JS: значение --dec-pad приходит из DECORATION_LAYOUT
   и подобрано под подъём каждой конкретной картинки. Запас заведомо меньше
   подъёма, иначе украшение просто не выйдет за край панели.
   Класс ставится только когда такое украшение действительно выбрано, иначе
   пустого места нет. */
.profile-header.has-top-decoration {
    padding-top: var(--dec-pad, 99px);
}

.profile-avatar-wrapper .profile-avatar {
    margin-right: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== Слой украшения поверх аватарки =====
   Позиция задаётся через data-position, который проставляет JS по id
   украшения. Базовая раскладка - слой на весь размер аватарки, а частные
   положения её переопределяют:

 top    - украшение стоит на аватарке сверху (корона);
 center - по центру аватарки, слегка крупнее её, чтобы уши выходили
          за край (заяц).

   Подложка `position: relative` есть у .profile-avatar-wrapper, а переполнение
   в нём и выше не срезается (overflow не задан), поэтому корона может
   выходить за верхний край, а уши - за боковые. */
.profile-decoration-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Чтобы украшение не перекрывало клики */
    z-index: 2;
}

.profile-decoration-overlay img,
.profile-decoration-overlay video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Рамка аватара.
 *
 * Абсолютно позиционированная, как и слой украшения, и в разметке стоит
 * между аватаркой и украшением. z-index намеренно НЕ задан: оба слоя
 * позиционированы с z-index: auto, поэтому верхним окажется тот, кто в
 * разметке позже, то есть украшение. Со z-index: 1 рамка перекрыла бы корону.
 *
 * Размер аватарки 180x180, файлы рамок 224x224. object-fit: contain
 * вписывает квадрат в квадрат без искажения и без обрезки.
 *
 * Переполнение у .profile-avatar-wrapper не задано намеренно (см. комментарий
 * выше про ушки зайца), поэтому элементы рамки, выступающие за 180px,
 * отрисуются целиком. Запас до соседей есть: 20px внутренних отступов панели
 * и 20px gap.
 */
/* Модалка покупки оформления.
 *
 * Шире обычной .modal-content: там по умолчанию 600px, а здесь две
 * колонки - сетка позиций и подробности - и в 600px сетка схлопывалась
 * в две узкие колонки. На узком экране колонки встают друг под друга.
 */
.profile-shop-modal-content {
    max-width: 880px;
    width: 94%;
}

.shop-head {
    margin-bottom: .9rem;
}

.shop-title {
    margin: 0 0 .4rem;
    color: #fff;
    font-size: 1.35rem;
}

.shop-lead {
    margin: 0 0 .6rem;
    color: #ddd;
    font-size: .95rem;
    line-height: 1.5;
}

.shop-lead strong {
    color: #e5a93d;
}

/* Как проходит покупка. Отдельной полосой сразу под заголовком: без неё
 * кнопка внизу справа выглядит кнопкой без объяснения, что она делает
 * и что списания с баланса не происходит. */
.shop-flow {
    margin: 0;
    padding: 10px 13px;
    border: 1px solid #3f4a5c;
    border-left: 3px solid #4f7fd0;
    border-radius: 4px;
    background: #1c222c;
    color: #b9c6da;
    font-size: .82rem;
    line-height: 1.55;
}

.shop-flow b {
    color: #d8e4f5;
}

.shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1rem 0 .8rem;
}

.shop-tab {
    padding: 8px 16px;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    background: #232323;
    color: #ccc;
    font-size: .88rem;
    font-family: 'Noto Sans', sans-serif;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.shop-tab:hover {
    border-color: #e5a93d;
    color: #fff;
}

.shop-tab.active {
    border-color: #e5a93d;
    background: rgba(229, 169, 61, .12);
    color: #e5a93d;
}

.shop-blurb {
    margin: 0 0 .9rem;
    color: #9a9a9a;
    font-size: .82rem;
    line-height: 1.5;
}

/* Что сейчас надето в выбранной категории. Без этой строки покупающий
 * не видит, что именно меняет, а получатель подарка не может проверить
 * правило «дарите то, чего у него ещё нет». */
.shop-current {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 .9rem;
    padding: 8px 12px;
    border-radius: 4px;
    background: #232323;
    color: #8f8f8f;
    font-size: .8rem;
}

.shop-current-label {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
}

.shop-current b {
    color: #e5a93d;
}

.shop-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.2rem;
    align-items: start;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    max-height: 44vh;
    overflow-y: auto;
    padding-right: 4px;
}

.shop-item {
    position: relative;
    padding: 8px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: #232323;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.shop-item:hover {
    border-color: #6a6a6a;
}

.shop-item.selected {
    border-color: #e5a93d;
    background: rgba(229, 169, 61, .1);
}

/* Уже купленное показываем приглушённо: покупать это снова смысла нет,
 * и раньше оно ничем не отличалось от доступного к покупке. */
.shop-item.owned {
    opacity: .45;
}

.shop-item.owned.selected {
    opacity: .8;
}

.shop-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin-bottom: 6px;
}

.shop-thumb img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
}

.shop-name {
    color: #ddd;
    font-size: .78rem;
    line-height: 1.3;
}

.shop-price {
    margin-top: 3px;
    color: #e5a93d;
    font-size: .8rem;
    font-weight: 700;
}

.shop-tag,
.shop-owned {
    position: absolute;
    top: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.shop-tag {
    left: 4px;
    background: #e5a93d;
    color: #161616;
}

/* Бейдж «уже есть» справа, чтобы не налезал на «ХИТ» слева. */
.shop-owned {
    right: 4px;
    background: #4a4a4a;
    color: #ddd;
}

.shop-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-detail {
    padding: 14px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: #1f1f1f;
}

.shop-detail-title {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: 1.05rem;
}

.shop-summary {
    margin: 0 0 .5rem;
    color: #ddd;
    font-size: .85rem;
    line-height: 1.5;
}

.shop-details {
    margin: 0 0 .6rem;
    color: #aaa;
    font-size: .82rem;
    line-height: 1.5;
}

.shop-notes {
    margin: 0;
    padding-left: 1.1rem;
    color: #9a9a9a;
    font-size: .8rem;
    line-height: 1.6;
}

.shop-detail-owned {
    margin: .7rem 0 0;
    padding: 7px 10px;
    border-radius: 4px;
    background: #2a2a2a;
    color: #b9b9b9;
    font-size: .78rem;
    line-height: 1.5;
}

/* Стоимость подписана: голое число в рублях рядом с названием читалось
 * как характеристика позиции, а не как цена. */
.shop-detail-foot {
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid #333;
}

.shop-cost {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-cost-label {
    color: #8f8f8f;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.shop-price-big {
    color: #e5a93d;
    font-size: 1.2rem;
    font-weight: 700;
}

.shop-cost-unit {
    color: #7a7a7a;
    font-size: .78rem;
}

.shop-action {
    display: block;
    width: 100%;
    margin-top: .9rem;
    padding: 11px 16px;
    border: none;
    border-radius: 4px;
    background: #e5a93d;
    color: #161616;
    font-size: .88rem;
    font-weight: 700;
    font-family: 'Noto Sans', sans-serif;
    cursor: pointer;
    transition: background .15s ease;
}

.shop-action:hover {
    background: #f2cd80;
}

.shop-notices {
    padding: 12px 14px;
    border-left: 3px solid #e5a93d;
    background: #2a2416;
}

.shop-notices strong {
    display: block;
    margin-bottom: .4rem;
    color: #e5a93d;
    font-size: .8rem;
    text-transform: uppercase;
}

.shop-notices ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #c9b98a;
    font-size: .8rem;
    line-height: 1.6;
}

.shop-hint {
    margin: 0;
    color: #888;
    font-size: .85rem;
    line-height: 1.5;
}

@media (max-width: 820px) {
    .shop-cols {
        grid-template-columns: 1fr;
    }

    .shop-grid {
        max-height: none;
    }
}

.mannequin-note {
    margin: 0 0 1rem;
    padding: 10px 12px;
    border: 1px solid #6b5a1f;
    border-left: 3px solid #e5a93d;
    border-radius: 4px;
    background: #3a3117;
    color: #e8d9a8;
    font-size: 0.8rem;
    line-height: 1.4;
}

.profile-avatar-frame {
    position: absolute;
    /* Рамка нарисована на холсте 224x224 и рассчитана на показ в своём
   натуральном размере: она шире аватарки 180x180 и ложится поверх её
   края кольцом, выходя наружу примерно на 22 пикселя с каждой стороны.
   Поэтому ширину и высоту здесь задавать нельзя - object-fit: contain
   вписывал картинку в бокс аватарки, и рамка оказывалась внутри.
   Размер берётся собственный, из атрибутов картинки.
 */
    top: 50%;
    left: 50%;
    /* Сдвиг ровно на половину, к центру. Без него картинка 224x224
   привязывается за левый верхний угол бокса 180x180 и уезжает на
   22 пикселя вправо-вниз - это и есть тот сдвиг, который виден, если
   убрать размеры, но не центрировать.
 */
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Сверху: нижний край (кормы, основание рогов, подошва пламени) ложится на
   макушку - на 92% высоты аватарки, то есть в 14px от её верха. Ширина и
   горизонтальный сдвиг приходят из inline-стиля: DECORATION_LAYOUT в JS
   считает их по пропорциям и содержимому каждого файла. Высота:auto держит
   пропорции картинки, поэтому подъём считается самим браузером.
   Место сверху резервирует панель, см. .profile-header.has-top-decoration. */
.profile-decoration-overlay[data-position="top"] {
    top: auto;
    bottom: 92%;
    left: 50%;
    height: auto;
}

.profile-decoration-overlay[data-position="top"] img,
.profile-decoration-overlay[data-position="top"] video {
    height: auto;
}

/* По центру: слой крупнее аватарки, чтобы украшение выходило за её край -
   ушки зайца по бокам и вверх, искры и крылья по периметру. Размер и оба
   сдвига приходят из inline-стиля: DECORATION_LAYOUT в JS считает их по
   пропорциям и содержимому каждого файла, поэтому здесь ничего не зашито.
   Высота:auto держит пропорции картинки. */
.profile-decoration-overlay[data-position="center"] {
    top: 50%;
    left: 50%;
    height: auto;
}

/* ===== Сетка украшений в редакторе ===== */
.decorations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 1rem;
}

/* Сетка рамок аватара.
 *
 * Плитка узнаёт себя по рамке 2px и скруглению, как у украшений, но внутри
 * неё тёмная подложка: рамка рисуется вокруг аватарки, и в превью должен
 * быть виден сам аватар, а не одно колечко на прозрачном фоне редактора.
 *
 * Размер плитки 120px совпадает с сеткой украшений, превью внутри - 112px,
 * то есть рамка показывается почти во весь размер плитки.
 */
.frames-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 1rem;
}

.frame-item {
    position: relative;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 4px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.frame-item:hover {
    border-color: #666;
}

.frame-item.selected {
    border-color: #e5a93d;
}

.frame-item img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    display: block;
}

.frame-item span {
    font-size: 0.7rem;
    color: #aaa;
    text-align: center;
    line-height: 1.2;
}

.frame-item.selected span {
    color: #e5a93d;
}

.frame-item .frame-none {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    color: #555;
    font-size: 2rem;
}

.decoration-item {
    position: relative;
    background: #2a2a2a;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.decoration-item:hover {
    border-color: #e5a93d;
    transform: translateY(-2px);
}

.decoration-item.selected {
    border-color: #16a34a;
    background: #1e2b23;
}

.decoration-item img,
.decoration-item video {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #111;
    border-radius: 4px;
}

.decoration-item .dec-name {
    font-size: 0.8rem;
    color: #ddd;
    text-align: center;
}

.decoration-item .dec-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #16a34a;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    display: none;
}

.decoration-item.selected .dec-badge {
    display: block;
}

.decoration-item.none-item {
    border-style: dashed;
}

.decoration-inventory-admin {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #ffffff18;
    border-radius: 10px;
    background: #17171788;
}

.decoration-inventory-admin h4 {
    margin: 0 0 10px;
    color: #e5c184;
}

.decoration-inventory-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.decoration-inventory-controls select,
.decoration-inventory-controls button {
    padding: 8px;
    background: #292929;
    color: #eee;
    border: 1px solid #ffffff25;
    border-radius: 6px;
}

#decoration-inventory-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.decoration-inventory-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    background: #ffffff08;
    border-radius: 6px;
    color: #bbb;
    font-size: 12px;
}

.custom-stats-wrapper {
    background: transparent;
    padding: 0 30px 30px;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.panel-dark {
    background-color: #2e2e2e;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 180px;
    height: 180px;
    background-color: transparent;
    object-fit: contain;
    /* margin-right: 20px;  <-- УДАЛИТЕ ЭТУ СТРОКУ */
    border: none;
}

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0px;
}

.profile-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0px;
}

.profile-name {
    font-family: 'Press Start 2P', sans-serif;
    font-size: 24px;
    color: #ffffff;
    margin: 0;
    word-break: break-word;
    font-weight: 400;
}

.badge-custom {
    padding: 6px 12px;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-block;
    font-family: 'PIXY', sans-serif;
}

.profile-nickname {
    font-size: 24px;
    color: #ffffff;
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
}

.bottom-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.profile-overview-layout {
    align-items: stretch;
}

.profile-overview-layout>.side-container {
    justify-content: space-between;
}

.stats-grid-container {
    flex: 1;
    min-width: 0;
    background-color: #2e2e2e;
    padding: 20px;
}

.hltv-stats-container {
    background-color: #2e2e2e;
    padding: 20px;
}

/* ===== ИСПРАВЛЕНИЕ: адаптивная сетка статистики ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-width: 0;
}

.stat-cell {
    padding: 10px 6px;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(10px, 1.4vw, 14px);
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    min-height: 30px;
    min-width: 0;
}

.side-container {
    width: 300px;
    min-width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: #2e2e2e;
    padding: 15px;
}

/* Адаптивность: на планшетах боковая панель уходит вниз, сетка остаётся гибкой */
@media (max-width: 1200px) {
    .bottom-layout {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .stats-grid-container,
    .side-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .stats-grid {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-cell {
        font-size: clamp(9px, 1.3vw, 13px);
    }

    .side-container {
        align-self: stretch !important;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-cell {
        font-size: clamp(10px, 2vw, 14px);
    }
}

@media (max-width: 576px) {
    .custom-stats-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    .stats-grid-container {
        width: 100%;
        max-width: 100%;
        padding: 15px;
    }

    .stats-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .stat-cell {
        font-size: clamp(11px, 3vw, 14px);
    }

    .hltv-rating-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .hltv-gauge {
        width: 140px !important;
        height: 90px !important;
    }

    .hltv-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hltv-cards {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .hltv-rating-value {
        font-size: 2rem !important;
    }

    .hltv-metric-value,
    .hltv-card .card-value {
        font-size: 1.2rem !important;
    }

    .hltv-gauge,
    .hltv-rating-cell,
    .hltv-metric,
    .hltv-card {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* В колонке зазор становится вертикальным, а вылет рамки - горизонтальным,
     * и к зазору отношения не имеет. Возвращаем базовое значение: иначе с
     * рамкой текст уехал бы вниз на лишние 22px. */
    .profile-header.has-avatar-frame {
        --avatar-gap: 20px;
    }

    .profile-avatar {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .profile-title-row {
        justify-content: center;
    }
}

.registration-box {
    padding: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'Noto Sans', sans-serif;
}

.expanded-profile-link {
    display: block;
    margin-top: 8px;
    color: #66c0f4;
    text-decoration: none;
    background: linear-gradient(90deg, rgba(47, 137, 188, .2), rgba(102, 192, 244, .08));
    transition: color .18s ease, background .18s ease;
}

.expanded-profile-link:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(47, 137, 188, .48), rgba(102, 192, 244, .2));
}

.player-details-box {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Noto Sans', sans-serif;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.detail-label {
    color: #aaa;
    font-weight: 600;
    text-transform: uppercase;
}

.detail-value {
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clan-link {
    color: #e5a93d;
    text-decoration: none;
    transition: color 0.2s;
}

.ban-card {
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
}

#ban-info-slot:empty {
    display: none;
}

#ban-info-slot:not(:empty) {
    margin-bottom: 20px;
}

.ban-card__clip {
    position: relative;
    overflow: hidden;
}

.ban-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px;
}

.ban-card__title {
    color: #b54049;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
}

.ban-card__line {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ban-card__label {
    font-weight: 600;
    text-transform: uppercase;
}

.ban-card__reason {
    max-width: 70ch;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ban-card__moderator {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.2s;
    text-transform: lowercase;
}

.ban-card__moderator:hover {
    color: #e5a93d;
}

.ban-card__watermark {
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 112px;
    height: 112px;
    overflow: hidden;
    pointer-events: none;
}

.ban-card__watermark img {
    width: 112px;
    height: 112px;
    -webkit-user-drag: none;
    user-select: none;
}

.clan-link:hover {
    color: #ffc759;
}

.transfer-history-container {
    max-height: 355px;
    overflow-y: auto;
    padding: 5px 10px 5px 5px;
    margin: -5px -10px -5px -5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transfer-history-container::-webkit-scrollbar {
    width: 8px;
}

.transfer-history-container::-webkit-scrollbar-track {
    background: transparent;
}

.transfer-history-container::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

.transfer-history-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.match-history-container {
    max-height: 355px;
    overflow-y: auto;
    padding: 5px 10px 5px 5px;
    margin: -5px -10px -5px -5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-history-container::-webkit-scrollbar {
    width: 8px;
}

.match-history-container::-webkit-scrollbar-track {
    background: transparent;
}

.match-history-container::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

.match-history-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.match-card {
    background-color: #252525;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
}

button.match-card {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
}

button.match-card:disabled {
    opacity: 1;
    cursor: default;
}

.match-card--details {
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.match-card--details:hover,
.match-card--details:focus-visible {
    border-color: rgba(229, 169, 61, .72);
    background-color: #2b2b2b;
    transform: translateY(-1px);
    outline: none;
}

.match-card-map {
    font-weight: bold;
    font-size: 1.1rem;
    color: #FFC107;
    flex: 1;
}

.match-card-map .match-gamemode {
    font-size: 0.75rem;
    color: #999;
    font-weight: 600;
    display: block;
    margin-top: 5px;
    text-transform: uppercase;
}

.match-card-stats {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    text-align: center;
}

.match-card-stats div {
    color: #aaa;
}

.match-card-stats span {
    display: block;
    font-weight: bold;
    color: #fff;
    font-size: 1rem;
}

.match-card-date {
    font-size: 0.8rem;
    color: #888;
    font-weight: 600;
}

.match-card-open {
    display: block;
    margin-top: 7px;
    color: #e5a93d;
    font-size: .72rem;
    white-space: nowrap;
}

.match-card-open i {
    margin-left: 4px;
    font-size: .68rem;
}

.profile-match-modal-content {
    position: relative;
    width: min(1120px, calc(100vw - 32px));
    max-width: 1120px;
    max-height: min(88vh, 900px);
    padding: 24px;
    overflow-y: auto;
    color: #e8e8e8;
    background:
        radial-gradient(circle at 90% 0, rgba(229, 169, 61, .11), transparent 34%),
        #17191d;
    border: 1px solid #3b3f46;
    border-top: 3px solid #e5a93d;
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

.profile-match-modal-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 14px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #aaa;
    background: rgba(0, 0, 0, .2);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.profile-match-modal-close:hover,
.profile-match-modal-close:focus-visible {
    color: #fff;
    border-color: rgba(229, 169, 61, .55);
    outline: none;
}

.profile-match-summary {
    padding-right: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.profile-match-kicker {
    color: #e5a93d;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.profile-match-summary h2 {
    margin: 6px 0 0;
    color: #fff;
    font-family: 'PIXY', 'Noto Sans', sans-serif;
    font-size: clamp(1.45rem, 4vw, 2.35rem);
}

.profile-match-score {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #777;
    font-size: 1.6rem;
}

.profile-match-score strong {
    min-width: 52px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
    text-align: center;
}

.profile-match-meta {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-match-meta span {
    padding: 7px 10px;
    color: #b8bcc3;
    background: #22262c;
    border: 1px solid #353a42;
    border-radius: 5px;
    font-size: .78rem;
}

.profile-match-meta i {
    margin-right: 7px;
    color: #e5a93d;
}

.profile-match-meta .is-live,
.profile-match-meta .is-live i {
    color: #55d987;
}

.profile-match-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    color: #c7b27e;
    background: rgba(229, 169, 61, .08);
    border-left: 3px solid #e5a93d;
    font-size: .82rem;
}

.profile-match-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-match-team {
    min-width: 0;
    background: rgba(36, 39, 45, .88);
    border: 1px solid #363b43;
    border-radius: 8px;
    overflow: hidden;
}

.profile-match-team.is-winner {
    border-color: rgba(229, 169, 61, .65);
    box-shadow: inset 0 3px 0 #e5a93d;
}

.profile-match-team-head {
    min-height: 62px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, .18);
    border-bottom: 1px solid #363b43;
}

.profile-match-team-head h3 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.profile-match-team-head strong {
    color: #e5a93d;
    font-size: 1.55rem;
}

.profile-match-table-scroll {
    overflow-x: auto;
}

.profile-match-table {
    width: 100%;
    min-width: 485px;
    border-collapse: collapse;
    font-size: .78rem;
}

.profile-match-table th,
.profile-match-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    white-space: nowrap;
}

.profile-match-table th {
    color: #7f8791;
    font-size: .66rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-match-table th:first-child,
.profile-match-table td:first-child {
    padding-left: 14px;
    text-align: left;
}

.profile-match-table tbody tr:last-child td {
    border-bottom: 0;
}

.profile-match-table tbody tr:hover,
.profile-match-table tbody tr.is-current-player {
    background: rgba(229, 169, 61, .08);
}

.profile-match-table a {
    color: #f0f0f0;
    font-weight: 700;
    text-decoration: none;
}

.profile-match-table a:hover {
    color: #e5a93d;
}

.profile-match-empty {
    padding: 24px !important;
    color: #888;
    text-align: center !important;
}

.profile-match-loading,
.profile-match-error {
    min-height: 360px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    color: #aaa;
    text-align: center;
}

.profile-match-error i {
    color: #ef5350;
    font-size: 2rem;
}

.profile-match-error p,
.profile-match-loading p {
    margin: 0;
}

@media (max-width: 1050px) {
    .profile-match-teams {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .match-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .match-card-date {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .match-card-open {
        margin-top: 0;
    }

    .profile-match-modal-content {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 18px 12px;
        border-radius: 7px;
    }

    .profile-match-summary {
        padding-right: 34px;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .profile-match-score {
        gap: 8px;
    }

    .profile-match-score strong {
        min-width: 42px;
    }
}

.transfer-card {
    background-color: #252525;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.transfer-date {
    font-size: 0.8rem;
    color: #888;
    font-weight: 600;
}

.transfer-path {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.transfer-team {
    flex: 1;
    text-align: center;
    background: #1e1e1e;
    padding: 10px;
    border-radius: 6px;
}

.transfer-team .team-name {
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
    display: block;
}

.transfer-team .team-position {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: capitalize;
    display: block;
    margin-top: 4px;
}

.transfer-arrow {
    font-size: 1.5rem;
    color: #e5a93d;
}

.modal-overlay {
    display: flex;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

body.modal-open {
    overflow: hidden;
}

/* Рамка профиля - анимированная картинка, а не видео, остановить её
   программно нечем. Пока открыта модалка, она лежит под затемнением на
   весь экран и всё равно не видна, поэтому слой убирается из отрисовки:
   display:none снимает и декодирование кадров, и композицию. Класс ставит
   profile-background.js - на body, а не на картинку, потому что рамка
   создаётся при разборе профиля и может появиться уже при открытой
   модалке. */
body.avatar-frame-paused .profile-avatar-frame {
    display: none;
}

.profile-editor-modal-content,
.profile-editor-modal-content * {
    box-sizing: border-box;
}

.profile-editor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1rem 0 1.25rem;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 12px;
}

.profile-editor-tab {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    background: #3b3b3b;
    color: #ddd;
    font-family: 'PIXY', sans-serif;
    cursor: pointer;
    font-size: 1.25rem;
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.08), inset 0 -4px 0 rgba(0, 0, 0, 0.35);
}

.profile-editor-tab.active {
    background: #e5a93d;
    color: #fff;
    box-shadow: inset 0 4px 0 rgba(255, 244, 204, 0.55), inset 0 -4px 0 rgba(120, 78, 12, 0.4);
}

.profile-editor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.profile-editor-section-header h3 {
    font-size: 1.1rem;
}

#profile-editor-main-section[hidden],
#profile-editor-avatar-section[hidden],
#profile-editor-crosshair-section[hidden],
#profile-editor-statuses-section[hidden],
#profile-editor-medals-section[hidden],
#profile-editor-transfers-section[hidden],
#profile-editor-decorations-section[hidden] {
    display: none !important;
}

#profile-editor-crosshair-section .canvas-wrapper {
    max-width: 100%;
}

#profile-editor-crosshair-section canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

#profile-editor-actions[hidden] {
    display: none !important;
}

.avatar-upload-zone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 148px;
    padding: 20px;
    border: 2px dashed #555;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b2b2b, #202020);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.avatar-upload-zone:hover,
.avatar-upload-zone:focus-visible,
.avatar-upload-zone.is-dragover {
    border-color: #e5a93d;
    background: linear-gradient(135deg, #353124, #242424);
    box-shadow: 0 0 0 3px rgba(229, 169, 61, 0.12);
    outline: none;
}

.avatar-upload-zone.has-file {
    border-style: solid;
    border-color: #4caf7d;
    background: linear-gradient(135deg, #203329, #202a24);
}

.avatar-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.avatar-upload-icon {
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(229, 169, 61, 0.55);
    border-radius: 50%;
    background: rgba(229, 169, 61, 0.12);
    color: #e5a93d;
    font-size: 1.6rem;
}

.avatar-upload-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.avatar-upload-copy strong {
    color: #fff;
    font-size: 1rem;
}

.avatar-upload-copy span,
.avatar-upload-copy small {
    color: #aaa;
    font-size: 0.8rem;
}

.avatar-upload-copy small {
    color: #777;
}

.avatar-upload-file-name {
    max-width: 180px;
    margin-left: auto;
    overflow: hidden;
    color: #e5a93d;
    font-size: 0.75rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #3d5949;
    border-radius: 8px;
    background: #1e2b23;
}

.avatar-preview-card[hidden] {
    display: none !important;
}

.avatar-preview-image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border: 2px solid #4caf7d;
    border-radius: 6px;
    background: #172019;
    object-fit: cover;
}

.avatar-preview-name {
    min-width: 0;
    overflow: hidden;
    color: #ddd;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-preview-remove {
    margin-left: auto;
    padding: 7px 10px;
    border: 1px solid #7a4a4a;
    border-radius: 5px;
    background: #3a2525;
    color: #ff9a9a;
    cursor: pointer;
    font-size: 0.75rem;
}

.avatar-preview-remove:hover {
    background: #4a2c2c;
}

#profile-displayName-input:disabled,
#profile-country-input:disabled,
#profile-role-input:disabled {
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .profile-editor-modal-content {
        padding: 1.25rem !important;
    }

    .profile-editor-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-editor-section-header button {
        width: 100%;
    }

    .avatar-upload-zone {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .avatar-upload-file-name {
        width: 100%;
        max-width: none;
        margin-left: 0;
        text-align: left;
    }

    .avatar-preview-remove {
        width: 100%;
        margin-left: 0;
    }
}

.editor-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

@media (min-width: 768px) {
    .editor-container {
        flex-direction: row;
    }
}

.preview-section {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.canvas-wrapper {
    background-color: #2a2a2a;
    border: 2px solid #444;
    line-height: 0;
}

.controls-section {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.color-box {
    height: 20px;
    cursor: pointer;
    border: 2px solid transparent;
}

.color-box.selected {
    border-color: #ffffff;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.control-group label {
    font-size: 0.9rem;
    color: #ccc;
}

.controls-section input[type="range"] {
    width: 100%;
    cursor: pointer;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.controls-section button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    background-color: #444;
}

.controls-section button:hover {
    opacity: 0.9;
}

.controls-section button.active {
    background-color: #2563eb;
}

.controls-section button.reset {
    background-color: #dc2626;
}

.controls-section button.save {
    background-color: #16a34a;
}

.config-display {
    margin-bottom: 20px;
    text-align: left;
    background: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Noto Sans', sans-serif;
}

.config-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #3a3a3a;
    font-size: 0.9rem;
}

.config-row:last-child {
    border-bottom: none;
}

.config-label {
    color: #aaa;
}

.config-value {
    color: #fff;
    font-weight: bold;
}

.live-indicator {
    color: #2196F3;
    font-weight: bold;
    animation: pulse 1.5s infinite;
    text-transform: uppercase;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.medals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 164px));
    gap: 15px;
    justify-content: start;
    padding: 10px 0;
}

.medal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    border: 2px solid #e5a93d;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.medal-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border: none;
    border-radius: 5px;
    background-color: transparent;
}

.own-profile-sidebar>.player-details-box,
.own-profile-sidebar>.registration-box {
    margin-top: 5px;
}

.own-profile-sidebar>.registration-box:first-of-type {
    margin-top: 0;
}

.admin-tools-box {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #555;
    border-top: 3px solid #e5a93d;
    border-radius: 6px;
    background: #242424;
}

.admin-tools-title {
    padding: 2px 4px 6px;
    color: #e5a93d;
    font-family: 'PIXY', sans-serif;
    font-size: 1.25rem;
    text-align: center;
}

.admin-tool-button {
    margin-top: 0 !important;
    padding: 11px 8px !important;
    cursor: pointer;
    font-size: 13px !important;
    transition: filter 0.15s ease, background 0.15s ease;
}

.admin-tool-button:hover {
    filter: brightness(1.12);
}

.admin-tools-panel {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
}

.medal-action-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.medal-action-btn:hover {
    transform: scale(1.1);
}

.medal-action-btn.add {
    background-color: #16a34a;
}

.medal-action-btn.remove {
    background-color: #dc2626;
}

.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #e5a93d;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.profile-category-selector {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
}

.inventory-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 18px;
    overflow: visible;
}

.profile-category-panel[hidden] {
    display: none;
}

.profile-showcase-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.profile-showcase-slot {
    min-height: 170px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    background: rgba(30, 30, 30, .72);
    border: 1px solid rgba(229, 169, 61, .35);
    border-radius: 8px;
}

.profile-showcase-slot__number {
    color: #e5a93d;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-showcase-slot__item {
    min-height: 68px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #f4f4f4;
    overflow-wrap: anywhere;
}

.profile-showcase-slot select,
.profile-showcase-slot button {
    width: 100%;
    min-width: 0;
}

@media (max-width: 850px) {
    .profile-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .profile-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.profile-showcase-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    background: rgba(30, 30, 30, .72);
    border: 1px dashed rgba(229, 169, 61, .35);
    border-radius: 8px;
    color: #888;
}

.profile-showcase-empty i {
    color: #e5a93d;
    opacity: 0.6;
}

/* Витрина в стиле инвентаря */
.profile-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.profile-showcase-grid .inv-item-card {
    min-height: 180px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(30, 30, 30, .72);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.profile-showcase-grid .inv-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(229, 169, 61, .4);
}

.profile-showcase-grid .inv-item-card.showcase-editable {
    cursor: pointer;
}

.profile-showcase-grid .inv-item-card.showcase-editable:hover {
    border-color: #e5a93d;
}

.showcase-slot-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #e5a93d, #d4932a);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Кнопка удаления с витрины (overlay на карточке) */
.showcase-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s ease;
    z-index: 2;
}

.inv-item-card.showcase-editable:hover .showcase-remove-btn {
    opacity: 1;
    transform: scale(1);
}

.showcase-remove-btn:hover {
    background: #e53935;
    color: #fff;
}

.showcase-remove-btn i {
    font-size: 0.7rem;
}

/* Кнопка добавления слота */
.showcase-add-slot {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 12px;
    background: rgba(229, 169, 61, .08);
    border: 2px dashed rgba(229, 169, 61, .4);
    color: #e5a93d;
    cursor: pointer;
    transition: all 0.15s ease;
}

.showcase-add-slot:hover {
    background: rgba(229, 169, 61, .15);
    border-color: #e5a93d;
    color: #ffd700;
}

.showcase-add-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    opacity: 0.7;
}

.showcase-add-text {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.showcase-add-hint {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Модалка редактирования слота */
.showcase-slot-modal-content {
    max-width: 400px;
    text-align: center;
    padding: 1.5rem;
}

.showcase-slot-modal-header h3 {
    margin: 0 0 1rem;
    color: #e5a93d;
}

.showcase-slot-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 1rem;
    background: rgba(255, 255, 255, .03);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.showcase-slot-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Модалка добавления предмета */
.showcase-add-modal-content {
    padding: 1.5rem;
}

.showcase-add-modal-header h3 {
    margin: 0 0 0.5rem;
    color: #e5a93d;
}

.showcase-add-modal-header p {
    margin: 0 0 1.5rem;
}

.showcase-add-content {
    max-height: 50vh;
    overflow-y: auto;
}

.showcase-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.showcase-add-item {
    cursor: pointer;
    transition: all 0.15s;
}

.showcase-add-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(229, 169, 61, .4);
}

.showcase-add-item.selected {
    border-color: #e5a93d !important;
    box-shadow: 0 0 0 2px #e5a93d, 0 8px 24px rgba(229, 169, 61, 0.3);
}

.showcase-add-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Стили для кнопки "Добавить в витрину" в модалке инвентаря */
.inv-item-modal-showcase-action {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.inv-showcase-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #e5a93d, #d4932a);
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.inv-showcase-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 169, 61, 0.4);
}

.inv-showcase-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.inv-showcase-btn i {
    font-size: 0.9em;
}

.profile-category-btn {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    font-family: 'PIXY', sans-serif;
    font-size: 0.9rem;
}

.profile-category-btn.active {
    background: #e5a93d;
    color: #fff;
    outline: none;
    box-shadow: inset 0 7px 0 rgba(255, 244, 204, 0.55), inset 0 -7px 0 rgba(120, 78, 12, 0.4);
}

.profile-category-btn.active:hover {
    filter: brightness(1.04);
}

.inv-filter-btn {
    flex: 1 0 110px;
    width: auto;
    min-width: 0;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: #514c4a;
    box-shadow: inset 0 7px 0 rgba(119, 111, 109, 0.6), inset 0 -7px 0 rgba(39, 34, 32, 0.6);
    color: #fff;
    font-family: 'PIXY', 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: filter 0.15s ease, outline-color 0.15s ease;
}

.inventory-filter-bar .inv-filter-btn {
    width: 100%;
}

#inv-count-label {
    display: block;
    width: 100%;
    margin: 4px 0 10px;
    text-align: right;
}

.inv-filter-btn:hover {
    color: #fff;
    filter: brightness(1.08);
}

.inv-filter-btn:active {
    filter: brightness(0.98);
}

.inv-filter-btn:focus-visible {
    outline: 3px solid #fbac18;
    outline-offset: 2px;
}

.inv-filter-btn.active {
    outline: 3px solid #fff;
    outline-offset: -3px;
    color: #fff;
}

.inv-filter-btn.profile-category-btn.active {
    background: #e5a93d;
    color: #fff;
    outline: none;
    box-shadow: inset 0 7px 0 rgba(255, 244, 204, 0.55), inset 0 -7px 0 rgba(120, 78, 12, 0.4);
}

.inv-filter-btn.profile-category-btn.active:hover {
    filter: brightness(1.04);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 576px) {
    .profile-category-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-category-btn {
        min-height: 46px;
        padding: 7px 8px;
        font-size: 0.78rem;
    }

    .inventory-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inv-filter-btn,
    .inv-filter-btn.profile-category-btn {
        min-height: 44px;
        padding: 0 10px;
        font-size: 0.78rem;
    }
}

@media (max-width: 380px) {

    .inventory-filter-bar,
    .inventory-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .inv-filter-btn,
    .inv-filter-btn.profile-category-btn,
    .profile-category-btn {
        padding: 0 6px;
        font-size: 0.72rem;
    }

    .profile-category-selector {
        grid-template-columns: minmax(0, 1fr);
    }
}

.inv-item-card {
    min-width: 0;
    background: #1e1e1e;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 10px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.inv-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.inv-item-card:hover[data-rarity="CONSUMER"] {
    box-shadow: 0 6px 20px rgba(176, 195, 217, 0.25);
}

.inv-item-card:hover[data-rarity="INDUSTRIAL"] {
    box-shadow: 0 6px 20px rgba(94, 152, 217, 0.25);
}

.inv-item-card:hover[data-rarity="MILSPEC"],
.inv-item-card:hover[data-rarity="MILITARY"],
.inv-item-card:hover[data-rarity="MILITARY_GRADE"] {
    box-shadow: 0 6px 20px rgba(75, 105, 255, 0.25);
}

.inv-item-card:hover[data-rarity="RESTRICTED"] {
    box-shadow: 0 6px 20px rgba(136, 71, 255, 0.25);
}

.inv-item-card:hover[data-rarity="CLASSIFIED"] {
    box-shadow: 0 6px 20px rgba(211, 44, 230, 0.25);
}

.inv-item-card:hover[data-rarity="COVERT"] {
    box-shadow: 0 6px 20px rgba(235, 75, 75, 0.25);
}

.inv-item-card:hover[data-rarity="CONTRABAND"] {
    box-shadow: 0 6px 20px rgba(228, 174, 57, 0.4);
}

.inv-item-card[data-cat="KNIFE"]:hover,
.inv-item-card[data-cat="GLOVES"]:hover {
    box-shadow: 0 6px 20px rgba(228, 174, 57, 0.4);
}

.inv-item-img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    display: block;
}

.inv-item-card[data-cat="GRAFFITI"] .inv-item-img,
.inv-item-card[data-cat="MEDAL"] .inv-item-img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.inv-item-name {
    font-size: 0.72rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    font-family: 'Noto Sans', sans-serif;
}

.inv-item-def {
    font-size: 0.65rem;
    color: #888;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
}

.inv-item-rarity {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inv-item-rarity.CONSUMER {
    color: #b0c3d9;
}

.inv-item-rarity.INDUSTRIAL {
    color: #5e98d9;
}

.inv-item-rarity.MILSPEC,
.inv-item-rarity.MILITARY,
.inv-item-rarity.MILITARY_GRADE {
    color: #4b69ff;
}

.inv-item-rarity.RESTRICTED {
    color: #8847ff;
}

.inv-item-rarity.CLASSIFIED {
    color: #d32ce6;
}

.inv-item-rarity.COVERT {
    color: #eb4b4b;
}

.inv-item-rarity.CONTRABAND {
    color: #e4ae39;
}

.inv-item-rarity.COMMON {
    color: #888;
}

.inv-st-badge {
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 0.85rem;
    font-weight: 900;
    color: #e5a93d;
    font-family: 'PIXY', sans-serif;
    white-space: nowrap;
    pointer-events: none;
}

.inv-item-card:focus-visible {
    outline: 2px solid #e5a93d;
    outline-offset: 2px;
}

.inv-item-card,
#inventory-item-modal .inv-item-modal-content {
    --inv-frame: #333;
}

.inv-item-card[data-rarity="CONSUMER"],
#inventory-item-modal .inv-item-modal-content[data-rarity="CONSUMER"] {
    --inv-frame: #b0c3d9;
}

.inv-item-card[data-rarity="INDUSTRIAL"],
#inventory-item-modal .inv-item-modal-content[data-rarity="INDUSTRIAL"] {
    --inv-frame: #5e98d9;
}

.inv-item-card[data-rarity="MILSPEC"],
.inv-item-card[data-rarity="MILITARY"],
.inv-item-card[data-rarity="MILITARY_GRADE"],
#inventory-item-modal .inv-item-modal-content[data-rarity="MILSPEC"],
#inventory-item-modal .inv-item-modal-content[data-rarity="MILITARY"],
#inventory-item-modal .inv-item-modal-content[data-rarity="MILITARY_GRADE"] {
    --inv-frame: #4b69ff;
}

.inv-item-card[data-rarity="RESTRICTED"],
#inventory-item-modal .inv-item-modal-content[data-rarity="RESTRICTED"] {
    --inv-frame: #8847ff;
}

.inv-item-card[data-rarity="CLASSIFIED"],
#inventory-item-modal .inv-item-modal-content[data-rarity="CLASSIFIED"] {
    --inv-frame: #d32ce6;
}

.inv-item-card[data-rarity="COVERT"],
#inventory-item-modal .inv-item-modal-content[data-rarity="COVERT"] {
    --inv-frame: #eb4b4b;
}

.inv-item-card[data-rarity="CONTRABAND"],
#inventory-item-modal .inv-item-modal-content[data-rarity="CONTRABAND"] {
    --inv-frame: #e4ae39;
}

.inv-item-card[data-cat="KNIFE"],
.inv-item-card[data-cat="GLOVES"],
#inventory-item-modal .inv-item-modal-content[data-cat="KNIFE"],
#inventory-item-modal .inv-item-modal-content[data-cat="GLOVES"] {
    --inv-frame: #e4ae39;
}

.inv-item-card[data-reserve="1"],
#inventory-item-modal .inv-item-modal-content[data-reserve="1"] {
    --inv-frame: #00eaba;
}

.inv-item-card {
    border-color: var(--inv-frame);
}

#inventory-item-modal {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

#inventory-item-modal .inv-item-modal-content {
    width: min(96vw, 1000px);
    max-width: 1000px;
    max-height: 92vh;
    padding: 20px;
    overflow-y: auto;
    background-color: rgba(30, 30, 30, 0.8);
    border: 2px solid var(--inv-frame);
    transition: border-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inv-item-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 36px;
    margin-bottom: 14px;
}

.inv-item-modal-title {
    margin: 0;
    color: #e5a93d;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.35rem;
    overflow-wrap: anywhere;
}

.inv-item-modal-definition {
    margin: 5px 0 0;
    color: #aaa;
    font-size: 0.9rem;
}

.inv-item-modal-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: #aaa;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.inv-item-modal-stats span {
    padding: 4px 7px;
    border: 1px solid #444;
    border-radius: 4px;
    white-space: nowrap;
}

.inv-item-modal-stats .stattrack {
    border-color: #e5a93d;
    color: #e5a93d;
    font-family: 'PIXY', sans-serif;
}

#inventory-item-modal .inv-item-modal-viewer {
    width: 100%;
    height: min(62vh, 580px);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: radial-gradient(circle at 50% 35%, rgba(52, 52, 52, 0.12) 0%, rgba(24, 24, 24, 0.4) 72%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

#inventory-item-modal .inv-item-modal-viewer canvas.inv-item-modal-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
}

#inventory-item-modal .inv-item-modal-viewer canvas.inv-item-modal-canvas:active {
    cursor: grabbing;
}

.inv-item-modal-canvas.is-preparing {
    opacity: 0;
}

.inv-item-modal-actions {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: center;
}

.inv-inspect-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(229, 169, 61, 0.55);
    border-radius: 4px;
    background: rgba(20, 20, 20, 0.72);
    color: #e5a93d;
    font-family: 'PIXY', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.inv-inspect-btn:hover:not(:disabled) {
    background: rgba(229, 169, 61, 0.18);
    border-color: #e5a93d;
}

.inv-inspect-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.inv-inspect-btn.is-running {
    color: #e8e8e8;
    border-color: rgba(232, 232, 232, 0.5);
}

.inv-inspect-btn.is-running:hover {
    background: rgba(232, 232, 232, 0.16);
    border-color: #e8e8e8;
}

.inv-item-modal-loading-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.inv-item-modal-busy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(10, 10, 12, 0.72);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.inv-item-modal-busy[hidden] {
    display: none;
}

.inv-item-modal-busy i {
    font-size: 1.6rem;
    color: #e5a93d;
}

.inv-item-modal-busy span {
    font-size: 0.8rem;
    color: #9a9a9a;
}

.inv-item-modal-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    flex: 1 1 auto;
    object-fit: contain;
}

.inv-item-modal-image.pixelated {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.inv-item-modal-hint {
    margin: 10px 2px 0;
    color: #888;
    font-size: 0.78rem;
    text-align: center;
}

/* Кейсы, из которых выпадает предмет. В самом API связь закрыта, список
собирает бэкенд через unwrapLootboxContent. */
.inv-item-modal-cases {
    margin: 12px 2px 0;
    padding-top: 10px;
    border-top: 1px solid #2a2a2a;
}

.inv-item-modal-cases-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e5a93d;
    margin-bottom: 8px;
}

.inv-item-modal-cases-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.inv-item-modal-cases-list li {
    font-size: 0.78rem;
    color: #d5d5d5;
    background: #242424;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 3px 9px;
}

.inv-item-modal-hint strong {
    color: #e5a93d;
}

.inv-item-modal-empty {
    color: #888;
    text-align: center;
    padding: 2rem;
}

.inv-item-modal-empty i {
    display: block;
    margin-bottom: 0.75rem;
    color: #555;
    font-size: 2.5rem;
}

@media (max-width: 576px) {
    .inv-item-modal-content {
        padding: 15px;
    }

    .inv-item-modal-header {
        display: block;
    }

    .inv-item-modal-stats {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .inv-item-modal-viewer {
        height: 55vh;
        min-height: 260px;
    }

    .inv-item-modal-image {
        max-height: 55vh;
    }
}

.inv-load-more-btn {
    margin: 18px auto 0;
    display: block;
    padding: 10px 32px;
    background: #2a2a2a;
    border: 1px solid #e5a93d;
    color: #e5a93d;
    border-radius: 4px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.inv-load-more-btn:hover {
    background: #3a3a1a;
}

.inv-load-more-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

#profile-panel-inventory,
#inventory-section,
#player-profile-container,
.main-content {
    min-width: 0;
    max-width: 100%;
}

.battlepass-panel {
    --bp-background: #262423;
    --bp-surface: #2e2e2e;
    --bp-card: #323234;
    --bp-border: #505050;
    --bp-muted: #8b8b90;
    --bp-text-muted: #b6b6b6;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
}

.battlepass-hero {
    position: relative;
    min-height: clamp(280px, 31vw, 380px);
    overflow: hidden;
    border: 2px solid var(--bp-border);
    background-color: var(--bp-background);
    background-position: center 56%;
    background-size: cover;
    isolation: isolate;
}

.battlepass-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(22, 20, 19, 0.86) 0%, rgba(22, 20, 19, 0.48) 36%, rgba(22, 20, 19, 0.10) 78%),
        linear-gradient(0deg, rgba(22, 20, 19, 0.74), transparent 58%);
}

.battlepass-hero-content {
    min-height: clamp(280px, 31vw, 380px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    max-width: 680px;
    padding: clamp(20px, 3vw, 34px);
}

.battlepass-kicker {
    margin: 0;
    color: #fbac18;
    font-family: 'PIXY', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.battlepass-season {
    margin: 5px 0 0;
    color: #fff;
    font-family: 'PIXY', sans-serif;
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65);
}

.battlepass-progress-box {
    width: min(100%, 560px);
    padding: 12px 14px;
    border: 2px solid var(--bp-border);
    border-top-color: #fbac18;
    background: rgba(38, 36, 35, 0.92);
}

.battlepass-progress-heading,
.battlepass-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.battlepass-progress-heading {
    color: #fff;
    font-family: 'PIXY', sans-serif;
    font-size: 0.92rem;
}

.battlepass-progress-heading strong {
    color: #fbac18;
    font-size: 1.15rem;
}

.battlepass-progress-meta {
    margin-top: 7px;
    color: var(--bp-text-muted);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.72rem;
}

.battlepass-progress-track {
    height: 9px;
    margin-top: 9px;
    overflow: hidden;
    border: 1px solid #696969;
    background: #404040;
}

.battlepass-progress-fill {
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #f47c00, #fbac18);
    box-shadow: 0 0 10px rgba(251, 172, 24, 0.55);
    transition: width 0.25s ease;
}

.battlepass-date-note {
    align-self: flex-end;
    color: var(--bp-text-muted);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75rem;
    text-align: right;
}

.battlepass-track-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 12px;
    overflow: hidden;
    border: 2px solid var(--bp-border);
    border-top-color: #fbac18;
    background: var(--bp-background);
}

.battlepass-track-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-x: contain;
    scrollbar-color: var(--bp-border) var(--bp-background);
    scrollbar-width: auto;
    cursor: grab;
}

.battlepass-track-scroll::-webkit-scrollbar {
    height: 18px;
}

.battlepass-track-scroll::-webkit-scrollbar-track {
    border-top: 2px solid var(--bp-border);
    border-bottom: 2px solid var(--bp-border);
    background: var(--bp-background);
}

.battlepass-track-scroll::-webkit-scrollbar-thumb {
    min-width: 94px;
    border: 2px solid var(--bp-background);
    background: var(--bp-border);
}

.battlepass-track-scroll::-webkit-scrollbar-thumb:hover {
    background: #696969;
}

.battlepass-track-scroll:active {
    cursor: grabbing;
}

.battlepass-track-inner {
    display: flex;
    min-width: max-content;
    min-height: 342px;
    background: var(--bp-background);
}

.battlepass-track-labels {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    flex: 0 0 94px;
    flex-direction: column;
    justify-content: space-between;
    border-right: 2px solid var(--bp-border);
    background: var(--bp-background);
}

.battlepass-track-label {
    display: flex;
    min-height: 142px;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    color: #fbac18;
    font-family: 'PIXY', sans-serif;
    font-size: 1.25rem;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.battlepass-track-label.free {
    color: #4b69cd;
}

.battlepass-label-divider {
    height: 2px;
    border-top: 1px solid var(--bp-border);
    border-bottom: 1px solid var(--bp-border);
    background: var(--bp-surface);
}

.battlepass-levels {
    display: flex;
    align-items: stretch;
}

.battlepass-level {
    --battlepass-slot-size: 175px;
    display: grid;
    width: max-content;
    min-width: 166px;
    flex: 0 0 auto;
    grid-template-columns: repeat(var(--battlepass-slot-count, 1), var(--battlepass-slot-size));
    gap: 4px 5px;
    padding: 8px;
    border-right: 1px solid rgba(80, 80, 80, 0.4);
}

.battlepass-level.is-current {
    background: rgba(251, 172, 24, 0.05);
}

.battlepass-level.is-track-complete {
    background: rgba(0, 234, 186, 0.07);
}

.battlepass-level.is-track-complete .battlepass-level-number {
    border-color: #00eaba;
    color: #00eaba;
}

.battlepass-track-complete-note {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 234, 186, 0.45);
    background: rgba(0, 234, 186, 0.08);
    color: #00eaba;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
}

.battlepass-lane {
    display: grid;
    min-height: 126px;
    flex: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--battlepass-lane-slot-count, 1), var(--battlepass-slot-size));
    align-items: stretch;
    gap: 5px;
}

.battlepass-level-number {
    display: flex;
    min-height: 27px;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    border-top: 2px solid var(--bp-border);
    border-bottom: 2px solid var(--bp-border);
    color: var(--bp-text-muted);
    font-family: 'PIXY', sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.battlepass-level.is-current .battlepass-level-number {
    border-color: #fbac18;
    color: #fbac18;
}

.battlepass-slot {
    display: flex;
    width: var(--battlepass-slot-size);
    min-width: var(--battlepass-slot-size);
    min-height: 126px;
    flex: none;
    align-items: stretch;
}

.battlepass-slot.empty {
    border: 2px dashed rgba(80, 80, 80, 0.4);
    background: transparent;
}

.battlepass-reward-card[data-rarity="CONSUMER"] {
    border-color: #afafaf;
}

.battlepass-reward-card[data-rarity="INDUSTRIAL"] {
    border-color: #afafaf;
}

.battlepass-reward-card[data-rarity="MILSPEC"],
.battlepass-reward-card[data-rarity="MILITARY"],
.battlepass-reward-card[data-rarity="MILITARY_GRADE"],
.battlepass-reward-card[data-rarity="RESTRICTED"] {
    border-color: #4b69cd;
}

.battlepass-reward-card[data-rarity="CLASSIFIED"] {
    border-color: #d32ce6;
}

.battlepass-reward-card[data-rarity="COVERT"] {
    border-color: #eb4b4b;
}

.battlepass-reward-card[data-rarity="CONTRABAND"] {
    border-color: #00eaba;
}

.battlepass-reward-card[data-rarity="SPECIAL"] {
    border-color: #fbac18;
}

.battlepass-reward-card {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 126px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 7px 5px 6px;
    border: 2px solid #fff;
    border-radius: 0;
    background: var(--bp-card);
    color: #fff;
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.battlepass-reward-card:hover {
    z-index: 1;
    background: #464648;
    transform: translateY(-1px);
}

.battlepass-reward-card.is-claiming,
.battlepass-reward-card:disabled {
    cursor: wait;
    opacity: 0.65;
}

.battlepass-reward-card:focus-visible {
    outline: 2px solid #fbac18;
    outline-offset: 1px;
}

.battlepass-reward-card.is-claimed {
    opacity: 0.4;
}

.battlepass-reward-card.is-claimable {
    box-shadow: 0 0 0 1px rgba(251, 172, 24, 0.7), 0 0 13px rgba(251, 172, 24, 0.48);
    animation: battlepass-reward-pulse 2.6s ease-in-out infinite;
}

.battlepass-reward-card.is-locked {
    background: var(--bp-card);
}

.battlepass-reward-image {
    display: flex;
    width: 100%;
    min-height: 90px;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.battlepass-reward-image img {
    display: block;
    width: 100%;
    max-width: 132px;
    height: 90px;
    object-fit: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.battlepass-reward-image .balance-icon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.battlepass-reward-name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battlepass-reward-count,
.battlepass-temp-badge {
    position: absolute;
    z-index: 1;
    font-family: 'PIXY', sans-serif;
    line-height: 1;
}

.battlepass-reward-count {
    top: 5px;
    right: 5px;
    padding: 3px 4px;
    color: #171717;
    background: #fbac18;
    font-size: 0.68rem;
}

.battlepass-temp-badge {
    top: 5px;
    left: 5px;
    padding: 3px 4px;
    border: 1px solid rgba(251, 172, 24, 0.7);
    color: #fbac18;
    background: rgba(38, 36, 35, 0.82);
    font-size: 0.58rem;
    text-transform: uppercase;
}

.battlepass-reward-xp {
    color: #fbac18;
    font-family: 'PIXY', sans-serif;
    font-size: 1.1rem;
}

.battlepass-reward-unknown {
    color: var(--bp-muted);
    font-family: 'PIXY', sans-serif;
    font-size: 0.64rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.battlepass-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    color: var(--bp-muted);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.7rem;
}

.battlepass-legend span::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border: 1px solid var(--bp-border);
    background: var(--bp-card);
    content: '';
    vertical-align: 0;
}

.battlepass-legend .claimed::before {
    opacity: 0.4;
}

.battlepass-legend .claimable::before {
    border-color: #fbac18;
    background: #fbac18;
}

.battlepass-legend .locked::before {
    border-color: var(--bp-border);
    background: var(--bp-card);
}

.battlepass-empty,
.battlepass-error {
    padding: 2rem 1rem;
    color: var(--bp-muted);
    text-align: center;
}

.battlepass-error {
    color: #d88b6a;
}

.battlepass-retry-btn {
    margin-top: 12px;
    padding: 8px 18px;
    border: 1px solid #fbac18;
    border-radius: 0;
    color: #fbac18;
    background: var(--bp-card);
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.78rem;
}

.battlepass-retry-btn:hover {
    background: #414141;
}

@keyframes battlepass-reward-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(251, 172, 24, 0.7), 0 0 4px rgba(251, 172, 24, 0.3);
    }

    50% {
        box-shadow: 0 0 0 1px #fbac18, 0 0 16px 4px rgba(251, 172, 24, 0.65);
    }
}

@media (max-width: 576px) {

    .battlepass-hero,
    .battlepass-hero-content {
        min-height: 250px;
    }

    .battlepass-hero-content {
        min-height: 250px;
        padding: 18px;
    }

    .battlepass-date-note {
        align-self: flex-start;
        text-align: left;
    }

    .battlepass-track-labels {
        flex-basis: 68px;
    }

    .battlepass-track-label {
        font-size: 0.7rem;
    }

    .battlepass-level {
        min-width: 162px;
        padding: 6px;
    }
}

@media (max-width: 380px) {
    .battlepass-track-labels {
        flex-basis: 60px;
    }
}

.inv-privacy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    color: #aaa;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.8rem;
}

.inv-privacy-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-privacy-label i {
    color: #e5a93d;
}

.inv-privacy-hint {
    color: #666;
    font-size: 0.72rem;
}

.inv-privacy-btn {
    margin-left: auto;
    background: #2a2a2a;
    border: 1px solid #444;
    color: #bbb;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.inv-privacy-btn:hover {
    border-color: #e5a93d;
    color: #e5a93d;
}

.inv-privacy-btn.is-private {
    background: #492d29;
    border-color: #e5a93d;
    color: #e5a93d;
}

.inv-privacy-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.inv-hidden-state {
    text-align: center;
    color: #888;
    padding: 2.25rem 1rem;
}

.inv-hidden-state i {
    display: block;
    font-size: 3rem;
    color: #666;
    margin-bottom: 1rem;
}

.inv-hidden-state p {
    margin: 0.35rem 0 0;
}

.registration-box[onclick],
#edit-nickname-btn {
    cursor: pointer;
}

.inventory-auth-required {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    color: #fff;
}

.inventory-auth-required h3 {
    margin: 0;
    color: #e5a93d;
    font-family: 'PIXY', sans-serif;
}

.inventory-auth-required p {
    margin: 0;
    color: #aaa;
}

.profile-category-btn .tab-lock {
    margin-right: 6px;
    font-size: 0.75em;
    opacity: 0.75;
}