@import url("../../../shared_assets/animate.css");
/* ---------------------------- container setup ---------------------------- */

/* 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: "Open Sans", Arial, Helvetica, sans-serif;
	text-align: center;
	overflow: hidden;
	background-image: url("/animation-learning/assets/cruise-puzzle/img/game-background.jpg");
}

body.game-finished.game-over-win {
	background-image: url("/animation-learning/assets/cruise-puzzle/img/game-background-final.jpg")
}

/* contains all game elements */
#game-container {
	width: 1100px;
	height: 800px;
	position: relative;
}
#game-container.awaiting_return_value {
	cursor: progress;
}

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

/* the title of the game */
#title {
    width: 755px;
    height: 150px;
    margin: auto auto auto auto;
    position: relative;
    background-image: url("/animation-learning/assets/cruise-puzzle/img/title.png");
    margin-top: 5px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

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

/* the intro container */
#intro-container {
	width: 1000px;
	height: 400px;
	margin: 20px auto auto auto;

	position: relative;
}
#intro-description {
	font-size: 1.8em;
	color: #214564;
	
}
#intro-description b {
	font-size: 1.1em;
	color: #214564;
}

#rules-header {
    font-size: 2.2em;
    color: white;
    font-weight: bold;
    margin-top: 1em;
	display: none;
}

#intro-graphic {
    background-image: url("/animation-learning/assets/cruise-puzzle/img/Intro-Image.png");
    height: 133px;
    width: 248px;
    text-align: center;
    left: 38%;
    position: relative;
	display: none;
}

#click-start {
    background-image: url("/animation-learning/assets/cruise-puzzle/img/Click-Here.png");
    height: 222px;
    width: 241px;
    text-align: center;
    left: 35%;
    position: relative;
    z-index: 100;
    top: 165px;
	background-repeat: no-repeat;
}

.step-2 #click-start {
	display: none;
}


#rules-instructions {
    color: white;
    font-size: 1.8em;
	display: none;
}

#intro-button, #answer-button, #answer-button, #continue-button {
    font-size: 2em;
    margin: 1.8em auto 3em auto;
    width: 30%;
    cursor: pointer;
    color: white;
    background-color: #e89113;
    padding: 20px;
	display: inline-block;
	border-radius: 0px;
	text-transform: uppercase;
}

#intro-button {
    margin: 35px auto 3em auto;
}

#answer-button {
	width: 30%;
	margin: .8em auto 3em auto;
}



/* the board container */
#board-container {
	width: 899px;
	height: 459px;
	margin: 20px auto auto auto;
	position: relative;
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Puzzle-Board.png");
	/* animation-name: showGame;
	animation-duration: 0.2s; */
}


/* the prize container */
#prize-container {
    font-size: 2em;
    padding: 30px 10px 46px 10px;
    pointer-events: none;
    z-index: 10;
}
.prize-header, .prize-name {
    font-size: 2.4em;
    color: #214564;
    font-weight: bold;
}

.prize-name {
	font-size: 2em;
	color: #214564;
}

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

.prize-points-description {
    color: #214564;
    width: 60%;
    text-align: center;
    margin: auto;
	font-size: 1em;
}


/* the question container */
#question-container {
	position: relative;

	width: 100%;
	height: 100%;

	z-index: 6;

	top: 0px;
	left: 0px;
}

#question-header {
    display: none;
}



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









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

/* container for board elements */
.container{
	position: absolute;
	display: inline-block;

	z-index: 0;
}

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

.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: 1.5em;
	margin: 1% auto auto 4%;
	color:white;
}

/* 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: 30px;
	color: #ff9933;
}
#question-text {
	display: block;
	float: left;
	width: 80%;
	margin: auto 5% 1% 10%;
	font-size: 2em;
	color: white;
	font-weight: bold;
	margin-top: 56px;
	text-align: center;
}
/* the answer submit button */


/* return box */
#post-details-container {
	float: left;

	width: 60%;
	height: 50%;
	
	margin: auto 5% auto 10%;

	border-width: 5px;
	border-style: dashed;
	border-color: red;
}
#post-details-container.display_pdc {
	display: block;
}
#post-details-container.hide_pdc {
	display: none;
}

#chosen-answer-textBox {
	float: left;

	width: 100%;
	height: 30%;

	font-size: 2em;
	color: white;

	border-width: 2px;
	border-style: dashed;
	border-color: rgb(255, 123, 222);
}
#chosen-answer-textBox:before {
	content: "Your answer: ";
}

#correct-answer-textBox {
	float: left;

	width: 100%;
	height: 30%;

	font-size: 2em;
	color: white;

	border-width: 2px;
	border-style: dashed;
	border-color: rgb(195, 219, 89);
}
#correct-answer-textBox:before {
	content: "The correct answer: ";
}

#details-textBox {
	float: left;

	width: 100%;
	height: 30%;

	font-size: 2em;
	color: white;

	border-width: 2px;
	border-style: dashed;
	border-color: blue;
}
#details-textBox:before {
	content: "Details: ";
}

#close-bttn {
	float: right;

	width: 50px;
	height: 50px;

	background-color: white;
}

/* board container */
/* --------- #1 --------- */
#piece-container-1 {
	top: 0px;
	left: 0px;
}
.format_1 {
	width: 223px;
	height: 202px;
}

#piece-1.clicked {	
	transition: top 1s, left 1s;
}
.pos_1 {
	top: 498px;
	left: 124px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece1.png");
}

#piece-1.correct {
	top: 0px;
	left: 0px;
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece1.png");
}
#piece-1.incorrect {
	top: 0px;
	left: 0px;
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece1-Incorrect.png");
}


/* --------- #2 --------- */
#piece-container-2 {
	top: 150px;
	left: 0px;
}
.format_2 {
	width: 273px;
	height: 161px;
}

#piece-2.clicked {
	transition: top 1s, left 1s;
}
.pos_2 {
	top: 390px;
	left: 620px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece2.png");
}

#piece-2.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece2.png");
}
#piece-2.incorrect {
	top: 0px;
	left: 0px;	
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece2-Incorrect.png");
}


/* --------- #3  ---------*/
#piece-container-3 {
	top: 257px;
	left: 0px;
}
.format_3 {
	width: 223px;
	height: 202px;
}

#piece-3.clicked {
	transition: top 1s, left 1s;
}
.pos_3{
	top: 175px;
	left: 150px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece3.png");
}

#piece-3.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece3.png");
}
#piece-3.incorrect {
	top: 0px;
	left: 0px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece3-Incorrect.png");
}


/* --------- #4  ---------*/
#piece-container-4 {
	top: 0px;
	left: 172px;
}
.format_4 {
	width: 311px;
	height: 153px;
}

#piece-4.clicked {
	transition: top 1s, left 1s;
}
.pos_4 {
	top: 589px;
	left: -50px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece4.png");	
}

#piece-4.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece4.png");	
}
#piece-4.incorrect {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece4-Incorrect.png");
}


/* --------- #5  ---------*/
#piece-container-5 {
	top: 100px;
	left: 220px;
}
.format_5 {
	width: 219px;
	height: 260px;
}

#piece-5.clicked {
	transition: top 1s, left 1s;
}
.pos_5 {
	top: 375px;
	left: 415px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece5.png");		
}

#piece-5.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece5.png");		
}
#piece-5.incorrect {
	top: 0px;
	left: 0px;	
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece5-Incorrect.png");
}


/* --------- #6  ---------*/
#piece-container-6 {
	top: 307px;
	left: 173px;
}
.format_6 {
	width: 313px;
	height: 152px;
}

#piece-6.clicked {
	transition: top 1s, left 1s;
}
.pos_6 {
	top: 221px;
	left: -160px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece6.png");	
}

#piece-6.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece6.png");	
}
#piece-6.incorrect {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece6-Incorrect.png");
}


/* --------- #7  ---------*/
#piece-container-7 {
	top: 0px;
	left: 433px;
}
.format_7 {
	width: 237px;
	height: 203px;
}

#piece-7.clicked {
	transition: top 1s, left 1s;
}
.pos_7 {
	top: 492px;
	left: -200px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece7.png");
}

#piece-7.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece7.png");
}
#piece-7.incorrect {
	top: 0px;
	left: 0px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece7-Incorrect.png");
}


/* --------- #8  ---------*/
#piece-container-8 {
	top: 151px;
	left: 389px;
}
.format_8 {
	width: 330px;
	height: 160px;
}

#piece-8.clicked {
	transition: top 1s, left 1s;
}
.pos_8 {
	top: 400px;
	left: 10px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece8.png");
}

#piece-8.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece8.png");	
}
#piece-8.incorrect {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece8-Incorrect.png");
}


/* --------- #9  ---------*/
#piece-container-9 {
	top: 260px;
	left: 435px;
}
.format_9 {
	width: 235px;
	height: 200px;
}

#piece-9.clicked {
	transition: top 1s, left 1s;
}
.pos_9 {
	top: 300px;
	left: -367px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece9.png");	
}

#piece-9.correct {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece9.png");	
}
#piece-9.incorrect {
	top: 0px;
	left: 0px;	
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece9-Incorrect.png");
}


/* --------- #10 --------- */
#piece-container-10 {
	top: 308px;
	left: 620px;
}
.format_10 {
	width: 279px;
	height: 151px;
}

#piece-10.clicked {
	transition: top 1s, left 1s;
}
.pos_10 {
	top: 202px;
	left: -615px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece10.png");	
}

#piece-10.correct {
	top: 0px;
	left: 0px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece10.png");	
}
#piece-10.incorrect {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece10-Incorrect.png");
}


/* --------- #11 --------- */
#piece-container-11 {
	top: 100px;
	left: 670px;
}
.format_11 {
	width: 230px;
	height: 259px;
}

#piece-11.clicked {
	transition: top 1s, left 1s;
}
.pos_11 {
	top: 380px;
	left: -309px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece11.png");		
}

#piece-11.correct {
	top: 0px;
	left: 0px;	

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece11.png");		
}
#piece-11.incorrect {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece11-Incorrect.png");
}


/* --------- #12 --------- */
#piece-container-12 {
	top: 0px;
	left: 621px;
}
.format_12 {
	width: 278px;
	height: 150px;
}

#piece-12.clicked {
	transition: top 1s, left 1s;
}
.pos_12 {
	top: 556px;
	left: -70px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece12.png");	
}

#piece-12.correct {	
	top: 0px;
	left: 0px;

	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece12.png");	
}
#piece-12.incorrect {
	top: 0px;
	left: 0px;
	
	background-image: url("/animation-learning/assets/cruise-puzzle/img/Piece12-Incorrect.png ");
}

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









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

/* ------------- event listeners ------------- */
/* 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/cruise-puzzle/img/Correct-Answer-Icon.png");
    background-size: contain;
}
.incorrect.answer-clicked .styling-obj {
    background-image: url("/animation-learning/assets/cruise-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;
}
/* 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;
}

/* move screen elements */
/* shows the game */
@keyframes showGame {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

@keyframes disapear {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		max-height: 0;
		padding: 0;
		margin: 0;
	}
}

@keyframes wrongAnswerDisapear {
	0% {
		opacity: 0;
		max-height: 50px;
		padding: 1%;
		margin: 0% 0% 2% 0;
	}
	100% {
		opacity: 0;
		max-height: 0;
		padding: 0;
		margin: 0;
		border: 0;
	}
}

@keyframes hoverState {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.9);
	}
}

/* final animations onto prize screen */

.game-finished #prize-container {
    display: block !important;
    animation-name: becomeVisible;
	animation-delay: 3s;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}


.game-finished.prize #main-page {
	animation-name: disapear;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-fill-mode: both;
}

.game-over-lose .prize-name {
	font-size: 2.4em;
    color: #f93;
    font-weight: bold;
}


/* animations */

.step1 #piece-1, .step1 #piece-4, .step1 #piece-7, .step1 #piece-10 {
	
}

.step1 #piece-2, .step1 #piece-5, .step1 #piece-8, .step1 #piece-11 {
	
}

.step1 #piece-3, .step1 #piece-6, .step1 #piece-9, .step1 #piece-12 {
	
}

div#game-container[class*="step-2"] #question-pieces div[id*="piece-container"] {
	animation: none;
}