#scores .entryCont {
    display: grid;
    grid-template-rows: 1fr;
    padding-bottom: 8px;
    opacity: 1;
    transition:
        grid-template-rows 0.3s ease-in-out,
        padding-bottom 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
}

#scores .entryCont.new {
    grid-template-rows: 0fr;
    padding-bottom: 0px;
    opacity: 0;
}

#scores a {
    color: var(--c-text-default);
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}

#scores .full {
    color: inherit;
    border: 1px solid var(--c-border-default);
    border-radius: 16px;
    overflow: hidden;
    line-height: 1.2;
    font-weight: normal;
    min-height: 0;
    overflow: hidden;
    transition: 0.1s ease-in-out;
}

#scores .full:hover,
#scores .minimal:hover {
    text-decoration: none;
    border-color: var(--c-action-primary);
    box-shadow: 0px 0px 0px 2px var(--c-action-primary);
    transition: none;
}

#scores .full .pill {
    --bg: #999;
    --fg: black;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg);
    color: var(--fg);
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

#scores .full .pill .symbol {
    font-size: 18px;
    margin: -8px 0;
    margin-bottom: -9px;
}

#scores .full .map {
    background: var(--c-bg-subsurface);
    border-bottom: 1px solid var(--c-border-default);
    padding: 8px;
}

#scores .full .map .thumbnail {
    width: 54px;
    height: 54px;
    border-radius: 12px;
}

#scores .full .map .mode {
    width: 16px;
    height: 16px;
}

#scores .full .map .status.ranked,
#scores .full .map .status.approved {
    --bg: hsl(90, 100%, 70%);
}

#scores .full .map .status.loved {
    --bg: hsl(340, 100%, 70%);
}

#scores .full .map .status.qualified {
    --bg: hsl(200, 100%, 70%);
}

#scores .full .map .status.pending {
    --bg: hsl(30, 100%, 70%);
}

#scores .full .map .mods img {
    height: 24px;
}

#scores .full .score {
    padding: 8px;
}

#scores .full .score .avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

#scores .full .score .flag {
    height: 14px;
    border-radius: 4px;
}

#scores .full .score .rank {
    height: 24px;
}

#scores .full .score .stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}

#scores .full .score .stat .name {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 600;
}

#scores .full .score .stat .value {
    font-size: 18px;
    color: var(--c-text-bright);
    font-weight: 400;
}

#scores .full .score .stat .value.max {
    color: var(--c-success-70);
}

#scores .full .score .stat .value.na {
    color: var(--c-text-muted);
}

#scores .minimal {
    padding: 8px;
    border: 1px solid var(--c-border-default);
    border-radius: 16px;
    transition: 0.1s ease-in-out;
    min-height: 0;
    overflow: hidden;
    background: var(--c-bg-subsurface);
}

#scores .minimal .mode,
#scores .minimal .rank,
#scores .minimal .mods img {
    height: 18px;
}

#scores .minimal .map {
    line-height: 1.2;
}

#scores .minimal .acc {
    width: 65px;
}

#scores .minimal .pp {
    width: 80px;
}

#filterEditor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#filterEditor>.fullWidth {
    grid-column: 1 / -1;
}

@media (max-width: 750px) {
    #filterEditor {
        grid-template-columns: 1fr;
    }

    #scores .full .score {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "user rank"
            "stats stats";
        gap: 12px;
        align-items: center;
        gap: 12px;
    }

    #scores .full .score .user {
        grid-area: user;
        width: 100%;
    }

    #scores .full .score .rankCont {
        grid-area: rank;
        justify-self: end;
    }

    #scores .full .score .stats {
        grid-area: stats;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        gap: 16px;
    }

    #scores .full .score .stats .stat {
        align-items: center;
    }
}

@media (max-width: 600px) {
    #scores .full .map {
        flex-direction: column;
    }

    #scores .full .map .inner {
        width: 100%;
    }

    #scores .minimal .inner {
        flex-direction: column;
        align-items: unset;
    }

    #scores .minimal .mods {
        justify-content: start;
    }

    #scores .minimal .acc {
        text-align: left;
    }
}

img {
    flex-shrink: 0;
}