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

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700&display=swap');

/* the body affects all elements inside of it */
body {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Poppins", "Open Sans", Arial, Helvetica, sans-serif;
	text-align: center;
	background-image: url("/scratch/assets/scratch-travel-generic/img/background.jpg");
	overflow: hidden;
	background-size: cover;
	background-repeat:no-repeat;
	color: black;
	background-position: center;
}








.language-code-FR {
    font-size: .9em;
}

#title {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   height: 200px;
    margin-top: 20px;
}

.language-code-EN #title {
	background-image: url("/scratch/assets/scratch-travel-generic/img/game-title-en.png");
}
.language-code-FR #title {
	background-image: url("/scratch/assets/scratch-travel-generic/img/game-title-fr.png");
}

#intro-description {
    font-size: 40px;
    
	color:white;
}

#intro-description2 {
  font-size: 40px;
	color:white;
}

#intro-graphic {
    background-image: url("/scratch/assets/scratch-travel-generic/img/scratch-intro-animation.png");
    height: 230px;
    background-repeat: no-repeat;
    background-position: center;
}

#intro-prize-list {
    height: 275px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 20px 0px;
}

#bottom-text {
	font-size: 20px;
	margin: 20px 0px;
	padding-bottom:20px;
	display:none;
}

.language-code-EN  #intro-prize-list {
    background-image: url("/scratch/assets/scratch-travel-generic/img/prizes-en.png");
}

.language-code-FR  #intro-prize-list {
    background-image: url("/scratch/assets/scratch-travel-generic/img/prizes-fr.png");
}

#anchor {
    background-image: url("/scratch/assets/scratch-travel-generic/img/anchor.png");
}
#star {
    background-image: url("/scratch/assets/scratch-travel-generic/img/star.png");
}
#palm {
    background-image: url("/scratch/assets/scratch-travel-generic/img/palm.png");
}
#flip-flops {
    background-image: url("/scratch/assets/scratch-travel-generic/img/flip-flops.png");
}

#plane {
    background-image: url("/scratch/assets/scratch-travel-generic/img/plane.png");
}



#anchor, #star, #palm, #flip-flops, #plane{
    height: 242px;
    width: 276px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -18px;
}

/* contains all game elements */
#game-container {
    width: 1300px;
    height: 1300px;
    padding: 15px 40px;
    position: relative;
    text-align: center;
}

canvas {
    margin: 0 auto;
    padding: 0;
}

/* sound and restart */
#toggle-sound svg,
#restart-button svg {
	fill: #fff;
}

#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;
}

.language-code-FR #tap-to-start-button::after {
    content: 'Pour une expérience optimale, utilisez vos écouteurs.' ;
	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("/scratch/assets/scratch-travel-generic/img/headphones.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 90px;
  animation: pulse 1s infinite 1s;
  margin-bottom: 20px;
}

#intro-container,
#rules-container {
    font-size: 2.5em;
    margin-top: 20px;
}

#board-container {
    font-size: 1em;
    margin-top: 20px;
}

#intro-container,
#board-container,
#rules-container {
	width: 1200px;
	height: 1200px;
}

#prize-container {
	width: 1200px;
	height: 998px;
}

.real-prize .prize-name-tail {
    display: none;
}

.real-prize .prize-name-head {
    display: none;
}

#final-graphic {
    background-image: url("/scratch/assets/scratch-travel-generic/img/final-graphic.png");
    height: 35vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
display:none;
}

body.game-finished.game-over-win {
    background-image: url(/scratch/assets/scratch-travel-generic/img/background-final.jpg);
}


.game-over-win #final-graphic {
  background-image: url("/scratch/assets/scratch-travel-generic/img/final-graphic.png");
  height: 35vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

.game-over-lose #final-graphic {
  background-image: url("/scratch/assets/scratch-travel-generic/img/final-graphic.png");
  height: 15vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

#intro-button,
#play-button,
#answer-button,
#scratch-next-step {
    cursor: pointer;
    padding: 10px;
    background-color: #d0a064;
    color: white;
	text-transform: uppercase;
    width: 500px;
    margin: 0 auto;
	box-shadow: 5px 5px 10px black;
	animation-name: pulsingGrowing;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
	animation-iteration-count: infinite;
}

#scratch-next-step {
    font-size: 2em;
    width: 200px;
    position: relative;
    top: -40px;
}

#play-button {
	animation-delay: 15s;
}

.not-clickable {
    animation: none !important;
}

#scratch-next-step {
	font-size: 2em;
	width: 200px;
}

#answer-button {
    display: inline-block;
    font-size: 2em;
    width: 200px;
}

#scratch-message {
  font-size: 50px;
  margin-bottom: 49px;
  font-weight: bold;
  color: white;
  margin-top: -55px;
}

#scratch-message::after {
  content: "";
  height: 140px;
  width: 140px;
  background-color: white;
  display: inline-block;
  margin-bottom: -50px;
  margin-left: 13px;
  background-image: url("/scratch/assets/scratch-travel-generic/img/scratch-intro-animation.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 100%;
  box-shadow: 0px 0px 10px black;
  padding: 10px;
}

/* general displaying */
.hide {
	display: none;
}
.show {
	display: block;
	animation-name: becomeVisible;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* click watchers */
/* for board elements that are clicked */
.clicked {
	pointer-events: none;
}
/* for when the answer is clicked or waiting to be clicked (idle) */
#answer-container {
	display: inline-block;
	width: 80%;
    margin: 0 10%;
}
.answer-clicked .styling-obj {
	background-image: url("img/Radio-Pressed.png");
}
.answer-idle .styling-obj {
	background-image: url("img/Radio.png")
}
.answer-desc-style {
	pointer-events: none;
}


.show-explanation #answer-container {    
	pointer-events: none;
}
.show-explanation .answer-idle {    
	animation-name: wrongAnswerDisapear;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}



.correct.answer-clicked .styling-obj {
    background-image: url("/animation-learning/assets/puzzle/img/Correct-Answer-Icon.png");
    background-size: contain;
}
.incorrect.answer-clicked .styling-obj {
    background-image: url("/animation-learning/assets/puzzle/img/Inorrect-Answer-Icon.png");
    background-size: contain;
}

/* answer description classes */
#answer-description-title,
#answer-description {
	display: block;
    float: left;
    width: 80%;
    height: 10%;
    margin: auto 5% 1% 10%;
    color: white;
	text-align: center;
}
#answer-description-title {
	margin-top: 2%;
	font-size: 2.5em;
}
#answer-description {
	font-size: 1.8em;
}

#description-container {
	animation-name: becomeVisible;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	opacity: 0;
}

/* the prize container */
.game-finished #board-container {
	display: none !important;
}

.game-finished #prize-container, .game-finished #how-to-get-prize  {
	display: block;
}

#prize-container {
	
    font-size: 2em;
    padding: 0px 10px 46px 10px;
    pointer-events: none;
    z-index: 10;
	
}
.prize-header, .prize-name {
    font-size: 85px;
    font-weight: bold;
	color:white;
	text-transform: none;
	margin-top:82px;
	text-shadow: 0 0 0px #fff, 0 0 1px white, 0 0 50px white, 0 0 50px #d0a064, 0 0 10px #d0a064, 0 0 50px #d0a064, 0 0 10px #d0a064, 0 0 10px #d0a064;

}

.prize-name {
	font-size: 85px;
	margin-top: 0px !important;
}

.prize-points {
    font-weight: bold;
    font-size: 5.2em;
    margin: 0;
    padding: 0;
	line-height: 1;	
}
.prize-name-points {
    font-weight: bold;
	font-size: 1.8em;	
}

.prize-points-description {
    display:none;
    text-align: center;
    margin: auto;
	font-size: 45px;
	color:white;
	text-transform:none;
}



.language-code-FR div[id^="prize-id"] {
    font-size: 3vh;
}



/* ------------------------------------------------ */









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

/* answer containers */
.answer-block {
    text-align: left;
    display: block;
    float: left;
    width: 100%;
    margin: 0% 0% 2% 0;
    color: black;
    background-color: #f7adc6;
    padding: 1%;
    border: 4px solid #ed3372;
    border-radius: 15px;
    cursor: pointer;
}

.answer-block.answer-clicked {
    box-shadow: 10px 10px 10px #b2617c;
}

.answer-block:hover .styling-obj{
	animation: hoverState 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.answer-block.hide {
	display: none;
}

/* answer div inside the answer container */
.answer {
	display: inline-block;
    vertical-align: top;
    cursor: pointer;
    font-size: 33px;
	margin: 0% auto auto 2%;
	width: 80%;
    font-weight: normal;
}

/* extra styling object in the answer container */
.styling-obj {
	display: inline-block;
	width: 40px;
	height: 40px;

	vertical-align: top;

	position: relative;

	border-width: 1px;
	border-radius: 50%;

	z-index: 7;

	background-image: url("/Radio.png");
	margin: 1% auto auto 2%;
}

/* ------------------------------------------------------------ */


/* --------------------------------------- specific item info ------------------------------ */
/* question container */
#question-block {
	display: block;
	float: left;
	margin: 5% 5% auto 10%;
	font-size: 2.5em;
	color: #ff9933;
}

#question-text {
	display: block;
	float: left;
	width: 80%;
	margin: auto 5% 1% 10%;
	font-size: 2.5em;
	color: black;
	font-weight: bold;
	text-align: center;
}

#question-container {
	position: relative;

	width: 100%;
	height: 100%;

	z-index: 6;

	top: 0px;
	left: 0px;
}

#question-header {
    display: none;
}

/* click watchers */

/* for board elements that are clicked */

.clicked {
	pointer-events: none;
}

/* for when the answer is clicked or waiting to be clicked (idle) */
#answer-container {
	display: inline-block;
	width: 80%;
    margin: 0 10%;
}
.answer-clicked .styling-obj {
	background-image: url("img/Radio-Pressed.png");
}
.answer-idle .styling-obj {
	background-image: url("img/Radio.png")
}
.answer-desc-style {
	pointer-events: none;
}


.show-explanation #answer-container {    
	pointer-events: none;
}
.show-explanation .answer-idle {    
	animation-name: wrongAnswerDisapear;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}



.correct.answer-clicked .styling-obj {
    background-image: url("/animation-learning/assets/puzzle/img/Correct-Answer-Icon.png");
    background-size: contain;
}
.incorrect.answer-clicked .styling-obj {
    background-image: url("/animation-learning/assets/puzzle/img/Inorrect-Answer-Icon.png");
    background-size: contain;
}

#answer-bar-1 {
	background-color: #ed3372;
}
#answer-bar-2 {
	background-color: #ed3372;
}
#answer-bar-3 {
	background-color: #ed3372;
}
#answer-bar-4 {
	background-color: #ed3372;
}

/* answer description classes */
#answer-description-title,
#answer-description {
	display: block;
    float: left;
    width: 80%;
    height: 10%;
    margin: auto 5% 1% 10%;
    color: white;
	text-align: center;
}
#answer-description-title {
	margin-top: 2%;
	font-size: 2.5em;
}
#answer-description {
	font-size: 1.8em;
}

#description-container {
	animation-name: becomeVisible;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	opacity: 0;
}
/* for the submit button, controls when the button is clickable */
.clickable {
	opacity: 1;

	pointer-events: auto;

	cursor: pointer;
}
.not-clickable {
	opacity: 0.2;

	pointer-events: none;
}

/* class attached to the board elements that will (when clicked) display the question box*/
.call-question,
.call-animation {
	cursor: pointer;

	position: absolute;

	z-index: 5;
}

#question-container {
	width: 1200px;
	height: 1200px;
}

/**
 * Scratching styles
 */
#scratching-container {
    display: none;
}

.scratch-piece {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 276px;
    user-select: none;
    margin: 2px 41px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
	cursor: url("/scratch/assets/scratch-travel-generic/img/coin.png"), auto;
}
 /* Original circle with white border style 
.scratch-piece {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 300px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    -o-user-select: none;
    user-select: none;
    border: 2px solid #f5f5f5;
    box-shadow: inset 0 0 10px #000000;
    margin: 19px 40px;
    overflow: hidden;
    border-radius: 10em;
    background-color: #d70266;
}

*/

#scratch-piece-container {
    border-radius: 86px;
    margin: 10px 0px;
	animation-name: boardPulsing;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
	animation-iteration-count: infinite;
	background: linear-gradient(to right, rgba(61, 107, 106, 0.5), rgba(118, 158, 149, 0.5));
	padding-top: 30px;
}

.scratching-canvas {
	position: absolute;
    top: 0;
    left: 0;
}

.scratching-value {
    padding: 25px;
    display: flex;
    justify-content: center;
}

.scratching-prize {
    text-align: center;
    font-size: 2em;
}

#scratch-message {
    display: none;
}

.displaying-scratch-board #scratching-container {
    display: block;
}

.displaying-scratch-board #scratch-message {
    display: block;
}

.displaying-scratch-board #question-container {
	display: none !important;
}

.answer-progress-bar {
	/* border: 1px solid #ed3372; */
    border-radius: 10px;
}

/* -------- Extend the delay for the end promotion so people can read the text ------ */

.game-finished #demo-promotion {
        animation-delay: 12s !important;
}

@keyframes boardPulsing{
	0% {
    	box-shadow: 0px 0px 10px #d0a064;
	}
	50% {
		box-shadow: 0px 0px 30px #d0a064;
	}
	100% {
		box-shadow: 0px 0px 10px #d0a064;
	}

}

@keyframes pulsingGrowing{
	0% {
    	box-shadow: 0px 0px 10px #d0a064;
		transform: scale(1)
	}
	50% {
		box-shadow: 0px 0px 30px #d0a064;
		transform: scale(1.2)
	}
	100% {
		box-shadow: 0px 0px 10px #d0a064;
	}

}

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

}