/* gwsm */

.mid__gwsm {
    width: 256px;
    flex-shrink: 0;
    position: relative;
    z-index: 0;
    height: 400px;
	top: 13px;
}

.mid__gwsm:before {
    display: block;
    content: "";
    background: url(../images/indicator-light.png) no-repeat;
    width: 66px;
    height: 69px;
    position: absolute;
    right: 10px;
    bottom: calc(100% - 18px);
    z-index: 3;
}

.mid__gwsm:after {
    display: block;
    content: "";
    background: url(../images/slot-machine.png) no-repeat;
    width: 278px;
    height: 418px;
    position: absolute;
    left: -10px;
    top: -14px;
}

.gwsm__info {
    height: 30px;
    position: relative;
    z-index: 5;
    color: #fff000;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px;
}

.gwsm__code {
    color: #fff000;
    font-size: 14px;
    line-height: 26px;
    font-weight: 900;
    background-color: #fff000;
    height: 28px;
    width: 223px;

    animation: code-blur .5s ease-out forwards;
    /* transition: .3s all; */
}

@keyframes code-blur {
    0% {
        filter: blur(20px);
        background-color: #fff000;
        transform: scale(0);
        opacity: 0;
    }

    60% {
        filter: blur(20px);
        background-color: #fff000;
        transform: scale(1);
        opacity: 1;
    }

    100% {
        filter: blur(0);
        background-color: transparent;
        transform: scale(1);
    }
}

.gwsm__scl {
    height: 56px;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

/* gwsm__play */

.gwsm__play {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* game */

.gwsm__game {
    height: 225px;
    /* outline: 1px solid #fff; */
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 36px;
    padding-left: 2px;
}

.gwsm__roll-box {
    /* outline: 1px solid #fff; */
    width: 40px;
    height: 100px;
    margin: 0 9px;

    overflow: hidden;
    background-color: #fff;
    position: relative;
    z-index: 0;
}

.gwsm__roll-box:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 80%, rgb(0, 0, 0) 100%);
}

.gwsm__roll-list {
    width: 40px;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: -7px;
    z-index: 0;
}

.gwsm__roll-blur {
    width: 40px;
    height: 480px;
    background: url(../images/gwsm-items_blur.jpg) no-repeat center top;
    /* background-size: cover; */
    position: absolute;
    left: 0;
    bottom: 0;

    z-index: 5;
    opacity: 0;
    transition: 0s all;
}

@keyframes rollscroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50%);
    }
}

.gwsm__roll-blur_num_1.gwsm__roll-blur_active {
    animation: rollscroll .6s linear infinite;
}

.gwsm__roll-blur_num_2.gwsm__roll-blur_active {
    animation: rollscroll .5s linear infinite;
    bottom: -120px;
}

.gwsm__roll-blur_num_3.gwsm__roll-blur_active {
    animation: rollscroll .7s linear infinite;
    bottom: -40px;
}

.gwsm__roll-blur_active {
    opacity: 1;
    transition: .1s all;
}

.gwsm__roll-items {
    width: 40px;
    height: 480px;
    background: url(../images/gwsm-items.jpg) no-repeat center top;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    transition: .6s all ease-out;
}

.btn-play_active {
    opacity: .5;
    pointer-events: none;
}