@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oooh+Baby&display=swap');

body{
	 font-family: "Noto Sans JP", sans-serif;
}

portada-juego{
	background:url("img/portada.png");
	background-size: 100% 100%;

	button{
		position:absolute;
		left:10rem;
		top:20rem;
		
		width:13rem;
		height:3rem;
		
		background:url("img/startplay.png");
		background-size: 100% 100%;
		color:transparent; 
	}
	
	lista-creadores{
		margin:2rem auto;
		width:15rem;
	}
	
	h1{
		opacity: 0;
		font-size:1.5rem;
		margin:auto 1rem;
		text-align:center;
		color:white;
		text-shadow: 0.2rem 0.2rem 0.2rem black;
		
		img{
			width: 70%;
            height: 10rem;
            object-fit: contain;
            object-position: 50%;
			image-rendering: pixelated;
			display:block;
			margin:1rem auto;
		}
	}
}


@keyframes enfocando {
  0% {
    filter: blur(1rem);
  }
  20% {
    filter: blur(1rem);
  }
  60% {
    filter: blur(0.5rem);
  }
  100% {
    filter: blur(0);
  }
}

@keyframes abre_párpados {
  0% {
		height:50%;
  }
  30% {
		height:45%;
  }
  50% {
		height:45%;
  }
  70% {
		height:0;
  }
  100% {
		height:0;
  }
}


lilith-personaje, stephen-personaje{
	background-image:url('img/liwithoutbk.png');	
	position:absolute;
	inset:0;
	background-size: contain ;
	background-repeat: no-repeat ;
	background-position:center;
	top:3rem;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.5s 0.5s;
	
	&.visible{
		opacity:1;
	}
}

stephen-personaje{
	background-image:url('img/stephen.png');
	top:0;
}


barra-animo{
	position:absolute;
	right:1em;
	top: 1em;
	height:1.5em;
	width:15em;
	background-image:url('img/barraanimobk.png');
	background-size: 100% 100%;
	display: block;
	padding-left:2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.39rem;
	box-sizing: border-box;
	
	opacity:0;
	pointer-events:none;
	transition:opacity 1s 1s;
	
	&.visible{
		opacity:1;
	}
	
	nivel-animo {
		display: block;
		background-image:url('img/barraanimo.png');
		width: 50%;
		height: 100%;
		background-size: 12.7rem 100%;
		background-position:left center;
		background-repeat:no-repeat;
	}
}

diálogo-personajes{
	
	&[data-personaje="Deva"] personaje-actual{
		background-image:url('img/deva.png')
	}
	
	&[data-personaje="Juglar"] personaje-actual{
		background-image:url('img/juglar.png');
		filter: drop-shadow(0 0 1rem white);
	}
	
	opciones-diálogo{
	       position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        display: flex
;
        align-items: center;
        flex-direction: column;
        justify-content: center;
		
		button{
			background:url('img/optionbutton.png') transparent;
			background-size: 100% 100%;
			color:white;
			width: 30rem;
			height: 7rem;
			padding-top: 3.2rem;
			padding-left: 4rem;
		}
	}
	
	

	globo-frase{
		background-image:url('img/textbkWname.png');
		background-size: 100% 100%;
		/*aspect-ratio:1803 / 332;*/
		color:white;
		text-shadow:0.1rem 0.1rem 0.1rem #0007;
		min-height:10rem;
		
		box-sizing: border-box;
		padding:4em 3em 1.6em 3em;
		
		nombre-personaje{
		font-family: "Oooh Baby", cursive;
			color:white;
		}
		
		button{
			background:transparent;
			color:white;
			font-size:3rem;
			right: -1.6em;
            top: calc(50% - 3rem);
		}
		
		texto-oculto{
			opacity:0;
		}
		
		&.oculto{
			opacity:0;
		}
	}
	
	&[data-personaje="narrador"] globo-frase{
		background-image:url('img/textbk.png');
		
		nombre-personaje{
			display:none;
		}
	}
}