$blk: #000;
$none: rgba(#fff,0);
$white: #fff;
$line: #222E35;
$red: #EF476F;
$yellow: #FFD166;
$green: #06D6A0;
$dblue: #073B4C;
$lblue: #118AB2;
$lw: .5rem;
$movespeed: .2s;
$shot-time: .4s;
$shot-time-delay: 1.4s;
$shot-time-hard: .3s;
$shot-time-hard-delay: 1.5s;

html {
    font-size: 1vh;
}

body {
    margin: 0;
    background: $dblue;
    font-family: 'Consolas';
    color: $blk;

    & > div {
        width: 56rem;
        max-width: 100%;
        height: 100rem;
        margin: auto;
        position: absolute;
        overflow: hidden;
        background: lighten($lblue,20);
        left: 0;
        right: 0;
        top: 0;
        display: flex;

        & > div {
            width: 100%;
            height: 100%;
            transform: translate3d(0,-8rem,0) scale(.9);
        }
    }

    div > div, sig, player1 {
        *:not(label), *:before, *:after {
            box-sizing: border-box;
            position: absolute;
            content: '';
            left: 0;
            top: 0;
        }
    }
}

.table {
    width: 30rem;
    height: 30rem;
    border: $lw solid $line;
    bottom: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(90deg,$white 14rem,$line 14rem,$line 14.5rem,$white 14.5rem);
    box-shadow: 0 10rem 0 rgba($line,.1);
    //legs
    &:before {
        height: 12rem;
        border-left: $lw solid $line;
        border-right: $lw solid $line;
        width: 28rem;
        transform: translate3d(.5rem,29.5rem,0);
    }
    //net
    &:after {
        border: $lw solid $line;
        height: 4rem;
        width: 32rem;
        transform: translate3d(-1.5rem,11rem,0);
        background: repeating-linear-gradient(45deg, $none, $none .5rem, $line .5rem, $line .8rem ), //
        repeating-linear-gradient(-45deg, $none, $none .5rem, $line .5rem, $line .8rem );
    }
}

ball,
player1 > u > u:nth-of-type(2) u:nth-of-type(3):before,
player2 > u > u:nth-of-type(2) u:nth-of-type(3):before {
    width: 2rem;
    height: 2rem;
    transform: translate3d(31rem,50rem,0);
    background: $white;
    border: $lw solid $line !important;
    border-radius: 50%;
    opacity: 0;
}

body > div > label {
    height: 100%;
    width: 50%;
    cursor: pointer;
    position: absolute;
    top: 0;
    font-size: 3rem;

    &:after {
        padding: .5rem;
        background: #fff;
        transform: translate3d(1rem, 30rem,0);
        position: absolute;
        top: 0;
        left: 0;
    }

    &:before {
        content: '';
        border-radius: 1rem;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    &:hover:before {
        background: rgba(#fff,.05);
    }
}

.ll {
    left: 0;
}

.lr {
    right: 0;
}

dialog1, dialog2, dialog3 {
    position: absolute;
    left: 0;
    top: 0;
}

dialog1, dialog2, dialog3 {
    /* display: none !important;*/
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 3rem;
    background: $green;
    background: linear-gradient( $green,$lblue);
    display: block;
    padding: 4rem;
    box-sizing: border-box;
    transition: all .5s .5s cubic-bezier(0.02, 0.47, 0.53, 1.32);
    letter-spacing: -.025em;

    h1 {
        line-height: 1em;
    }

    player1 {
        position: relative;
        transform: none;
        height: 28rem;
        display: block;
        width: 2rem;
        margin: auto;
    }

    label {
        background: $blk;
        display: inline-block;
        color: $white;
        padding: 1rem 2rem;
    }

    label {
        cursor: pointer;

        &:hover {
            background: $dblue;
        }
    }
}

dialog2 {
    transform: translate3d(0,-100%,0);
    background: linear-gradient(rgba($red,.3),rgba(lighten($red,10),.9)), $dblue;
    padding: 6rem 4rem;
}

dialog3 {
    transform: translate3d(0,-100%,0);
}

@keyframes remove-overlay {
    100% {
        transform: translate3d(0,-100%,0);
    }
}

.clear-start:checked ~ div > dialog1 {
    transform: translate3d(0,-100%,0);
}

#miss-left:checked, #miss-right:checked, {
    ~ div > dialog2 {
        transform: translate3d(0,0,0);
    }
}

#miss-right:checked ~ div > .mr:before, #miss-left:checked ~ div > .ml:before {
    box-shadow: inset 0 0 20rem rgba($red,.5);
    -webkit-mask-image: linear-gradient($none, #fff,#fff);
}

#serve-left:checked,
#serve-right:checked {
    ~ div > dialog2 {
        animation: miss-delay .25s 2.5s linear forwards;
    }
}

@keyframes miss-delay {
    100% {
        transform: translate3d(0,0,0);
    }
}

@keyframes miss-delay2 {
    100% {
        transform: translate3d(0,0,0);
    }
}

#ls-hit-left-right:checked,
#ls-hit-left-right-2:checked,
#ls-hit-right-left-2:checked,
#ls-hit-right-left-3:checked,
#rs-hit-right-left:checked,
#rs-hit-right-left-2:checked,
#rs-hit-left-right-2:checked,
#rs-hit-left-right-3:checked,
{
    ~ div > dialog2 {
        animation: miss-delay2 .25s 2.5s linear forwards;
    }
}

#ls-hit-right-left:checked,
#ls-hit-right-right:checked,
#ls-hit-left-right-3:checked,
#ls-hit-left-left:checked,
#rs-hit-left-right:checked,
#rs-hit-left-left:checked,
#rs-hit-right-left-3:checked,
#rs-hit-right-right:checked {
    ~ div > dialog2 {
        animation: miss-delay .25s 2.5s linear forwards;
    }
}

input {
    margin: .5rem .5rem .5rem 1rem;
    transform: translate3d(0,.25rem,0);

    + span {
        color: $lblue;
        font-size: .9rem;
    }
}

@media (max-width: 1250px) {
    input, input + span {
        display: none;
    }
}

.in-play:checked {
    // no more serves
    ~ div > [for="serve-left"], ~ div > [for="serve-right"] {
        display: none;
    }
}

small {
    font-size: 1.5rem;
}

#win-left:checked ~ div, #win-right:checked ~ div {
    > dialog3 {
        animation: miss-delay .5s 5s linear forwards;
    }
}

sig {
    &, * {
        height: 9.25em;
        overflow: hidden;
        border-radius: .5em;
    }

    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: .5rem;
    color: $blk;
    width: 10em;
    transform: skewX(10deg) scaleY(.45) rotate(2deg);

    &:before, *:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5em;
        height: 5em;
        background: currentColor;
        transform: translate3d(-2.5em,0,0) rotate(-45deg);
        box-shadow: -3em 3em 0 0 currentColor;
        border-radius: .5em 2em .5em 2em;
    }

    * {
        width: 5em;
        transform: translate3d(3.75em,0,0) scaleY(.95);
        display: block !important;

        &:before {
            transform: translate3d(-3em,-2em,0) rotate(-45deg);
            box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
            border-radius: .5em;
        }
    }
}

a:hover, a:focus {
    sig {
        color: $white;
    }
}

// patterns

@keyframes movemiss {
    0%,100% {
        transform: scale(0);
    }
}

@keyframes movemiss2 {
    0%,100% {
        transform: scale(0);
    }
}

.hl:checked ~ div > .ml, .hr:checked ~ div > .mr {
    animation: movemiss $shot-time $shot-time-delay linear;
}

.hlh:checked ~ div > .ml, .hrh:checked ~ div > .mr {
    animation: movemiss $shot-time-hard $shot-time-hard-delay linear;
}

#ls-hit-right-left:checked ~ div > {
    .l1 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#ls-hit-left-right-2:checked ~ div > {
    .r1 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#ls-hit-right-right:checked ~ div > {
    .r2, .r1, .mr {
        animation: movemiss2 $shot-time $shot-time-delay linear;
    }
}

#ls-hit-right-left-2:checked ~ div > {
    .l1, .l2 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#ls-hit-left-right-3:checked ~ div > {
    .r1, .r2, .r3 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#ls-hit-right-left-3:checked ~ div > {
    .l1, .l2, .l3 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#ls-hit-left-left:checked ~ div > {
    .l1, .l2, .l3, .l4, .ml {
        animation: movemiss2 $shot-time $shot-time-delay linear;
    }
}
//right start
.rscb:checked ~ div > {
    .ls {
        display: none;
    }
}

#rs-hit-left-right:checked ~ div > {
    .r1 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#rs-hit-right-left-2:checked ~ div > {
    .l1 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#rs-hit-left-left:checked ~ div > {
    .l2, .l1, .ml {
        animation: movemiss2 $shot-time $shot-time-delay linear;
    }
}

#rs-hit-left-right-2:checked ~ div > {
    .r1, .r2 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#rs-hit-right-left-3:checked ~ div > {
    .l1, .l2, .l3 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#rs-hit-left-right-3:checked ~ div > {
    .r1, .r2, .r3 {
        animation: movemiss $shot-time $shot-time-delay linear;
    }
}

#rs-hit-right-right:checked ~ div > {
    .r1, .r2, .r3, .r4, .mr {
        animation: movemiss2 $shot-time $shot-time-delay linear;
    }
}

player1, player2 {
    transform: translate3d(40rem,5rem,0);

    & > u {
        &:after {
            width: 12rem;
            height: 5rem;
            background: rgba($line,.1);
            border-radius: 50%;
            transform: translate3d(-4rem, 20rem, 0);
        }

        ball {
            transform: translate3d(-10rem,1rem,0);
            opacity: 0;

            @keyframes serveball2 {
                49%,100% {
                    transform: translate3d(-10rem,1rem,0);
                    opacity: 0;
                }

                50% {
                    opacity: 1;
                }

                75% {
                    transform: translate3d(-10rem,-10rem,0);
                    opacity: 1;
                }
            }
        }

        & > u:nth-of-type(2) {
            animation: standby 2s infinite;
            height: 10rem;
            //bat
            bat {
                width: 1.5rem;
                height: 4.5rem;
                border-radius: .5rem;
                background: $yellow;
                border: $lw solid $line;
                transform: translate3d(6rem, -3rem, 0) rotate(80deg);

                &:before {
                    width: 5rem;
                    height: 5rem;
                    border-radius: 50%;
                    background: $red;
                    border: $lw solid $line;
                    transform: translate3d(-2.25rem,-3rem,0);
                }
            }
            //head
            u:nth-of-type(4) {
                width: 5rem;
                height: 5rem;
                border-radius: 50%;
                background: $yellow;
                border: $lw solid $line;
                transform: translate3d(-2rem,1rem,0);

                &:before {
                    width: $lw;
                    height: $lw;
                    background: $line;
                    border-radius: 50%;
                    transform: translate3d(1rem,2rem,0);
                    box-shadow: 1.2rem 0 0 $line;
                    animation: blink 6s infinite;
                }

                @keyframes blink {
                    70%, 74% {
                        transform: translate3d(1rem,2rem,0)
                    }

                    72% {
                        transform: translate3d(1rem,2rem,0) scaleY(0)
                    }
                }
            }
            //body
            u:nth-of-type(1) {
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                background: $red;
                border: $lw solid $line;
                transform: translate3d(-3.5rem,5rem,0);
            }
            // left arm
            u:nth-of-type(2) {
                border-style: hidden;
                border-left: $lw solid $line;
                border-top: $lw solid $line;
                width: 6rem;
                height: 6rem;
                transform: translate3d(-2.3rem, 1.4rem, 0) rotate(200deg);
                border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
                transform-origin: 0 100%;

                @keyframes serve-left {
                    70% {
                        transform: translate3d(-1rem,1rem,0) rotate(280deg);
                    }
                }
            }
            //right arm
            u:nth-of-type(3) {
                border-style: hidden;
                border-top: $lw solid $line;
                border-right: $lw solid $line;
                width: 8rem;
                height: 8rem;
                transform: translate3d(4.3rem, 6rem, 0) rotate(13deg);
                border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
                transform-origin: 0 0;

                &:before {
                    transform: translate3d(5rem,8rem,0);
                }

                @keyframes serve {
                    50% {
                        transform: translate3d(4rem,6rem,0) rotate(150deg);
                    }
                }

                @keyframes serveball {
                    49% {
                        opacity: 1;
                    }

                    50%, 100% {
                        opacity: 0;
                    }
                }
            }
        }

        & > u:nth-of-type(1) {
            animation: standby2 2s infinite;
            height: 10rem;
            transform-origin: 100% 100%;
            transform: translate3d(0,14rem, 0) skewX(0deg) rotate(1deg);
            // left leg

            u:nth-of-type(2) {
                width: 8rem;
                height: 10rem;
                border-style: hidden;
                border-left: $lw solid $line;
                border-top: $lw solid $line;
                transform: translate3d(-6rem,0, 0) rotate(-11deg);
                border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
            }
            // right leg

            u:nth-of-type(1) {
                width: 8rem;
                height: 10rem;
                border-style: hidden;
                border-top: $lw solid $line;
                border-right: $lw solid $line;
                transform: translate3d(1rem,0, 0) rotate(12deg);
                border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
            }
        }
    }
}

@keyframes standby {
    50% {
        transform: skewX(2deg) rotate(-5deg);
    }
}

@keyframes standby2 {
    50% {
        transform: translate3d(0,14rem, 0) skewX(-5deg) rotate(1deg);
    }
}

//dialog

$timer: 2s;
$timer2: 1s;

dialog1 player1 {
    & > u {
        & > u:nth-of-type(2) {
            animation: standby3 $timer infinite;
            // left arm
            u:nth-of-type(2) {
                animation: dance $timer infinite;
                transform: translate3d(-2rem, .4rem, 0) rotate(60deg) scaleY(-1);

                @keyframes dance {
                    25% {
                        transform: translate3d(-2rem, .4rem, 0) rotate(95deg) scaleY(-1);
                    }

                    50% {
                        transform: translate3d(-2rem, .4rem, 0) rotate(60deg) scaleY(-1);
                    }

                    75% {
                        transform: translate3d(-2rem, .4rem, 0) rotate(30deg) scaleY(-1);
                    }
                }
            }
            //right arm
            u:nth-of-type(3) {
                animation: dance2 $timer infinite;
                transform: translate3d(4.5rem, 6rem, 0) rotate(13deg);

                @keyframes dance2 {
                    25% {
                        transform: translate3d(4.5rem, 6rem, 0) rotate(43deg);
                    }

                    50% {
                        transform: translate3d(4.5rem, 6rem, 0) rotate(13deg);
                    }

                    75% {
                        transform: translate3d(4.5rem, 6rem, 0) rotate(-13deg);
                    }
                }
            }
        }

        & > u:nth-of-type(1) {
            animation: standby4 $timer infinite;
        }
    }
}

@keyframes standby3 {
    25% {
        transform: translate3d(0,1rem,0) skewX(3deg) rotate(-8deg);
    }

    50% {
        transform: translate3d(0,0,0);
    }

    75% {
        transform: translate3d(0,1rem,0) skewX(-3deg) rotate(8deg);
    }
}

@keyframes standby4 {
    25% {
        transform: translate3d(0,14rem, 0) skewX(-8deg) rotate(3deg);
    }

    50% {
        transform: translate3d(0,14rem, 0);
    }

    75% {
        transform: translate3d(0,14rem, 0) skewX(8deg) rotate(- 3deg);
    }
}

//miss

dialog2 player1 {
    margin-top: 5rem;
    margin-bottom: 5rem;

    & > u {
        & > u:nth-of-type(2) {
            //head
            u:nth-of-type(4) {
                transform: translate3d(-2rem,4rem,0);
                animation: looksadhead 6s infinite;

                @keyframes looksadhead {
                    10%, 28% {
                        transform: translate3d(-2rem,3.8rem,0);
                    }

                    18%, 40% {
                        transform: translate3d(-2rem,4.2rem,0);
                    }
                }

                &:before {
                    transform: translate3d(1rem,3rem,0);
                    animation: looksad 6s infinite;
                }

                @keyframes looksad {
                    10%, 22% {
                        transform: translate3d(.5rem,3rem,0)
                    }

                    15%, 30% {
                        transform: translate3d(1.5rem,3rem,0);
                    }

                    70%, 74% {
                        transform: translate3d(1rem,3rem,0)
                    }

                    72% {
                        transform: translate3d(1rem,2.5rem,0) scaleY(0)
                    }
                }
            }
            // left arm
            u:nth-of-type(2) {
                transform: translate3d(-2.8rem, 1.4rem, 0) rotate(32deg) scaleY(-1);
            }
            //right arm
            u:nth-of-type(3) {
                transform: translate3d(4.6rem, 6.2rem, 0) rotate(47deg);
            }
        }
    }
}

//win

dialog3 player1 {
    & > u {
        transform: translate3d(0,5rem,0);

        & > u:nth-of-type(2) {
            animation: standby3 $timer2 infinite;
            //head
            u:nth-of-type(4) {
                &:before {
                    transform: translate3d(2rem,2rem,0);
                    animation: lookhappy 4s infinite;
                }

                @keyframes lookhappy {
                    50% {
                        transform: translate3d(.5rem,2.5rem,0);
                    }
                }
            }
            // left arm
            u:nth-of-type(2) {
                animation: windance $timer2 infinite;
                transform: translate3d(-1.8rem, .8rem, 0) rotate(270deg);

                @keyframes windance {
                    25% {
                        transform: translate3d(-1.8rem, .8rem, 0) rotate(320deg);
                    }

                    50% {
                        transform: translate3d(-1.8rem, .8rem, 0) rotate(260deg);
                    }

                    75% {
                        transform: translate3d(-1.8rem, .8rem, 0) rotate(230deg);
                    }
                }
            }
            //right arm
            u:nth-of-type(3) {
                animation: windance2 $timer2 infinite;
                transform: translate3d(4.5rem, 6.5rem, 0) rotate(0deg) scaleY(-1);

                @keyframes windance2 {
                    25% {
                        transform: translate3d(4.5rem, 6.5rem, 0) rotate(50deg) scaleY(-1);
                    }

                    50% {
                        transform: translate3d(4.5rem, 6.5rem, 0) rotate(0deg) scaleY(-1);
                    }

                    75% {
                        transform: translate3d(4.5rem, 6.5rem, 0) rotate(-70deg) scaleY(-1);
                    }
                }
            }
        }

        & > u:nth-of-type(1) {
            animation: standby4 $timer2 infinite;
        }
    }
}

@function texture ($a) {
    $value: '#{random(30) - 15}rem #{random(30) - 15}rem 0 currentColor';

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(30) - 15}rem #{random(30) - 15}rem 0 currentColor';
    }

    @return unquote($value);
}

$confetti: texture(4);
$confetti2: texture(5);
$confetti3: texture(6);

confetti {
    transform: translate3d(0, 0,0);
    width: 100%;
    height: 50%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#fff,#fff, $none);

    &, &:before, &:after, *, *:before, *:after {
        position: absolute;
        top: 0;
        left: 0;
    }

    & > u > u {
        animation: sway $timer infinite linear;
        transform: translate3d(0, 20rem,0) scale(0);

        &, &:before, &:after {
            content: '';
            width: 1rem;
            height: 1rem;
            color: $red;
            background: currentColor;
            box-shadow: $confetti;
        }

        &:before {
            color: $yellow;
            transform: translate3d(4rem, -3rem,0);
            box-shadow: $confetti2;
        }

        &:after {
            color: $green;
            transform: translate3d(1.5rem, -1rem,0);
            box-shadow: $confetti3;
        }
    }

    & > u {
        transform: translate3d(35rem,0,0);
    }

    & > u:nth-of-type(2) {
        transform: translate3d(15rem,0,0);

        & > u {
            animation: sway $timer .5s infinite linear;
            transform: translate3d(0, 10rem,0) scale(0);
        }
    }

    & > u:nth-of-type(3) {
        transform: translate3d(40rem,0,0);

        & > u {
            animation: sway $timer 1s infinite linear;
            transform: translate3d(0, 10rem,0) scale(0);
        }
    }

    & > u:nth-of-type(4) {
        transform: translate3d(7rem,0,0);

        & > u {
            animation: sway $timer 1.5s infinite linear;
            transform: translate3d(0, 0,0) scale(0);
        }
    }
}

@keyframes sway {
    10% {
        transform: translate3d(.8rem, 5rem,0) scale(1);
        opacity: 1;
    }

    25% {
        transform: translate3d(-.9rem, 15rem,0) scale(1) scaleX(.9);
    }

    45% {
        transform: translate3d(.7rem, 28rem,0) scale(1);
    }

    65% {
        transform: translate3d(-.9rem, 35rem,0) scale(1) scaleX(1.1);
        opacity: 1;
    }

    85% {
        transform: translate3d(.6rem, 42rem,0) scale(1) scaleX(.9);
        opacity: 1;
    }

    99% {
        transform: translate3d(0, 50rem,0) scale(1) scaleX(1.1);
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 50rem,0) scale(1);
        opacity: 0;
    }
}

// @import "play-animations-v2";
player2, player1 {
    & > u {
        animation: move-in $movespeed forwards;

        &:after {
            animation: move-shadow2 $movespeed forwards;
        }
    }
}

player2 {
    transform: translate3d(38rem,80rem,0);

    & > u {
        transform: translate3d(-10rem,0,0);

        & > u:nth-of-type(2) u:nth-of-type(4):before {
            display: none;
        }
    }
}

@keyframes move-in {
    50% {
        transform: translate3d(0,-5rem,0);
    }
}

@keyframes move-shadow1 {
    50% {
        transform: translate3d(-4rem, 24rem, 0) scale(1.1);
    }
}

@keyframes move-shadow2 {
    50% {
        transform: translate3d(-4rem, 24rem, 0) scale(1.1);
    }
}

@keyframes move-shadow3 {
    50% {
        transform: translate3d(-4rem, 24rem, 0) scale(1.1);
    }
}

@keyframes move-shadow4 {
    50% {
        transform: translate3d(-4rem, 24rem, 0) scale(1.1);
    }
}

//straight
//move to left
@keyframes move-left {
    50% {
        transform: translate3d(-5rem,-3rem,0);
    }

    100% {
        transform: translate3d(-8rem,0,0);
    }
}
//straight
//move to right
@keyframes move-right {
    50% {
        transform: translate3d(5rem,-4rem,0);
    }

    100% {
        transform: translate3d(8rem,1rem,0);
    }
}

//diagonal
//move to left
@keyframes move-left-d {
    50% {
        transform: translate3d(-5rem,-4rem,0);
    }

    100% {
        transform: translate3d(-10rem,0,0);
    }
}
//diagonal
//move to right
@keyframes move-right-d {
    50% {
        transform: translate3d(3rem,-3rem,0);
    }

    100% {
        transform: translate3d(7rem,2rem,0);
    }
}

// left arm swing

@keyframes left-arm-swing-1 {
    10% {
        transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
    }

    20% {
        transform: translate3d(-2rem,1rem,0) rotate(250deg) scaleX(.5);
    }
}

@keyframes left-arm-swing-2 {
    10% {
        transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
    }

    20% {
        transform: translate3d(-2rem,1.4rem,0) rotate(230deg) skew(10deg) scaleX(.8);
    }
}

@keyframes left-arm-swing-3 {
    10% {
        transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
    }

    20% {
        transform: translate3d(-2rem,1.4rem,0) rotate(230deg) skew(10deg) scaleX(.8);
    }
}

@keyframes left-arm-swing-4 {
    10% {
        transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
    }

    20% {
        transform: translate3d(-2rem,1.4rem,0) rotate(230deg) skew(10deg) scaleX(.8);
    }
}

//right arm swing

@keyframes right-arm-swing-1 {
    50% {
        transform: translate3d(4rem,6rem,0) rotate(-60deg);
    }
}

@keyframes right-arm-swing-2 {
    50% {
        transform: translate3d(4rem,6rem,0) rotate(-80deg);
    }
}

@keyframes right-arm-swing-3 {
    50% {
        transform: translate3d(4rem,6rem,0) rotate(-60deg);
    }
}

// move player2 left

.hit-left-left:checked ~ div > div >,
.hit-left-right-2:checked ~ div > div >,
#miss-left:checked ~ div > div >,
#win-left:checked ~ div > div > {
    player2 > u {
        animation: move-left $movespeed forwards;

        &:after {
            animation: move-shadow1 $movespeed forwards;
        }
    }
}

.hit-left-right:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div > {
    player2 > u {
        animation: move-left-d $movespeed forwards;

        &:after {
            animation: move-shadow2 $movespeed forwards;
        }
    }
}
// move player2 right
.hit-right-right:checked ~ div > div >,
.hit-right-left-2:checked ~ div > div >,
#miss-right:checked ~ div > div >,
#win-right:checked ~ div > div > {
    player2 > u {
        animation: move-right $movespeed forwards;

        &:after {
            animation: move-shadow3 $movespeed forwards;
        }
    }
}

.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div > {
    player2 > u {
        animation: move-right-d $movespeed forwards;

        &:after {
            animation: move-shadow4 $movespeed forwards;
        }
    }
}
// move player1 right
.hit-right-right:checked ~ div > div >,
.hit-right-left-2:checked ~ div > div > {
    player1 > u {
        animation: move-right $movespeed forwards;

        &:after {
            animation: move-shadow1 $movespeed forwards;
        }
    }
}

.hit-left-right:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div > {
    player1 > u {
        animation: move-right-d $movespeed .5s forwards;

        &:after {
            animation: move-shadow2 $movespeed .5s forwards;
        }
    }
}

// move player1 left

.hit-left-left:checked ~ div > div >,
.hit-left-right-2:checked ~ div > div >,
#win-left:checked ~ div > div >,
#serve-right:checked ~ div > div > {
    player1 > u {
        animation: move-left $movespeed .5s forwards;

        &:after {
            animation: move-shadow3 $movespeed .5s forwards;
        }
    }
}

.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div >,
#win-right:checked ~ div > div > {
    player1 > u {
        animation: move-left-d $movespeed .5s forwards;

        &:after {
            animation: move-shadow4 $movespeed .5s forwards;
        }
    }
}

//arms
//arms
//arms

// miss player 2

#miss-left:checked ~ div > div > player2,
#miss-right:checked ~ div > div > player2 {
    & > u {
        & > u:nth-of-type(2) {
            //left arm
            & > u:nth-of-type(2) {
                animation: left-arm-swing-1 1s $movespeed ease-out;
            }
            //right arm

            & > u:nth-of-type(3) {
                transform: translate3d(4rem,6rem,0) rotate(-21deg);
                animation: right-arm-swing-1 1s $movespeed ease-out;
            }
        }
    }
}

// hit  1

.hit-left-right-2:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div >,
.hit-left-right:checked ~ div > div > {
    player2 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-2 1s ease-out;
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-2 1s ease-out;
                }
            }
        }
    }

    player1 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-2 1s 1s ease-out;
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-2 1s 1s ease-out;
                }
            }
        }
    }
}

// hit 2
.hit-right-right:checked ~ div > div >,
.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div > {
    player2 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-4 1s ease-out;
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-4 1s ease-out;
                }
            }
        }
    }

    player1 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-3 1s .9s ease-out !important;
                }
                //right arm
                & > u:nth-of-type(3) {
                    animation: right-arm-swing-3 1s .9s ease-out;
                }
            }
        }
    }
}

// hit 3
.hit-left-left:checked ~ div > div >,
.hit-right-left-2:checked ~ div > div > {
    player2 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-1 1s ease-out;
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-1 1s ease-out;
                }
            }
        }
    }

    player1 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-1 1s .9s ease-out;
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-1 1s .9s ease-out;
                }
            }
        }
    }
}

// win left

#win-left:checked ~ div > div > {
    player2 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-2 1s ease-out;
                }
                //right arm
                & > u:nth-of-type(3) {
                    animation: right-arm-swing-2 1s ease-out;
                }
            }
        }
    }

    player1 {
        & > u {
            & > u:nth-of-type(2) {
                //head
                u:nth-of-type(4) {
                    &:before {
                        transform: translate3d(1rem,2rem,0);
                        animation: misseyes 5s .5s;
                    }

                    @keyframes misseyes {
                        20% {
                            transform: translate3d(1.5rem,2.5rem,0);
                        }

                        30% {
                            transform: translate3d(.5rem,2.5rem,0);
                        }

                        90% {
                            transform: translate3d(.5rem,1rem,0);
                        }
                    }
                }
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-1 5s 1.9s ease-out !important;
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-1 5s 1.9s ease-out;
                }
            }
        }
    }
}

// win right
#win-right:checked ~ div > div > {
    player2 {
        & > u {
            & > u:nth-of-type(2) {
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-swing-1 1s ease-out;
                }
                //right arm
                & > u:nth-of-type(3) {
                    animation: right-arm-swing-1 1s ease-out;
                }
            }
        }
    }

    player1 {
        & > u {
            & > u:nth-of-type(2) {
                //head
                u:nth-of-type(4) {
                    animation: duck 5s .5s;

                    @keyframes duck {
                        30% {
                            transform: translate3d(-2rem, 1rem, 0);
                        }

                        90% {
                            transform: translate3d(-2rem, 2rem, 0);
                        }
                    }

                    &:before {
                        transform: translate3d(1rem,2rem,0);
                        animation: misseyes2 5s .5s;
                    }

                    @keyframes misseyes2 {
                        20% {
                            transform: translate3d(1.5rem,2.5rem,0);
                        }

                        30% {
                            transform: translate3d(1rem,2.5rem,0);
                        }

                        90% {
                            transform: translate3d(1rem,1rem,0);
                        }
                    }
                }
                //left arm
                & > u:nth-of-type(2) {
                    animation: left-arm-duck 5s 1.9s ease-out;
                }

                @keyframes left-arm-duck {
                    10% {
                        transform: translate3d(-2rem,1.4rem,0) rotate(200deg);
                    }

                    20% {
                        transform: translate3d(-2rem,1rem,0) rotate(300deg) scaleX(.5);
                    }
                }
                //right arm

                & > u:nth-of-type(3) {
                    animation: right-arm-swing-1 5s 1.9s ease-out;
                }
            }
        }
    }
}

//overlay

#win-left:checked ~ div > winoverlay, #win-right:checked ~ div > winoverlay {
    &:after, & {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    &:before, &:after, & {
        position: absolute;
    }

    &:before {
        content: '';
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        border-left: $lw dashed $red;
        border-top: $lw dashed $red;
        border-right: $lw solid $red;
        border-bottom: $lw solid $red;
        left: 4rem;
        top: 3rem;
        animation: blinktext .5s 1s linear infinite;
        opacity: 0;
        transform: scale(1.3) rotate(-45deg);
        background-image: linear-gradient(135deg, $none 50%, $red 50%);
        background-position: calc(100% - 1.4rem) .7rem;
        background-size: 2rem 2rem;
        background-repeat: no-repeat;

        @keyframes blinktext {
            40% {
                opacity: 0;
            }

            50%, 90% {
                opacity: 1;
            }
        }
    }

    &:after {
        content: '';
        background: repeating-linear-gradient($red,$red 1rem, $none 1rem, $none 2rem);
        opacity: .1;
        animation: slowmo .2s 1s linear infinite;
        mix-blend-mode: difference;
        opacity: 0;
        -webkit-mask-image: linear-gradient(#000,$none);
    }

    @keyframes slowmo {
        49% {
            transform: translate3d(0,0,0);
            opacity: .1;
        }

        50%, 100% {
            transform: translate3d(0,1rem,0);
        }
    }
}

// @import "ball";
// #1 serve left top
#serve-left:checked ~ div > div > {
    //over the table
    ball {
        transform: translate3d(27rem,15rem,0);
        animation: serveball3 1s 1s;
    }

    @keyframes serveball3 {
        1%, 100% {
            opacity: 1;
        }

        50% {
            transform: translate3d(20rem,50rem,0);
        }

        100% {
            transform: translate3d(12rem,120rem,0);
        }
    }

    player1 {
        & > u {
            ball {
                transform: translate3d(-10rem,1rem,0);
                animation: serveball2 1s;
                opacity: 0;

                @keyframes serveball2 {
                    49%,100% {
                        transform: translate3d(-10rem,1rem,0);
                        opacity: 0;
                    }

                    50% {
                        opacity: 1;
                    }

                    75% {
                        transform: translate3d(-10rem,-10rem,0);
                        opacity: 1;
                    }
                }
            }

            & > u:nth-of-type(2) {
                //left arm
                u:nth-of-type(2) {
                    animation: serve-left 2s .1s ease-out;

                    @keyframes serve-left {
                        5%, 50%, 70% {
                            transform: translate3d(-2rem, 1.4rem, 0) rotate(150deg);
                        }

                        40% {
                            transform: translate3d(-2rem,1.4rem,0) rotate(280deg);
                        }
                    }
                }
                //right arm

                u:nth-of-type(3) {
                    transform: translate3d(4rem,6rem,0) rotate(-21deg);
                    animation: serve 1s ease-out;

                    &:before {
                        transform: translate3d(5rem,8rem,0);
                        animation: serveball 1s ease-out;
                    }

                    @keyframes serve {
                        50% {
                            transform: translate3d(4rem,6rem,0) rotate(150deg);
                        }
                    }

                    @keyframes serveball {
                        49% {
                            opacity: 1;
                        }

                        50%, 100% {
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }
}

// #1 serve right top
#serve-right:checked ~ div > div > {
    //over the table
    ball {
        transform: translate3d(20rem,16rem,0);
        animation: serveball4 1s 1s;
    }

    @keyframes serveball4 {
        1%, 100% {
            opacity: 1;
        }

        50% {
            transform: translate3d(25rem,50rem,0);
        }

        100% {
            transform: translate3d(32rem,120rem,0);
        }
    }

    player1 {
        & > u {
            ball {
                transform: translate3d(-10rem,1rem,0);
                animation: serveball2 1s;
                opacity: 0;

                @keyframes serveball2 {
                    49%,100% {
                        transform: translate3d(-10rem,1rem,0);
                        opacity: 0;
                    }

                    50% {
                        opacity: 1;
                    }

                    75% {
                        transform: translate3d(-10rem,-10rem,0);
                        opacity: 1;
                    }
                }
            }

            & > u:nth-of-type(2) {
                //left arm
                u:nth-of-type(2) {
                    animation: serve-left 2s .1s ease-out;

                    @keyframes serve-left {
                        5%, 50%, 70% {
                            transform: translate3d(-2rem, 1.4rem, 0) rotate(150deg);
                        }

                        40% {
                            transform: translate3d(-2rem,1.4rem,0) rotate(280deg);
                        }
                    }
                }
                //right arm

                u:nth-of-type(3) {
                    transform: translate3d(4rem,6rem,0) rotate(-21deg);
                    animation: serve 1s ease-out;

                    &:before {
                        transform: translate3d(5rem,8rem,0);
                        animation: serveball 1s ease-out;
                    }

                    @keyframes serve {
                        50% {
                            transform: translate3d(4rem,6rem,0) rotate(150deg);
                        }
                    }

                    @keyframes serveball {
                        49% {
                            opacity: 1;
                        }

                        50%, 100% {
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }
}

// hit left straight to straight
.hit-left-left:checked ~ div > div > {
    ball {
        transform: translate3d(15rem, 89rem, 0);
        animation: hit-left-left 2s;
    }
    // up and down the table

    @keyframes hit-left-left {
        1%, 100% {
            opacity: 1;
        }

        25% {
            transform: translate3d(16.5rem,40rem,0);
        }

        50% {
            transform: translate3d(16.5rem,15rem,0);
        }

        75% {
            transform: translate3d(16.5rem,50rem,0);
        }

        100% {
            transform: translate3d(16.5rem, 120rem, 0);
        }
    }
}

// hit right straight to straight
.hit-right-right:checked ~ div > div > {
    ball {
        transform: translate3d(32rem, 89rem, 0);
        animation: hit-right-right 2s;
    }
    // up and down the table

    @keyframes hit-right-right {
        1%, 100% {
            opacity: 1;
        }

        25% {
            transform: translate3d(34rem,40rem,0);
        }

        50% {
            transform: translate3d(34rem,15rem,0);
        }

        75% {
            transform: translate3d(34rem,50rem,0);
        }

        100% {
            transform: translate3d(34rem, 120rem, 0);
        }
    }
}

// hit left straight to right
.hit-left-right-2:checked ~ div > div > {
    ball {
        transform: translate3d(15rem, 89rem, 0);
        animation: hit-left-right-2 2s;
    }
    // up and down the table

    @keyframes hit-left-right-2 {
        1%, 100% {
            opacity: 1;
        }

        25% {
            transform: translate3d(16.5rem,40rem,0);
        }

        50% {
            transform: translate3d(18rem,15rem,0);
        }

        75% {
            transform: translate3d(25rem,50rem,0);
        }

        100% {
            transform: translate3d(34rem, 120rem, 0);
        }
    }
}

// hit right straight to right
.hit-right-left-2:checked ~ div > div > {
    ball {
        transform: translate3d(33rem, 89rem, 0);
        animation: hit-right-left-2 2s;
    }
    // up and down the table

    @keyframes hit-right-left-2 {
        1%, 100% {
            opacity: 1;
        }

        25% {
            transform: translate3d(33.5rem,40rem,0);
        }

        50% {
            transform: translate3d(34rem,15rem,0);
        }

        75% {
            transform: translate3d(25rem,50rem,0);
        }

        100% {
            transform: translate3d(16.5rem, 120rem, 0);
        }
    }
}

// #4 return right bottom
.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div > {
    ball {
        transform: translate3d(30rem, 89rem, 0);
        animation: returnball3 2s;
    }
    // up and down the table

    @keyframes returnball3 {
        1%, 100% {
            opacity: 1;
        }

        25% {
            transform: translate3d(20rem,40rem,0);
        }

        50% {
            transform: translate3d(15rem,15rem,0);
        }

        75% {
            transform: translate3d(16rem,50rem,0);
        }

        100% {
            transform: translate3d(17rem, 120rem, 0);
        }
    }
}

// #5 return left bottom

.hit-left-right:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div > {
    ball {
        transform: translate3d(14rem, 89rem, 0);
        animation: returnball4 2s;
    }
    // up and down the table

    @keyframes returnball4 {
        1%, 100% {
            opacity: 1;
        }

        25% {
            transform: translate3d(23rem,40rem,0);
        }

        50% {
            transform: translate3d(32rem,15rem,0);
        }

        75% {
            transform: translate3d(33rem,50rem,0);
        }

        100% {
            transform: translate3d(34rem, 120rem, 0);
        }
    }
}

// win right

#win-right:checked ~ div > div > {
    ball {
        transform: translate3d(30rem, 89rem, 0);
        animation: winrightball 5s;
    }
    // up the table

    @keyframes winrightball {
        1%, 100% {
            opacity: 1;
        }

        15% {
            transform: translate3d(30rem,40rem,0);
        }

        100% {
            transform: translate3d(30rem,0rem,0);
        }
    }
}

// win left

#win-left:checked ~ div > div > {
    ball {
        transform: translate3d(14rem, 89rem, 0);
        animation: winleftball 5s;
    }
    // up the table

    @keyframes winleftball {
        1%, 100% {
            opacity: 1;
        }

        15% {
            transform: translate3d(21rem,40rem,0);
        }

        100% {
            transform: translate3d(28rem,0rem,0);
        }
    }
}