/* ------------------------------------------------------------ container setup ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* the body affects all elements inside of it */
body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-size:cover;
	background-repeat:no-repeat;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	overflow: hidden;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/Background.jpg");
}


body.game-finished.game-over-win.prize-code-500 {
    background-image: url("/slot-machine/assets/Jackpot-Demo/img/Background-final.jpg");
}

/* Custom pre-loader optional 
#game-loader-title {
    background-image: url("/slot-machine/assets/Jackpot-Demo/img/Preloader.svg");
}
*/

/* contains all game elements */
#game-container {
	width: 1200px;
	height: 785px;
	position: relative;
}

#main-page {
	max-height: 785px;
}


/* the title of the game */
#title {
    width: 614px;
    height: 290px;
    margin: auto auto auto auto;
    font-size: 5em;
    font-weight: bold;
    background-position: center;
    background-image: url("/slot-machine/assets/Jackpot-Demo/img/title.png");
    background-size: contain;
	background-repeat: no-repeat;
}


.language-code-FR #title {
    background-image: url("/slot-machine/assets/Jackpot-Demo/img/title-fr.png");
}

#toggle-sound svg,
#restart-button svg {
    fill: white;
}

#tap-to-start-button {
    font-size: 33px;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	margin: 0 auto;
    width: 355px;
    border: none;
    padding: 10px 20px 20px 20px;
    line-height: 1.5;
    cursor: pointer;


}

.language-code-EN #tap-to-start-button::after {
    content: 'For the best experience, use your headphones.' ;
	text-transform: 	uppercase;
	font-size: 21px;
	    line-height: 1.5;
}

#tap-to-start-button::before {
  content: " ";
  display: block;
  width: 100%;
  height: 6vw;
  background-image: url("/slot-machine/assets/Jackpot-Demo/img/headphones.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 90px;
  animation: pulse 1s infinite 1s;
  margin-bottom: 20px;
}


/* the intro container */
#intro-container {
    width: max-content;
    margin: 0px auto;
    padding: 50px;
    border-radius: 31px;
	background-color: rgb(25 19 95 / .6);
    box-shadow: 0px 8px 40px 2px #a81aac;
    border: solid 2px #a81aac;
}
#intro-description {
    padding: 5px 0px 0px 0px;
    margin: 0px 20px 0px 20px;
    font-size: 2.5em;
    border-radius: 20px;
    line-height: 1.1em;
	color: white;
}

.language-code-FR #intro-description {
    padding: 5px 0px 0px 0px;
    margin: 0px 20px 0px 20px;
    font-size: 2em;
    border-radius: 20px;
    line-height: 1.1em;
	color: #003062;
}
#intro-description b {
    display: inherit;
   color: #003062;
    font-size: 70px;
    line-height: 1.1em;
}

.language-code-FR #intro-description b {
    display: inherit;
   color: #003062;
    font-size: 55px;
    line-height: 1.1em;
}

bold {
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 1.2em;
}

#intro-button {
    font-size: 22px;
    padding: 0.3em 1em;
    width: max-content;
    cursor: pointer;
    border-radius: 10px;
    margin: auto;
     background: linear-gradient(90deg, rgba(255, 172, 78, 1) 0%, rgba(255, 250, 78, 1) 100%);
    color: #120a38;
    z-index: -1;
	text-transform: uppercase;
    margin-bottom: .5em;
    margin-top: .3em;
	
}

.language-code-FR #intro-button {
    font-size: 22px;
 
	
}
/* the board container */
#board-container {
	width: 1100px;
	height: 400px;
	margin: 20px 50px auto 20px;
	position: relative;
	justify-content: center;
	align-items: center;
	animation-name: showGame;
	animation-duration: 1s;
	animation-timing-function: ease-in;
}

#click-start {
    background-image: url("/slot-machine/assets/Jackpot-Demo/img/Click-Here.png");
    height: 137px;
    width: 58px;
    text-align: center;
    left: 86%;
    position: relative;
    z-index: 100;
    top: -117px;
    background-repeat: no-repeat;
	animation: handleHighlight 3s ease-in 1s infinite reverse both
}

.step-2 #click-start, .step-3 #click-start, .step-4 #click-start, .step-5 #click-start {
    display: none;
}

/* the prize container */
#prize-container {
    border-radius: 31px;
	box-shadow: none;
	display: none;
	z-index: 6;
	
}

#win-highlight-container {
    border-radius: 31px;
	display: none;
	z-index: 7;
	padding: 26px;
	background-color: rgb(0,0,0,0.4);
	position: absolute;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/final-win.png");
	background-size: cover;
	background-position: center;
}

.prize-name {
    color: white;
    line-height: 1em;
    font-weight: bold;
    font-size: 52px;
}

.prize-name-value, .prize-name-tail {
    color: white;
    
    font-size: 80px;
    line-height: 1.1em;
}

.prize-name-head {
    display: block;
}

.prize-header {
    font-size: 5em;
    color: #003062;
    margin: 0;
}

.prize-points {
    display: inline-block;
    font-weight: bold;
    font-size: 3em;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #003062;
}
.prize-name-points {
    display: inline-block;
    font-weight: bold;
    font-size: 3em;
    color: #003062;
    margin: auto auto auto 15px;
}
.prize-points-description {
    font-size: 1.6em;
    margin: 12px;
    color: #003062;
}

.game-over-lose .prize-name {
	color: #003062;
	line-height: 1em;
	font-weight: bold;
	font-size: 50px;
}

.game-over-lose .prize-points-description {
    font-size: 35px;
    color: #003062;
    margin-bottom: 25px;
}

/* reveals the prize container at the end */
.game-finished #prize-container {
	display: block !important;
	  background-color: rgb(25 19 95 / .6);
    box-shadow: 0px 8px 40px 2px #a81aac;
    border: solid 2px #a81aac;
	margin: 0px auto;
    width: max-content;
    padding: 50px;
}

.game-over-win.prize #win-highlight-container {
	display: block !important;
	animation: winHighlight;
	animation-delay: 2s;
	animation-duration: 6s;
	animation-fill-mode: both;
display:none;
}

.game-over-win.prize #main-page {
	animation-delay: 6s;
}

.game-finished #main-page {
	animation-name: disappear;
	animation-duration: 2s;
	animation-fill-mode: both;
}

/* Animate prize container */
.game-over-win.prize #prize-container {
	animation: showLastScreen 2s both 8s, bounceIn;
}

.game-over-lose.prize #prize-container {
	animation-name: showLastScreen;
	animation-delay: 2s;
	animation-duration: 2S;
	animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
	animation-fill-mode: both;
}


/* on screen instructions */
#instruction-container {
	display:none;
}

/* ------------------------------------------------------------ end of container setup ------------------------------------------------------------ */









/* ------------------------------------------------------------ shared item info ------------------------------------------------------------ */


#slot-spinner-1 .prizes {
	transition-delay: 0.5s;
}
#slot-spinner-2 .prizes {
	transition-delay: 1s;
}
.spinner {
	overflow: hidden;
}

/* prizes */
.prizes {
	position: absolute;
	width: 110px;
	height: 188px;
	-webkit-backface-visibility: hidden;
    visibility:visible;
	backface-visibility: hidden;
	transition: cubic-bezier(0.9, -0.145, 0.005, 1.01) 9s;
}

._500 {
	top: -26px;
	left: 23px;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/icon-1.png");
	background-repeat: no-repeat;
	background-position: center;

}
._1000 {
	top: -26px;
	left: 23px;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/icon-2.png");
	background-repeat: no-repeat;
	background-position: center;

}
._5000 {
	top: -26px;
	left: 23px;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/icon-3.png");
	background-repeat: no-repeat;
	background-position: center;

}

._10000 {
	top: -26px;
	left: 23px;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/icon-4.png");
	background-repeat: no-repeat;
	background-position: center;

}


._spin_again {
	top: 0px;
	left: 23px;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/icon-spin-again.png");
	background-repeat: no-repeat;
	background-position: center;
}

.language-code-FR ._spin_again {
	
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/icon-spin-again-fr.png");
	
}


/* organization and formatting */
.column-0 {
	position: absolute;
	width: 135px;
	height: 170px;
	top: 40px;
	left: 323px;
}
.column-1 {
	position: absolute;
	width: 135px;
	height: 170px;
	top: 40px;
	left: 502px;
}
.column-2 {
	position: absolute;
	width: 135px;
	height: 170px;
	top: 40px;
	left: 683px;
}
/* ------------------------------------------------------------ end of shared item info ------------------------------------------------------------ */









/* ------------------------------------------------------------ specific item info ------------------------------------------------------------ */

/* static elements */
#slotMachine-frame {
	position: absolute;
	top: -17px;
	left: 270px;
	width: 726px;
	height: 472px;
	z-index: 2;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/slot-machine.png");
	background-repeat: no-repeat;
}

.language-code-FR #slotMachine-frame {
	position: absolute;
	top: 16px;
	left: 270px;
	width: 726px;
	height: 472px;
	z-index: 2;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/slot-machine-fr.png");
	background-repeat: no-repeat;
}
#slot-lever {
	position: absolute;
	top: -77px;
    left: 869px;
	width: 92px;
	height: 274px;
	z-index: 4;
	cursor: pointer;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/crank.png");
}
#slot-lever-animated {
	position: absolute;
	top: -77px;
	left: 869px;
	width: 180px;
	height: 274px;
	z-index: 3;
	display: block;
	background-image: url("/slot-machine/assets/Jackpot-Demo/img/Crank-Animated.png");
	background-repeat: no-repeat;
}
#slot-lever-animated.hide{
	display: none;
}

/* masking elements */
#masking-div-0 {
	z-index: 5;
}
#masking-div-1 {
	z-index: 5;
}
#masking-div-2 {
	z-index: 5;
}
/* 
#clipping{
	width: 100px;
	height: 100px;
	position: absolute;
} */
.maskingShape {
	/* clip-path: url(#clipping); */
	clip-path: inset(0px 0px 0px 0px);
}



/* spinning elements */
#slot-spinner-0 {
	transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	width: 188px;
	height: 240px;
	
	z-index: 6;

	/* needed for the rotation in javascript */
	/* sets the starting rotation */
	transform: rotateX(0deg);
	/* sets the time for the transition */
	transition: all;

	/* sets the animation frame timing function */
	transition: cubic-bezier(0.9, -0.145, 0.005, 1.01) 9s;

}
#slot-spinner-1 {
	transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	width: 188px;
	height: 240px;

	z-index: 6;

	/* needed for the rotation in javascript */
	/* sets the starting rotation */
	transform: rotateX(0deg);
	/* sets the time for the transition */
	transition: all 1s;
	transition-delay: 0.5s;

	/* sets the animation frame timing function */
	transition: cubic-bezier(0.9, -0.155, 0.005, 1.01) 10s;

}
#slot-spinner-2 {
	transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	width: 188px;
	height: 240px;

	z-index: 6;

	/* needed for the rotation in javascript */
	/* sets the starting rotation */
	transform: rotateX(0deg);
	/* sets the time for the transition */
	transition: all 1s;
	transition-delay: 1s;

	/* sets the animation frame timing function */
	transition: cubic-bezier(0.9, -0.16, 0.001, 1.02) 12s;

}


/* Adding an animation to when you get 3 matching icons */
.step-2 #masking-div-0, .step-2 #masking-div-1, .step-2 #masking-div-2 {
animation-name: pulsingGrowing1;
	animation-delay: 10s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
    animation-iteration-count: 3;
}

.step-3 #masking-div-0, .step-3 #masking-div-1, .step-3 #masking-div-2 {
animation-name: pulsingGrowing2;
	animation-delay: 10s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
    animation-iteration-count: 3;
}

.step-4 #masking-div-0, .step-4 #masking-div-1, .step-4 #masking-div-2 {
animation-name: pulsingGrowing3;
	animation-delay: 10s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
    animation-iteration-count: 3;
}




/* ------------------------------------------------------------ animations ------------------------------------------------------------ */

/* ------------- event listeners ------------- */
.won {
	animation-name: flashForward;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-duration: 1s;

	border-radius: 50%;
}
.active{
	animation-name: spinSlot;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
.ieSpin {
	display: block;

	animation-name: ieSpinning;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-duration: 0.2s;
}

/* if an item is clicked */
.clicked {
	animation-name: clickedItem;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	
	pointer-events: none;
}

.buttonClicked {
	animation-name: buttonEffect;
	animation-fill-mode: both;
	animation-duration: 0.5s;
	animation-timing-function: linear;
}


/* .stopperEffect {
	animation-name: stopperEffect;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.57, -0.95, 0.445, 1.0);
} */

/* keyframes */

/* move screen elements */
/* shows the game */
@keyframes ieSpinning {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}	
}

@keyframes flashForward {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}
@keyframes spinSlot {
	from {
		top: 100px;
		left: inherit;
	}
	to {
		top: 0px;
		left: inherit;
	}
}

@keyframes spinWheel {
	from{
		transform: rotateX(0deg);
	}
	to {
		transform: rotateX(5400deg);
	}
}

@keyframes showGame {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes disappear {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		max-height: 0;
	}
}


/* basic moving the items on screen */
@keyframes clickedItem {
	0% {
		transform: scale(1, 1);
	  }
	50% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes buttonEffect {
	0% {
		opacity: 0;
		transform: scale(1, 1);
	}
	50% {
		opacity: 0.2;
		transform: scale(0.95, 0.95);
	}
	100% {
		opacity: 0;
		transform: scale(1, 1);
	}
}

@keyframes handleHighlight{
	0% {
		opacity: 0;
		transform: scale(0.9, 0.9);
	}
	50% {
		opacity: 1;
		transform: scale(1.2, 1.2);
	}
	100% {
		opacity: 0;
		transform: scale(0.9, 0.9);
	}
}


/* shows the last screen */
@keyframes showLastScreen{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 30px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 30px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

@keyframes pulsingGrowing1{
	0% {
    	
		transform: scale(1)
	}
	50% {
		
		transform: scale(1.2)
	}
	100% {
		
	}
}

@keyframes pulsingGrowing2{
	0% {
    	
		transform: scale(1)
	}
	50% {
		
		transform: scale(1.2)
	}
	100% {
		
	}
}

@keyframes pulsingGrowing3{
	0% {
    	
		transform: scale(1)
	}
	50% {
		
		transform: scale(1.2)
	}
	100% {
		
	}
}

@keyframes winHighlight {
  0% {
	  opacity:0;
  }
  20% {
	  opacity:1;
  }
  80% {
	  opacity:1;
  }
  100% {
	  opacity: 0;
  }
}

/* ------------------------------------------------------------ end of animations ------------------------------------------------------------ */