/* ============================================================
   Правки удобства play.elopub.com по аудиту 24.09.2026.
   Подключается в layouts/app.blade.php темы standard-elopub.
   Откат — убрать строку <link … elopub-ux.css>.
   ============================================================ */

/* 1. Кнопка чата на телефоне стоит над нижней панелью, а не поверх её вкладок.
      Высота панели — 68 px + безопасная зона (как в самом Flute). */
@media (max-width: 768px) {
    body:has(.tabbar) #chatToggleBtn {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
}

/* 2. Пока открыто меню, окно или шторка — кнопку чата прячем: иначе она
      закрывает «Создать» в новом лобби и нижние пункты шторок. */
body.sidebar-mobile-open #chatToggleBtn,
body:has(.modal.is-open) #chatToggleBtn,
body:has(.mt-cs[data-mt-create-sheet]:not([hidden])) #chatToggleBtn {
    display: none !important;
}

/* 3. Баннеры-объявления больше не закрывают заголовок страницы.
      Flute держит их fixed и сдвигает шапку вниз на их высоту
      (--announcement-stack-height), а место под шапку резервирует только
      для навигации «pill» — у нас боковая панель, и контент уезжал под
      баннеры (98 px на ПК, 175 px на телефоне). */
@media (min-width: 769px) {
    html[data-announcement-active="true"] #main {
        padding-top: var(--announcement-stack-height, 0px);
    }
}
/* На телефоне баннеры идут первым блоком и уезжают при прокрутке —
   иначе вместе с шапкой они занимали треть экрана. Наверх страницы их
   переносит elopub-ux.js (в разметке Flute они стоят после <main>). */
@media (max-width: 768px) {
    .announcement-container {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
    }
    html[data-announcement-active="true"] .flute_header {
        top: 0 !important;
    }
}

/* 5. Топ фрагов на телефоне: таблица была 582 px при экране 412 px, и
      колонки «Фраги» и «Награда» уходили за край без намёка на прокрутку.
      Здесь строка — карточка: место слева, ник сверху, под ним фраги
      и награда. Только основная таблица фрагов (.frags-table-player и четыре
      колонки) — у «Выданных наград» колонок две, для неё правило 5б. */
@media (max-width: 640px) {
    table.table:has(.frags-table-player):has(th:nth-child(4)) {
        width: 100% !important;
        min-width: 0 !important;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) thead {
        display: none;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "place player reward"
            "place frags  reward";
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--transp-1);
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody td:nth-child(1) { grid-area: place; }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody td:nth-child(2) { grid-area: player; }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody td:nth-child(3) {
        grid-area: frags;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody td:nth-child(3)::before {
        content: "Фраги ";
        font-weight: 400;
        color: var(--text-400);
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) tbody td:nth-child(4) {
        grid-area: reward;
        justify-self: end;
    }
    /* награда: сумма и значок второй награды в одну строку, значок меньше;
       что за награда — по нажатию (открывается окно набора), как и раньше */
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-reward {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-reward__bundle {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-reward__bundle img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-medal {
        margin-left: 0;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-player__avatar {
        flex: 0 0 auto;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-player__info {
        min-width: 0;
    }
    table.table:has(.frags-table-player):has(th:nth-child(4)) .frags-table-player__name {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* 4. У залогиненных в нижней панели две вкладки «Ещё»: первая — разделы
      сайта (пункт меню с подпунктами), вторая — только язык и соцсети.
      Язык есть флажком в шапке, соцсети — внизу бокового меню, поэтому
      вторую прячем, но только когда первая есть: у гостя «Ещё» одна,
      и в ней весь список разделов. */
@media (max-width: 768px) {
    .tabbar:has(.tabbar__item--dropdown) .tabbar__item--more {
        display: none !important;
    }
}

/* 6. Баланс в шапке на телефоне. Модуль баланса прятал виджет на экранах
      уже 768 px. Показываем компактно: знак ₽ и сумма; рюкзак (ссылка на
      профиль elopub) — только если экран шире 400 px.
      Виджет — <li> внутри <li class="navbar__action-widgets">, и браузер
      выносит его наружу соседом, поэтому селектор от .navbar__actions. */
@media (max-width: 768px) {
    .navbar__actions .elo-balance-container {
        display: inline-flex !important;
        height: 32px;
        padding: 2px;
        gap: 2px;
    }
    .navbar__actions .elo-balance-item {
        padding: 4px 8px;
    }
    .navbar__actions .elo-balance-currency {
        display: inline !important;
    }
    .navbar__actions .elo-balance-divider {
        display: none;
    }
}
@media (max-width: 400px) {
    .navbar__actions .elo-balance-item--inventory {
        display: none;
    }
}

/* 5б. «Выданные награды за …» на /frags (колонки «Игрок» и «Награда»):
       длинный ник наезжал на награду. Ник обрезается многоточием,
       награда всегда целиком справа. */
@media (max-width: 640px) {
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) {
        width: 100% !important;
        min-width: 0 !important;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) thead {
        display: none;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        padding: 10px 14px;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) tbody td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) .frags-table-player__avatar {
        flex: 0 0 auto;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) .frags-table-player__info {
        min-width: 0;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) .frags-table-player__name {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) .frags-table-reward {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) .frags-table-reward__bundle {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }
    table.table:has(.frags-table-player):not(:has(th:nth-child(3))) .frags-table-reward__bundle img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* 7. Выбор даты на /frags на телефоне: было «Дата» и поле по центру отдельной
      строкой — теперь одна строка во всю ширину, подпись слева. */
@media (max-width: 640px) {
    /* у заголовочного блока Flute отступ слева 8 px при полной ширине —
       правый край выходил на 8 px дальше карточек ниже */
    legend:has(#frags-filters) {
        width: calc(100% - 8px);
    }
    legend:has(#frags-filters) .legend-actions {
        width: 100%;
        margin-top: 14px;
    }
    legend:has(#frags-filters) .legend-actions {
        justify-content: stretch;
    }
    #frags-filters {
        width: 100%;
    }
    #frags-filters .select-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    #frags-filters .select__prefix {
        flex: 0 0 auto;
        margin: 0;
        color: var(--text-400);
    }
    #frags-filters .select__field-container {
        flex: 1 1 auto;
        min-width: 0;
    }
    #frags-filters .select__field-container > * {
        width: 100%;
    }
}

/* 8. Подвал на телефоне: у карточки была рамка без внутреннего отступа
      (текст прилипал к краю), логотип занимал 144 px, соцсети шли тремя
      полосами во всю ширину, между ссылками — большие дыры. */
@media (max-width: 768px) {
    #footer {
        margin-top: 24px;
        padding-top: 8px;
    }
    #footer .footer {
        padding: 22px 18px 18px;
        border-radius: 18px;
    }
    #footer .footer__content {
        gap: 22px;
        margin-bottom: 18px;
        padding-bottom: 0;
    }
    #footer .footer__col--brand {
        gap: 14px;
    }
    #footer .footer__logo-container {
        height: auto;
    }
    #footer .footer__logo img {
        height: 32px;
        width: auto;
    }
    #footer .footer__description {
        font-size: 13px;
        line-height: 1.55;
        color: var(--text-400);
        overflow-wrap: anywhere;
        margin: 0;
    }
    #footer .footer__single-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 18px;
        padding-top: 0;
    }
    #footer .footer__nav-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    #footer .footer__col {
        gap: 8px;
    }
    #footer .footer__title {
        margin: 0;
        font-size: 14px;
    }
    #footer .footer__items {
        gap: 0;
    }
    #footer .footer__items-item {
        margin: 0;
    }
    #footer .footer__bottom {
        padding: 18px 0 0;
        gap: 18px;
        flex-direction: column;
        align-items: center;
    }
    #footer .footer__socials,
    #footer .footer__socials-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        width: auto;
        border: 0;
        padding: 0;
    }
    #footer .footer__social-link {
        width: 48px !important;
        height: 48px !important;
        min-height: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        border: 1px solid var(--transp-1);
        padding: 0 !important;
    }
    #footer .footer__single-link a {
        padding: 2px 0;
    }
    #footer .footer__payment-logos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px 18px;
        margin: 0;
        padding: 0;
    }
    #footer .footer__payment-logos {
        gap: 12px 14px;
    }
    #footer .footer__payment-logos a {
        display: flex;
        max-width: 56px;
    }
    #footer .footer__payment-logos img {
        height: 24px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
    /* пустой блок «дополнительно» внизу давал ещё 48 px пустоты */
    #footer .footer__additional:not(:has(*)),
    #footer .footer__additional:has(> p:only-child:empty) {
        display: none;
    }
}

/* 16. /lobbies на ПК: картинка в шапке раздела вылезала на 37 px вправо —
       появлялась горизонтальная прокрутка всей страницы. */
.mt-phero {
    overflow-x: clip; /* только по горизонтали: фигуры бойцов над карточками не обрезаются */
}

/* 15. Ранг без картинки (на сервере 42 ранга, картинок — 0–18): значок с номером
       вместо битой иконки. Разметку даёт Server::getRank(). */
.elo-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--transp-1);
    border: 1px solid var(--transp-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 17. Профиль: вместо трёх Steam ID во всю ширину — один (Steam64), остальные
       форматы под спойлером «Другие форматы ID» (SteamInfo/index.blade.php). */
.profile__ids-more {
    display: grid;
    gap: var(--space-xs, 8px);
}
.profile__ids-more > summary {
    cursor: pointer;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-400);
    padding: 4px 2px;
}
.profile__ids-more > summary::-webkit-details-marker {
    display: none;
}
.profile__ids-more > summary::after {
    content: " ▾";
}
.profile__ids-more[open] > summary::after {
    content: " ▴";
}

/* 17б. «Другие форматы ID» в профиле: кнопки внутри спойлера слипались. */
.profile__ids-more > .profile__id-copy {
    margin-top: 8px;
}

/* 10б. Топ месяца: заголовки столбцов стояли по центру, а значения под ними —
        по левому краю, и шапка выглядела сдвинутой вправо. */
table:has(.bp-player) thead th,
table:has(.bp-player) thead th .table-th {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* 16б. Лобби: при наведении боец поднимается и чуть увеличивается, а обёртка
        .mt-tabc__figure (overflow: hidden) срезала ему макушку. Режем только
        низ и бока, как задумано (со скруглением карточки), сверху — запас. */
.mt-lobbies .mt-tabc__figure {
    overflow: visible;
    clip-path: inset(-32px 0 0 0 round 0 0 18px 18px);
}

/* 21. Подписи в боковой панели на ПК были 10 px со сжатым интервалом —
       читались с трудом. Ширину панели (78 px) не трогаем. */
@media (min-width: 769px) {
    .sidebar-nav .sidebar-nav__item-text {
        font-size: 11.5px !important;
        letter-spacing: 0 !important;
        line-height: 1.25;
    }
}

/* 30. Цели для пальца на телефоне: ники в топе фрагов были ссылками высотой 25 px,
       на /top — 33×18 px. Поднимаем зону нажатия до ~40 px внутренним отступом
       с таким же отрицательным полем — внешне ничего не сдвигается. */
@media (max-width: 768px) {
    .frags-table-player__name {
        padding-block: 8px;
        margin-block: -8px;
    }
    /* здесь у ссылок подчёркивание — отступом его унесло бы вниз, поэтому
       зону нажатия расширяет невидимый псевдоэлемент поверх ссылки */
    .users-stats-content a.link {
        position: relative;
    }
    .users-stats-content a.link::after {
        content: "";
        position: absolute;
        inset: -6px -4px; /* строки в списке плотные: зоны соседних строк сходятся посередине */
    }
}

/* 5в. Топ фрагов на ПК: заголовки столбцов у Flute по центру, а значения —
       слева («Место», «Игрок», «Фраги») и справа («Награда»). Ставим заголовки
       над своими значениями. На телефоне шапка таблицы скрыта (карточки). */
table.table:has(.frags-table-player):has(th:nth-child(4)) thead th,
table.table:has(.frags-table-player):has(th:nth-child(4)) thead th .table-th {
    text-align: left !important;
    justify-content: flex-start !important;
}
table.table:has(.frags-table-player):has(th:nth-child(4)) thead th:nth-child(4),
table.table:has(.frags-table-player):has(th:nth-child(4)) thead th:nth-child(4) .table-th {
    text-align: right !important;
    justify-content: flex-end !important;
}
/* у значка места встроенный отступ 7 px — сдвигаем заголовок так же */
table.table:has(.frags-table-player):has(th:nth-child(4)) thead th:first-child .table-th {
    padding-left: 7px;
}

/* 31. /bans: та же история — заголовки у Flute по центру, значения слева. */
table.table:has(.bans__cell-player) thead th,
table.table:has(.bans__cell-player) thead th .table-th {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* 32. /stats: «Игрок», «Faceit», «#» стояли по центру над значениями, прижатыми
       влево. Все заголовки — по левому краю, кроме «Ранга»: значки рангов
       по центру, и заголовок над ними тоже. */
table.table:has(.stats__cell-faceit) thead th,
table.table:has(.stats__cell-faceit) thead th .table-th {
    text-align: left !important;
    justify-content: flex-start !important;
}
table.table:has(.stats__cell-faceit) thead th:nth-child(5),
table.table:has(.stats__cell-faceit) thead th:nth-child(5) .table-th {
    text-align: center !important;
    justify-content: center !important;
}

/* 33. Плашка сервера с наградами (DM Kill & Earn): у карточки не было отступов
       сверху и снизу (только 12 px по бокам), между строками — 1 px, а на узких
       экранах метки наград переносились во второй ряд и всё упиралось в края.
       Правило только для карточек с метками (.card-rewards). */
.monitoring-card--standard:has(.card-rewards) {
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: center;
}
.monitoring-card--standard:has(.card-rewards) .card-content {
    gap: 6px;
}
.monitoring-card--standard:has(.card-rewards) .card-rewards {
    gap: 6px;
    margin-top: 2px;
}
.monitoring-card--standard:has(.card-rewards) .card-toolbar {
    align-self: center;
}
@media (max-width: 480px) {
    /* метки сеткой 2×2 и чуть компактнее — ровно, без «рваного» второго ряда */
    .monitoring-card--standard:has(.card-rewards) .card-rewards {
        display: grid;
        grid-template-columns: repeat(2, max-content);
    }
    .monitoring-card--standard:has(.card-rewards) .card-reward {
        font-size: 12px;
        padding: 3px 8px;
        justify-content: flex-start;
    }
}