/* General */
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');

html{
	font-size: 6.5vh;
	font-family: 'Berkshire Swash', cursive;
	user-select: none;
	overflow: hidden; 
}

body{
	position:relative;
}

@media (orientation: portrait) {
	html{
		font-size: 6vw;
	}
}
	
html, body{
	height:100%;
	margin:0;
	text-align:center;
}

body > div{
	margin:0;
	position:relative;
	height:100%;
	overflow: hidden; 
}

.pantalla_transicion{
	background:black;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;
	pointer-events:none;
	transition: opacity 1s;
}

.pantalla_transicion.activa{
	pointer-events:auto;
	opacity:1;
}

.fondos, .fondos > div{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}

.fondos > div{
	background:url(fondo.jpg) 50% 50%;
	background-color:#809172;
	background-size: cover;
	opacity:0;
	transition: opacity 2s;
    z-index: -1;
}

.fondos > div.activo{
	opacity:1;
}

p{
	margin:auto;
}


.pantallas > div{
	display:flex;
	flex-direction: column;
	height:100%;
	position:relative;
	padding:0.5em;
	box-sizing: border-box;
}

.titulo{
	font-size:2em;
	text-shadow: 0.05em 0.05em 0 #4f3a33, -0.05em -0.05em 0 #4f3a33, 0.05em -0.05em 0 #4f3a33, -0.05em 0.05em 0 #4f3a33, 0.05em 0 0 #4f3a33, 0 0.05em 0 #4f3a33, -0.05em 0 0 #4f3a33, 0 -0.05em 0 #4f3a33, 0.1em 0.1em 0.2em black;
    color: #ce9951;
}

.subtitulo{
	margin:0 auto auto auto;
	padding:0.1em 1em;
	background:rgb(208 223 133 / 70%);
	backdrop-filter:blur(0.05em);
	border-radius:0.2em;
	box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.3);
}

button{
	margin-top:0.5em;
	background: brown;
	background: linear-gradient(360deg, #7b3030 0%, #e8af3c 100%);

	padding:0.2em 1.5em;
	cursor:pointer;
	color:yellow;
	border:none;
	font-size:1em;
	display:block;
	border-radius:1em;
	box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.5);
	
	text-shadow: 0 0 0.1em black;
	backdrop-filter:blur(0.03em);
	border: 0.1em solid #3e2306;
}

button:hover{
	background: linear-gradient(360deg, #a44 0%, #fc4 100%);
	color:#ffa;
}

button.selected{
	background: #ec0;
	background: linear-gradient(360deg, rgba(223,161,0,1) 0%, rgba(255,251,194,1) 68%, rgba(255,217,90,1) 100%);
	color:#621;
	text-shadow: 0 0 0.1em white;
}

button.acertada, button.acertada:hover{
	cursor:default;
	background:linear-gradient(360deg, #4e7b30 0%, #aae83c 100%);
}

button.error, button.error:hover{
	cursor:default;
	background:linear-gradient(360deg, rgb(123 48 48) 0%, #ff0000 100%);
}

.selector_buttons button{
	display:inline-block;
	border-radius:0;
	border-width:0.1em 0 0.1em 0.1em;
	padding:0.2em 0.5em;
}

.selector_buttons button:first-child{
	border-radius:1em 0 0 1em;
	padding-left:1em;
}

.selector_buttons button:last-child{
	border-radius:0 1em 1em 0;
	border-width:0.1em;
	padding-right:1em;
}


.acciones{
	margin:auto;
}

.acciones > button{
	background:url('titulo_pergamino.png') center right no-repeat;
	background-size:150% 100%;
	padding:0.3em 1.8em 0.3em 2em;
	margin:1em auto 1em auto;
	position:relative;
	cursor:pointer;
	font-size:0.7em;
	filter: drop-shadow(0.1em 0.1em 0.1em rgba(0,0,0,0.5));
	
	border: none;
    border-radius: 0;
    box-shadow: none;
	color:black;
	text-shadow:none;
	min-width:100%;
}

.acciones > button > span{
	position:absolute;
	background:url('iconos/naturaleza.png') 50% 50%;
	background-size:cover;
	width:2em;
	height:2em;
	top: 50%;
	margin-top: -1.1em;
	left:-1em;
	border-radius:50%;
	border:0.1em solid #724e2e;
	filter: drop-shadow(0.1em 0 0.1em rgba(50,20,0,0.5));
}

.acciones > button.naturaleza > span{background-image:url('iconos/naturaleza.png');}
.acciones > button.saber > span{background-image:url('iconos/saber.png');}
.acciones > button.elementos > span{background-image:url('iconos/elementos.png');}
.acciones > button.acrobacias > span{background-image:url('iconos/acrobacias.png');}
.acciones > button.criaturas > span{background-image:url('iconos/criaturas.png');}

.panel, .nuevas_palabras, .resultados{
	background:rgb(208 223 133 / 80%);
	backdrop-filter:blur(0.05em);
	border-radius:0.2em;
	box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.3);
	text-shadow: 0 0 0.2em rgb(208 223 133);
}

.pantallas > .nuevas_palabras, .pantallas > .resultados{
	
	/*border-radius:1em;*/
	height:calc(100% - 2em);
	margin:1em;
}

.panel .titulo{
	font-size:1.2em;
}

table{
	font-size:0.8em;
	margin:auto;
	table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0px;
}

table td{
	padding:0.2em 0.3em;
}

table tr+tr td{
	border-top:0.01em solid #975500;
}

/* Inicio */

.inicio .titulo{
	background:url(logo.png) no-repeat 50% 50%;
	background-size: contain;
	text-shadow:none;
	color:rgba(0,0,0,0);
	width:100%;
	height:2.5em;
	margin:auto;
}

.inicio button{
	margin: 0 auto;
}

/* Status bar */

.status_bar{
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:8em;
	background:rgb(208 223 133 / 90%);
	margin:auto;
	font-size:0.7em;
	text-align:center;
	display:flex;
	flex-direction:row;
	margin:auto;
	padding:0.1em;
	border-radius: 0 0 0.3em 0.3em;
	box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.3);
	display:none;
}

.status_bar.activa{
	display:flex;
}

.status_bar span{
	margin:auto;
}

.status_bar .periodo{
	background:url(ui/periodo1.png) no-repeat 50% 50%;
	background-size: contain;
	height:1em;
	width:3em;
	display:inline-block;
}

.status_bar .periodo1{background-image:url(ui/periodo1.png);}
.status_bar .periodo2{background-image:url(ui/periodo2.png);}
.status_bar .periodo3{background-image:url(ui/periodo3.png);}
.status_bar .periodo4{background-image:url(ui/periodo4.png);}
.status_bar .periodo5{background-image:url(ui/periodo5.png);}

/* Mejoras personaje */

@keyframes sube_burbuja {
  0% {top: 50%;opacity:1}
  30% {opacity:1}
  100% {top: 30%;opacity:0}
}

.mejoras_personaje > div{
	position:absolute;
	top:50%;
	padding:0;
	background: #cef;
	border-radius:0.5em;
	border:0.1em solid black;
	width:10em;
	margin:auto;
	left:0;
	right:0;
	box-shadow:0.2em 0.2em 0.2em rgba(0,0,0,0.6);
	background: linear-gradient(360deg, rgba(90,255,251,1) 0%, rgba(224,255,254,1) 51%, rgba(90,255,251,1) 100%);
	
  animation-name: sube_burbuja;
  animation-duration: 4s;
  animation-fill-mode:forwards;
  pointer-events: none;
}

/* Escena */

.escena .personaje{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:-1;
	
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size: contain;
}

.escena .personaje.directora{background-image:url(pj/directora.png);}
.escena .personaje.druida{background-image:url(pj/druida.png);}
.escena .personaje.erudita{background-image:url(pj/erudita.png);}
.escena .personaje.timida{background-image:url(pj/timida.png);}
.escena .personaje.simpatica{background-image:url(pj/simpatica.png);}
.escena .personaje.antipatica{background-image:url(pj/antipatica.png);}

.escena .dialogo{
	color:white;
	background:rgba(0,0,0,0.5);
	//box-shadow: -1em 0 1em black;
    text-shadow: 0 0 0.3em black, 0 0 0.3em black;
	margin-top:auto;
	padding:0.5em;
	font-size:0.7em;
	backdrop-filter:blur(0.05em);
	font-family:sans-serif;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
}

.escena .dialogo .nombre{
    text-align: left;
    margin: -1.2em 0 0.3em 1em;
}

.escena .dialogo .nombre em{
    display: inline-block;
    font-size: 1.2em;
    padding: 0 1em;
    background: black;
    border-radius: 1em;
    border: 0.02em solid white;
}

.escena .dialogo .nombre em:empty{
    border: none;
}

/* Ejercicios */

.ejercicio .progreso{
	border:0.1em solid black;
	border-radius:0.1em;
	margin-bottom:0.3em;
	margin-top:1em;
	background:black;
}

.ejercicio .progreso .barra{
	height:0.1em;
	background:green;
	width:50%;
}

.ejercicio .progreso .metas{
	position:relative;
}

.ejercicio .progreso .metas div{
    position: absolute;
    border: 0.1em solid black;
    /* border-radius: 0.2em; */
    height: 0.2em;
    width: 0.2em;
    background: saddlebrown;
    top: -0.25em;
    left: 100%;
    transform: rotate(45deg);
}

.progreso .metas div.alcanzada{
    background: lime;
}

.ejercicio .pregunta{
	margin:auto;
	font-size:1.4em;
	background:rgb(208 223 133 / 94%);
	border-radius:0.2em;
	padding:0.2em 0.5em;
	box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.3);
	min-width:4em;
}
.ejercicio .respuestas{
	display:flex;
	flex-direction: column;
}

.estrellas{
	margin:0 auto;
	padding:0.1em 0.3em;
}

.estrellas span{
}

.estrellas span:before{
	content:'';
	background-image:url(estrella.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	display:inline-block;
	width:1em;
	height:0.9em;
	opacity:0.3;
	position:relative;
	filter:brightness(0)
}

.estrellas span:after{
	content:'';
	background-image:url(estrella.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	display:inline-block;
	width:1em;
	height:0.9em;
	transition:all 1s ease-in;
	opacity:0.99;
	margin-left:-1em;
	position:relative;
	top:0;
	left:0;
}

.estrellas span.perdida:after{
	top:18em;
	left:3em;
	transform:rotateZ(1000deg)
}

/* Resultados */

.resultados .progreso{
	position:relative;
	border:0.07em solid black;
	background:black;
	border-radius:1em;
	margin:auto 4em;
}

.resultados .estrellas{
	margin-top:auto;
}

.resultados .estrellas span.sumada:after{
	top:5em;
	left:-5em;
	transform:scale(0)
}

.resultados .progreso .barra{
	height:1em;
	width:50%;
	border-radius:1em;
	
	background-image: linear-gradient(to bottom,
    rgba(255,255,255,0.3) 0%,
    rgba(255,255,255,0.1) 50%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0.1) 100%);
	background-color:#b5ff00;
}

.icono{
	position:absolute;
	background:url('iconos/naturaleza.png') 50% 50%;
	background-size:cover;
	width:2em;
	height:2em;
	top: 50%;
	margin-top: -1.1em;
	left:-1.6em;
	border-radius:50%;
	border:0.1em solid #724e2e;
	filter: drop-shadow(0.1em 0 0.1em rgba(50,20,0,0.5));
}

.icono.naturaleza{background-image:url('iconos/naturaleza.png');}
.icono.saber{background-image:url('iconos/saber.png');}
.icono.elementos{background-image:url('iconos/elementos.png');}
.icono.acrobacias{background-image:url('iconos/acrobacias.png');}
.icono.criaturas{background-image:url('iconos/criaturas.png');}
.icono.mental{background-image:url('iconos/mental.png');}
.icono.armonia{background-image:url('iconos/armonia.png');}




button.boton_icono{
	padding: 0.1em 0.3em;
    margin: 0.3em;
	position:absolute;
	left:0;
	top:0;
	display:none;
}

.pantalla_menu{
	background:rgba(0,0,0,0.5);
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:none;
}

.pantalla_menu .panel{
	margin:1em auto;
	width:80%;
	height:90%;
	
	display:flex;
	flex-direction: column;
}

.lista_frases{
	overflow:auto;
	font-family:sans-serif;
	text-align:left;
	border:0.1em solid #3e2306;
	border-color:rgb(150 170 70);
	margin:0.5em;
	border-radius:0.1em;
	background:rgba(255,255,200,0.2)
}

.lista_frases > div{
	padding:0.2em 1em;
	font-size:0.6em;
	cursor:pointer;
}

.lista_frases > div:nth-child(odd){
	background:rgba(255,255,200,0.3)
}

.lista_frases > div .trad{
	color:#742;
	font-style: italic;
}