#character-select-list {
    padding: 2px;
    background: linear-gradient(to right, #6735B2CC, white, #6735B2CC);
    scrollbar-color: #E374CA transparent;
    overflow-x: hidden;
    opacity: 0;
    position: absolute;
    bottom: 11vh;
    transition: height 200ms linear, opacity 200ms linear;
    height: 0;

    &.show {
        height: 65vh;
        opacity: 1;
    }

    &.p2-select {
        right: 0;
    }
}

.character-select-bg {
    background-color: #280643CC;
    padding: 32px;

    .slot-name {
        color: white;
        text-shadow: 6px 3px 2px #960433;
        font-size: 40px;
    }
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;

    & div {
        text-align: center;
    }

    #luke { grid-area: 1 / 2 / 1 / 2; }
    #jamie { grid-area: 1 / 3 / 1 / 3; }
    #manon { grid-area: 2 / 1 / 2 / 1; }
    #kimberly { grid-area: 2 / 2 / 2 / 2; }
    #marisa { grid-area: 2 / 3 / 2 / 3; }
    #lily { grid-area: 2 / 4 / 2 / 4; }
    #jp { grid-area: 3 / 1 / 3 / 1; }
    #juri { grid-area: 3 / 2 / 3 / 2; }
    #dee-jay { grid-area: 3 / 3 / 3 / 3; }
    #cammy { grid-area: 3 / 4 / 3 / 4; }
    #ryu { grid-area: 4 / 1 / 4 / 1; }
    #e_honda { grid-area: 4 / 2 / 4 / 2; }
    #blanka { grid-area: 4 / 3 / 4 / 3; }
    #guile { grid-area: 4 / 4 / 4 / 4; }
    #ken { grid-area: 5 / 1 / 5 / 1; }
    #chun-li { grid-area: 5 / 2 / 5 / 2; }
    #zangief { grid-area: 5 / 3 / 6 / 4; }
    #dhalsim { grid-area: 5 / 4 / 6 / 5; }
    #rashid { grid-area: 6 / 1 / 7 / 2; }
    #aki { grid-area: 6 / 2 / 7 / 3; }
    #ed { grid-area: 6 / 3 / 7 / 4; }
    #akuma { grid-area: 6 / 4 / 7 / 5; }
    #m_bison { grid-area: 7 / 2 / 7 / 2; }
}