/* Scratchcard falling */
.fall_animation{
    animation: falling var(--random-time) linear;
    animation-fill-mode: forwards;
}

@keyframes falling {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: translate(var(--random-x), 100vh) rotate(var(--random-deg));
    }
}

/* Chest openning */
.drop_animation{  
    offset-path: path(var(--path-drop));
	offset-rotate: 0deg;
    animation: drop 1s cubic-bezier(.76,.29,.17,.67);
}

.move_animation{  
    offset-path: path(var(--path-open));
	offset-rotate: 0deg;
    animation: move 1s 1s cubic-bezier(.58,.13,.66,.99);
    animation-fill-mode: forwards;
}

.open_animation{  
    animation: chest_open 0.5s linear;
    animation-fill-mode: forwards;
}


@keyframes drop {
    30%{
        offset-distance: 10%;
    }
    100% {
        offset-distance: 100%;
    }
}

@keyframes move {
    to {
        offset-distance: 100%;
    }
}

@keyframes chest_open {
    100%{
        transform: rotateX(-60deg);
    }
}


.opening_animation{  
    animation: opening 0.5s cubic-bezier(1,0,0,1);
    animation-fill-mode: both;
}

@keyframes opening {
    0%{
        transform: scale(0.1,0);
    }
    50%{
        transform: scale(0.1,1);
    }
    100%{
        transform: scale(1,1);
    }
}

.roll_animation{ 
    animation: roll var(--time) 1s cubic-bezier(.2,1,.6,1);
    animation-fill-mode: both;
}

@keyframes roll {
    100%{
        transform: translateX(var(--translate_x));
    }
}

/* Casino css */

#slot_wrapper{
    width:80%;
}

#spin-wrapper{
    height:30vh;
    justify-content: center !important;
    gap:5vw;
}

.slot{
    height: 30vh;
    width: 30%;
    overflow: hidden;
    background: rgb(210,249,248);
    background: linear-gradient(0deg, rgba(210,249,248,1) 0%, rgba(255,255,255,1) 59%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 82%, rgba(230,251,250,1) 100%);
    border: 5px inset #FFE900;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 1;
}

.slot img{
    padding: 2vh 0;
    width: auto;
    height: 10vh;
}

.slot_box{
	width: 50%;
	display: flex;
	flex-direction: column;
}

.slot div{
    transform: translateY(4vh);
}

#machine{
    width:75%;
    gap:4vh;
    padding: 5vh 2vw;
}

.machine_text{
    color: #232323;
    width: 70%;
    height: auto;
    min-height: 6vh;
    background: rgb(117,117,117);
    background: linear-gradient(180deg, rgba(117,117,117,1) 0%, rgba(210,208,208,0.5634628851540616) 10%, rgba(196,196,196,0.5298494397759104) 51%, rgba(242,242,242,0.5830707282913166) 88%, rgba(232,232,232,1) 100%);
    border: 5px inset #FFE900;
    display: flex;
    align-content: center !important;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.machine_text input[type=number]{
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    border: 0px;
    width: 20vw;

    height: 100%;
    text-align: center;
    line-height: 5vh;

    padding: .5rem;
    outline:none;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.machine_text,
.machine_text * {
    box-sizing: border-box;
}

.machine_text button {
    outline:none;
    appearance: none;
    -webkit-appearance: none;
    background-color: #eeeeee;
    border: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    cursor: pointer;
    margin: 0;
    position: relative;
    padding:0;
}

.machine_text button:before,
.machine_text button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 2px;
    background-color: #212121;
    transform: translate(-50%, -50%);
}
.machine_text button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}



#auto_button{
    font-family: inherit;
    box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:5px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
    position: relative !important;
    top: -4px;
    left: -4px;
}

.auto_button_active {
	position: relative !important;
	top: 0px !important;
    left: 0px !important;
    background-color:#b4281b !important;
    background:linear-gradient(to bottom, #c62d1f 5%, #f72f21 100%) !important;
    box-shadow: 0px 0px 0px 0px #8a2a21 !important;
}

.machine_body{
    background: rgb(255,235,49);
    background: linear-gradient(180deg, rgba(255,235,49,1) 0%, rgba(255,243,140,1) 1%, rgba(255,232,73,1) 7%, rgba(249,225,66,1) 8%, rgba(235,204,0,1) 13%, rgba(255,235,49,1) 19%, rgba(255,240,110,1) 26%, rgba(249,225,66,1) 41%, rgba(255,232,73,1) 54%, rgba(226,197,0,1) 63%, rgba(255,240,96,1) 78%, rgba(255,235,49,1) 85%, rgba(255,235,49,1) 88%, rgba(212,190,0,1) 100%);
    border: 6px outset #FFE900;
}

#machine_border{
    position: absolute;
    top: calc(50%-40%/2);
    left: 0;
    width: 80%;
    height: 20%;
    border: 19px solid rgba(0,0,0,0.4);
    border-radius: 40px;
    z-index: 0;
}

#handle_ball{
    background: rgb(255,235,49);
    background: linear-gradient(135deg, rgba(255,235,49,1) 0%, rgba(255,246,170,1) 19%, rgba(249,225,66,1) 39%, rgba(255,232,73,1) 69%, rgba(226,197,0,1) 100%);

    height: 5vw;
    width: 5vw;
    border-radius: 50%;
    transform: translateY(2.5vw);
}

#handle_bar{
    height: 50vh;
    width: 2vw;
    background: rgb(255,235,49);
    background: linear-gradient(90deg, rgba(255,235,49,1) 0%, rgba(255,246,170,1) 19%, rgba(249,225,66,1) 39%, rgba(255,232,73,1) 69%, rgba(226,197,0,1) 100%);
    border: 3px outset #FFE900;
}

#handle_base{
    height: 10vh;
    width: 80%;
    align-self: flex-start;
    background: rgb(255,235,49);
    background: linear-gradient(180deg, rgba(255,235,49,1) 0%, rgba(255,246,170,1) 19%, rgba(249,225,66,1) 39%, rgba(255,232,73,1) 69%, rgba(226,197,0,1) 100%);
    border: 3px outset #FFE900;
}

#handle{
    cursor: pointer;
    transform-origin: 50% 100%;
    perspective: 1000px;
}

.handle_animation{ 
    animation: handle 0.5s cubic-bezier(1,-0.01,.74,1.34);
}

@keyframes handle {
    50%{
        transform: rotateX(-60deg);
    }
}

.spin_animation{ 
    animation: spin var(--time) var(--delay) cubic-bezier(1,-0.01,.74,1.34);
    animation-fill-mode: both;
}

@media screen and (max-width: 1100px) {
    #spin-wrapper{
        height:15vh;
        gap:2.5vw;
    }
    
    .slot{
        height: 15vh;
    }
    
    .slot img{
        padding: 1vh 0;
        height: 5vh;
    }

    .slot div{
        transform: translateY(2vh);
    }
    
    .machine_text{
        min-height: 4 vh;
        font-size: 1.5vh;
    }
    
    .machine_text input[type=number]{
        line-height: 0.5vh;
    }

    #handle_ball{
        height: 8vw;
        width: 8vw;
        transform: translateY(4vw);
    }

    #handle_bar{
        height: 25vh;
        width: 2vw;
    }
    
    #handle_base{
        height: 5vh;
    }
    #auto_button{
        font-size: 1vh;
        padding:3px 12px;
        top: -2px;
        left: -2px;

    }
    #machine{
        gap:1vh;
        padding: 2.5vh 1vw;
    }
    
}

@keyframes spin {
    100%{
        transform: translateY(var(--translate_y));
    }
}