playground.css

:root {
    --circle: 8rem;
}

.playground {
    display: flex;
    margin-top: 3rem;
}

.game-sign {
    position: relative;
    display: flex;
    justify-content: center;
    width: var(--circle);
    height: var(--circle);
    margin: calc(var(--circle) / 7);
    background-color: #fff;
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        inset
        0
        calc(var(--circle) / 10)
        0
        calc(var(--circle) / -20)
        rgba(0, 0, 0, 0.15);
}

.game-sign--rock {
    background-image: url(./images/icon-rock.svg);
}
.game-sign--paper {
    background-image: url(./images/icon-paper.svg);
}
.game-sign--scissors {
    background-image: url(./images/icon-scissors.svg);
}

.game-sign::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: calc(var(--circle) / -7);
    bottom: calc(var(--circle) / -7);
    left: calc(var(--circle) / -7);
    right: calc(var(--circle) / -7);
    border-radius: 50%;
    box-shadow:
        inset
        0
        calc(var(--circle) / -12)
        0
        calc(var(--circle) / -30)
        rgba(0, 0, 0, 0.3);
}

.game-sign--rock::after {
    background: linear-gradient(hsl(349, 71%, 52%), hsl(349, 70%, 56%));
}

.game-sign--paper::after {
    background: linear-gradient(hsl(230, 89%, 62%), hsl(230, 89%, 65%));
}

.game-sign--scissors::after {
    background: linear-gradient(hsl(39, 89%, 49%), hsl(40, 84%, 53%));
}

.playground-init {
    height: calc(var(--circle) * 2.8);
}

.playground-init .game-sign:nth-child(1) {
    left: 1rem;
}

.playground-init .game-sign:nth-child(2) {
    align-self: flex-end;
}

.playground-init .game-sign:nth-child(3) {
    right: 1rem;
}

.playground-init .game-sign:nth-child(2)::before {
    z-index: -2;
    content: '';
    width: calc(var(--circle) * 2);
    height: calc(var(--circle) * 2);
    display: flex;
    background-color: transparent;
    border-radius: 50%;
    border: .8rem solid #16233d;
    position: absolute;
    bottom: 50%;
}

.playground-battle {
    --circle: 11rem;
    display: flex;
    align-items: center;
}

.battle-result {
    display: flex;
    flex-direction: column;
    margin: 0 3rem;
}

.battle-result-title {
    font-size: 3rem;
    text-transform: uppercase;
    color: #fff;
}

.battle-result-again {
    font-family: inherit;
    font-size: .73rem;
    margin-top: .5rem;
    padding: .6rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    background-color: #fff;
    border: none;
    border-radius: .4rem;
    outline: none;
}

.player-title {
    margin-bottom: 4.2rem;
    letter-spacing: .1rem;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.game-sign--winner::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: calc(var(--circle) / -1);
    bottom: calc(var(--circle) / -1);
    left: calc(var(--circle) / -1);
    right: calc(var(--circle) / -1);
    border-radius: 50%;
    background: radial-gradient(
        rgba(255, 255, 255, .3) 0 43%,
        rgba(255, 255, 255, .2) 43% 57%,
        rgba(255, 255, 255, .1) 57% 100%
    );
    /* border: red 310px solid; */
    animation: wave .7s infinite;
}

@keyframes wave {
    0% {
        transform: scale(.4);
    }

    100% {
        transform: scale(1);
    }
}