@charset "utf-8";

/* CSS Document */

/*DIFERENTE DOS OUTROS JOGOS,
OS INPUTs FORAM COLOCADOS
NA DIV AREA DO BARALHO, DESTA FORMA
FOI POSSIVEL MARCAR PONTOS
OS INPUTS NA TAG P DO BUTTON NÃO DERAM CERTO
OS INPUTS  NA AREA DE FUNDO NÃO DERAM CERTO*/

/*AQUI COMEÇA COMANDO RESPONSIVO PARA 480PX*/

@media screen and (max-width:320px)
{

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:Verdana, Geneva, sans-serif;
	/*font-size:100%;*/
}

/*h1{
	display:none;
}*/

/*h2{
	color: yellow;
	font-size:2em;
	line-height:2em;
	text-shadow: 1px 1px black;
}*/

/*p{
	font-size:1.5em;
	font-weight:bolder;
	line-height:4em;
	color:yellow;
}*/

img{
	max-width:100%;
	height:auto;
}

/*ÁREA DO FUNDO*/

section.frente-verso-numeros-primos{
	width: 270px;
	height: 2800px;
	margin:5px;
	padding:10px 15px 10px 15px;
	position:relative;
	border:	yellow 1px solid; /*observacao: BUG??? se aumentar a borda, desconfigura o display flex*/
	/*background-color:#FFC;*/
	background-image: url(../imagem-13-jogos-matematicos/013-038-03-fundo-carteado.jpg);
	/*background:no-repeat;*/
	background-size: 100% 100%;
	box-sizing:border-box;
	/*overflow:hidden;*/
	/*cursor:	url(../imagem-13-jogos-matematicos/013-029-004-carrinhos-00-cursor.png), pointer;*/
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	
}

/*ÁREA 2 CARTAS BARALHO - area animacao e perspectiva*/

div#area-baralho{
	width: 100px;
	height: 150px;
	perspective: 100; /*obervacao - nao esta funionando*/
	-webkit-perspective:100;
	/*background-color:#FCC;	*/
	/*border:black solid 1px;*/
	/*position:absolute;	*/
	position:relative;		
}

/*BARALHO GIRANDO - quando mouse passa em cima*/

div#area-baralho:hover div.baralho-girando, div#area-baralho:hover div.baralho-girando{
	transform:rotateY(180deg);

}

/*BARALHO GIRANDO - velocidade transicao*/

div.baralho-girando{
	width: 100%;
	height: 100%;
	transition: 0.6s;  	
  	transform-style: preserve-3d;    	
  	position: absolute;

}

button.baralho-frente{
	width: 100%;
	height: 100%;
	display:block;
	backface-visibility: hidden;    	
  	position: absolute;
  	top: 0;  	
 	left: 0;
	z-index:2;
	background-image:url(../imagem-13-jogos-matematicos/013-037-02-carta-frente.jpg);
}

button.baralho-verso{
	width: 100%;
	height: 100%;
	display:block;
	backface-visibility: hidden;    	
	position: absolute;
  	top: 0;  	
 	left: 0;
	transform:rotateY(180deg);
	background-image:url(../imagem-13-jogos-matematicos/013-037-01-carta-verso.jpg);
}

button{
	font-size:30px;
	/*font-height:150px;*/
	font-weight:bolder;
	color: yellow;
	text-shadow:black 3px 3px;
	margin:0 auto 0 auto;
	/*observacao - numeros nao estao ficando centralizados - verificar*/
}




/*MOEDAS*/

input.moeda{
	width:100px;
	height:150px;
	/*top:-320vw;*/
	/*padding: 5px;*/
	/*margin: 0 auto 0 auto;*/
	/*position: absolute;*/
	/*appearance:none;*/
	/*visibility:hidden;*/ /*não funcionou-esconde tudo*/
	/*left:-9999px;*/
	/*position:relative;*/
	/*display:none;*/ /*não funcionou - esconde tudo*/
	opacity: 0;
	
}

/*MOEDAS*/


/*CONTADOR*/

section.frente-verso-numeros-primos{
	counter-reset: pontos; 
	
}

section.frente-verso-numeros-primos::after{
	content:"Total: " counter(pontos) " /11";
	width:200px;
	height:30px;
	top:-50px;
	right:5px;
	font-size:24px;
	font-weight:bolder;	
	text-align:center;
	text-shadow: white 1px 1px;
	background-color:#FC0;
	position:absolute;
	border-radius:5px;
	box-shadow: 2px 2px 6px black;
}

input.moeda:checked{
	counter-increment:pontos;
	visibility:hidden; /*esconde a marca checked*/
}

/*CONTADOR*/	

}