.move-block-wrapper {
    display: grid;

    height: fit-content;
    max-width: fit-content;

    clip-path: polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
    background-color: var(--theme-accent-2-light);

    margin:8px;

    &.selected {
        background-color: var(--theme-accent-1-light);
        animation: wobble 1s linear infinite;

        & .move-block {
            color: var(--theme-accent-1-light);
    
            & .details {
                & .type {
                    background-image: linear-gradient(
                        -45deg,
                        var(--theme-accent-1-base) 25%,
                        var(--theme-accent-1-light) 25%,
                        var(--theme-accent-1-light) 50%,
                        var(--theme-accent-1-base) 50%,
                        var(--theme-accent-1-base) 75%,
                        var(--theme-accent-1-light) 75%,
                        var(--theme-accent-1-light) 100%
                    );
                }
                & .might {
                    background-image: linear-gradient(
                        -45deg,
                        var(--theme-accent-1-base) 25%,
                        var(--theme-accent-1-light) 25%,
                        var(--theme-accent-1-light) 50%,
                        var(--theme-accent-1-base) 50%,
                        var(--theme-accent-1-base) 75%,
                        var(--theme-accent-1-light) 75%,
                        var(--theme-accent-1-light) 100%
                    );
                }
                & .ep {
                    background-image: linear-gradient(
                        -45deg,
                        var(--theme-accent-1-base) 25%,
                        var(--theme-accent-1-light) 25%,
                        var(--theme-accent-1-light) 50%,
                        var(--theme-accent-1-base) 50%,
                        var(--theme-accent-1-base) 75%,
                        var(--theme-accent-1-light) 75%,
                        var(--theme-accent-1-light) 100%
                    );
                }
                & .range {
                    background-image: linear-gradient(
                        -45deg,
                        var(--theme-accent-1-base) 25%,
                        var(--theme-accent-1-light) 25%,
                        var(--theme-accent-1-light) 50%,
                        var(--theme-accent-1-base) 50%,
                        var(--theme-accent-1-base) 75%,
                        var(--theme-accent-1-light) 75%,
                        var(--theme-accent-1-light) 100%
                    );
                }
            }
        }
    }

    .move-block {
        display: grid;
        position: relative;
        grid-template-columns: 16px auto 16px;
        grid-template-rows: 100%;
    
        clip-path: polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
        background-color: var(--theme-gray-dark);
    
        color: var(--theme-white);
        width: 350px;
        font-family: "BW";
    
        margin: 2px;
    
        overflow: hidden;   
    
        &.custom {
            background-image: radial-gradient(var(--theme-accent-2-dark), var(--theme-gray-dark));
    
            & .name {
                color: var(--theme-accent-1-base);
                font-weight: 600;
            }
    
            &::before {
                position: absolute;
                top: 0;
                left: -350px;
                width: 50%;
                height: 100%;
    
                background: rgba(255, 255, 255, 0.3);
                transform: skewX(-30deg);
                transition: 0.3s;
                animation: shine 2s infinite linear;
    
                content: '';
            }
        }
    
        & .details {
            display: grid;
            text-align: center;
            grid-template-columns: auto auto auto auto auto;
            min-width: 48px;
            font-size: 24px;
        
            margin-top: 4px;
        
            & .type {
                background-image: linear-gradient(
                    -45deg,
                    var(--theme-accent-2-light) 25%,
                    var(--theme-accent-2-base) 25%,
                    var(--theme-accent-2-base) 50%,
                    var(--theme-accent-2-light) 50%,
                    var(--theme-accent-2-light) 75%,
                    var(--theme-accent-2-base) 75%,
                    var(--theme-accent-2-base) 100%
                );
                border-radius: 4px;
            
                color: var(--theme-gray-dark);
            
                margin: 4px auto 4px auto;
                padding: 0px 4px 0px 4px;
            
                & img {
                    width: 48px;
                    transform: translate(0px, 2px);
                }
            }
            
            & .ep {
                min-width: 48px;
            
                background-image: linear-gradient(
                    -45deg,
                    var(--theme-accent-2-light) 25%,
                    var(--theme-accent-2-base) 25%,
                    var(--theme-accent-2-base) 50%,
                    var(--theme-accent-2-light) 50%,
                    var(--theme-accent-2-light) 75%,
                    var(--theme-accent-2-base) 75%,
                    var(--theme-accent-2-base) 100%
                );
                border-radius: 4px;
            
                color: var(--theme-gray-dark);
            
                margin: 4px auto 4px auto;
                padding: 0px 4px 0px 4px;
                
                & .body {
                    transform: translate(0px, 2px);

                    & img {
                        transform: translate(0px, 1px);
                    }
                }
            }
            
            & .might {
                min-width: 48px;
            
                background-image: linear-gradient(
                    -45deg,
                    var(--theme-accent-2-light) 25%,
                    var(--theme-accent-2-base) 25%,
                    var(--theme-accent-2-base) 50%,
                    var(--theme-accent-2-light) 50%,
                    var(--theme-accent-2-light) 75%,
                    var(--theme-accent-2-base) 75%,
                    var(--theme-accent-2-base) 100%
                );
                border-radius: 4px;
            
                margin: 4px auto 4px auto;
                padding: 0px 4px 0px 4px;
            
                color: var(--theme-gray-dark);
            
                & .body {
                    transform: translate(0px, 2px);
                }
            }
            
            & .range {
                min-width: 48px;
            
                background-image: linear-gradient(
                    -45deg,
                    var(--theme-accent-2-light) 25%,
                    var(--theme-accent-2-base) 25%,
                    var(--theme-accent-2-base) 50%,
                    var(--theme-accent-2-light) 50%,
                    var(--theme-accent-2-light) 75%,
                    var(--theme-accent-2-base) 75%,
                    var(--theme-accent-2-base) 100%
                );
                border-radius: 4px;
            
                color: var(--theme-gray-dark);
            
                margin: 4px auto 4px auto;
                padding: 0px 4px 0px 4px;
            
                & img {
                    translate: 0px 2px;
                }
            }

            & .miss {
                min-width: 48px;
            
                background-image: linear-gradient(
                    -45deg,
                    var(--theme-accent-2-light) 25%,
                    var(--theme-accent-2-base) 25%,
                    var(--theme-accent-2-base) 50%,
                    var(--theme-accent-2-light) 50%,
                    var(--theme-accent-2-light) 75%,
                    var(--theme-accent-2-base) 75%,
                    var(--theme-accent-2-base) 100%
                );
                border-radius: 4px;
            
                color: var(--theme-gray-dark);
            
                margin: 4px auto 4px auto;
                padding: 0px 4px 0px 4px;
                
                & .body {
                    transform: translate(0px, 2px);

                    & img {
                        transform: translate(0px, 1px);
                    }
                }
            }
        }
    }
}



.move-block-wrapper:hover {
    cursor: pointer;

    &.selected {
        & .move-block {
            background-color: var(--theme-gray-base);
        }
    }
}

.move-block-wrapper:hover .move-block {
    background-color: var(--theme-gray-base);
    
    &.custom {
        background-image: radial-gradient(var(--theme-accent-2-light), var(--theme-gray-dark));
    }
}

.move-block .interior {
    display: grid;
    grid-template-rows: max-content max-content max-content;
    grid-template-columns: 100%; 
}





.move-block .name {
    text-align: center;
    font-size: 28px;

    margin: 8px 0px 0px 2px;
}

.move-block .desc {
    font-size: 20px;

    margin: 4px 0px 8px 2px;
}

@keyframes shine {
    0% {
        left: -400px;
    }
 
    30% {
        left: 400px;
      }

    99.9999% {
      left: 400px;
    }

    100% {
        left: -400px;
    }
}

@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }
    33% {
        transform: rotate(1.5deg);
    }
    66% {
        transform: rotate(-1.5deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }