:root {
    --attack-color: gray;
    --attack-scale: 1;
    --attack-shape: "none";
    --attack-round: 0;
    --attack-duration: 2s;
    --attack-size: calc(var(--tile-size)/4);
    --attack-animation: none;
}



.attack-location {
    position: absolute;
    top: 20px;
    transition-duration: calc(var(--attack-duration) - .3s);
    transition-property: top, left;
    margin-top: calc(var(--tile-size)*.4);
    margin-left: calc(var(--tile-size)*.4);
    z-index: 2;
}
#attack-visual {
    background-color: var(--attack-color);
    height: var(--attack-size);
    width: var(--attack-size);
    scale: var(--attack-scale);

    /* border-radius: var(--attack-round); */
    /* border: 2px black solid; */
    animation-duration: var(--attack-duration);
    animation-name: var(--attack-animation);
    animation-timing-function: linear;
    /* z-index: 2; */
    position: relative;
    opacity: 0.5;
    /* outline: 2px black solid; */
}

/* Shapes */
.circle {
    border-radius: 50%;
}
.square {
    border-radius: 0;
}
.long {
    width: calc(var(--attack-size)*2)
}
.thin, #attack-visual.x {
    width: calc(var(--attack-size)*.3)
}
.round {
    border-radius: 25%;
}
.x::after {
    content: '';
    background-color: var(--attack-color);
    rotate: 90deg;
    display: block;
    /* outline: 2px solid black; */
    width: calc(var(--attack-size)*.3);
    height: var(--attack-size);
}
.raindrop {
    border-radius: 50%; 
    border-top-left-radius: 0; 
    rotate: 45deg;
}
.boomerang::after {
    content: "";
    width: var(--attack-size);
    height: calc(var(--attack-size)*.25);
    position: absolute;
    background-color: var(--attack-color);
    top: 0;
    left: 0;
    /* outline: 2px solid black; */
}
.boomerang {
    height: var(--attack-size);
    width: calc(var(--attack-size)*.25) !important;
    background-color: var(--attack-color);
}
.twin {
    right: calc(var(--attack-size)+5px);
}
.twin::after {
    content: "";
    position: absolute;
    width: var(--attack-size);
    height: var(--attack-size);
    background-color: var(--attack-color);
    outline: 2px black solid;
    left: calc(var(--attack-size)+5px);
}

.flower {
    border-radius: 50%;
    width: calc(var(--attack-size)*2) !important;
    height: var(--attack-size);
}
.flower::before {
    content: "";
    rotate: 90deg;
    width: calc(var(--attack-size)*2);
    height: var(--attack-size);
    border-radius: 50%;
    background-color: var(--attack-color);
    display: block;
}
.flower::after {
    content: "";
    width: var(--attack-size);
    height: var(--attack-size);
    border-radius: 50%;
    background-color: yellow;
    display: block;
    position: absolute;
    left: calc(var(--attack-size)/2);
    bottom: 0;
}
.border {
    border: 2px solid black !important;
}

/* .echo {
    animation-delay: .3s;
    background-color: black;
} */
/* .echo-location {
    transition-delay: .25s;
} */


/* Animations */
@keyframes fireball {
    0% {opacity: 1; scale: 0; background-color: red; border-radius: 50%; border-top: 10px orange ridge;}
    20% {scale: var(--attack-scale); }
    60% {background-color: orangered;}
    85% {scale: var(--attack-scale); background-color: orange; opacity: 1;}
    100% {scale: 0; background-color: rgb(139, 76, 0); opacity: .1; border-radius: 50%; border-top: 10px yellow ridge;}
}

@keyframes grow-start {
    0% {scale: var(--attack-scale); opacity: 1; }
    10% {scale: calc(var(--attack-scale)*2);}
    90% {scale: var(--attack-scale); opacity: 1;}
    100% {scale: 0; opacity: 0;}
}

@keyframes normal {
    0% {opacity: 1;}
    50% {margin-top: -50px;}
    95% {margin-top: 0px; opacity: 1;}
    100% {opacity: 0;}
}

@keyframes basic {
    0% {opacity: 1;}
    100% {opacity: 1;}
}

/* @keyframes border {
    0% {outline: 2px solid black}
    100% {outline: 2px solid black}
} */

@keyframes double {
    0% {margin-top: 0px; margin-left: 0px; box-shadow: 60px 60px black; opacity: 1; scale: var(--attack-scale);}
    10% {margin-top: 30px; margin-left: 0px; box-shadow: 60px -60px black;}
    20% {margin-top: 30px; margin-left: 30px; box-shadow: -60px -60px black;}
    30% {margin-top: 0px; margin-left: 30px; box-shadow: -60px 60px black;}
    40% {margin-top: 0px; margin-left: 0px; box-shadow: 60px 60px black;}
    50% {margin-top: 30px; margin-left: 0px; box-shadow: 60px -60px black;}
    60% {margin-top: 30px; margin-left: 30px; box-shadow: -60px -60px black;}
    70% {margin-top: 0px; margin-left: 30px; box-shadow: -60px 60px black;}
    80% {margin-top: 0px; margin-left: 0px; box-shadow: 60px 60px black; opacity: 1;}
    90% {box-shadow: 0px 0px black; opacity: 1; scale: var(--attack-scale);}
    100% {opacity: 0;}
}

@keyframes flipping {
    0% {opacity: 1; background-color: var(--attack-color);}
    3% {transform: rotateX(30deg)}
    10% {transform: rotateX(90deg)}
    20% {background-color: black;}
    21% {background-color: var(--attack-color); transform: rotateX(360deg)}
    50% {scale: calc(var(--attack-scale)*.5); opacity: 1; transform: rotateX(20deg)}
    90% {opacity: 1}
    100% {opacity: 0; background-color: black;}
}

@keyframes spinning {
    0% {opacity: 1; rotate: 0;}
    95% {opacity: 1;}
    100% {rotate: 5turn; opacity: 0;}
}

@keyframes rainbow {
    0% {opacity: 1; background-color: white;}
    25% {background-color: blue;}
    50% {background-color: red;}
    75% {background-color: green;}
    95% {opacity: 1; background-color: yellow;}
    100% {opacity: 0; background-color: gray;}
}

@keyframes wiggle {
    0% {margin-top: 20px; opacity: 1; border-radius: 10%;}
    10% {margin-top: -20px; margin-left: 10px;}
    20% {margin-top: 20px; margin-left: -10px;}
    30% {margin-top: -20px; margin-left: -10px;}
    40% {margin-top: 20px; margin-left: 10px;}
    50% {margin-top: -20px; margin-left: -10px;}
    60% {margin-top: 20px; margin-left: 10px;}
    70% {margin-top: 0px; margin-left: 0px; opacity: 1; background-color: var(--attack-color)}
    90% {margin-top: 0px; opacity: 1;}
    100% {margin-top: -100px; opacity: 0; background-color: black; border-radius: 10%}
}

@keyframes explode {
    0% {scale: 1; opacity: 1; background-color: black; border-radius: 25%;}
    10% {scale: var(--attack-scale);}
    60% {scale: var(--attack-scale); background-color: black; margin-top: 0; rotate: 0;}
    65% {scale: 3; background-color: var(--attack-color); margin-top: -25px; rotate: 2turn}
    80% {scale: 5; background-color: white; margin-top: 10px; opacity: 1;}
    100% {opacity: 0;}
}

@keyframes pulse {
    0% {scale: 0; opacity: 1; background-color: var(--attack-color); border-radius: 30%;}
    10% {scale: 25; opacity: 1;}
    30% {opacity: 0.7; background-color: var(--attack-color);}
    40% {opacity: 1; background-color: rgb(138, 136, 136);}
    55% {opacity: 0; background-color: rgb(114, 114, 114);}
    75% {opacity: 0; background-color: rgb(132, 0, 0); scale: 25;}
    90% {opacity: 1; scale: 1; border-radius: 30%;}
}

@keyframes tail {
    0% {opacity: 1; box-shadow: 0px 8px  red, 0px 16px var(--attack-color), 0px 20px orange; background-color: orange; height: 25px; border-radius: 30% 30% 10% 10%}
    90% {opacity: 1; box-shadow: 0px 8px  red, 0px 16px var(--attack-color), 0px 20px orange; background-color: orange;height: 25px;}
    100% {opacity: 0; border-radius: 30% 30% 10% 10%}
}

@keyframes arrow {
    0% {opacity: 1; height: 20px; width: 100px; background-color: var(--attack-color); border-left: 8px inset white; border-radius: 0 20px 20px 0;}
    60% {opacity: 1; height: 20px; width: 100px;}
    90% {opacity: 1; height: 20px; width: 10px; border-left: 8px inset white;}
    100% {opacity: 0; height: 20px; width: 0px; background-color: var(--attack-color); border-radius: 0 20px 20px 0;}
}

@keyframes bombstrike {
    0% {opacity: 1; background-color: var(--attack-color); border-radius: 50%; top: -1000px}
    70% {opacity: 1; background-color: var(--attack-color); border-radius: 50%; top: 0; scale: 1; rotate: 0;}
    80% {opacity: 1; background-color: red; border-radius: 10%; scale: 6; rotate: 6turn;}
    95% {opacity: .5; background-color: white; rotate: 3turn;}
    100% {opacity: 0; scale: 10; rotate: 0; border-radius: 50%;}
}

@keyframes boomerang {
    0% {opacity: 1; background-color: var(--attack-color); top: 0px; left: 0px;}
    25%{top: 100px; left: 50px;}
    50%{top: 150px; left: 80px;}
    75% {top: 50px; left: 100px;}
    100% {opacity: 1; background-color: var(--attack-color); rotate: 5turn; top: 0; left: 0;}
}

@keyframes wait {
    0%{opacity: 1; left: 0;}
    40%{opacity:1; background-color: var(--attack-color); left: -200px; width: 40px;}
    60%{width: 80px;}
    100%{opacity:1; background-color: orange; left: 0}
}

@keyframes up-down {
    0%{opacity: 1; margin-top: 0}
    65%{margin-top: calc(var(--tile-size)*-2); scale: var(--attack-scale)}
    90%{opacity: 1; margin-top: 5px; scale: calc(var(--attack-scale)*1.5) calc(var(--attack-scale)*.7)}
    100%{opacity: 1; margin-top: 0px}
}

@keyframes ghost {
    0%{opacity: .5; background-color: black;}
    100%{opacity: .5; background-color: white;}
}

@keyframes small {
    0%{scale: .1; border-radius: 40%; opacity: 1}
    100%{scale: .1; border-radius: 40%; opacity: 1}
}

@keyframes crazy {
    0%{opacity: 1;}
    70%{left: 0; top: 0;}
    73%{left: 50px; top: -10px; height: 100px; width: 100px;}
    75%{left: -10px; top: 5px; height: 30px; width: 120px;}
    78%{left: -20px; top: 10px;height: 60px; width: 30px;}
    80%{left: 0px; top: -10px; height: 10px; width: 100px;}
    82%{left: -10px; top: -25px; height: 90px; width: 50px;}
    84%{left: 12px; top: -8px; height: 140px; width: 100px;}
    86%{left: 0; top: 0;}
    88%{left: 50px; top: -10px; height: 100px; width: 100px;}
    90%{left: -10px; top: 5px; height: 30px; width: 120px;}
    92%{left: -20px; top: 10px;height: 60px; width: 30px;}
    94%{left: 0px; top: -10px; height: 10px; width: 100px;}
    96%{left: -10px; top: -25px; height: 90px; width: 50px;}
    98%{left: 12px; top: -8px; opacity: 1; height: 140px; width: 100px;}
    100%{opacity: 0;}
}