/*
===============================================
 POLSKAELITA.PL - LEGENDA GRUP
 Green Dark | MyBB 1.8.41
 Wersja: czarna, szersza, dopasowana do boxów
===============================================
*/

.pe-group-legend {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 18px 0 0 0;
    padding: 0;
    background: #11161a;
    border: 1px solid #20282d;
    border-radius: 8px;
    overflow: hidden;
    color: #dfe7e2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* NAGŁÓWEK */

.pe-group-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 16px;
    background: #151b20;
    border-bottom: 1px solid #20282d;
}

.pe-group-legend-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #eef4ef;
}

.pe-group-legend-heading i {
    color: #4fd37b;
    font-size: 14px;
}

.pe-group-legend-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: #889892;
}

/* LISTA */

.pe-group-legend-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: #11161a;
}

/* RANGI */

.pe-group-legend .pe-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 32px;
    padding: 7px 11px;
    color: var(--pe-rank-color, #b8c8bd);
    background: var(--pe-rank-bg, #1d2327);
    border: 1px solid var(--pe-rank-border, rgba(255,255,255,0.14));
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.pe-group-legend .pe-rank i {
    font-size: 11px;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}

.pe-group-legend .pe-rank:hover {
    transform: translateY(-1px);
    border-color: var(--pe-rank-color, #b8c8bd);
    filter: brightness(1.04);
}

/* 01 - WŁAŚCICIEL */
.pe-group-legend .pe-owner {
    --pe-rank-color: #f4c84c;
    --pe-rank-bg: #2a2414;
    --pe-rank-border: rgba(244, 200, 76, 0.45);
}

/* 02 - ADMINISTRATOR */
.pe-group-legend .pe-admin {
    --pe-rank-color: #ff7d7d;
    --pe-rank-bg: #2b1c20;
    --pe-rank-border: rgba(255, 125, 125, 0.45);
}

/* 03 - JUNIOR ADMIN */
.pe-group-legend .pe-junioradmin {
    --pe-rank-color: #ff9f66;
    --pe-rank-bg: #2d2119;
    --pe-rank-border: rgba(255, 159, 102, 0.45);
}

/* 04 - OPIEKUN MODERACJI */
.pe-group-legend .pe-modchief {
    --pe-rank-color: #c89dff;
    --pe-rank-bg: #251f31;
    --pe-rank-border: rgba(200, 157, 255, 0.45);
}

/* 05 - MODERATOR */
.pe-group-legend .pe-moderator {
    --pe-rank-color: #78bbff;
    --pe-rank-bg: #1a2633;
    --pe-rank-border: rgba(120, 187, 255, 0.45);
}

/* 06 - REDAKTOR */
.pe-group-legend .pe-redaktor {
    --pe-rank-color: #8fdc70;
    --pe-rank-bg: #202a1a;
    --pe-rank-border: rgba(143, 220, 112, 0.45);
}

/* 07 - GRAFIK */
.pe-group-legend .pe-grafik {
    --pe-rank-color: #e89dd7;
    --pe-rank-bg: #2a1f28;
    --pe-rank-border: rgba(232, 157, 215, 0.45);
}

/* 08 - UBTEAM */
.pe-group-legend .pe-ubteam {
    --pe-rank-color: #b88fff;
    --pe-rank-bg: #251d31;
    --pe-rank-border: rgba(184, 143, 255, 0.45);
}

/* 09 - WŁAŚCICIEL SERWERA */
.pe-group-legend .pe-serverowner {
    --pe-rank-color: #f0b56f;
    --pe-rank-bg: #2d241b;
    --pe-rank-border: rgba(240, 181, 111, 0.45);
}

/* 10 - OPIEKUN SERWERA */
.pe-group-legend .pe-servercaretaker {
    --pe-rank-color: #69d0d8;
    --pe-rank-bg: #1b2b2d;
    --pe-rank-border: rgba(105, 208, 216, 0.45);
}

/* 11 - ADMIN CS 1.6 */
.pe-group-legend .pe-cs16 {
    --pe-rank-color: #7fda63;
    --pe-rank-bg: #1d2a1b;
    --pe-rank-border: rgba(127, 218, 99, 0.45);
}

/* 12 - ADMIN CS2 */
.pe-group-legend .pe-cs2 {
    --pe-rank-color: #ffb05e;
    --pe-rank-bg: #2b231b;
    --pe-rank-border: rgba(255, 176, 94, 0.45);
}

/* 13 - ADMIN DISCORD */
.pe-group-legend .pe-discord {
    --pe-rank-color: #93a3ff;
    --pe-rank-bg: #21253a;
    --pe-rank-border: rgba(147, 163, 255, 0.45);
}

/* 14 - ZASŁUŻONY */
.pe-group-legend .pe-honored {
    --pe-rank-color: #e8ca7f;
    --pe-rank-bg: #2c271c;
    --pe-rank-border: rgba(232, 202, 127, 0.45);
}

/* 15 - SPONSOR */
.pe-group-legend .pe-sponsor {
    --pe-rank-color: #ffb870;
    --pe-rank-bg: #2d231b;
    --pe-rank-border: rgba(255, 184, 112, 0.45);
}

/* 16 - DONATOR */
.pe-group-legend .pe-donator {
    --pe-rank-color: #ff95a8;
    --pe-rank-bg: #2b1d24;
    --pe-rank-border: rgba(255, 149, 168, 0.45);
}

/* 17 - VIP */
.pe-group-legend .pe-vip {
    --pe-rank-color: #f2cf5e;
    --pe-rank-bg: #2a2517;
    --pe-rank-border: rgba(242, 207, 94, 0.45);
}

/* 18 - TYPER */
.pe-group-legend .pe-typer {
    --pe-rank-color: #79d89c;
    --pe-rank-bg: #1d2b24;
    --pe-rank-border: rgba(121, 216, 156, 0.45);
}

/* 19 - PARTNER */
.pe-group-legend .pe-partner {
    --pe-rank-color: #71c6e8;
    --pe-rank-bg: #1b2730;
    --pe-rank-border: rgba(113, 198, 232, 0.45);
}

/* 20 - PRZYJACIEL */
.pe-group-legend .pe-friend {
    --pe-rank-color: #b5e17a;
    --pe-rank-bg: #242c1d;
    --pe-rank-border: rgba(181, 225, 122, 0.45);
}

/* 21 - KOBIETA */
.pe-group-legend .pe-woman {
    --pe-rank-color: #f0a4d2;
    --pe-rank-bg: #2c1f29;
    --pe-rank-border: rgba(240, 164, 210, 0.45);
}

/* 22 - UŻYTKOWNIK */
.pe-group-legend .pe-user {
    --pe-rank-color: #c5d0cb;
    --pe-rank-bg: #22292d;
    --pe-rank-border: rgba(197, 208, 203, 0.30);
}

/* 23 - URLOP */
.pe-group-legend .pe-urlop {
    --pe-rank-color: #9db4c8;
    --pe-rank-bg: #202830;
    --pe-rank-border: rgba(157, 180, 200, 0.45);
}

/* 24 - ZBANOWANY */
.pe-group-legend .pe-banned {
    --pe-rank-color: #e58b93;
    --pe-rank-bg: #2b1b20;
    --pe-rank-border: rgba(229, 139, 147, 0.45);
}

/* TABLETY */
@media screen and (max-width: 768px) {
    .pe-group-legend-list {
        gap: 7px;
        padding: 12px;
    }

    .pe-group-legend .pe-rank {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* TELEFONY */
@media screen and (max-width: 480px) {
    .pe-group-legend-header {
        padding: 11px 13px;
    }

    .pe-group-legend-subtitle {
        display: none;
    }

    .pe-group-legend-list {
        gap: 6px;
        padding: 11px;
    }

    .pe-group-legend .pe-rank {
        white-space: normal;
        min-height: 28px;
        padding: 6px 9px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pe-group-legend .pe-rank {
        transition: none;
    }

    .pe-group-legend .pe-rank:hover {
        transform: none;
    }
}