/* Скрытие строк при работе поиска и фильтра.
   display:grid/flex выше не должен переопределять атрибут hidden. */
.players-page [hidden] {
    display: none !important;
}

.players-page {
    min-height: 100vh;
}

.players-shell {
    width: min(1600px, 92%);
    margin: 0 auto;
    padding: 34px 0 54px;
}

.players-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.players-kicker {
    margin-bottom: 8px;
    color: #e04449;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.players-heading h1 {
    margin: 0;
    color: #f4f6f8;
    font-size: 42px;
    line-height: 1;
}

.players-heading p {
    margin: 10px 0 0;
    color: #8994a1;
    font-size: 13px;
}

.players-total {
    min-width: 165px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #10151b;
    border: 1px solid #29313a;
    border-radius: 7px;
}

.players-total span {
    color: #8f9aa7;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.players-total strong {
    color: #fff;
    font-size: 24px;
}

.players-toolbar {
    margin-bottom: 14px;
    padding: 13px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    background: #10151b;
    border: 1px solid #282f38;
    border-radius: 7px;
}

.players-filter-form {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.players-filter-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.players-filter-form label > span {
    color: #778391;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.players-search {
    width: min(410px, 42vw);
}

.players-role-filter {
    width: 190px;
}

.players-filter-form input,
.players-filter-form select {
    height: 38px;
    padding: 0 12px;
    color: #edf1f5;
    background: #0b0f14;
    border: 1px solid #343d48;
    border-radius: 5px;
    outline: none;
    font: inherit;
    font-size: 12px;
}

.players-filter-form input:focus,
.players-filter-form select:focus {
    border-color: #a93237;
    box-shadow: 0 0 0 2px rgba(169, 50, 55, .14);
}

.players-filter-form select option {
    background: #11161c;
    color: #fff;
}

.players-filter-button,
.players-reset-button {
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .65px;
    text-decoration: none;
    cursor: pointer;
}

.players-filter-button {
    color: #fff;
    background: #a62e33;
    border: 1px solid #c23d42;
}

.players-filter-button:hover {
    background: #ba353a;
}

.players-reset-button {
    color: #abb4bf;
    background: transparent;
    border: 1px solid #343d48;
}

.players-reset-button:hover {
    color: #fff;
    border-color: #56616e;
}

.players-found {
    padding-bottom: 10px;
    color: #7d8895;
    font-size: 11px;
    white-space: nowrap;
}

.players-found strong {
    color: #e8ecf0;
}

.players-list-section {
    overflow: hidden;
    background: #0f141a;
    border: 1px solid #282f38;
    border-radius: 7px;
}

.players-table-head,
.player-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(150px, .7fr) minmax(210px, .85fr) minmax(85px, .32fr) minmax(250px, 1fr);
    align-items: center;
    column-gap: 22px;
}

.players-table-head {
    min-height: 38px;
    padding: 0 20px;
    color: #687482;
    background: #0b0f14;
    border-bottom: 1px solid #272e37;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.player-row {
    min-height: 72px;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #232a32;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.player-row:last-child {
    border-bottom: 0;
}

.player-row:hover {
    background: #141a21;
    box-shadow: inset 3px 0 0 #a83237;
}

.player-main-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-main-cell strong {
    overflow: hidden;
    color: #f1f4f7;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-main-cell span {
    color: #66717e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.player-role-badge {
    display: inline-flex;
    width: fit-content;
    padding: 6px 9px;
    color: #d9dee4;
    background: #181e25;
    border: 1px solid #313a45;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
}

.player-role-empty,
.player-no-achievements {
    color: #66717d;
    font-size: 11px;
}

.player-rating-cell {
    max-width: 260px;
}

.player-rating-top {
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.player-rating-top strong {
    color: #fff;
    font-size: 18px;
}

.player-rating-top span {
    color: #707b88;
    font-size: 10px;
}

.player-rating-track {
    width: 100%;
    height: 4px;
    overflow: hidden;
    background: #242b34;
    border-radius: 20px;
}

.player-rating-track span {
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #7e2529, #d4484d);
    border-radius: inherit;
}


.player-tournaments-cell {
    min-width: 0;
    display: flex;
    align-items: center;
}

.player-tournaments-cell strong {
    color: #f1f4f7;
    font-size: 16px;
    font-weight: 900;
}

.player-achievements-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.player-medal,
.player-achievement,
.player-achievement-more {
    min-height: 25px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    color: #cbd2da;
    background: #171d24;
    border: 1px solid #303944;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.player-achievement-more {
    color: #e2b858;
    border-color: #54492f;
}

.player-medal {
    min-height: 25px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    background: #171d24;
    border: 1px solid #303944;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.player-medal-gold {
    color: #f0cb57;
    border-color: #665528;
}

.player-medal-silver {
    color: #d8dde5;
    border-color: #555e6a;
}

.player-medal-bronze {
    color: #d79a67;
    border-color: #624734;
}

.players-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
}

.players-empty strong {
    color: #e8ecf0;
    font-size: 15px;
}

.players-empty span {
    color: #788491;
    font-size: 11px;
}

@media (max-width: 1000px) {
    .players-table-head,
    .player-row {
        grid-template-columns: minmax(190px, 1.25fr) 135px 180px 72px minmax(190px, 1fr);
        column-gap: 14px;
    }
}

@media (max-width: 760px) {
    .players-shell {
        width: 94%;
        padding-top: 24px;
    }

    .players-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .players-heading h1 {
        font-size: 34px;
    }

    .players-total {
        width: 100%;
    }

    .players-toolbar,
    .players-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .players-search,
    .players-role-filter {
        width: 100%;
    }

    .players-found {
        padding: 0;
    }

    .players-table-head {
        display: none;
    }

    .player-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main rating"
            "role rating"
            "tournaments rating"
            "achievements achievements";
        gap: 8px 16px;
        padding: 14px 16px;
    }

    .player-main-cell { grid-area: main; }
    .player-role-cell { grid-area: role; }
    .player-rating-cell { grid-area: rating; width: 105px; }
    .player-tournaments-cell { grid-area: tournaments; }
    .player-tournaments-cell::before {
        content: "Турниров: ";
        margin-right: 6px;
        color: #687482;
        font-size: 9px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .55px;
    }
    .player-achievements-cell { grid-area: achievements; padding-top: 4px; }
}

/* Две роли могут отображаться через слэш в одной строке/бейдже. */
.player-role-badge {
    line-height: 1.25;
    white-space: normal;
}