.wroz{
    color: #cc3332;
}
.calc{
  position: relative;
} 
.boxes{
    text-align: center;
    width: 310px;
    margin: 0 auto;
}
.boxes li{
    list-style: none;
    width: 100px;
    height: 100px;
    display: inline-block;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    outline: 3px solid #ccc;
    position: relative;
}
.play li:hover::after,
#boxes li.blue::after,
#boxes li.roz::after{
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    background-color: #47a3da;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -khtml-border-radius: 25px;
    position: absolute;
    left: 25px;
    top: 25px;
}
#boxes li.roz::after,
.broz .play li:hover::after{
    background-color: #cc3332;
}
#boxes li.green{
    outline: 3px solid #24a777;
    z-index: 5;
}
.play li{
    cursor: pointer;
}
.score{
    display: block;
    text-align: center;
}
.score > ul{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.score li:first-of-type{
    width: 100%;
    justify-content: center;
    margin-bottom: 15px;
}
.score li:nth-of-type(2){
    margin-right: 10px;
}

@media all and (max-width: 580px){
    .boxes {
        width: 198px;
    }
    .boxes li{
        width: 60px;
        height: 60px;
    }
    .play li:hover::after,
    #boxes li.blue::after,
    #boxes li.roz::after{
        width: 30px;
        height: 30px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        -khtml-border-radius: 15px;
        left: 15px;
        top: 15px;
    }
}
@media all and (max-width: 400px){
    .score li h3, .score li div {
        font-size: 13px;
    }
}