body{
	-webkit-user-select: none;
	margin: 0;
	padding: 0;
	background-color: rgb(244, 244, 244);
	overflow: hidden;
	font-family: monospace;
}

*{
	box-sizing: border-box;
}

#wrap{
	margin: 0 auto; 
	overflow: hidden;
	padding-bottom: 70px;
	padding-top: 70px;
	position: fixed;
	width: 768px;
	-webkit-overflow-scrolling: touch;
}

#playarea{
	width: 768px; 
	height: 768px;
	background-color: rgb(2, 216, 208);
	box-shadow: 0px 0px 10px 1px black;
	position: relative;
	margin: 0;
}


#gameoverlay{
	position: fixed;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.1);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 768px;
}

#gameoverlay p{
	font-size: 60px;
	width: 50%;
	height: 85%;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 1px black;
	text-align: center;
}

#gameoverlay button{
	font-size: inherit;
	display: block;
	background-color: #6A9B2E;
	color: white;
	border-radius: 10px;
	border: solid;
	font-family: inherit;
	padding: 10px 15px;
}

.ball{
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: red;
	box-shadow: 1px 1px 3px;
	background-image: radial-gradient(red 30%, gray);
	position: absolute;
	display: inline-block;
	
	color: white;
	text-align: center;
	font-size: 18px;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;	
}

.ball.inmouth{
	position: relative;
	z-index: 999;
}

.ball[data-index="20"]{
	background-color: yellow;
	background-image: radial-gradient(yellow 30%, gray);
	
}

.scoreboard{
	width: 50%;
	display: inline-block;
	height: 21px;
}

.hippo{
	 /* display: none; */ 
	
	
	
	
	width: 20%;
	padding-bottom: 30%;
	border-radius: 200px;
	box-shadow: 0px 0px 10px;
	position: absolute;
	z-index: 1;
	transform-origin: bottom;
/*
	transition-timing-function: ease-in;
	-webkit-transition-duration: 0;
	transition-duration: 0;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-ms-transition-property: -ms-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;	
*/
	background-image: radial-gradient(#FC9756 20%, #DC5B0E 100%);
}

.hippo.chomp{
/*
	-webkit-transition-duration: 50ms;
	transition-duration: 50ms;
*/
}

.hippo:before{
	content: " ";
	width: 20px;
	height:15px;
	padding-bottom: 0px;
	border-radius: 1px;
	background-color: transparent;
	position: absolute;
	bottom: 20px;
	left: 0%;
	z-index: 9;
	
	box-shadow: 
		/* ear */
		50px 0px 0px 2px #FC9756,
		45px 0px 0px 2px #FC9756,
		40px 0px 0px 2px #FC9756,
		/* ear */
		95px 0px 0px 2px #FC9756,
		90px 0px 0px 2px #FC9756,
		85px 0px 0px 2px #FC9756,
		/* front legs */
		-10px -40px 40px 10px #FC9756,
		-10px -40px 0px 20px #DC5B0E,
		140px -40px 40px 10px #FC9756,
		140px -40px 0px 20px #DC5B0E,
		/* rear legs */
		-10px -160px 40px 5px #FC9756,
		-10px -160px 0px 22px #DC5B0E,
		140px -160px 40px 5px #FC9756,
		140px -160px 0px 22px #DC5B0E;
}

.hippo:after{
	background-image: 
		/* 	rgba(0, 0, 0, 0.14) */
		/* nostrils */
		radial-gradient(circle at 70% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),		
		radial-gradient(circle at 70% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		radial-gradient(circle at 30% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),				
		radial-gradient(circle at 30% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		/* eyes */
		radial-gradient(ellipse at 42% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 42% 50%, white 12%, transparent 0%),
		radial-gradient(ellipse at 58% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 58% 50%, white 12%, transparent 0%),
		/* eyebrows */
		radial-gradient(ellipse at 58% 49%, black 12%, transparent 0%),
		radial-gradient(ellipse at 42% 49%, black 12%, transparent 0%),
		/* actual background */
		radial-gradient(#FC9756 20%, #DC5B0E 100%);

		content: " ";
		width: 75%;
		border-radius: 45px;
		padding-bottom: 100%;
		display: block;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: auto;
		top: 80%;
		box-shadow: 0px 3px 3px black;
		

}


/* Yellow Hippo */

.hippo.yellow{
	background-image: radial-gradient(#FFEE41 20%, #D2B600 100%);
}

.hippo.yellow:before{
	box-shadow: 
		/* ear */
		50px 0px 0px 2px #FFEE41,
		45px 0px 0px 2px #FFEE41,
		40px 0px 0px 2px #FFEE41,
		/* ear */
		95px 0px 0px 2px #FFEE41,
		90px 0px 0px 2px #FFEE41,
		85px 0px 0px 2px #FFEE41,
		/* front legs */
		-10px -40px 40px 10px #FFEE41,
		-10px -40px 0px 20px #D2B600,
		140px -40px 40px 10px #FFEE41,
		140px -40px 0px 20px #D2B600,
		/* rear legs */
		-10px -160px 40px 5px #FFEE41,
		-10px -160px 0px 22px #D2B600,
		140px -160px 40px 5px #FFEE41,
		140px -160px 0px 22px #D2B600;	
}

.hippo.yellow:after{
	background-image: 
		/* 	rgba(0, 0, 0, 0.14) */
		/* nostrils */
		radial-gradient(circle at 70% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),		
		radial-gradient(circle at 70% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		radial-gradient(circle at 30% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),				
		radial-gradient(circle at 30% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		/* eyes */
		radial-gradient(ellipse at 42% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 42% 50%, white 12%, transparent 0%),
		radial-gradient(ellipse at 58% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 58% 50%, white 12%, transparent 0%),
		/* eyebrows */
		radial-gradient(ellipse at 58% 49%, black 12%, transparent 0%),
		radial-gradient(ellipse at 42% 49%, black 12%, transparent 0%),
		/* actual background */
		radial-gradient(#FFEE41 20%, #D2B600 100%);
	
}



/* Blue Hippo */

.hippo.blue{
	background-image: radial-gradient(#A8E0FB 20%, #0385C2 100%);
}

.hippo.blue:before{
	box-shadow: 
		/* ear */
		50px 0px 0px 2px #A8E0FB,
		45px 0px 0px 2px #A8E0FB,
		40px 0px 0px 2px #A8E0FB,
		/* ear */
		95px 0px 0px 2px #A8E0FB,
		90px 0px 0px 2px #A8E0FB,
		85px 0px 0px 2px #A8E0FB,
		/* front legs */
		-10px -40px 40px 10px #A8E0FB,
		-10px -40px 0px 20px #0385C2,
		140px -40px 40px 10px #A8E0FB,
		140px -40px 0px 20px #0385C2,
		/* rear legs */
		-10px -160px 40px 5px #A8E0FB,
		-10px -160px 0px 22px #0385C2,
		140px -160px 40px 5px #A8E0FB,
		140px -160px 0px 22px #0385C2;	
}

.hippo.blue:after{
	background-image: 
		/* 	rgba(0, 0, 0, 0.14) */
		/* nostrils */
		radial-gradient(circle at 70% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),		
		radial-gradient(circle at 70% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		radial-gradient(circle at 30% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),				
		radial-gradient(circle at 30% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		/* eyes */
		radial-gradient(ellipse at 42% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 42% 50%, white 12%, transparent 0%),
		radial-gradient(ellipse at 58% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 58% 50%, white 12%, transparent 0%),
		/* eyebrows */
		radial-gradient(ellipse at 58% 49%, black 12%, transparent 0%),
		radial-gradient(ellipse at 42% 49%, black 12%, transparent 0%),
		/* actual background */
		radial-gradient(#A8E0FB 20%, #0385C2 100%);
	
}




/* Green Hippo */

.hippo.green{
	background-image: radial-gradient(#b5ee83 20%, #6A9B2E 100%);
}

.hippo.green:before{
	box-shadow: 
		/* ear */
		50px 0px 0px 2px #B4ED83,
		45px 0px 0px 2px #B4ED83,
		40px 0px 0px 2px #B4ED83,
		/* ear */
		95px 0px 0px 2px #B4ED83,
		90px 0px 0px 2px #B4ED83,
		85px 0px 0px 2px #B4ED83,
		/* front legs */
		-10px -40px 40px 10px #B4ED83,
		-10px -40px 0px 20px #6A9B2E,
		140px -40px 40px 10px #B4ED83,
		140px -40px 0px 20px #6A9B2E,
		/* rear legs */
		-10px -160px 40px 5px #B4ED83,
		-10px -160px 0px 22px #6A9B2E,
		140px -160px 40px 5px #B4ED83,
		140px -160px 0px 22px #6A9B2E;	
}

.hippo.green:after{
	background-image: 
		/* 	rgba(0, 0, 0, 0.14) */
		/* nostrils */
		radial-gradient(circle at 70% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),		
		radial-gradient(circle at 70% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		radial-gradient(circle at 30% 87%, rgba(205, 205, 205, 0.4) 5%, transparent 8%),				
		radial-gradient(circle at 30% 88%, rgba(0, 0, 0, 0.6) 8%, transparent 8%),
		/* eyes */
		radial-gradient(ellipse at 42% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 42% 50%, white 12%, transparent 0%),
		radial-gradient(ellipse at 58% 52%, black 7%, transparent 0%),
		radial-gradient(ellipse at 58% 50%, white 12%, transparent 0%),
		/* eyebrows */
		radial-gradient(ellipse at 58% 49%, black 12%, transparent 0%),
		radial-gradient(ellipse at 42% 49%, black 12%, transparent 0%),
		/* actual background */
		radial-gradient(#B4ED83 20%, #6A9B2E 100%);
	
}


.hippo.one{
	-webkit-transform: rotate(-45deg) translateY(-30px);
	-webkit-transform-origin: 0 50%;
	transform: rotate(-45deg) translateY(-30px);
	transform-origin: 0 50%;
}
.hippo.one.chomp{
	-webkit-transform: rotate(-45deg) translateY(80px);
	transform: rotate(-45deg) translateY(80px);
}


.hippo.two{
	-webkit-transform: rotate(45deg) translateY(-30px) translateX(-150px);
	-webkit-transform-origin: 0 50%;
	transform: rotate(45deg) translateY(-30px) translateX(-150px);
	transform-origin: 0 50%;
	left: 100%;
}
.hippo.two.chomp{
	-webkit-transform: rotate(45deg) translateY(80px) translateX(-150px);
	transform: rotate(45deg) translateY(80px) translateX(-150px);
}


.hippo.three{
	-webkit-transform: rotate(-135deg) translateY(-30px) translateX(-150px);
	-webkit-transform-origin: 0 50%;
	transform: rotate(-135deg) translateY(-30px translateX(-150px));
	transform-origin: 0 50%;
	bottom: 0;
}
.hippo.three.chomp{
	-webkit-transform: rotate(-135deg) translateY(80px) translateX(-150px);
	transform: rotate(-135deg) translateY(80px) translateX(-150px);
}


.hippo.four{
	-webkit-transform: rotate(135deg) translateY(-30px);
	-webkit-transform-origin: 0 50%;
	transform: rotate(135deg) translateY(-30px);
	transform-origin: 0 50%;
	left: 100%;	
	bottom: 0;	
}
.hippo.four.chomp{
	-webkit-transform: rotate(135deg) translateY(80px);
	transform: rotate(135deg) translateY(80px);
}


/* Chomping and other effects */

.hippo:after{
	transform-origin: top;
	/* transition: all .2s; */		
}


.hippo.chomp::after{
	box-shadow: 0px 16px 24px black;
/* 	transition: all 100ms; */
	-webkit-transform: rotateX(45deg);
}

.hippo.winner::after{
	-webkit-animation: happydance .5s 100 alternate;	
}

@-webkit-keyframes happydance {
	0%{
		box-shadow: 0px 3px 3px black;
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);		
	}
	100%{
		box-shadow: 0px 16px 24px black;
		-webkit-transform: rotateX(45deg);
		transform: rotateX(45deg);
	}
}