.user-card {
    display      : grid;
    grid-gap     : var(--section-padding-y);
    background   : var(--card-background);
    border-radius: var(--border-radius);
    border       : 1px solid var(--background-light);
    overflow     : hidden;
}

.user-profile {
    position: relative;
    height  : 300px;
}

.user-cover {
    width              : 100%;
    height             : 250px;
    background-position: center;
}

.user-cover::before {
    content: '';
    display: block;
    width  : 100%;
    height : 100%;
    z-index: 5;
    background-image: linear-gradient(360deg, var(--card-background) 10%,
            color-mix(in srgb, var(--background) 0%, transparent) 120%);
}

.user-info {
    position       : absolute;
    bottom         : 0;
    left           : 0;
    right          : 0;
    z-index        : 55;
    padding        : 0 2rem;
    display        : flex;
    gap            : 1rem;
    align-items    : center;
    border-radius  : calc(var(--border-radius) * 2.75);
    backdrop-filter: blur(5px);
    width          : 98%;
    padding        : 1rem;
    border-top     : 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
    margin         : 0 auto;
    background-image: linear-gradient(180deg,
            color-mix(in srgb, var(--text-muted) 10%, transparent) 0%,
            color-mix(in srgb, var(--text-primary) 0%, transparent) 45%);
}

.user-info {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}

.user-info .right {
    display    : flex;
    align-items: center;
    gap        : 1rem;
}

.user-info .right .avatar img {
    height       : 100px;
    width        : 100px;
    border-radius: calc(var(--border-radius) * 2);
}

.user-info .right .nickname {
    color: var(--text-primary);
}

.user-info .right .nickname span {
    color: var(--text-muted);
}

.server-group-tags {

    display    : flex;
    align-items: center;
    gap        : 0.25rem;

    span {
        &.tag {
            background-color:
                color-mix(in srgb, var(--text-muted) 5%, transparent);
            background-image: linear-gradient(35deg,
                    color-mix(in srgb, var(--text-muted) 0%, transparent) 0%,
                    color-mix(in srgb, var(--text-primary) 5%, transparent) 100%);
            color:
                color-mix(in srgb, var(--text-muted) 85%, transparent);
            padding        : 0.35rem 0.75rem;
            font-size      : .75rem;
            font-weight    : 500;
            border-radius  : calc(var(--border-radius) / 2);
            display        : flex;
            justify-content: center;
            align-items    : center;
            transition     : all 0.15s ease;
            backdrop-filter: blur(5px);
            width          : fit-content;

            &.gold {
                background-image: linear-gradient(35deg,
                        color-mix(in srgb, var(--text-muted) 0%, transparent) 0%,
                        color-mix(in srgb, var(--text-warning) 10%, transparent) 100%);
                color: var(--text-warning);
            }
        }
    }
}

.user-info .right .nickname button svg {
    fill  : var(--text-secondary);
    width : 15;
    height: 15;
    filter: brightness(85%);

    &:hover {
        filter: brightness(100%);
    }
}

.card-stats-wrapper {
    display : flex;
    grid-gap: var(--section-padding-y);
}

/* Levels style */
.left {
    width       : 300px;
    margin-right: 10px;
}

.left__title {
    color             : #838faf;
    font-size         : .85rem;
    margin-bottom     : 10px;
    inset-inline-start: min(2%, 100% - 20%);
}

.level__title {
    inset-inline-start: min(var(--rankPercent), 100% - 3rem);
    color             : var(--text-muted);
    font-size         : .85rem;
    margin-bottom     : .35rem;
}

.level__progress {
    width        : 100%;
    height       : 10px;
    background   : color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-radius: var(--border-radius);
    position     : relative;
    display      : flex;
    align-items  : center;
    inline-size  : 100%;

    .level__process {
        width        : var(--rankPercent);
        height       : 4px;
        margin-left  : 4px;
        margin-right : 4px;
        background   : linear-gradient(270deg, var(--text-danger), var(--text-secondary));
        border-radius: var(--border-radius);
    }

    .stats-position-line {
        inset-inline-start: min(var(--rankPercent), 100% - 13px);
        background        : var(--text-danger);
        box-shadow        : 0px 5px 5px #ff6b6b3b, 0px -1px 0px #ffabab;
        width             : 10px;
        height            : 6px;
    }
}

.card-stats-wrapper.stats-compilation {

    display              : grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items          : center;
    justify-content      : space-between;
    background           : var(--card-background);
    border-radius        : var(--border-radius);
    color                : var(--text-muted);

    div {
        display       : flex;
        flex-direction: column;
        padding       : 1.35rem 1.75rem;
        outline       : 2px solid color-mix(in srgb, var(--text-muted) 3%, transparent);
        outline-offset: -1px;
        border-radius : var(--border-radius);

        span:nth-child(1) {
            font-weight: 600;
            color      : var(--text-default);
        }

        span:nth-child(2) {
            color    : color-mix(in srgb, var(--text-muted) 55%, transparent);
            font-size: .7rem;
        }
    }
}

.base_stats_item {
    background   : var(--background-light);
    border-radius: var(--border-radius);
    padding      : 2rem;
    width        : 100%;
    gap          : 1.5rem;
    display      : flex;
    align-items  : center;
    box-shadow   : 0px -1px 1px color-mix(in srgb, var(--text-muted) 10%, transparent);
}

.base_stats_item .stats_item__image {
    width : 50px;
    height: 50px;
    color : color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.base_stats_item .stats_item__info {
    display: grid;
}

.base_stats_item .stats_item__info .count {
    font-size  : 1.5rem;
    font-weight: 700;
    color      : var(--text-primary);
}

.base_stats_item .stats_item__info .title {
    color: var(--text-muted);
}

.stats-percentage {
    inline-size: 100%;
    display    : flex;
    position   : relative;
    gap        : 4px;
}

.low-percentage {
    flex         : 1 1 0%;
    block-size   : 4px;
    margin       : 4px 0px;
    border-radius: 4px;
    position     : relative;
    background   : color-mix(in srgb, var(--text-danger) 80%, transparent) 100%;
}

.mid-percentage {
    flex         : 1 1 0%;
    block-size   : 4px;
    margin       : 4px 0px;
    border-radius: 4px;
    position     : relative;
    background   : color-mix(in srgb, var(--text-warning) 80%, transparent) 100%;
}

.high-percentage {
    flex         : 1 1 0%;
    block-size   : 4px;
    margin       : 4px 0px;
    border-radius: 4px;
    position     : relative;
    background   : color-mix(in srgb, var(--text-secondary) 80%, transparent) 100%;
}

.default-percentage {
    flex         : 1 1 0%;
    block-size   : 4px;
    margin       : 4px 0px;
    border-radius: 4px;
    position     : relative;
    background   : color-mix(in srgb, var(--text-muted) 30%, transparent) 100%;
}

.stats-position-line {
    animation         : 0.48s ease 0s 1 normal none running iVgNVm;
    inset-inline-start: min(var(--percentage), 100% - 2px);
    position          : absolute;
    width             : 2px;
    height            : 12px;
    border-radius     : 99999px;
    background        : var(--text-default);
}

.col-12 {
    margin-top: var(--section-padding-y);
}

.stats-efficient {
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.efficient_wrapper {
    background   : transparent;
    padding      : var(--section-padding-y);
    text-align   : left;
    border-radius: var(--border-radius);
    gap          : var(--section-padding-y);
    transition   : all .3s ease;
}

.efficient_wrapper:hover {
    background: color-mix(in srgb, var(--background-light) 75%, transparent);
}


.efficient_wrapper .dropdown-trigger {
    width: 100%;
}

.efficient_item {
    display: grid;
    gap    : var(--section-padding-y);
}

.efficient_item .efficient_item__title {
    display   : grid;
    text-align: left;
}

.efficient_item .efficient_item__title h5 {
    color    : var(--text-primary);
    font-size: 1.25rem;

}

.efficient_item .efficient_item__title span {
    font-size: .85rem;
    color    : var(--text-muted);
}

.percentage-wins__item {
    display        : flex;
    justify-content: space-between;
    gap            : calc(var(--section-padding-y) * 1.5);
    font-size      : .85rem;
}

.percentage-wins__item span:nth-child(1) {
    color: var(--text-muted);
}

/* Maps statistics */
.players-maps__title {
    display              : grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
    padding              : 1.35rem 1rem;
    margin-bottom        : 1rem;
    width                : 100%;
    align-items          : center;
    margin-bottom        : 1rem;
    text-transform       : uppercase;
    font-size            : .65rem;
    color                :
        color-mix(in srgb, var(--text-muted) 50%, transparent);
}

.players-maps__scroll {
    max-height    : 400px;
    overflow-x    : auto;
    padding-right : 6px;
    padding-top   : 1px;
    padding-bottom: 1px;
}

.players-maps__scroll::-webkit-scrollbar {
    width: 3px;
}

.players-maps__scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.players-maps__scroll::-webkit-scrollbar-thumb {
    background   : var(--text-muted);
    border-radius: var(--border-radius);
}

.players-maps__scroll::-webkit-scrollbar-thumb:hover {
    filter: brightness(125%);
}

.player-maps {
    display: grid;
    gap    : 0.25rem;
}

.player-maps-grid {
    display              : grid;
    padding              : 1.35rem 1rem;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
    align-items          : center;
    justify-content      : space-between;
    background           : var(--card-background);
    border-radius        : var(--border-radius);
    padding              : .5rem;
    color                : var(--text-muted);

    .map-name {
        display    : flex;
        align-items: center;
        gap        : 1rem;

        img {
            width        : 75px;
            height       : 50px;
            object-fit   : cover;
            border-radius: var(--border-radius);
        }
    }
}