body,html{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;

	overflow: hidden;

	text-align: center;
	
}

canvas{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}






/* HELP CONTAINER */
#help-container{
	position: absolute;
	z-index: 1;
	/* display: none; */
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,0.3);
	transition: opacity 0.25s;
	opacity: 0;
}

#help-container.visible{
/* 	top: 50%; */
	/* display: block; */
	opacity: 1;
}

#help-container .inner{
	position: absolute;

	/* background: green; */
	
	top: 20%;
	height: 50%;
	right: 9.5em;
	left: 18em;
	max-width: 700px;

}

#help-container .inner canvas,
#help-container .inner img{
	position: absolute;
    /* padding-right: 40px; */
    /* width: 40%; */
    /* height: auto; */
    box-sizing: border-box;
    display: none;
    /* top: 50%; */
    transform: translate(-100%, 0%);


    max-height: 100%;
    max-width: 9em;

}

#help-container.single-image .inner img{
	display: block;
}

#help-container.composite-image .inner canvas{
	display: block;
}

#help-container .inner .text{
	
	    position: relative;
    display: inline-block;
    margin-left: 30px;
    /* left: 40%; */
    /* right: 0; */
    min-height: 5em;
    top: 0%;
    /* transform: translate(0, -50%); */
    padding: 1em;
    background: white;
    border-radius: 1em;
    box-sizing: border-box;
    font-size: 1.25em;
}

#help-container .inner .text:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 30px 10px 0;
	border-color: transparent #FFFFFF;
	display: block;
	width: 0;
	z-index: 1;
	/* margin-top: -10px; */
	left: -30px;
	top: 1em;
}



/* SOME DEBUG PLACE */

pre{
	z-index: 1;
	position: absolute;
	color: white;
	max-height: 50%;
	max-width: 50%;
	overflow-y: auto;
}

.devmenu{
	position: relative;
	z-index: 2;
	background-color:white;
	display: inline-block;
	margin: 0.5em;
	opacity: 0.1;
}

.devmenu:hover{
	opacity: 1;
}



.devmenu > *{
	padding: 0.3em;
}

.devmenu > .arrow{
	padding-right: 0;
}




/* MOUSE/TOUCH LAYER */

.interaction-layer {
	position: absolute;

	z-index: 2;

	
	width: 100%;
	height: 100%;

	left: 0;
	top: 0;


}

.interaction-layer > .left,
.interaction-layer > .right{
	width: 15%;
	margin: -7.5%;

	position: absolute;
	top: 60%;
}



.interaction-layer > .right{
	right: 10%;
}

.interaction-layer > .left{
	left: 10%;
}

.interaction-layer .flash-1{
	animation: flash1 0.35s none;
}
.interaction-layer .flash-2{
	animation: flash2 0.35s none;
}

@keyframes flash1 {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes flash2 {
	0% {
		transform: scale(1);
	}
	51% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}




.interaction-layer .controls{
	position: absolute;
	right: 0.5em;
	top: 50%;
	/* background-color: rgba(0,0,0,0.2); */
/* 	transform: translate(0, -50%); */
}

.interaction-layer .controls .line{
	text-align: center;
	/* background-color: rgba(255,255,0,0.2); */
	font-size: 0;
}



.interaction-layer .controls .line .button{
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;

	display: inline-block;

	font-size: 16px;
	width: 3em;
	height: 3em;

	/* background-color: rgba(255,0,0,0.2); */
}









.interaction-layer #left{
	background-image: url(../img/game/arrow-left.png);
}
.interaction-layer #right{
	background-image: url(../img/game/arrow-right.png);
}
.interaction-layer #up{
	background-image: url(../img/game/arrow-up.png);
}
.interaction-layer #down{
	background-image: url(../img/game/arrow-down.png);
}
.interaction-layer #leftup{
	background-image: url(../img/game/arrow-left-up.png);
}
.interaction-layer #leftdown{
	background-image: url(../img/game/arrow-left-down.png);
}
.interaction-layer #rightup{
	background-image: url(../img/game/arrow-right-up.png);
}
.interaction-layer #rightdown{
	background-image: url(../img/game/arrow-right-down.png);
}



.interaction-layer #action_active,
.interaction-layer #shift {
	background-image: url(../img/game/action.png);
	width: 5em;
	height: 5em;
}

.interaction-layer #left,
.interaction-layer #right{
	padding: 0 0 2.0em 0;
    background-size: 100% auto;
}

.interaction-layer #leftup,
.interaction-layer #rightup,
.interaction-layer #leftdown,
.interaction-layer #rightdown{
	padding: 0 1.75em;
}


.interaction-layer .controls .line .button .inner{
	width: 100%;
	height: 100%;
}

.interaction-layer .controls .line .button.notify-change{
	animation: big-to-small 1s infinite;
}

@keyframes big-to-small {
	0%{
		transform: scale(1);
	}
	
	50%{
		transform: scale(2);
	}
	
	100%:{
		transform: scale(1);
	}
}



.interaction-layer #action_active .inner,
.interaction-layer #shift .inner{
	background-size: 90%;
	background-position: center;
	background-repeat: no-repeat;
}

.interaction-layer #shift .inner{
	background-image: url(../img/game/__turbo_off.png);
}

.interaction-layer #shift.on .inner{
	background-image: url(../img/game/__turbo_on.png);
}



@media screen and (max-width: 801px){
	.interaction-layer .controls .line .button{
		width: 2em;
		height: 2em;
	}
	.interaction-layer #action_active, .interaction-layer #shift{
		width: 3em;
		height: 3em;
	}
	.interaction-layer #left,
	.interaction-layer #right{
		padding: 0 0 1em 0;
	}

	.interaction-layer #leftup,
	.interaction-layer #rightup,
	.interaction-layer #leftdown,
	.interaction-layer #rightdown{
		padding: 0 1em;
	}

	#help-container .inner .text{
		font-size: 1em;
	}

	#help-container .inner{
		left: 9.5em;
		right: 9.5em;
	}

}

/* @media screen and (max-width: 601px){
	#help-container .inner{
		left: 0.5em;
		right: 9.5em;
	}
} */





/* AVATAR-SELECT */
.avatar-select{

	

	position: absolute;
    left: 0.5em;
    bottom: 0.5em;
    right: 0.5em;
    text-align: center;

	white-space: nowrap;
	visibility: hidden;
}

.avatar-select .avatar{

	box-sizing: border-box;
	width: 11.5%;
	margin: 0.5%;
	cursor: pointer;
	display: inline-block;
	position: relative;
}

.avatar-select .avatar img{
	width: 100%;
}

.avatar-select .avatar .front{
	visibility: visible;
}

.avatar-select .avatar .back{
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
}
/* 
.avatar-select .avatar:hover .front{
	visibility: visible;
}

.avatar-select .avatar:hover .back{
	visibility: hidden;
} */





/* POPUP MOVIES */
.popmovie-container{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;

	background:#000;
	overflow: hidden;

	z-index: 400;
}

.popmovie-container .video-js{
	position:absolute;
	left:50%;
	top:50%;

	transform:translate(-50%,-50%);

	width: 100% !important;
	height: 100%;
	
	/* z-index:100; */

}

.popmovie-container .vjs-poster{
	background-size: cover;
}

.popmovie-container .vjs-control-bar{
	display: none !important;
}

.popmovie-container button.x{
	position:absolute;
	right:0.5em;
	top:0.5em;
	width:3em;
	z-index:500
}



/* POPTERMINAL */
#pop-terminal{
	width:50%;
	height:100%;
	left:50%;
	top:0;
	position:absolute;
	z-index:1000;
	display:none;
}

#pop-terminal button.round.x{
	position: absolute;
	right: 0;
	top: 0;
	width: 3em;
	margin: 0.5em;
	z-index: 3;
}

#pop-terminal .terminal{
	border-radius:0;
	background:rgba(0,0,0,0.7);
	width:100%;
	height:100%;
	box-sizing:border-box;
}