html {
	box-sizing: border-box;
  }
  *, *:before, *:after {
	box-sizing: inherit;
  }
img {
	max-width:100%;
}


body {
	--gray:#323a45;
	--blue:#00afd1;
	--turq:#1fbba6;
	--orange:#f27935;
	--red:#d64541;
	font-family:arial,helvetica,sans-serif;
	margin:0;
	padding:0;
} 

.message_modal {
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    width: 100vw;
    height: 100vh;
	position: absolute;
	transition:all 0.3s ease;
	transform:scale(0);
}
.message_modal.active {
	transform:scale(1);
}
.message_modal_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.message_modal_flex {
    display: flex;
    /* height: 30vh; */
	
	width:70vh;
    background: rgba(255,255,255,0.9);
    padding: 2em;
    border-radius: 2em;
}
.message_modal_flex p {
    color: white;
    background: #2f3b46;
    border-radius: 1em;
	padding: 1em 2em;
	width:80%;
}

.message_modal_image_wrap {
    width: 20%;
    display: flex;
    margin-right: -1vh;
    z-index: 9999;
    position: relative;
    text-align: right;
    align-items: center;
}
.message_modal_image {
    border: 1vh solid #2f3b46;
    border-radius: 100%;
    overflow: hidden;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 10vh;
	height: 10vh;
	background-image: url(/templates/match/images/icons/gold_washer.png);
    background-size: 140%;
}

#trigger_loss {
	z-index:99999;
	top: 5em;
    position: relative;
}
#trigger_won {
	z-index:99999;
	top:5em;
	left:5em;
	position:relative;
}
.trigger {
	display:none;
}

.maytaghomedefendersplash {
	background-image:url(../images/homedefender-splash.jpg);
	background-size:cover;
	z-index:999;
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	background-position:center;
}
.maytaghomedefendersplash:hover, .splash:hover {
	cursor:pointer;
}

#lose_animation_container {
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	background:url(../images/water_bg.png);
	background-size:cover;
	background-repeat:no-repeat;
	height:0;
	width:0;
	opacity:0;
	
	transition:opacity 1s ease;
}
body.lost #lose_animation_container {
	animation: animatedBackground 30s linear 1;
	animation-fill-mode: forwards;
	height:100vh;
	width:100vw;
	opacity:1; 
}
body.lost #canvas_wrapper {
	opacity:0;
}



#foam {
	background-image:url(../images/bath.png);
	height: 100vh;
    width: 100vw;
    position: absolute;
    background-size: contain;
    bottom: 0;
    left: 0;
	background-repeat: no-repeat;
	background-position:bottom;
}
body.lost #foam {
	animation:animatedFoam 30s linear 1;
	animation-fill-mode:forwards;
}

@keyframes animatedBackground {
    0% { background-position: 0 0; }
	100% { background-position: 0 100vh; }
}
@keyframes animatedFoam {
    
	0% { bottom: 0; }
    100% { bottom:-40vh; }
}

@media screen and (orientation:portrait) {
	#portrait {
		display:block;
		position:absolute;
		width:100vw;
		height:100vh;
		background:var(--red);
		z-index:999;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	#portrait h1 {
		color:white;
		padding:2em;

	}
}
@media screen and (orientation:landscape) {
    #portrait {
		display:none;
	}
}

#canvas_wrapper {
	border:1px solid red;
	background:rgba(0,0,0,0.1);
}
#canvas {
	/*background:rgba(0,0,0,0.5);*/
	width:100vw;
	height:85vh;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	left:0;
	right:0;
	top:15vh; 
	transition:opacity 0.5s ease;
}


#game_main {
	position:relative;
	height:100vh;
	width:100%;
	transition:opacity 0.5s ease;
}
.question_active #game_main {
	opacity:0.5;
}
#ship {
	width:412px;
	height:445px;
	position:absolute;
	bottom:50px;
	left:500px;
}
.wrapped {
	margin:0;
	position:relative;
	padding-top:0;
}
.fullscreen {
	background:url(../images/mixbackground.jpg);
	background-size:cover;
	background-position:center bottom;
	width:100vw;
	height:100vh;
	overflow:hidden;
	transition:opacity 1s ease;
}
body.splash .fullscreen {
	opacity:0;
}
body .splash {
	transform:scale(0);
	opacity:0;
	transition:all 1s ease;
	width:0vw;
	height:0vh;
}
body.splash .splash {
	transform:scale(1);
	opacity:1;
	width:100vw;
	height:100vh;
	position:absolute;
	background-image:url(../images/splash.jpg);
	background-position:center;
	background-size:cover;
}
#game_navbar {
	height: 12vh;
    position: absolute;
    background-image: url(../images/header.png);
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 16vh;
    width: 100%;
    z-index: 2;
}
#game_logo {
	display:block;
	position: absolute;
	left: 22vw;
	width:27vh;
	max-width:20vw;
}

#shuffle_trigger {
	position:absolute;
	bottom:1em;
	left:1em;
}
#modal_trigger {
	position:absolute;
	bottom:1em;
	left:7em;
}

.question {
	border-radius:20px; 
	border:1px solid #aaa;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	position:absolute;
	right:13vh;
	top:13vh;
	width:80vw;
	max-width:35em;
	min-width:540px;
	background:rgba(255,255,255,0.9);
	color:#555;
	overflow:hidden;
	font-size:3vh;
	z-index:9;
	max-height:0vh;
	transform:scale(0);
	transition:all 0.3s ease;
}
body.question_active .question {
	max-height:100vh;
	transform:scale(1);
}
.question_wrap {
	padding:1.5em;
	position:relative;
}
.question h2 {
	background:var(--red);
	background:#2f3b46;
	color:white;
	margin:0;
	padding:0.5em 1em;
}
.question p {
	padding:0;
	margin:0;
	line-height:1.6em;
}
.question ul {
	margin:0;
	padding:0;
	margin-top:1em;
	list-style:none;
}
.question ul li {
	margin-top:1em;
}
.question .gotit {
	display:block;
	margin-top:1em;
	width:100%;
	border:3px solid black;
	text-transform:uppercase;
	font-size:150%;
	font-weight:bold;
	padding:0.5em;
	background:rgba(0,0,0,0.0);
	transition:background 0.3s ease;
	
}
.question .gotit:hover {
	background:rgba(0,0,0,0.1);
	cursor:pointer;
}

#howtoplay ,  .modal {
	border-radius:20px; 
	border:1px solid #aaa;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:17vh;
	width:80vw;
	max-width:55em;
	min-width:10em;
	background:rgba(255,255,255,0.9);
	color:#555;
	overflow:hidden;
	font-size:3vh;
	z-index:9;
	max-height:0vh;
	transform:scale(0);
	transition:all 0.3s ease;
	z-index:99;
}
#howtoplay .howtoplay_wrap, .modal .wrap {
	padding:1em;
}
#howtoplay.active,  .modal.active {
	height:auto;
	max-height:100vh;
	transform:scale(1);
}
#howtoplay h2, .modal h2 {
	background:#2f3b46;
	color:white;
	margin:0;
	padding:0.5em 1em;
}

.retromodal {
	z-index:999999;
	position:absolute;
	opacity:0;
	transition:all 0.3s ease;
	transform:scale(0);
	width:100vw;
	height:100vh;
}
.retromodal .wrap {
	padding:1em;
}
.retromodal h2 {
	/*font-family:'VT323',monospace;*/
	font-size:25vh;
	font-size:18vh;
	color:#fff;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	font-weight:normal;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
	margin-top:1.2em;
	margin-top:1.7em;
	margin-bottom:0;
	letter-spacing: -0.02em;
	letter-spacing:-0.04em;
}
.retromodal.active {
	transform:scale(1);
	opacity:1;
}
.retromodal button {
	font-family: 'VT323',monospace;
    text-transform: uppercase;
    background: #383;
    color: #8d8;
    border: none;
    padding: 0.6em;
    font-size: 5vh;
    display: block;
	margin: 0 auto;
	border:0.5vh solid white;
	opacity:0.7;
}
.retromodal button:hover {
	cursor:pointer;
	opacity:1;
}


.mobile_instructions {
	display:none;
}
p.mobile_instructions {
	font-size:2vh !important;
}
body.touch .desktop_instructions {
	display:none;
}
body.touch .mobile_instructions {
	display:block;
}
#howtoplay button,  .modal button {
	background: rgba(0,0,0,0.1);
    padding: 0.5em;
    display: block;
    border-radius: 0.5em;
	box-shadow: 0 0 0px rgba(0,0,0,0.2);
	border:none;
	text-align:center;
	text-transform:uppercase;
	display:block;
	margin:0 auto;
	font-size:100%;
}

.modal button:hover, #howtoplay button {
	cursor:pointer;
}


.touch_control {
	position:absolute;
	border:1vh solid white;
	transition:all 0.3s ease;
	opacity:0.07;
	display:none;
}
#status {
	font-family: "Arial Black", sans-serif;
	position:absolute;
	top:0; 
	left:2vh;
}
#status p {
	font-size:3vh;
	color:#999;
	margin:0;
	padding:1vh;
}
#status #score, #status #lives {
	color:white;
}
#status #supershots {
	color:blue;
}
canvas {
	/* fix clicking issues on launch rocket */
	cursor:pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} 
.touch_control:hover {
	cursor:pointer; /* make click events work on ios */
}
.answers li {
	cursor:pointer; /* make click events work on ios */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body.touch .touch_control {
	display:block;
}
.touch_control.circle {
	border-radius:50%;
}
.touch_control span {
	display:block;
	height:20vh;
	width:20vh;
	background:#000;
	color:white;
	font-size:18vh;
	font-weight:bold;
	text-shadow:0 0.05em 1px rgba(0,0,0,0.5);
	text-align:center;
	transition:all 0.3s ease;
}
.touch_control.circle span {
	border-radius:50%;
}

#touch_left {
	left:2em;
	top:40vh;
}
#touch_right {
	right:2em;
	top:40vh;
}
#touch_fire {
	left:48vw;
	bottom:8vh;
}

#get_question {
	position:absolute;
	bottom:10vh;
	right:10vh;
	height:10vh;
	width:10vh;
	border:0.5vh solid white;
	border-radius:50%;
	transition:all 0.3s ease;
}
#get_question span {
	display:block;
	width:8.5vh;
	height:8.5vh;
	background:var(--red);
	border-radius:50%;
	position:relative;
	left:0.25vh;
	top:0.25vh;
	color:white;
	font-size:8vh;
	font-weight:bold;
	text-shadow:0 0.05em 1px rgba(0,0,0,0.5);
	text-align:center;
	transition:all 0.3s ease;
}
#get_question:hover {
	cursor:pointer;
	filter:opacity(0.8);
}
#get_question:hover span {
	transform:scale(1.2);
}
body.question_active #get_question {
	transform:scale(0);
}
body.question_active .touch_control {
	transform:scale(0);
}
body.noammo #get_question {
	animation: waggle 1s 1s forwards ease-out;
	animation-iteration-count: infinite;
}
body.noammo.question_active #get_question {
	animation:waggle 4s 1s forwards ease-out;
	animation-iteration-count: infinite;
	opacity:0.5;
}
body.noammo #get_question span {
	background:#f00;
}
@keyframes waggle {
	0% {
	  transform: none;
	}
	50% {
	  transform: rotateZ(-20deg) scale(1.4);
	}
	60% {
	  transform: rotateZ(25deg) scale(1.1);
	}
	67.5% {
	  transform: rotateZ(-25deg) scale(1.4);
	}
	75% {
	  transform: rotateZ(25deg) scale(1.1);
	}
	82.5% {
	  transform: rotateZ(-12deg) scale(1.2);
	}
	85% {
	  transform: rotateZ(0) scale(1.2);
	}
	100% {
	  transform: rotateZ(0) scale(1);
	}
  }
body.question_active canvas {
	opacity:0.5;
}

.possible_answer label {
	transition:color 0.3s ease;
	margin-left:1em;
}
.possible_answer label:hover {
	cursor:pointer;
	color:black;
}
.possible_answer input[type=radio] {
	border:0px;
	width:1.5em;
	height:1.5em;
}

.answers li {
	display:block;
}
span.multiple_answer.answer_option {
    background: rgba(0,0,0,0.1);
    padding: 0.5em;
    margin-bottom: 0.5em;
    display: block;
	border-radius: 0.5em;
	box-shadow:0 0 0px rgba(0,0,0,0.2);
	transition:all 0.2s ease;
}
span.multiple_answer.answer_option:hover {
	box-shadow:0 0.2em 0.2em rgba(0,0,0,0.2);
	transform:translateY(-0.1em);
}

.blink {
	font-family:'VT323',monospace;
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:36vh;
	font-size:10vh;
	text-align:center;
	animation:1s ease-in 0s 1 zoomfade;
	opacity:0;
	transform:scale(0);
}

.blink.score {
	color:green;
	font-size:5vh;
}
.blink.bonus.poor {
	color:orange;
	font-size:7vh;	
}
.blink.bonus {
	color:blue;
	font-size:15vh;
	animation-duration:1.5s;
}
.blink.warning {
	color:red;
	font-size:20vh;
	animation-duration:1.5s;
}
@keyframes zoomfade {
	0% { 
	  transform: scale(1);
	  opacity:1;
	}
	50% {
		transform:scale(1.5);
		opacity:0.5;
	}
	100% {
	  transform: scale(25) rotateZ(110deg);
	  opacity:0;
	}
}
.answers p {
	font-style: italic;
	border-top: 1px solid #ddd;
	padding-top: 1em;
	margin-top: 2em;
	line-height:1em;
	color:#888;
}

@media screen and (min-width:1000px) {
	.question {
		font-size:2vh;
	}
}

#win_animation_container {
	height:0;
	width:0;
	overflow:hidden;
	position:absolute;
	opacity:0;
	transition:opacity 1s ease;
}
body.wonround #win_animation_container {
	height:100vh;
	width:100vw;
	top:0;
	left:0;
	opacity:1;
	z-index:9;
}

#bubbles {
	width:100vw;
	height:100vh;
}
.navlist {
	float:right;
	height:7vh;
}
.navlist img {
	max-height:7vh;
	padding:1vh;
}
.navbutton {
	background: none;
    border: none;
    color: white;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 1px solid white;
	margin-top: 1vh;
	margin-left:1vh;
    float: right;
    margin-right: 1vh;
	padding: 1vh;
	z-index:999;
	transition:all 0.3s ease;
}
.navbutton:hover {
	background:rgba(255,255,255,0.2);
	cursor:pointer;
}

.form-group {
	margin-bottom:1em;
	text-align:center;
}
.form-group label {
	width:6em;
	display:inline-block;
}
.form-group input {
	border:none;
	background:white;
	border-bottom:2px solid #aaa;
	font-size:3vh;
}

body #logout {
	display:none;
}
body #login {
	display:block;
	background-image:url(../images/login-btn.png);
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:15vh;
	background-size:contain;
    border: none!important;
    color: transparant;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 0px solid white;
    margin-top: 1vh;
    margin-left: 1vh;
    margin-right: 1vh;
    padding: 1vh;
}

body #logout {
	background-image:url(../images/logout.png);
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:15vh;
	background-size:contain;
    border: none!important;
    color: transparant;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 0px solid white;
    margin-top: 1vh;
    margin-left: 1vh;
    margin-right: 1vh;
    padding: 1vh;
}

body #restart {
	display:block;
	background-image:url(../images/restart-btn.png);
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:20vh;
	background-size:contain;
    border: none!important;
    color: transparant;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 0px solid white;
    margin-top: 1vh;
    margin-left: 1vh;
    margin-right: 1vh;
    padding: 1vh;
}

.gear {
	background-image:url(../images/gear-btn.png);
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	width:4vh;
	background-size:contain;
	margin-top:1.5vh;
	margin-right:4vh;
	
}

body.loggedin #login {
	display:none;
}
body.loggedin #logout {
	display:block;
}
span#dismiss_login {
    float: right;
}
span#dismiss_login:hover {
	cursor:pointer;
	opacity:0.8;
}

#boardwrap {
	max-width: 122vh;
    /* margin: 15vh; */
    position: absolute;
    top: 15vh;
    left: 5vh;
}
.card {
	width:17vh;
	height:17vh;
	position:relative;
	opacity:1;
	overflow:hidden;
	background-image:url(/gnarly/images/cardback.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#aaa;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25), 4px 4px 10px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease-in-out, transform 0.3s ease, opacity 0.5s ease; 
	
}
.card:hover {
	transform:scale(1.05);
	cursor:pointer;
}
.card_wrap {
	padding:1vh;
	float:left;
	transition:transform 2s ease;
}
.card.open {
	transform: rotateY(0);
    background: #fafafa;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
	animation-duration: .75s;
	background:#000;
}
.cardface {
	display: none;
}
.card.faded {
	opacity:0.0;
}
.card.open .cardface {
	height:17vh;
	width:17vh;
	display: block;
  }
.card.flipClose {
	/* transform: rotateY(90deg); */
	/* background: #fafafa; */
	cursor: default;
	animation-name: flipInYreverse;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .5s;
  }
  .card.match {
	cursor: default;
	/* background: #E5F720; */
	/* font-size: 33px; */
	animation-name: pulse;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
  }
  
  .card.unmatched {
	transform: rotateY(0);
	/* animation-name: pulse; */
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
	/* background: #e2043b; */
  }
  
  .card.disabled {
	pointer-events: none;
	opacity: 0;
  }

.cardface {
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-color:white;
}
.cardface.dishwasher {
	background-image:url(../images/icons/Dishwasher_Solid-01.png);
}


div#big_cards_wrap {
	margin:2em 0;
	display:flex;
	justify-content: space-around;
}
.big_card {
    width: 40vh;
    height: 40vh;
	background-image: url(/gnarly/images/cardback.jpg);
	background-size:cover;
}
.big_card:hover {
	cursor:pointer;
}
.big_card.open {
	transform: rotateY(0);
    background: #fafafa;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
	animation-duration: .75s;
}
.big_card.open .cardface {
	display:flex;
	align-items: center;
  justify-content: center;
  height: 40vh;
    background: #eee;
}
.big_card h3 {
	font-size:10vh;
}
.dismiss_gameover {
	margin-bottom:1em !important;
}

#turnswrap {
    position: absolute;
    top: 16vh;
	min-width: 3em;
	width:calc(100vw - 126vh);
	max-width:15em;
    outline: 1px solid #555;
    height: 76vh;
    right: 2vw;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background: white;
    padding: 1vh;
}
.turn {
    width: 100%;
    height: 6vh;
    outline: 1px solid #aaa;
    /* margin: 1vh; */
	margin-bottom: 1.5vh;
	background-color:rgba(100,255,100,0.5);
	opacity:1;
	transition:all 1s ease;
	
}
.turn.inactive {
	height:0;
	opacity:0;
	margin:0;
}
#turnswrap h4 {
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: -3em;
	text-transform: uppercase;
	color: #aaa;
	font-size:2vh;
}


/* timer */
#countdown {
	position: absolute;
    top: 2vh;
    left: calc(50vw - 5vh);
    height: 10vh;
    width: 10vh;
    text-align: center;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    /* padding: 1em; */
  }
  
  #countdown-number {
	color: white;
	display: inline-block;
	line-height: 4vh;
  }
  
  svg {
	position: absolute;
	top: 0;
	right: 0;
	width: 10vh;
	height: 10vh;
	transform: rotateY(-180deg) rotateZ(-90deg);
  }
  
  svg circle {
	stroke-dasharray: 113px;
	stroke-dashoffset: 0px;
	stroke-linecap: round;
	stroke-width: 2px;
	stroke: white;
	fill: none;
	
  }
 

  @keyframes countdown {
	from {
	  stroke-dashoffset: 0px;
	}
	to {
	  stroke-dashoffset: 113px;
	}
  }
/* end timer */

  /* animations */

@keyframes flipInY {
	from {
	  transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
	  animation-timing-function: ease-in;
	}
  
	40% {
	  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
	  animation-timing-function: ease-in;
	}
  
	60% {
	  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
	}
  
	80% {
	  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}
  
	to {
	  transform: perspective(400px);
	}
  }
  
  @keyframes flipInYreverse {
	from {
	  transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
	  animation-timing-function: ease-in;
	}
  
	/* to {
	  transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
	  animation-timing-function: ease-in;
	} */
  
	60% {
	  transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
	}
  
	80% {
	  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
	}
	to {
	  transform: perspective(400px);
	}
  }
  
  @keyframes rubberBand {
	from {
	  transform: scale3d(1, 1, 1);
	}
  
	30% {
	  transform: scale3d(1.25, 0.75, 1);
	}
  
	40% {
	  transform: scale3d(0.75, 1.25, 1);
	}
  
	50% {
	  transform: scale3d(1.15, 0.85, 1);
	}
  
	65% {
	  transform: scale3d(.95, 1.05, 1);
	}
  
	75% {
	  transform: scale3d(1.05, .95, 1);
	}
  
	to {
	  transform: scale3d(1, 1, 1);
	}
  }
  
  @keyframes pulse {
	from {
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  transform: scale3d(1.2, 1.2, 1.2);
	}
  
	to {
	  transform: scale3d(1, 1, 1);
	}
  }

  /* end animations */