:root {
    --first-column: 0;
    --second-column: -130px;
    --third-column: -294px;
    --fourth-column: -440px;
    --fifth-column: -590px;

    --first-row: 0;
    --second-row: -128px;
    --third-row: -300px;
    --fourth-row: -440px;
    --fifth-row: -514px;
}

.aki-thumbnail {
    background-position: var(--first-column) var(--first-row);
}

.akuma-thumbnail {
    background-position: var(--second-column) var(--first-row);
}

.blanka-thumbnail {
    background-position: var(--third-column) var(--first-row);
}

.cammy-thumbnail {
    background-position: var(--fourth-column) var(--first-row);
}

.luke-thumbnail {
    background-position: var(--fifth-column) var(--first-row);
}

.chun-li-thumbnail {
    background-position: var(--first-column) -153px;
}

.dee-jay-thumbnail {
    background-position: var(--second-column) var(--second-row);
}

.dhalsim-thumbnail {
    background-position: -286px -158px;
}

.ed-thumbnail {
    background-position: -434px -148px;
}

.m_bison-thumbnail {
    background-position: -572px -148px;
}

.guile-thumbnail {
    background-position: 0 -300px;
}

.e_honda-thumbnail {
    background-position: -155px -300px;
}

.jamie-thumbnail {
    background-position: -300px -300px;
}

.jp-thumbnail {
    background-position: -440px -300px;
}

.manon-thumbnail {
    background-position: -578px -300px;
}

.juri-thumbnail {
    background-position: -8px -440px;
}

.ken-thumbnail {
    background-position: -155px -440px;
}

.kimberly-thumbnail {
    background-position: -292px -440px;
}

.lily-thumbnail {
    background-position: -440px -440px;
}

.marisa-thumbnail {
    background-position: -579px -440px;
}

.rashid-thumbnail {
    background-position: 0 -590px;
}

.ryu-thumbnail {
    background-position: -148px -590px;
}

.zangief-thumbnail {
    background-position: -310px -588px;
}

.shadow-layer {
    background-color: transparent;
    filter: drop-shadow(0 0 20px white);
}

.character-image {
    background-image: url("./spritesheet.webp");
    height: 100%;
    background-size: 600%;
    width: 120px;
}

.character-option {
    background-color: transparent;
    outline: none;
    border: none;

    .thumbnail {
        position: relative;
        background: #280643;
        padding: 8px;
        clip-path: path("M 35 7 l 74 0 l 20 27 l -20 105 l -74 0 l -20 -27");

        &::after {
            display: block;
            content: "";
            position: absolute;
            z-index: 1;
            background-color: #2D064599;
            inset: 0;
        }
    }
    
    &:focus, &:hover {
        .thumbnail {
            background: linear-gradient(135deg, #E374CA, white, #E374CA);

            &::after {
                display: none;
            }
        }
    }
}

.p1 .thumbnail, .p2 .thumbnail {
    position: relative;
    background: linear-gradient(135deg, #E374CA, white, #E374CA);
    padding: 8px;
    clip-path: path("M 35 7 l 74 0 l 20 27 l -20 105 l -74 0 l -20 -27");
}

.character-thumbnail {
    height: 131px;
    clip-path: path("M 28 0 l 72 0 l 20 26 l -20 104 l -72 0 l -20 -26 L 28 0");
    width: fit-content;
    background: repeating-linear-gradient(180deg,#E374CA99, #E374CA99 2%, #6735B299 2%, #6735B299 3%, #E374CA99 3%, #E374CA99 4%);
    position: relative;

    &::after {
        inset: 0;
        display: none;
        content: "";
        position: absolute;
        z-index: 1;
        background-color: #2D064599;
    }

    & svg {
        position: absolute;
        z-index: -1;
        left: 0;
    }

    &:hover {
        &::after {
            display: none;
        }
    }

    /* .thumbnail-line {
        fill: #E374CA99;
    } */
}