/* Jokenpo by webdre.com.br */
@charset "utf-8";

/*@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');*/

@font-face {
    font-family: fonte;
    src: url("fonte.ttf");
}

html,body {
  height: 100%;
}

body{
	text-align:center;
	font-family: fonte, verdana;
	font-size:16px;
	min-height: 100%;
	background: #333;
	background-image: url(bg_menu.jpg);
	background-size: cover;
    background-position: center;
}

/*--> Mãos<--*/
.j1,.j2{
	display: inline-flex;
	flex-direction: column;
	text-indent: -5000px;
    justify-content: center;
    width: 126px;
    height: 121px;
	margin: 0px 20px;
    background-image: url(jkp_padrao.png);
	background-repeat:no-repeat;
    background-size: 310%;
    background-position-x: 0px;/*0 -124 -250*/
	background-position-y: -3px;
}
.j1{
	transform: scaleX(-1);
	filter: FlipH;
	filter: hue-rotate(5px);
}

/*--> Mãos Escolhidas<--*/
.j1Escolha, .j2Escolha{
	display:none;
	position: absolute;
    top: 140px;
    width: 185px;
    height: 152px;
	right: -82px;
	background-image: url(jkp_padrao.png);
	background-repeat:no-repeat;
    background-size: 310%;
    background-position-x: 0px;/*0 -124 -250*/
	background-position-y: -3px;	
}
.j1Escolha{
	transform: scaleX(-1);
	filter: FlipH;
	filter: hue-rotate(5px);
	left: -85px;
}
.j1Escolha i, .j2Escolha i{
	color: #999;
    display: block;
	font-size: 0.9em;
    margin-top: -10px;	
	margin-left: 16px;	
    text-align: left;
}

.j1Escolha i{
	transform: scaleX(-1);
    filter: FlipH;
    filter: hue-rotate(5px);    
    text-align: right;
}
/*--> Comprar Mãos<--*/
.comprarMao{
	display: none;
	flex-direction: column;
    justify-content: center;
	position: absolute;
    background: rgba(255, 255, 255, 0.9);
    left: 50%;
    width: 400px;
    margin-left: -200px;
    top: 40px;
    height: 240px;
    z-index: 10000;
    border-radius: 8px;	
}
.comprarMao i{
	color: #FF9800;
    margin-top: 17px;
}
.comprarMao .compra, .comprarMao .cancelaCompra{margin: 8px 0px;}
.maoComprada{
	margin: 0px auto;
    width: 140px;
    height: 115px;
	background-image: url(jkp_padrao.png);
	background-repeat:no-repeat;
    background-size: 310%;
    background-position-x: 0px;/*0 -124 -250*/
	background-position-y: -3px;	
}

/*--> Bonus Efeito <--*/
img.bEfeito{
	position: absolute;
	display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	z-index: 2000;
}

/*--> Som e Musica <--*/
.btSom, .btMusica{
	display:none;
	width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    background: rgba(255, 255, 255, 0.6);
	border: 1px solid #EEE;
    border-radius: 5px;
    padding: 3px;
	opacity:0.3;
}
	.btSomE{ left: 10px; }
	.btMusicaE{ left: 45px; }
	.btSomD{ right: 45px; }
	.btMusicaD{ right: 10px; }


/*--> Pontos e Moedas <--*/
.s1{
	width: 400px;
	height: 14px;
    display: inline-block;
	font-size:1.5em;
}
.s1{text-align: left}
.pontos,.moedas{
	position: absolute;
    right: 10px;
    top: 10px;
    width: 120px;
    line-height: 20px;
    color: #333;
    background: RGBA(255,255,255,0.6);
    border: 1px solid #EEE;
    border-radius: 4px;
}
.pontos i,.moedas i{
	margin-left: 4px;
    display: inline-block;
	text-align:right;
    width: 60px;
}
.moedas{ top: 35px; }
.moedas i{ width: 68px; }

/*--> Barra Moeda <--*/
.barraMoeda{
	display: block;
    width: 0%;
    background: #FC0;
    height: 2px;	
}


/*--> Barra Vida <--*/
.b1,.b2{
	width: 202px;
	height: 20px;
    border: #999 1px solid;
    display: inline-block;
	background: rgba(255, 255, 255, 0.6);
}

.b1 span,.b2 span{
	display:block;
	width: 200px;
	height: 18px;
	background:#990000;
	text-indent: -5000px;
}
.b1 span{ float:left; }
.b2 span{ float:right; }

/*--> Rounds <--*/
.etapa1{
	display: inline-block;
    margin: 0px 0px 0px 0px;
}
.etapa2{
	display: inline-block;
    margin: 0px 0px 0px 0px;
}
.etapa1 span, .etapa2 span{	
    display: inline-block;	    
    width: 12px;
    height: 12px;
    margin: 0px 2px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #999;
}

/*--> Rounds <--*/
.defesa1{
	display: inline-block;
    margin: 0px 5px 0px 115px;
	height: 12px;
}
.defesa2{
	display: inline-block;
    margin: 0px 115px 0px 5px;
	height: 12px;
}
.defesa1 span, .defesa2 span{	
    display: inline-block;	    
    width: 24px;
    height: 12px;
    margin: 0px -1px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #999;
}

.avisos{
	display:none;
	position: absolute;
    top: 30%;
    font-size: 2.5em;
    text-shadow: 2px 2px 0px #000;
    margin-left: -250px;
    z-index: 1000;
    color: #FFC107;
    width: 500px;
    left: 50%;
    letter-spacing: 2px;
}

span.voltarInicio{
	position: absolute;
    top: 10px;
    left: 20px;
    color: #9E9E9E;
    font-size: 3em;
	
	text-shadow: 0px 0px 4px #333;
}

/*--> estrutura <--*/

.estrutura{}

h1{
    font-size: 2em;
}

h1.logo{
    font-size: 6em;
	margin:20px auto 30px auto;
}

h2{
	margin-bottom: 20px;
    font-size: 1.8em;
}

h2.jogar{ margin-bottom: 10px; line-height: 30px; }

h3{
	font-size: 1em;
    color: #000;
    margin-top: -10px;
}

h4{
	font-size: 0.8em;
    color: #333;
    font-weight: lighter;	
}

h1, h2, h3, h4, .s1, .s2{
	text-shadow: 0px 0px 2px #FFF;
}

ul#main, ul#main li{
	text-align:center;
    height: 100%;
    width: 100%;
    margin: 0px;	
}

ul#main{ display: block; }

ul#main li{
	display: flex;
    flex-direction: column;
    justify-content: center;	
}

#main li#jogo, #main li#escolheJogador{ display:none; }

ul#personagens{
	width: 70%;
    margin: -15px auto 15px auto;
}

ul#personagens li{
	display: inline-flex;
	flex-direction: column;
	text-indent: -5000px;
    justify-content: center;
    width: 90px;
    height: 82px;
    background-position-x: 0px;/*0 -124 -250*/
	border-radius: 5px;
	margin: 2px;
    border: 1px solid #FFF;
}

ul#personagens li img{
	width: 40px;
	height: 40px;
    margin: -10px 0px 0px 30px;
}

audio{
	display:none;
}

/* ################### */
/* ################### */


/* balanço mao */
@-webkit-keyframes handmove {
    from {background-position-y: -3px;}
    to {background-position-y: 3px;}
}
@keyframes handmove {
    from {background-position-y: -3px;}
    to {background-position-y: 3px;}
}

/* jokenpo mao */
@-webkit-keyframes handjoga {
    0% {background-position-y: 5px;}
    20% {background-position-y: -5px;}
	40% {background-position-y: 5px;}
    60% {background-position-y: -5px;}
	80% {background-position-y: 5px;}
    100% {background-position-y: -5px;}
}
@keyframes handjoga {
    0% {background-position-y: 5px;}
    20% {background-position-y: -5px;}
	40% {background-position-y: 5px;}
    60% {background-position-y: -5px;}
	80% {background-position-y: 5px;}
    100% {background-position-y: -5px;}
}